/* Customer chat is a viewport sheet on phones, independent of the shop header,
   draggable launcher position and product purchase bar. Loaded after visual CSS. */
@media (max-width: 768px) {
  html.chat-mobile-root-open { overflow: hidden !important; overscroll-behavior: none; }
  body.chat-mobile-open { overflow: hidden !important; overscroll-behavior: none; }
  body.test-product-sticky-visible:not(.chat-mobile-open) #chatWidget {
    z-index: 19500 !important;
  }
  body.test-product-sticky-visible:not(.chat-mobile-open) #chatWidget:not(.chat-widget--custom-position) {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.chat-mobile-open #chatWidget {
    position: fixed !important; inset: 0 !important;
    z-index: 15000 !important; transform: none !important;
    pointer-events: none;
  }
  body.chat-mobile-open #chatPanel.chat-panel.open {
    box-sizing: border-box; position: fixed !important;
    left: calc(var(--chat-vv-left, 0px) + 8px) !important;
    top: calc(var(--chat-vv-top, 0px) + var(--chat-vv-height, 100dvh) - min(700px, var(--chat-vv-height, 100dvh) - 16px) - 8px) !important;
    right: auto !important; bottom: auto !important;
    width: calc(var(--chat-vv-width, 100vw) - 16px) !important;
    height: min(700px, calc(var(--chat-vv-height, 100dvh) - 16px)) !important;
    min-width: 0 !important; min-height: 0 !important; max-height: none !important;
    display: flex; flex-direction: column; overflow: hidden;
    transform: none !important; border-radius: 16px !important;
    pointer-events: auto;
    transition: width .32s ease, height .32s ease, left .32s ease, top .32s ease, border-radius .32s ease !important;
  }
  body.chat-mobile-open #chatPanel.chat-panel.open.is-expanded {
    left: var(--chat-vv-left, 0px) !important; top: var(--chat-vv-top, 0px) !important;
    width: var(--chat-vv-width, 100vw) !important;
    height: var(--chat-vv-height, 100dvh) !important;
    border: 0 !important; border-radius: 0 !important;
  }
  #chatPanel.chat-mobile-entering { animation: chatMobileEnter .32s ease both !important; }
  #chatPanel .chat-panel-header {
    flex: 0 0 auto; min-height: 64px; gap: 6px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
  }
  #chatPanel .chat-header-actions { gap: 0 !important; }
  #chatPanel .chat-minimize-btn, #chatPanel .chat-expand-btn {
    width: 44px; height: 44px; flex: 0 0 44px;
  }
  #chatPanel .chat-agent { gap: 7px !important; }
  #chatPanel .agent-name { white-space: normal; font-size: 14px; line-height: 1.2; }
  #chatPanel .chat-header-tagline { font-size: 11px; }
  #chatPanel .chat-topic-grid svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  #chatPanel .chat-messages {
    flex: 1 1 0 !important; min-height: 0 !important;
    padding: 12px !important; overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  #chatPanel .chat-start-screen { flex: 1 1 0 !important; min-height: 0 !important; overscroll-behavior: contain; }
  #chatPanel .chat-msg { max-width: 94%; font-size: 14px; overflow-wrap: anywhere; }
  #chatPanel .chat-msg-product { max-width: 100%; }
  #chatPanel .chat-product-card { min-width: 0; max-width: 100%; }
  #chatPanel #chatInputArea.chat-input-area {
    flex: 0 0 auto !important; min-width: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #chatPanel .chat-compose-field > textarea#chatInput {
    font-size: 16px !important; min-height: 44px !important;
    max-height: min(96px, 20dvh) !important; line-height: 1.4;
  }
  #chatPanel .chat-compose-actions { gap: 5px; min-height: 44px; }
  #chatPanel .chat-compose-actions > #chatImgBtn,
  #chatPanel .chat-compose-actions .chat-voice-btn,
  #chatPanel .chat-compose-actions .chat-voice-btn.is-recording,
  #chatPanel .chat-compose-actions .chat-send-btn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px;
  }
  #chatPanel #chatEndBtn { height: 44px !important; min-height: 44px !important; padding-inline: 7px !important; }
  #chatPanel #chatEndBtn span { font-size: 11px; }
  #chatPanel #chatImgStaging { flex: 0 0 auto; max-height: 64px; overflow-y: auto; }
  body.chat-mobile-open #pdStickyBar,
  body.chat-mobile-open #testProductStickyBar,
  body.chat-mobile-open .mobile-shop-bar { visibility: hidden !important; pointer-events: none !important; }
  body.chat-mobile-open #chatToggleBtn { display: none !important; }
  /* Viewport movement follows the keyboard directly; expansion still animates. */
  #chatPanel.chat-keyboard-open { transition: none !important; }
}
@keyframes chatMobileEnter {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #chatPanel.chat-mobile-entering { animation: none !important; }
  body.chat-mobile-open #chatPanel.chat-panel.open { transition: none !important; }
}