@charset "UTF-8";
/* Self-hosted latin subsets (Inter and Libre Baskerville are variable files,
   so each weight below shares one download). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/inter-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-var-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-var-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-var-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/inter-var-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/libre-baskerville-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/libre-baskerville-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: light;
  /* Phoenix red and its flame, the same in light and dark. */
  --phoenix-red: #D70015;
  --phoenix-red-deep: #A50011;
  --on-phoenix: #ffffff;
  --navy: #0a0a0b;
  --navy-deep: #000000;
  --navy-fill: #0a0a0b;
  --navy-fill-hover: #000000;
  --on-navy: #ffffff;
  --track: #5c5c5c;
  --ink: #111111;
  --player: #111111;
  --muted: #4a4a4a;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --paper: #ffffff;
  --paper-soft: #f4f4f4;
  --paper-elev: #ffffff;
  --paper-input: #ffffff;
  --ok: #0f6b32;
  --warn: #636366;
  --fail: #D70015;
  --accent: #0a0a0b;
  --accent-hover: #000000;
  --you: #ececec;
  --bubble-user: #ececec;
  --bubble-agent: #f4f4f4;
  --code-bg: #f0f0f0;
  --code-ink: #111111;
  --focus: #0a0a0b;
  --placeholder: #4a4a4a;
  --disabled: #4a4a4a;
  --link: #0a0a0b;
  --border: #5c5c5c;
  --switch-thumb: #ffffff;
  --theme-color: #ffffff;
  --hawkeye: #f4f4f4;
  --cloud: #f4f4f4;
  --system: #f4f4f4;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --rail-bg: #f7f7f7;
  --brand-navy: #0a0a0b;
  --font-brand: "Libre Baskerville", "Liberation Serif", Georgia, serif;
  --font-ui: "Inter", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: var(--font-ui);
  --font-display: var(--font-ui);
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 16px;
  --radius-sm: 10px;
  --header-h: 3.5rem;
  --tabbar-h: 0px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Design tokens (polish pass). New and touched rules use these instead of
     one-off values: a 4px spacing grid, one radius ladder, one type scale. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --radius-xs: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --text-2xs: 0.6875rem;  /* 11px  captions, badges */
  --text-xs: 0.75rem;     /* 12px  meta lines */
  --text-sm: 0.8125rem;   /* 13px  secondary text, small buttons */
  --text-base: 0.875rem;  /* 14px  body, list rows, buttons */
  --text-md: 0.9375rem;   /* 15px  chat body */
  --text-lg: 1.0625rem;   /* 17px  section titles */
  --text-xl: 1.25rem;     /* 20px  panel titles */
  --text-2xl: 1.5rem;     /* 24px  prices, page titles */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --control-h: 2.25rem;
  --control-h-sm: 1.875rem;
  --icon-sm: 16px;
  --icon-md: 20px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Grok / Linear: near-black, quiet lines, white primary actions. */
    --navy: #f4f4f4;
    --navy-deep: #ffffff;
    --navy-fill: #f4f4f4;
    --navy-fill-hover: #ffffff;
    --on-navy: #0a0a0b;
    --track: #8a8a8a;
    --ink: #f4f4f4;
  --player: #111111;
    --muted: #b8b8b8;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --paper: #0a0a0b;
    --paper-soft: #141414;
    --paper-elev: #161616;
    --paper-input: #111111;
    --ok: #34C759;
    --warn: #AEAEB2;
    --fail: #FF453A;
    --accent: #f4f4f4;
    --accent-hover: #ffffff;
    --you: #242424;
    --bubble-user: #242424;
    --bubble-agent: #161616;
    --code-bg: #161616;
    --code-ink: #f4f4f4;
    --focus: #ffffff;
    --placeholder: #b8b8b8;
    --disabled: #b8b8b8;
    --link: #f4f4f4;
    --border: #8a8a8a;
    --switch-thumb: #0a0a0b;
    --theme-color: #0a0a0b;
    --hawkeye: #141414;
    --cloud: #141414;
    --system: #161616;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
    --rail-bg: #0c0c0c;
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --navy: #0a0a0b;
  --navy-deep: #000000;
  --navy-fill: #0a0a0b;
  --navy-fill-hover: #000000;
  --on-navy: #ffffff;
  --track: #5c5c5c;
  --ink: #111111;
  --player: #111111;
  --muted: #4a4a4a;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --paper: #ffffff;
  --paper-soft: #f4f4f4;
  --paper-elev: #ffffff;
  --paper-input: #ffffff;
  --ok: #0f6b32;
  --warn: #636366;
  --fail: #D70015;
  --accent: #0a0a0b;
  --accent-hover: #000000;
  --you: #ececec;
  --bubble-user: #ececec;
  --bubble-agent: #f4f4f4;
  --code-bg: #f0f0f0;
  --code-ink: #111111;
  --focus: #0a0a0b;
  --placeholder: #4a4a4a;
  --disabled: #4a4a4a;
  --link: #0a0a0b;
  --border: #5c5c5c;
  --switch-thumb: #ffffff;
  --theme-color: #ffffff;
  --hawkeye: #f4f4f4;
  --cloud: #f4f4f4;
  --system: #f4f4f4;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --rail-bg: #f7f7f7;
}

html[data-theme="dark"] {
  color-scheme: dark;
  /* Grok / Linear: near-black, quiet lines, white primary actions. */
  --navy: #f4f4f4;
  --navy-deep: #ffffff;
  --navy-fill: #f4f4f4;
  --navy-fill-hover: #ffffff;
  --on-navy: #0a0a0b;
  --track: #8a8a8a;
  --ink: #f4f4f4;
  --player: #111111;
  --muted: #b8b8b8;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --paper: #0a0a0b;
  --paper-soft: #141414;
  --paper-elev: #161616;
  --paper-input: #111111;
  --ok: #34C759;
  --warn: #AEAEB2;
  --fail: #FF453A;
  --accent: #f4f4f4;
  --accent-hover: #ffffff;
  --you: #242424;
  --bubble-user: #242424;
  --bubble-agent: #161616;
  --code-bg: #161616;
  --code-ink: #f4f4f4;
  --focus: #ffffff;
  --placeholder: #b8b8b8;
  --disabled: #b8b8b8;
  --link: #f4f4f4;
  --border: #8a8a8a;
  --switch-thumb: #0a0a0b;
  --theme-color: #0a0a0b;
  --hawkeye: #141414;
  --cloud: #141414;
  --system: #161616;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
  --rail-bg: #0c0c0c;
}

* { box-sizing: border-box; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy-fill); }
button, summary, .app-nav-link { min-height: 44px; }
button:active,
button.is-busy,
button[aria-busy="true"] { opacity: 0.72; }
.app-nav-link { display: inline-flex; align-items: center; }
[data-machine-viewer-nav][hidden] { display: none !important; }
/* demo1114: the visible nav links (desktop rail, mobile tab bar) are anchors; no underline. */
a.pane-btn[data-machine-viewer-nav], a.rail-nav-item[data-machine-viewer-nav] { text-decoration: none; }
body.app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body.app select, body.app textarea { font-size: 16px; min-height: 44px; }
.account-pane, .pm-filters, .chat-msg { min-width: 0; overflow-wrap: anywhere; }


html, body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--font-ui);
  background: var(--paper);
}

body.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.atmosphere { display: none; }

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 80;
  padding: 0.45rem 0.75rem;
  background: var(--navy-fill);
  color: var(--on-navy);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus { top: calc(0.75rem + var(--safe-top)); }

/* —— App header —— */
.top {
  position: relative;
  z-index: 30;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 0.85rem;
  padding: calc(0.22rem + var(--safe-top)) clamp(0.7rem, 2vw, 1.15rem) 0.22rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.logo {
  width: 36px;
  height: 33px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  background: none;
  border: 0;
  padding: 0;
}

/* Black mark on light UI, white mark on dark UI (app toggle or system). */
.logo.mark-for-dark,
.login-logo.mark-for-dark { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .logo.mark-for-light,
  html:not([data-theme="light"]) .login-logo.mark-for-light { display: none; }
  html:not([data-theme="light"]) .logo.mark-for-dark,
  html:not([data-theme="light"]) .login-logo.mark-for-dark { display: block; }
}
html[data-theme="dark"] .logo.mark-for-light,
html[data-theme="dark"] .login-logo.mark-for-light { display: none; }
html[data-theme="dark"] .logo.mark-for-dark,
html[data-theme="dark"] .login-logo.mark-for-dark { display: block; }
html[data-theme="light"] .logo.mark-for-light,
html[data-theme="light"] .login-logo.mark-for-light { display: block; }
html[data-theme="light"] .logo.mark-for-dark,
html[data-theme="light"] .login-logo.mark-for-dark { display: none; }

.brand-copy { min-width: 0; }

.product {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 1.1;
}

.tagline { display: none; }

.app-nav {
  display: flex;
  gap: 0.15rem;
  flex: 1;
  justify-content: center;
}

.app-nav-link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.32rem 0.65rem;
  border-radius: var(--radius-sm);
}
.app-nav-link:hover,
.app-nav-link:focus-visible,
.app-nav-link.is-active {
  color: var(--navy);
  background: var(--paper-soft);
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.theme-toggle select {
  width: auto;
  min-height: 44px;
  padding: 0.2rem 0.45rem;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  background: var(--paper-input);
  color: var(--ink);
}
.theme-toggle-menu {
  justify-content: space-between;
  min-height: 44px;
  color: var(--ink);
}

.header-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: none;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: transparent;
}

.live-chip[data-phase="running_local"],
.live-chip[data-phase="routing"],
.live-chip[data-phase="escalating"],
.live-chip[data-phase="starting"] {
  border: none;
  background: transparent;
  color: var(--ink);
}

.live-chip[data-phase="paused"] {
  border-color: color-mix(in srgb, var(--warn) 50%, transparent);
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--paper));
}

.live-chip[data-phase="aborted"] {
  border-color: color-mix(in srgb, var(--fail) 50%, transparent);
  color: var(--fail);
  background: color-mix(in srgb, var(--fail) 8%, var(--paper));
}

.pulse {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 3rem;
}

h1, h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}

h1 { font-size: 1.28rem; }
h2 { font-size: 1.05rem; }

.lede, .section-note {
  margin: 0 0 0.85rem;
  color: var(--muted);
  max-width: 42rem;
  line-height: 1.5;
}

.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem 1.5rem;
  margin: 0 0 1.4rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.readout dt {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.readout dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 500;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
  min-height: 44px;
}

@media (hover: hover) { .btn:hover { background: var(--paper-soft); } }
.btn:disabled,
.btn.primary:disabled {
  opacity: 1;
  cursor: not-allowed;
  color: var(--disabled);
  background: var(--paper-soft);
  border-color: var(--border);
}
.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.btn.primary {
  background: var(--navy-fill);
  border-color: var(--navy-fill);
  color: var(--on-navy);
}
@media (hover: hover) { .btn.primary:hover { background: var(--navy-fill-hover); color: var(--on-navy); } }

.btn.danger {
  border-color: color-mix(in srgb, var(--fail) 55%, transparent);
  color: var(--fail);
  background: color-mix(in srgb, var(--fail) 6%, var(--paper));
}
@media (hover: hover) { .btn.danger:hover { background: color-mix(in srgb, var(--fail) 12%, var(--paper)); } }

.btn.ghost {
  background: transparent;
  border-style: solid;
  border-color: var(--border);
  color: var(--navy);
}
@media (hover: hover) { .btn.ghost:hover { background: var(--paper-soft); } }
.btn.compact { padding: 0.28rem 0.55rem; font-size: 0.82rem; min-height: 44px; }

.skip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.skip-row input,
input, select, textarea {
  background: var(--paper-input);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  min-width: 0;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
input:disabled, select:disabled, textarea:disabled {
  opacity: 1;
  color: var(--disabled);
  -webkit-text-fill-color: var(--disabled);
}

.skip-row input {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  min-width: 8rem;
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.checks li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 4px;
}
.badge.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.badge.fail { color: var(--fail); }
.badge.warn { color: var(--warn); }

.hint {
  color: var(--muted);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  text-align: right;
}

.meta {
  margin: 1rem 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.log-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.path {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.log-pane {
  margin: 0;
  max-height: 22rem;
  overflow: auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--code-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0.35rem 0.9rem calc(0.4rem + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 0.8rem;
}
.foot p { margin: 0; min-width: 0; }
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.85rem;
}
.foot a {
  color: var(--ink);
  font-weight: 650;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 390px) {
  .foot { align-items: flex-start; padding-inline: 0.75rem; }
}

.toast {
  position: fixed;
  z-index: 45;
  right: 0.85rem;
  bottom: 0.75rem;
  margin: 0;
  max-width: min(28rem, calc(100vw - 1.7rem));
  min-height: 0;
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  pointer-events: none;
}
.toast.is-on {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
  padding: 0.45rem 0.35rem 0.45rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper-elev);
  box-shadow: var(--shadow);
}
.toast-text { min-width: 0; }
.toast-close {
  appearance: none;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.toast-close::before { content: "×"; font-size: 1.1rem; line-height: 1; }
.toast:empty { display: none; }

/* —— Local only —— */
.local-only-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  user-select: none;
  padding: 0.2rem 0.45rem 0.2rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}

.local-only-switch:hover { border-color: var(--line-strong); }
.local-only-switch:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.local-only-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-track {
  position: relative;
  width: 2.15rem;
  height: 1.2rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--track);
  transition: background 0.22s ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 0.14rem;
  left: 0.14rem;
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 50%;
  background: var(--switch-thumb);
  box-shadow: 0 0 0 1px var(--border);
  transition: transform 0.22s ease;
}

.local-only-switch input:checked + .switch-track { background: var(--navy-fill); }
.local-only-switch input:checked + .switch-track::after { transform: translateX(0.92rem); }

.local-only-switch.is-on {
  border-color: var(--line-strong);
  background: var(--you);
}

.switch-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 4.6rem;
}

.switch-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}

.switch-hint {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.local-only-switch.is-on .switch-hint { color: var(--navy); }

/* —— Workspace / board —— */
.pm-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workspace-agents,
.workspace-projects,
.workspace-settings {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
}

body[data-pane="agents"] .workspace-agents {
  display: grid;
  grid-template-columns: minmax(12rem, 14.5rem) minmax(0, 1fr);
  overflow: hidden;
}

body[data-pane="projects"] .workspace-projects {
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0.65rem clamp(0.8rem, 2vw, 1.3rem) 1rem;
  background: var(--paper);
}

body[data-pane="settings"] .workspace-settings {
  display: grid;
  grid-template-columns: minmax(11.5rem, 13.5rem) minmax(0, 1fr);
  overflow: hidden;
}

.workspace-chat,
.bot-rail,
.settings-nav,
.settings-body,
.ops-panel,
.account-dialog,
.drawer-panel,
.login-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.workspace-projects .pm-heading,
.workspace-projects .pm-toolbar,
.workspace-projects .queue-composer,
.workspace-projects .pm-summary,
.workspace-projects .board-view-tabs,
.workspace-projects .task-queue,
.workspace-projects .kanban,
.workspace-projects .mine-projects,
.workspace-projects .project-folder {
  max-width: 1120px;
}

body[data-project-folder] .pm-toolbar,
body[data-project-folder] .queue-composer,
body[data-project-folder] .queue-hint,
body[data-project-folder] .pm-banner:not(#hubSyncBanner),
body[data-project-folder] .pm-summary,
body[data-project-folder] .board-view-tabs,
body[data-project-folder] .task-queue,
body[data-project-folder] .kanban,
body[data-project-folder] .mine-projects,
body[data-projects-view="mine"] .queue-composer,
body[data-projects-view="mine"] .queue-hint,
body[data-projects-view="mine"] .pm-banner:not(#hubSyncBanner),
body[data-projects-view="mine"] .pm-summary,
body[data-projects-view="mine"] .board-view-tabs,
body[data-projects-view="mine"] .task-queue,
body[data-projects-view="mine"] .kanban,
body[data-projects-view="folder"] .pm-toolbar,
body[data-projects-view="folder"] .queue-composer,
body[data-projects-view="folder"] .queue-hint,
body[data-projects-view="folder"] .pm-banner:not(#hubSyncBanner),
body[data-projects-view="folder"] .pm-summary,
body[data-projects-view="folder"] .board-view-tabs,
body[data-projects-view="folder"] .task-queue,
body[data-projects-view="folder"] .kanban,
body[data-projects-view="folder"] .mine-projects {
  display: none;
}

.bot-rail {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0.55rem 0.45rem 0.7rem;
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.workspace-chat {
  min-width: 0;
  min-height: 0;
  max-height: none;
  height: auto;
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.35rem 0.9rem 0;
  border: none;
  border-radius: 0;
  background: var(--paper);
}

.settings-nav {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0.55rem 0.45rem 0.7rem;
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.settings-nav .account-tab {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.42rem 0.5rem;
}

.settings-nav .account-tab.is-active {
  background: var(--you);
  color: var(--navy);
}

.settings-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0.7rem 1rem 1.1rem;
  border: none;
  border-radius: 0;
  max-width: 52rem;
}

.settings-body h2 {
  margin-bottom: 0.35rem;
}

.pm-heading {
  margin-bottom: 0.65rem;
}
.pm-heading h1,
.pm-heading h2 { margin-bottom: 0.15rem; font-size: 1.35rem; }
.pm-heading .section-note { margin-bottom: 0; font-size: 0.88rem; }

.pm-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.55rem 0.75rem;
  align-items: center;
  margin-bottom: 0.7rem;
}

.board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.board-tab,
.view-tab,
.account-tab,
.chip-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: 600 0.82rem var(--font-ui);
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.board-tab[aria-selected="true"],
.view-tab.is-active,
.account-tab.is-active {
  background: var(--navy-fill);
  color: var(--on-navy);
  border-color: var(--navy-fill);
}

.pm-filters {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.pm-filters select,
.drawer-actions select,
.queue-composer select {
  font: inherit;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
}

.queue-composer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: stretch;
  margin: 0 0 0.45rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.queue-composer input[type="text"] {
  flex: 1 1 14rem;
  min-height: 40px;
}

.queue-composer select { min-height: 40px; }

.queue-composer .btn {
  min-height: 40px;
}

.queue-hint {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.board-view-tabs {
  display: flex;
  gap: 0.3rem;
  margin: 0 0 0.65rem;
}

.pm-banner {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, var(--paper));
  color: var(--warn);
  font-size: 0.94rem;
  border-radius: var(--radius-sm);
}

body[data-projects-view="mine"] #hubSyncBanner:not([hidden]) {
  display: block;
}

.pm-summary { margin-bottom: 0.55rem; }
.pm-summary .section-note { margin-bottom: 0; font-size: 0.82rem; }

.count-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.count-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 0.18rem 0.4rem;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--navy);
  border-radius: var(--radius-sm);
}

.count-pill.is-empty { opacity: 1; color: var(--muted); }

.task-queue {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.queue-row {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr) auto;
  gap: 0.65rem 0.85rem;
  align-items: center;
  width: 100%;
  text-align: left;
  appearance: none;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.queue-row:last-child { border-bottom: none; }
.queue-row:hover { background: var(--paper-soft); }

.queue-row .tid {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.queue-row .tname {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.queue-row .tmeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.28rem;
}

.queue-empty {
  margin: 0;
  padding: 1.2rem 0.9rem;
}

.kanban-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
  align-items: start;
}

.kanban-col {
  background: var(--paper);
  border: 1px solid var(--line);
  min-height: 12rem;
  padding: 0.7rem 0.55rem 0.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.kanban-col.is-empty { background: var(--paper-soft); }

.kanban-col h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.kanban-col .col-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: 0.35rem;
  font-weight: 400;
}

.task-card {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.6rem 0.65rem 0.55rem;
  margin: 0 0 0.4rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
  border-radius: var(--radius-sm);
}

.task-card:hover { border-color: var(--line-strong); }

.task-card .tid {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  margin: 0 0 0.28rem;
}

.task-card .tname {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  font-size: 0.95rem;
}

.task-card .tmeta {
  margin: 0.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.chip {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--line);
  color: var(--navy);
  background: var(--paper);
  border-radius: var(--radius-sm);
}

.chip.p0 { border-color: color-mix(in srgb, var(--fail) 45%, transparent); color: var(--fail); }
.chip.p1 { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }

.col-empty,
.state-card {
  margin: 0.2rem 0 0;
  padding: 1.05rem 0.8rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
}

.col-empty {
  min-height: 5.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.col-empty-title {
  margin: 0 0 0.25rem;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.92rem;
}

.col-empty-copy { margin: 0; font-size: 0.84rem; }

.col-empty .chip-btn {
  margin-top: 0.65rem;
  align-self: flex-start;
}

.state-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}

.state-card.is-error {
  border-style: solid;
  border-color: color-mix(in srgb, var(--fail) 40%, transparent);
  color: var(--fail);
}

.state-title {
  margin: 0 0 0.35rem;
  color: var(--navy);
  font-weight: 700;
  font-size: 1.02rem;
  font-family: var(--font-display);
}

.state-copy { margin: 0; color: var(--muted); }

.mine-projects {
  margin-top: 0.5rem;
}

.project-folder {
  margin-top: 0.35rem;
  padding-bottom: 1.5rem;
}

.folder-crumb {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.folder-back {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--navy);
  font: 600 0.88rem var(--font-ui);
  cursor: pointer;
}

.folder-back:hover { text-decoration: underline; }

.folder-head {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.85rem;
}

.folder-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-mono);
}

.folder-head h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.15;
  color: var(--navy);
}

.folder-desc {
  margin: 0 0 0.45rem;
  color: var(--ink);
  line-height: 1.45;
  max-width: 42rem;
}

.folder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.folder-views {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.folder-view {
  min-height: 8rem;
}

.folder-record {
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}

.folder-record:first-child { border-top: none; padding-top: 0; }

.folder-record p {
  margin: 0.15rem 0 0;
  line-height: 1.45;
}

.folder-add {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}

.folder-add input,
.folder-add textarea {
  flex: 1;
}

.note-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.note-card {
  position: relative;
  padding-right: 28px;
}

/* An arrow drawn with borders: the sheet keeps one escaped chevron glyph. */
.note-card::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
}

.note-card-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
  color: var(--muted);
}

.note-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 10px;
}

/* Notes read like a page: fields show a border only on hover or focus. The
   #folderView id outranks the shared field rules. */
body #folderView .note-title,
body #folderView .note-body,
body #folderView .note-item-text {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: inherit;
  padding: 4px 6px;
}

body #folderView .note-title { font-size: 18px; font-weight: 600; }
body #folderView .note-body { resize: none; overflow: hidden; margin: 4px 0 8px; white-space: pre-wrap; }
body #folderView .note-item-text {
  min-height: 32px;
  resize: none;
  overflow: hidden;
  line-height: 1.4;
}

body #folderView .note-title:not([readonly]):hover,
body #folderView .note-body:not([readonly]):hover,
body #folderView .note-item-text:not([readonly]):hover { border-color: var(--line); }
body #folderView .note-title:focus,
body #folderView .note-body:focus,
body #folderView .note-item-text:focus { border-color: var(--ink); }
body #folderView .note-title[readonly],
body #folderView .note-body[readonly],
body #folderView .note-item-text[readonly] { border-color: transparent; }

.note-items {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
}

.note-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 7px;
}

.note-item.is-done .note-item-text {
  text-decoration: line-through;
  opacity: 0.6;
}

.goal-ledger-rows { margin: 0.25rem 0 0; padding-left: 1rem; font-size: 0.78rem; color: var(--muted); }
.goal-row { flex-direction: column; align-items: stretch; gap: 4px; }
.goal-top { display: flex; align-items: flex-start; gap: 8px; }
.goal-continue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 26px; margin-top: 6px; }
.goal-continue input { width: 7rem; min-height: 32px; font-size: 14px; }
.goal-checkpoint { padding-left: 26px; }
.goal-queue-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 26px; }
body #folderView .goal-queue-row select,
body #folderView .goal-queue-row input { min-height: 32px; font-size: 14px; }
body #folderView .goal-budget { width: 96px; }
.goal-state { flex: 1 1 120px; }
.goal-result summary { cursor: pointer; }
.goal-row.is-running .goal-state { color: var(--ink); font-weight: 600; }

.note-del {
  flex: none;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

.folder-warn {
  margin: 0.35rem 0 1rem;
  color: var(--ink);
  line-height: 1.45;
}

.share-members {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.75rem 0;
}

.share-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.92rem;
}

.share-form {
  display: grid;
  gap: 0.45rem;
}

.proj-card {
  cursor: pointer;
}

.proj-card:hover {
  background: var(--paper-soft);
}

.proj-card .proj-open-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--navy);
}

.proj-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

/* —— Drawer —— */
.task-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  padding: 1rem;
  pointer-events: auto;
}

.task-drawer[hidden] { display: none !important; }

.drawer-panel {
  width: min(520px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  background: var(--paper-elev);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.05rem 1.15rem;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.overlay-close {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.drawer-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 3;
  pointer-events: auto;
}

.drawer-id {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.drawer-panel h2 {
  margin: 0.35rem 0 0.75rem;
  font-size: 1.35rem;
  line-height: 1.2;
}

.drawer-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
}

.drawer-meta dt { color: var(--muted); }
.drawer-meta dd { margin: 0; color: var(--ink); }

.drawer-accept,
.drawer-notes {
  margin: 0 0 0.75rem;
  color: var(--ink);
  line-height: 1.45;
  white-space: pre-wrap;
}

.drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

/* —— Chat —— */
.chat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.15rem;
  flex: 0 0 auto;
}
.chat-head-title {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}
.agents-back { display: none; }
.chat-heading-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  min-width: 0;
}
.chat-head h1 {
  font-size: 1.05rem;
  margin-bottom: 0.08rem;
}
.chat-wake {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
}
.chat-wake[hidden] { display: none; }
.chat-wake-note {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
}
.chat-wake-note[hidden] { display: none; }

.chat-head-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.takeover-btn { margin-top: 0.45rem; }
#agentDesktopBtn.needs-you, #mobileDesktopBtn.needs-you { box-shadow: 0 0 0 2px var(--accent, #FF3B30); }
.toast-action { margin-left: 0.5rem; }

.computer-card {
  margin: 0.65rem 0 0.85rem;
  padding: 0.55rem 0 0.75rem;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.computer-card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.computer-desk {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 1.1rem;
}
.computer-desk[hidden] { display: none !important; }
.computer-desk-panel {
  width: min(1100px, 100%);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.computer-desk-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.computer-desk-head h2 { margin: 0; font-size: 1.05rem; }
.computer-desk-screen { position: relative; flex: 1; display: flex; min-height: 0; overflow: hidden; }
.computer-desk-screen iframe { flex: 1; }
.computer-desk-pad {
  position: absolute; inset: 0; touch-action: none; cursor: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.computer-desk-pad[hidden] { display: none; }
.computer-desk-cursor {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); border: 2px solid rgba(0, 0, 0, 0.7); pointer-events: none;
}
.computer-desk-cursor[hidden] { display: none; }
.computer-desk-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  padding: 0.45rem 0.6rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}
.computer-desk-tools[hidden] { display: none; }
.computer-desk-tools .btn[hidden] { display: none; }
.computer-desk-tools [aria-pressed="true"] { border-color: var(--line-strong); font-weight: 600; }
.computer-desk-keys { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
/* Focusable (never display:none or hidden), so the phone keyboard opens; 16px so iOS does not
   zoom. At the top edge, not far off-screen, so opening the keyboard does not scroll the page. */
.computer-desk-input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 16px; caret-color: transparent; }
/* Over the screen while the app updates or the stream reconnects: black, never the page behind it. */
.computer-desk-wait {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; padding: 1.5rem; background: #000; color: #fff; text-align: center;
}
.computer-desk-wait[hidden] { display: none; }
.computer-desk-wait p { margin: 0; max-width: 20rem; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.computer-desk-wait .btn { color: #fff; border-color: #fff; background: transparent; }
.computer-desk-spinner {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff;
  animation: computer-desk-spin 0.9s linear infinite;
}
.computer-desk-wait.is-failed .computer-desk-spinner { display: none; }
@keyframes computer-desk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .computer-desk-spinner { animation: none; border-top-color: #fff; border-right-color: #fff; } }
.computer-desk-modes { display: flex; gap: 0.3rem; margin-left: auto; }
.computer-desk-modes[hidden] { display: none; }
.computer-desk-modes .is-active { border-color: var(--line-strong); font-weight: 600; }
.computer-desk-panel iframe {
  flex: 1;
  min-height: min(70vh, 640px);
  width: 100%;
  border: 0;
  background: #000;
}
@media (max-width: 1023px) {
  .computer-desk { padding: 0; }
  .computer-desk-panel { border-radius: 0; height: 100%; }
  .computer-desk-panel iframe { min-height: 0; }
  /* One short row of controls above the screen, one below: the stream keeps the room. */
  .computer-desk-head { gap: 0.4rem; padding: 0.4rem 0.6rem; }
  .computer-desk-head > div:first-child { min-width: 0; }
  .computer-desk-head h2 { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #computerDeskNote { display: none; }
  .computer-desk-head .btn.compact,
  .computer-desk-tools .btn.compact { min-height: 38px; padding: 0.2rem 0.45rem; font-size: 0.85rem; white-space: nowrap; }
  .computer-desk-modes { gap: 0.15rem; }
  .computer-desk-tools { flex-wrap: nowrap; overflow-x: auto; gap: 0.25rem; padding: 0.3rem 0.5rem calc(0.3rem + env(safe-area-inset-bottom, 0px)); }
  .computer-desk-tools > *, .computer-desk-keys { flex: 0 0 auto; }
  .computer-desk-keys { flex-wrap: nowrap; }
}

.host-strip {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  margin: 0 0 0.25rem;
  padding: 0.12rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.host-strip strong {
  font-weight: 600;
  color: var(--navy);
}

.roster-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bot-roster {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  scrollbar-width: thin;
}

.bot-card {
  appearance: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0.38rem 0.42rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) { .bot-card:hover { background: var(--paper-soft); } }
.bot-card.is-selected {
  background: var(--you);
  box-shadow: inset 2px 0 0 var(--navy-fill);
}
.bot-card.is-off { opacity: 1; }
.bot-card.is-off .bot-status { color: var(--muted); }
.bot-card.is-future {
  opacity: 1;
}
.bot-card.is-future .bot-status { color: var(--muted); }
.bot-card.has-unread .bot-name { font-weight: 700; }

.bot-dot {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ok);
}
.bot-card.is-selected .bot-dot { background: var(--navy-fill); }
.bot-card.is-off .bot-dot { background: var(--track); }
.bot-card.is-future .bot-dot {
  background: transparent;
  border: 1px dashed var(--line-strong);
}

.bot-avatar { display: none; }

.bot-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.bot-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bot-card.is-selected .bot-name { color: var(--navy); }

.bot-status {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  color: var(--ok);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.5rem;
}

.bot-unread {
  width: 0.42rem;
  height: 0.42rem;
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--navy-fill);
}

.handoff-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin: 0 0 0.2rem;
  padding: 0.22rem 0;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font-size: 0.78rem;
}

.chat-head .section-note { margin-bottom: 0; font-size: 0.78rem; }

.chat-model-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  margin-top: 0.15rem;
}
.chat-model-line[hidden],
.served-model[hidden],
.output-mode[hidden] { display: none; }
.served-model {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}
.output-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.output-mode select {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.15rem 0.4rem;
  min-height: 0;
}

.chat-status {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  max-width: 16rem;
  text-align: right;
}

.chat-status[data-kind="pending"] {
  color: var(--muted);
  border-color: var(--line-strong);
  background: var(--paper);
}

.chat-status[data-kind="escalate"] {
  color: var(--navy);
  border-color: var(--line-strong);
  background: var(--you);
}

.chat-status[data-kind="local"] {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}

.chat-status[data-kind="error"] {
  color: var(--fail);
  border-color: color-mix(in srgb, var(--fail) 40%, transparent);
}

.chat-status[data-kind="muted"] {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--paper-soft);
}

.chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.15rem 0.05rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.chat-empty {
  margin: auto 0;
  width: min(28rem, 100%);
  padding: 0.35rem 0.1rem 0.6rem;
  text-align: left;
}

.chat-empty .state-title {
  font-size: 1rem;
  font-weight: 600;
}
.chat-empty .state-copy {
  font-size: 0.82rem;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

@media (hover: hover) { .chip-btn:hover { border-color: var(--line-strong); background: var(--you); } }

.chat-msg {
  max-width: min(100%, 42rem);
  display: block;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.chat-msg.you {
  align-self: flex-end;
  max-width: min(88%, 36rem);
}

.chat-msg.you .chat-msg-main {
  padding: 0.45rem 0.65rem;
  background: var(--bubble-user);
  border-radius: var(--radius);
}

.chat-msg.cloud,
.chat-msg.bot {
  background: transparent;
}

.chat-msg.system {
  max-width: 100%;
  padding-left: 0.55rem;
  border-left: 2px solid var(--line);
  color: var(--muted);
}
.chat-msg.system.is-wake-note {
  border-left-color: var(--line);
  color: var(--muted);
}
.chat-msg.system.is-wake-note .chat-msg-body {
  color: var(--muted);
}

.chat-msg.pending { opacity: 1; color: var(--ink); }
.chat-msg.thinking .chat-msg-body { display: flex; flex-direction: column; gap: 0.15rem; }
.chat-msg.thinking .chat-step { font-weight: 500; }
/* A typing bubble for a quick reply, or for work that goes on after the reply. */
.chat-msg[data-interject],
.chat-msg[data-bg-typing] {
  width: fit-content;
  min-width: 4rem;
  align-self: flex-start;
  justify-self: start;
  border-radius: 1.1rem;
}
.chat-msg[data-interject] .chat-msg-body,
.chat-msg[data-bg-typing] .chat-msg-body { padding: 0.15rem 0.35rem; }
.chat-msg[data-interject] .chat-typing,
.chat-msg[data-bg-typing] .chat-typing { color: var(--muted); }
.chat-msg.thinking .chat-think {
  color: var(--muted);
  font-style: normal;
  opacity: 1;
  max-height: 4.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.chat-msg.thinking .chat-msg-body:has(.typing-indicator)::after,
.chat-msg.thinking .chat-msg-body:has(.chat-working)::after,
.chat-msg.is-working .chat-msg-body::after { content: none; animation: none; }

.chat-working {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-height: 0;
}
.chat-working-status,
.chat-working-text,
.chat-working-steps,
.chat-working-elapsed,
.chat-working-error,
.chat-working-error-id {
  margin: 0;
}
.chat-working-elapsed {
  min-height: 0;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.chat-working[data-phase="starting"] .chat-working-elapsed::before,
.chat-working[data-phase="streaming"] .chat-working-elapsed::before {
  content: "";
  display: inline-block;
  width: 0.32rem;
  height: 0.32rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--ink);
  vertical-align: 0.05em;
  animation: trace-pulse 1.4s ease-in-out infinite;
}
.chat-working-live:has(.phoenix-slot) .chat-working-elapsed::before { content: none; animation: none; }
.chat-working-status {
  min-height: 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.chat-working-error {
  margin-top: 0.35rem;
  color: var(--ink);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.chat-working-error-id {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.chat-working-retry {
  align-self: flex-start;
  margin-top: 0.55rem;
}
.chat-served-tier {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.chat-working-step.is-error { color: var(--ink); }
.chat-working-steps {
  display: grid;
  gap: 0.06rem;
  padding: 0;
  margin: 0.05rem 0 0;
  list-style: none;
  font-size: 0.76rem;
  color: var(--muted);
}
.chat-working-step {
  position: relative;
  overflow-wrap: anywhere;
  min-height: 0;
  padding-left: 0.85rem;
}
.chat-working-step::before {
  content: "";
  position: absolute;
  left: 0.08rem;
  top: 0.45em;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--muted);
}
.chat-working-text {
  min-height: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  line-height: 1.42;
}
.chat-jump {
  position: absolute;
  left: 50%;
  bottom: 5.6rem;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-elev);
  color: var(--ink);
  font: 600 0.78rem var(--font-ui);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.chat-jump[hidden] { display: none; }
@media (max-width: 420px) {
  .chat-jump { bottom: 6.4rem; max-width: calc(100% - 1.5rem); }
}
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.35rem;
}
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
.typing-dots span {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--muted);
  opacity: 1;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
.typing-label { font-size: 0.88rem; color: var(--muted); }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0) scale(0.85); }
  40% { transform: translateY(-3px) scale(1); }
}
.chat-msg.thinking .chat-msg-body::after {
  content: "\2026";
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: hawkeye-dots 1.4s steps(4) infinite;
}
@keyframes hawkeye-dots {
  to { width: 1.2em; }
}

.chat-msg.is-error {
  border-left: 2px solid color-mix(in srgb, var(--fail) 55%, transparent);
  color: var(--fail);
}

.chat-msg.system.is-error {
  border-left-color: var(--line);
  color: var(--ink);
}
.chat-msg.system.is-error .chat-msg-body,
.chat-msg.system.is-error .chat-msg-who {
  color: var(--ink);
}

.chat-msg-avatar { display: none; }

.chat-msg-main { min-width: 0; }

.chat-msg-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.12rem;
}

.chat-msg.you .chat-msg-head { justify-content: flex-end; }

.chat-msg-who {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  font-family: var(--font-display);
}

.chat-chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 0.04rem 0.28rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--navy);
  background: transparent;
}
.chat-chip.is-local {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
.chat-chip.is-specialist,
.chat-chip.is-handoff {
  background: var(--navy-fill);
  color: var(--on-navy);
  border-color: var(--navy-fill);
}

.chat-msg-body {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.42;
  font-size: 0.96rem;
}

/* Agent replies with structure: headings, lists and paragraphs read as sections. */
.chat-msg-body.is-marked, .chat-working-text.is-marked { white-space: normal; }
.chat-md-p, .chat-md-h, .chat-md-list { white-space: pre-wrap; }
.chat-md-p { margin: 0 0 0.65em; }
.chat-md-h { margin: 0.9em 0 0.35em; font-weight: 650; line-height: 1.3; }
.chat-md-h1 { font-size: 1.15em; }
.chat-md-h2 { font-size: 1.08em; }
.chat-md-list { margin: 0 0 0.65em; padding-left: 1.35em; }
.chat-md-list .chat-md-list { margin: 0.2em 0 0; }
.chat-md-list li { margin: 0.22em 0; padding-left: 0.15em; }
.chat-md-list li::marker { color: var(--muted); }
.is-marked strong { font-weight: 650; }
.chat-md-rule { border: 0; border-top: 1px solid var(--line); margin: 0.8em 0; }
.is-marked > :first-child { margin-top: 0; }
.is-marked > :last-child { margin-bottom: 0; }

.chat-inline-code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.05em 0.28em;
  border-radius: 4px;
  background: var(--code-bg);
  color: var(--ink);
}

.chat-code {
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  border-radius: 12px;
  background: #2a2a2a;
  color: #ececec;
  overflow: hidden;
}
.chat-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem 0.1rem;
  color: #b5b5b5;
  font-size: 0.75rem;
}
.chat-code-lang {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.chat-code-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c8c8c8;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.2;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.chat-code-copy:focus,
.chat-code-copy:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.chat-code-pre {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  padding: 0.35rem 0.75rem 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.chat-code-pre code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  color: #f3f3f3;
}
.chat-code .chat-code-pre,
.chat-code .chat-code-pre code {
  background: #2a2a2a;
  color: #f3f3f3;
}
.chat-code .chat-code-pre code { padding: 0; }

.chat-msg-copy-row {
  display: flex;
  align-items: center;
  margin-top: 0.15rem;
  min-height: 44px;
}
.chat-msg.you .chat-msg-copy-row { justify-content: flex-end; }
.chat-msg-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.chat-msg-copy svg { display: block; width: 18px; height: 18px; color: currentColor; }
.chat-msg-copy:focus,
.chat-msg-copy:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .chat-msg-copy { opacity: 0; }
  .chat-msg:hover .chat-msg-copy,
  .chat-msg:focus-within .chat-msg-copy { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .chat-msg-copy { opacity: 1; }
}

.chat-form {
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  isolation: isolate;
  pointer-events: auto;
  margin: 0;
  padding: 0.55rem 1rem 0.7rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0;
}

.chat-attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}
.chat-attach-preview[hidden],
.chat-attach-preview:empty { display: none; }
.attach-menu {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}
.attach-menu[hidden] { display: none; }
.attach-menu-title,
.attach-menu-note { margin: 0; }
.attach-menu-title { font-weight: 650; }
.attach-menu-note { color: var(--muted); font-size: 0.82rem; }
.composer-error {
  margin: 0 0 0.45rem;
  color: var(--ink);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.composer-error[hidden] { display: none; }
.attach-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.attach-types li {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
}
.attach-types li span { color: var(--muted); }
.attach-chip {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-input);
}
.attach-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.attach-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--navy-fill);
  color: var(--on-navy);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.chat-msg-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.chat-msg-images img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 8px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  position: relative;
  z-index: 6;
  pointer-events: auto;
  padding: 0.35rem 0.4rem 0.35rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-input);
}

.chat-form textarea {
  flex: 1 1 auto;
  width: auto;
  min-height: 2.75rem;
  max-height: 11rem;
  padding: 0.45rem 0.15rem;
  resize: none;
  background: transparent;
  border: none;
  box-shadow: none;
  line-height: 1.4;
}

.chat-form textarea:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.chat-composer:focus-within {
  outline: none;
  border-color: var(--line-strong);
}

.chat-form #chatSend {
  flex: 0 0 auto;
  min-width: 4.4rem;
  min-height: 44px;
  position: relative;
  z-index: 7;
  pointer-events: auto;
}

.chat-form .icon-btn {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  position: relative;
  z-index: 7;
  pointer-events: auto;
}

.chat-form .icon-btn.is-listening {
  background: color-mix(in srgb, var(--fail) 14%, var(--paper));
  border-color: color-mix(in srgb, var(--fail) 45%, var(--line));
  color: var(--fail);
}

.chat-form .icon-btn:disabled {
  opacity: 1;
  color: var(--disabled);
}

.voice-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.account-subhead {
  margin: 1.1rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--navy);
}

.chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.4rem;
}

.chat-overflow-btn,
.chat-overflow-panel,
.chat-overflow-tools {
  display: none;
}

.mobile-bar { display: none; }
.overflow-legal {
  font-size: 0.78rem;
  color: var(--muted);
  align-self: flex-start;
}
.chat-overflow-panel.is-open {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  margin: 0 auto;
  width: min(100%, 38rem);
  max-height: 80dvh;
  overflow: auto;
  padding: 1.25rem 1rem calc(1.25rem + var(--safe-bottom));
  color: var(--ink);
  background: var(--paper-elev);
  border: 1px solid var(--line-strong);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-lg);
}
.chat-overflow-panel.is-open .theme-toggle-menu { display: flex; width: 100%; font-size: 1rem; }
.chat-overflow-panel.is-open #logoutBtnChat { display: inline-flex; align-self: flex-start; }
.chat-overflow-panel.is-open .overflow-legal { display: inline; }
body[data-runtime="cloud"] .local-worker-status { display: none !important; }
body[data-runtime="cloud"] .handoff-banner[data-local-return="1"] { display: none !important; }

.section-load-error {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin: 0.75rem 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  color: var(--ink);
}
.section-load-error[hidden] { display: none; }
.section-load-error-copy { margin: 0; flex: 1 1 12rem; line-height: 1.4; }
.section-load-error-detail { margin: 0; flex: 1 0 100%; color: var(--muted); font-size: 0.78rem; }
#logoutBtn { flex: 0 0 auto; }
.chat-head-signout { display: none; }
.shell-updating {
  margin: 0;
  padding: 0.55rem 1rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--muted);
  background: var(--paper-soft);
  border-bottom: 1px solid var(--line);
}
.shell-updating[hidden] { display: none; }

.check-inline {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
}

.check-inline #chatProject {
  max-width: 11rem;
  min-height: 44px;
}

.chat-typing {
  display: inline-flex;
  gap: 0.28rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.chat-typing i {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  animation: bounce 1.1s ease-in-out infinite;
}
.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0) scale(0.85); }
  40% { transform: translateY(-3px) scale(1); }
}

/* —— Inbox —— */
.inbox {
  margin: 0;
  padding: 0.15rem 0 1rem;
  border: none;
  border-radius: 0;
}

.inbox-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.inbox-head h2 { margin: 0; }

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.65rem;
}

.inbox-item {
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}

.inbox-item:first-child {
  border-top: none;
  padding-top: 0.2rem;
}

.inbox-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.inbox-subject {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  color: var(--ink);
  font-weight: 600;
}

.inbox-body,
.inbox-draft {
  margin: 0.3rem 0;
  white-space: pre-wrap;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.45;
}

.inbox-draft {
  padding-left: 0.75rem;
  border-left: 3px solid var(--navy);
}

.inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.inbox-empty {
  margin: 0.35rem 0 0;
  padding: 1rem 0.2rem 0.4rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.ops-panel {
  margin: 0.75rem 0 0;
  padding: 0.15rem 0 0.85rem;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.ops-panel > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  padding: 0.75rem 0;
}

.ops-panel .nested {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.view-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.account-dialog {
  border: 1px solid var(--line);
  padding: 0;
  width: min(880px, 96vw);
  max-height: 90vh;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  z-index: 70;
  pointer-events: auto;
}
.account-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.account-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.9rem 1rem 1.05rem;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.account-panel-head .overlay-close {
  flex: 0 0 auto;
}
.account-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.account-panel-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.account-pane { display: none; }
.account-pane.is-active { display: block; }
.account-pane label {
  display: block;
  margin: 0.65rem 0 0.3rem;
  font-size: 0.9rem;
}
.account-pane input:not([type="checkbox"]),
.account-pane select,
.account-pane textarea,
.inline-form input:not([type="checkbox"]),
.inline-form select {
  width: 100%;
}
.account-pane .local-only-switch {
  display: inline-flex;
  width: auto;
  margin: 0.75rem 0 0.35rem;
}
.account-pane .local-only-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.inline-form {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.inline-form input,
.inline-form select { flex: 1; }
.connections-list,
.account-projects {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.conn-card,
.proj-card {
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
}
.conn-card:first-child,
.proj-card:first-child { border-top: none; padding-top: 0; }
.conn-head,
.proj-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}
.conn-status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: lowercase;
}
.conn-status.test { text-transform: none; }
.conn-status.on { color: var(--ok); }
.conn-status.off { color: var(--muted); }
.conn-status.warn { color: var(--warn); }
.conn-status.fail { color: var(--fail); }
.conn-status.machine { color: var(--warn); }
.conn-status.unreadable { color: var(--warn); }
.conn-status.auth { color: var(--warn); }
.conn-status.unreachable { color: var(--muted); }
.inline-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.65rem 0;
  font-size: 0.92rem;
}
.machine-log {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.78rem;
  white-space: pre-wrap;
  background: var(--code-bg);
  color: var(--code-ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 8rem;
  overflow: auto;
}
.conn-fields {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.55rem;
}
.conn-webhook {
  margin-top: 0.55rem;
}
.conn-webhook-row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.conn-webhook-row input {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.conn-allowlist {
  margin-top: 0.7rem;
}
.conn-allowlist-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.conn-allowlist-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.conn-allowlist-num {
  font-family: var(--font-mono);
  font-size: 0.88rem;
}
.conn-allowlist-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.5rem;
}
.conn-allowlist-add input {
  flex: 1 1 10rem;
  min-width: 10rem;
  font-family: var(--font-mono);
}
.conn-actions,
.proj-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}
.proj-rename {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  width: 100%;
}
.proj-rename input {
  flex: 1 1 8rem;
  min-width: 0;
  min-height: 44px;
  font-size: 16px;
}
.msg-badge[hidden] { display: none; }
.msg-badge {
  display: inline-block;
  margin-left: 0.2rem;
  min-width: 1.1rem;
  padding: 0 0.3rem;
  background: var(--navy-fill);
  color: var(--on-navy);
  font-size: 0.7rem;
  line-height: 1.15rem;
  text-align: center;
  border-radius: var(--radius-sm);
}

/* —— Login —— */
.login-page {
  background: var(--paper-soft);
}
.login-page .login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(1.25rem, env(safe-area-inset-top)) 1.15rem max(1.5rem, env(safe-area-inset-bottom));
}
@media (max-width: 1023px) {
  .login-page .login-wrap {
    place-items: start center;
    align-content: start;
    overflow-y: auto;
    padding-bottom: 40vh;
  }
}

.login-stack {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.login-stack .login-card {
  width: 100%;
  max-width: 100%;
}

.login-card {
  width: min(400px, 100%);
  max-width: 100%;
  padding: 1.45rem 1.3rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow-x: hidden;
}

.login-card h1 {
  margin: 0.55rem 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.login-lede {
  margin: 0 0 0.2rem;
  color: var(--ink);
  line-height: 1.4;
  font-size: 0.95rem;
}

.login-sub {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.9rem;
}

.login-card label {
  display: block;
  margin: 0.75rem 0 0.35rem;
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 600;
}

.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 0.85rem;
  font-size: 16px;
  min-height: 44px;
}

.login-card input.is-invalid {
  border-color: var(--fail);
}

.pw-row {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
}
.pw-row input { flex: 1; min-width: 0; }

.pw-toggle {
  flex: 0 0 auto;
  min-width: 4.6rem;
  min-height: 44px;
  border: 1px solid var(--border);
  background: var(--paper-soft);
  color: var(--navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pw-toggle:hover { background: var(--you); }

.login-card .btn {
  width: 100%;
  margin-top: 1rem;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 600;
}
.login-card .btn[disabled] { pointer-events: none; }

.login-err {
  min-height: 1.35rem;
  margin: 0.75rem 0 0;
  color: var(--fail);
  font-size: 0.92rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.login-err:empty { display: none; }
.login-err[data-code] { font-weight: 600; }

.login-hint {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
@media (max-width: 390px) {
  .login-page .login-wrap { padding-left: 0.75rem; padding-right: 0.75rem; }
  .login-card { width: 100%; padding-left: 1rem; padding-right: 1rem; }
}

.login-logo {
  width: 64px;
  height: 59px;
  display: block;
  object-fit: contain;
  background: none;
  border: 0;
  padding: 0;
}

.login-profile {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

.login-profile summary,
.login-help summary {
  cursor: pointer;
  color: var(--navy);
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.login-help {
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.login-help a,
.login-sub a {
  color: var(--link);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.login-profile,
.login-help {
  max-width: 100%;
}

.login-banner {
  display: none;
  margin: 0 0 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--fail) 40%, transparent);
  background: color-mix(in srgb, var(--fail) 8%, var(--paper));
  color: var(--fail);
  font-size: 0.9rem;
  line-height: 1.4;
  border-radius: var(--radius-sm);
}
.login-banner.is-on { display: block; }
.login-banner.is-info {
  border-color: color-mix(in srgb, var(--navy) 25%, transparent);
  background: var(--you);
  color: var(--ink);
}

.waitlist-card h2,
.admin-waitlist h1,
.legal-page h1 {
  margin: 0.2rem 0 0.35rem;
  font-size: 1.45rem;
  color: var(--ink);
}
.create-account-card {
  margin: 0;
  text-align: center;
}
.create-account-card a,
.check a,
.legal-page a,
.admin-waitlist a {
  color: var(--link);
  font-weight: 650;
}
.opt { color: var(--muted); font-weight: 500; }
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.waitlist-ok {
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--ink);
  line-height: 1.45;
}
.check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin-top: 0.9rem;
  min-height: 44px;
  font-weight: 600;
  line-height: 1.4;
}
.check input {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  flex: 0 0 auto;
}
.plan-pick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0.8rem 0 0;
  border: 0;
  padding: 0;
  min-inline-size: 0;
}
.plan-legend {
  font-weight: 650;
  margin-bottom: 0.35rem;
  padding: 0;
}
.tier-card {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}
.tier-card.is-selected {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.tier-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tier-name { font-weight: 700; }
.tier-price { font-size: 1.05rem; }
.tier-credits { color: var(--muted); font-size: 0.9rem; }
.legal-page,
.admin-waitlist {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 1.5rem 1.1rem 2.5rem;
  color: var(--ink);
}
.placeholder-banner {
  display: inline-block;
  margin: 0 0 0.8rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--ink);
  font-weight: 700;
}
.waitlist-count { font-weight: 650; }
.waitlist-table-wrap { overflow-x: auto; margin-top: 1rem; }
.waitlist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.waitlist-table th,
.waitlist-table td {
  text-align: left;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.waitlist-table th { font-weight: 700; }
.ap-bug-row { cursor: pointer; }
.ap-bug-row:hover, .ap-bug-row:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ap-bug-ctx { border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem; max-height: 14rem; overflow-y: auto; }
.ap-bug-ctx-line { padding: 0.2rem 0; border-bottom: 1px dashed var(--line); }
.ap-bug-ctx-line:last-child { border-bottom: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
@media (max-width: 480px) {
  .waitlist-table thead { display: none; }
  .waitlist-table tr {
    display: block;
    margin-bottom: 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.6rem;
  }
  .waitlist-table td {
    display: block;
    border: 0;
    padding: 0.25rem 0;
  }
  .waitlist-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
  }
}

.pane-switch {
  display: none;
  flex: 0 0 auto;
}

.toast {
  left: 50%;
  right: auto;
  bottom: calc(1rem + var(--safe-bottom));
  transform: translateX(-50%);
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

body:not([data-admin="1"]) .admin-only { display: none !important; }

/* —— 2026 refresh: calmer surfaces, avatars, cards —— */
body.app { background: var(--paper); -webkit-font-smoothing: antialiased; }

.top {
  padding: calc(0.45rem + var(--safe-top)) clamp(0.8rem, 2vw, 1.25rem) 0.45rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}
.logo { width: 36px; height: 33px; border-radius: 0; padding: 0; }
.product { font-size: 1.05rem; }
.app-nav {
  flex: 0 1 auto;
  margin: 0 auto;
  padding: 0.2rem;
  gap: 0.15rem;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.app-nav-link {
  padding: 0.34rem 0.95rem;
  border-radius: 999px;
  font-size: 0.88rem;
  transition: background 120ms ease, color 120ms ease;
}
.app-nav-link:hover, .app-nav-link:focus-visible { background: transparent; color: var(--ink); }
.app-nav-link.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.btn {
  border-color: var(--line-strong);
  color: var(--ink);
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn.compact { min-height: 44px; padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.btn.primary { border-color: transparent; }
.btn.ghost { border-color: transparent; color: var(--muted); }
@media (hover: hover) { .btn.ghost:hover { color: var(--ink); } }
.btn.danger-text { color: var(--fail); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  border-radius: var(--radius-sm);
}

/* ── polish: shared controls ──
   One height ladder (--control-h / --control-h-sm), one radius ladder, one type
   scale and one set of states for buttons, fields, selects, switches, chips,
   dialogs and toasts, in light and dark. Selectors carry `body` so that
   area-specific rules (account sheet, rail, chat, projects) still win. Touch
   screens keep the 44px tap target. */
:root {
  --ctl-border: color-mix(in srgb, var(--ink) 44%, var(--paper));
  --ctl-border-hover: color-mix(in srgb, var(--ink) 60%, var(--paper));
  --ctl-ring: 0 0 0 3px color-mix(in srgb, var(--ink) 16%, transparent);
  --ctl-hover: color-mix(in srgb, var(--ink) 6%, var(--paper));
  --ctl-active: color-mix(in srgb, var(--ink) 11%, var(--paper));
  --ctl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234a4a4a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.25l4 4 4-4'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ctl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b8b8b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.25l4 4 4-4'/%3E%3C/svg%3E");
  }
}
html[data-theme="dark"] {
  --ctl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b8b8b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.25l4 4 4-4'/%3E%3C/svg%3E");
}

body .btn {
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  gap: var(--space-2);
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 120ms var(--ease);
}
@media (hover: hover) { body .btn:hover { background: var(--ctl-hover); border-color: var(--ctl-border-hover); } }
body .btn:active:not(:disabled) { background: var(--ctl-active); transform: none; }
body .btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--ctl-ring), 0 0 0 1px var(--ink); }
body .btn.compact { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
body .btn.primary { background: var(--navy-fill); border-color: var(--navy-fill); color: var(--on-navy); }
@media (hover: hover) { body .btn.primary:hover { background: var(--navy-fill-hover); border-color: var(--navy-fill-hover); } }
body .btn.primary:active:not(:disabled) { background: color-mix(in srgb, var(--navy-fill) 82%, var(--paper)); }
body .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
@media (hover: hover) { body .btn.ghost:hover { background: var(--ctl-hover); border-color: transparent; color: var(--ink); } }
body .btn.danger { background: transparent; border-color: color-mix(in srgb, var(--fail) 50%, transparent); color: var(--fail); }
@media (hover: hover) { body .btn.danger:hover { background: color-mix(in srgb, var(--fail) 10%, var(--paper)); border-color: var(--fail); } }
body .btn.danger-text, body .btn.ghost.danger-text { color: var(--fail); }
@media (hover: hover) { body .btn.ghost.danger-text:hover { background: color-mix(in srgb, var(--fail) 10%, var(--paper)); color: var(--fail); } }
body .btn:disabled,
body .btn.primary:disabled,
body .btn[aria-disabled="true"] {
  background: var(--paper-soft);
  border-color: var(--line);
  color: var(--disabled);
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none;
}
body .btn.ghost:disabled { background: transparent; border-color: transparent; }

/* Fields. Chat composer, rail search and the chat-header selects keep their own look. */
body:is(.app, body) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)),
body:is(.app, body) select:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)),
body:is(.app, body) textarea:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)) {
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius-sm);
  background-color: var(--paper-input);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
body:is(.app, body) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)),
body:is(.app, body) select:where(:not([multiple])):where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)) {
  min-height: var(--control-h);
  padding: 0 var(--space-3);
}
body:is(.app, body) textarea:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)) { padding: var(--space-2) var(--space-3); }
body:is(.app, body) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)):hover,
body:is(.app, body) select:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)):hover,
body:is(.app, body) textarea:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)):hover { border-color: var(--ctl-border-hover); }
body:is(.app, body) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)):focus,
body:is(.app, body) select:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)):focus,
body:is(.app, body) textarea:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)):focus {
  outline: 2px solid transparent;
  border-color: var(--ink);
  box-shadow: var(--ctl-ring);
}
body:is(.app, body) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)):disabled,
body:is(.app, body) select:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)):disabled,
body:is(.app, body) textarea:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)):disabled { background-color: var(--paper-soft); border-color: var(--line); cursor: not-allowed; }
body:is(.app, body) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch))[aria-invalid="true"],
body:is(.app, body) select:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch))[aria-invalid="true"],
body:is(.app, body) textarea:where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch))[aria-invalid="true"] { border-color: var(--fail); }
body:is(.app, body) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch))[readonly] { background-color: var(--paper-soft); }

/* Native selects: one custom appearance wherever they are not already styled
   by chat, composer or rail rules. */
body:is(.app, body) select:where(:not([multiple], #superModeToggle, #composerMode, #chatProject, #themeChat, .chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *)) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-8);
  background-image: var(--ctl-chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: var(--icon-sm) var(--icon-sm);
  text-overflow: ellipsis;
  cursor: pointer;
}
body select option { background: var(--paper); color: var(--ink); }

body .chip,
body .badge,
body .count-pill {
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

body .toast {
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
body .confirm-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
body .confirm-actions { gap: var(--space-2); margin-top: var(--space-4); }
body .confirm-dialog::backdrop { background: rgb(0 0 0 / 55%); backdrop-filter: blur(2px); }

body .local-only-switch input:focus-visible + .switch-track,
body .routine-switch input:focus-visible + .switch-track { box-shadow: var(--ctl-ring), 0 0 0 1px var(--ink); }
body .switch-track { background: color-mix(in srgb, var(--ink) 32%, var(--paper)); }
body .local-only-switch input:checked + .switch-track,
body .routine-switch input:checked + .switch-track { background: var(--navy-fill); }
body .inline-form { align-items: center; gap: var(--space-2); }

@media (pointer: coarse), (max-width: 1023px) {
  body .btn,
  body .btn.compact { min-height: 44px; }
  body.app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)),
  body.app select:where(:not([multiple])):where(:not(.chat-form *, .home-composer *, .chat-actions *, .composer-mode *, .output-mode *, #computerDeskKeys, #integrationsSearch)) { min-height: 44px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body .btn, body input, body select, body textarea { transition: none; }
}

/* Agents rail */
.bot-rail {
  background: var(--rail-bg);
  padding: 1.5rem 1rem 1rem;
  gap: 0.35rem;
}
body[data-pane="agents"] .workspace-agents { grid-template-columns: minmax(18rem, 21rem) minmax(0, 1fr); }
.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.35rem 0.25rem;
}
.workspace-kicker { margin: 0 0 0.5rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rail-title { margin: 0; font-size: 1.6rem; letter-spacing: -0.045em; color: var(--ink); }
.rail-intro { margin: 0.6rem 0.35rem 1.2rem; color: var(--muted); font-size: 0.85rem; line-height: 1.6; }
.roster-onboarding { margin-top: 1rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.roster-onboarding h2 { font-size: 1.2rem; letter-spacing: -0.035em; margin-top: 0.7rem; }
.roster-onboarding p { font-size: 0.85rem; line-height: 1.6; color: var(--muted); }
.roster-onboarding .btn { margin-top: 0.5rem; }
.rail-add { gap: 0.2rem; padding-inline: 0.5rem; color: var(--ink); }
.rail-add:hover { background: var(--paper-soft); }
.roster-group {
  margin: 0.8rem 0.45rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bot-roster { gap: 0.15rem; }
.bot-card {
  position: relative;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  transition: background 120ms ease;
}
@media (hover: hover) { .bot-card:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } }
.bot-card.is-selected {
  background: var(--paper);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
}
.bot-card.is-off { opacity: 1; }
.bot-card.is-off .bot-name,
.bot-card.is-paused .bot-name { color: var(--muted); }
.bot-name { font-size: 0.9rem; }
.bot-status {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--muted);
}
.bot-status.is-warn { color: var(--warn); }
.bot-status.is-fail { color: var(--fail); }
.bot-status.is-idle { color: var(--muted); }
.bot-status-hint { color: var(--muted); font-weight: 400; }
.bot-card-copy { gap: 0.1rem; }

.agent-avatar {
  --tint: var(--navy-fill);
  position: relative;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  background: var(--tint);
}
.agent-avatar.is-hawkeye {
  background-color: transparent;
  background-image: url("/landing/logo-mark-black.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% auto;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .agent-avatar.is-hawkeye {
    background-image: url("/landing/logo-mark-white.svg");
  }
}
html[data-theme="dark"] .agent-avatar.is-hawkeye {
  background-image: url("/landing/logo-mark-white.svg");
}
html[data-theme="light"] .agent-avatar.is-hawkeye {
  background-image: url("/landing/logo-mark-black.svg");
}
.agent-avatar.is-large { width: 3.5rem; height: 3.5rem; font-size: 1.4rem; margin-bottom: 0.4rem; }
.bot-card.is-off .agent-avatar:not(.is-hawkeye),
.bot-card.is-paused .agent-avatar:not(.is-hawkeye) { filter: saturate(0.55); opacity: 0.8; }
.bot-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid var(--rail-bg);
  background: var(--ok);
}
.bot-dot.is-warn { background: var(--warn); }
.bot-dot.is-fail { background: var(--fail); }
.bot-dot.is-idle { background: var(--track); }
.bot-card.is-off .bot-dot { background: var(--warn); }
.bot-card.is-selected .bot-dot { background: var(--ok); border-color: var(--paper); }
.bot-card.is-selected.is-off .bot-dot { background: var(--warn); }
.bot-card.is-calm .bot-status { color: var(--muted); }
.bot-card.is-calm .bot-dot,
.bot-card.is-selected.is-calm .bot-dot,
.bot-card.is-calm.is-off .bot-dot,
.bot-card.is-selected.is-calm.is-off .bot-dot { background: var(--track); }

.rail-foot {
  margin-top: auto;
  padding: 0.6rem 0.45rem 0.1rem;
  border-top: 1px solid var(--line);
}
.rail-foot-title {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail-foot .host-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 0.6rem;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.74rem;
}
.rail-foot .host-strip span { display: flex; justify-content: space-between; gap: 0.3rem; }
.rail-foot .host-strip strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Chat */
.workspace-chat { padding: 0 0 0; }
.chat-head {
  align-items: center;
  padding: 0.7rem clamp(0.9rem, 2.5vw, 1.6rem);
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.chat-head-title { align-items: center; gap: 0.7rem; }
.chat-head h1 { font-size: 1.02rem; font-weight: 700; margin: 0; }
.chat-head .section-note { font-size: 0.8rem; margin: 0.05rem 0 0; }
.chat-head-actions { gap: 0.25rem; }
.handoff-banner {
  margin: 0.35rem clamp(0.75rem, 2.5vw, 1.6rem) 0;
  padding: 0.32rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  font-size: 0.8rem;
  line-height: 1.35;
  box-shadow: none;
}
.handoff-banner[hidden] { display: none; }
.verify-banner {
  margin: 0.6rem clamp(0.9rem, 2.5vw, 1.6rem) 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.4;
}
.verify-banner[hidden] { display: none !important; }
@media (max-width: 390px) {
  .verify-banner { flex-direction: column; align-items: stretch; }
  .verify-banner .btn { width: 100%; min-height: 44px; }
  .setup-line, .bot-card.is-setup, .agent-row.is-setup { max-width: 100%; }
  .bot-card.is-setup .bot-status,
  .agent-row.is-setup .setup-line,
  .section-note.is-setup {
    flex-wrap: wrap;
    white-space: normal;
  }
}
.chat-log { padding: 1rem clamp(0.9rem, 4vw, 3rem) 0.5rem; }
.chat-log > .chat-msg { max-width: 48rem; margin-inline: auto; width: 100%; }
.chat-empty {
  margin: auto;
  max-width: 30rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
}
.chat-empty .state-title { font-size: 1.3rem; font-weight: 700; font-family: var(--font-display); margin: 0.2rem 0 0.3rem; }
.chat-empty .state-copy { color: var(--muted); margin: 0 0 1rem; }
.chat-suggestions { justify-content: center; gap: 0.45rem; }
.chip-btn {
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
}
@media (hover: hover) { .chip-btn:hover { background: var(--paper-soft); } }

.chat-form {
  padding: 0.5rem clamp(0.9rem, 4vw, 3rem) 0.75rem;
  border-top: none;
  background: transparent;
}
.chat-form > * { max-width: 48rem; margin-inline: auto; width: 100%; }
.chat-composer {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--paper-input);
  box-shadow: var(--shadow);
  padding: 0.35rem 0.35rem 0.35rem 0.8rem;
  align-items: flex-end;
}
.chat-composer:focus-within {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.chat-composer:has(:focus-visible) {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
body.is-keyboard .chat-composer:has(:focus-visible) {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--focus);
}
.chat-form textarea { border: none; background: transparent; box-shadow: none; padding: 0.45rem 0; }
.chat-form textarea:focus { outline: none; box-shadow: none; }
.chat-form .icon-btn { border: none; border-radius: 10px; min-width: 36px; }
.chat-form #chatSend { border-radius: 11px; }
.chat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1rem;
  padding: 0.45rem 0.4rem 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.chat-actions .check-inline { font-size: 0.78rem; color: var(--muted); gap: 0.35rem; }
.chat-actions label[for="chatProject"] { margin-left: auto; }
.chat-actions select { font-size: 0.78rem; padding: 0.15rem 0.4rem; min-height: 0; }

.chat-msg { border-radius: 14px; }
.chat-msg.you .chat-msg-main {
  background: var(--bubble-user);
  border-radius: 16px 16px 4px 16px;
}
.chat-msg.local .chat-msg-main,
.chat-msg.bot .chat-msg-main,
.chat-msg.cloud .chat-msg-main,
.chat-msg.system.pending .chat-msg-main {
  padding: 0.45rem 0.65rem;
  background: var(--bubble-agent);
  border-radius: 16px 16px 16px 4px;
}

/* Account groups and conversation utilities */
.account-group { border-bottom: 1px solid var(--line); padding: 0.25rem 0; }
.account-group > summary { cursor: pointer; min-height: 44px; padding: 0.75rem 0.4rem; font-size: 0.85rem; font-weight: 600; }
.connection-notice { flex: 0 0 auto; display: flex; gap: 0.75rem; align-items: center; padding: 0.65rem 1rem; background: var(--paper-soft); border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.connection-notice[hidden] { display: none; }
.connection-notice span { flex: 1; min-width: 0; }
.connection-notice button { flex: 0 0 auto; }
.chat-overflow-panel::backdrop { background: rgb(0 0 0 / 55%); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sheet-head h2 { margin: 0; font-size: 1.15rem; }
.project-overview-section { padding: 1rem; margin-bottom: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-soft); }
.project-overview-section h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.project-overview-section p { overflow-wrap: anywhere; }
/* Settings */
.settings-nav { background: var(--rail-bg); padding: 0.75rem 0.6rem; gap: 0.1rem; }
.settings-nav .roster-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0.35rem 0.4rem;
  clip: auto;
  overflow: visible;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.settings-nav .account-tab {
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  font-weight: 600;
  color: var(--muted);
}
.settings-nav .account-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.settings-nav .account-tab.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
}
.settings-body { padding: 1.4rem clamp(1rem, 3vw, 2.2rem) 2rem; max-width: 50rem; }
.settings-body h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.3rem; }
.agents-pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.agents-pane-head h2 { margin: 0; }
.settings-body > .account-pane > .section-note:first-of-type { margin-bottom: 1.1rem; }
.section-note.is-error { color: var(--fail); }
.account-licences { margin-top: 1.6rem; }
.account-licences a { color: var(--muted); text-underline-offset: 0.15em; }

.agent-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.4rem; }
.agent-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-elev);
  box-shadow: var(--shadow);
  padding: 0.75rem 0.85rem;
}
.bot-card.is-removing,
.agent-row.is-removing,
.vps-agent-row.is-removing {
  color: var(--muted);
  pointer-events: none;
  cursor: default;
}
.agent-remove-error {
  margin: 0.35rem 0 0;
  color: var(--fail);
  font-size: 0.78rem;
}
.bot-card.is-removing .bot-status,
.agent-row.is-removing .conn-status,
.vps-agent-row.is-removing .vps-agent-meta {
  color: var(--muted);
}
.agent-row-top { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.agent-row-copy { flex: 1 1 10rem; min-width: 0; display: flex; flex-direction: column; }
.agent-row-name { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.agent-row-copy strong { font-size: 0.95rem; }
.model-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--navy-fill) 12%, transparent);
  color: var(--ink);
}
.agent-row-reason { font-size: 0.78rem; color: var(--warn); }
.agent-role-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--warn); }
.setup-line, .bot-card.is-setup .bot-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
}
.setup-spinner {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--ink);
  background: transparent;
  flex: none;
  animation: setup-spin 0.8s linear infinite;
}
@keyframes setup-spin { to { transform: rotate(360deg); } }
.bot-card.is-setup .bot-status,
.agent-row.is-setup .agent-row-meta,
.section-note.is-setup {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.agent-row-meta {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-row-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.agent-signin {
  margin-top: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}
.agent-steps { margin: 0 0 0.6rem; padding-left: 1.2rem; font-size: 0.85rem; color: var(--muted); }
.agent-steps li { margin: 0.1rem 0; }
.agent-signin-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.agent-signin-row input { flex: 1 1 14rem; min-width: 0; margin: 0 !important; }
.agent-alt { margin-top: 0.6rem; font-size: 0.82rem; }
.agent-alt summary { cursor: pointer; color: var(--muted); }
.agent-alt[open] summary { margin-bottom: 0.45rem; }

.add-agent {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1rem 1rem 1.1rem;
  margin-bottom: 1.2rem;
}
.add-agent h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.add-agent-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.6rem 0.8rem;
  margin: 0.6rem 0 0.8rem;
}
.add-agent-fields label:last-child { grid-column: 1 / -1; }
.add-agent-fields label,
.conn-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}
.add-agent-fields input, .conn-fields input { margin: 0 !important; }
.add-agent-purpose { grid-column: 1 / -1; min-width: 0; }
.add-agent-colour,
.add-agent-voice { grid-column: 1 / -1; min-width: 0; border: 0; margin: 0; padding: 0; }
.add-agent-colour legend,
.add-agent-voice legend { font-weight: 600; font-size: 0.8rem; padding: 0; margin: 0 0 8px; }
.agent-call-voice { display: grid; gap: 8px; margin-top: 12px; min-width: 0; }
.agent-call-voice[hidden] { display: none; }
.add-agent-voice.agent-call-voice { margin-top: 0; }
.agent-call-voice .phone-voices { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.agent-call-voice .phone-voice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.agent-call-voice .phone-voice-group legend { font-weight: 650; padding: 0; margin: 0 0 4px; }
.agent-call-voice .phone-voice { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.agent-call-voice .phone-voice label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 44px; }
.agent-call-voice .phone-voice input { flex: none; width: 1.15rem; height: 1.15rem; }
.agent-call-voice .phone-voice-copy { display: flex; flex-direction: column; min-width: 0; }
.agent-call-voice .phone-voice-name { font-weight: 600; }
.agent-call-voice .phone-voice-accent { color: var(--muted); font-size: 0.85rem; }
.agent-call-voice .phone-voice-play { min-height: 44px; min-width: 44px; flex: none; }
.agent-call-voice .switch-title { font-weight: 600; }
@media (min-width: 720px) {
  .add-agent-voice .phone-voices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; align-items: start; }
}
@media (max-width: 1023px) {
  .agent-call-voice .phone-voice,
  .agent-call-voice .phone-voice label,
  .agent-call-voice .phone-voice-play { min-height: 44px; }
}
.add-agent-fields textarea,
.agent-purpose-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  resize: vertical;
  min-height: 5.5rem;
}
.agent-purpose {
  margin-top: 0.65rem;
  min-width: 0;
  max-width: 100%;
}
.agent-purpose-label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
.agent-purpose-view {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.6rem;
  min-width: 0;
}
.agent-purpose-text {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agent-purpose-text.is-empty { color: var(--muted); }
.agent-purpose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.agent-purpose-form { min-width: 0; max-width: 100%; }
.optional { font-weight: 400; color: var(--muted); }

/* ── polish: settings panes (Manage agents, API keys) ──
   One page header, one card, one row style. Scoped to .settings-body so the
   account sheet keeps its own rules. */
.settings-body > .account-pane > h2,
.settings-body > .account-pane > .agents-pane-head > h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.settings-body > .account-pane > .agents-pane-head { align-items: center; margin-bottom: var(--space-2); }
.settings-body > .account-pane > .section-note:first-of-type {
  max-width: 40rem;
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.settings-body .field-stack {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.settings-body .pane-card,
.settings-body .add-agent {
  margin: 0 0 var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.settings-body .pane-card-title,
.settings-body .add-agent h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
.settings-body .add-agent { background: var(--paper-soft); }
.settings-body .add-agent h3 { margin-bottom: var(--space-1); }
.settings-body .add-agent > .section-note { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.settings-body .add-agent .section-note:empty { display: none; }
.settings-body .add-agent-fields { gap: var(--space-4); margin: 0 0 var(--space-4); }
.settings-body .add-agent-fields label {
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink);
}
.settings-body .add-agent-fields input,
.settings-body .add-agent-fields select,
.settings-body .add-agent-fields textarea { width: 100%; }
.settings-body .add-agent-fields .phone-voice input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex: none;
}
.agent-call-voice .account-row-note { white-space: normal; overflow: visible; text-overflow: clip; }
.phone-complexity { display: grid; gap: 8px; margin-top: 12px; }
.phone-complexity-scale { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.phone-complexity-scale input[type="range"] { flex: 1; min-height: 44px; min-width: 0; }
.phone-complexity-end { font-size: 0.85rem; color: var(--muted); }
.settings-body .add-agent .optional { font-size: var(--text-sm); }
.settings-body .add-agent-role .section-note { margin: var(--space-1) 0 0; font-size: var(--text-xs); font-weight: var(--weight-regular); }
.settings-body .add-agent .section-note.is-error { margin: 0 0 var(--space-3); }
.settings-body .add-agent-switch { margin: 0 0 0 var(--space-2); }
.settings-body .agent-list { gap: var(--space-3); margin-bottom: var(--space-6); }
.settings-body .agent-row {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: none;
}
.settings-body .agent-row:hover { border-color: var(--line-strong); }
.settings-body .agent-row-top { gap: var(--space-3); }
.settings-body .agent-row-copy strong { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.settings-body .agent-row-actions { align-items: center; gap: var(--space-2); }
.settings-body .agent-row-name { flex-wrap: wrap; row-gap: var(--space-1); }
.settings-body .agent-row .model-pill,
.settings-body .agent-row .conn-status {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 0;
  padding: 2px var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.settings-body .agent-advanced { margin-bottom: var(--space-4); border-radius: var(--radius-md); background: var(--paper); }
.settings-body .agent-advanced > summary { padding: var(--space-3) var(--space-5); font-size: var(--text-base); }
.settings-body .agent-advanced > :not(summary) { padding: 0 var(--space-5) var(--space-5); }
.settings-body .account-licences { margin-top: var(--space-6); font-size: var(--text-sm); }

/* API keys */
.settings-body .api-usage {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.settings-body .api-usage dt { color: var(--muted); font-weight: var(--weight-medium); }
.settings-body .api-usage code,
.settings-body .api-key-prefix {
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--code-bg);
  color: var(--code-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.settings-body .api-new-key {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius-md);
  background: var(--paper-soft);
}
.settings-body .api-new-key code { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--code-bg); }
.settings-body .api-key-list { margin: 0; }
.settings-body .api-key-row { gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.settings-body .api-key-row:first-child { padding-top: 0; border-top: 0; }
.settings-body .api-key-row:last-child { padding-bottom: 0; }
.settings-body .api-key-row > div { gap: 2px; align-items: flex-start; }
.settings-body .api-key-name { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.settings-body .api-key-meta { font-family: var(--font-ui); font-size: var(--text-sm); }
.settings-body .api-key-prefix { margin-top: var(--space-1); }
.settings-body .api-key-empty { margin: 0; padding: var(--space-4) 0; font-family: var(--font-ui); font-size: var(--text-sm); }
.settings-body .api-key-scopes { display: block; font-size: var(--text-sm); color: var(--muted, #57534e); }
.settings-body .api-key-checks { border: 0; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.settings-body .api-key-checks legend { font-size: var(--text-sm); padding: 0; margin-bottom: 6px; width: 100%; }
.settings-body .api-key-form .inline-form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-3);
  margin: 0;
}
@media (max-width: 1023px) {
  .settings-body .api-key-form .inline-form { grid-template-columns: minmax(0, 1fr); }
  .settings-body .api-usage { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .settings-body .api-usage dd { margin-bottom: var(--space-3); }
  .settings-body .pane-card, .settings-body .add-agent { padding: var(--space-4); }
}

.connections-list { gap: 0.5rem; }
.agent-advanced,
.conn-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-elev);
  margin: 0;
  padding: 0;
}
.agent-advanced { margin-bottom: 0.6rem; }
.agent-advanced > summary,
.conn-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  font-weight: 600;
}
.agent-advanced > summary::-webkit-details-marker,
.conn-card > summary::-webkit-details-marker { display: none; }
.agent-advanced > summary::after,
.conn-card > summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  margin-left: 0.4rem;
  transition: transform 150ms ease;
}
.conn-card > summary strong { margin-right: auto; }
.agent-advanced[open] > summary::after,
.conn-card[open] > summary::after { transform: rotate(-135deg); }
.agent-advanced > :not(summary),
.conn-card .conn-body { padding: 0 0.95rem 0.95rem; }
.conn-card:first-child { border-top: 1px solid var(--line); }
.conn-fields { display: grid; gap: 0.6rem; margin: 0.6rem 0 0.8rem; }
.conn-status {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--paper-soft);
  white-space: nowrap;
}
.conn-status.on { background: color-mix(in srgb, var(--ok) 13%, transparent); }
.conn-status.warn,
.conn-status.machine,
.conn-status.unreadable { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.conn-status.fail { background: color-mix(in srgb, var(--fail) 14%, transparent); color: var(--fail); }
.conn-status.idle { color: var(--muted); background: var(--paper-soft); }


/* Agent drives the Jetson desktop */
body[data-agent="hawkeye"] .hermes-only { display: none; }
.desktop-bar {
  margin: 0.6rem clamp(0.9rem, 2.5vw, 1.6rem) 0;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--paper-elev);
  box-shadow: var(--shadow);
}
.desktop-bar[hidden],
.desktop-approval[hidden] { display: none !important; }
.desktop-bar { border-color: color-mix(in srgb, var(--ok) 45%, var(--line-strong)); }
.desktop-bar[data-status="awaiting_approval"],
.desktop-bar[data-status="need_human"] { border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.desktop-bar[data-status="paused"] { border-color: var(--line-strong); }
.desktop-bar-top { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.desktop-bar-copy { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; font-size: 0.86rem; }
.desktop-bar-copy span { color: var(--muted); font-size: 0.78rem; }
.desktop-bar-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.desktop-bar[data-status="running"] .agent-avatar { animation: desk-pulse 1.6s ease-in-out infinite; }
@keyframes desk-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 30%, transparent); } }
.desktop-approval {
  margin-top: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 10%, var(--paper));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.86rem;
}
.desktop-approval p { margin: 0; }
.desktop-steps {
  margin: 0.5rem 0 0;
  padding-left: 1.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  max-height: 7.5rem;
  overflow: auto;
}
.desktop-steps:empty { display: none; }
.desktop-step-outcome { color: var(--warn); }

/* Responsive workspace: list-first, one mobile screen at a time. */
@media (max-width: 1023px) {
  .app-nav { display: none; }
  .top { padding: calc(0.65rem + var(--safe-top)) 1rem 0.65rem; flex-wrap: nowrap; }
  .brand-block { flex: 0 0 auto; }
  .header-actions { width: auto; margin-left: auto; }
  body[data-pane="agents"] .workspace-agents { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  body[data-pane="agents"] .workspace-chat { display: none; }
  body[data-pane="agents"] .bot-rail { border: 0; padding: 1.5rem 1rem; }
  .rail-head { padding: 0; gap: 0.75rem; }
  .rail-title { font-size: 2rem; }
  .rail-intro { max-width: 30rem; margin: 0.5rem 0 1.5rem; }
  .bot-roster { gap: 0.5rem; }
  .bot-card { min-height: 64px; padding: 0.85rem 0.15rem; background: transparent; border: 0; border-radius: 0; }
  .bot-name { font-size: 1rem; font-weight: 700; }
  .bot-status { font-size: 0.82rem; max-width: none; }
  .bot-card-copy { flex: 1; gap: 0.2rem; }
  .bot-card::after { content: none; }
  .rail-foot { display: none; }
  body[data-pane="agents"][data-agents-view="chat"] .bot-rail { display: none; }
  body[data-pane="agents"][data-agents-view="chat"] .workspace-chat { display: flex; height: 100%; }
  body[data-pane="agents"][data-agents-view="chat"] .top { display: none; }
  body[data-pane="agents"][data-agents-view="chat"] .chat-head-signout { display: inline-flex; }
  .chat-head { padding: calc(0.6rem + var(--safe-top)) 0.75rem 0.6rem; gap: 0.5rem; }
  .chat-head-title { gap: 0.5rem; flex: 1; }
  .chat-head-title > div { min-width: 0; }
  .chat-head h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-head .section-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .chat-model-line, .served-model, .model-pill { max-width: 100%; }
  /* 390px: the customer label and tier stay on screen. Actions drop
     below the title so "Hawkeye agent" and "Hawkeye agent · Smart" are not clipped. */
  @media (max-width: 480px) {
    body[data-pane="agents"][data-agents-view="chat"] .chat-head { flex-wrap: wrap; align-items: flex-start; }
    body[data-pane="agents"][data-agents-view="chat"] .chat-head-title { flex: 1 1 100%; }
    body[data-pane="agents"][data-agents-view="chat"] .chat-head-actions { flex: 1 1 100%; justify-content: flex-end; }
    body[data-pane="agents"][data-agents-view="chat"] .chat-head h1,
    body[data-pane="agents"][data-agents-view="chat"] .chat-head .section-note {
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
    }
    body[data-pane="agents"][data-agents-view="chat"] .chat-wake {
      white-space: normal;
      max-width: 100%;
    }
    .bot-card.is-calm .bot-status {
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
    }
  }
  .agents-back, .chat-overflow-btn { display: inline-flex; min-width: 44px; }
  .chat-head-actions #newChatBtn, .chat-head-actions #agentDesktopBtn { display: none; }
  .chat-status { max-width: 7rem; overflow-wrap: anywhere; }
  .chat-log { padding: 1.2rem 1rem 0.6rem; }
  .chat-empty { padding: 1rem 0; }
  .chat-empty .state-title { font-size: 1.55rem; letter-spacing: -0.04em; }
  .chat-suggestions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .chat-suggestions .chip-btn { border-radius: 12px; text-align: left; padding: 0.75rem; }
  .chat-form { margin: 0; padding: 0.35rem 0.75rem calc(0.55rem + var(--safe-bottom)); background: transparent; border-top: 0; }
  .chat-composer { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.35rem; border-radius: 999px; }
  .chat-form textarea { width: auto; flex: 1 1 auto; padding: 0.4rem 0.2rem; min-height: 44px; max-height: 8rem; font-size: 16px; }
  .chat-form #chatSend { min-width: 44px; min-height: 44px; border-radius: 999px; }
  .chat-actions { display: none; }
  .chat-overflow-panel.is-open { display: flex; flex-direction: column; gap: 0.75rem; position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 38rem; max-height: 80dvh; overflow: auto; padding: 1.25rem 1rem calc(1.25rem + var(--safe-bottom)); color: var(--ink); background: var(--paper-elev); border: 1px solid var(--line-strong); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg); }
  .chat-overflow-panel.is-open .theme-toggle-menu { display: flex; width: 100%; font-size: 1rem; }
  .chat-overflow-panel.is-open #logoutBtnChat { display: inline-flex; align-self: flex-start; }
  .chat-overflow-panel.is-open .theme-toggle-menu select { font-size: 16px; min-width: 8.5rem; }
  .chat-overflow-panel.is-open .chat-overflow-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chat-overflow-panel.is-open .chat-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .chat-actions label[for="chatProject"] { margin: 0; justify-content: space-between; }
  .chat-actions .check-inline { min-height: 44px; font-size: 0.875rem; }
  .chat-actions select { min-height: 44px; font-size: 16px; }
  .chat-overflow-panel .host-strip { border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; font-size: 0.75rem; }
  .pane-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; padding: 0.45rem 1rem calc(0.45rem + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
  .pane-btn { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; min-height: 56px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font: 600 0.72rem var(--font-ui); cursor: pointer; }
  .pane-btn.is-active { color: var(--ink); background: var(--you); }
  body[data-pane="agents"][data-agents-view="chat"] .pane-switch { display: none; }
  body[data-pane="settings"] .workspace-settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings-nav { flex-direction: column; overflow: auto; max-height: 38dvh; padding: 0.65rem 1rem; border: 0; border-bottom: 1px solid var(--line); gap: 0.35rem; }
  .settings-nav .roster-label { margin: 0.25rem 0; }
  .settings-nav .account-tab { width: 100%; white-space: normal; padding: 0.65rem 1rem; }
  .settings-body { padding: 1.5rem 1rem 2rem; }
  .toast { bottom: calc(5rem + var(--safe-bottom)); width: max-content; }
  body[data-pane="agents"][data-agents-view="chat"] .toast { bottom: auto; top: calc(4.75rem + var(--safe-top)); z-index: 30; }
  body[data-pane="projects"] .toast { bottom: auto; top: calc(0.75rem + var(--safe-top)); }
}
/* Phone header: one line. Back, the current title, and a single menu. */
@media (max-width: 1023px) {
  html, body.app { overflow-x: hidden; max-width: 100%; }
  .top, .chat-head, .chat-status { display: none !important; }
  .mobile-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-width: 0;
    flex: 0 0 auto;
    padding: calc(0.3rem + var(--safe-top)) 0.4rem 0.3rem 0.2rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    z-index: 30;
  }
  .mobile-back, .mobile-menu-btn {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.2;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
  }
  .mobile-agent-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
  }
  .mobile-agent-btn:disabled { opacity: 1; }
  body[data-pane="agents"][data-agents-view="chat"] .mobile-agent-btn { cursor: pointer; }
  .mobile-title:focus,
  .mobile-title:focus-visible,
  #chatHeading:focus,
  #chatHeading:focus-visible,
  .mobile-agent-btn:focus:not(:focus-visible),
  .chat-agent-pick:focus:not(:focus-visible) {
    outline: none;
  }
  .mobile-pick-mark { display: none; flex: 0 0 auto; color: var(--muted); font-size: 0.7rem; }
  body[data-pane="agents"][data-agents-view="chat"] .mobile-pick-mark { display: inline; }
  body[data-pane="agents"][data-agents-view="chat"] .mobile-pick-mark::before { content: "\25BE"; }
  #mobileTitleText, .mobile-wake {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-wake {
    flex: 0 1 auto;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
  }
  .pane-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pane-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body.app .foot { display: none !important; }
  .chat-overflow-panel.is-open .overflow-legal { display: inline; }
}
/* 390px: the header stays one line, and each screen has a single scrollport. */
@media (max-width: 390px) {
  .top,
  .header-actions,
  .header-btns,
  .brand-block {
    flex-wrap: nowrap;
  }
  .top {
    gap: 0.3rem;
    min-width: 0;
  }
  .brand-block { flex: 1 1 auto; min-width: 0; gap: 0.4rem; }
  .brand-copy { min-width: 0; }
  .product {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 6.5rem;
  }
  .header-actions {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    gap: 0.2rem;
    flex-wrap: nowrap;
  }
  .theme-toggle { gap: 0.15rem; flex: 0 0 auto; }
  .theme-toggle select {
    min-width: 0;
    width: 4.4rem;
    max-width: 4.4rem;
    padding-inline: 0.15rem;
  }
  .live-chip { flex: 0 0 auto; white-space: nowrap; }
  #logoutBtn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: 0.4rem;
  }
  body.app,
  .pm-main,
  .workspace-chat,
  .bot-rail {
    overflow: hidden;
  }
  .bot-roster {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
  }
  .settings-nav {
    overflow: visible;
    max-height: none;
  }
  .pane-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.15rem; padding-inline: 0.35rem; }
  .pane-btn { font-size: 0.68rem; gap: 0.15rem; min-height: 52px; padding: 0.15rem; }
  .pane-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #changePlanBtn { width: 100%; }
  .settings-body,
  .workspace-projects,
  .chat-log {
    overflow: auto;
  }
  .log-pane,
  .machine-log,
  .desktop-steps {
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 1023px) {
  body[data-pane="settings"] .workspace-settings {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  .settings-nav { max-height: none; }
  .billing-grid { grid-template-columns: minmax(0, 1fr); }
  .account-billing .plan-card { max-width: none; width: 100%; }
  body[data-pane="projects"] .workspace-projects { padding: 1.5rem 1rem; }
  .pm-heading { margin-bottom: 1.25rem; }
  .pm-heading h1 { font-size: 1.8rem; }
  .pm-toolbar { gap: 0.75rem; }
  .pm-filters { flex-wrap: wrap; }
  .kanban-columns { grid-template-columns: minmax(0, 1fr); }
  .queue-row { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .queue-row .tmeta { justify-content: flex-start; grid-column: 2; }
  .inline-form, .folder-add { flex-wrap: wrap; }
  .inline-form input { flex-basis: 100%; }
  .checks li { grid-template-columns: auto minmax(0, 1fr); }
  .hint { grid-column: 2; text-align: left; }
  .add-agent-fields { grid-template-columns: minmax(0, 1fr); }
  .agent-row-actions { width: 100%; }
  .task-drawer { padding: max(0.65rem, var(--safe-top)) 0.65rem max(0.65rem, var(--safe-bottom)); align-items: end; }
  .drawer-panel { max-height: 90dvh; border-radius: 22px; }
  .drawer-panel h2 { padding-right: 4.5rem; }
  .vps-agents-head, .vps-agent-row, .plan-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .setup-spinner { animation: none !important; }
  .typing-dots span { opacity: 0.9; transform: none; }
  .chat-working, .chat-jump, .chat-trace > summary::before { transition: none; animation: none; }
  .phoenix-sprite, .phoenix-sprite rect, .phoenix-sprite .phoenix-frame { animation: none !important; }
}

/* —— Settings → Agent inbox (agent-messages.js) —— */
.am-panel { display: grid; gap: 0.75rem; max-width: 46rem; }
.am-agent-picker { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.am-agent-picker select { width: auto; min-width: 9rem; }
.am-thread-container {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
  overflow: hidden;
}
.am-empty { margin: 0; padding: 1.5rem 1rem; text-align: center; font-size: 0.85rem; color: var(--muted); }
.am-thread-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 120ms ease;
}
.am-thread-row:last-child { border-bottom: none; }
.am-thread-row:hover { background: var(--paper-elev); }
.am-thread-row.am-unread .am-thread-who { color: var(--ink); }
.am-thread-left { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.am-thread-who, .am-thread-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-thread-who { font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.am-thread-preview { font-size: 0.8rem; color: var(--muted); }
.am-thread-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; }
.am-unread-dot {
  min-width: 1.15rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--navy-fill);
  color: var(--on-navy);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}
.am-thread-ts { font-size: 0.72rem; color: var(--muted); }
.am-thread-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  font-weight: 600;
}
.am-thread-header small { color: var(--muted); font-weight: 400; }
.am-messages { display: flex; flex-direction: column; gap: 0.5rem; max-height: 24rem; overflow-y: auto; padding: 0.8rem; }
.am-bubble { max-width: 80%; padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: 0.86rem; }
.am-bubble-in { align-self: flex-start; background: var(--paper-elev); border: 1px solid var(--line); }
.am-bubble-out { align-self: flex-end; background: var(--you); }
.am-bubble-meta { margin-bottom: 0.2rem; font-size: 0.7rem; color: var(--muted); }
.am-bubble-text { white-space: pre-wrap; word-break: break-word; }
.am-reply-row { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.6rem 0.7rem; border-top: 1px solid var(--line); }
.am-reply-input { flex: 1; resize: vertical; }
.am-toggle-composer { justify-self: start; }
.am-composer {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.5rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}
.am-composer h4 { margin: 0; font-size: 0.9rem; }
.am-form-row { display: grid; gap: 0.25rem; }
.am-form-row label { font-size: 0.75rem; color: var(--muted); }
.am-composer .am-send-btn { justify-self: start; }
.am-send-result { font-size: 0.8rem; }
.am-send-result.is-ok { color: var(--ok); }
.am-send-result.is-error { color: var(--fail); }

/* —— Settings → Admin (admin-panel.js) —— */
#adminPanel { display: grid; gap: 0.75rem; max-width: 54rem; }
.ap-calls-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.ap-calls-agent { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.ap-calls-agent select { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.25rem 0.45rem; }
.ap-tabs { display: flex; gap: 0.25rem; padding: 0.2rem; width: fit-content; background: var(--paper-soft); border: 1px solid var(--line); border-radius: 999px; }
.ap-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.85rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.ap-tab.active { background: var(--paper-elev); color: var(--ink); box-shadow: var(--shadow); }
.ap-empty { margin: 0; padding: 1.5rem 0; text-align: center; font-size: 0.85rem; color: var(--muted); }
.ap-error { margin: 0; font-size: 0.85rem; color: var(--fail); }
.ap-signup-card, .ap-acct-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}
.ap-signup-head, .ap-acct-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.ap-name { font-weight: 600; font-size: 0.9rem; }
.ap-email, .ap-ts, .ap-acct-meta, .ap-credits-label, .ap-credits-pct { font-size: 0.78rem; color: var(--muted); }
.ap-ts { margin-left: auto; }
.ap-reason { margin: 0; font-size: 0.82rem; color: var(--muted); }
.ap-signup-actions, .ap-acct-actions, .ap-agents-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.ap-agent-del { margin-left: 0.3rem; padding: 0 0.2rem; border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; line-height: 1; }
.ap-agent-del:hover { color: var(--fail); }
.ap-agent-refresh { margin-left: 0.3rem; padding: 0 0.2rem; border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; line-height: 1; }
.ap-agent-refresh:hover { color: var(--ink); }
.ap-plugin-contact { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.ap-acct-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.6rem; }
/* Accounts tab: searchable list; a row opens the account (admin-panel.js renderAccountIndex). */
.ap-acct-search { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.ap-acct-search input { flex: 1; min-width: 0; padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; }
.ap-acct-count { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.ap-acct-table td, .ap-acct-table th { font-size: 0.8rem; font-variant-numeric: tabular-nums; vertical-align: top; }
.ap-acct-row { cursor: pointer; }
.ap-acct-row:hover, .ap-acct-row.is-open { background: var(--paper-soft); }
.ap-acct-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ap-acct-row th[scope="row"] { text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.ap-acct-open > td { padding: 0; }
.ap-sub { display: block; font-size: 0.7rem; font-weight: 400; color: var(--muted); }
.ap-pill { display: inline-block; padding: 0 0.4rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.68rem; font-weight: 500; color: var(--muted); }
.ap-pill.is-warn { color: var(--warn); border-color: currentColor; }
.ap-neg { color: var(--fail); }
.ap-meter { display: inline-block; width: 4.5rem; height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; vertical-align: middle; }
.ap-meter > span { display: block; height: 100%; background: var(--ink); }
.ap-meter.is-warn > span { background: var(--warn); }
.ap-meter.is-bad > span { background: var(--fail); }
.ap-acct-detail { padding: 0.8rem 0.9rem 1rem; border-top: 1px solid var(--line); background: var(--paper); }
.ap-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.2rem; }
.ap-detail-grid h4 { margin: 0 0 0.35rem; font-size: 0.82rem; }
.ap-detail-grid p { margin: 0 0 0.3rem; font-size: 0.82rem; }
.ap-detail-grid .ap-wide { grid-column: 1 / -1; }
.ap-dl { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0.15rem 1rem; margin: 0.4rem 0; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.ap-dl dt { color: var(--muted); }
.ap-dl dd { margin: 0; }
.ap-grant { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin: 0.5rem 0 0.25rem; }
.ap-grant label { display: grid; gap: 0.15rem; font-size: 0.72rem; color: var(--muted); }
.ap-grant input { width: 9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: 0.82rem; }
.ap-grant select { width: 9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: 0.82rem; }
.ap-grant input[name="note"], .ap-grant input[name="reason"] { width: 14rem; }
.ap-grant input[type="checkbox"] { width: auto; padding: 0; }
.ap-grant label.ap-comp-confirm { display: flex; align-items: center; gap: 0.35rem; align-self: center; }
.ap-days { display: flex; align-items: flex-end; gap: 2px; height: 3rem; }
.ap-day { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--ink); opacity: 0.35; }
.ap-day:hover { opacity: 0.8; }
.ap-ledger { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; font-size: 0.78rem; }
.ap-ledger li > span:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-refund { border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 8px; padding: 0.45rem 0.7rem; margin: 0 0 0.5rem; font-size: 0.82rem; }
.ap-refund summary { cursor: pointer; line-height: 1.5; }
.ap-refund .ap-ledger { margin-top: 0.45rem; }
.ap-refund li { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.ap-refund li > span:first-child { min-width: 7.5rem; }
.ap-detail-actions .ap-acct-card { margin: 0; box-shadow: none; }
@media (max-width: 480px) {
  .ap-acct-table thead { display: none; }
  .ap-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-grant input, .ap-grant select, .ap-grant input[name="note"], .ap-grant input[name="reason"] { width: 100%; }
  .ap-grant input[type="checkbox"] { width: auto; }
  .ap-grant label { flex: 1 1 100%; }
}
.ap-signup-actions .ap-tier-select { width: auto; flex: 0 1 auto; max-width: 100%; font-size: 0.82rem; }
.ap-approve { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.ap-reject { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 40%, transparent); }
.ap-provision-status { font-size: 0.8rem; }
.ap-ok { color: var(--ok); }
.ap-err { color: var(--fail); }
.ap-tier-badge, .ap-vps-state, .ap-agent-chip {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--muted);
}
.ap-state-ok, .ap-agent-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.ap-state-err { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 35%, transparent); }
.ap-acct-meta { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: flex-start; }
.ap-acct-meta code { font-family: var(--font-mono); color: var(--ink); }
.ap-compute-col {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  max-width: 100%;
}
.ap-compute-key {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ap-compute-val {
  color: var(--ink);
  font-weight: 600;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
@media (max-width: 420px) {
  .ap-acct-card { padding: 0.75rem 0.7rem; }
  .ap-acct-meta { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
  .ap-credits-row { flex-wrap: wrap; }
  .ap-acct-actions .btn { flex: 1 1 8rem; }
}
.ap-credits-row { display: flex; align-items: center; gap: 0.55rem; }
.ap-prov-key { flex: 1 1 14rem; min-width: 0; font-size: 0.82rem; }
.ap-route-grid .ap-cell { width: 100%; min-width: 9rem; }
.ap-credits-bar, .plan-meter { flex: 1; height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.ap-credits-fill, .plan-meter-fill { height: 100%; border-radius: 999px; background: var(--navy-fill); transition: width 300ms ease; }
.ap-credits-pct { width: 2.5rem; text-align: right; }

/* —— Plan & usage (Settings → Profile) + server chip under the agent list —— */
.plan-card {
  display: grid;
  gap: 0.5rem;
  max-width: 34rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper-elev) 82%, transparent);
  backdrop-filter: blur(10px);
}
.plan-card[hidden] { display: none; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.plan-name { font-weight: 600; font-size: 0.92rem; }
.plan-vps, .api-usage { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.8rem; margin: 0 0 1rem; font-size: 0.85rem; }
.api-usage dt { color: var(--muted); }
.api-usage dd { margin: 0; overflow-wrap: anywhere; }
.api-new-key { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper-elev); }
.api-new-key[hidden] { display: none; }
.api-new-key p { margin: 0 0 0.4rem; font-size: 0.85rem; }
.api-new-key code { display: block; margin-bottom: 0.5rem; font-family: var(--font-mono); font-size: 0.8rem; overflow-wrap: anywhere; user-select: all; }
.api-key-list { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.api-key-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.api-key-row:first-child { border-top: none; }
.api-key-row > div { display: flex; flex-direction: column; min-width: 0; }
.api-key-name { font-weight: 600; font-size: 0.88rem; overflow-wrap: anywhere; }
.api-key-meta, .api-key-empty { font-size: 0.76rem; color: var(--muted); font-family: var(--font-mono); overflow-wrap: anywhere; }
.add-agent-nous[hidden], .add-agent-link[hidden] { display: none; }
.platform-keys { margin: 1rem 0; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.platform-keys legend { padding: 0 0.3rem; font-weight: 600; }
.add-agent-switch { margin-left: 0.5rem; }
.vps-agents { margin: 0 0 1.25rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-elev); }
.vps-agents[hidden] { display: none; }
.vps-agents-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; }
.vps-agents-head h3 { margin: 0; font-size: 0.92rem; }
.vps-agents-slots { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.vps-agents-list { list-style: none; margin: 0; padding: 0; }
.vps-agent-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.vps-agent-row.is-gone { opacity: 1; }
.vps-agent-row.is-gone .vps-agent-name,
.vps-agent-row.is-gone .vps-agent-meta,
.vps-agent-row.is-paused .vps-agent-name,
.vps-agent-row.is-paused .vps-agent-meta { color: var(--muted); }
.vps-agent-row:first-child { border-top: none; }
.vps-agent-actions { display: flex; gap: 0.3rem; flex: 0 0 auto; }
.vps-agent-copy { display: flex; flex-direction: column; min-width: 0; }
.vps-agent-name { font-weight: 600; font-size: 0.88rem; overflow-wrap: anywhere; }
.vps-agent-meta, .vps-agents-empty { font-size: 0.76rem; color: var(--muted); overflow-wrap: anywhere; }
.agent-delete label { display: block; margin: 0.9rem 0 0.35rem; font-size: 0.85rem; }
.agent-delete input { width: 100%; }
/* Rename: same black-and-white drawer as Remove. */
.agent-rename label { display: block; margin: 0.9rem 0 0.35rem; font-size: 0.85rem; color: var(--ink); }
.agent-rename input { width: 100%; }
.agent-rename .section-note { margin-top: 0.4rem; }
.agent-name-line { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; margin-bottom: 0.4rem; }
.agent-name-text { font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Setting up: the composer queues. The text box stays usable; the strip above says why. */
.chat-composer.is-queueing { border-style: dashed; }
.plan-vps[data-tone="ok"] { color: var(--ok); }
.plan-vps[data-tone="mid"] { color: var(--muted); }
.plan-vps[data-tone="fail"] { color: var(--fail); }
.plan-usage { display: flex; align-items: center; gap: 0.65rem; }
.plan-credits { font-size: 0.78rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-note { margin: 0; font-size: 0.76rem; color: var(--muted); }
.plan-note[data-tone="warn"] { color: var(--warn); }
.account-billing { margin-bottom: 1.5rem; }
.account-billing > h2 { margin-bottom: 0.65rem; }
.billing-kicker { margin: 0; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.plan-price, .plan-renewal, .plan-roles { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.82rem; }
.billing-grid { display: grid; gap: 0.75rem; min-width: 0; }
.credit-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.28rem 0.75rem; margin: 0.55rem 0 0; font-size: 0.82rem; }
.credit-facts dt { color: var(--muted); }
.credit-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.billing-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.65rem; margin-top: 0.85rem; }
.billing-history { margin-top: 1rem; }
.billing-history[hidden], #billingHistoryNote[hidden] { display: none; }
.billing-history-title { margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 600; }
.billing-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.82rem; }
.billing-history-row { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.billing-history-date { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 8rem; }
.billing-history-amount { font-variant-numeric: tabular-nums; }
.billing-history-status { color: var(--muted); }
.billing-history-links { margin-left: auto; display: flex; gap: 0.6rem; }
.billing-actions[hidden], .plan-picker[hidden], #billingFlagNote[hidden], #billingReturnNote[hidden], #billingActionError[hidden], #planPickerError[hidden], #addonBtn[hidden], #changePlanBtn[hidden], #planVps[hidden], #planRenewal[hidden], #planRoles[hidden], #keepPlanBtn[hidden], #planFreeNowConfirm[hidden], #planNote[hidden], #planTerm[hidden], #planTermNote[hidden], #profileChangePlan[hidden] { display: none; }
.topup-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.topup-row label { margin: 0; }
.topup-row input { width: 5.5rem; }
.topup-row .section-note { margin: 0; flex: 1 1 12rem; }
.plan-picker { display: grid; gap: 0.45rem; margin-top: 0.85rem; max-width: 34rem; min-width: 0; height: auto; min-height: min-content; overflow: visible; background: var(--paper); }
.plan-picker .plan-form { display: grid; gap: 0.45rem; margin: 0; min-width: 0; overflow: visible; }
.billing-grid .plan-picker { grid-column: 1 / -1; max-width: none; margin-top: 0; align-self: start; height: max-content; }
.plan-term {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-soft);
}
.plan-term-btn {
  appearance: none;
  flex: 1 1 0;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.plan-term-btn.is-active,
.plan-term-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.plan-term-tag { margin-left: .35rem; padding: .05rem .4rem; border-radius: 999px; border: 1px solid currentColor; font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.plan-continue-legacy { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.plan-carousel-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  background: var(--paper);
}
.plan-carousel-scroller {
  container-type: inline-size;
  display: block;
  grid-column: 2;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  width: 100%; max-width: 100%; min-width: 0;
  height: auto;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: var(--paper);
}
.plan-carousel-scroller::-webkit-scrollbar { display: none; }
.plan-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  grid-template-rows: auto;
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  overflow: visible;
  width: 100%;
  min-width: 100%;
  height: auto;
  min-height: 0;
  padding: 4px 0 8px;
  background: var(--paper);
}
.plan-carousel .plan-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  align-self: stretch;
  justify-self: stretch;
  scroll-snap-align: start;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper-soft);
  backdrop-filter: none;
}
.plan-carousel .plan-card.is-current { border: 2px solid var(--ink); }
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.plan-card-name { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plan-carousel .plan-card.is-current .plan-card-name { color: var(--ink); }
.plan-card-badge { padding: .15rem .55rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .72rem; font-weight: 650; }
.plan-card-badge[hidden] { display: none; }
.plan-card-price { margin: .25rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3rem; white-space: nowrap; }
.plan-card-price strong, .plan-card-price span { white-space: nowrap; }
.plan-card-note { overflow-wrap: normal; }
#planPrice, #profilePlanMeta, #menuPlanMeta, #accountRailPlan { overflow-wrap: normal; }
.plan-card-price strong { font-size: 2rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.plan-card-price span, .plan-carousel .plan-card-note { color: var(--muted); font-size: .82rem; margin: 0; }
.plan-card-summary { margin: .25rem 0 0; font-size: .9rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.plan-card-benefits { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .55rem; flex: 1 1 auto; font-size: .86rem; color: var(--muted); }
.plan-card-benefits li { position: relative; padding-left: 1.4rem; }
.plan-card-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--ink); font-weight: 700; }
.plan-card-benefits b { color: var(--ink); font-weight: 650; }
.plan-card-cta {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  margin-top: auto;
  align-self: stretch;
  box-sizing: border-box;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.plan-card-cta[disabled] { opacity: .6; cursor: default; }
.plan-card-value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.plan-dots { display: flex; justify-content: center; gap: 6px; margin-top: .4rem; }
.plan-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line); }
.plan-dots span.is-active { width: 18px; background: var(--ink); }
.plan-addons { margin: .35rem 0 0; }
.plan-carousel-arrow {
  display: grid;
  place-items: center;
  position: static;
  transform: none;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.plan-carousel-arrow.is-prev { grid-column: 1; grid-row: 1; }
.plan-carousel-arrow.is-next { grid-column: 3; grid-row: 1; }
@media (min-width: 1024px) {
  .plan-carousel-wrap { margin: 0; }
  .plan-carousel { grid-auto-columns: 100%; }
  .plan-carousel .plan-card { width: 100%; max-width: none; scroll-snap-align: start; }
  .plan-carousel-arrow { position: static; top: auto; left: auto; right: auto; transform: none; }
}
@media (prefers-reduced-motion: no-preference) { .plan-carousel-scroller { scroll-behavior: smooth; } }
@media (max-width: 1023px) {
  .account-billing .plan-carousel .plan-card { width: auto; max-width: none; align-self: stretch; }
}
@media (max-width: 1023px) {
  /* The settings column must grow with the cards, or the next block is placed
     through the track where a shorter neighbour used to leave a gap. */
  body[data-pane="settings"] .workspace-settings:has(.plan-carousel),
  body[data-pane="settings"] .settings-body:has(.plan-carousel) {
    flex: 0 0 auto;
    height: max-content;
    min-height: min-content;
  }
}
@media (max-width: 390px) {
  .plan-picker .plan-card-cta { width: 100%; }
}
@media (min-width: 1024px) {
  .billing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 390px) {
  .billing-actions, .topup-row { align-items: stretch; }
  .billing-actions .btn, .topup-row .btn, .plan-picker .btn { width: 100%; }
  .plan-head { flex-wrap: wrap; }
  .topup-row { flex-direction: column; }
  .topup-row label,
  .topup-row .section-note { width: 100%; }
  .topup-row .section-note { overflow-wrap: anywhere; }
  .topup-row input { width: 100%; min-height: 44px; }
}
button.account-computer-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.1rem;
  width: 100%;
  min-height: 44px;
  min-width: 44px;
  margin: 0.45rem 0 0;
  padding: 0.35rem 0.15rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.account-computer-link .account-computer-label,
#accountComputerState {
  font-weight: 700;
}
.account-computer-link .account-computer-state,
#accountComputerState {
  color: var(--muted);
  font-size: 0.82rem;
}
.account-computer-screen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  min-height: 44px;
  min-width: 44px;
  padding: 0.45rem 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#chatComputerBtn { min-height: 44px; min-width: 44px; }
#accountComputerDetail,
#accountComputerNotice,
.account-computer-reason {
  white-space: normal;
  overflow-wrap: anywhere;
}
#accountComputerNotice { font-weight: 600; }
/* Account computer entry */
#accountComputerLink,
.account-computer-screen,
#agentDesktopBtn,
#mobileDesktopBtn,
#chatComputerBtn {
  min-height: 44px;
  min-width: 44px;
}
@media (max-width: 390px) {
  #accountComputerLink,
    .account-computer-screen,
  #chatComputerBtn {
    width: 100%;
    min-height: 44px;
    min-width: 44px;
  }
  #accountComputerDetail,
  .account-computer-reason {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
  }
}
/* End account computer entry */

/* —— Thought trace: live while a turn runs, folded above the reply after —— */
.trace-steps {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0.15rem 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--muted);
}
.trace-step {
  position: relative;
  padding-left: 1.05rem;
  overflow-wrap: anywhere;
}
.trace-step::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.55em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--border);
}
.trace-step.is-tool { font-family: var(--font-ui); font-size: 0.76rem; }
.trace-step.is-tool::before { border-radius: 50%; background: var(--muted); }
.trace-step.is-more { font-style: italic; }
.trace-step.is-more::before { background: transparent; }
.trace-step.is-current { color: var(--ink); }
.trace-step.is-current::before { background: var(--ink); animation: trace-pulse 1.2s ease-in-out infinite; }
@keyframes trace-pulse { 50% { transform: scale(0.7); } }
.chat-msg.thinking .chat-msg-body.is-trace { gap: 0.45rem; }
.chat-msg.thinking .chat-msg-body.is-trace > .typing-indicator { align-self: flex-start; }
.chat-msg.thinking .chat-msg-body.is-trace::after { content: none; }
.chat-msg.pending:has(.is-trace) { opacity: 1; }

.chat-trace {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.chat-trace > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.chat-trace > summary::-webkit-details-marker { display: none; }
.chat-trace > summary::before {
  content: "\203A";
  display: inline-block;
  transition: transform 120ms ease;
}
.chat-trace[open] > summary::before { transform: rotate(90deg); }
.chat-trace > summary:hover { color: var(--ink); }
.chat-trace[open] {
  padding: 0.1rem 0 0.15rem;
  border: none;
  border-radius: 0;
  background: transparent;
}
.chat-trace[open] > summary { margin-bottom: 0.22rem; }
/* A folded trace keeps its steps out of a copied chat: otherwise a paste
   shows each reply with empty numbered items ("1. 2.") above it. */
.chat-trace:not([open]) > .trace-steps,
.chat-trace:not([open]) > .chat-trace-think { display: none; user-select: none; }
.chat-trace-think {
  margin: 0.22rem 0 0;
  font-style: normal;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: pre-wrap;
  max-height: 6.5rem;
  overflow: auto;
}

/* —— Bot profiles: photo avatars, click-to-edit, editor dialog —— */
.agent-avatar.has-photo {
  background: var(--paper-soft) var(--photo) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--line);
}
.agent-avatar.is-xl { width: 4.5rem; height: 4.5rem; font-size: 1.7rem; }
.bot-avatar-edit { cursor: pointer; transition: box-shadow 120ms ease, transform 120ms ease; }
.bot-avatar-edit:hover,
.bot-avatar-edit:focus-visible {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--line-strong);
  outline: none;
}

.bot-profile-overlay { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); }
.bot-profile {
  width: min(30rem, 100%);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-elev);
  box-shadow: var(--shadow-lg);
}
.bot-profile-form { display: grid; gap: 0.4rem; padding: 1.1rem 1.2rem 1rem; }
.bot-profile-form h2 { margin: 0 0 0.4rem; font-size: 1rem; }
.bot-profile-form label { margin-top: 0.4rem; font-size: 0.82rem; color: var(--muted); }
.bot-profile-form textarea { resize: vertical; min-height: 5.5rem; }
.bot-profile-photo { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.2rem; }
.bot-profile-photo-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.field-hint { margin: 0; font-size: 0.74rem; color: var(--muted); }
.bot-profile-error { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--fail); }
.bot-profile-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.7rem; }

/* —— Settings → Routines —— */
.routine-list { display: grid; gap: 0.55rem; max-width: 46rem; margin-bottom: 1.2rem; }
.routine-empty { margin: 0; font-size: 0.85rem; color: var(--muted); }
.routine-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}
.routine-card.is-paused { opacity: 1; }
.routine-card.is-paused .routine-title { color: var(--muted); }
.routine-body { display: grid; gap: 0.15rem; min-width: 0; }
.routine-title { margin: 0; font-weight: 600; font-size: 0.9rem; }
.routine-meta, .routine-last { margin: 0; font-size: 0.76rem; color: var(--muted); }
.routine-last.is-bad { color: var(--fail); }
.routine-prompt {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.routine-actions { display: flex; gap: 0.2rem; flex-wrap: wrap; justify-content: flex-end; }
.routine-form {
  display: grid;
  gap: 0.55rem;
  max-width: 46rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.routine-form h3 { margin: 0; font-size: 0.92rem; }
.routine-form label { display: grid; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.routine-form label[hidden] { display: none; }
.routine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.55rem; }
.routine-form .btn.primary { justify-self: start; }
.chat-chip.is-routine { background: var(--paper-soft); color: var(--muted); border: 1px solid var(--line); }
@media (max-width: 1023px) {
  .routine-card { grid-template-columns: auto minmax(0, 1fr); }
  .routine-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

pre,
.chat-msg code,
.api-new-key code,
.ap-acct-meta code,
.desk-help code {
  background: var(--code-bg);
  color: var(--code-ink);
}
.chat-msg code,
.api-new-key code,
.ap-acct-meta code {
  padding: 0.05rem 0.28rem;
  border-radius: 4px;
}
.badge,
.ap-tier-badge,
.ap-vps-state,
.ap-agent-chip,
.count-pill,
.live-chip {
  color: var(--ink);
}
.ap-tier-badge, .ap-vps-state, .ap-agent-chip, .count-pill, .badge { border-color: var(--border); }
.badge.ok, .ap-ok, .ap-state-ok, .ap-agent-ok, .conn-status.on, .bot-status.is-ok { color: var(--ok); }
.conn-status.on, .ap-agent-ok { border-color: var(--ok); }
.badge.warn, .conn-status.warn, .conn-status.machine, .conn-status.unreadable, .conn-status.auth, .bot-status.is-warn, .agent-row-reason { color: var(--warn); }
.badge.fail, .ap-err, .ap-state-err, .conn-status.fail, .bot-status.is-fail { color: var(--fail); }
.badge.fail, .ap-state-err, .conn-status.fail { border-color: var(--fail); }
.model-pill { color: var(--ink); }
.conn-status.off, .vps-agents-slots, .vps-agent-meta { color: var(--muted); }
.live-chip { color: var(--muted); }
.toast {
  background: var(--ink);
  color: var(--paper);
}

/* Phoenix mode. Hidden unless html[data-phoenix="1"]. The phoenix sprite is the only extra colour. */
html[data-phoenix="1"] .chat-model-line { flex-wrap: wrap; }
html[data-phoenix="1"] .output-mode { flex-shrink: 1; min-width: 0; }
.chat-working-live {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.phoenix-slot { display: flex; flex: 0 0 auto; }
.phoenix-sprite {
  width: 32px;
  height: 32px;
  display: block;
  color: var(--ink);
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}
.phoenix-panel .phoenix-sprite { width: 48px; height: 48px; }
/* Sprite motion follows the Stitch motion storyboard. Only transform,
   opacity and visibility move. A sprite rests (avatars, finished replies) until a reply is
   in flight. While the agent works the egg rattles and cracks, the chick
   hops and pecks, the hawk beats its wing and the phoenix breathes fire;
   it settles once when the reply lands. Reduced motion stops all of it. */
.phoenix-sprite { transform-origin: 50% 88%; overflow: hidden; }
.phoenix-sprite.is-egg.is-live,
.phoenix-sprite.is-chick.is-live,
.phoenix-sprite.is-hawk.is-live,
.phoenix-sprite.is-phoenix.is-live { animation: none; }
.phoenix-sprite[data-motion="static"] { animation: none; }
.chat-trace > summary .phoenix-slot { display: inline-flex; margin-right: 0.15rem; }
.chat-trace > summary .phoenix-sprite,
.chat-working-live .phoenix-sprite { width: 32px; height: 32px; }
/* Each sprite is a stack of whole frames (phoenix.js FRAMES). Frame 0 is
   the resting sprite; while the agent works the frames take turns, so a
   head or wing is always redrawn with the body and never comes loose. */
.phoenix-sprite .phoenix-frame:not([data-frame="0"]) { opacity: 0; }
.phoenix-sprite .phoenix-ash { opacity: 0.45; }
.phoenix-sprite.is-live { will-change: transform; }
.phoenix-sprite.is-egg { --phoenix-cycle: 1.6s; }
.phoenix-sprite.is-chick { --phoenix-cycle: 1.2s; }
.phoenix-sprite.is-hawk { --phoenix-cycle: 0.8s; }
.phoenix-sprite.is-phoenix { --phoenix-cycle: 1.8s; }
.phoenix-sprite.is-egg .phoenix-frame[data-frame="0"] { animation-name: phoenix-crack-rest; }
.phoenix-sprite.is-egg .phoenix-frame[data-frame="1"] { animation-name: phoenix-crack; }
.phoenix-sprite.is-chick .phoenix-frame[data-frame="0"] { animation-name: phoenix-peck-rest; }
.phoenix-sprite.is-chick .phoenix-frame[data-frame="1"] { animation-name: phoenix-peck; }
.phoenix-sprite.is-hawk .phoenix-frame[data-frame="0"] { animation-name: phoenix-wing-rest; }
.phoenix-sprite.is-hawk .phoenix-frame[data-frame="1"] { animation-name: phoenix-wing-mid; }
.phoenix-sprite.is-hawk .phoenix-frame[data-frame="2"] { animation-name: phoenix-wing; }
.phoenix-sprite.is-phoenix .phoenix-frame[data-frame="0"] { animation-name: phoenix-fire-rest; }
.phoenix-sprite.is-phoenix .phoenix-frame[data-frame="1"] { animation-name: phoenix-rear; }
.phoenix-sprite.is-phoenix .phoenix-frame[data-frame="2"] { animation-name: phoenix-spark; }
.phoenix-sprite.is-phoenix .phoenix-frame[data-frame="3"] { animation-name: phoenix-fire; }
.phoenix-sprite.is-phoenix .phoenix-frame[data-frame="4"] { animation-name: phoenix-ember; }
/* Frames only play while a reply is in flight (or the avatar is busy). */
.chat-working .phoenix-sprite.is-live .phoenix-frame {
  animation-duration: var(--phoenix-cycle, 1.6s);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
/* Thinking: each character does its own thing. */
.chat-working[data-phase="starting"] .phoenix-sprite.is-egg.is-live {
  animation: phoenix-shake 1.6s ease-in-out infinite;
}
.chat-working[data-phase="starting"] .phoenix-sprite.is-chick.is-live {
  animation: phoenix-waddle 2.4s steps(1, end) infinite;
}
.chat-working[data-phase="starting"] .phoenix-sprite.is-hawk.is-live {
  animation: phoenix-breathe 2.4s steps(1, end) infinite;
}
/* Streaming: the same characters, quicker and steadier. */
.chat-working[data-phase="streaming"] .phoenix-sprite.is-live {
  animation: phoenix-stream 0.9s ease-in-out infinite;
}
.chat-working[data-phase="streaming"] .phoenix-sprite.is-egg.is-live {
  animation: phoenix-shake 0.8s ease-in-out infinite;
  --phoenix-cycle: 0.8s;
}
.chat-working[data-phase="streaming"] .phoenix-sprite.is-chick.is-live {
  animation: phoenix-waddle 1.2s steps(1, end) infinite;
}
.chat-working[data-phase="streaming"] .phoenix-sprite.is-hawk.is-live {
  animation: phoenix-breathe 1.2s steps(1, end) infinite;
  --phoenix-cycle: 0.5s;
}
.chat-working[data-phase="streaming"] .phoenix-sprite.is-phoenix.is-live {
  animation: none;
  --phoenix-cycle: 1.1s;
}
.chat-msg.is-settling .chat-trace > summary .phoenix-sprite {
  animation: phoenix-settle 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
/* Egg: still, then a quick rattle on its base. */
@keyframes phoenix-shake {
  0%, 45%, 100% { transform: rotate(0deg); }
  52% { transform: rotate(-9deg); }
  60% { transform: rotate(8deg); }
  68% { transform: rotate(-6deg); }
  76% { transform: rotate(4deg); }
  84% { transform: rotate(-2deg); }
}
/* Frame timings. With steps(1, end) each value holds until the next stop. */
/* The crack opens while the egg rattles. */
@keyframes phoenix-crack-rest { 0%, 90%, 100% { opacity: 1; } 55% { opacity: 0; } }
@keyframes phoenix-crack { 0%, 90%, 100% { opacity: 0; } 55% { opacity: 1; } }
/* Chick: hops across, turns, hops back, pecking twice. */
@keyframes phoenix-waddle {
  0% { transform: translate(-2px, 0) scaleX(1); }
  10% { transform: translate(-1px, -2px) scaleX(1); }
  20% { transform: translate(0, 0) scaleX(1); }
  30% { transform: translate(1px, -2px) scaleX(1); }
  40% { transform: translate(2px, 0) scaleX(1); }
  50% { transform: translate(2px, 0) scaleX(-1); }
  60% { transform: translate(1px, -2px) scaleX(-1); }
  70% { transform: translate(0, 0) scaleX(-1); }
  80% { transform: translate(-1px, -2px) scaleX(-1); }
  90% { transform: translate(-2px, 0) scaleX(-1); }
}
/* The chick plucks at the ground twice, with the original timing. */
@keyframes phoenix-peck-rest { 0%, 78% { opacity: 1; } 65%, 85%, 100% { opacity: 0; } }
@keyframes phoenix-peck { 0%, 78% { opacity: 0; } 65%, 85%, 100% { opacity: 1; } }
/* Hawk glides between wing beats. */
@keyframes phoenix-breathe {
  0%, 75%, 100% { transform: translateY(0); }
  25%, 50% { transform: translateY(-2px); }
}
/* Wing: rest, half up, up, half up. */
@keyframes phoenix-wing-rest { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes phoenix-wing-mid { 0%, 50% { opacity: 0; } 25%, 75%, 100% { opacity: 1; } }
@keyframes phoenix-wing { 0%, 75%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* Phoenix: rest, rears its head back, lunges forward breathing fire
   (spark, fire, flicker, fire, spark), rest. */
@keyframes phoenix-fire-rest { 0%, 90%, 100% { opacity: 1; } 15% { opacity: 0; } }
@keyframes phoenix-rear { 0%, 35%, 100% { opacity: 0; } 15% { opacity: 1; } }
@keyframes phoenix-spark { 0%, 45%, 90%, 100% { opacity: 0; } 35%, 82% { opacity: 1; } }
@keyframes phoenix-fire { 0%, 60%, 82%, 100% { opacity: 0; } 45%, 70% { opacity: 1; } }
@keyframes phoenix-ember { 0%, 70%, 100% { opacity: 0; } 60% { opacity: 1; } }
@keyframes phoenix-stream {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes phoenix-settle {
  0% { transform: scale(1) translateY(0); }
  20% { transform: scale(1.14) translateY(-3px); }
  45% { transform: scale(0.96) translateY(1px); }
  70% { transform: scale(1.01) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}
/* Rebirth (phoenix.js playRebirth): the phoenix catches fire, burns to ash,
   and an egg forms. Played once; the last frame holds until the egg paints. */
.phoenix-sprite.is-rebirth .phoenix-frame {
  animation-duration: 3.4s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.phoenix-sprite.is-rebirth { animation: phoenix-rebirth-shake 3.4s ease-in-out 1 forwards; }
.phoenix-sprite.is-rebirth .phoenix-frame[data-frame="0"] { animation-name: phoenix-rebirth-0; }
.phoenix-sprite.is-rebirth .phoenix-frame[data-frame="1"] { animation-name: phoenix-rebirth-1; }
.phoenix-sprite.is-rebirth .phoenix-frame[data-frame="2"] { animation-name: phoenix-rebirth-2; }
.phoenix-sprite.is-rebirth .phoenix-frame[data-frame="3"] { animation-name: phoenix-rebirth-3; }
.phoenix-sprite.is-rebirth .phoenix-frame[data-frame="4"] { animation-name: phoenix-rebirth-4; }
.phoenix-sprite.is-rebirth .phoenix-frame[data-frame="5"] { animation-name: phoenix-rebirth-5; }
.phoenix-sprite.is-rebirth .phoenix-frame[data-frame="6"] { animation-name: phoenix-rebirth-6; }
.phoenix-sprite.is-rebirth .phoenix-frame[data-frame="7"] { animation-name: phoenix-rebirth-7; }
@keyframes phoenix-rebirth-0 { 0% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes phoenix-rebirth-1 { 0%, 22%, 100% { opacity: 0; } 10% { opacity: 1; } }
@keyframes phoenix-rebirth-2 { 0%, 34%, 100% { opacity: 0; } 22% { opacity: 1; } }
@keyframes phoenix-rebirth-3 { 0%, 50%, 100% { opacity: 0; } 34% { opacity: 1; } }
@keyframes phoenix-rebirth-4 { 0%, 62%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes phoenix-rebirth-5 { 0%, 74%, 100% { opacity: 0; } 62% { opacity: 1; } }
@keyframes phoenix-rebirth-6 { 0%, 86%, 100% { opacity: 0; } 74% { opacity: 1; } }
@keyframes phoenix-rebirth-7 { 0% { opacity: 0; } 86%, 100% { opacity: 1; } }
/* The fire shudders while it burns; the new egg settles with a small pop. */
@keyframes phoenix-rebirth-shake {
  0%, 30%, 52% { transform: none; }
  36% { transform: translateX(-1px); }
  42% { transform: translateX(1px); }
  48% { transform: translateX(-1px); }
  86% { transform: scale(1); }
  92% { transform: scale(1.12) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}
/* The avatar glows while it burns. */
.agent-avatar.is-reborn { animation: phoenix-reborn-glow 3.4s ease-out 1; }
@keyframes phoenix-reborn-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(142, 142, 147, 0); }
  30%, 50% { box-shadow: 0 0 0 4px rgba(142, 142, 147, 0.35), 0 0 18px 4px rgba(142, 142, 147, 0.45); }
  75% { box-shadow: 0 0 0 2px rgba(142, 142, 147, 0.15); }
}
.phoenix-panel {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.phoenix-panel[hidden] { display: none; }
body.app #phoenixPanel { display: none !important; }
#chatLevelBar,
#mobileLevelBar { cursor: pointer; }
.phoenix-level {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.phoenix-titles { min-width: 0; }
.phoenix-level-name,
.phoenix-reborn,
.phoenix-xp-label,
.phoenix-achievements-title,
.phoenix-achievement-desc,
.phoenix-error {
  margin: 0;
  overflow-wrap: anywhere;
}
.phoenix-level-name { font-size: 0.95rem; }
.phoenix-reborn,
.phoenix-xp-label,
.phoenix-achievement-desc { color: var(--muted); font-size: 0.8rem; }
.phoenix-xp { min-width: 0; display: grid; gap: 0.25rem; }
.phoenix-xp-track {
  height: 0.45rem;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  min-width: 0;
}
.phoenix-xp-fill { height: 100%; background: var(--ink); max-width: 100%; }
.phoenix-achievements-title { font-size: 0.82rem; }
.phoenix-achievements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}
.phoenix-achievement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.6rem;
  min-width: 0;
}
.phoenix-achievement-desc { grid-column: 1 / -1; }
.phoenix-achievement.is-locked { color: var(--muted); }
.phoenix-achievement-state { font-size: 0.75rem; color: var(--muted); }
.phoenix-actions, .phoenix-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}
.phoenix-dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--paper) 30%, transparent);
}
.phoenix-rebirth-modal {
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: transparent;
  overflow: hidden;
}
.phoenix-rebirth-modal::backdrop { background: transparent; }
.phoenix-dialog-card {
  width: min(28rem, 100%);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  padding: 1rem;
  display: grid;
  gap: 0.55rem;
}
.phoenix-dialog-card h2,
.phoenix-dialog-card p { margin: 0; overflow-wrap: anywhere; }
.phoenix-dialog-error { color: var(--ink); font-size: 0.88rem; }
.phoenix-dialog-error[hidden] { display: none; }
.phoenix-dialog-actions { justify-content: flex-end; }
.phoenix-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 45;
  display: grid;
  gap: 0.4rem;
  width: min(22rem, calc(100vw - 2rem));
  max-width: 100%;
}
.phoenix-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}
.phoenix-toast p {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}
.phoenix-toast-dismiss { flex: 0 0 auto; }
@media (max-width: 420px) {
  .phoenix-panel { padding: 0.7rem 0.75rem; }
  .phoenix-panel .phoenix-sprite { width: 32px; height: 32px; }
  .phoenix-achievement { grid-template-columns: minmax(0, 1fr); }
  .phoenix-actions .btn,
  .phoenix-dialog-actions .btn { min-height: 44px; }
  .phoenix-actions .btn { width: 100%; }
  .phoenix-toasts { left: 0.75rem; right: 0.75rem; width: auto; bottom: 0.75rem; }
  .phoenix-toast { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
  .phoenix-dialog { padding: 0.75rem; align-items: end; }
  .phoenix-dialog-card { width: 100%; }
}

/* Customer onboarding. Monochrome, with status colours only. */
.billing-return {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
.billing-return[hidden] { display: none; }
.billing-return p {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.billing-return.is-muted {
  border-color: var(--border);
  background: var(--paper);
  color: var(--muted);
}
.billing-return-dismiss {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0.35rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}
.ob-progress-wrap { width: 100%; min-width: 0; }
.ob-step-count {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}
.ob-progress {
  display: flex;
  gap: 0.3rem;
  list-style: none;
  margin: 0 0 0.2rem;
  padding: 0;
  width: 100%;
}
.ob-progress li { flex: 1 0 44px; min-width: 44px; }
.ob-progress button {
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0.35rem 0.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.ob-progress li.is-current button,
.ob-progress li.is-done button {
  color: var(--ink);
  border-color: var(--ink);
}
.ob-progress li.is-current button { background: var(--you); }
.ob-progress button:disabled { cursor: default; opacity: 0.55; }
.ob-status { min-height: 1.3rem; margin: 0.6rem 0 0; font-size: 0.92rem; }
.ob-status.is-ready { color: var(--ok); }
.ob-status.is-setup { color: var(--warn); }
.ob-status.is-failed { color: var(--fail); }
.ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.2rem 0 0.8rem;
}
.ob-chip {
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  text-align: left;
}
.ob-transcript { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.4rem 0 0.8rem; }
.ob-line {
  margin: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ob-line-you { background: var(--you); }
.ob-line-agent { background: var(--paper); }
.ob-celebrate {
  margin-top: 0.9rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
.ob-celebrate h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.ob-celebrate p { margin: 0; line-height: 1.45; }
.login-card .btn.ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
}
#challengeSlot, .challenge { margin-top: 0.8rem; min-width: 0; }
#challengeSlot[hidden], .challenge[hidden] { display: none; }
.form-challenge {
  margin: 0.85rem 0 0.15rem;
  min-width: 0;
  max-width: 100%;
}
.form-challenge[hidden] { display: none; }
.form-challenge .challenge-note {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}
.form-challenge .challenge-box {
  min-width: 300px;
  max-width: 100%;
  min-height: 65px;
  overflow: visible;
}
.form-challenge .challenge-box iframe { max-width: 100%; }
@media (max-width: 480px) {
  .form-challenge { margin-top: 0.7rem; }
  .form-challenge .challenge-box { min-height: 65px; }
}
@media (max-width: 390px) {
  .ob-progress { gap: 0.2rem; }
  .ob-progress button { font-size: 0.68rem; padding-left: 0.05rem; padding-right: 0.05rem; }
  .login-stack { width: 100%; }
  .ob-chip { width: 100%; border-radius: var(--radius-sm); }
}

#billingTitle a {
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.account-legal { display: none; margin: 2rem 0 0; }
.agent-picker { display: none; }
.agent-picker.is-open {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  width: min(100%, 38rem);
  max-height: 70dvh;
  overflow: auto;
  padding: 1rem 0.75rem calc(1rem + var(--safe-bottom));
  color: var(--ink);
  background: var(--paper-elev);
  border: 1px solid var(--line-strong);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-lg);
  z-index: 40;
}
@media (min-width: 1024px) {
  .agent-picker.is-open {
    inset: auto;
    margin: 0;
    width: min(22rem, calc(100vw - 1rem));
    max-height: min(70dvh, 28rem);
    border-radius: 16px;
  }
}
.agent-picker::backdrop { background: rgb(0 0 0 / 55%); }
.agent-picker-list { display: flex; flex-direction: column; }
.agent-pick {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.35rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.agent-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.agent-pick-meta { display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; font-size: 0.82rem; }
.agent-pick-meta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--track); }
.agent-pick-meta.is-ok::before { background: var(--ok); }
.agent-pick-meta.is-warn::before { background: var(--warn); }
.agent-pick-meta.is-fail::before { background: var(--fail); }
.agent-pick-meta.is-idle::before { background: var(--track); }
.agent-pick.is-current { background: var(--you); }

/* Phone: one page scroll, one Account destination, no shell footer. */
@media (max-width: 1023px) {
  body.app {
    height: auto;
    max-height: none;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body[data-pane="agents"][data-agents-view="chat"] {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  body.app .pm-main,
  body.app .workspace-agents,
  body.app .workspace-projects,
  body.app .workspace-settings,
  body.app .bot-rail,
  body.app .bot-roster,
  body.app .settings-nav,
  body.app .settings-body {
    overflow: visible;
    height: auto;
    max-height: none;
    min-height: 0;
  }
  body.app .workspace-agents,
  body[data-pane="settings"] .workspace-settings {
    display: flex;
    flex-direction: column;
  }
  body[data-pane="agents"][data-agents-view="chat"] .pm-main,
  body[data-pane="agents"][data-agents-view="chat"] .workspace-agents,
  body[data-pane="agents"][data-agents-view="chat"] .workspace-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  body[data-pane="agents"][data-agents-view="chat"] .chat-log {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  .rail-head,
  .rail-intro,
  .bot-rail > [data-open-tab="agents"] { display: none; }
  .bot-rail { padding-top: 0.75rem; }
  .pane-switch { position: static; }
  .pane-btn span { white-space: nowrap; }
  body[data-pane="settings"][data-settings="agents"] .settings-nav { display: none; }
  body[data-pane="settings"] .settings-body { order: -1; }
  .settings-nav { padding: 0; }
  .account-group { padding: 0; }
  .account-group > summary,
  .settings-nav .account-tab {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 1rem;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .agent-row { min-height: 44px; }
  .account-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.8rem;
  }
  .account-legal a {
    color: var(--ink);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* List-first shell: hero, chips, pill header, pill composer, account sheet. */
.home-hero {
  appearance: none;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.5rem 0.15rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.home-hero-name {
  display: block;
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  min-height: 1.25em;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-avatar.is-hero {
  width: 5.25rem;
  height: 5.25rem;
  font-size: 1.8rem;
}
.bot-card-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  min-width: 2.6rem;
}
.bot-stamp {
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bot-status.bot-preview {
  color: var(--muted);
  font-weight: 400;
}
.bot-unread {
  background: var(--ink);
}
.chat-head {
  margin: 0.55rem 0.75rem 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-elev) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  z-index: 6;
}
.workspace-chat { position: relative; }
.chat-msg.local .chat-msg-main,
.chat-msg.cloud .chat-msg-main,
.chat-msg.bot .chat-msg-main {
  padding: 0.7rem 0.9rem;
  background: var(--bubble-agent);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.chat-msg.you .chat-msg-main { border-radius: 18px; }
.chat-composer .icon-btn,
#chatVoice,
#chatMic,
#chatAttach {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#chatVoice[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}
.composer-disclaimer {
  margin: 0 0 0.35rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}
.composer-status-slot:empty { display: none; }
.composer-status-slot:not(:empty) { margin: 0 0 0.4rem; }
.account-avatar-btn,
.icon-round {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.account-avatar {
  width: 2rem;
  height: 2rem;
  font-size: 0.72rem;
  background: var(--paper-soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.mobile-agent-avatar {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.68rem;
}
.home-add-menu {
  position: fixed;
  z-index: 45;
  min-width: 11rem;
  padding: 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--paper-elev);
  box-shadow: var(--shadow-lg);
}
.home-add-menu[hidden] { display: none !important; }
.home-add-item {
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-add-item:hover { background: var(--paper-soft); }
.page-nav-slot:empty { display: none; }
.account-sheet,
.plugins-panel {
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  width: min(32rem, calc(100% - 2rem));
  max-height: min(92dvh, 52rem);
}
.account-sheet::backdrop,
.plugins-panel::backdrop { background: rgb(0 0 0 / 55%); }
.account-sheet-card,
.plugins-card {
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 52rem);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
}
.account-sheet-scroll { overflow: auto; padding: 0.25rem 0.9rem 1.1rem; }
.account-sheet .account-pane { display: block; }
.sheet-x {
  appearance: none;
  width: 44px;
  height: 44px;
  margin: 0.35rem 0 0 0.35rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.account-card {
  margin: 0.55rem 0;
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  background: var(--paper-soft);
}
.account-sheet .account-billing {
  margin: 0.55rem 0;
  padding: 0.95rem 1rem 1rem;
  border-radius: 16px;
  background: var(--paper-soft);
}
.account-sheet .account-billing .billing-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.account-sheet .account-billing > .billing-grid > .plan-card {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0.8rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.account-sheet .account-billing > .billing-grid > .plan-card:first-child { padding-top: 0; }
.account-sheet .plan-carousel-wrap,
.account-sheet .plan-carousel-scroller,
.account-sheet .plan-carousel { background: var(--paper-soft); }
.account-sheet .account-usage,
.account-sheet #creditsCard {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}
.account-sheet .account-usage-head { min-height: 0; margin-bottom: 0.4rem; }
.account-sheet #planName,
.account-sheet #creditsBalance {
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 650;
}
.account-sheet .plan-head { align-items: flex-start; }
.account-sheet .plan-credits { white-space: normal; margin-top: 0.2rem; }
.account-sheet .credit-facts { margin-top: 0.65rem; }
.account-sheet .plan-price,
.account-sheet .plan-renewal,
.account-sheet .plan-vps { overflow-wrap: anywhere; }
.account-profile-row,
.account-nav-row,
.account-toggle-row,
.account-field-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.account-profile-card > summary { list-style: none; }
.account-profile-card > summary::-webkit-details-marker { display: none; }
.account-profile-copy,
.account-nav-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}
.account-profile-copy strong,
.account-nav-copy strong,
.account-toggle-row .switch-title {
  font-weight: 700;
}
#accountProfileName {
  overflow-wrap: break-word;
  word-break: normal;
}
.profile-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.profile-save-row .section-note { margin: 0; }
@media (max-width: 1023px) {
  .profile-save-row {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 0.65rem 0;
    background: var(--paper-soft);
  }
}
.account-profile-copy span,
.account-row-note {
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#localOnlyHint {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.local-only-switch { align-items: flex-start; }
.account-usage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  font-weight: 650;
}
.account-chevron { color: var(--muted); font-size: 1.3rem; }
.account-toggle-row select {
  width: auto;
  min-width: 6.5rem;
  min-height: 44px;
  font-size: 16px;
}
.account-signout {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0.8rem 0 0.35rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.account-sheet .account-legal {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.35rem 0 0.2rem;
  font-size: 0.75rem;
}
.account-sheet .account-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
}
.plugins-card { padding: 0.35rem 1rem 1.25rem; }
.plugins-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.15rem 0 0.85rem;
  min-width: 0;
}
.plugins-head .sheet-x {
  margin: 0;
  flex: 0 0 44px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.plugins-head h2 {
  margin: 0;
  min-width: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}
.plugins-empty {
  margin: 1.5rem 0;
  text-align: center;
  color: var(--muted);
}
.plugins-error {
  margin: 0.35rem 0 0.8rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}
.plugins-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; }
.plugin-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  background: var(--paper-soft);
}
.plugin-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.plugin-copy strong { font-weight: 700; }
.plugin-note,
.plugin-account,
.plugin-status { color: var(--muted); font-size: 0.82rem; }
.plugin-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.plugin-key { display: flex; gap: 0.4rem; align-items: center; min-width: 0; flex: 1 1 12rem; }
.plugin-key input { min-height: 44px; font-size: 16px; flex: 1 1 auto; min-width: 0; }
.plugin-confirm { display: inline-flex; gap: 0.35rem; }
.chat-head .chat-heading-row { align-items: center; }
.chat-agent-pick {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.desktop-agent-pick { min-height: 44px; }
.mobile-tools { display: none; margin-left: auto; align-items: center; gap: 0.15rem; }
.mobile-account { display: none; }
/* Desktop shell (1024px and up). Below that, these nodes stay out of the layout. */
.desk-only { display: none !important; }
.desk-head-status,
.desk-details { display: none; }

@media (min-width: 1024px) {
  .desk-only { display: flex !important; }
  .desk-only[hidden] { display: none !important; }
  .top,
  .mobile-bar,
  .page-nav-slot,
  .home-mark,
  .home-composer,
  .home-nav-slot,
  .rail-intro,
  .foot,
  #chatNote,
  #chatLevelBar { display: none !important; }

  .pm-main {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  body .workspace-agents { display: contents !important; }
  .bot-rail {
    display: flex !important;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    width: 260px;
    min-width: 0;
    max-width: 260px;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 1.15rem 0.9rem 0.85rem;
    gap: 0.35rem;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--rail-bg);
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
  }
  .bot-rail > * { min-width: 0; max-width: 100%; }
  body[data-pane="agents"] .workspace-chat {
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: var(--paper);
    border: 0;
    border-radius: 0;
  }
  body:not([data-pane="agents"]) .workspace-chat,
  body:not([data-pane="agents"]) .desk-details { display: none !important; }
  .workspace-projects,
  .workspace-settings {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }
  body[data-pane="agents"][data-agents-view="chats"] #botRoster,
  body[data-pane="agents"][data-agents-view="chats"] .rail-head,
  body[data-pane="agents"][data-agents-view="chats"] .bot-rail > [data-open-tab="agents"] {
    display: flex !important;
  }

  .desk-brand {
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.15rem 0.25rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .desk-brand .logo { width: 1.75rem; height: auto; }
  .desk-brand-copy { display: flex; flex-direction: column; min-width: 0; }
  .desk-brand-name {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
  }
  .desk-brand-sub {
    margin-top: 0.22rem;
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.01em;
  }
  .desk-new-chat {
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 40px;
    margin: 0.15rem 0 0.45rem;
    padding: 0 0.8rem;
    border: 0;
    border-radius: 12px;
    background: var(--ink);
    color: var(--paper);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
  }
  .desk-new-chat:hover { background: var(--navy-deep); }
  .desk-kicker,
  .desk-kicker-btn {
    margin: 0.65rem 0.35rem 0.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }
  .desk-kicker-btn { width: 100%; min-height: 44px; }
  .rail-head { padding: 0 0.2rem; min-height: 0; }
  .workspace-kicker { display: none; }
  .rail-title {
    margin: 0.35rem 0 0;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .rail-add { color: var(--muted); min-height: 44px; }
  .bot-rail > [data-open-tab="agents"] {
    align-self: flex-start;
    min-height: 44px;
    color: var(--muted);
  }
  .bot-rail .bot-roster { flex: 0 0 auto; overflow: visible; gap: 0.2rem; }
  .bot-rail .roster-onboarding {
    margin-top: 0.35rem;
    padding: 0.65rem 0.7rem;
    border-radius: 12px;
  }
  .bot-rail .roster-onboarding h2 {
    margin: 0;
    font-size: 0.92rem;
    letter-spacing: -0.02em;
  }
  .bot-rail .roster-onboarding p {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    line-height: 1.35;
  }
  .bot-rail .roster-onboarding .btn { width: 100%; margin-top: 0.5rem; }
  .bot-rail > .rail-foot { margin-top: 0; border-top: 0; padding-top: 0; }
  .bot-rail .bot-card {
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.35rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
  }
  @media (hover: hover) { .bot-rail .bot-card:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } }
  .bot-rail .bot-card.is-selected {
    background: var(--paper);
    border-color: var(--line);
    box-shadow: var(--shadow);
  }
  .bot-rail .bot-dot { display: none; }
  .bot-rail .bot-card-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
  }
  .bot-rail .bot-card.is-setup .bot-card-copy,
  .bot-rail .bot-card:has(.bot-status.is-fail) .bot-card-copy {
    flex-direction: column;
    align-items: stretch;
    gap: 0.05rem;
  }
  .bot-rail .bot-name-row {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    max-width: 100%;
  }
  .bot-rail .bot-name {
    font-size: 0.84rem;
    font-weight: 650;
    max-width: 100%;
  }
  .bot-rail .level-bar { max-width: none; color: var(--muted); }
  .bot-rail .level-track { display: none; }
  .bot-rail .level-num::before { content: "Lv "; font-weight: 500; }
  .bot-rail .bot-status.is-local-entry { display: none !important; }
  .bot-rail .bot-status,
  .bot-rail .bot-status.is-ok,
  .bot-rail .bot-status.is-warn,
  .bot-rail .bot-status.is-fail {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 6.5rem;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.68rem;
  }
  .bot-rail .bot-card.is-setup .bot-status,
  .bot-rail .bot-status.is-fail {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    overflow-wrap: normal;
  }
  .bot-rail .setup-spinner {
    display: inline-block;
    vertical-align: -0.15em;
    margin-right: 0.28rem;
  }
  .bot-rail .bot-card-meta { display: none; }
  .bot-rail .bot-card > .btn {
    flex: 0 0 auto;
    margin-left: 0;
    align-self: center;
    min-height: 32px;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .bot-rail .bot-card.is-removing {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .bot-rail .bot-card.is-removing .bot-card-copy {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .bot-rail .bot-card.is-removing .bot-name,
  .bot-rail .bot-card.is-removing .bot-status {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .desk-projects { flex-direction: column; align-items: stretch; width: 100%; }
  .desk-projects-empty {
    margin: 0.1rem 0.45rem 0.2rem;
    color: var(--muted);
    font-size: 0.75rem;
  }
  .desk-project-list { display: flex; flex-direction: column; gap: 0.1rem; }
  .desk-project {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    min-height: 40px;
    padding: 0.4rem 0.45rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .desk-project:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  .desk-project-name { font-size: 0.84rem; font-weight: 600; }
  .desk-project-meta {
    color: var(--muted);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .desk-user {
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: auto;
    padding: 0.75rem 0.2rem 0.15rem;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--rail-bg);
    color: var(--ink);
    text-align: left;
    position: static;
    bottom: auto;
    cursor: pointer;
  }
  .desk-user-avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.72rem;
    font-weight: 650;
    flex: 0 0 auto;
  }
  .desk-user-copy { display: flex; flex-direction: column; min-width: 0; }
  .desk-user-name {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .desk-user-plan {
    color: var(--muted);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-head {
    align-items: center;
    height: 3.5rem;
    margin: 0;
    padding: 0 1.5rem;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .chat-head-title > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
  }
  .chat-head .chat-heading-row { flex: 0 1 auto; min-width: 0; margin: 0; }
  .chat-head h1 { font-size: 1.05rem; letter-spacing: -0.02em; }
  .desk-head-status:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper-soft);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 600;
  }
  .desk-status-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--ink);
    flex: 0 0 auto;
  }
  .chat-log {
    padding: 1.5rem 2rem 0.75rem;
  }
  .chat-log > .chat-msg,
  .chat-form > * { max-width: 820px; }
  .chat-form {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding: 0.35rem 2rem 1.15rem;
    border-top: 0;
    background: var(--paper);
  }
  .composer-disclaimer {
    order: 2;
    margin: 0.45rem 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.68rem;
  }
  .chat-composer {
    border-radius: 16px;
    border-color: var(--line);
    background: var(--paper);
    box-shadow: var(--shadow);
    align-items: center;
  }
  .chat-form:focus-within .chat-composer { border-color: var(--ink); }
  .chat-form #chatSend {
    min-width: 4.5rem;
    min-height: 2.25rem;
    border-radius: 999px;
  }

  .desk-details {
    flex-direction: column;
    gap: 1.15rem;
    min-width: 0;
    min-height: 0;
    padding: 1.35rem 1.15rem;
    overflow: auto;
    background: color-mix(in srgb, var(--rail-bg) 72%, var(--paper));
    border-left: 1px solid var(--line);
  }
  .desk-details-head { display: flex; align-items: center; gap: 0.75rem; }
  .desk-details-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.02em;
  }
  #deskDetailsName {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .desk-tier {
    flex: 0 0 auto;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: var(--line-strong);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 650;
  }
  .desk-details-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: 0.75rem;
  }
  .desk-details-status[hidden] { display: none; }
  .desk-level-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: var(--shadow);
  }
  .desk-level-card[hidden] { display: none; }
  .desk-level-card[role="button"] { cursor: pointer; }
  .desk-level-card[role="button"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .desk-level-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.84rem;
    font-weight: 650;
  }
  #deskXpLabel { color: var(--muted); font-size: 0.75rem; font-weight: 500; }
  .desk-level-track {
    height: 0.3rem;
    border-radius: 999px;
    background: var(--paper-soft);
    overflow: hidden;
  }
  .desk-level-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--agent-c, var(--ink));
    transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* Skills, purpose, routines and NightOwl fold like the skill sheet. */
  .desk-folds { display: flex; flex-direction: column; min-width: 0; }
  .desk-fold { display: block; min-width: 0; max-width: 100%; }
  .desk-fold[hidden] { display: none; }
  .desk-fold > summary .desk-kicker { flex: 1 1 auto; }
  .desk-folds .desk-fold > summary::after { margin-left: 0; }
  .desk-fold .routine-row { gap: 0.5rem; padding: 0.65rem 0.7rem; }
  .desk-fold .routine-name { font-size: 0.84rem; }
  .desk-fold .routine-schedule,
  .desk-fold .routine-next,
  .desk-fold .routine-paused,
  .desk-fold .routine-status,
  .desk-fold .routine-run-note,
  .desk-fold .routine-confirm,
  .desk-fold .section-note { font-size: 0.75rem; }
  .desk-fold .routines-empty,
  .desk-fold .nightowl-empty { margin: 0 0 0.5rem; text-align: left; font-size: 0.75rem; }
  .desk-skills[hidden] { display: none; }
  .desk-skills-empty { margin: 0; color: var(--muted); font-size: 0.75rem; }
  .desk-skills-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.72rem;
  }
  .desk-skills-list { display: flex; flex-direction: column; gap: 0.4rem; }
  .desk-skill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: var(--shadow);
  }
  .desk-skill-name { font-size: 0.84rem; font-weight: 600; }
  .desk-skill-level {
    padding: 0.08rem 0.4rem;
    border-radius: 6px;
    background: var(--paper-soft);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 650;
  }
  .desk-purpose[hidden] { display: none; }
  .desk-purpose .agent-purpose { margin-top: 0; }
  .desk-purpose .agent-purpose-text { flex-basis: 100%; }
}

@media (min-width: 1280px) {
  body[data-pane="agents"] .pm-main {
    grid-template-columns: 260px minmax(0, 1fr) 300px;
  }
  body[data-pane="agents"] .desk-details {
    display: flex !important;
    grid-column: 3;
    grid-row: 1;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    height: 100%;
  }
}

@media (min-width: 1024px) {
  .home-hero { padding-top: 0.85rem; }
  .agent-avatar.is-hero { width: 4.25rem; height: 4.25rem; font-size: 1.45rem; }
}
@media (max-width: 1023px) {
  .pane-switch {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    position: static;
  }
  .pane-btn {
    flex-direction: row;
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper-soft);
    color: var(--muted);
  }
  .pane-btn svg { display: none; }
  .pane-btn.is-active {
    color: var(--paper);
    background: var(--ink);
  }
  .page-nav-slot { background: var(--paper); }
  .chat-msg-body { font-size: 1rem; line-height: 1.45; }
}
@media (max-width: 1023px) {
  .mobile-bar {
    border-bottom: 0;
    background: transparent;
  }
  .mobile-tools { display: flex; }
  .mobile-account { display: inline-flex; }
  .mobile-bar .mobile-back,
  .mobile-bar .mobile-title,
  .mobile-bar .mobile-menu-btn { display: none; }
  body[data-pane="agents"][data-agents-view="chat"] .mobile-bar {
    position: fixed;
    top: calc(0.4rem + var(--safe-top));
    left: 0.55rem;
    right: 0.55rem;
    z-index: 40;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper-elev) 78%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
  }
  body[data-pane="agents"][data-agents-view="chat"] .mobile-bar .mobile-back,
  body[data-pane="agents"][data-agents-view="chat"] .mobile-bar .mobile-title,
  body[data-pane="agents"][data-agents-view="chat"] .mobile-bar .mobile-menu-btn {
    display: inline-flex;
  }
  body[data-pane="agents"][data-agents-view="chat"] .mobile-account,
  body[data-pane="agents"][data-agents-view="chat"] #homeAddBtn { display: none; }
  body[data-pane="agents"][data-agents-view="chat"] .chat-log { padding-top: 4.6rem; }
  body[data-pane="agents"][data-agents-view="chat"] .pm-main { padding-top: 0; }
  .account-sheet,
  .plugins-panel {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }
  .account-sheet-card,
  .plugins-card {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* Phone: the open chat is the viewport, not a second column off to the right. */
@media (max-width: 1023px) {
  body[data-pane="agents"] .workspace-agents {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    translate: none !important;
  }
  body[data-pane="agents"] .workspace-chat,
  body[data-pane="agents"] .bot-rail {
    transform: none !important;
    translate: none !important;
  }
  body[data-pane="agents"][data-agents-view="list"] .workspace-chat {
    display: none !important;
  }
  body[data-pane="agents"][data-agents-view="chat"] .bot-rail {
    display: none !important;
  }
  body[data-pane="agents"][data-agents-view="chat"] .workspace-chat {
    display: flex !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    inset-inline-start: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
    translate: none !important;
  }
  /* Tasks and Team stay on data-pane=agents and paint over this section (the
     board and the canvas are siblings of the rail). The rail is still in the
     document, so an agent card scrolls into the gap under the floating tab
     bar. Hide the roster and the chat column; leave the board and canvas.
     The pane-in animation transforms this section, which then contains the
     fixed board and canvas, so they stop short of the screen. Drop it. */
  body.is-tasks .workspace-agents,
  body.is-management .workspace-agents {
    animation: none !important;
  }
  body.is-tasks .workspace-agents > .bot-rail,
  body.is-management .workspace-agents > .bot-rail,
  body.is-tasks .workspace-agents > .workspace-chat,
  body.is-management .workspace-agents > .workspace-chat,
  body.is-tasks .workspace-agents > .desk-details,
  body.is-management .workspace-agents > .desk-details {
    display: none !important;
  }
}

/* Generated images and agent routines. Monochrome, same sheet language as Account. */
.routines-entry[hidden],
.nightowl-entry[hidden],
.tasks-entry[hidden] { display: none !important; }
.nightowl-account-toggle { width: 100%; margin: 0 0 0.65rem; }
.nightowl-account-toggle input { min-width: 44px; min-height: 44px; }
.routines-menu-item {
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.15rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.routines-sheet h2 {
  margin: 0 1rem 0.15rem;
  font-size: 1.35rem;
  font-weight: 650;
}
.routines-agent {
  margin: 0 1rem 0.45rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.routines-agent:empty { display: none; }
.routines-empty {
  margin: 1.4rem 0 1rem;
  text-align: center;
  color: var(--muted);
}
.routine-group {
  margin: 0.35rem 0 0.85rem;
  padding: 0;
  list-style: none;
  border-radius: 16px;
  background: var(--paper-soft);
  overflow: hidden;
}
.routine-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-top: 1px solid var(--line);
}
.routine-row:first-child { border-top: 0; }
.routine-copy { flex: 1 1 auto; min-width: 0; }
.routine-name { margin: 0; font-weight: 650; }
.routine-schedule,
.routine-next,
.routine-paused,
.routine-status,
.routine-run-note,
.routine-confirm {
  margin: 0.12rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}
.routine-paused { color: var(--ink); font-weight: 650; }
.routine-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex: 0 0 auto;
}
.routine-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.routine-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.routine-switch input:checked + .switch-track { background: var(--navy-fill); }
.routine-switch input:checked + .switch-track::after { transform: translateX(0.92rem); }
.routine-switch input:focus-visible + .switch-track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.routines-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-bottom: 0.4rem;
}
.routines-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.routines-form label[hidden] { display: none; }
.routines-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.routines-error {
  margin: 0;
  color: var(--ink);
  font-size: 0.85rem;
}
.routines-error[hidden] { display: none; }
.chat-msg.cloud .chat-msg-main:has(.chat-image),
.chat-msg.bot .chat-msg-main:has(.chat-image),
.chat-msg.local .chat-msg-main:has(.chat-image) {
  padding: 0.65rem 0.75rem 0.75rem;
  background: var(--bubble-agent);
  border-radius: var(--radius);
}
.chat-routine-line {
  margin: 0.15rem 0 0.15rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.chat-image {
  margin: 0.45rem 0 0;
  max-width: 100%;
}
.chat-image-open {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-soft);
  cursor: pointer;
}
.chat-image-open.is-unmeasured { min-height: 8rem; }
.chat-image-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}
.chat-image-open:not(.is-unmeasured) .chat-image-img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: contain;
}
.chat-image-skeleton {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 10%, var(--paper-soft));
  animation: chat-image-pulse 1.4s ease-in-out infinite;
}
.chat-image.is-loaded .chat-image-skeleton,
.chat-image.is-failed .chat-image-skeleton { display: none; }
.chat-image-fallback {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
@keyframes chat-image-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-image-skeleton { animation: none; }
}
.image-viewer {
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--navy);
  color: var(--on-navy);
}
html[data-theme="dark"] .image-viewer {
  background: var(--paper);
  color: var(--ink);
}
.image-viewer[hidden] { display: none !important; }
.image-viewer::backdrop { background: var(--navy); }
html[data-theme="dark"] .image-viewer::backdrop { background: var(--paper); }
.image-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0.35rem 0.5rem 0.35rem 0.2rem;
}
.image-viewer-close,
.image-viewer-download { color: inherit; }
.image-viewer-download {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
}
.image-viewer-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100dvh - 4.5rem);
  padding: 0 0.75rem 1rem;
}
.image-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.plugins-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  max-width: 100%;
}
.plugin-row,
.plugin-mailbox,
.plugin-mailbox-copy { min-width: 0; max-width: 100%; }
.plugin-mailboxes {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}
.plugin-mailbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.6rem;
}
.plugin-mailbox-copy { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 10rem; }
.plugin-address { overflow-wrap: anywhere; font-size: 0.92rem; }
.plugin-status.is-ok { color: var(--ok); }
.plugin-status.is-warn { color: var(--warn); }
.plugin-status.is-bad { color: var(--fail); }
.plugin-confirm { flex-wrap: wrap; max-width: 100%; }
.plugins-notice {
  align-self: flex-start;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 14%, var(--paper));
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.plugins-notice[hidden] { display: none; }
.plugins-panel > .toast {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  margin: 0;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line));
}
.chat-msg.cloud .chat-msg-main:has(.chat-video),
.chat-msg.bot .chat-msg-main:has(.chat-video),
.chat-msg.local .chat-msg-main:has(.chat-video),
.chat-msg.cloud .chat-msg-main:has(.chat-audio),
.chat-msg.bot .chat-msg-main:has(.chat-audio),
.chat-msg.local .chat-msg-main:has(.chat-audio) {
  padding: 0.65rem 0.75rem 0.75rem;
  background: var(--bubble-agent);
  border-radius: var(--radius);
}
.chat-video {
  margin: 0.45rem 0 0;
  width: 100%;
  max-width: min(100%, 390px);
  overflow: hidden;
}
.chat-video-player {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--player);
  object-fit: contain;
}
.chat-video-player::-webkit-media-controls-overlay-enclosure {
  display: none;
}
.chat-video-save {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0.15rem 0.9rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.chat-video-save:disabled {
  opacity: 0.6;
  cursor: default;
}
.chat-video-download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.15rem;
  color: var(--ink);
  font-size: 0.85rem;
}
.chat-audio {
  margin: 0.45rem 0 0;
  width: 100%;
  max-width: min(100%, 390px);
}
.chat-audio-player {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 44px;
}
.chat-audio-download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.15rem;
  color: var(--ink);
  font-size: 0.85rem;
}
.chat-audio-pending {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.chat-video-pending {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.chat-video-plan {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}
.chat-msg.is-error .chat-video-plan,
.chat-msg.is-error .chat-video-plan-text,
.chat-msg.is-error .chat-video-plan-link {
  color: var(--muted);
  border-color: transparent;
}
.chat-video-plan-link {
  margin-left: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.plugin-meta-remove { flex: 1 1 100%; }
/* Question card (ui/static/chat-cards.js): suggested answers plus Other. */
.chat-question {
  margin: 0.45rem 0 0;
  max-width: min(100%, 420px);
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
}
.chat-question-title { margin: 0 0 0.5rem; font-weight: 650; overflow-wrap: anywhere; }
.chat-question-options { display: grid; gap: 0.35rem; }
.chat-question-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-question-option:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.chat-question-option.is-chosen { border-color: var(--ink); }
.chat-question-letter { color: var(--muted); font-weight: 650; min-width: 1.1rem; }
.chat-question-label { flex: 1; overflow-wrap: anywhere; }
.chat-question-tag { color: var(--muted); font-size: 0.75rem; }
.chat-question-other { display: flex; gap: 0.4rem; margin-top: 0.45rem; }
.chat-question-other input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.chat-question.is-answered { opacity: 0.7; }
.chat-secret {
  margin: 0.45rem 0 0;
  max-width: min(100%, 420px);
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
}
.chat-secret-note { margin: 0; color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.chat-secret .chat-question-other input { font-family: inherit; }
.chat-secret-status { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.85rem; }
.chat-secret.is-saved .chat-secret-status { color: var(--ok); }
.chat-pull {
  margin: 0.45rem 0 0;
  max-width: min(100%, 420px);
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
}
.chat-pull-head { display: flex; align-items: flex-start; gap: 0.5rem; }
.chat-pull-head .chat-question-title { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.chat-pull-state {
  flex: none;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.chat-pull-state[data-state="open"],
.chat-pull-state[data-state="merged"] { border-color: var(--ok); color: var(--ok); }
.chat-pull-state[data-state="closed"] { border-color: var(--warn); color: var(--warn); }
.chat-pull-where { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.chat-pull-checks { margin: 0.35rem 0 0.5rem; font-size: 0.85rem; overflow-wrap: anywhere; }
.chat-pull-checks[data-checks="passing"] { color: var(--ok); }
.chat-pull-checks[data-checks="failing"] { color: var(--warn); }
.chat-social {
  margin: 0.45rem 0 0;
  max-width: min(100%, 390px);
  color: var(--ink);
}
.chat-social-kicker,
.chat-social-network,
.chat-social-account,
.chat-social-text,
.chat-social-links {
  margin: 0;
  overflow-wrap: anywhere;
}
.chat-social-kicker,
.chat-social-account {
  color: var(--muted);
  font-size: 0.85rem;
}
.chat-social-card {
  margin-top: 0.35rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.chat-social-network { font-weight: 650; }
.chat-social-text {
  margin-top: 0.35rem;
  white-space: pre-wrap;
  line-height: 1.4;
}
.chat-social-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-top: 0.5rem;
  border-radius: 12px;
}
.chat-social-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.65rem;
}
.chat-social-dismiss {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.chat-social-link {
  color: var(--ink);
  margin-right: 0.75rem;
}
@media (min-width: 1024px) {
  #chatRoutinesBtn { display: none !important; }
}

/* Investor list-first: logo, two tabs, chats, sticky sheet, monochrome level. */
body.app { overflow-x: hidden; }
/* Phone layout forces the agents column on. Keep the other panes to themselves. */
body:not([data-pane="agents"]) .workspace-agents { display: none; }
body:not([data-pane="projects"]) .workspace-projects { display: none; }
body:not([data-pane="settings"]) .workspace-settings { display: none; }
body[data-pane="agents"] .workspace-agents {
  grid-template-columns: minmax(0, 1fr);
}
body[data-pane="agents"][data-agents-view="list"] .workspace-chat,
body[data-pane="agents"][data-agents-view="chats"] .workspace-chat {
  display: none;
}
body[data-pane="agents"][data-agents-view="chat"] .bot-rail { display: none; }
body[data-pane="agents"][data-agents-view="chat"] .workspace-chat {
  display: flex;
  min-height: 0;
  height: 100%;
}
body[data-pane="agents"] .bot-rail {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  min-width: 0;
  box-sizing: border-box;
}
.home-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0.85rem 0 0.2rem;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.home-mark .logo {
  width: 4.5rem;
  height: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0.35rem 0 0.85rem;
  box-sizing: border-box;
}
.home-composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  resize: none;
  min-height: 44px;
  max-height: 8rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.home-composer .btn { flex: 0 0 auto; }
.bot-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}
.bot-name-row .bot-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.level-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex: 0 0 auto;
  max-width: 5rem;
  color: var(--muted);
}
.level-bar[hidden] { display: none !important; }
.level-num {
  font-size: 0.68rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  line-height: 1;
}
/* Monochrome track; the fill takes the agent's own colour so the bar reads
   as part of that agent, not a generic progress meter. */
.level-track {
  display: block;
  width: 1.9rem;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
  overflow: hidden;
}
.level-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--agent-c, var(--ink));
  transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes skill-learned-flash {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.25; }
}
.level-bar.learned .level-fill,
.skill-xp.learned .skill-xp-fill {
  animation: skill-learned-flash 1.5s ease;
}
/* The lead (chief) agent's card: its level bar fills roughly the right
   three quarters of the row, below the badge, instead of spanning it like
   every other agent's. On the phone hero card that badge already reads
   "Chief"; the desktop rail row gets a matching quiet "Lead" pill, since it
   otherwise carries no badge at all. */
/* The avatar's own dot already says Ready/Sleeping for this row, so the
   leading status dot here would be redundant noise next to a bar that is
   trying to stay clear of the left quarter. */
.bot-card.is-lead .bot-sub::before { content: none !important; }
.bot-card.is-lead .bot-sub { justify-content: flex-end; }
.bot-card.is-lead .bot-sub .level-bar {
  flex: 0 1 75%;
  max-width: 75%;
}
.bot-card.is-lead .bot-sub .level-track { flex: 1 1 auto; max-width: none; width: auto; }
.chat-skill-line {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
dialog.skill-sheet {
  border: 0;
  padding: 0;
  margin: auto;
  width: min(22rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  max-height: min(70dvh, 32rem);
  height: fit-content;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
}
.skill-sheet[hidden] { display: none !important; }
.skill-sheet::backdrop { background: rgb(0 0 0 / 55%); }
.skill-sheet-card {
  display: flex;
  flex-direction: column;
  max-height: min(70dvh, 32rem);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.skill-sheet-grab { display: none; }
.skill-sheet-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0.85rem 0.9rem 0.45rem;
}
.skill-sheet .skill-sheet-avatar.agent-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--paper-soft);
  color: var(--ink);
}
.skill-sheet .skill-sheet-avatar.agent-avatar.has-sprite {
  border-radius: 8px;
  background: var(--paper-soft);
  box-shadow: none;
}
.skill-sheet .skill-sheet-avatar.agent-avatar.has-sprite .phoenix-sprite {
  width: 22px;
  height: 22px;
}
/* Profile sections fold shut; each opens on its own, so the purpose text
   never pushes the skills off the sheet. */
.skill-sheet-folds { min-width: 0; margin-bottom: 0.35rem; }
/* Stop/Start closes the agent's profile: last thing in the sheet and the desk aside. */
.agent-stop-row { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.agent-stop-row .is-halted { font-weight: 650; }
.sheet-fold { border-top: 1px solid var(--line); min-width: 0; }
.sheet-fold[hidden] { display: none; }
.sheet-fold > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.4rem 0;
  cursor: pointer;
  list-style: none;
}
.sheet-fold > summary::-webkit-details-marker { display: none; }
.sheet-fold > summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}
.sheet-fold[open] > summary::after { transform: rotate(45deg); }
.sheet-fold .desk-kicker { margin: 0; cursor: pointer; }
.sheet-fold-body { min-width: 0; padding: 0 0 0.65rem; }
.sheet-fold .agent-purpose { margin-top: 0; }
.sheet-fold .routines-form { margin-top: 0.25rem; }
.sheet-fold .routine-group { margin-top: 0; }
.nightowl-intro { margin: 0 0 0.4rem; }
.nightowl-next { margin: 0 0 0.5rem; }
.nightowl-empty { margin: 0.25rem 0 0.5rem; color: var(--muted); font-size: 0.85rem; }
.nightowl-form-note { margin: 0 0 0.35rem; }
.nightowl-continue { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.nightowl-continue input { width: 7rem; }
.nightowl-limit input { display: block; width: 8rem; margin-top: 0.25rem; }
.nightowl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.35rem 0 0.5rem; }
.nightowl-toggle[aria-pressed="true"] { border-color: var(--line-strong); }
.skill-sheet-titles { min-width: 0; flex: 1 1 auto; }
.skill-sheet-head h2 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--ink);
}
.skill-sheet-sub {
  margin: 0.05rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.2;
}
.skill-sheet-x {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.skill-sheet-x:focus:not(:focus-visible) { outline: none; }
.skill-level {
  margin: 0;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
}
.skill-xp {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--paper-soft);
}
.skill-xp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}
.skill-xp-track {
  height: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  min-width: 0;
  overflow: hidden;
}
.skill-xp-fill { height: 100%; max-width: 100%; background: var(--ink); }
.skill-xp-label {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
/* Level 15: the XP card becomes the Rebirth button (phoenix.js rebirthBlock). */
.skill-rebirth {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(255, 59, 48, 0.45);
  border-radius: 1rem;
  background: var(--paper-soft);
}
.skill-rebirth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--phoenix-red);
  color: var(--on-phoenix);
  font-weight: 650;
  font-size: 0.95rem;
  cursor: pointer;
  animation: skill-rebirth-glow 2.4s ease-in-out infinite;
}
.skill-rebirth-btn:hover { background: var(--phoenix-red-deep); }
.skill-rebirth-btn[hidden] { display: none; }
.desk-rebirth-btn { margin-top: 0.55rem; }
.skill-rebirth-btn:disabled { opacity: 0.6; cursor: default; animation: none; }
.skill-rebirth-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* The phoenix on a red button draws in white. */
.skill-rebirth-btn .skill-rebirth-icon { width: 24px; height: 24px; }
.skill-rebirth-btn .skill-rebirth-icon rect { fill: var(--on-phoenix); }
.skill-rebirth-note { margin: 0; color: var(--muted); font-size: 0.8rem; }
@keyframes skill-rebirth-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(142, 142, 147, 0); }
  50% { box-shadow: 0 0 0 4px rgba(142, 142, 147, 0.18), 0 0 14px 2px rgba(142, 142, 147, 0.3); }
}
.phoenix-dialog-art { display: flex; justify-content: center; }
.phoenix-dialog-art .phoenix-sprite { width: 48px; height: 48px; }
.skill-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--paper);
}
.skill-name { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.skill-row { padding: 0; }
.skill-row-btn {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.skill-row-btn:focus-visible, .skill-detail-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.skill-row-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-width: 0; }
.skill-desc {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-used { display: block; color: var(--muted); font-size: 0.72rem; }
.skill-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 500;
  vertical-align: middle;
  white-space: nowrap;
}
.skill-tag-warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--paper)); color: var(--warn); }
.desk-skill-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.skill-full { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.78rem; }
.skill-detail { display: grid; gap: 0.6rem; min-width: 0; }
.skill-detail-back {
  justify-self: start;
  min-height: 44px;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.skill-detail-name { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.skill-detail-desc, .skill-detail-meta, .skill-detail-sub { margin: 0; color: var(--muted); font-size: 0.82rem; }
.skill-detail-body {
  margin: 0;
  padding: 0.65rem 0.75rem;
  max-height: 40vh;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--paper-soft);
  font-size: 0.78rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.skill-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.78rem; color: var(--muted); }
.skill-row-level {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-soft);
  white-space: nowrap;
}
.skill-empty {
  margin: 0.75rem 0 0;
  padding: 1.05rem 0.85rem;
  border: 1px dashed var(--line-strong);
  border-radius: 1rem;
  background: var(--paper-soft);
  color: var(--ink);
  font-size: 0.9rem;
  text-align: center;
}
.skill-sheet :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.skill-sheet .account-sheet-scroll {
  overflow: auto;
  min-height: 0;
  padding: 0.15rem 0.9rem 1rem;
}
/* dialog:modal beats a class, so the phone sheet has to name the element. */
@media (max-width: 1023px) {
  dialog.skill-sheet {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    height: fit-content;
    max-height: 85vh;
    max-height: 85dvh;
    margin: 0;
  }
  .skill-sheet-card {
    max-height: 85vh;
    max-height: 85dvh;
    border-radius: 1.5rem 1.5rem 0 0;
    border-bottom: 0;
    padding-bottom: var(--safe-bottom);
  }
  .skill-sheet-grab {
    display: block;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 0.28rem;
    margin: 0.55rem auto 0.1rem;
    border-radius: 999px;
    background: var(--track);
  }
  .skill-sheet-head { padding-top: 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .level-bar.learned .level-fill,
  .skill-xp.learned .skill-xp-fill { animation: none; }
}
.chat-agent-pick { flex-wrap: nowrap; }
#chatHeading {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar-hit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.agent-avatar.has-sprite {
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  box-shadow: none;
}
.agent-avatar.has-sprite .phoenix-slot {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}
.agent-avatar.has-sprite .phoenix-sprite {
  width: 100%;
  height: 100%;
}
#mobileAvatarBtn[hidden] { display: none !important; }
#mobileLevelBar { flex: 0 0 auto; }
#mobileTitleText { flex: 1 1 auto; }
body[data-pane="agents"][data-agents-view="chats"] .home-mark,
body[data-pane="agents"][data-agents-view="chats"] .home-composer,
body[data-pane="agents"][data-agents-view="chats"] .rail-head,
body[data-pane="agents"][data-agents-view="chats"] .rail-intro,
body[data-pane="agents"][data-agents-view="chats"] #botRoster,
body[data-pane="agents"][data-agents-view="chats"] .bot-rail > [data-open-tab="agents"] {
  display: none;
}
.agent-chats {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  width: 100%;
}
.agent-chats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.agent-chats-head h2 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.35rem;
}
.agent-chats-list { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.agent-chat-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}
.agent-chat-open {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0.45rem 0.15rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.agent-chat-title,
.agent-chat-preview {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-chat-preview { color: var(--muted); font-size: 0.82rem; }
.projects-empty { padding: 1.25rem 0.15rem; }
.projects-empty .state-title { margin: 0 0 0.25rem; }
.projects-empty .state-copy { margin: 0; color: var(--muted); }
.account-sheet-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 12px;
  background: var(--paper);
}
.account-sheet-head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 44px;
}
.account-sheet-head-bar h2 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
}
.account-sheet-tabs {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-soft);
}
.sheet-tab {
  appearance: none;
  flex: 1 1 0;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.sheet-tab.is-active,
.sheet-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}
.sheet-panel-title {
  margin: 0.15rem 0 0.2rem;
  font-size: 1.15rem;
}
.profile-plan .plan-name { margin: 0.15rem 0 0; font-size: 1.2rem; }
.profile-plan .plan-price { margin-top: 0.2rem; }
.profile-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.profile-plan-actions .btn { min-height: 44px; }
.sheet-panel[hidden] { display: none !important; }
.account-sheet-head .sheet-x {
  margin: 0;
  flex: 0 0 44px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.account-sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
}
.confirm-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  width: min(22rem, calc(100% - 2rem));
}
.confirm-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.confirm-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
}
.confirm-actions { display: flex; justify-content: flex-end; gap: 0.45rem; margin-top: 0.85rem; }
.confirm-card textarea { width: 100%; resize: vertical; margin-top: 0.6rem; box-sizing: border-box; }
.confirm-card .state-copy.is-error { color: var(--fail); margin-top: 0.5rem; }
.attach-chip.is-document {
  width: auto;
  height: auto;
  min-height: 32px;
  max-width: 100%;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 1.75rem 0.25rem 0.45rem;
}
.attach-chip.is-document .attach-remove {
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
}
.attach-file {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 12rem;
}
.attach-file {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 12rem;
}
.attach-name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 0.78rem;
}
.attach-kind {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
.chat-doc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  max-width: 100%;
  margin-top: 0.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-input);
}
.chat-doc-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-doc-card a {
  flex: 0 0 auto;
  color: var(--ink);
}
.chat-msg.you .chat-doc-card {
  display: flex;
  width: 100%;
  min-width: min(100%, 12rem);
  background: var(--paper);
  color: var(--ink);
}
.chat-msg.you .chat-doc-name,
.chat-msg.you .chat-doc-card a { color: var(--ink); }
@media (max-width: 1023px) {
  .chat-msg.you .chat-msg-main:has(.chat-doc-card) {
    width: min(100%, 20rem);
    max-width: 100%;
    overflow: visible;
  }
}
/* File cards: one look for a file an agent sends and one the person sends. */
.chat-file-cards {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  max-width: 28rem;
  margin-top: 0.45rem;
}
.chat-file-card.chat-doc-card {
  margin-top: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.chat-file-open {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.chat-file-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  background: var(--line);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.chat-file-icon.is-pdf { background: rgba(142, 142, 147, 0.16); color: var(--muted); }
.chat-file-icon.is-doc { background: rgba(142, 142, 147, 0.16); color: var(--muted); }
.chat-file-icon.is-sheet { background: rgba(142, 142, 147, 0.16); color: var(--muted); }
.chat-file-icon.is-slides { background: rgba(142, 142, 147, 0.16); color: var(--muted); }
.chat-file-icon.is-zip { background: rgba(142, 142, 147, 0.16); color: var(--muted); }
.chat-file-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-file-card .chat-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.chat-file-meta {
  color: var(--muted);
  font-size: 0.72rem;
}
.chat-file-card.is-uploading { opacity: 0.8; }
.chat-file-card.is-uploading .chat-file-meta { font-style: italic; }
.chat-file-card.is-failed { border-color: var(--danger, #c0392b); }
.chat-file-card.is-failed .chat-file-meta { color: var(--danger, #c0392b); font-style: normal; }
.chat-file-card a.chat-file-download,
.chat-file-retry {
  flex: 0 0 auto;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 0.8rem;
  text-decoration: none;
}
.chat-file-retry {
  background: transparent;
  color: var(--danger, #c0392b);
  border-color: var(--danger, #c0392b);
  cursor: pointer;
}
@media (max-width: 480px) {
  .chat-file-cards { max-width: 100%; }
  .chat-file-card a.chat-file-download { flex: 1 1 100%; text-align: center; }
}
body:not([data-tts="1"]) .speak-replies-control,
body:not([data-tts="1"]) .chat-speak { display: none !important; }
.chat-speak { margin-left: auto; }
@media (max-width: 1023px) {
  body[data-pane="agents"][data-agents-view="chats"] .mobile-bar .mobile-back,
  body[data-pane="agents"][data-agents-view="chats"] .mobile-bar .mobile-title {
    display: inline-flex;
  }
  body[data-pane="agents"][data-agents-view="chats"] #homeAddBtn { display: none; }
}

/* Status chips stay off the desktop roster. The phone shell shows them. */
.bot-state,
.bot-tier,
.mobile-brand,
.mobile-tier { display: none; }
.mobile-tier[hidden],
.bot-state[hidden] { display: none !important; }

/* Stitch mobile shell. Desktop at 1024px and up does not use this block. */
@media (max-width: 1023px) {
  html, body.app { overflow-x: hidden; max-width: 100%; }
  .top, .chat-head, .chat-status { display: none !important; }
  body.app .foot { display: none !important; }
  .mobile-bar {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: 40;
    margin: 0;
    padding: calc(0.35rem + var(--safe-top)) 0.65rem 0.35rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mobile-tools { display: flex; }
  .mobile-account { display: inline-flex; }
  .mobile-brand {
    display: none;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    margin-right: auto;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .mobile-brand .logo { width: 1.75rem; height: auto; flex: 0 0 auto; }
  .mobile-brand-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-pane="agents"][data-agents-view="list"] .mobile-brand { display: flex; }
  body[data-pane="agents"][data-agents-view="chat"] .mobile-bar,
  body[data-pane="agents"][data-agents-view="chats"] .mobile-bar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mobile-bar .mobile-back,
  .mobile-bar .mobile-title,
  .mobile-bar .mobile-menu-btn { display: none; }
  body[data-pane="agents"][data-agents-view="chat"] .mobile-bar .mobile-back,
  body[data-pane="agents"][data-agents-view="chat"] .mobile-bar .mobile-title,
  body[data-pane="agents"][data-agents-view="chat"] .mobile-bar .mobile-menu-btn,
  body[data-pane="agents"][data-agents-view="chats"] .mobile-bar .mobile-back,
  body[data-pane="agents"][data-agents-view="chats"] .mobile-bar .mobile-title,
  body:not([data-pane="agents"]) .mobile-title {
    display: flex;
  }
  body[data-pane="agents"][data-agents-view="chat"] .mobile-account,
  body[data-pane="agents"][data-agents-view="chat"] .mobile-brand,
  body[data-pane="agents"][data-agents-view="chat"] #homeAddBtn,
  body[data-pane="agents"][data-agents-view="chats"] .mobile-brand,
  body[data-pane="agents"][data-agents-view="chats"] #homeAddBtn,
  body:not([data-pane="agents"]) .mobile-brand {
    display: none !important;
  }
  .mobile-back, .mobile-menu-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    color: var(--ink);
  }
  .btn.ghost.mobile-back {
    padding: 0;
    background: transparent;
    border-color: transparent;
    color: var(--ink);
  }
  .mobile-back svg {
    display: block;
    width: 22px;
    height: 22px;
    stroke: currentColor;
  }
  .mobile-title {
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
  }
  .mobile-tier {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 5.5rem;
    padding: 0.12rem 0.4rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper-soft);
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #mobileTitleText {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-pane="agents"][data-agents-view="list"] .home-mark,
  body[data-pane="agents"][data-agents-view="list"] .home-composer,
  .rail-intro,
  .workspace-kicker,
  .rail-add,
  .bot-rail > [data-open-tab="agents"] { display: none !important; }
  body[data-pane="agents"][data-agents-view="list"] .rail-head {
    display: flex !important;
    padding: 0.85rem 0 0.35rem;
  }
  .rail-title { font-size: 1.5rem; letter-spacing: -0.03em; }
  body[data-pane="agents"] .bot-rail {
    width: 100%;
    max-width: 100%;
    padding: 0.35rem 1rem 0;
  }
  .bot-roster { gap: 0.85rem; padding-bottom: 0.5rem; }
  .bot-card {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .bot-card.is-selected {
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  @media (hover: hover) {
    .bot-card:hover {
      background: var(--paper);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
  }
  .bot-name-row { flex-wrap: wrap; row-gap: 0.2rem; }
  .bot-name { font-size: 1.05rem; font-weight: 650; max-width: 100%; }
  .bot-state {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 0.08rem 0.45rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper-soft);
    color: var(--ink);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
    white-space: nowrap;
  }
  .bot-state::before {
    content: "";
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: var(--ink);
    flex: 0 0 auto;
  }
  .bot-card.is-setup .bot-state::before,
  .bot-card.is-off .bot-state::before,
  .bot-card.is-calm .bot-state::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink);
  }
  .bot-tier {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.01em;
  }
  .bot-status {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    font-size: 0.82rem;
    line-height: 1.35;
  }
  .bot-card-copy { flex: 1 1 8rem; min-width: 0; gap: 0.2rem; }
  .bot-card-meta { margin-left: auto; }
  .bot-card:has(> .btn) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "avatar copy meta";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0;
  }
  .bot-card:has(> .btn) > .bot-avatar-edit,
  .bot-card:has(> .btn) > .agent-avatar { grid-area: avatar; align-self: start; }
  .bot-card:has(> .btn) > .bot-card-copy { grid-area: copy; }
  .bot-card:has(> .btn) > .bot-card-meta { grid-area: meta; align-self: start; }
  .bot-card:has(> .bot-card-meta:not(:empty)) {
    grid-template-areas:
      "avatar copy meta"
      "avatar copy remove";
  }
  .bot-card > .btn {
    grid-area: meta;
    justify-self: end;
    align-self: end;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0.15rem 0.1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.2;
  }
  .bot-card:has(> .bot-card-meta:not(:empty)) > .btn {
    grid-area: remove;
    align-self: start;
  }
  .bot-card .provision-progress.is-card {
    width: 100%;
    max-width: 100%;
    margin: 0.15rem 0 0;
    padding: 0;
    border: 0;
  }
  body[data-pane="agents"][data-agents-view="list"],
  body[data-pane="agents"][data-agents-view="chats"] {
    background: var(--rail-bg);
  }
  body[data-pane="agents"][data-agents-view="list"] .bot-rail,
  body[data-pane="agents"][data-agents-view="chats"] .bot-rail {
    flex: 1 1 auto;
    align-self: stretch;
    background: var(--rail-bg);
  }
  body[data-pane="agents"][data-agents-view="list"] .bot-rail,
  body[data-pane="agents"][data-agents-view="chats"] .bot-rail,
  body[data-pane="projects"] .workspace-projects,
  body[data-pane="settings"] .workspace-settings {
    padding-bottom: calc(6.25rem + var(--safe-bottom));
  }
  body[data-pane="agents"][data-agents-view="list"] #homeAddBtn {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(5.15rem + var(--safe-bottom));
    z-index: 60;
    width: 56px;
    min-width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--shadow-lg);
  }
  .pane-switch {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
    gap: 0.25rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 64px;
    padding: 0.3rem 0.5rem calc(0.3rem + var(--safe-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid var(--line-strong) !important;
    border-radius: 0;
    background: color-mix(in srgb, var(--paper) 92%, transparent) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .pane-btn {
    flex: 1 1 0;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    padding: 0.2rem 0.15rem !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-size: 11px;
    font-weight: 650;
  }
  .pane-btn svg { display: block !important; width: 22px; height: 22px; flex: 0 0 auto; }
  .pane-btn span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pane-btn.is-active {
    color: var(--ink) !important;
    background: transparent !important;
  }
  body[data-pane="agents"][data-agents-view="chat"] .pane-switch { display: none !important; }
  body[data-pane="agents"][data-agents-view="chat"] {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  body[data-pane="agents"][data-agents-view="chat"] .pm-main,
  body[data-pane="agents"][data-agents-view="chat"] .workspace-agents,
  body[data-pane="agents"][data-agents-view="chat"] .workspace-chat {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
  }
  body[data-pane="agents"][data-agents-view="chat"] .chat-log {
    padding: 1rem 1rem 0.5rem !important;
  }
  .chat-log, .chat-msg, .chat-msg-main, .chat-msg-body, .chat-working, .chat-trace {
    max-width: 100%;
    min-width: 0;
  }
  .chat-msg.you {
    align-self: flex-end;
    max-width: min(78%, 100%);
  }
  .chat-msg.you .chat-msg-main {
    background: var(--ink);
    color: var(--paper);
    border-radius: 18px 18px 4px 18px;
  }
  .chat-msg.you .chat-msg-who,
  .chat-msg.you .chat-msg-body { color: var(--paper); }
  /* The person's own message sits on the right edge from its first frame. The
     centring margin that other rows use would park it mid-screen, and a
     pending row has the same look as a settled one (no grey box). */
  .chat-log > .chat-msg.you { margin-inline: auto 0; width: auto; }
  .chat-msg.you.pending { opacity: 1; }
  .chat-msg.you.pending .chat-msg-main { background: var(--ink); color: var(--paper); }
  /* The working row is plain, like the reply that replaces it: no grey bubble to jump out of. */
  .chat-msg.system.pending.thinking .chat-msg-main { background: transparent; padding: 0; border-radius: 0; }
  .chat-msg.local .chat-msg-main,
  .chat-msg.cloud .chat-msg-main,
  .chat-msg.bot .chat-msg-main {
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 4px 18px 18px 18px;
  }
  .chat-working {
    min-height: 0;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    padding: 0.75rem;
    background: var(--paper);
  }
  .chat-skill-line { color: var(--muted); }
  body[data-pane="agents"][data-agents-view="chat"] .chat-form {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.45rem 0.75rem calc(0.55rem + var(--safe-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  body[data-pane="agents"][data-agents-view="chat"] .chat-form > * {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer {
    order: 1;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    border-radius: 24px;
    border-color: var(--line-strong);
    background: var(--paper);
  }
  body[data-pane="agents"][data-agents-view="chat"] .composer-disclaimer {
    order: 2;
    margin: 0.15rem 0 0;
    text-align: center;
  }
  body[data-pane="agents"][data-agents-view="chat"] .chat-form textarea {
    min-width: 0;
    width: auto;
    flex: 1 1 auto;
  }
  body[data-pane="agents"][data-agents-view="chat"] #chatSend {
    min-width: 44px;
    padding-inline: 0.7rem;
  }
  .chat-overflow-panel.is-open,
  .agent-picker.is-open {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(1rem + var(--safe-bottom));
  }
  .agent-picker.is-open {
    inset: auto 0 0;
    max-height: 80dvh;
  }
  .chat-overflow-panel.is-open {
    left: 0;
    right: 0;
  }
  .chat-overflow-panel.is-open::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 4px;
    margin: 0 auto 0.35rem;
    border-radius: 999px;
    background: var(--line-strong);
  }
  .chat-overflow-panel.is-open button,
  .chat-overflow-panel.is-open a,
  .chat-overflow-panel.is-open select,
  .agent-pick,
  .skill-row {
    min-height: 44px;
  }
  .home-add-menu { max-width: calc(100vw - 1rem); }
  .agent-chat-row, .agent-chat-open, .agent-chat-title, .agent-chat-preview {
    max-width: 100%;
    min-width: 0;
  }
}
/* Sheet motion. Transform and backdrop opacity only. */
@media (max-width: 1023px) {
  dialog.skill-sheet,
  dialog.chat-overflow-panel,
  dialog.agent-picker {
    transform: translateY(100%);
    will-change: transform;
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), overlay 220ms allow-discrete, display 220ms allow-discrete;
    transition-behavior: allow-discrete;
  }
  dialog.skill-sheet[open],
  dialog.chat-overflow-panel.is-open,
  dialog.agent-picker.is-open {
    transform: translateY(0);
    transition-duration: 300ms;
  }
  dialog.skill-sheet::backdrop,
  dialog.chat-overflow-panel::backdrop,
  dialog.agent-picker::backdrop {
    opacity: 0;
    transition: opacity 220ms linear, overlay 220ms allow-discrete, display 220ms allow-discrete;
    transition-behavior: allow-discrete;
  }
  dialog.skill-sheet[open]::backdrop,
  dialog.chat-overflow-panel.is-open::backdrop,
  dialog.agent-picker.is-open::backdrop {
    opacity: 1;
    transition-duration: 300ms;
  }
  .skill-sheet-grab,
  .skill-sheet-head,
  .chat-overflow-panel .sheet-head,
  .agent-picker .sheet-head {
    touch-action: none;
  }
  @starting-style {
    dialog.skill-sheet[open],
    dialog.chat-overflow-panel[open],
    dialog.agent-picker[open] {
      transform: translateY(100%);
    }
    dialog.skill-sheet[open]::backdrop,
    dialog.chat-overflow-panel[open]::backdrop,
    dialog.agent-picker[open]::backdrop {
      opacity: 0;
    }
  }
}
@media (min-width: 1024px) {
  dialog.skill-sheet {
    opacity: 0;
    transform: scale(0.98);
    will-change: transform;
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), opacity 220ms linear, overlay 220ms allow-discrete, display 220ms allow-discrete;
    transition-behavior: allow-discrete;
  }
  dialog.skill-sheet[open] {
    opacity: 1;
    transform: scale(1);
    transition-duration: 300ms;
  }
  dialog.skill-sheet::backdrop {
    opacity: 0;
    transition: opacity 220ms linear, overlay 220ms allow-discrete, display 220ms allow-discrete;
    transition-behavior: allow-discrete;
  }
  dialog.skill-sheet[open]::backdrop {
    opacity: 1;
    transition-duration: 300ms;
  }
  @starting-style {
    dialog.skill-sheet[open] {
      opacity: 0;
      transform: scale(0.98);
    }
    dialog.skill-sheet[open]::backdrop {
      opacity: 0;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .level-bar.learned .level-fill,
  .skill-xp.learned .skill-xp-fill { animation: none; }
  dialog.skill-sheet,
  dialog.skill-sheet[open],
  dialog.chat-overflow-panel,
  dialog.chat-overflow-panel.is-open,
  dialog.agent-picker,
  dialog.agent-picker.is-open {
    transform: none;
    transition: opacity 200ms linear, overlay 200ms allow-discrete, display 200ms allow-discrete;
  }
  dialog.skill-sheet,
  dialog.chat-overflow-panel,
  dialog.agent-picker {
    opacity: 0;
  }
  dialog.skill-sheet[open],
  dialog.chat-overflow-panel.is-open,
  dialog.agent-picker.is-open {
    opacity: 1;
  }
  dialog.skill-sheet::backdrop,
  dialog.chat-overflow-panel::backdrop,
  dialog.agent-picker::backdrop {
    transition: opacity 200ms linear, overlay 200ms allow-discrete, display 200ms allow-discrete;
  }
  @starting-style {
    dialog.skill-sheet[open],
    dialog.chat-overflow-panel[open],
    dialog.agent-picker[open] {
      transform: none;
      opacity: 0;
    }
    dialog.skill-sheet[open]::backdrop,
    dialog.chat-overflow-panel[open]::backdrop,
    dialog.agent-picker[open]::backdrop {
      opacity: 0;
    }
  }
}
/* Sheet motion end. */

/* Desktop rail order follows the Stitch workspace: new chat, search, agents,
   projects, then Integrations and Manage agents as quiet links above the account. */
@media (min-width: 1024px) {
  .bot-rail > .desk-brand,
  .bot-rail > .desk-new-chat { order: -2; }
  .bot-rail > .desk-integrations,
  .bot-rail > [data-open-tab="agents"] {
    order: 1;
    align-self: stretch;
    justify-content: flex-start;
    min-height: 36px;
    margin: 0;
    padding: 0 0.45rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
  }
  .bot-rail > .desk-integrations { margin-top: 0.75rem; padding-top: 0.5rem; }
  .bot-rail > .desk-integrations:hover,
  .bot-rail > [data-open-tab="agents"]:hover {
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    color: var(--ink);
  }
  .bot-rail > .rail-foot { order: 2; }
  .bot-rail > .desk-user { order: 3; margin-top: 0.35rem; }
  .chat-actions .check-inline #chatProject { min-height: 36px; padding: 0 0.5rem; font-size: 0.85rem; }
  .host-strip .local-worker-status { white-space: nowrap; }
}

/* The details column only earns its 300px when there is something in it. */
@media (min-width: 1280px) {
  body[data-pane="agents"] .pm-main:has(#deskLevelCard[hidden]):has(#deskPurpose[hidden]):has(.desk-skills-empty) {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  body[data-pane="agents"] .pm-main:has(#deskLevelCard[hidden]):has(#deskPurpose[hidden]):has(.desk-skills-empty) .desk-details {
    display: none !important;
  }
}

/* Phone home: account avatar sits at the right edge after search, not mid-bar. */
@media (max-width: 1023px) {
  body[data-pane="agents"][data-agents-view="list"] .mobile-bar .mobile-tools { order: 1; margin-left: auto; }
  body[data-pane="agents"][data-agents-view="list"] .mobile-bar .mobile-account { order: 2; margin-left: 0.25rem; }
}

/* Jetson host stats (CPU, GPU, RAM, temp, local model) are not shown in the web shell. */
.rail-foot-title,
.host-strip,
.chat-overflow-panel .host-strip { display: none !important; }

/* Desktop chat head and composer follow the Stitch workspace: a flat header
   bar, a round arrow send button, and the disclaimer centred under the box. */
@media (min-width: 1024px) {
  .chat-head {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .composer-disclaimer { margin: 0.45rem auto 0; }
  .chat-form #chatSend {
    position: relative;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
    line-height: 0;
  }
  .chat-form #chatSend::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.1rem;
    height: 1.1rem;
    background: currentColor;
    -webkit-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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .chat-form #chatSend:disabled::before { opacity: 0.5; }
}

/* One chat per agent. The old Chats group is not part of the desktop sidebar. */
@media (min-width: 1024px) {
  .bot-rail .agent-chats { display: none !important; }
}

@media (min-width: 1024px) {
  /* The purpose Edit link lines up with the text above it. */
  .desk-purpose .agent-purpose-view > .btn {
    min-height: 32px;
    padding-left: 0;
    padding-right: 0.35rem;
  }
}

/* Phone: the state chip already names the state, so the card line keeps only the reason. */
@media (max-width: 1023px) {
  .bot-card .bot-status-state { display: none; }
  .bot-card .bot-status.is-state-only { display: none !important; }
  /* An agent's chats list: back arrow first, no account avatar, as in the open chat. */
  body[data-pane="agents"][data-agents-view="chats"] .mobile-account { display: none !important; }
}

/* Phone: an agent's chats are cards, like the agent cards one step back. */
@media (max-width: 1023px) {
  body[data-agents-view="chats"] .agent-chats-head h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
  body[data-agents-view="chats"] .agent-chats-list { gap: 0.6rem; }
  body[data-agents-view="chats"] .agent-chat-row {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: var(--shadow);
  }
  body[data-agents-view="chats"] .agent-chat-open { min-height: 52px; padding: 0.5rem 0; justify-content: center; }
  body[data-agents-view="chats"] .agent-chat-title { font-size: 1rem; font-weight: 600; }
}

/* The wake note lives in the chat header on desktop; the composer copy was a duplicate. */
@media (min-width: 1024px) {
  .composer-status-slot { display: none !important; }
}
/* Phone: the composer note is a quiet status line, not body text. */
@media (max-width: 1023px) {
  .composer-status-slot:not(:empty) {
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
  }
}

/* Markdown tables in chat replies scroll sideways inside their own box. */
.chat-table-wrap {
  max-width: 100%;
  margin: 0.35rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.chat-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.chat-table th,
.chat-table td {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-strong);
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}
.chat-table th {
  font-weight: 650;
  background: var(--paper-soft);
}

/* ── polish: busy sprites ──────────────────────────────────────────────
   Kept above the motion and layout passes: later blocks must not add
   reduced-motion queries (other rules read the last one). The selectors
   are unique to busy agents, so their place in the file does not matter. */
/* Agents at work. Sprites keep to whole-pixel moves on the 16×16 grid, a
   2–4 frame loop of about a second. Everything is keyed on .is-busy, which
   the page sets from the server's real activity for this account. */
@keyframes sprite-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes agent-busy-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: no-preference) {
  .agent-avatar.is-busy .phoenix-sprite[data-motion="live"] { will-change: transform; }
  .agent-avatar.is-busy .phoenix-sprite.is-egg[data-motion="live"] { animation: phoenix-shake 1.2s ease-in-out infinite; }
  .agent-avatar.is-busy .phoenix-sprite.is-chick[data-motion="live"] { animation: sprite-bob 1s steps(1, end) infinite; }
  .agent-avatar.is-busy .phoenix-sprite.is-hawk[data-motion="live"] { animation: sprite-bob 1s steps(1, end) infinite; }
  .agent-avatar.is-busy .phoenix-sprite.is-phoenix[data-motion="live"] { animation: sprite-bob 1s steps(1, end) infinite; }
  /* The same whole frames as a reply in flight: crack, peck, wing beat, fire. */
  .agent-avatar.is-busy .phoenix-sprite[data-motion="live"] .phoenix-frame {
    animation-duration: var(--phoenix-cycle, 1.2s);
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
  }
  .agent-avatar.is-busy .phoenix-sprite.is-hawk[data-motion="live"] { --phoenix-cycle: 1s; }
  .agent-avatar.is-busy .phoenix-sprite.is-chick[data-motion="live"] { --phoenix-cycle: 1s; }
}
/* The global reduced-motion reset stops every animation; a slow fade of one
   dot is the one thing kept, so a busy agent still reads as busy. */
@media not all and (prefers-reduced-motion: no-preference) {
  .agent-avatar.is-busy::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--paper);
    animation: agent-busy-pulse 2s ease-in-out infinite !important;
  }
  .bot-avatar-edit.is-busy::after { display: none; }
  .bot-card.is-busy .bot-dot { animation: agent-busy-pulse 2s ease-in-out infinite !important; }
}
/* ── end polish: busy sprites ── */

/* —— Motion & depth pass: sliding pills, springy switches, range sliders, calmer depth —— */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --glow: color-mix(in srgb, var(--ink) 9%, transparent);
}

/* Sliding indicator (created by the motion block at the end of app.js). */
.has-pill { position: relative; }
.motion-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--paper);
  box-shadow: var(--shadow), 0 0 0 1px var(--line);
  pointer-events: none;
  opacity: 0;
  transition: transform 260ms var(--ease-out), width 260ms var(--ease-out), height 260ms var(--ease-out), opacity 120ms ease;
}
.motion-pill.is-ready { opacity: 1; }
.motion-pill.no-anim { transition: none; }
.has-pill > .app-nav-link,
.has-pill > .view-tab { position: relative; z-index: 1; }
.has-pill > .app-nav-link.is-active,
.has-pill > .view-tab.is-active { background: transparent; box-shadow: none; }
.has-pill > .view-tab.is-active { color: var(--ink); border-color: transparent; }
.view-tabs.has-pill { padding: 0.2rem; background: var(--paper-soft); border: 1px solid var(--line); border-radius: 999px; gap: 0.1rem; }
.view-tabs.has-pill > .view-tab { border-color: transparent; background: transparent; border-radius: 999px; transition: color 160ms ease; }

/* Switches: springy thumb, soft press squish. */
.switch-track { transition: background 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.switch-track::after { transition: transform 320ms var(--ease-spring), width 160ms var(--ease-out); }
.local-only-switch:active .switch-track::after { width: 1.1rem; }
.local-only-switch:active input:checked + .switch-track::after { transform: translateX(0.74rem); }

/* Range sliders: filled track, thumb grows on hover/drag. --fill is set by the motion block. */
input[type="range"] {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.25rem;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--ink) var(--fill), var(--line-strong) var(--fill));
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line-strong); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  border: 0;
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--ink), var(--shadow);
  transition: transform 180ms var(--ease-spring), box-shadow 180ms ease;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--ink), var(--shadow);
  transition: transform 180ms var(--ease-spring), box-shadow 180ms ease;
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.2); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.35); box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 7px var(--glow); }
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb { transform: scale(1.2); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.35); box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 7px var(--glow); }
input[type="range"]:focus-visible { outline: none; }

/* Composer: floats on a soft shadow. Focus ring stays keyboard-only (see is-keyboard rules). */
.chat-composer {
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: border-color 200ms ease, box-shadow 240ms var(--ease-out);
}

/* Depth: a faint spotlight behind the empty chat so it isn't a flat void. */
.chat-empty { position: relative; animation: motion-rise 420ms var(--ease-out) both; }
.chat-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--glow);
  filter: blur(48px);
  pointer-events: none;
}
.chat-suggestions .chip-btn,
.bot-card {
  transition: transform 180ms var(--ease-out), background 160ms ease, border-color 160ms ease, box-shadow 200ms var(--ease-out);
}
@media (hover: hover) { .chat-suggestions .chip-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); } }
.chat-suggestions .chip-btn:active { transform: translateY(0) scale(0.98); }
@media (hover: hover) { .bot-card:hover { box-shadow: var(--shadow); } }
.btn { transition: transform 120ms var(--ease-out), background 160ms ease, border-color 160ms ease; }
.btn:active:not(:disabled) { transform: scale(0.98); }

/* Live status dot breathes. */
.live-chip .pulse { animation: motion-breathe 2.4s ease-in-out infinite; }

@keyframes motion-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* A message the person just sent settles into its own place: a short 8px rise (no fade, so it never looks greyed out); nothing else moves. */
.chat-msg.you.is-sent { animation: sent-settle 160ms var(--ease-out) both; }
@keyframes sent-settle { from { transform: translateY(8px); } to { transform: none; } }
@keyframes motion-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* —— Layout pass: soft canvas + floating chat card, compact messages, tidy composer —— */
:root {
  --canvas: var(--paper-soft);
  --card: var(--paper);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: var(--paper);
    --card: var(--paper-soft);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --canvas: var(--paper);
  --card: var(--paper-soft);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.35);
}

@media (min-width: 1024px) {
  body[data-pane="agents"] .pm-main { background: var(--canvas); column-gap: 0.5rem; padding: 0.6rem 0.6rem 0.6rem 0; }
  body[data-pane="agents"] .bot-rail { background: transparent; border-right: 0; padding-inline: 0.9rem 0.35rem; }
  body[data-pane="agents"] .chat-form { background: transparent; }
  body[data-pane="agents"] .workspace-chat {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
  }
  .desk-new-chat { min-height: 36px; border-radius: 10px; font-size: 0.84rem; transition: background 160ms ease, transform 120ms var(--ease-out); }
  .desk-new-chat:active { transform: scale(0.98); }
  .desk-user { background: transparent; border-top-color: var(--line); }
}

/* Messages: drop the redundant "You" label, tuck the copy button until hover, agent replies as plain text. */
.chat-msg.you .chat-msg-head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.chat-msg.you .chat-msg-main { padding: 0.5rem 0.85rem; border-radius: 18px 18px 6px 18px; }
/* A teammate's message in this agent's chat is labelled with the teammate's name. */
.chat-msg.you.from-agent .chat-msg-head { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.chat-msg.local .chat-msg-main,
.chat-msg.cloud .chat-msg-main,
.chat-msg.bot .chat-msg-main { background: transparent; border-color: transparent; padding: 0.25rem 0.15rem; border-radius: 0; }
.chat-msg-copy-row { min-height: 0; margin-top: 0; }
/* Your own bubble: copy button sits beside it so the bubble stays compact. */
.chat-msg.you .chat-msg-main { position: relative; width: fit-content; max-width: min(100%, 32rem); margin-left: auto; }
.chat-msg.you .chat-msg-copy-row { position: absolute; right: 100%; bottom: 0.1rem; margin: 0 0.2rem 0 0; }
.chat-msg-copy { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 8px; }
.chat-msg-copy svg { width: 18px; height: 18px; }
@media (hover: none), (pointer: coarse) {
  .chat-msg-copy { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .chat-composer .icon-btn,
  .chat-composer #chatAttach,
  .chat-composer #chatMic,
  .chat-composer #chatVoice { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .chat-composer #chatSend { min-width: 44px; min-height: 44px; }
}
@media (hover: hover) {
  .chat-msg-copy-row { opacity: 0; transition: opacity 160ms ease; }
  .chat-msg:hover .chat-msg-copy-row,
  .chat-msg-copy-row:focus-within { opacity: 1; }
}

/* Composer: a floating card with the options tucked into small chips underneath. */
.chat-composer {
  background: var(--card);
  border-color: var(--line);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  padding: 0.4rem 0.5rem 0.4rem 0.6rem;
}
.chat-composer .icon-btn,
.chat-composer #chatAttach,
.chat-composer #chatMic,
.chat-composer #chatVoice { width: 36px; min-width: 36px; height: 36px; min-height: 36px; border-radius: 999px; }
.chat-composer #chatSend { min-height: 36px; border-radius: 999px; padding-inline: 1rem; }
.chat-actions { gap: 0.4rem; padding-top: 0.4rem; }
.chat-actions .check-inline {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
}
.chat-actions .check-inline #chatProject { border: 0; background: transparent; }

/* —— Admin overview (admin-panel.js renderOverview) —— */
.ov { display: grid; gap: 0.9rem; }
.ov-muted { color: var(--muted); font-weight: 400; }
.ov-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.ov-strip-end { margin-left: auto; color: var(--muted); }
.ov-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.ov-dot { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; border-radius: 50%; background: var(--track); }
.ov-chip .ov-dot { margin-right: 0; }
.ov-dot.is-ok { background: var(--ok); }
.ov-dot.is-warn { background: var(--warn); }
.ov-dot.is-bad { background: var(--fail); }
.ov-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
.ov-kpi { position: relative; display: grid; gap: 0.15rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); }
.ov-kpi-title { font-size: 0.75rem; color: var(--muted); }
.ov-kpi-value { font-size: 1.7rem; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ov-kpi-sub { font-size: 0.74rem; color: var(--muted); }
.ov-kpi:has(.ov-spark) .ov-kpi-sub { padding-right: 5.6rem; }
.ov-spark { position: absolute; bottom: 0.8rem; right: 0.9rem; width: 5rem; height: 1.75rem; color: var(--ink); opacity: 0.75; }
.ov-delta { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ov-delta.is-up { color: var(--ok); }
.ov-delta.is-down { color: var(--fail); }
.ov-range { display: inline-flex; gap: 0.15rem; padding: 0.2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-soft); width: fit-content; }
.ov-seg { min-height: 0; padding: 0.25rem 0.8rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 0.78rem var(--font-ui); cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.ov-seg.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.ov-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.6rem; }
.ov-card { display: grid; gap: 0.6rem; align-content: start; min-width: 0; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); }
.ov-wide { grid-column: span 2; }
.ov-card header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem; font-size: 0.78rem; }
.ov-flag { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.ov-flag-group { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); }
.ov-flag-text input[type=text] { min-width: 14rem; padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.ov-flag-text .ov-company-save { border: 1px solid var(--line); }
.ov-card h3 { margin: 0; font-size: 0.92rem; }
.ov-card footer { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.72rem; color: var(--muted); }
.ov-margin { font-weight: 650; font-size: 0.9rem; }
.ov-totals { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.ov-totals div { display: grid; }
.ov-totals span { font-size: 0.72rem; color: var(--muted); }
.ov-totals b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ov-chart { width: 100%; height: auto; overflow: visible; }
.ov-chart .ov-grid { stroke: var(--line-strong); stroke-width: 1; }
.ov-chart .ov-bar { fill: var(--ink); opacity: 0.16; transition: opacity 160ms ease; }
.ov-chart .ov-bar:hover { opacity: 0.4; }
.ov-axis text { fill: var(--muted); font-size: 10px; }
.ov-key { display: inline-flex; align-items: center; gap: 0.35rem; }
.ov-key i { display: inline-block; width: 1rem; height: 0; border-top: 2px solid var(--ink); }
.ov-key .ov-key-bar { height: 0.55rem; border: 0; border-radius: 2px; background: var(--ink); opacity: 0.16; }
.ov-key .ov-key-dash { border-top: 2px dashed var(--muted); }
.ov-pnl { display: grid; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
.ov-pnl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ov-chart .ov-pnl-in { fill: var(--ok); opacity: 0.75; }
.ov-chart .ov-pnl-out { fill: var(--fail); opacity: 0.6; }
.ov-chart .ov-pnl-net { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ov-chart .ov-pnl-dot { stroke: var(--paper); stroke-width: 1; }
.ov-chart .ov-pnl-dot.is-ok { fill: var(--ok); }
.ov-chart .ov-pnl-dot.is-bad { fill: var(--fail); }
.ov-key .ov-key-in { height: 0.55rem; border: 0; border-radius: 2px; background: var(--ok); }
.ov-key .ov-key-out { height: 0.55rem; border: 0; border-radius: 2px; background: var(--fail); }
.ov-key .ov-key-net { border-top: 2px solid var(--ink); }
.ov-tag { display: inline-block; padding: 0 0.35rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font: 600 0.66rem var(--font-ui); vertical-align: middle; }
.ov-tag.is-live { color: var(--ok); border-color: currentColor; }
.ov-tag.is-test { color: var(--warn); border-color: currentColor; }
.ov-bars { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ov-bars li { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.ov-bars-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-bars-label::first-letter { text-transform: uppercase; }
.ov-bars-track { height: 0.5rem; border-radius: 999px; background: var(--paper-soft); overflow: hidden; }
.ov-bars-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ink); transition: width 600ms var(--ease-out); }
.ov-bars-fill.is-in { width: var(--w); }
.ov-bars-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.ov-table td, .ov-table th { white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0.45rem 0.55rem; font-size: 0.8rem; }
.ov-table thead th { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.ov-table th[scope="row"] { text-align: left; font-weight: 600; }
.ov-sub { display: block; font-size: 0.7rem; font-weight: 400; color: var(--muted); }
.ov-empty { margin: 0; font-size: 0.82rem; color: var(--muted); }
.ov-real th[scope="row"] { white-space: normal; }
.ov-real .ov-sub { max-width: 34rem; white-space: normal; }
.ov-setup { margin-top: 0.25rem; font-size: 0.72rem; font-weight: 400; }
.ov-setup summary { cursor: pointer; color: var(--ink); }
.ov-setup p { margin: 0.25rem 0 0; color: var(--muted); }
.ov-note { margin: 0; font-size: 0.74rem; color: var(--muted); line-height: 1.5; }
.ov-link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 0; }
@media (max-width: 1023px) { .ov-wide { grid-column: auto; } .ov-strip-end { margin-left: 0; width: 100%; } }

/* —— Standalone admin page (/admin and the admin hostname; ui/static/admin.html) —— */
body.admin-page { margin: 0; min-height: 100dvh; background: var(--paper-soft); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
.adm-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: calc(0.5rem + var(--safe-top)) clamp(0.8rem, 3vw, 1.5rem) 0.5rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}
.adm-brand { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; color: var(--ink); font-weight: 650; text-decoration: none; }
.adm-brand .logo { width: 1.6rem; height: auto; }
.adm-kicker { padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; }
.adm-nav { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0.35rem; }
.adm-nav .btn { white-space: nowrap; }
@media (max-width: 480px) { .adm-brand > span:not(.adm-kicker) { display: none; } }
.adm-main { max-width: 74rem; margin: 0 auto; padding: 1rem clamp(0.8rem, 3vw, 1.5rem) 3rem; }
body.admin-page .ap-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.admin-page .ap-tab { white-space: nowrap; }

/* Composer: response chip, Stop, and messages queued behind a running turn. */
.composer-mode { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.composer-mode[hidden] { display: none; }
.composer-mode select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 36px;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-soft);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.chat-queue {
  display: grid;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-soft);
  font-size: 0.82rem;
}
.chat-queue[hidden] { display: none; }
.chat-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.chat-queue-item { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.chat-queue-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-queue-remove { flex: 0 0 auto; width: 28px; min-width: 28px; height: 28px; min-height: 28px; }
@media (max-width: 1023px) {
  /* Phone composer: the message on top, the controls in a row underneath. */
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer { flex-wrap: wrap; row-gap: 0.15rem; }
  body[data-pane="agents"][data-agents-view="chat"] .chat-form textarea { order: -1; flex: 1 0 100%; }
  body[data-pane="agents"][data-agents-view="chat"] #chatMic { margin-left: auto; }
  body[data-pane="agents"][data-agents-view="chat"] .composer-mode select { min-height: 44px; }
}

/* Admin Beta tab (temporary) */
.ap-beta-add { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; }
.ap-beta-add input { flex: 1 1 14rem; min-width: 0; }
.ap-beta-err:empty { display: none; }

/* The agent's computer: a monitor beside the menu in the phone chat header. */
.mobile-desktop-btn { display: none; }
.mobile-desktop-btn[hidden] { display: none !important; }
body[data-pane="agents"][data-agents-view="chat"] .mobile-bar .mobile-desktop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink);
}
#agentDesktopBtn { display: inline-flex; align-items: center; gap: 0.35rem; }
#agentDesktopBtn[hidden] { display: none; }

/* Desktop management diagram. Blocks and lines, saved by the signed-in person. */
.management-canvas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid var(--line);
}
.management-canvas-head h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.management-canvas-lead {
  margin: 0.3rem 0 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}
.management-help {
  margin: 0.35rem 0 0;
  max-width: 42rem;
}
.management-help summary {
  min-height: 44px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}
.management-canvas-note {
  margin: 0.3rem 0 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.management-canvas-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.management-canvas-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}
.management-finder {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--rail-bg);
}
.management-search {
  flex: 0 0 auto;
  padding: 0.55rem 0.65rem 0.15rem;
}
.management-search input {
  width: 100%;
  min-height: 44px;
  font-size: 1rem;
}
.management-palette {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.45rem 0.65rem 0.65rem;
  background: transparent;
  overscroll-behavior: contain;
}
.management-palette-card,
.management-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.management-palette-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  margin: 0 0 0.45rem;
  padding: 0.55rem 0.65rem;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.management-palette-card.is-dragging { opacity: 0.45; }
.management-drag-ghost {
  position: fixed;
  z-index: 70;
  width: 188px;
  padding: 0.55rem 0.65rem;
  pointer-events: none;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 0.9rem;
}
.management-palette-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}
/* The level bar sits directly below the name, full width, on Team cards too. */
.management-palette-card .level-bar,
.management-block .level-bar {
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0.2rem 0 0;
}
.management-palette-card .level-track,
.management-block .level-track {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}
.management-palette-card .level-num::before,
.management-block .level-num::before { content: "Lv "; font-weight: 500; }
.management-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.management-block-role {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.3;
}
.management-board {
  position: relative;
  overflow: auto;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  background-color: var(--paper-soft);
}
.management-stage { position: relative; width: 1600px; height: 960px; }
.management-wires {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 1600px;
  height: 960px;
  pointer-events: none;
}
.management-wire {
  position: absolute;
  background: var(--ink);
  pointer-events: auto;
  cursor: pointer;
}
.management-wire.is-draft { opacity: 0.45; pointer-events: none; }
.management-block {
  position: absolute;
  z-index: 2;
  width: 188px;
  min-height: 132px;
  padding: 0.6rem 0.75rem 0.55rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.management-block.is-manager { border-color: var(--ink); }
.management-block strong {
  display: block;
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.management-stat {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.12rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.management-port {
  position: absolute;
  left: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: crosshair;
  touch-action: none;
}
.management-port::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  pointer-events: none;
}
.management-port-in { top: -22px; }
.management-port-out { top: auto; bottom: -22px; }
.management-role {
  width: 100%;
  margin-top: 0.4rem;
  min-height: 36px;
  padding: 0.3rem 0.45rem;
  font-size: 1rem;
  touch-action: manipulation;
}
.management-block-remove {
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
#managementCanvasError { margin: 0; padding: 0.45rem 1rem 0.7rem; }
body.is-management-dragging,
body.is-management-dragging .management-canvas,
body.is-management-dragging .management-board,
body.is-management-dragging .management-palette {
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none;
}
.management-fit { display: none; }
@media (max-width: 1023px) {
  body.is-management .management-fit {
    display: inline-flex;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    touch-action: manipulation;
  }
  /* Stat rows on the agent cards would eat a third of the phone screen. */
  body.is-management .management-palette-card .management-stat { display: none; }
  body.is-management .management-canvas:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    z-index: 40;
    /* Full viewport, solid background: the floating tab bar is translucent glass,
       so the canvas must reach the screen edge itself or its blur picks up
       whatever is behind it (the Agents list). The tab-bar clearance for the
       board comes from padding-bottom below, same as every other phone pane. */
    inset: 0;
    min-height: 0;
    background: var(--paper);
    overflow: hidden;
    overscroll-behavior: none;
  }
  body.is-management .pane-switch {
    z-index: 80 !important;
    pointer-events: auto !important;
  }
  body.is-management #managementCanvasClose { display: none !important; }
  body.is-management .management-canvas-head { padding: 0.65rem 0.75rem 0.45rem; }
  body.is-management .management-canvas-body {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    flex: 1 1 auto;
    min-height: 0;
  }
  body.is-management .management-finder {
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  body.is-management .management-search { padding: 0.45rem 0.75rem 0; }
  body.is-management .management-palette {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.5rem;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.45rem 0.75rem 0.7rem;
    border: 0;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.is-management .management-palette-card {
    flex: 0 0 11.5rem;
    width: 11.5rem;
    margin: 0;
    touch-action: pan-x;
  }
  body.is-management .management-palette-empty {
    flex: 1 0 auto;
    align-self: center;
  }
  body.is-management .management-board {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: contain;
  }
  body.is-management .management-stage,
  body.is-management .management-wires {
    width: 100%;
    height: 100%;
  }
  #managementDest span { white-space: normal; line-height: 1.1; text-align: center; }
}
@media (min-width: 1024px) {
  body.is-management .management-canvas:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: var(--paper);
    overflow: hidden;
  }
  body.is-management .workspace-chat,
  body.is-management .desk-details { display: none !important; }
}
@media (min-width: 1280px) {
  body.is-management .management-canvas:not([hidden]) { grid-column: 2 / span 2; }
}

.management-block.is-linking { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── polish: management structure canvas ──
   Cards with sprite, name and role; quiet dot grid; thin connectors; small
   round ports. Phone layout rules above still decide sizes and scrolling. */
.management-canvas .management-canvas-head { align-items: center; padding: var(--space-4) var(--space-5); }
.management-canvas .management-canvas-head h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -0.02em; }
.management-canvas .management-canvas-lead { margin-top: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-normal); }
.management-canvas .management-help summary { min-height: 0; padding: var(--space-1) 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.management-canvas .management-canvas-note { font-size: var(--text-sm); line-height: var(--leading-normal); }
.management-canvas .management-canvas-actions { gap: var(--space-2); }
.management-canvas .management-canvas-body { grid-template-columns: 15rem minmax(0, 1fr); }
.management-canvas .management-finder { background: var(--paper-soft); }
.management-canvas .management-search { padding: var(--space-3) var(--space-3) var(--space-2); }
.management-canvas .management-palette { padding: var(--space-1) var(--space-3) var(--space-3); }
.management-canvas .management-palette-empty { padding: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-normal); }

.management-canvas .management-palette-card,
.management-canvas .management-block {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.management-canvas .management-palette-card {
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.management-canvas .management-palette-card:hover { border-color: var(--ctl-border-hover); box-shadow: var(--shadow-lg); }
.management-card-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.management-card-top strong { min-width: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-tight); overflow-wrap: anywhere; }

.management-avatar.agent-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  box-shadow: none;
}
.management-avatar.agent-avatar .phoenix-sprite { width: 1.375rem; height: 1.375rem; }

.management-canvas .management-block {
  display: flex;
  flex-direction: column;
  width: 208px;
  gap: var(--space-2);
  min-height: 0;
  padding: var(--space-3);
}
.management-canvas .management-block.is-manager { border-color: var(--ink); }
.management-canvas .management-block-role { flex: 0 0 auto; }
/* The name keeps its room; the Manager/Worker pill moves to its own line when it would cut the name. */
.management-canvas .management-block-head { justify-content: flex-start; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.management-canvas .management-block strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.management-canvas .management-block-role {
  padding: 1px var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.management-canvas .management-stat {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) 0;
  border-block: 1px solid var(--line);
}
.management-stat span { display: grid; gap: 1px; min-width: 0; text-align: left; }
.management-stat strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink); }
.management-stat small { font-size: var(--text-2xs); color: var(--muted); }
.management-canvas .management-palette-card .management-stat { padding-bottom: 0; border-bottom: 0; }
.management-canvas .management-role { margin: 0; min-height: var(--control-h-sm); }
.management-canvas .management-block-remove { align-self: flex-start; margin: 0; padding: var(--space-1) 0; font-size: var(--text-xs); }
.management-canvas .management-block-remove:hover { color: var(--fail); text-decoration: underline; }
.management-canvas .management-block.is-linking { outline-offset: 2px; }

.management-canvas .management-board {
  background-color: var(--paper-soft);
}
.management-canvas .management-wire {
  border-radius: var(--radius-xs);
  background: var(--ctl-border-hover);
  transition: background var(--dur) var(--ease);
}
.management-canvas .management-wire:hover { background: var(--ink); }
.management-canvas .management-port::after {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid var(--ctl-border-hover);
  border-radius: 50%;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.management-canvas .management-block:hover .management-port::after,
.management-canvas .management-port:hover::after,
.management-canvas .management-port:focus-visible::after { border-color: var(--ink); transform: scale(1.25); }
.management-canvas .management-port:focus-visible { outline: none; }
.management-canvas ~ .management-drag-ghost, .management-drag-ghost { width: 208px; border-radius: var(--radius-md); }
.management-empty {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  z-index: 2;
  display: grid;
  gap: var(--space-1);
  max-width: 22rem;
  padding: var(--space-5);
  border: 1px dashed var(--ctl-border);
  border-radius: var(--radius-md);
  background: var(--paper);
  pointer-events: none;
}
.management-empty strong { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.management-empty span { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
@media (max-width: 1023px) {
  .management-canvas .management-canvas-head { padding: var(--space-3) var(--space-4); }
  .management-canvas .management-canvas-head h2 { font-size: var(--text-lg); }
  .management-canvas .management-canvas-lead { font-size: var(--text-xs); }
}

/* ── polish: phone tab bar ──
   Icons share one baseline even when a label wraps, the active tab carries a
   bar and a heavier icon, and the bar clears the home indicator. */
@media (max-width: 1023px) {
  body .pane-switch {
    gap: var(--space-1);
    min-height: 0;
    padding: var(--space-1) var(--space-2) calc(var(--space-1) + var(--safe-bottom)) !important;
  }
  body .pane-btn {
    position: relative;
    justify-content: flex-start !important;
    gap: var(--space-1);
    min-height: 56px;
    padding: var(--space-2) 2px var(--space-1) !important;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 1.15;
    text-align: center;
  }
  body .pane-btn span { white-space: normal; overflow: visible; text-overflow: clip; }
  body .pane-btn svg { stroke-width: 1.6; }
  body .pane-btn:focus-visible { outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--ink); }
  body .pane-btn.is-active svg { stroke-width: 2.1; }
  body .pane-btn.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30%;
    right: 30%;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--ink);
  }
}

/* Playtest: one slot sentence, a visible role badge, and a sidebar that stays inside its column. */
.bot-role {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 1.35rem;
  padding: 0 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-soft);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.bot-rail .bot-name-row .bot-role { margin-top: 0.15rem; }
.vps-agents-slots {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
}
.add-agent-role select { width: 100%; max-width: 100%; }
.add-agent-role .section-note { font-weight: 500; margin: 0.35rem 0 0; }
.name-setup-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.65rem 1rem;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.name-setup-banner[hidden] { display: none !important; }
.name-setup-banner .btn { min-height: 44px; }

/* Billing sheet: one vertical scroller. Plan cards fill that scroller, one at a time. */
#accountSheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: min(36rem, calc(100vw - 1.5rem));
  max-height: min(92dvh, calc(100dvh - 1.5rem));
}
#accountSheet[hidden] { display: none !important; }
#accountSheet:has(#planPicker:not([hidden])) {
  height: auto;
  max-height: min(92dvh, calc(100dvh - 1.5rem));
}
#accountSheet .account-sheet-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  flex: 1 1 auto;
  overflow: hidden;
}
#accountSheet .account-sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
#accountSheet .account-billing,
#accountSheet #billingPanel,
#accountSheet .sheet-panel,
#accountSheet .billing-grid,
#accountSheet .plan-picker,
#accountSheet .plan-form,
#accountSheet .plan-carousel-wrap,
#accountSheet #creditsCard,
#accountSheet #creditsBalance,
#accountSheet .plan-credits {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  max-height: none;
  height: auto;
}
#accountSheet #creditsBalance,
#accountSheet .plan-credits,
#accountSheet .credit-facts dd {
  overflow: visible;
  text-overflow: unset;
}
#accountSheet .plan-carousel-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
}
#accountSheet .plan-carousel {
  grid-auto-columns: 100%;
  grid-template-rows: auto;
  height: auto;
}
#accountSheet .plan-carousel .plan-card {
  width: 100%;
  max-width: none;
  scroll-snap-align: start;
}
#accountSheet .plan-term {
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
}
#accountSheet .plan-term-btn,
#accountSheet .plan-term-tag {
  white-space: nowrap;
}
#accountSheet .plan-free-confirm,
#accountSheet .addon-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
}
#accountSheet .plan-free-confirm[hidden],
#accountSheet .addon-confirm[hidden] {
  display: none !important;
}
#accountSheet .addon-quote-panel {
  flex-grow: 1;
  flex-basis: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper-elev) 82%, transparent);
}
#accountSheet .addon-quote-panel .addon-confirm-actions { margin-top: 0.4rem; }
#accountSheet .addon-quote-panel:focus { outline: none; }
#accountSheet .addon-quote-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#accountSheet .addon-confirm-title { margin: 0; font-size: 0.95rem; }
#accountSheet .addon-quote {
  display: grid;
  margin: 0;
  min-width: 0;
}
#accountSheet .addon-quote dt:not(:first-child) { margin-top: 0.6rem; }
#accountSheet .addon-quote[hidden] { display: none !important; }
#accountSheet .addon-quote dt {
  color: var(--muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
#accountSheet .addon-quote dd {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
@media (min-width: 481px) {
  #accountSheet .addon-quote { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.45rem; }
  #accountSheet .addon-quote dt:not(:first-child) { margin-top: 0; }
  #accountSheet .addon-quote dt,
  #accountSheet .addon-quote dd { align-self: baseline; margin: 0; font-size: 0.88rem; }
  #accountSheet .addon-quote dd { text-align: right; }
}
.plan-addon-lines { margin: 0.2rem 0 0; }
.plan-addon-line { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.82rem; }
#accountSheet .plan-free-actions,
#accountSheet .addon-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
#accountSheet .plan-free-actions .btn,
#accountSheet .addon-confirm-actions .btn {
  min-height: 44px;
}
@media (max-width: 1023px) {
  /* The open plan picker also sets a height. This rule has to win, or the
     sheet stops short and the bottom nav shows through. */
  #accountSheet,
  #accountSheet:has(#planPicker:not([hidden])) {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    background: var(--paper);
  }
  #accountSheet .account-sheet-card {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    background: var(--paper);
  }
  #accountSheet .account-sheet-scroll {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
  body[data-pane="settings"] .workspace-settings,
  body[data-pane="settings"] .settings-body {
    overflow-x: hidden;
  }
  body[data-pane="settings"] .settings-body { overflow-y: visible; max-height: none; }
  body[data-pane="settings"] .workspace-settings { overflow-y: auto; }
  body[data-needs-agent="1"][data-pane="agents"][data-agents-view="list"] .workspace-chat {
    display: flex !important;
    flex: 0 0 auto;
    min-height: 16rem;
    width: 100%;
  }
  body[data-pane="agents"][data-agents-view="list"] .bot-roster,
  body[data-pane="agents"][data-agents-view="chats"] .bot-roster {
    padding-bottom: calc(11rem + var(--safe-bottom));
    scroll-padding-bottom: calc(11rem + var(--safe-bottom));
  }
  .bot-card:has(> .btn) {
    grid-template-areas:
      "avatar copy meta"
      "remove remove remove";
  }
  .bot-card > .btn,
  .bot-card > .btn.danger-text {
    grid-area: remove;
    justify-self: start;
    align-self: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.4rem 0.75rem;
  }
  .bot-tier,
  .bot-state,
  .bot-role,
  .model-pill,
  .agent-role-pill {
    min-height: 44px;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
  }
}

/* —— Account sheet, design B: a settings hub. Left rail on desktop, drill-in menu on phones —— */
#accountSheet .ico { flex: 0 0 auto; }
#accountSheet .account-sheet-card { display: flex; flex-direction: row; }
#accountSheet .account-sheet-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#accountSheet .account-rail { display: none; }
#accountSheet .sheet-back { display: none; }
#accountSheet .account-sheet-sub { display: none; }
#accountSheet .title-menu { display: none; }
#accountSheet .account-card { margin: 0; border: 1px solid var(--line); background: var(--paper); border-radius: 16px; min-width: 0; }
#accountSheet .card-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
#accountSheet .menu-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--paper-soft); color: var(--ink);
}
#accountSheet .account-avatar { background: var(--ink); color: var(--paper); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-weight: 650; }
#accountSheet .account-avatar-lg { width: 4rem; height: 4rem; font-size: 1.3rem; font-family: var(--font-brand); }
#accountSheet .account-phone { color: var(--muted); font-size: 0.82rem; }
#accountSheet .account-phone[hidden] { display: none; }
#accountSheet .account-profile-row { cursor: default; }
#accountSheet .account-profile-copy strong { font-size: 1.1rem; }
#accountSheet .profile-grid,
#accountSheet .profile-links,
#accountSheet .settings-grid { display: grid; gap: 0.85rem; grid-template-columns: minmax(0, 1fr); }
#accountSheet .profile-grid { margin-top: 0.4rem; }
#accountSheet .profile-links { margin-top: 0.85rem; }
#accountSheet .account-profile-card,
#accountSheet .profile-plan { padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.7rem; }
#accountSheet .profile-edit-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; border-radius: 999px; }
#accountSheet .account-profile-fields[hidden] { display: none; }
#accountSheet .account-profile-fields { border-top: 1px solid var(--line); padding-top: 0.5rem; }
#accountSheet .profile-plan .plan-name { font-size: 1.6rem; font-family: var(--font-brand); font-weight: 700; margin: 0; }
#accountSheet .profile-usage { margin: 0; padding: 0; border: 0; }
#accountSheet .profile-usage .account-usage-head { min-height: 0; margin-bottom: 0.35rem; font-size: 0.85rem; }
#accountSheet .profile-plan-actions { margin-top: auto; padding-top: 0.4rem; }
#accountSheet .profile-plan-actions .btn { flex: 1 1 auto; justify-content: center; border-radius: 999px; }
#accountSheet .account-link-card { padding: 1rem 1.1rem; min-height: 5rem; }
#accountSheet .account-link-card:hover,
#accountSheet .menu-row:hover { background: var(--paper-soft); }
#accountSheet .account-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
#accountSheet .account-foot .account-signout { width: auto; margin: 0; padding: 0 1rem; gap: 0.5rem; border-radius: 999px; }
#accountSheet .account-foot .account-legal { margin: 0; }
#accountSheet .settings-appearance,
#accountSheet .settings-local { padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.6rem; }
#accountSheet .settings-keys { padding: 1rem 1.1rem; display: flex; align-items: center; gap: 0.85rem; }
#accountSheet .settings-computer { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
#accountSheet .settings-computer .card-title { margin: 0; }
#accountSheet .settings-computer .section-note { margin: 0; }
#accountSheet .settings-keys .btn { flex: 0 0 auto; min-height: 44px; border-radius: 999px; }
#accountSheet .theme-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.3rem; }
#accountSheet .theme-tile {
  appearance: none; display: flex; flex-direction: column; gap: 0.45rem; align-items: stretch; padding: 0.4rem;
  min-height: 44px; border: 2px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink);
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
#accountSheet .theme-tile[aria-checked="true"] { border-color: var(--ink); }
#accountSheet .theme-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#accountSheet .theme-tile-name { text-align: center; padding-bottom: 0.1rem; }
#accountSheet .theme-preview { display: block; height: 3.2rem; border-radius: 8px; border: 1px solid rgb(128 128 128 / 35%); }
#accountSheet .theme-preview.is-light { background: linear-gradient(rgb(228 228 228), rgb(228 228 228)) 12% 30% / 55% 0.4rem no-repeat, linear-gradient(rgb(228 228 228), rgb(228 228 228)) 12% 62% / 35% 0.4rem no-repeat, rgb(255 255 255); }
#accountSheet .theme-preview.is-dark { background: linear-gradient(rgb(58 58 58), rgb(58 58 58)) 12% 30% / 55% 0.4rem no-repeat, linear-gradient(rgb(58 58 58), rgb(58 58 58)) 12% 62% / 35% 0.4rem no-repeat, rgb(17 17 17); }
#accountSheet .theme-preview.is-system { background: linear-gradient(105deg, rgb(255 255 255) 50%, rgb(17 17 17) 50%); }
#accountSheet .account-toggle-row { min-height: 44px; }
/* Billing: each block is its own card. */
#accountSheet .account-billing { margin: 0.4rem 0 0; padding: 0; background: transparent; }
#accountSheet .account-billing .billing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
#accountSheet .account-billing > .billing-grid > .plan-card,
#accountSheet .account-billing > .billing-grid > .account-usage,
#accountSheet .account-billing > .billing-grid > .plan-picker {
  margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: none; backdrop-filter: none;
}
#accountSheet .account-billing > .billing-grid > .account-usage { border-top: 1px solid var(--line); }
#accountSheet .account-billing > .billing-grid > #creditsCard { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
#accountSheet .account-billing > .billing-grid > .plan-picker { max-width: none; }
#accountSheet .account-billing .plan-carousel-wrap,
#accountSheet .account-billing .plan-carousel-scroller,
#accountSheet .account-billing .plan-carousel { background: transparent; }
#accountSheet .billing-actions { margin-top: 0.85rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
#accountSheet .billing-actions[hidden] { display: none; }
#accountSheet .vps-agents { margin: 0.85rem 0 0; border-radius: 16px; background: var(--paper); }
#accountSheet .plan-term { max-width: 22rem; }

/* Phone and tablet: the sheet is a page. The menu is the first screen. */
@media (max-width: 1023px) {
  #accountSheet .account-sheet-card { flex-direction: column; }
  #accountSheet .account-sheet-head {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.25rem; padding: 12px; border-bottom: 1px solid var(--line);
  }
  #accountSheet .account-sheet-head-bar { display: contents; }
  #accountSheet .account-sheet-head-copy { grid-column: 2; grid-row: 1; text-align: center; }
  #accountSheet .account-sheet-head-bar h2 { font-size: 1.1rem; }
  #accountSheet .account-sheet-head .sheet-x { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
  #accountSheet .sheet-back {
    grid-column: 1; grid-row: 1; justify-self: start; appearance: none; display: inline-flex; align-items: center; gap: 0.1rem;
    min-width: 44px; min-height: 44px; padding: 0 0.4rem 0 0.1rem; border: 0; border-radius: 12px; background: transparent;
    color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
  }
  #accountSheet[data-sheet-view="menu"] .sheet-back { display: none; }
  #accountSheet[data-sheet-view="menu"] .title-menu { display: inline; }
  #accountSheet[data-sheet-view="menu"] .title-section { display: none; }
  #accountSheet .account-sheet-scroll { padding: 0.85rem 0.9rem calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  #accountSheet[data-sheet-view="menu"] .account-pane { display: none; }
  #accountSheet[data-sheet-view="section"] .account-menu { display: none; }
  #accountSheet .account-menu { display: grid; gap: 0.85rem; }
  #accountSheet .menu-identity { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; }
  #accountSheet .menu-identity .account-avatar { width: 4rem; height: 4rem; font-size: 1.3rem; font-family: var(--font-brand); }
  #accountSheet .menu-plan { padding: 1.1rem; display: grid; gap: 0.6rem; }
  #accountSheet .menu-plan-line { margin: 0; display: flex; flex-wrap: wrap; gap: 0.2rem; align-items: baseline; }
  #accountSheet .menu-plan-line strong { font-size: 1.15rem; }
  #accountSheet .menu-plan-line span { color: var(--muted); font-size: 0.9rem; overflow-wrap: normal; }
  #accountSheet .menu-plan-usage { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted); }
  #accountSheet .menu-plan-usage strong { color: var(--ink); }
  #accountSheet .menu-change-plan { width: 100%; min-height: 48px; border-radius: 14px; justify-content: center; }
  #accountSheet .menu-change-plan[hidden] { display: none; }
  #accountSheet .menu-list { padding: 0; overflow: hidden; }
  #accountSheet .menu-row {
    appearance: none; display: flex; align-items: center; gap: 0.85rem; width: 100%; min-height: 64px; padding: 0.7rem 1rem;
    border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  }
  #accountSheet .menu-list .menu-row + .menu-row { border-top: 1px solid var(--line); }
  #accountSheet .menu-signout { width: 100%; border: 1px solid var(--line); border-radius: 16px; }
  #accountSheet .account-menu .account-legal { display: flex; justify-content: center; margin: 0; }
  #accountSheet .account-row-note { white-space: normal; }
  #accountSheet .account-foot .account-legal { display: flex; }
  #accountSheet .account-foot { justify-content: center; }
  #accountSheet .account-foot .account-signout { display: none; }
  #accountSheet .account-link-card[data-sheet-open] { display: flex; }
  #accountSheet .settings-keys { flex-wrap: wrap; }
  #accountSheet .profile-save-row { background: var(--paper); }
}

/* Desktop: a large centred overlay with the rail on the left. */
@media (min-width: 1024px) {
  #accountSheet,
  #accountSheet:has(#planPicker:not([hidden])) {
    width: min(68rem, calc(100vw - 4rem));
    max-width: min(68rem, calc(100vw - 4rem));
    height: min(44rem, calc(100dvh - 4rem));
    max-height: min(44rem, calc(100dvh - 4rem));
  }
  #accountSheet::backdrop { background: rgb(0 0 0 / 45%); backdrop-filter: blur(2px); }
  #accountSheet .account-sheet-card {
    height: 100%; max-height: 100%; border-radius: 16px; box-shadow: 0 24px 64px rgb(0 0 0 / 22%);
  }
  #accountSheet .account-menu { display: none; }
  #accountSheet .account-rail {
    flex: 0 0 15rem; width: 15rem; display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 1rem 1rem;
    background: var(--paper-soft); border-right: 1px solid var(--line); overflow-y: auto;
  }
  #accountSheet .account-rail-brand { margin: 0 0 0.2rem 0.4rem; font-family: var(--font-brand); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; }
  #accountSheet .account-rail-user { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
  #accountSheet .account-rail-user .account-avatar { width: 2.6rem; height: 2.6rem; font-size: 0.9rem; }
  #accountSheet .account-rail-user-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  #accountSheet .account-rail-user-copy strong { font-size: 0.92rem; overflow-wrap: anywhere; }
  #accountSheet .account-rail-email { color: var(--muted); font-size: 0.74rem; overflow-wrap: anywhere; }
  #accountSheet .account-rail-plan { color: var(--muted); font-size: 0.74rem; margin-top: 0.1rem; }
  #accountSheet .account-rail-nav { display: flex; flex-direction: column; gap: 0.2rem; }
  #accountSheet .account-sheet-tabs { flex-direction: column; gap: 0.2rem; padding: 0; border: 0; border-radius: 0; background: transparent; }
  #accountSheet .sheet-tab {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: 0.7rem; width: 100%; min-height: 44px;
    padding: 0 0.9rem; border-radius: 12px; text-align: left; font-size: 0.92rem; color: var(--ink); background: transparent; border: 0; font-family: inherit; cursor: pointer;
  }
  #accountSheet .sheet-tab:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  #accountSheet .sheet-tab.is-active,
  #accountSheet .sheet-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  #accountSheet .sheet-tab:focus-visible,
  #accountSheet .rail-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  #accountSheet .rail-close {
    appearance: none; margin-top: auto; display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 44px; padding: 0 0.9rem;
    border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.9rem; cursor: pointer;
  }
  #accountSheet .rail-close span { flex: 1 1 auto; text-align: left; }
  #accountSheet .rail-close kbd { font: inherit; font-size: 0.68rem; padding: 0.1rem 0.4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
  #accountSheet .account-sheet-head { position: static; display: block; padding: 1.5rem 1.75rem 0; background: transparent; }
  #accountSheet .account-sheet-head-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
  #accountSheet .account-sheet-head-bar h2 { margin: 0; font-family: var(--font-brand); font-size: 2.1rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
  #accountSheet .account-sheet-sub { display: block; margin: 0.3rem 0 0; color: var(--muted); font-size: 0.95rem; }
  #accountSheet .account-sheet-head .sheet-x { margin: 0; box-shadow: inset 0 0 0 1px var(--line); font-size: 1.25rem; }
  #accountSheet .account-sheet-scroll { padding: 1.1rem 1.75rem 1.5rem; }
  #accountSheet .profile-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); margin-top: 0; }
  #accountSheet .profile-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #accountSheet .settings-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #accountSheet .settings-keys,
  #accountSheet .settings-computer { grid-column: 1 / -1; }
  #accountSheet .account-billing .billing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  #accountSheet .account-billing > .billing-grid > #planCard { grid-column: 1; grid-row: 1; }
  #accountSheet .account-billing > .billing-grid > .account-usage { grid-column: 2; grid-row: 1; }
  #accountSheet .account-billing > .billing-grid > #creditsCard { grid-column: 3; grid-row: 1; }
  #accountSheet .account-billing > .billing-grid > .plan-picker { grid-column: 1 / -1; grid-row: 2; }
  #accountSheet .plan-carousel-arrow,
  #accountSheet .plan-dots { display: none; }
  #accountSheet .plan-carousel-wrap { display: block; }
  #accountSheet .plan-carousel-scroller { overflow: visible; scroll-snap-type: none; height: auto; }
  #accountSheet .plan-carousel {
    display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-auto-columns: unset;
    width: 100%; padding: 0; gap: 0.75rem;
  }
  #accountSheet .plan-carousel .plan-card { width: auto; max-width: none; min-width: 0; }
  /* Three 15rem cards and their gaps must fit the content column at 1440. */
  #accountSheet .account-billing > .billing-grid > .plan-picker { padding-inline: 0.75rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #accountSheet .account-rail { flex-basis: 13rem; width: 13rem; padding-inline: 0.75rem; }
  #accountSheet .account-sheet-head { padding: 1.25rem 1.25rem 0; }
  #accountSheet .account-sheet-scroll { padding: 1rem 1.25rem 1.25rem; }
  #accountSheet .profile-grid { grid-template-columns: minmax(0, 1fr); }
  #accountSheet .account-billing .billing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #accountSheet .account-billing > .billing-grid > #planCard { grid-column: 1; grid-row: 1; }
  #accountSheet .account-billing > .billing-grid > .account-usage { grid-column: 2; grid-row: 1; }
  #accountSheet .account-billing > .billing-grid > #creditsCard { grid-column: 1 / -1; grid-row: 2; }
  #accountSheet .account-billing > .billing-grid > .plan-picker { grid-row: 3; }
}
#accountSheet .plan-head { flex-wrap: wrap; }
#accountSheet #changePlanBtn { white-space: nowrap; flex: 0 0 auto; min-height: 44px; border-radius: 999px; }
#accountSheet .billing-actions .btn { min-height: 44px; }

/* Plan prices and their units never break, even inside .account-pane's overflow-wrap: anywhere. */
#accountSheet .plan-card-price,
#accountSheet .plan-card-price strong,
#accountSheet .plan-card-price span,
#accountSheet .plan-card-note,
#accountSheet #planPrice,
#accountSheet #profilePlanMeta,
#accountSheet #menuPlanMeta,
#accountSheet #accountRailPlan,
#accountSheet .menu-plan-line { overflow-wrap: normal; word-break: normal; }
#accountSheet .plan-card-price,
#accountSheet .plan-card-price strong,
#accountSheet .plan-card-price span { white-space: nowrap; }

/* ── polish: left rail ──────────────────────────────────────────────────
   Grouped agent list (managers with their workers nested), level + XP on
   each card, consistent nav items, and the working animation for sprites.
   Written on the design tokens; this block sits last so it settles the older
   per-breakpoint rules above. */
.bot-rail .bot-roster {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0;
  overflow: visible;
}
.bot-rail .roster-heading {
  margin: var(--space-3) var(--space-2) var(--space-1);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}
.bot-rail .roster-heading:first-child { margin-top: var(--space-1); }
.bot-rail .roster-set { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bot-rail .roster-row { position: relative; min-width: 0; }
.bot-rail .roster-row .bot-card { padding-right: var(--space-8); }
.bot-rail .roster-fold {
  position: absolute;
  top: var(--space-3);
  right: var(--space-1);
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bot-rail .roster-fold:hover,
.bot-rail .roster-fold:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  outline: none;
}
.bot-rail .roster-fold svg { transition: transform var(--dur) var(--ease); }
.bot-rail .roster-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
.bot-rail .roster-kids {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-1) var(--space-4);
  padding-left: var(--space-2);
  border-left: 1px solid var(--line-strong);
  min-width: 0;
}

.bot-rail .bot-card {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  margin: 0;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  opacity: 1;
  transition: background var(--dur) var(--ease);
}
@media (hover: hover) { .bot-rail .bot-card:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } }
.bot-rail .bot-card.is-selected {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (hover: hover) {
  .bot-rail .bot-card.is-selected:hover {
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--line);
  }
}
.bot-rail .bot-card.is-off .bot-name,
.bot-rail .bot-card.is-calm .bot-name,
.bot-rail .bot-card.is-paused .bot-name { color: var(--muted); }
.bot-rail .bot-card .bot-avatar-edit {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 32px;
  height: 32px;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}
.bot-rail .bot-card.is-off .agent-avatar:not(.is-hawkeye),
.bot-rail .bot-card.is-paused .agent-avatar:not(.is-hawkeye) { filter: none; opacity: 0.6; }
.bot-rail .bot-card .bot-dot {
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-width: 2px;
}
.bot-rail .bot-card-copy {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  width: 100%;
  text-align: left;
}
.bot-rail .bot-name-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0 var(--space-2);
  min-width: 0;
  width: 100%;
}
.bot-rail .bot-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--ink);
}
.bot-rail .bot-card.has-unread .bot-name { font-weight: var(--weight-bold); }
.bot-rail .roster-badge {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  white-space: nowrap;
}
.bot-rail .bot-sub {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--space-4);
}
.bot-rail .bot-sub .level-bar {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  min-width: 0;
  color: var(--muted);
}
.bot-rail .bot-sub .level-bar[hidden] { display: none !important; }
.bot-rail .bot-sub .level-num {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bot-rail .bot-sub .level-num::before { content: "Lv "; font-weight: var(--weight-medium); }
.bot-rail .bot-sub .level-track {
  display: block;
  flex: 1 1 auto;
  max-width: 88px;
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.bot-rail .bot-sub .level-fill {
  border-radius: var(--radius-pill);
  background: var(--agent-c, var(--ink));
  transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bot-rail .bot-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  white-space: nowrap;
}
.bot-rail .bot-state::before { content: none; }
.bot-rail .bot-state.is-fail { color: var(--fail); }
.bot-rail .bot-state.is-warn { color: var(--warn); }
.bot-rail .bot-state .setup-spinner { width: 10px; height: 10px; margin: 0; border-width: 1.5px; }
.bot-rail .bot-card > .bot-unread {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: var(--space-2);
  height: var(--space-2);
  margin: 0;
  background: var(--ink);
}
.bot-rail .roster-row .bot-card > .bot-unread { right: var(--space-8); top: var(--space-2); }
.bot-rail .bot-card > .btn {
  grid-column: 2;
  justify-self: start;
  margin-top: var(--space-1);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
}
.bot-rail .bot-card .provision-progress.is-card { gap: var(--space-1); margin: var(--space-1) 0 0; }
.bot-rail .bot-card .provision-label,
.bot-rail .bot-card .provision-message { font-size: var(--text-xs); line-height: var(--leading-normal); }
.bot-rail .bot-card .provision-step { font-size: var(--text-2xs); }
.bot-rail .bot-card .provision-progress .btn {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}
.bot-rail .bot-card.is-setup,
.bot-rail .bot-card.is-removing { max-width: 100%; }
.bot-rail .bot-card.is-setup .bot-card-copy,
.bot-rail .bot-card.is-removing .bot-card-copy { opacity: 1; }

/* Desktop rail: one scale for headings, search, nav and footer. */
@media (min-width: 1024px) {
  .bot-rail { gap: var(--space-1); padding: var(--space-4) var(--space-3) var(--space-3); }
  .bot-rail .rail-head { align-items: center; min-height: var(--control-h); padding: 0 var(--space-2); margin-top: var(--space-2); }
  .bot-rail .rail-title,
  .bot-rail .desk-kicker-btn {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .bot-rail .rail-add {
    align-self: center;
    gap: var(--space-1);
    min-height: var(--control-h-sm);
    padding: 0 var(--space-2);
    border-radius: var(--radius-xs);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }
  .bot-rail .rail-add:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .bot-rail > .rail-nav-item {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--control-h);
    margin: 0;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .bot-rail > .rail-nav-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
  .bot-rail > .rail-nav-item.is-active,
  .bot-rail > .rail-nav-item[aria-current="page"],
  body[data-pane="settings"][data-settings="agents"] .bot-rail > .rail-nav-item[data-open-tab="agents"] {
    background: var(--paper);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .bot-rail > .rail-nav-item .rail-nav-icon { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); }
  .bot-rail > #deskManagement { order: 1; margin-top: var(--space-3); }
  .bot-rail > #deskTasks { order: 1; }
  .bot-rail > #deskMachineViewer { order: 1; }
  .bot-rail > .desk-projects { order: 2; margin-top: var(--space-2); }
  .bot-rail > #deskIntegrations { order: 3; }
  .bot-rail > [data-open-tab="agents"].rail-nav-item { order: 4; }
  .bot-rail > #accountComputerLink { order: 5; }
  .bot-rail > .rail-foot { order: 6; }
  .bot-rail > .desk-user { order: 7; }
  /* Nav items that also carry .btn.compact keep the rail nav height and type. */
  body .bot-rail > .rail-nav-item.btn { min-height: var(--control-h); padding: 0 var(--space-2); font-size: var(--text-sm); }
  /* Computer: same row as the other nav items; its state is a quiet trailing word. */
  body .bot-rail > #accountComputerLink { flex-direction: row; justify-content: flex-start; min-height: var(--control-h); padding: 0 var(--space-2); }
  .bot-rail > #accountComputerLink .account-computer-label { font-weight: var(--weight-semibold); }
  .bot-rail > #accountComputerLink .account-computer-state { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-regular, 400); color: var(--muted); }
  /* The agent list scrolls on its own; nav and account stay put below it. */
  .bot-rail > :not(.bot-roster) { flex-shrink: 0; }
  .bot-rail .bot-roster { flex: 1 1 160px; min-height: 120px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
  .bot-rail .desk-project-list { max-height: calc(var(--space-10) * 4); overflow-y: auto; }
  .bot-rail > .desk-projects .desk-kicker-btn { min-height: var(--control-h-sm); padding: 0 var(--space-2); margin: 0; }
  .bot-rail .desk-project { min-height: var(--control-h); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); }
  .bot-rail .desk-project-name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .bot-rail > .desk-user { gap: var(--space-3); padding: var(--space-3) var(--space-2) var(--space-1); }
  .bot-rail .desk-user-avatar { width: var(--space-8); height: var(--space-8); }
  .bot-rail .desk-user-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .bot-rail .desk-user-plan { font-size: var(--text-xs); }
}

/* A short window gives the agent list the room: one project row, no brand line. */
@media (min-width: 1024px) and (max-height: 820px) {
  .bot-rail { padding-top: var(--space-3); }
  .bot-rail .desk-brand-sub { display: none; }
  .bot-rail .desk-brand { min-height: var(--control-h); }
  .bot-rail .desk-project-list { max-height: var(--control-h); }
}

/* Phone and tablet list view: the same grouped list, as cards. */
@media (max-width: 1023px) {
  .bot-rail .rail-nav-item:not(#accountComputerLink) { display: none; }
  body[data-pane="agents"] .bot-rail .bot-roster { gap: var(--space-2); padding-bottom: var(--space-4); }
  body[data-pane="agents"] .bot-rail .roster-heading { margin: var(--space-4) var(--space-1) var(--space-1); font-size: var(--text-xs); }
  body[data-pane="agents"] .bot-rail .bot-card {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--space-4);
    min-height: 72px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: none;
  }
  body[data-pane="agents"] .bot-rail .roster-row .bot-card { padding-right: calc(var(--space-10) + var(--space-2)); }
  body[data-pane="agents"] .bot-rail .bot-card .bot-avatar-edit { width: 48px; height: 48px; margin-top: 0; align-self: center; }
  body[data-pane="agents"] .bot-rail .bot-card .bot-dot { width: 12px; height: 12px; }
  body[data-pane="agents"] .bot-rail .bot-name { font-size: var(--text-lg); }
  body[data-pane="agents"] .bot-rail .roster-badge { font-size: var(--text-xs); }
  body[data-pane="agents"] .bot-rail .bot-sub { min-height: var(--space-5); }
  body[data-pane="agents"] .bot-rail .bot-sub .level-num,
  body[data-pane="agents"] .bot-rail .bot-state { font-size: var(--text-xs); }
  body[data-pane="agents"] .bot-rail .bot-sub .level-track { max-width: 120px; }
  body[data-pane="agents"] .bot-rail .roster-fold { top: var(--space-5); right: var(--space-3); width: var(--space-8); height: var(--space-8); }
  body[data-pane="agents"] .bot-rail .roster-row .bot-card > .bot-unread { right: calc(var(--space-10) + var(--space-2)); top: var(--space-4); }
  body[data-pane="agents"] .bot-rail .bot-card > .bot-unread { top: var(--space-4); right: var(--space-4); }
  body[data-pane="agents"] .bot-rail .roster-kids { margin-left: var(--space-3); padding-left: var(--space-3); }
}

/* Sprites sit on whole-pixel sizes (16 × 2, 3) so no cell is smeared. */
#chatAvatar.agent-avatar.has-sprite,
#mobileAgentAvatar.agent-avatar.has-sprite { width: 32px; height: 32px; }
#deskDetailsAvatar.agent-avatar.has-sprite { width: 48px; height: 48px; }
.agent-avatar.has-sprite .phoenix-sprite { image-rendering: pixelated; shape-rendering: crispEdges; }
/* The role set on the management canvas, quiet beside the name. */
.bot-rail .bot-team-role {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular, 400);
  line-height: var(--leading-tight);
}
/* A manager nested under another manager keeps its own fold. */
.bot-rail .roster-kids > .roster-set { gap: var(--space-1); }
/* Phones: the project picker is a composer pill beside Auto. */
.chat-composer .composer-project { max-width: 152px; }
.chat-composer .composer-project .chat-project-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.chat-composer .composer-project select { max-width: 100%; text-overflow: ellipsis; }
/* Phone message box (Stitch): the message on top, then + · Auto · project on
   the left and mic + a round Send on the right. Voice mode is in the menu. */
#chatVoice .voice-label { display: none; }
.chat-overflow-tools #chatVoice { width: auto; min-width: 44px; padding: 0 var(--space-4); gap: var(--space-2); border-radius: var(--radius-pill); }
.chat-overflow-tools #chatVoice .voice-label { display: inline; }
/* Wider screens: the composer button carries voice; the inert menu item goes. */
@media (min-width: 1024px) { .chat-overflow-tools #chatVoice { display: none; } }
@media (max-width: 1023px) {
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer {
    column-gap: var(--space-2);
    row-gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-2);
    border-radius: 24px;
  }
  body[data-pane="agents"][data-agents-view="chat"] .chat-form textarea { padding: var(--space-1) var(--space-2); }
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer #chatAttach {
    background: var(--paper-soft);
    border: 1px solid var(--line);
  }
  /* One row: the two pills share what the buttons leave and truncate. */
  /* Small flex bases so the row never wraps; Auto stays compact, the project takes the rest. */
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer .composer-mode { min-width: 0; }
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer #composerModeWrap { flex: 0 1 76px; }
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer .composer-project { flex: 1 1 64px; max-width: 176px; }
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer #chatAttach,
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer #chatMic,
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer #chatSend { flex: 0 0 auto; }
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer #chatAttach,
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer #chatMic { width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin-left: 0; }
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer .composer-mode select {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background-color: var(--paper-soft);
  }
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer #chatSend {
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
  }
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer #chatSend::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background: var(--paper);
    -webkit-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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
/* ── end polish: left rail ── */
/* ── polish: chat header, messages, composer, info panel, setup banner ──
   One block, on the design tokens. Later than the older layers it refines. */

/* Setup banner: a slim dismissible notice bar inside the app frame. */
.name-setup-banner {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-2) var(--space-3) 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  font-size: var(--text-sm);
}
.name-setup-copy { margin: 0; min-width: 0; font-weight: var(--weight-medium); line-height: var(--leading-tight); }
.name-setup-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-1); }
.name-setup-banner .btn { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-pill); }
.name-setup-banner .btn.ghost { color: var(--muted); }
@media (max-width: 1023px) {
  .name-setup-banner { margin: var(--space-2) var(--space-2) 0; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); gap: var(--space-2); }
  .name-setup-copy { font-size: var(--text-xs); }
  .name-setup-banner .btn { min-height: 44px; padding: 0 var(--space-2); }
}
@media (max-width: 420px) {
  /* Phone: one row. Dismiss becomes a cross so the copy keeps its line. */
  .name-setup-banner #nameSetupDismiss { width: 44px; padding: 0; font-size: 0; }
  .name-setup-banner #nameSetupDismiss::before { content: "\00d7"; font-size: var(--text-xl); line-height: 1; }
}

/* Chat header: avatar, name, a calm state only when the agent is unusable,
   and the actions on the right, on one baseline. The duplicate native output
   selector lives in the composer; the header copy stays hidden. */
.chat-model-line, #chatModelLine { display: none !important; }
.chat-head .chat-head-title { align-items: center; }
.chat-head .chat-head-title > div { align-items: center; }
.chat-head .avatar-hit { width: var(--control-h); height: var(--control-h); }
#chatAvatar, #deskDetailsAvatar { flex: 0 0 auto; image-rendering: pixelated; }
/* The sprite sits in a soft round tile, so a solid egg reads as an icon, not a blob. */
#chatAvatar, #deskDetailsAvatar {
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--paper-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
#chatAvatar { width: var(--space-8); height: var(--space-8); }
#chatAvatar .phoenix-slot, #deskDetailsAvatar .phoenix-slot { width: 62%; height: 62%; }
#chatAvatar .phoenix-sprite, #deskDetailsAvatar .phoenix-sprite { width: 100%; height: 100%; image-rendering: pixelated; }
.chat-head h1 { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.chat-head-actions { gap: var(--space-2); align-items: center; }
.chat-head-actions .btn { min-height: var(--control-h-sm); font-size: var(--text-sm); border-radius: var(--radius-pill); }
@media (min-width: 1024px) {
  .desk-head-status:not([hidden]) {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    gap: var(--space-2);
  }
  .desk-head-status .desk-status-dot { background: var(--muted); }
  .chat-head { padding: 0 var(--space-6); }
}
.desk-details-status { color: var(--muted); font-size: var(--text-xs); gap: var(--space-2); }
.desk-details-status .desk-status-dot { background: var(--muted); }
/* Ready: a green dot, no word. Sleeping: the same monochrome moon the
   roster card uses, recoloured through a mask instead of a baked-in fill. */
.desk-head-status.is-ready .desk-status-dot,
.desk-details-status.is-ready .desk-status-dot { background: var(--ok); }
.desk-head-status.is-sleeping .desk-status-dot,
.desk-details-status.is-sleeping .desk-status-dot {
  background-color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10z'/%3E%3C/svg%3E") center / contain no-repeat;
  border-radius: 0;
}

/* Messages: body --text-md, author --text-sm semibold, meta --text-xs muted. */
.chat-msg-head { align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.chat-msg-who { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.chat-msg-body { font-size: var(--text-md); line-height: var(--leading-normal); }
/* Agent replies read like a page: 16px text with room between lines, section
   headings clearly bigger than the text, bold that stands out, spaced lists. */
.chat-msg:is(.cloud, .bot, .local) .chat-msg-body,
.chat-working-text.is-marked { font-size: 1rem; line-height: 1.6; }
.chat-md-p { margin: 0 0 0.85em; }
.chat-md-h { margin: 1.3em 0 0.45em; font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--ink); }
.chat-md-h1 { font-size: 1.4em; }
.chat-md-h2 { font-size: 1.25em; }
.chat-md-h3 { font-size: 1.1em; }
.chat-md-h4 { font-size: 1em; }
.chat-md-list { margin: 0 0 0.85em; padding-left: 1.4em; }
.chat-md-list li { margin: 0.3em 0; }
.is-marked strong { font-weight: var(--weight-bold); }
.is-marked > :first-child { margin-top: 0; }
.is-marked > :last-child { margin-bottom: 0; }
.chat-chip,
.chat-chip.is-specialist,
.chat-chip.is-handoff,
.chat-chip.is-local {
  padding: 1px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-soft);
  color: var(--muted);
  font-family: inherit;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
.chat-routine-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: 1px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-soft);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
.chat-routine-line svg { flex: 0 0 auto; }
.chat-msg .chat-trace { margin: var(--space-1) 0 0; font-size: var(--text-xs); line-height: var(--leading-normal); }
.chat-msg .chat-trace > summary { gap: var(--space-2); min-height: var(--icon-md); }
.chat-msg .chat-trace > summary::before { width: var(--space-2); line-height: 1; text-align: center; }
.chat-msg .chat-trace > summary .phoenix-slot { margin: 0; }
.chat-msg .chat-trace > summary .phoenix-sprite { width: var(--icon-md); height: var(--icon-md); }
/* The working row ("Asking a Hawkeye agent"): sprite, timer and step on one tidy line. */
.chat-working { gap: var(--space-1); min-height: 0; }
.chat-working-live { gap: var(--space-2); align-items: center; }
.chat-working-live .phoenix-sprite { width: var(--icon-md); height: var(--icon-md); }
.chat-working-elapsed { font-size: var(--text-xs); }
.chat-working-status { font-size: var(--text-sm); line-height: var(--leading-normal); }
.chat-working-steps { font-size: var(--text-xs); }

/* Composer: one control height, one pill style, for the response chip and Project. */
.composer-mode { position: relative; }
.composer-mode select,
.chat-actions .check-inline select#chatProject {
  -webkit-appearance: none;
  appearance: none;
  min-height: var(--control-h-sm);
  padding: 0 var(--space-6) 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-soft);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.composer-mode::after,
.chat-actions .check-inline:has(#chatProject)::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.composer-mode[hidden]::after { display: none; }
@media (min-width: 1024px) {
  .chat-actions { justify-content: flex-end; gap: var(--space-2); padding: var(--space-2) 0 0; }
  .chat-actions .check-inline:has(#chatProject) {
    position: relative;
    gap: var(--space-2);
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--muted);
  }
  .chat-actions .check-inline #chatProject { max-width: 12rem; min-height: var(--control-h-sm); padding: 0 var(--space-6) 0 var(--space-3); border: 1px solid var(--line); background: var(--paper-soft); font-size: var(--text-sm); }
  .chat-form .composer-disclaimer { margin: var(--space-2) auto 0; font-size: var(--text-2xs); }
}

/* Info panel: calm head, tidy level card, folds with one header style. */
@media (min-width: 1024px) {
  .desk-details { gap: var(--space-4); padding: var(--space-5) var(--space-4); }
  .desk-details-head { gap: var(--space-3); }
  #deskDetailsAvatar { width: var(--space-10); height: var(--space-10); }
  .desk-details-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: 0; }
  .desk-level-card { gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); box-shadow: none; }
  .desk-level-row { align-items: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  #deskXpLabel { font-size: var(--text-xs); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
  .desk-level-track { height: var(--space-2); }
  .desk-folds .desk-fold > summary,
  .desk-folds .desk-skills > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0; }
  .desk-folds .desk-fold > summary .desk-kicker,
  .desk-folds .desk-skills > summary .desk-kicker { flex: 1 1 auto; margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; }
  .desk-skills-head #deskSkillsCount { color: var(--muted); font-size: var(--text-xs); }
  .desk-folds .sheet-fold-body { padding: 0 0 var(--space-3); }
  .desk-fold .section-note,
  .desk-fold .routines-empty,
  .desk-fold .nightowl-empty,
  .desk-skills-empty { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--muted); }
  .desk-fold .desk-fold-wait { margin: 0; }
  .desk-fold .nightowl-intro { color: var(--ink); font-size: var(--text-sm); }
  .desk-fold .nightowl-scope, .desk-fold .nightowl-clock { display: none; }
}
.agent-purpose-text { font-size: var(--text-sm); line-height: var(--leading-normal); white-space: normal; }
.agent-purpose-view { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-2); }
.agent-purpose-full {
  margin: 0;
  max-height: 12rem;
  overflow: auto;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-soft);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agent-purpose-full[hidden], .agent-purpose-more[hidden] { display: none; }
.agent-purpose-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.agent-purpose-tools .btn { min-height: var(--control-h-sm); padding: 0; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--muted); text-decoration: underline; text-underline-offset: 2px; background: transparent; border: 0; }
@media (hover: hover) { .agent-purpose-tools .btn:hover { color: var(--ink); } }
.desk-purpose .agent-purpose-view > .btn { padding: 0; }
#deskSkillsCount:empty { display: none; }
/* Setup strip above the composer: a calm notice with Retry on the right. */
.chat-form .provision-status .provision-progress:not(.is-compact) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-soft);
}
.chat-form .provision-status .provision-message { flex: 1 1 14rem; margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }
.chat-form .provision-status .provision-progress > .btn { min-height: var(--control-h-sm); border-radius: var(--radius-pill); font-size: var(--text-sm); }
/* Images an agent placed in its text with ![caption](attachment:<id>). */
.chat-msg-body.has-inline-images > .chat-image.is-inline {
  display: block;
  margin: 0.5rem 0;
  max-width: min(100%, 720px);
}
.chat-msg-body.has-inline-images > .chat-msg-chunk + .chat-msg-chunk { margin-top: 0.4rem; }

/* ── polish pass 2: chat, rail, settings panes ─────────────────────────
   Long names, duplicate status text, and unstyled controls found in the
   whole-app audit (/workspace/hawkeye-design/sunday-polish/polish). Last in
   the file on purpose; each rule says what it settles. */

/* Rail: a row with no state line is one line tall, so the name sits level
   with the avatar instead of floating above an empty line. */
.bot-rail .bot-sub:not(:has(.bot-state, .level-bar:not([hidden]))) { display: none; }
.bot-rail .bot-card .bot-avatar-edit { margin-top: 2px; }

/* The header never repeats the agent state: the right-hand status (desktop)
   and the line above the composer (phone) already say it. */
.chat-head .chat-wake { display: none; }

/* Info panel: a long agent name wraps to two lines instead of running off
   the panel. */
.desk-details-head { min-width: 0; }
.desk-details-id { min-width: 0; flex: 1 1 auto; }
.desk-details-title { min-width: 0; }
#deskDetailsName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: var(--leading-tight);
}

/* A long file name is cut with an ellipsis at 16rem; it never widens the bubble. */
.chat-file-card .chat-file-name { max-width: 16rem; }
.chat-file-text { flex: 1 1 auto; min-width: 0; }
.chat-file-cards { max-width: min(28rem, 100%); }
@media (max-width: 480px) { .chat-file-card .chat-file-name { max-width: calc(100vw - 14rem); } }

/* System lines ("Scout joined the conversation") are quiet notes, not
   speaker turns: no author row, no Speak button, no rule down the side. */
.chat-msg.system:not(.is-error) {
  align-self: center;
  max-width: min(100%, 36rem);
  padding: var(--space-1) var(--space-3);
  border-left: 0;
  text-align: center;
}
.chat-msg.system:not(.is-error) .chat-msg-head { display: none; }
.chat-msg.system:not(.is-error) .chat-msg-body { font-size: var(--text-sm); }
.chat-msg.system:not(.is-error) .chat-msg-copy-row { display: none; }

/* Switch rows: the Night owl row had no switch styling, so the raw checkbox
   showed next to the track. Same switch as Local only. */
.account-toggle-row > input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.account-toggle-row input:checked + .switch-track { background: var(--navy-fill); }
.account-toggle-row input:checked + .switch-track::after { transform: translateX(0.92rem); }
.account-toggle-row input:focus-visible + .switch-track { box-shadow: var(--ctl-ring, 0 0 0 2px var(--paper)), 0 0 0 4px var(--ink); }
.account-toggle-row { cursor: pointer; }

/* Settings panes that only held raw controls (Preferences, Voice, Team). */
.account-pane .check-inline,
.account-pane .inline-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  margin: var(--space-2) 0;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.account-pane input[type="checkbox"] {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.account-pane .section-note { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--muted); }
.account-pane a:not(.btn) { color: var(--link); font-weight: var(--weight-semibold); text-underline-offset: 2px; }
.team-members {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.team-members legend { padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.account-pane .team-member {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  margin: 0;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

/* Sign-up terms: a normal checkbox; the whole line is the tap target. */
.check { align-items: center; cursor: pointer; }
.check input {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  accent-color: var(--ink);
}
.check span { font-weight: var(--weight-medium); font-size: var(--text-sm); }

@media (max-width: 1023px) {
  /* A card with setup progress or a failure note: the avatar sits by the name. */
  body[data-pane="agents"] .bot-rail .bot-card:has(.provision-progress) .bot-avatar-edit { align-self: start; margin-top: var(--space-1); }
}

@media (max-width: 480px) {
  /* Phone composer: slimmer pills so "No project" shows in full. */
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer #composerModeWrap { flex: 0 1 68px; }
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer .composer-mode select,
  body[data-pane="agents"][data-agents-view="chat"] .chat-composer .composer-project select { padding: 0 var(--space-5) 0 var(--space-3); font-size: var(--text-sm); }
  /* The state line above the composer already says Sleeping / Waking. */
  .mobile-bar #mobileWake { display: none; }
  .chat-composer .composer-mode::after,
  .chat-composer .composer-project::after,
  .chat-composer .check-inline:has(#chatProject)::after { right: var(--space-2); }
}

/* Settings > Agents rows: the status and actions line up in one column on the
   right whatever the name length; an empty meta line takes no room. */
.settings-body .agent-row-copy { flex: 1 1 14rem; min-width: 0; }
.agent-row-meta:empty { display: none; }

/* Billing sheet: plan lines read as plain text under the plan name, not as a
   two-column grid with tall gaps. */
#accountSheet .plan-roles,
#accountSheet .plan-vps {
  display: block;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--muted);
}
#accountSheet .plan-vps:empty, #accountSheet .plan-roles:empty { display: none; }
@media (min-width: 1024px) {
  #accountSheet .account-billing > .billing-grid > .account-usage { align-self: start; }
}
/* A card stretched to its row's height keeps its lines together at the top
   instead of spreading the spare room between them. */
#accountSheet .plan-card,
#accountSheet #creditsCard,
#accountSheet .account-usage { align-content: start; }
#accountSheet .plan-name { margin: var(--space-1) 0; }
#accountSheet #creditsBalance { margin: var(--space-1) 0; }
@media (max-width: 1023px) {
  /* The phone tab bar is solid, so nothing scrolls into view behind it. */
  body .pane-switch { background: var(--paper); }
}
/* Search boxes: the clear cross follows the text colour, not the browser blue. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-inline-start: var(--space-2);
  background: var(--muted);
  -webkit-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.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}
/* Settings > Computer: state, detail and per-agent rows share one type scale. */
.account-computer .account-computer-label { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--muted); }
.account-computer .account-computer-detail { margin: var(--space-1) 0 var(--space-3); }
.account-computer-screen strong { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.account-computer-reason { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--muted); }

/* Phone tap targets: every button or link is at least 40px tall. */
@media (max-width: 1023px) {
  .bot-rail .bot-card > .btn,
  .bot-rail .bot-card .provision-progress > .btn,
  .bot-card > .btn { min-height: 40px; }
  .chat-file-card a.chat-file-download { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; }
  .mobile-brand { display: inline-flex; align-items: center; min-height: 44px; }
  .management-canvas .management-help summary { min-height: 40px; display: flex; align-items: center; }
  #accountLicencesLink { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Roster loading: three grey rows while the agent list is fetched. */
.roster-skeleton { display: flex; flex-direction: column; gap: var(--space-1); }
.roster-skeleton-row {
  position: relative;
  display: block;
  height: 52px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.roster-skeleton-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 70%, transparent), transparent) 0 0 / 50% 100% no-repeat;
  animation: roster-shimmer 1.2s ease-in-out infinite;
}
/* Reduced motion: the global rule at the end of this file stops this animation. */
@keyframes roster-shimmer { to { background-position: 100% 0; } }
@media (max-width: 1023px) {
  body[data-pane="agents"] .roster-skeleton { gap: var(--space-3); }
  body[data-pane="agents"] .roster-skeleton-row { height: 76px; border-radius: var(--radius-lg); }
}
/* A failed load shows its notice and Retry, not grey rows that never fill. */
#rosterLoadError:not([hidden]) ~ .bot-roster .roster-skeleton { display: none; }

/* Toasts: the open state set a pale background under the pale text, so the
   message could not be read in either theme. Solid ink with paper text. */
.toast.is-on {
  border-color: transparent;
  background: var(--ink);
  color: var(--paper);
}
.toast.is-on .toast-close:hover { background: color-mix(in srgb, var(--paper) 18%, transparent); }
.toast.is-on .toast-close:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
#accountSheet #creditsCard p { margin: 0; }
#accountSheet #creditsCard .plan-credits { margin-top: var(--space-2); }
#accountSheet #creditsCard .plan-note { margin-top: var(--space-1); }

/* Keyboard focus: the roster avatar and the voice button had no visible ring. */
.bot-avatar-edit:focus-visible,
.agent-avatar[role="button"]:focus-visible,
.btn.icon-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Desktop rail: a soft shadow at the top or bottom edge says there are more
   agents to scroll to (they are cut off by the Management / Projects block). */
@media (min-width: 1024px) {
  .bot-rail .bot-roster {
    background:
      linear-gradient(var(--rail-bg) 30%, transparent) center top / 100% 32px no-repeat local,
      linear-gradient(transparent, var(--rail-bg) 70%) center bottom / 100% 32px no-repeat local,
      linear-gradient(rgb(0 0 0 / 0.14), transparent) center top / 100% 10px no-repeat scroll,
      linear-gradient(transparent, rgb(0 0 0 / 0.14)) center bottom / 100% 10px no-repeat scroll;
  }
}

/* Chat options sheet (phone): actions first, account items last, one row
   style for all of them. */
@media (max-width: 1023px) {
  dialog.chat-overflow-panel.is-open { gap: var(--space-1); }
  dialog.chat-overflow-panel.is-open > .sheet-head { order: 0; margin-bottom: var(--space-2); }
  dialog.chat-overflow-panel.is-open > .routines-menu-item { order: 1; }
  dialog.chat-overflow-panel.is-open > .chat-overflow-tools { order: 2; }
  dialog.chat-overflow-panel.is-open > .chat-actions { order: 3; }
  dialog.chat-overflow-panel.is-open > .theme-toggle-menu { order: 4; margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
  dialog.chat-overflow-panel.is-open > #logoutBtnChat { order: 5; }
  dialog.chat-overflow-panel.is-open > .overflow-legal { order: 6; }
  dialog.chat-overflow-panel.is-open .routines-menu-item,
  dialog.chat-overflow-panel.is-open #logoutBtnChat,
  dialog.chat-overflow-panel.is-open .overflow-legal {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    text-align: left;
    text-decoration: none;
  }
  dialog.chat-overflow-panel.is-open .overflow-legal { color: var(--muted); }
  dialog.chat-overflow-panel.is-open .routines-menu-item:active,
  dialog.chat-overflow-panel.is-open #logoutBtnChat:active,
  dialog.chat-overflow-panel.is-open .overflow-legal:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  dialog.chat-overflow-panel.is-open .chat-actions .check-inline { margin: 0; padding: 0 var(--space-2); background: transparent; border: 0; border-radius: var(--radius-md); font-size: var(--text-md); color: var(--ink); }
}

/* Delete-agent dialog: a very long agent name wraps instead of being cut. */
#agentDeleteTitle,
#agentDeleteName { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }

/* Routines: the delivery notices had no style of their own and showed at
   body size; they read as a quiet muted line like the other notes. */
.routine-notice,
.routine-mail {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
.routine-notice[hidden] { display: none; }

/* Rail project entries: long names wrap to two lines then cut, never run off the rail. */
.bot-rail .desk-project-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.bot-rail .desk-project { min-width: 0; }
/* The rail lists project names only; the one-line description made three
   projects take half the column and squeezed the agent list. */
.bot-rail .desk-project-meta { display: none; }

/* Reply, sent time and the NEW line. Monochrome, like the rest of the chat. */
.chat-reply-quote {
  display: grid;
  gap: 0.05rem;
  width: 100%;
  margin: 0 0 0.3rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-left: 2px solid var(--line-strong);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}
.chat-reply-quote:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.chat-reply-quote-who { font-weight: 700; color: var(--ink); font-size: 0.72rem; }
.chat-reply-quote-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-msg-time {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.chat-msg.you .chat-msg-time { text-align: right; }

.chat-new-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.chat-new-divider::before,
.chat-new-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-strong);
}
.chat-new-divider-label {
  padding: 0.08rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.chat-msg.is-flash .chat-msg-main { animation: chatMsgFlash 1.4s ease-out; }
@keyframes chatMsgFlash {
  0%, 35% { box-shadow: 0 0 0 2px var(--ink); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
/* Reduced motion: the global rule above already stops this animation. */

.chat-reply-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper-soft);
  font-size: 0.8rem;
}
.chat-reply-chip[hidden] { display: none; }
.chat-reply-chip-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.05rem; }
.chat-reply-chip-label { font-weight: 700; font-size: 0.72rem; }
.chat-reply-chip-text { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-cancel {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.chat-reply-cancel:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }

.chat-msg-menu {
  position: fixed;
  z-index: 1000;
  min-width: 10rem;
  padding: 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.chat-msg-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 40px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}
.chat-msg-menu-item:hover,
.chat-msg-menu-item:focus-visible { background: color-mix(in srgb, var(--ink) 8%, transparent); outline: none; }

/* Phones: the time stays out of the way until a swipe left. */
@media (max-width: 1023px), (pointer: coarse) {
  .chat-msg { position: relative; touch-action: pan-y; }
  .chat-msg-main { transform: translateX(var(--swipe-x, 0px)); transition: transform 0.18s ease; }
  .chat-msg.is-swiping .chat-msg-main { transition: none; }
  .chat-msg .chat-msg-time {
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  /* Slides out by the time's own width ("14 Oct, 09:12" is wider than "09:12"), set by revealTime. */
  .chat-msg.is-time-revealed .chat-msg-main { transform: translateX(calc(-1 * max(3.6rem, var(--time-w, 0px) + 20px))); }
  .chat-msg.is-time-revealed .chat-msg-time { opacity: 1; }
  .chat-swipe-reply {
    position: absolute;
    left: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    opacity: 0;
  }
  .chat-msg.is-swiping[data-swipe="reply"] .chat-swipe-reply { opacity: 1; color: var(--ink); }
}

/* ── Chat refresh (Stitch, 17 Oct 2026): replies fall in place ──────────────
   One assistant slot from the first frame (avatar, name, working line, then the
   text streaming in the same place), grouped runs, quiet times, one composer
   button (Send / Stop / Voice share a cell), pickers in the composer.
   Reduced motion: the app's global rule already stops these animations. */
:root {
  --chat-you-bg: var(--navy-fill);
  --chat-you-ink: var(--on-navy);
  --chat-text: 15px;
  --chat-leading: 1.55;
  --chat-avatar: 26px;
  --chat-col: 46rem;
}
#chatLog { scroll-behavior: auto; overflow-anchor: auto; }
#chatLog > .chat-msg {
  margin-top: 18px;
  margin-bottom: 0;
  font-size: var(--chat-text);
  line-height: var(--chat-leading);
}
#chatLog > .chat-msg:first-child { margin-top: 4px; }
#chatLog > .chat-msg.is-grouped { margin-top: 4px; }
#chatLog > .chat-msg.cloud.is-grouped,
#chatLog > .chat-msg.local.is-grouped { margin-top: 10px; }
#chatLog .chat-msg-body { font-size: var(--chat-text); line-height: var(--chat-leading); letter-spacing: -0.003em; }

/* Assistant rows: no bubble, left-aligned, avatar + name above the first one of a run. */
#chatLog > .chat-msg.cloud,
#chatLog > .chat-msg.local {
  align-self: stretch;
  width: 100%;
  max-width: var(--chat-col);
  margin-inline: auto;
  text-align: left;
}
#chatLog > .chat-msg.cloud .chat-msg-main,
#chatLog > .chat-msg.local .chat-msg-main {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  max-width: 100%;
  width: auto;
  margin: 0;
  text-align: left;
}
#chatLog > .chat-msg.has-avatar .chat-msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--chat-avatar);
  margin: 0 0 4px;
  padding: 0;
}
#chatLog > .chat-msg.has-avatar .chat-msg-who {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
#chatLog > .chat-msg.is-grouped .chat-msg-head { display: none; }
.chat-msg-avatar {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: var(--chat-avatar);
  height: var(--chat-avatar);
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper-soft);
  color: var(--ink);
  overflow: hidden;
}
.chat-msg-avatar .phoenix-slot { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.chat-msg-avatar .phoenix-sprite { width: 18px; height: 18px; }
.chat-msg-avatar.is-initial { font-size: 12px; font-weight: 700; }
/* The avatar is the working indicator: its sprite moves only while that reply is in flight. */
#chatLog .chat-msg.is-working .chat-msg-avatar .phoenix-sprite.is-live .phoenix-frame {
  animation-duration: var(--phoenix-cycle, 1.6s);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
#chatLog .chat-msg.is-working .chat-msg-avatar { border-color: var(--ink); }

/* Your messages: a dark bubble on the right; a run hugs together. */
#chatLog > .chat-msg.you { align-self: stretch; width: 100%; max-width: var(--chat-col); margin-inline: auto; }
#chatLog > .chat-msg.you .chat-msg-main {
  width: fit-content;
  max-width: min(78%, 34rem);
  margin-left: auto;
  margin-right: 0;
  padding: 9px 14px;
  border: 0;
  border-radius: 20px 20px 6px 20px;
  background: var(--chat-you-bg);
  color: var(--chat-you-ink);
  box-shadow: none;
}
#chatLog > .chat-msg.you.is-grouped .chat-msg-main { border-top-right-radius: 6px; }
#chatLog > .chat-msg.you:not(.is-group-end) .chat-msg-main { border-bottom-right-radius: 6px; }
#chatLog > .chat-msg.you .chat-msg-body,
#chatLog > .chat-msg.you .chat-msg-body :not(.chat-code, .chat-code *) { color: inherit; }
#chatLog > .chat-msg.you .chat-msg-body a { text-decoration: underline; }
/* Code in your bubble: inline code is a grey tint of the bubble (readable on the dark
   bubble and on the near-white dark-theme one); a code block keeps its own dark card. */
#chatLog > .chat-msg.you .chat-msg-body .chat-inline-code { background: rgba(127, 127, 127, 0.25); }
#chatLog > .chat-msg.you .chat-reply-quote { background: rgba(255, 255, 255, 0.12); color: inherit; }
#chatLog > .chat-msg.you .chat-reply-quote-who { color: inherit; }
#chatLog > .chat-msg.you.pending .chat-msg-main { opacity: 1; }

/* The reply slot while it works: the same row as the finished reply. */
#chatLog > .chat-msg.pending .chat-msg-main,
#chatLog > .chat-msg.thinking .chat-msg-main,
#chatLog > .chat-msg.is-working .chat-msg-main {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  opacity: 1;
}
#chatLog .chat-msg.has-avatar .chat-working {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 0;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  font-size: 13px;
  line-height: 22px;
  color: var(--muted);
}
#chatLog .chat-msg.has-avatar .chat-working::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: chat-pulse 1.2s ease-in-out infinite;
}
#chatLog .chat-msg.has-avatar .chat-working-live { display: contents; }
#chatLog .chat-msg.has-avatar .chat-working-live .phoenix-slot { display: none; }
#chatLog .chat-msg.has-avatar .chat-working-elapsed,
#chatLog .chat-msg.has-avatar .chat-working-status,
#chatLog .chat-msg.has-avatar .chat-skill-line {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 22px;
  color: var(--muted);
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
}
#chatLog .chat-msg.has-avatar .chat-working-status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#chatLog .chat-msg.has-avatar .chat-working-elapsed::before {
  content: "Working \00b7  ";
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: none;
  animation: none;
  white-space: pre;
}
#chatLog .chat-msg.has-avatar .chat-working-status:not([hidden])::before,
#chatLog .chat-msg.has-avatar .chat-working-steps:not([hidden])::before { content: "\00b7"; margin-right: 6px; }
#chatLog .chat-msg.has-avatar .chat-working-steps {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
#chatLog .chat-msg.has-avatar .chat-working-steps[hidden] { display: none; }
#chatLog .chat-msg.has-avatar .chat-working-step {
  display: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 34ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 22px;
  text-align: left;
}
#chatLog .chat-msg.has-avatar .chat-working-step::before,
#chatLog .chat-msg.has-avatar .chat-working-step::marker { content: none; }
#chatLog .chat-msg.has-avatar .chat-working-step:last-child { display: block; }
#chatLog .chat-msg.has-avatar .chat-working-dots {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  height: calc(var(--chat-text) * var(--chat-leading));
  margin-top: 6px;
}
#chatLog .chat-msg.has-avatar .chat-working-dots[hidden] { display: none; }
#chatLog .chat-msg.has-avatar .chat-working-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.35;
  animation: chat-dot 1.2s ease-in-out infinite;
}
#chatLog .chat-msg.has-avatar .chat-working-dots i:nth-child(2) { animation-delay: 0.15s; }
#chatLog .chat-msg.has-avatar .chat-working-dots i:nth-child(3) { animation-delay: 0.3s; }
/* The streamed text takes the slot the working line had (first in the row) and the
   line moves below it, where the finished reply keeps its "Worked for" summary: the
   text stays at one y from its first word to the stored copy. */
#chatLog .chat-msg.has-avatar .chat-working-text {
  order: -1;
  flex: 0 0 100%;
  margin-top: 0;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: var(--chat-text);
  line-height: var(--chat-leading);
  text-align: left;
  animation: chat-text-in 0.22s ease-out;
}
#chatLog .chat-msg.has-avatar .chat-working-text[hidden] { display: none; }
@keyframes chat-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes chat-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 0.9; transform: translateY(-2px); } }
@keyframes chat-text-in { from { opacity: 0; } to { opacity: 1; } }

/* Finished: "Worked for Xs · N steps" sits where the working line was. */
#chatLog .chat-msg.has-avatar .chat-served-tier { display: none; }
#chatLog .chat-msg.has-avatar .chat-trace {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  line-height: 22px;
  color: var(--muted);
}
#chatLog .chat-msg.has-avatar .chat-trace > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 22px;
  cursor: pointer;
  list-style: none;
}
#chatLog .chat-msg.has-avatar .chat-trace > summary::-webkit-details-marker { display: none; }
#chatLog .chat-msg.has-avatar .chat-trace > summary::before { content: none; display: none; }
#chatLog .chat-msg.has-avatar .chat-trace > summary .phoenix-slot { display: none; }
#chatLog .chat-msg.has-avatar .chat-trace > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
#chatLog .chat-msg.has-avatar .chat-trace[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
#chatLog .chat-msg.has-avatar .chat-trace > summary:hover { color: var(--ink); }
#chatLog .chat-msg.has-avatar .chat-trace ol { margin: 4px 0 6px; padding-left: 18px; }

/* A routine's reply carries a quiet chip. */
#chatLog .chat-routine-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 0 0 6px;
  padding: 1px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 20px;
}

/* Times stay quiet: on a pointer screen the middle of a run shows its time on hover. */
@media (min-width: 1024px) and (pointer: fine), (min-width: 1024px) and (pointer: none) {
  #chatLog > .chat-msg:not(.is-group-end) .chat-msg-time { opacity: 0; transition: opacity 0.15s ease; }
  #chatLog > .chat-msg:not(.is-group-end):hover .chat-msg-time { opacity: 1; }
  #chatLog > .chat-msg.you .chat-msg-main .chat-msg-time { color: color-mix(in srgb, var(--chat-you-ink) 62%, transparent); }
}

/* Composer: one rounded box; the text on top, then a quiet row of pickers, and
   one round button at the end that is Send, Stop or Voice. */
#chatForm .chat-composer {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "input input input input input"
    "attach mode project mic action";
  align-items: center;
  column-gap: 6px;
  row-gap: 4px;
  width: 100%;
  max-width: var(--chat-col);
  margin-inline: auto;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: var(--paper-input);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#chatForm .chat-composer > textarea#chatInput {
  grid-area: input;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 6px 4px;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  line-height: 1.45;
  resize: none;
}
#chatForm .chat-composer > #chatAttach { grid-area: attach; }
#chatForm .chat-composer > #composerModeWrap { grid-area: mode; }
#chatForm .chat-composer > .composer-project { grid-area: project; justify-self: start; max-width: 100%; min-width: 0; }
#chatForm .chat-composer > #chatMic { grid-area: mic; }
#chatForm .chat-composer > #chatSend { grid-area: action; justify-self: end; }
#chatForm .chat-composer > #chatAttach,
#chatForm .chat-composer > #chatMic {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}
#chatForm .chat-composer > #chatAttach:hover,
#chatForm .chat-composer > #chatMic:hover { background: var(--paper-soft); color: var(--ink); }
#chatForm .chat-composer .composer-mode select,
#chatForm .chat-composer .composer-project select {
  height: 32px;
  min-height: 32px;
  max-width: 100%;
  padding: 0 26px 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chatForm .chat-composer .composer-project .chat-project-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#chatForm .chat-composer > #chatSend {
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy-fill);
  color: var(--on-navy);
  font-size: 0;
  box-shadow: none;
}
#chatForm .chat-composer > #chatSend { color: transparent; }
#chatForm .chat-composer > #chatSend::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: var(--on-navy);
  -webkit-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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
#chatForm .chat-composer > #chatSend:disabled { opacity: 0.45; }
#chatForm .chat-composer > [hidden] { display: none !important; }
#chatForm .chat-reply-chip { max-width: var(--chat-col); margin-inline: auto; margin-bottom: 6px; border-radius: 14px; }
#chatForm .composer-disclaimer { font-size: 11px; color: var(--muted); text-align: center; }

/* Desktop: a centred reading column with the avatar in the gutter. */
@media (min-width: 1024px) {
  #chatLog > .chat-msg.has-avatar .chat-msg-main { padding-left: calc(var(--chat-avatar) + 10px); position: relative; }
  #chatLog > .chat-msg.has-avatar .chat-msg-head { margin-left: calc(-1 * (var(--chat-avatar) + 10px)); gap: 10px; }
  #chatLog > .chat-msg.has-avatar .chat-msg-time { margin-top: 4px; }
}

/* Phones: full-width text under a small avatar; the composer hugs the bottom. */
@media (max-width: 1023px) {
  :root { --chat-text: 16px; --chat-avatar: 24px; }
  #chatLog > .chat-msg { margin-top: 16px; }
  #chatLog > .chat-msg.is-grouped { margin-top: 3px; }
  #chatLog > .chat-msg.you .chat-msg-main { max-width: 82%; padding: 8px 13px; }
  body[data-pane="agents"][data-agents-view="chat"] #chatForm .chat-composer {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    padding: 6px 6px 6px 8px;
    border-radius: 22px;
    column-gap: 4px;
  }
  body[data-pane="agents"][data-agents-view="chat"] #chatForm .chat-composer > #chatSend {
    position: relative;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    flex: none;
    margin: 0;
    grid-area: action;
  }
  body[data-pane="agents"][data-agents-view="chat"] #chatForm .chat-composer > #chatAttach,
  body[data-pane="agents"][data-agents-view="chat"] #chatForm .chat-composer > #chatMic {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border: 0;
    background: transparent;
  }
  body[data-pane="agents"][data-agents-view="chat"] #chatForm .chat-composer .composer-mode select,
  body[data-pane="agents"][data-agents-view="chat"] #chatForm .chat-composer .composer-project select {
    min-height: 34px;
    height: 34px;
    border: 1px solid var(--line);
    background-color: transparent;
  }
  body[data-pane="agents"][data-agents-view="chat"] #chatForm .chat-composer > #composerModeWrap { flex: none; }
  body[data-pane="agents"][data-agents-view="chat"] #chatForm .chat-composer > .composer-project { flex: none; max-width: 100%; }
}
/* Copy stays a 44px target but takes little room under a reply; quieter on touch. */
#chatLog > .chat-msg:not(.you) .chat-msg-copy-row { margin: -6px 0 -12px -12px; }
#chatLog > .chat-msg.pending .chat-msg-copy-row { visibility: hidden; }
@media (max-width: 1023px), (pointer: coarse) {
  #chatLog .chat-msg-copy:not(:focus-visible) { opacity: 0.5; }
  /* Swipe left: the time shows in the space the message slides out of. */
  #chatLog > .chat-msg .chat-msg-main > .chat-msg-time { right: auto; left: calc(100% + 8px); white-space: nowrap; color: var(--muted); }
  #chatLog { overflow-x: hidden; }
}
/* ── end chat refresh ── */

/* Rename from the details panel head: the name is a button, with a pencil beside it. */
.desk-details-title { display: flex; align-items: center; gap: 0.3rem; }
#deskDetailsName.is-renamable { cursor: pointer; border-radius: var(--radius-sm); }
#deskDetailsName.is-renamable:hover { text-decoration: underline; text-underline-offset: 3px; }
#deskDetailsName.is-renamable:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.desk-name-edit {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); cursor: pointer;
}
.desk-name-edit:hover, .desk-name-edit:focus-visible { color: var(--ink); border-color: var(--line); }

/* The sidebar agent row menu: ... on the row (always on a phone, on hover or focus on desktop),
   right-click or long-press. Black and white like the rest of the rail. */
.bot-card.has-row-menu { -webkit-touch-callout: none; position: relative; padding-right: 2.75rem; }
.bot-card.has-row-menu > .bot-more {
  position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer;
}
@media (hover: hover) { .bot-card.has-row-menu > .bot-more:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); } }
.bot-more:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); outline: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .bot-card .bot-more { opacity: 0; }
  .bot-card:hover .bot-more, .bot-card:focus-within .bot-more, .bot-more:focus-visible { opacity: 1; }
}
@media (max-width: 1023px), (pointer: coarse) {
  .bot-card.has-row-menu { padding-right: 3.25rem; }
  .bot-card.has-row-menu > .bot-more { width: 44px; height: 44px; }
}
.agent-row-menu {
  position: fixed; z-index: 1000; min-width: 12rem; padding: 0.3rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.agent-row-menu-item {
  display: block; width: 100%; min-height: 44px; padding: 0 0.75rem; text-align: left;
  border: none; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: inherit; cursor: pointer;
}
.agent-row-menu-item:hover, .agent-row-menu-item:focus-visible { background: color-mix(in srgb, var(--ink) 8%, transparent); outline: none; }


/* The send goes out: dim the button, keep its label, icon and size. */
.chat-form #chatSend.is-sending { opacity: 0.6; pointer-events: none; }

/* One action button (#chatSend): Send, Stop and voice are one node; data-mode swaps the glyph. */
#chatForm .chat-composer > #chatSend[data-mode="stop"]::before,
#chatForm .chat-composer > #chatSend[data-mode="voice"]::before {
  -webkit-mask-size: contain;
  mask-size: contain;
}
#chatForm .chat-composer > #chatSend[data-mode="stop"]::before {
  width: 13px;
  height: 13px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='3.5' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='3.5' fill='black'/%3E%3C/svg%3E");
}
#chatForm .chat-composer > #chatSend[data-mode="voice"]::before {
  width: 18px;
  height: 18px;
  -webkit-mask-image: 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' stroke-linecap='round'%3E%3Cpath d='M4 10v4M8 7v10M12 4v16M16 7v10M20 10v4'/%3E%3C/svg%3E");
  mask-image: 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' stroke-linecap='round'%3E%3Cpath d='M4 10v4M8 7v10M12 4v16M16 7v10M20 10v4'/%3E%3C/svg%3E");
}
#chatForm .chat-composer > #chatSend[data-mode="voice"] { cursor: default; }
#chatForm .chat-composer > #chatSend[data-stopping] { opacity: 0.45; pointer-events: none; }

/* Stop in the working line, for when the composer button reads Send (a follow-up is typed). */
.chat-working-stop {
  margin: 0 0 0 auto;
  padding: 0 0.15rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.chat-working-stop:hover,
.chat-working-stop:focus-visible { color: var(--ink); }
.chat-working-stop:disabled { opacity: 0.45; cursor: default; }
/* The composer button already reads Stop (syncComposerButtons): one Stop on screen. */
#chatLog.composer-stops .chat-working-stop { display: none; }

/* A long press opens the message menu (chat-actions.js), not the OS callout. */
#chatLog > .chat-msg { -webkit-touch-callout: none; }
/* Links and pictures keep it: link preview, Save Image. */
#chatLog > .chat-msg a,
#chatLog > .chat-msg img,
#chatLog > .chat-msg video { -webkit-touch-callout: default; }
/* While a finger holds a row, iOS does not start its own text selection under the menu. */
#chatLog > .chat-msg.is-pressing,
#chatLog > .chat-msg.is-pressing * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* A resumed or just-sent own message looks like any own bubble from its first frame. */
#chatLog > .chat-msg.you.pending .chat-msg-main {
  background: var(--chat-you-bg);
  color: var(--chat-you-ink);
}

/* ── Chat redesign v2 (visual pass, 18 Oct 2026) ────────────────────────────
   Scoped to the chat page (#chatLog, #chatForm, .chat-jump). Greyscale only.
   Calm centred column, grouped speakers, own bubbles on the right with the time
   beneath, bare agent replies with a hover toolbar, one quiet working line, a
   hairline NEW divider, a soft composer card. Rows are never rebuilt: this is
   styling only, it reads the classes the row builders already set
   (.is-grouped / .is-group-end / .has-avatar / .pending / .is-working).
   Reduced motion: the app's global rule (*, ::before, ::after { animation: none; transition: none }) stops
   every transition and animation in this block; it adds no reduced-motion rule of its own. */
:root {
  --chat-col: 47.5rem;
  --chat-you-bg: var(--navy-fill);
  --chat-you-ink: var(--on-navy);
  --chat-text: 15.5px;
  --chat-leading: 1.6;
  --chat-gap-group: 26px;
  --chat-gap-run: 4px;
}
html[data-theme="dark"] { --chat-you-bg: var(--navy-fill); --chat-you-ink: var(--on-navy); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --chat-you-bg: var(--navy-fill); --chat-you-ink: var(--on-navy); }
}
#chatLog { padding-bottom: 28px; gap: 0; }
#chatLog > .chat-msg { margin-top: var(--chat-gap-group); }
#chatLog > .chat-msg:first-child { margin-top: 6px; }
#chatLog > .chat-msg.is-grouped { margin-top: var(--chat-gap-run); }
#chatLog > .chat-msg.cloud.is-grouped,
#chatLog > .chat-msg.local.is-grouped { margin-top: 10px; }
#chatLog .chat-msg-body { letter-spacing: -0.005em; overflow-wrap: anywhere; }

/* Group header: avatar + name, once per run. */
#chatLog > .chat-msg.has-avatar .chat-msg-head { margin-bottom: 6px; }
#chatLog > .chat-msg.has-avatar .chat-msg-who { font-size: 13.5px; font-weight: 600; }
.chat-msg-avatar { border-color: var(--line); background: var(--paper-soft); box-shadow: none; }
#chatLog .chat-msg.is-working .chat-msg-avatar { border-color: var(--line-strong); }

/* Your messages: a solid bubble, small corner on the tail side. */
#chatLog > .chat-msg.you .chat-msg-main,
#chatLog > .chat-msg.you.pending .chat-msg-main {
  max-width: min(80%, 34rem);
  padding: 9px 15px;
  border-radius: 18px 18px 4px 18px;
  background: var(--chat-you-bg);
  color: var(--chat-you-ink);
  box-shadow: none;
}
#chatLog > .chat-msg.you.is-grouped .chat-msg-main { border-top-right-radius: 4px; }
#chatLog > .chat-msg.you:not(.is-group-end) .chat-msg-main { border-bottom-right-radius: 4px; }
#chatLog > .chat-msg.you .chat-msg-body { line-height: 1.5; }
#chatLog > .chat-msg.you .chat-reply-quote { background: color-mix(in srgb, var(--chat-you-ink) 14%, transparent); border-left-color: color-mix(in srgb, var(--chat-you-ink) 55%, transparent); }
#chatLog > .chat-msg.you .chat-reply-quote-text { opacity: 0.8; }

/* Times: small and muted. */
#chatLog .chat-msg-time { font-size: 11px; line-height: 1.3; margin-top: 4px; color: var(--muted); letter-spacing: 0.01em; }
#chatLog > .chat-msg.you .chat-msg-main .chat-msg-time { color: color-mix(in srgb, var(--chat-you-ink) 58%, transparent); }

/* Copy: a small round button, never a row of its own. */
#chatLog .chat-msg-copy-row { position: absolute; min-height: 0; margin: 0; z-index: 2; }
#chatLog > .chat-msg:not(.you) .chat-msg-copy-row { margin: 0; }
#chatLog .chat-msg-copy { width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-radius: 8px; color: var(--muted); }
#chatLog .chat-msg-copy svg { width: 15px; height: 15px; }
#chatLog .chat-msg-copy:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
#chatLog .chat-msg-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Agent replies: clean text; the toolbar floats top-right on hover or focus. */
#chatLog > .chat-msg:not(.you):not(.system) .chat-msg-main { position: relative; }
#chatLog > .chat-msg:not(.you) .chat-msg-copy-row {
  top: -12px;
  right: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
#chatLog > .chat-msg.you .chat-msg-copy-row { right: calc(100% + 6px); top: 50%; bottom: auto; margin: 0; transform: translateY(-50%); }
#chatLog > .chat-msg.pending .chat-msg-copy-row { visibility: hidden; }
#chatLog .chat-speak {
  min-height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
#chatLog .chat-speak:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }

@media (min-width: 1024px) and (pointer: fine), (min-width: 1024px) and (pointer: none) {
  #chatLog .chat-msg-copy-row { opacity: 0; transition: opacity 0.14s ease; }
  #chatLog .chat-msg-copy { opacity: 1; }
  #chatLog > .chat-msg:hover .chat-msg-copy-row,
  #chatLog > .chat-msg:focus-within .chat-msg-copy-row { opacity: 1; }
  #chatLog .chat-speak { opacity: 0; transition: opacity 0.14s ease; }
  #chatLog > .chat-msg:hover .chat-speak,
  #chatLog > .chat-msg:focus-within .chat-speak { opacity: 1; }
}
/* On touch the long-press menu carries Copy / Reply; the button stays out of the way. */
@media (max-width: 1023px), (pointer: coarse) {
  #chatLog .chat-msg-copy-row { display: none; }
}

/* A file card can widen a "you" bubble enough that the floating copy button
   (positioned left of the bubble) lands past #chatLog's clipped left edge.
   Keep it in flow instead, wherever it is visible. */
#chatLog > .chat-msg.you .chat-msg-main:has(.chat-file-cards) .chat-msg-copy-row {
  position: static;
  justify-content: flex-end;
  top: auto;
  right: auto;
  bottom: auto;
  margin: 0.15rem 0 0;
  transform: none;
}

/* Desktop: the time sits beneath the last message of a run, and shows beside the
   toolbar on hover for the others (out of flow, so nothing moves). */
@media (min-width: 1024px) and (pointer: fine), (min-width: 1024px) and (pointer: none) {
  #chatLog > .chat-msg.you .chat-msg-main > .chat-msg-time {
    position: absolute;
    top: 100%;
    right: 3px;
    margin: 3px 0 0;
    white-space: nowrap;
    color: var(--muted);
    opacity: 1;
  }
  #chatLog > .chat-msg.you:not(.is-group-end) .chat-msg-main > .chat-msg-time {
    top: 50%;
    right: calc(100% + 42px);
    margin: 0;
    transform: translateY(-50%);
    opacity: 0;
  }
  #chatLog > .chat-msg.you:not(.is-group-end):hover .chat-msg-main > .chat-msg-time { opacity: 1; }
  #chatLog > .chat-msg:not(.you):not(.is-group-end) .chat-msg-main > .chat-msg-time {
    position: absolute;
    top: -12px;
    right: 40px;
    margin: 0;
    line-height: 32px;
    opacity: 0;
    transition: opacity 0.14s ease;
  }
  #chatLog > .chat-msg:not(.you):not(.is-group-end):hover .chat-msg-main > .chat-msg-time { opacity: 1; }
  #chatLog > .chat-msg.you.is-group-end { margin-bottom: 14px; }
}

/* The working line: one quiet grey line, dots inline, no ink-coloured pulse. */
#chatLog .chat-msg.has-avatar .chat-working::before { display: none; }
#chatLog .chat-msg.has-avatar .chat-working:not([hidden]) { column-gap: 8px; font-size: 13px; }
#chatLog .chat-msg.has-avatar .chat-working-dots {
  flex: 0 0 auto;
  order: -1;
  height: 22px;
  margin: 0;
  gap: 3px;
}
#chatLog .chat-msg.has-avatar .chat-working-dots i { width: 4px; height: 4px; background: var(--muted); }
#chatLog .chat-msg.has-avatar .chat-working-text { margin-bottom: 8px; }
#chatLog .chat-msg.has-avatar .chat-trace { margin-top: 8px; font-size: 12.5px; }
#chatLog .chat-msg.has-avatar .chat-trace > summary { font-size: 12.5px; min-height: 22px; }
#chatLog .chat-msg.has-avatar .chat-trace > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
#chatLog .chat-routine-line { font-size: 11.5px; padding: 0 9px; line-height: 20px; }

#chatLog .chat-msg.has-avatar .chat-working-stop { order: 20; flex: 0 0 auto; min-height: 22px; }

/* NEW divider: a hairline with a small pill. */
#chatLog > .chat-new-divider {
  width: 100%;
  max-width: var(--chat-col);
  margin: 22px auto 4px;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
#chatLog > .chat-new-divider::before,
#chatLog > .chat-new-divider::after { background: var(--line); }
#chatLog > .chat-new-divider .chat-new-divider-label {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-soft);
  color: var(--ink);
}
#chatLog > .chat-new-divider + .chat-msg { margin-top: 22px; }

/* Jump pill above the composer. */
.chat-jump {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: 600 12.5px var(--font-ui);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.15s ease;
}
.chat-jump:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); }
.chat-jump:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Composer: a soft card; one row of controls; the round button inside, bottom right. */
.chat-form { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
#chatForm .chat-composer {
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  padding: 8px 8px 8px 12px;
}
#chatForm:focus-within .chat-composer {
  border-color: color-mix(in srgb, var(--ink) 45%, var(--line-strong));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.08);
}
#chatForm .chat-composer > textarea#chatInput { max-height: 40vh; font-size: 16px; line-height: 1.5; overflow-y: auto; }
#chatForm .chat-composer > textarea#chatInput::placeholder { color: var(--muted); opacity: 0.85; }
#chatForm .chat-composer .composer-mode select,
#chatForm .chat-composer .composer-project select { border-color: var(--line); font-size: 12.5px; color: var(--muted); }
#chatForm .chat-composer .composer-mode select:hover,
#chatForm .chat-composer .composer-project select:hover { color: var(--ink); border-color: var(--line-strong); }
#chatForm .chat-composer > #chatSend {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: opacity 0.15s ease, transform 0.12s ease;
}
#chatForm .chat-composer > #chatSend:active:not(:disabled) { transform: scale(0.94); }
#chatForm .chat-composer > #chatSend:disabled,
#chatForm .chat-composer > #chatSend[data-mode="voice"] { opacity: 0.35; }
#chatForm .chat-composer :is(button, select):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#chatForm .composer-disclaimer { margin-top: 8px; }

/* Empty state: quiet, centred. */
#chatLog > .chat-empty { max-width: 32rem; padding: 2.5rem 1rem; }
#chatLog > .chat-empty .state-title { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; }
#chatLog > .chat-empty .state-copy { max-width: 34ch; font-size: 0.92rem; line-height: 1.5; color: var(--muted); }
#chatLog > .chat-empty .chip-btn { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; }

@media (max-width: 1023px) {
  :root { --chat-text: 16px; --chat-gap-group: 22px; }
  #chatLog { padding-left: 14px; padding-right: 14px; padding-bottom: 18px; }
  #chatLog > .chat-msg.you.pending .chat-msg-main,
  #chatLog > .chat-msg.you .chat-msg-main { max-width: 84%; padding: 8px 14px; }
  .chat-form { padding-left: 10px; padding-right: 10px; }
  #chatForm .chat-composer { border-radius: 22px; padding: 6px 6px 6px 8px; }
  #chatForm .chat-composer .composer-mode select,
  #chatForm .chat-composer .composer-project select { min-height: 40px; height: 40px; font-size: 13px; }
  .chat-jump { min-height: 40px; }
  #chatLog > .chat-new-divider { margin-top: 18px; }
}
/* Copy keeps a 44px target wherever a pointer can't hover (it is hidden there, but a focused one stays usable). */
@media (max-width: 1023px), (pointer: coarse) {
  #chatLog .chat-msg-copy { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}
/* ── end chat redesign v2 ── */
/* Phones: the small text controls inside a message keep a 40px tap target without growing the line. */
@media (max-width: 1023px), (pointer: coarse) {
  #chatLog .chat-msg.has-avatar .chat-working-stop { min-height: 40px; min-width: 44px; margin-block: -9px; }
  #chatLog .chat-msg.has-avatar .chat-trace > summary { min-height: 40px; margin-block: -9px; }
}

/* iPhone: pickers stay at 16px so iOS does not zoom on tap; the mic is a hold-to-talk surface
   that must not scroll or select; --vvh (set from visualViewport) fits the chat above the keyboard. */
@media (pointer: coarse) {
  #chatForm .chat-composer .composer-mode select,
  #chatForm .chat-composer .composer-project select,
  .goal-continue input,
  body #folderView .goal-queue-row select,
  body #folderView .goal-queue-row input { font-size: 16px !important; }
  #chatMic { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
}
@media (max-width: 1023px) {
  body.is-kb[data-pane="agents"][data-agents-view="chat"] {
    height: var(--vvh, 100dvh);
    max-height: var(--vvh, 100dvh);
  }
  body.is-kb[data-pane="agents"][data-agents-view="chat"] .chat-form { padding-bottom: 0.55rem; }
}

/* Phone Team: the agent palette is a single row of small chips so the canvas gets the screen. */
@media (max-width: 1023px) {
  body.is-management .management-canvas .management-palette-card .management-stat { display: none !important; }
  /* The finder chip is too small for a label and a bar; the full card on
     the canvas still carries it. */
  body.is-management .management-canvas .management-palette-card .level-bar { display: none !important; }
  body.is-management .management-canvas .management-canvas-head { padding: 0.4rem 0.75rem 0.2rem; }
  body.is-management .management-canvas .management-search { padding: 0.3rem 0.75rem 0; }
  body.is-management .management-canvas .management-search input { min-height: 38px; font-size: 16px; }
  body.is-management .management-canvas .management-palette { padding: 0.35rem 0.75rem 0.45rem; gap: 0.4rem; align-items: center; }
  body.is-management .management-canvas .management-palette-card {
    flex: 0 0 auto;
    width: auto;
    max-width: 10rem;
    margin: 0;
    padding: 0.2rem 0.65rem 0.2rem 0.25rem;
    border-radius: 999px;
    gap: 0;
  }
  body.is-management .management-canvas .management-palette-card .management-card-top { gap: 0.4rem; }
  body.is-management .management-canvas .management-palette-card .management-card-top strong {
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }
  body.is-management .management-canvas .management-palette-card .management-avatar.agent-avatar { width: 28px; height: 28px; flex: 0 0 28px; }
  body.is-management .management-canvas .management-palette-card .management-avatar .phoenix-sprite { width: 1.1rem; height: 1.1rem; }
}

/* Narration the agent said before its steps: in the activity, never the reply. */
.trace-notes,
.chat-working-notes {
  display: grid;
  gap: 0.2rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--muted);
}
.trace-note,
.chat-working-note { overflow-wrap: anywhere; }
.chat-trace:not([open]) > .trace-notes { display: none; user-select: none; }
.template-gallery { margin: 0 0 var(--space-4); min-width: 0; }
.template-gallery-bar { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-3); }
.template-search { width: 100%; margin: 0; }
.template-cats {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.template-cat {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.template-cat.is-selected { background: var(--ink); color: var(--on-navy); border-color: var(--ink); }
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: var(--space-2);
}
.template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-align: left;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  min-height: 5.5rem;
  cursor: pointer;
  font: inherit;
}
.template-card strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.template-card span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.template-card.is-selected { border-color: var(--ink); background: var(--paper-soft); }
.template-detail {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}
.template-detail-head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; }
.template-pick { margin: 0; font-weight: var(--weight-semibold); }
.template-label {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--muted);
}
.template-checks, .template-skills, .template-tasks { display: flex; flex-direction: column; gap: var(--space-2); }
.template-checks { flex-direction: row; flex-wrap: wrap; }
.template-check {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}
.template-skill summary { cursor: pointer; color: var(--muted); font-size: var(--text-xs); }
.template-skill-body {
  white-space: pre-wrap;
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}
.template-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.template-task textarea { grid-column: 1 / -1; min-height: 3.2rem; }
@media (max-width: 720px) {
  .template-grid { grid-template-columns: minmax(0, 1fr); }
  .template-cats { flex-wrap: nowrap; overflow-x: auto; }
  .template-cat { flex: 0 0 auto; }
  .template-task { grid-template-columns: minmax(0, 1fr); }
  .template-detail-head { flex-direction: column; align-items: flex-start; }
}