/* Agentonomy Tasks — Agentonomy design language, no-build single sheet.
   Tokens mirror Agentonomy V2 src/styles.css (accent, surfaces, type scale, motion).
   The only permanent chrome is the top bar; channels live behind it in a drawer. */

:root {
  --accent: #3b82f6;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", SFMono-Regular, Consolas, Menlo, ui-monospace, monospace;
  --type-caption: 11px;
  --type-small: 12px;
  --type-body: 13px;
  --type-emphasis: 14px;
  --type-title: 16px;
  --type-display: 22px;
  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-prose: 1.55;
  --radius-control: 7px;
  --radius-panel: 12px;
  --radius-pill: 999px;
  --motion-fast: 140ms;
  --motion-smooth: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --topbar-height: 52px;
}

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --ink: 255 255 255;
  --text: #f4f4f5;
  --text-2: #e4e4e7;
  --muted: #a1a1aa;
  --quiet: #71717a;
  --faint: #3f3f46;
  --page-bg: #0d0d0d;
  --sidebar-bg: #111111;
  --panel-bg: #121212;
  --surface-card: #1d1d1d;
  --panel-hover: #242424;
  --composer-bg: #2d2d2d;
  --line: rgb(255 255 255 / 0.08);
  --accent-mix-base: #1f2937;
  --accent-active-bg: color-mix(in srgb, var(--accent) 42%, var(--accent-mix-base));
  --accent-border-strong: color-mix(in srgb, var(--accent) 64%, var(--accent-mix-base));
  --on-accent: #fff;
  --user-bubble: color-mix(in oklab, var(--accent) 24%, var(--panel-bg));
  --user-border: color-mix(in oklab, var(--accent) 42%, var(--panel-bg));
  --button-invert-bg: #f4f4f5;
  --button-invert-fg: #050505;
  --bubble-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.32), 0 8px 10px -6px rgb(0 0 0 / 0.32);
  --composer-shadow: 0 22px 70px rgb(0 0 0 / 0.36);
  --drawer-shadow: 0 0 60px rgb(0 0 0 / 0.5);
}

[data-theme="light"] {
  color-scheme: light;
  --ink: 0 0 0;
  --text: #0a0a0b;
  --text-2: #19191c;
  --muted: #585861;
  --quiet: #888891;
  --faint: #bbbbc2;
  --page-bg: #f2f2f2;
  --sidebar-bg: #e7e7e7;
  --panel-bg: #ededed;
  --surface-card: #dcdcdc;
  --panel-hover: #d0d0d0;
  --composer-bg: #c9c9c9;
  --line: rgb(0 0 0 / 0.08);
  --accent-mix-base: #eef2fb;
  --accent-active-bg: color-mix(in srgb, var(--accent) 22%, var(--accent-mix-base));
  --accent-border-strong: color-mix(in srgb, var(--accent) 48%, var(--accent-mix-base));
  --on-accent: color-mix(in srgb, var(--accent) 62%, #16161a);
  --user-bubble: color-mix(in oklab, var(--accent) 20%, var(--panel-bg));
  --user-border: color-mix(in oklab, var(--accent) 38%, var(--panel-bg));
  --button-invert-bg: #0a0a0b;
  --button-invert-fg: #fafafa;
  --bubble-shadow: 0 10px 18px -8px rgb(0 0 0 / 0.18), 0 4px 8px -4px rgb(0 0 0 / 0.14);
  --composer-shadow: 0 18px 50px rgb(0 0 0 / 0.16);
  --drawer-shadow: 0 0 60px rgb(0 0 0 / 0.18);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: var(--panel-bg);
  color: var(--text);
  transition: background-color 200ms ease, color 200ms ease;
}
button, textarea, input { font: inherit; }
button { border: 0; color: inherit; }

/* ── Top bar: menu, name, theme. The app's only permanent chrome. ────── */
.topbar {
  flex: none;
  height: calc(var(--topbar-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 8px 0;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--line);
  transition: background-color 200ms ease;
}
.wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--text);
  font-size: var(--type-emphasis);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
}
/* The brand A stands in for the letter, tucked slightly over the text —
   same construction as the Agentonomy wordmark. */
.wordmark-a {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 1.2em;
  height: 1.16em;
  flex: none;
  background: var(--accent);
  mask: url("a-mark.svg") center / contain no-repeat;
  -webkit-mask: url("a-mark.svg") center / contain no-repeat;
  transform: translateY(0.08em);
}
.wordmark-text {
  position: relative;
  z-index: 0;
  margin-left: -0.22em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.icon-button:hover { background: rgb(var(--ink) / 0.08); color: var(--text); }
.icon-button:active { background: rgb(var(--ink) / 0.12); }
.icon-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One control, three modes — the icon names the mode it is in. */
#theme svg { display: none; }
html[data-theme-mode="light"] #theme .mode-light,
html[data-theme-mode="dark"] #theme .mode-dark,
html[data-theme-mode="system"] #theme .mode-system { display: block; }
/* On a phone, "follow system" is a phone screen, not a computer screen. */
@media (max-width: 759px) {
  html[data-theme-mode="system"] #theme .mode-system { display: none; }
  html[data-theme-mode="system"] #theme .mode-system-mobile { display: block; }
}

/* ── Channel drawer ──────────────────────────────────────────────────
   A <dialog>, so Esc, the focus trap, and the inert backdrop are free. */
.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: 33.333vw;
  min-width: 288px;
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--sidebar-bg);
  color: var(--text);
  box-shadow: var(--drawer-shadow);
  overflow: hidden;
  display: none;
  flex-direction: column;
  gap: 6px;
  transform: translateX(-100%);
  /* Entry animates via @starting-style; the exit is deliberately instant. An
     `overlay`/`display` allow-discrete transition would keep the dialog in the
     top layer while it slid out, leaving the app inert to clicks for as long. */
  transition: transform var(--motion-smooth);
}
.drawer[open] { display: flex; transform: none; }
.drawer-head {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.drawer-head .back-button { justify-self: start; }
.drawer-head .icon-button { justify-self: end; }
.head-title { margin: 0; font-size: var(--type-emphasis); font-weight: 600; }
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px 6px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-2);
  font-size: var(--type-body);
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.back-button:hover { background: var(--panel-hover); color: var(--text); }
.back-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Title centered between the buttons, all on one vertical axis. */
.editor-head.centered-head { display: grid; grid-template-columns: 1fr auto 1fr; }
.editor-head.centered-head h2 { margin: 0; }
.editor-head.centered-head .back-button { justify-self: start; }
.editor-head.centered-head .icon-button:last-child { justify-self: end; }
@starting-style { .drawer[open] { transform: translateX(-100%); } }
.drawer::backdrop { background: rgb(0 0 0 / 0.45); }

.channels {
  position: relative; /* the floating ⋯ menus anchor to this scroll box */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#automation-channels { display: contents; }

.channel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  font-size: var(--type-emphasis);
  font-weight: 500;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}
.channel span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.channel:hover { background: var(--panel-hover); color: var(--text-2); }
.channel.active {
  background: var(--accent-active-bg);
  border-color: var(--accent-border-strong);
  color: var(--on-accent);
}
.channel-row { display: flex; align-items: center; gap: 4px; }
.channel-row .channel { flex: 1; min-width: 0; }
/* Install app and Settings hold the drawer's bottom edge, in that order. */
#install-app, #open-settings { margin-top: auto; }
#install-app + #open-settings { margin-top: 0; }

/* The row menu opens in place rather than floating, so it needs no anchor
   positioning and behaves the same on a phone. */
/* The ⋯ menu is a small floating window beside its button, not an inline
   dropdown; toggleMenu() sets its top from the button it belongs to. */
.row-menu {
  position: absolute;
  right: 8px;
  z-index: 3;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  box-shadow: var(--drawer-shadow);
}
.row-menu[hidden] { display: none; }
.row-menu button {
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  font-size: var(--type-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.row-menu button:hover { background: var(--panel-hover); color: var(--text); }
/* Destructive reads red at rest too — touch screens have no hover. */
.row-menu button[data-action="delete"] { color: #f87171; }
.row-menu button[data-action="delete"]:hover { color: #f87171; }

/* ── Panes ───────────────────────────────────────────────────────────── */
.pane {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  transition: background-color 200ms ease;
}
.pane[hidden] { display: none; }

.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 32px max(24px, calc((100% - 1060px) / 2));
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgb(var(--ink) / 0.12) transparent; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: rgb(var(--ink) / 0.08); }

/* The 30-message window: older history loads on demand. */
.load-more-row { display: flex; justify-content: center; }
.load-more {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}
.load-more:hover:not(:disabled) { background: var(--panel-hover); color: var(--text); }
.load-more:active:not(:disabled) { transform: scale(0.97); }
.load-more:disabled { opacity: 0.5; cursor: default; }

/* ── Messages ────────────────────────────────────────────────────────── */
.message-row { display: flex; min-width: 0; }
.message-row.user { justify-content: flex-end; }
.message-row.assistant { justify-content: flex-start; }
.message-row.entering { animation: message-in var(--motion-smooth) both; }
@keyframes message-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.message-bubble {
  max-width: 88%;
  font-size: var(--type-emphasis);
  line-height: var(--leading-normal);
  word-break: break-word;
  color: var(--text);
}
.message-row.user .message-bubble {
  background: var(--user-bubble);
  border: 1px solid var(--user-border);
  border-radius: 16px 16px 0 16px;
  padding: 10px 16px 8px;
  color: var(--text-2);
  white-space: pre-wrap;
  box-shadow: var(--bubble-shadow);
}
.message-row.assistant .message-bubble { background: transparent; border: 0; border-color: transparent; padding: 0; }
.assistant-stack { max-width: 88%; display: flex; flex-direction: column; gap: 12px; }
.assistant-stack .message-bubble { max-width: 100%; }
.user-stack { max-width: 88%; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.user-stack .message-bubble { max-width: 100%; }
/* WhatsApp-style chat times and day lines. */
.msg-time { margin-top: 3px; padding: 0 2px; font-size: var(--type-caption); color: var(--quiet); }
.day-divider { display: flex; justify-content: center; margin: 6px 0; }
.day-divider span {
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--muted);
  font-size: var(--type-small);
}

.markdown { line-height: var(--leading-prose); }
.markdown p { margin: 0 0 10px; }
.markdown p:last-child { margin-bottom: 0; }
.markdown ul, .markdown ol { margin: 8px 0; padding-left: 22px; }
.markdown li { margin: 2px 0; }
.markdown code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgb(var(--ink) / 0.08);
  padding: 2px 4px;
  border-radius: 4px;
}
.markdown pre { overflow: auto; background: rgb(var(--ink) / 0.07); padding: 12px; border-radius: var(--radius-control); }
.markdown pre code { background: none; padding: 0; }
.markdown strong { font-weight: 600; }

.empty-state { margin: auto; text-align: center; color: var(--muted); font-size: var(--type-emphasis); }
.empty-state h1 { font-size: var(--type-title); font-weight: 500; color: var(--text); margin: 0 0 6px; }

.working-bar {
  position: sticky;
  top: -24px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: -4px -2px 0;
  /* The ball's bounce arc lives in the top padding; the bar's clip-path
     would cut off anything above the box. */
  padding: 32px 0 1px;
  color: var(--muted);
  font-size: var(--type-small);
  background: var(--panel-bg);
  box-shadow: 0 0 0 100vmax var(--panel-bg);
  clip-path: inset(0 -100vmax);
  transform: translateY(0);
  transition: transform var(--motion-smooth), opacity 280ms;
}
.working-bar.complete { transform: translateY(88px); opacity: 0; }
/* The thinking ball, ported from Agentonomy's chat loader: same 19px track,
   ~10px ball, squash-and-stretch bounce and motion-blur afterimage. */
.ball {
  --loader-color: 59 130 246;
  --loader-size: 19px;
  position: relative;
  flex: none;
  width: calc(var(--loader-size) * 0.54);
  height: calc(var(--loader-size) * 0.54);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, rgb(var(--ink) / 0.7), transparent 28%),
    rgb(var(--loader-color) / 0.94);
  box-shadow:
    0 0 10px rgb(var(--loader-color) / 0.28),
    0 7px 10px rgb(0 0 0 / 0.22);
  transform-origin: center bottom;
  backface-visibility: hidden;
  will-change: transform;
  animation: agentonomy-loader-bounce 1500ms linear infinite;
}
.ball::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: inherit;
  background: rgb(var(--loader-color) / 0.58);
  filter: blur(3.5px);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale3d(0.8, 1.1, 1);
  transform-origin: center;
  will-change: opacity, transform;
  animation: agentonomy-loader-motion-blur 1500ms linear infinite;
}
@keyframes agentonomy-loader-quiet {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes agentonomy-loader-bounce {
  0% { transform: translate3d(0, 0, 0) scale3d(1.12, 0.88, 1); }
  6% { transform: translate3d(0, calc(var(--loader-size) * -0.42), 0) scale3d(0.98, 1.02, 1); }
  14% { transform: translate3d(0, calc(var(--loader-size) * -0.84), 0) scale3d(0.95, 1.05, 1); }
  24% { transform: translate3d(0, calc(var(--loader-size) * -1.14), 0) scale3d(0.94, 1.06, 1); }
  36% { transform: translate3d(0, calc(var(--loader-size) * -1.3), 0) scale3d(0.94, 1.06, 1); }
  46% { transform: translate3d(0, calc(var(--loader-size) * -1.34), 0) scale3d(0.95, 1.05, 1); }
  56% { transform: translate3d(0, calc(var(--loader-size) * -1.3), 0) scale3d(0.95, 1.05, 1); }
  68% { transform: translate3d(0, calc(var(--loader-size) * -1.06), 0) scale3d(0.96, 1.04, 1); }
  78% { transform: translate3d(0, calc(var(--loader-size) * -0.58), 0) scale3d(1.01, 0.99, 1); }
  88% { transform: translate3d(0, calc(var(--loader-size) * -0.1), 0) scale3d(1.08, 0.92, 1); }
  94% { transform: translate3d(0, calc(var(--loader-size) * -0.02), 0) scale3d(1.14, 0.86, 1); }
  100% { transform: translate3d(0, 0, 0) scale3d(1.12, 0.88, 1); }
}
@keyframes agentonomy-loader-motion-blur {
  0%, 18%, 44%, 58%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale3d(0.8, 1, 1); }
  8% { opacity: 0.18; transform: translate3d(0, calc(var(--loader-size) * 0.08), 0) scale3d(0.74, 1.72, 1); }
  74% { opacity: 0.1; transform: translate3d(0, calc(var(--loader-size) * -0.1), 0) scale3d(0.76, 1.48, 1); }
  84% { opacity: 0.26; transform: translate3d(0, calc(var(--loader-size) * -0.16), 0) scale3d(0.72, 2.05, 1); }
  92% { opacity: 0.12; transform: translate3d(0, calc(var(--loader-size) * -0.06), 0) scale3d(0.78, 1.42, 1); }
}

/* ── Composer ────────────────────────────────────────────────────────── */
.composer-dock { padding: 16px 24px 20px; display: flex; justify-content: center; }
.composer-shell {
  position: relative;
  width: min(100%, 1060px);
  padding: 12px;
  border-radius: 28px;
  border: 1px solid rgb(var(--ink) / 0.06);
  background: var(--composer-bg);
  box-shadow: var(--composer-shadow);
  transition: border-color var(--motion-fast) ease, background-color 200ms ease;
}
.composer-shell:focus-within { border-color: rgb(var(--ink) / 0.16); }
.composer-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 8px;
}
/* Past three lines the text spans the whole width, above the buttons. */
.composer-row.tall .composer-input { grid-column: 1 / -1; grid-row: 1; }
.composer-row.tall .attach-button { grid-column: 1; grid-row: 2; }
.composer-row.tall .live-toggle { grid-column: 3; grid-row: 2; }
.composer-row.tall .send-button { grid-column: 4; grid-row: 2; }
.composer-input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: 180px;
  padding: 12px 4px 10px;
  border: 0;
  outline: 0;
  resize: none;
  overflow-y: hidden;
  background: transparent;
  color: var(--text);
  font-size: var(--type-title);
  line-height: 22.4px;
}
.composer-input::placeholder { color: var(--muted); }
.composer-input.capped { overflow-y: auto; }
.attach-button, .send-button, .live-toggle {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease,
    transform var(--motion-fast) ease, opacity var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}
.attach-button, .live-toggle {
  width: 44px;
  height: 44px;
  background: rgb(var(--ink) / 0.03);
  border: 1px solid rgb(var(--ink) / 0.07);
  color: var(--muted);
}
.attach-button:hover, .live-toggle:hover:not(.active) { background: rgb(var(--ink) / 0.08); color: var(--text); }
.live-toggle.active {
  background: var(--accent-active-bg);
  border-color: var(--accent-border-strong);
  color: var(--on-accent);
  animation: live-pulse 2000ms ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(59 130 246 / 0.4); }
  50% { box-shadow: 0 0 14px 3px rgb(59 130 246 / 0.55); }
}
.live-toggle:disabled { opacity: 0.5; cursor: default; }
.live-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Full-viewport lightning overlay; never intercepts input. */
.live-fx {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}
.send-button { width: 48px; height: 48px; background: var(--button-invert-bg); color: var(--button-invert-fg); }
.send-button:hover:not(:disabled) { transform: scale(1.05); }
.send-button:active:not(:disabled) { transform: scale(0.95); }
.send-button:disabled { opacity: 0.35; cursor: default; }
.attach-button svg, .send-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.attachment-chips { display: flex; gap: 8px; margin: 2px 2px 10px; }
.attachment-chips:empty { display: none; }
/* Every pending file gets an equal share of the row and never spills out. */
.attachment-chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgb(var(--ink) / 0.1);
  background: rgb(var(--ink) / 0.06);
  font-size: var(--type-small);
  color: var(--text-2);
}
.attachment-chip svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
}
.attachment-chip .attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-chip button {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgb(var(--ink) / 0.1);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}
.attachment-chip button:hover { background: rgb(var(--ink) / 0.18); color: var(--text); }

/* ── Editor dialog: the only place a prompt or a trigger is changed ──── */
.editor {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel-bg);
  color: var(--text);
  box-shadow: var(--drawer-shadow);
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.editor[open] { display: flex; }
.editor::backdrop { background: rgb(0 0 0 / 0.45); }
.editor-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 18px;
  border-bottom: 1px solid var(--line);
}
.editor-head h2 { margin: 0 auto 0 0; font-size: var(--type-emphasis); font-weight: 600; }
.editor-body {
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group label {
  color: var(--quiet);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hint { margin: 2px 0 0; color: var(--muted); font-size: var(--type-small); }

.field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text);
  font-size: var(--type-emphasis);
  line-height: var(--leading-prose);
  outline: 0;
  transition: border-color var(--motion-fast) ease;
}
/* Prompts size themselves to their content: the dialog body is the only
   thing that scrolls, never a textarea inside it. */
textarea.field {
  field-sizing: content;
  min-height: 8lh;
  overflow: hidden;
  resize: none;
}
.field:focus { border-color: var(--accent-border-strong); }
.field::placeholder { color: var(--quiet); }

.trigger-row { display: flex; flex-wrap: wrap; gap: 8px; }
.trigger-row .field { width: auto; flex: 1 1 130px; }
/* Which "when" control applies is a property of the frequency, so CSS decides. */
.trigger-row[data-frequency="hourly"] .when-time,
.trigger-row[data-frequency="hourly"] .when-weekday,
.trigger-row[data-frequency="daily"] .when-minute,
.trigger-row[data-frequency="daily"] .when-weekday,
.trigger-row[data-frequency="weekly"] .when-minute { display: none; }

.editor-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.editor-foot .hint { flex: 1; margin: 0; text-align: right; }
.primary {
  flex: none;
  padding: 9px 18px;
  border-radius: var(--radius-control);
  background: var(--button-invert-bg);
  color: var(--button-invert-fg);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.primary:hover:not(:disabled) { transform: translateY(-1px); }
.primary:disabled { opacity: 0.35; cursor: default; }

.danger {
  align-self: flex-start;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: transparent;
  color: #f87171;
  font-size: var(--type-body);
  cursor: pointer;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.danger[hidden] { display: none; }
.danger:hover { background: rgb(248 113 113 / 0.1); border-color: rgb(248 113 113 / 0.4); }
/* The notifications toggle keeps its full width in both of its states. */
#enable-push.danger { align-self: stretch; padding: 9px 18px; font-weight: 600; }

.key-row { display: flex; gap: 8px; }
.key-row .field { flex: 1; min-width: 0; }
.ghost {
  flex: none;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-2);
  font-size: var(--type-body);
  cursor: pointer;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.ghost:hover:not(:disabled) { background: var(--panel-hover); border-color: var(--quiet); }
.ghost:disabled { opacity: 0.35; cursor: default; }
#editor[data-kind="chat"] .automation-only { display: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  translate: -50% 12px;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-2);
  font-size: var(--type-small);
  box-shadow: var(--bubble-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) ease, translate var(--motion-smooth);
  z-index: 2147483001;
}
.toast.show { opacity: 1; translate: -50% 0; }

.learning-state { margin: auto; color: var(--muted); text-align: center; font-size: var(--type-emphasis); }
.learning-state h1 { color: var(--text); font-size: var(--type-title); font-weight: 500; margin: 0 0 6px; }

.channel:focus-visible,
.icon-button:focus-visible,
.field:focus-visible,
.row-menu button:focus-visible,
.danger:focus-visible,
.primary:focus-visible,
.attach-button:focus-visible,
.live-toggle:focus-visible,
.send-button:focus-visible,
.load-more:focus-visible,
.attachment-chip button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Mobile: the drawer takes the whole screen ───────────────────────── */
@media (max-width: 759px) {
  .drawer { width: 100vw; min-width: 0; border-right: 0; padding-top: calc(12px + env(safe-area-inset-top)); }
  .transcript { padding: 16px; }
  .composer-dock { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .composer-shell { padding: 8px; border-radius: 22px; }
  /* Anchored to the bottom edge: growing text pushes upward while the
     buttons keep the exact spot they have on the one-line composer. */
  .composer-input { min-height: 40px; padding: 8px 4px; }
  .attach-button, .live-toggle { width: 36px; height: 36px; margin-bottom: 2px; }
  .send-button { width: 40px; height: 40px; }
  .working-bar { top: -16px; }
  .message-bubble, .assistant-stack, .user-stack { max-width: 92%; }
  .editor { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  .editor-body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* The thinking state stays alive without movement: a quiet fade in place
     of the bounce, so battery savers can't make the app look stuck. */
  .ball { animation: agentonomy-loader-quiet 1500ms ease-in-out infinite !important; }
}

/* ── Automation channels wear an amber cast; the chat stays neutral. ──── */
body.automation-view {
  --panel-bg: #1a150a;
  --page-bg: #161208;
  --surface-card: #241d0e;
  --panel-hover: #2c2412;
  --composer-bg: #332a14;
  --line: rgb(217 164 65 / 0.14);
}
[data-theme="light"] body.automation-view {
  --panel-bg: #f0e7d0;
  --page-bg: #f4ecda;
  --surface-card: #e4d8b9;
  --panel-hover: #d9cba6;
  --composer-bg: #d3c49a;
  --line: rgb(146 100 13 / 0.18);
}
/* Only the automation chat wears amber: dialogs float above it and keep the
   neutral palette (values mirror the base themes at the top of this file). */
body.automation-view :is(.editor, .drawer) {
  --panel-bg: #121212;
  --surface-card: #1d1d1d;
  --panel-hover: #242424;
  --composer-bg: #2d2d2d;
  --line: rgb(255 255 255 / 0.08);
}
[data-theme="light"] body.automation-view :is(.editor, .drawer) {
  --panel-bg: #ededed;
  --surface-card: #dcdcdc;
  --panel-hover: #d0d0d0;
  --composer-bg: #c9c9c9;
  --line: rgb(0 0 0 / 0.08);
}

/* ── Sent files show as chips above the words in a user bubble. ───────── */
.bubble-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.bubble-attachments:only-child { margin-bottom: 0; }
.bubble-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(var(--ink) / 0.14);
  background: rgb(var(--ink) / 0.08);
  font-size: var(--type-small);
  color: var(--text-2);
}
.bubble-attachment svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bubble-attachment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Settings fold into labelled groups; the name field stays on top. ── */
.settings-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: rgb(var(--ink) / 0.02);
}
.settings-group summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: var(--text-2);
  list-style: none;
}
.settings-group summary::-webkit-details-marker { display: none; }
.settings-group summary::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 1.8px solid var(--muted);
  border-bottom: 1.8px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--motion-fast) ease;
}
.settings-group[open] summary::before { transform: rotate(45deg); }
.settings-group-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 2px 14px 16px;
}

/* ── Waiting states: the dialog opens instantly, the button says so. ─── */
@keyframes spinner-turn { to { transform: rotate(360deg); } }
.editor.loading { min-height: min(320px, 60dvh); }
.editor.loading .editor-body, .editor.loading .editor-foot { visibility: hidden; }
.editor.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgb(var(--ink) / 0.14);
  border-top-color: var(--accent);
  animation: spinner-turn 800ms linear infinite;
}
.live-toggle.connecting { position: relative; }
.live-toggle.connecting svg { visibility: hidden; }
.live-toggle.connecting::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 2px solid rgb(var(--ink) / 0.12);
  border-top-color: var(--accent);
  animation: spinner-turn 800ms linear infinite;
}
.live-toggle.connecting:disabled { opacity: 1; cursor: progress; }

/* ── Settings hub: section buttons like the drawer's channels. ────────── */
.settings-hub { display: flex; flex-direction: column; gap: 4px; }
.settings-hub .channel { width: 100%; }
.settings-section { display: flex; flex-direction: column; gap: 18px; }
.settings-section[hidden] { display: none; }
.field-label {
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The board's address, with the database ID lit up. */
.url-guide {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-small);
  line-height: 1.9;
  padding: 12px 14px;
  border-radius: var(--radius-panel);
  border: 1px solid var(--line);
  background: rgb(var(--ink) / 0.04);
  overflow-wrap: anywhere;
}
.url-guide .url-dim { color: var(--quiet); }
.url-guide .url-id {
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--accent-active-bg);
  color: var(--text);
  font-weight: 600;
}

/* Where a converted schedule was originally set. */
.schedule-origin { margin-top: 6px; font-size: var(--type-small); color: var(--quiet); }