:root{
  --bg:#faf9f7;--bg-elevated:#ffffff;--bg-inset:#f3f1ed;--bg-dark:#141413;--bg-dark-inset:#2a2a28;
  --ink:#141413;--ink-2:#5f5e59;--ink-3:#6f6d67;--ink-invert:#faf9f7;
  --border:rgba(20,20,19,.08);--border-strong:rgba(20,20,19,.16);
  --accent:#2f6fed;--accent-soft:rgba(47,111,237,.12);
  --ok:#1a9c6b;--warn:#b7791f;--err:#d64545;--err-soft:rgba(214,69,69,.08);
  --r-s:8px;--r-m:12px;--r-l:16px;--r-xl:20px;--r-full:999px;
  --sh-1:0 1px 2px rgba(20,20,19,.05);--sh-2:0 4px 16px rgba(20,20,19,.08);--sh-3:0 12px 32px rgba(20,20,19,.14);
  --grad-hero:radial-gradient(120% 90% at 50% 0%,#dbe9ff 0%,#f6e3f2 45%,#ffe9d4 80%,#faf9f7 100%);
  /* compatibility aliases so inline var() references resolve to the light theme */
  --text:#141413;--muted:#5f5e59;--panel:#ffffff;--radius:12px;--accent2:#8a63d2;
}
/* ---- dark theme: token overrides only; every component reads the tokens ----
   Surfaces invert, the accent is unchanged. --bg-dark flips to a light value so
   the "dark pill" primary button becomes a light pill on dark, which is what
   keeps it the highest-contrast control in both themes. Anything below that
   hard-codes a colour (toasts, diffs, the credits banner, CodeMirror) gets an
   explicit override further down. */
[data-theme="dark"]{
  --bg:#131313;--bg-elevated:#1c1c1b;--bg-inset:#262624;--bg-dark:#f0eee9;--bg-dark-inset:#33332f;
  --ink:#e8e6e1;--ink-2:#a8a69f;--ink-3:#aaa8a1;--ink-invert:#131313;
  --border:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.18);
  --accent:#4d84f3;--accent-soft:rgba(77,132,243,.2);
  --ok:#3fbf8c;--warn:#d69e2e;--err:#f06a6a;--err-soft:rgba(240,106,106,.14);
  --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 4px 16px rgba(0,0,0,.45);--sh-3:0 12px 32px rgba(0,0,0,.6);
  --grad-hero:radial-gradient(120% 90% at 50% 0%,#1c2740 0%,#2b2033 45%,#2e2519 80%,#131313 100%);
  --text:#e8e6e1;--muted:#a8a69f;--panel:#1c1c1b;--accent2:#a586e0;
  color-scheme:dark;
}
/* Controls that paint text directly onto --bg-dark. */
[data-theme="dark"] .toast,[data-theme="dark"] .toast.ok{color:var(--ink-invert)}
[data-theme="dark"] .toast.err{color:#8d1f1f}
/* White-on-red loses too much contrast once --err brightens for dark. */
[data-theme="dark"] button.danger,[data-theme="dark"] .errorcard .badge{color:#2b0c0c}
[data-theme="dark"] .avatar,
[data-theme="dark"] .sendbtn,
[data-theme="dark"] .roundbtn.dark,
[data-theme="dark"] .credbanner .topup{color:var(--ink-invert)}
[data-theme="dark"] .bubble.user{color:var(--ink)}
/* Overlays go darker so the panel above them still reads as elevated. */
[data-theme="dark"] .modalback,[data-theme="dark"] .drawerback,[data-theme="dark"] .sbscrim{background:rgba(0,0,0,.62)}
[data-theme="dark"] .skel{background:linear-gradient(90deg,var(--bg-inset) 25%,#33332f 37%,var(--bg-inset) 63%)}
/* Diff + log + banner colours are literal in the light theme; restate them. */
[data-theme="dark"] .diffview .dln.add{background:rgba(63,191,140,.16);color:#7fd9b3}
[data-theme="dark"] .diffview .dln.del{background:rgba(240,106,106,.16);color:#f2a5a5}
[data-theme="dark"] .logpanel{background:#0d0d0c;color:#d8d6d0}
[data-theme="dark"] .credbanner{background:rgba(200,110,70,.16);color:#e8a883}
[data-theme="dark"] .credbanner .cx{color:#e8a883}
[data-theme="dark"] .credbanner .cx:hover{background:rgba(232,168,131,.14)}
[data-theme="dark"] .assetcard .iconbtn,[data-theme="dark"] .cardstar{background:rgba(0,0,0,.5)}
/* Homepage glass surfaces must stay dark with the dark-theme text tokens. */
[data-theme="dark"] .leyebrow,
[data-theme="dark"] .lpromptideas button,
[data-theme="dark"] .quickstarts button{background:rgba(28,28,27,.82);border-color:var(--border-strong)}
[data-theme="dark"] .product-stage{background:rgba(28,28,27,.72);border-color:var(--border-strong)}
/* Name-hash banner gradients are tuned for cream; an inset wash darkens the
   gradient only — inset shadows paint under child content, so a live thumbnail
   iframe inside the banner is left alone. */
[data-theme="dark"] .pcard .banner{box-shadow:inset 0 0 0 100vh rgba(0,0,0,.42)}
[data-theme="dark"] .pglyph{filter:brightness(.8)}
/* CodeMirror ships a light default theme; recolour it from the tokens. */
[data-theme="dark"] .cmhost .CodeMirror,[data-theme="dark"] .cmhost .CodeMirror-gutters{background:var(--bg-elevated);color:var(--ink)}
[data-theme="dark"] .cmhost .CodeMirror-activeline-background{background:rgba(255,255,255,.04)}
[data-theme="dark"] .cmhost .CodeMirror-matchingbracket{color:var(--ok)!important;border-bottom:1px solid var(--ok)}
[data-theme="dark"] .cmhost .cm-s-default .cm-comment{color:#7a786f}
[data-theme="dark"] .cmhost .cm-s-default .cm-keyword,
[data-theme="dark"] .cmhost .cm-s-default .cm-tag{color:#c99cf0}
[data-theme="dark"] .cmhost .cm-s-default .cm-string,
[data-theme="dark"] .cmhost .cm-s-default .cm-string-2{color:#9fd88c}
[data-theme="dark"] .cmhost .cm-s-default .cm-number,
[data-theme="dark"] .cmhost .cm-s-default .cm-atom{color:#e8a05c}
[data-theme="dark"] .cmhost .cm-s-default .cm-def,
[data-theme="dark"] .cmhost .cm-s-default .cm-variable-2{color:#7fb4ff}
[data-theme="dark"] .cmhost .cm-s-default .cm-property,
[data-theme="dark"] .cmhost .cm-s-default .cm-attribute{color:#7fd9d0}
[data-theme="dark"] .cmhost .cm-s-default .cm-operator{color:var(--ink-2)}
*{box-sizing:border-box}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
html,body{height:100%}
/* Reserve the scrollbar track always. Without it, moving between a section that
   scrolls and one that does not changes the viewport width, and every centred
   container jumps sideways — which reads as the layout resizing itself. */
html{scrollbar-gutter:stable}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0}
.muted{color:var(--ink-2)}
.err{color:var(--err)}
.row{display:flex;gap:10px;align-items:center}
.hide{display:none!important}
.sp{flex:1}

/* ---- buttons ---- */
button{font-family:inherit;background:var(--bg-dark);color:var(--ink-invert);border:0;border-radius:var(--r-full);height:36px;padding:0 18px;font-weight:600;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:box-shadow .14s ease-out,transform .14s ease-out,background .14s ease-out,color .14s ease-out}
button:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
button:active{transform:scale(.98)}
button:disabled{opacity:.4;cursor:default;box-shadow:none;transform:none}
button.accent{background:var(--accent);color:#fff}
button.ghost{background:var(--bg-elevated);color:var(--ink);border:1px solid var(--border-strong)}
button.ghost:hover{background:var(--bg-inset);box-shadow:none;transform:none}
button.danger{background:var(--err);color:#fff}
button.link{background:transparent;color:var(--accent);border:0;height:auto;padding:0;font-weight:500;font-size:13px}
button.link:hover{box-shadow:none;transform:none;text-decoration:underline}
.reportlink{vertical-align:baseline;text-align:left;max-width:100%}
.reportlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.reportstat{background:var(--bg-inset);display:flex;align-items:center}
.reportstat .reportlink{font-size:13.5px;font-weight:600}
.reportfilelist{margin:0;padding-left:20px;line-height:1.55}
.reporttext{white-space:pre-wrap;overflow-wrap:anywhere}
.reportfilelist .reportlink{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;word-break:break-word}
button.icon{background:transparent;color:var(--ink-2);width:32px;height:32px;min-width:32px;padding:0;border-radius:var(--r-s)}
button.icon:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}
button.icon.on{background:var(--bg-inset);color:var(--ink)}
.iconbtn{background:transparent;border:0;color:var(--ink-2);width:32px;height:32px;min-width:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-s);cursor:pointer;transition:background .14s,color .14s}
.iconbtn:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}
.iconbtn.on{background:var(--bg-inset);color:var(--ink)}
.sendbtn{background:var(--bg-dark);color:#fff;width:32px;height:32px;min-width:32px;padding:0;border-radius:var(--r-full)}
.sendbtn:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.sendbtn:disabled{opacity:.4}

/* ---- inputs ---- */
input,select,textarea{font-family:inherit;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-m);color:var(--ink);padding:10px 12px;font-size:14px;height:38px;width:100%;outline:none;transition:border-color .14s,box-shadow .14s}
input[type=checkbox]{width:15px;height:15px;min-height:0;flex:none;margin:0;padding:0;border-radius:2px;appearance:auto;-webkit-appearance:checkbox;accent-color:var(--accent);cursor:pointer;box-shadow:none}
textarea{height:auto;resize:vertical;line-height:1.5}
/* A key box you can drop the downloaded file onto, saying so while you drag. */
textarea.keydrop{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.14)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
label{display:block;font-size:13px;color:var(--ink-2);margin:0 0 6px}
input.inval,textarea.inval{border-color:var(--err)}
input.inval:focus,textarea.inval:focus{border-color:var(--err);box-shadow:0 0 0 3px var(--err-soft)}
.fielderr{color:var(--err);font-size:12px;margin-top:4px;min-height:14px;line-height:1.3}
.field{margin-bottom:14px}

/* ---- surfaces ---- */
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:22px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;height:22px;padding:0 10px;border-radius:var(--r-full);color:var(--ink-2);background:var(--bg-inset)}
.chip.ok{color:var(--ok);background:rgba(26,156,107,.12)}
.chip.warn{color:var(--warn);background:rgba(183,121,31,.12)}
.chip.err{color:var(--err);background:var(--err-soft)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--bg-dark);color:#fff;font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;flex:none}
.avatar.sm{width:28px;height:28px;font-size:12px}
.avatarwrap{position:relative}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
/* An icon button that spins its glyph while its request is in flight. */
.iconbtn.spin svg{animation:spin .7s linear infinite}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--ink-3)}
.dot.up{background:var(--ok)}
svg.ico{display:block;flex:none}
button .ico{pointer-events:none}

/* ---- segmented pill control ---- */
.segmented{display:inline-flex;gap:2px;background:var(--bg-inset);border-radius:var(--r-full);padding:3px}
.segmented .seg{background:transparent;border:0;height:30px;padding:0 14px;border-radius:var(--r-full);font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.segmented .seg:hover{box-shadow:none;transform:none;color:var(--ink)}
.segmented .seg.on{background:var(--bg-elevated);box-shadow:var(--sh-1);color:var(--ink);font-weight:600}
.segmented.dark{background:var(--bg-dark-inset)}
.segmented.dark .seg{color:rgba(255,255,255,.6)}
.segmented.dark .seg:hover{color:#fff}
.segmented.dark .seg.on{background:#3d3d3a;color:#fff}

/* ---- select (model picker) ---- */
.modelsel{background:var(--bg-elevated);color:var(--ink);border:1px solid var(--border-strong);height:32px;padding:0 10px;border-radius:var(--r-m);font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.modelsel:hover{background:var(--bg-inset);box-shadow:none;transform:none}
/* ---- v9: agent mark, usage popover, system badge ---- */
.aglyph{flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.02em}
.usagepop{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--sh-3);padding:12px;min-width:264px;max-width:min(92vw,380px)}
/* A phone shows this panel centred (its anchor is usually hidden there), and
   a workspace with several subscriptions makes it taller than a phone. */
@media(max-width:760px){.usagepop{max-height:70dvh;overflow-y:auto;overscroll-behavior:contain}}
.usagepop h4{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.usagerow{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13px}
.usagerow .udot{flex:none;width:8px;height:8px;border-radius:var(--r-full);background:var(--ok)}
.usagerow.limited .udot{background:var(--warn)}
.usagerow .uname{font-weight:600}
.usagerow .ustate{margin-left:auto;font-size:12px;color:var(--ink-2)}
.usagerow.limited .ustate{color:var(--warn)}
.usagefoot{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.usagefoot b{color:var(--ink)}
.usagenote{margin-top:6px;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.usagewin{display:flex;align-items:center;gap:8px;padding:2px 0 2px 24px;font-size:12px;color:var(--ink-2)}
.usagewin .uwlabel{flex:none;width:52px}
.usagewin .uwbar{flex:1;height:4px;border-radius:var(--r-full);background:var(--border);overflow:hidden}
.usagewin .uwbar i{display:block;height:100%;border-radius:inherit;background:var(--ok)}
/* No percentage was reported. An empty track reads as 0% left and a full one
   as 100%, so this state shows neither — the row says what is known instead. */
.usagewin .uwbar.unknown{background:repeating-linear-gradient(90deg,var(--border) 0 3px,transparent 3px 7px)}
.usagewin.warn .uwbar i{background:var(--warn)}
.usagewin.warn .uwpct{color:var(--warn)}
.usagewin .uwpct{flex:none;min-width:58px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.limithint{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:8px 10px;background:var(--bg-inset);border-radius:var(--r-m);font-size:12px;color:var(--ink-2)}
.limithint button{background:none;border:0;padding:0;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer}
.limithint button:hover{text-decoration:underline}
.sysbadge{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--r-full);background:var(--err-soft);color:var(--err);font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.wshead .sysbadge{background:rgba(255,255,255,.14);color:#fff}
/* Unread runs on a dashboard card: a count bubble beside the project name, with
   the card's own name and "edited" line brought up to full strength so the
   whole card reads as having something new in it. */
.unreadbadge{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;line-height:1}
.pcard.unread h3{font-weight:700}
.pcard.unread .unreadline{color:var(--ink)!important;font-weight:600}
/* ---- v9: preview readiness card ---- */
.readycard{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg-inset)}
.readycard .card{max-width:460px;width:100%;text-align:center}
.readycard h3{margin:12px 0 4px;font-size:16px;font-weight:600}
.readycard .rlogs{margin-top:14px;text-align:left;background:var(--bg-inset);border-radius:var(--r-s);padding:8px 10px;font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5;color:var(--ink-2);max-height:110px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.readycard .rrow{display:flex;gap:10px;justify-content:center;margin-top:14px}
/* ---- v9: self-editing Viski apply panel ---- */
.applypanel{margin:12px;padding:14px 16px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.applypanel h4{margin:0 0 4px;font-size:13.5px;font-weight:600}
.applypanel p{margin:0 0 12px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.selmenu{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--sh-3);padding:6px;min-width:170px;z-index:400}
.selopt{display:flex;align-items:center;justify-content:space-between;gap:10px;height:32px;padding:0 10px;border-radius:var(--r-s);cursor:pointer;font-size:13px;color:var(--ink)}
/* A rate-limited model stays selectable — the quota may reset before it runs. */
.selopt.dim>span:first-child{color:var(--ink-3)}
.selopt.dim .chip{height:18px;padding:0 7px;font-size:10.5px}
.selopt:hover{background:var(--bg-inset)}
.selopt.on{color:var(--ink);font-weight:600}

/* ---- menus / dropdowns ---- */
.menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--sh-3);padding:6px;min-width:170px;z-index:400}
.menu div{padding:9px 11px;border-radius:var(--r-s);cursor:pointer;font-size:13px;color:var(--ink)}
.menu div:hover{background:var(--bg-inset)}
.dropdown{position:absolute;top:40px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--sh-3);z-index:400;min-width:240px;padding:6px}
.dropdown.right{right:0}
.dropdown input{margin-bottom:6px;font-size:13px}
.dropdown .opt{padding:8px 10px;border-radius:var(--r-s);cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.dropdown .opt:hover{background:var(--bg-inset)}
.dropdown .opt.on{background:var(--bg-inset)}

/* ---- modal ---- */
.modalback{position:fixed;inset:0;background:rgba(20,20,19,.4);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadein .2s ease-out}
.modal{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-3);max-width:480px;width:100%;max-height:82vh;display:flex;flex-direction:column;animation:popin .2s ease-out}
/* A dialog whose value you have to fetch off the page behind it: no tint, and
   clicks and text selection pass straight through the backdrop to the page.
   Anchored right so the chat column stays clear of it. */
.modalback.seethrough{background:none;pointer-events:none;justify-content:flex-end;animation:none}
.modalback.seethrough>.modal{pointer-events:auto}
@media(max-width:720px){.modalback.seethrough{justify-content:center}}
.modal .mhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.modal .mhead .mtitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px}
.modal .mbody{overflow:auto;padding:16px 18px}
.logbox{font-family:ui-monospace,Menlo,monospace;font-size:12px;white-space:pre-wrap;word-break:break-word;color:var(--ink);margin:0}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes popin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- drawer ---- */
.drawerback{position:fixed;inset:0;background:rgba(20,20,19,.4);z-index:210;display:flex;justify-content:flex-end;animation:fadein .2s ease-out}
.drawer{width:420px;max-width:96vw;height:100%;background:var(--bg-elevated);box-shadow:var(--sh-3);border-radius:var(--r-xl) 0 0 var(--r-xl);display:flex;flex-direction:column;animation:slidein .2s ease-out}
@keyframes slidein{from{transform:translateX(8px);opacity:.6}to{transform:none;opacity:1}}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.drawer .dbody{overflow:auto;padding:18px;flex:1}
.drawer .dstat{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

/* ---- toast ---- */
#toasts{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast.sticky{display:flex;align-items:flex-start;gap:10px;padding-right:10px}
.toast .toastmsg{flex:1;line-height:1.45}
.toast .toastx{flex:none;background:none;border:0;color:inherit;opacity:.7;font-size:18px;line-height:1;padding:0 2px;cursor:pointer}
.toast .toastx:hover{opacity:1}
.wicreatearea{min-height:76px;resize:none}
.toast{background:var(--bg-dark);color:#fff;border-radius:var(--r-m);box-shadow:var(--sh-3);padding:12px 16px 13.5px;font-size:13px;max-width:min(360px,90vw);animation:toastin .16s ease-out}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast.ok{color:#fff}
.toast.err{color:#ffb4b4}

/* ---- skeletons ---- */
.skel{background:linear-gradient(90deg,var(--bg-inset) 25%,#eae7e1 37%,var(--bg-inset) 63%);background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite;border-radius:var(--r-s)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skcard{height:140px;border-radius:var(--r-l)}
.skline{height:12px;margin:7px 0}

/* ---- wordmark ---- */
.wordmark{font-weight:800;letter-spacing:.02em;font-size:16px;color:var(--ink)}
.brandmark{width:26px;height:26px;display:inline-grid;place-items:center;flex:none;border-radius:8px;background:#171716;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 3px 10px rgba(20,20,19,.12)}
.brandmark svg{width:18px;height:18px;overflow:visible}.brandmark .glass{fill:#e39a45;fill-opacity:.22;stroke:#f4c27d;stroke-width:1.4}.brandmark .code{fill:none;stroke:#8ea8ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---- top nav (dashboard / settings) ---- */
.topbar{display:flex;align-items:center;gap:12px;height:64px;padding:0 24px;position:sticky;top:0;z-index:20}
.topbar .sp{flex:1}
.creditchip{cursor:pointer;text-decoration:none;background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--ink);font-weight:600}
.creditchip:hover{background:var(--bg-inset);text-decoration:none}

/* ---- landing ---- */
.grad-top{background-color:var(--bg);background-image:var(--grad-hero);background-repeat:no-repeat;background-size:100% 720px}
.landing{max-width:1120px;margin:0 auto;padding:0 24px 48px}
.lnav{display:flex;align-items:center;justify-content:space-between;height:64px}
.lhero{position:relative;text-align:center;padding:96px 16px 48px}
.lhero h1{font-size:clamp(36px,6vw,64px);font-weight:650;line-height:1.08;letter-spacing:-.02em;margin:0}
.lsub{font-size:16px;color:var(--ink-2);margin:12px auto 0;max-width:560px}
.lmock{max-width:640px;margin:32px auto 0;cursor:pointer;text-align:left;transition:box-shadow .14s,transform .14s}
.lmock:hover{box-shadow:var(--sh-3);transform:translateY(-1px)}
.lmock-ta{min-height:72px;color:var(--ink-3);font-size:15px;padding:4px 2px}
.lsection{padding:48px 0 8px}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.lcard{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:24px}
.lcard h3{margin:14px 0 8px;font-size:18px;font-weight:600}
.lcard p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.55}
.lic{width:40px;height:40px;border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;background:var(--bg-inset);color:var(--ink)}
.lcta{text-align:center;padding:64px 24px;margin:48px 0 0;border-radius:var(--r-xl);background:var(--bg-inset)}
.lcta h2{font-size:28px;margin:0 0 20px;font-weight:650}
.lfooter{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:32px 0 8px;margin-top:32px;border-top:1px solid var(--border);font-size:13px;color:var(--ink-3)}
.section-title{font-size:15px;font-weight:600;color:var(--ink-2);margin:32px 0 4px}

/* ---- landing v2: editorial hero + product proof ---- */
.landing{max-width:none;padding:0}
.landing .lnav,.landing .lhero,.landing .lsection,.landing .lfooter{width:min(1120px,calc(100% - 48px));margin-left:auto;margin-right:auto}
.lnav{position:relative;z-index:2}
.lnav .wordmark{display:flex;align-items:center;gap:9px}
.lnav-desktop{display:flex;align-items:center;gap:18px}
.lnav-mobile{display:none;position:relative}
.lnav-mobile summary{list-style:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:var(--r-full);background:rgba(255,255,255,.65);cursor:pointer}
.lnav-mobile summary::-webkit-details-marker{display:none}
.lnav-mobile summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lnav-mobile[open] summary{background:var(--bg-elevated)}
.lnav-mobile-menu{position:absolute;right:0;top:48px;width:min(280px,calc(100vw - 32px));padding:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-3)}
.lnav-mobile-menu a,.lnav-mobile-menu button{width:100%;height:42px;display:flex;align-items:center;justify-content:flex-start;padding:0 12px;border-radius:var(--r-s);font-size:14px;color:var(--ink);background:transparent;text-align:left}
.lnav-mobile-menu a:hover,.lnav-mobile-menu button:hover{background:var(--bg-inset);box-shadow:none;transform:none}
.lnav-mobile-menu .mobile-primary{justify-content:center;margin-top:6px;background:var(--ink);color:var(--ink-invert)}
.lhero{padding:104px 16px 72px}
.leyebrow{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--r-full);background:rgba(255,255,255,.55);backdrop-filter:blur(10px);font-size:12px;font-weight:650;color:var(--ink-2);margin-bottom:22px}
.leyebrow:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(26,156,107,.1)}
.lhero h1{max-width:820px;margin:0 auto;font-size:clamp(44px,7vw,78px);letter-spacing:-.045em;line-height:.98}
.lhero h1 .gradient-word{background:linear-gradient(100deg,#2f6fed,#8a63d2 48%,#dc7855);-webkit-background-clip:text;background-clip:text;color:transparent}
.lsub{max-width:620px;margin-top:20px;font-size:18px;line-height:1.55}
.lmock{max-width:700px;margin-top:36px;padding:12px 14px 12px;border-color:rgba(20,20,19,.1);box-shadow:0 18px 55px rgba(41,45,62,.15),0 2px 8px rgba(20,20,19,.06)}
.lmock-ta{min-height:86px;padding:8px 6px;font-size:16px;color:var(--ink-2)}
.lpromptideas{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:16px auto 0}
.lpromptideas button{height:30px;padding:0 12px;background:rgba(255,255,255,.5);border:1px solid var(--border);color:var(--ink-2);font-size:12px;font-weight:500;backdrop-filter:blur(8px)}
.lpromptideas button:hover{background:var(--bg-elevated);color:var(--ink);box-shadow:var(--sh-1);transform:translateY(-1px)}
.product-stage{width:min(1040px,calc(100% - 48px));margin:8px auto 48px;padding:10px;border-radius:26px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 80px rgba(62,55,68,.14);backdrop-filter:blur(14px)}
.product-window{height:480px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--bg-elevated);display:grid;grid-template-columns:38% 62%;text-align:left}
.pw-chat{padding:20px;border-right:1px solid var(--border);background:var(--bg);display:flex;flex-direction:column}
.pw-top{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650;padding-bottom:18px}
.pw-dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pw-user{align-self:flex-end;max-width:86%;padding:10px 13px;border-radius:15px 4px 15px 15px;background:var(--bg-dark);color:var(--ink-invert);font-size:12px;line-height:1.5}
.pw-build{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.pw-step{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2)}
.pw-step span:first-child{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:rgba(26,156,107,.12);color:var(--ok)}
.pw-compose{margin-top:auto;height:58px;border:1px solid var(--border-strong);border-radius:13px;background:var(--bg-elevated);padding:11px;font-size:11.5px;color:var(--ink-3)}
.pw-preview{padding:13px;background:var(--bg-inset);display:flex;flex-direction:column;gap:10px}
.pw-browser{height:30px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:9px;background:var(--bg-elevated);color:var(--ink-3);font-size:10px}
.pw-browser i{width:6px;height:6px;border-radius:50%;background:#ef8f7c}.pw-browser i:nth-child(2){background:#efc36d}.pw-browser i:nth-child(3){background:#72c896}
.pw-site{flex:1;border-radius:12px;background:linear-gradient(145deg,#fff 0 44%,#f1ecff 100%);padding:42px;overflow:hidden;color:#1b1b1a}
.pw-site-label{display:inline-flex;padding:5px 9px;border-radius:99px;background:#eeebff;color:#6753aa;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.pw-site h3{font-size:34px;line-height:1.05;letter-spacing:-.04em;max-width:360px;margin:18px 0 12px}.pw-site p{font-size:12px;line-height:1.6;color:#686760;max-width:350px}.pw-site button{margin-top:18px;height:30px;font-size:11px}
.trustline{text-align:center;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 auto 72px}
.brand-story{width:min(1040px,calc(100% - 48px));margin:24px auto 48px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);overflow:hidden;border-radius:26px;background:#141413;color:#faf9f7;box-shadow:0 30px 80px rgba(20,20,19,.18)}
.brand-story-visual{position:relative;min-height:430px;background:#101010;overflow:hidden}.brand-story-visual img{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;animation:midnight-drift 12s ease-in-out infinite alternate}.brand-story-copy{padding:48px;display:flex;flex-direction:column;justify-content:center}.brand-story-copy .story-kicker{font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#f0b56d;margin-bottom:18px}.brand-story-copy h2{font-size:clamp(30px,4vw,46px);line-height:1.04;letter-spacing:-.04em}.brand-story-copy p{margin:20px 0 0;color:rgba(250,249,247,.68);font-size:14px;line-height:1.7}.brand-story-copy .formula{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:28px;font-size:12px;color:rgba(250,249,247,.72)}.brand-story-copy .formula b{padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#faf9f7}.brand-story-copy .formula strong{color:#f0b56d}
@keyframes midnight-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.035) translate3d(-.6%,.35%,0)}}
@media(prefers-reduced-motion:reduce){.brand-story-visual img{animation:none}}
.lsection{padding:64px 0}
.lsection-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}.lsection-head h2{font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-.035em;max-width:560px}.lsection-head p{max-width:360px;margin:0;color:var(--ink-2);font-size:14px}
.lgrid{margin-top:0}.lcard{min-height:210px;padding:28px;transition:transform .14s,box-shadow .14s}.lcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.lbento{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.lbento .lcard{min-height:240px}.lbento .lcard:first-child{grid-row:span 2;background:linear-gradient(145deg,var(--bg-elevated),var(--accent-soft))}.lbento .lcard:first-child .lic{width:48px;height:48px}.lbento .lcard h3{font-size:20px}.lbento .lcard:first-child h3{font-size:28px;max-width:430px;margin-top:28px}.lbento .lcard:first-child p{font-size:14px;max-width:480px}
.lcta{width:min(1120px,calc(100% - 48px));margin:48px auto 0;padding:80px 24px;background:linear-gradient(135deg,#171716,#25243a);color:#faf9f7;overflow:hidden;position:relative}.lcta:before{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(100,124,255,.25);filter:blur(60px);right:-80px;top:-220px}.lcta h2{font-size:clamp(32px,5vw,52px);letter-spacing:-.04em;position:relative}.lcta p{color:rgba(255,255,255,.65);margin:-8px 0 24px;position:relative}.lcta button{background:#faf9f7;color:#141413;position:relative}
.landing .lfooter{padding:52px 0 28px;display:block}.lfootbrand{margin-bottom:34px}.lfootbrand p{margin:9px 0 0;max-width:360px;color:var(--ink-2)}.lfootgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}.lfootcol{display:grid;gap:9px;align-content:start}.lfootcol strong{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}.lfootcol a{font-size:12.5px;color:var(--ink-2)}.lfootcol a:hover{color:var(--ink)}.lfootbottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;margin-top:38px;border-top:1px solid var(--border);font-size:11.5px;color:var(--ink-3)}
@media(max-width:800px){.lfootgrid{grid-template-columns:1fr 1fr}.lfootbottom{display:block}.lfootbottom div+div{margin-top:8px}}
@media(max-width:800px){.brand-story{grid-template-columns:1fr}.brand-story-visual{min-height:300px}.brand-story-copy{padding:36px 28px}.brand-story-visual img{object-position:48% center}}

/* ---- auth ---- */
.authwrap{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);background:var(--bg)}
.authvisual{position:relative;overflow:hidden;margin:12px;border-radius:24px;background:linear-gradient(145deg,#dce8ff 0%,#eadcf7 48%,#ffe4d0 100%);padding:40px;display:flex;flex-direction:column;color:#141413}
.authvisual:before,.authvisual:after{content:'';position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.authvisual:before{width:480px;height:480px;right:-180px;top:-160px;background:rgba(255,255,255,.42)}.authvisual:after{width:320px;height:320px;left:-140px;bottom:-140px;background:rgba(255,255,255,.34)}
.authvisual .wordmark{position:relative;z-index:1}.authstory{position:relative;z-index:1;margin:auto 0;max-width:570px}.authstory h1{font-size:clamp(40px,5.3vw,72px);line-height:1.02;letter-spacing:-.055em;font-weight:650}.authstory p{font-size:16px;line-height:1.65;color:rgba(20,20,19,.65);max-width:480px;margin:20px 0 0}.authquote{position:relative;z-index:1;font-size:12px;color:rgba(20,20,19,.58)}
.authmain{display:flex;align-items:center;justify-content:center;padding:48px 32px}.authcard{width:100%;max-width:400px;border:0;box-shadow:none;background:transparent;padding:0}.authcard h2{font-size:30px;line-height:1.15;letter-spacing:-.03em;text-align:center;margin-bottom:8px}.authintro{text-align:center;color:var(--ink-2);font-size:13px;margin-bottom:24px}
.socialgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}.socialbtn{height:42px;padding:0 10px;background:var(--bg-elevated);color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--r-m);font-size:13px}.socialbtn:hover{background:var(--bg-inset);box-shadow:var(--sh-1);transform:translateY(-1px)}.brandicon{width:18px;height:18px;display:grid;place-items:center;font-weight:750;font-size:16px}.authdivider{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:11.5px;margin:0 0 18px}.authdivider:before,.authdivider:after{content:'';height:1px;background:var(--border-strong);flex:1}.authterms{text-align:center;color:var(--ink-3);font-size:11.5px;line-height:1.5;margin-top:18px}.authterms a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.tabs{display:flex;gap:2px;background:var(--bg-inset);border-radius:var(--r-full);padding:3px;margin-bottom:16px}
.tabs button{flex:1;background:transparent;color:var(--ink-2);border-radius:var(--r-full);height:30px;font-weight:500;font-size:13px}
.tabs button:hover{box-shadow:none;transform:none;color:var(--ink)}
.tabs button.on{background:var(--bg-elevated);box-shadow:var(--sh-1);color:var(--ink);font-weight:600}
.cookiebar{position:fixed;z-index:1000;left:20px;right:20px;bottom:20px;margin:auto;max-width:920px;display:flex;align-items:center;gap:18px;padding:16px 18px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-l);box-shadow:var(--sh-3);animation:popin .2s ease-out}.cookieicon{width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:50%;background:var(--bg-inset);color:var(--ink)}.cookiecopy{flex:1;min-width:0}.cookiecopy strong{display:block;font-size:13.5px;margin-bottom:2px}.cookiecopy span{display:block;font-size:12px;color:var(--ink-2);line-height:1.5}.cookieactions{display:flex;gap:8px;flex:none}.cookieactions button{height:34px;padding:0 15px}
@media(max-width:850px){.authwrap{display:block}.authvisual{display:none}.authmain{min-height:100dvh;padding:48px 24px}.authcard{max-width:420px}.cookiebar{align-items:flex-start;flex-wrap:wrap}.cookiecopy{min-width:calc(100% - 56px)}.cookieactions{width:100%;justify-content:flex-end}}
@media(max-width:480px){.authmain{padding:36px 20px}.socialgrid{grid-template-columns:1fr}.cookiebar{left:12px;right:12px;bottom:12px}.cookieactions button{flex:1}.cookieactions{justify-content:stretch}}

/* ---- home / dashboard ---- */
.wrap{max-width:1440px;margin:0 auto;padding:8px 24px 64px}
.hero{text-align:center;padding:64px 0 32px}
.hero h1{font-size:clamp(28px,4vw,40px);margin:0 0 24px;font-weight:650;letter-spacing:-.02em}
.promptcard{max-width:720px;margin:0 auto;text-align:left;box-shadow:var(--sh-3);border-radius:var(--r-xl)}
.promptcard textarea{min-height:88px;font-size:15px;border:0;padding:4px 2px;background:transparent}
.promptcard textarea:focus{box-shadow:none}
.promptcard .toolsrow{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
/* Files attached before the project exists, under the brief they belong to. */
.promptcard .heroatt{margin-top:10px}
.promptcard .toolsrow .sp{flex:1}
.hero-intro{max-width:720px;margin:0 auto 22px;text-align:left}.hero-intro .hey{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}.hero-intro h1{margin:0 0 8px}.hero-intro p{margin:0;color:var(--ink-2);font-size:14px}
.hero .promptcard{position:relative;border-color:rgba(47,111,237,.13);box-shadow:0 16px 45px rgba(45,53,75,.12),var(--sh-1)}
.hero .promptcard:before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,rgba(47,111,237,.42),rgba(138,99,210,.12),rgba(220,120,85,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.quickstarts{max-width:720px;margin:13px auto 0;display:flex;align-items:center;gap:7px;overflow-x:auto;padding:2px}.quickstarts .qlabel{font-size:11.5px;color:var(--ink-3);flex:none}.quickstarts button{height:28px;padding:0 11px;flex:none;background:rgba(255,255,255,.55);border:1px solid var(--border);color:var(--ink-2);font-size:11.5px;font-weight:500}.quickstarts button:hover{background:var(--bg-elevated);color:var(--ink);box-shadow:var(--sh-1);transform:none}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:16px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.pcard{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:hidden;cursor:pointer;transition:box-shadow .14s,transform .14s}
.pcard:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.pcard .banner{height:140px;position:relative}
.pcard .banner .chip{position:absolute;top:12px;right:12px;background:var(--bg-elevated);box-shadow:var(--sh-1)}
.pcard .body{padding:16px;display:flex;align-items:flex-start;gap:8px}
.pcard .body .bmain{flex:1;min-width:0}
.pcard .body h3{margin:0 0 4px;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .pkebab{flex:none;opacity:0;transition:opacity .14s}
/* stays visible while its menu is open — clicking the kebab focuses it */
.pcard:hover .pkebab,.pcard .pkebab:focus{opacity:1}
.plancard{max-width:720px;margin:0 auto;text-align:left}
.plancard .planbullets{margin:14px 0;padding-left:20px}
.plancard .planbullets li{margin:6px 0;font-size:14px;line-height:1.5}
.typebadge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-full);background:var(--bg-inset);color:var(--ink-2)}

/* ---- workspace shell ---- */
.ws{display:flex;flex-direction:column;height:100dvh}
.ws-body{flex:1;display:flex;min-height:0}

/* ONE unified light workspace header: 48px, spans chat + preview/editor and is
   identical in Preview, Files, Code and More. There is no dark bar and no
   separate chat-pane header row. */
.wshead{display:flex;align-items:center;gap:4px;height:48px;padding:0 10px;background:var(--bg);border-bottom:1px solid var(--border);color:var(--ink);flex:none}
.wshead .sp{flex:1}
/* hleft mirrors the chat pane width (set inline by applyRatio); hright takes the
   rest, so the preview tools begin exactly where the preview pane begins. */
.wshead .hleft{display:flex;align-items:center;gap:2px;flex:0 0 auto;min-width:0;overflow:hidden}
.wshead .hright{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0}
.wshead .hgroup{display:flex;align-items:center;gap:2px;min-width:0}
/* the chat controls group sits above the chat column */
.wshead .hchat{flex:none}
.wshead .htools{display:flex;align-items:center;gap:2px}
.wsoverflow{display:none}
.wshead .segmented .seg{height:26px;padding:0 12px;font-size:12.5px}
.tbtn{background:transparent;border:0;color:rgba(255,255,255,.85);height:32px;min-width:32px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-s);font-size:12.5px;font-weight:500;position:relative;cursor:pointer}
.tbtn:hover{background:rgba(255,255,255,.1);box-shadow:none;transform:none;color:#fff}
.tbtn.on{background:rgba(255,255,255,.16);color:#fff}
.tbtn .dotbadge{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-dark)}
/* project-name button (light header) + shared project menu */
/* Slightly narrower than before to leave room for the back button beside it;
   the name still ellipsises rather than pushing anything off the bar. */
.pnamebtn{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:206px;background:transparent;border:0;color:var(--ink);height:32px;padding:0 8px;border-radius:var(--r-s);cursor:pointer}
.pnamebtn:hover{background:var(--bg-inset);box-shadow:none;transform:none}
.pnamebtn .pnm{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pglyph{width:16px;height:16px;border-radius:5px;flex:none}
/* max-height is the safety net: globalFloat positions this panel from its own
   height, so a menu taller than the window pins to the top and runs off the
   bottom with its last items unreachable. Bounded, it scrolls instead. */
.pmenu{width:280px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-3);padding:6px;z-index:400;color:var(--ink)}
.pmenu .pmitem{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:var(--r-s);cursor:pointer;font-size:13.5px;color:var(--ink)}
.pmenu .pmitem:hover{background:var(--bg-inset)}
.pmenu .pmitem .ico{flex:none;color:var(--ink-2)}
.pmenu .pmdiv{height:1px;background:var(--border);margin:6px 4px}
.pmswitch{padding:4px}
.pmswitchtitle{padding:4px 6px 7px;font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
/* Short enough that the menu's own items still fit on a laptop screen: at
   240px the switcher pushed All projects and Help past the bottom edge, where
   they could not be reached at all. */
.pmswitchlist{max-height:168px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
/* A row sliced by the cut-off reads as a rendering fault. Fading the last few
   pixels turns the same cut into the usual "there is more below" cue. Removed
   once scrolled to the end so nothing looks dimmed when nothing is hidden. */
.pmswitchlist{mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),transparent 100%)}
.pmswitchlist.atend{mask-image:none;-webkit-mask-image:none}
/* Where you are, above the list of places you can go. Not a switch target. */
.pmhere{display:flex;align-items:center;gap:9px;padding:5px 6px 7px;min-width:0}
.pmhere .pmprojectname{font-weight:600}
.pmherenow{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);background:var(--bg-inset);border-radius:var(--r-full);padding:2px 7px}
.pmfilter{padding:0 2px 6px}
.pmfilter input{width:100%;height:30px;font-size:13px}
/* Labelled only when there are both favourites and others, so "pinned at the
   top" reads as an arrangement rather than an arbitrary order. */
.pmgroup{padding:7px 6px 3px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.pmgroup:first-child{padding-top:1px}
.pmswitchstate{padding:10px 6px;font-size:12.5px;color:var(--ink-3)}
.pmproject{display:flex;align-items:center;gap:9px;min-height:36px;padding:2px 4px 2px 6px;border-radius:var(--r-s);cursor:pointer;color:var(--ink)}
.pmproject:hover,.pmproject:focus-visible{background:var(--bg-inset);outline:none}
.pmproject:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
.pmproject.current{font-weight:600;background:var(--bg-inset)}
.pmprojectname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.pmproject>.ico{flex:none;color:var(--ink-3)}
.pmstar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--r-s);background:transparent;color:var(--ink-3);flex:none}
.pmstar:hover{background:var(--bg-elevated);color:var(--warn);box-shadow:none;transform:none}
.pmstar:has(svg[fill="currentColor"]){color:var(--warn)}
.pmws{background:var(--bg-inset);border-radius:var(--r-m);padding:10px 12px;margin:6px 4px 8px}
.pmwsrow{display:flex;align-items:center;gap:9px;margin-bottom:10px;min-width:0}
.pmwsav{width:24px;height:24px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.pmwsnm{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmcred{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-2)}
.pmcred b{color:var(--ink);font-weight:600}
.pmbar{height:4px;border-radius:var(--r-full);background:var(--border);margin:6px 0 8px;overflow:hidden}
.pmbar span{display:block;height:100%;background:var(--accent);border-radius:var(--r-full)}
.pmtop{display:inline-flex;align-items:center;gap:4px;background:transparent;border:0;padding:0;height:auto;font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer}
.pmtop:hover{box-shadow:none;transform:none;text-decoration:underline}
.dtrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.dtrow:last-child{border-bottom:0}
.dtrow .dtk{color:var(--ink-2);flex:none}
.dtrow .dtv{text-align:right;word-break:break-all}
.wsshare{background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--ink);height:32px;padding:0 14px;border-radius:var(--r-full);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.wsshare:hover{background:var(--bg-inset);box-shadow:none;transform:none}
.wspublish{background:var(--accent);color:#fff;height:32px;padding:0 16px;border-radius:var(--r-full);font-size:13px;font-weight:600;position:relative;cursor:pointer}
.wspublish .dotbadge{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.pagefinder{position:relative}

/* publish popover */
.pubpop{width:400px;max-width:calc(100vw - 24px);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-3);padding:20px;z-index:400;display:flex;flex-direction:column;gap:16px}
.pubpop .pptop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pubpop .pptitle{font-size:16px;font-weight:600;color:var(--ink)}
.pubpop .pplabel{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.pubpop .ppurl{display:flex;align-items:center;gap:6px}
.pubpop .ppurl input{flex:1;min-width:0;font-size:13px;height:36px;background:var(--bg-inset);color:var(--ink-2)}
.pubpop .pplink{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:var(--accent);font-weight:600;background:transparent;border:0;padding:0;height:auto;cursor:pointer}
.pubpop .pplink:hover{box-shadow:none;transform:none;text-decoration:underline}
.pubpop .ppvis{display:flex;align-items:center;gap:12px}
.pubpop .ppsq{width:36px;height:36px;flex:none;border-radius:var(--r-s);background:var(--bg-inset);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center}
.pubpop .ppvt{font-size:14px;font-weight:600;color:var(--ink)}
.pubpop .ppvs{font-size:12.5px;color:var(--ink-3)}
.pubpop .ppauto{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;border:1px solid var(--border);border-radius:var(--r-m);cursor:pointer}
.pubpop .ppautotext{min-width:0}
.pubpop .ppauto input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--accent);cursor:pointer}
.pubpop .ppauto input:disabled{cursor:wait;opacity:.55}
.pubpop .ppbtns{display:flex;gap:8px}
.pubpop .ppfailure{border:1px solid color-mix(in srgb,var(--err) 35%,var(--border));border-radius:var(--r-m);background:color-mix(in srgb,var(--err) 7%,var(--bg-elevated));padding:12px}
.pubpop .ppfailuretop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pubpop .ppfailuretitle{font-size:13px;font-weight:650;color:var(--err);line-height:1.4}
.pubpop .ppfailurehint{font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.pubpop .ppfailure .trybtn{flex:none}
.pubpop .ppfailuredetail{max-height:144px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:10px 0 0;padding:9px;border-radius:var(--r-s);background:var(--bg-inset);color:var(--ink-2);font:11.5px/1.45 var(--mono);border:1px solid var(--border)}
.pubpop .ppgo{width:100%;justify-content:center;background:var(--accent);color:#fff;height:36px;border-radius:var(--r-full);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer}
.pubpop .ppgo:disabled{opacity:.4;cursor:default}
.pubpop .ppgo .dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
.pubpop .ppprogress{display:flex;flex-direction:column;gap:6px}
.pubpop .ppprogressmeta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--ink-2)}
.pubpop .ppprogresstrack{height:5px;border-radius:var(--r-full);background:var(--bg-inset);overflow:hidden}
.pubpop .ppprogresstrack i{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .8s ease}

/* chat pane (the chat controls live in the unified header, not in a row here) */
.chatpane{width:30%;min-width:300px;max-width:55%;flex:0 0 auto;display:flex;flex-direction:column;background:var(--bg);min-height:0}
.splitter{flex:0 0 4px;cursor:col-resize;position:relative;background:transparent}
.splitter::after{content:'';position:absolute;left:1px;top:0;bottom:0;width:2px;background:var(--border);transition:background .1s}
.splitter:hover::after,.splitter.drag::after{background:var(--accent-soft)}
.chatlog{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:85%;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.bubble.user{align-self:flex-end;background:var(--bg-dark);color:#fff;border-radius:18px 4px 18px 18px;padding:10px 14px}
.promptby{margin:0 0 3px;font-size:10.5px;line-height:1.25;font-weight:650;letter-spacing:.01em;color:rgba(255,255,255,.68);white-space:normal}
.bubble.assistant{align-self:flex-start;color:var(--ink);padding:0}
/* Attachments on a sent prompt: thumbnails, not the raw upload paths. */
.uattrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;white-space:normal}
.uattrow:first-child{margin-top:0}
/* Theme tokens, not white-alpha: the user bubble is light in both themes. */
.uatt{width:104px;height:104px;object-fit:cover;border-radius:var(--r-m);display:block;cursor:zoom-in;background:var(--bg-elevated);border:1px solid var(--border)}
.uatt:hover{border-color:var(--ink-3)}
.uattfile{display:inline-flex;align-items:center;gap:6px;max-width:200px;padding:5px 10px;border-radius:var(--r-full);background:var(--bg-elevated);border:1px solid var(--border);color:inherit;font-size:11.5px;text-decoration:none}
.uattfile span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uattfile:hover{border-color:var(--ink-3)}
.statusrow{align-self:center;font-size:12px;color:var(--ink-3)}
.statusrow.err{color:var(--err)}
/* Board-tracking notice: informational, so it reads quieter than an error. */
.statusrow.tracked{display:inline-flex;align-items:center;gap:7px;align-self:center;padding:5px 10px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--bg-elevated)}
.statusrow.tracked svg{opacity:.6;flex:none}
/* Proposed feature breakdown, awaiting confirmation. */
.proposal{align-self:stretch;min-width:0;max-width:100%;border:1px solid var(--border);border-radius:var(--r-l);background:var(--bg-elevated);padding:14px;margin-top:8px;white-space:normal}
.prophead{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;margin-bottom:10px}
.prophead svg{opacity:.6;flex:none}
.propparent{font-size:12.5px;color:var(--ink-2);margin:-4px 0 10px}
.proplist{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.propitem{display:flex;align-items:center;min-width:0;gap:9px;padding:6px 8px;border-radius:var(--r-s);cursor:pointer;font-size:13px}
.propitem:hover{background:var(--bg-inset)}
.propitem input[type=checkbox]{width:15px;height:15px;min-height:0;flex:none;margin:0;padding:0;appearance:auto;-webkit-appearance:checkbox;accent-color:var(--accent);cursor:pointer;box-shadow:none}
.proptype{font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;flex:none;width:42px}
.proptype.task{color:#1a9c6b}
.proptype.bug{color:#d64545}
.proptitle{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Plain-language summaries: the batch write-up inside a receipt, and the
   on-demand rewrite under a reply. Same shape so they read as one feature. */
.propsum,.plainsum{font-size:13px;line-height:1.6;margin:0 0 12px;display:flex;flex-direction:column;gap:5px}
.plainsum{margin:2px 0 8px;padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-m);background:var(--bg-inset);max-width:100%}
.plainttl{display:flex;align-items:center;gap:6px;font-weight:650;font-size:12px;color:var(--ink-2);margin-bottom:2px}
.plainttl svg{opacity:.7;flex:none}
.plainline{white-space:pre-wrap}
.plainbul{white-space:pre-wrap;padding-left:16px;position:relative}
.plainbul::before{content:"•";position:absolute;left:4px;color:var(--accent)}
/* While a run streams: the newest line, working, with the rest a click away. */
.livestream{align-self:stretch;min-width:0;max-width:100%;display:flex;flex-direction:column;gap:2px}
.liverow{display:flex;align-items:center;gap:9px;min-width:0}
.liverow .spinner{flex:none}
.livelast{min-width:0;flex:1;font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.livedetail{margin-top:6px;padding-left:12px;border-left:2px solid var(--border);max-height:340px;overflow:auto}
/* The plain answer is the reply; the agent's technical write-up folds under it. */
.plainanswer{align-self:stretch;min-width:0;max-width:100%;font-size:14px;line-height:1.65;display:flex;flex-direction:column;gap:5px}
.plaintoggle{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:2px 0;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;height:auto}
.plaintoggle:hover{color:var(--ink)}
.plaintoggle svg{opacity:.7}
.plaindetail{margin-top:6px;padding-left:12px;border-left:2px solid var(--border)}
/* The auto-run countdown on a proposal, and its escape hatch. */
.propwait{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.proprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.proprow button{height:32px}
.statusrow .linkbtn{background:transparent;border:0;padding:0;color:var(--accent);font:inherit;font-size:12px;cursor:pointer}
.proprow .linkbtn{background:transparent;border:0;padding:0;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer;height:auto}
/* Which GitHub account the import list is reading from. */
.ghacct{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;margin-bottom:8px;border:1px solid var(--border);border-radius:var(--r-m);background:var(--bg-inset);font-size:12.5px}
.ghacct:empty{display:none}
.ghacct svg{opacity:.6;flex:none}
.ghwho{flex:1;min-width:0;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.ghacct .linkbtn{background:transparent;border:0;padding:0;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer;height:auto}
.ghacct .linkbtn:hover{text-decoration:underline;box-shadow:none;transform:none}
.ghacct .err:empty{display:none}
/* Whose repositories the list below is showing. */
.ghlistwho{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 12px;border-bottom:1px solid var(--border);font-size:12px;color:var(--ink-3)}
.ghlistwho svg{opacity:.6;flex:none}
.ghaddorg{margin-left:auto;color:var(--accent);font-size:12px;text-decoration:none;white-space:nowrap}
.ghaddorg:hover{text-decoration:underline}
.ghlistwho .linkbtn{background:transparent;border:0;padding:0;color:var(--accent);font:inherit;font-size:12px;cursor:pointer;height:auto}
.ghlistwho .linkbtn:hover{text-decoration:underline;box-shadow:none;transform:none}
/* Why a connected account is showing fewer repositories than it owns. */
.ghinstall{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border-bottom:1px solid var(--border);background:var(--warn-soft,var(--bg-inset));font-size:12px;line-height:1.5;color:var(--ink-2)}
.ghinstall svg{flex:none;margin-top:1px;opacity:.75}
.ghinstallbtn{flex:none;align-self:center;padding:5px 10px;border-radius:var(--r-m);background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--ink);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.ghinstallbtn:hover{background:var(--bg-inset)}
.ghtokrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 0 100%;margin-top:6px}
.ghtokrow input{flex:1;min-width:200px;height:32px;font-size:12.5px}
.ghtokrow button{height:32px}
.ghtokrow code{background:var(--bg-elevated);border-radius:3px;padding:1px 4px;font-size:11px}
/* Secret values: masked until explicitly revealed, and never wrapped mid-token. */
.secval{font-size:12px;letter-spacing:.04em;color:var(--ink-3);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
.secval.revealed{color:var(--ink);letter-spacing:0;user-select:all}
.statusrow .linkbtn:hover{text-decoration:underline;box-shadow:none;transform:none}
.toolchip{align-self:flex-start;display:inline-flex;align-items:center;font-size:11.5px;color:var(--ink-2);background:var(--bg-inset);padding:3px 9px;border-radius:var(--r-full)}
.trybtn{background:transparent;border:1px solid var(--err);color:var(--err);border-radius:var(--r-s);height:auto;padding:4px 10px;font-size:12px;font-weight:600}
.trybtn:hover{background:var(--err-soft);box-shadow:none;transform:none}

/* composer */
.chatinput{padding:0 12px 12px;background:transparent;display:flex;flex-direction:column;gap:8px}
.chatinput .pbox{border:0;border-radius:var(--r-l);background:var(--bg-elevated);box-shadow:var(--sh-2);padding:10px;display:flex;flex-direction:column;gap:8px}
.chatinput textarea{border:0;background:transparent;padding:2px;min-height:24px;max-height:45vh;resize:none;font-size:14px;line-height:1.5;height:auto}
.chatinput textarea:focus{border:0;box-shadow:none}
.promptqueue{display:flex;flex-direction:column;gap:5px;max-height:154px;overflow-y:auto}
.promptqueue:empty{display:none}
.pqitem{height:34px;min-height:34px;display:flex;align-items:center;gap:7px;padding:0 7px 0 10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--sh-1);font-size:12px;color:var(--ink-2)}
.pqitem.paused{background:var(--bg-inset);opacity:.82}
.pqitem[draggable="true"]{cursor:grab}
.pqitem.dragging{opacity:.42}
.pqitem.dragover{border-color:var(--accent);box-shadow:inset 0 2px var(--accent)}
.pqpos{font-size:10px;font-weight:700;color:var(--ink-3);flex:none}
.pqtext{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.pqstate{flex:none;font-size:10px;font-weight:650;color:var(--ink-3)}
/* "this queued prompt has N files"; the files themselves are shown in the
   composer when the prompt is opened for editing. */
.pqatt{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:650;color:var(--ink-3)}
.pqact{width:24px;height:24px;min-width:24px;border:0;padding:0;border-radius:6px;background:transparent;color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pqact:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}
.pbrow{display:flex;align-items:center;gap:8px}
.pbrow .sp{flex:1}
/* The composer sits in a resizable pane, so its width is independent of the
   viewport — media queries cannot see it. Size against the box itself, and drop
   the selector labels (icons + tooltips remain) before the row can overflow. */
.chatinput .pbox{container-type:inline-size}
@container (max-width:420px){
  /* Wrap the controls onto their own line rather than truncating them: the
     model and mode buttons are text-only, so hiding labels leaves bare
     chevrons. The spacer becomes the line break. */
  .pbrow{flex-wrap:wrap;row-gap:8px}
  .pbrow .sp{flex:1 0 100%;height:0;margin:0}
}
@container (max-width:260px){
  .pbrow .txtsel{padding:0 5px;gap:2px;max-width:88px}
  .pbrow .txtsel>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* The composer is editing a prompt already in the queue: Send replaces that
   one in place rather than adding another. Without the band the composer looks
   like any new message and Send quietly rewrites something further down. */
.editingrow{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);background:var(--bg-inset);border-radius:var(--r-md);padding:5px 8px;margin-bottom:6px}
.editingrow .linkbtn{flex:none;background:transparent;border:0;padding:0;color:var(--accent);font:inherit;font-size:11.5px;cursor:pointer;height:auto}
.editingrow .linkbtn:hover{box-shadow:none;transform:none}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.attchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;background:var(--bg-inset);border-radius:var(--r-full);padding:3px 6px 3px 10px;color:var(--ink-2)}
.attchip button{background:transparent;border:0;color:var(--ink-3);height:auto;padding:0 2px;cursor:pointer;border-radius:0}
.attchip button:hover{color:var(--err);box-shadow:none;transform:none}
.attchip.pending{opacity:.6}
.attthumb{width:20px;height:20px;border-radius:4px;object-fit:cover;display:block;cursor:zoom-in}
.attthumb:hover{outline:2px solid var(--border-strong);outline-offset:1px}
/* Expanded view: fit the viewport rather than the chip, so wide screenshots stay readable. */
.attfull{display:block;max-width:100%;max-height:70vh;margin:0 auto;object-fit:contain;border-radius:var(--r-m)}
/* The screenshots a run took, in its details drawer. Wide enough to tell one
   page from another at a glance, and clickable for the full size. */
.shotstrip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.shotthumb{width:132px;height:84px;object-fit:cover;object-position:top left;border:1px solid var(--border);border-radius:var(--r-m);background:var(--bg-inset);cursor:zoom-in;display:block}
.shotthumb:hover{border-color:var(--accent)}
.sugchip{font-size:13px;height:30px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--border-strong);color:var(--ink-2);background:var(--bg-elevated);cursor:pointer;display:inline-flex;align-items:center}
.sugchip:hover{border-color:var(--ink-3);color:var(--ink);box-shadow:none;transform:none}
.credbanner{background:var(--err-soft);color:var(--err);border-radius:var(--r-m);padding:10px 12px;font-size:12px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.credbanner a{color:var(--accent);font-weight:600}

/* collapsed chat rail */
.chatrail{width:44px;flex:0 0 44px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0;border-right:1px solid var(--border);background:var(--bg-inset)}
.chatrail .railbtn{position:relative;color:var(--ink-2)}
.chatrail .railbtn:hover{color:var(--ink);background:var(--bg-inset)}
.chatrail .dotbadge{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* preview pane */
.previewpane{flex:1;display:flex;flex-direction:column;background:var(--bg-inset);min-width:0;position:relative}
/* no tabs row: view switching lives in the unified header */
.rbody{flex:1;position:relative;min-height:0}
.rview{position:absolute;inset:0;overflow:auto}
.rview.preview{overflow:hidden;background:transparent}
.rview.preview iframe{width:100%;height:100%;border:0;display:block}
.vpwrap{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;overflow:auto}
.vpwrap.desktop{align-items:stretch;padding:12px}
.vpframe{background:#fff;height:100%;width:100%;border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:hidden}
.vpframe iframe{width:100%;height:100%;border:0;display:block}
.vpframe.device{width:auto;margin:18px 0;border-radius:22px;border:8px solid var(--bg-dark);box-shadow:var(--sh-3);height:calc(100% - 40px);max-height:844px}
.reloadbtn{position:absolute;top:12px;right:12px;z-index:5}

/* code tab */
.codesplit{display:flex;height:100%;min-height:0;background:var(--bg-elevated)}
.codetreewrap{width:230px;flex:none;border-right:1px solid var(--border);overflow:auto}
.filetree{padding:8px;font-size:13px}
.filetree .frow{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:var(--r-s);cursor:pointer;white-space:nowrap;color:var(--ink)}
.filetree .frow:hover{background:var(--bg-inset)}
.filetree .frow.dir{color:var(--ink-2)}
.filetree .frow.on{background:var(--accent-soft);color:var(--ink)}
.codewrap{display:flex;flex-direction:column;height:100%}
.codebar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-elevated)}
.codebar .fp{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--ink-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codeview{flex:1;overflow:auto;counter-reset:ln;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.55;padding:8px 0;background:var(--bg-elevated)}
.codeview .cl{display:block;white-space:pre;padding-right:14px}
.codeview .cl::before{counter-increment:ln;content:counter(ln);display:inline-block;width:52px;padding-right:14px;margin-right:12px;text-align:right;color:var(--ink-3);border-right:1px solid var(--border);user-select:none}
/* The editor textarea, which is what the code panel actually uses whenever
   CodeMirror is unavailable — including in production, where the CSP blocks
   the cdnjs script it is loaded from.

   `flex:1` was doing nothing: .cmhost is `position:relative`, not a flex
   container, so the textarea fell back to its intrinsic size — a two-row
   textarea — and every file opened as three scrollable lines at the top of a
   full-height pane. It fills its host instead, which .cmhost being positioned
   makes exact. */
.codeedit{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;resize:none;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.55;background:var(--bg-elevated);color:var(--ink);padding:8px 12px}
.codeedit:focus{box-shadow:none}

/* files/assets tab */
.assetswrap{padding:0;background:var(--bg-elevated);min-height:100%}
.assetsbar{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-elevated);z-index:2}
.assetgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:12px}
.assetcard{border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;background:var(--bg-elevated);box-shadow:var(--sh-1);position:relative;transition:box-shadow .14s}
.assetcard:hover{box-shadow:var(--sh-2)}
.assetcard .iconbtn{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.9)}
.assetthumb{height:96px;background:var(--bg-inset);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.assetthumb.ph{color:var(--ink-3)}
.assetmeta{padding:9px 10px}
.assetname{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.emptystate{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;color:var(--ink-2)}
/* v8.1: stands in for the preview when Viski could not work out how to start
   an imported app. Scrolls, because the form below it can grow. */
.devsetup{position:absolute;inset:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:32px 20px}
.devsetup .card{max-width:520px;width:100%}
.devsetup code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--bg-inset);border-radius:var(--r-s);padding:1px 5px}

/* more panel + error card */
.errorcard{position:absolute;left:14px;bottom:14px;max-width:min(430px,72%);background:var(--bg-elevated);border:1px solid var(--err);border-radius:var(--r-m);padding:12px 14px;box-shadow:var(--sh-3);z-index:7}
.errorcard .etop{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.errorcard .badge{background:var(--err);color:#fff;font-size:11px;font-weight:700;border-radius:var(--r-full);padding:1px 7px}
.errorcard .emsg{font-size:12px;color:var(--ink);white-space:pre-wrap;word-break:break-word;max-height:64px;overflow:auto;font-family:ui-monospace,Menlo,monospace}
.errorcard .eacts{display:flex;gap:8px;margin-top:10px}

/* history dropdown */
.histpanel{max-height:60vh;overflow:auto;min-width:320px}
/* one line per run: summary ellipsised, time right-aligned */
.histrow{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-s);position:relative;cursor:pointer}
.histrow:hover{background:var(--bg-inset)}
.histrow .hsum{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.histrow .hmeta{flex:none;font-size:11px;color:var(--ink-3);text-align:right;white-space:nowrap}
.kebab{background:transparent;border:0;color:var(--ink-3);height:auto;padding:2px 6px;border-radius:var(--r-s);cursor:pointer}
.kebab:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}

/* run details drawer body */
.drawer .dstat .k{font-size:11px;color:var(--ink-3)}
.drawer .dstat .v{font-size:15px;font-weight:600}
.timeline{position:relative;margin:6px 0 18px;padding-left:6px}
.tl{display:flex;gap:10px;padding:5px 0;font-size:13px;align-items:flex-start}
.tl .tlic{color:var(--ink-3);flex:none;margin-top:1px;width:28px;height:28px;border-radius:50%;background:var(--bg-inset);display:inline-flex;align-items:center;justify-content:center}
.tl .tltx{min-width:0;word-break:break-word}
.tl .tldetail{color:var(--ink-3);font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.fchg{border:1px solid var(--border);border-radius:var(--r-s);margin-bottom:8px;overflow:hidden}
.fchg .fh{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;font-size:12.5px;font-family:ui-monospace,Menlo,monospace}
.fchg .fh:hover{background:var(--bg-inset)}
.fbadge{font-size:10px;font-weight:700;border-radius:4px;padding:1px 5px;flex:none}
.fbadge.A{background:rgba(26,156,107,.12);color:var(--ok)}
.fbadge.M{background:rgba(183,121,31,.12);color:var(--warn)}
.fbadge.D{background:var(--err-soft);color:var(--err)}
.diffview{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.5;overflow:auto;border-top:1px solid var(--border);background:var(--bg-inset)}
.diffview .dln{display:block;white-space:pre;padding:0 10px}
.diffview .dln.add{background:rgba(26,156,107,.12);color:#0f6a48}
.diffview .dln.del{background:var(--err-soft);color:#9e2a2a}
.diffview .dln.hdr{color:var(--ink-3)}

/* share modal + managed env */
.shareurl{display:flex;gap:8px;align-items:center;margin:8px 0}
.shareurl input{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.kv.managed input{opacity:.6;cursor:not-allowed}
.lockchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2);background:var(--bg-inset);border-radius:var(--r-full);padding:3px 9px;white-space:nowrap}

/* mobile tab bar */
.tabbar{display:none}

/* settings — explicit two-column flex: a 240px nav that cannot collapse, and a
   content column that absorbs any overflow (wide tables, code) on its own. */
/* Fixed track widths rather than flex: the main column then measures the same
   on every section, instead of being sized by whatever that section renders. */
.settings{width:100%;max-width:1440px;margin:0 auto;padding:0 32px 48px;display:grid;grid-template-columns:240px minmax(0,1fr);align-items:start;gap:32px}
.setthead{height:56px;display:flex;align-items:center;gap:10px;width:100%;max-width:1440px;margin:0 auto;padding:0 32px}
.setthead .ttl{font-size:16px;font-weight:600}
.settnav{position:sticky;top:12px;align-self:start;min-width:0}
.settsearch{margin-bottom:12px}
.settsearch input{font-size:13px;height:34px}
.settingsmain{min-width:0}
.settingsmain>.stack>.card h3{font-size:18px;font-weight:600}
.navsec{display:flex;flex-direction:column;gap:2px}
.navsec div{height:32px;display:flex;align-items:center;padding:0 12px;border-radius:var(--r-s);cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.navsec div:hover{background:var(--bg-inset);color:var(--ink)}
.navsec div.on{background:var(--bg-inset);color:var(--ink);font-weight:600}
.navsec .navsubtitle{height:auto;padding:15px 12px 5px;cursor:default;color:var(--ink-3);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.navsec .navsubtitle:hover{background:transparent;color:var(--ink-3)}
.mcpintro{padding:2px 0 8px}.mcpintro h2{font-size:24px;margin:0 0 6px}.mcpnotice{display:flex;align-items:center;justify-content:space-between;gap:24px}.mcpnotice>div{display:flex;flex-direction:column;gap:5px}.buttonlike{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}.mcpsectiontitle{margin:10px 0 0;font-size:17px}.mcphint{font-size:13px;line-height:1.5;margin-top:4px}.mcpurl{display:flex;align-items:center;gap:10px;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-m);padding:8px 10px;margin-top:12px}.mcpurl code{flex:1;min-width:0;overflow:auto;font-size:13px}.mcpaccess{border-top:1px solid var(--border);margin-top:18px;padding-top:18px}.mcpconnect{margin-top:10px}.mcpconnect h3{margin:0 0 5px}.mcpclient{padding-top:14px}.mcptabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:-2px 0 18px}.mcptabs button{background:transparent;color:var(--ink-2);border-radius:0;padding:0 12px;height:36px;border-bottom:2px solid transparent}.mcptabs button:hover{box-shadow:none;transform:none;color:var(--ink)}.mcptabs button.on{color:var(--ink);border-bottom-color:var(--ink)}.mcpsteps{display:flex;flex-direction:column;gap:12px;margin:18px 0}.mcpsteps>div{display:flex;align-items:flex-start;gap:10px;font-size:13.5px}.mcpsteps span{width:24px;height:24px;border-radius:50%;background:var(--bg-inset);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none}.mcpcopy{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;margin-top:18px}.mcpcopyhead{height:42px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-size:12px;color:var(--ink-2)}.mcpcopy pre{margin:0;padding:14px;overflow:auto;font:12px/1.55 ui-monospace,Menlo,monospace;white-space:pre}

/* ---- persistent app sidebar (dashboard + settings) ---- */
.shell{display:flex;align-items:stretch;min-height:100dvh}
.shellmain{flex:1;min-width:0;display:flex;flex-direction:column}
.sidebar{flex:0 0 250px;width:250px;background:var(--bg-elevated);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px;padding:12px 10px;position:sticky;top:0;height:100dvh;overflow-y:auto;z-index:15}
.sidebar .sbgroup{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.04em;padding:14px 10px 4px}
.sbitem{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-s);cursor:pointer;font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;border:0;width:100%;font-weight:500;font-family:inherit;justify-content:flex-start}
.sbitem:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}
.sbitem.on{background:var(--bg-inset);color:var(--ink);font-weight:600}
.sbitem .ico{flex:none}
.sbitem .sblabel{overflow:hidden;text-overflow:ellipsis}
.wsbtn{display:flex;align-items:center;gap:9px;width:100%;height:44px;padding:0 8px;border-radius:var(--r-m);background:transparent;border:0;cursor:pointer;color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:600;justify-content:flex-start}
.wsbtn:hover{background:var(--bg-inset);box-shadow:none;transform:none}
.wsav{width:24px;height:24px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.wsbtn .wsnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.sbfoot{margin-top:auto;padding-top:10px;border-top:1px solid var(--border)}
.sbuser{display:flex;align-items:center;gap:9px;width:100%;height:40px;padding:0 8px;border-radius:var(--r-m);background:transparent;border:0;cursor:pointer;font-family:inherit;justify-content:flex-start}
.sbuser:hover{background:var(--bg-inset);box-shadow:none;transform:none}
.sbuser .em{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbhamburger{display:none}
.sbgroupline{display:none}
/* Between 761 and 1000px the sidebar collapses to a 60px icon rail: labels drop
   away, group headers become hairlines, everything centres. */
@media (max-width:1000px) and (min-width:761px){
  .sidebar{flex:0 0 60px;width:60px;padding:12px 6px}
  .sidebar .sblabel,.sidebar .sbgroup,.sidebar .wsnm,.sidebar .em,.sidebar .sbcaret{display:none}
  .sidebar .sbitem,.sidebar .wsbtn,.sidebar .sbuser{justify-content:center;padding:0}
  .sidebar .sbgroupline{display:block;height:1px;background:var(--border);margin:10px 4px}
}
.stack{display:flex;flex-direction:column;gap:16px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--border)}
.tbl th{color:var(--ink-3);font-weight:500;font-size:12px}
/* The drop target for files and folders: the whole Code view, because aiming
   at a small strip is work and the answer to "where do I drop this" should be
   "here". Never catches pointer events — it only appears mid-drag, and a drop
   still has to reach the pane underneath. */
.codedrop{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(47,111,237,.10);backdrop-filter:blur(1px)}
.codedropbox{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 28px;border-radius:var(--r-xl);border:2px dashed var(--accent);background:var(--bg-elevated);box-shadow:var(--sh-3);max-width:340px;color:var(--accent)}
.codedropbox .muted,.codedropbox div:not(:first-child){color:var(--ink-2)}
/* The same target, page-wide: drop a folder on the dashboard and it becomes a
   project. Fixed rather than absolute because the dashboard scrolls, and the
   answer to "where do I drop this" must not scroll off the top of it. */
.pagedrop{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(47,111,237,.10);backdrop-filter:blur(1px)}
/* Uploading a folder: how far along, in the dialog that asked for it. */
.upbar{height:6px;border-radius:999px;background:var(--bg-sunken,var(--border));overflow:hidden;margin-top:16px}
.upbarfill{height:100%;width:0;border-radius:999px;background:var(--accent);transition:width .2s ease}
.codedropbox>div:nth-child(2){color:var(--ink)}

/* Database explorer charts. The marks carry the colour; everything written
   stays in ink tokens, so the text never wears a series hue. */
.expchart{margin:6px 0 2px;overflow:hidden}
.expchart svg{display:block;max-width:100%}
.expchart rect{transition:opacity .12s}
.expchart rect:hover{opacity:.82}
.kv{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.kv input{flex:1}
.bar{height:8px;border-radius:var(--r-full);background:var(--bg-inset);overflow:hidden;margin-top:6px}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tile{background:var(--bg-inset);border-radius:var(--r-m);padding:14px}
.back{cursor:pointer;font-size:18px;color:var(--ink-2)}
.back:hover{color:var(--ink)}

/* ---- chat v2 (Lovable-identical) ---- */
.datesep{align-self:center;font-size:12px;color:var(--ink-3);padding:8px 0 2px}
.bubble.user{align-self:flex-end;background:var(--bg-inset);color:var(--ink);border-radius:18px;padding:10px 16px;max-width:85%}
.workcard{align-self:stretch;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);padding:14px;display:flex;flex-direction:column;gap:12px}
.workcard .wctop{display:flex;align-items:flex-start;gap:10px}
.workcard .wctitle{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;word-break:break-word}
.workcard .wcrow{display:flex;gap:8px}
.workcard .wcrow button{flex:1 1 0;min-width:0;height:32px;font-size:13px;background:var(--bg-elevated);color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--r-m);font-weight:500}
.workcard .wcrow button:hover{background:var(--bg-inset);box-shadow:none;transform:none}
/* one block per submitted prompt, so concurrent runs never interleave */
.msgblock{align-self:stretch;display:flex;flex-direction:column;gap:12px;min-width:0}
.msgblock .bubble.user{align-self:flex-end}
.recoveredruns{align-self:stretch;display:flex;flex-direction:column;gap:12px;min-width:0}
/* queue/working status chip under the user bubble */
.qchip{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:var(--r-full);background:var(--bg-inset);color:var(--ink-2);font-size:11.5px;font-weight:600}
.qchip.err{background:var(--err-soft);color:var(--err)}
.qchip .qx{background:transparent;border:0;padding:0;margin-right:-4px;height:16px;width:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);border-radius:var(--r-full);cursor:pointer}
.qchip .qx:hover{color:var(--err);background:transparent;box-shadow:none;transform:none}
.qchip .spinner{width:11px;height:11px;border-width:1.5px;vertical-align:0}
.workcard.working .wctitle{color:var(--ink-2);font-weight:500}
.workcard .wctool{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);background:var(--bg-inset);padding:3px 9px;border-radius:var(--r-full);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* markdown-rendered assistant text (renderer escapes everything first) */
.md{align-self:stretch;font-size:14px;line-height:1.55;color:var(--ink);word-break:break-word;min-width:0}
.md p{margin:0 0 8px}
.md p:last-child,.md ul:last-child,.md pre:last-child{margin-bottom:0}
.md .mdh{font-size:14px;font-weight:600;color:var(--ink);margin:12px 0 6px}
.md .mdh:first-child{margin-top:0}
.md ul{margin:0 0 8px;padding-left:20px}
.md li{margin:2px 0}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--bg-inset);border-radius:5px;padding:1px 5px}
.md pre{margin:0 0 8px;background:var(--bg-inset);border-radius:var(--r-m);padding:10px 12px;overflow-x:auto}
.md pre code{background:transparent;padding:0;display:block;white-space:pre}
.md a{color:var(--accent);font-weight:500}
.md table{border-collapse:collapse;margin:8px 0;font-size:13px;display:block;overflow-x:auto;max-width:100%}
.md th,.md td{border:1px solid var(--bg-inset);padding:6px 10px;text-align:left;vertical-align:top}
.md th{background:var(--bg-inset);font-weight:600;white-space:nowrap}
.md .mdimg{max-width:320px;max-height:240px;border-radius:8px;margin:6px 0;display:block;cursor:zoom-in}
.md a.filelink{cursor:pointer;border-bottom:1px dotted currentColor}
.md code.fileref{cursor:pointer;border-bottom:1px dotted currentColor}
.md strong{font-weight:650}
.msgacts{align-self:flex-start;display:flex;gap:2px;align-items:center;margin-top:-4px}
.answerby{display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:11.5px;line-height:1.35;font-variant-numeric:tabular-nums}
.answerby svg{opacity:.7;flex:none}
.reportanswerby{margin-top:9px}
.msgacts .iconbtn{width:28px;height:28px;min-width:28px}
.msgacts .iconbtn.on{background:var(--bg-inset);color:var(--ink)}
.planactions{align-self:stretch;display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.planactions button{height:34px;font-size:12.5px}
.planactions .planapprove{background:var(--ink);color:var(--ink-invert)}
/* "No" is a real answer to a plan, but a quiet one — it sits beside Approve
   and Edit without competing with them for the eye. */
.planactions .linkbtn{background:transparent;border:0;padding:0 4px;color:var(--ink-3);font:inherit;font-size:12.5px;cursor:pointer;height:34px}
.planactions .linkbtn:hover{color:var(--ink);box-shadow:none;transform:none}
.kmenu{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--sh-3);padding:6px;min-width:230px;z-index:400}
.kmenu .kitem{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;border-radius:var(--r-s);cursor:pointer;font-size:13px;color:var(--ink)}
.kmenu .kitem:hover{background:var(--bg-inset)}
.kmenu .kdiv{height:1px;background:var(--border);margin:6px 4px}
.kmenu .krow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 10px;font-size:12.5px;color:var(--ink-3)}
.kmenu .krow b{color:var(--ink);font-weight:600}

/* suggestion chips: one scrollable row directly above the composer */
.sugrow{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.sugrow .sugchip{flex:none}

/* out-of-credits banner */
.credbanner{background:#fdf0e7;color:#b04a2f;border-radius:var(--r-m);padding:9px 10px 9px 14px;font-size:13px;display:flex;gap:10px;align-items:center}
.credbanner .ctext{flex:1;min-width:0}
.credbanner .topup{background:var(--bg-dark);color:#fff;height:28px;padding:0 14px;border-radius:var(--r-full);font-size:12.5px;font-weight:600;flex:none}
.credbanner .cx{background:transparent;border:0;color:#b04a2f;width:24px;height:24px;min-width:24px;padding:0;border-radius:var(--r-s);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.credbanner .cx:hover{background:rgba(176,74,47,.12);box-shadow:none;transform:none}

/* composer v2 */
.chatinput textarea::placeholder{color:var(--ink-3)}
.roundbtn{width:28px;height:28px;min-width:28px;padding:0;border-radius:var(--r-full);background:var(--bg-inset);color:var(--ink-2);border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.roundbtn:hover{background:var(--border-strong);color:var(--ink);box-shadow:none;transform:none}
.roundbtn.dark{background:var(--bg-dark);color:#fff}
.roundbtn.dark:hover{background:var(--bg-dark);box-shadow:var(--sh-2);transform:translateY(-1px)}
.roundbtn.queue{width:auto;padding:0 11px;gap:6px;font-size:12px;font-weight:600}
.roundbtn:disabled{opacity:.4;box-shadow:none;transform:none}
.txtsel{background:transparent;border:0;color:var(--ink-2);height:28px;padding:0 8px;border-radius:var(--r-s);font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-family:inherit}
.txtsel:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}

/* ---- More: a view inside the preview pane, under the same unified header ---- */
.rview.morepane{display:flex;overflow:hidden;background:var(--bg-elevated)}
.moresheet{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
/* section switcher bar — only needed where the nav column collapses (mobile) */
.mhead2{display:none;height:52px;flex:none;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--border)}
.mhead2 .mttl{font-size:15px;font-weight:600}
.msplit{flex:1;min-height:0;display:flex}
.mnav{flex:0 0 220px;width:220px;border-right:1px solid var(--border);padding:14px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.mnav .mnitem{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-s);cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.mnav .mnitem:hover{background:var(--bg-inset);color:var(--ink)}
.mnav .mnitem.on{background:var(--bg-inset);color:var(--ink);font-weight:600}
.mbodywrap{flex:1;min-width:0;overflow-y:auto;padding:24px}
.mcontent{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.ovgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ovcard{display:flex;align-items:center;gap:12px;text-align:left;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--sh-1);padding:14px;cursor:pointer;transition:box-shadow .14s,transform .14s}
.ovcard:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.ovcard .ovmain{flex:1;min-width:0}
.ovcard .ovt{font-size:13.5px;font-weight:600;color:var(--ink)}
.ovcard .ovd{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.datagrid{overflow:auto;border:1px solid var(--border);border-radius:var(--r-m);max-height:420px}
.datagrid table{border-collapse:collapse;font-size:12.5px;width:100%;font-family:ui-monospace,Menlo,monospace}
.datagrid th{position:sticky;top:0;background:var(--bg-inset);text-align:left;padding:7px 10px;font-weight:600;color:var(--ink-2);white-space:nowrap;border-bottom:1px solid var(--border)}
.datagrid td{padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.tblrow{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13.5px}
.tblrow:hover{background:var(--bg-inset)}
.tblrow .tn{flex:1;min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.sqlbox{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;min-height:120px;line-height:1.55}
.logpanel{background:var(--bg-dark);color:#e6e4de;border-radius:var(--r-m);padding:14px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:460px;overflow:auto;margin:0}

/* ---- project Logs: a queried snapshot, one record per line ---- */
.lgctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.lgctl .lgsearch{flex:1 1 220px;min-width:180px}
.lgctl select{width:auto;min-width:150px}
.lgbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.lgbar .lgspacer{flex:1 1 auto}
.lgtog{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.lgtog .lgsw{width:34px;height:19px;border-radius:var(--r-full);background:var(--border-strong);position:relative;transition:background .15s;flex:0 0 auto}
.lgtog .lgsw::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--bg-elevated);box-shadow:var(--sh-1);transition:transform .15s}
.lgtog.on .lgsw{background:var(--accent)}
.lgtog.on .lgsw::after{transform:translateX(15px)}
.lgtable{margin-top:12px;border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;background:var(--bg-elevated)}
.lgitem+.lgitem{border-top:1px solid var(--border)}
.lgrow{display:flex;align-items:center;gap:10px;padding:0 12px;height:36px;min-width:0;cursor:pointer;font-family:ui-monospace,Menlo,monospace;font-size:12px;background:none;border:0;width:100%;text-align:left;color:var(--ink);border-radius:0;box-shadow:none}
.lgrow:hover{background:var(--bg-inset);box-shadow:none;transform:none}
.lgcar{flex:0 0 auto;color:var(--ink-3);transition:transform .12s}
.lgitem.open .lgcar{transform:rotate(90deg)}
.lgtime{flex:0 0 auto;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lglvl{flex:0 0 auto;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:var(--r-full);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.05em;background:var(--bg-inset);color:var(--ink-2)}
.lglvl.warn{background:rgba(183,121,31,.14);color:var(--warn)}
.lglvl.err{background:var(--err-soft);color:var(--err)}
.lgmsg{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.lgmsg .lgm{color:var(--ink);font-weight:700}
.lgmsg .lgsep{color:var(--ink-3);padding:0 7px}
.lgraw{padding:12px;background:var(--bg-inset);border-top:1px solid var(--border)}
.lgrawh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.lgrawh .lgrawt{font-size:12px;font-weight:600;color:var(--ink-2)}
.lgraw pre{margin:0;max-height:320px;overflow:auto;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-s);padding:10px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.lgfoot{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12.5px;color:var(--ink-2)}

/* ---- v8: analytics ---- */
.rangesel{height:32px;border-radius:var(--r-s);border:1px solid var(--border-strong);background:var(--bg-elevated);color:var(--ink);font-size:12.5px;padding:0 8px}
.liveping{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.lpdot{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.lpdot.on{background:var(--ok);box-shadow:0 0 0 0 rgba(26,156,107,.5);animation:pinger 1.8s ease-out infinite}
@keyframes pinger{0%{box-shadow:0 0 0 0 rgba(26,156,107,.45)}70%{box-shadow:0 0 0 7px rgba(26,156,107,0)}100%{box-shadow:0 0 0 0 rgba(26,156,107,0)}}
.stattabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:18px}
.stattab{background:transparent;border:1px solid transparent;border-radius:var(--r-m);padding:10px 12px;text-align:left;cursor:pointer;transition:background .14s,border-color .14s;height:auto;color:inherit}
.stattab:hover{background:var(--bg-inset)}
.stattab.on{background:var(--bg-inset);border-color:var(--border-strong)}
.stattab .stlabel{font-size:11.5px;color:var(--ink-2);font-weight:600}
.stattab .stvalue{font-size:20px;font-weight:700;margin-top:3px;color:var(--ink)}
.lchart{width:100%;height:180px;display:block;overflow:visible}
.chartlabels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);padding:0 4px 0 34px;margin-top:2px}
.bdsplit{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bdhead{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600;color:var(--ink-2);padding-bottom:8px;border-bottom:1px solid var(--border)}
.bdrow{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 8px;font-size:13px;border-bottom:1px solid var(--border);overflow:hidden}
.bdfill{position:absolute;left:0;top:0;bottom:0;background:var(--accent-soft);border-radius:var(--r-s)}
.bdname{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdval{position:relative;font-weight:600;color:var(--ink-2);flex:none}

/* Daily credit usage in Workspace > Plans and credit usage. */
.usagechart{margin-top:18px}
.usagechartplot{height:190px;display:flex;align-items:stretch;gap:8px}
.usageaxis{width:38px;flex:none;display:flex;flex-direction:column;justify-content:space-between;text-align:right;font-size:10.5px;color:var(--ink-3);padding:0 0 22px}
.usagebars{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;gap:3px;padding-bottom:22px;border-bottom:1px solid var(--border);background:repeating-linear-gradient(to bottom,var(--border) 0,var(--border) 1px,transparent 1px,transparent 50%)}
.usagebar{position:relative;flex:1;min-width:3px;height:100%;display:flex;align-items:flex-end;justify-content:center}
.usagebar i{display:block;width:min(18px,75%);min-height:2px;border-radius:3px 3px 1px 1px;background:var(--accent);transition:opacity .12s,filter .12s}
.usagebar:hover i{opacity:.8;filter:saturate(1.2)}
.usagebar label{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.usagebar .usagetip{display:none;position:absolute;z-index:3;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);padding:6px 8px;border-radius:6px;background:var(--ink);color:var(--bg);font-size:11px;line-height:1.35;white-space:nowrap;box-shadow:var(--shadow-m);pointer-events:none}
.usagebar:hover .usagetip,.usagebar:focus .usagetip{display:block}
.usageprojects{margin-top:18px;border-top:1px solid var(--border);padding-top:14px}
.usageproject{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;padding:9px 10px;margin:0 0 4px;border:0;border-radius:7px;background:transparent;color:var(--ink);cursor:pointer}
.usageproject:hover{background:var(--bg-inset)}
.usageproject.active{background:var(--accent-soft);color:var(--accent)}
.usageprojectname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usageprojectcredits{font-weight:650;white-space:nowrap}
.usagechartempty{height:150px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:13px}
@media(max-width:620px){.usagechartplot{gap:4px}.usageaxis{width:30px}.usagebar label{font-size:9.5px}}

/* ---- v8: jobs ---- */
.notebanner{display:flex;gap:9px;align-items:flex-start;background:var(--bg-inset);border-radius:var(--r-m);padding:10px 12px;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:14px}
.notebanner .ico{flex:none;margin-top:1px;color:var(--ink-3)}
.jobcard{display:flex;gap:14px;align-items:flex-start;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:16px 18px;margin-bottom:12px}
.jobicon{width:36px;height:36px;flex:none;border-radius:var(--r-m);background:var(--bg-inset);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.jobname{font-size:14.5px;font-weight:600}
.jobtarget{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ink-3);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- v8: security ---- */
.scanbanner{background:linear-gradient(180deg,rgba(47,111,237,.07),rgba(47,111,237,.02));border-color:var(--accent-soft)}
.scanicon{width:40px;height:40px;flex:none;border-radius:var(--r-m);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.isstbl{margin-top:14px;border-top:1px solid var(--border)}
.isshead,.issrow{display:grid;grid-template-columns:28px 92px 1fr 148px;gap:10px;align-items:center;padding:10px 2px}
.isshead{font-size:11.5px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--border);padding:8px 2px}
.issrow{border-bottom:1px solid var(--border);cursor:pointer;font-size:13.5px}
.issrow:hover{background:var(--bg-inset)}
/* A finding someone has deliberately dismissed. Still listed - taking it off
   the screen would hide the judgement as well as the issue - but it stops
   competing with the ones still to answer for. */
.issrow.issmuted .isstitle{color:var(--ink-3);text-decoration:line-through}
.issrow .ico{transition:transform .14s}
.isstitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.issdetail{padding:2px 2px 14px 130px;font-size:12.5px;color:var(--ink-2);line-height:1.6;border-bottom:1px solid var(--border)}

/* ---- v8: SEO ---- */
.seorow{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13.5px}
.seorow:hover{background:var(--bg-inset)}
.seorow .seoic{width:22px;flex:none;display:flex;align-items:center;justify-content:center}
.seorow.ok .seoic{color:var(--ok)}
.seorow.warn .seoic{color:var(--warn)}
.seolabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.seorow .ico{transition:transform .14s}
.seodetail{padding:0 2px 14px 36px;border-bottom:1px solid var(--border)}

/* ---- v8: connectors + secrets ---- */
.connchip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:var(--r-full);background:var(--bg-elevated);border:1px solid var(--border-strong);font-size:13px;font-weight:600}
.connchip .ico{color:var(--ok)}
.connchip .ckind{font-weight:500;font-size:11.5px;color:var(--ink-3)}
.seckey{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.sectbl td{vertical-align:middle}

/* ---- v8: import ---- */
.importlink{text-align:center;margin-top:14px}
.importlink .link{font-size:13px;color:var(--ink-2)}
.importlink .link:hover{color:var(--ink)}
.imptabs{display:flex;gap:4px;background:var(--bg-inset);border-radius:var(--r-full);padding:3px;width:fit-content;max-width:100%;flex-wrap:wrap}
.imptab{height:30px;border-radius:var(--r-full);background:transparent;border:none;color:var(--ink-2);font-size:13px;font-weight:500;padding:0 14px;cursor:pointer}
.imptab.on{background:var(--bg-elevated);box-shadow:var(--sh-1);color:var(--ink);font-weight:600}
.infocard{display:flex;gap:12px;align-items:flex-start;background:var(--bg-inset);border-radius:var(--r-m);padding:14px 16px;margin-bottom:16px}
.infoic{flex:none;color:var(--accent);margin-top:1px}
.repolist{border:1px solid var(--border);border-radius:var(--r-m);max-height:300px;overflow:auto}
.repolrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.repolrow:last-child{border-bottom:none}
.repolrow:hover{background:var(--bg-inset)}
.repolrow.on{background:var(--accent-soft)}
.reponame{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.repodesc{font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The repo picker needs more room than the standard 480px modal. */
.modal:has(.repolist){max-width:620px}

/* ---- Code tab: tree + tabs + CodeMirror ---- */
.rview.codepane{overflow:hidden}
.codeviewer{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
.codebar{flex:none}
.codetreewrap{width:240px;flex:none;display:flex;flex-direction:column;min-height:0}
.codetreesplitter{width:5px;flex:none;position:relative;cursor:col-resize;touch-action:none;background:transparent}
.codetreesplitter::after{content:'';position:absolute;left:2px;inset-block:0;width:1px;background:var(--border);transition:background .1s,width .1s,left .1s}
.codetreesplitter:hover::after,.codetreesplitter.drag::after{left:1px;width:3px;background:var(--accent)}
body.codetreeresizing{cursor:col-resize;user-select:none}
/* Search, and the two ways to add a file, on one row: finding a file and
   adding one are the same kind of errand and belong in the same place. */
.treesearch{padding:8px;border-bottom:1px solid var(--border);flex:none;display:flex;align-items:center;gap:6px}
.treesearch input{flex:1;min-width:0}
/* Content-search results, under the filename matches in the file tree. */
.srchhead{display:flex;align-items:center;gap:7px;padding:8px 6px 5px;font-size:11px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
.srchhead.err{color:var(--err);text-transform:none;letter-spacing:0;font-weight:600}
.srchres{margin-top:2px}
.srchfile{display:flex;align-items:center;gap:6px;padding:6px 6px 3px;font-size:11.5px;color:var(--ink-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.srchfile svg{flex:none;opacity:.6}
.srchline{display:flex;gap:8px;padding:2px 6px 2px 20px;border-radius:6px;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.5}
.srchline:hover{background:var(--bg-inset)}
.srchno{flex:none;min-width:30px;text-align:right;color:var(--ink-3)}
.srchtxt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink-2)}
.srchtxt mark{background:var(--accent);color:#fff;border-radius:2px;padding:0 1px}
/* Brief flash on the line a search result jumped to. */
.cmhit{background:var(--accent-soft,rgba(47,111,235,.14))}
.treesearch input{height:30px;font-size:12.5px;padding:0 10px}
.treescroll{flex:1;overflow:auto;min-height:0}
.treefoot{flex:none;border-top:1px solid var(--border);padding:8px}
.treefoot button{width:100%;height:32px;font-size:12.5px}
.filedownload{height:36px;padding:0 18px;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;background:var(--bg-dark);color:var(--ink-invert);font-size:13.5px;font-weight:600;text-decoration:none}
.filedownload:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.filetree .frow .fglyph{font-size:9.5px;font-weight:700;width:20px;flex:none;text-align:center;letter-spacing:-.02em}
.filetree .frow .fname{overflow:hidden;text-overflow:ellipsis}
.ftabs{display:flex;align-items:stretch;gap:0;height:36px;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;flex:none;background:var(--bg-elevated);scrollbar-width:thin}
.ftabs::-webkit-scrollbar{height:3px}
.ftabs::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.ftab{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 10px 0 12px;border:0;border-right:1px solid var(--border);border-radius:0;background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;flex:none;font-family:inherit}
.ftab:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}
.ftab.on,.ftab.on:hover{background:var(--bg-inset);color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.ftab.preview{font-style:italic}
.ftab .fx{width:16px;height:16px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3)}
.ftab .fx:hover{background:var(--border-strong);color:var(--ink)}
.ftab .fdot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.cmhost{flex:1;min-height:0;position:relative;overflow:hidden}
/* Rendered markdown, sharing the editor pane's box so toggling does not resize
   anything. Reading width is capped; the pane itself still fills the space. */
.mdhost{flex:1;min-height:0;overflow:auto;background:var(--bg-elevated);padding:22px 26px}
.mdhost .md{max-width:780px}
.imagehost{flex:1;min-height:0;overflow:auto;background:var(--bg-elevated);padding:24px;display:flex;align-items:center;justify-content:center}
.imagehost img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.mdtoggle{margin-left:auto;flex:none;display:inline-flex;align-items:center;height:26px;padding:0 10px;font-size:12px}
.cmhost .CodeMirror{height:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.55;background:var(--bg-elevated);color:var(--ink)}
.cmhost .CodeMirror-gutters{background:var(--bg-elevated);border-right:1px solid var(--border)}
.cmhost .CodeMirror-linenumber{color:var(--ink-3)}
.cmhost .CodeMirror-cursor{border-left:1.5px solid var(--ink)}
.cmhost .CodeMirror-selected{background:var(--accent-soft)}

/* ---- v7: announcement pill ---- */
.annpill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 6px 0 14px;border-radius:var(--r-full);background:var(--bg-elevated);border:1px solid var(--border-strong);box-shadow:var(--sh-1);font-size:12.5px;color:var(--ink-2);margin-bottom:20px;max-width:100%}
.annpill .anntag{font-weight:700;color:var(--accent);flex:none}
.annpill .anntx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.annpill a.anntx{color:var(--ink-2)}
.annpill a.anntx:hover{color:var(--ink)}
.annpill .annx{background:transparent;border:0;color:var(--ink-3);width:22px;height:22px;min-width:22px;padding:0;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.annpill .annx:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}

/* ---- v7: dashboard tabs row over the project grid ---- */
.dashtabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:32px 0 4px}
.dashsearch{position:relative;flex:none}
.dashsearch .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.dashsearch input{width:230px;height:34px;font-size:13px;padding:0 12px 0 32px;border-radius:var(--r-full);background:var(--bg-elevated)}
.dtab{background:transparent;border:1px solid transparent;color:var(--ink-2);height:34px;padding:0 14px;border-radius:var(--r-full);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.dtab:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}
.dtab.on{background:var(--bg-elevated);border-color:var(--border-strong);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.browseall{background:transparent;border:0;color:var(--ink-2);height:34px;padding:0 8px;border-radius:var(--r-s);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;flex:none}
.browseall:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}

/* ---- v7: live project-card thumbnails ----
   A 4x-sized iframe scaled to .25 fills the 140px banner. The gradient behind
   it stays visible until the frame paints (and forever for never-started
   projects), so a card never flashes empty. */
.pcard .bthumb{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s ease-out}
.pcard .bthumb.ready{opacity:1}
.pcard .bthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;background:#fff}
.cardstar{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.85)}

/* ---- v7: template cards ---- */
.tplcard{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:20px;cursor:pointer;font-family:inherit;height:auto;color:var(--ink);transition:box-shadow .14s,transform .14s}
.tplcard:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.tplic{width:40px;height:40px;border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;background:var(--bg-inset);color:var(--ink);flex:none}
.tplcard .tplt{font-size:15px;font-weight:600;margin:14px 0 6px}
.tplcard .tpld{font-size:12.5px;color:var(--ink-2);line-height:1.5;font-weight:400;white-space:normal}

/* ---- v7: composer mic ---- */
.micbtn.rec{color:var(--accent);background:var(--accent-soft);animation:micpulse 1.2s ease-in-out infinite}
.micbtn.rec:hover{color:var(--accent);background:var(--accent-soft)}
@keyframes micpulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---- v7: sidebar credits card (same markup as the project-menu card) ---- */
.sbcred{background:var(--bg-inset);border-radius:var(--r-m);padding:10px 12px;margin:0 2px 10px}

/* ---- v7: keyboard shortcuts modal ---- */
.kbdgrid{display:flex;flex-direction:column}
.kbdrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.kbdrow:last-child{border-bottom:0}
.kbdkeys{display:flex;gap:4px;flex:none}
kbd{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;background:var(--bg-inset);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;padding:2px 6px;color:var(--ink-2)}

/* ---- v7.1: workspace header parity with Lovable ----
   Exact left-to-right order: name menu | history | collapse ‖ Preview Files
   Code More ‖ … ‖ viewport reload open-external fix-an-error | avatar Share
   Publish. 28px buttons, 2px inside a group, 12px between groups, 1px rules. */
.wshead{position:relative;gap:0}
.wshead .hgroup+.hgroup{margin-left:12px}
.wshead .iconbtn,.wshead .tbtn{width:28px;height:28px;min-width:28px}
.wshead .hdiv{width:1px;height:20px;background:var(--border);flex:none;margin:0 12px}
.wshead .htools{gap:2px;margin-left:12px}
/* the view pills read as labelled buttons, not a segmented control */
.vpill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--r-full);background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap}
.vpill:hover{background:var(--bg-inset);color:var(--ink);box-shadow:none;transform:none}
.vpill.on{background:var(--bg-inset);color:var(--ink);font-weight:600}
.vpill.icononly{padding:0;width:28px;justify-content:center}

/* ---- v7.1: page finder, absolutely centred over the preview column ---- */
.pagefinder.center{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:6}
.pfpill{display:inline-flex;align-items:center;gap:8px;width:320px;max-width:100%;height:30px;padding:0 10px;border-radius:var(--r-full);background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--sh-1);color:var(--ink-2);font-size:12.5px;font-weight:500;font-family:inherit;cursor:pointer;transition:width .14s ease-out,border-color .14s,box-shadow .14s}
.pfpill:hover{border-color:var(--border-strong);color:var(--ink);box-shadow:var(--sh-1);transform:none}
.pfpill.open{width:400px;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pfpill .pflabel{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.pfmenu{width:400px;max-width:calc(100vw - 24px)}

/* ---- v7.1: code editor Save/Discard, only while the buffer is dirty ---- */
.ftabs .ftabsp{flex:1;min-width:12px}
.ftabs .fdirty{display:flex;align-items:center;gap:6px;flex:none;padding:0 8px;border-left:1px solid var(--border)}
.ftabs .fdirty button{height:26px;padding:0 12px;font-size:12px;border-radius:var(--r-full)}
.ftabs .fdirty button.ghost{background:transparent;border:0;color:var(--ink-2);font-weight:500}
.ftabs .fdirty button.ghost:hover{background:var(--bg-inset);color:var(--ink)}

/* ---- v7.1: workspace selector ---- */
.wsmenu{width:280px;max-width:calc(100vw - 24px)}
.wsmenu .kitem{justify-content:flex-start}
.wsmenu .kitem .wschk{margin-left:auto;color:var(--accent);flex:none}
.wsmenu .kitem .wscount{margin-left:auto;font-size:11.5px;color:var(--ink-3);flex:none}

/* ---- v7.1: custom-domain records table ---- */
.domrow{padding:12px 0;border-bottom:1px solid var(--border)}
.domrow:last-of-type{border-bottom:0}
.domtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.domtop .dmname{font-weight:600;font-size:13.5px;word-break:break-all}
.domtop .sp{flex:1}
.domprim{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.domprim input{width:auto;height:auto;margin:0}
.dnstbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dnstbl th{text-align:left;padding:6px 8px;color:var(--ink-3);font-weight:500;font-size:11px;font-family:system-ui,sans-serif;border-bottom:1px solid var(--border)}
.dnstbl td{padding:6px 8px;border-bottom:1px solid var(--border);word-break:break-all;vertical-align:top;color:var(--ink)}
.dnstbl tr:last-child td{border-bottom:0}
.dnstbl .dnsok{color:var(--ok)}
.dnstbl .dnswait{color:var(--ink-3)}
/* A record exists but points elsewhere — a real mismatch to fix, not a wait. */
.dnstbl .dnserr{color:var(--err)}
.dnshelp{font-size:12px;line-height:1.55;color:var(--ink-3);margin-top:8px;max-width:900px}
.dnshelp>div+div{margin-top:4px}
.wsdomain-project{padding:16px 0;border-top:1px solid var(--border)}
.wsdomain-project:last-child{padding-bottom:0}
.wsdomain-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px}
.wsdomain-project>.row input{flex:1;min-width:180px}
.dnscopy{display:flex;align-items:center;gap:7px;min-width:0}
.dnscopy code{font:inherit;color:inherit;word-break:break-all}
.dnscopybtn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:2px;color:var(--ink-3)}
.dnscopybtn:hover{color:var(--accent)}

/* responsive */
/* Below 1100px the middle tool cluster folds into a single '...' menu so the
   header never wraps or scrolls. */
@media (max-width:1100px){
  .wshead .htools{display:none}
  /* the centred finder has nowhere to sit once the tools fold away */
  .pagefinder.center{display:none}
  .wsoverflow{display:inline-flex}
  .pnamebtn{max-width:150px}
  .wshead .hgroup+.hgroup{margin-left:8px}
  .wshead .hdiv{margin:0 8px}
  /* Collapse to icons, but keep the label on the active view so the header
     still says where you are. Inactive pills keep their tooltip. */
  .vpill span{display:none}
  .vpill{padding:0;width:28px;justify-content:center}
  .vpill.on span{display:inline}
  .vpill.on{padding:0 10px;width:auto}
}
@media (max-width:1024px) and (min-width:761px){
  .chatpane{min-width:40%}
}
@media (max-width:760px){
  html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;touch-action:manipulation}
  input,select,textarea{font-size:16px}
  .lnav-desktop{display:none}
  .lnav-mobile{display:block}
  .lgrid{grid-template-columns:1fr}
  .lhero{padding:56px 12px 32px}
  .landing .lnav,.landing .lhero,.landing .lsection,.landing .lfooter{width:calc(100% - 32px)}
  .lnav .ghost{border:0;background:transparent;padding:0 10px}
  .lhero h1{font-size:clamp(40px,13vw,58px)}
  .lsub{font-size:16px}
  .lpromptideas{display:none}
  .product-stage{width:calc(100% - 24px);padding:6px;margin-top:20px}
  .product-window{height:400px;grid-template-columns:1fr}
  .pw-chat{display:none}
  .pw-preview{padding:8px}.pw-site{padding:34px 24px}.pw-site h3{font-size:30px}
  .trustline{margin-bottom:32px}
  .lsection{padding:44px 0}
  .lsection-head{display:block}.lsection-head h2{font-size:30px}.lsection-head p{margin-top:12px}
  .lbento{grid-template-columns:1fr}.lbento .lcard:first-child{grid-row:auto}.lbento .lcard,.lbento .lcard:first-child{min-height:200px}.lbento .lcard:first-child h3{font-size:22px}
  .lcta{width:calc(100% - 24px);padding:56px 20px}
  .hero-intro{text-align:center}.hero-intro .hey{display:none}.hero-intro p{font-size:13px}
  .quickstarts{margin-left:-2px;margin-right:-2px}
  .statgrid{grid-template-columns:1fr}
  /* v8: two-column analytics breakdown and the wide issue grid stack */
  .bdsplit{grid-template-columns:1fr;gap:20px}
  .isshead,.issrow{grid-template-columns:24px 80px 1fr 122px;gap:8px;font-size:13px}
  .issdetail{padding-left:2px}
  .jobcard{padding:14px}
  /* settings collapses to a single column with a horizontal chip row of sections */
  .settings{display:block;padding:0 16px 48px;overflow:hidden}
  .settnav{flex:none;width:auto;min-width:0;position:static;margin-bottom:16px}
  .settingsmain{max-width:none}
  .settingsmain>.stack>.card{overflow-x:auto}
  .navsec{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .navsec div{white-space:nowrap;border:1px solid var(--border-strong);border-radius:var(--r-full);padding:0 14px;flex:none}
  .navsec .navsubtitle{display:none}
  .mcpnotice{align-items:flex-start}.mcptabs{overflow-x:auto}.mcptabs button{flex:none}
  .chatpane{width:100%!important;max-width:none;min-width:0}
  .splitter{display:none}
  .chatrail{display:none!important}
  .previewpane{display:none}
  .ws-body.showpreview .chatpane{display:none}
  .ws-body.showpreview .previewpane{display:flex}
  /* the Chat/Preview switcher sits directly under the unified header */
  .tabbar{display:flex;border-bottom:1px solid var(--border);background:var(--bg-elevated);flex:none}
  .tabbar button{flex:1;background:transparent;color:var(--ink-2);border-radius:0;height:48px}
  .tabbar button:hover{box-shadow:none;transform:none}
  .tabbar button.on{color:var(--ink)}
  .hero h1{font-size:24px}
  /* the search field takes its own row; the tabs scroll horizontally under it */
  .dashsearch{flex:1 1 100%}
  .dashsearch input{width:100%}
  .dashtabs{gap:6px}
  .browseall{margin-left:auto}
  .wshead{gap:2px;padding:0 6px}
  /* one row again: there is no side-by-side split to line up with */
  .wshead .hleft{width:auto!important;flex:0 1 auto}
  .wshead .hchat .iconbtn[title="Collapse chat"]{display:none}
  .wshead .wsshare{display:none}
  .mhead2{display:flex}
  .pubpop{width:calc(100vw - 24px)}
  .drawer{width:100vw;border-radius:0}
  .modalback{padding:12px}
  .modal{max-height:calc(100dvh - 24px)}
  .codetreewrap{width:clamp(112px,36vw,150px)!important}
  .codetreesplitter{display:none}
  .codeviewer,.cmhost,.cmhost .CodeMirror{max-width:100%}
  .ftabs{max-width:100%}
  .ftabs .fdirty{position:sticky;right:0;background:var(--bg-elevated)}
  .assetgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  /* sidebar becomes an off-canvas drawer behind a hamburger in the top bar */
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;transform:translateX(-100%);transition:transform .2s ease-out;box-shadow:var(--sh-3);z-index:30}
  .sidebar.open{transform:none}
  .sidebar.rail{flex-basis:250px;width:250px}
  .sidebar.rail .sblabel,.sidebar.rail .sbgroup,.sidebar.rail .wsnm,.sidebar.rail .em,.sidebar.rail .sbcaret{display:block}
  .sidebar.rail .sbitem,.sidebar.rail .wsbtn,.sidebar.rail .sbuser{justify-content:flex-start;padding:0 10px}
  .sidebar.rail .sbgroupline{display:none}
  .sbhamburger{display:inline-flex}
  .sbscrim{position:fixed;inset:0;background:rgba(20,20,19,.4);z-index:25}
  .moresheet .mnav{display:none}
  .moresheet.shownav .mnav{display:flex;position:absolute;inset:52px 0 0;width:100%;background:var(--bg-elevated);z-index:3}
  .rview.morepane{position:absolute;inset:0}
  .moresheet .mbodywrap{padding:16px}
}
@media (max-width:520px){
  /* A phone cannot hold the project identity, five view controls and Publish
     in one fixed row. Give the two groups their own rows; only the view pills
     scroll, while the primary Publish action remains pinned on-screen. */
  .wshead{height:auto;min-height:48px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
  .wshead .hleft{flex:0 0 100%;width:100%!important}
  .wshead .hright{flex:0 0 100%;width:100%}
  .wshead .hright>.hgroup:first-child{flex:1 1 auto;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .wshead .hright>.hgroup:first-child::-webkit-scrollbar{display:none}
  .wshead .hright>.sp{display:none}
  .wshead .wsactions{flex:none}
  .wshead .wsactions>.avatarwrap{display:none}
  .wshead .hdiv{margin:0 4px}
  .lhero{padding-left:0;padding-right:0}
  .leyebrow{font-size:11px;padding:0 10px}
  .lmock{padding:10px;margin-top:28px}
  .pw-site{padding:28px 18px}
  .brand-story{width:calc(100% - 24px)}
  .brand-story-copy{padding:30px 22px}
  .lfootgrid{gap:26px 18px}
}

/* project backlog */
.backlog{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}.rview>.backlog{height:100%;min-height:0}.blhead{height:56px;padding:0 20px;border-bottom:1px solid var(--border);background:var(--bg-elevated);display:flex;align-items:center;gap:12px;flex:none}.blhead h2{font-size:16px;margin:0}.blmain{padding:24px;overflow:auto}.rview>.backlog .blmain{flex:1;min-height:0}.bltoolbar{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}.bltoolbar h1{font-size:28px;margin:0}.bltitle{display:flex;flex-direction:column;gap:2px}.blmeta{font-size:12.5px;color:var(--ink-3)}
.blctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.blctlitem{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}.blctlitem select{height:32px;min-width:128px;max-width:min(220px,32vw);padding-right:32px;text-transform:none;letter-spacing:0;font-weight:500}.blclear{background:transparent;border:0;color:var(--accent);cursor:pointer;font-size:12.5px;padding:4px 6px}.blclear:hover{box-shadow:none;transform:none;text-decoration:underline}.blctlitem>span{white-space:nowrap}/*viski-board-v2*/.wicard{border-left:4px solid var(--state-color,#94a3b8)}.wicard select{max-width:132px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.drawer{width:680px;max-width:96vw}.drawer select,.blctlitem select,.wicard select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23888'/></svg>");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px;border-radius:4px;border:1px solid var(--border);background-color:var(--bg-elevated)}.blctlitem select{font-size:12.5px;line-height:1.2}
.blcoltitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Estimate chips: a muted, low-weight annotation so a forecast never reads as
   confirmed spend. Column subtotal sits after the count; card chip in the foot. */
.blcolest{margin-left:6px;font-weight:600;font-size:11px;color:var(--ink-3);text-transform:none;letter-spacing:0}
.wiest{color:var(--ink-3);font-variant-numeric:tabular-nums}
/* Inline quick-add at the foot of each column. */
.bladdbtn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:8px 0 0 auto;padding:0;background:transparent;border:1px dashed transparent;border-radius:var(--r-m);color:var(--ink-3);font-size:12.5px;font-weight:600;cursor:pointer;opacity:0;transition:.12s}
.blcol:hover .bladdbtn,.bladdbtn:focus{opacity:1;border-color:var(--border-strong)}
.bladdbtn:hover{color:var(--ink);border-color:var(--ink-3);background:var(--bg-elevated);box-shadow:none;transform:none}
.bladdform{margin-top:8px}
.bladdtypes{display:flex;justify-content:flex-end;gap:5px;margin-top:8px}.bladdtypes button{height:28px;padding:0 8px;font-size:11px}
.bladdinput{width:100%;min-height:38px;max-height:140px;font-size:13px;line-height:1.4;padding:8px 10px;resize:none}
.bladdhint{font-size:11px;color:var(--ink-3);margin-top:4px;padding-left:2px}
.blparentadd{display:flex;align-items:center;gap:5px;min-width:0;flex:1}.blparentadd .bladdinput{min-height:30px;height:30px;padding:4px 7px}.blparentadd .bladdtypes{margin:0}.blparentplus{flex:none;margin:0;opacity:1}
/* Running indicator: a live pulse on cards an agent is executing right now. */
.witoprow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wicard.running{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft),var(--sh-1)}
.wirun{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.wirundot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;animation:wipulse 1.4s ease-in-out infinite}
@keyframes wipulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.blspin{width:12px;height:12px;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);animation:blspin .8s linear infinite;flex:none}
@keyframes blspin{to{transform:rotate(360deg)}}
.blrunmeta{display:inline-flex;align-items:center;gap:5px;margin-left:8px;color:var(--accent);font-weight:650}
button.blrunmeta{background:none;border:0;padding:2px 6px;border-radius:8px;cursor:pointer;font:inherit;font-weight:650}
button.blrunmeta:hover,button.blrunmeta:focus-visible{background:var(--accent-soft);outline:none}
.runoverlay{width:min(560px,86vw);max-width:100%;overflow-x:hidden}
.runoverlayrow{display:flex;align-items:flex-start;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border)}
.runoverlayrow:last-child{border-bottom:0}
.runoverlaycopy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.runoverlaytitle{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.runoverlaytitle:hover{color:var(--accent)}
.runoverlaymeta{font-size:12px;color:var(--muted)}
.runoverlaystate{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:12px;font-weight:650;color:var(--accent);padding-top:2px}
.runoverlaystate.queuedstate{color:var(--muted)}
.livefeed{max-height:min(48vh,420px);overflow-y:auto;background:var(--bg-sunken,rgba(0,0,0,.18));border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;font-size:12.8px;line-height:1.5;overscroll-behavior:contain}
/* Children must keep natural height: flex-shrink would compress rows on top of
   each other once the feed exceeds max-height, instead of scrolling. */
.livefeed>*{flex:none;min-height:0}
.livefeed:empty::after{content:'Waiting for the agent\2026';color:var(--muted)}
.livetext{white-space:pre-wrap;word-break:break-word}
.livetool{font-family:var(--mono,ui-monospace,monospace);font-size:11.6px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.livetool b{color:var(--fg);font-weight:600}
.liveresult{white-space:pre-wrap;word-break:break-word;border-top:1px dashed var(--border);padding-top:7px;margin-top:2px}
.liveshot{display:flex;flex-direction:column;gap:3px;margin:2px 0}
.livethumb{max-width:220px;max-height:150px;width:auto;height:auto;border:1px solid var(--border-strong);border-radius:8px;cursor:zoom-in;object-fit:cover;object-position:top;background:var(--bg-elevated);transition:transform .1s,box-shadow .1s}
.livethumb:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.liveshotcap{font-size:11px;color:var(--muted)}
.lightboxmodal{width:auto;max-width:96vw;max-height:96dvh}
.lightbox{display:flex;align-items:center;justify-content:center;max-width:92vw;max-height:82dvh;overflow:auto}
.lightboximg{max-width:100%;max-height:82dvh;border-radius:8px;display:block}
.livestatus{display:flex;align-items:center;gap:6px;font-size:12px;margin:2px 0 8px}
.livestatus .wirundot{flex:none}
.wilive h3 .wirundot{display:inline-block;margin-right:6px;vertical-align:1px}
.batchsugrow{display:flex;align-items:flex-start;gap:10px;padding:8px 2px;cursor:pointer;border-radius:8px}
.batchsugrow:hover{background:var(--accent-soft)}
/* The app styles every input as a full-width 38px text field — a checkbox must
   opt back out of all of it or it renders as a giant empty box. */
.batchsugrow input[type=checkbox]{width:15px;height:15px;min-height:0;flex:none;margin:3px 0 0;padding:0;appearance:auto;-webkit-appearance:checkbox;accent-color:var(--accent);cursor:pointer;box-shadow:none}
.batchsugcopy{flex:1;min-width:0}
.batchsugtitle{font-weight:600;word-break:break-word}
.batchsugwhy{font-size:11.5px;color:var(--muted)}
.blswimtitle .wirun{margin-left:6px;flex:none}
/* Compact per-card run affordances: everything lives inside the title row so a
   card with a run button is no taller than one without. */
.wititle .wirunbtn{width:20px;height:20px;min-width:20px;border:0;background:transparent;border-radius:6px;flex:none;margin:-1px 0 0}
.wititle .wirunbtn:hover:not(:disabled){background:var(--accent-soft)}
.wititle .wirundot{flex:none;margin:4px 2px 0 0}
.wiselect{width:14px;height:14px;min-height:0;flex:none;margin:2px 0 0;padding:0;appearance:auto;-webkit-appearance:checkbox;accent-color:var(--accent);cursor:pointer;opacity:0;transition:opacity .12s;box-shadow:none}
.wicard:hover .wiselect,.wicard:focus-within .wiselect,.wiselect:checked,.wiselecting .wiselect{opacity:1}
/* Touch devices have no hover, so a hover-only checkbox is unreachable there.
   On coarse/hover-less pointers keep it always visible (dimmed until checked). */
@media (hover:none),(pointer:coarse){.wiselect{opacity:.55}.wiselect:checked{opacity:1}}
.blrunselected{display:inline-flex;align-items:center;gap:6px}
.wsrunbadge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;margin-left:6px;border:1px solid var(--accent);border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:650;cursor:pointer;white-space:nowrap}
.wsrunbadge:hover{background:var(--accent);color:#fff}
.wsrunbadge:hover .wirundot{background:#fff}
.wsrunbadge .wirundot{flex:none}
.blactivity{padding:8px 2px 40px}
.blactempty{padding:28px 16px;color:var(--muted);font-size:13.5px;text-align:center}
.bltimeline{position:relative;display:flex;flex-direction:column}
.bltimeline::before{content:'';position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:var(--border)}
.blactrow{display:flex;gap:12px;align-items:flex-start;padding:8px 4px;position:relative}
.blacticon{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--c);z-index:1}
.blactbody{flex:1;min-width:0;padding-top:5px}
.blactline{font-size:13.5px;line-height:1.5;word-break:break-word}
.blactline strong{font-weight:650}
.blactlink{color:var(--accent);text-decoration:none;font-weight:550}
.blactlink:hover{text-decoration:underline}
.blactstate{font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--bg-inset);color:var(--ink-2);font-weight:600}
.blactstate.on{background:var(--accent-soft);color:var(--accent)}
.blactnote{color:var(--muted);font-size:12.5px}
.blacttime{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.blbackloghead{display:flex;justify-content:flex-end;margin:0 0 10px}
.blgrouptoggle{height:30px;font-size:12px}
.blgrouphdr{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-m);padding:9px 12px;margin:14px 0 6px;font-size:13px;font-weight:650;cursor:pointer;color:var(--ink)}
.blgrouphdr:hover{background:color-mix(in srgb,var(--bg-inset) 82%,var(--accent))}
.blgrouphdr svg{transition:transform .12s;flex:none}
.blgrouphdr.collapsed svg{transform:rotate(-90deg)}
.blgrouptitle{flex:none}
.blgroupcount{margin-left:auto;background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;min-width:24px;height:20px;display:inline-grid;place-items:center;padding:0 7px;font-size:11.5px;color:var(--ink-2)}
.blgroupempty{padding:10px 12px;color:var(--muted);font-size:12.5px}
.runselrow{padding:6px 2px;border-bottom:1px solid var(--border)}
.runselrow:last-child{border-bottom:0}
/* Richer, wider create dialog (Azure DevOps-style). */
.modal.wicreate{max-width:640px}
.wicreatebody .wifield{margin-bottom:16px}
.wicreatebody textarea{min-height:88px}
.chip .attx{background:transparent;border:0;color:var(--ink-3);cursor:pointer;padding:0 2px;margin-left:2px;font-size:14px;line-height:1;border-radius:0}
.chip .attx:hover{color:var(--err);box-shadow:none;transform:none}
/* Card assignee control + inline resource picker. */
.wiavatar.wiav-sm{width:18px;height:18px;font-size:8.5px}
.wiav-ph{background:var(--bg-inset)!important;color:var(--ink-3);border:1px dashed var(--border-strong);font-weight:700}
.wiassign{display:inline-flex;align-items:center;gap:5px;max-width:150px;height:24px;padding:1px 5px 1px 2px;border:1px solid transparent;border-radius:var(--r-full);background:transparent;color:var(--ink-2);font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer}
.wiassign:hover{background:var(--bg-inset);border-color:var(--border);box-shadow:none;transform:none}
.wiassign.un{color:var(--ink-3);border:1px dashed var(--border-strong)}
.wiassign.un:hover{color:var(--ink);border-color:var(--ink-3)}
.wiassignname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wiassign svg{flex:none;opacity:.55}
.wiassignmenu{min-width:190px;max-height:min(280px,calc(100dvh - 24px));overflow:auto;overscroll-behavior:contain}
.wiassignmenu .selopt{gap:8px}
.wiassignopt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wiparent{display:flex;align-items:center;gap:4px;margin:-4px 0 8px;color:var(--ink-3);font-size:11px}.wiparent svg{flex:none}.blorganize[aria-busy="true"]{opacity:.7;cursor:wait}
.bltabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 24px;background:var(--bg-elevated)}.bltab{border:0;border-radius:0;background:transparent;color:var(--ink-2);padding:13px 14px;font-size:13px;box-shadow:none}.bltab:hover{background:var(--bg-inset);box-shadow:none;transform:none}.bltab.on{color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
.bllist{width:100%;min-width:1060px;table-layout:fixed;border-collapse:collapse;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden}.bllist th,.bllist td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}.bllist th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);cursor:pointer;user-select:none}.bllist th[data-key="type"]{width:105px}.bllist th[data-key="state"]{width:130px}.bllist th[data-key="verification"]{width:145px}.bllist th[data-key="owner"]{width:140px}.bllist th[data-key="priority"]{width:100px}.bllist th[data-key="estimate"]{width:170px}.bllist th.dragging{opacity:.35}.bllist th.dragover{box-shadow:inset 3px 0 var(--accent)}.bllist tr[data-depth="1"] .blcol-work{padding-left:34px}.bllist tr[data-depth="2"] .blcol-work{padding-left:56px}.bllist tbody tr{transition:background-color .12s,box-shadow .12s}.bllist tbody tr:hover{background:color-mix(in srgb,var(--bg-inset) 72%,var(--accent));box-shadow:inset 3px 0 var(--accent)}.bllist tbody tr.blparentrow{background:color-mix(in srgb,var(--bg-elevated) 90%,var(--accent));box-shadow:inset 4px 0 var(--accent),inset 0 -1px var(--border-strong);font-weight:550}.bllist tbody tr.blparentrow:hover{background:color-mix(in srgb,var(--bg-inset) 66%,var(--accent));box-shadow:inset 4px 0 var(--accent),inset 0 -1px var(--border-strong)}.blcell{width:100%;min-width:0;height:30px;padding:4px 6px;border:1px solid transparent;background:transparent;font:inherit;color:inherit}.blcell:hover{border-color:var(--border)}.blcell:focus{background:var(--bg-elevated)}.blvalue{display:flex;align-items:center;gap:7px;width:100%;min-width:0;padding:5px 7px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--ink);font:inherit;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:none}.blvalue:hover,.blvalue:focus{background:var(--bg-inset);border-color:var(--border);box-shadow:none;transform:none;outline:none}.blvalue:hover:after{content:"✎";margin-left:auto;color:var(--ink-3);font-size:10px}.blstatevalue:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--state-color);flex:none}.blstatevalue:after{content:"";margin-left:auto;width:10px;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") center/contain no-repeat;flex:none}.blstatevalue:hover:after{content:"";}.blworkcell{display:flex;align-items:center;gap:7px;min-width:0}.blworktitle{display:-webkit-box;min-width:0;flex:1;padding:2px 4px;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:550;line-height:1.35;text-align:left;white-space:normal;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;cursor:pointer;box-shadow:none}.blworktitle:hover,.blworktitle:focus{text-decoration:underline;box-shadow:none;transform:none;outline:1px solid var(--border)}.blnum{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}.blchildcount{flex:none;padding:2px 6px;border-radius:999px;background:var(--bg-inset);color:var(--ink-3);font-size:10.5px;font-weight:650;white-space:nowrap}.blstatecell{min-width:0}.blverify{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 8px;border-radius:999px;background:#fff4cc;color:#795500;font-size:10px;font-weight:700;line-height:1.3;white-space:nowrap}.blverify.ok{background:#dcfce7;color:#087443}.blverify.failed{background:#fee4e2;color:#b42318}.blreadonly{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}.blestimate{display:grid;gap:1px;font-size:11px;line-height:1.25}.blestimate strong{font-size:12px;color:var(--ink)}.blheadwork{display:flex;align-items:center;gap:6px}.blheadwork .bltreeall{margin-left:auto;width:24px;height:24px;padding:0;border:0;background:transparent;color:var(--ink-3);box-shadow:none}.blheadwork .bltreeall:hover{background:var(--bg-inset);box-shadow:none;transform:none}.blboardhead{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden}.blboardhead .blcolhead{background:var(--bg-elevated);padding:11px 14px}.blcollapse{width:28px;height:28px;padding:0;background:transparent;border:0;color:var(--ink-3)}.blcollapse:hover{background:var(--bg-inset);box-shadow:none;transform:none}.blswim.collapsed .blswimhead{border-bottom:0}.blswim.collapsed .blswimgrid{display:none}
.blmetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.blmetric{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-l);padding:18px}.blmetric strong{display:block;font-size:26px;margin-top:8px}.blbar{height:8px;border-radius:8px;background:var(--bg-inset);overflow:hidden;margin-top:10px}.blbar span{display:block;height:100%;background:var(--accent)}
@media (prefers-reduced-motion:reduce){.wirundot,.blspin{animation:none}}.resdot{width:10px;height:10px;border-radius:50%;flex:none}.resdotun{background:var(--border-strong)}
.blcol.dragover{border-color:var(--accent);background:var(--accent-soft)}.wicard.dragsrc{opacity:.45}
.blempty{display:none;place-items:center;min-height:64px;margin-top:6px;border:1.5px dashed var(--border-strong);border-radius:var(--r-m);color:var(--ink-3);font-size:12px}.board.dragging .blempty{display:grid}.board.dragging .blcol{transition:background .1s,border-color .1s}.board{display:flex;flex-direction:column;gap:14px;min-width:100%}.blswim{border:1px solid var(--border);border-radius:var(--r-l);background:var(--bg-elevated);overflow:hidden}.blswimhead{min-height:52px;padding:9px 12px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border);background:var(--bg-elevated)}.blswimtitle{font-size:13.5px;font-weight:700;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.blswimnum{font-size:11.5px;color:var(--ink-3)}.blswimactions{display:flex;gap:6px;margin-left:auto}.blswimactions button{height:30px;padding:0 9px;font-size:11.5px}.blswimgrid{display:grid;gap:1px;align-items:stretch;background:var(--border)}.blcol{background:var(--bg-inset);padding:10px;min-height:118px}.blcolhead{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}.blcount{margin-left:auto;background:var(--bg-elevated);border-radius:var(--r-full);min-width:22px;height:22px;display:grid;place-items:center}.wicard{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-m);padding:12px;margin-bottom:8px;cursor:pointer;box-shadow:var(--sh-1);transition:.14s ease-out}.wicard:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}.witype{font-size:10.5px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}.witype.scenario{color:#8b5cf6}.witype.feature{color:#2f6fed}.witype.task{color:#1a9c6b}.witype.bug{color:#d64545}.wititle{font-size:13.5px;font-weight:600;line-height:1.4;margin:7px 0 10px}.wifoot{display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:11.5px}.wiavatar{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:white;font-size:10px;font-weight:700}.widrawer{width:min(680px,100vw);padding:0}.wihero{padding:20px 24px;border-bottom:1px solid var(--border)}.wihero input{font-size:20px;font-weight:650;border:0;padding:0;height:auto;width:100%;background:transparent}.wihero input:focus{box-shadow:none}.wibody{padding:20px 24px;overflow:auto}.wigrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wilabel{font-size:11.5px;color:var(--ink-3);font-weight:650;margin-bottom:6px}.wifield{margin-bottom:18px}.wifield textarea{width:100%;min-height:110px}.wicomment{padding:12px 0;border-bottom:1px solid var(--border)}.wicommenthead{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:650}.wicommentbody{font-size:13.5px;line-height:1.55;margin:6px 0 0;white-space:pre-wrap}.reslist{display:grid;gap:8px}.resrow{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:var(--r-m)}
/* Taskboard matrix: shared spacing and grid tokens keep every lane aligned. */
.board{--board-parent-width:320px;--board-col-width:230px;--board-space-1:5px;--board-space-2:9px;--board-space-3:12px;gap:0;border:1px solid var(--border);background:var(--border)}
.blboardhead{grid-template-columns:var(--board-parent-width) repeat(var(--board-cols),minmax(var(--board-col-width),1fr))!important;border:0;border-bottom:1px solid var(--border);border-radius:0;position:sticky;top:0;z-index:3}
.blboardhead .blcolhead{padding:10px 12px;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600}
.blsidehead{display:flex;align-items:center;gap:6px;background:var(--bg-elevated);padding:10px 8px;font:inherit;font-size:12px;color:var(--ink-2);border:0;border-radius:0;text-align:left;box-shadow:none}.blsidehead:hover{background:var(--bg-inset);box-shadow:none;transform:none}
.blswim{display:grid;grid-template-columns:var(--board-parent-width) minmax(0,1fr);align-items:stretch;gap:1px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--border);overflow:visible}
.blswim:last-child{border-bottom:0}.blswimside{min-height:76px;padding:var(--board-space-2);background:var(--bg-elevated);display:flex;align-items:flex-start;gap:var(--board-space-1);overflow:hidden}.blswimcard{min-width:0;flex:1;border-left:3px solid var(--type-color,var(--accent));padding:7px;display:flex;flex-direction:column;align-self:stretch}.blswimtitle{display:-webkit-box;font-size:12.5px;font-weight:600;line-height:1.35;white-space:normal;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}.blswimnum{font-size:11px;margin-right:4px}.blswimmeta{display:flex;align-items:center;gap:var(--board-space-1);margin-top:auto;padding-top:var(--board-space-2);color:var(--ink-3);font-size:11px;white-space:nowrap}.blswimactions{margin:8px 0 0;gap:4px}.blswimactions button{height:25px;padding:0 7px;font-size:10.5px}.blcollapse{width:24px;height:24px}.blswim.nested .blswimside{padding-left:28px;background:color-mix(in srgb,var(--bg-elevated) 94%,var(--accent))}.blswim.nested .blswimcard{border-left-width:2px}
.blswimgrid{grid-template-columns:repeat(var(--board-cols),minmax(var(--board-col-width),1fr))!important;align-self:stretch}.blcol{padding:var(--board-space-2);min-height:76px;min-width:0}.blcolhead{padding:0;text-transform:none;letter-spacing:0;font-size:12.5px}.blcount{margin-left:auto;background:transparent;border-radius:0;min-width:auto;height:auto;display:block;color:var(--ink-3);font-size:11px;font-weight:500}
.blswim.collapsed .blswimgrid{display:grid}.blswim.collapsed .blswimside{min-height:38px;padding:6px 8px;align-items:center}.blswim.collapsed .blswimcard{padding:2px 7px;align-self:auto}.blswim.collapsed .blswimtitle{white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}.blswim.collapsed .blswimmeta{display:none}.blswim.collapsed .blcol{min-height:38px;padding:4px 7px}.blswim.collapsed .wicard,.blswim.collapsed .blempty{display:none}.blswim.collapsed .bladdbtn{margin:0 0 0 auto;height:28px}.blswim.collapsed .bladdtypes,.blswim.collapsed .bladdform{margin:0}.blswim.collapsed .bladdinput{min-height:28px;height:28px;padding:3px 7px}.blswim.collapsed .bladdhint{display:none}
.wicard{border:1px solid var(--border-strong);border-left:3px solid var(--type-color);background:color-mix(in srgb,var(--bg-elevated) 88%,var(--state-color));border-radius:0;padding:var(--board-space-2) 10px;box-shadow:none;min-width:0}.wicard:hover{box-shadow:var(--sh-1);transform:none}.witype{display:inline-flex;color:var(--type-color);font-size:10px}.witype svg{display:block}.wititle{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;font-weight:500;line-height:1.35;margin:5px 0 7px;min-width:0}.wititletext{display:-webkit-box;min-width:0;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}.witypeicon{color:var(--type-color);flex:none;margin-top:1px}.wicontrolrow,.wimetadata{display:flex;align-items:center;gap:var(--board-space-1);min-width:0}.wicontrolrow{margin-top:var(--board-space-2)}.wimetadata{margin-top:var(--board-space-2);color:var(--ink-3);font-size:11px;flex-wrap:wrap}.wimetadata>*{white-space:nowrap}.wistate{height:26px;font-size:11px}
.modal.widrawer{width:min(920px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);min-width:min(560px,calc(100vw - 32px));min-height:420px;resize:both;overflow:hidden;position:fixed}.modal.widrawer .mhead{cursor:move;user-select:none}.modal.widrawer .mbody{padding:0;min-height:0}.wisavestatus{font-size:11.5px;color:var(--ink-3);margin-right:auto}.wisavestatus.err{color:var(--err)}
.wiattachment{display:inline-flex;align-items:center;gap:7px;max-width:220px}.wiattachment img{width:30px;height:30px;object-fit:cover;border-radius:4px;border:1px solid var(--border)}.wiattachment span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal.wiresources{width:min(900px,calc(100vw - 32px));max-width:none}.wiresources .mbody{min-height:0}.wiresourcegrid{display:grid;grid-template-columns:32px minmax(210px,1fr) minmax(130px,170px) minmax(150px,190px);gap:10px;align-items:start;padding:12px;border:1px solid var(--border);border-radius:var(--r-m)}.wiresourcecopy{display:grid;gap:8px}.wiresourcecopy textarea{min-height:110px;resize:vertical}
@media(max-width:700px){.blmain{padding:16px}.wigrid{grid-template-columns:1fr}.bltoolbar{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:760px){.wiresourcegrid{grid-template-columns:32px 1fr}.wiresourcegrid>select{grid-column:2}.modal.widrawer{min-width:calc(100vw - 16px);width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}}
/* Board UX v3: one compact select language, inline status/run affordances, and
   a desktop work-item dialog that follows the Azure DevOps information model. */
.backlog select,.boardselect{box-sizing:border-box;height:32px;min-width:0;max-width:220px;padding:0 28px 0 9px;border:1px solid var(--border);border-radius:4px;background-color:var(--bg-elevated);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:10px 6px;color:var(--ink);font:500 12px/1.2 inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-appearance:none;appearance:none}
.boardselect.state-select{padding-left:24px;background-image:radial-gradient(circle,var(--state-color) 0 4px,transparent 4.5px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");background-position:9px center,right 9px center;background-size:9px 9px,10px 6px}
.boardselect:hover,.boardselect:focus{border-color:var(--border-strong);outline:none;box-shadow:0 0 0 2px var(--accent-soft)}
.boardselect:disabled{opacity:.58;cursor:not-allowed}.blctlitem .boardselect{width:min(180px,28vw)}.blcell.boardselect{width:100%;max-width:180px}.wistate.boardselect{width:126px;min-width:126px;max-width:126px;height:26px;padding-right:30px;font-size:11px;flex:none}.wiest{white-space:nowrap;flex:none}.wifoot{gap:4px}
.wibadges{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:5px 0}.wibadge{display:inline-flex;align-items:center;gap:4px;min-height:20px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap}.wibadge.tester{color:#6d28d9;background:#ede9fe}.wibadge.tested{color:#087443;background:#dcfce7}.wibadge.failed{color:#b42318;background:#fee4e2}
.wirunbtn{display:inline-grid;place-items:center;width:27px;height:27px;min-width:27px;padding:0;border:1px solid var(--border);border-radius:4px;background:var(--bg-elevated);color:var(--accent);box-shadow:none}.wirunbtn:hover:not(:disabled){background:var(--accent-soft);box-shadow:none;transform:none}.wirunbtn:disabled{color:var(--ink-3);opacity:.48;cursor:not-allowed}.witoprow{display:flex;align-items:flex-start;gap:var(--board-space-1);min-height:22px}.wiparentcontrols{display:flex;align-items:center;gap:var(--board-space-1);margin-top:var(--board-space-2)}.wiparentcontrols .boardselect{height:27px;width:126px;min-width:126px;max-width:126px;font-size:11px}
.bltreebtn{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:transparent;color:var(--ink-3);box-shadow:none;flex:none}.bltreebtn:hover{background:var(--bg-inset);box-shadow:none;transform:none}.bltreebtn svg{transition:transform .12s}.bltreebtn.closed svg{transform:rotate(-90deg)}.bltreechild .blcol-work{box-shadow:inset 3px 0 var(--border)}
.modal.widrawer{width:min(1180px,96vw);min-width:min(900px,96vw);height:min(820px,94dvh);max-height:94dvh;resize:none}.modal.widrawer .mhead{min-height:52px;padding:10px 16px}.modal.widrawer .mbody{flex:1}.widetailbody{height:100%;display:flex;flex-direction:column}.wihero2{padding:14px 20px;border-bottom:1px solid var(--border);background:var(--bg-elevated)}.wiheadline{display:grid;grid-template-columns:auto auto minmax(220px,1fr) auto;align-items:center;gap:9px}.wiheadline .witypeicon{width:24px;height:24px;display:grid;place-items:center}.wiheadline .blnum{font-size:13px}.wiheadline input{height:36px;border-color:transparent;background:transparent;font-size:19px;font-weight:650}.wiheadline input:focus{border-color:var(--accent)}.wiherometa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.wistatepill{display:flex;align-items:center}.wistatepill .boardselect{max-width:145px}.wireason{font-size:12px;color:var(--ink-3)}.wisecondary{display:flex;gap:5px;margin-left:auto}.wisecondary button{height:29px;padding:0 9px;font-size:11.5px}
.wibody2{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;padding:18px 20px;overflow:auto;min-height:0}.wileft{min-width:0}.wirail{display:grid;align-content:start;gap:12px}.wicardrail{border:1px solid var(--border);background:var(--bg-elevated);padding:14px;border-radius:3px}.wicardrail h3,.wisection h3{font-size:14px;margin:0 0 12px}.wicardrail .wifield{margin-bottom:12px}.wicardrail .wifield:last-child{margin-bottom:0}.wicardrail input,.wicardrail select{width:100%;max-width:none}.wisection{margin-bottom:22px;border-bottom:1px solid var(--border);padding-bottom:18px}.wihelp{font-size:11px;color:var(--ink-3);margin-top:5px}.wiautogrow{min-height:150px;resize:none;overflow:hidden}.wisubmitter{display:grid;grid-template-columns:32px 1fr;gap:9px;align-items:center}.wicomment{display:grid;grid-template-columns:30px 1fr;gap:9px}.wicommenthead,.wicommentbody{grid-column:2}.wicomment .wiavatar{grid-row:1/3;grid-column:1}.wicomposer{border:1px solid var(--border);padding:10px;background:var(--bg-elevated)}.wicomposer textarea{border:0;box-shadow:none;resize:vertical}.wicomposerhint{font-size:11px;color:var(--ink-3)}.wiattachments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.wiattachment{max-width:none!important}.wiattachment img{width:48px;height:48px}.witags{display:flex;gap:5px;flex-wrap:wrap}.witags input{min-width:0}.widetailsave{display:flex;align-items:center;gap:7px}.widetailsave button{height:32px}
/* Comments render as Markdown: the block elements carry their own spacing, so
   pre-wrap would add the source newlines on top of it. Code blocks keep it. */
.wicommentbody.md{white-space:normal}
.wicommentbody.md pre{white-space:pre-wrap;overflow-x:auto}
.wicommentbody.md :first-child{margin-top:0}
@media(max-width:719px){.modal.widrawer{width:calc(100vw - 12px);min-width:0;height:calc(100dvh - 12px);max-height:none}.wiheadline{grid-template-columns:auto auto minmax(0,1fr)}.wiheadline .widetailsave{grid-column:1/-1;justify-content:flex-end}.wibody2{grid-template-columns:1fr;padding:14px}.wirail{grid-row:auto}.wisecondary{margin-left:0}.blctlitem .boardselect{width:min(160px,52vw)}}
@media(max-width:1100px){.backlog{overflow-x:auto}.board{--board-parent-width:290px;--board-col-width:220px}.wimetadata{display:grid;grid-template-columns:1fr auto}.wimetadata .wiassign{grid-column:1/-1;justify-self:start}}
@media(max-width:760px){.board{--board-parent-width:270px;--board-col-width:215px}.blswimside{padding:7px}.blswim.nested .blswimside{padding-left:20px}.wibadge span{max-width:90px;overflow:hidden;text-overflow:ellipsis}}
/* Compact, scannable expanded lanes. State color belongs to the state control;
   cards stay neutral so type, test result, and workflow do not compete. */
.board{--board-parent-width:340px;--board-space-1:4px;--board-space-2:6px}
.blboardhead{z-index:5}.blboardhead>.blsidehead,.blswimside{position:sticky;left:0;z-index:2}.blboardhead>.blsidehead{z-index:6}
.blboardhead .blcolhead{color:var(--ink-2)}.blcount,.blswimmeta,.wimetadata,.wiest,.wiassign{color:var(--ink-2)}
.blswimside{min-height:54px;padding:6px 8px;cursor:pointer}.blswimside:hover{background:color-mix(in srgb,var(--bg-elevated) 94%,var(--accent))}
.blswimside:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.blswimcard{align-self:flex-start;padding:4px 6px;gap:4px}.blswimtitle{display:flex;align-items:flex-start;gap:4px;min-height:34px;line-height:1.35}
.blswimtitle .blparenttitle{display:-webkit-box;min-width:0;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.blswimsummary{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.blswimmeta{margin:0;padding:0}.blswimcard>.wibadges{margin:0}
.wiparentcontrols{margin-top:2px}.blcollapse{width:30px;height:30px;min-width:30px;border-radius:4px}
.blcollapse:focus-visible,.wicard:focus-visible,.wirunbtn:focus-visible,.wiassign:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.blswimgrid{align-self:stretch}.blcol{min-height:54px;padding:6px}.blcol>.wicard:last-of-type{margin-bottom:0}
.wicard{min-height:132px;margin-bottom:5px;padding:7px 8px;background:var(--bg-elevated);border-left-color:var(--border-strong);display:flex;flex-direction:column}
.wicard:hover,.wicard:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--bg-elevated) 96%,var(--accent))}
.witoprow{min-height:20px}.wititle{justify-content:flex-start;text-align:left;margin:3px 0 5px;min-height:34px}
.wititletext{-webkit-line-clamp:2}.wibadges{margin:2px 0;min-height:20px}.wicontrolrow{margin-top:auto}.wimetadata{margin-top:5px;flex-wrap:nowrap}
.wimetadata .wiassign{margin-left:auto;min-width:0}.wimetadata .wiassignname{max-width:76px}
.blempty{display:grid;min-height:40px;margin:0;border-color:color-mix(in srgb,var(--border-strong) 70%,transparent);color:var(--ink-2);opacity:.72}
.blcol:has(.wicard)>.blempty{display:none}.board.dragging .blempty{display:grid;opacity:1}.blcol.dragover .blempty{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.wirunbtn:not(:disabled){border-color:var(--accent);color:var(--accent)}.wirunbtn:disabled{border-style:dashed;opacity:.62}
@media(max-width:1100px){.board{--board-parent-width:310px}.wimetadata{display:flex}.wimetadata .wiassign{margin-left:0;flex-basis:100%}}
@media(max-width:760px){.board{--board-parent-width:285px}.wicard{min-height:138px}.wimetadata{flex-wrap:wrap}.wimetadata .wiassign{flex-basis:auto;margin-left:0}}
/* On phones, preserve the board's horizontal workflow while keeping one useful
   card visible beside the sticky parent. The backlog becomes stacked cards so
   reading an item never requires panning across a desktop-width table. */
@media(max-width:600px){
  .backlog{overflow-x:hidden}.blmain{padding:12px 10px}.bltoolbar{gap:10px;margin-bottom:14px}.bltoolbar h1{font-size:22px}.bltitle{width:100%}.blctl{width:100%;gap:8px}.blctlitem{flex:1 1 145px}.blctlitem .boardselect{width:100%;max-width:none}.bltabs{padding:0 8px;overflow-x:auto;scrollbar-width:none}.bltabs::-webkit-scrollbar{display:none}.bltab{padding:12px 11px;white-space:nowrap}
  .board{--board-parent-width:132px;--board-col-width:min(248px,calc(100vw - 166px))}.blboardhead .blcolhead{padding:9px 8px}.blsidehead{padding:9px 6px}.blswimside{padding:6px 5px}.blswim.nested .blswimside{padding-left:10px}.blswimcard{padding:4px}.blswimtitle{font-size:12px}.blswimnum{display:block;margin:0}.blswimsummary,.blswimactions{align-items:flex-start}.blswimactions{flex-wrap:wrap}.blswimactions button{padding:0 5px}.wicard{min-height:0;padding:9px}.wititle{font-size:14px;line-height:1.4;min-height:0;margin:5px 0 8px}.wititletext{-webkit-line-clamp:4}.wimetadata{font-size:11.5px}.wimetadata .wiassignname{max-width:105px}.wistate.boardselect{width:120px;min-width:120px;max-width:120px}.bladdbtn{opacity:1}
  .blbackloghead{justify-content:stretch}.blgrouptoggle{width:100%}.bllist{display:block;width:100%;min-width:0;border:0;background:transparent}.bllist thead{display:none}.bllist tbody{display:grid;gap:10px}.bllist tr,.bllist tbody tr.blparentrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--bg-elevated);border:1px solid var(--border);border-left:4px solid var(--type-color,var(--border-strong));border-radius:var(--r-m);box-shadow:none;overflow:hidden}.bllist tbody tr:hover,.bllist tbody tr.blparentrow:hover{background:var(--bg-elevated);box-shadow:none}.bllist td{display:block;min-width:0;padding:8px 10px;border-bottom:1px solid var(--border)}.bllist td::before{content:attr(data-label);display:block;margin-bottom:3px;color:var(--ink-3);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.bllist .blcol-work{grid-column:1/-1;padding:11px 10px!important}.bllist .blcol-work::before{display:none}.bllist tr[data-depth] .blcol-work{padding-left:10px}.blworkcell{align-items:flex-start}.blworktitle{-webkit-line-clamp:4;font-size:14px;line-height:1.4}.blchildcount{display:none}.bllist .blcell.boardselect,.bllist .blvalue{max-width:none}.bllist td:nth-last-child(-n+2){border-bottom:0}.blestimate{font-size:11.5px}
}
/* Work-item detail: compact sticky chrome, explicit autosave, and balanced content. */
.modal.widrawer .mhead{position:sticky;top:0;z-index:8;background:var(--bg-elevated)}
.modal.widrawer .mhead>.icon{width:40px;height:40px;display:grid;place-items:center;border-radius:6px;color:var(--ink-2)}
.modal.widrawer .mhead>.icon:hover{background:var(--bg-inset);color:var(--ink)}
.modal.widrawer .mhead>.icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wihero2{position:sticky;top:0;z-index:6;padding:10px 20px;box-shadow:0 1px 0 var(--border)}
.wiheadline{grid-template-columns:auto auto minmax(180px,1fr) auto;gap:8px}
.wiheadline input{min-width:0;height:34px;font-size:18px}
.wiherometa{margin-top:7px;gap:8px}
.wiactions{display:flex;align-items:center;gap:6px;margin-left:auto}
.wiactions .secondary{height:32px;padding:0 10px;background:transparent}
.wiactions .iconbtn{width:36px;height:36px}
.wisavestatus{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--ink-2);font-weight:600}
.wisavestatus:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.wisavestatus.saving:before{background:var(--warn);animation:pulse 1s infinite}
.wisavestatus.unsaved:before{background:var(--warn)}
.wisavestatus.err:before{background:var(--err)}
.wiverification{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:#fff4cc;color:#795500;font-size:11px;font-weight:700}
.wiverification.ok{background:#dcfce7;color:#087443}.wiverification.failed{background:#fee4e2;color:#b42318}
.wiworkflowarrow{color:var(--ink-3);font-size:12px}
.wibody2{grid-template-columns:minmax(0,1.45fr) minmax(290px,.75fr);gap:22px;padding:18px 26px 22px 20px;scrollbar-gutter:stable;overflow-y:auto}
.wirail{gap:14px}.wicardrail{height:auto;padding:14px;border-radius:6px}
.wisection{margin:0;padding:0 0 20px}.wisection+.wisection{padding-top:20px}.wileft>.wisection:last-child{border-bottom:0}
.wisection h3,.wicardrail h3{margin:0 0 10px}
/* "Commits" sub-heading inside the Development card. */
.wicommitshead{margin:12px 0 6px;font-size:11px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
.wisection textarea{width:100%;min-height:140px;resize:vertical;background:var(--bg-inset);border-color:transparent}
.wisection textarea:hover{border-color:var(--border)}.wisection textarea:focus{background:var(--bg-elevated);border-color:var(--accent)}
.wiautogrow{overflow:auto!important;resize:vertical!important}
.wihelp,.wicomposerhint,.wicardrail .muted,.wisubmitter .muted,.wicomment .muted{color:var(--ink-2)!important}
.wicomment{grid-template-columns:30px minmax(0,1fr);padding:12px 0}.wicommenthead,.wicommentbody{grid-column:2;margin-left:0}
.wiqueuewhy{margin-top:7px;color:var(--ink-2);font-size:11.5px;line-height:1.4}
.wiestnote{color:var(--ink-2)!important;font-size:11.5px;margin-top:5px;line-height:1.4}
.witageditor{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-height:38px;padding:5px;border:1px solid var(--border);border-radius:4px}
.witageditor input{flex:1;min-width:90px;border:0;padding:3px;box-shadow:none}
.witag{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:var(--accent-soft);color:var(--ink);font-size:11.5px}
.witag button{border:0;background:transparent;color:var(--ink-2);padding:0;width:16px;height:16px;box-shadow:none}
.wiparentview{display:flex;align-items:center;gap:8px;justify-content:space-between;color:var(--ink-2);font-size:12.5px}
.wiparentview button,.witemplate{height:28px;padding:0 8px;font-size:11px}
.wicriteriahead{display:flex;align-items:center;gap:8px}.wicriteriahead h3{margin-right:auto}
.wirelatedlist{display:grid;gap:8px;margin-bottom:10px}
.wirelatedempty{font-size:12px;line-height:1.5;color:var(--ink-2)}
.wirelatedrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;min-height:0;padding:9px 10px;border:1px solid var(--border);border-radius:5px;background:var(--bg-inset)}
.wirelatedcopy{min-width:0;display:grid;gap:3px}
.wirelatedmeta{display:flex;align-items:center;gap:6px;min-width:0;color:var(--ink-2);font-size:10.5px;font-weight:700;line-height:1.35;text-transform:uppercase;letter-spacing:.035em}
.wirelatedid{color:var(--ink);white-space:nowrap}
.wirelatedrelationship{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wirelatedtitle{display:-webkit-box;min-width:0;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.42}
.wirelatedactions{display:flex;align-items:center;gap:2px}
.wirelatedactions button,.wirelatedactions a{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--ink-2);box-shadow:none}
.wirelatedactions button:hover,.wirelatedactions a:hover{background:var(--bg-elevated);color:var(--ink);box-shadow:none;transform:none}
.wirelatedactions button:focus-visible,.wirelatedactions a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wifollow{display:inline-flex!important;align-items:center;gap:6px!important;border:1px solid var(--border-strong)!important;background:var(--bg-elevated)!important;color:var(--ink)!important;font-weight:700}
.wifollow:hover{border-color:var(--accent)!important;background:var(--accent-soft)!important;color:var(--accent)!important}
.wifollow[aria-pressed="true"]{border-color:var(--accent)!important;background:var(--accent)!important;color:#fff!important}
.wifollow[aria-pressed="true"]:hover{filter:brightness(.94)}
.wirail{position:sticky;top:10px;align-self:start}
.wicomposer textarea{min-height:44px!important;height:44px;resize:none!important;transition:height .12s ease}
.wicomposer:focus-within textarea,.wicomposer textarea:not(:placeholder-shown){height:88px}
.wiparentview button{border:0;background:transparent;color:var(--accent);font-weight:650;box-shadow:none}
.wiparentview button:hover{background:var(--accent-soft);box-shadow:none;transform:none}
.wibody2{padding-bottom:34px}
@media(max-width:900px){.modal.widrawer{min-width:0}.wibody2{grid-template-columns:1fr}.wirail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.wirail{position:static}}
@media(max-width:640px){.wihero2{padding:8px 12px}.wiheadline{grid-template-columns:auto auto minmax(0,1fr)}.wiheadline .wiactions{grid-column:1/-1;width:100%;justify-content:flex-end}.wiherometa{align-items:flex-start}.wiactions{margin-left:0}.wibody2{padding:14px 18px 26px 12px}.wirail{grid-template-columns:1fr}.wistatepill .boardselect{max-width:125px}.wirelatedrow{padding:8px}}

/* ---- Customer requests: help disc, rows, timeline, inbox ---- */
.helpdisc{position:fixed;right:18px;bottom:18px;z-index:60;height:36px;min-width:36px;padding:0 10px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--bg-elevated,var(--bg));color:var(--ink-2);display:inline-flex;align-items:center;gap:0;box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer;opacity:.92;transition:opacity .2s,gap .15s,transform .15s}
.helpdisc .helplabel{max-width:0;overflow:hidden;white-space:nowrap;font-size:12.5px;font-weight:600;transition:max-width .18s ease,margin .18s}
.helpdisc:hover,.helpdisc:focus-visible{opacity:1;color:var(--ink);transform:translateY(-1px)}
.helpdisc:hover .helplabel,.helpdisc:focus-visible .helplabel{max-width:180px;margin-left:8px}
.helpdisc.quiet{opacity:.42}
.helpdisc.quiet:hover{opacity:1}
.helpdot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-elevated,var(--bg))}
@media(max-width:640px){.helpdisc{right:12px;bottom:76px}}
.helprow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--line);cursor:pointer;border-radius:6px}
.helprow:first-child{border-top:0}
.helprow:hover,.helprow:focus-visible{background:var(--accent-soft);outline:none}
.helprow.unread .helprowmain>div:first-child span:first-child{color:var(--ink)}
.helprowmain{flex:1;min-width:0}
.helptl{margin-top:8px}
.helptlrow{display:grid;grid-template-columns:64px 10px minmax(0,1fr);gap:8px;align-items:start;padding:5px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5}
.helptlrow:first-child{border-top:0}
.helptlwhen{font-size:11px;white-space:nowrap;padding-top:2px}
.helptlmark{width:8px;height:8px;border-radius:50%;margin-top:6px}
.helptltext{white-space:pre-wrap;overflow-wrap:anywhere}
.helpinboxrow{display:flex;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid var(--line);cursor:pointer}
.helpinboxrow:hover{background:var(--accent-soft)}
.helpstripe{width:4px;align-self:stretch;border-radius:2px;flex:none}