/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — taken from the landing, not invented here. Deep night, one aurora,
   everything else quiet. The aurora appears in exactly three places: the goal
   line, the partner's edge, and the live pulse. Nowhere else.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#111726; --ink:#eef1f8; --muted:#a2adc4; --faint:#768399;
  --line:rgba(163,178,216,.17); --line2:rgba(163,178,216,.30);
  --surf:rgba(163,178,216,.07); --surf2:rgba(163,178,216,.13);
  --panel:#182034; --panelT:rgba(24,32,52,.92);
  --violet:#7c5cff; --cyan:#22d3ee; --lime:#a3e635; --mint:#5ee0a0; --amber:#fbbf24; --rose:#fb7185;
  --aurora:linear-gradient(100deg,#7c5cff,#22d3ee 55%,#a3e635);
  /* the instrument surface: graphite, never a gradient */
  --fill:#e8ecf6; --fill-2:rgba(232,236,246,.30); --onfill:#04070d;
  --glowA:rgba(139,110,255,.20); --glowB:rgba(34,211,238,.11);
  --glass:rgba(28,37,59,.62); --glassT:rgba(24,32,52,.54);
  --lift:0 1px 0 rgba(255,255,255,.06) inset, 0 12px 34px rgba(4,8,18,.42);
  --lift-2:0 1px 0 rgba(255,255,255,.08) inset, 0 22px 60px rgba(4,8,18,.52);
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --disp:'Space Grotesk',sans-serif; --body:'Inter',-apple-system,sans-serif;
  --r:14px; --r-s:10px;
}
:root[data-theme="light"]{
  --fill:#0c1220; --fill-2:rgba(12,18,32,.24); --onfill:#ffffff;
  --bg:#f6f7fb; --ink:#0c1220; --muted:#5a6478; --faint:#8b94a6;
  --line:rgba(12,18,32,.11); --line2:rgba(12,18,32,.20);
  --surf:rgba(12,18,32,.035); --surf2:rgba(12,18,32,.07);
  --panel:#ffffff; --panelT:rgba(255,255,255,.94);
  --violet:#6b46e5; --cyan:#0891b2; --lime:#5f8f13; --mint:#0f9d63; --amber:#b45309; --rose:#e11d48;
  --glowA:rgba(124,92,255,.10); --glowB:rgba(34,211,238,.05);
  --glass:rgba(255,255,255,.58); --glassT:rgba(255,255,255,.52);
  --lift:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 28px rgba(24,32,56,.10);
  --lift-2:0 1px 0 rgba(255,255,255,.9) inset, 0 20px 52px rgba(24,32,56,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
.app{isolation:isolate}
/* THE PLANE. One photographic surface, far behind everything, with the light
   sitting on top of it. Every panel above is glass over this — that is where
   the depth comes from, not from painting each box a different grey. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:url(art/bg-deep.webp) center/cover no-repeat;opacity:.80;
  filter:saturate(1.15) contrast(.98) brightness(1.5)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1250px 700px at 78% -20%,var(--glowA),transparent 60%),
             radial-gradient(900px 600px at 4% 106%,var(--glowB),transparent 62%),
             linear-gradient(180deg,rgba(17,23,38,.42),rgba(17,23,38,.72))}
:root[data-theme="light"] body::before{background-image:url(art/bg-light.webp);opacity:.55;
  filter:grayscale(1) brightness(1.06) contrast(.96)}
:root[data-theme="light"] body::after{
  background:radial-gradient(1250px 700px at 78% -20%,var(--glowA),transparent 60%),
             linear-gradient(180deg,rgba(246,247,251,.44),rgba(246,247,251,.74))}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:8px}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--surf2);border-radius:5px}
::selection{background:rgba(124,92,255,.35)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.m{font-family:var(--mono);font-size:.86em}

/* ── frame ─────────────────────────────────────────────────────────────── */
.app{position:relative;z-index:1;display:grid;grid-template-columns:272px minmax(0,1fr) 324px;grid-template-rows:54px 1fr;height:100vh}
.top{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 18px 0 20px;border-bottom:1px solid var(--line);background:var(--glass);backdrop-filter:blur(26px) saturate(1.3)}
.top .wm{height:24px;width:auto;display:block;--bc-logo-ink:var(--ink)}
.top .sp{flex:1}
.pulse:empty{display:none}
.pulse{display:flex;align-items:center;gap:9px;padding:5px 13px 5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surf);font-size:12.5px;color:var(--muted);max-width:520px;overflow:hidden;white-space:nowrap}
.pulse i{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none;animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.pulse b{color:var(--ink);font-weight:500}
.dev{display:flex;align-items:center;gap:7px;font:400 10.5px/1 var(--mono);color:var(--faint)}
.dev .seg{display:flex;background:var(--surf);border:1px solid var(--line);border-radius:999px;padding:3px}
.dev .seg button{padding:4px 10px;border-radius:999px;font:400 11px/1 var(--mono);color:var(--muted)}
.dev .seg button.on{background:var(--ink);color:var(--bg)}
#mebadge{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 5px;border:1px solid var(--line);border-radius:999px;background:var(--surf)}
#mebadge .av{width:24px;height:24px;border-radius:50%;background:var(--fill);color:var(--onfill);display:grid;place-items:center;font:600 10px var(--disp)}
#mebadge span{font-size:12.5px;color:var(--ink)}

/* ── rail: SUBJECTS and their rooms. Never a tools menu. ───────────────── */
.rail{border-right:1px solid var(--line);background:var(--glass);backdrop-filter:blur(26px) saturate(1.3);overflow:auto;padding:10px 8px 12px;display:flex;flex-direction:column;gap:2px}
.rail .today{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;border:1px solid var(--line);background:var(--surf);margin-bottom:10px}
.rail .today.on{border-color:var(--line2);background:var(--surf2)}
.rail .today .d{font:600 14px var(--disp)}
.rail .today .s{font-size:11.5px;color:var(--muted)}
.rail .today .n{margin-left:auto;font:500 11px var(--mono);color:var(--bg);background:var(--amber);border-radius:999px;padding:2px 7px}
.rail h4{font:500 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:14px 12px 7px;display:flex;justify-content:space-between}
.rail h4 .c{font:400 10px var(--mono);letter-spacing:0;text-transform:none}
.sbj{display:flex;align-items:center;gap:10px;width:100%;padding:7px 11px;border-radius:10px;text-align:left;color:var(--ink);font-size:13.5px;position:relative}
.sbj:hover{background:var(--surf)}
.sbj.open{background:var(--surf)}
.sbj .mk{width:23px;height:23px;border-radius:7px;display:grid;place-items:center;font:600 9.5px var(--disp);flex:none;background:var(--surf2);color:var(--muted);border:1px solid var(--line)}
.sbj .mk.idea{border-style:dashed;background:transparent}
.sbj .mk.own{background:var(--fill);color:var(--onfill);border-color:transparent}
.sbj .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbj .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);margin-left:auto;flex:none}
.sbj .ch{margin-left:auto;color:var(--faint);font-size:10px;transition:transform .18s}
.sbj.open .ch{transform:rotate(90deg)}
.rooms{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px;padding-left:22px}
.room{display:flex;align-items:center;gap:9px;padding:6px 11px;border-radius:9px;text-align:left;font-size:13px;color:var(--muted);width:100%}
.room:hover{background:var(--surf);color:var(--ink)}
.room.on{background:var(--surf2);color:var(--ink)}
.room.on::before{content:'';position:absolute;left:8px;width:3px;height:16px;border-radius:2px;background:var(--fill)}
.room{position:relative}
.room .h{color:var(--faint);font:400 12px var(--mono);flex:none}
.room .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room .g{margin-left:auto;font:400 10px var(--mono);color:var(--faint);flex:none}
.room .g.live{color:var(--mint)}
.room .g.warn{color:var(--amber)}
.rail .add{padding:6px 12px;font-size:12px;color:var(--faint);text-align:left;border-radius:9px}
.rail .add:hover{color:var(--ink);background:var(--surf)}

/* ── main ──────────────────────────────────────────────────────────────── */
.main{overflow:auto;min-width:0;display:flex;flex-direction:column;scroll-behavior:smooth}
.wrap{padding:22px 34px 34px;display:flex;flex-direction:column;gap:18px;max-width:880px;width:100%;margin:0 auto}
.wrap.wide{max-width:1060px}

/* THE GOAL LINE — every room hangs off a goal. Destination in the aurora,
   measured position in ink, and the gap named as ONE next move. A room with
   no goal shows a dashed line that says so and offers to give it one. */
.goal{border:1px solid var(--line);border-radius:var(--r);background:var(--surf);padding:15px 18px 16px;position:relative;overflow:hidden}
.goal::after{content:none}
.goal .hd{display:flex;align-items:baseline;gap:11px;margin-bottom:11px;position:relative}
.goal .hd .t{font:500 15.5px/1.35 var(--disp);color:var(--ink)}
.goal .hd .as{margin-left:auto;font:400 10.5px var(--mono);color:var(--faint);white-space:nowrap}
.goal .rule{position:relative;height:12px;margin:10px 0 9px}
.goal .rule .tr{position:absolute;inset:5px 0;border-radius:99px;background:var(--surf2)}
.goal .rule .fl{position:absolute;top:5px;bottom:5px;left:0;border-radius:99px;background:var(--fill);opacity:.9}
.goal .rule .pin{position:absolute;top:-1px;width:13px;height:13px;border-radius:50%;background:var(--fill);border:3px solid var(--bg);transform:translateX(-50%);box-shadow:0 0 0 1px var(--line2)}
.goal .legs{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);gap:16px}
.goal .legs b{color:var(--ink);font-weight:500}
.goal .gap{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.goal .gap em{font-style:normal;color:var(--ink);font-weight:500}
.goal .gap .lbl{font:500 9.5px/1.5 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--faint);flex:none;padding-top:1px}
.goal.none{background:transparent;border-style:dashed}
.goal.none .hd .t{color:var(--muted);font-weight:400}
.goal.none .give{margin-left:auto;font-size:12.5px;color:var(--violet);padding:4px 11px;border:1px solid var(--line);border-radius:999px}
.goal.none .give:hover{border-color:var(--violet)}

/* ── the conversation ──────────────────────────────────────────────────── */
.thread{display:flex;flex-direction:column;gap:15px}
.turn{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.turn .who{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--disp);color:var(--ink);background:var(--surf2);border:1px solid var(--line);margin-top:1px;flex:none}
.turn .who.jim{background:transparent;border:0;padding:0}
.turn .who.jim img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(124,92,255,.45))}
.turn .who.ag{font:500 9px var(--mono);color:var(--muted)}
.turn .b{min-width:0}
.turn .nm{font:500 11px/1 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:7px;display:flex;gap:9px;align-items:center}
.turn .nm .t{font:400 10.5px var(--mono);letter-spacing:0;text-transform:none;margin-left:auto}
.turn .say{font-size:14.5px;line-height:1.6;color:var(--muted)}
.turn .say strong{color:var(--ink);font-weight:600}
.turn .say p+p{margin-top:9px}
.turn.me{grid-template-columns:32px minmax(0,1fr)}
.turn.me .say{color:var(--ink);font-size:15px}
.fig{font:500 13.5px var(--mono);color:var(--ink)}
.src{display:inline-flex;align-items:center;gap:6px;font:400 11px var(--mono);color:var(--muted);background:var(--surf);border:1px solid var(--line);border-radius:6px;padding:2px 8px;vertical-align:2px}
.src i{width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.src:hover{border-color:var(--line2);color:var(--ink)}

/* a tool does not live in a menu — it OPENS inside the conversation */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(18px);box-shadow:var(--lift);overflow:hidden;margin-top:4px}
.panel .ph{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surf)}
.panel .ph .ic{width:22px;height:22px;border-radius:6px;background:var(--surf2);border:1px solid var(--line);display:grid;place-items:center;font:600 10px var(--disp);color:var(--ink)}
.panel .ph .nm{font:600 12.5px var(--disp)}
.panel .ph .st{font:400 10.5px var(--mono);color:var(--faint);margin-left:auto}
.panel .ph .x{color:var(--faint);font-size:15px;line-height:1;padding:0 2px}
.panel table{width:100%;border-collapse:collapse;font-size:12.5px}
.panel td,.panel th{padding:8px 14px;border-top:1px solid var(--line);text-align:left}
.panel th{font:500 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border-top:0}
.panel td.n{font-family:var(--mono);text-align:right;color:var(--ink)}
.panel tr:hover td{background:var(--surf)}
.panel .pf{padding:10px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);background:var(--surf)}
.panel .pf .go{margin-left:auto;color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;font-size:12px}
.panel .pf .go:hover{background:var(--surf2)}
.panel .rows{display:flex;flex-direction:column}
.panel .rw{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:13px;align-items:center}
.panel .rw .s{font-size:11.5px;color:var(--muted);margin-top:2px}

/* a decision is never a paragraph — it is a question and its options */
.ask{border-radius:var(--r);padding:15px 17px;background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--line2);box-shadow:var(--lift-2),inset 3px 0 0 var(--fill)}
.ask .q{font:500 16px/1.4 var(--disp);color:var(--ink);margin-bottom:6px}
.ask .w{font-size:13px;color:var(--muted);margin-bottom:13px}
.ask .opts{display:flex;gap:8px;flex-wrap:wrap}
.ask .opts button{padding:8px 14px;border-radius:999px;border:1px solid var(--line2);font-size:13px;color:var(--ink)}
.ask .opts button:hover{background:var(--surf2)}
.ask .opts button.pri{background:var(--fill);color:var(--onfill);border-color:transparent;font-weight:500}
.ask .exp{margin-top:11px;font:400 10.5px var(--mono);color:var(--faint)}

.chips{display:flex;flex-wrap:wrap;gap:7px;padding-left:44px}
.chips button{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surf);font-size:13px;color:var(--muted)}
.chips button:hover{border-color:var(--violet);color:var(--ink)}

.composer{position:sticky;bottom:0;margin-top:auto;padding:14px 34px 22px}
.composer .box{max-width:832px;margin:0 auto;border:1px solid var(--line2);border-radius:16px;background:var(--glass);backdrop-filter:blur(26px) saturate(1.3);box-shadow:var(--lift-2);padding:11px 14px 9px;display:flex;flex-direction:column;gap:8px}
.composer .box:focus-within{border-color:var(--line2)}
.composer input{border:0;outline:0;font:15px var(--body);color:var(--ink);width:100%;background:transparent}
.composer input::placeholder{color:var(--faint)}
.composer .row{display:flex;align-items:center;gap:7px}
.composer .tg{padding:3px 9px;border-radius:999px;background:var(--surf);border:1px solid var(--line);color:var(--muted);font:400 11px var(--mono)}
.composer .tg.on{color:var(--ink);border-color:var(--line2)}
.composer .send{margin-left:auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--line2);color:var(--muted);display:grid;place-items:center;font-size:14px;transition:.16s}
.composer .send:hover,.composer .box:focus-within .send{background:var(--fill);border-color:transparent;color:var(--onfill)}

/* ── ŠODIEN — the operations screen. What a business actually opens. ──── */
.day{display:flex;flex-direction:column;gap:16px}
.day h1{font:600 27px/1.15 var(--disp);letter-spacing:-.02em}
.day h1 small{display:block;font:400 13.5px/1.5 var(--body);color:var(--muted);margin-top:5px;letter-spacing:0}
.blk{border:1px solid var(--line);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(22px) saturate(1.25);box-shadow:var(--lift);overflow:hidden}
.blk>h3{font:500 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:13px 16px 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.blk>h3 .c{font:400 10px var(--mono);letter-spacing:0;text-transform:none}
.ln{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:13px;padding:11px 16px;border-top:1px solid var(--line);align-items:baseline;font-size:13.5px;text-align:left;width:100%}
.ln:first-of-type{border-top:0}
.ln:hover{background:var(--surf)}
.ln .t{font:400 10.5px var(--mono);color:var(--faint)}
.ln .s{font-size:12px;color:var(--muted);margin-top:3px}
.ln .r{font:400 11px var(--mono);color:var(--faint);white-space:nowrap}
.ln .r.w{color:var(--amber)}
.ln .r.ok{color:var(--mint)}
.ln .sub{display:inline-flex;align-items:center;gap:5px;font:400 10.5px var(--mono);color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:1px 6px;margin-right:7px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:1240px){.two{grid-template-columns:1fr}}
.gcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:13px 16px;border-top:1px solid var(--line);align-items:center;text-align:left;width:100%}
.gcard:first-of-type{border-top:0}
.gcard:hover{background:var(--surf)}
.gcard .nm{font:500 13.5px var(--disp)}
.gcard .s{font-size:12px;color:var(--muted);margin-top:3px}
.gcard .mini{width:120px;height:4px;border-radius:99px;background:var(--surf2);position:relative;flex:none}
.gcard .mini i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--fill);opacity:.85}
.gcard .pc{font:500 11px var(--mono);color:var(--muted);text-align:right;margin-top:5px}

/* ── dock: WHO AND WHAT IS IN THIS ROOM ────────────────────────────────── */
.dock{border-left:1px solid var(--line);background:var(--glass);backdrop-filter:blur(26px) saturate(1.3);overflow:auto;padding:16px 14px 92px;display:flex;flex-direction:column;gap:17px}
.dock h4{font:500 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.dock h4 .c{font:400 10px var(--mono);letter-spacing:0;text-transform:none}
.dock .sec{display:flex;flex-direction:column;gap:5px}
.pp{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;width:100%;text-align:left}
.pp:hover{background:var(--surf)}
.pp .av{width:27px;height:27px;border-radius:50%;background:var(--surf2);border:1px solid var(--line);display:grid;place-items:center;font:600 10px var(--disp);color:var(--ink);flex:none}
.pp .av.you{background:var(--fill);color:var(--onfill);border-color:transparent}
.pp .nm{font-size:13px;color:var(--ink)}
.pp .s{font-size:11px;color:var(--faint);margin-top:1px}
.pp .live{width:6px;height:6px;border-radius:50%;background:var(--mint);margin-left:auto;flex:none}
.pp .live.away{background:var(--faint)}
.ag{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;padding:8px;border-radius:9px;border:1px solid var(--line);align-items:start}
.ag img{width:26px;height:26px;object-fit:contain}
.ag .k{width:26px;height:26px;border-radius:7px;background:var(--surf2);border:1px solid var(--line);display:grid;place-items:center;font:500 9px var(--mono);color:var(--muted)}
.ag .nm{font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:7px}
.ag .nm i{width:5px;height:5px;border-radius:50%;background:var(--mint);flex:none}
.ag .nm i.quiet{background:var(--faint)}
.ag .d{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:3px}
.tool{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:9px;border:1px solid var(--line);width:100%;text-align:left}
.tool:hover{border-color:var(--line2);background:var(--surf)}
.tool .ic{width:28px;height:28px;border-radius:8px;background:var(--surf2);border:1px solid var(--line);display:grid;place-items:center;font:600 11px var(--disp);color:var(--ink)}
.tool.ref .ic{border-style:dashed;background:transparent;color:var(--muted)}
.tool .nm{font-size:12.5px;color:var(--ink)}
.tool .d{font-size:11px;color:var(--muted);margin-top:2px}
.tool .st{font:400 9.5px var(--mono);padding:2px 6px;border-radius:5px;border:1px solid var(--line);color:var(--faint);white-space:nowrap}
.tool .st.on{color:var(--mint);border-color:rgba(94,224,160,.35)}
.tool .st.never{color:var(--amber);border-color:rgba(251,191,36,.35)}
.tool .st.ref{color:var(--cyan);border-color:rgba(34,211,238,.3)}
.ctx{font-size:12.5px;color:var(--muted);line-height:1.55}
.ctx .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12px;margin-top:8px}
.ctx .kv span:first-child{color:var(--faint)}
.ctx .as{font:400 10px var(--mono);color:var(--faint);margin-top:9px}
.nx{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px;border-radius:9px;border:1px solid var(--line);font-size:12.5px;align-items:center;width:100%;text-align:left}
.nx:hover{background:var(--surf)}
.nx .s{font-size:11px;color:var(--muted);margin-top:2px}
.nx .b{font:400 10px var(--mono);color:var(--faint);white-space:nowrap}
.nx .b.w{color:var(--amber)}
.nx .b.ok{color:var(--mint)}

/* ── an app room: the tool is already open ─────────────────────────────── */
.aroom{border:1px solid var(--line);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(18px);box-shadow:var(--lift);overflow:hidden}
.aroom .ah{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surf)}
.aroom .ah .ic{width:26px;height:26px;border-radius:8px;background:var(--fill);color:var(--onfill);display:grid;place-items:center;font:600 12px var(--disp)}
.aroom .ah .nm{font:600 14.5px var(--disp);color:var(--ink)}
.aroom .ah .at{font:400 11.5px var(--mono);color:var(--faint)}
.aroom .ah .fresh{margin-left:auto;font:400 10.5px var(--mono);color:var(--mint)}
.aroom .tabs{display:flex;gap:2px;padding:9px 12px;border-bottom:1px solid var(--line)}
.aroom .tabs button{padding:5px 12px;border-radius:8px;font-size:12.5px;color:var(--muted)}
.aroom .tabs button:hover{background:var(--surf)}
.aroom .tabs button.on{background:var(--surf2);color:var(--ink)}
.alist{width:100%;border-collapse:collapse;font-size:13px}
.alist th{font:500 10px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--faint);padding:10px 16px;text-align:left}
.alist td{padding:10px 16px;border-top:1px solid var(--line);vertical-align:top}
.alist tr:hover td{background:var(--surf)}
.alist .from{color:var(--ink);white-space:nowrap;width:1%;padding-right:22px}
.alist .when{font:400 11px var(--mono);color:var(--faint);text-align:right;white-space:nowrap}
.alist .s{font-size:11.5px;color:var(--muted);margin-top:3px}
.alist tr.quiet td,.alist tr.quiet .from{color:var(--faint)}
.alist tr.hot .from{color:var(--amber)}

/* ── company home ──────────────────────────────────────────────────────── */
.sbjrow{display:flex;align-items:center;gap:2px;border-radius:10px}
.sbjrow:hover{background:var(--surf)}
.sbjrow.here{background:var(--surf2)}
.sbjrow .sbj{flex:1;min-width:0}
.sbjrow .sbj:hover{background:transparent}
.sbjrow .chv{width:22px;height:26px;color:var(--faint);font-size:10px;flex:none;border-radius:7px;transition:transform .18s}
.sbjrow .chv:hover{color:var(--ink)}
.sbjrow .chv.open{transform:rotate(90deg)}
.hhead{display:flex;align-items:center;gap:14px}
.hhead .hi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:600 14px var(--disp);background:var(--surf2);border:1px solid var(--line);color:var(--ink);flex:none}
.hhead .hi.own{background:var(--fill);color:var(--onfill);border-color:transparent}
.hhead .hs{font-size:12.5px;color:var(--muted);margin-top:4px}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.tile{border:1px solid var(--line);border-radius:var(--r-s);background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--lift);padding:12px 14px}
.tile b{display:block;font:600 22px/1 var(--disp);color:var(--ink)}
.tile span{font-size:11.5px;color:var(--muted);display:block;margin-top:5px}
.tile.w b{color:var(--amber)} .tile.ok b{color:var(--mint)}
.grow{display:grid;grid-template-columns:minmax(0,1fr) 252px 132px;gap:18px;padding:13px 16px;border-top:1px solid var(--line);align-items:center;text-align:left;width:100%}
.grow:first-of-type{border-top:0}
.grow:hover{background:var(--surf)}
.grow .ttl{font:500 13.5px/1.4 var(--disp);color:var(--ink)}
.grow .sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}
.grow .sub b{color:var(--ink);font-weight:500}
.grow .mini{height:4px;border-radius:99px;background:var(--surf2);position:relative}
.grow .mini i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--fill);opacity:.85}
.grow .leg{display:flex;justify-content:space-between;gap:12px;font:400 10px var(--mono);color:var(--faint);margin-top:6px}
.grow .leg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56%}
.grow .leg span:last-child{text-align:right}
.grow .gs{text-align:right}
.grow .st{font:400 10.5px var(--mono);color:var(--muted)}
.grow .st.w{color:var(--amber)} .grow .st.ok{color:var(--mint)}
.grow .car{font:500 11.5px var(--mono);color:var(--ink);margin-top:4px}
.grow .as{font:400 10px var(--mono);color:var(--faint);margin-top:3px}
.idleblk{border-color:rgba(251,191,36,.28)}
.reached{opacity:.72}
.reached .grow .car{color:var(--mint)}
.idleblk .grow .car{color:var(--amber)}
.ln.idle .s{color:var(--faint)}
.goal .carry{display:flex;align-items:center;gap:8px;margin-bottom:9px;font:400 10px var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--faint);position:relative}
.goal .carry button{margin-left:auto;font:400 11px var(--mono);letter-spacing:0;text-transform:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.goal .carry button:hover{color:var(--ink);border-color:var(--line2)}
@media (max-width:1240px){.tiles{grid-template-columns:repeat(3,1fr)}.grow{grid-template-columns:minmax(0,1fr) 128px}.grow .gs{grid-column:2;text-align:left}}

/* ── the room header. Fixed under the top bar; the conversation moves, this
      does not. It names the place once, and nothing else on the page repeats
      it. ─────────────────────────────────────────────────────────────────── */
.rhead{position:sticky;top:0;z-index:12;background:var(--glassT);backdrop-filter:blur(30px) saturate(1.35);
  border-bottom:1px solid var(--line);padding:13px 34px 15px;flex:none}
.rh1{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);margin-bottom:9px}
.rh1 .crumb{color:var(--muted);border-radius:6px;padding:1px 3px}
.rh1 .crumb:hover{color:var(--ink)}
.rh1 .sep{color:var(--faint)}
.rh1 .rm{color:var(--ink);font-weight:500}
.rh1 .kind{font:400 10px var(--mono);color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:1px 7px}
.rh1 .as{margin-left:auto;font:400 10.5px var(--mono);color:var(--faint)}
.rh2{display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:30px;align-items:start}
.rh2 .gt{font:500 17px/1.35 var(--disp);color:var(--ink);letter-spacing:-.01em}
.rh2 .gap{grid-column:1;font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.5}
.rh2 .gap em{font-style:normal;color:var(--ink);font-weight:500}
.rh2 .meas{grid-column:2;grid-row:1/3;padding-top:3px}
.rh2 .rule{position:relative;height:11px}
.rh2 .tr{position:absolute;inset:5px 0;border-radius:99px;background:var(--surf2)}
.rh2 .fl{position:absolute;top:5px;bottom:5px;left:0;border-radius:99px;background:var(--fill);opacity:.9}
.rh2 .pin{position:absolute;top:-1px;width:12px;height:12px;border-radius:50%;background:var(--fill);
  border:3px solid var(--bg);transform:translateX(-50%);box-shadow:0 0 0 1px var(--line2)}
.rh2 .legs{display:flex;justify-content:space-between;gap:10px;font:400 10.5px var(--mono);color:var(--faint);margin-top:7px}
.rh2 .legs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58%}
.rh2 .legs span:last-child{text-align:right;color:var(--muted)}
.rh2.nogoal{display:flex;align-items:center;gap:14px}
.rh2.nogoal .gt{font-weight:400;color:var(--muted);font-size:15px}
.rh2.nogoal .give{margin-left:auto;font-size:12.5px;color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:5px 13px}
@media (max-width:1240px){.rh2{grid-template-columns:1fr}.rh2 .meas{grid-column:1;grid-row:auto}}
@media (max-width:840px){.rhead{padding:11px 16px 13px}}

/* ── conversation, read at length ──────────────────────────────────────── */
.turn .say{font-size:15px;line-height:1.72}
.turn:not(.me) .b{border-left:2px solid var(--line);padding-left:16px;margin-left:-2px}
.turn.me .say{font-size:15.5px;line-height:1.6}
.thread{gap:22px}

/* ── skatlapas ─────────────────────────────────────────────────────────── */
:root{--pv-bg:#0d1524;--pv-line:rgba(148,163,204,.30);--pv-ink:#e8ecf6;--pv-dim:#7c8aa5}
:root[data-theme="light"]{--pv-bg:#eef1f7;--pv-line:rgba(12,18,32,.22);--pv-ink:#0c1220;--pv-dim:#8b94a6}
.pgs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.pg{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);text-align:left;transition:.16s}
.pg:hover{border-color:var(--line2);transform:translateY(-2px)}
.pg .pv{display:block;line-height:0}
.pg .pv svg{width:100%;height:auto;display:block}
.pg .pi{display:block;padding:10px 13px;border-top:1px solid var(--line)}
.pg .pi b{display:block;font:600 13px var(--disp);color:var(--ink)}
.pg .pi span{font:400 11px var(--mono);color:var(--faint)}
.pgrow{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center;padding:7px;border-radius:10px;border:1px solid var(--line);width:100%;text-align:left}
.pgrow:hover{border-color:var(--line2);background:var(--surf)}
.pgrow .th{line-height:0;border-radius:6px;overflow:hidden;display:block}
.pgrow .th svg{width:100%;height:auto;display:block}
.pgrow .nm{font-size:12.5px;color:var(--ink)}
.pgrow .s{font:400 10.5px var(--mono);color:var(--faint);margin-top:2px}
.pgfull{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:22px;align-items:start}
.pgfull .canvas{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;line-height:0;background:var(--pv-bg)}
.pgfull .canvas svg{width:100%;height:auto;display:block}
.pgfull .meta h2{font:600 22px/1.2 var(--disp);letter-spacing:-.02em}
.pgfull .meta .sb{font:400 12px var(--mono);color:var(--faint);margin-top:5px}
.pgfull .meta .nt{font-size:13.5px;line-height:1.6;color:var(--muted);margin:14px 0}
.pgfull .meta .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pgfull .meta .kv span:nth-child(odd){color:var(--faint)}
.pgfull .meta .acts{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}
.pgfull .meta .acts button{padding:8px 14px;border-radius:999px;border:1px solid var(--line2);font-size:13px;color:var(--ink)}
.pgfull .meta .acts button.pri{background:var(--fill);color:var(--onfill);border-color:transparent;font-weight:500}
.pgfull .meta .fine{font-size:11.5px;color:var(--faint);margin-top:11px;line-height:1.5}
@media (max-width:1240px){.pgfull{grid-template-columns:1fr}}

/* ── dock: files ───────────────────────────────────────────────────────── */
.fl{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;padding:7px 8px;border-radius:9px;width:100%;text-align:left}
.fl:hover{background:var(--surf)}
.fl .fi{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;color:var(--faint);font-size:12px}
.fl .nm{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl .s{font:400 10.5px var(--mono);color:var(--faint);margin-top:2px}
.dock .none{font-size:12px;color:var(--faint);padding:6px 8px}
.nx.on{border-color:var(--line2);background:var(--surf2)}

/* ── the reading column gets its own light. A page you read for ten minutes
      should not be the same flat surface as a table. ────────────────────── */
.main{position:relative}
.main::before{content:'';position:fixed;left:272px;right:324px;top:54px;bottom:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(163,178,216,.085),rgba(163,178,216,.03) 55%,transparent)}
.rail::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(163,178,216,.05),transparent 60%)}
.rail{position:relative}
:root[data-theme="light"] .main::before,:root[data-theme="light"] .rail::after{background:none}
@media (max-width:1280px){.main::before{right:0}}
@media (max-width:840px){.main::before{left:0}}

.main>*{position:relative;z-index:1}

/* read the answer aloud */
.read{margin-left:auto;font:400 10.5px var(--mono);letter-spacing:0;text-transform:none;
  color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:3px 10px;
  opacity:0;transition:.16s;white-space:nowrap}
.turn:hover .read,.read:focus-visible{opacity:1}
.read:hover{color:var(--ink);border-color:var(--line2);background:var(--surf)}
.turn .nm .t{margin-left:0}
@media (hover:none){.read{opacity:1}}

/* ── entities in the rail ──────────────────────────────────────────────── */
.sbjrow.me{margin-top:4px}
.sbj .mk.person{background:var(--fill);color:var(--onfill);border-color:transparent;border-radius:50%}
.sbj .mk.proj{border-style:dashed}
.room .h{width:12px;text-align:center}
.room.k-private .h{color:var(--ink);font-size:9px}
.room.k-idea .h,.room.k-project .h{color:var(--faint)}
.room.k-private .nm{color:var(--muted)}
.rh1 .rm .gl{font-style:normal;color:var(--faint);margin-right:5px;font-size:12px}

/* system line in a thread */
.sysl{display:flex;align-items:center;gap:12px;font:400 11px var(--mono);color:var(--faint);padding:2px 0 2px 44px}
.sysl::before,.sysl::after{content:'';flex:1;height:1px;background:var(--line)}
.sysl span{white-space:nowrap}

/* tasks in the dock */
.tk{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;padding:7px 8px;border-radius:9px;width:100%;text-align:left}
.tk:hover{background:var(--surf)}
.tk .bx{width:16px;height:16px;border-radius:5px;border:1px solid var(--line2);display:grid;place-items:center;font-size:10px;color:var(--onfill);margin-top:2px}
.tk.done .bx{background:var(--fill);border-color:transparent}
.tk .nm{font-size:12.5px;color:var(--ink)}
.tk.done .nm{color:var(--faint);text-decoration:line-through}
.tk .s{font:400 10.5px var(--mono);color:var(--faint);margin-top:2px}

/* apps grid on a workplace */
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px}
.appc{display:flex;flex-direction:column;gap:6px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;text-align:left;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--lift);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s}
.appc:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:var(--lift-2)}
.appc .ic{width:30px;height:30px;border-radius:9px;background:var(--fill);color:var(--onfill);display:grid;place-items:center;font:600 13px var(--disp)}
.appc.ref .ic,.appc.never .ic,.appc.more .ic{background:transparent;border:1px dashed var(--line2);color:var(--muted)}
.appc .nm{font:600 13px var(--disp);color:var(--ink);margin-top:2px}
.appc .d{font-size:11.5px;color:var(--muted);line-height:1.4}
.appc .st{font:400 10px var(--mono);color:var(--faint);margin-top:auto}
.appc.on .st{color:var(--mint)}
.appc.never .st{color:var(--amber)}
@media (max-width:1240px){.apps{grid-template-columns:repeat(2,1fr)}}

/* a person's page */
.stated{padding:8px 16px 12px;display:flex;flex-direction:column}
.stated .st{font-size:14.5px;line-height:1.55;color:var(--ink);padding:9px 0;border-top:1px solid var(--line);display:flex;gap:8px}
.stated .st:first-child{border-top:0}
.stated .q{color:var(--faint);font:600 18px/1 var(--disp)}
.stated .addl{align-self:flex-start;margin-top:8px;font-size:12px;color:var(--faint);padding:4px 0}
.stated .addl:hover{color:var(--ink)}
.ask.soft{margin:10px 16px 14px;box-shadow:none;border-color:var(--line)}
.ask.soft .q{font-size:14px}

/* skatlapa renders */
.pg .pv img,.pgrow .th img,.pgfull .canvas img{width:100%;height:auto;display:block}
.pg .pv img{aspect-ratio:16/9;object-fit:cover}
.pgrow .th img{aspect-ratio:16/9;object-fit:cover;border-radius:6px}

/* ── generated icons ───────────────────────────────────────────────────── */
.tool .ic img,.appc .ic img,.panel .ph .ic img,.aroom .ah .ic img{width:100%;height:100%;object-fit:contain;display:block}
.tool .ic:has(img),.panel .ph .ic:has(img),.aroom .ah .ic:has(img){background:transparent;border-color:transparent;padding:0}
.appc .ic:has(img){background:transparent;border:0;width:38px;height:38px;margin:-2px 0 2px -3px}
.aroom .ah .ic:has(img){width:30px;height:30px}

/* ── THE GOAL CHIP — one identity everywhere ───────────────────────────── */
.gchip{display:flex;align-items:center;gap:11px;text-align:left;padding:5px 11px 5px 5px;border-radius:999px;
  border:1px solid var(--line);background:var(--surf);transition:.16s;max-width:100%}
.gchip:hover{border-color:var(--line2);background:var(--surf2)}
.gchip .ring{position:relative;width:34px;height:34px;flex:none;display:block}
.gchip .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.gchip .ring .trk{fill:none;stroke:var(--surf2);stroke-width:3.5}
.gchip .ring .prg{fill:none;stroke:var(--fill);stroke-width:3.5;stroke-linecap:round}
.gchip .mk{position:absolute;inset:0;display:grid;place-items:center;font:600 11px var(--disp);color:var(--ink);letter-spacing:-.02em}
.gchip .tx{display:block;min-width:0}
.gchip .tx b{display:block;font:600 13px var(--disp);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gchip .tx span{display:block;font:400 10.5px var(--mono);color:var(--faint);margin-top:2px}
.gchip.big{padding:8px 16px 8px 8px;border-radius:18px}
.gchip.big .ring{width:52px;height:52px}
.gchip.big .ring .trk,.gchip.big .ring .prg{stroke-width:3}
.gchip.big .mk{font-size:15px}
.gchip.big .tx b{font-size:15px}
.rh2 .gchip{grid-column:1;justify-self:start;margin-bottom:10px}
.dock .gchip{width:100%}

/* the day board's goal rows are chips now */
.gcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:12px 16px;border-top:1px solid var(--line);align-items:center}
.gcard:first-of-type{border-top:0}
.gcard .gx .s{font-size:13px;color:var(--ink);line-height:1.45}
.gcard .gx .who{font:400 11px var(--mono);color:var(--faint);margin-top:4px}

/* ── the goal's page ───────────────────────────────────────────────────── */
.share{padding:14px 16px}
.share .url{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel)}
.share .url .m{flex:1;color:var(--ink);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.share .url .cp{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.share .url .cp:hover{color:var(--ink);border-color:var(--line2)}
.share .who{font-size:12.5px;color:var(--muted);margin-top:10px}
.share .who b{color:var(--ink);font-weight:500}
.share .fine{font-size:11.5px;color:var(--faint);line-height:1.5;margin-top:9px}
.share button.pri{margin-top:12px;background:var(--fill);color:var(--onfill);border:0;border-radius:999px;padding:8px 15px;font-size:13px;font-weight:500}
.share button.off{margin-top:12px;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--muted)}
.share button.off:hover{color:var(--ink);border-color:var(--line2)}
.share.on .fine{color:var(--muted)}

.cmts{padding:6px 16px 14px}
.cmt{display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.cmt:first-child{border-top:0}
.cmt .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--disp);
  background:var(--surf2);border:1px solid var(--line);color:var(--ink)}
.cmt .av.ext{background:transparent;border-style:dashed;color:var(--muted)}
.cmt .hd{display:flex;align-items:baseline;gap:9px;margin-bottom:4px}
.cmt .hd b{font-size:13px;color:var(--ink);font-weight:600}
.cmt .hd .ext{font:400 9.5px var(--mono);font-style:normal;color:var(--amber);border:1px solid rgba(251,191,36,.35);border-radius:4px;padding:1px 5px}
.cmt .hd .w{margin-left:auto;font:400 10.5px var(--mono);color:var(--faint)}
.cmt .tx{font-size:13.5px;line-height:1.55;color:var(--muted)}
.cbox{display:flex;align-items:center;gap:9px;margin-top:12px;border:1px solid var(--line2);border-radius:12px;padding:8px 10px 8px 13px}
.cbox:focus-within{border-color:var(--fill-2)}
.cbox input{flex:1;border:0;outline:0;background:transparent;font:14px var(--body);color:var(--ink)}
.cbox input::placeholder{color:var(--faint)}
.cbox .send{width:28px;height:28px;border-radius:8px;border:1px solid var(--line2);color:var(--muted);display:grid;place-items:center}
.cbox .send:hover{background:var(--fill);color:var(--onfill);border-color:transparent}

/* the day's ledger: the icon of the tool that acted, then the time */
.ln.act{grid-template-columns:64px minmax(0,1fr) auto}
.ln .ti{display:flex;align-items:center;gap:8px}
.ln .ti img{width:24px;height:24px;object-fit:contain;flex:none;filter:saturate(.9)}
.ln .ti i{font:400 10.5px var(--mono);font-style:normal;color:var(--faint)}

/* a customer's own mark, at the size it survives */
.sbj .mk.logo{background:#fff;border-color:transparent;padding:2px;overflow:hidden}
.sbj .mk img{width:100%;height:100%;object-fit:contain;display:block}
.rh2 .hlogo{height:26px;width:auto;margin-right:2px;border-radius:4px}
.ln .tlogo{height:18px;width:auto;display:inline-block;vertical-align:-3px}

/* ── micro-detail. Everything that can be touched says so, once, quietly. ── */
.sbj,.room,.ln,.tool,.nx,.appc,.pg,.tk,.fl,.pgrow,.gchip{
  transition:background .16s,border-color .16s,transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s}
.room:hover,.sbj:hover{transform:translateX(1px)}
.tool:hover,.nx:hover,.pgrow:hover{transform:translateY(-1px)}
.tool .ic,.appc .ic{transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.tool:hover .ic{transform:scale(1.09) rotate(-3deg)}
.appc:hover .ic{transform:scale(1.07) translateY(-1px)}
.pg .pv{overflow:hidden}
.pg .pv img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pg:hover .pv img{transform:scale(1.03)}
.room .h{transition:color .16s}
.room:hover .h,.room.on .h{color:var(--ink)}

/* a lit top edge is what makes glass read as glass */
.blk,.appc,.tile,.panel,.aroom,.composer .box,.ask{position:relative}
.blk::before,.appc::before,.tile::before,.panel::before,.aroom::before,.composer .box::before{
  content:'';position:absolute;left:12px;right:12px;top:0;height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
:root[data-theme="light"] .blk::before,:root[data-theme="light"] .appc::before,
:root[data-theme="light"] .tile::before,:root[data-theme="light"] .panel::before,
:root[data-theme="light"] .aroom::before,:root[data-theme="light"] .composer .box::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent)}

.sbjrow.me .sbj .nm{font-weight:500}
.rail h4{margin-top:6px}

/* the room-kind mark, small enough to read as punctuation */
.room .h{width:16px;height:16px;display:grid;place-items:center}
.room .h .km{width:15px;height:15px;object-fit:contain;display:block;opacity:.82;transition:opacity .16s,transform .16s}
.room:hover .h .km,.room.on .h .km{opacity:1;transform:scale(1.06)}
.rh1 .rm .gl{font-size:12px}

/* ── a job running inside a conversation ───────────────────────────────── */
.job{border:1px solid var(--line2);border-radius:var(--r);background:var(--glass);
  backdrop-filter:blur(18px);box-shadow:var(--lift);padding:14px 16px;margin-top:6px}
.job .jh{display:flex;align-items:center;gap:12px}
.job .jt{display:block;min-width:0;flex:1}
.job .jt b{display:block;font:600 14px var(--disp);color:var(--ink)}
.job .jt span{display:block;font:400 11px var(--mono);color:var(--faint);margin-top:3px}
.job .pct{font:500 12px var(--mono);color:var(--muted)}
.job .open{font-size:12.5px;color:var(--onfill);background:var(--fill);border-radius:999px;padding:6px 13px;font-weight:500}
.spin{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:2px solid var(--surf2);border-top-color:var(--fill);animation:sp 1s linear infinite;
  font-size:11px;color:var(--onfill)}
.spin.ok{border:0;background:var(--mint);color:#04070d;animation:none}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.pb{height:3px;border-radius:99px;background:var(--surf2);margin:13px 0 0;overflow:hidden}
.pb i{display:block;height:100%;border-radius:99px;background:var(--fill);transition:width .9s linear}
.jsteps{list-style:none;margin:13px 0 0;display:flex;flex-direction:column;gap:1px}
.jsteps li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;padding:5px 0;font-size:12.5px;color:var(--faint)}
.jsteps li .d{text-align:center;font:400 11px var(--mono)}
.jsteps li b{font-weight:400}
.jsteps li i{display:block;font:400 10.5px var(--mono);font-style:normal;color:var(--faint);margin-top:2px}
.jsteps li.ok{color:var(--muted)}
.jsteps li.now{color:var(--ink)}
.jsteps li.now b{font-weight:500}
.job .jf{font-size:11.5px;color:var(--faint);margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}

/* the same job, in the dock */
.jobrow{padding:9px 10px;border-radius:10px;border:1px solid var(--line2);background:var(--surf)}
.jobrow .jr1{display:flex;align-items:center;gap:9px}
.jobrow .jr1 .spin{width:15px;height:15px;border-width:2px}
.jobrow .jr1 b{font-size:12.5px;color:var(--ink);font-weight:500}
.jobrow .jst{font:400 11px var(--mono);color:var(--muted);margin:6px 0 0 24px}
.jobrow .pb{margin-top:8px}
.jobrow .jr2{font:400 10px var(--mono);color:var(--faint);margin-top:7px}
.jobrow.done .jr1 .spin{border:0;background:var(--mint)}

/* ── an app, small, inside a conversation ──────────────────────────────── */
.wdg{border:1px solid var(--line);border-radius:var(--r);background:var(--glass);
  backdrop-filter:blur(18px);box-shadow:var(--lift);overflow:hidden;margin-top:12px}
.wdg .wh{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.wdg .wh .ic{width:24px;height:24px;flex:none}
.wdg .wh .ic img{width:100%;height:100%;object-fit:contain}
.wdg .wh b{font:600 13px var(--disp)}
.wdg .wh .at{font:400 10.5px var(--mono);color:var(--faint)}
.wdg .wh .opn{margin-left:auto;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.wdg .wh .opn:hover{color:var(--ink);border-color:var(--line2)}
.wdg .wr{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:12px;padding:9px 14px;border-top:1px solid var(--line);font-size:12.5px;align-items:baseline}
.wdg .wr:first-of-type{border-top:0}
.wdg .wr .a{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdg .wr .b2{color:var(--muted)}
.wdg .wr .b2 i{display:block;font:400 10.5px var(--mono);font-style:normal;color:var(--faint);margin-top:2px}
.wdg .wr .c{font:400 10.5px var(--mono);color:var(--faint);white-space:nowrap}

/* law body + vault */
.lawbody{padding:14px 16px}
.lawbody .sb{font:400 11px var(--mono);color:var(--faint);margin-bottom:11px}
.lawbody p{font-size:14.5px;line-height:1.7;color:var(--muted)}
.lawbody .why{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.lawbody .why b{color:var(--ink);font-weight:600}
.alist .rev{font:400 10.5px var(--mono);color:var(--muted);border:1px solid var(--line2);border-radius:6px;padding:2px 8px;margin-right:8px}
.alist .rev:hover{color:var(--ink);background:var(--surf2)}
.alist .shown{font:400 11px var(--mono);color:var(--ink);margin-right:8px;letter-spacing:1px}
.vnote{padding:11px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);background:var(--surf)}

/* ── the buddy. The ONE place the aurora survives: a character, not a widget.
      He floats above everything, breathes, and says one thing when asked. ──── */
.buddy{position:fixed;right:22px;bottom:22px;z-index:60;width:66px;height:66px;border:0;padding:0;
  filter:drop-shadow(0 10px 26px rgba(124,92,255,.42)) drop-shadow(0 2px 6px rgba(0,0,0,.4));
  animation:float 5.5s ease-in-out infinite;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.buddy img{width:100%;height:100%;object-fit:contain;display:block}
.buddy:hover{transform:translateY(-3px) scale(1.05)}
.buddy:active{transform:scale(.97)}
.buddy .ping{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;
  background:var(--amber);border:2px solid var(--bg)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.buddy{animation:none}}
.bsay{position:fixed;right:100px;bottom:30px;z-index:59;max-width:330px;
  background:var(--panelT);backdrop-filter:blur(16px);border:1px solid var(--line2);
  border-radius:16px;padding:14px 16px;box-shadow:0 18px 46px var(--shadow,rgba(0,0,0,.55));
  animation:bs .2s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom right}
@keyframes bs{from{opacity:0;transform:translateY(6px) scale(.97)}}
.bsay .l{font:500 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.bsay .t{font-size:13.5px;line-height:1.55;color:var(--ink)}
.bsay .t b{font-weight:600}
.bsay .a{display:flex;gap:7px;margin-top:11px}
.bsay .a button{padding:6px 12px;border-radius:999px;border:1px solid var(--line2);font-size:12.5px;color:var(--ink)}
.bsay .a button.pri{background:var(--fill);color:var(--onfill);border-color:transparent;font-weight:500}
.bsay::after{content:'';position:absolute;right:-7px;bottom:26px;width:13px;height:13px;
  background:var(--panelT);border-right:1px solid var(--line2);border-top:1px solid var(--line2);
  transform:rotate(45deg)}
@media (max-width:840px){.buddy{width:54px;height:54px;right:14px;bottom:14px}.bsay{right:78px;max-width:250px}}

.fade{animation:f .26s ease-out both}
@keyframes f{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (max-width:1280px){.app{grid-template-columns:250px minmax(0,1fr)}.dock{display:none}}
@media (max-width:840px){.app{grid-template-columns:1fr}.rail{display:none}.wrap{padding:16px}.composer{padding:12px 16px 16px}}