/* Ask view styles. Kept OUT of views/ask.js so that file stays under the 16 KB the
   auto-builder must see whole (BUILDER_PLAYBOOK section 8). Loaded once via a <link> the
   view injects; served from /assets/ (CSP style-src 'self'). Tokens only, both shells. */
@import url("/assets/askhud.css?v=2");
#view .trust{gap:10px 26px;margin-top:18px}
#view .trust span{gap:0}
#view .trust span::before{content:none}
#view .convo{text-transform:none;letter-spacing:normal}
#view .convo-t{min-width:0}
@media (max-width:640px){ #view .convo-t{white-space:normal;overflow:visible;text-overflow:clip} }
#view #qe:empty,#view #wx:empty{margin:0;min-height:0}
#view .hero,#view .asker,#view .keyhints,#view .toys,#view .trust,#view #wx,#view .suggest,#view .convos,#view #attention{max-width:760px;margin-left:auto;margin-right:auto}
#view .asker{display:flex;align-items:flex-end;gap:8px}
#view .asker #q{flex:1;min-height:44px;max-height:160px;resize:none;overflow-y:auto;line-height:1.4}
#view .asker #go,.askfs-root .asker #go{width:44px;height:44px;flex:0 0 auto;margin:0;padding:0;
  border-radius:9px;font-size:18px;line-height:1;cursor:pointer;text-transform:none;
  letter-spacing:normal;border:1px solid var(--line2,var(--line));
  background:var(--accent,var(--gold2));color:var(--bg)}
#view .asker #go.ask-stop,.askfs-root .asker #go.ask-stop{
  background:var(--bad,#b42318);border-color:var(--bad,#b42318);color:#fff}
#view .ask-halt,.askfs-root .ask-halt{display:inline-flex;align-items:center;justify-content:center;
  width:auto;margin:8px 0 0;padding:8px 16px;min-height:36px;border-radius:999px;
  border:1px solid var(--bad,#b42318);
  background:color-mix(in srgb,var(--bad,#b42318) 14%,transparent);
  color:var(--ink,var(--text));font:650 13px/1 var(--font-ui,inherit);
  cursor:pointer;text-transform:none;letter-spacing:normal}
#view .ctool{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;font-size:16px;border:1px solid var(--line2,var(--line));background:transparent;cursor:pointer}
#view .ctool:hover{border-color:var(--accent,var(--gold2))}
#view .ctool.rec{color:#fff;background:var(--bad,#b42318);border-color:var(--bad,#b42318);animation:askpulse 1.2s ease-in-out infinite}
@keyframes askpulse{0%,100%{opacity:1}50%{opacity:.55}}
#view .askphase{display:flex;flex-direction:column;gap:7px;color:var(--faint);font-size:14px;line-height:1.4;min-height:1.4em}
#view .askphase .ap-done{opacity:.55}
#view .askphase .ap-now{color:var(--ink,var(--text));font-weight:650}
#view .askphase .ap-now span{animation:askpulse 1.4s ease-in-out infinite}
#view .toys{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
#view .seg{display:inline-flex;border:1px solid var(--line2,var(--line));border-radius:999px;overflow:hidden}
#view .seg button{border:0;background:transparent;padding:6px 14px;font-size:12px;letter-spacing:.04em;cursor:pointer;text-transform:none}
#view .seg button[aria-pressed="true"]{background:var(--accent,var(--gold2));color:var(--bg)}
#view .toyhint{font-size:12px;color:var(--faint)}
#view .mpill{border:1px solid var(--line2,var(--line));background:transparent;color:var(--faint);border-radius:999px;padding:6px 12px;font-size:12px;letter-spacing:.03em;cursor:pointer;text-transform:none;transition:all .15s}
#view .mpill:hover{border-color:var(--accent,var(--gold2))}
#view .mpill.on{background:var(--accent,var(--gold2));color:var(--bg);border-color:var(--accent,var(--gold2));font-weight:600}
#view .wxcard2{max-width:760px;margin:14px auto 0;border:1px solid var(--line2,var(--line));border-radius:14px;background:var(--panel);overflow:hidden}
#view .wx-now{display:flex;align-items:center;gap:16px;padding:16px 18px}
#view .wx-now-e{font-size:40px;line-height:1}
#view .wx-now-main{display:flex;flex-direction:column;min-width:96px}
#view .wx-now-t{font:300 40px/1 var(--mono,inherit);color:var(--gold2,var(--accent))}
#view .wx-now-l{font-size:13px;color:var(--dim,var(--faint));margin-top:2px}
#view .wx-now-meta{display:flex;flex-direction:column;gap:2px;margin-left:auto;text-align:right;font-size:12px;color:var(--faint)}
#view .wx-now-place{color:var(--dim,var(--faint));font-weight:600}
#view .wx-days{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line2,var(--line))}
#view .wx-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;border-left:1px solid var(--line2,var(--line))}
#view .wx-day:first-child{border-left:0}
#view .wx-day-n{font:12px/1 var(--mono,inherit);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
#view .wx-day-e{font-size:22px;line-height:1;margin:2px 0}
#view .wx-day-t{font-size:13px;font-weight:600;color:var(--text,inherit)}
#view .wx-day-lo{color:var(--faint);font-weight:400;margin-left:4px}
#view .wx-day-p{font-size:12px;color:var(--accent,var(--gold2));min-height:14px}
@media (max-width:600px){#view .wx-days{grid-template-columns:repeat(5,1fr)}#view .wx-now-t{font-size:34px}#view .wx-now-e{font-size:34px}}
#view .rcore{position:relative;width:min(280px,64vw);height:min(280px,64vw);margin:0 auto}
#view .rcore-svg{width:100%;height:100%;overflow:visible}
#view .rc-halo{fill:#ff8a1e;opacity:.12;transform-box:fill-box;transform-origin:center;animation:rcHalo 4.5s ease-in-out infinite}
#view .rc-ring{fill:none;stroke:var(--accent,var(--gold2,#2de2ff));stroke-width:1;opacity:.24}
#view .rc-node{fill:var(--accent,var(--gold2,#2de2ff))}
#view .rc-flame{fill:url(#rcHex);transform-box:fill-box;transform-origin:center bottom;animation:rcFlame 3.2s ease-in-out infinite}
#view .rc-spark{fill:#fff3cf;transform-box:fill-box;transform-origin:center bottom;animation:rcSpark 2.4s ease-in-out infinite}
@keyframes rcHalo{0%,100%{opacity:.10;transform:scale(1)}50%{opacity:.22;transform:scale(1.10)}}
@keyframes rcFlame{0%,100%{transform:scale(1,1)}50%{transform:scale(.97,1.05)}}
@keyframes rcSpark{0%,100%{opacity:.7;transform:scale(1,1)}50%{opacity:1;transform:scale(.9,1.08)}}
@media (prefers-reduced-motion:reduce){#view .rc-halo,#view .rc-flame,#view .rc-spark{animation:none}}
@media (max-width:760px){#view .core{width:min(148px,38vw)}#view .hero{gap:4px}#view .tagline{margin-top:0}#view .trust{gap:8px 18px;margin-top:14px}#view .suggest,#view .convos{margin-top:18px}}
@media (prefers-reduced-motion:no-preference){#view .s-chip,#view .convo{transition:border-color .16s,color .16s,transform .16s var(--ease-out),box-shadow .16s}#view .s-chip:hover,#view .convo:hover{transform:translateY(-1px)}}

/* ============================================================================
   Ask: control legibility + fit-the-screen.        (tickets 2042 / 2148 / 1948)
   Appended deliberately: these rules must win over the defaults above, and this
   file has been regenerated repeatedly - anchored edits kept getting lost.
   ============================================================================ */

/* --- A. controls must state width, margin AND colour ---------------------
   The shells' generic button{} is width:100%, margin-top:20px and a colour chosen
   for a FILLED accent button. A control that only sets background:transparent
   inherits the rest: measured 1.0:1 contrast (an invisible glyph) and full-width
   slabs. Each rule below restates all three on purpose. */
#view .ctool{color:var(--dim)}
#view .ctool:hover{color:var(--ink,var(--text));border-color:var(--accent)}
#view .seg button{margin:0;color:var(--dim)}
#view .seg button:hover{color:var(--ink,var(--text))}
/* --accent-ink was invented in the view and is defined nowhere, so every theme
   silently took its dark #0b0d10 fallback - dark ink on a blue accent. --bg is the
   theme's own background and inverts correctly on any accent, and test_themes
   already proves accent clears 3:1 against bg in all 24 themes. */
#view .seg button[aria-pressed="true"]{color:var(--bg);font-weight:700}
#view .mpill{margin:0;width:auto;flex:0 0 auto;display:inline-flex;align-items:center;
  gap:6px;color:var(--dim)}
#view .mpill:hover{color:var(--ink,var(--text))}
/* A tint, not a fill: several modes can be on at once, and three filled pills side
   by side read as a traffic light. */
#view .mpill.on,#view .mpill[aria-pressed="true"]{color: var(--accent-on-bg);
  border-color:var(--accent);font-weight:700;
  background:color-mix(in srgb, var(--accent) 14%, transparent)}
#view #ttsVoice,#view #cloneVoice{margin:0;width:auto;height:30px;padding:0 12px;
  border:1px solid var(--line2,var(--line));border-radius:999px;background:transparent;
  color:var(--dim);font-size:12px;font-weight:600;cursor:pointer}
#view #ttsVoice:hover,#view #cloneVoice:hover{color:var(--ink,var(--text));
  border-color:var(--accent)}
#view #ttsVoice option{background:var(--panel);color:var(--ink,var(--text))}
#view .toys{justify-content:center;gap:8px}
#view .toys-tune{margin-top:7px;gap:10px}

/* --- B. fit a laptop screen ---------------------------------------------
   The hero stays the largest thing on the page, just not half of it. */
#view .rcore{width:min(150px,30vw);height:min(150px,30vw)}
#view .hero{gap:2px;padding:6px 0 12px}
#view .tagline{margin-top:0}
#view .asker{margin-top:2px}
#view .toys{margin-top:10px}
#view .keyhints{margin-top:9px}
#view .trust{margin-top:11px}
#view .suggest,#view .convos,#view #attention{margin-top:14px}
/* RECENT is a tail, not the point of the page: cap it so it cannot push everything
   else off screen, and let it scroll on its own. */
#view .convos{max-height:132px;overflow:auto}

/* The weather card becomes ONE row - conditions left, the days inline beside them.
   That is both Felarity's shape and ~130px shorter than stacking them. It is also a
   DOORWAY: clicking it opens the weather app (wired in ask.js), so it gets a real
   affordance and a focus ring. */
#view .wxcard2{display:flex;align-items:stretch;cursor:pointer;
  transition:border-color .16s,transform .16s}
#view .wxcard2:hover{border-color:var(--accent);transform:translateY(-1px)}
#view .wxcard2:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#view .wx-now{padding:11px 14px;gap:12px;flex:0 0 auto}
#view .wx-now-e{font-size:30px}
#view .wx-now-t{font-size:30px}
#view .wx-now-l{font-size:12px}
#view .wx-now-meta{margin-left:14px;font-size:12px;justify-content:center}
#view .wx-days{flex:1;border-top:0;border-left:1px solid var(--line2,var(--line))}
#view .wx-day{padding:8px 4px;gap:1px}
#view .wx-day-e{font-size:18px;margin:1px 0}
#view .wx-day-p{min-height:12px;font-size:12px}
/* On a phone the side-by-side layout (current | 5-day) overflows the card and the forecast
   gets clipped. Stack them: current conditions on top, the 5-day strip full-width below. */
@media (max-width:600px){
  #view .wxcard2{flex-direction:column;align-items:stretch}
  #view .wx-now{flex:1 1 auto}
  #view .wx-days{flex:1 1 auto;border-left:0;border-top:1px solid var(--line2,var(--line))}
  #view .wx-day{padding:9px 2px}
  #view .wx-day-n{font-size:12px}
  #view .wx-day-t{font-size:12px}
}

/* A short laptop gets a smaller hero rather than a scrollbar. */
@media (max-height:900px){
  #view .rcore{width:min(124px,26vw);height:min(124px,26vw)}
  #view .hero{padding:2px 0 8px}
}
@media (max-height:780px){
  #view .rcore{width:104px;height:104px}
  #view .trust{display:none}
}

/* --- laptop heights: the whole Ask screen fits without scrolling -----------
   Measured at 1512x820 after the first pass: 1100px document, 280px over. The
   trims below only apply to short viewports so a big display keeps the airier
   layout. #attention is hidden HERE ONLY - the same items are one click away in
   the notifications bell, so on the screen that must fit, the duplicate goes. */
@media (max-height:1100px){
  #view .hero{gap:0;padding:2px 0 8px}
  #view .wordmark{font-size:23px;line-height:1.15}
  #view .asker{margin-top:0}
  #view .toys{margin-top:8px}
  #view .toys-tune{margin-top:6px}
  #view .keyhints{margin-top:7px}
  #view .trust{margin-top:8px}
  #view #wx{margin-top:10px}
  #view .wxcard2{margin-top:10px}
  #view .suggest,#view .convos{margin-top:10px}
  /* the four prompt chips read fine on one line at laptop width */
  #view .suggest{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
  #view .s-chip{font-size:12px;padding:7px 12px}
  #view .convos{max-height:84px}
  #view #attention{display:none}
}
@media (max-height:880px){
  #view .rcore{width:96px;height:96px}
  #view .wordmark{font-size:21px}
  #view .convos{max-height:76px}
}

/* ---- composer menus: Mode and Voice -------------------------------------
   Eight controls in two rows collapsed into three pills plus two popovers.
   The pills stay quiet; the detail lives one click away. */
#view .menuwrap{position:relative;display:inline-flex}
#view .caret{width:0;height:0;margin-left:2px;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.7}
#view .popmenu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  z-index:1300;min-width:262px;max-width:min(320px,92vw);padding:8px;text-align:left;
  /* OPAQUE on purpose: --panel is translucent in the hud shell, so a popover using it
     alone let the page read straight through the menu text. The colour below is an
     opaque --bg base with the --panel tint composited over it - still fully themed. */
  background-color:var(--bg);
  background-image:linear-gradient(var(--panel),var(--panel));
  border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 48px rgba(0,0,0,.34)}
#view .popmenu[hidden]{display:none}
#view .pop-h{margin:8px 6px 5px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
#view .pop-h:first-child{margin-top:2px}
#view .pop-row{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 3px;
  padding:8px 9px;border-radius:10px;border:1px solid transparent;background:transparent;
  color:var(--ink,var(--text));cursor:pointer;text-align:left;font-size:13px}
#view .pop-row:hover{border-color:var(--line2,var(--line));
  background:color-mix(in srgb, var(--ink,var(--text)) 6%, transparent)}
#view .pop-row.on{border-color:var(--accent)}
#view .pop-i{font-size:14px;line-height:1;opacity:.9}
#view .pop-c{display:flex;flex-direction:column;flex:1;min-width:0}
#view .pop-c b{font-weight:650;font-size:13px}
#view .pop-c small{font-size:12px;color:var(--dim);font-weight:400}
#view .pop-x{flex:0 0 auto;padding:2px 8px;border-radius:999px;font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line2,var(--line))}
#view .pop-row.on .pop-x{color: var(--accent-on-bg);border-color:var(--accent)}
#view .pop-note{margin:6px 6px 2px;font-size:12px;color:var(--faint)}
/* the segmented controls inside a menu span its width */
#view .popmenu .seg{display:flex;width:100%;margin:2px 0}
#view .popmenu .seg button{flex:1;margin:0;padding:7px 6px;font-size:12px}
#view .popmenu #ttsVoice{display:block;width:100%;height:34px;margin:2px 0;padding:0 10px;
  border:1px solid var(--line2,var(--line));border-radius:10px;background:transparent;
  color:var(--ink,var(--text));font-size:13px;cursor:pointer}
#view .popmenu #ttsVoice option{background:var(--panel);color:var(--ink,var(--text))}
#view .pop-cta{display:block;width:100%;margin:8px 0 2px;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line2,var(--line));background:transparent;color:var(--dim);
  font-size:12.5px;font-weight:600;cursor:pointer}
#view .pop-cta:hover{color:var(--ink,var(--text));border-color:var(--accent)}
#view .pop-cta.rec{color:#fff;background:var(--bad,#b42318);border-color:var(--bad,#b42318)}
/* The keyboard hints are gone from the markup; keep them gone if anything re-adds them. */
#view .keyhints{display:none}

/* ---- the conversation ----------------------------------------------------
   Measured before this block: .thread had max-width:none, so the user's turn sat
   1000px from the answer on a wide screen. One column, shared measure. */
#view .thread{max-width:880px;margin:0 auto 20px;padding:0;gap:0;max-height:none;
  overflow:visible}

/* The assistant is PROSE, not a card. A border around a long answer fights the
   reading, which is why no serious assistant ships one. */
#view .turn.bot{align-self:stretch;max-width:100%;margin:0 0 30px;padding:0;
  border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-radius:0}
#view .turn.bot .tx{font-family:var(--font-ui);font-size:15.5px;line-height:1.72;
  color:var(--ink,var(--text));letter-spacing:0}
#view .turn.bot .tx p{margin:0 0 12px}
#view .turn.bot .tx p:last-child{margin-bottom:0}
#view .turn.bot .tx code{font-family:var(--mono);font-size:.92em;padding:1px 5px;
  border-radius:12px;background:color-mix(in srgb,var(--ink,var(--text)) 8%,transparent)}
#view .turn.bot .tx pre{font-family:var(--mono);font-size:13px;line-height:1.55;
  padding:12px 14px;border-radius:10px;overflow:auto;
  background:color-mix(in srgb,var(--ink,var(--text)) 7%,transparent)}
#view .turn.bot .tx .ask-ev:not([open]){margin:8px 0 0;padding:0;border:0;background:none;
  display:inline-flex;vertical-align:middle}
#view .turn.bot .tx .ask-ev:not([open])>summary{display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border:1px solid var(--line2);border-radius:999px;min-height:32px}
#view .turn.bot .tx .ask-ev[open]{margin:10px 0 4px;padding:8px 12px;
  border:1px solid var(--line2);border-radius:12px;
  background:color-mix(in srgb,var(--ink,var(--text)) 4%,var(--panel))}
#view .turn.bot .tx .ask-ev>summary{cursor:pointer;font:650 13px/1.3 var(--font-ui,inherit);
  color:var(--dim);list-style:none}
#view .turn.bot .tx .ask-ev>summary::-webkit-details-marker{display:none}
#view .turn.bot .tx .ask-ev[open]>summary{margin-bottom:10px;color:var(--ink)}
#view .turn.bot .tx .ask-ev>p:first-of-type{font-weight:720;margin:0 0 10px}
#view .turn.bot .tx .ask-ev ol,#view .turn.bot .tx .ask-ev ul{margin:0;padding-left:22px}
#view .turn.bot .tx .ask-ev li{margin:0 0 12px;line-height:1.55;font-size:14px}
#view .turn.bot .tx .ask-ev li:last-child{margin-bottom:0}

/* The person's turn stays a bubble: it is short, and it needs to be attributable at a
   glance. Right-aligned and capped so a long question still wraps inside the column. */
#view .turn.me{display:flex;flex-direction:column;align-self:flex-end;max-width:min(78%,560px);margin:0 0 26px;
  padding:11px 16px;border:0;border-radius:18px 18px 5px 18px;
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  color:var(--ink,var(--text));font-family:var(--font-ui);font-size:15px;
  line-height:1.55;backdrop-filter:none;-webkit-backdrop-filter:none}
#view .turn.them{align-self:flex-start;max-width:min(78%,560px);margin:0 0 26px;
  padding:11px 16px;border:1px solid var(--line2);border-radius:18px 18px 18px 5px;
  background:var(--panel);color:var(--ink,var(--text));font-family:var(--font-ui);
  font-size:15px;line-height:1.55}
#view .turn-who{font:11px/1.3 var(--mono);letter-spacing:.04em;color: var(--accent-on-bg);
  margin:0 0 6px;text-transform:uppercase}
#view #ask-group,.askfs-root #ask-group{max-width:880px;margin:0 auto 10px;
  font:12px/1.4 var(--mono);letter-spacing:.04em;color:var(--dim)}

/* Citations: quiet chips, not a wall of buttons. */
#view .cites{gap:6px;margin-top:12px;padding-top:0;border-top:0}
#view .cite{font-family:var(--font-ui);font-size:12px;letter-spacing:0;
  padding:4px 10px;border-radius:999px;text-transform:none}

/* Meta: the quietest thing on the page. Sentence case, no shouting. */
#view .meta{margin-top:10px;font-family:var(--font-ui);font-size:12px;
  letter-spacing:0;text-transform:none;color:var(--faint)}

/* Always visible — hover-only fade hid Copy/Play/Pause/Stop on touch and
   on any chat reopened from history. */
#view .acts,.askfs-root .acts{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:10px;
  padding-top:0;border-top:0;opacity:1;overflow-x:auto;scrollbar-width:thin}
#view .turn.bot .ask-thumbs{display:inline-flex;flex-wrap:nowrap;gap:6px;margin:10px 0 0;
  vertical-align:middle}
#view .act,.askfs-root .act{margin:0;width:auto;padding:7px 12px;border-radius:8px;
  border:1px solid var(--line2,var(--line));background:transparent;color:var(--ink,var(--text));
  font-family:var(--font-ui);font-size:12px;font-weight:600;cursor:pointer}
#view .act:hover,.askfs-root .act:hover{border-color:var(--accent)}
#view .act[disabled],.askfs-root .act[disabled]{opacity:.4;cursor:default}
#view .turn.me .ask-edit{margin-top:8px;align-self:flex-end}
#view .ask-edit-box{margin-top:8px;display:flex;flex-direction:column;gap:8px;width:min(100%,560px)}
#view .ask-edit-ta{width:100%;min-height:88px;margin:0;box-sizing:border-box;
  font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line2);
  border-radius:10px;padding:10px 12px;resize:vertical}
#view .ask-edit-row{display:flex;flex-wrap:wrap;gap:6px}

/* Listen pillow: play/pause, voice, speed, close. Above the phone tab bar. */
.ask-tts-pill{position:fixed;z-index:11000;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:8px;max-width:min(540px,calc(100vw - 24px));
  padding:7px 8px 7px 8px;border-radius:999px;
  background-color:var(--bg);background-image:linear-gradient(var(--panel),var(--panel));
  border:1px solid var(--line);box-shadow:0 12px 36px rgb(0 0 0/.32)}
.ask-tts-pill[hidden]{display:none}
.ask-tts-pp{width:auto;min-width:64px;height:36px;margin:0;padding:0 12px;border-radius:999px;
  border:1px solid var(--line2);background:var(--accent);color:var(--bg,#111);
  font:650 13px/1 var(--font-ui,inherit);cursor:pointer}
.ask-tts-voice{height:36px;margin:0;padding:0 8px;min-width:92px;max-width:140px;
  border:1px solid var(--line2);border-radius:999px;background:transparent;
  color:var(--ink);font:13px/1 var(--font-ui,inherit)}
.ask-tts-spd{display:inline-flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.ask-tts-spd button{width:auto;margin:0;height:34px;padding:0 8px;border:0;border-radius:0;
  background:transparent;color:var(--dim);font:650 12px/1 var(--font-ui,inherit);cursor:pointer}
.ask-tts-spd button.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--ink)}
.ask-tts-st{max-width:140px;font:12px/1.2 var(--font-ui,inherit);color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ask-tts-audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ask-tts-x{width:36px;height:36px;margin:0;padding:0;border-radius:999px;border:1px solid var(--line2);
  background:transparent;color:var(--ink);font:700 18px/1 inherit;cursor:pointer}
@media (max-width:860px){
  .ask-tts-pill{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}

/* While a conversation is open the composer is the anchor, so give it room and keep
   the page from feeling like a form with an answer stapled above it. */
#view .thread:not(:empty) ~ .asker{margin-top:4px}

/* ---- conversation mode: thread scrolls, composer sits below it ----------
   Sticky pinned the input over the last turns. Bound the view and let
   #thread be the scrollport so answers stop at the top of the composer. */
#view:has(.turn){display:flex;flex-direction:column;min-height:0;
  height:calc(100dvh - 190px);max-height:calc(100dvh - 190px);overflow:hidden}
#view:has(.turn) .thread{flex:1 1 auto;width:100%;min-height:0;
  overflow-x:hidden;overflow-y:auto;margin-bottom:0;padding-bottom:8px}
#view:has(.turn) .asker{position:static;flex:0 0 auto;z-index:5;margin-top:8px}
@media (max-width:760px){
  #view:has(.turn){height:calc(100dvh - 148px);max-height:calc(100dvh - 148px)}
}
/* Product claims belong on the landing screen, not over someone's shoulder while
   they are reading an answer. */
#view:has(.turn) .trust{display:none}
/* Starting a new chat is a quiet action, not a call to action. */
#view #newchat,#view #ask-share-near,#view #ask-memories-btn{display:none !important}

#view:has(.turn) #wx,
#view:has(.turn) .suggest,
#view:has(.turn) .convos,
#view:has(.turn) #attention{display:none;margin:0}

/* ---- AI Toys panel (ticket 2329) -----------------------------------------
   Adam's note was "way too basic" next to Fusion's. The options were already
   right; the panel was 11px pills in a 240px popover. A menu people are meant
   to LIVE in needs room: a real width, rows with an icon and a subtitle, and a
   state pill that reads at a glance. Tokens only, so it holds in both shells. */
#view .toysbtn{font-weight:600}
#view .popmenu.toysmenu{width:min(340px,92vw);padding:10px 10px 14px;text-align:left;
  max-height:min(70vh,560px,calc(100dvh - 140px));overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  -ms-overflow-style:auto;scrollbar-gutter:stable}
#view .toysmenu .pop-row{padding:9px 10px;border-radius:10px;margin:0 0 2px;
  align-items:flex-start;gap:11px;text-align:left}
#view .toysmenu .pop-i{flex:0 0 22px;font-size:16px;line-height:1.3;text-align:center}
#view .toysmenu .pop-c{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
/* .pop-row is a <button>, so in the HUD it inherits the shell's global
   button{text-transform:uppercase} and the panel SHOUTS - "EVIDENCE / CITE YOUR
   CORPUS". Sentence case is the whole point of a subtitle you are meant to read.
   Third time this inheritance has bitten a view (.convo, .s-chip, now this). */
#view .toysmenu .pop-row,#view .toysmenu .pop-c b,#view .toysmenu .pop-c small,
#view .toysmenu .pop-h{text-transform:none;letter-spacing:normal}
#view .toysmenu .pop-h{letter-spacing:.14em;text-transform:uppercase}
#view .toysmenu .pop-c b{font-size:13.5px;font-weight:620;color:var(--ink);letter-spacing:0}
#view .toysmenu .pop-c small{font-size:12px;line-height:1.45;color:var(--dim);
  white-space:normal}
/* the ON/OFF pill: the state IS the message, so it gets weight and a border */
#view .toysmenu .pop-x{flex:0 0 auto;align-self:center;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line2,var(--line));color:var(--faint)}
#view .toysmenu .pop-row.on .pop-x{color: var(--ok-text);
  border-color:color-mix(in srgb,var(--ok) 55%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent)}
#view .toysmenu .pop-sep{height:1px;background:var(--line2,var(--line));margin:9px 2px 3px}
#view .toysmenu .pop-note{margin:2px 4px 0;font-size:12px;color:var(--faint)}
@media (max-width:560px){#view .popmenu.toysmenu{width:min(320px,94vw)}}

/* The hero wordmark is the real mark. The white variant ships in the markup for the dark
   shell; lumen swaps to the colour one in CSS so it cannot flash the wrong variant. */
#view .wordmark{letter-spacing:0;text-transform:none;line-height:1}
#view .heromark{height:clamp(38px,7vw,52px);width:auto;max-height:52px;display:block;margin:0 auto}
@media (max-height:900px){#view .heromark{height:clamp(30px,5.5vw,42px);max-height:42px}}
/* Light theme: the white hero wordmark is invisible - swap to the colour lockup. */
#view .heromark{content:var(--logo-ink,url(/assets/rocsiteai_white.png?v=2))}

/* Recent, collapsed by default (Adam: "the recent should be a collapse feature").
   The list is unbounded and was pushing the ask box off a laptop screen. */
#view .convos{max-height:none;overflow:visible}
#view .convos-d>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:8px;user-select:none;justify-content:center}
#view .convos-d>summary::-webkit-details-marker{display:none}
#view .convos-d>summary::after{content:"\25BE";font-size:12px;color:var(--faint);
  transition:transform .15s}
#view .convos-d[open]>summary::after{transform:rotate(180deg)}
#view .convos-d>summary .cn{font:12px/1 var(--mono);color:var(--faint);
  border:1px solid var(--line2);border-radius:999px;padding:2px 7px}
#view .convos-d .convo-list{margin-top:8px;max-height:180px;overflow:auto}
#view .convo-row{display:flex;align-items:center;gap:6px}
#view .convo-row .convo{flex:1;min-width:0}
#view .convo-del{flex:0 0 36px;width:36px;min-height:36px;margin:0;padding:0;
  border-radius:8px;border:1px solid var(--line2);background:transparent;
  color:var(--dim);cursor:pointer}

/* Landing deck: chat stays the composer; weather and history sit as a pair
   under it so both stay on the first screen instead of a 84px collapsed tail. */
#view .asker,#view .toys,#view .ask-home,#view .suggest{max-width:880px;width:100%;
  box-sizing:border-box}
#view .ask-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;
  align-items:stretch;margin:16px auto 0;min-width:0}
#view .ask-home #wx,#view .ask-home .convos{max-width:none;margin:0;max-height:none;
  overflow:visible;width:100%;min-width:0}
#view .ask-home #wx:empty{display:none}
#view .ask-home:not(:has(.wxcard2)){grid-template-columns:minmax(0,1fr)}
/* Stack current + 5-day. The row layout clips Mon/Tue inside a half-width column. */
#view .ask-home .wxcard2{display:flex;flex-direction:column;align-items:stretch;
  margin:0;max-width:100%;width:100%;min-width:0;height:auto;min-height:100%;
  box-sizing:border-box;overflow:hidden}
#view .ask-home .wx-now{display:grid;grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;gap:10px 12px;flex:0 0 auto;min-width:0;width:100%;
  box-sizing:border-box}
#view .ask-home .wx-now-main{min-width:0}
#view .ask-home .wx-now-meta{margin-left:0;min-width:0;max-width:100%}
#view .ask-home .wx-now-place{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:100%}
#view .ask-home .wx-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  flex:0 0 auto;width:100%;min-width:0;margin-top:auto;border-left:0;
  border-top:1px solid var(--line2,var(--line))}
#view .ask-home .wx-day{min-width:0;padding:8px 2px;overflow:hidden;box-sizing:border-box}
#view .ask-home .wx-day-n,#view .ask-home .wx-day-t{overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:100%}
#view .ask-home .convos-d{height:100%;box-sizing:border-box;padding:10px 12px 8px;
  border:1px solid var(--line2);border-radius:14px;background:var(--panel);
  box-shadow:var(--shadow-1,none)}
#view .ask-home .convos-d>summary{justify-content:flex-start}
#view .ask-home .convos-d .convo-list{display:flex;flex-direction:column;gap:6px;
  max-height:min(240px,32vh);margin-top:10px;padding:0;border:0;background:transparent;
  box-shadow:none}
#view .ask-home .convo{display:flex;align-items:center;gap:10px;width:100%;margin:0;
  padding:9px 12px;text-align:left;cursor:pointer}
#view .ask-home .convo-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:13.5px;color:var(--ink)}
#view .ask-home .convo-a{flex:0 0 auto;font:11px/1 var(--mono);color:var(--faint)}
@media (max-height:1100px){
  #view .ask-home{margin-top:12px}
  #view .ask-home .convos,#view .convos{max-height:none}
  #view .ask-home .convo-list,#view .ask-home .convos-d .convo-list{
    max-height:min(180px,26vh)}
}
#view:has(.turn) .ask-home{display:none;margin:0}

/* Phone landing: one-line composer, compact weather, history above the tab. */
@media (max-width:760px){
  #view:has(.ask-home){padding-bottom:8px}
  #view .hero{padding:0;gap:0}
  #view .hero .rcore,#view .rcore{width:52px;height:52px;overflow:hidden}
  #view .heromark{height:22px;margin-top:2px}
  #view .tagline{display:none}
  #view .asker{width:100%;max-width:none;margin-top:8px;padding:5px;gap:4px;
    box-sizing:border-box}
  #view .asker #q{min-height:44px;padding-block:10px;line-height:1.3}
  #view .toys{margin-top:4px;margin-bottom:0}
  #view #askFsBtn,#view .askfs-enter{min-height:32px;height:32px;padding:0 12px;
    font-size:12.5px;width:auto}
  #view .ask-home{grid-template-columns:1fr;gap:10px;margin-top:10px;margin-bottom:8px}
  #view .suggest{display:none}
  #view .ask-home .wx-now{grid-template-columns:auto minmax(0,1fr) auto;
    padding:10px 12px 8px;gap:8px 10px}
  #view .ask-home .wx-now-e,#view .ask-home .wx-now-t{font-size:28px}
  #view .ask-home .wx-now-meta{text-align:right}
  #view .ask-home .wx-now-meta>span:not(.wx-now-place){display:none}
  #view .ask-home .wx-now-place{white-space:normal;line-height:1.25}
  #view .ask-home .wx-day{padding:6px 1px}
  #view .ask-home .wx-day-e{font-size:16px}
  #view .ask-home .convo-list,#view .ask-home .convos-d .convo-list{
    max-height:calc(100dvh - 600px);overflow:auto}
  #view .ask-home .convo{min-height:44px;padding:8px 10px;gap:8px}
  #view .ask-home .convo-a{font-size:10px}
}

/* ======================================================================
   Full-screen Ask chat (ChatGPT / Claude-mobile feel). views/_ask_fs.js moves
   #thread + .asker into a body-level overlay (#askFsRoot) so it fills the
   viewport cleanly regardless of the shell's wrappers. Every Ask feature keeps
   working because the live nodes (and their listeners) are relocated, not rebuilt.
   ====================================================================== */
/* height:100dvh, NOT inset:0 - on mobile the layout viewport is taller than the visible
   area when the URL bar / keyboard shows, which pushed the bottom-pinned composer off the
   fold. dvh tracks the visible height, so the composer stays reachable above the keyboard. */
.askfs-root{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:9000;
  background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
/* Composer layout must not depend on #view rules - it is relocated out of #view in FS. */
.askfs-root .asker{display:flex;align-items:flex-end;gap:8px}
.askfs-root .asker #q{flex:1;min-width:0;min-height:44px;max-height:160px;resize:none}
.askfs-root .newchat{align-self:center;margin:0 auto 6px}
body.ask-fs{overflow:hidden}
body.ask-fs .top,body.ask-fs .tabbar,body.ask-fs nav.bk{display:none !important}

.askfs-bar{flex:0 0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:calc(9px + env(safe-area-inset-top,0px)) 14px 9px;
  background:color-mix(in srgb,var(--panel) 92%,var(--bg));border-bottom:1px solid var(--line2)}
.askfs-left{display:flex;align-items:center;gap:12px;min-width:0}
.askfs-logo{height:20px;width:auto;opacity:.95;flex:none}
.askfs-seg{display:inline-flex;background:color-mix(in srgb,var(--ink) 6%,transparent);
  border:1px solid var(--line2);border-radius:10px;padding:2px;gap:2px}
.askfs-model{appearance:none;cursor:pointer;font:600 13px/1 var(--font-ui,inherit);color:var(--dim);
  background:transparent;border:0;border-radius:8px;padding:7px 13px;white-space:nowrap;
  transition:background .14s,color .14s}
.askfs-model:hover{color:var(--ink)}
.askfs-model.on{background:var(--panel);color:var(--ink);
  box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 18%,transparent)}
.askfs-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.askfs-ev,.askfs-ic{appearance:none;cursor:pointer;font:600 12.5px/1 var(--font-ui,inherit);
  color:var(--dim);background:var(--panel);border:1px solid var(--line2);border-radius:999px;
  padding:8px 13px;white-space:nowrap;transition:border-color .14s,color .14s,background .14s}
.askfs-ev:hover,.askfs-ic:hover{border-color:var(--accent);color:var(--ink)}
.askfs-ev.on{border-color:var(--accent);color: var(--accent-on-bg);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.askfs-ev-x{font-weight:700}
.askfs-note{flex-basis:100%;font:12px/1.3 var(--font-ui,inherit);color:var(--faint);padding-left:2px}
/* secondary actions collapse behind one "More" tap so the bar reads clean */
.askfs-more-b{font-size:18px;line-height:1;padding:6px 12px;letter-spacing:1px}
.askfs-more{position:relative}
.askfs-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:60;min-width:196px;display:flex;
  flex-direction:column;gap:2px;padding:6px;background:var(--panel);border:1px solid var(--line2);
  border-radius:13px;box-shadow:0 18px 44px rgba(0,0,0,.34)}
.askfs-menu[hidden]{display:none}
.askfs-mi{appearance:none;cursor:pointer;text-align:left;width:100%;font:600 13.5px/1 var(--font-ui,inherit);
  color:var(--ink);background:none;border:0;border-radius:9px;padding:11px 12px;white-space:nowrap}
.askfs-mi:hover{background:color-mix(in srgb,var(--accent) 13%,transparent)}
.askfs-mi[aria-pressed="true"]{color: var(--accent-on-bg)}
.askfs-mi-exit{color:var(--dim)}

.askfs-root #thread{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  width:100%;max-width:820px;margin:0 auto;padding:22px 16px 8px}
.askfs-root .asker{flex:0 0 auto;width:100%;max-width:820px;margin:0 auto;position:relative;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,transparent,var(--bg) 34%)}
.askfs-root .turn{max-width:none}
.askfs-root .turn .tx{font-size:15.5px;line-height:1.65}
@media (max-width:600px){
  .askfs-bar{gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px}
  .askfs-model{padding:7px 10px;font-size:12.5px}
  .askfs-note{display:none}
  .askfs-root #thread{padding:16px 12px 6px}
  .askfs-root .asker{padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px))}
}

/* Chat history panel (full-screen). Overlays the thread; tap a row to reopen. */
.askfs-hist{position:absolute;left:0;right:0;top:0;bottom:0;z-index:20;background:var(--bg);
  display:flex;flex-direction:column;overflow:hidden}
.askfs-hist-h{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;font:700 15px/1 var(--font-ui,inherit);color:var(--ink);
  border-bottom:1px solid var(--line2)}
.askfs-hist-x{appearance:none;background:none;border:0;color:var(--dim);font-size:18px;cursor:pointer}
.askfs-hist-x:hover{color:var(--ink)}
.askfs-hist-list{flex:1 1 auto;overflow-y:auto;padding:8px;max-width:820px;width:100%;margin:0 auto}
.askfs-hist-row{display:flex;align-items:stretch;gap:0;width:100%;background:var(--panel);
  border:1px solid var(--line2);border-radius:12px;margin:0 0 8px;overflow:hidden;
  transition:border-color .14s}
.askfs-hist-row:hover{border-color:var(--accent)}
.askfs-hist-open{flex:1 1 auto;width:auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:transparent;border:0;padding:12px 8px 12px 15px;cursor:pointer;transition:background .14s}
.askfs-hist-open:hover{background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.askfs-hist-act{flex:0 0 auto;width:auto;background:transparent;border:0;border-left:1px solid var(--line2);
  color:var(--dim);font-size:15px;padding:0 14px;cursor:pointer;transition:color .14s,background .14s}
.askfs-hist-act:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.askfs-hist-del:hover{color:var(--bad,#e5484d);background:color-mix(in srgb,var(--bad,#e5484d) 10%,transparent)}
.askfs-hist-t{width:100%;font:600 14.5px/1.35 var(--font-ui,inherit);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.askfs-hist-a{font:12px/1 var(--mono);color:var(--faint);letter-spacing:.04em}
.askfs-hist-empty{padding:28px 16px;text-align:center;color:var(--faint)}

/* 23982: four prompt chips as a 2-col grid at phone width. Shell
   button{width:100%} stacked them. Later than the 640px/1100px rules. */
#view .s-chip{
  width:auto; margin-top:0; text-transform:none; letter-spacing:normal;
  justify-content:flex-start; text-align:left; font:inherit;
}
#view .s-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px; width:100%;
}
#view .s-grid .s-chip{
  width:auto; min-width:0; margin-top:0;
  justify-content:flex-start; text-align:left;
}
@media (min-width:761px){
  #view .s-grid{ display:flex; flex-wrap:wrap; justify-content:center; width:auto; }
}

/* Compact professional forecast on Ask. Later rules win over the older wxcard2 block. */
#view .wxcard2{
  display:flex;align-items:stretch;max-width:none;width:100%;margin:0;
  border:1px solid var(--line2);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel));
  cursor:pointer;transition:border-color .16s}
#view .wxcard2:hover{border-color:var(--accent);transform:none}
#view .wx-now{display:flex;align-items:center;gap:14px;padding:10px 14px;flex:0 1 240px;min-width:0}
#view .wx-now-e{display:none}
#view .wx-now-main{display:flex;flex-direction:column;gap:1px;min-width:0}
#view .wx-now-place{font:700 11px/1.2 var(--font-ui,inherit);letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
#view .wx-now-t{font:600 34px/1 var(--font-ui,inherit);color:var(--ink);letter-spacing:-.03em}
#view .wx-now-l{font:500 13px/1.3 var(--font-ui,inherit);color:var(--dim);margin-top:1px}
#view .wx-now-l i{font-style:normal;margin-right:4px}
#view .wx-now-meta{display:flex;flex-direction:column;gap:2px;margin-left:auto;text-align:right;
  font:12px/1.35 var(--font-ui,inherit);color:var(--faint)}
#view .wx-now-go{color:var(--accent);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:10.5px}
#view .wx-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;flex:1;
  border-top:0;border-left:1px solid var(--line2);background:color-mix(in srgb,var(--bg) 35%,transparent)}
#view .wx-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;
  border-left:1px solid var(--line2);min-width:0}
#view .wx-day:first-child{border-left:0}
#view .wx-day-n{font:700 10px/1 var(--font-ui,inherit);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
#view .wx-day-e{font-size:16px;line-height:1;margin:2px 0}
#view .wx-day-t{font:650 13px/1.2 var(--font-ui,inherit);color:var(--ink)}
#view .wx-day-lo{color:var(--faint);font-weight:500;margin-left:3px}
#view .wx-day-bar{display:block;width:22px;height:3px;margin:3px 0 1px;border-radius:99px;
  background:color-mix(in srgb,var(--accent) var(--p,0%), var(--line2))}
#view .wx-day-p{font-size:11px;color:var(--accent);min-height:12px;font-weight:600}
@media (max-width:700px){
  #view .wxcard2{flex-direction:column}
  #view .wx-now{flex:1 1 auto;padding:10px 12px}
  #view .wx-days{border-left:0;border-top:1px solid var(--line2)}
  #view .wx-day{padding:8px 2px}
}
#view .ask-home,#view .askx-home{gap:8px;flex:0 0 auto;align-content:start}
#view .suggest,#view .convos,#view #attention{margin-top:8px}
#view .ask-home{margin-top:8px}
#view .askx-home .wxcard2{border:0;border-radius:0;margin:0;max-width:none}
#view .askx-home .wx-now{padding:4px 14px 10px}
#view .askx-home .wx-days{border-left:0;border-top:1px solid var(--line2)}