:root {
  color-scheme: dark;
  font: 15px/1.55 system-ui, -apple-system, sans-serif;
  color: #dedfe5;
  background: #111318;
  --muted: #939aa9;
  --line: #2a2e38;
  --accent: #c7dfad;
  --tap: 44px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: #222630;
  border: 1px solid #414754;
  border-radius: 8px;
  padding: 9px 12px;
  min-height: var(--tap);
}
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: #73826b; }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: var(--accent); color: #21311a; border-color: var(--accent); font-weight: 650; }
.danger { color: #f4c58b; }
h1 { font-size: 24px; letter-spacing: -.5px; margin: 0; overflow-wrap: anywhere; }
h2 { font-size: 20px; margin: 0 0 12px; }
p { margin: 8px 0; }
.eyebrow { color: var(--accent); letter-spacing: 2px; font-size: 10px; margin: 0 0 7px; }
.muted, .hint, .privacy { color: var(--muted); }
.hint, .privacy { font-size: 12px; }
.error { color: #f4c58b; }

.login-card {
  max-width: 560px;
  margin: 10vh auto;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #171a20;
}
.login-card form { display: flex; align-items: end; gap: 10px; margin-top: 22px; }
.login-card label { flex: 1; }
.login-card input { width: 100%; }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; }

#workspace { height: 100dvh; display: flex; flex-direction: column; }
.workspace-body { flex: 1; display: flex; min-height: 0; }
aside {
  width: 300px;
  flex-shrink: 0;
  background: #181b21;
  border-right: 1px solid var(--line);
  padding: 22px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.brand { display: flex; gap: 12px; align-items: center; font-weight: 650; font-size: 20px; }
.mark { border: 1px solid #56694d; color: var(--accent); border-radius: 12px; padding: 5px 10px; }
.brand small { display: block; font-size: 9px; letter-spacing: 2px; color: var(--muted); font-weight: 500; }
.new-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.new-actions .primary { grid-column: 1 / -1; }
.agent-search input { width: 100%; }
nav { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 60px; flex: 1; }
.device-group { margin-top: 10px; }
.device-group:first-child { margin-top: 0; }
.device-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 4px 10px 6px; color: var(--muted); font-size: 11px; letter-spacing: .3px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.device-head strong { color: #c6cad3; font-weight: 600; overflow-wrap: anywhere; }
.device-head .offline { color: #f4c58b; }
nav button.session { width: 100%; text-align: left; background: transparent; border-color: transparent; padding: 10px; display: block; }
nav button.session.selected { background: #292f29; border-color: #49553f; }
nav small { display: block; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.agent-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }
.agent-status-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 3px 0 1px; }
.nav-status { display: inline-flex; align-items: center; gap: 5px; flex: none; border-radius: 999px; padding: 1px 7px; font-size: 10px; }
.nav-badge { color: #f4c58b; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
aside footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
aside footer button { padding: 5px 10px; white-space: nowrap; min-height: 36px; }

main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 0 clamp(16px, 4vw, 80px); position: relative; }
#session-overview {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #111318;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--line);
}
/* Wraps, and the name asks for room before it gives any up. `min-width: 0` alone
   let the text column shrink to nothing while the button group refused to: at
   375px it measured 80px wide and 416px TALL, one character per line, which is
   also what pushed the composer off the bottom of the screen. */
#session-overview header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.overview-text { flex: 1 1 200px; min-width: 0; }
#meta { color: var(--muted); font-size: 12px; white-space: pre-line; overflow-wrap: anywhere; margin: 6px 0 0; }
.session-status { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; }
.back { display: none; padding: 6px 12px; font-size: 22px; line-height: 1; }
#session-actions { padding: 6px 12px; font-size: 20px; line-height: 1; }
#actions-menu {
  position: absolute; right: 0; top: calc(100% - 6px); z-index: 20;
  min-width: 180px; padding: 5px; border: 1px solid #464d5a; border-radius: 9px;
  background: #20242c; box-shadow: 0 12px 32px #0009; display: flex; flex-direction: column; gap: 2px;
}
#actions-menu button { width: 100%; text-align: left; background: transparent; border-color: transparent; }
#actions-menu button:hover, #actions-menu button:focus { background: #292f29; border-color: #49553f; }
.badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 20px; padding: 6px 12px; font-size: 12px; }
.badge::before, .nav-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-idle { color: #bddd9e; background: #273524; }
.status-working { color: #7dceff; background: #193347; }
.status-attention { color: #ffc36a; background: #3c2c18; }
.status-neutral { color: #b7becb; background: #292d35; }
.status-working::before { animation: working-pulse 1.35s ease-in-out infinite; }
@keyframes working-pulse {
  0%, 100% { opacity: .4; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.25); box-shadow: 0 0 0 4px #7dceff24; }
}
@media (prefers-reduced-motion: reduce) { .status-working::before { animation: none; } }
#error { min-height: 24px; font-size: 12px; }
#welcome { text-align: center; margin: 80px auto; max-width: 600px; color: var(--muted); }
#welcome h2 { color: #dedfe5; }
.welcome-icon { font-size: 46px; color: var(--accent); margin-bottom: 18px; }
#activity { padding: 10px 0 12px; max-width: 1100px; margin: 0 auto; width: 100%; flex: 1; }
.entry { padding: 12px 16px; margin: 10px 0; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.entry.user { background: #242b23; margin-left: 10%; border: 1px solid #394336; }
.entry.answer { background: #191d24; border-left: 2px solid var(--accent); }
.entry.thought { color: var(--muted); font-size: 13px; border-left: 2px solid #4b5363; }
.entry.system { font-size: 12px; color: var(--muted); padding: 4px 0; }
.entry.tool { background: #1b2028; border: 1px solid var(--line); font-size: 13px; }
.entry label { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, monospace; }
summary { cursor: pointer; }
.hook-raw { margin-top: 6px; }
.hook-raw summary { color: var(--muted); font-size: 11px; }
.hook-raw pre { max-height: 280px; overflow: auto; padding: 8px; background: #15181e; border-radius: 7px; }

#composer {
  position: sticky; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
  align-items: end; max-width: 1100px; width: 100%; margin: 0 auto; padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  background: #111318; border-top: 1px solid var(--line);
}
#composer textarea { width: 100%; min-width: 0; resize: vertical; }
#composer-note { max-width: 1100px; margin: 0 auto 12px; width: 100%; }
/* Unmissable on purpose. Two monitors that look identical are two monitors
   somebody eventually acts on the wrong one of. */
#environment-stripe {
  position: sticky; top: 0; z-index: 60;
  padding: 5px 14px calc(5px + env(safe-area-inset-top, 0px));
  background: repeating-linear-gradient(135deg, #ffb84d, #ffb84d 12px, #f0a83a 12px, #f0a83a 24px);
  color: #2a1d08; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-align: center;
}

#composer.dropping { outline: 2px dashed var(--accent); outline-offset: -4px; }
.composer-buttons { display: flex; gap: 8px; align-items: center; }
/* Both columns: the strip belongs to the message, not to the text box. */
#composer-attachments { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.attachment { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: #0d0f13; }
.attachment img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A 44px target would cover the thumbnail it sits on; this stays comfortably
   tappable while leaving the picture visible. */
.attachment button { position: absolute; top: 2px; right: 2px; min-width: 24px; width: 24px; height: 24px;
  padding: 0; line-height: 1; border-radius: 12px; border: none; background: #000c; color: #fff; font-size: 14px; }
.attachment .pending { display: grid; place-items: center; width: 100%; height: 100%; font-size: 11px; color: var(--muted); }
.entry .attached { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.entry .attached span { font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 8px; }

#usage-panel[popover] {
  display: none;
  position: fixed;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 100px);
  /* `openUsage` sets only `top` and `left`, but a popover's UA style is
     `inset: 0`, so `bottom` and `right` stay at 0 and the box is pulled to the
     far edges of the window. Safari does exactly that: reported 2026-09-18 as a
     panel most of a screen tall with its five lines spread out inside it.
     Chromium shrink-wraps instead, which is why it never showed here. */
  bottom: auto;
  right: auto;
  height: auto;
  overflow-y: auto;
  margin: 0;
  padding: 16px;
  border: 1px solid #394047;
  border-radius: 12px;
  background: #191d24;
  color: inherit;
  box-shadow: 0 12px 36px #0008;
}
/* `start`, not the default stretch: a box taller than its content must leave
   the rows their own height rather than spreading them down it. */
#usage-panel:popover-open { display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; }
#usage-panel h3 { font-size: 13px; margin: 0; }
#usage-panel p { margin: 2px 0; overflow-wrap: anywhere; font-size: 12px; color: var(--muted); }
#usage-panel progress { width: 100%; height: 10px; accent-color: var(--accent); }

dialog {
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 22px;
  color: inherit;
  background: #181b21;
  border: 1px solid #464d5a;
  border-radius: 14px;
  box-shadow: 0 22px 70px #000b;
}
dialog::backdrop { background: #08090cbb; backdrop-filter: blur(2px); }
dialog form, .devices-panel { display: flex; flex-direction: column; gap: 14px; }
.dialog-title { display: flex; align-items: center; justify-content: space-between; }
.dialog-title h2 { margin: 0; }
.dialog-title button { padding: 5px 11px; }
dialog input, dialog select, dialog textarea { width: 100%; }
dialog select[size] { min-height: 180px; }
.command-status p { color: var(--muted); font-size: 12px; }
.command-status button { margin-top: 5px; }
#device-name-step, #device-setup-step { flex-direction: column; gap: 14px; }
#device-name-step:not([hidden]), #device-setup-step:not([hidden]) { display: flex; }
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.copy-field textarea, .pairing-code-field input { font-family: ui-monospace, monospace; }
.pairing-code-field input { letter-spacing: .08em; }
.device-status { min-height: 24px; color: var(--accent); font-size: 13px; }
.devices-list { display: flex; flex-direction: column; gap: 8px; }
.device-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
/* Flex, not a two-column grid: a third control (Update) pushed Remove onto
   its own full-width row, which read as the primary action on the card. */
.device-row > div:first-child { flex: 1 1 260px; min-width: 0; }
.device-row small { display: block; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.device-row .warn { color: #f4c58b; }

@media (max-width: 760px) {
  /* One screenful, scrolling inside, so the composer is reachable without
     scrolling the page. `height: auto` put a full-height `main` BELOW the update
     banner, which left the message box exactly one banner's worth off the bottom
     -- and the banner is tallest on the narrow screens that can least afford it. */
  #workspace { display: flex; flex-direction: column; height: 100dvh; min-height: 0; }
  .workspace-body { display: block; flex: 1; min-height: 0; }
  aside { width: 100%; height: 100%; min-height: 0; overflow-y: auto; border-right: 0; padding: 16px 14px 12px; }
  nav { min-height: 0; }
  main { height: 100%; min-height: 0; padding: 0 14px; }
  .back { display: inline-block; }
  h1 { font-size: 20px; }
  #welcome { margin: 40px auto; }
  .entry.user { margin-left: 0; }
  /* One thing at a time on a phone: the list, or the session you picked. */
  body.detail-open aside { display: none; }
  body:not(.detail-open) main { display: none; }
  /* Buttons under the box, not beside it: sharing one 347px row left the
     textarea too narrow to read its own placeholder. */
  #composer { grid-template-columns: 1fr; }
  .composer-buttons { justify-content: flex-end; }
  .login-card { margin: 5vh 12px; padding: 22px; }
  .login-card form { align-items: stretch; flex-direction: column; }
  .copy-field { grid-template-columns: 1fr; }
  .new-actions { grid-template-columns: 1fr 1fr; }
}

#approvals { max-width: 1100px; margin: 10px auto 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.approval { border: 1px solid #5a4a2a; background: #2a2416; border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.approval strong { flex: 1 1 200px; color: #ffd28a; font-weight: 500; overflow-wrap: anywhere; }
.approval button { min-height: 40px; }

/* An available update, in the sidebar where devices already are. Buried in the
   Devices dialog nobody found it: five devices ran four versions for days. */
.update-chip {
  min-height: 0;
  padding: 1px 8px;
  font-size: 10px;
  border-radius: 999px;
  color: #3c2c18;
  background: #ffc36a;
  border-color: #ffc36a;
  font-weight: 650;
}
.update-chip:hover:not(:disabled) { border-color: #fff; }

/* Devices running older code, said plainly at the top of the workspace. An
   update buried in a dialog is one nobody finds: five devices ran four
   different versions for days before this existed. */
#update-banner {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1100px;
  width: 100%;
  margin: 12px auto 0;
  padding: 12px 16px;
  border: 1px solid #5a4a2a;
  background: #2a2416;
  border-radius: 10px;
}
#update-banner .update-banner-text { flex: 1 1 280px; min-width: 0; }
#update-banner strong { display: block; color: #ffd28a; font-weight: 600; overflow-wrap: anywhere; }
#update-banner small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
#update-banner-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#update-banner-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12px; }
#update-banner-list .device-name { color: #dedfe5; font-weight: 600; overflow-wrap: anywhere; }
#update-banner-list .device-identity { color: var(--muted); overflow-wrap: anywhere; }
#update-banner-list .device-state { color: var(--muted); }
#update-banner-list .device-state.warn { color: #ffc36a; }
#update-banner-list .device-state.working { color: #7dceff; }
#update-banner button { min-height: 40px; }


/* The one-line bootstrap, revealed by Update when a device cannot take one. */
#update-banner-commands { flex: 1 1 100%; margin-top: 4px; }
#update-banner-commands p { margin: 0 0 8px; }
#update-banner-commands textarea { font-family: ui-monospace, monospace; font-size: 12px; }
/* Three rows: the command wraps to three lines at this width and a two-row box
   cut the last one off, hiding the interpreter path that makes it work. */
.device-row .copy-field { margin-top: 8px; width: 100%; }
.device-row .copy-field textarea { font-family: ui-monospace, monospace; font-size: 12px; }