/* ============================================================================
   elara_chat_mobile.css — mobile SOTA layer for /AI/chat (elara_chat.html).
   MODULE, not inline: elara_chat.html stays lean (precedent: elara_mission_wizard.js).
   EVERY rule is scoped to body.m-mobile (set by elara_chat_mobile.js ONLY when
   (max-width:760px) matches) and/or explicit mobile media queries — a desktop
   browser parsing this file applies NOTHING. Gate: tests/uiux/mobile_sota_100.py.
   Grown generation-by-generation by tests/godel_mobile_sota.py — bake on strict
   fitness rise with zero desktop regression, else the fragment is reverted.
   ============================================================================ */

/* [gen:header-merge] ONE compact top bar on mobile — the masthead collapses to 0 height while its
   checkbox-driven nav stays fully functional, toggled from a site-menu button inside #bar. */
.m-sitemenu{display:none}
@media (max-width:760px){
  body.m-mobile header{height:0;min-height:0;padding:0;border-bottom:none;overflow:visible}
  body.m-mobile header .brand,body.m-mobile header .hamb{display:none}
  body.m-mobile header nav{top:0;z-index:1200}
  body.m-mobile #bar .m-sitemenu{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:#e0b85a;cursor:pointer;padding:0 8px}
}

/* [gen:masthead-zero] elara_sota_ui.css loads AFTER this module and re-imposes header
   height/padding (measured: 16px residual) — the collapse must win the cascade. */
@media (max-width:760px){
  body.m-mobile header{height:0!important;min-height:0!important;padding:0!important;border:none!important;overflow:visible!important}
}

/* [gen:auto-hide-chrome] CNN-class space reclaim — the bar slides away on scroll-down and returns
   instantly on scroll-up. Reduced-motion users get the reclaim without the transition. */
@media (max-width:760px){
  body.m-mobile #bar{transition:margin-top .18s ease;will-change:margin-top}
  body.m-mobile.m-chrome-hide #bar{margin-top:calc(-1*var(--m-barH,56px))}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  body.m-mobile #bar{transition:none}
}

/* [gen:install-prompt] PWA install pill — standalone mode removes ALL browser chrome (beyond CNN's
   collapsed URL bar). Dismiss snoozes 14 days; never shown when already installed. */
@media (max-width:760px){
  body.m-mobile .m-installpill{position:fixed;left:12px;right:12px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:900;display:flex;align-items:center;gap:10px;background:#0e1b2e;border:1px solid #26405c;color:#eaf6fb;padding:10px 12px;border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8);font-size:13px}
  body.m-mobile .m-installpill[hidden]{display:none}
  body.m-mobile .m-installpill span{flex:1 1 auto}
  body.m-mobile .m-installpill .m-inst-go{background:#c79a3e;color:#081019;border:none;border-radius:8px;padding:8px 14px;font-weight:700;min-height:44px;min-width:44px}
  body.m-mobile .m-installpill .m-inst-x{background:none;border:none;color:#93a6bb;min-width:44px;min-height:44px}
  body.m-mobile .m-ioshint{position:fixed;left:12px;right:12px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:901;display:flex;flex-direction:column;gap:6px;background:#0e1b2e;border:1px solid #26405c;color:#eaf6fb;padding:12px 14px;border-radius:12px;font-size:13.5px}
  body.m-mobile .m-ioshint[hidden]{display:none}
  body.m-mobile .m-ioshint button{align-self:flex-end;background:#16263a;color:#eaf6fb;border:1px solid #26405c;border-radius:8px;padding:8px 14px;min-height:44px}
}

/* [gen:safe-area] complete the inset story: left/right on the bar (landscape notch) and top when
   running as an installed app (status-bar overlap). Bottom already handled by the composer. */
@media (max-width:760px){
  body.m-mobile #bar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  body.m-mobile #thread{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
@media (display-mode: standalone) and (max-width:760px){
  body.m-mobile #bar{padding-top:calc(6px + env(safe-area-inset-top))}
}

/* [gen:subbar-pill] the composer meta row (context meter / thinking effort / account / cost)
   collapses into ONE tappable pill on mobile — ~24-30px reclaimed; tap expands the real controls. */
@media (max-width:760px){
  body.m-mobile .subbar>*{display:none!important}
  body.m-mobile .subbar>.m-subpill{display:inline-flex!important;align-items:center;gap:6px;background:#16263a;border:none;border-radius:999px;padding:4px 12px;min-height:30px;color:#9fb6c6;font-size:12.5px;cursor:pointer}
  body.m-mobile .subbar.m-expanded>*:not([hidden]){display:inline-flex!important;align-items:center}
}

/* [gen:touch-44] 44px touch targets (Apple HIG / WCAG 2.5.5) — overrides the inline 34px bar
   buttons; bar padding tightens so the bar itself stays inside the 64px budget. */
@media (pointer:coarse) and (max-width:760px){
  body.m-mobile #bar{padding:6px 10px;gap:4px}
  body.m-mobile #mailBtn,body.m-mobile #voiceBtn,body.m-mobile #chatMenuBtn,body.m-mobile #themeBtn{width:44px!important;height:44px!important}
  body.m-mobile #menuBtn,body.m-mobile .m-sitemenu{min-width:44px;min-height:44px}
  body.m-mobile .modelbtn{min-height:44px;max-width:36vw}
  body.m-mobile .modelbtn .mname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28vw}
  body.m-mobile #attachBtn,body.m-mobile #toolsBtn,body.m-mobile #mic,body.m-mobile #send{min-width:44px;min-height:44px}
  body.m-mobile #scrolldown{min-width:44px;min-height:44px}
  body.m-mobile .chip,body.m-mobile .toolchip{min-height:44px}
  /* CEGAR L15: the secondary subbar controls (sign-in, context pill) were ~30px tall — lift the
     tappable ones to the 40px comfortable-target floor without inflating the whole meta row. */
  body.m-mobile #signin{min-height:40px;display:inline-flex;align-items:center}
  body.m-mobile .subbar>.m-subpill{min-height:40px}
}

/* [gen:bar-fit] no overlapped touch targets in the merged 412px bar — the model button is
   contained by its flex-shrunk parent, and the DISPLAYED model name drops the 'elara-' prefix on
   mobile (display-only; the real select value is untouched) so the text FITS instead of clipping. */
@media (max-width:760px){
  body.m-mobile #bar{flex-wrap:nowrap}
  body.m-mobile .modelpick{flex:0 1 auto;min-width:0;overflow:hidden}
  body.m-mobile .modelbtn{max-width:100%;min-width:0;padding:4px 8px}
  body.m-mobile .modelbtn .mchev{display:none}
}

/* [gen:hero-contrast] the empty-state hero sits over VIDEO — a light frame can wash the text out.
   A real dark colour floor under the scrim guarantees WCAG-AA whatever the frame shows (the same
   technique news front pages use under headlines). */
@media (max-width:760px){
  body.m-mobile .empty .cvhero .cvscrim{background-color:rgba(6,12,22,.66)}
}

/* [gen:new-message-pill] streamed content that arrives while the reader is scrolled up gets a
   visible 'New' badge on the scroll-to-latest FAB — no more silently missed answers. */
@media (max-width:760px){
  body.m-mobile #scrolldown.m-new{overflow:visible}
  body.m-mobile #scrolldown.m-new::after{content:'New';position:absolute;top:-7px;right:-5px;background:#c79a3e;color:#081019;font:700 10px/1 -apple-system,'Segoe UI',sans-serif;padding:3px 6px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.5)}
}

/* [gen:ergonomics] scroll containment (no pull-to-refresh hijack), tap-latency kill, and
   text-size stability on orientation change. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:760px){
  body.m-mobile #thread{overscroll-behavior:contain}
  body.m-mobile #bar button,body.m-mobile .composer button,body.m-mobile .chip,body.m-mobile .toolchip,body.m-mobile #scrolldown,body.m-mobile .m-subpill{touch-action:manipulation}
}

/* [gen:theme-color-sync] the Android status bar / installed-app title bar follows the active
   theme instead of staying navy over a light canvas. */

/* [gen:long-thread-perf] long conversations skip offscreen rendering work; the last 6 messages
   always render fully. Guarded by the perf-scroll-pin rubric check. */
@media (max-width:760px){
  body.m-mobile.m-longthread #thread .col>*:not(:nth-last-child(-n+6)){content-visibility:auto;contain-intrinsic-size:auto 240px}
}

/* [gen:tactile] physical press feedback on every touch control; motion-safe. */
@media (pointer:coarse) and (max-width:760px){
  body.m-mobile #bar button:active,body.m-mobile .composer button:active,body.m-mobile .chip:active,body.m-mobile .toolchip:active,body.m-mobile .m-subpill:active,body.m-mobile #scrolldown:active{transform:scale(.96)}
}
@media (pointer:coarse) and (max-width:760px) and (prefers-reduced-motion:reduce){
  body.m-mobile #bar button:active,body.m-mobile .composer button:active,body.m-mobile .chip:active,body.m-mobile .toolchip:active,body.m-mobile .m-subpill:active,body.m-mobile #scrolldown:active{transform:none}
}

/* [gen:a11y-readability] WCAG-AA on mobile: no sub-12px text, no sub-AA contrast in the hero,
   and the empty state keeps its landmark + single-h1 structure. */
@media (max-width:760px){
  body.m-mobile .subbar,body.m-mobile .subbar *{font-size:12.5px}
  body.m-mobile .toolchip,body.m-mobile .chip{font-size:13px}
  body.m-mobile .cveye{font-size:12px;color:#b9d7e2}
  body.m-mobile .cvscrim{background:linear-gradient(180deg,rgba(4,10,18,.58),rgba(4,10,18,.88))}
  body.m-mobile .cvtxt,body.m-mobile .cvtxt *{color:#e6f2f9}
  body.m-mobile #freeleft{font-size:12px}
}

/* [gen:design-polish] design pass from the walkthrough review: no floating drawer tab over content,
   a circular scroll FAB that reads in both themes, a New badge sitting clear of the chevron,
   theme-aware pills (light mode had dark blobs), and a calmer install pill. */
@media (max-width:760px){
  body.m-mobile #sideHandle{display:none}
  /* brand law: elara_chat.html declares *{border-radius:0!important} (sharp-corner P0) — the FAB
     stays square by design; depth comes from the shadow, not roundness */
  body.m-mobile #scrolldown{box-shadow:0 10px 26px -10px rgba(0,0,0,.45)}
  body.m-mobile #scrolldown.m-new::after{top:-10px;right:-10px;border:2px solid var(--navy,#070f1c)}
  body.light.m-mobile #scrolldown{background:#ffffff;border-color:#c3d2df;color:#0c1727}
  body.light.m-mobile .m-subpill{background:#eef4f8;color:#3c5468;border:1px solid #c3d2df}
  body.light.m-mobile .m-installpill{background:#ffffff;border-color:#c3d2df;color:#0c1727}
  body.light.m-mobile .m-installpill .m-inst-x{color:#54677a}
  body.light.m-mobile .m-ioshint{background:#ffffff;border-color:#c3d2df;color:#0c1727}
  body.m-mobile .m-installpill{font-size:12.5px;padding:8px 10px}
  /* the "Writing…" caption that names the streaming glow */
  body.m-mobile .m-writing{position:absolute;top:-22px;left:14px;font-size:11.5px;color:var(--cyan-soft,#7ee8f7);letter-spacing:.02em;pointer-events:none}
  body.m-mobile .m-writing::before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;background:var(--cyan-soft,#7ee8f7);box-shadow:0 0 6px var(--cyan-soft,#7ee8f7);vertical-align:middle;animation:m-blink 1s steps(2,start) infinite}
  @media (prefers-reduced-motion:reduce){body.m-mobile .m-writing::before{animation:none}}
}
@keyframes m-blink{50%{opacity:.25}}

/* [gen:premium-polish] walkthrough round-2 gaps: the tool-chip strip fades at the right edge so a
   thumb knows there is more to swipe; the hero yields a little more first-screen room to the
   composer on phones (the wow stays, the action is visible). */
@media (max-width:760px){
  body.m-mobile .toolchips{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
  body.m-mobile .empty .cvhero{max-height:30vh;min-height:132px}
  body.m-mobile .empty .cvtxt{padding-bottom:10px}
}

/* [gen:delight] the premium layer: context made VISIBLE — a gold hairline across the composer that
   fills as the 2,000,000-token window is used; a soft theme crossfade; the FAB lifted clear of the
   tool-chip row; the New badge lifted clear of the arrow. Motion respects prefers-reduced-motion
   via the page's global reduce rules. */
@media (max-width:760px){
  body.m-mobile .composer{position:relative}
  body.m-mobile .composer::before{content:'';position:absolute;top:-1px;left:0;height:2px;width:var(--m-ctx,0%);max-width:100%;
    background:linear-gradient(90deg,#c79a3e,#e0b85a);box-shadow:0 0 8px rgba(224,184,90,.55);transition:width .4s ease;z-index:5;pointer-events:none}
  /* theme crossfade on the small chrome only — NOT body (its bg is a radial-gradient, so the
     transition is invisible there yet forces a full-viewport repaint every time the auto-hide
     toggles a body class during scroll — measured 50ms+ jank on WebKit). */
  body.m-mobile #bar,body.m-mobile .composer,body.m-mobile #side,body.m-mobile #canvas{transition:background-color .25s ease,color .25s ease}
  body.m-mobile #scrolldown{bottom:178px}
  body.m-mobile #scrolldown.m-new::after{top:-14px;right:-10px}
}

/* [gen:canvas-mobile] the Canvas full-screen sheet feels native on a phone: it clears the notch and
   the home bar (safe-area), the Edit/Preview toggle reads like tabs, and a big thumb-friendly action
   bar sits above the home indicator. The rendered document is the default view (like the ChatGPT
   canvas), one tap flips to editing, Save writes it back to the chat. */
@media (max-width:760px){
  body.m-mobile #canvas.open{padding-top:env(safe-area-inset-top)}
  body.m-mobile #cvhead{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));gap:4px;flex-wrap:wrap}
  body.m-mobile #cvhead .cvbtn{min-height:44px}
  body.m-mobile #cvprev{padding:20px 18px calc(24px + env(safe-area-inset-bottom))}
  body.m-mobile #cvbody.editing #cvedit{flex-basis:50%;font-size:16px;padding-bottom:env(safe-area-inset-bottom)}
  /* the Edit toggle reads as a segmented tab on mobile */
  body.m-mobile #cvtoggle{border:1px solid var(--line2);background:var(--chip)}
  body.m-mobile #cvbody.editing #cvtoggle{background:var(--gold);color:#081019;border-color:var(--gold)}
  body.m-mobile #cvsave{background:var(--gold);color:#081019;font-weight:700}
  /* the novel "Open in canvas" action gets a visible word on the phone — an icon alone is a guess (John) */
  body.m-mobile .acts .act-canvas{width:auto;padding:0 9px;gap:5px}
  body.m-mobile .acts .act-canvas::after{content:'Canvas';font-size:12px;color:var(--mut)}
}

/* [gen:elevate-30] receipt: artifacts/mobile/elevation_receipt.json (gate 100/100 chromium+webkit).
   no-horizontal-scroll (long token wraps; code keeps its own scroller), overscroll/pull-to-refresh
   discipline, safe-area on the side drawer + scroll FAB, iOS callout suppressed on chrome (message text
   selectable), capped backdrop-blur. */
@media (max-width:760px){
  body.m-mobile .bubble,body.m-mobile .msg .body,body.m-mobile .msg,body.m-mobile .col>*{min-width:0;overflow-wrap:anywhere;word-break:break-word}
  body.m-mobile .bubble pre,body.m-mobile pre.code{overflow-x:auto;max-width:100%}
  body.m-mobile{overscroll-behavior-y:none}
  body.m-mobile #side{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  body.m-mobile #scrolldown{bottom:calc(178px + env(safe-area-inset-bottom))}
  body.m-mobile #bar,body.m-mobile .composer,body.m-mobile .toolchips,body.m-mobile #scrolldown,body.m-mobile header nav{-webkit-touch-callout:none}
  body.m-mobile .bubble,body.m-mobile .msg .body{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}
  body.m-mobile #bar,body.m-mobile .chatmenu,body.m-mobile #modelMenu{backdrop-filter:saturate(1.1) blur(10px);-webkit-backdrop-filter:saturate(1.1) blur(10px)}
  /* bar fit (receipt: artifacts/mobile/elevation_receipt.json): Collaborate moves to the chat menu on
     mobile so the bar has room; the model name never clips; Sign in never leaves the screen. */
  body.m-mobile #collabBtn{display:none}
  body.m-mobile .modelpick{flex:0 1 auto;min-width:3.4em}
  body.m-mobile #acctstate{flex:0 0 auto}
  /* calling-card glow (receipt: artifacts/mobile/elevation_receipt.json): the .LEKOLA / CODE ATELIER
     brand lockup MUST glow on every phone. An animated text-shadow can be throttled on iOS / WebKit
     Low Power Mode (the halo washes out); drop-shadow composites reliably as an always-on gold+cyan
     floor the breathing halo layers on top of. Desktop is untouched (this is body.m-mobile only). */
  body.m-mobile .side-foot .ec-lkn{filter:drop-shadow(0 0 6px rgba(224,184,90,.85)) drop-shadow(0 0 15px rgba(224,184,90,.5))}
  body.m-mobile .side-foot .ec-lksub{filter:drop-shadow(0 0 6px rgba(34,211,238,.9)) drop-shadow(0 0 16px rgba(34,211,238,.55))}
}