/* ISAI, the web app (at /app): a chat like ChatGPT and Claude, in ISAI's Graphite design (docs/approved-ui/). A shelf of open
   chats on top, a left list (Chats, Projects, Archive), one calm column for the conversation where the AIs are members of a
   group chat, the members on the right, the message box at the bottom. Tonal graphite surfaces with thin lines and ONE
   ambient colour (ISAI blue; Settings can change it). One hover look (grey), one selected look (the ambient colour), one
   set of status words. The tokens keep their old names (--page, --surface, --text, --accent...); their values are the
   Graphite set, light and dark from the computer or from Settings (data-theme). */
@font-face { font-family:"Geist"; src:url("/site/Geist-1.7.2.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
/* the wordmark: ISAI in Space Grotesk Bold (SIL Open Font License: /site/SpaceGrotesk-OFL.txt), Basic Latin only */
@font-face { font-family:"Space Grotesk"; src:url("/site/SpaceGrotesk-Bold-1.2.3.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
:root {
  color-scheme: light;
  --n-bg:#F2F2F0; --n-panel:#FFFFFF; --n-panel2:#F6F6F4; --n-ink:#111214; --n-ink2:#5B5E65; --n-line:#E0E0DD;
  --tint:#7C8AA3; --tint-amt:6%;
  --blue:#5B64E0; --accent:var(--blue); --on-accent:#FFFFFF;
  --page:color-mix(in oklab, var(--n-bg), var(--tint) var(--tint-amt));
  --surface:color-mix(in oklab, var(--n-panel), var(--tint) calc(var(--tint-amt) / 3));
  --surface2:color-mix(in oklab, var(--n-panel2), var(--tint) var(--tint-amt));
  --text:var(--n-ink); --muted:var(--n-ink2); --faint:color-mix(in oklab, var(--n-ink2), var(--n-panel) 38%);
  --line:color-mix(in oklab, var(--n-line), var(--tint) var(--tint-amt));
  --line-strong:color-mix(in oklab, var(--n-line), var(--n-ink) 14%);
  --hover:color-mix(in oklab, var(--text) 8%, transparent);
  --sel:color-mix(in oklab, var(--accent) 24%, transparent);
  --accent-soft:color-mix(in oklab, var(--accent) 12%, transparent);
  --brand:var(--blue);
  --primary:var(--text); --on-primary:var(--surface);
  /* the ISAI mark: its disc and ring follow the theme, as the brand files do (icon-light.svg, icon-dark.svg) */
  --mark-disc:#FFFFFF; --mark-ring:#5B64E0; --mark-ring-o:.38;
  --claude:#C15F3C;
  /* states, in ISAI's colours: worked = blue, failed = strong text, waiting = grey */
  --good:var(--accent); --bad:var(--text); --warn:var(--muted);
  --r:14px; --gutter:18px;
  --side-w:272px; --margin-w:272px; --col:760px;
  --shadow:0 1px 2px rgba(20,22,28,.05), 0 8px 28px rgba(20,22,28,.08);
  --thumb:color-mix(in oklab, var(--text) 14%, transparent); --thumb-hover:color-mix(in oklab, var(--text) 38%, transparent);
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:"Geist", "Inter", ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --hovl:linear-gradient(var(--hover), var(--hover));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --n-bg:#0B0C0E; --n-panel:#131417; --n-panel2:#181A1E; --n-ink:#F2F3F4; --n-ink2:#9A9EA7; --n-line:#25272C;
    --blue:#7C86F2; --on-accent:#0B0E14; --claude:#D97757;
    --mark-disc:#0a0a0a; --mark-ring:#7C86F2; --mark-ring-o:.45;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --n-bg:#0B0C0E; --n-panel:#131417; --n-panel2:#181A1E; --n-ink:#F2F3F4; --n-ink2:#9A9EA7; --n-line:#25272C;
  --blue:#7C86F2; --on-accent:#0B0E14; --claude:#D97757;
  --mark-disc:#0a0a0a; --mark-ring:#7C86F2; --mark-ring-o:.45;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.45);
}
:root[data-theme="light"] { color-scheme:light; }
/* the ambient colour (Settings): one colour for selected rows, links, the working ring and Send */
:root[data-accent="jade"] { --accent:#4FD0A3; --on-accent:#0B0E14; }
:root[data-accent="amber"] { --accent:#F2B04A; --on-accent:#0B0E14; }
:root[data-accent="rose"] { --accent:#F27D8C; --on-accent:#0B0E14; }
:root[data-accent="violet"] { --accent:#AE97FF; --on-accent:#0B0E14; }
:root[data-accent="mono"] { --accent:var(--n-ink); --on-accent:var(--n-panel); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { height:100%; }
body { margin:0; background:var(--surface); color:var(--text); overflow:hidden;
  font:14px/1.5 var(--sans);
  letter-spacing:-.005em; -webkit-font-smoothing:antialiased; }
::selection { background:var(--accent-soft); }
svg { flex:none; display:block; }
button, input, textarea, select { font:inherit; color:inherit; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* scrollbars: thin, round, no arrows, in the theme's colours; quiet at rest, clearer when the area or the bar is hovered */
* { scrollbar-width:thin; scrollbar-color:var(--thumb) transparent; }
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width:auto; scrollbar-color:auto; }
  ::-webkit-scrollbar { width:14px; height:14px; background:transparent; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-button { display:none; width:0; height:0; }
  ::-webkit-scrollbar-corner { background:transparent; }
  ::-webkit-scrollbar-thumb { background-color:var(--thumb); border:4px solid transparent; background-clip:content-box; border-radius:99px; min-height:44px; min-width:44px; transition:background-color .2s ease; }
  :hover::-webkit-scrollbar-thumb { background-color:color-mix(in oklab, var(--text) 22%, transparent); }
  ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color:var(--thumb-hover); }
}
/* the name ISAI as a wordmark: Space Grotesk Bold, in the text colour, so it follows the theme */
.wm { font:700 17px/1 "Space Grotesk", "Geist", system-ui, sans-serif; letter-spacing:.03em; color:inherit; white-space:nowrap; flex:none; }
.wm.big { font-size:26px; }
/* the ISAI mark (an inline symbol from team.html): its disc and ring follow the theme */
.mk-disc { fill:var(--mark-disc); }
.mk-ring { fill:none; stroke:var(--mark-ring); stroke-opacity:var(--mark-ring-o); stroke-width:20; }
.defs { position:absolute; width:0; height:0; overflow:hidden; }
.grow { flex:1; min-width:0; }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
.small { font-size:12.5px; }
.boot { color:var(--muted); text-align:center; margin-top:30vh; }

/* ---------- the frame: the shelf on top, then the list | the chat | the members ---------- */
.app { display:grid; grid-template-columns:var(--side-w) minmax(0, 1fr) var(--margin-w); grid-template-rows:auto minmax(0, 1fr); grid-template-areas:"tabs tabs tabs" "side main margin";
  height:100vh; height:100dvh; position:relative; }
.app.side-closed { --side-w:0px; }
.app.side-closed .side { visibility:hidden; overflow:hidden; padding:0; border-right:0; }
.app.margin-off { --margin-w:0px; }
.app.margin-off .margin { display:none; }
.app.bare { grid-template-columns:minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); grid-template-areas:"main"; }
.app.bare .side, .app.bare .tabbar, .app.bare .margin, .app.bare .top, .app.bare .dock, .app.bare .scrim, .app.bare .sheet { display:none; }
/* The two side panels can be dragged: a thin handle on the edge of each (team.js "resize"). */
.rz { grid-row:2; position:relative; z-index:6; width:10px; cursor:col-resize; touch-action:none; outline:none; }
.rz::after { content:""; position:absolute; top:0; bottom:0; left:4px; width:2px; border-radius:2px; background:transparent; transition:background .15s; }
.rz:hover::after, .rz.drag::after, .rz:focus-visible::after { background:var(--accent); }
#rzSide { grid-column:1; justify-self:end; margin-right:-5px; }
#rzMargin { grid-column:3; justify-self:start; margin-left:-5px; }
.app.side-closed #rzSide, .app.margin-off #rzMargin, .app.bare .rz { display:none; }
.app.dragging, .app.dragging * { cursor:col-resize !important; user-select:none !important; }
@media (max-width: 1100px) { #rzMargin { display:none; } }
@media (max-width: 860px) { .rz { display:none; } }
.main { grid-area:main; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--surface); position:relative; isolation:isolate; }
.main > * { position:relative; z-index:1; }
.scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } /* the scrollbar's place is kept: the page never jumps when it comes */
.col { max-width:var(--col); margin:0 auto; padding:16px 24px 40px; }
.col.home { min-height:100%; display:flex; flex-direction:column; justify-content:center; padding-bottom:10vh; }
.col.signin { max-width:none; min-height:100%; padding:0; }
.dock { flex:none; padding:0 24px 16px; }
.dock > * { max-width:calc(var(--col) - 48px); margin:0 auto; }
.docked .scroll { mask-image:linear-gradient(180deg, #000 calc(100% - 24px), transparent); -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 24px), transparent); }

/* icon buttons: one hover look (grey), one selected look (the ambient colour) */
.ib { position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:0; border-radius:9px; background:none; color:var(--muted);
  cursor:pointer; flex:none; transition:background .12s, color .12s; }
.ib:hover { background:var(--hover); color:var(--text); }
.ib[aria-pressed="true"] { background:var(--sel); color:var(--text); }
.ib.sm { width:28px; height:28px; border-radius:8px; }
.ib .cnt { position:absolute; right:1px; top:1px; min-width:15px; height:15px; padding:0 4px; border-radius:99px; background:var(--accent); color:var(--on-accent); font:600 10px/15px var(--mono); text-align:center; }
.narrow-only, .tabswitch { display:none; }
.wide-only { display:inline-flex; }

/* ---------- the shelf: open chats are small books (spines) ---------- */
.tabbar { grid-area:tabs; display:flex; align-items:center; gap:6px; background:var(--surface2); border-bottom:1px solid var(--line); padding:0 8px; height:52px; min-width:0; position:relative; }
.lcap, .rcap { display:flex; align-items:center; gap:2px; flex:none; }
.strip { flex:1; min-width:0; height:100%; display:flex; align-items:flex-end; gap:5px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; position:relative; padding:0 4px 7px; }
.strip::-webkit-scrollbar { display:none; }
.sp { position:relative; display:flex; align-items:center; justify-content:center; height:36px; width:24px; flex:none; border-radius:7px 7px 3px 3px; border:1px solid color-mix(in oklab, var(--text) 13%, transparent);
  background:var(--tone, color-mix(in oklab, var(--text) 5%, transparent)); color:var(--muted); font-size:13px; font-weight:500; user-select:none; cursor:default;
  transition:background .12s, color .12s, width .18s ease; }
.sp::before { content:""; position:absolute; left:3px; right:3px; top:5px; height:4px;
  background:linear-gradient(var(--pc, color-mix(in oklab, var(--text) 30%, transparent)) 0 0) 0 0/100% 1px no-repeat, linear-gradient(var(--pc, color-mix(in oklab, var(--text) 30%, transparent)) 0 0) 0 3px/100% 1px no-repeat; }
.sp:hover { background:var(--hovl), var(--tone, color-mix(in oklab, var(--text) 5%, transparent)); color:var(--text); }
.sp[aria-selected="true"] { box-shadow:inset 0 2px 0 var(--accent); color:var(--text); }
.sp[aria-selected="true"][data-st="needs"] { box-shadow:inset 0 2px 0 var(--accent), inset 0 0 0 1.5px var(--text); }
.sp[aria-selected="true"]::after { content:""; position:absolute; left:50%; bottom:-6px; margin-left:-5px; border:5px solid transparent; border-top:0; border-bottom-color:var(--accent); }
.sp .gl { font:600 11px/1 var(--mono); margin-top:6px; display:grid; place-items:center; }
.sp .nm { display:none; min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp .x { position:absolute; top:-6px; right:-6px; width:17px; height:17px; border-radius:50%; display:none; place-items:center; color:var(--muted); background:var(--xbg, var(--surface2)); border:1px solid var(--line); z-index:2; }
.sp .x svg { width:10px; height:10px; }
.sp:hover .x, .sp:focus-visible .x { display:grid; }
.sp .x:hover { background:var(--hovl), var(--xbg, var(--surface2)); color:var(--text); }
/* the open book is pulled forward, with its name; with names on, every book shows its name */
.sp.on:not(.pin), .strip.names .sp:not(.pin) { width:auto; min-width:96px; max-width:200px; justify-content:flex-start; gap:8px; padding:0 6px 0 10px; }
.strip.names .sp:not(.pin) { max-width:168px; }
.sp.on:not(.pin)::before, .strip.names .sp:not(.pin)::before { display:none; }
.sp.on:not(.pin) .gl, .strip.names .sp:not(.pin) .gl { display:none; }
.sp.on:not(.pin) .nm, .strip.names .sp:not(.pin) .nm { display:block; }
.sp.on:not(.pin) .x, .strip.names .sp:not(.pin) .x { --xbg:transparent; position:static; display:grid; border:0; width:20px; height:20px; border-radius:6px; flex:none; }
.strip.names .sp:not(.pin):not(.on):not(:hover):not(:focus-visible) .x { display:none; }
.sp.fresh .gl { margin:0; }
.sp.pin { width:36px; }
.sp.pin + :not(.pin) { margin-left:8px; }
.sp.pin::before { display:none; }
.sp.pin .gl { margin:0; }
.gw { position:relative; display:flex; align-items:flex-end; gap:5px; flex:none; padding-left:11px; margin-left:7px; }
.gw::before { content:""; position:absolute; left:0; bottom:6px; height:24px; width:1px; background:var(--line); }
.gc { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 10px; border-radius:8px; font:500 12.5px/1 var(--sans); flex:none; max-width:160px; white-space:nowrap; color:var(--text); border:0; background:none; cursor:pointer; }
.gc:hover { background:var(--hover); }
.gc i { width:8px; height:8px; border-radius:50%; background:var(--pc); flex:none; }
.gc span { overflow:hidden; text-overflow:ellipsis; }
.gc em { font:500 11px/1 var(--mono); color:var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .sp[aria-selected="true"][data-st="work"] { animation:dl-tint 1.8s ease-in-out infinite; }
  @keyframes dl-tint { 50% { background:color-mix(in oklab, var(--accent) 38%, var(--surface2)); } }
}

/* tips: the name of an icon, or the meaning of a menu item, on hover or focus */
.tip { position:fixed; z-index:90; pointer-events:none; background:var(--text); color:var(--surface); border-radius:10px; padding:7px 11px; font-size:12.5px; line-height:1.4;
  box-shadow:0 12px 30px -10px rgba(20,22,28,.45); max-width:260px; }
.tip b { display:block; font-weight:600; font-size:13px; }
.tip span { display:block; opacity:.68; font-size:12px; }

/* ---------- the left list ---------- */
.side { grid-area:side; background:var(--surface2); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:14px; min-width:0; min-height:0; overflow:hidden; padding:14px 12px 12px; }
.side-head { display:flex; align-items:center; min-height:32px; }
.brand { display:inline-flex; align-items:center; gap:9px; min-height:32px; padding:0 6px; border-radius:9px; color:var(--text); text-decoration:none; }
.brand .mark { width:24px; height:24px; display:block; }
.slists { display:grid; gap:14px; grid-template-columns:minmax(0, 1fr); align-content:start; flex:1; min-height:0; overflow-y:auto; margin:-8px -10px 0; padding:8px 10px 0; } /* room all round for the tour's ring */
.sec { display:grid; gap:2px; grid-template-columns:minmax(0, 1fr); align-content:start; }
.sh { display:flex; align-items:center; gap:2px; min-height:32px; }
.shb { display:flex; align-items:center; gap:8px; flex:1; min-width:0; min-height:32px; padding:0 8px; border:0; border-radius:9px; background:none; cursor:pointer; color:var(--muted);
  font:500 11px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; text-align:left; }
.shb:hover { background:var(--hover); color:var(--text); }
.shb .n { letter-spacing:0; }
.shb > svg { transition:transform .15s; }
.shb[aria-expanded="false"] > svg { transform:rotate(-90deg); }
.plist { display:grid; gap:2px; grid-template-columns:minmax(0, 1fr); }
.pblock { display:grid; gap:2px; }
.phrow { display:flex; align-items:center; }
.ph { display:flex; align-items:center; gap:8px; flex:1; min-width:0; min-height:34px; padding:0 4px 0 6px; border:0; border-radius:9px; background:none; cursor:pointer; color:var(--text); font-size:14px; font-weight:500; text-align:left; }
.ph:hover { background:var(--hover); }
.ph > svg { color:var(--muted); transition:transform .15s; }
.ph[aria-expanded="false"] > svg { transform:rotate(-90deg); }
.ph .dot { width:8px; height:8px; border-radius:50%; background:var(--pc); flex:none; }
.ph .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph .n { font:500 11px/1 var(--mono); color:var(--muted); }
.phrow .add { opacity:0; width:26px; height:26px; }
.phrow:hover .add, .phrow:focus-within .add { opacity:1; }
.rn { border:1px solid var(--muted); background:var(--surface); border-radius:7px; padding:2px 6px; min-width:0; width:100%; outline:0; font:inherit; }
.rn.big { font:500 15px/1.2 var(--sans); width:min(360px, 60%); }
.crow { position:relative; }
.hrow, .cr { display:flex; align-items:center; gap:8px; width:100%; min-height:36px; padding:0 30px 0 30px; border:0; border-radius:8px; background:none; color:var(--muted); font-size:13.5px; cursor:pointer; text-align:left; }
.cr.flat { padding-left:10px; }
.hrow:hover { background:var(--hover); color:var(--text); }
.hrow[aria-current="page"] { color:var(--text); background:var(--sel); }
.hrow .ht { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
.hrow .pinned { color:var(--muted); display:grid; }
.hs { flex:none; font:500 11px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.hs.st-needs { color:var(--text); font-weight:600; }
.hs.st-work { color:var(--accent); }
.crow:hover .hs, .crow:focus-within .hs { opacity:0; }
.mbtn { position:absolute; right:3px; top:5px; height:26px; width:26px; border:0; border-radius:7px; background:none; display:grid; place-items:center; color:var(--muted); opacity:0; cursor:pointer; }
.phrow .mbtn { position:static; flex:none; top:auto; right:auto; }
.crow:hover .mbtn, .crow:focus-within .mbtn, .phrow:hover .mbtn, .phrow:focus-within .mbtn, .mbtn[aria-expanded="true"] { opacity:1; }
.mbtn:hover { background:var(--hover); color:var(--text); }
.mbtn[aria-expanded="true"] { background:var(--sel); color:var(--text); }
.top .mbtn { position:static; opacity:1; width:34px; height:34px; border-radius:9px; }
.empty { margin:2px 10px; color:var(--muted); font-size:12.5px; }
.nav { display:grid; gap:2px; grid-template-columns:minmax(0, 1fr); }
.row { display:flex; align-items:center; gap:10px; }
.nav .row { min-height:36px; padding:0 10px; border:0; border-radius:9px; background:none; cursor:pointer; font-size:14px; width:100%; color:var(--text); text-align:left; position:relative; }
.nav .row svg { color:var(--muted); }
.nav .row:hover { background:var(--hover); }
.nav .row[aria-current="true"] { background:var(--sel); }
.count { font:500 11px/1 var(--mono); color:var(--on-accent); background:var(--accent); border-radius:99px; padding:3px 6px; }
.side-foot { margin-top:auto; padding-top:8px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.navrow { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 8px; border:0; border-radius:10px; background:none; cursor:pointer; text-align:left; position:relative; }
.navrow:hover, .navrow[aria-expanded="true"], .navrow[aria-current="page"] { background:var(--hover); }
.navrow .email { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.navrow > svg:last-child { color:var(--muted); }
.initial { flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--primary); color:var(--on-primary); font-size:13px; font-weight:600; }

/* ---------- the top of the chat ---------- */
.top { flex:none; display:flex; align-items:center; gap:8px; min-height:56px; padding:8px 14px 8px 24px; }
.ttl { flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
.tgoal { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 15px/1.2 var(--sans); letter-spacing:-.005em; padding:4px 6px; margin-left:-6px; border-radius:7px; }
.tgoal.edit { cursor:text; }
.tgoal.edit:hover { background:var(--hover); }
.tmode { flex:none; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:12.5px; white-space:nowrap; }
.tmode svg { color:var(--accent); }
.tmode.temp { border-style:dashed; }
.tword { flex:none; font:500 11px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.tword.needs { color:var(--text); font-weight:600; }
.ib.tempbtn[aria-pressed="true"] { background:var(--sel); color:var(--text); }

/* ---------- the right side: who is in this chat ---------- */
.margin { grid-area:margin; background:var(--surface2); border-left:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:26px; min-height:0; overflow-y:auto; }
.msec h3 { margin:0 0 10px; font:500 11px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.mem { display:grid; gap:2px; }
.mrow { display:grid; grid-template-columns:30px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:8px 10px; border:0; border-radius:10px; background:none; width:100%; text-align:left; color:var(--text); }
button.mrow { cursor:pointer; }
button.mrow:hover { background:var(--hover); }
.mrow .mt { min-width:0; }
.mrow b { font-weight:600; font-size:14px; display:block; line-height:1.3; }
.mrow .l { color:var(--muted); font-size:12.5px; line-height:1.35; display:block; }
.mrow .w { font:500 11px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.mrow .w.needs { color:var(--text); font-weight:600; }
.mrow.add { grid-template-columns:30px minmax(0, 1fr); color:var(--muted); cursor:pointer; }
.mrow.add:hover { background:var(--hover); color:var(--text); }
.mrow .plus { width:30px; height:30px; border-radius:50%; border:1.5px dashed var(--line-strong); display:grid; place-items:center; }
.mrow .av.logo { width:30px; height:30px; position:relative; }
.mrow .av.logo.working::after, .mrow .av.logo.needs::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--accent); pointer-events:none; }
.mrow .av.logo.needs::after { border-color:var(--text); }
.mrow .av.logo.done { opacity:.75; }
.tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tg { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:99px; padding:5px 11px 5px 8px; font-size:13px; min-height:30px; background:var(--surface); }
.tg svg { width:14px; height:14px; color:var(--muted); }
.tg.more { border-style:dashed; color:var(--muted); padding-left:11px; }
.msec .row { flex-wrap:wrap; }

/* ---------- the phone: the shelf folds into one button, and a sheet shows the open chats as cards ---------- */
.sheet { position:absolute; inset:52px 0 0 0; z-index:25; background:var(--surface); display:flex; flex-direction:column; min-height:0; }
.sheet[hidden] { display:none; }
.shead { display:flex; align-items:center; gap:6px; padding:12px 14px 8px 18px; }
.shead h2 { flex:1; margin:0; font:500 15px/1.2 var(--sans); }
.sbody { flex:1; min-height:0; overflow-y:auto; padding:6px 14px 24px; display:grid; gap:18px; align-content:start; }
.sgl { font:500 11px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:6px 4px 8px; }
.tgrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.tcard { position:relative; display:flex; flex-direction:column; gap:8px; min-height:92px; padding:12px 40px 12px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface2); text-align:left; cursor:pointer; color:var(--text); }
.tcard[aria-current="true"] { background:var(--sel); border-color:var(--accent); }
.tcard .t { font-weight:500; font-size:14px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.tcard .m { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:auto; color:var(--muted); font-size:12px; }
.tcard .w { margin-left:auto; font:500 10.5px/1 var(--mono); text-transform:uppercase; }
.tcard .w.needs { color:var(--text); font-weight:600; }
.tcard .x { position:absolute; top:6px; right:6px; width:30px; height:30px; border:0; border-radius:8px; background:none; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.tcard .x:hover { background:var(--hover); color:var(--text); }
.tcard.tnew { align-items:center; justify-content:center; border-style:dashed; color:var(--muted); background:none; padding:12px; }

/* search: the open chats, the closed ones and all the others */
.searchbox { position:absolute; z-index:60; left:50%; top:64px; transform:translateX(-50%); width:min(560px, calc(100vw - 24px)); max-height:min(70vh, 560px); display:flex; flex-direction:column; padding:8px;
  border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:0 30px 70px -24px rgba(20,22,28,.4); }
.sinput { border:0; outline:0; background:transparent; width:100%; padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; font-size:15px; }
.sres { overflow-y:auto; display:grid; gap:1px; min-height:0; }
.sres-i { min-height:40px; }
.sres-i[aria-selected="true"] { background:var(--sel); }
.sres-i small { color:var(--muted); font-size:12px; }
.sfoot2 { padding:8px 10px 4px; display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:12px; }

/* ---------- messages ---------- */
.msg { display:flex; gap:14px; margin:0 0 22px; }
.msg .av { flex:none; width:28px; height:28px; margin-top:1px; }
.msg .av .mark { width:28px; height:28px; display:block; }
.mono { border-radius:50%; display:grid; place-items:center; background:var(--surface2); color:var(--text); font-size:13px; font-weight:600; box-shadow:inset 0 0 0 1px var(--line-strong); }
.mbody { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; overflow-wrap:anywhere; }
.mbody > p { margin:0; }
.lead-b { font-size:15px; font-weight:600; }
.state { display:flex; align-items:center; gap:8px; margin:0; }
/* the person: a soft bubble on the right */
.msg.me { flex-direction:column; align-items:flex-end; gap:6px; margin-top:8px; }
.bubble { max-width:min(85%, 620px); padding:10px 16px; border-radius:20px; background:var(--surface2); font-size:15px; line-height:1.55; }
.bubble .gtext { white-space:pre-wrap; overflow-wrap:anywhere; }
.bubble .from { display:flex; align-items:center; gap:6px; margin-bottom:4px; color:var(--muted); font-size:12.5px; }
.mmeta { display:flex; align-items:center; gap:6px; padding-right:8px; color:var(--faint); font-size:12px; }
/* Edit your message: shows on hover or focus (always on touch screens). */
.mmeta .ib.edit { width:28px; height:28px; border-radius:8px; opacity:0; transition:opacity .15s; }
.msg.me:hover .ib.edit, .msg.me:focus-within .ib.edit { opacity:1; }
@media (hover: none) { .mmeta .ib.edit { opacity:1; } }
/* the plan */
.plan { list-style:none; margin:2px 0 0; padding:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.pstep { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; }
.pstep + .pstep { border-top:1px solid var(--line); }
.num { flex:none; width:24px; height:24px; margin-top:1px; border-radius:50%; display:grid; place-items:center; background:var(--surface2); color:var(--muted); font-size:12px; font-weight:600; }
.pbody { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pbody > b { font-weight:500; }
.meta { color:var(--muted); font-size:12.5px; }
.plan-mini { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:3px; }
.plan-mini small { color:var(--muted); font-size:12.5px; }
.note { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; padding:10px 12px; border:1px solid var(--line-strong); border-radius:12px; font-size:13px; }
.note > span { flex:1; min-width:200px; }
.actions { margin-top:4px; }
select.pick, textarea.task { color:var(--text); background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; transition:border-color .15s, box-shadow .15s; }
select.pick { flex:none; height:32px; max-width:170px; padding:0 30px 0 10px; font-size:12.5px; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 15px) 13px, calc(100% - 10px) 13px; background-size:5px 5px; background-repeat:no-repeat; }
textarea.task { display:block; width:100%; min-height:120px; padding:10px 12px; font-size:13px; line-height:1.5; resize:vertical; }
select.pick:focus, textarea.task:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
/* each AI's step */
.ai-head { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:4px; }
.ai-head b { font-weight:500; }
.ai-head .who { color:var(--faint); }
.ai-head .hstate { font-weight:500; }
.ai-head .chipst.verdict { height:auto; padding:0; background:none; box-shadow:none; color:var(--accent); font-size:13px; font-weight:500; }
.ai-head .chipst.verdict.fix { color:var(--text); }
.msg.ai.st-skipped { opacity:.62; }
.msg.ai.st-skipped .mbody { gap:6px; }
.msg.ai:not(.chat) .answer { border:0; border-radius:4px 18px 18px 18px; background:var(--surface2); padding:12px 16px; }
.msg.ai.working > .av.logo, .msg.ai.needs > .av.logo { outline:2px solid var(--accent); outline-offset:2px; }
.msg.ai.needs > .av.logo { outline-color:var(--text); }
.wbubble { display:flex; flex-direction:column; gap:9px; align-self:stretch; padding:12px 16px 14px; border-radius:4px 18px 18px 18px; background:var(--surface2); }
.wbubble .shim { display:block; height:8px; width:92%; border-radius:4px; background:linear-gradient(90deg, var(--line) 0, var(--hover) 50%, var(--line) 100%); background-size:300px 100%;
  animation:dl-shim 1.4s linear infinite; }
.wbubble .shim.s2 { width:62%; }
/* a step that needs you: its card under its own AI */
.needcard { display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid var(--text); border-radius:4px 18px 18px 18px; box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.needcard p { margin:0; }
.needcard .why { font-size:14.5px; font-weight:500; }
.needcard .detail { color:var(--muted); font-size:13px; line-height:1.55; }
.needcard .row { margin-top:6px; }
/* a chat message that needs you: the card sits flat in the message's own bubble */
.cbubble .needcard { padding:2px 0 0; border:0; border-radius:0; box-shadow:none; }
.msg.ai.chat.needs .cbubble { border-color:var(--text); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.btn.strong { background:var(--text); border-color:transparent; color:var(--surface); }
.btn.strong:hover { background:var(--text); opacity:.9; }
/* the plan: one row for each AI, then Start */
.plancard { border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.pc-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; }
.pc-head b { font-weight:500; }
.pc-head .muted { font-size:13px; }
.pc-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line); }
.pc-row .av.logo { width:32px; height:32px; }
.pc-t { flex:1; min-width:0; display:flex; flex-direction:column; }
.pc-t b { font-weight:500; }
.pc-t span { color:var(--muted); font-size:13px; }
.pc-n { flex:none; color:var(--faint); font-size:13px; }
.pc-every { padding:8px 16px; border-top:1px solid var(--line); }
.pc-every .plan { margin:6px 0 4px; }
.pc-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--line); background:var(--page); }
.pc-foot .btn { height:36px; padding:0 16px; }
.live { display:flex; align-items:center; gap:6px; color:var(--accent); font-size:12.5px; font-weight:500; }
.answer-wrap { display:flex; flex-direction:column; gap:4px; }
.answer { padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); font-size:14.5px; line-height:1.6; overflow-wrap:anywhere; }
/* The answer in ISAI's own type (richText): paragraphs, headings, lists, code. */
.answer > :first-child { margin-top:0; }
.answer > :last-child { margin-bottom:0; }
.answer p { margin:0 0 .7em; }
.answer .rt-h { margin:1em 0 .35em; font-size:15.5px; font-weight:600; letter-spacing:-.005em; }
.answer ul, .answer ol { margin:0 0 .7em; padding-left:1.35em; }
.answer li { margin:.2em 0; }
.answer li::marker { color:var(--muted); }
.answer code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em; padding:1px 5px; border-radius:5px; background:var(--surface2, var(--hover)); }
.answer pre { margin:0 0 .7em; padding:10px 12px; border-radius:10px; background:var(--surface2, var(--hover)); overflow-x:auto; white-space:pre; }
.answer pre code { padding:0; background:none; font-size:13px; }
.answer strong { font-weight:600; }
/* A chat, as a group chat: each AI's icon on the left, its answer in a bubble (its name on top when several AIs are in
   the chat), no status chip. The person's own messages are the bubbles on the right. */
.msg.ai.chat { gap:10px; margin-bottom:14px; align-items:flex-start; }
.msg.ai.chat .av.logo { width:32px; height:32px; border-radius:50%; margin-top:2px; }
.msg.ai.chat .mbody { gap:4px; }
.cbubble { align-self:flex-start; max-width:min(100%, 720px); padding:9px 14px 10px; border-radius:4px 18px 18px 18px; background:var(--surface);
  border:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.cbubble .who { font-size:12.5px; font-weight:600; color:var(--accent); }
.cbubble > p { margin:0; }
.msg.ai.chat .answer { padding:0; border:0; border-radius:0; font-size:15px; }
.afoot { display:flex; gap:4px; margin-top:-2px; }
.ib.copy { width:30px; height:30px; border-radius:8px; }
/* The answer quality log: a soft note under an answer that looks wrong, and the thumbs-down when it is set */
.qnote { display:flex; flex-direction:column; gap:6px; margin:8px 0 4px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:13.5px; }
.qnote p { margin:0; display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.qnote p svg { flex:none; margin-top:2px; }
.ib.copy.on { color:var(--text); }
.answer.clamp { max-height:13.5em; overflow:hidden; cursor:pointer;
  mask-image:linear-gradient(180deg, #000 55%, transparent); -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent); }
.more { align-self:flex-start; display:inline-flex; align-items:center; gap:4px; padding:2px 4px; border:0; border-radius:6px; background:none; color:var(--accent);
  font-size:12.5px; font-weight:500; cursor:pointer; }
.more:hover { text-decoration:underline; text-underline-offset:3px; }
.round { display:flex; align-items:center; gap:10px; margin:4px 0 18px 42px; color:var(--faint); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.round::after { content:""; flex:1; height:1px; background:var(--line); }
/* status words: Waiting · Working · Done · Needs you · Skipped */
.chipst { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:11px; font-size:12px; font-weight:600; white-space:nowrap;
  color:var(--muted); box-shadow:inset 0 0 0 1.5px var(--line-strong); }
.chipst.running { background:var(--accent-soft); color:var(--accent); box-shadow:none; }
.chipst.done { background:var(--accent); color:var(--on-accent); box-shadow:none; }
.chipst.failed { background:var(--text); color:var(--surface); box-shadow:none; }
.chipst.skipped { color:var(--faint); box-shadow:inset 0 0 0 1.5px var(--line); }
.chipst.verdict { background:var(--surface2); color:var(--text); box-shadow:none; font-weight:500; }
.warn { margin:0; font-size:13.5px; }
/* the report */
.headline { font-size:18px; font-weight:600; line-height:1.35; letter-spacing:-.01em; }
.summary { font-size:15px; line-height:1.65; }
.rwho { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:-2px; color:var(--muted); font-size:13px; }
.rwho .stack { display:inline-flex; }
.rwho .stack .av.logo { width:22px; height:22px; border:2px solid var(--surface); }
.rwho .stack .av.logo + .av.logo { margin-left:-6px; }
.rwho b { font-weight:500; color:var(--text); }
.rwho b.pass { color:var(--accent); }
.linkbtn { padding:0; border:0; background:none; color:var(--accent); font:inherit; cursor:pointer; }
.linkbtn:hover { text-decoration:underline; }
.rsec { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.rsec:last-of-type { border-bottom:1px solid var(--line); }
.rsec > h3 { margin:0; font-size:14px; font-weight:500; }
.rsec-t { display:flex; align-items:center; gap:10px; width:100%; padding:12px 0; border:0; background:none; color:var(--text); font:inherit; font-weight:500; text-align:left; cursor:pointer; }
.rsec-t svg { color:var(--muted); }
.rsec-in { display:flex; flex-direction:column; gap:8px; padding:0 0 14px 25px; }
.rsec-in > p { margin:0; }
.work { max-height:560px; overflow:auto; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--page); font-size:14.5px; line-height:1.65;
  white-space:pre-wrap; overflow-wrap:anywhere; }
.items { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.items li { display:flex; flex-direction:column; gap:3px; }
.items li > b { font-weight:500; }
.items .by { color:var(--muted); font-size:12.5px; }
.items .views { display:flex; flex-direction:column; gap:4px; margin:4px 0 0; padding-left:12px; border-left:3px solid var(--line-strong); font-size:13.5px; }
.bullets { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; }
.top-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tag { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:10px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.tag.high { background:var(--text); color:var(--surface); }
.tag.medium { color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent); }
.tag.low { color:var(--muted); box-shadow:inset 0 0 0 1.5px var(--line-strong); }
.score { display:inline-flex; align-items:center; gap:3px; }
.score i { width:12px; height:4px; border-radius:2px; background:var(--line-strong); }
.score i.on { background:var(--accent); }
.rfoot { margin-top:4px; }
.rfoot .rate { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; margin-left:auto; }
.rfoot .q { font-weight:500; font-size:13px; }
.btn[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* folds: closed at first, one line says what is inside */
details.fold > summary { display:flex; align-items:center; gap:6px; width:max-content; max-width:100%; cursor:pointer; list-style:none; color:var(--accent); font-size:12.5px; font-weight:500; }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary svg { transition:transform .15s; }
details.fold[open] > summary svg { transform:rotate(90deg); }
details.fold > .foldin { margin-top:8px; }

/* thinking: three still or soft dots, never a spinner */
/* ISAI at work: its mark breathes, slowly. Words that are in progress shimmer softly (as the AIs' own "Thinking"). */
.pulse { display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); animation:dl-breathe 1.6s ease-in-out infinite; }
@keyframes dl-breathe { 0%, 100% { transform:scale(.7); opacity:.45; } 50% { transform:scale(1); opacity:1; } }
/* A message about work going on: its avatar breathes (one icon, never a second one inside). */
.msg.working > .av { animation:dl-breathe-av 1.8s ease-in-out infinite; }
@keyframes dl-breathe-av { 0%, 100% { transform:scale(.9); opacity:.65; } 50% { transform:scale(1); opacity:1; } }
.shimmer, .live [data-live] { background:linear-gradient(90deg, var(--muted) 0%, var(--text) 45%, var(--muted) 90%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:dl-shimmer 2.4s linear infinite; }
@keyframes dl-shimmer { from { background-position:120% 0; } to { background-position:-120% 0; } }

/* ---------- buttons, cards ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--surface); color:var(--text); font-size:13px; font-weight:500; white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:background .12s, border-color .12s, opacity .12s; }
.btn:hover { background:var(--surface2); }
.btn:active { transform:scale(.98); }
.btn.go { background:var(--primary); border-color:transparent; color:var(--on-primary); }
.btn.go:hover { background:var(--primary); opacity:.88; }
.btn.sm { height:30px; padding:0 11px; border-radius:9px; font-size:12.5px; }
.btn.quiet { border-color:transparent; background:none; color:var(--muted); }
.btn.quiet:hover { background:var(--hover); color:var(--text); }
.btn.wide { width:100%; height:42px; font-size:14px; }
.btn:disabled { opacity:.5; cursor:default; transform:none; }
.link { padding:0; border:0; background:none; color:var(--accent); font:inherit; font-weight:500; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.banner { display:flex; align-items:center; gap:10px; margin:0 0 22px; padding:10px 12px 10px 14px; }
.banner > svg { color:var(--accent); }
.banner > span { flex:1; min-width:0; }
/* The guest's sign-in card: the sign-in form (as on the sign-in page) in a small card in the bottom right corner (Google One Tap is at the top right), never a band across the page. */
.gcard { position:fixed; z-index:40; bottom:16px; right:12px; width:min(320px, calc(100vw - 24px)); max-height:calc(100dvh - 78px); overflow-y:auto; padding:22px 22px 18px; border-radius:20px;
  background:var(--surface); border:1px solid var(--line-strong); box-shadow:0 14px 44px rgba(20,22,28,.16); animation:gin .25s var(--ease, ease) both; }
.gcard[hidden] { display:none; }
.gcard .gx { position:absolute; top:8px; right:8px; }
.auth.inplace { display:flex; flex-direction:column; gap:10px; width:100%; padding:0; border:0; box-shadow:none; background:none; }
.auth.inplace .mark { width:32px; height:32px; }
.auth.inplace h1 { margin:6px 0 0; font-size:20px; }
.auth.inplace .btn.wide { height:44px; justify-content:center; }
@keyframes gin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .gcard { animation:none; } }
@media (max-width: 860px) { .gcard { bottom:max(12px, env(safe-area-inset-bottom)); right:12px; left:12px; width:auto; max-height:72dvh; } }
.ext { display:flex; gap:14px; margin:0 0 18px; padding:16px 18px; text-align:left; }
.ext-ic { flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.ext-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ext-body p { margin:0; color:var(--muted); font-size:13.5px; }
.ext-body .row { margin-top:4px; }
.msg .ext { margin:0; }

/* ---------- the composer ---------- */
.composer { display:flex; flex-direction:column; gap:6px; }
.composer .box { position:relative; padding:14px 14px 12px 18px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:0 8px 28px -20px rgba(20,22,28,.5);
  transition:border-color .15s, box-shadow .15s; }
.composer .box:focus-within { border-color:var(--muted); }
textarea.ask { display:block; width:100%; min-height:1.6em; max-height:40vh; padding:4px 0 10px; border:0; outline:none; resize:none; background:none;
  font-size:15.5px; line-height:1.5; field-sizing:content; overflow-y:auto; }
textarea.ask::placeholder { color:var(--faint); }
/* @mentions as chips in the box: a layer behind the box with the same text (clear), each mention on a soft accent
   background. No padding or border on a chip: no word moves. */
textarea.ask { position:relative; background:transparent; }
.askmirror { position:absolute; margin:0; border:0; overflow:hidden; pointer-events:none; color:transparent; white-space:pre-wrap; overflow-wrap:break-word; }
.askmirror .mchip { color:transparent; background:var(--accent-soft); border-radius:4px; box-shadow:0 0 0 2px var(--accent-soft); }
.bubble .mchip { color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:0 4px; font-weight:500; }
.mention .mshort { flex:none; margin-left:auto; color:var(--muted); font-size:12px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
/* attached files: chips in the box, names in the bubbles, a soft frame while a file is dragged over the page */
.files { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.fchip { display:inline-flex; align-items:center; gap:6px; max-width:100%; height:30px; padding:0 4px 0 10px; border:1px solid var(--line); border-radius:15px; background:var(--surface2);
  color:var(--text); font-size:12.5px; }
.fchip > svg { flex:none; color:var(--accent); }
.fchip.pic { padding-left:4px; }
.fchip .fthumb { flex:none; width:24px; height:24px; border-radius:7px; object-fit:cover; background:var(--line); }
.fchip .fname { min-width:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.fchip small { flex:none; color:var(--muted); font-size:11.5px; }
.fchip.reading small { color:var(--accent); }
.fchip .fx { flex:none; display:grid; place-items:center; width:22px; height:22px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.fchip .fx:hover { background:var(--line); color:var(--text); }
.bfiles { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.bfile { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:2px 10px 2px 8px; border-radius:12px; background:var(--surface); color:var(--muted); font-size:12.5px; }
.bfile > svg { flex:none; color:var(--accent); }
.bfile span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill.atbtn { flex:none; padding:0 9px; color:var(--muted); }
.main.dropping .composer .box { border-color:var(--accent); border-style:dashed; background:var(--accent-soft); }
.tools { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:36px; padding-right:46px; }
.tools .ais { flex:0 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:6px; }
.pill { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border:1px solid var(--line); border-radius:99px; background:var(--surface); color:var(--text);
  font-size:13px; font-weight:500; white-space:nowrap; cursor:pointer; transition:background .12s, border-color .12s; }
.pill:hover { background:var(--hovl), var(--surface); }
.pill[aria-expanded="true"] { background:var(--sel); }
.pill.mode { flex:none; padding:0 10px 0 10px; }
.pill.mode > svg:first-child { color:var(--accent); }
.pill.mode > svg:last-child { color:var(--faint); }
.pill.ai { color:var(--muted); }
.pill.ai[aria-pressed="true"] { border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-soft); color:var(--text); }
.pill.ai small { color:var(--muted); font-size:11.5px; font-weight:400; }
.dot { flex:none; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
.dot.signed-in { background:var(--accent); }
.dot.signed-out { background:transparent; box-shadow:inset 0 0 0 1.5px var(--text); }
.send { position:absolute; right:12px; bottom:10px; width:36px; height:36px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:var(--primary); color:var(--on-primary);
  cursor:pointer; transition:opacity .12s, background .12s; }
.send:hover { opacity:.88; }
.send:disabled { background:var(--surface2); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); cursor:default; opacity:1; }
.chint { margin:0 8px; color:var(--faint); font-size:12px; text-align:center; }
.who { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin:0 8px; color:var(--muted); font-size:12.5px; }
.pill.who-p { height:26px; padding:0 10px; font-size:12px; color:var(--muted); }
.pill.who-p[aria-pressed="true"] { border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-soft); color:var(--text); }
.who-t { color:var(--faint); font-size:12px; }
.cmsg { margin:0 8px; color:var(--text); font-size:13px; font-weight:500; text-align:center; }
.cmsg:empty { display:none; }
.ctx { display:flex; align-items:center; gap:8px; padding:4px 4px 4px 12px; border:1px solid var(--line); border-radius:14px; background:var(--page); color:var(--muted); font-size:13px; }
.ctx > svg { color:var(--accent); }
.ctx b { color:var(--text); font-weight:500; }

/* ---------- Home ---------- */
/* One short line over the message box (a temporary chat adds one quiet line). */
.hello { display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 0 24px; text-align:center; }
.hello h1 { margin:0; font-size:28px; font-weight:600; line-height:1.2; letter-spacing:-.02em; text-wrap:balance; }
.hello p { margin:0; max-width:440px; color:var(--muted); font-size:14px; text-wrap:balance; }

/* ---------- the working AI's own bubble: what it does now, and its buttons behind a chevron (icons only) ---------- */
.trow { display:flex; align-items:center; gap:10px; }
.trow > span { flex:1; min-width:0; }
.trow .ctl { margin-left:auto; flex:none; width:34px; height:34px; border-radius:11px; border:1px solid var(--line); }
.trow .ctl svg { transition:transform .2s ease; }
.trow .ctl[aria-expanded="true"] { background:var(--sel); color:var(--text); }
.trow .ctl[aria-expanded="true"] svg { transform:rotate(180deg); }
.bact { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding-top:14px; border-top:1px solid var(--line); }
.bact .bi { width:38px; height:38px; border-radius:12px; border:1px solid var(--line); color:var(--text); }
.bact .bi.main { background:var(--primary); color:var(--on-primary); border-color:transparent; }
.bact .bi.on { background:var(--sel); }
/* notes over the message box (a lost connection, a task another page drives) and the jump bubble */
.dnote { display:flex; flex-direction:column; gap:6px; padding:8px 12px; margin-bottom:8px; border:1px solid var(--line); border-radius:12px; background:var(--surface2); color:var(--muted); font-size:13px; }
.dnote p { margin:0; }
.jump { display:flex; align-items:center; gap:8px; width:fit-content; margin:0 auto 8px; padding:4px 12px 4px 6px; border:1px solid var(--line); border-radius:99px; background:var(--surface); color:var(--text); font-size:13px; cursor:pointer;
  box-shadow:0 10px 24px -14px rgba(20,22,28,.4); }
.jump:hover { background:var(--hovl), var(--surface); }
.jump .av.logo { width:24px; height:24px; position:relative; }
.jump .av.logo.working::after, .jump .av.logo.needs::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--accent); }
.jump .av.logo.needs::after { border-color:var(--text); }
/* the thin line under the header: the steps done; it sweeps while the team works and breathes when it needs you */
.top { position:relative; }
.ambient { position:absolute; left:0; right:0; bottom:0; height:2px; background:color-mix(in oklab, var(--text) 8%, transparent); overflow:hidden; }
.ambient::before { content:""; position:absolute; left:0; top:0; bottom:0; width:calc(var(--p, 0) * 1%); background:var(--accent); opacity:.85; transition:width .5s ease; }
.ambient::after { content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(90deg, transparent, var(--accent), transparent); background-size:40% 100%; background-repeat:no-repeat; }
.ambient[data-state="working"]::after { opacity:.9; }
.ambient[data-state="needs"]::before { background:var(--text); }
.twhere { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12.5px; }
.tword.st-work { color:var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ambient[data-state="working"]::after { animation:dl-sweep 2.2s ease-in-out infinite; }
  .ambient[data-state="needs"]::before { animation:dl-breath 2.4s ease-in-out infinite; }
  @keyframes dl-sweep { from { background-position:-40% 0; } to { background-position:140% 0; } }
  @keyframes dl-breath { 50% { opacity:.35; } }
}
@media (max-width: 640px) { .twhere { display:none; } }

/* ---------- Your AIs ---------- */
.phead h1 { margin:12px 0 4px; font-size:24px; font-weight:600; letter-spacing:-.02em; }
.phead p { margin:0 0 18px; color:var(--muted); }
.ailist { list-style:none; margin:0 0 14px; padding:0; }
.airow { display:flex; align-items:center; gap:12px; padding:12px 16px; flex-wrap:wrap; }
.airow + .airow { border-top:1px solid var(--line); }
.airow .mono { flex:none; width:34px; height:34px; }
.aitext { flex:1; min-width:160px; display:flex; flex-direction:column; gap:2px; }
.aitext b { font-weight:600; }
.ast { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12.5px; }
.ast.signed-in { color:var(--accent); font-weight:500; }
.ast.signed-out { color:var(--text); font-weight:500; }
.ast small { color:var(--muted); font-weight:400; font-size:12.5px; }

/* ---------- menus: an icon in a soft chip and the name; what it means shows as a tip on hover ---------- */
.menu { position:fixed; z-index:50; min-width:240px; max-width:min(380px, calc(100vw - 16px)); max-height:min(76vh, 600px); overflow-y:auto; padding:8px; border:1px solid var(--line); border-radius:20px; background:var(--surface);
  box-shadow:0 30px 70px -24px rgba(20,22,28,.4); }
.mi { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:6px 10px 6px 8px; border:0; border-radius:14px; background:none; color:var(--text); font-size:14px; text-align:left;
  text-decoration:none; cursor:pointer; }
.mi:hover, .mi:focus-visible { background:var(--hover); outline:none; }
.mi:disabled { opacity:.45; cursor:default; }
.mi:disabled:hover { background:none; }
.mode-mi { align-items:flex-start; }
.mi-ic { flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--text); }
.mode-mi[aria-checked="true"] .mi-ic { background:var(--accent); color:var(--on-accent); }
.mi-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.mi-t b { font-weight:500; }
.mi-t small { color:var(--muted); font-size:12px; line-height:1.4; }
.mi-on { align-self:center; color:var(--text); }
.mi.danger .mi-ic { background:color-mix(in oklab, var(--text) 10%, transparent); }
.mi kbd { margin-left:auto; }
.mlabel { padding:10px 10px 4px; color:var(--muted); font:500 11px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msep { height:1px; margin:8px 10px; background:var(--line); }

/* ---------- sign in, and the calm screens ---------- */
.authwrap { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px 16px; background:var(--page); }
.auth { width:min(380px, 100%); display:flex; flex-direction:column; gap:10px; padding:28px 26px 22px; border-radius:20px; box-shadow:var(--shadow); }
.auth .lock { display:flex; align-items:center; gap:12px; }
.auth .mark { width:40px; height:40px; }
.auth h1 { margin:8px 0 0; font-size:22px; font-weight:600; letter-spacing:-.015em; }
.auth .lead { margin:0 0 6px; color:var(--muted); }
.auth .or { margin:4px 0 0; color:var(--faint); font-size:13px; }
.auth .err { margin:0; min-height:1.2em; font-size:13px; font-weight:500; }
.auth .small { margin:2px 0 0; color:var(--muted); }
.authwrap > .small { max-width:380px; margin:0; text-align:center; }
.field { width:100%; height:42px; padding:0 12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); font-size:15px; outline:none;
  transition:border-color .15s, box-shadow .15s; }
.field:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field::placeholder { color:var(--faint); }
.center { min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); text-align:center; }
.center .mark { width:36px; height:36px; }
.center h1 { margin:8px 0 0; color:var(--text); font-size:20px; font-weight:600; }
.center p { max-width:420px; margin:0; }
.center-row { justify-content:center; margin-top:8px; }

/* a short message after an action */
.toast { position:fixed; z-index:70; left:50%; bottom:96px; transform:translateX(-50%); max-width:calc(100% - 32px); margin:0; padding:10px 16px; border-radius:12px; display:flex; gap:14px; align-items:center;
  background:var(--primary); color:var(--on-primary); font-size:13.5px; font-weight:500; box-shadow:0 14px 34px -12px rgba(20,22,28,.5); }
.toast:empty { display:none; }
.toast-act { border:0; background:none; color:inherit; font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; padding:0; }

/* ---------- narrow screens (phones, 360-430 px): the sidebar is a drawer, everything in one column, taps of 40 px ---------- */
.scrim { position:fixed; inset:52px 0 0 0; z-index:20; background:rgba(0,0,0,.35); }
@media (max-width: 1100px) {
  .app { grid-template-columns:var(--side-w) minmax(0, 1fr); grid-template-areas:"tabs tabs" "side main"; }
  .app.margin-off .margin, .margin { display:flex; position:fixed; z-index:30; top:52px; right:0; bottom:0; width:min(310px, 88%); transform:translateX(104%); visibility:hidden;
    box-shadow:0 0 40px -10px rgba(20,22,28,.35); transition:transform .2s ease, visibility 0s linear .2s; }
  .app.members-open .margin { transform:none; visibility:visible; transition:transform .2s ease; }
}
@media (max-width: 860px) {
  .app, .app.side-closed { grid-template-columns:minmax(0, 1fr); grid-template-areas:"tabs" "main"; }
  .side, .app.side-closed .side { position:fixed; z-index:30; top:52px; bottom:0; left:0; width:min(310px, 88%); visibility:hidden; transform:translateX(-104%);
    box-shadow:0 0 40px -10px rgba(20,22,28,.35); transition:transform .2s ease, visibility 0s linear .2s; padding:14px 12px 12px; border-right:1px solid var(--line); }
  .app.drawer-open .side { visibility:visible; transform:none; transition:transform .2s ease; }
  .narrow-only { display:inline-flex; }
  .wide-only { display:none; }
  .top { padding:6px 8px 6px 16px; min-height:48px; }
  .top .mbtn, .trow .ctl, .bact .bi, .tcard .x { width:40px; height:40px; }
  .col { padding:8px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); }
  .dock { padding:0 max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .dock > * { max-width:none; }
  .hello h1 { font-size:24px; }
  /* tap targets of 40 px or more */
  .ib, .ib.sm { width:40px; height:40px; }
  .btn, .btn.sm { height:40px; }
  .pill, .pill.who-p { height:40px; border-radius:20px; }
  select.pick { height:40px; background-position:calc(100% - 15px) 17px, calc(100% - 10px) 17px; }
  .hrow { min-height:44px; }
  .mi { min-height:44px; }
  details.fold > summary { min-height:40px; }
  .more { min-height:40px; }
  .send { width:40px; height:40px; }
  .tools { padding-right:50px; }
  /* "Plan and report:" on its own line, the AIs under it, then what it costs */
  .who { row-gap:8px; }
  .who > span:first-child, .who-t { flex-basis:100%; text-align:center; }
  .toast { bottom:calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  .strip, .shelf-only { display:none; }
  .strip { flex:1; }
  .tabswitch { display:inline-flex; }
  .tabbar { padding-inline:4px; }
  .tabbar .rcap { margin-left:auto; }
}
@media (max-width: 520px) {
  .tmode { display:none; }
  .composer .box { padding:10px 10px 8px 14px; border-radius:20px; }
  .msg { gap:10px; }
  .round { margin-left:38px; }
  /* a plan step: its text, then the AI picker on its own line under it */
  .pstep { flex-wrap:wrap; row-gap:8px; }
  .pstep > .pbody { flex:1 1 calc(100% - 36px); }
  select.pick { margin-left:36px; max-width:calc(100% - 36px); }
  .bubble { max-width:92%; }
  .pill.ai small { display:none; }
  /* the extension card: the icon above, the text and buttons full width */
  .ext { flex-direction:column; gap:10px; padding:16px; }
  .ext-body .row .btn { flex:1 1 auto; }
  .note > span { min-width:0; flex-basis:100%; }
  .airow { padding:12px 14px; }
  .airow > .row { margin-left:46px; }
  .rfoot .rate { margin-left:0; }
  .auth { padding:24px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } .pulse, .msg.working > .av, .shimmer, .live [data-live] { animation:none; } .shimmer, .live [data-live] { color:var(--muted); background:none; } }
/* iPhones zoom into any field under 16px; touch screens get 16px text in fields */
@media (pointer: coarse) { textarea, select, .field { font-size:16px !important; } }
/* keyboard focus on rows as wide as their box: the ring goes inside */
.hrow:focus-visible, .navrow:focus-visible, .nav .row:focus-visible, .mi:focus-visible { outline-offset:-2px; }

/* The @ button: the number of chosen AIs. */
.pill.atbtn { width:32px; padding:0; justify-content:center; color:var(--muted); }
.pill.atbtn > svg { color:var(--accent); }
@media (max-width: 640px) { .pill.atbtn { min-width:40px; justify-content:center; } }
/* Sleek composer: the @ menu, one quiet line under the box. "+" holds files, a past task and the tools; the microphone
   sits at the end of the row, next to Send. */
.mnote { margin:4px 12px 8px; color:var(--faint); font-size:12px; max-width:280px; }
.mention .mnote { max-width:none; color:var(--muted); font-size:13px; }
.pill.atbtn.plus > svg { color:var(--text); }
.tools .speak { margin-left:auto; }
/* Temporary chat: the switch at the top of Home, and the label on such a chat. */
.ib.tempbtn.on { color:var(--accent); background:var(--accent-soft); }
.tmode.temp { border-style:dashed; }

/* AI logos, chips and the AI list (the @ button and typing @). */
.ailogo { flex:none; display:block; border-radius:50%; object-fit:contain; } /* every AI icon is a circle */
.ailogo.none { border-radius:50%; background:var(--line-strong); }
.aichip { display:inline-grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:99px; background:var(--surface);
  color:var(--text); cursor:pointer; }
.aichip:hover { background:var(--hovl), var(--surface); }
/* ISAI answers (no AI picked): shown, not removable. */
.aichip.dela, .aichip.dela:hover { cursor:default; background:var(--surface); text-decoration:none; }
.aichip .mark { flex:none; }
.airow .mi-ic { position:relative; width:30px; height:30px; display:grid; place-items:center; }
.airow .mi-ic .dot { position:absolute; right:0; bottom:0; width:8px; height:8px; box-shadow:0 0 0 2px var(--menu-bg, var(--surface)); }
.box { position:relative; }
.mention { position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:30; max-height:320px; overflow:auto; padding:6px; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); box-shadow:0 12px 32px rgba(0,0,0,.18); }
.c-task .mention { top:auto; bottom:calc(100% + 6px); }
.mention .airow { width:100%; }
.mention .airow.active { background:var(--hover); }
@media (max-width: 640px) { .aichip { width:40px; height:40px; } .pill.atbtn { width:40px; } }
.av.logo { flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--surface); border:1px solid var(--line); overflow:hidden; }
.msg .av.logo { width:30px; height:30px; border-radius:50%; }

/* Your AIs at work: compact live tiles, a bigger look on hover, the full-screen watch view. Theme colours only. */
.mirror { display:flex; flex-direction:column; gap:6px; height:100%; box-sizing:border-box; padding:8px 10px; font-size:9.5px; line-height:1.45; color:var(--muted); overflow:hidden; }
.mirror.big { gap:10px; padding:14px 18px; font-size:13px; }
.mirror .mh { display:flex; align-items:center; gap:5px; color:var(--text); }
.mirror .mq { align-self:flex-end; max-width:82%; padding:4px 8px; border-radius:9px; background:var(--accent-soft); color:var(--text); }
.mirror.big .mq { padding:8px 12px; border-radius:12px; }
.mirror .ma { color:var(--text); overflow:hidden; }
.mirror .mw { display:flex; flex-direction:column; gap:5px; }
.mirror .shim { display:block; height:6px; width:88%; border-radius:3px; background:linear-gradient(90deg, var(--line) 0, var(--surface2, var(--hover)) 50%, var(--line) 100%); background-size:300px 100%; animation:dl-shim 1.4s linear infinite; }
.mirror .shim.s2 { width:64%; }
.mirror.big .shim { height:10px; }
@keyframes dl-shim { from { background-position:-150px 0 } to { background-position:150px 0 } }
.livetag { position:absolute; right:8px; top:8px; display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 7px; border:1px solid var(--line); border-radius:10px; background:#fff; color:#111114; font-size:10.5px; font-weight:600; }
.livetag i { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:dl-pulse 1.6s ease-out infinite; }
.livetag.in { position:static; }
@keyframes dl-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent) } 100% { box-shadow:0 0 0 6px transparent } }
.watch { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; background:var(--page); }
.wbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:52px; padding:6px 16px; box-sizing:border-box; background:var(--surface); border-bottom:1px solid var(--line); }
.wurl { color:var(--muted); font-size:12.5px; }
.wsw { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.wbody { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; box-sizing:border-box; }
.wimg { flex:0 1 auto; min-height:0; max-width:100%; max-height:calc(100vh - 130px); object-fit:contain; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 36px rgba(0,0,0,.08); background:#fff; }
.wbody .mirror.big { width:min(900px, 100%); height:auto; min-height:300px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.wnote { margin:0; color:var(--muted); font-size:12.5px; }
/* The live tab (Show live): the AI's tab as Chrome shares it, sized to fit; the words and Stop showing under it. */
.wvideo { width:auto; background:var(--surface); }
.wlive { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
@media (max-width:640px) { .wurl { display:none; } }
@media (prefers-reduced-motion: reduce) { .mirror .shim, .wbubble .shim, .livetag i { animation:none; } }
.wsw .pill[aria-pressed="true"] { background:var(--text); border-color:var(--text); color:var(--surface); }
/* The base of a new task: what ISAI sends, each part removable */
.ctx-wrap { display:flex; flex-direction:column; gap:6px; }
.ctx .more { flex:none; }
.baseparts { list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:14px; background:var(--page); max-height:220px; overflow:auto; }
.baseparts li { display:flex; align-items:flex-start; gap:8px; padding:6px 4px 6px 8px; border-radius:10px; }
.baseparts li:hover { background:var(--hover); }
.bp-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:13px; }
.bp-t b { font-weight:500; color:var(--text); }
.bp-t span { color:var(--muted); overflow-wrap:anywhere; }
/* The plan's estimate: about how long, and the messages to each AI */
.estimate { display:flex; flex-direction:column; gap:2px; margin:4px 0 2px; }
.estimate p { margin:0; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text); }
.estimate p > svg { color:var(--accent); flex:none; }
.estimate p.muted { color:var(--muted); }
/* AI updates: today's digest and the earlier ones */
.updday { font-size:13px; font-weight:600; color:var(--muted); margin:18px 0 6px; text-transform:none; }
.updlist { list-style:none; margin:0; padding:4px 0; }
.upd { display:flex; gap:12px; padding:12px 14px; border-top:1px solid var(--line); }
.upd:first-child { border-top:0; }
.updtext { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.updtext p { margin:0; overflow-wrap:anywhere; }
.updtext .bullets { margin:0; padding-left:18px; }
.updhead { display:flex; align-items:baseline; gap:8px; }
.updfoot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.srclink { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--accent); text-decoration:none; min-height:40px; }
.srclink:hover { text-decoration:underline; }
.navrow small.newn { color:var(--accent); font-weight:600; }
.updnone { padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.updnone p { margin:0; }
/* A greeting in a task mode: Send in Chat, or Plan it anyway */
.shortask { display:flex; flex-direction:column; gap:8px; margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font-size:13px; color:var(--text); }
/* The suggestion under a chat answer: a team task of a kind (Chrome's built-in AI) */
.msg.suggest .lead-b { display:flex; align-items:center; gap:8px; }
.msg.suggest .lead-b > svg { color:var(--accent); flex:none; }

/* What ISAI learned (Learn from my results): two switches, then each kind of work with its AIs. */
.lsw { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; margin:0 0 10px; text-align:left; font:inherit; color:var(--text); cursor:pointer; }
.lsw:disabled { cursor:default; opacity:.55; }
.lsw .mi-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lsw small { color:var(--muted); }
.tgl { flex:none; position:relative; width:38px; height:22px; border-radius:11px; background:var(--line-strong); transition:background .15s; }
.tgl i { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--page); transition:transform .15s; }
.tgl.on { background:var(--accent); }
.tgl.on i { transform:translateX(16px); }
.lrow { align-items:center; }
.afoot { margin-top:2px; }
/* ISAI's words before a plan it made from a chat message (planFromDela). */
.planmsg .intro { margin:0 0 6px; }

/* Sign in to start (a plan's AIs that are not signed in, a new AI): the layout of the extension card. */
.signin-card .ext-body p { margin:4px 0 10px; }

/* ISA's tools in the app: Check under an answer (the words as in ISA), Find pages at the end of a task, Ask ISA. */
.vcheck { margin-top:8px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
.vcheck.busy { flex-direction:row; align-items:center; gap:10px; color:var(--muted); }
.vhead { display:flex; align-items:center; gap:8px; }
.vhead > svg { color:var(--accent); flex:none; }
.vhead .grow, .isarow .grow { flex:1; min-width:0; }
.vhead .ib { width:28px; height:28px; }
.vfacts { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.vfacts li { display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid var(--line); }
.vfacts li:first-child { padding-top:0; border-top:0; }
.vtop { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.vclaim { flex:1 1 220px; min-width:0; font-weight:500; line-height:1.45; }
.vdo { margin:0; padding:8px 10px; border-radius:10px; background:var(--surface2); line-height:1.5; }
.vsrc { margin:0; padding-left:10px; border-left:3px solid var(--line-strong); color:var(--muted); line-height:1.5; overflow-wrap:anywhere; }
.vsrc a { color:var(--text); font-weight:500; }
.vnote { margin:0; color:var(--muted); font-size:12px; }
.vtag { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px; border-radius:11px; font-size:12px; font-weight:600; white-space:nowrap; background:var(--surface2); color:var(--muted); }
.vtag.true { background:var(--accent); color:var(--on-accent); }
.vtag.maybe { background:var(--accent-soft); color:var(--accent); }
.vtag.partly { background:transparent; color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent); }
.vtag.no { background:var(--text); color:var(--surface); }
.vtag.cant { background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1.5px var(--line-strong); }
.isarow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 14px; padding:10px 14px; border:1px dashed var(--line-strong); border-radius:var(--r); font-size:13.5px; }
.finds { margin:6px 0 14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); display:flex; flex-direction:column; gap:10px; }
.finds > svg, .finds .vhead > svg { color:var(--accent); }
.finds ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.finds li { display:flex; flex-direction:column; gap:2px; }
.finds li a { color:var(--text); font-weight:500; text-decoration:none; line-height:1.4; }
.finds li a:hover { text-decoration:underline; }
.askcard { padding:12px 14px; display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.askbox { width:100%; box-sizing:border-box; min-height:72px; max-height:220px; padding:4px 2px; border:0; resize:none; background:none; color:var(--text); font:inherit; font-size:15px; line-height:1.5; outline:none; }
.askcard .row { justify-content:flex-end; }
.askans { padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.askans .answer { padding:0; border:0; }

/* Settings: the keys, ISA's tools and the tour */
.setsec { padding:16px 18px; margin:0 0 12px; display:flex; flex-direction:column; gap:10px; }
.setsec h2 { margin:0; display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; }
.setsec h2 svg { color:var(--accent); }
.setsec p { margin:0; }
.keys { margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px 20px; }
.krow { display:flex; align-items:center; gap:12px; min-height:30px; }
.krow dt { flex:0 0 44px; margin:0; }
.krow dd { margin:0; color:var(--text); font-size:13.5px; }
kbd { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; padding:0 7px; box-sizing:border-box; border:1px solid var(--line-strong); border-bottom-width:2px;
  border-radius:6px; background:var(--surface); color:var(--text); font:600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* the tour: one small card beside the part it explains */
.tour { position:fixed; z-index:60; width:min(300px, calc(100vw - 24px)); padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface);
  color:var(--text); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; font-size:13.5px; }
.tour b { font-size:14.5px; }
.tour p { margin:0; color:var(--muted); line-height:1.5; }
.tfoot { display:flex; align-items:center; gap:8px; margin-top:6px; }
.tdots { display:flex; gap:4px; margin-right:auto; }
.tdots i { width:6px; height:6px; border-radius:50%; background:var(--line-strong); }
.tdots i.on { background:var(--accent); }
.tour-on { outline:2px solid var(--accent); outline-offset:2px; border-radius:10px; }
.krow .kalt { display:block; font-size:11.5px; }

/* What an AI made besides text: pictures (open, download) and files, under the answer and in the report */
.media { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); align-items:start; gap:10px; max-width:720px; }
.mimg { margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); display:flex; flex-direction:column; }
.mshow { display:block; padding:0; border:0; background:var(--surface2); cursor:zoom-in; }
.mshow img { display:block; width:100%; height:auto; max-height:320px; object-fit:contain; }
.mimg figcaption { display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:12.5px; }
.mname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.mfile { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font-size:13px; }
.mfile > svg { color:var(--muted); flex:none; }

/* What an AI asks the person (ISAI needs you, 'input'): its words, then its own buttons or a box for the answer */
.aiask { display:flex; flex-direction:column; gap:8px; margin:2px 0 10px; }
.askq { margin:0; padding:2px 0 2px 12px; border-left:3px solid var(--line-strong); color:var(--text); font-size:14px; line-height:1.55; white-space:pre-wrap; max-height:220px; overflow:auto; }
.askreply { width:100%; height:auto; min-height:72px; padding:10px 12px; resize:vertical; box-sizing:border-box; font:inherit; line-height:1.5; }
details.asked { font-size:13px; color:var(--muted); }
details.asked > summary { cursor:pointer; }
.askpair { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.askpair p { margin:0; color:var(--text); }

/* Tools (chat): the pill in the message box, and the tool on the person's message */
.pill.toolbtn.on { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.pill.toolbtn span { font-size:13px; font-weight:500; }
.mchip.tool { display:inline-flex; align-items:center; gap:4px; }
.toolnote { margin:2px 0 0; }

/* Videos and audio an AI made; Listen (read an answer aloud) and Speak (your voice into the box) */
.mvid video { display:block; width:100%; height:auto; max-height:360px; background:var(--surface2); }
.maud { flex-wrap:wrap; }
.maud .mname { flex:1 1 calc(100% - 32px); }
.maud audio { flex:1 1 160px; min-width:0; height:36px; }
.ib.listen.on { color:var(--accent); background:var(--accent-soft); }
.pill.speak.on { color:var(--accent); background:var(--accent-soft); border-color:transparent; }

/* The account row: a dot when something in its menu wants a look (new AI updates, no extension) */
.navrow.acct .acctdot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
/* The tool that is on, as a pill in the message box (its icon in the accent colour) */
.pill.toolbtn { flex:none; }
.pill.toolbtn > svg { color:var(--accent); }

/* Your AIs: "Request an AI" */
.card.reqai { display:flex; align-items:center; gap:14px; padding:16px 18px; margin-top:16px; }
.card.reqai p { margin:4px 0 0; }
.card.reqai.open { flex-direction:column; align-items:stretch; gap:10px; max-width:520px; }
.card.reqai .lbl { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.card.reqai select.field { appearance:auto; }

/* Less waiting: "Start plans of up to N steps at once" under Start, and the run bar's bell when it is on */
.pc-foot .autostart { display:inline-flex; align-items:center; gap:8px; margin-left:auto; color:var(--muted); font-size:13px; cursor:pointer; }
.pc-foot .autostart input { width:16px; height:16px; margin:0; accent-color:var(--accent); }
.setsec .lsw { padding:12px 0; margin:0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; }
.setsec h2 + .lsw { border-top:0; padding-top:4px; }

/* ISA in the app: its logo (the ISAI mark in a ring, so it is told apart from ISAI), and under its answer its pages,
   numbered as in the answer, then what it used about the person (folded). */
.isalogo { display:inline-grid; place-items:center; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--accent); background:var(--accent-soft); }
.dexmore { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.dexpages { display:flex; flex-direction:column; gap:6px; margin:0; padding:10px 12px 10px 30px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:13px; }
.dexpages li { padding-left:2px; }
.dexpages li::marker { color:var(--muted); font-variant-numeric:tabular-nums; }
.dexpages a { color:var(--text); font-weight:500; text-decoration:none; }
.dexpages a:hover { text-decoration:underline; }
.dexpages small { display:block; color:var(--muted); font-size:12px; }
.dexpages .why { display:block; color:var(--muted); font-size:12px; }
.av.logo:has(> .isalogo) { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); background:var(--accent-soft); }
.av.logo > .isalogo { box-shadow:none; background:none; }

/* ---------- the look: doodles, AI logos and the Look settings ---------- */
/* ISAI doodles: ONE set, a group chat where your AIs are the members. Two masks: most in the text colour, the "alive" ones (typing,
   ticks, sparkles) in the ambient colour. In a chat and on Home only, never in Settings or a page. */
.main::before, .main::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; -webkit-mask-repeat:repeat; mask-repeat:repeat; -webkit-mask-size:440px 440px; mask-size:440px 440px; }
.main::before { background:var(--text); opacity:.035; -webkit-mask-image:var(--dA); mask-image:var(--dA); }
.main::after { background:var(--accent); opacity:.15; -webkit-mask-image:var(--dB); mask-image:var(--dB); }
.main:not(.doodle)::before, .main:not(.doodle)::after, .no-doodles .main::before, .no-doodles .main::after { display:none; }
/* the brand marks: ChatGPT in the text colour, Claude in its orange, Gemini in its own colours; plain ink when "AI logos in colour" is off */
.mk-ink { fill:currentColor; }
.mk-claude { fill:var(--claude); }
.ailogo.glyph { display:inline-grid; place-items:center; flex:none; border-radius:50%; background:var(--surface2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }
.mono-logos .mk-claude, .mono-logos .mk-gem { fill:currentColor; }
.mono-logos img.ailogo { filter:grayscale(1); }
.lrow2 { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--line); }
.lrow2 .mi-t { flex:1; min-width:200px; display:flex; flex-direction:column; gap:2px; }
.lrow2 small { color:var(--muted); }
.setsec h2 + .lrow2 { border-top:0; padding-top:4px; }
.seg { display:inline-flex; padding:3px; gap:2px; border:1px solid var(--line); border-radius:12px; background:var(--surface2); }
.segb { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:0; border-radius:9px; background:none; color:var(--muted); font-size:13px; font-weight:500; cursor:pointer; }
.segb:hover { color:var(--text); }
.segb[aria-checked="true"] { background:var(--sel); color:var(--text); }
.swatches { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.swc { width:24px; height:24px; padding:0; border:1px solid var(--line); border-radius:50%; cursor:pointer; background:var(--blue); }
.swc.jade { background:#4FD0A3; } .swc.amber { background:#F2B04A; } .swc.rose { background:#F27D8C; } .swc.violet { background:#AE97FF; }
.swc.mono { background:linear-gradient(90deg, #111214 50%, #F2F3F4 50%); }
.swc[aria-checked="true"] { outline:2px solid var(--text); outline-offset:2px; }