/* Agent Office UI: cozy, playful, pastel. One theme; every colour, shape and duration below is a token.
   Style card, tokens and motion presets: ../UI_STYLE.md. Motion code: ui.js. */

/* ============ tokens ============ */
:root {
  /* palette */
  --ink: #2b2d42;              /* outlines, main text, hard shadows */
  --paper: #fffdf8;            /* panels */
  --cream: #fff3df;            /* secondary surfaces */
  --cream-deep: #f3e2c4;       /* the darker base under paper buttons */
  --text: var(--ink);
  --text-muted: #666a83;       /* #7c8098 darkened for 4.5:1 on paper and cream */
  --primary: #5aa9e6;          /* sky blue */
  --primary-dark: #3b88c4;
  --primary-tint: #e3f1fc;
  --sun: #ffd166;              /* working */
  --sun-dark: #e5ae3c;
  --sun-tint: #fff4d3;
  --mint: #7ed6a4;             /* positive / done */
  --mint-dark: #52b47f;
  --mint-tint: #e2f6ea;
  --coral: #ff7a6b;            /* negative / error */
  --coral-dark: #e0584a;
  --coral-tint: #ffe5e0;
  --coral-text: #b8392c;
  --lavender: #b9a4f2;
  --lavender-tint: #efe9fd;
  --peach: #ffb27a;
  --claude: #d97757;  --claude-tint: #fbe3d9; --claude-text: #a14c2c;
  --codex: #10a37f;   --codex-tint: #d3f1e8;  --codex-text: #0a6c55;
  --focus: #2f7fc0;
  --focus-glow: rgba(90, 169, 230, .35);   /* the soft ring around focused fields */
  --backdrop: rgba(43, 45, 66, 0.42);
  --scene-bg: #dcecf5;
  /* supporting shades (derived from the palette; use these instead of new literals) */
  --field: #ffffff;            /* input fields, robot eyes */
  --placeholder: #8b8ea5;
  --primary-soft: #d4eafb;     /* your own chat bubbles */
  --sun-text: #8a6412;         /* sun-coloured text (queued counts) */
  --vacant: #e7ddcc;           /* vacant seats, the eraser */
  --scroll-thumb: #e2d6bf;
  --code-bg: #2f3247; --code-text: #f5f1e8;
  --line-faint: rgba(43, 45, 66, .13);   /* hairlines and dashed separators */
  --line: rgba(43, 45, 66, .22);         /* dashed outlines, quiet borders */
  --line-strong: rgba(43, 45, 66, .3);   /* idle / vacant pill outlines */
  --line-hover: rgba(43, 45, 66, .5);
  --ink-a07: rgba(43, 45, 66, .07); --ink-a10: rgba(43, 45, 66, .1);   /* inset shading in fields */
  --paper-a92: rgba(255, 253, 248, .92); --paper-a82: rgba(255, 253, 248, .82); --paper-a75: rgba(255, 253, 248, .75);
  --shine: rgba(255, 255, 255, .55);
  --offline: color-mix(in srgb, var(--ink) 13%, var(--paper));   /* paused / away grey: a machine is offline */
  --peach-tint: color-mix(in srgb, var(--peach) 35%, var(--paper));   /* rate-limited: waiting on a usage limit */
  --join-top: rgba(220, 240, 251, .35); --join-bottom: rgba(255, 243, 223, .55);

  /* shape */
  --r-panel: 14px;
  --r-btn: 8px;
  --r-sm: 6px;
  --r-pill: 999px;
  --stroke: 2.5px;
  --stroke-sm: 2px;
  --shadow-y: 4px;
  --shadow-panel: 0 var(--shadow-y) 0 var(--ink);
  --shadow-btn: 0 3px 0 var(--ink);
  --shadow-btn-pressed: 0 1px 0 var(--ink);
  --space: 8px;

  /* type: at most two families */
  --font: 'Nunito', ui-rounded, 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-display: 30px;
  --fs-title: 12.5px;
  --fs-body: 14px;
  --fs-caption: 12px;
  --fs-tiny: 11px;
  --track-title: 0.09em;

  /* motion (ui.js replaces the two spring easings with linear() curves sampled from the real springs) */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-celebrate: cubic-bezier(.3, 1.9, .5, 1);
  --ease-out: cubic-bezier(.22, .9, .3, 1);
  --ease-in: cubic-bezier(.55, 0, .9, .45);
  --dur-enter: .38s;
  --dur-celebrate: .6s;
  --dur-exit: .12s;
  --dur-fade: .15s;
  --dur-micro: .08s;
  --stagger: 40ms;

  /* layers */
  --z-hud: 5; --z-marker: 8; --z-panel: 10; --z-top: 20; --z-pop: 30; --z-overlay: 50; --z-fx: 55; --z-modal: 60;

  /* layout */
  --gutter: 12px;
  --dock-top: 66px;
  --dock-w: 320px;
  --chat-w: 320px;
  --agent-w: 440px;   /* keep in sync with AGENT_PANEL_W in main.js (camera view offset) */
}

/* ============ base ============ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--scene-bg); color: var(--text);
  font: 600 var(--fs-body)/1.4 var(--font); -webkit-font-smoothing: antialiased; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas#uiFx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-fx); }
[hidden] { display: none !important; }
b, strong { font-weight: 800; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-caption); line-height: 1.4; }
.mono { font-family: var(--font-mono); word-break: break-all; }
.grow { flex: 1; }
.row { display: flex; gap: var(--space); align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.num { font-variant-numeric: tabular-nums; display: inline-block; }
.ico { width: 18px; height: 18px; flex: none; display: block; }
p { margin: 6px 0; }
::selection { background: var(--sun); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-btn); }

* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 3px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

kbd { font: 900 var(--fs-tiny)/1 var(--font); min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 5px;
  box-shadow: 0 2px 0 var(--ink); vertical-align: 1px; }

/* ============ text roles ============ */
.display { margin: 0; font: 900 var(--fs-display)/1.05 var(--font); letter-spacing: -0.01em; }
.title { margin: 0; font: 900 var(--fs-title)/1 var(--font); letter-spacing: var(--track-title); text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 6px; }
.title .count { color: var(--text-muted); letter-spacing: 0; }
.subtitle { margin: 14px 0 6px; font: 900 var(--fs-tiny)/1 var(--font); letter-spacing: var(--track-title); text-transform: uppercase; color: var(--text-muted); }

/* ============ panels ============ */
.panel { background: var(--paper); border: var(--stroke) solid var(--ink); border-radius: var(--r-panel); box-shadow: var(--shadow-panel); }
.panel-head { display: flex; align-items: center; gap: var(--space); min-height: 28px; }
.dock { position: fixed; top: var(--dock-top); right: var(--gutter); width: var(--dock-w); max-height: calc(100vh - var(--dock-top) - var(--gutter) - var(--shadow-y));
  z-index: var(--z-panel); display: flex; flex-direction: column; transform-origin: top right; }
.dock-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 14px; }
.dock > .panel-head { padding: 12px 12px 10px 14px; }
.inspector { background: var(--cream); border: var(--stroke-sm) solid var(--ink); border-radius: 10px; padding: 4px 12px 12px; margin: 10px 0 2px; transform-origin: top center; }
.inspector .subtitle { margin-top: 10px; color: var(--ink); }
.inspector .row { margin-top: 10px; }

/* ============ buttons ============ */
button, .btn {
  --fill: var(--paper); --lip: var(--cream-deep);
  font: 800 13px/1 var(--font); color: var(--ink); background: var(--fill);
  border: var(--stroke-sm) solid var(--ink); border-radius: var(--r-btn);
  box-shadow: inset 0 -3px 0 var(--lip), var(--shadow-btn);
  padding: 0 12px; min-height: 34px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: box-shadow var(--dur-micro) ease-out, background-color .15s, filter .15s, border-color .15s;
  user-select: none; -webkit-tap-highlight-color: transparent; white-space: nowrap; position: relative;
}
button:hover { filter: brightness(1.03) saturate(1.05); }
button.is-pressed { box-shadow: inset 0 -1px 0 var(--lip), var(--shadow-btn-pressed); }
button.primary { --fill: var(--primary); --lip: var(--primary-dark); }
button.danger { --fill: var(--coral); --lip: var(--coral-dark); }
button.warn { --fill: var(--sun); --lip: var(--sun-dark); }
button.sm { min-height: 32px; padding: 0 10px; font-size: 12px; }
button.big { min-height: 48px; font-size: 16px; padding: 0 20px; border-width: var(--stroke); }
button.icon { width: 34px; padding: 0; }
button.icon.sm { width: 32px; }
button.ghost { --fill: transparent; border-color: transparent; box-shadow: none; }
button.ghost:hover { --fill: var(--cream); filter: none; }
button.ghost.is-pressed { box-shadow: none; }
button[aria-disabled="true"] { filter: saturate(.15) opacity(.6); cursor: not-allowed; }
button kbd { box-shadow: none; height: 18px; min-width: 18px; border-width: 1.5px; font-size: 10px; }
.nope-flash { animation: nope-flash .3s ease-out; }
@keyframes nope-flash { 30% { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-tint), var(--shadow-btn); } }

.chip { --fill: var(--paper); display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: var(--r-pill);
  font: 800 var(--fs-tiny)/1 var(--font); border: 1.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.chip .ico { width: 13px; height: 13px; }
.chip.is-pressed { box-shadow: 0 0 0 var(--ink); }

/* ============ inputs ============ */
input, select, textarea { font: 700 14px/1.3 var(--font); color: var(--ink); background: var(--field); border: var(--stroke-sm) solid var(--ink);
  border-radius: var(--r-btn); padding: 7px 10px; width: 100%; min-height: 36px; box-shadow: inset 0 2px 0 var(--ink-a07);
  transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--placeholder); font-weight: 600; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-glow); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
select { appearance: none; padding-right: 28px; cursor: pointer;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2d42' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; }
input[type=color] { padding: 3px; height: 36px; cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: none; border-radius: 5px; }
label { display: block; margin: 10px 0 4px; font: 800 var(--fs-caption)/1.2 var(--font); color: var(--text-muted); }

/* range slider */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; border: none; box-shadow: none; padding: 0; min-height: 24px; cursor: pointer; }
input[type=range]:focus { box-shadow: none; }
input[type=range]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
input[type=range]::-webkit-slider-runnable-track { height: 10px; background: var(--cream); border: 2px solid var(--ink); border-radius: var(--r-pill); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); transition: transform var(--dur-micro); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]::-moz-range-track { height: 6px; background: var(--cream); border: 2px solid var(--ink); border-radius: var(--r-pill); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 2px solid var(--ink); }

/* toggle switch */
.toggle { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; color: var(--ink); font-size: 13px; cursor: pointer; min-height: 32px; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch { width: 42px; height: 24px; flex: none; border-radius: var(--r-pill); background: var(--cream); border: 2px solid var(--ink); position: relative;
  box-shadow: inset 0 2px 0 var(--ink-a10); transition: background-color .15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper);
  border: 2px solid var(--ink); transition: transform .3s var(--ease-spring); }
.toggle input:checked + .switch { background: var(--mint); }
.toggle input:checked + .switch::after { transform: translateX(18px); }
.toggle input:focus-visible + .switch { outline: 3px solid var(--focus); outline-offset: 2px; }
.toggle .note { display: block; font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 700; }

/* ============ badges and chips ============ */
.badge { display: inline-flex; align-items: center; gap: 4px; font: 900 var(--fs-tiny)/1 var(--font); padding: 4px 8px 4px; min-height: 22px;
  border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--cream); color: var(--ink); white-space: nowrap; }
.badge.sm { min-height: 20px; padding: 2px 7px; font-size: 10.5px; }
.badge.idle { background: var(--paper); color: var(--text-muted); border-color: var(--line-strong); }
.badge.working { background: var(--sun); }
.badge.done { background: var(--mint); }
.badge.error { background: var(--coral); }
.badge.none { background: var(--cream); color: var(--text-muted); border-color: var(--line-strong); }
.badge.unread { background: var(--primary); }
.badge.offline { background: var(--offline); color: var(--text-muted); border-color: var(--line-hover); }   /* its machine is away */
.badge.limited { background: var(--peach); }                                                                  /* usage limit */
.badge .t:empty { display: none; }
.badge .t { font-weight: 800; opacity: .85; }
.pop { animation: pop-in var(--dur-celebrate) var(--ease-celebrate); }
@keyframes pop-in { from { transform: scale(.55); } }

.prov { display: inline-flex; align-items: center; font: 900 10px/1 var(--font); padding: 3px 6px; border-radius: var(--r-pill); letter-spacing: .02em;
  border: 1.5px solid currentColor; white-space: nowrap; }
.prov.claude { background: var(--claude-tint); color: var(--claude-text); }
.prov.codex { background: var(--codex-tint); color: var(--codex-text); }

.p-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--primary)); border: 2px solid var(--ink); flex: none; display: inline-block; }
.avatar { --c: var(--primary); position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--c); border: 2px solid var(--ink);
  display: inline-grid; place-items: center; box-shadow: 0 2px 0 var(--ink); }
.avatar .robot { width: 26px; height: 26px; }
.robot .visor { fill: var(--ink); }
.robot .eye { fill: var(--visor, var(--field)); }
.avatar.lg { width: 56px; height: 56px; box-shadow: 0 3px 0 var(--ink); }
.avatar.lg .robot { width: 44px; height: 44px; }
.avatar.xs { width: 18px; height: 18px; border-width: 1.5px; box-shadow: none; }
.avatar.xs .robot { width: 15px; height: 15px; }
.avatar .unread { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--primary); border: 2px solid var(--ink); font: 900 10px/14px var(--font); color: var(--ink); text-align: center; }

/* ============ overlays: join, disconnected, modal ============ */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; z-index: var(--z-overlay); padding: 16px; }
.overlay.join { background: linear-gradient(180deg, var(--join-top), var(--join-bottom)); }
.overlay.dim { background: var(--backdrop); }
.join-card { width: min(420px, 100%); padding: 22px 22px 18px; animation: in-pop var(--dur-enter) var(--ease-spring) both; }
.join-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.logo-tile { width: 60px; height: 60px; flex: none; border-radius: 16px; background: var(--primary); border: var(--stroke) solid var(--ink);
  box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center; rotate: -4deg; }
.logo-tile .robot { width: 48px; height: 48px; --visor: var(--sun); }
.join-tag { margin: 4px 0 0; color: var(--text-muted); font-weight: 700; }
.join-live { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--cream); border: 2px solid var(--ink); border-radius: 10px;
  padding: 7px 10px; font-weight: 800; font-size: 13px; margin: 4px 0 10px; }
.join-live .live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); border: 2px solid var(--ink); }
.join-live .where { color: var(--text-muted); font-weight: 700; }
.join-how { color: var(--text-muted); font-weight: 600; line-height: 1.5; }
.join-how b { color: var(--ink); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0; }
.swatch { --fill: var(--c); width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.swatch .ico { width: 16px; height: 16px; opacity: 0; transition: opacity .12s; }
.swatch.active { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink); }
.swatch.active .ico { opacity: 1; }
.join-card .cta { width: 100%; margin-top: 18px; }
.cta-arrow { font-size: 18px; transition: translate .2s var(--ease-spring); }
.cta:hover .cta-arrow { translate: 3px 0; }
.join-status { min-height: 18px; margin-top: 10px; text-align: center; font-size: var(--fs-caption); font-weight: 800; color: var(--text-muted); }
.join-status.error { color: var(--coral-text); }

/* the one call-to-action on screen breathes, with an occasional shine */
.cta { animation: breathe 2.6s ease-in-out infinite; overflow: hidden; }
.cta::after { content: ''; position: absolute; inset: -2px; background: linear-gradient(105deg, transparent 35%, var(--shine) 50%, transparent 65%);
  transform: translateX(-120%); animation: shine 4.5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes breathe { 50% { transform: scale(1.03); } }
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.disconnected-card { display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-weight: 800; }
.disconnected-card small { display: block; font-weight: 700; color: var(--text-muted); }

.modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--backdrop); display: grid; place-items: center; padding: 16px; }
.modal { width: min(400px, 100%); padding: 18px 18px 16px; }
.modal-title { margin: 0 0 6px; font: 900 18px/1.25 var(--font); }
.modal-body { margin: 0; color: var(--text-muted); font-weight: 700; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ============ top bar ============ */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-hud); }
#hud > * { pointer-events: auto; }
.topbar { position: fixed; top: var(--gutter); left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: start; gap: var(--gutter); pointer-events: none; z-index: var(--z-top); }
.topbar > * { pointer-events: auto; }
.top-center { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.top-center > * { pointer-events: auto; }
.top-right { justify-self: end; display: flex; align-items: flex-start; gap: var(--space); }

/* presence (top-left) */
.presence { justify-self: start; min-width: 190px; max-width: 250px; padding: 10px 12px 10px; transform-origin: top left; }
.presence .title { white-space: nowrap; }
.conn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 800 10.5px/1 var(--font); color: var(--text-muted); }
.conn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); border: 1.5px solid var(--ink); }
.conn.reconnecting { color: var(--coral-text); }
.conn.reconnecting::before { background: var(--coral); }
.player-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 32vh; overflow-y: auto; }
.player { display: flex; align-items: center; gap: 7px; min-height: 24px; font-weight: 800; font-size: 13px; transform-origin: left center; }
.p-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.p-you { color: var(--text-muted); font-weight: 700; font-size: var(--fs-caption); }
.p-focus { margin-left: auto; max-width: 110px; }
.p-focus span { overflow: hidden; text-overflow: ellipsis; }

/* mode switcher (top-centre): one highlight springs between the tabs */
.modes { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 12px; }
.mode-hl { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--r-btn); background: var(--primary);
  border: var(--stroke-sm) solid var(--ink); box-shadow: inset 0 -3px 0 var(--primary-dark); pointer-events: none; }
.mode { --fill: transparent; position: relative; z-index: 1; border-color: transparent; box-shadow: none; min-height: 36px; padding: 0 14px 0 8px; font-size: 14px; }
.mode:hover { --fill: var(--cream); filter: none; }
.mode.active:hover { --fill: transparent; }
.mode.is-pressed { box-shadow: none; }
.mode kbd { margin-right: 2px; box-shadow: none; height: 20px; opacity: .8; }
.mode.active kbd { opacity: 1; }
.mock-badge { font: 900 var(--fs-tiny)/1 var(--font); letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--lavender); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }

/* spend (top-right) */
.spend { --fill: var(--paper); --lip: var(--cream-deep); display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border-width: var(--stroke); border-radius: 12px; box-shadow: var(--shadow-panel); font-weight: 700; }
.spend .stat { display: inline-flex; align-items: baseline; gap: 2px; }
.spend .stat b { font-size: 15px; font-weight: 900; }
.spend .stat small { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 800; }
.spend .sep { width: 2px; height: 18px; background: var(--line-faint); border-radius: 2px; }
.spend .working-stat { align-items: center; gap: 5px; }
.spend .sun-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cream-deep); border: 2px solid var(--ink); transition: background-color .2s; }
.spend.has-working .sun-dot { background: var(--sun); }
.gear { width: 44px; min-height: 44px; border-width: var(--stroke); border-radius: 12px; box-shadow: inset 0 -3px 0 var(--lip), var(--shadow-panel); }
.gear .ico { width: 22px; height: 22px; transition: rotate .45s var(--ease-spring); }
.gear[aria-expanded="true"] .ico { rotate: 60deg; }

/* settings popover */
.settings-wrap { position: relative; }
.popover { position: absolute; right: 0; top: calc(100% + 10px); width: 270px; padding: 14px; z-index: var(--z-pop); transform-origin: top right; }
.popover .title { margin-bottom: 4px; }
.slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; margin-top: 12px; color: var(--ink); font-size: 13px; }
.slider output { font: 900 var(--fs-caption)/1 var(--font); font-variant-numeric: tabular-nums; background: var(--cream); border: 1.5px solid var(--ink);
  border-radius: var(--r-pill); padding: 3px 7px; }
.slider input { grid-column: 1 / -1; }
.popover .small { margin: 12px 0 0; }
.popover hr { border: none; border-top: 2px dashed var(--line-faint); margin: 12px 0 2px; }

/* toasts (top-centre, under the tabs; never near the chat input) */
/* ui.layoutToasts() sets --toast-x/-top/-w so the stack sits in the free play area: under the tabs when there's
   room, otherwise left of the right dock and below the presence panel. Panels never fight. */
.toasts { position: fixed; z-index: var(--z-top); top: var(--toast-top, var(--dock-top)); left: var(--toast-x, 50%); translate: -50% 0;
  width: var(--toast-w, min(380px, calc(100vw - 2 * var(--gutter)))); display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none !important; }
.toasts > * { pointer-events: auto; }
.toast { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 8px 10px 10px; background: var(--paper); border: var(--stroke) solid var(--ink);
  border-radius: 12px; box-shadow: var(--shadow-panel); transform-origin: top center; }
.toast-ico { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; background: var(--primary-tint); }
.toast-ico .ico { width: 18px; height: 18px; }
.toast-text { flex: 1; min-width: 0; padding-top: 1px; }
.toast-title { font-weight: 900; font-size: 14px; line-height: 1.2; }
.toast-msg { font-size: 13px; line-height: 1.35; color: var(--ink); font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.toast-title:not([hidden]) + .toast-msg { color: var(--text-muted); margin-top: 2px; }
.toast-sub { font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 800; margin-top: 3px; }
.toast-actions { display: flex; gap: 6px; align-self: center; }
.toast-x { align-self: flex-start; margin: -4px -2px 0 -4px; }
.toast.kind-done .toast-ico { background: var(--mint); }
.toast.kind-error { background: var(--coral-tint); }
.toast.kind-error .toast-ico { background: var(--coral); }
.toast.kind-error .toast-title { color: var(--coral-text); }
.toast.kind-info .toast-ico, .toast.kind-star .toast-ico { background: var(--sun); }

/* ============ dock: Agents roster ============ */
.roster .panel-head .title { flex: 1; }
.roster-summary { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 10px 14px; margin-top: -4px; }
.roster-summary:empty { display: none; }
.all-quiet { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 800; }
.roster.is-collapsed .dock-scroll, .roster.is-collapsed .roster-summary:empty { display: none; }
.roster.is-collapsed .panel-head { padding-bottom: 12px; }
#rosterToggle .ico { transition: rotate .3s var(--ease-spring); }
.roster.is-collapsed #rosterToggle .ico { rotate: -90deg; }
.desk-group { margin-top: 4px; transform-origin: top center; }
.desk-group + .desk-group { margin-top: 10px; }
.group-head { display: flex; align-items: baseline; gap: 6px; padding: 6px 4px 4px; border-top: 2px dashed var(--line-faint); }
.desk-group:first-child .group-head { border-top: none; padding-top: 0; }
.group-name { font: 900 var(--fs-tiny)/1.2 var(--font); letter-spacing: var(--track-title); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-meta { margin-left: auto; font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 800; white-space: nowrap; }
.rows { display: flex; flex-direction: column; gap: 2px; }
.agent-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 0 10px; align-items: center; padding: 6px 6px 6px 7px; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer; transition: background-color .12s, border-color .12s; transform-origin: center; }
.agent-row:hover { background: var(--cream); }
.agent-row:focus-visible { outline-offset: -1px; }
.agent-row.is-located { background: var(--primary-tint); border-color: var(--primary); }
.row-main { min-width: 0; }
.row-top { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.row-top .prov { flex: none; font-size: 9.5px; padding: 2px 5px; }
.row-name { font-weight: 900; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: min(4.2em, 100%); flex: 0 1 auto; }
.row-step { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.row-step.is-tool { font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.agent-row.needs-you .row-step { color: var(--ink); }
.row-meta { font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta b { color: var(--ink); }
.row-meta .t { color: var(--ink); font-weight: 900; }
.row-meta .q { color: var(--sun-text); font-weight: 800; }
.watchers { display: inline-flex; flex: none; margin-left: 1px; }
.watchers:empty { display: none; }
.watchers .p-dot { width: 10px; height: 10px; border-width: 1.5px; margin-left: -3px; }
.watchers .p-dot:first-child { margin-left: 0; }
/* one compact line per agent, like the reference "WORKERS" list: status pill, then a Chat icon button */
.row-side { display: flex; align-items: center; gap: 6px; }
.row-side .badge { justify-content: center; }
.row-chat { width: 32px; min-height: 32px; padding: 0; box-shadow: inset 0 -2px 0 var(--lip), 0 2px 0 var(--ink); }
.row-chat .ico { width: 16px; height: 16px; }
.row-chat.is-pressed { box-shadow: inset 0 -1px 0 var(--lip), 0 0 0 var(--ink); }
.agent-row:hover .row-chat, .agent-row:focus-within .row-chat, .agent-row.is-located .row-chat { --fill: var(--primary); --lip: var(--primary-dark); }

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 8px 6px; }
.empty-state b { font-size: 15px; font-weight: 900; margin-top: 6px; }
.empty-state p { color: var(--text-muted); font-weight: 700; font-size: 13px; line-height: 1.45; margin: 2px 0 10px; }

/* ============ dock: Build ============ */
.tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 2px 0 0; }
.tool { flex-direction: column; gap: 4px; min-height: 58px; padding: 6px 0 5px; }
.tool .ico { width: 22px; height: 22px; }
.tool small { font: 800 10px/1 var(--font); color: var(--text-muted); }
.tool.active, .size.active { --fill: var(--primary); --lip: var(--primary-dark); }
.tool.active small, .size.active small { color: var(--ink); }
.tool-hint { min-height: 38px; margin: 10px 0 0; padding: 8px 10px; background: var(--sun-tint); border: 2px dashed var(--line); border-radius: 10px;
  font-size: var(--fs-caption); font-weight: 700; line-height: 1.4; }
.sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 4px; }
.size { flex-direction: column; gap: 5px; min-height: 64px; padding: 8px 0 6px; }
.size b { font-size: 14px; font-weight: 900; }
.size small { font: 800 10px/1 var(--font); color: var(--text-muted); }
.mini-desk { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.mini-desk .seats { display: flex; justify-content: space-around; gap: 3px; padding: 0 2px; }
.mini-desk i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: .75; }
.mini-desk .top { height: 7px; border-radius: 2px; background: var(--paper); border: 1.5px solid var(--ink); }
.size.active .mini-desk .top { background: var(--primary-tint); }

/* ============ dock: Subscriptions ============ */
.sub-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 8px; }
.sub-card { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 8px 9px 10px;
  background: var(--paper); border: var(--stroke-sm) solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink); cursor: pointer;
  transition: background-color .15s, box-shadow .15s; }
.sub-card:hover { background: var(--cream); }
.sub-card.active { background: var(--primary-tint); box-shadow: 0 0 0 3px var(--primary), 0 3px 0 var(--ink); }
.sub-swatch { width: 22px; height: 22px; border-radius: 7px; background: var(--c); border: 2px solid var(--ink); }
.sub-swatch.eraser { background: repeating-linear-gradient(45deg, var(--field) 0 4px, var(--vacant) 4px 8px); }
.sub-name { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: var(--fs-caption); color: var(--text-muted); font-weight: 700; margin-top: 3px; }
.sub-meta b { color: var(--ink); font-weight: 900; }
.sub-actions { display: flex; gap: 0; }
.sub-actions .ico { width: 16px; height: 16px; }
.brush-tag { position: absolute; top: -9px; right: 10px; font: 900 9.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; background: var(--primary);
  border: 1.5px solid var(--ink); border-radius: var(--r-pill); padding: 3px 6px; display: none; }
.sub-card.active .brush-tag { display: block; }
.sub-empty { background: var(--cream); border: 2px dashed var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.sub-empty b { color: var(--ink); }
.sub-form-wrap { margin: 4px 0; }
.sub-form-wrap > summary { list-style: none; width: 100%; --fill: var(--cream); border-style: dashed; box-shadow: none; min-height: 38px; }
.sub-form-wrap > summary::-webkit-details-marker { display: none; }
.sub-form-wrap[open] > summary { --fill: var(--primary-tint); border-style: solid; }
.sub-form { padding: 4px 2px 6px; }
.sub-form .form-grid { display: grid; grid-template-columns: 1.25fr 1fr 58px; gap: 8px; }
.sub-form .row { margin-top: 12px; }
.cost-table { font-size: var(--fs-caption); }
.spend-bar { display: flex; height: 14px; border: 2px solid var(--ink); border-radius: var(--r-pill); overflow: hidden; background: var(--cream); margin: 2px 0 10px; }
.spend-bar i { background: var(--c); min-width: 3px; transition: flex-grow .5s var(--ease-spring); }
.spend-bar i + i { border-left: 2px solid var(--ink); }
.cost-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cost-table td, .cost-table th { padding: 5px 3px; text-align: right; white-space: nowrap; }
.cost-table td:first-child, .cost-table th:first-child { text-align: left; white-space: normal; }
.cost-table th { color: var(--text-muted); font-weight: 900; font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--ink); }
.cost-table tbody tr + tr td { border-top: 1.5px dashed var(--line-faint); }
.cost-table td .p-dot { width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.cost-table tfoot td { border-top: 2px solid var(--ink); font-weight: 900; font-size: 13px; }
.cost-table .per-seat { color: var(--primary-dark); font-weight: 900; }

/* ============ dock: agent conversation ============ */
.dock.agent { width: min(var(--agent-w), calc(100vw - 2 * var(--gutter))); height: calc(100vh - var(--dock-top) - var(--gutter) - var(--shadow-y)); }
.agent-head { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border-bottom: var(--stroke-sm) solid var(--ink); }
.agent-head .avatar { width: 38px; height: 38px; }
.agent-head .avatar .robot { width: 30px; height: 30px; }
.agent-title { flex: 1; min-width: 0; }
.agent-title input { background: transparent; border: 2px solid transparent; box-shadow: none; font: 900 17px/1.2 var(--font); padding: 1px 5px; margin-left: -7px;
  min-height: 0; width: 100%; }
.agent-title input:hover { border-color: var(--line); }
.agent-title input:focus { border-color: var(--focus); background: var(--field); }
.agent-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 800; margin-top: 2px; }
.agent-meta .sw { width: 9px; height: 9px; border-radius: 3px; background: var(--c); border: 1.5px solid var(--ink); }
.agent-head-actions { display: flex; gap: 2px; }
.agent-settings { padding: 4px 14px 12px; background: var(--cream); border-bottom: var(--stroke-sm) solid var(--ink); transform-origin: top center; }
.agent-settings .row { margin-top: 10px; }
.agent-settings select.danger-select { border-color: var(--coral-dark); background-color: var(--coral-tint); }
.agent-cwd { font-size: var(--fs-tiny); color: var(--text-muted); margin-top: 8px; font-weight: 700; word-break: break-all; }
.agent-cwd code { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }

.transcript { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(var(--paper), var(--paper)) padding-box; }
.entry { max-width: 90%; transform-origin: left bottom; }
.entry .from { display: flex; align-items: center; gap: 5px; font-size: var(--fs-tiny); font-weight: 900; margin-bottom: 3px; color: var(--ink); }
.entry .from time { color: var(--text-muted); font-weight: 700; margin-left: 2px; }
.entry .from .p-dot { width: 10px; height: 10px; border-width: 1.5px; }
.entry .body { white-space: pre-wrap; word-break: break-word; font-weight: 600; line-height: 1.5; }
.entry.user { align-self: flex-end; transform-origin: right bottom; }
.entry.user .from { justify-content: flex-end; }
.entry.user .body { background: var(--primary-tint); border: 2px solid var(--ink); border-radius: 14px 14px 4px 14px; padding: 8px 11px; box-shadow: 0 2px 0 var(--ink); }
.entry.user.mine .body { background: var(--primary-soft); }
.entry.assistant .body { background: var(--paper); border: 2px solid var(--ink); border-radius: 14px 14px 14px 4px; padding: 9px 12px; box-shadow: 0 2px 0 var(--ink); }
.entry.error { align-self: stretch; max-width: none; }
.entry.error .from { color: var(--coral-text); }
.entry.error .body { background: var(--coral-tint); border: 2px solid var(--coral-dark); border-radius: 10px; padding: 8px 11px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.entry.meta { align-self: center; max-width: none; font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 800; }
.entry.meta span { background: var(--cream); border-radius: var(--r-pill); padding: 3px 9px; }
.entry pre { background: var(--code-bg); color: var(--code-text); padding: 9px 10px; border-radius: 8px; overflow-x: auto; white-space: pre; font: 12px/1.45 var(--font-mono); margin: 6px 0; }
.entry code { font-family: var(--font-mono); font-size: .92em; background: var(--cream); border: 1px solid var(--line-faint); padding: 0 4px; border-radius: 4px; }
.entry pre code { background: none; border: none; padding: 0; }
.queued { font: 900 9.5px/1 var(--font); text-transform: uppercase; letter-spacing: .06em; background: var(--sun); border: 1.5px solid var(--ink); border-radius: var(--r-pill); padding: 2px 5px; }

.tool-run { align-self: stretch; transform-origin: left center; }
.tool-run-head { --fill: var(--cream); --lip: transparent; width: 100%; justify-content: flex-start; min-height: 34px; padding: 0 8px; gap: 7px; border: 2px dashed var(--line);
  box-shadow: none; font-weight: 700; font-size: var(--fs-caption); text-align: left; }
.tool-run-head:hover { border-color: var(--line-hover); }
.tool-run-head.is-pressed { box-shadow: none; }
.tool-run-head .ico { width: 15px; height: 15px; color: var(--text-muted); }
.tool-count { font-weight: 900; white-space: nowrap; display: inline-block; }
.tool-latest { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1.2 var(--font-mono); color: var(--text-muted); }
.tool-run .chev .ico { transition: rotate .25s var(--ease-spring); }
.tool-run.open .chev .ico { rotate: 90deg; }
.tool-list { display: none; margin: 4px 0 0 10px; padding: 4px 0 4px 16px; border-left: 2px dashed var(--line); font: 500 11.5px/1.5 var(--font-mono);
  color: var(--text-muted); word-break: break-all; }
.tool-run.open .tool-list { display: block; animation: in-down var(--dur-enter) var(--ease-spring); }

.transcript .empty-state { margin: auto; max-width: 320px; }
.suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.suggest .chip { min-height: 30px; padding: 0 10px; font-size: var(--fs-caption); }
/* the flex parent centres the absolutely placed pill, so its transform stays free for springs */
.jump-wrap { position: relative; height: 0; display: flex; justify-content: center; }
.jump-new { position: absolute; bottom: 10px; z-index: 2; }

/* which model the agent is on (header) and which model wrote each reply */
.model-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; min-height: 0; width: auto; padding: 0 7px; border-radius: var(--r-pill); border: 1.5px solid var(--ink);
  background: var(--paper); color: var(--ink); font-size: var(--fs-tiny); font-weight: 800; white-space: nowrap; box-shadow: none; cursor: pointer; }
.model-chip:hover { background: var(--cream); }
.model-chip i { font-style: normal; font-weight: 700; color: var(--text-muted); }
.model-chip i::before { content: '·'; margin-right: 4px; }
.model-chip.expected { border-style: dashed; border-color: var(--line-hover); color: var(--text-muted); }
/* the agent told the person who asked that the whole task is done (notify_human) */
.entry.notify { align-self: stretch; padding: 8px 11px; background: var(--mint-tint); border: 2px solid var(--mint-dark); border-radius: 12px; }
.entry.notify .from { color: var(--ink); gap: 5px; }
.entry.notify .from .ico { width: 15px; height: 15px; color: var(--mint-dark); stroke-width: 3; }
.entry.notify .from span { color: var(--text-muted); font-weight: 700; }
.entry.notify .body { margin-top: 3px; }
.agent-settings .agent-toggle { margin-top: 10px; }

/* a message another agent sent with the office tools */
.entry.user.from-agent .body { background: var(--lavender-tint); }
.entry.user.from-agent .avatar.xs { margin-right: 2px; }
.agent-tag { margin-left: 5px; padding: 0 6px; border-radius: var(--r-pill); background: var(--lavender); color: var(--ink); font-size: var(--fs-tiny); font-weight: 800; }
.entry-model { margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); background: var(--ink-a07); color: var(--text-muted); font-size: var(--fs-tiny); font-weight: 800; }

.composer { padding: 10px 12px 12px; border-top: var(--stroke-sm) solid var(--ink); background: var(--cream); border-radius: 0 0 11px 11px; }
.working-bar { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; padding: 5px 5px 5px 10px; background: var(--sun-tint); border: 2px solid var(--ink);
  border-radius: 10px; font-size: var(--fs-caption); font-weight: 800; transform-origin: bottom center; }
.working-bar .who { color: var(--text-muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.working-bar button { min-height: 30px; }
.working-bar .ico { width: 14px; height: 14px; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--sun-dark); border: 1.5px solid var(--ink); animation: dot 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
.composer textarea { resize: none; min-height: 44px; max-height: 150px; display: block; line-height: 1.45; }
.composer-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.composer-hint { flex: 1; font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 700; }
.composer-hint kbd { height: 16px; min-width: 16px; font-size: 9.5px; border-width: 1.5px; box-shadow: none; padding: 0 3px; }
.composer-row #attachBtn { flex: none; margin-left: -4px; }
.composer-row #attachBtn .ico { width: 18px; height: 18px; }
.composer-row #attachBtn.has { color: var(--primary-dark); }

/* attachments waiting to go with the next message: thumbnails for pictures, a file card otherwise; the fill under
   each chip is its upload progress */
.attach-tray { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: -2px -2px 0; scrollbar-width: thin; }
.attach-chip { position: relative; flex: none; display: flex; align-items: center; gap: 7px; height: 46px; max-width: 190px; padding: 0 26px 0 5px;
  background: var(--paper); border: var(--stroke-sm) solid var(--ink); border-radius: 10px; box-shadow: 0 2px 0 var(--ink); overflow: hidden; }
.attach-chip img, .attach-chip .attach-icon { flex: none; width: 34px; height: 34px; border-radius: 6px; border: 1.5px solid var(--ink); object-fit: cover; background: var(--cream); }
.attach-chip .attach-icon { display: grid; place-items: center; color: var(--text-muted); }
.attach-chip .attach-icon .ico { width: 18px; height: 18px; }
.attach-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.attach-meta b { font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-meta small { font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ink-a07); opacity: 0; transition: opacity .25s; }
.attach-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--primary); transition: width .12s linear; }
.attach-chip.uploading .attach-progress { opacity: 1; }
.attach-chip.uploading img, .attach-chip.uploading .attach-icon { opacity: .6; }
.attach-chip.failed { background: var(--coral-tint); border-color: var(--coral-dark); }
.attach-chip.failed small { color: var(--coral-text); }
.attach-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; min-height: 0; padding: 0; border-width: 1.5px; border-radius: 50%; box-shadow: none; }
.attach-x .ico { width: 11px; height: 11px; stroke-width: 3.2; }

/* files dragged over the conversation */
.drop-zone { position: absolute; inset: 6px; z-index: 5; display: grid; place-items: center; pointer-events: none; border-radius: 10px;
  background: var(--paper-a82); border: 3px dashed var(--primary-dark); }
.drop-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; animation: drop-bob 1.2s ease-in-out infinite; }
.drop-card b { font-size: var(--fs-body); font-weight: 900; }
.drop-card small { color: var(--text-muted); font-weight: 700; font-size: var(--fs-caption); }
.drop-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--primary-tint); border: var(--stroke) solid var(--ink);
  box-shadow: 0 3px 0 var(--ink); color: var(--primary-dark); margin-bottom: 4px; }
.drop-icon .ico { width: 28px; height: 28px; }
@keyframes drop-bob { 50% { transform: translateY(-5px); } }

/* attachments in the conversation */
.entry-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.entry.user .body + .entry-files { margin-top: 6px; }
.file-thumb { padding: 0; min-height: 0; width: auto; height: auto; border: var(--stroke-sm) solid var(--ink); border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 0 var(--ink); background: var(--cream); cursor: zoom-in; }
.file-thumb img { display: block; max-width: 180px; max-height: 140px; min-width: 48px; min-height: 40px; object-fit: cover; }
.file-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 6px 10px 6px 7px; background: var(--paper); color: var(--ink);
  border: var(--stroke-sm) solid var(--ink); border-radius: 10px; box-shadow: 0 2px 0 var(--ink); text-decoration: none; }
.file-chip:hover { background: var(--cream); }
.file-chip .ico { flex: none; width: 20px; height: 20px; color: var(--text-muted); }
.file-chip span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.file-chip b { font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip small { font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 700; }

/* a picture from the conversation, full size */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px;
  background: var(--backdrop); cursor: zoom-out; animation: in-fade var(--dur-fade) ease-out both; }
.lightbox img { max-width: min(92vw, 1400px); max-height: calc(100vh - 90px); border: var(--stroke) solid var(--ink); border-radius: 12px; box-shadow: 0 6px 0 var(--ink);
  background: var(--paper); animation: in-pop var(--dur-enter) var(--ease-spring) both; }
.lightbox-name { padding: 4px 12px; background: var(--paper); border: var(--stroke-sm) solid var(--ink); border-radius: var(--r-pill); font-weight: 800; font-size: var(--fs-caption); }
.lightbox.out { animation: out-fade var(--dur-exit) ease-in both; }

/* ============ bottom: hint, help, chat ============ */
/* The hint and key help live in the free strip between the team chat (left) and the right dock, so they never
   sit on top of either. The bounds follow whichever dock is showing. */
.bottom-center { position: fixed; left: calc(var(--chat-w) + 2 * var(--gutter)); right: var(--gutter); bottom: var(--gutter); display: flex; flex-direction: column;
  align-items: center; gap: 10px; pointer-events: none; z-index: var(--z-hud); }
@media (min-width: 721px) {
  #hud:has(> .dock:not(.agent):not([hidden]):not(.is-collapsed)) .bottom-center { right: calc(var(--dock-w) + 2 * var(--gutter)); }
  #hud:has(> .dock.agent:not([hidden])) .bottom-center { right: calc(min(var(--agent-w), 100vw - 2 * var(--gutter)) + 2 * var(--gutter)); }
}
.bottom-center > * { pointer-events: auto; }
.hint { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; font-weight: 800; font-size: 14px; max-width: min(520px, 100%);
  min-width: 0; transform-origin: bottom center; border-radius: 12px; }
.hint .hint-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hint .cta-key { width: 30px; height: 30px; font-size: 14px; border-width: 2.5px; box-shadow: 0 3px 0 var(--ink); background: var(--sun); animation: breathe 2.2s ease-in-out infinite; }
.hint .muted { font-weight: 700; }
.help { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: var(--fs-caption); font-weight: 800; color: var(--ink); max-width: 100%;
  background: var(--paper-a82); border: 2px solid var(--line); border-radius: var(--r-pill); padding: 5px 14px; }
.help span { white-space: nowrap; }
.help kbd { height: 18px; min-width: 18px; font-size: 10px; border-width: 1.5px; box-shadow: 0 1.5px 0 var(--ink); }

.chat { position: fixed; left: var(--gutter); bottom: var(--gutter); width: var(--chat-w); z-index: var(--z-hud); }
.chat-log { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 8px; max-height: 210px; overflow: hidden; justify-content: flex-end; }
.chat-line { background: var(--paper-a92); border-radius: 10px; padding: 4px 9px; font-size: 13px; font-weight: 700; max-width: 100%; word-break: break-word;
  box-shadow: 0 2px 0 var(--line); transition: opacity 1s; transform-origin: left bottom; display: flex; gap: 6px; align-items: baseline; }
.chat-line .p-dot { width: 9px; height: 9px; border-width: 1.5px; align-self: center; }
.chat-line b { font-weight: 900; white-space: nowrap; }
.chat-line.system { color: var(--text-muted); font-size: var(--fs-caption); background: var(--paper-a75); }
.chat-line.fade { opacity: 0; }
.chat.is-open .chat-line.fade { opacity: 1; transition-duration: .15s; }
.chat.is-open .chat-log { overflow-y: auto; }
.chat-input { min-height: 42px; border-width: var(--stroke); border-radius: 12px; box-shadow: var(--shadow-panel); background: var(--paper); font-weight: 700; padding: 8px 12px; }
.chat-input:focus { box-shadow: 0 0 0 3px var(--focus-glow), var(--shadow-panel); }

/* ============ marker: points at an agent in the world ============ */
.marker { position: fixed; left: 0; top: 0; z-index: var(--z-marker); pointer-events: none; will-change: transform; }
.marker-pin { position: absolute; left: 0; top: 0; translate: -50% calc(-100% - 12px); display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 10px 6px 7px; background: var(--paper); border: var(--stroke) solid var(--ink); border-radius: var(--r-pill); box-shadow: 0 3px 0 var(--ink);
  font: 900 13px/1 var(--font); transform-origin: bottom center; }
.marker-pin::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 12px; height: 12px; background: var(--paper); border-right: var(--stroke) solid var(--ink);
  border-bottom: var(--stroke) solid var(--ink); transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0; }
.marker-pin .m-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--primary)); border: 2px solid var(--ink); }
.marker-dist { color: var(--text-muted); font-weight: 800; font-size: var(--fs-tiny); }
.marker-dist:empty { display: none; }
.marker:not(.is-edge) .marker-pin { animation: bob 1.4s ease-in-out infinite; }
.marker-arrow { display: none; }
.marker.is-edge .marker-pin { translate: -50% -50%; }
.marker.is-edge .marker-pin::after { display: none; }
.marker.is-edge .marker-arrow { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; rotate: var(--angle, 0rad); }
.marker.is-edge .marker-arrow::before { content: ''; position: absolute; left: 34px; top: -9px; border-left: 16px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.marker-pin.pop { animation: pop-in var(--dur-celebrate) var(--ease-celebrate); }
@keyframes bob { 50% { transform: translateY(-5px); } }

/* ============ enter / exit (classes set by ui.js; data-enter picks the flavour) ============ */
.is-entering { animation: in-pop var(--dur-enter) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
[data-enter="right"].is-entering { animation-name: in-right; }
[data-enter="up"].is-entering { animation-name: in-up; }
[data-enter="down"].is-entering { animation-name: in-down; }
[data-enter="item"].is-entering { animation-name: in-item; }
[data-enter="toast"].is-entering { animation-name: in-toast; animation-duration: var(--dur-celebrate); animation-timing-function: var(--ease-celebrate); }
[data-enter="fade"].is-entering { animation-name: in-fade; animation-duration: var(--dur-fade); animation-timing-function: ease-out; }
[data-enter="bubble-r"].is-entering { animation-name: in-bubble-r; }
[data-enter="bubble-l"].is-entering { animation-name: in-bubble-l; }
.is-leaving { animation: out-shrink var(--dur-exit) var(--ease-in) both; pointer-events: none !important; }
[data-enter="right"].is-leaving { animation-name: out-right; }
[data-enter="toast"].is-leaving { animation-name: out-up; }
[data-enter="fade"].is-leaving { animation-name: out-fade; }
[data-enter="item"].is-leaving { animation-name: out-shrink; }
.dock.is-leaving { z-index: calc(var(--z-panel) - 1); }

@keyframes in-pop { from { opacity: 0; transform: scale(.7); } }
@keyframes in-right { from { opacity: 0; transform: translateX(40px) scale(.94); } }
@keyframes in-up { from { opacity: 0; transform: translateY(14px) scale(.8); } }
@keyframes in-down { from { opacity: 0; transform: translateY(-10px) scale(.95); } }
@keyframes in-item { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes in-toast { from { opacity: 0; transform: translateY(-18px) scale(.75); } }
@keyframes in-fade { from { opacity: 0; } }
@keyframes in-bubble-r { from { opacity: 0; transform: translateY(8px) scale(.8); } }
@keyframes in-bubble-l { from { opacity: 0; transform: translateY(8px) scale(.8); } }
@keyframes out-shrink { to { opacity: 0; transform: scale(.9); } }
@keyframes out-right { to { opacity: 0; transform: translateX(24px) scale(.97); } }
@keyframes out-up { to { opacity: 0; transform: translateY(-10px) scale(.94); } }
@keyframes out-fade { to { opacity: 0; } }

.popover.is-entering { transform-origin: top right; }
.chat-line.is-entering { animation-name: in-item; }

/* Reduce motion (the ⚙ setting or the OS preference): no overshoot, no scaling, no idle motion; fades stay. */
.reduce-motion .is-entering { animation-name: in-fade !important; animation-duration: var(--dur-fade) !important; animation-timing-function: ease-out !important; animation-delay: 0s !important; }
.reduce-motion .is-leaving { animation-name: out-fade !important; }
.reduce-motion .pop, .reduce-motion .marker-pin, .reduce-motion .cta, .reduce-motion .cta::after, .reduce-motion .hint .cta-key,
.reduce-motion .dots i, .reduce-motion .nope-flash, .reduce-motion .join-card, .reduce-motion .tool-run.open .tool-list { animation: none !important; }
.reduce-motion .switch::after, .reduce-motion .gear .ico, .reduce-motion #rosterToggle .ico, .reduce-motion .tool-run .chev .ico,
.reduce-motion .cta-arrow, .reduce-motion .spend-bar i { transition-timing-function: ease-out; transition-duration: .12s; }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  :root { --chat-w: 260px; }
  .spend .lbl { display: none; }
  .help { display: none; }
  .hint .prov { display: none; }
}
@media (max-width: 900px) {
  :root { --chat-w: 200px; --dock-w: 300px; }
  .mode { padding: 0 10px 0 6px; font-size: 13px; }
  .presence { min-width: 150px; max-width: 200px; }
  .hint { font-size: 13px; }
  .row-top .prov { display: none; }   /* the robot visor colour still tells Claude from Codex */
}
@media (max-width: 720px) {
  :root { --dock-top: 116px; }
  .topbar { grid-template-columns: 1fr auto; }
  .top-center { grid-column: 1 / -1; grid-row: 2; }
  .top-right { grid-row: 1; grid-column: 2; }
  .spend .sep, .spend .working-stat { display: none; }
  .player-list { max-height: 20vh; }
  .dock, .dock.agent { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 50vh; }
  .dock.agent { top: var(--dock-top); height: auto; max-height: none; }
  .chat { width: calc(100vw - 24px); }
  .bottom-center { left: 8px; right: 8px; bottom: 70px; }
}

/* ---- first-person view (V): top-bar toggle + crosshair ---- */
.cam-toggle { width: 44px; min-height: 44px; border-width: var(--stroke); border-radius: 12px; box-shadow: inset 0 -3px 0 var(--lip), var(--shadow-panel); }
.cam-toggle .ico { width: 22px; height: 22px; }
.cam-toggle[aria-pressed="true"] { --fill: var(--primary); color: var(--paper); }
html:not([data-mode="walk"]) .cam-toggle { display: none; }   /* first person is an Office-mode camera */
#crosshair { position: fixed; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 2px var(--ink); pointer-events: none; z-index: 4; opacity: .85;
  transition: transform .18s var(--ease-spring), background-color .15s; }
#crosshair[hidden] { display: none; }
#crosshair.hot { transform: scale(1.7); background: var(--primary); opacity: 1; }   /* aiming at an agent you can talk to */

/* ---- storeys: the lift panel (Build, Subscriptions) and the storey chip (Office) ---- */
.level-nav { position: fixed; left: var(--gutter); top: 45%; translate: 0 -50%; z-index: var(--z-panel); display: flex; flex-direction: column;
  align-items: center; gap: 5px; padding: 5px; transform-origin: left center; }
/* Build: sit just above the tool strip (buildui.css publishes the dock and strip heights), clear of both */
html.bui-on .level-nav { top: auto; translate: none; bottom: calc(var(--bui-dock-h, 0px) + var(--bui-strip-h, 40px) + var(--gutter) + 26px); }
.lvl-step { width: 36px; min-height: 28px; border-radius: 10px; }
.lvl-step .ico { width: 18px; height: 18px; stroke-width: 3; }
.lvl-step.up .ico { rotate: 180deg; }
.lvl-stops { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-block: 2px dashed var(--line); }
.lvl-hl { position: absolute; left: 0; top: 0; width: 36px; height: 28px; border-radius: 9px; background: var(--primary); border: var(--stroke-sm) solid var(--ink);
  box-shadow: inset 0 -3px 0 var(--primary-dark); transform: translateY(var(--hl-y, 0px)); pointer-events: none; }
.lvl-stop { --fill: transparent; --lip: transparent; position: relative; z-index: 1; width: 36px; min-height: 28px; padding: 0; border-color: transparent;
  box-shadow: none; font: 900 13px/1 var(--font); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lvl-stop:hover { --fill: var(--cream); filter: none; color: var(--ink); }
.lvl-stop.is-pressed { box-shadow: none; }
.lvl-stop.active, .lvl-stop.active:hover { --fill: transparent; color: var(--ink); }
.lvl-stop.used::after { content: ''; position: absolute; right: 3px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sun); border: 1.5px solid var(--ink); }
.lvl-flag { position: absolute; left: calc(100% + 15px); top: -1px; height: 30px; display: inline-flex; align-items: center; padding: 0 11px;
  transform: translateY(var(--hl-y, 0px)); background: var(--paper); border: var(--stroke-sm) solid var(--ink); border-radius: var(--r-pill);
  box-shadow: 0 3px 0 var(--ink); font: 900 var(--fs-tiny)/1 var(--font); letter-spacing: var(--track-title); text-transform: uppercase; white-space: nowrap;
  pointer-events: none; transform-origin: left center; }
.lvl-flag::before { content: ''; position: absolute; left: -7px; top: 50%; width: 10px; height: 10px; margin-top: -6px; background: var(--paper);
  border-left: var(--stroke-sm) solid var(--ink); border-bottom: var(--stroke-sm) solid var(--ink); rotate: 45deg; border-radius: 0 0 0 3px; }
.lvl-flag.pop { animation: flag-pop var(--dur-celebrate) var(--ease-celebrate); }
@keyframes flag-pop { from { scale: .5; opacity: .3; } }
.level-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: var(--r-pill); background: var(--paper-a92);
  border: var(--stroke-sm) solid var(--ink); box-shadow: 0 2px 0 var(--ink); font: 900 var(--fs-tiny)/1 var(--font); letter-spacing: .06em;
  text-transform: uppercase; transform-origin: bottom center; }
.level-chip .ico { width: 15px; height: 15px; }
[data-enter="left"].is-entering { animation-name: in-left; }
[data-enter="left"].is-leaving { animation-name: out-left; }
@keyframes in-left { from { opacity: 0; transform: translateX(-40px) scale(.94); } }
@keyframes out-left { to { opacity: 0; transform: translateX(-24px) scale(.97); } }
.reduce-motion .lvl-flag.pop { animation: none; }
@media (max-width: 720px) { .level-nav { top: auto; bottom: 150px; translate: none; } }

/* The top bar's grid spans the full width and is as tall as its tallest child (the presence panel), so its empty
   middle must let clicks through to the Agents panel header and the 3D view below. `#hud > *` (an id selector) would
   otherwise re-enable pointer events on it. */
#hud > .topbar { pointer-events: none; }

/* ============ accounts, machines and permissions (SCALE_SPEC.md §7–§8) ============ */
/* where a seat runs: a strip under the conversation header (machine, folder, login, and why it waits) */
.agent-where { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 6px 10px 7px 12px; background: var(--cream);
  border-bottom: var(--stroke-sm) solid var(--ink); }
.where-chip { --fill: var(--paper); --lip: transparent; display: inline-flex; align-items: center; gap: 5px; min-height: 22px; max-width: 170px; padding: 0 8px;
  border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--fill); box-shadow: none; font: 800 var(--fs-tiny)/1 var(--font);
  color: var(--ink); white-space: nowrap; }
.where-chip > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.where-chip .ico { width: 13px; height: 13px; flex: none; color: var(--text-muted); }
button.where-chip { cursor: pointer; }
button.where-chip:hover { --fill: var(--cream); border-color: var(--line-hover); filter: none; }
button.where-chip.is-pressed { box-shadow: none; }
.where-machine .w-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--mint); border: 1.5px solid var(--ink); }
.where-machine.off { color: var(--text-muted); }
.where-machine.off .w-dot { background: var(--offline); }
.where-folder > span { font-family: var(--font-mono); font-weight: 600; }
.where-login.default { border-style: dashed; color: var(--text-muted); }
.where-login.warn { --fill: var(--coral-tint); border-color: var(--coral-dark); color: var(--coral-text); }
.where-login.warn .ico { color: var(--coral-text); }
.where-state { margin-left: auto; display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  border: 2px solid var(--ink); font: 900 var(--fs-tiny)/1 var(--font); white-space: nowrap; }
.where-state.off { background: var(--offline); }
.where-state.lim { background: var(--peach-tint); }

/* you can read along but not prompt (or not change settings): the reason, where the control would be */
.lock-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--paper);
  border: 1.5px solid var(--ink); color: var(--ink); }
.lock-ico .ico { width: 12px; height: 12px; }
.working-bar.lock-bar { background: var(--paper); border-style: dashed; border-color: var(--line-hover); color: var(--text-muted); padding: 7px 10px; }
.lock-bar .lock-text { min-width: 0; line-height: 1.3; }
.composer textarea:disabled { background: var(--ink-a07); color: var(--text-muted); cursor: not-allowed; }
.lock-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: var(--fs-caption); font-weight: 800; color: var(--text-muted); line-height: 1.3; }
.agent-settings select:disabled, .agent-settings input:disabled { opacity: .6; cursor: not-allowed; }
.agent-title input[readonly] { cursor: default; }
.agent-title input[readonly]:hover { border-color: transparent; }
.agent-title input[readonly]:focus { background: transparent; border-color: transparent; }
/* a mode you can't use: muted, with a lock; the tooltip (and a toast on click) says why */
.mode.locked { color: var(--text-muted); cursor: not-allowed; }
.mode.locked kbd { opacity: .5; }
.mode.locked::after { content: ''; width: 12px; height: 12px; margin-left: 2px; background: currentColor;
  -webkit-mask: var(--lock-mask) center / contain no-repeat; mask: var(--lock-mask) center / contain no-repeat; }
:root { --lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10.5' width='13' height='9.5' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E"); }
/* a subscription someone else owns: you can see it, not paint with or edit it */
.sub-card.locked .sub-name { color: var(--text-muted); }
.sub-card.locked .sub-swatch { opacity: .6; }
.sub-lock { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--text-muted); }
.sub-lock .ico { width: 15px; height: 15px; }

/* you, in the ⚙ menu, and on the join card when signed in */
.me-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.me-dot { --c: var(--primary); display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--c);
  border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font: 900 15px/1 var(--font); color: var(--ink); }
.me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.me-text b { font-size: 15px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text small { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-actions { grid-column: 1 / -1; display: flex; gap: var(--space); margin-top: 8px; }
.me-actions .btn { flex: 1; text-decoration: none; }
.role-badge { display: inline-flex; align-items: center; font: 900 10px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px;
  border-radius: var(--r-pill); border: 1.5px solid var(--ink); background: var(--cream); color: var(--ink); white-space: nowrap; }
.role-badge.owner { background: var(--sun); }
.role-badge.admin { background: var(--lavender); }
.role-badge.member { background: var(--primary-tint); }
.role-badge.guest { color: var(--text-muted); border-color: var(--line-hover); }
.join-account { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 2px; padding: 10px 12px; background: var(--primary-tint);
  border: 2px solid var(--ink); border-radius: 10px; }
.join-account .me-dot { width: 30px; height: 30px; font-size: 13px; box-shadow: none; }
.join-account-text { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; font-weight: 700; }
.join-signout { font-size: var(--fs-caption); font-weight: 800; color: var(--primary-dark); }

/* one side panel at a time (game.sideDock): while one is open, the Build inspector steps aside like the core docks */
html.ao-side-open .bui-insp { display: none !important; }

/* ---- the top bar from 721 to 1000 px: presence, the mode tabs and the right cluster share one row ----
   The right cluster grew in Wave 2 (Machines, People and Usage buttons beside the eye and ⚙), so it makes room in
   steps instead of pushing ⚙ off the screen or sliding the tabs over the presence panel: first the spend pill keeps
   only the monthly total (its seat and working counts live in the roster and Subscriptions), then (≤900 px, where
   people.js moves its buttons into the presence panel) the tabs drop their key caps. 1/2/3 still work. */
@media (min-width: 721px) and (max-width: 1000px) {
  .spend { gap: 6px; padding: 0 10px; }
  .spend .sep, .spend .stat:not(:first-child) { display: none; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .mode kbd { display: none; }
  .mode { padding: 0 10px; }
  .top-right { gap: 6px; }
}
/* Phones (≤720 px): the tabs take a second row (above); the first row is the presence panel and the right cluster.
   The cluster keeps the monthly total and wraps its buttons instead of running off the screen, and the presence panel
   may shrink. main.js sets --dock-top from the top bar's real height here, so docks start below the tabs. */
@media (max-width: 720px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .presence { min-width: 0; max-width: none; }
  .top-right { flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: calc(100vw - 2 * var(--gutter) - 150px); }
  .spend { padding: 0 10px; }
  .spend .sep, .spend .stat:not(:first-child) { display: none; }
}
@media (max-width: 480px) {
  .mode kbd { display: none; }
  .mode { padding: 0 10px; font-size: 13px; }
  .popover { width: min(270px, calc(100vw - 2 * var(--gutter))); }
}
.spend.static { cursor: default; }   /* guests: the numbers, not a way into Subscriptions */