/* R14.11.D — Mobile chat-window layout: 40/40/20 + round overlay toggle.
 *
 * Available area = viewport - mobile-topbar (56px+safe-top) - 2x3 grid (~156px+safe-bot).
 * - View canvas (chat carousels): top 80% of available, two ports flex-equal → 40/40
 * - Composer (input): bottom 20% of available
 * - Round toggle button: between composer top and 2x3 grid (sits centered, 44px round)
 * - 5-button strip (.mag-top-strip): hidden by default, becomes a centered overlay
 *   over the chat area when toggle is on (body.wc-strip-on)
 */

@media (max-width: 820px) {
  /* R14.12.F / R14.14 — suggestion-carousel hidden by default; shown as
     a fixed overlay at the top of the chat area when topbar toggle is on. */
  body.page-workspace .panel-chat > .suggestion-carousel {
    display: none !important;
  }
  body.m-suggest-overlay .panel-chat > .suggestion-carousel {
    display: block !important;
    position: fixed !important;
    top: calc(var(--m-brand-h, 14px) + var(--mtopbar-h, 32px) + env(safe-area-inset-top, 0px) + 4px) !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 1450 !important;
    max-height: 50dvh !important;
    overflow: auto !important;
    background: #fff !important;
    border: 1px solid #ede9fe !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  }
  /* When a port adopts the suggestion carousel (desktop fallback), show. */
  .vc-body-inner > .suggestion-carousel { display: block !important; }

  /* R14.12.F — composer ramble hint: short, single-line, sits centered
     INSIDE the composer at the top (above the textarea row, below the
     bottom carousel border). */
  .composer-r4 .cr4-ramble-hint {
    display: block !important;
    order: -1 !important;
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
    padding: 0 8px !important;
    font: 500 0.74rem 'Inter', sans-serif !important;
    color: #6b7280 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* R14.12.E — workspace is a fixed app-shell. Block page-level scroll so
     the chat carousel never reveals what's "behind" it. Each port handles
     its own internal scroll. */
  body.page-workspace {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    height: 100dvh !important;
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw !important;
  }
  body.page-workspace .panel-chat,
  body.page-workspace .workspace-panels {
    overflow: hidden !important;
  }

  /* Tokens for the layout math. */
  :root {
    --wc-topbar-h: calc(56px + env(safe-area-inset-top, 0px));
    /* R14.12.C — sleek mode (default): grid + support shrunk to ~104px.
       Fat mode keeps the original 156px. */
    --wc-grid-h: calc(104px + env(safe-area-inset-bottom, 0px));
    --wc-available: calc(100dvh - var(--wc-topbar-h) - var(--wc-grid-h));
    --wc-composer-h: calc(var(--wc-available) * 0.20);
  }
  body.fat-mode {
    --wc-grid-h: calc(156px + env(safe-area-inset-bottom, 0px));
    --wc-available: calc(100dvh - var(--wc-topbar-h) - var(--wc-grid-h));
    --wc-composer-h: calc(var(--wc-available) * 0.20);
  }
  /* R14.12 — when brand banner is present, factor it into the topbar height. */
  body.has-brand-banner {
    --wc-topbar-h: calc(56px + 28px + env(safe-area-inset-top, 0px));
    --wc-available: calc(100dvh - var(--wc-topbar-h) - var(--wc-grid-h));
    --wc-composer-h: calc(var(--wc-available) * 0.20);
  }

  /* Composer: pinned at the bottom 20% of the available area, just above
     the 2x3 grid. R14.12.D — match the .chat-drawer .composer-r4
     specificity from mobile-composer.css so OUR fixed positioning wins
     when the (now-decorationless) chat-drawer wraps the composer. */
  .composer-r4,
  body .composer-r4,
  .chat-drawer .composer-r4 {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    bottom: var(--wc-grid-h, calc(104px + env(safe-area-inset-bottom, 0px))) !important;
    top: auto !important;
    height: var(--wc-composer-h, 110px) !important;
    min-height: 90px !important;
    max-height: 38vh !important;
    padding: 6px 10px !important;
    z-index: 1050 !important;
    background: #fff !important;
    border-top: 4px solid #000 !important;
    border-bottom: 4px solid #000 !important;
  }
  .composer-r4 .cr4-textarea,
  .chat-drawer .composer-r4 .cr4-textarea {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
  }
  /* Make the textarea fill the composer cell. .cr4-row is flex with
     textarea + send button. R14.12.B — cr4-row needs flex:1 to claim
     vertical space inside the composer's flex column; textarea then
     stretches via height:100% / min-height:0. */
  .composer-r4 .cr4-row {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
  .composer-r4 .cr4-textarea,
  .composer-r4 #cr4Input {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
  }
  .composer-r4 .cr4-send {
    align-self: stretch !important;
    height: auto !important;
  }
  /* The composer's tool row (cr4-tools) stays hidden on mobile (it's
     replaced by the overlay strip + 2x3 grid). Only the input + send
     row remains visible. */

  /* View canvas: from below the topbar to just above the composer. */
  .view-canvas {
    top: var(--wc-topbar-h) !important;
    bottom: calc(var(--wc-grid-h) + var(--wc-composer-h)) !important;
  }

  /* R14.12.B — color reversal on overlay-open was confusing; reverted.
     The rainbow stays stable whether the overlay is open or closed.
     The reversal will move into the dedicated settings menu in a later round. */

  /* R14.15.B — strip permanently hidden on mobile. No body.wc-strip-on
     override — functions moved to grid + composer pills + ⋯ overlay. */
  .mag-top-strip,
  body.wc-strip-on .mag-top-strip { display: none !important; }

  /* R14.12.H — small white discreet model picker pill. Sits at the top-left
     of the composer (left of where the ramble hint is). Tap → vertical menu
     of model options stacked UPWARD over the bottom carousel. */
  .wc-model-pill {
    position: fixed;
    left: 8px;
    /* R14.12.J — moved down a bit so it doesn't kiss the composer's
       fat black top border (was -24px → -36px below composer top). */
    bottom: calc(var(--wc-grid-h, 104px) + var(--wc-composer-h, 110px) - 36px);
    z-index: 1290;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
    font: 700 0.7rem 'Inter', sans-serif;
    cursor: pointer;
    display: inline-grid; place-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    -webkit-tap-highlight-color: transparent;
  }
  .wc-model-pill:active { background: #f3f4f6; }
  .wc-model-pill .wc-model-letter { line-height: 1; }

  .wc-model-menu-scrim {
    position: fixed; inset: 0; z-index: 1399;
    background: rgba(0, 0, 0, 0.20);
  }
  .wc-model-menu {
    position: fixed;
    left: 8px;
    bottom: calc(var(--wc-grid-h, 104px) + var(--wc-composer-h, 110px) + 8px);
    z-index: 1400;
    display: flex;
    flex-direction: column-reverse; /* stack UPWARD: first item nearest pill */
    gap: 6px;
    max-width: 70vw;
  }
  .wc-model-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 12px;
    font: 500 0.86rem 'Inter', sans-serif;
    color: #1f2937;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    -webkit-tap-highlight-color: transparent;
  }
  .wc-model-item:active { background: #f5f3ff; }
  .wc-model-item.is-active { border-color: #7c3aed; background: #f5f3ff; }
  .wc-model-item .wc-model-letter {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 9999px;
    background: linear-gradient(180deg, #c084fc, #9333ea);
    color: #fff;
    display: inline-grid; place-items: center;
    font: 700 0.78rem 'Inter', sans-serif;
  }
  .wc-model-item .wc-model-text { display: flex; flex-direction: column; }
  .wc-model-item .wc-model-name { font-weight: 600; }
  .wc-model-item .wc-model-desc { font-size: 0.74rem; color: #6b7280; margin-top: 1px; }

  /* R14.14 — lightbulb pill sits to the right of the model pill. Click
     cycles off → L1 → L2 → L3 → off. When on, renders wcHintOverlay. */
  .wc-bulb-pill {
    position: fixed;
    left: 36px;
    bottom: calc(var(--wc-grid-h, 104px) + var(--wc-composer-h, 110px) - 36px);
    z-index: 1290;
    height: 22px;
    min-width: 22px;
    padding: 0 6px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
    font: 700 0.68rem 'Inter', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    -webkit-tap-highlight-color: transparent;
  }
  .wc-bulb-pill:active { background: #f3f4f6; }
  .wc-bulb-pill.is-on {
    background: linear-gradient(180deg, #fde68a, #f59e0b);
    border-color: transparent;
    color: #78350f;
  }
  .wc-bulb-pill .wc-bulb-ic { font-size: 0.88rem; line-height: 1; }
  .wc-bulb-pill .wc-bulb-lvl { font-size: 0.66rem; line-height: 1; }

  .wc-hint-overlay {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--wc-grid-h, 104px) + var(--wc-composer-h, 110px) + 6px);
    z-index: 1250;
    padding: 10px 14px;
    background: rgba(254, 243, 199, 0.96);
    color: #78350f;
    border: 1px solid #f59e0b;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.25);
    font: 500 0.82rem/1.35 'Inter', sans-serif;
    backdrop-filter: saturate(1.2) blur(6px);
    -webkit-backdrop-filter: saturate(1.2) blur(6px);
  }
  .wc-hint-overlay .wc-hint-lvl {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #92400e;
    margin-bottom: 4px;
  }

  /* R14.15 — Modes pill on the RIGHT side of the composer top strip.
     Opens a vertical menu of chat-mode toggles (team / turbo / delay). */
  .wc-modes-pill {
    position: fixed;
    right: 8px;
    bottom: calc(var(--wc-grid-h, 104px) + var(--wc-composer-h, 110px) - 36px);
    z-index: 1290;
    height: 22px;
    min-width: 22px;
    padding: 0 7px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    -webkit-tap-highlight-color: transparent;
    font: 700 0.66rem 'Inter', sans-serif;
  }
  .wc-modes-pill:active { background: #f3f4f6; }
  .wc-modes-pill.is-on {
    background: linear-gradient(180deg, #c4b5fd, #7c3aed);
    border-color: transparent;
    color: #fff;
  }
  .wc-modes-pill .wc-modes-ic { font-size: 0.88rem; line-height: 1; }
  .wc-modes-pill .wc-modes-count {
    font-size: 0.62rem; line-height: 1; min-width: 6px;
  }
  .wc-modes-menu-scrim {
    position: fixed; inset: 0; z-index: 1399;
    background: rgba(0, 0, 0, 0.20);
  }
  .wc-modes-menu {
    position: fixed;
    right: 8px;
    bottom: calc(var(--wc-grid-h, 104px) + var(--wc-composer-h, 110px) + 8px);
    z-index: 1400;
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    max-width: 78vw;
    min-width: 240px;
  }
  .wc-modes-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 14px;
    font: 500 0.88rem 'Inter', sans-serif;
    color: #1f2937;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    -webkit-tap-highlight-color: transparent;
  }
  .wc-modes-item:active { background: #f5f3ff; }
  .wc-modes-item.is-on { border-color: #7c3aed; background: #f5f3ff; }
  .wc-modes-item .wc-modes-ic { font-size: 1.1rem; text-align: center; }
  .wc-modes-item .wc-modes-text { display: flex; flex-direction: column; min-width: 0; }
  .wc-modes-item .wc-modes-name { font-weight: 600; }
  .wc-modes-item .wc-modes-desc { font-size: 0.72rem; color: #6b7280; margin-top: 1px; }
  .wc-modes-item .wc-modes-toggle {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #6b7280;
  }
  .wc-modes-item.is-on .wc-modes-toggle {
    background: #7c3aed;
    color: #fff;
  }

  /* R14.12.E — black triangle toggle sits on the FAT BLACK line between the
     bottom view carousel and the text input (composer's TOP edge). When
     pressed, the 7-button strip pops UPWARD onto the chat slide above. */
  .wc-strip-toggle {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--wc-grid-h, 104px) + var(--wc-composer-h, 110px) - 9px);
    z-index: 1300;
    width: 36px;
    height: 18px;
    border-radius: 0 0 8px 8px;
    border: 0;
    background: #000;
    color: #fff;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  .wc-strip-toggle:active { transform: translateX(-50%) scale(0.92); }
  .wc-strip-toggle:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; }
}