/* ============================================================
   Mythox - Living dashboard + in-app AI guide (Phase 5)
   ------------------------------------------------------------
   The Home screen: a clean, Emergent-style AI chat front-and-centre
   (greeting → prompt → model picker → suggestion chips), a slim
   notifications strip, and the existing command-center dashboard
   kept below (additive - nothing removed). Brand OS skin. All
   ids/classes namespaced .ai-* / #ai-* so nothing collides.
   ============================================================ */

.ai-home{max-width:var(--max); margin:0 auto}

/* ---- hero (home/empty state) ---- */
/* fill-mode dropped from "both" to the default (2026-07-04): per spec, ANY element
   animating the transform property establishes a CSS containing block for its
   position:fixed descendants for as long as the animation is "in effect" - with
   fill-mode:both that was FOREVER (even though the animation's own end value was
   translateY(0), rendered pixel-identical to no transform), which silently broke
   the fixed-positioned .ai-model-menu's viewport math (positionModelMenu() in
   ai-chat.js) at some widths. Dropping "both" ends the animation's effect (and the
   containing block with it) once the 0.5s entrance plays out; .ai-hero has no other
   transform/opacity rule, so the settled look is pixel-identical either way. */
.ai-hero{padding:18px 0 8px; text-align:left; animation:aiIn .5s var(--ease)}
@keyframes aiIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.ai-hello{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:clamp(28px,4.4vw,42px); line-height:1.05; margin:0 0 6px}
.ai-hello em{color:var(--accent); font-style:normal}
.ai-sub{color:var(--muted); font-size:16px; margin:0 0 22px; max-width:60ch}

/* The hidden file inputs the composer's paperclip and folder buttons drive. This rule also
   lives in ai-dock.css, which is where the Home composer used to borrow it from - it only
   worked because index.html happens to load the dock's stylesheet on every page. Owning it
   here means the composer keeps its invisible inputs even if the dock's CSS ever moves. */
.ai-vfile{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; opacity:0; }

/* ---- the prompt box ---- */
.ai-composer{
  position:relative; border-radius:18px;
  background:linear-gradient(180deg,var(--surface),var(--surface-grad-2));
  border:1px solid var(--line-2); box-shadow:0 18px 44px rgba(0,0,0,.4);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ai-composer.focus{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--gold-line), 0 0 26px var(--glow), 0 18px 44px rgba(0,0,0,.45)}
.ai-composer textarea{
  width:100%; border:0; background:transparent; resize:none; outline:none;
  color:var(--ivory); font-family:var(--sans); font-size:16px; line-height:1.55;
  padding:17px 18px 9px; max-height:180px; min-height:30px;
}
.ai-composer textarea::placeholder{color:var(--dim)}
.ai-composer-bar{
  display:flex; align-items:center; gap:10px; padding:8px 12px 12px;
}
/* the model pill reads as a clearly-clickable control: accent hairline + a small
   accent down-arrow that nudges on hover, so new users know they can switch models */
.ai-model{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 11px; border-radius:999px; font-size:12.5px; font-weight:500;
  background:var(--ink-2); color:var(--ivory); border:1px solid var(--gold-line);
  transition:.18s var(--ease); position:relative;
}
.ai-model:hover{color:var(--ivory); border-color:var(--accent); box-shadow:0 0 0 3px var(--gold-soft)}
.ai-model[aria-expanded="true"]{border-color:var(--accent); box-shadow:0 0 0 3px var(--gold-soft)}
.ai-model .caret{font-size:11px; opacity:1; color:var(--accent); transition:transform .18s var(--ease)}
.ai-model:hover .caret{transform:translateY(1px)}
.ai-model .mdot{width:7px; height:7px; border-radius:50%; background:var(--gold)}
.ai-spacer{flex:1}
/* attach + folder buttons (Home chat) + pending file chips */
.ai-attach-btn{
  width:34px; height:34px; border-radius:10px; cursor:pointer; flex-shrink:0;
  background:var(--ink-2); border:1px solid var(--line-2); color:var(--muted);
  font-size:18px; line-height:1; display:grid; place-items:center; transition:.16s var(--ease);
  position:relative; user-select:none;   /* <label> styled as a button */
}
.ai-attach-btn:hover{border-color:var(--accent); color:var(--accent)}
.ai-attach-chips{display:flex; flex-wrap:wrap; gap:6px; padding:2px 12px 8px}
.ai-attach-chips[hidden]{display:none}
.ai-attach-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ivory);
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:4px 6px 4px 9px;
}
.ai-attach-chip button{background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:13px; line-height:1; padding:0 2px}
.ai-attach-chip button:hover{color:var(--red,#ef4444)}
.ai-msg-att{margin-top:6px; font-size:11.5px; opacity:.85}
.ai-send{
  width:38px; height:38px; border-radius:11px; cursor:pointer; flex-shrink:0;
  display:grid; place-items:center; border:1px solid var(--accent);
  background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--ink-on-accent);
  font-size:16px; transition:.18s var(--ease);
}
.ai-send:hover{transform:translateY(-2px); box-shadow:0 8px 22px var(--glow)}
.ai-send:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}

/* model picker menu - position:fixed + JS-clamped (positionModelMenu() in ai-chat.js, same
   approach as header-ui.js's CreatorPop) so it's never cut off at any window size. left/top
   are set inline by JS the instant it opens (before paint), so the 0/0 default below never
   actually shows. */
.ai-model-menu{
  position:fixed; top:0; left:0; z-index:1400;
  min-width:230px; max-height:320px; overflow-y:auto; padding:6px; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--line-2);
  box-shadow:0 18px 50px rgba(0,0,0,.6); display:none;
}
.ai-model-menu.open{display:block; animation:aiIn .18s var(--ease) both}
.ai-model-opt{
  display:flex; align-items:flex-start; gap:9px; width:100%; text-align:left; cursor:pointer;
  padding:9px 11px; border-radius:10px; border:0; background:transparent; color:var(--ivory);
  font-family:inherit; font-size:13px; transition:.12s var(--ease);
}
.ai-model-opt:hover{background:var(--surface-3)}
.ai-model-opt .mo-name{font-weight:600; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap}
.ai-model-opt .mo-d{display:block; font-size:11px; color:var(--muted); margin-top:1px}
.ai-model-opt .mo-check{margin-left:auto; color:var(--gold); opacity:0}
.ai-model-opt.sel .mo-check{opacity:1}
/* model tier badges (Free / Pro / Scale / MAX) + locked state */
.mo-tier{font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:6px; line-height:1.2; white-space:nowrap}
.mo-tier-free{background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green)}
.mo-tier-pro{background:var(--gold-soft); color:var(--accent)}
.mo-tier-scale{background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn)}
.mo-tier-max{background:color-mix(in srgb, var(--blue) 16%, transparent); color:var(--blue)}
.ai-model-opt.locked{opacity:.74}
.ai-model-opt.locked .mo-name{color:var(--muted)}
.ai-model-opt.locked:hover{background:var(--surface-2)}

/* ============================================================
   GROUPED MODEL PICKER (Hephaestus port, Reis 2026-08-05)
   ------------------------------------------------------------
   Shared by BOTH menus - the Home composer pill (.ai-model-menu) and the Midas
   dock header (.ai-dock-model-menu) - because ai-chat.js mounts the same picker
   into each. The .mp-menu class is what turns a plain dropdown into the two
   column picker, so the compound selectors below (.ai-model-menu.mp-menu) beat
   codex-redesign.css's own !important rules for the plain menu.

   NO PRICES IN HERE, EVER. Message costs live in the credits panel only.
   ============================================================ */
.mp-menu{
  width:360px!important; max-width:calc(100vw - 16px)!important;
  height:430px!important; min-width:0!important;   /* taller since 2026-08-05: the model list plus the power-controls strip */
  padding:0!important; overflow:hidden!important;
  flex-direction:row!important; align-items:stretch!important;
  border-radius:14px!important;
}
.ai-model-menu.mp-menu{ display:none!important; }
.ai-model-menu.mp-menu.open{ display:flex!important; }
.ai-dock-model-menu.mp-menu{ display:flex!important; }
.ai-dock-model-menu.mp-menu[hidden]{ display:none!important; }

/* left rail: the groups. Favorites first, a divider, then one button per provider. */
.mp-menu .mp-rail{
  flex:0 0 44px; width:44px; display:flex; flex-direction:column; gap:4px; padding:4px;
  overflow-y:auto; scrollbar-width:none; background:color-mix(in srgb, var(--text, #fff) 4%, transparent);
  border-right:1px solid var(--line-2, var(--line));
}
.mp-menu .mp-rail::-webkit-scrollbar{ display:none; }
.mp-menu.mp-searching .mp-rail{ display:none; }   /* the rail steps aside while searching */
.mp-menu .mp-rail-div{ border-bottom:1px solid var(--line-2, var(--line)); margin:2px 4px; }
.mp-menu .mp-rail-btn{
  position:relative; flex:0 0 auto; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer;
  font-family:inherit; transition:background .12s ease, color .12s ease;
}
.mp-menu .mp-rail-btn:hover{ background:color-mix(in srgb, var(--text, #fff) 8%, transparent); color:var(--text); }
.mp-menu .mp-rail-btn.on{ color:var(--text); background:color-mix(in srgb, var(--text, #fff) 6%, transparent); }
/* the thin accent indicator on the selected group */
.mp-menu .mp-rail-btn.on::after{
  content:""; position:absolute; right:-4px; top:50%; margin-top:-10px;
  width:3px; height:20px; border-radius:3px 0 0 3px; background:var(--accent);
}
.mp-menu .mp-rail-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.mp-menu .mp-star{ font-size:15px; line-height:1; }
.mp-menu .mp-star.has{ color:#E9C64A; }
/* the AI company logo, in the rail and on each row's provider line (Reis: real logos,
   never initials). The tinted rounded square keeps every mark reading as one family. */
.mp-menu .mp-ini{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:24px; height:24px; border-radius:7px;
  background:color-mix(in srgb, var(--text, #fff) 9%, transparent);
}
.mp-menu .mp-ini.sm{ width:16px; height:16px; border-radius:5px; }
.mp-logo{ display:block; flex:0 0 auto; }
/* the CLOSED buttons: the composer pill and the dock's model button */
.mp-trigger-logo{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ai-model .mp-trigger-logo{ margin-right:1px; }
.ai-dock-model{ display:inline-flex!important; align-items:center; gap:6px; }
.ai-dock-model .ai-dock-model-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* right column: a search box that never moves, over a list that scrolls */
.mp-menu .mp-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.mp-menu .mp-search{
  flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:9px 10px 8px;
  border-bottom:1px solid var(--line-2, var(--line));
}
.mp-menu .mp-search:focus-within{ border-bottom-color:var(--accent); }
.mp-menu .mp-search-ic{ color:var(--muted); flex:0 0 auto; display:flex; opacity:.75; }
.mp-menu .mp-q{
  flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none; padding:0;
  color:var(--text); font-family:inherit; font-size:13px; line-height:20px;
  /* the app's global input focus ring would draw a floating box inside the menu; the
     search field shows focus by turning its own underline the accent colour instead. */
  box-shadow:none!important;
}
.mp-menu .mp-q::placeholder{ color:var(--muted); }
.mp-menu .mp-list{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px;
  display:flex; flex-direction:column; gap:2px;
}
/* soft fades, only on the side that actually has more rows out of view */
.mp-menu .mp-list.fade-top{ -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22px); mask-image:linear-gradient(to bottom, transparent, #000 22px); }
.mp-menu .mp-list.fade-bot{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
.mp-menu .mp-list.fade-top.fade-bot{
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.mp-menu .mp-row{
  display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 8px 8px 10px;
  border-radius:9px; cursor:pointer; color:var(--text); font-size:13px;
  transition:background .12s ease;
}
.mp-menu .mp-row.sel{ background:color-mix(in srgb, var(--text, #fff) 8%, transparent); }
.mp-menu .mp-row.hi,
.mp-menu .mp-row:hover{ background:color-mix(in srgb, var(--text, #fff) 13%, transparent); }
.mp-menu .mp-row.locked{ opacity:.62; cursor:default; }
.mp-menu .mp-row.locked .mp-row-name{ color:var(--muted); }
.mp-menu .mp-row-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mp-menu .mp-row-top{ display:flex; align-items:center; gap:7px; min-width:0; }
.mp-menu .mp-row-name{ font-weight:600; font-size:12.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-menu .mp-row-sub{ display:flex; align-items:center; gap:6px; min-width:0; color:var(--muted); }
.mp-menu .mp-row-d{ font-size:11px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-menu .mp-new{
  flex:0 0 auto; font-size:8.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 5px; border-radius:5px; line-height:1.2;
  background:color-mix(in srgb, #F0A020 18%, transparent); color:#F0A020;
}
.mp-menu .mp-fav{
  flex:0 0 auto; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer;
  font-size:14px; line-height:1; opacity:.55; transition:opacity .12s ease, color .12s ease;
}
.mp-menu .mp-row:hover .mp-fav{ opacity:1; }
.mp-menu .mp-fav.on{ opacity:1; color:#E9C64A; }
.mp-menu .mp-fav:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; opacity:1; }
.mp-menu .mp-empty{
  flex:0 0 auto; padding:16px 12px 20px; text-align:center; color:var(--muted); font-size:12px; line-height:1.45;
}

/* ---- power controls for the selected model (Reis 2026-08-05) ----
   Reasoning effort, context window and fast mode, in the segmented pill style already
   approved elsewhere in the app (.mac-seg). Sits under the list, never scrolls with it,
   and is absent entirely for a model that advertises no controls. */
.mp-menu .mp-opts{
  flex:0 0 auto; padding:9px 10px 10px;
  border-top:1px solid var(--line-2, var(--line));
  background:color-mix(in srgb, var(--text, #fff) 3%, transparent);
}
.mp-menu .mp-opts[hidden]{ display:none; }
.mp-menu .mp-opts-h{
  font-family:var(--mono, inherit); font-size:9.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 7px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mp-menu .mp-opt-row{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.mp-menu .mp-opt-row:first-of-type{ margin-top:0; }
.mp-menu .mp-opt-lab{ flex:0 0 auto; font-size:11.5px; color:var(--muted); min-width:88px; }
.mp-menu .mp-seg{ display:flex; flex:1 1 auto; gap:4px; justify-content:flex-end; flex-wrap:wrap; }
.mp-menu .mp-seg-btn{
  font-family:var(--mono, inherit); font-size:10.5px; line-height:1.2; cursor:pointer;
  border:1px solid var(--border, var(--line)); background:transparent; color:var(--text);
  border-radius:7px; padding:4px 8px; transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.mp-menu .mp-seg-btn:hover{ border-color:var(--accent); color:var(--accent); }
.mp-menu .mp-seg-btn.on{ background:var(--accent); color:var(--ink-on-accent, #0b0b0b); border-color:var(--accent); }
.mp-menu .mp-seg-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

@media (max-width:760px){
  .mp-menu{ width:min(360px, calc(100vw - 28px))!important; height:min(430px, 72vh)!important; }
  .mp-menu .mp-opt-lab{ min-width:74px; }
}
@media (prefers-reduced-motion:reduce){
  .mp-menu .mp-seg-btn{ transition:none; }
}
@media (prefers-reduced-motion:reduce){
  .mp-menu .mp-row, .mp-menu .mp-rail-btn, .mp-menu .mp-fav{ transition:none; }
}

/* ---- suggestion chips ---- */
.ai-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px}
.ai-chip{
  cursor:pointer; padding:10px 15px; border-radius:11px; font-size:14px;
  background:var(--ink-2); color:var(--ivory); border:1px solid var(--line);
  transition:.16s var(--ease); display:inline-flex; align-items:center; gap:8px;
}
.ai-chip:hover{border-color:var(--accent); background:var(--surface-2); transform:translateY(-2px); box-shadow:0 8px 26px var(--glow)}
.ai-chip .ci{color:var(--accent)}

/* ---- conversation thread ---- */
.ai-thread{display:flex; flex-direction:column; gap:14px; padding:6px 0 18px; min-height:120px}
.ai-thread-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.ai-thread-head .t{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.ai-msg{display:flex; gap:11px; max-width:760px}
.ai-msg.user{align-self:flex-end; flex-direction:row-reverse}
.ai-avatar{
  width:30px; height:30px; border-radius:9px; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; border:1px solid var(--line-2);
}
.ai-msg.assistant .ai-avatar{background:var(--gold-soft); color:var(--gold); border-color:var(--gold-line)}
.ai-msg.user .ai-avatar{background:var(--surface-3); color:var(--ivory)}
.ai-bubble{
  padding:13px 16px; border-radius:14px; font-size:15px; line-height:1.58;
  background:var(--surface); border:1px solid var(--line);
}
.ai-msg.user .ai-bubble{background:var(--surface-2); border-color:var(--line-2)}
.ai-bubble a{color:var(--gold); text-decoration:underline; text-underline-offset:2px}
.ai-bubble p{margin:0 0 8px} .ai-bubble p:last-child{margin:0}
.ai-bubble ul,.ai-bubble ol{margin:6px 0; padding-left:20px} .ai-bubble li{margin:3px 0}
.ai-bubble strong{color:var(--ivory)}
.ai-bubble code{font-family:var(--mono,monospace); font-size:.92em; background:var(--ink-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px}
.ai-bubble .ai-md-h{font-family:var(--font-display,inherit); font-weight:700; line-height:1.3; margin:11px 0 5px; font-size:15.5px; color:var(--ivory)}
.ai-bubble .ai-md-h:first-child{margin-top:0}
.ai-bubble .ai-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; margin-right:8px;
  padding:6px 12px; border-radius:9px; font-size:12.5px; font-weight:600;
  background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold-line);
}
.ai-bubble .ai-cta:hover{background:var(--gold-line)}
.ai-receipt{margin-top:10px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px}
.ai-receipt summary{cursor:pointer; list-style:none; font-family:var(--mono); letter-spacing:.02em; color:var(--muted)}
.ai-receipt summary::-webkit-details-marker{display:none}
.ai-receipt summary:hover{color:var(--accent)}
.ai-receipt ul{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:5px}
.ai-receipt li{display:flex; align-items:baseline; justify-content:space-between; gap:14px; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); padding-top:5px}
.ai-receipt li:first-child{border-top:0; padding-top:0}
.ai-receipt li span{color:var(--dim)}
.ai-receipt li b{font-weight:600; color:var(--ivory); text-align:right}
/* typing dots */
.ai-typing{display:inline-flex; gap:4px; align-items:center; padding:4px 2px}
.ai-typing i{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:aiBlink 1.2s infinite both}
.ai-typing i:nth-child(2){animation-delay:.2s} .ai-typing i:nth-child(3){animation-delay:.4s}
@keyframes aiBlink{0%,80%,100%{opacity:.25} 40%{opacity:1}}

/* guide-mode note */
.ai-mode-note{font-size:11.5px; color:var(--dim); margin-top:10px; display:flex; align-items:center; gap:7px}
.ai-mode-note b{color:var(--muted); font-weight:600}

/* ---- dashboard section (the existing command center, kept) ---- */
.ai-dash{margin-top:34px}
.ai-dash-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 14px; cursor:pointer; user-select:none;
}
.ai-dash-head h2{font-size:19px}
/* #8f: the collapse control is an obvious pill button (was a faint "▾ hide" label). */
.ai-dash-head .toggle{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:5px 11px;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.ai-dash-head:hover .toggle, .ai-dash-head:focus-visible .toggle{ color:var(--accent); border-color:var(--accent); background:var(--gold-soft, transparent); }
.ai-dash-head:focus-visible{ outline:none; }
.ai-dash-head .toggle .chev{display:inline-block; transition:transform .25s var(--ease)}
.ai-dash.collapsed .ai-dash-body{display:none}
.ai-dash.collapsed .ai-dash-head .chev{transform:rotate(-90deg)}
.ai-tourlink{color:var(--gold); cursor:pointer; font-size:13px}
/* command-center money tiles: deterministic 4-up on wide, clean 2x2 on phone
   (replaces the old auto-fit grid that wrapped raggedly / asymmetrically). */
.cc-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:26px}
/* Page-1 #8e: money privacy - a "Your money" header with an eye toggle, and a blur hook. */
.cc-money-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 10px}
.cc-money-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.cc-eye{position:relative; width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; line-height:0; transition:color .2s var(--ease,ease), border-color .2s var(--ease,ease)}
.cc-eye:hover{color:var(--accent); border-color:var(--accent)}
.cc-eye[aria-pressed="true"]{color:var(--accent)}
.cc-eye[aria-pressed="true"]::after{content:''; position:absolute; left:4px; right:4px; top:50%; height:2px; margin-top:-1px; background:currentColor; transform:rotate(-45deg); border-radius:2px}
[data-money-blur]{transition:filter .25s var(--ease,ease)}
[data-money-blur].blurred{filter:blur(9px); cursor:pointer; -webkit-user-select:none; user-select:none}
/* #8j: section cards lead with a small accent glyph badge (more premium + scannable). */
.link-card{position:relative}
.link-card-ic{
  display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:12px;
  border-radius:10px; font-size:16px; line-height:1; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
}
/* Page-1 #8: "Finish setting up" progress bar + action buttons (replaces the wall-of-checklist) */
.cc-setup-bar{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin:0 0 14px}
.cc-setup-bar > span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); box-shadow:0 0 12px var(--glow); transition:width .4s var(--ease,ease)}
.cc-setup-actions{display:flex; gap:10px; flex-wrap:wrap}

/* ============================================================
   CENTERED CHAT (Emergent/Codex-style)
   The greeting + composer + chips sit in a focused, CENTERED column
   (--chat-max). The dashboard below stays in the full app width -
   only the chat itself is centered.
   ============================================================ */
#ai-main{max-width:var(--chat-max); margin:0 auto; width:100%}
/* A PROPER CHAT PAGE (Reis, 2026-08-05). This used to be a compact card of fixed height
   parked near the top of the page, which is exactly what left the message box floating in
   mid-screen. It now takes its height from the full-height column it sits in, so the
   thread scrolls and the composer sits on the bottom edge. The page-level rules that build
   that column live in codex-redesign.css (which loads after this file); these are the
   base-skin equivalents so the two can never disagree. */
#ai-main.chatting{
  display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0;
  background:linear-gradient(180deg,var(--surface),var(--surface-grad-2));
  border:1px solid var(--line-2); border-radius:22px; padding:14px 16px;
  box-shadow:0 28px 70px rgba(0,0,0,.45);
}
#ai-main.chatting .ai-thread-head{flex:0 0 auto}
#ai-main.chatting .ai-thread{flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:4px}
/* flatten the inner composer so the card doesn't read as a box-in-a-box */
#ai-main.chatting .ai-composer{flex:0 0 auto; margin-top:10px; box-shadow:none; background:var(--ink-2); border:none}
/* NOTE: the old "open upward in chat mode" rule (a static top/bottom flip keyed off
   .chatting) was replaced by positionModelMenu() in ai-chat.js, which measures the real
   available space above/below on every open + resize instead of assuming based on mode -
   the static assumption could still run off-screen on a short window either way. */
.ai-hero{text-align:center; padding-top:clamp(20px,7vh,84px)}
.ai-hero .ai-hello{font-size:clamp(30px,4.6vw,46px)}
.ai-hero .ai-sub{margin-left:auto; margin-right:auto}
.ai-hero .ai-composer{text-align:left; margin-top:4px}   /* box centered by parent; typed text stays left */
.ai-hero .ai-chips{justify-content:center}
.ai-hero .ai-mode-note{justify-content:center; text-align:center}
/* after the first message the thread uses the same centered column */
.ai-thread-head{text-align:left}

@media (max-width:760px){
  .ai-msg{max-width:100%}
  .ai-composer-bar{flex-wrap:wrap}
  .ai-hero{padding-top:18px}
  /* declutter + symmetry on phone: equal gutters, quieter secondary text,
     tighter vertical rhythm, money tiles as a clean 2x2 (was ragged auto-fit). */
  .ai-home{padding:0 4px}
  .ai-sub{font-size:14px; margin-bottom:16px}
  .ai-mode-note{font-size:11px}
  .ai-dash{margin-top:24px}
  .cc-tiles{grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  .ai-hero,.ai-model-menu{animation:none}
  .ai-typing i{animation:none; opacity:.6}
}

/* Midas "set things up for you?" confirm card (Slice 2, 2026-06-26). Lives in an assistant bubble. */
.mac-card{ margin-top:10px; padding:13px 14px; border:1px solid var(--border); border-radius:13px; background:var(--surface-2); }
.mac-q{ margin:0 0 10px; font-size:13.5px; font-weight:600; color:var(--text); }
.mac-list{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px; }
.mac-item{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13px; line-height:1.4; }
.mac-kind{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); border-radius:5px; padding:2px 6px; }
.mac-title{ color:var(--text); font-weight:600; }
.mac-note{ color:var(--muted); font-size:12px; flex:1 1 100%; padding-left:23px; }
.mac-pick{ display:flex; align-items:center; gap:8px; cursor:pointer; flex:1 1 100%; }
.mac-cb{ accent-color:var(--accent); width:15px; height:15px; flex:none; margin:0; }
.mac-do{ flex:1 1 100%; color:var(--text); font-size:12.5px; padding-left:23px; }
/* "Where should this go?" segmented pill picker (Reis-approved seg style, token-based). */
.mac-seg{ flex:1 1 100%; display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; padding-left:23px; }
.mac-seg-btn{ font-family:var(--mono, inherit); font-size:11px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text); border-radius:8px; padding:5px 9px; transition:background .2s, color .2s, border-color .2s; }
.mac-seg-btn.on{ background:var(--accent); color:var(--ink-on-accent, #0b0b0b); border-color:var(--accent); }
.mac-actions{ display:flex; gap:8px; }
.mac-card .mac-yes, .mac-card .mac-no{ font-size:13px; padding:8px 15px; }
.mac-done{ margin:0; font-size:13px; color:var(--muted); line-height:1.5; }