/* Dela, the web app (at /app): a chat like ChatGPT and Claude, in Dela's design. A
   sidebar (tasks, Your AIs, About Dela, the account), one calm column for the conversation, the composer at the bottom.
   Black / white surfaces with thin borders and greys, Dela blue as the one accent. States in Dela's colours: worked =
   blue, failed = strong text, waiting = grey. The token block is a copy of Dela Settings (extension/options.css); keep
   the two the same. */
@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; }
:root {
  color-scheme: light;
  --page:#f6f6f8; --surface:#ffffff; --surface2:#f1f1f4; --hover:#ececf0;
  --text:#111114; --muted:#5d5d66; --faint:#8e8e96; --line:#e7e7eb; --line-strong:#d4d4da;
  --primary:#111114; --on-primary:#ffffff;
  --brand:#5B64E0; --accent:#5B64E0; --accent-soft:rgba(91,100,224,.10); --on-accent:#ffffff;
  /* states, in Dela's colours: worked = blue, failed = strong text, waiting = grey */
  --good:var(--accent); --bad:var(--text); --warn:var(--muted);
  --r:14px; --gutter:18px;
  --side-w:268px; --col:760px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page:#0b0b0d; --surface:#151518; --surface2:#1e1e22; --hover:#26262b;
    --text:#f3f3f5; --muted:#a6a6b0; --faint:#73737c; --line:#24242a; --line-strong:#33333a;
    --primary:#f3f3f5; --on-primary:#111114; --accent:#8b92f5; --accent-soft:rgba(139,146,245,.14); --on-accent:#0b0b0d;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
* { 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 "Geist", "Inter", ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  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; }
.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: sidebar | main (top bar, the conversation, the dock) ---------- */
.app { display:grid; grid-template-columns:var(--side-w) minmax(0, 1fr); height:100vh; height:100dvh; }
.app.side-closed { grid-template-columns:0 minmax(0, 1fr); }
.app.side-closed .side { visibility:hidden; }
.app.bare { grid-template-columns:minmax(0, 1fr); }
.app.bare .side, .app.bare .top, .app.bare .dock, .app.bare .scrim { display:none; }
.main { display:flex; flex-direction:column; min-width:0; height:100vh; height:100dvh; background:var(--surface); }
.scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.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 */
.ib { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:10px; background:none; color:var(--muted);
  cursor:pointer; flex:none; transition:background .12s, color .12s; }
.ib:hover { background:var(--hover); color:var(--text); }
.ib.sm { width:28px; height:28px; border-radius:8px; }

/* ---------- sidebar ---------- */
.side { background:var(--page); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px; min-width:0; overflow:hidden; padding:10px 10px 12px; }
.side-head { display:flex; align-items:center; gap:8px; height:40px; padding:0 0 0 8px; margin-bottom:4px; }
.brand { flex:1; min-width:0; display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.brand .mark { width:24px; height:24px; display:block; }
.newtask { display:flex; align-items:center; gap:10px; height:40px; padding:0 10px; border:0; border-radius:10px; background:none; cursor:pointer; font-weight:500; text-align:left; }
.newtask:hover { background:var(--hover); }
.hist { flex:1; min-height:0; overflow-y:auto; margin:8px -6px 0; padding:0 6px 8px; scrollbar-width:thin; }
.hgroup + .hgroup { margin-top:14px; }
.hist h2 { margin:4px 10px 4px; font-size:12px; font-weight:600; color:var(--faint); }
.hist ul { list-style:none; margin:0; padding:0; }
.hrow { display:flex; align-items:center; gap:8px; width:100%; min-height:36px; padding:6px 10px; border:0; border-radius:10px; background:none; color:var(--text);
  cursor:pointer; text-align:left; }
.hrow:hover { background:var(--hover); }
.hrow[aria-current="page"] { background:var(--line); }
.hrow .ht { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
.hrow .hs { flex:none; font-size:11.5px; color:var(--faint); }
.hrow .hs.live { color:var(--accent); font-weight:500; }
.empty { margin:8px 10px; color:var(--faint); font-size:13px; }
.side-foot { display:flex; flex-direction:column; gap:2px; padding-top:8px; border-top:1px solid var(--line); }
.navrow { display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:6px 10px; border:0; border-radius:10px; background:none; cursor:pointer; text-align:left; }
a.navrow { color:inherit; text-decoration:none; }
.navrow:hover, .navrow[aria-current="page"] { background:var(--hover); }
.navrow small { flex:none; color:var(--faint); font-size:12px; }
.navrow .email { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.navrow > svg:last-child { color:var(--faint); }
.initial { flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); font-size:13px; font-weight:600; }

/* ---------- top bar ---------- */
.top { flex:none; display:flex; align-items:center; gap:6px; height:52px; padding:0 12px; }
.ttl { flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding-left:6px; }
.tmode { flex:none; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px 0 8px; border:1px solid var(--line); border-radius:13px;
  color:var(--muted); font-size:12.5px; font-weight:500; }
.tmode svg { color:var(--accent); }
.tgoal { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.narrow-only, .closed-only { display:none; }
@media (min-width: 861px) { .side-closed .closed-only { display:inline-flex; } }

/* ---------- 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; }
/* 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:center; gap:8px; flex-wrap:wrap; }
.ai-head b { font-weight:600; }
.ai-step { margin-top:-4px; font-size:13px; }
.ai-step .stitle { font-weight:500; }
.msg.ai.st-waiting, .msg.ai.st-skipped { opacity:.62; }
.msg.ai.st-waiting .mbody, .msg.ai.st-skipped .mbody { gap:6px; }
.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; white-space:pre-wrap; overflow-wrap:anywhere; }
.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; }
/* Dela needs you: every stopped step together, one card */
.msg.needs .mbody { padding:14px 16px; border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:inset 3px 0 0 var(--text); }
.needs-h { display:flex; align-items:center; gap:8px; }
ul.needs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
ul.needs li { display:flex; flex-direction:column; gap:4px; padding:12px 0; }
ul.needs li + li { border-top:1px solid var(--line); }
ul.needs li:last-child { padding-bottom:4px; }
ul.needs li > b { font-weight:500; }
ul.needs .why { font-size:13.5px; }
ul.needs .detail { color:var(--muted); font-size:12px; }
ul.needs .row { margin-top:6px; }
.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; }
.rsec { display:flex; flex-direction:column; gap:8px; margin-top:6px; padding-top:14px; border-top:1px solid var(--line); }
.rsec > h3 { margin:0; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.rsec > 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:6px; padding-top:12px; border-top:1px solid var(--line); }
.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 */
.dots { display:inline-flex; gap:3px; align-items:center; }
.dots i { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.35; animation:dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay:.15s; }
.dots i:nth-child(3) { animation-delay:.3s; }
@keyframes dot { 0%, 80%, 100% { opacity:.25; } 40% { opacity:1; } }

/* ---------- 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(--accent); border-color:transparent; color:var(--on-accent); }
.btn.go:hover { background:var(--accent); opacity:.9; }
.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; }
.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:12px 12px 10px 18px; border:1px solid var(--line-strong); border-radius:24px; background:var(--surface); box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s; }
.composer .box:focus-within { border-color:color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
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); }
.composer.c-home textarea.ask { min-height:4.6em; }
.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:32px; padding:0 12px; border:1px solid var(--line); border-radius:16px; 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(--surface2); }
.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(--accent); color:var(--on-accent);
  cursor:pointer; transition:opacity .12s, background .12s; }
.send:hover { opacity:.9; }
.send:disabled { background:var(--surface2); color:var(--faint); 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 ---------- */
.hello { display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 0 26px; text-align:center; }
.hello .mark { width:40px; height:40px; }
.hello h1 { margin:8px 0 0; font-size:28px; font-weight:600; line-height:1.2; letter-spacing:-.02em; }
.hello p { margin:0; max-width:480px; color:var(--muted); font-size:14.5px; }
.suggest { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:18px; }
.chip { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--muted);
  font-size:13px; line-height:1.4; text-align:left; cursor:pointer; transition:background .12s, border-color .12s; }
.chip:hover { background:var(--page); border-color:var(--line-strong); }
.chip > svg { margin-top:1px; color:var(--accent); }
.chip b { display:block; margin-bottom:2px; color:var(--text); font-weight:500; }

/* ---------- the dock while a task works: a thin progress line, the state, Pause / Continue / Stop ---------- */
.runbar { position:relative; display:flex; flex-direction:column; gap:6px; padding:12px 12px 10px 16px; overflow:hidden; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); box-shadow:var(--shadow); }
.runbar .bar { position:absolute; top:0; left:0; right:0; height:3px; background:var(--surface2); }
.runbar .bar i { display:block; height:100%; background:var(--accent); transition:width .3s; }
.runrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.runrow .state { display:inline-flex; gap:6px; font-size:13px; }
.runrow .state b { font-weight:600; }
.runbar p { margin:0; }

/* ---------- 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 ---------- */
.menu { position:fixed; z-index:30; min-width:220px; max-width:min(360px, calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow-y:auto; padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--surface);
  box-shadow:0 14px 40px rgba(0,0,0,.14); }
.mi { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:10px; background:none; color:var(--text); font-size:13.5px; text-align:left;
  text-decoration:none; cursor:pointer; }
.mi:hover, .mi:focus-visible { background:var(--hover); outline:none; }
.mode-mi { align-items:flex-start; }
.mi-ic { flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--surface2); color:var(--muted); }
.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(--accent); }
.mlabel { padding:6px 10px 4px; color:var(--faint); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msep { height:1px; margin:6px 4px; 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 .mark { width:36px; height:36px; }
.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:40; left:50%; bottom:24px; transform:translateX(-50%); max-width:calc(100% - 32px); margin:0; padding:10px 16px; border-radius:999px;
  background:var(--primary); color:var(--on-primary); font-size:13px; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.toast:empty { display:none; }

/* ---------- narrow screens (phones, 360-430 px): the sidebar is a drawer, everything in one column, taps of 40 px ---------- */
.scrim { position:fixed; inset:0; z-index:15; background:rgba(0,0,0,.32); }
@media (max-width: 860px) {
  .app, .app.side-closed { grid-template-columns:minmax(0, 1fr); }
  .side { position:fixed; z-index:20; top:0; bottom:0; left:0; width:min(300px, 86vw); visibility:hidden; transform:translateX(-100%);
    box-shadow:0 0 40px rgba(0,0,0,.2); transition:transform .2s ease, visibility 0s linear .2s;
    padding:max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .app.drawer-open .side { visibility:visible; transform:none; transition:transform .2s ease; }
  .narrow-only { display:inline-flex; }
  .top { height:auto; min-height:52px; padding:env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); }
  .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; }
  .suggest { grid-template-columns:1fr; }
  .runbar .lbl { display:none; }
  /* 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: 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; } .dots i { animation:none; opacity:.6; } }
/* 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, .newtask:focus-visible { outline-offset:-2px; }