/**
 * GoShopMe Mobile Optimization - Shared across ALL screens
 *
 * Mobile (<=768px)  -> full-width, edge-to-edge, no gutters
 * Desktop (>768px)  -> centered 390px mockup with shadow
 */

/* =============================================================
   1. BASE RESETS
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
}
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
}

/* =============================================================
   2. HIDE SCROLLBARS EVERYWHERE
   ============================================================= */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* =============================================================
   3. MOBILE: FULL-WIDTH, EDGE-TO-EDGE  (phones <= 768px)
   ============================================================= */
@media screen and (max-width: 768px) {

  /* --- 3a. White body - no gray gutters --- */
  html, body {
    background-color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* --- 3b. Main app wrappers: remove 390px cap --- */
  #app-shell,
  #auth-screen,
  #welcome_screen,
  #quiz-screen,
  #onboarding-screen,
  #main-content {
    max-width: 100vw !important;
    width: 100% !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [id$="-screen"],
  [id$="-container"],
  [id$="-wrapper"],
  [id$="-page"] {
    max-width: 100vw !important;
    width: 100% !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body > div:not(#chat-drawer):not(#chat-overlay):not(#chat-input-bar):not(#shai-chat-drawer):not(#chat-input-collapsed),
  body > main {
    max-width: 100vw !important;
    width: 100% !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Attribute selector for Tailwind max-w-[390px] */
  [class*="max-w-\[390px\]"],
  [class*="max-w-[390px]"] {
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* --- 3c. Fixed headers --- */
  header,
  #header,
  [id$="-header"] {
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    transform: none !important;
  }

  /* Header titles: keep centered (absolute left-50% + translateX(-50%)) */
  #app-header #page-title,
  #app-header #collection-page-title {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100vw - 140px) !important;
    right: auto !important;
    text-align: center !important;
  }

  /* --- 3d. Fixed bottom nav bars --- */
  nav,
  #bottom-nav,
  [id$="-nav"],
  [id$="-navigation"] {
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    transform: none !important;
  }

  /* --- 3e. Chat input bar and drawers --- */
  #chat-input-bar,
  #chat-drawer,
  [id$="-drawer"],
  [id$="-input-bar"],
  [id$="-chat-bar"] {
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* Tailwind centering trick: left-1/2 + -translate-x-1/2 (exclude chat drawers/bars - they need transform for slide) */
  [class*="left-1/2"][class*="-translate-x-1/2"]:not([class*="rounded-full"]):not(#chat-drawer):not(#shai-chat-drawer):not(#chat-input-bar):not(#chat-input-collapsed):not(#chat-overlay):not(#orders-chat-drawer):not(#orders-chat-input-bar):not(#return-chat-drawer):not(#return-chat-input-bar):not(#notif-chat-drawer):not(#notif-chat-input-bar):not(#page-title):not(#collection-page-title) {
    left:      0 !important;
    right:     0 !important;
    max-width: 100vw !important;
    width:     100% !important;
    transform: none !important;
  }

  /* Re-apply Y slide so hidden drawers stay off-screen */
  [class*="left-1/2"][class*="-translate-x-1/2"][class*="translate-y-full"] {
    transform: translateY(100%) !important;
  }

  /* --- 3f. Main content --- */
  main,
  [id="main-content"],
  [id$="-content"] {
    max-width: 100vw !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* --- 3g. Bottom nav: push buttons UP away from the gesture bar ---
   * More bottom padding on the inner row pushes the icons upward
   * within the bar on Android gesture-nav phones (Pixel, Samsung etc.)
   */
  #bottom-nav > div,
  nav#bottom-nav > div,
  #bottom-navigation > div,
  nav#bottom-navigation > div {
    padding-top: 2px !important;
    padding-bottom: 24px !important;
  }

  /* Chat drawer and input bar: full-width, docked to bottom nav (no gap) */
  #chat-drawer,
  #chat-input-bar,
  #chat-input-collapsed,
  #shai-chat-drawer,
  #return-chat-drawer,
  #return-chat-input-bar,
  #orders-chat-drawer,
  #orders-chat-input-bar,
  #notif-chat-drawer,
  #notif-chat-input-bar,
  #shai-chat-drawer-wrapper,
  #chat-drawer-wrapper {
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    bottom: var(--shai-nav-h, 64px) !important;
    overscroll-behavior: contain;
  }

  /* Chat input bar: no transform (prevents shift to left when using left-1/2 -translate-x-1/2) */
  #chat-input-bar,
  #chat-input-collapsed {
    position: fixed !important;
    transform: none !important;
    margin: 0 !important;
    padding-left: max(16px, env(safe-area-inset-left, 0)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0)) !important;
  }

  /* Chat drawer: no horizontal transform when visible */
  #chat-drawer:not(.translate-y-full),
  #shai-chat-drawer:not(.translate-y-full) {
    transform: none !important;
  }

  /* Drawer input area: compact, stable button layout (match Home) */
  #chat-input-drawer {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
  }
  #chat-input-drawer > div {
    min-height: 44px !important;
    align-items: center !important;
    padding: 8px 12px !important;
  }
  #chat-input-drawer-field {
    max-height: 32px !important;
  }
  #chat-input-bar > div {
    min-height: 44px !important;
    align-items: center !important;
  }

  /* Input bar buttons: 36x36, same layout as Home/Picks */
  #chat-input-bar .icon-button,
  #chat-input-drawer .icon-button {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #chat-input-bar .icon-button.hidden,
  #chat-input-drawer .icon-button.hidden,
  #chat-input-bar #send-btn.hidden,
  #chat-input-drawer #send-btn-drawer.hidden {
    display: none !important;
  }
  #chat-input-bar #send-btn:not(.hidden),
  #chat-input-drawer #send-btn-drawer:not(.hidden) {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #chat-input-bar #message-input,
  #chat-input-drawer-field {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  /* Re-apply Y slide when drawer is hidden (translate-y-full) */
  #chat-drawer.translate-y-full,
  #shai-chat-drawer.translate-y-full,
  #return-chat-drawer.translate-y-full,
  #orders-chat-drawer.translate-y-full,
  #notif-chat-drawer.translate-y-full {
    transform: translateY(100%) !important;
  }

  /* Chat drawer max-height: 64px bottom-16 + 80px safe zone for browser/status bar */
  #chat-drawer,
  #shai-chat-drawer,
  #return-chat-drawer,
  #orders-chat-drawer,
  [id$="-drawer"] {
    max-height: calc(100dvh - 144px) !important;
  }

} /* end @media mobile */

/* =============================================================
   3b. CHAT DRAWER SCROLL & TOUCH (all viewports)
   ============================================================= */
/* Dock to bottom nav: no gap between drawer/input bar and nav */
#chat-drawer,
#chat-input-bar,
#shai-chat-drawer,
#return-chat-drawer,
#return-chat-input-bar,
#orders-chat-drawer,
#orders-chat-input-bar,
#notif-chat-drawer,
#notif-chat-input-bar {
  bottom: var(--shai-nav-h, 64px) !important;
}

#chat-drawer,
#shai-chat-drawer,
#return-chat-drawer,
#orders-chat-drawer,
[id$="-drawer"] {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#chat-messages,
#return-chat-messages,
[id$="-chat-messages"],
[id$="-messages"] {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Drag handle: prevent scroll on touch, optimize for dragging */
#drag-handle-zone,
.chat-drawer-drag-zone,
[id$="-drag-handle-area"] {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* =============================================================
   4. DESKTOP: centered 390px mockup
   ============================================================= */
@media screen and (min-width: 769px) {
  body { background-color: #F6F6F6; }
}

/* =============================================================
   5. iOS INPUT ZOOM PREVENTION
   ============================================================= */
input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-size: 16px !important;
  -webkit-appearance: none;
  appearance: none;
}

@media screen and (min-width: 390px) {
  input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 14px !important;
  }
}

/* =============================================================
   6. TOUCH IMPROVEMENTS
   ============================================================= */
a, button, [role="button"], input, select, textarea {
  touch-action: manipulation;
}

* { -webkit-tap-highlight-color: rgba(147, 155, 251, 0.10); }

/* =============================================================
   7. IMAGES & MEDIA
   ============================================================= */
img, video, iframe {
  max-width: 100%;
  display: block;
}

/* =============================================================
   8. HORIZONTAL CAROUSELS
   ============================================================= */
.overflow-x-auto,
[class*="overflow-x-auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* =============================================================
   9. LONG TEXT
   ============================================================= */
p, h1, h2, h3, h4, h5, h6, span, a, label {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* =============================================================
   10. 320px PHONES
   ============================================================= */
@media screen and (max-width: 359px) {
  html { font-size: 14px; }
  .w-40 { width: 136px !important; }
  .w-44 { width: 150px !important; }
}

/* =============================================================
   11. LANDSCAPE ON SMALL PHONES
   ============================================================= */
@media screen and (orientation: landscape) and (max-height: 500px) {
  #app-shell,
  #auth-screen,
  [id$="-screen"] {
    height: auto !important;
    min-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =============================================================
   12. HELPER CLASSES
   ============================================================= */
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-area-top    { padding-top:    env(safe-area-inset-top,    0); }