/* The finish. Loaded after app.css, this is the product's look in both
   modes: one quiet page, one big headline, one composer, colour only where
   it means something. It overrides by selector, never by markup, so the
   application underneath is unchanged and a rule here is the whole
   difference. */

/* -- the page -------------------------------------------------------------- */
.app { background: var(--paper); }
.sidebar { background: var(--paper); border-right: 1px solid var(--hairline); }
.main, .panel { background: var(--paper); }
.panel { border-left: 1px solid var(--hairline); }
.resizer { background: transparent; }
.resizer:hover { background: var(--hairline-strong); }
.topbar { min-height: 52px; padding: 12px 16px; }
.topbar .title { font-weight: 500; font-size: 14px; color: var(--muted); }

/* the sidebar: names, no boxes */
.nav-item { padding: 8px 10px; border-radius: 10px; font-size: 14px; color: var(--muted); }
.nav-item:hover { background: var(--press); color: var(--ink); }
.nav-item.active { background: var(--press); color: var(--ink); font-weight: 500; }
.session-row { font-size: 13.5px; padding: 6px 10px 6px 30px; border-radius: 10px; }
.session-row .dot { width: 7px; height: 7px; box-shadow: none; }
.session-row .dot.running { background: var(--signal); animation: pulse 1.4s ease-in-out infinite; }
.icon-btn { border-radius: 10px; color: var(--muted); }
.icon-btn:hover { background: var(--press); color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 999px; border: 3px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

/* -- the first screen ------------------------------------------------------ */
.empty-chat { gap: 26px; padding-bottom: 8vh; }
.greeting { text-align: center; margin-bottom: 2px; }
.greeting h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2;
  letter-spacing: -0.014em; color: var(--ink); font-optical-sizing: auto; }
.composer-wrap.centered { max-width: 720px; }

/* -- the composer ---------------------------------------------------------- */
.composer { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow-md); transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: var(--hairline-strong); box-shadow: var(--shadow-md), 0 0 0 4px rgba(0,0,0,.035); }
:root[data-theme="dark"] .composer:focus-within { box-shadow: var(--shadow-md), 0 0 0 4px rgba(255,255,255,.05); }
.composer textarea { padding: 18px 20px 8px; font-size: 16px; line-height: 1.55; min-height: 64px; color: var(--ink); }
.composer textarea::placeholder { color: var(--faint); }
.composer-bar { padding: 6px 10px 10px; gap: 6px; }
.composer-bar .sel { padding: 6px 10px; border-radius: 10px; font-size: 13px; color: var(--muted); border: 1px solid transparent; }
.composer-bar .sel:hover { background: var(--press); color: var(--ink); }
.composer-bar .sel .i { color: var(--faint); }
.composer-bar .icon-btn { width: 32px; height: 32px; border-radius: 50%; }
.composer-bar .send { width: 34px; height: 34px; background: var(--send); color: var(--send-ink); box-shadow: var(--shadow-sm);
  transition: transform .12s, opacity .15s; }
.composer-bar .send:hover:not(:disabled) { transform: translateY(-1px); }
.composer-bar .send:disabled { opacity: .3; }
.composer-bar .send.stop { background: var(--danger); color: #fff; }
.composer-wrap { padding: 8px 24px 20px; }
/* the row above the composer (repository, branch, machine) on a new chat */
.composer-wrap .row .sel { border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); padding: 5px 11px; font-size: 12.5px; }

/* -- the conversation ------------------------------------------------------ */
.msg-user { background: var(--surface-muted); border: none; border-radius: 18px 18px 6px 18px; padding: 12px 16px;
  font-size: 15px; line-height: 1.55; box-shadow: none; }
.turn { margin: 0 0 34px; }
.turn-foot { color: var(--faint); }
.says { font-family: var(--serif); font-size: 16px; line-height: 1.7; color: var(--ink); margin: 14px 0 14px 10px;
  padding-left: 24px; border-left: 2px solid var(--hairline-strong); }
.says code { background: var(--surface-muted); border-radius: 6px; }

/* -- the rail --------------------------------------------------------------
   A turn is drawn as one spine down the left with a mark for every action.
   Each mark carries the colour of what it did - reading, writing, running,
   git, a service, the browser, a plan, the finish - so the column reads as
   "looked, wrote, ran, checked" before a word of it is. While the turn is
   under way a warm light travels down the spine and the last mark turns. */
.flow { --rail-x: 11px; }
.flow::before { left: var(--rail-x); width: 2px; margin-left: -1px; top: 10px; bottom: 10px; border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--hairline-strong) 22px, var(--hairline-strong) calc(100% - 22px), transparent); }
.flow.running::after { content: ''; position: absolute; left: var(--rail-x); margin-left: -1px; width: 2px; top: 10px; bottom: 10px; border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--signal) 45%, var(--signal) 55%, transparent) no-repeat 0 -180px / 100% 180px;
  animation: rail-run 2.4s linear infinite; pointer-events: none; }
@keyframes rail-run { from { background-position-y: -180px; } to { background-position-y: calc(100% + 180px); } }

.act { --act: var(--faint); margin: 2px 0; }
.act.k-read   { --act: var(--tile-database); }
.act.k-write  { --act: var(--tile-screen); }
.act.k-run    { --act: var(--tile-logic); }
.act.k-git    { --act: var(--tile-package); }
.act.k-serve  { --act: var(--tile-tests); }
.act.k-web    { --act: var(--tile-worker); }
.act.k-plan   { --act: var(--tile-state); }
.act.k-finish { --act: var(--signal); }
.act.failed   { --act: var(--danger); }
.act-head { font-size: 13.5px; color: var(--muted); border-radius: 10px; padding: 5px 10px 5px 36px; min-height: 32px; }
.act-head:hover { background: var(--press); }
.act-head .label.why { color: var(--ink); }
.act-head .aside { color: var(--faint); }
.act-head .agent { border-color: var(--hairline); color: var(--faint); }
.act-head .tag { color: var(--danger); font-family: var(--sans); font-weight: 500; font-size: 12px; }
.act-head .tag.quiet { color: var(--faint); }
.act .dot { width: 24px; height: 24px; left: -1px; border: 1px solid color-mix(in srgb, var(--act) 45%, transparent);
  background: color-mix(in srgb, var(--act) 13%, var(--paper)); color: var(--act); box-shadow: 0 0 0 4px var(--paper);
  transition: border-color .15s, color .15s, background .15s, transform .15s; }
.act .dot .i { width: 12.5px; height: 12.5px; }
.act:hover .dot { transform: translateY(-50%) scale(1.06); }
.act.open .dot, .act:hover .dot { background: var(--act); border-color: var(--act); color: #fff; }
.act.denied .dot { border-style: dashed; border-color: var(--faint); color: var(--faint); background: var(--paper); }
/* the mark under way: a warm ring that turns */
.act.running .dot { border-color: color-mix(in srgb, var(--signal) 35%, transparent); background: color-mix(in srgb, var(--signal) 12%, var(--paper)); color: var(--signal); }
.act.running .dot::after { content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: var(--signal); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.act-body { margin: 4px 0 10px 36px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-sm); }
.step .kind { color: var(--faint); }
.step .body { color: var(--muted); }
.shots { margin-left: 36px; }
.shots img { border-radius: 12px; border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); }

/* a verdict on the rail: a lamp with a halo, and a line in its own colour on a breath of it */
.checkline { margin: 6px 0; padding: 7px 12px 7px 36px; border-radius: 10px; font-size: 13.5px; color: var(--success);
  background: color-mix(in srgb, currentColor 7%, transparent); }
.checkline .rule { left: 6px; width: 11px; height: 11px; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px color-mix(in srgb, currentColor 30%, transparent); }
.checkline .label { font-weight: 500; font-variant-caps: normal; letter-spacing: 0; font-size: 13.5px; line-height: 1.3; }
.checkline .aside { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.checkline.bad { color: var(--warning); }

/* still working: what it is doing, in a light that moves */
.flow-live { margin: 6px 0 2px; padding: 8px 12px 8px 36px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface); color: var(--muted); font-size: 13.5px; }
.flow-live .what { background: linear-gradient(90deg, var(--muted) 0%, var(--ink) 45%, var(--muted) 90%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.2s linear infinite; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.flow-live .elapsed { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-left: auto; }
.reduced-motion .flow-live .what, .reduced-motion .flow.running::after { animation: none; }

/* -- the panel and its tabs ------------------------------------------------- */
.panel-tabs { gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--hairline); }
.panel-tabs .tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px 10px; border-radius: 0;
  background: transparent; color: var(--faint); font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.panel-tabs .tab:hover { color: var(--ink); background: transparent; }
.panel-tabs .tab.active { color: var(--ink); background: transparent; border-bottom-color: var(--ink); font-weight: 500; }
.panel-tabs .tab .i { opacity: .9; }

/* buttons and chips */
.btn { border-radius: 10px; border-color: var(--hairline-strong); background: var(--surface); color: var(--ink); }
.btn:hover { background: var(--press); }
.btn.primary { background: var(--send); color: var(--send-ink); border-color: var(--send); }
.chip { border-color: var(--hairline); background: var(--surface); color: var(--muted); }
.lamp { width: 8px; height: 8px; background: var(--faint); }
.lamp.live { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent); }
.lamp.failing { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }

/* -- Flow: the application as a picture ------------------------------------
   Lanes carry a breath of their kind's colour; cards are raised tiles with
   a coloured badge; wires leave a card in that card's colour and end in an
   arrowhead of the same. Zoomed out, a card becomes a badge and a name set
   large enough to read; zoomed further, the name alone. */
.k-service, .kind-service, .flow-lane.service, .from-service { --kc: var(--tile-service); }
.k-endpoint, .kind-endpoint, .flow-lane.endpoint, .from-endpoint { --kc: var(--tile-endpoint); }
.k-screen, .kind-screen, .flow-lane.screen, .from-screen { --kc: var(--tile-screen); }
.k-state, .kind-state, .flow-lane.state, .from-state { --kc: var(--tile-state); }
.k-database, .kind-database, .flow-lane.database, .from-database { --kc: var(--tile-database); }
.k-model, .kind-model, .flow-lane.model, .from-model { --kc: var(--tile-model); }
.k-logic, .kind-logic, .flow-lane.logic, .from-logic { --kc: var(--tile-logic); }
.k-package, .kind-package, .flow-lane.package, .from-package { --kc: var(--tile-package); }
.k-tests, .kind-tests, .flow-lane.tests, .from-tests { --kc: var(--tile-tests); }
.k-stage, .kind-stage, .flow-lane.stage, .from-stage { --kc: var(--tile-stage); }
.k-queue, .kind-queue, .flow-lane.queue, .from-queue { --kc: var(--tile-queue); }
.k-worker, .kind-worker, .flow-lane.worker, .from-worker { --kc: var(--tile-worker); }
.k-training, .kind-training, .flow-lane.training, .from-training { --kc: var(--tile-training); }
.k-dataset, .kind-dataset, .flow-lane.dataset, .from-dataset { --kc: var(--tile-dataset); }
.k-checkpoint, .kind-checkpoint, .flow-lane.checkpoint, .from-checkpoint { --kc: var(--tile-checkpoint); }
.k-notebook, .kind-notebook, .flow-lane.notebook, .from-notebook { --kc: var(--tile-notebook); }
.k-config, .kind-config, .flow-lane.config, .from-config { --kc: var(--tile-config); }
.k-command, .kind-command, .flow-lane.command, .from-command { --kc: var(--tile-command); }
.k-module, .kind-module, .flow-lane.module, .from-module { --kc: var(--tile-module); }
.k-infra, .kind-infra, .flow-lane.infra, .from-infra { --kc: var(--tile-infra); }
.flow-lane.other, .from-other { --kc: var(--faint); }

.flow-bar { padding: 8px 14px; border-bottom: 1px solid var(--hairline); }
.flow-bar .count { font-size: 13px; color: var(--muted); }
.flow-bar .live-count { color: var(--success); }
.flow-find { border-color: var(--hairline); background: var(--surface); }
.flow-story { color: var(--faint); font-size: 12.5px; padding: 6px 14px 6px; }
.flow-kinds { padding: 2px 12px 10px; }
.lane-chip { border-color: var(--hairline); background: var(--surface); color: var(--muted); font-size: 12px; padding: 3px 9px 3px 8px; }
.lane-chip:hover { border-color: var(--hairline-strong); color: var(--ink); }
.ldot { --kc: var(--faint); display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kc); flex: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kc) 18%, transparent); }
.flow-canvas { background: var(--canvas); }
.flow-grid .dot { fill: var(--canvas-dot); opacity: 1; }

.flow-lane { border: 1px solid color-mix(in srgb, var(--kc) 22%, transparent); background: color-mix(in srgb, var(--kc) 4%, transparent); border-radius: 20px; }
.flow-lane > span { display: inline-flex; align-items: center; gap: 8px; left: 14px; top: 11px; font-family: var(--sans); font-size: 12px;
  font-weight: 500; letter-spacing: .01em; text-transform: none; color: var(--muted); }
.flow-lane > span .ldot { width: 8px; height: 8px; }
.flow-lane > span b { margin-left: 0; font-family: var(--mono); font-weight: 500; font-size: 11px; color: var(--faint); }
.flow-viewport.lod .flow-lane > span { font-size: 17px; top: 9px; }
.flow-viewport.lod .flow-lane > span .ldot { width: 11px; height: 11px; }
.flow-viewport.lod .flow-lane > span b { font-size: 14px; }
.flow-viewport.lod2 .flow-lane > span { font-size: 22px; top: 7px; }
.flow-viewport.lod2 .flow-lane > span b { font-size: 17px; }

/* the card */
.flow-node { width: 236px; height: 96px; background: var(--raised); border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 9px 12px 8px; gap: 3px; }
.flow-node:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.flow-node.selected { border-color: var(--kc); box-shadow: 0 0 0 2px var(--kc), 0 14px 36px color-mix(in srgb, var(--kc) 28%, transparent); }
.flow-node.live { border-color: var(--hairline); }
.flow-node.failing { border-color: var(--danger); }
.flow-node .top { gap: 9px; }
.flow-node .ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none;
  background: var(--kc, var(--faint)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.18); }
.flow-node .ico .i { width: 14px; height: 14px; }
.flow-node .name { font-size: 13px; font-weight: 550; color: var(--ink); }
.flow-node .sub { padding-left: 35px; margin-top: -2px; font-size: 10.5px; color: var(--faint); }
.flow-node .sub .kind { color: var(--faint); }
.flow-node .facts { display: flex; gap: 12px; padding-left: 35px; margin-top: 2px; overflow: hidden; white-space: nowrap; }
.flow-node .fact { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.flow-node .fact .k { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.flow-node .fact .v { font-size: 12px; font-weight: 550; color: var(--ink); overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.flow-node .fact:first-child .v { font-size: 13px; }
.flow-node .fact .v.bad { color: var(--danger); }
.flow-node .fact .v.good { color: var(--success); }
.flow-node .handle { width: 8px; height: 8px; margin-top: -4px; border-color: var(--hairline-strong); background: var(--raised); }
.flow-node.live .handle { border-color: var(--success); }
.flow-nodes.focus .flow-node.far { opacity: .2; filter: saturate(.3); }
.flow-node.hit { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal), var(--shadow-md); }
.flow-node.new { animation: flow-in .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes flow-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
/* zoomed out: a badge and a name, large */
.flow-viewport.lod .flow-node { justify-content: center; gap: 0; padding: 10px 14px; }
.flow-viewport.lod .flow-node .sub, .flow-viewport.lod .flow-node .facts { display: none; }
.flow-viewport.lod .flow-node .top { gap: 12px; }
.flow-viewport.lod .flow-node .ico { width: 36px; height: 36px; border-radius: 10px; }
.flow-viewport.lod .flow-node .ico .i { width: 19px; height: 19px; }
.flow-viewport.lod .flow-node .name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.flow-viewport.lod .flow-node .lamp { width: 10px; height: 10px; }
.flow-viewport.lod2 .flow-node .ico { width: 46px; height: 46px; border-radius: 12px; }
.flow-viewport.lod2 .flow-node .ico .i { width: 24px; height: 24px; }
.flow-viewport.lod2 .flow-node .name { font-size: 26px; }
.flow-viewport.lod2 .flow-node .lamp { width: 13px; height: 13px; }
.flow-viewport.lod2 .flow-node .handle { display: none; }
/* the picture running top to bottom: wires leave the foot of a card and enter its head */
.flow-viewport.down .flow-node .handle { left: 50%; top: auto; margin: 0 0 0 -4px; }
.flow-viewport.down .flow-node .handle.in { top: -4px; }
.flow-viewport.down .flow-node .handle.out { bottom: -4px; }
.flow-viewport.lod2 .flow-node { border-width: 2px; }

/* the wires: the colour of the card they leave, thin when read from the
   code and heavy when a request was seen to travel; an arrowhead to match */
.flow-edge { stroke: color-mix(in srgb, var(--kc, var(--wire)) 72%, var(--wire)); stroke-width: 1.75; stroke-dasharray: none;
  stroke-linecap: round; stroke-linejoin: round; opacity: .85; marker-end: url(#flow-arrow); }
.flow-edge.from-service { marker-end: url(#flow-arrow-service); }   .flow-edge.from-endpoint { marker-end: url(#flow-arrow-endpoint); }
.flow-edge.from-screen { marker-end: url(#flow-arrow-screen); }     .flow-edge.from-state { marker-end: url(#flow-arrow-state); }
.flow-edge.from-database { marker-end: url(#flow-arrow-database); } .flow-edge.from-model { marker-end: url(#flow-arrow-model); }
.flow-edge.from-logic { marker-end: url(#flow-arrow-logic); }       .flow-edge.from-package { marker-end: url(#flow-arrow-package); }
.flow-edge.from-tests { marker-end: url(#flow-arrow-tests); }       .flow-edge.from-stage { marker-end: url(#flow-arrow-stage); }
.flow-edge.from-queue { marker-end: url(#flow-arrow-queue); }       .flow-edge.from-worker { marker-end: url(#flow-arrow-worker); }
.flow-edge.from-training { marker-end: url(#flow-arrow-training); } .flow-edge.from-dataset { marker-end: url(#flow-arrow-dataset); }
.flow-edge.from-checkpoint { marker-end: url(#flow-arrow-checkpoint); } .flow-edge.from-notebook { marker-end: url(#flow-arrow-notebook); }
.flow-edge.from-config { marker-end: url(#flow-arrow-config); }     .flow-edge.from-command { marker-end: url(#flow-arrow-command); }
.flow-edge.from-module { marker-end: url(#flow-arrow-module); }     .flow-edge.from-infra { marker-end: url(#flow-arrow-infra); }
/* a line that says less - a test reaching into the code, an import - is
   drawn faint until a card it touches is under the pointer or selected */
.flow-edge.quiet { opacity: .3; stroke-width: 1.25; }
.flow-edge.quiet.hot, .flow-edge.quiet.sel { opacity: 1; stroke-width: 2.5; }
.flow-edge.seen { stroke-width: 2.5; opacity: 1; }
.flow-edge.hot, .flow-edge.sel { stroke: var(--kc, var(--wire-hot)); stroke-width: 2.75; opacity: 1; }
.flow-edges.dim .flow-edge:not(.hot):not(.sel) { opacity: .16; }
.flow-edges.focus .flow-edge:not(.sel):not(.hot) { opacity: .07; }
.flow-edge.draw { animation: wire-draw .9s cubic-bezier(.3,.7,.2,1) both; }
@keyframes wire-draw { to { stroke-dashoffset: 0; } }
.flow-edge-live { stroke: var(--success); }
.flow-edges .arrow { fill: var(--wire); }
.flow-edges .arrow.hot { fill: var(--wire-hot); }
.flow-edges .arrow.k-service { fill: var(--tile-service); }  .flow-edges .arrow.k-endpoint { fill: var(--tile-endpoint); }
.flow-edges .arrow.k-screen { fill: var(--tile-screen); }    .flow-edges .arrow.k-state { fill: var(--tile-state); }
.flow-edges .arrow.k-database { fill: var(--tile-database); } .flow-edges .arrow.k-model { fill: var(--tile-model); }
.flow-edges .arrow.k-logic { fill: var(--tile-logic); }      .flow-edges .arrow.k-package { fill: var(--tile-package); }
.flow-edges .arrow.k-tests { fill: var(--tile-tests); }      .flow-edges .arrow.k-stage { fill: var(--tile-stage); }
.flow-edges .arrow.k-queue { fill: var(--tile-queue); }      .flow-edges .arrow.k-worker { fill: var(--tile-worker); }
.flow-edges .arrow.k-training { fill: var(--tile-training); } .flow-edges .arrow.k-dataset { fill: var(--tile-dataset); }
.flow-edges .arrow.k-checkpoint { fill: var(--tile-checkpoint); } .flow-edges .arrow.k-notebook { fill: var(--tile-notebook); }
.flow-edges .arrow.k-config { fill: var(--tile-config); }     .flow-edges .arrow.k-command { fill: var(--tile-command); }
.flow-edges .arrow.k-module { fill: var(--tile-module); }     .flow-edges .arrow.k-infra { fill: var(--tile-infra); }
/* what passes along a wire: a bright grain travelling from the card it
   leaves to the card it reaches, in the wire's own colour */
.flow-edge-flow { fill: none; stroke: var(--kc, var(--wire-hot)); stroke-width: 3; stroke-linecap: round; opacity: .95;
  stroke-dasharray: 6 110; animation: flow-travel 1.1s linear infinite; pointer-events: none; }
.flow-edges.focus .flow-edge-flow { opacity: .95; }
.flow-elabel { font-family: var(--sans); font-size: 10.5px; font-weight: 500; fill: var(--ink); stroke: none; paint-order: normal; }
.flow-elabel-pill { fill: var(--raised); stroke: var(--hairline-strong); stroke-width: 1; }
.flow-viewport.lod .flow-elabel { font-size: 14px; }
.flow-viewport.lod2 .flow-elabel { font-size: 18px; }

.flow-controls { background: var(--surface); border-color: var(--hairline); border-radius: 10px; box-shadow: var(--shadow-sm); }
.flow-controls button { color: var(--muted); }
.flow-controls .zoom { color: var(--faint); }
.flow-minimap { background: color-mix(in srgb, var(--surface) 92%, transparent); border-color: var(--hairline); }
.flow-minimap .mm-lane { fill: color-mix(in srgb, var(--faint) 8%, transparent); stroke: color-mix(in srgb, var(--faint) 30%, transparent); }
.flow-minimap .mm-node { fill: var(--faint); opacity: .6; }
.flow-minimap .mm-node.live { fill: var(--success); }
.flow-minimap .mm-view { fill: color-mix(in srgb, var(--signal) 8%, transparent); stroke: var(--signal); }
.flow-detail { background: var(--surface); border-top: 1px solid var(--hairline); }
.flow-detail .dhead b { font-size: 14px; }
.dfacts .k { color: var(--faint); }
.dfacts .v { color: var(--muted); }
.dlinks button { border-color: var(--hairline); color: var(--muted); }
.dlinks button:hover { border-color: var(--hairline-strong); color: var(--ink); }

/* -- Try: a device on a stage ----------------------------------------------- */
.try-bar { border-bottom: 1px solid var(--hairline); }
.try-bar .devices button { border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: var(--muted); }
.try-bar .devices button.active { background: var(--ink); color: var(--paper); }
.try-stage, .try-stage.framed { background: var(--stage); }
.try-stage.framed { padding: 28px 16px 12px; }
.device-wrap { position: relative; gap: 18px; }
.device-wrap::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 22px; height: 40px; border-radius: 50%;
  background: var(--stage-floor); filter: blur(22px); z-index: 0; pointer-events: none; }
.device { z-index: 1; }
.device-caption { color: var(--faint); font-size: 12px; letter-spacing: .02em; }
/* the phone: a silver rim, a black glass edge, the island */
.device.phone { padding: 12px;
  background: linear-gradient(160deg, var(--silver-a) 0%, var(--silver-b) 32%, var(--silver-c) 62%, var(--silver-b) 100%);
  box-shadow: 0 40px 80px rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.18),
              inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 0 2px var(--silver-edge), inset 0 0 0 6px #0b0b0c; }
.device.phone::after { background: linear-gradient(100deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.18) 100%); }
.device.phone .screen { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.device .side { width: 3.5px; background: linear-gradient(90deg, var(--silver-c), var(--silver-edge)); box-shadow: 0 0 0 1px rgba(0,0,0,.35); border-radius: 2px; }
.device .island { top: 14px; width: 124px; height: 36px; }
/* the tablet: the same silver, a thinner glass edge, a camera */
.device.tablet { padding: 16px;
  background: linear-gradient(160deg, var(--silver-a) 0%, var(--silver-b) 36%, var(--silver-c) 70%, var(--silver-b) 100%);
  box-shadow: 0 40px 80px rgba(0,0,0,.32), 0 10px 22px rgba(0,0,0,.16),
              inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 0 2px var(--silver-edge), inset 0 0 0 7px #0b0b0c; }
.device.tablet::before { content: ''; position: absolute; top: 7px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: #0b0b0c; box-shadow: inset 0 0 0 1.5px #2a2a2e; z-index: 4; }
.device.tablet .glare { background: linear-gradient(118deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 40%); }
/* the web app: a browser window on the same stage */
.try-stage.desktop { display: flex; align-items: stretch; justify-content: center; padding: 22px 18px 18px; }
.browser { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; border-radius: 14px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--hairline-strong); }
.browser-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; flex: none;
  background: linear-gradient(180deg, var(--silver-a), var(--silver-c)); border-bottom: 1px solid var(--silver-edge); }
:root[data-theme="dark"] .browser-bar { background: linear-gradient(180deg, #2c2c2f, #202023); border-bottom-color: #3a3a3e; }
.browser-bar .lights { display: flex; gap: 6px; flex: none; }
.browser-bar .lights i { width: 11px; height: 11px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
.browser-bar .lights i:nth-child(1) { background: #ff5f57; }
.browser-bar .lights i:nth-child(2) { background: #febc2e; }
.browser-bar .lights i:nth-child(3) { background: #28c840; }
.browser-bar .url { flex: 1; text-align: center; font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  background: rgba(0,0,0,.05); border-radius: 7px; padding: 4px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="dark"] .browser-bar .url { background: rgba(255,255,255,.06); color: var(--muted); }
.browser iframe { flex: 1; min-height: 0; width: 100%; border: none; background: #fff; display: block; }
.try-empty code { border-radius: 8px; }

/* -- small print ----------------------------------------------------------- */
.popover { border-radius: 14px; border: 1px solid var(--hairline); background: var(--surface); box-shadow: var(--shadow-lg); }
.toast { border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .flow-edge.draw, .flow.running::after, .flow-live .what { animation: none; } }

/* -- the work view: what the agent thought, read, ran and changed --------------------------------
   One quiet column in near-black, white and grey; blue for files; green and
   red only inside a diff. No rail, no coloured marks. */
.work { position: relative; margin: 6px 0 10px; --w-link: #0969da; --w-add: #1a7f37; --w-del: #cf222e; --w-add-bg: #dafbe1; --w-del-bg: #ffebe9; --w-code-bg: var(--surface); }
:root[data-theme="dark"] .work, :root[data-theme="obsidian"] .work { --w-link: #58a6ff; --w-add: #3fb950; --w-del: #f85149; --w-add-bg: rgba(46,160,67,.18); --w-del-bg: rgba(248,81,73,.18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .work { --w-link: #58a6ff; --w-add: #3fb950; --w-del: #f85149; --w-add-bg: rgba(46,160,67,.18); --w-del-bg: rgba(248,81,73,.18); } }
.work .chev { flex: none; margin-left: auto; color: var(--faint); transition: transform .15s; }
.work .open > button .chev { transform: rotate(90deg); }
.w-said { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--muted); margin: 10px 0 8px 2px; }
.w-said p { margin: 0 0 6px; } .w-said p:last-child { margin-bottom: 0; }
.w-said code, .w-thought-body code, .w-code-inline { font-family: var(--mono); font-size: 12.5px; background: var(--surface-muted); border: 1px solid var(--hairline); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.w-thought { margin: 8px 0; }
.w-thought-head { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 4px 2px; font-size: 13.5px; color: var(--muted); border-radius: 8px; }
.w-thought-head:hover { color: var(--ink); }
.w-thought-head .opened { display: none; } .w-thought.open .w-thought-head .opened { display: inline; } .w-thought.open .w-thought-head .closed { display: none; }
.w-thought-body { display: none; margin: 4px 0 6px 2px; padding-left: 12px; border-left: 2px solid var(--hairline); font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.w-thought.open .w-thought-body { display: block; }
.w-thought-body p { margin: 0 0 8px; }
.w-read { margin: 1px 0; }
.w-read-head { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; width: 100%; text-align: left; padding: 4px 6px 4px 2px; font-size: 13.5px; color: var(--muted); border-radius: 8px; }
.w-read-head:hover { background: var(--press); color: var(--ink); }
.w-read > .w-chip-body, .w-read > .w-read-list { display: none; }
.w-read.open > .w-chip-body, .w-read.open > .w-read-list { display: block; }
.w-read-list { margin: 2px 0 6px 14px; border-left: 2px solid var(--hairline); padding-left: 8px; }
.w-file { font-family: var(--mono); font-size: 12.5px; color: var(--w-link); text-decoration: none; }
.w-file:hover { text-decoration: underline; }
.w-dim { color: var(--faint); font-size: 12.5px; }
.w-chip { margin: 6px 0; }
.w-chip-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface-muted); font-size: 13.5px; color: var(--ink); }
.w-chip-head:hover { border-color: var(--hairline-strong); }
.w-chip-head .sigil { font-family: var(--mono); font-size: 13px; color: var(--faint); flex: none; }
.w-chip-head .label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-chip-head .label.mono { font-family: var(--mono); font-size: 12.5px; }
.w-chip-head .meta { flex: none; margin-left: auto; color: var(--faint); font-size: 12px; font-family: var(--mono); white-space: nowrap; }
.w-chip-head .meta .bad, .w-tag.bad, .w-status.bad .text, .w-out-tag.bad { color: var(--w-del); }
.w-chip-head .meta + .chev, .w-chip-head .w-tag + .chev, .w-chip-head .w-spin + .chev { margin-left: 0; }
.w-agent { font-family: var(--mono); font-size: 10.5px; color: var(--faint); border: 1px solid var(--hairline); border-radius: 6px; padding: 0 5px; }
.w-tag { font-size: 12px; color: var(--faint); margin-left: auto; }
.w-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hairline-strong); border-top-color: var(--ink); animation: w-spin .8s linear infinite; margin-left: auto; flex: none; }
@keyframes w-spin { to { transform: rotate(360deg); } }
.w-chip-body { display: none; margin: 4px 0 8px 0; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--w-code-bg); }
.w-chip.open > .w-chip-body { display: block; }
.w-cmd { display: flex; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.w-cmd .sigil { color: var(--faint); flex: none; }
.w-cmd .args { color: var(--muted); }
.w-out { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--muted); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; }
.w-out-tag { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: 6px; }
.w-diff { margin: 8px 0; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--w-code-bg); }
.w-diff-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 12px; font-size: 13px; color: var(--ink); background: var(--surface-muted); }
.w-diff-head .i { color: var(--faint); flex: none; }
.w-diff-head .w-path { font-family: var(--mono); font-size: 12.5px; color: var(--w-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-counts { display: inline-flex; gap: 6px; font-family: var(--mono); font-size: 12px; }
.w-counts .add { color: var(--w-add); } .w-counts .del { color: var(--w-del); }
.w-diff.open .w-code { display: block; }
.w-status { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13.5px; color: var(--muted); min-width: 0; }
.w-status .i { color: var(--faint); flex: none; }
.w-status .text { color: var(--ink); flex: none; }
.w-status .aside { color: var(--faint); font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-status.bad .i { color: var(--w-del); }
.w-gaps { margin: 0 0 8px 24px; padding: 0 0 0 16px; font-size: 13px; color: var(--muted); }
.w-plan { margin: 8px 0; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.w-plan-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 12px; font-size: 13.5px; color: var(--ink); background: var(--surface-muted); }
.w-plan-head .i { color: var(--faint); }
.w-plan-body { display: none; padding: 8px 14px 10px; font-size: 13.5px; color: var(--muted); }
.w-plan.open .w-plan-body { display: block; }
.w-plan-body ol { margin: 4px 0 6px; padding-left: 20px; } .w-plan-body li { margin: 2px 0; }
.w-plan-files { display: flex; flex-wrap: wrap; gap: 8px; }
.w-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 4px 0 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface-muted); font-size: 13px; color: var(--muted); white-space: nowrap; }
.w-pill .i { color: var(--faint); flex: none; }
.w-pill .what { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.w-pill .elapsed { color: var(--faint); font-family: var(--mono); font-size: 12px; flex: none; }
.w-pill .w-pressure { color: var(--warning); flex: none; }
.w-wait { color: var(--faint); }
/* the person's message: a slash command reads as one */
.msg-user .slash { color: #9a6700; background: rgba(212,167,44,.18); border-radius: 6px; padding: 0 5px; font-family: var(--mono); font-size: 13px; }
/* the stop button: a round white button holding a small black square, not a red circle */
.composer-bar .send.stop { background: #fff; color: #111; border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-sm); }
.composer-bar .send.stop .i { width: 11px; height: 11px; fill: currentColor; stroke: none; }
/* -- Environment per repository ------------------------------------------------------------- */
.repo-head { display: flex; align-items: center; }
.repo-head .repo-row { flex: 1; min-width: 0; }
.repo-head .env { opacity: 0; margin-right: 6px; }
.repo-head:hover .env, .repo-head .env:focus { opacity: 1; }
.env-page { max-width: 760px; margin: 0 auto; padding: 8px 24px 48px; }
.env-lead { color: var(--muted); font-size: 14px; margin: 6px 0 18px; }
.env-lead code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-muted); border-radius: 6px; padding: 1px 6px; }
.env-section { margin: 22px 0; }
.env-section h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.env-hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.env-editor { display: flex; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: var(--surface); font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
.env-editor:focus-within { border-color: var(--hairline-strong); }
.env-editor .gutter { display: flex; flex-direction: column; padding: 10px 8px 10px 12px; text-align: right; color: var(--faint); background: var(--surface-muted); user-select: none; overflow: hidden; }
.env-editor textarea { flex: 1; border: 0; background: transparent; padding: 10px 12px; margin: 0; resize: none; color: var(--ink); outline: none; font: inherit; line-height: inherit; min-height: 96px; }
.env-editor textarea::placeholder { color: var(--faint); }
.env-secrets { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.env-secret-row { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-top: 1px solid var(--hairline); font-size: 13.5px; }
.env-secret-row:first-child { border-top: 0; }
.env-secret-row .name { font-family: var(--mono); font-size: 12.5px; color: var(--ink); min-width: 160px; }
.env-secret-row .value { flex: 1; color: var(--faint); letter-spacing: 2px; }
.env-secret-row.pending .value { letter-spacing: 0; color: var(--muted); font-style: italic; }
.env-secret-row .text-btn.danger { color: var(--danger); }
.env-secrets > .env-hint { padding: 10px 12px; margin: 0; }
.env-add { display: flex; gap: 8px; margin-top: 8px; }
.env-add input { flex: 1; padding: 7px 10px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13.5px; }
.env-select { padding: 7px 10px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13.5px; }
.env-hosts { margin-top: 10px; }
.env-actions { display: flex; align-items: center; gap: 14px; margin-top: 24px; }

/* -- the editor's look inside a diff card: VS Code Dark+ by default, Light+ in light ------------
   Bars in the gutter (green for a line added, red hatched for one removed),
   a faint tint on the line, the words that changed marked inside a changed
   line, brackets by depth, and the indentation as rainbow guides. */
.w-diff { --ed-bg: #1e1e1e; --ed-head: #252526; --ed-fg: #d4d4d4; --ed-ln: #6e7681; --ed-line: #2a2a2a;
  --ed-add-bg: rgba(155,185,85,.2); --ed-del-bg: rgba(255,0,0,.2); --ed-add-bar: rgba(155,185,85,.75); --ed-del-bar: rgba(255,0,0,.55);
  --ed-chg-add: rgba(156,204,44,.3); --ed-chg-del: rgba(255,0,0,.3);
  --t-k: #C586C0; --t-kw: #569CD6; --t-y: #4EC9B0; --t-f: #DCDCAA; --t-v: #9CDCFE; --t-p: #9CDCFE; --t-s: #CE9178; --t-n: #B5CEA8; --t-c: #6A9955; --t-a: #DCDCAA; --t-const: #4FC1FF;
  --t-b1: #FFD700; --t-b2: #DA70D6; --t-b3: #179FFF;
  --ig1: rgba(255,215,0,.35); --ig2: rgba(218,112,214,.35); --ig3: rgba(23,159,255,.35); --ig4: rgba(79,236,236,.35);
  --ir1: rgba(255,255,64,.025); --ir2: rgba(127,255,127,.025); --ir3: rgba(255,127,255,.025); --ir4: rgba(79,236,236,.025);
  border-color: var(--ed-line); animation: w-in .16s ease-out; }
:root[data-theme="light"] .w-diff { --ed-bg: #ffffff; --ed-head: #f3f3f3; --ed-fg: #000000; --ed-ln: #237893; --ed-line: #e5e5e5;
  --ed-add-bg: rgba(155,185,85,.2); --ed-del-bg: rgba(255,0,0,.2); --ed-add-bar: rgba(155,185,85,.8); --ed-del-bar: rgba(255,0,0,.55);
  --ed-chg-add: rgba(156,204,44,.35); --ed-chg-del: rgba(255,0,0,.3);
  --t-k: #AF00DB; --t-kw: #0000FF; --t-y: #267F99; --t-f: #795E26; --t-v: #001080; --t-p: #001080; --t-s: #A31515; --t-n: #098658; --t-c: #008000; --t-a: #795E26; --t-const: #0070C1;
  --t-b1: #0431FA; --t-b2: #319331; --t-b3: #7B3814;
  --ig1: rgba(4,49,250,.22); --ig2: rgba(49,147,49,.22); --ig3: rgba(123,56,20,.22); --ig4: rgba(0,150,150,.22);
  --ir1: rgba(255,255,64,.05); --ir2: rgba(127,255,127,.05); --ir3: rgba(255,127,255,.05); --ir4: rgba(79,236,236,.05); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="obsidian"]) .w-diff { --ed-bg: #ffffff; --ed-head: #f3f3f3; --ed-fg: #000000; --ed-ln: #237893; --ed-line: #e5e5e5;
    --ed-add-bg: rgba(155,185,85,.2); --ed-del-bg: rgba(255,0,0,.2); --ed-add-bar: rgba(155,185,85,.8); --ed-del-bar: rgba(255,0,0,.55); --ed-chg-add: rgba(156,204,44,.35); --ed-chg-del: rgba(255,0,0,.3);
    --t-k: #AF00DB; --t-kw: #0000FF; --t-y: #267F99; --t-f: #795E26; --t-v: #001080; --t-p: #001080; --t-s: #A31515; --t-n: #098658; --t-c: #008000; --t-a: #795E26; --t-const: #0070C1;
    --t-b1: #0431FA; --t-b2: #319331; --t-b3: #7B3814;
    --ig1: rgba(4,49,250,.22); --ig2: rgba(49,147,49,.22); --ig3: rgba(123,56,20,.22); --ig4: rgba(0,150,150,.22);
    --ir1: rgba(255,255,64,.05); --ir2: rgba(127,255,127,.05); --ir3: rgba(255,127,255,.05); --ir4: rgba(79,236,236,.05); }
}
@keyframes w-in { from { opacity: 0; transform: translateY(3px); } }
.w-diff { background: var(--ed-bg); }
.w-diff-head { background: var(--ed-head); color: var(--ed-fg); border-bottom: 1px solid var(--ed-line); }
.w-diff-head .w-path { color: var(--ed-fg); }
.w-diff-head .i { color: var(--ed-ln); }
.w-code { display: none; background: var(--ed-bg); color: var(--ed-fg); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; overflow-x: auto; padding: 4px 0 6px; }
.w-diff.open .w-code { display: block; }
.w-code .dl { display: flex; align-items: stretch; white-space: pre; min-height: 20px; }
.w-code .dl .bar { flex: none; width: 3px; }
.w-code .dl.add { background: var(--ed-add-bg); }
.w-code .dl.add .bar { background: var(--ed-add-bar); }
.w-code .dl.del { background: var(--ed-del-bg); }
.w-code .dl.del .bar { background: repeating-linear-gradient(180deg, var(--ed-del-bar) 0 2px, transparent 2px 4px); }
.w-code .dl.del .tx { opacity: .9; }
.w-code .ln { flex: none; width: 42px; padding-right: 10px; text-align: right; color: var(--ed-ln); user-select: none; font-size: 11.5px; }
.w-code.nonum .ln { width: 10px; padding-right: 0; }
.w-code .tx { flex: 1; padding-right: 16px; }
.w-code .chg { border-radius: 3px; padding: 0 1px; }
.w-code .dl.add .chg { background: var(--ed-chg-add); }
.w-code .dl.del .chg { background: var(--ed-chg-del); }
.w-code .dl.skip { color: var(--ed-ln); font-style: italic; }
.w-code .ind { display: inline-block; border-left: 1px solid transparent; }
.w-code .ind.l1 { border-left-color: var(--ig1); background: var(--ir1); }
.w-code .ind.l2 { border-left-color: var(--ig2); background: var(--ir2); }
.w-code .ind.l3 { border-left-color: var(--ig3); background: var(--ir3); }
.w-code .ind.l4 { border-left-color: var(--ig4); background: var(--ir4); }
.w-code .t-k { color: var(--t-k); } .w-code .t-kw { color: var(--t-kw); } .w-code .t-y { color: var(--t-y); } .w-code .t-f { color: var(--t-f); }
.w-code .t-v { color: var(--t-v); } .w-code .t-p { color: var(--t-p); } .w-code .t-s { color: var(--t-s); } .w-code .t-n { color: var(--t-n); }
.w-code .t-c { color: var(--t-c); font-style: italic; } .w-code .t-a { color: var(--t-a); } .w-code .t-const { color: var(--t-const); }
.w-code .t-b1 { color: var(--t-b1); } .w-code .t-b2 { color: var(--t-b2); } .w-code .t-b3 { color: var(--t-b3); }
.w-more { display: flex; align-items: center; gap: 4px; margin: 4px 12px 2px; font-size: 12.5px; color: var(--ed-ln); }
.w-more:hover { color: var(--ed-fg); }

/* -- the phone: chat and panel as tabs ----------------------------------------------------------- */
.phone-tabs { display: none; }
.panel-tabs .phone-tab { display: none; }
@media (max-width: 720px) {
  .phone-tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); overflow-x: auto; }
  .phone-tabs button { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; color: var(--muted); }
  .phone-tabs button.active { background: var(--surface-muted); color: var(--ink); font-weight: 500; }
  .panel-tabs .phone-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-right: 4px; border-radius: 999px; font-size: 13.5px; color: var(--muted); }
  .panel-tabs .phone-tab:hover { color: var(--ink); }
  .w-code { font-size: 12px; }
  .w-code .ln { width: 34px; }
}
/* -- the editor itself inside a card ---------------------------------------------------------- */
.w-code .w-rows { display: block; }
.w-code.live .w-rows { display: none; }
.w-code.live { padding: 0; overflow: visible; }
.w-monaco { width: 100%; min-height: 32px; }
.w-diff .monaco-diff-editor, .w-diff .monaco-editor, .w-diff .monaco-editor .margin, .w-diff .monaco-editor-background { background-color: var(--ed-bg) !important; }
.w-diff .monaco-diff-editor .diffOverview, .w-diff .monaco-diff-editor .diffViewport { display: none !important; }
.w-diff .monaco-editor .cursors-layer { display: none; }
.changes-diff { margin: 4px 12px 10px; }
.changes-diff .w-code { display: block; }
.changes-diff .diff { border: 0; }
.w-monaco .monaco-editor .whole-insert { background: var(--ed-add-bg); }
.w-monaco .monaco-editor .whole-delete { background: var(--ed-del-bg); }
.w-monaco .monaco-editor .whole-gutter-insert { background: var(--ed-add-bar); width: 3px !important; margin-left: 2px; }
.w-monaco .monaco-editor .whole-gutter-delete { background: repeating-linear-gradient(180deg, var(--ed-del-bar) 0 2px, transparent 2px 4px); width: 3px !important; margin-left: 2px; }

/* -- progress the agent declares: "Completed 3 of 9 to-dos" ---------------------------------- */
.w-progress { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13.5px; color: var(--muted); }
.w-progress .i { color: var(--faint); flex: none; }
.w-progress b { font-weight: 500; color: var(--ink); }
.w-progress .step { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-plan-body li.done { color: var(--faint); text-decoration: line-through; }
.w-plan-body li.done::marker { color: var(--faint); }
.w-plan-head .w-dim { margin-left: 6px; }
.w-thought-mini { font-size: 12.5px; color: var(--faint); margin: 8px 0 -4px 2px; }
/* -- Flow wires: seen, directed, moving while Antelligen builds --------------------------------------- */
.flow-edge { stroke-width: 2; }
.flow-edge.sel { stroke-width: 2.75; }
.flow-edges.building .flow-edge:not(.sel) { stroke-dasharray: 7 9; animation: flow-move 1.5s linear infinite; }
.flow-edges.building.focus .flow-edge:not(.sel) { animation: none; }
@keyframes flow-move { to { stroke-dashoffset: -32; } }
.flow-edge-flow { stroke-width: 3; }
.flow-elabel { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) { .flow-edges.building .flow-edge { animation: none; } }
/* -- Run: a training run, the numbers first, the curves under them ---------------------------- */
.tr { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 14px; }
.tr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.tr-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface-muted); font-weight: 550; color: var(--ink); }
.tr-status .lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.tr-status.live .lamp { background: var(--success); box-shadow: 0 0 0 0 var(--success); animation: tr-pulse 1.6s ease-out infinite; }
@keyframes tr-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.tr-when { color: var(--faint); font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tr-pick { font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); }
.tr-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.tr-empty .i { color: var(--faint); }
.tr-empty .ev { color: var(--faint); font-size: 12px; }
.tr-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tr-kpi { position: relative; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); padding: 11px 13px 10px; min-height: 84px; overflow: hidden; }
.tr-kpi .name { font-size: 11.5px; color: var(--faint); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-kpi .value { font-size: 24px; font-weight: 550; letter-spacing: -.02em; color: var(--ink); margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.tr-kpi .sub { font-size: 11.5px; color: var(--faint); line-height: 1.35; }
.tr-kpi .spark { display: block; width: 100%; height: 22px; margin-top: 7px; opacity: .9; }
.tr-kpi .spark.good { color: var(--success); }
.tr-kpi .spark.bad { color: var(--warning); }
.tr-kpi .spark.plain { color: var(--faint); }
.tr-kpi.loss .value { color: var(--ink); }
.tr-kpi.score .value { color: var(--success); }
.tr-kpi.prog .bar { height: 5px; border-radius: 999px; background: var(--surface-muted); margin: 6px 0 5px; overflow: hidden; }
.tr-kpi.prog .bar i { display: block; height: 100%; border-radius: 999px; background: var(--signal); transition: width .6s ease; }
.tr-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
.tr-tools .lbl { margin-right: 4px; }
.tr-tools .chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.tr-tools .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tr-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.tr-chart { border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); padding: 10px 10px 4px; min-width: 0; }
.tr-chart .title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; padding: 0 4px 4px; }
.tr-chart .title b { font-weight: 550; color: var(--ink); }
.tr-chart .legend { display: inline-flex; gap: 12px; flex-wrap: wrap; margin-left: auto; font-size: 11.5px; color: var(--muted); }
.tr-chart .legend .key { display: inline-flex; align-items: center; gap: 5px; }
.tr-chart .legend .key i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.tr-chart .legend .key b { font-weight: 550; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-chart .plot { position: relative; width: 100%; }
.tr-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.tr-svg .grid { stroke: var(--hairline); stroke-width: 1; }
.tr-svg .grid.v { stroke-dasharray: 2 4; }
.tr-svg .axis { stroke: var(--hairline-strong); stroke-width: 1; }
.tr-svg .tick { font-size: 10.5px; fill: var(--faint); font-family: var(--mono); }
.tr-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tr-svg .raw { fill: none; stroke-width: 1.2; opacity: .28; stroke-linejoin: round; }
.tr-svg .end { stroke: var(--surface); stroke-width: 1.5; }
.tr-svg .xline { stroke: var(--ink); stroke-width: 1; opacity: .35; stroke-dasharray: 3 3; }
.tr-svg .dot { stroke: var(--surface); stroke-width: 1.5; }
.tr-tip { position: absolute; pointer-events: none; z-index: 2; background: var(--raised); border: 1px solid var(--hairline-strong); border-radius: 10px; box-shadow: var(--shadow-md); padding: 7px 10px; font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.tr-tip .x { color: var(--faint); font-family: var(--mono); font-size: 11px; }
.tr-tip span { display: inline-flex; align-items: center; gap: 6px; }
.tr-tip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tr-tip b { color: var(--ink); font-weight: 550; margin-left: auto; font-variant-numeric: tabular-nums; }
.tr-section h4 { margin: 4px 0 8px; font-size: 12.5px; font-weight: 550; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.tr-section h4 .count { color: var(--faint); font-weight: 400; font-family: var(--mono); font-size: 11.5px; }
.tr-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tr-gallery figure { margin: 0; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--paper); cursor: zoom-in; }
.tr-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.tr-gallery figcaption { font-size: 11px; color: var(--muted); padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); border-top: 1px solid var(--hairline); }
.tr-weights .row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid var(--hairline); font-size: 12.5px; }
.tr-weights .row:first-child { border-top: 0; }
.tr-weights .row .i { color: var(--faint); flex: none; }
.tr-weights .path { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.tr-weights .size { color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-weights .at { color: var(--faint); font-size: 11.5px; }
.tr-config { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.tr-config .kv { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--hairline); }
.tr-config .k { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-config .v { font-family: var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-results { font-size: 13px; line-height: 1.55; color: var(--muted); }
.tr-console .entries { display: flex; flex-direction: column; gap: 6px; }
.tr-console .entry { display: flex; align-items: center; gap: 10px; }
.tr-console .entries code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-muted); padding: 2px 8px; border-radius: 6px; }
.tr-console .entries .why { color: var(--faint); font-size: 12px; }
.tr-console .entries .url { border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 10px; background: var(--surface); font-size: 12.5px; font-family: var(--mono); outline: none; }
.tr-console .out { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-muted); font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
@media (prefers-reduced-motion: reduce) { .tr-status.live .lamp { animation: none; } }
/* -- a phone: the open panel is the whole screen ------------------------------------------------
   The grid gave the chat column its minimum content width beside a panel
   that was already 100% wide, so the panel's right edge (a tab, a card)
   was pushed off the screen. With the panel open the chat column is zero. */
@media (max-width: 720px) {
  .app:not(.no-panel) { grid-template-columns: 0 0 0 100%; }
  /* hidden, not clipped: the composer is stuck to the bottom of the
     viewport and painted through a clipped, zero-width column */
  .app:not(.no-panel) .main, .app:not(.no-panel) .resizer { display: none; }
}
/* -- Flow, empty while a run is on: a breathing mark, not a blank ------------------------------- */
.flow-empty.building .i { color: var(--signal); animation: flow-breathe 1.8s ease-in-out infinite; }
@keyframes flow-breathe { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .flow-empty.building .i { animation: none; } }
/* -- Run: software in a desktop window --------------------------------------------------------- */
.try-stage.software { display: flex; align-items: stretch; justify-content: center; padding: 18px 16px 16px; overflow: hidden; }
.try-window { display: flex; flex-direction: column; flex: 1; min-width: 0; max-width: 1100px; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-lg); }
.try-window .title { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-muted); border-bottom: 1px solid var(--hairline); font-size: 12px; color: var(--muted); }
.try-window .dots { display: inline-flex; gap: 6px; }
.try-window .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--hairline-strong); }
.try-window .dots i:nth-child(1) { background: #ff5f57; } .try-window .dots i:nth-child(2) { background: #febc2e; } .try-window .dots i:nth-child(3) { background: #28c840; }
.try-window .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try-window .try-term { flex: 1; min-height: 0; }
.try-window .try-term .out { background: #0e0e0f; color: #e6e6e3; font-size: 12.5px; min-height: 220px; }
/* -- Run: the devices, as the real ones look ----------------------------------------------------
   An iPhone 18 Pro Max in burgundy titanium and an iPad Pro 11" in space
   black: thin, even bezels, a polished edge, no chrome. The frame is a
   few pixels of metal around a black surround; the screen is the app. */
.try-stage.framed { padding: 26px 16px 18px; }
.device { padding: 10px; }
.device.phone { padding: 10px;
  background: linear-gradient(165deg, #5c2634 0%, #3a151f 34%, #4a1b28 62%, #26090f 100%);
  box-shadow: 0 34px 70px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.35),
              inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 2.5px #2a0c14, inset 0 0 0 8px #07070a; }
.device.phone::after { background: linear-gradient(100deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,.08) 100%); }
.device.phone .screen { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.device .side { width: 3.5px; background: linear-gradient(90deg, #7a3244, #3a121d); box-shadow: 0 0 0 1px rgba(0,0,0,.45); border-radius: 2px; }
.device .side.action { top: 172px; height: 30px; }
.device .side.vol-up { top: 226px; height: 62px; }
.device .side.vol-down { top: 300px; height: 62px; }
.device .side.power { top: 250px; height: 98px; }
.device .island { top: 13px; width: 120px; height: 35px; border-radius: 20px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.device .island.side { left: 13px; width: 35px; height: 120px; }
.device.tablet { padding: 13px;
  background: linear-gradient(165deg, #3b3b3f 0%, #212124 36%, #2a2a2e 68%, #121214 100%);
  box-shadow: 0 34px 70px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.35),
              inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 2.5px #0e0e10, inset 0 0 0 9px #07070a; }
.device.tablet::after { background: linear-gradient(100deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,.06) 100%); }
/* the front camera sits on the long edge: on the left, halfway down, in portrait */
.device.tablet::before { content: ''; position: absolute; top: 50%; left: 4.5px; width: 5px; height: 5px; margin-top: -2.5px; margin-left: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #2b3140, #05060a 70%); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.device.tablet.landscape::before { top: 4.5px; left: 50%; margin-top: 0; margin-left: -2.5px; }
.device.tablet .glare { background: linear-gradient(118deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 42%); }
.device-wrap::after { left: 14%; right: 14%; bottom: 26px; height: 36px; opacity: .7; }
.device-caption { font-size: 12px; color: var(--faint); }
/* -- Flow: one wire for many, until a press --------------------------------------------------- */
.flow-edge.folded, .flow-edge-live.folded { display: none; }
.flow-sum { fill: none; stroke: var(--kc, var(--wire)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.flow-sum.live { stroke-dasharray: 10 8; animation: flow-move 1.6s linear infinite; }
.flow-edges.dim .flow-sum { opacity: .12; }
.flow-sum-pill { fill: var(--raised); stroke: var(--kc, var(--hairline-strong)); stroke-width: 1.5; }
.flow-sum-text { font-size: 15px; font-weight: 600; fill: var(--ink); font-family: var(--sans); pointer-events: none; }
.flow-edges.dim .flow-sum-pill, .flow-edges.dim .flow-sum-text { opacity: .25; }
@media (prefers-reduced-motion: reduce) { .flow-sum.live { animation: none; } }
/* -- Flow: the map's tiers, and the wires that wait for a press ------------------------------- */
.flow-lane.entry { --kc: var(--tile-service); }
.flow-lane.surface { --kc: var(--tile-screen); }
.flow-lane.logic { --kc: var(--tile-logic); }
.flow-lane.data { --kc: var(--tile-database); }
.flow-lane.support { --kc: var(--tile-module); }
.flow-lane.proof { --kc: var(--tile-tests); }
.flow-viewport.down .flow-lane.entry, .flow-viewport.down .flow-lane.surface, .flow-viewport.down .flow-lane.logic,
.flow-viewport.down .flow-lane.data, .flow-viewport.down .flow-lane.support, .flow-viewport.down .flow-lane.proof { border-radius: 16px; }
.flow-edge.far:not(.hot):not(.sel), .flow-edge-live.far:not(.hot) { display: none; }
.flow-controls .mode { margin-left: 6px; }
/* -- alive: blood on the wires, a heartbeat on the organs that work ------------------------- */
.flow-blood .drop { fill: var(--kc, var(--wire-hot)); }
.flow-blood .halo { fill: var(--kc, var(--wire-hot)); opacity: .18; }
.flow-blood.folded { display: none; }
.flow-edges.dim .flow-blood { opacity: .15; }
.flow-node.live { animation: heart 2.6s ease-in-out infinite; }
@keyframes heart { 0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 color-mix(in srgb, var(--kc, var(--success)) 0%, transparent); }
                   45% { box-shadow: var(--shadow-sm), 0 0 0 5px color-mix(in srgb, var(--kc, var(--success)) 22%, transparent); } }
.flow-node.live.selected { animation: none; }
@media (prefers-reduced-motion: reduce) { .flow-node.live { animation: none; } .flow-blood { display: none; } }
.flow-edge.hot, .flow-edge.sel { stroke-width: 3; }
.flow-blood .drop { filter: drop-shadow(0 0 3px var(--kc, var(--wire-hot))); }
/* -- the main path, numbered ------------------------------------------------------------------- */
.flow-node .story-step { position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px var(--paper), var(--shadow-sm); z-index: 3; }
.flow-edge.story { stroke-width: 3.5; opacity: 1; stroke: var(--ink); }
.flow-edge.story.folded { display: initial; }

/* -- the Run tab for a training project: live to the step, side by side, the machine under it -- */
.tr-kind { font-size: 12.5px; color: var(--muted); margin: -4px 0 2px; }
.tr-kind b { font-weight: 550; color: var(--ink); }
.tr-head .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.tr-head .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tr-runs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
.tr-runs .lbl { margin-right: 2px; }
.tr-runs .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.tr-runs .chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); opacity: .5; }
.tr-runs .chip.active { color: var(--ink); border-color: var(--hairline-strong); background: var(--surface); }
.tr-runs .chip.active i { background: var(--run, var(--signal)); opacity: 1; }
.tr-kpi.prog .bar.unknown i { background: repeating-linear-gradient(90deg, var(--signal) 0 8px, transparent 8px 14px); opacity: .6; }
.tr-kpi.speed .value, .tr-kpi.meter .value { color: var(--ink); }
.tr-tele { border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-muted); padding: 10px 12px 8px; }
.tr-tele .ttl, .tr-compare .ttl { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.tr-tele .ttl b, .tr-compare .ttl b { font-weight: 550; color: var(--ink); }
.tr-tele .strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
.tr-tele .tm { position: relative; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); padding: 8px 10px 7px; min-height: 60px; overflow: hidden; }
.tr-tele .tm .name { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-tele .tm .value { font-size: 18px; font-weight: 550; letter-spacing: -.02em; color: var(--ink); margin: 2px 0 1px; font-variant-numeric: tabular-nums; }
.tr-tele .tm .sub { font-size: 11px; color: var(--faint); }
.tr-tele .tm .spark { color: var(--faint); opacity: .8; }
.tr-tele .tm.hot .value { color: var(--warning); }
.tr-compare .scroll { overflow-x: auto; }
.tr-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.tr-table th { text-align: left; font-weight: 500; color: var(--faint); font-size: 11.5px; padding: 4px 10px 6px 0; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.tr-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hairline); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.tr-table td b { font-weight: 550; color: var(--ink); }
.tr-table .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.tr-table .live { margin-left: 7px; font-size: 10.5px; color: var(--success); font-weight: 550; text-transform: uppercase; letter-spacing: .04em; }
.tr-table .num, .tr-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tr-table td.best { color: var(--success); font-weight: 550; }
.tr-table td.cfg { font-family: var(--mono); font-size: 11.5px; }
.tr-group { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; grid-column: 1 / -1; margin: 2px 2px -4px; }
.tr-hook { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; border: 1px dashed var(--hairline-strong); border-radius: var(--radius-md); padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.tr-hook .txt { flex: 1 1 240px; }
.tr-hook .txt b { font-weight: 550; color: var(--ink); }
.tr-hook .snip { margin: 0; flex: 1 1 260px; font-size: 11.5px; line-height: 1.45; background: var(--surface-muted); border-radius: 8px; padding: 8px 10px; color: var(--ink); white-space: pre; overflow-x: auto; }
.tr-tele .tm .value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-tele .tm .spark { position: static; display: block; width: 100%; height: 16px; margin-top: 5px; }

/* -- the Run tab's doors: sections under every frame, jobs, the API console, notebooks, the desktop screen -- */
.try-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.try-scroll > .try-stage { flex: 0 0 auto; height: calc(100vh - 230px); min-height: 460px; }
.try-scroll > .tr { flex: 0 0 auto; overflow: visible; }
.try-scroll > .nb-stage, .try-scroll > .desk-stage { flex: 0 0 auto; }
.rs-list { padding: 12px 14px 28px; display: flex; flex-direction: column; gap: 12px; }
.rs { border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.rs.loading { opacity: .8; }
.rs-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: 13px; color: var(--muted); user-select: none; }
.rs-head b { font-weight: 550; color: var(--ink); }
.rs-head .i.right { transform: rotate(-90deg); }
.rs-head .i.down { transform: rotate(0); }
.rs-sum { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rs-sum .ok, .rs-checks .ok, .job-con.ok .txt { color: var(--success); }
.rs-sum .bad, .rs-checks .bad, .job-con.bad .txt { color: var(--danger, #ef4444); }
.rs-sum .dim, .dim { color: var(--faint); }
.rs-sum .cov { margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--hairline); font-size: 11.5px; }
.lamp { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-right: 4px; vertical-align: 0; }
.lamp.ok { background: var(--success); } .lamp.bad { background: var(--danger, #ef4444); }
.rs-body { border-top: 1px solid var(--hairline); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.rs-empty { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rs-empty.bad { color: var(--danger, #ef4444); }
.rs-label { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.rs-pre { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; background: var(--surface-muted); border-radius: 8px; padding: 8px 10px; max-height: 320px; overflow: auto; }
.rs-scroll { overflow-x: auto; }
.rs-table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.rs-table th { text-align: left; font-weight: 500; color: var(--faint); font-size: 11.5px; padding: 4px 10px 5px 0; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.rs-table td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--hairline); color: var(--muted); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.rs-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.rs-table.compact td, .rs-table.compact th { font-size: 12px; padding: 4px 9px 4px 0; }
.rs-run { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-run .sel { max-width: 360px; font-size: 12.5px; }
.rs-run .url { flex: 1 1 200px; }
.rs-hist { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.rs-hist .bar { width: 10px; height: 100%; display: flex; flex-direction: column-reverse; gap: 1px; }
.rs-hist .bar i { display: block; border-radius: 2px; }
.rs-hist .bar .p { background: var(--success); } .rs-hist .bar .f { background: var(--danger, #ef4444); }
.rs-file { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.rs-file.bad { border-color: color-mix(in srgb, var(--danger, #ef4444) 50%, var(--hairline)); }
.rs-file .fh { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12.5px; cursor: pointer; background: var(--surface-muted); }
.rs-file .fh code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.rs-file .fh .n { margin-left: auto; color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.rs-file.bad .fh .n { color: var(--danger, #ef4444); }
.rs-file .rows { padding: 4px 8px 6px; }
.rs-file .row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.rs-file .row .dot { flex: 0 0 8px; }
.rs-file .row .name { flex: 1 1 auto; min-width: 0; }
.rs-file .row .dur { flex: 0 0 auto; min-width: 44px; text-align: right; }
.rs-file .row .bar { flex: 0 0 90px; }
.rs-file .row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.rs-file .row.passed .dot { background: var(--success); } .rs-file .row.failed .dot, .rs-file .row.error .dot { background: var(--danger, #ef4444); } .rs-file .row.skipped .dot { background: var(--warning); }
.rs-file .row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.rs-file .row.failed .name, .rs-file .row.error .name { color: var(--danger, #ef4444); }
.rs-file .row .dur { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.rs-file .row .bar { height: 4px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; }
.rs-file .row .bar i { display: block; height: 100%; background: var(--signal); opacity: .7; }
.rs-file .msg { margin: 0 2px 6px 24px; font-family: var(--mono); font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: var(--muted); background: var(--surface-muted); border-left: 3px solid var(--danger, #ef4444); padding: 6px 10px; border-radius: 0 8px 8px 0; max-height: 260px; overflow: auto; }
.job-con { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.job-con .head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12.5px; background: var(--surface-muted); color: var(--muted); }
.job-con .head .txt { color: var(--ink); font-weight: 550; }
.job-con .head .time { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.job-con .spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--hairline-strong); border-top-color: var(--signal); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.job-con .out { margin: 0; padding: 8px 10px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; background: var(--surface); color: var(--muted); }
.rs-db, .rs-files { display: flex; flex-direction: column; gap: 6px; }
.rs-db .dh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.rs-db .dh code, .tb .th code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.rs-db .dh .n, .tb .th .n { color: var(--faint); font-size: 11.5px; margin-left: auto; white-space: nowrap; }
.tb { border: 1px solid var(--hairline); border-radius: 10px; padding: 6px 10px; }
.tb .th { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; flex-wrap: wrap; }
.tb .th b { font-weight: 550; color: var(--ink); }
.tb .th .cols { flex-basis: 100%; color: var(--faint); font-size: 11.5px; padding-left: 20px; }
.tb .tag, .rs-outs .tag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-muted); color: var(--muted); border: 1px solid var(--hairline); }
.rs-nums { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--faint); padding: 6px 0 2px; }
.rs-nums .nm b { color: var(--muted); font-weight: 550; }
.rs-query { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.rs-query .sql { flex: 1 1 320px; font-family: var(--mono); font-size: 12px; border: 1px solid var(--hairline); border-radius: 8px; padding: 7px 9px; background: var(--surface); color: var(--ink); resize: vertical; }
.rs-query .qout { flex-basis: 100%; }
.api { display: flex; flex-direction: column; gap: 10px; }
.api .routes { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow: auto; border: 1px solid var(--hairline); border-radius: 10px; padding: 4px; }
.api .route { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: none; background: transparent; border-radius: 7px; text-align: left; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.api .route:hover, .api .route.active { background: var(--surface-muted); color: var(--ink); }
.api .m, .api .call .m { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: #fff; padding: 1px 6px; border-radius: 5px; min-width: 44px; text-align: center; }
.api .route code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.api .route .s { color: var(--faint); font-size: 11.5px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.api .con { display: flex; flex-direction: column; gap: 8px; }
.api .con .line { display: flex; gap: 8px; align-items: center; }
.api .con .line .url { flex: 1; font-family: var(--mono); font-size: 12.5px; }
.api .con .sel.m { font-family: var(--mono); font-weight: 600; }
.api .con .body { font-family: var(--mono); font-size: 12px; border: 1px solid var(--hairline); border-radius: 8px; padding: 7px 9px; background: var(--surface); color: var(--ink); resize: vertical; }
.api .res .status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.api .res .status b { font-family: var(--mono); padding: 1px 8px; border-radius: 6px; background: var(--surface-muted); }
.api .res .status.ok b { color: var(--success); } .api .res .status.bad b { color: var(--danger, #ef4444); }
.api .res .out { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; background: var(--surface-muted); border-radius: 8px; padding: 8px 10px; max-height: 360px; overflow: auto; color: var(--ink); }
.api .calls { display: flex; flex-direction: column; gap: 2px; }
.api .call { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); }
.api .call code { font-family: var(--mono); color: var(--muted); }
.api .call b { font-family: var(--mono); font-weight: 550; }
.api .call.ok b { color: var(--success); } .api .call.bad b { color: var(--danger, #ef4444); }
.api-window { max-width: none; }
.api-box { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.api-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.api-head b { font-weight: 550; color: var(--ink); }
.nb-stage { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 4px; }
.nb-bar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.nb-bar .path { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.nb-cells { display: flex; flex-direction: column; gap: 10px; }
.nb-md { font-size: 13.5px; line-height: 1.55; color: var(--ink); padding: 2px 4px; }
.nb-cell { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: var(--surface); }
.nb-cell .in { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: var(--surface-muted); }
.nb-cell .in .tag { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; padding-top: 2px; min-width: 44px; }
.nb-cell .in .code { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--ink); flex: 1; }
.nb-cell .out { margin: 0; padding: 8px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--muted); border-top: 1px solid var(--hairline); max-height: 320px; overflow: auto; }
.nb-cell .out.err { color: var(--danger, #ef4444); background: color-mix(in srgb, var(--danger, #ef4444) 6%, transparent); }
.nb-cell .pic { display: block; max-width: 100%; margin: 8px 12px; border-radius: 6px; cursor: zoom-in; }
.nb-cell .html { display: block; width: 100%; height: 220px; border: none; border-top: 1px solid var(--hairline); background: #fff; }
.desk-stage { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 4px; }
.desk-bar { display: flex; align-items: center; gap: 8px; }
.desk-bar .url { flex: 1; font-family: var(--mono); font-size: 12.5px; }
.desk-hint { font-size: 11.5px; color: var(--faint); }
.desk-shell { border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-lg); background: #1b1b1b; outline: none; cursor: default; }
.desk-shell:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 40%, transparent), var(--shadow-lg); }
.desk-shell .screen { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; user-select: none; -webkit-user-drag: none; }
.rs-videos { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-videos figure { margin: 0; flex: 1 1 280px; max-width: 480px; }
.rs-videos video { width: 100%; border-radius: 8px; background: #000; }
.rs-videos figcaption { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.rs-outs { display: flex; flex-direction: column; gap: 4px; }
.rs-outs .row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.rs-outs .row a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-outs .row .size, .rs-outs .row .at { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.rs-outs .row .at { margin-left: auto; }
.rs-checks .sumline { font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.rs-checks .list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.rs-checks .row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.rs-checks .row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.rs-checks .row.ok .dot { background: var(--success); } .rs-checks .row.bad .dot { background: var(--danger, #ef4444); }
.rs-checks .row .name { color: var(--ink); }
.job-con .stdin { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--hairline); background: var(--surface-muted); }
.job-con .stdin .prompt { font-family: var(--mono); color: var(--signal); font-weight: 600; }
.job-con .stdin input { flex: 1; border: none; background: transparent; font-family: var(--mono); font-size: 12px; color: var(--ink); outline: none; }
.try-term .job-con { margin: 10px 12px; }
.pub { display: flex; flex-direction: column; gap: 8px; }
.pub-row { display: flex; flex-direction: column; gap: 6px; }
.pub-row .btn, .pub-row .dim { align-self: flex-start; }
.pub-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.pub-link a { color: var(--ink); font-family: var(--mono); font-size: 12.5px; text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
.api .con .auth { display: none; flex-direction: column; gap: 6px; }
.api .con .auth.open { display: flex; }
.api .con .auth input { font-family: var(--mono); font-size: 12px; }
.api .con .line .chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.api .con .line .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.phone-stage { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 4px; }
.phone-stage .try-stage.framed { flex: 0 0 auto; min-height: 420px; overflow: hidden; padding-top: 14px; }
.try-scroll > .phone-stage { flex: 0 0 auto; }
.phone-screen { display: block; object-fit: cover; background: #000; user-select: none; -webkit-user-drag: none; cursor: default; }
.device.real:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 40%, transparent); }
/* -- the Android phone, as the reference: a crimson body with a bright rim, a thin black bezel,
      big rounded corners, a centred camera hole, volume and power on the right side only -- */
.device.android { padding: 7px; position: relative;
  background: linear-gradient(160deg, #d9486f 0%, #b82c54 32%, #921c40 68%, #a8264b 100%);
  box-shadow: 0 34px 70px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.35),
              inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 0 2px rgba(120,20,55,.9); }
.device.android::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.14) 100%); }
.device.android .screen { position: relative; overflow: hidden; background: #000; box-shadow: 0 0 0 3px #060608, inset 0 0 0 1px rgba(255,255,255,.05); }
.device.android .hole { position: absolute; top: 11px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #000;
  box-shadow: inset 0 0 0 2px #0f0f12, inset 0 0 4px 1px rgba(90,120,160,.45), 0 0 0 1.5px rgba(0,0,0,.6); z-index: 2; }
.device.android .glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 36%); }
.device.android .side { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #7a1535, #e0567c); box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.device.android .side.vol-up { left: auto; right: -3px; top: 150px; height: 44px; }
.device.android .side.vol-down { left: auto; right: -3px; top: 202px; height: 44px; }
.device.android .side.power { left: auto; right: -3px; top: 272px; height: 70px; }

/* -- how the app was used: the walk as a click path ------------------------------------ */
.walks { display: flex; flex-direction: column; gap: 10px; }
.walk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.walk-login .line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.walk-login input { width: 150px; padding: 5px 8px; font: inherit; font-size: 12px; border: 1px solid var(--line, #333); border-radius: 6px; background: var(--bg-2, #111); color: inherit; }
.walk { border: 1px solid var(--line, #2a2a2a); border-radius: 8px; overflow: hidden; }
.walk-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; }
.walk-head .when { color: var(--dim, #888); min-width: 70px; }
.walk-head .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.walk-head .chip { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--bg-2, #1a1a1a); color: var(--dim, #999); }
.walk-strip { display: flex; gap: 10px; overflow-x: auto; padding: 8px 10px 12px; scroll-snap-type: x proximity; }
.walk-frame { flex: 0 0 auto; width: 132px; margin: 0; scroll-snap-align: start; cursor: zoom-in; }
.walk-frame .pic { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--line, #2a2a2a); background: #000; }
.walk-frame img { display: block; width: 100%; height: auto; }
.walk-frame .press { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid #fff; background: rgba(224, 92, 60, .55); box-shadow: 0 0 0 4px rgba(224, 92, 60, .25); pointer-events: none; }
.walk-frame.dead .press { background: rgba(160, 160, 160, .5); box-shadow: 0 0 0 4px rgba(160, 160, 160, .2); }
.walk-frame.err .press { background: rgba(220, 40, 40, .6); }
.walk-frame figcaption { font-size: 11px; line-height: 1.3; padding-top: 5px; display: flex; flex-direction: column; gap: 1px; }
.walk-frame figcaption b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.walk-frame figcaption span { color: var(--dim, #888); }
.walk-frame.err figcaption span { color: #e05c3c; }

/* -- memory: what Antelligen knows about the repository --------------------------------------- */
.mem { display: flex; flex-direction: column; gap: 8px; }
.mem .line { display: flex; gap: 6px; }
.mem .line input { flex: 1; min-width: 0; padding: 5px 8px; font: inherit; font-size: 12px; border: 1px solid var(--line, #333); border-radius: 6px; background: var(--bg-2, #111); color: inherit; }
.mem-notes, .mem-runs { display: flex; flex-direction: column; gap: 3px; }
.mem-runs .label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim, #888); margin-top: 4px; }
.mem-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 6px; border-radius: 6px; }
.mem-row:hover { background: var(--bg-2, #151515); }
.mem-row .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-row .icon-btn { visibility: hidden; }
.mem-row:hover .icon-btn { visibility: visible; }

/* -- the chat's cap chip ----------------------------------------------------------------- */
.cap-chip { position: relative; overflow: hidden; }
.cap-chip .cap-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--frac, 0) * 100%); background: var(--accent, #e05c3c); opacity: .8; }
.cap-chip.near .cap-bar { background: #e0a23c; }
.cap-chip.over { color: #e05c3c; }
/* -- the doors on the front page: GitHub, Google -------------------------------------------- */
.doors-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.doors-row > [hidden] { display: none; }
/* with no door set up the row itself is hidden: its own display once kept a lone "or" over the e-mail box */
.doors-row[hidden] { display: none; }
.google-btn, .github-btn { gap: 10px; }
.g-mark { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); display: inline-block; }
.gh-mark { width: 16px; height: 16px; display: inline-block; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.doors-row .or { display: flex; align-items: center; gap: 10px; color: var(--dim, #888); font-size: 12px; }
.doors-row .or::before, .doors-row .or::after { content: ""; flex: 1; height: 1px; background: var(--line, #333); }
/* -- a computer's code, shown to be compared before it is approved ------------------------ */
/* -- the app's front door: over the page, which stays as it is underneath ------------------- */
.signin.app-door { position: fixed; inset: 0; z-index: 4000; overflow: auto; }
.app-code { margin: 6px 0 10px; }
.app-code .device-code, .device-ask .device-code { font: 600 28px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .12em; margin: 10px 0 14px; }

/* -- the desktop and the product ------------------------------------------------------- */
.cloud-card { margin-bottom: 12px; }
.cloud-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line, #333); border-radius: 8px; }
.cloud-code b { font-size: 20px; letter-spacing: .12em; font-family: ui-monospace, monospace; }

/* -- the planner's question --------------------------------------------------------------- */
.w-question { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--accent, #e05c3c); border-radius: 10px; background: color-mix(in srgb, var(--accent, #e05c3c) 8%, transparent); }
.w-question.answered { border-color: var(--line, #333); background: transparent; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.w-question .q-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.w-question p { margin: 4px 0 8px; }
.w-question .q-choices { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.w-question .q-line { display: flex; gap: 6px; }
.w-question .q-line input { flex: 1; min-width: 0; padding: 6px 9px; font: inherit; font-size: 13px; border: 1px solid var(--line, #333); border-radius: 6px; background: var(--bg-2, #111); color: inherit; }

.w-pill .w-target { color: var(--dim, #888); font-size: 11.5px; padding-left: 6px; border-left: 1px solid var(--line, #333); margin-left: 6px; }

/* -- what a finished turn amounts to --------------------------------------
   One line: does it work, in what words, and how long it took. The engine's
   own numbers - which check, how many tests, how many steps, how many
   tokens - are a click below, because they are the operator's business and
   not the answer to "build me a recipe app". */
.turn .result {
  margin-top: 10px;
  border: 1px solid var(--line, #e6e1d8);
  border-radius: 12px;
  background: var(--bg-2, #fbfaf7);
  overflow: hidden;
}
.turn .result-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.turn .result-head:hover { background: var(--hover, rgba(0,0,0,.025)); }
.turn .result .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--good, #2f855a) 14%, transparent);
  color: var(--good, #2f855a);
}
.turn .result.not-ok .mark {
  background: color-mix(in srgb, var(--warn, #b7791f) 16%, transparent);
  color: var(--warn, #b7791f);
}
.turn .result .verdict { font-weight: 600; flex: none; }
.turn .result .words { color: var(--dim, #7b7469); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn .result .grow { flex: 1; }
.turn .result .took { color: var(--dim, #7b7469); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.turn .result .chev { color: var(--faint, #a9a297); display: inline-flex; transition: transform .16s ease; flex: none; }
.turn .result.open .chev { transform: rotate(180deg); }

.turn .result-more { display: none; padding: 2px 14px 12px; border-top: 1px solid var(--line, #e6e1d8); }
.turn .result.open .result-more { display: block; }
.turn .result-more .fact {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.04));
}
.turn .result-more .fact:last-child { border-bottom: 0; }
.turn .result-more .fact .k { color: var(--dim, #7b7469); font-family: var(--mono, ui-monospace, monospace); }
.turn .result-more .fact .v { color: var(--ink, #2c2a26); font-variant-numeric: tabular-nums; }
.turn .result-more .fact.check.no .k,
.turn .result-more .fact.check.no .v { color: var(--warn, #b7791f); }

@media (max-width: 560px) {
  .turn .result .words { display: none; }
}

/* -- the computer, when it is not fine ---------------------------------- */
.machine-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; margin-right: 6px; border: 1px solid transparent; }
.machine-chip.high { color: var(--warn, #b7791f); border-color: color-mix(in srgb, var(--warn, #b7791f) 40%, transparent); background: color-mix(in srgb, var(--warn, #b7791f) 10%, transparent); }
.machine-chip.critical { color: var(--bad, #c53030); border-color: color-mix(in srgb, var(--bad, #c53030) 40%, transparent); background: color-mix(in srgb, var(--bad, #c53030) 10%, transparent); }


/* -- bots: marks, states, the sidebar's projects ------------------------------------------- */
.sigil-wrap { display: inline-flex; flex: none; line-height: 0; }
.sigil-wrap .body { transform-box: fill-box; transform-origin: center 60%; }
.sigil-wrap .eye { transform-box: fill-box; transform-origin: center; animation: sigil-blink 6.5s ease-in-out infinite; animation-delay: var(--blink-delay, 0s); }
.sigil-wrap.working .body { animation: sigil-breathe 2.4s ease-in-out infinite; }
@keyframes sigil-breathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.07) translateY(-.5px); } }
@keyframes sigil-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) { .sigil-wrap .eye, .sigil-wrap.working .body { animation: none; } }
.bots-row { display: flex; align-items: center; gap: 3px; padding: 3px 8px 5px 24px; }
.bot-mark { display: inline-flex; padding: 3px; border-radius: 9px; }
.bot-mark:hover, .bot-mark.active { background: var(--press); }
.session-row.running .title { color: var(--ink); }
.session-row.running .meta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: pulse 1.4s ease-in-out infinite; }
.session-row.bot { padding-left: 14px; gap: 8px; }
.session-row.bot .who { font-weight: 600; margin-right: 6px; }
.session-row.bot .state { color: var(--faint); font-size: 12px; }
.session-row.bot.working .state { color: var(--signal); }
.session-row.bot.needs-attention .state { color: #d99a1e; }
.session-row.bot.in-review .state { color: #8b6fe0; }
.session-row .unread { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; display: inline-block; margin-right: 6px; }
.repo-head .chev { opacity: .65; margin-left: 2px; margin-right: -4px; }
.repo-head .chev svg { transition: transform .15s ease; }
.repo-head.open .chev svg { transform: rotate(90deg); }
.repo-row .dot.running { width: 7px; height: 7px; margin-left: 6px; background: var(--signal); border-radius: 50%; animation: pulse 1.4s ease-in-out infinite; display: inline-block; }
.filter-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); background: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 2px 8px; cursor: pointer; }
.filter-btn:hover { color: var(--ink); border-color: var(--hairline-strong); }
.roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; max-width: 620px; }
.roster-bot { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; color: var(--ink); font-size: 13px; }
.roster-bot:hover { border-color: var(--hairline-strong); }
.roster-bot .who { font-weight: 600; }
.roster-bot .what { color: var(--faint); font-size: 12px; }
.bot-title { color: var(--faint); font-size: 12.5px; white-space: nowrap; }

/* -- where a bot runs: two cards ---------------------------------------------------------- */
.where { display: flex; flex-direction: column; gap: 6px; padding: 4px 8px 6px; min-width: 300px; }
.where-card { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.where-card:hover { border-color: var(--accent); }
.where-card.chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.where-card.off { opacity: .6; cursor: default; }
.where-icon { font-size: 20px; line-height: 1.2; }
.where-body { display: flex; flex-direction: column; gap: 2px; }
.where-body b { font-size: 13.5px; }
.where-line { font-size: 12.5px; color: var(--accent); }
.where-body .sub { font-size: 12px; color: var(--faint); margin: 0; }

.where .credit.low { color: var(--warn, #b7791f); }

/* -- the work view, quieter ------------------------------------------------------------ */
.turn-who { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.turn-who .name { font-weight: 600; color: var(--ink); }
.turn-who .what { color: var(--faint); }
.w-quiet { color: var(--faint); font-size: 12.5px; padding: 2px 2px 6px; }
.w-peek { font-family: var(--mono); font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.w-chip-head { font-size: 13px; color: var(--muted); }
.w-chip-head .label { color: var(--ink-2); }
.w-status .aside { white-space: normal; }
.work.summarized .w-verify:not(.bad) { display: none; }
.work.summarized .w-status.finish:not(.bad) { display: none; }
.bot-state { color: var(--faint); font-size: 13px; }
.machine-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); font-size: 13px; color: var(--muted); }
.machine-head .name { font-weight: 600; color: var(--ink); }
.machine-head .state { color: var(--faint); }
.machine-stage, .machine-stage iframe { background: #141414; }
.rs-body[hidden] { display: none !important; }

/* -- round three -------------------------------------------------------------- */
.quiet-link { color: var(--muted); font-size: 13px; padding: 4px 8px; border-radius: 8px; }
.quiet-link:hover { color: var(--ink); background: var(--press); }
.roster { margin-top: 18px; }
.composer-bar .sel.plan { color: var(--muted); }
.composer-bar .sel.plan.on { color: var(--ink); background: var(--press); }
.w-progress > span { white-space: nowrap; flex: none; }
.w-progress .step { flex: 1 1 auto; }
.result-more .fact.meta { color: var(--faint); font-size: 12.5px; padding-top: 6px; }
.turn-who button.name { font-weight: 600; color: var(--ink); padding: 0; background: none; border: none; cursor: pointer; }
.turn-who button.name:hover { text-decoration: underline; }
.side-more.older { display: flex; align-items: center; gap: 6px; padding-left: 12px; margin-top: 6px; }
.try-empty { flex: 0 0 auto; padding: 26px 30px 12px; gap: 10px; }
.composer-bar .sel.plan { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 6px 10px; }

/* -- round five ----------------------------------------------------------------- */
.turn .result-head .words { white-space: normal; flex: 1 1 auto; min-width: 0; line-height: 1.35; overflow: visible; text-overflow: clip; }
.turn .result-head .took { flex: none; }
.bots-label { color: var(--faint); font-size: 11px; margin-right: 6px; letter-spacing: .02em; }
.greeting.project h1 { font-size: 24px; }
.greeting.project .roster { margin-top: 10px; }

/* -- the bots' chats ------------------------------------------------------------ */
.bot-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12vh auto 0; max-width: 520px; text-align: center; }
.bot-intro .bi-name { font-size: 22px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.bot-intro .bi-does { color: var(--muted); font-size: 14px; line-height: 1.5; }
.bot-intro .bi-asks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.bot-intro .bi-ask { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: none; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.bot-intro .bi-ask:hover { border-color: var(--hairline-strong); background: var(--press); color: var(--ink); }
.bot-intro .bi-where { color: var(--faint); font-size: 12.5px; margin-top: 10px; }
.judgement { border: 1px solid var(--hairline); border-radius: 14px; padding: 6px 14px 10px; margin: 6px 0 10px; }
.judgement .j-head { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.judgement .j-head .mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--warn, #b7791f) 16%, transparent); color: var(--warn, #b7791f); }
.judgement.ok .j-head .mark { background: color-mix(in srgb, var(--good, #2f855a) 14%, transparent); color: var(--good, #2f855a); }
.judgement .j-score { color: var(--faint); font-size: 13px; }
.judgement .j-count { font-size: 12.5px; color: var(--muted); }
.judgement .j-count.missing { color: var(--danger, #c05a4a); }
.judgement .j-item { border-top: 1px solid var(--hairline); }
.judgement .j-item summary { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; cursor: pointer; list-style: none; font-size: 14px; color: var(--ink); }
.judgement .j-item summary::-webkit-details-marker { display: none; }
.judgement .j-verdict { flex: none; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; background: var(--press); color: var(--muted); }
.judgement .j-item.missing .j-verdict { color: var(--danger, #c05a4a); }
.judgement .j-evidence { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 0 0 10px 0; }
.judgement .j-met { border-top: 1px solid var(--hairline); }
.judgement .j-met summary { padding: 8px 0; cursor: pointer; color: var(--muted); font-size: 13px; }
.judgement .j-met ul { margin: 0 0 8px; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.judgement .j-note { color: var(--faint); font-size: 13px; line-height: 1.5; padding: 6px 0 0; }
.turn-who .w-pill { margin: 0; padding: 0 0 0 2px; border: 0; background: none; font-size: 13px; color: var(--muted); }
.turn-who .w-pill .what::before { content: '· '; color: var(--faint); }
.turn-who.running .what { display: none; }
.turn-who.running .w-pill .what { display: inline; }
.w-glyph { color: var(--faint); margin-right: 6px; flex: none; }
.bot-title { white-space: nowrap; flex: none; }

/* -- hand-offs and refusals ------------------------------------------------ */
.handoff { margin: 0 0 10px; }
.handoff .turn-who { margin: 0 0 4px; }
.handoff .h-intro { color: var(--ink-2); font-size: 14px; line-height: 1.5; padding: 4px 0 8px; }
.handoff .h-intro p { margin: 0 0 6px; }
.w-refusal { margin: 0 0 8px 24px; }
.w-refusal summary { color: var(--faint); font-size: 12.5px; cursor: pointer; list-style: none; }
.w-refusal summary::-webkit-details-marker { display: none; }
.w-refusal summary::before { content: '› '; }
.w-refusal[open] summary::before { content: '⌄ '; }
.w-refusal .w-out { margin-top: 6px; }

/* -- the Chat surface ---------------------------------------------------------- */
.surface-switch { display: flex; margin: 4px 12px 8px; padding: 3px; border-radius: 12px; background: var(--press); }
.surface-switch button { flex: 1; padding: 6px 10px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--muted); background: none; border: 0; cursor: pointer; }
.surface-switch button.on { background: var(--bg, #141414); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.chat-list { padding: 2px 8px 8px; }
.chat-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; text-align: left; background: none; border: 0; cursor: pointer; color: var(--ink); }
.chat-row:hover, .chat-row.active { background: var(--press); }
.chat-row .grow { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 1px; }   /* fills the row: the time stays at the right edge, however short the last words */
.chat-row .who { font-weight: 600; font-size: 14px; }
.chat-row .last { color: var(--faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row.running .last { color: var(--signal); }
.chat-row .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--faint); font-size: 11.5px; flex: none; min-width: 34px; margin-left: auto; }
.chat-row .needs { color: #e0a33a; font-size: 11px; }
.chat-home .greeting h1 { font-size: 24px; }
.bot-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px auto 0; max-width: 720px; }
.bot-card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 200px; padding: 22px 16px 18px; border-radius: 16px; border: 1px solid var(--hairline); background: none; color: var(--ink); cursor: pointer; text-align: center; }
.bot-card:hover { border-color: var(--hairline-strong); background: var(--press); }
.bot-card b { font-size: 16px; }
.bot-card span { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.bot-card.new { border-style: dashed; color: var(--muted); }
.bot-card.new .i { color: var(--faint); }
.new-bot h2 { margin: 0 0 14px; font-size: 18px; }
.new-bot .field { margin-bottom: 12px; }
.new-bot input, .new-bot textarea { width: 100%; }
.new-bot .kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.new-bot .kind { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hairline); background: none; color: var(--ink); cursor: pointer; text-align: left; }
.new-bot .kind span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.new-bot .kind.on { border-color: var(--accent, #c96442); background: var(--press); }
.new-bot .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.new-bot .face-preview { display: flex; justify-content: center; margin: 4px 0 14px; }
.new-bot .faces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.new-bot .face { padding: 4px; border-radius: 10px; border: 1px solid transparent; background: none; cursor: pointer; line-height: 0; }
.new-bot .face.on { border-color: var(--hairline-strong); background: var(--press); }
.new-bot .swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.new-bot .swatch.on { border-color: var(--ink); }

/* a chat bot's name in the header: fixed, not a field */
.topbar .title-fixed { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }