/* ============================================================
   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) ---- */
.ai-hero{padding:18px 0 8px; text-align:left; animation:aiIn .5s var(--ease) both}
@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 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 */
.ai-model-menu{
  position:absolute; bottom:calc(100% + 8px); left:0; z-index:20;
  min-width:230px; 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 / 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-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)}

/* ---- 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)}
/* 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%}
/* contained chat box (fix §29-2): once a conversation starts, the thread scrolls
   inside a fixed-height column with the composer pinned — the page stays put. */
#ai-main.chatting{display:flex; flex-direction:column; height:clamp(340px, calc(100dvh - 240px), 720px)}
#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:2px}
#ai-main.chatting .ai-composer{flex:0 0 auto; margin-top:8px}
.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}
}