/* ============================================================================
   StyleKro CHAT — MOBILE LAYOUT (single source of truth)
   ============================================================================

   ⚠️  DO NOT REDEFINE THESE RULES IN chat.css OR common.css.
       This file is loaded LAST in index.html so its cascade ALWAYS wins.
       If you need to tweak the mobile chat layout, edit THIS file.

   Design pattern (inspired by the AI Stylist reference mockup):

     .screen.chat-page              ← flex column, fills 100dvh
       ├─ .topbar                   ← fixed-height header at top
       └─ .chat-shell               ← relative frame, fills remaining height
            ├─ .chat-main           ← absolute inset:0 (fills shell)
            │    ├─ .chat-clear-btn ← absolute top-right (trash icon)
            │    └─ .hero-stage     ← absolute inset:0 (fills chat-main)
            │         └─ .chat-list.overlay  ← absolute inset:0 (the scroll
            │              messages...         area; block layout; padding-
            │                                  bottom clears the composer)
            ├─ .composer-attach-row ← absolute, sits above composer
            ├─ .quick-prompts (FAB) ← absolute, sits above composer
            └─ .composer.composer-pill  ← absolute bottom:0, full-width

   Why this works:
   - chat-shell `position: relative; overflow: hidden` is the positioning
     ancestor. All children stack inside it.
   - Each `absolute inset:0` child fills its parent without depending on
     any flex height calculation (which broke repeatedly on Android WebView).
   - chat-list uses plain `display: block` for scrolling — no flex container
     quirks where items get bottom-aligned.
   - chat-list bottom-padding === composer height + safe-area, so the last
     message is always visible above the pinned composer.

   Selector strategy:
   - Every rule uses both `.screen:has(.chat-shell)` AND `.screen.chat-page`
     so older Android WebViews without `:has()` support still match.
   - `!important` is used on layout-critical positioning props because
     chat.css has many legacy global rules that would otherwise win.
   ============================================================================ */

@media (max-width: 760px) {
  .screen:has(.chat-shell),
  .screen.chat-page {
    height: 100dvh;
    min-height: 100dvh;
    padding: max(8px, env(safe-area-inset-top, 0px)) 0
             calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff, #fff8fa, #ffffff);
  }
  .screen:has(.chat-shell) .topbar,
  .screen.chat-page .topbar {
    flex: 0 0 auto;
    margin: 0 12px 6px;
    width: calc(100% - 24px);
  }

  /* chat-shell = the "phone" frame. Relative so the composer can pin to
     its bottom and the absolute chat-main/hero-stage/chat-list can fill
     it from the top edge. */
  .screen:has(.chat-shell) .chat-shell,
  .screen.chat-page .chat-shell,
  .chat-shell {
    display: block !important;
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    gap: 0;
    position: relative;
    overflow: hidden;
  }

  /* chat-main fills the shell. */
  .screen:has(.chat-shell) .chat-main,
  .screen.chat-page .chat-main,
  .chat-main {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    overflow: hidden;
    border-radius: 0;
    border: 0;
    background: transparent;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    width: auto !important;
    box-shadow: none;
  }

  /* hero-stage fills chat-main; chat-list fills hero-stage. */
  .screen:has(.chat-shell) .hero-stage,
  .screen.chat-page .hero-stage,
  .hero-stage {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    overflow: hidden;
    background: transparent;
    min-height: 0 !important;
    max-height: none !important;
    flex: none;
  }

  /* chat-list = the scroll container. Block layout (no flex juggling).
     Bottom padding leaves room for the absolutely-pinned composer so the
     last message is always visible above it. */
  .chat-list.overlay {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 14px 16px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: block !important;
    background: transparent;
    flex: none;
  }

  /* Bubble rows — clean reference-style layout: avatar + bubble with
     gap, alternating sides, soft shadows, no harsh borders. */
  .chat-list.overlay .bubble-row {
    display: flex !important;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    margin: 0 0 16px;
  }
  .chat-list.overlay .bubble-row.user { justify-content: flex-end; }
  .chat-list.overlay .bubble-row:last-child { margin-bottom: 0; }

  .chat-list.overlay .msg-avatar { flex: none; }
  .chat-list.overlay .msg-col          { max-width: calc(100% - 52px); }
  .chat-list.overlay .bubble-row.user .msg-col { max-width: 80%; }

  .chat-list.overlay .bubble {
    max-width: 100%;
    padding: 13px 16px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    font-size: 14.5px;
    line-height: 1.5;
    color: #2a2330;
    border: none;
  }
  .chat-list.overlay .bubble-row.user .bubble,
  .chat-list.overlay .bubble.user {
    background: linear-gradient(135deg, #ffe5ef, #ffd5e5);
    color: #2a1a22;
    box-shadow: 0 8px 24px rgba(255, 91, 147, 0.12);
  }

  /* Composer pill — pinned to chat-shell bottom, full-width, frosted. */
  .composer.composer-pill {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    flex: none;
    margin: 0 !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100%;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
    z-index: 5;
  }

  /* Attach preview floats just above the composer pill. */
  .composer-attach-row {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 6;
  }

  /* Quick-prompts FAB hovers above the composer, not over the bubbles. */
  .quick-prompts {
    right: 14px;
    bottom: calc(200px + env(safe-area-inset-bottom, 0px));
    z-index: 7;
  }

  /* Trash button in the top-right of chat-main, frosted pill. */
  .chat-clear-btn {
    top: 10px;
    right: 12px;
    z-index: 4;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }
}

/* Small phones — only adjust the visual paddings/sizes, never the
   layout-critical bottom padding (which must keep clearing the composer). */
@media (max-width: 420px) {
  .chat-list.overlay {
    /* keep the composer-clearing bottom padding from the 760px rule;
       only tighten the side padding here. */
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 12px !important;
  }
  .chat-list.overlay .msg-col          { max-width: calc(100% - 40px); }
  .chat-list.overlay .bubble-row.user .msg-col { max-width: 88%; }
}