@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  font: 14px/1.55 "IBM Plex Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid geometry: soft, generous rounding everywhere (Plex keeps the IBM
     voice; the square Carbon corners were what read as rigid). */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Rhythm + type scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-display: 22px;
  --text-metric: 28px;

  /* Motion — fast, decisive easings; springs for entrances. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 100ms;
  --dur-2: 160ms;
  --dur-3: 240ms;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --scrim: rgba(4, 6, 12, 0.62);

  /* Deep blue-tinted dark — layered surfaces with hairline borders. */
  --bg: #0a0c11;
  --bg-glow: radial-gradient(1100px 640px at 50% -12%, rgba(55, 182, 196, 0.055), transparent 62%);
  --surface: #13161c;
  --surface-soft: #0f1217;
  --surface-strong: #1b1f27;
  --glass: rgba(16, 19, 25, 0.82);
  --field: #0f1217;
  --ink: #eef1f6;
  --muted: #a2abbb;
  --faint: #7c8494;
  --line: rgba(150, 162, 180, 0.12);
  --line-strong: rgba(150, 162, 180, 0.26);
  --nav: #0c0e13;
  --nav-hover: rgba(150, 162, 180, 0.08);
  --primary: #37b6c4;
  --primary-dark: #2c94a0;
  --primary-soft: rgba(55, 182, 196, 0.16);
  --brand-gradient: var(--primary);
  --accent: #4fc6d3;
  --focus: #37b6c4;
  --focus-ring: 0 0 0 3px rgba(55, 182, 196, 0.32);
  --on-primary: #04171a;
  --warning: #e6a54a;
  --warning-soft: rgba(230, 165, 74, 0.14);
  --danger: #f0616d;
  --danger-soft: rgba(240, 97, 109, 0.13);
  --success: #46c08a;
  --success-soft: rgba(70, 192, 138, 0.14);
  --info: #37b6c4;
  --info-soft: rgba(55, 182, 196, 0.14);
  --tool: #8ea0b5;
  --tool-soft: rgba(142, 160, 181, 0.12);
  --text: var(--ink);
  --warning-text: var(--warning);
  --success-text: var(--success);
  --user-bubble: var(--surface-strong);
  --user-bubble-ink: var(--ink);
  --user-bubble-meta: var(--muted);
  --code-bg: #0c0e13;
  --code-ink: #c3cad8;
  --topbar-bg: rgba(14, 17, 24, 0.85);
  --shadow-sm: 0 1px 2px rgb(2 4 10 / 0.5);
  --shadow: 0 4px 14px -4px rgb(2 4 10 / 0.55);
  --shadow-lg: 0 16px 40px -12px rgb(2 4 10 / 0.65);

  color: var(--ink);
  background: var(--bg);
}

/* Airy light theme — auto when the OS prefers light and no theme is pinned,
   or explicitly via [data-theme="light"]. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f4f6f8;
    --bg-glow: radial-gradient(1100px 640px at 50% -12%, rgba(15, 133, 147, 0.05), transparent 62%);
    --surface: #ffffff;
    --surface-soft: #eef1f5;
    --surface-strong: #e6eaef;
    --glass: rgba(255, 255, 255, 0.86);
    --field: #ffffff;
    --ink: #141a20;
    --muted: #4d5665;
    --faint: #656e7c;
    --line: rgba(20, 28, 42, 0.1);
    --line-strong: rgba(20, 28, 42, 0.2);
    --nav: #ffffff;
    --nav-hover: rgba(20, 28, 42, 0.05);
    --primary: #0b6f79;
    --primary-dark: #0b6f7b;
    --primary-soft: rgba(15, 133, 147, 0.1);
    --brand-gradient: var(--primary);
    --accent: #0b6f79;
    --focus: #0b6f79;
    --focus-ring: 0 0 0 3px rgba(15, 133, 147, 0.22);
    --on-primary: #ffffff;
    --warning: #8f5c0f;
    --warning-soft: rgba(241, 194, 27, 0.16);
    --danger: #d3404b;
    --danger-soft: rgba(211, 64, 75, 0.1);
    --success: #157a52;
    --success-soft: rgba(31, 157, 107, 0.12);
    --info: #0b6f79;
    --info-soft: rgba(15, 133, 147, 0.1);
    --tool: #5d6675;
    --tool-soft: rgba(93, 102, 117, 0.1);
    --warning-text: #8a6a00;
    --success-text: #157a38;
    --user-bubble: var(--surface-strong);
    --user-bubble-ink: var(--ink);
    --user-bubble-meta: var(--muted);
    --code-bg: #f2f4f9;
    --code-ink: #21242c;
    --topbar-bg: rgba(255, 255, 255, 0.85);
    --scrim: rgba(15, 23, 42, 0.4);
    --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.07);
    --shadow: 0 4px 14px -4px rgb(16 24 40 / 0.12);
    --shadow-lg: 0 16px 40px -12px rgb(16 24 40 / 0.2);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --bg-glow: radial-gradient(1100px 640px at 50% -12%, rgba(15, 133, 147, 0.05), transparent 62%);
  --surface: #ffffff;
  --surface-soft: #eef1f5;
  --surface-strong: #e6eaef;
  --glass: rgba(255, 255, 255, 0.86);
  --field: #ffffff;
  --ink: #141a20;
  --muted: #4d5665;
  --faint: #656e7c;
  --line: rgba(20, 28, 42, 0.1);
  --line-strong: rgba(20, 28, 42, 0.2);
  --nav: #ffffff;
  --nav-hover: rgba(20, 28, 42, 0.05);
  --primary: #0b6f79;
  --primary-dark: #0b6f7b;
  --primary-soft: rgba(15, 133, 147, 0.1);
  --brand-gradient: var(--primary);
  --accent: #0b6f79;
  --focus: #0b6f79;
  --focus-ring: 0 0 0 3px rgba(15, 133, 147, 0.22);
  --on-primary: #ffffff;
  --warning: #8f5c0f;
  --warning-soft: rgba(241, 194, 27, 0.16);
  --danger: #d3404b;
  --danger-soft: rgba(211, 64, 75, 0.1);
  --success: #157a52;
  --success-soft: rgba(31, 157, 107, 0.12);
  --info: #0b6f79;
  --info-soft: rgba(15, 133, 147, 0.1);
  --tool: #5d6675;
  --tool-soft: rgba(93, 102, 117, 0.1);
  --warning-text: #8a6a00;
  --success-text: #157a38;
  --user-bubble: var(--surface-strong);
  --user-bubble-ink: var(--ink);
  --user-bubble-meta: var(--muted);
  --code-bg: #f2f4f9;
  --code-ink: #21242c;
  --topbar-bg: rgba(255, 255, 255, 0.85);
  --scrim: rgba(15, 23, 42, 0.4);
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.07);
  --shadow: 0 4px 14px -4px rgb(16 24 40 / 0.12);
  --shadow-lg: 0 16px 40px -12px rgb(16 24 40 / 0.2);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Glass surfaces need the blur to be legible over scrolled content; where
   backdrop-filter isn't available, fall back to solid chrome so nothing
   ghosts through the topbar or toasts. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-topbar {
    background: var(--nav);
  }

  .toast,
  .day-divider span {
    background: var(--surface);
  }
}

/* ------------------------------------------------------------------ *
 * Toasts — the single, non-blocking feedback surface. Replaces the
 * off-brand native alert()s and gives silent mutations a confirmation.
 * Carbon language: square corners, a colored left rule per status, the
 * body text kept at --ink for legibility. The region is aria-live in JS.
 * ------------------------------------------------------------------ */
.toast-region {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  max-height: 100vh;
  padding: 16px;
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  overflow: hidden;
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  padding: 12px 12px 12px 13px;
  color: var(--ink);
  pointer-events: auto;
  animation: toast-in var(--dur-3) var(--ease-spring);
}

.toast.leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--muted);
}

.toast-body {
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.toast-close {
  width: 24px;
  min-height: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.toast-close:hover {
  color: var(--ink);
  background: var(--surface-strong);
}

.toast.success {
  border-left-color: var(--success);
}
.toast.success .toast-icon {
  color: var(--success);
}

.toast.error {
  border-left-color: var(--danger);
}
.toast.error .toast-icon {
  color: var(--danger);
}

.toast.warning {
  border-left-color: var(--warning);
}
.toast.warning .toast-icon {
  color: var(--warning);
}

.toast.info {
  border-left-color: var(--info);
}
.toast.info .toast-icon {
  color: var(--info);
}

/* Indeterminate top progress bar shown while route() prefetches data, so a
   navigation gives immediate feedback instead of a frozen previous view. */
.route-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2001;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

body.route-loading .route-progress {
  opacity: 1;
}

.route-progress::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 35%;
  background: var(--primary);
  animation: route-progress-slide 1.1s ease-in-out infinite;
}

@keyframes route-progress-slide {
  0% {
    left: -35%;
  }
  100% {
    left: 100%;
  }
}

/* On phones a bottom-anchored region would sit over the chat composer, so pin
   toasts to the top edge and let them span the width. */
@media (max-width: 640px) {
  .toast-region {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    padding-top: max(12px, env(safe-area-inset-top));
  }
}

/* Confirm dialog — a styled, focus-managed replacement for native confirm() so
   destructive prompts speak the app's visual language instead of the browser's. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim);
  animation: modal-fade 140ms ease;
}

.modal-dialog {
  width: min(420px, 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  animation: modal-rise var(--dur-3) var(--ease-spring);
}

.modal-body {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* App modals (openModal): working dialogs for editors and run results.
   Header + internally-scrolling body, sized for real content. */
.app-modal .app-modal-dialog {
  display: flex;
  flex-direction: column;
  width: min(600px, 100%);
  max-height: min(88vh, 940px);
  max-height: min(88dvh, 940px);
  padding: 0;
  overflow: hidden;
}

.app-modal-wide .app-modal-dialog {
  width: min(960px, 100%);
}

.app-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.app-modal-head h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-modal-close {
  flex: 0 0 auto;
  min-height: 32px;
  width: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  box-shadow: none;
}

.app-modal-close:hover {
  background: var(--surface-strong);
  color: inherit;
}

.app-modal .app-modal-body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  min-height: 0;
  white-space: normal;
}

@media (max-width: 720px) {
  .app-modal {
    padding: 0;
    align-items: stretch;
  }

  .app-modal .app-modal-dialog,
  .app-modal-wide .app-modal-dialog {
    width: 100%;
    max-height: none;
    height: 100vh;
    height: var(--app-height, 100vh);
    border: 0;
    border-radius: 0;
  }
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--bg);
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

body {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  background-color: var(--bg);
  background-image: var(--bg-glow);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Habu at a new address ----
   The server writes this line as the body's first child when the console is
   asked for at an address that is not its public URL (internal/api/moved.go).
   It spans the sidebar and the page, above both. */
.moved-notice {
  grid-column: 1 / -1;
  padding: 9px 16px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--ink);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
}

.moved-notice a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}

::selection {
  background: var(--primary-soft);
}

.icon-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Inline SVG icons inherit text color; one size inside buttons and chips. */
.i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reusable loading shimmer for content that is still fetching. */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  color: transparent !important;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--nav-hover), transparent);
  animation: skeleton-sweep 1.2s var(--ease-out) infinite;
}

@keyframes skeleton-sweep {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

/* The hidden attribute must always win: authored display values (buttons,
   pills, flex rows) otherwise override the UA's display:none and "hidden"
   elements render as empty shells. */
[hidden] {
  display: none !important;
}

/* Every route paint animates its top-level sections in with a quick rise —
   navigation feels alive with zero JS. Chat/stream re-renders happen inside
   mounted containers, so streaming never re-triggers this. */
@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

#app > * {
  /* fill-mode backwards, NOT both: "both" keeps the transform keyframe
     applied after the animation ends, which silently turns every view section
     into the containing block for position:fixed descendants (the floating
     live-activity card was positioning relative to the workspace, offset by
     the sidebar width). "backwards" covers the stagger delay and releases the
     element completely once the entrance finishes. */
  animation: view-in var(--dur-3) var(--ease-out) backwards;
}

#app > *:nth-child(2) {
  animation-delay: 30ms;
}

#app > *:nth-child(n + 3) {
  animation-delay: 60ms;
}

body.nav-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

body[data-view="chat"] {
  height: 100vh;
  height: 100dvh;
  /* --app-height tracks the visual viewport (JS): unlike dvh it also shrinks
     for the virtual keyboard on iOS Safari, keeping the composer on screen. */
  height: var(--app-height, 100vh);
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* A bare <button> is the QUIET secondary treatment; the loud filled style is
   opt-in via .primary — one per view. This inversion is what keeps forms and
   registries from becoming a wall of competing blue CTAs. */
button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 5px 12px;
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  box-shadow: none;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

button:hover {
  background: var(--surface-strong);
}

button:active {
  transform: scale(0.98);
  transition-duration: 60ms;
}

button.primary {
  border-color: transparent;
  background: var(--ink);
  color: var(--bg);
}

button.primary:hover {
  background: color-mix(in srgb, var(--ink) 86%, var(--bg));
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--focus-ring);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}

button.secondary {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

button.secondary:hover {
  background: var(--surface-strong);
  box-shadow: none;
}

button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

button.ghost:hover {
  background: var(--nav-hover);
  color: var(--ink);
  box-shadow: none;
}

button.danger {
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  background: transparent;
  color: var(--danger);
  box-shadow: none;
}

button.danger:hover {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--on-primary);
  box-shadow: 0 6px 16px -6px rgba(250, 77, 86, 0.5);
}

a {
  color: var(--info);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
  letter-spacing: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1;
}

h2 {
  margin-bottom: 0;
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.2;
}

h3 {
  margin-bottom: 8px;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
}

p {
  margin-bottom: 10px;
}

pre,
code {
  font-family: var(--mono);
}

pre {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 13px;
  white-space: pre-wrap;
}

label,
.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  margin: 8px 0;
  /* Shrinkable both as an item (min-width) and as a container (the minmax
     track): otherwise a select's widest option inflates the whole form column
     right out of its panel. */
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--ink);
  padding: 10px 12px;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

input:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) {
  border-color: var(--faint);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

select[multiple] {
  min-height: 132px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

/* Always-mounted output targets (#new-token, #import-output, the trace
   timeline) must not paint as hollow slabs before they have content. */
pre:empty {
  display: none;
  border: 0;
  min-height: 0;
  padding: 0;
}

.shell-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--nav);
  color: var(--ink);
  padding: 14px 12px;
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  padding: 6px 8px;
  text-align: left;
}

.brand:hover {
  background: var(--nav-hover);
}

.brand-text {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
}

.brand-sub {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
}

.sidebar-collapse {
  width: 30px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 auto;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--faint);
  padding: 0;
  font-size: 12px;
  font-weight: 700;
}

.sidebar-collapse:hover {
  border-color: transparent;
  background: var(--nav-hover);
  color: var(--ink);
}

.brand-mark {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  /* Obsidian tile in both themes so the bone posts and the cool node read
     the same everywhere; the heat-pit core is the one warm note. */
  background: radial-gradient(120% 120% at 30% 20%, #1b2130, #0a0d12);
  color: #eaeef4;
}

.brand-mark svg {
  width: 62%;
  height: 62%;
}

.mobile-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.mobile-brand-mark {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: radial-gradient(120% 120% at 30% 20%, #1b2130, #0a0d12);
  color: #eaeef4;
}

.mobile-brand-mark svg {
  width: 64%;
  height: 64%;
}

.brand p {
  margin: 4px 0 0;
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
}

.shell-sidebar nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 4px;
}

/* Grouped IA: quiet section labels break the 16-item list into scannable
   clusters without adding chrome. */
.nav-group-label {
  margin: 14px 11px 4px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
}

.shell-sidebar nav .nav-group-label:first-child {
  margin-top: 2px;
}

.shell-sidebar nav button,
.sidebar-control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  min-height: 34px;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  padding: 7px 11px;
  text-align: left;
  font-size: var(--text-md);
  font-weight: 600;
  box-shadow: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.shell-sidebar nav button:hover,
.sidebar-control:hover {
  border-color: transparent;
  background: var(--nav-hover);
  color: var(--ink);
  box-shadow: none;
}

.shell-sidebar nav button:active {
  transform: scale(0.985);
}

.shell-sidebar nav button.active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--ink);
  box-shadow: none;
}

/* Sliding accent: a rounded gradient bar hugs the active item and springs in. */
.shell-sidebar nav button.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  animation: nav-accent-in var(--dur-2) var(--ease-spring) both;
}

@keyframes nav-accent-in {
  from {
    transform: scaleY(0.3);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon-glyph {
  flex: 0 0 18px;
  text-align: center;
  font-size: 15px;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* System-status nav dot — one aggregate health indicator on the "System status"
   nav item. Right-aligned in the row (margin-left:auto) so there's no left-edge to
   align; folds to a corner badge over the icon when the sidebar is collapsed. */
.nav-status-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--faint);
}

.nav-status-dot.ok { background: var(--success); }
.nav-status-dot.degraded { background: var(--warning); animation: status-pulse 1.6s ease-in-out infinite; }
.nav-status-dot.down { background: var(--danger); animation: status-pulse 1.6s ease-in-out infinite; }

nav button[data-view="status"] { position: relative; }

body.nav-collapsed .nav-status-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  margin: 0;
  box-shadow: 0 0 0 2px var(--surface);
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* System status page */
.status-overview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 18px;
}

.status-overview > div {
  display: grid;
  gap: 2px;
  margin-right: auto;
}

.status-overview > div > strong { font-size: 15px; }
.status-overview > div > .muted { font-size: 12px; }
.status-overview.degraded { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.status-overview.down { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.status-card {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.status-card.warning { border-color: color-mix(in srgb, var(--warning) 40%, var(--line)); }
.status-card.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }

.status-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.status-card-head h3 {
  margin: 0;
  margin-right: auto;
  font-size: 14px;
}

.status-card-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.status-card-key {
  display: inline-block;
  min-width: 52px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-card-action {
  justify-self: start;
  margin-top: 4px;
}

/* 30-day uptime history strip (statuspage-style) on each service card */
.uptime-section {
  display: grid;
  gap: 4px;
  margin-top: 2px;
}

.uptime-figures {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
}

.uptime-figures strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.uptime-strip {
  display: flex;
  gap: 2px;
}

.uptime-cell {
  flex: 1 1 0;
  height: 22px;
  border-radius: 2px;
  background: var(--line);
  min-width: 3px;
}

.uptime-cell.ok { background: var(--success); }
.uptime-cell.degraded { background: var(--warning); }
.uptime-cell.down { background: var(--danger); }
.uptime-cell.empty { opacity: 0.45; }

.uptime-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}

.status-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--faint);
}

.status-dot.ok { background: var(--success); }
.status-dot.degraded { background: var(--warning); animation: status-pulse 1.6s ease-in-out infinite; }
.status-dot.down { background: var(--danger); animation: status-pulse 1.6s ease-in-out infinite; }

.status-unreachable {
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-unreachable h3 { margin: 0 0 3px; }

.sidebar-footer {
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.sidebar-footer .profile-menu summary {
  width: 100%;
}

/* Collapsed (icon-only) sidebar */
body.nav-collapsed .brand,
body.nav-collapsed .nav-label,
body.nav-collapsed .brand-sub {
  display: none;
}

body.nav-collapsed .shell-sidebar {
  padding: 14px 8px;
}

body.nav-collapsed .sidebar-head {
  justify-content: center;
}

body.nav-collapsed nav button,
body.nav-collapsed .sidebar-control,
body.nav-collapsed .sidebar-footer .profile-menu summary {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.shell-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 100vh;
  background: var(--bg);
}

/* The view always takes the last row, the one that fills the screen,
   whichever bars above it are shown. The Habu apps hide the phone's top bar
   (html.harness-app), and a hidden bar leaves the grid: by position the view
   would then land in a row sized to its content, a new chat's composer would
   sit mid-screen, and each answer would push it further down. */
.shell-main > #app {
  grid-row: -2 / -1;
}

/* Platform service-status banner — a slim strip at the top of the content area,
   collapsed to zero height (so it never shifts layout) when everything is healthy. */
.service-status {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.service-status:empty {
  padding: 0;
  border: 0;
  min-height: 0;
}

.service-status.degraded {
  background: color-mix(in srgb, var(--warning) 15%, var(--surface));
  border-bottom-color: color-mix(in srgb, var(--warning) 50%, var(--line));
}

.service-status.down {
  background: color-mix(in srgb, var(--danger) 15%, var(--surface));
  border-bottom-color: color-mix(in srgb, var(--danger) 50%, var(--line));
}

.service-status-icon {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.35;
}

.service-status.degraded .service-status-icon { color: var(--warning); }
.service-status.down .service-status-icon { color: var(--danger); }

.service-status-body {
  min-width: 0;
}

.service-status-body > strong {
  display: block;
  font-weight: 700;
}

.service-status-body ul {
  margin: 3px 0 0;
  padding-left: 17px;
}

.service-status-body li {
  margin: 1px 0;
}

.service-status-detail {
  color: var(--faint);
  font-size: 12px;
}

body[data-view="chat"] .shell-main {
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100vh);
  min-height: 0;
  overflow: hidden;
}

.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Mobile chrome — hidden until the phone breakpoint. */
.mobile-topbar {
  display: none;
}

.nav-backdrop {
  display: none;
}

.profile-menu {
  position: relative;
}

.profile-menu summary {
  display: flex;
  min-height: 38px;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  padding: 5px 12px 5px 5px;
  list-style: none;
}

.profile-menu summary::-webkit-details-marker {
  display: none;
}

.profile-avatar {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  color: var(--on-primary);
  font-size: 12px;
  font-weight: 700;
}

.profile-name {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.profile-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: grid;
  width: max-content;
  min-width: 200px;
  max-width: 240px;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: 13px;
}

.profile-popover strong {
  font-size: 14px;
}

.profile-popover span {
  color: var(--faint);
  font-size: 12px;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 24px 28px 32px;
}

body[data-view="chat"] .workspace {
  /* The base .workspace row is auto (content-sized): a long thread happened to
     fill the screen, but a new/short chat collapsed the whole pane to ~500px
     with a dead band below. Chat must always own the full viewport row. */
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.page-hint {
  margin: -6px 0 14px;
  font-size: var(--text-sm);
  max-width: 78ch;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 18px;
  min-height: 44px;
  text-align: left;
}

.page-header > div {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.muted {
  color: var(--faint);
}

.grid {
  display: grid;
  /* minmax(0,1fr), not the implicit auto track: auto sizes to max-content and
     legally overflows a definite container, so one select with a long option
     used to push a whole form out of its panel. */
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
}

.grid > button,
form.grid > button {
  justify-self: start;
  width: auto;
}

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 13px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.between {
  justify-content: space-between;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.panel.inset {
  border-color: var(--line);
  border-left: 3px solid var(--primary);
  background: var(--surface-soft);
  box-shadow: none;
}

.narrow {
  max-width: 680px;
}

.inline-output:empty {
  display: none;
}

.inline-editor {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 12px;
}

.inline-editor summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}

.inline-editor form {
  margin-top: 12px;
}

.compact-field {
  margin: 0;
}

.section-heading,
.entity-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 14px;
}

.status-chip,
.status-pill {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  padding: 2px 9px;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.status-chip.strong,
.status-pill.strong,
.status-pill.success {
  border-color: transparent;
  background: var(--success-soft);
  color: var(--success-text);
}

.status-pill.warning {
  border-color: transparent;
  background: var(--warning-soft);
  color: var(--warning-text);
}

.context-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  color: var(--muted);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.context-chip.success {
  border-color: color-mix(in srgb, var(--success) 42%, transparent);
  color: var(--success);
}

.context-chip.warning {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  color: var(--warning);
}

.status-pill.danger {
  border-color: transparent;
  background: var(--danger-soft);
  color: var(--danger);
}

.status-pill.info {
  border-color: transparent;
  background: var(--info-soft);
  color: var(--info);
}

.workspace-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 4px;
}

.workspace-tabs button {
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding: 5px 9px;
  font-size: 12px;
}

.workspace-tabs button:hover,
.workspace-tabs button.active {
  border-color: var(--line-strong);
  background: var(--surface-strong);
  color: var(--ink);
}

.workspace-tabs button.active {
  box-shadow: inset 0 -2px 0 var(--primary);
}

.workspace-tabs em {
  display: inline-grid;
  min-width: 18px;
  min-height: 18px;
  place-items: center;
  background: var(--surface);
  color: var(--faint);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
}

/* Settings — sectioned IA. A quiet left sub-rail toggles which group of panels
   is visible; on narrow screens it becomes a horizontal tab scroller. Every
   section stays in the DOM (only visibility toggles) so bindings keep working.
   Named distinctly from the pre-existing .settings-layout dashboard grid. */
.settings-panes {
  display: grid;
  grid-template-columns: minmax(180px, 216px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  margin-top: 4px;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 6px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  font-size: var(--text-md);
  font-weight: 600;
  text-align: left;
}

.settings-nav-item:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

.settings-nav-item.active {
  border-color: var(--line-strong);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--primary);
}

.settings-sections {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settings-section {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settings-section[hidden] {
  display: none;
}

.settings-jumplink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.settings-jumplink .form-hint {
  margin: 4px 0 0;
  max-width: 54ch;
}

.settings-jumplink button {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .settings-panes {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .settings-nav {
    position: static;
    top: auto;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .settings-nav::-webkit-scrollbar {
    display: none;
  }

  .settings-nav-item {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .settings-nav-item.active {
    box-shadow: inset 0 -2px 0 var(--primary);
  }
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.metric-card {
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  box-shadow: none;
}

.metric-card span {
  display: block;
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
}

.metric-card strong {
  display: block;
  margin: 8px 0 6px;
  color: var(--ink);
  font-size: var(--text-metric);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.metric-card p {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
}

.dashboard-grid,
.settings-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: start;
}

/* Grid items must be allowed to shrink: a select with one long option would
   otherwise inflate its whole column past the panel border and slide the form
   under the neighboring card. */
.settings-layout > * {
  min-width: 0;
}

/* Control-plane dashboard: service status rows, agent-fleet table, log tail. */
.service-list {
  display: flex;
  flex-direction: column;
}

.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}

.service-row:last-child {
  border-bottom: none;
}

.service-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.service-row-main .muted {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.fleet-table-wrap {
  overflow-x: auto;
}

.fleet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fleet-table th,
.fleet-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.fleet-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}

.fleet-table th.num,
.fleet-table td.num {
  text-align: right;
}

.fleet-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---- AI Gateway (control plane) ---- */
.gateway-live-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gateway-live-card {
  border-left: 3px solid var(--primary);
}

.gateway-metric-toggle {
  display: inline-flex;
  gap: 4px;
}

.gateway-metric-toggle .ghost.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.gateway-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gateway-chart-svg {
  display: block;
  width: 100%;
  height: 160px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.gateway-chart-axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--faint);
}

.gateway-provider-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.gateway-flag {
  flex: none;
}

.gateway-subnum {
  font-size: 11px;
  font-weight: 400;
}

.gateway-warn {
  color: var(--warning);
}

@media (max-width: 700px) {
  .gateway-live-grid {
    grid-template-columns: 1fr;
  }
}

.fleet-agent {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fleet-agent .muted {
  font-size: 12px;
}

.log-list {
  display: flex;
  flex-direction: column;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  max-height: 60vh;
  overflow-y: auto;
}

.log-list.compact {
  max-height: 320px;
}

.log-row {
  display: grid;
  grid-template-columns: 64px 110px 44px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 5px 4px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-1) var(--ease-out);
}

.log-row:hover {
  background: var(--nav-hover);
}

.log-time {
  opacity: 0.6;
  white-space: nowrap;
}

.log-service {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--faint);
}

.log-level {
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.7;
}

.log-row.level-warn .log-level {
  color: var(--warning);
  opacity: 1;
}

.log-row.level-error .log-level {
  color: var(--danger);
  opacity: 1;
}

.log-msg {
  overflow-wrap: anywhere;
}

.logs-toolbar {
  flex-wrap: wrap;
}

.logs-search {
  width: auto;
  flex: 1 1 180px;
  max-width: 260px;
  min-width: 200px;
}

.logs-auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

select {
  min-width: 0;
  max-width: 100%;
}

.builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.5fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 940px) {
  .builder-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .preview-panel {
    position: static;
  }
}

.builder-panel {
  display: grid;
  gap: 16px;
}

.builder-intro {
  margin: -6px 0 2px;
  max-width: 66ch;
  color: var(--muted);
}

.tool-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.tool-quick-action {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  justify-content: start;
  min-height: 92px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink);
  padding: 15px 16px;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.tool-quick-action:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--primary);
}

.qa-icon {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qa-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.qa-eyebrow {
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tool-quick-action strong {
  font-size: 14px;
  font-weight: 600;
}

.tool-quick-action em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
}

.preview-panel {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 14px;
}

.form-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  background: var(--surface-soft);
  padding: 14px;
}

.form-section .section-heading {
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.check-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 72px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 11px;
  color: var(--ink);
}

.check-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.check-card strong,
.check-card em {
  display: block;
}

.check-card em {
  margin-top: 3px;
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.schema-builder {
  display: grid;
  gap: 10px;
}

.schema-row {
  display: grid;
  /* Fluid columns: fill the row when wide, stack when the panel is narrow —
     the old fixed 130/94/160px template forced a ~580px minimum that pushed
     builder forms out of their panels. */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  min-width: 0;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 11px;
}

.tool-meta-row,
.tool-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-card-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.tool-meta-row span,
.tool-chip-row span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid var(--line-strong);
  background: var(--surface-soft);
  color: var(--muted);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
}

.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.entity-card,
.run-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
  box-shadow: none;
  transition: border-color var(--dur-1) var(--ease-out);
}

.entity-card:hover,
.run-card:hover {
  border-color: var(--line-strong);
}

.entity-card h3,
.run-card h3 {
  margin: 0;
}

.provider-card {
  align-content: start;
}

/* Agents registry: search / sort / filter toolbar + dense cards. */
.agents-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.agents-toolbar #agent-search,
.agents-toolbar [data-col-search],
.agents-toolbar input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
  width: auto;
  min-height: 32px;
  padding: 5px 12px;
}

.agents-toolbar #agent-sort,
.agents-toolbar [data-col-sort],
.agents-toolbar select {
  flex: 0 0 auto;
  width: auto;
  min-height: 32px;
  padding: 5px 30px 5px 10px;
}

.agent-filter-chips,
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agent-filter-chips button,
.filter-chips button {
  min-height: 30px;
  padding: 4px 11px;
  font-size: var(--text-xs);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.agent-filter-chips button:hover,
.filter-chips button:hover {
  border-color: var(--line-strong);
  color: inherit;
}

.agent-filter-chips button.active,
.filter-chips button.active {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.agent-count {
  font-size: var(--text-xs);
  margin-left: auto;
  white-space: nowrap;
}

.agents-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.agent-card {
  padding: 12px 14px;
  gap: 8px;
  align-content: start;
}

.agent-card h3 {
  font-size: var(--text-md);
}

.agent-card-id p {
  margin: 2px 0 0;
  font-size: var(--text-xs);
}

.agent-card-meta {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.agent-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.agent-badge-sep {
  color: var(--faint);
}

/* Per-card ⋯ overflow menu: rare actions (publish, reset, delete) live here
   instead of a button per action on every card. */
.card-menu {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}

.card-menu-button {
  min-width: 34px;
  padding: 5px 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.card-menu-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 40;
  display: grid;
  min-width: 170px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.card-menu-pop button {
  justify-content: flex-start;
  min-height: 34px;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: var(--text-sm);
  box-shadow: none;
  text-align: left;
}

.card-menu-pop button:hover {
  background: var(--surface-strong);
}

.card-menu-pop .danger-item {
  color: var(--danger);
}

.agent-card-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agent-card-actions {
  gap: 6px;
  align-items: center;
}

.agent-card-actions > button {
  padding: 5px 12px;
  font-size: var(--text-xs);
}

/* Mobile: the toolbar packs into two rows — full-width search, then one
   horizontally scrollable strip of sort + chips + count — and cards tighten. */
@media (max-width: 720px) {
  .agents-toolbar {
    gap: 8px;
  }

  .agents-toolbar #agent-search {
    flex: 1 1 100%;
  }

  .agents-toolbar #agent-sort {
    flex: 0 0 auto;
  }

  .agent-filter-chips {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    min-width: 0;
  }

  .agent-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .agent-filter-chips button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .agent-count {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .agent-card {
    padding: 11px 12px;
    gap: 7px;
  }

  .agent-card-desc {
    -webkit-line-clamp: 1;
  }

  /* Card actions stay a compact horizontal strip: the app-wide mobile rule
     stacks .row buttons full-width, which turned every card into a tower of
     buttons. Higher-specificity selectors override it regardless of order. */
  .agent-card .agent-card-actions {
    flex-direction: row;
    align-items: center;
  }

  .agent-card .agent-card-actions > button,
  .agent-card .card-menu-button {
    width: auto;
  }

  /* Demo scenarios: drop the intro copy on phones — the card explains itself. */
  .demo-scenarios .editor-section-head p {
    display: none;
  }
}

.agent-tools-shortcuts {
  gap: 6px;
  margin-top: 4px;
}

.agent-tools-shortcuts button {
  min-height: 26px;
  padding: 2px 10px;
  font-size: var(--text-xs);
}

/* Demo scenarios (Agents page): on-demand showcase cards. */
.demo-scenarios {
  margin-top: 16px;
  margin-bottom: 16px;
}

.demo-scenarios .entity-grid {
  margin-top: 12px;
}

.demo-card {
  align-content: start;
}

.demo-card h3 .muted {
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.demo-card.demo-busy {
  opacity: 0.75;
}

.demo-card.demo-busy button {
  pointer-events: none;
}

.provider-edit-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.meta-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.meta-list div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.meta-list dt {
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.meta-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.record-list {
  display: grid;
  gap: 10px;
}

.record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 11px 12px;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.record-row:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

.record-row strong,
.record-row span {
  display: block;
}

/* The run id is a long unbreakable token; let its column shrink and the id
   wrap so a narrow (phone) viewport isn't forced wider to fit it on one line. */
.record-row > div {
  min-width: 0;
}

.record-row strong {
  overflow-wrap: anywhere;
}

.record-row span {
  color: var(--faint);
  font-size: 12px;
}

.record-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}

/* A machine and the sessions nested under it are one block, so the .record-list
   grid spaces them as a unit and the nest hangs off its machine instead of
   floating between two of them. */
.record-group {
  display: grid;
  gap: 6px;
}

/* The live-session count rides in the machine's title. `.record-row span` forces
   display:block on every span below a row, so this has to claim inline itself
   (the global [hidden] rule still wins when the count is zero). */
.record-row .record-title .record-count {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  color: var(--success-text);
  margin-left: 8px;
  padding: 1px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* The disclosure caret is drawn from borders rather than an icon so the toggle
   needs no new symbol in the sprite. */
.record-expand::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-2) var(--ease-out);
}

.record-expand[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}

/* Indented and rule-lined: with several machines expanded at once, a session
   has to be unmistakably attached to the one above it. */
.record-nest {
  display: grid;
  gap: 6px;
  border-left: 2px solid var(--line-strong);
  margin-left: 15px;
  padding-left: 12px;
}

.session-row {
  align-items: flex-start;
  border-left-color: var(--line);
  background: transparent;
  padding: 9px 10px;
}

/* The one fact worth spotting from across the list, so it gets the accent edge. */
.session-row.is-live {
  border-left-color: var(--success);
}

.session-row .record-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.session-row .record-title .session-state {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  padding: 1px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.session-row.is-live .record-title .session-state {
  border-color: transparent;
  background: var(--success-soft);
  color: var(--success-text);
}

/* The prompt is the audit line; it reads as prose, not as metadata. */
.session-row .record-sub {
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Dot-separated and wrapping, matching the "os · arch · last seen" rhythm of the
   machine row above rather than inventing a second one. */
.session-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-top: 3px;
}

.session-facts span {
  color: var(--faint);
  font-size: var(--text-xs);
}

.session-facts span + span::before {
  content: "·";
  margin-right: 6px;
}

.runs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.42fr);
  gap: 16px;
  align-items: start;
}

.run-inspector {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 12px;
}

.compact-json {
  max-height: 210px;
  margin: 0;
  font-size: 12px;
}

.timeline {
  min-height: 190px;
  max-height: 420px;
  margin: 0;
  font-size: 12px;
}

.chat-workspace {
  display: grid;
  grid-template-columns: minmax(228px, 280px) minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Mobile-drawer scrim: must not exist in the desktop grid flow, or it takes
   the conversation's column and wraps the chat into the rail track. */
.chat-rail-backdrop {
  display: none;
}

.chat-rail,
.chat-pane,
.run-rail {
  min-height: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
}

.chat-rail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 14px 12px;
}

.chat-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
}

.chat-rail-header h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Which assistant the rail is scoped to — chats shown (and Cleared) are ONLY hers */
.chat-rail-header .rail-scope {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 1px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-rail-header button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

.chat-rail-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.thread-filter {
  min-height: 32px;
  padding: 7px 9px;
  font-size: 12px;
}

.chat-rail-tools button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}

.chat-screen {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.chat-workspace.rail-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.chat-workspace.rail-collapsed .chat-rail {
  display: none;
}

/* ---- Focus mode: one control clears BOTH side panels ----
   The chat header's toggle hides the threads rail (rail-collapsed) AND the app
   nav (body.chat-focus) in a single motion, for a distraction-free chat. The
   nav column animates smoothly to zero; the same toggle brings everything back.
   Scoped to the chat surfaces (body[data-view="chat"]). */
body {
  transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Desktop only: focus mode collapses the nav column. On mobile the sidebar is a
   fixed drawer (out of grid flow), so forcing a 0-width first track here would
   drop the main content into it and blank the screen — the chat is already
   full-width on mobile, so focus is a visual no-op there. */
@media (min-width: 641px) {
  body[data-view="chat"].chat-focus {
    grid-template-columns: 0 minmax(0, 1fr);
  }
  body[data-view="chat"].chat-focus .shell-sidebar {
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
}
.shell-sidebar {
  transition: opacity 0.18s ease;
}
/* The toggle chevron points inward to collapse, and flips outward once the
   panels are hidden — a clear "expand to bring them back" affordance. */
.rail-toggle svg {
  transition: transform 0.2s ease;
}
.rail-toggle.is-focused svg {
  transform: scaleX(-1);
}

/* Responsive: collapse the global nav to icons and narrow the chat rail
   on smaller viewports so the conversation keeps room to breathe. */
@media (min-width: 641px) and (max-width: 1080px) {
  body:not(.nav-collapsed) {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  body:not(.nav-collapsed) .brand,
  body:not(.nav-collapsed) .nav-label,
  body:not(.nav-collapsed) .brand-sub {
    display: none;
  }
  body:not(.nav-collapsed) .sidebar-head {
    justify-content: center;
  }
  body:not(.nav-collapsed) nav button,
  body:not(.nav-collapsed) .sidebar-control,
  body:not(.nav-collapsed) .sidebar-footer .profile-menu summary {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .chat-workspace {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  }
}

.chat-rail h2,
.chat-header h2 {
  margin: 0;
}

.chat-rail .row.between {
  align-items: flex-start;
}

.chat-rail .action-group button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.thread-list {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 0;
  padding-top: 10px;
  overflow: auto;
  overscroll-behavior: contain;
}

.thread-item {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: start;
  justify-content: start;
  align-content: center;
  width: 100%;
  min-height: 48px;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
  padding: 8px 11px;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 90ms ease;
}

.thread-item:hover {
  background: var(--surface-strong);
  border-color: var(--line);
}

.thread-item.active {
  background: var(--surface-strong);
  border-color: var(--line);
  box-shadow: inset 3px 0 0 var(--primary);
}

.thread-title {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-item.active .thread-title {
  color: var(--primary);
}

.thread-meta {
  justify-self: start;
  color: var(--faint);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
}

/* Build-project rows carry a delete button over the row's right edge, revealed
   on hover/focus and always shown on touch (where there is no hover). The row
   reserves right padding so long titles never slide under it. */
.thread-item-wrap {
  position: relative;
}

.thread-item-wrap .thread-item {
  padding-right: 38px;
}

.thread-delete {
  /* Auto-margin centering, not translateY(-50%): the transform rounds to
     device pixels independently of the row at non-100% zoom / fractional DPR,
     which is exactly the "sits a few pixels low" drift. Top+bottom auto
     margins center within the row box with no transform rounding at all. */
  position: absolute;
  top: 0;
  bottom: 0;
  right: 7px;
  margin-top: auto;
  margin-bottom: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.thread-item-wrap:hover .thread-delete,
.thread-item-wrap:focus-within .thread-delete {
  opacity: 1;
}

.thread-delete:hover {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  color: var(--danger);
}

.thread-delete-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Projects in the chat rail: a section head, a row per project (its colour
   label, name and count) with its chats indented beneath, and the ⋯ menu a
   row opens. */
.rail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 11px 4px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rail-section-head:first-child {
  padding-top: 0;
}

.rail-section-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}

.rail-section-add:hover {
  border-color: var(--line);
  background: var(--surface-strong);
  color: var(--ink);
}

.project-hint {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 6px 11px;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

div.project-hint {
  cursor: default;
}

button.project-hint:hover {
  color: var(--muted);
}

.project-row-wrap {
  position: relative;
}

.project-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  padding: 6px 38px 6px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.project-row:hover {
  border-color: var(--line);
  background: var(--surface-strong);
}

.project-chevron {
  display: inline-block;
  width: 10px;
  color: var(--faint);
  transition: transform 120ms ease;
}

.project-group.open .project-chevron {
  transform: rotate(90deg);
}

.project-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-count {
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.project-row-wrap:hover .thread-delete,
.project-row-wrap:focus-within .thread-delete {
  opacity: 1;
}

.project-threads {
  display: grid;
  gap: 3px;
  margin: 2px 0 6px 13px;
  padding-left: 6px;
  border-left: 1px solid var(--line);
}

.project-empty {
  min-height: 0;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.project-empty:hover {
  color: var(--primary);
}

.project-dot {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.project-dot[data-color="slate"] { background: #8792a2; box-shadow: none; }
.project-dot[data-color="red"] { background: #e5484d; box-shadow: none; }
.project-dot[data-color="orange"] { background: #f76b15; box-shadow: none; }
.project-dot[data-color="amber"] { background: #f5a524; box-shadow: none; }
.project-dot[data-color="green"] { background: #30a46c; box-shadow: none; }
.project-dot[data-color="teal"] { background: #12a594; box-shadow: none; }
.project-dot[data-color="blue"] { background: #3e63dd; box-shadow: none; }
.project-dot[data-color="violet"] { background: #8e4ec6; box-shadow: none; }
.project-dot[data-color="pink"] { background: #d6409f; box-shadow: none; }

/* Scheduled in the chat rail (schedule-chats.js): each scheduled task's own
   chat, with a clock, when it runs next, and Paused or Ended. */
.schedule-section {
  display: grid;
  gap: 3px;
}

.schedule-chat .thread-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.schedule-chat .thread-unread-dot {
  margin-right: 0;
}

.schedule-chat-glyph {
  display: inline-flex;
  flex: none;
  color: var(--muted);
}

.schedule-chat-glyph .i {
  width: 13px;
  height: 13px;
}

.schedule-chat.active .schedule-chat-glyph {
  color: var(--primary);
}

.schedule-chat-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-chat.is-paused .thread-meta {
  color: var(--warning-text);
}

.schedule-chat.is-ended .schedule-chat-name,
.schedule-chat.is-ended .schedule-chat-glyph {
  color: var(--faint);
}

/* The open task chat's header: when it runs, with Run now, Pause or Resume
   and Settings. It takes a row of its own under the title, on phones too. */
.chat-header.has-schedule {
  flex-wrap: wrap;
  row-gap: 6px;
}

.chat-schedule-slot {
  flex: 1 0 100%;
  min-width: 0;
}

.chat-schedule-slot:empty {
  display: none;
}

.chat-schedule-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.chat-schedule-when {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.chat-schedule-when > .i {
  color: var(--muted);
}

.chat-schedule-next::before {
  content: "·";
  margin-right: 8px;
  color: var(--faint);
}

.chat-schedule-bar.is-paused .chat-schedule-next {
  color: var(--warning-text);
}

.chat-schedule-bar.is-ended {
  color: var(--faint);
}

.chat-schedule-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

.chat-schedule-actions .link-button {
  font-size: var(--text-sm);
}

.chat-schedule-actions .link-button:disabled {
  opacity: 0.55;
  cursor: progress;
}

.message-role .i {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
}

.row-menu-button {
  font-size: 15px;
  line-height: 1;
}

.row-menu-button:hover {
  border-color: var(--line);
  background: var(--surface-strong);
  color: var(--ink);
}

.row-menu {
  position: fixed;
  z-index: 60;
  display: grid;
  min-width: 190px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.row-menu button {
  justify-content: flex-start;
  min-height: 32px;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: none;
  text-align: left;
}

.row-menu button:hover,
.row-menu button:focus-visible {
  background: var(--surface-strong);
}

.row-menu .danger-item {
  color: var(--danger);
}

.row-menu-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--line);
}

.project-form {
  display: grid;
  gap: 14px;
}

.project-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.project-colors legend {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.project-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

.project-color input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-color .project-dot {
  width: 14px;
  height: 14px;
}

.project-color:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}

.project-color:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.project-picker {
  display: grid;
  gap: 6px;
}

.project-pick {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.project-pick:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface-strong);
}

.project-pick.current {
  opacity: 0.55;
  cursor: default;
}

.project-pick.new {
  color: var(--primary);
}

.habu-md-editor {
  width: 100%;
  min-height: 320px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  resize: vertical;
}

.habu-md-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.habu-md-foot .over {
  color: var(--danger);
}

.chat-header h2.renamable {
  border-radius: 6px;
  cursor: text;
}

.chat-header h2.renamable:hover {
  background: var(--surface-strong);
  box-shadow: 0 0 0 4px var(--surface-strong);
}

.chat-header-project-slot:empty {
  display: none;
}

.chat-header-project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
}

.chat-header-project:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (pointer: coarse) {
  .thread-delete {
    opacity: 1;
  }
}

/* Build header "Checkpoints" action + the checkpoints modal (agent version
   history a build project can restart from). Version rows reuse .version-row. */
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.chat-header-action {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.checkpoint-agents {
  display: grid;
  gap: 18px;
}

.checkpoint-agent {
  display: grid;
  gap: 9px;
}

.checkpoint-agent-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.checkpoint-agent-head strong {
  font-size: 14px;
}

.checkpoint-versions {
  display: grid;
  gap: 8px;
}

/* Trace debugger — span waterfall + payload inspector + AI diagnosis. */
.trace-debugger {
  display: grid;
  gap: 14px;
}

.trace-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.trace-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}

.trace-head-meta code {
  font-size: 11px;
  color: var(--faint);
}

.trace-head-actions {
  display: flex;
  gap: 8px;
}

.trace-head-actions button {
  width: auto;
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.trace-waterfall {
  display: grid;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  background: var(--surface);
}

.trace-row {
  display: grid;
  grid-template-columns: minmax(180px, 34%) 1fr 72px;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  padding: 5px 8px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.trace-row:hover {
  background: var(--surface-strong);
}

.trace-row.selected {
  background: var(--surface-strong);
  border-color: var(--line-strong);
}

.trace-row-label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.trace-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.trace-kind {
  flex: 0 0 auto;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--faint) 16%, transparent);
  color: var(--faint);
}

.trace-kind-run { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.trace-kind-model { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); }
.trace-kind-tool { background: color-mix(in srgb, var(--warning) 20%, transparent); color: color-mix(in srgb, var(--warning) 75%, var(--ink)); }
.trace-kind-approval { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

.trace-row-track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--line) 45%, transparent);
  overflow: hidden;
}

.trace-row-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: var(--info);
  min-width: 3px;
}

.trace-bar-ok { background: var(--success); }
.trace-bar-error { background: var(--danger); }
.trace-bar-running { background: var(--warning); }
.trace-bar-pending, .trace-bar-canceled { background: var(--faint); }

.trace-row-dur {
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.trace-detail {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--surface);
  max-height: 340px;
  overflow-y: auto;
}

.trace-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.trace-section {
  display: grid;
  gap: 6px;
}

.trace-section h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
}

.trace-section-error h4 { color: var(--danger); }

.trace-json {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.5;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.trace-section-error .trace-json {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-strong));
}

.trace-events, .trace-logs {
  display: grid;
  gap: 3px;
  max-height: 180px;
  overflow-y: auto;
}

.trace-event, .trace-log {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--surface-strong);
  min-width: 0;
}

.trace-event-type {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--info);
}

.trace-event-payload, .trace-log-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--faint);
}

.trace-log-time {
  flex: 0 0 auto;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.trace-log-service {
  flex: 0 0 auto;
  font-weight: 600;
}

.trace-log-error .trace-log-msg, .trace-log-error .trace-log-service { color: var(--danger); }
.trace-log-warn .trace-log-msg, .trace-log-warn .trace-log-service { color: color-mix(in srgb, var(--warning) 80%, var(--ink)); }

.trace-ai {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  padding: 12px 14px;
}

.trace-ai-head {
  font-size: 12px;
  font-weight: 700;
}

.trace-ai-body {
  font-size: 13px;
  line-height: 1.55;
}

.chat-run-debug {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.chat-run-debug button {
  width: auto;
  padding: 4px 10px;
  font-size: 11px;
}

@media (max-width: 720px) {
  .trace-row {
    grid-template-columns: minmax(120px, 44%) 1fr 58px;
    gap: 6px;
  }
}

.chat-pane {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 12px 20px;
}

.chat-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-header h2 {
  max-width: 60ch;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-toggle {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 15px;
}

.rail-toggle:hover {
  color: var(--ink);
}

.chat-agent-field {
  flex: 0 0 auto;
  width: auto;
  min-width: 180px;
  max-width: 280px;
  margin: 0;
}

.chat-agent-field select {
  min-height: 36px;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

.chat-messages {
  display: flex;
  width: 100%;
  /* One knob for the conversation column: transcript, composer, and the
     approvals strip stay in lockstep. Full-bleed by default — the conversation
     owns the whole pane; readability comes from the per-bubble caps below. */
  max-width: var(--chat-column, 100%);
  min-height: 0;
  margin: 0 auto;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--bg);
  padding: 26px 24px 32px;
  scroll-behavior: smooth;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(920px, 96%);
  animation: none;
}

/* Interaction card: a paused run asking the person in the chat (user.ask /
   user.choose / user.confirm). Rendered inline in the transcript; removed once
   answered — the reply then flows back as the tool result. */
.interaction-card {
  align-self: flex-start;
  width: min(560px, 96%);
  padding: 14px 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  animation: none;
}

.interaction-question {
  font-weight: 600;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.interaction-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.interaction-input {
  width: 100%;
  resize: vertical;
}

.interaction-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.interaction-options {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.interaction-option {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.interaction-decline {
  opacity: 0.75;
}

/* Build-with-AI workspace: the chat surface scoped to builder projects. */
.build-tag {
  flex: 0 0 auto;
  padding: 2px 10px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.build-project-dialog {
  width: min(500px, 92vw);
  text-align: left;
}

.build-project-dialog h3 {
  margin: 0 0 6px;
}

.build-project-dialog .dialog-hint {
  margin: 0 0 14px;
  font-size: 0.9em;
  opacity: 0.75;
}

.build-project-dialog form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.build-project-dialog .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.build-project-dialog .field span {
  font-size: 13px;
  font-weight: 600;
}

.build-project-dialog textarea {
  resize: vertical;
}

.chat-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message.assistant {
  align-self: flex-start;
}

.chat-message.tool {
  align-self: center;
  max-width: min(700px, 96%);
}

@keyframes message-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.message-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}

/* Agent avatars: letter fallback, uploaded image, or the locked Habu mark.
   Shared by chat rows (.message-avatar), agent cards, and the editor. */
.agent-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}

.message-avatar.has-img img,
.agent-avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-avatar.has-mark,
.agent-avatar.has-mark {
  background: radial-gradient(120% 120% at 30% 20%, #1b2130, #0a0c11);
  color: #eaeef4;
  border: 1px solid var(--line-strong);
}

.message-avatar.has-mark svg,
.agent-avatar.has-mark svg {
  width: 62%;
  height: 62%;
}

/* Agent card: avatar sits left of the name. */
.agent-card-lead {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.agent-card-lead .agent-avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
  border-radius: var(--radius);
}

/* Agent editor: icon upload row. */
.editor-icon-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 6px;
}

.editor-avatar {
  width: 52px;
  height: 52px;
  font-size: 20px;
  border-radius: var(--radius);
}

.editor-icon-ctl strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.editor-icon-ctl .form-hint {
  margin: 6px 0 0;
}

.chat-message.user .message-avatar,
.chat-message.tool .message-avatar {
  display: none;
}

/* The assistant turn's right-hand column: trace dropdown, final response, and
   tool-call chips, all left-aligned beside the avatar. */
.message-stack {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.message-main {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  border-top-left-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px;
  line-height: 1.55;
}

.chat-message.user .message-main {
  border-color: transparent;
  border-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-sm);
  background: var(--user-bubble);
  color: var(--user-bubble-ink);
}

.chat-message.tool .message-main {
  border-color: color-mix(in srgb, var(--tool) 45%, transparent);
  background: var(--tool-soft);
}

.chat-message.live .message-main {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.typing-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  animation: typing-bounce 1s ease-in-out infinite;
}

.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.message-time {
  opacity: 0;
  transition: opacity 120ms ease;
}

.chat-message:hover .message-time,
.chat-message:focus-within .message-time {
  opacity: 0.85;
}

/* Entrance animation is opt-in via .is-new (stamped only on messages that
   were not in the previous paint): re-rendering the transcript during token
   streaming must not replay every bubble's entrance. */
.chat-message.is-new,
.chat-synthetic-row.is-new {
  animation: message-in var(--dur-3) var(--ease-out) both;
}

/* Blinking cursor trailing the streaming live reply: in the run's draft
   section, and on the reply's bubble while the reveal is still writing it
   (stream-reveal.js). */
.live-response-draft > :last-child::after,
.live-answer .message-body.revealing > :last-child::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: text-bottom;
  border-radius: 1.5px;
  background: var(--primary);
  animation: stream-cursor 1s ease-in-out infinite;
}

@keyframes stream-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* The reply's bubble while it is written: the draft under the answer check
   carries a quiet "Checking…" below the text. */
.live-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--faint);
  font-size: 11px;
  font-style: italic;
}

.live-check::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: reasoning-pulse 1.4s ease-in-out infinite;
}

/* The check changed the draft the person read while it ran. */
.message-revised {
  color: var(--faint);
  font-size: 11px;
  font-style: italic;
  white-space: nowrap;
}

/* The clock beside the composer's status: "Thinking… 4 s". */
.composer-elapsed {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.composer-elapsed:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .live-answer .message-body.revealing > :last-child::after,
  .live-check::before {
    animation: none;
  }
}

/* Inline tool-call chips — a glanceable summary of the tools a run used; the row
   is clickable to open the full trace. Aligns under the assistant bubble. */
.run-tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  cursor: pointer;
}

.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  transition: border-color 120ms ease, color 120ms ease;
}

.tool-chip::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}

.tool-chip.ok::before { background: var(--success); }
.tool-chip.error::before { background: var(--danger); }
.tool-chip.pending::before {
  background: var(--warning);
  animation: stream-cursor 1s ease-in-out infinite;
}

.run-tool-chips:hover .tool-chip {
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Sticky day divider — a centered date pill that pins to the top of the
   transcript while scrolling through that day's messages. The full-width row
   matches the transcript background so messages slide cleanly beneath it. */
.day-divider {
  position: sticky;
  top: 4px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-self: stretch;
  margin: 2px 0;
  pointer-events: none;
}

.day-divider span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--muted);
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-sm);
}

/* Floating "scroll to latest" affordance, shown only when the transcript is
   scrolled up. The wrap lets it float over the bottom-right of the messages. */
.chat-messages-wrap {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.scroll-latest {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  animation: message-in 160ms ease both;
  transition: transform 120ms ease, background 120ms ease;
}

.scroll-latest:hover {
  background: var(--surface-strong);
  transform: translateY(-1px);
}

.scroll-latest[hidden] {
  display: none;
}

.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chat-message.user .message-meta {
  color: var(--user-bubble-meta);
}

.message-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Citation chips: the pages the run actually fetched, linked under the answer. */
.message-sources {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.message-sources-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.message-sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-xs);
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.source-chip:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  text-decoration: none;
}

/* The [n] badge on each source chip, matching the inline citation numbers. */
.source-chip .source-num {
  flex: none;
  align-self: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: color-mix(in srgb, var(--primary) 92%, var(--ink));
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* Inline [n] citation: a clickable superscript that jumps to the source. */
.citation-ref {
  text-decoration: none;
  cursor: pointer;
}
.citation-ref sup {
  display: inline-block;
  min-width: 15px;
  padding: 0 3px;
  margin: 0 1px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: color-mix(in srgb, var(--primary) 95%, var(--ink));
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: super;
  transition: background 140ms ease;
}
.citation-ref:hover sup {
  background: color-mix(in srgb, var(--primary) 32%, transparent);
}

.source-chip .source-host {
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.source-chip .source-title {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

/* KaTeX display math: let a wide equation scroll inside its own box instead of
   forcing horizontal page overflow on narrow (phone) viewports. */
.message-body .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}

.message-body p {
  margin: 0 0 10px;
  white-space: normal;
}

.message-body p:last-child {
  margin-bottom: 0;
}

.message-body code {
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--info);
  padding: 1px 5px;
}

.chat-message.user .message-body code {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.message-body :first-child,
.live-response-draft :first-child {
  margin-top: 0;
}

.message-body h1,
.message-body h2,
.message-body h3,
.message-body h4,
.message-body h5,
.message-body h6,
.live-response-draft h1,
.live-response-draft h2,
.live-response-draft h3 {
  margin: 14px 0 6px;
  font-weight: 600;
  line-height: 1.25;
}

.message-body h1 {
  font-size: 1.3em;
}

.message-body h2 {
  font-size: 1.15em;
}

.message-body h3 {
  font-size: 1.05em;
}

.message-body h4,
.message-body h5,
.message-body h6 {
  font-size: 1em;
}

.message-body ul,
.message-body ol,
.live-response-draft ul,
.live-response-draft ol {
  margin: 8px 0;
  padding-left: 22px;
}

.message-body li,
.live-response-draft li {
  margin: 3px 0;
}

.message-body blockquote,
.live-response-draft blockquote {
  margin: 10px 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
}

.message-body hr,
.live-response-draft hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.message-body a,
.live-response-draft a {
  color: var(--info);
  font-weight: 600;
}

.message-body del,
.live-response-draft del {
  opacity: 0.65;
}

.chat-message.user .message-body a {
  color: #ffffff;
}

.chat-message.user .message-body blockquote {
  border-left-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.85);
}

.message-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* "Tweak with AI" stays gently visible (not hover-only like Copy) so it's there
   to catch a weak or failed response, without shouting. */
.message-tweak {
  width: auto;
  min-height: 24px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--info);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.message-tweak:hover,
.message-tweak:focus-visible {
  border-color: color-mix(in srgb, var(--info) 34%, transparent);
  background: color-mix(in srgb, var(--info) 14%, transparent);
}

.message-copy {
  width: auto;
  min-height: 24px;
  flex: 0 0 auto;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--faint);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
}

.message-copy:hover,
.message-copy:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface-strong);
  color: var(--ink);
}

.message-copy.copied {
  border-color: color-mix(in srgb, var(--success) 60%, transparent);
  color: var(--success);
}

.chat-message:hover .message-copy,
.chat-message:focus-within .message-copy {
  opacity: 1;
}

/* New-chat welcome: owns the whole conversation canvas (no boxed card in a sea
   of dead space) — a centered hero plus a full-width grid of starter cards. */
.chat-empty-state {
  display: grid;
  width: 100%;
  gap: 28px;
  margin: auto;
  justify-items: center;
  text-align: center;
}

.chat-empty-hero {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.chat-empty-state h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
}

.chat-empty-hero .muted {
  max-width: 560px;
}

.chat-empty-mark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 26px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* Uploaded icon fills the hero tile. */
.chat-empty-mark.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The locked Habu mark: obsidian tile with the bone/teal glyph, matching the
   message and card avatars but at hero scale. */
.chat-empty-mark.has-mark {
  background: radial-gradient(120% 120% at 30% 20%, #1b2130, #0a0c11);
  color: #eaeef4;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.chat-empty-mark.has-mark svg {
  width: 62%;
  height: 62%;
}

.chat-empty-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.chat-suggestion {
  display: grid;
  gap: 6px;
  min-height: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  /* The button base assumes a primary-filled button (white text) — these are
     surface cards, so restore the normal ink color. */
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-2, 0.15s), transform var(--dur-2, 0.15s), box-shadow var(--dur-2, 0.15s);
}

.chat-suggestion:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.chat-suggestion strong {
  font-size: 14px;
}

.chat-suggestion span {
  font-size: 13px;
  opacity: 0.72;
  line-height: 1.45;
}

.chat-code {
  margin: 10px 0;
  border-color: var(--line-strong);
  font-size: 12px;
  white-space: pre;
}

.chat-code:last-child {
  margin-bottom: 0;
}

.markdown-table-wrap {
  max-width: 100%;
  margin: 11px 0;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--code-bg);
}

.markdown-table-wrap:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.markdown-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  color: var(--ink);
  font-size: 13px;
}

.markdown-table th,
.markdown-table td {
  min-width: 118px;
  max-width: 360px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 9px 11px;
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
}

.markdown-table th:last-child,
.markdown-table td:last-child {
  border-right: 0;
}

.markdown-table tbody tr:last-child td {
  border-bottom: 0;
}

.markdown-table th {
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.markdown-table td {
  color: var(--ink);
}

.chat-message.user .message-copy {
  border-color: rgba(208, 226, 255, 0.35);
  color: #d0e2ff;
}

.chat-message.user .message-copy:hover,
.chat-message.user .message-copy:focus-visible {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.12);
}

.chat-message.user .markdown-table-wrap {
  border-color: rgba(208, 226, 255, 0.32);
  background: #001d6c;
}

.chat-message.user .markdown-table th {
  background: rgba(255, 255, 255, 0.14);
}

.chat-message.user .markdown-table td,
.chat-message.user .markdown-table th {
  border-color: rgba(208, 226, 255, 0.22);
  color: #ffffff;
}

.tool-call-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tool-call-row span {
  border: 1px solid color-mix(in srgb, var(--tool) 45%, transparent);
  border-radius: var(--radius-pill);
  background: var(--tool-soft);
  color: var(--tool);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}

.chat-run-details {
  width: fit-content;
  max-width: min(760px, 94%);
  align-self: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.chat-run-details[open] {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.chat-run-details summary {
  display: flex;
  min-height: 24px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 3px 6px;
  list-style: none;
}

.chat-run-details summary::-webkit-details-marker {
  display: none;
}

.chat-run-summary-copy {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.chat-run-details .reasoning-pulse {
  width: 6px;
  height: 6px;
  margin: 0;
  box-shadow: none;
}

.chat-run-summary-copy strong {
  display: inline;
  color: var(--ink);
  font-size: 11px;
  line-height: 1;
}

.chat-run-summary-copy em {
  display: inline;
  margin-left: 4px;
  overflow: visible;
  color: var(--faint);
  font-size: 10px;
  font-style: normal;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.chat-run-details .reasoning-count {
  min-height: 16px;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1;
}

.chat-run-details-body {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 12px;
}

.chat-run-section {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.chat-run-section h4 {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tool-detail-list {
  display: grid;
  gap: 9px;
}

.tool-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  overflow: hidden;
}

.tool-detail.danger {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.tool-detail.success {
  border-color: color-mix(in srgb, var(--success) 38%, transparent);
}

.tool-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 9px 11px;
}

.tool-detail-header strong {
  color: var(--ink);
  font-size: 13px;
}

.tool-detail-header span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
}

.tool-detail pre {
  max-height: 260px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  color: var(--code-ink);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A result as the run recorded it: its output, then its error stream and its
   error when it has them, each exactly as it came back, under a small label.
   A command that exited non-zero is amber, a failed call red. */
.tool-detail.warning {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
}

.tool-detail-agent {
  font-weight: 600;
}

.tool-detail-label {
  border-top: 1px solid var(--line);
  padding: 7px 11px 0;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tool-detail-header + .tool-detail-label {
  border-top: 0;
}

.tool-detail pre.stderr {
  color: var(--warning);
}

.tool-detail pre.error {
  color: var(--danger);
}

.tool-detail-more,
.tool-detail-empty {
  margin: 0;
  padding: 7px 11px;
  color: var(--faint);
  font-size: 12px;
}

/* "Checked before sending": one plain line per check the answer went through,
   with what checking added to its time. */
.answer-checks-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  min-width: 0;
}

.answer-checks-time {
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.answer-checks-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.answer-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.answer-check-mark {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--success);
}

.answer-check.warn .answer-check-mark {
  background: var(--warning);
}

.answer-check.off {
  color: var(--muted);
}

.answer-check.off .answer-check-mark {
  background: var(--line-strong);
}

.live-response-draft {
  max-height: min(340px, 44vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 11px;
}

.live-response-draft p {
  margin: 0 0 10px;
}

.live-response-draft p:last-child {
  margin-bottom: 0;
}

.chat-composer {
  display: grid;
  width: 100%;
  max-width: var(--chat-column, 100%);
  gap: 4px;
  margin: 0 auto;
  border-top: 0;
  background: linear-gradient(to top, var(--bg) 65%, transparent);
  padding: 8px 24px 8px;
}

.composer-box {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 7px 7px 7px 16px;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

.composer-box:focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus-ring), var(--shadow-lg);
  transform: translateY(-1px);
}

.chat-composer textarea {
  flex: 1 1 auto;
  min-height: 24px;
  max-height: 220px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  padding: 8px 0;
  resize: none;
}

.chat-composer textarea:focus,
.chat-composer textarea:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.composer-send {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-color: transparent;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  color: var(--on-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.composer-send:hover {
  background: var(--brand-gradient);
  filter: brightness(1.12);
  transform: translateY(-1px) scale(1.05);
}

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 20px;
  padding: 0 6px;
}

.composer-status {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

/* The footer's Clear is a whisper action, not a 40px button — keep the whole
   strip one slim line so the composer hugs the bottom of the screen. */
.chat-composer-actions button {
  min-height: 22px;
  padding: 1px 8px;
  font-size: 11px;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: var(--faint);
}

.status-dot.ready {
  background: var(--success);
}

.status-dot.warning {
  background: var(--warning);
}

.status-dot.active {
  background: var(--success);
  animation: reasoning-pulse 1.4s ease-in-out infinite;
}

.chat-composer-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.chat-composer-actions button {
  min-height: 34px;
  padding: 7px 13px;
}

.approval-strip {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: var(--chat-column, 100%);
  margin: 12px auto 0;
  max-height: min(220px, 28vh);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
  border-radius: var(--radius);
  background: var(--warning-soft);
  padding: 12px 16px;
}

.approval-strip article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mcp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.mcp-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.mcp-preset-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 13px;
}

.mcp-preset-card.high {
  border-left: 3px solid var(--danger);
}

.mcp-preset-card.medium {
  border-left: 3px solid var(--warning);
}

.mcp-preset-card.low {
  border-left: 3px solid var(--success);
}

.mcp-preset-card div:first-child {
  display: grid;
  gap: 2px;
}

.mcp-preset-card div:first-child span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mcp-preset-card div:first-child strong {
  font-size: 15px;
}

.mcp-preset-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.form-note {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
}

.approval-strip span {
  display: block;
  color: var(--warning);
}

.run-rail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
}

.rail-header h3 {
  margin-bottom: 0;
}

.rail-section {
  display: grid;
  min-height: 0;
  gap: 8px;
}

.rail-title {
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reasoning-card,
.event-disclosure {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.reasoning-card[open],
.event-disclosure[open] {
  background: var(--surface);
}

.reasoning-card summary,
.event-disclosure summary {
  display: flex;
  min-height: 58px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  list-style: none;
}

.reasoning-card summary::-webkit-details-marker,
.event-disclosure summary::-webkit-details-marker {
  display: none;
}

.reasoning-summary-copy {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.reasoning-summary-copy strong,
.event-disclosure summary strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.reasoning-summary-copy em,
.event-disclosure summary em {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reasoning-pulse {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 4px rgba(111, 111, 111, 0.14);
}

.reasoning-pulse.active {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(66, 190, 101, 0.16);
  animation: reasoning-pulse 1.4s ease-in-out infinite;
}

.reasoning-count {
  display: inline-flex;
  min-height: 26px;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.reasoning-body {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 12px;
}

.event-disclosure .event-list {
  max-height: 320px;
  border-top: 1px solid var(--line);
  padding: 10px;
}

@keyframes reasoning-pulse {
  0% {
    box-shadow: 0 0 0 3px rgba(66, 190, 101, 0.2);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(66, 190, 101, 0);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(66, 190, 101, 0);
  }
}

.trace-summary {
  min-width: 0;
}

.trace-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.trace-metrics:empty {
  display: none;
}

.trace-metric {
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  padding: 9px;
}

.trace-metric span {
  display: block;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.trace-metric strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.trace-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-step {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.trace-step strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.trace-step p {
  margin: 2px 0 0;
  color: var(--faint);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.trace-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--info);
}

.trace-step.success .trace-dot {
  background: var(--success);
}

.trace-step.warning .trace-dot {
  background: var(--warning);
}

.trace-step.danger .trace-dot {
  background: var(--danger);
}

.trace-step.stream .trace-dot {
  background: var(--primary);
}

.trace-step.tool .trace-dot {
  background: var(--tool);
}

.trace-step.planner .trace-dot {
  background: var(--accent);
}

.trace-step.muted .trace-dot {
  background: var(--faint);
}

/* Parallel dispatch fan-out visual */
.fanout {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  padding: 8px 10px 10px;
}

.fanout-hub {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
}

.fanout-hub-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.fanout-lanes {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.fanout-lane {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.fanout-lane .fanout-wire {
  position: absolute;
  left: 4px;
  top: -3px;
  bottom: 50%;
  width: 10px;
  border-left: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
  border-bottom-left-radius: 6px;
}

.fanout-lane:first-child .fanout-wire {
  top: -8px;
}

.fanout-node {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.fanout-lane.agent .fanout-node {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.fanout-lane.tool .fanout-node {
  border-color: color-mix(in srgb, var(--tool) 45%, var(--line));
  background: color-mix(in srgb, var(--tool) 8%, var(--surface));
}

.fanout-icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fanout-lane.agent .fanout-icon {
  color: var(--accent);
}

.fanout-lane.tool .fanout-icon {
  color: var(--tool);
}

.fanout-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--ink);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fanout-kind {
  flex: none;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

/* Credentials view */
.info-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.info-list code,
.cred-ref {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.form-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--faint);
}

.credential-card .cred-ref {
  font-size: 13px;
}

.credential-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
}

.cred-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cred-chip {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-soft);
}

.cred-chip.secret {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--accent);
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.inline-check input {
  width: auto;
}

.cred-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto auto;
  gap: 8px;
  align-items: center;
}

.form-subsection {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.cred-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.a2a-endpoint-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.a2a-endpoint input[readonly] {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
}

/* ---- Agent editor: grouped, flowing sections ---- */
.editor-section {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.editor-section:first-of-type {
  border-top: none;
  padding-top: 2px;
}
.editor-section-head h4 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.editor-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.editor-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.editor-toggles label {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
/* Agent builder: capability preset chips + collapsed advanced sections. */
.preset-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.preset-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-align: left;
  box-shadow: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.preset-chip:hover {
  border-color: var(--line-strong);
  background: var(--surface-strong);
}

.preset-chip.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.preset-chip .preset-icon {
  flex: 0 0 auto;
  font-size: 18px;
}

.preset-chip .preset-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.preset-chip .preset-text strong {
  font-size: var(--text-sm);
  font-weight: 600;
}

.preset-chip .preset-text em {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--muted);
}

.editor-adv {
  border-top: 1px solid var(--line);
  padding: 6px 0;
}

.editor-adv > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}

.editor-adv > summary::-webkit-details-marker {
  display: none;
}

.editor-adv > summary::before {
  content: "▸";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  transition: transform 140ms ease;
}

.editor-adv[open] > summary::before {
  transform: rotate(90deg);
}

.editor-adv > summary h4 {
  margin: 0;
  font-size: var(--text-md);
}

.editor-adv > summary p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.editor-adv > *:not(summary) {
  margin-bottom: 12px;
}

.editor-adv.nested {
  border-top: 1px dashed var(--line);
  padding: 2px 0 0;
}

.editor-subhead {
  margin: 14px 0 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* ---- Embedded chat: look & feel controls + live mini preview ---- */
.embed-look {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.embed-look-controls {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.embed-look-controls > label {
  display: grid;
  gap: 4px;
}

/* The controls column is narrower than the form: tighter auto-fit columns so
   selects/colors wrap instead of running under the sticky preview. */
.embed-look-controls .cols {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Grid items default to min-width:auto (their min-content); a <select>'s
   min-content is its widest option, which made the whole row overflow under
   the sticky preview. Zero it at every level and let controls fill their cell. */
.embed-look-controls > *,
.embed-look-controls .cols > label,
.embed-look-controls .editor-toggles > label {
  min-width: 0;
}

.embed-look-controls select,
.embed-look-controls input[type="text"],
.embed-look-controls input:not([type]),
.embed-look-controls textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.color-field .color-pair {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-field .color-pair input[type="color"] {
  flex: none;
  width: 40px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.color-field .color-pair input[type="text"] {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.embed-look-preview {
  position: sticky;
  top: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-soft);
  padding: 10px;
}

.embed-mock {
  display: flex;
  flex-direction: column;
  height: 360px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 12px/1.45 var(--font);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.embed-mock-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.embed-mock-header > span:last-child {
  display: grid;
  min-width: 0;
}

.embed-mock-header b {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.embed-mock-header small {
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.embed-mock-mark {
  width: 24px;
  height: 24px;
  border-radius: calc(var(--r) * 0.8);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--uink);
  background: linear-gradient(135deg, var(--p), color-mix(in srgb, var(--p) 60%, #7c66ff));
  overflow: hidden;
  flex: none;
}

.embed-mock-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.embed-mock-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow: hidden;
}

.embed-mock-msg {
  max-width: 86%;
  padding: 7px 10px;
  border-radius: var(--br);
  overflow-wrap: anywhere;
}

.embed-mock-msg.bot {
  align-self: flex-start;
  background: var(--bubble);
  border-bottom-left-radius: 3px;
}

.embed-mock-msg.bot p {
  margin: 0 0 0.4em;
}

.embed-mock-msg.bot > :last-child {
  margin-bottom: 0;
}

.embed-mock-msg.user {
  align-self: flex-end;
  background: var(--p);
  color: var(--uink);
  border-bottom-right-radius: 3px;
}

.embed-mock-form {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}

.embed-mock-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 9px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.embed-mock-send {
  border-radius: var(--r);
  background: var(--p);
  color: var(--uink);
  padding: 6px 10px;
  font-weight: 600;
}

.embed-mock-foot {
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  padding: 0 0 6px;
}

@media (max-width: 760px) {
  .embed-look {
    grid-template-columns: minmax(0, 1fr);
  }
  .embed-look-preview {
    position: static;
  }
}

/* A link styled as a secondary button (e.g. "Open the hosted page"). */
a.button-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

a.button-link:hover {
  border-color: var(--line-strong);
}

.agent-slug-hint {
  margin: -6px 0 0;
}

.editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  /* Stay reachable while the (long) form scrolls inside the modal. */
  position: sticky;
  bottom: -20px;
  margin-bottom: -20px;
  padding-bottom: 16px;
  background: var(--surface);
  z-index: 2;
}

/* Version history: a compact log of saves/publishes/rollbacks with per-row
   Restore and an inline snapshot preview. */
.version-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.version-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted, var(--surface));
}

.version-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.version-tag {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

.version-kind {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.version-meta {
  margin: 3px 0 0;
  font-size: var(--text-xs);
}

.version-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.version-row-actions > button {
  padding: 5px 12px;
  width: auto;
}

.version-preview {
  grid-column: 1 / -1;
  margin: 4px 0 0;
}

@media (max-width: 720px) {
  .version-row {
    grid-template-columns: 1fr;
  }

  .version-row-actions {
    justify-content: flex-start;
  }
}
.curl-example {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}
.curl-example > .curl-label {
  font-size: 12px;
  font-weight: 600;
}
.curl-example pre {
  margin: 0;
}

/* Tool debugger panel */
.tool-debug {
  display: grid;
  gap: 10px;
}

.debug-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.debug-head code {
  font-size: 11px;
  color: var(--faint);
  word-break: break-all;
}

.debug-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--surface-soft);
}

.debug-section h5 {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.debug-section p {
  margin: 0;
  font-size: 12px;
}

.debug-section pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  max-height: 280px;
  overflow: auto;
}

.debug-section.danger {
  border-color: var(--danger);
}

.debug-section.warn {
  border-color: var(--warning);
}

.memory-body {
  margin: 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}

/* Synthesizer wizard */
.wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(3px);
}

.wizard {
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.wizard-head,
.wizard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
}

.wizard-head {
  border-bottom: 1px solid var(--line);
}

.wizard-foot {
  border-top: 1px solid var(--line);
}

.wizard-body {
  padding: 16px 20px;
  overflow: auto;
  display: grid;
  gap: 14px;
}

.wizard-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.file-drop {
  flex: 1 1 240px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.file-drop input {
  display: block;
  margin: 0 auto 6px;
  width: auto;
}

.wizard-results {
  display: grid;
  gap: 10px;
}

.wizard-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  background: var(--surface-soft);
}

.wizard-item.error {
  border-color: var(--danger);
}

.wizard-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wizard-notes summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--faint);
}

.wizard-notes ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
}

/* Tool catalog: selectable list + single detail card */
.tool-catalog {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.tool-catalog-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.catalog-head h3 {
  margin: 0;
  font-size: 14px;
}

.catalog-filter {
  width: 100%;
}

.tool-list {
  display: grid;
  gap: 4px;
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

.tool-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink);
}

.tool-list-item:hover {
  border-color: var(--line-strong);
}

.tool-list-item.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.tli-text {
  display: grid;
  min-width: 0;
}

.tli-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tli-slug {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tli-badge {
  flex: none;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

.tool-detail {
  min-width: 0;
}

.tool-detail-card {
  min-width: 0;
}

.tool-detail-slug {
  font-size: 12px;
  word-break: break-all;
}

.tool-detail-meta {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 16px;
}

.tool-detail-meta > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tool-detail-meta .k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.tool-detail-meta code {
  font-size: 12px;
  word-break: break-all;
}

.tool-detail-actions {
  margin-top: 14px;
}

.tool-detail-section {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.tool-detail-section summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}

.tool-detail-section .compact-json {
  margin-top: 8px;
  max-height: 320px;
  overflow: auto;
}

@media (max-width: 720px) {
  .tool-catalog {
    grid-template-columns: minmax(0, 1fr);
  }
  .tool-list {
    max-height: 240px;
  }
}

.event-list {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
}

.event-item {
  border-left: 3px solid var(--info);
  background: var(--surface-soft);
  padding: 8px 9px;
}

.event-item.success {
  border-left-color: var(--success);
}

.event-item.warning {
  border-left-color: var(--warning);
}

.event-item.danger {
  border-left-color: var(--danger);
}

.event-item.stream {
  border-left-color: var(--primary);
}

.event-item.tool {
  border-left-color: var(--tool);
}

.event-item.planner {
  border-left-color: var(--accent);
}

.event-item strong {
  display: block;
  font-size: 12px;
}

.event-item span {
  display: block;
  color: var(--faint);
  overflow-wrap: anywhere;
}

.empty-state {
  display: grid;
  gap: 10px;
  justify-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--text-md);
  padding: 36px 24px;
  text-align: center;
}

.empty-state.compact {
  padding: 10px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
}

@media (max-width: 1260px) {
  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chat-workspace {
    grid-template-columns: minmax(228px, 290px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .dashboard-grid,
  .settings-layout,
  .builder-layout,
  .runs-layout,
  .mcp-layout {
    grid-template-columns: 1fr;
  }

  .run-inspector,
  .preview-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  .workspace {
    padding: 16px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  body[data-view="chat"] .topbar {
    align-items: center;
    flex-direction: row;
    padding: 12px 16px;
  }

  body[data-view="chat"] .topbar-actions {
    align-items: center;
    flex-direction: row;
  }

  .tool-quick-actions {
    grid-template-columns: 1fr;
  }

  nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-header,
  .section-heading,
  .entity-card-header,
  .approval-strip article {
    align-items: stretch;
    flex-direction: column;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-workspace {
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }

  body[data-view="chat"] .workspace {
    height: 100%;
    min-height: 0;
  }

  /* On small screens the chats rail becomes a slide-over drawer (toggled by
     the chat header's rail button): the conversation gets the whole screen and
     nothing stacks or overlaps. */
  .chat-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    width: min(320px, 88vw);
    max-height: none;
    border-right: 1px solid var(--line);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-lg);
    transform: translateX(-104%);
    transition: transform var(--dur-3) var(--ease-spring);
  }

  .chat-workspace.rail-open .chat-rail {
    transform: none;
  }

  /* Desktop's focus-mode display:none must not defeat the drawer. */
  .chat-workspace.rail-collapsed .chat-rail {
    display: grid;
  }

  .chat-rail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    display: block;
    background: var(--scrim);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out);
  }

  .chat-workspace.rail-open .chat-rail-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .feature-carousel {
    grid-template-columns: 1fr;
  }

  .feature-carousel-copy {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 10px;
  }

  /* The agent <select> can be wide; let the header wrap so the picker drops to
     its own full-width row instead of forcing the whole chat column past the
     viewport (it sits in an overflow:hidden grid track, so the excess clips). */
  /* One tight row on phones: [rail toggle][agent select fills]. The thread
     title lives in the rail; the topbar already names the view. */
  .chat-header {
    flex-wrap: nowrap;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .chat-header-main {
    flex: 0 0 auto;
    min-width: 0;
  }

  .chat-header h2 {
    display: none;
  }

  .chat-agent-field {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .chat-agent-field select {
    width: 100%;
  }

  .chat-header-actions {
    grid-template-columns: 1fr;
  }

  .composer-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .chat-composer-actions {
    justify-content: flex-end;
  }

  .chat-pane {
    min-height: 0;
  }

  .chat-message {
    max-width: 96%;
  }

  .trace-dock-body {
    grid-template-columns: 1fr;
    max-height: min(300px, 36vh);
  }

  .schema-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 440px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }

  nav {
    grid-template-columns: 1fr;
  }

  .topbar-actions,
  .action-group,
  .row {
    align-items: stretch;
    flex-direction: column;
  }

  .btn-block {
    width: 100%;
  }

  .topbar {
    align-items: stretch;
  }

  .profile-menu,
  .profile-menu summary {
    width: 100%;
  }

  .profile-popover {
    right: auto;
    left: 0;
    width: min(250px, calc(100vw - 32px));
  }

  .feature-tile {
    width: 148px;
    min-width: 148px;
  }

  body[data-view="chat"] .topbar {
    align-items: center;
    flex-direction: row;
    gap: 10px;
    padding: 10px 12px;
  }

  body[data-view="chat"] .topbar-actions {
    align-items: center;
    flex-direction: row;
  }

  body[data-view="chat"] .status-chip {
    display: none;
  }

  body[data-view="chat"] .topbar-button,
  body[data-view="chat"] .profile-menu,
  body[data-view="chat"] .profile-menu summary {
    width: auto;
  }
}

/* Phone: off-canvas navigation drawer + single-column layout. */
@media (max-width: 640px) {
  body,
  body.nav-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell-main {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    border-bottom: 1px solid var(--line);
    background: var(--topbar-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .mobile-nav-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
    flex: 0 0 auto;
    padding: 0;
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--ink);
    font-size: 18px;
    box-shadow: none;
  }

  .mobile-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .shell-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    /* Above the threads rail (70) and its scrim (65): the nav is the top of the
       progressive drawer stack (opened by a second swipe-right), so it must
       render in front of the rail, not buried behind it. */
    z-index: 80;
    width: 278px;
    max-width: 86vw;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    transform: translateX(-102%);
    transition: transform var(--dur-3) var(--ease-spring);
    box-shadow: var(--shadow-lg);
  }

  body.nav-open .shell-sidebar {
    transform: translateX(0);
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    /* Between the rail (70) and the nav (80) so it dims the rail when the nav is
       the active panel. */
    z-index: 75;
    background: var(--scrim);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
    pointer-events: none;
    display: block;
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* The drawer always shows full labels, even if the desktop nav was collapsed. */
  body.nav-collapsed .shell-sidebar {
    padding: 14px 12px;
  }

  body.nav-collapsed .brand {
    display: flex;
  }

  body.nav-collapsed .brand-sub,
  body.nav-collapsed .nav-label {
    display: block;
  }

  body.nav-collapsed .sidebar-head {
    justify-content: space-between;
  }

  body.nav-collapsed nav button,
  body.nav-collapsed .sidebar-control,
  body.nav-collapsed .sidebar-footer .profile-menu summary {
    justify-content: flex-start;
    padding-left: 11px;
    padding-right: 11px;
  }

  .workspace {
    padding: 14px 12px 22px;
  }

  /* One scroll surface on phones: the page scrolls the run list directly
     instead of a scrollbox-within-a-scrolling-page. */
  .runs-list {
    max-height: none;
    overflow-y: visible;
  }

  .chat-messages {
    padding: 14px 12px 22px;
  }

  .chat-message {
    max-width: 100%;
  }

  /* On a phone a horizontally-scrolling code block reads as "cut" — there's no
     visible scrollbar. Wrap long code lines instead so nothing is lost. */
  .chat-code,
  .message-body pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Wide tables still scroll (wrapping would scramble columns) but momentum
     scroll + a fade hint makes it obvious there is more. */
  .markdown-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .chat-composer {
    padding: 10px 12px 14px;
  }

  .chat-agent-field {
    min-width: 0;
  }
}

/* ---- Workspaces (switcher + members + invitations) ---- */
.ws-current {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.ws-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.ws-name {
  font-size: 13px;
  font-weight: 600;
}
.ws-switch-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ws-switch-item {
  justify-content: flex-start;
  width: 100%;
  background: var(--surface-soft);
  font-size: 12px;
}
.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}
.ws-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}
.ws-card.active {
  border-color: var(--primary);
}
.ws-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ws-card-text span {
  font-size: 11px;
}
.badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
}
.ws-table {
  width: 100%;
  border-collapse: collapse;
}
.ws-table th,
.ws-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.ws-table th {
  color: var(--muted);
  font-weight: 600;
}
.invite-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.invite-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.invite-link {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
}
.link-danger {
  background: none;
  border: none;
  color: var(--danger);
  padding: 2px 4px;
  min-height: 0;
  cursor: pointer;
}
.link-danger:hover {
  text-decoration: underline;
}

/* ---- Runs (search + scrollable list) ---- */
.runs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.runs-toolbar #runs-search {
  flex: 1 1 160px;
  min-width: 0;
  width: auto;
  min-height: 32px;
  padding: 5px 12px;
}
.runs-toolbar select,
.runs-toolbar-row2 select {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  min-height: 32px;
  padding: 5px 30px 5px 10px;
  max-width: 220px;
}
.runs-toolbar-row2 {
  display: contents;
}
.runs-count {
  font-size: 12px;
  margin-bottom: 8px;
}
.runs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}
.run-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}
.run-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 10px;
}
.run-row-summary {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.run-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}
.run-row-meta code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.run-row-child {
  border-left: 2px solid color-mix(in srgb, var(--primary) 45%, var(--line));
}

.run-child-mark {
  color: var(--primary);
  font-weight: 700;
}

.run-team-children {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-left: 12px;
}

.team-children-empty {
  font-size: 12px;
}

/* ---- Team control room ---- */
.team-overview {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.team-overview.live {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--line));
}

.team-overview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.team-overview-head strong {
  margin-right: auto;
  font-size: 14px;
}

.team-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.team-meter,
.team-stat {
  display: grid;
  gap: 3px;
  font-size: 12px;
}

.team-meter > span,
.team-stat > span {
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  font-weight: 700;
}

.team-meter > strong,
.team-stat > strong {
  font-size: 14px;
}

.team-meter-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-strong);
  overflow: hidden;
}

.team-meter-bar > span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 240ms ease;
}

.team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.team-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
}

.team-tree {
  display: grid;
  gap: 8px;
}

/* ---- Live team graph (neuron web) ---- */
.team-tree-panel {
  min-width: 0;
}

/* ---- Live team activity feed ---- */
.team-feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  max-height: 420px;
  overflow: auto;
}

.team-feed-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  padding: 4px 8px;
  font-size: 12px;
  border-left: 2px solid var(--line);
  background: var(--surface);
}

.team-feed-row.success {
  border-left-color: var(--success);
}
.team-feed-row.danger {
  border-left-color: var(--danger);
}
.team-feed-row.warning {
  border-left-color: var(--warning);
}
.team-feed-row.link {
  border-left-color: var(--primary);
}
.team-feed-row.planner,
.team-feed-row.info {
  border-left-color: var(--info);
}

.team-feed-agent {
  flex: 0 0 auto;
  font-weight: 600;
}

.team-feed-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}


.team-node {
  display: grid;
  gap: 6px;
}

.team-node-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.team-node-name {
  font-weight: 600;
  font-size: 13px;
  margin-right: auto;
}

.team-node-tokens {
  font-size: 11px;
  color: var(--faint);
}

.team-node-body {
  margin: 0 0 0 22px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
}

.team-plan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.team-plan-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
}

.team-plan-check {
  flex: 0 0 18px;
  text-align: center;
  font-weight: 700;
  color: var(--faint);
}

.team-plan-item.done .team-plan-check {
  color: var(--success);
}
.team-plan-item.failed .team-plan-check {
  color: var(--danger);
}
.team-plan-item.in_progress .team-plan-check {
  color: var(--warning);
}

.team-plan-item.done .team-plan-title {
  color: var(--muted);
  text-decoration: line-through;
}

.team-plan-body {
  display: grid;
  gap: 2px;
}

.team-plan-assignee {
  font-size: 11px;
  color: var(--info);
}

.team-plan-note {
  font-size: 11px;
  color: var(--faint);
}

@media (max-width: 900px) {
  /* minmax(0,1fr) (not the default minmax(auto,1fr)) lets the column shrink
     below the fixed-width graph canvas so the neuron's own horizontal scroll
     boxes the graph to the viewport instead of dragging the page wider. */
  .team-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-tree-panel,
  .team-side {
    min-width: 0;
    max-width: 100%;
  }

  .team-graph-neuron {
    max-width: 100%;
  }
}

.trigger-prompt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 13px;
}

/* ---- Context meter (chat compaction) ---- */
.context-meter {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 10px;
}

.context-meter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.context-meter-head > span:first-child {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
}

.context-meter-head > span:nth-child(2) {
  margin-right: auto;
}

.context-meter.warn .team-meter-bar > span {
  background: var(--warning);
}

.context-compacted-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--info) 16%, transparent);
  color: var(--info);
}

/* ---- Evals ---- */
.eval-result-panel {
  margin-top: 10px;
}

.eval-result {
  display: grid;
  gap: 8px;
}

.eval-result + .eval-result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.eval-result-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.eval-result-head .team-meter {
  min-width: 160px;
}

.eval-case-results {
  display: grid;
  gap: 5px;
}

.eval-case-result {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.eval-case-badge {
  flex: 0 0 14px;
  font-weight: 700;
}

.eval-case-result.pass .eval-case-badge {
  color: var(--success);
}

.eval-case-result.fail .eval-case-badge {
  color: var(--danger);
}

.eval-case-input {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eval-case-result {
  flex-wrap: wrap;
  min-width: 0;
}

.eval-case-detail {
  /* Failure details (grader/judge messages) can run long: wrap onto their own
     full-width line instead of blowing out the row. */
  flex: 1 1 100%;
  min-width: 0;
  padding-left: 22px;
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* ---- Workspace onboarding ---- */
.onboarding .onboarding-steps {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ---- Login (full-screen, minimal) ---- */
/* The login view hides the whole app shell — an unauthenticated visitor sees
   only the centered welcome card, not the workspace navigation. */
body[data-view="login"] {
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}
body[data-view="login"] .shell-sidebar,
body[data-view="login"] #nav-backdrop,
body[data-view="login"] .mobile-topbar,
body[data-view="login"] #service-status {
  display: none;
}
body[data-view="login"] .shell-main {
  min-height: 100vh;
}
body[data-view="login"] #app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-screen {
  width: 100%;
  display: grid;
  place-items: center;
}
.auth-card {
  width: 100%;
  max-width: 340px;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.auth-logo {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #1b2130, #0a0c11);
  color: #eaeef4;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.auth-logo svg {
  width: 62%;
  height: 62%;
}
.auth-title {
  margin: 0;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.auth-sub {
  margin: 0;
  color: var(--muted);
}
.auth-cta {
  min-width: 220px;
  min-height: 46px;
  margin-top: 4px;
}
.auth-methods {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

/* ---- Login / SSO ---- */
.sso-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.sso-button:hover {
  opacity: 0.9;
}
.login-divider {
  margin: 14px 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.form-error {
  margin: 0 0 12px;
  color: var(--danger);
  font-size: 13px;
}

/* ---- Enterprise SSO ---- */
.sso-email {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.sso-email label {
  display: grid;
  gap: 6px;
}
.sso-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.sso-fields {
  display: grid;
  gap: 10px;
}
.sso-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.sso-check input {
  width: auto;
}
.sso-row .sso-callback {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  word-break: break-all;
}
.sso-row .sso-callback code {
  font-size: 11px;
}
.warn-text {
  color: var(--warning);
}

/* ---- API keys (Settings → API keys & developer) and pairing ---- */
.api-key-form,
.wst-approve-form {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.wst-approve-form input[name="code"] {
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.api-key-scopes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}
.api-key-scopes legend {
  padding: 0 4px;
  font-size: 13px;
  color: var(--muted);
}
.api-key-scope {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}
.api-key-scope input {
  width: auto;
  margin-top: 3px;
}
.api-key-scope .form-hint {
  display: block;
  margin: 2px 0 0;
}
.api-key-scope-list code {
  font-size: 11px;
}
/* A key's, a session's or a waiting machine's state rides in its title;
   `.record-row span` would otherwise put each on a line of its own. */
.record-row .record-title > .status-pill,
.record-row .record-title > .muted {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}

/* ---- Connections (OAuth broker) ---- */
.conn-row {
  align-items: center;
}
.conn-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.conn-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.conn-unavailable {
  font-size: 12px;
  font-style: italic;
}
.conn-provider {
  display: grid;
  gap: 8px;
}
.conn-provider .conn-callback {
  margin: 0;
  font-size: 12px;
  word-break: break-all;
}
.conn-provider .conn-callback code {
  font-size: 11px;
}
.conn-provider-form {
  display: grid;
  gap: 8px;
}

/* ---- Approvals (draft-and-send review) ---- */
.approval-list {
  display: grid;
  gap: 16px;
  max-width: 760px;
}
.approval-review {
  display: grid;
  gap: 12px;
}
.approval-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.approval-verb {
  font-size: var(--text-lg);
  font-weight: 650;
}
.approval-tool {
  margin-left: 8px;
  font-size: var(--text-xs);
  color: var(--muted);
}
.approval-fields {
  display: grid;
  gap: 10px;
}
.approval-field {
  display: grid;
  gap: 4px;
}
.approval-field > span {
  font-size: var(--text-sm);
  color: var(--muted);
}
.approval-field input,
.approval-field textarea {
  width: 100%;
}
.approval-field textarea {
  resize: vertical;
  font: inherit;
}
.approval-json {
  max-height: 320px;
  overflow: auto;
}
.approval-note {
  margin: 0;
}

.mcp-url { word-break: break-all; font-size: 12px; }

/* ---- Guardrails editor ---- */
.guardrail-form {
  display: grid;
  gap: 12px;
}
.guardrail-rules {
  display: grid;
  gap: 12px;
}
.guardrail-rule {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft, var(--surface));
}
.guardrail-rule-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.guardrail-test {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.guardrail-test h4 {
  margin: 0;
}
#guardrail-test-result {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--surface-strong);
  font-size: 12px;
}

/* ---- Mobile refinements (phones + touch) ---- */
@media (max-width: 640px) {
  /* Credential field row was a 4-col grid with no collapse — stack it. */
  .cred-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* >=16px form text stops iOS Safari from auto-zooming on field focus. */
  input,
  textarea,
  select {
    font-size: 16px;
  }

  /* Respect the notch / home indicator on the sticky chrome. */
  .mobile-topbar {
    padding-top: calc(8px + env(safe-area-inset-top));
  }

  .chat-composer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

@media (pointer: coarse) {
  /* Comfortable tap targets. Buttons that set a smaller height via a class keep
     it (class specificity wins), so dense inline controls are unaffected. */
  button {
    min-height: 44px;
  }

  input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }

  /* Standalone text-button links (not inline prose links) get a real hit area. */
  .link-danger {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .composer-send {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  /* The message copy button is hover-revealed; touch has no hover — keep it
     visible so the action is reachable on a phone. */
  .message-copy {
    opacity: 1;
  }
}

/* ------------------------------------------------------------ grounding & audits */
/* The hallucination guard's chat surface: a quiet badge under audited answers,
   a claim panel behind it, feedback buttons, and the header mode pill. */

.message-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  min-height: 22px;
}

/* How long the answer took, then the grounding badge, on the left. */
.message-foot-start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.message-elapsed {
  color: var(--faint);
  font-size: 11px;
  font-style: italic;
  white-space: nowrap;
}

.audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.audit-badge.ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); color: var(--success); }
.audit-badge.warn { border-color: color-mix(in srgb, var(--warning) 55%, transparent); color: var(--warning); }
.audit-badge.danger { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }
.audit-badge.static { cursor: default; }
.audit-badge.appear { animation: audit-appear 0.45s ease; }

@keyframes audit-appear {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.msg-feedback {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 12px;
  color: var(--muted);
}

.chat-message:hover .msg-feedback,
.msg-feedback:focus-within,
.msg-feedback.done { opacity: 1; }

.msg-feedback button {
  min-height: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 6px;
  filter: grayscale(1);
  opacity: 0.7;
}

.msg-feedback button:hover { filter: none; opacity: 1; background: var(--surface); }

.grounding-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
  color: var(--success);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  white-space: nowrap;
  cursor: help;
}

.grounding-pill.strict {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
}

/* Claim panel */
.audit-panel { display: grid; gap: 14px; }

.audit-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.audit-claims { display: grid; gap: 8px; }

.audit-claim {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.audit-claim.ok { border-left-color: var(--success); }
.audit-claim.warn { border-left-color: var(--warning); }
.audit-claim.danger { border-left-color: var(--danger); }

.audit-claim-head { display: flex; gap: 10px; align-items: baseline; }

.audit-verdict {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 1px 6px;
}

.audit-verdict.ok { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.audit-verdict.warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.audit-verdict.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

.audit-claim-text { margin: 0; }

.audit-claim-evidence {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 8px;
}

.audit-claim-evidence span {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  margin-right: 6px;
}

.audit-claim-note { margin: 0; font-size: 12px; color: var(--muted); }

.audit-legend {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.audit-legend h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.audit-legend p { margin: 0; }

/* Grounding mode picker (agent editor) */
.grounding-modes { display: grid; gap: 8px; }

.grounding-mode {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
}

.grounding-mode:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.grounding-mode input { margin-top: 3px; }

.grounding-mode-body { display: grid; gap: 2px; }
.grounding-mode-body strong { font-size: 13px; }
.grounding-mode-body > span { font-size: 12px; color: var(--muted); }

.grounding-recommended {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--success);
  margin-left: 6px;
}

@media (max-width: 720px) {
  .msg-feedback { opacity: 1; }
  .message-foot { flex-wrap: wrap; }
}

/* Memory visibility choice on the save form */
.memory-visibility {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
}

.memory-visibility label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Edge polish: round caps; live arrows at full strength */
.team-edge { stroke-linecap: round; }
.team-arrow.live { opacity: 1; }

/* Audit legend: one row per verdict (was a run-on paragraph) */
.audit-legend-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}

.audit-legend-row > span:last-child { color: var(--muted); }

.audit-claim-evidence a,
.audit-claim-note a {
  color: var(--primary);
  word-break: break-all;
}

/* Stop control: the send button while a run is in flight */
.composer-send.stop {
  background: var(--danger);
  color: #fff;
}

/* Thread rail activity: running spinner + unread indicator */
.thread-running {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary);
  font-weight: 600;
}

.thread-spinner {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-top-color: var(--primary);
  animation: thread-spin 0.8s linear infinite;
}

@keyframes thread-spin {
  to { transform: rotate(360deg); }
}

.thread-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  margin-right: 6px;
  flex: 0 0 auto;
}

.thread-item.unread .thread-title {
  font-weight: 700;
}

/* "Ground this answer" — the repair action on flagged answers */
.audit-fix {
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
  background: none;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
}

.audit-fix:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.audit-fix-panel {
  justify-self: start;
}

/* Synthetic requests (enrichment) render as a centered system pill, like a
   day divider — never inside a chat bubble, readable in both themes. */
.chat-synthetic-row {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.message-synthetic {
  display: inline-block;
  border: 1px dashed color-mix(in srgb, var(--primary) 50%, transparent);
  background: var(--surface);
  color: var(--primary);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 12px;
  max-width: 90%;
  text-align: center;
}

/* Agents page: card/table view toggle + table view */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.view-toggle button {
  min-height: 0;
  border: none;
  background: none;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
}

.view-toggle button.active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

.agents-grid.as-table {
  display: block;
}

.agents-table-name {
  font-weight: 600;
}

.agents-table-slug {
  font-size: 12px;
}

.agents-table-actions {
  white-space: nowrap;
  text-align: right;
}

.agents-table-actions button {
  min-height: 0;
  padding: 3px 10px;
  font-size: 12px;
}

/* Shared collection component: table mode + compact row actions */
.entity-grid.as-table {
  display: block;
}

.row-actions {
  display: inline-flex;
  gap: 4px;
  white-space: nowrap;
}

.row-actions button {
  min-height: 0;
  padding: 3px 10px;
  font-size: 12px;
}

.fleet-table td {
  vertical-align: middle;
}

/* Shared collection wrapper: the toolbar + list travel as ONE grid child so
   two-column layouts (Providers) can't split them across columns. */
.collection {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/* "Delete all" in the rail is quiet until you mean it. */
.rail-clear-all:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ---------------------------------------------------------------- multimodal
   Composer attachments, message media strips, lightbox, and the canvas. */
.composer-attach {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-pill);
}

.composer-attach:hover {
  background: var(--nav-hover);
  color: var(--ink);
}

.composer-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 4px 8px;
}

.composer-att {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 4px 6px 4px 8px;
  font-size: var(--text-sm);
}

.composer-att.uploading {
  opacity: 0.65;
}

.composer-att-thumb {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  object-fit: cover;
}

.composer-att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.composer-att-meta {
  color: var(--faint);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.composer-att-remove {
  min-height: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--faint);
}

.composer-att-remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.chat-composer.drop-target .composer-box {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 8px;
}

.att-thumb {
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-soft);
  cursor: zoom-in;
}

.att-thumb img {
  display: block;
  width: 132px;
  height: 132px;
  object-fit: cover;
}

.att-video,
.md-video {
  max-width: min(420px, 100%);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #000;
}

.att-audio {
  max-width: min(420px, 100%);
}

.att-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 6px 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.att-file em {
  color: var(--faint);
  font-style: normal;
  font-weight: 400;
}

.att-file:hover {
  border-color: var(--line-strong);
}

.md-ext-media {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  font-size: var(--text-sm);
  color: var(--muted);
}

.md-img {
  max-width: min(480px, 100%);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  cursor: zoom-in;
}

.md-audio {
  display: block;
  max-width: min(420px, 100%);
  margin: 4px 0;
}

/* Embedded video player (YouTube/Vimeo): a responsive 16:9 frame. */
.md-embed {
  display: block;
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 16 / 9;
  margin: 6px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}

.md-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--scrim);
  cursor: zoom-out;
  padding: 32px;
}

.lightbox img {
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

/* Canvas: third grid column of the chat workspace (order pins it right of
   the conversation regardless of DOM position). */
.chat-workspace.canvas-open {
  grid-template-columns: minmax(228px, 280px) minmax(0, 1fr) var(--canvas-width, minmax(340px, 36%));
}

.chat-workspace.rail-collapsed.canvas-open {
  grid-template-columns: minmax(0, 1fr) var(--canvas-width, minmax(340px, 40%));
}

/* The rail folds away while a wide canvas is open and the three columns
   would not fit; it comes back when the canvas closes. */
.chat-workspace.rail-folded.canvas-open {
  grid-template-columns: minmax(0, 1fr) var(--canvas-width, minmax(340px, 40%));
}

.chat-workspace.rail-folded .chat-rail {
  display: none;
}

/* The splitter rides the canvas's left edge; dragging it writes
   --canvas-width on the workspace, which the grid above reads. */
.canvas-splitter {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 9px;
  cursor: col-resize;
  z-index: 6;
  touch-action: none;
}

.canvas-splitter::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background var(--dur-2) var(--ease-out);
}

.canvas-splitter:hover::after,
.chat-workspace.canvas-resizing .canvas-splitter::after {
  background: var(--primary);
}

.chat-workspace.canvas-resizing,
.chat-workspace.canvas-resizing * {
  user-select: none;
  cursor: col-resize;
}

.chat-workspace.canvas-resizing iframe {
  pointer-events: none;
}

.chat-canvas {
  position: relative;
  order: 3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-left: 1px solid var(--line);
  background: var(--surface-soft);
}

.canvas-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

.canvas-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-md);
  font-weight: 600;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.canvas-actions .ghost {
  min-height: 28px;
  padding: 3px 9px;
  font-size: var(--text-sm);
}

.canvas-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.canvas-body.editing {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

/* The Files tab hands its whole body to canvas.js, which lays out the file
   list, the editor and the footer itself. */
.canvas-body.files,
.canvas-body.files > #canvas-files {
  overflow: hidden;
  min-height: 0;
}

/* The head now carries a tab strip between the title and the actions; it
   already wraps, so a narrow panel stacks rather than truncating the tabs. */
.canvas-head .canvas-tabs {
  flex: none;
}

.canvas-preview {
  overflow: auto;
  padding: 16px 18px;
  font-size: var(--text-md);
  line-height: 1.55;
}

.canvas-body.editing .canvas-preview {
  border-top: 1px solid var(--line);
}

#canvas-editor {
  border: 0;
  border-radius: 0;
  background: var(--code-bg);
  color: var(--code-ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  padding: 14px 16px;
  resize: none;
  min-height: 0;
}

#canvas-editor:focus {
  box-shadow: none;
  border-color: transparent;
}

@media (max-width: 980px) {
  .chat-workspace.canvas-open {
    grid-template-columns: minmax(0, 1fr);
  }

  .canvas-splitter {
    display: none;
  }

  .chat-canvas {
    position: fixed;
    inset: 0;
    z-index: 240;
    border-left: 0;
    background: var(--surface);
  }
}

/* Knowledge hub: artifact gallery + library rows; dashboard usage; canary. */
.artifact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.artifact-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px;
  min-width: 0;
}

.artifact-thumb {
  display: grid;
  place-items: center;
  min-height: 0;
  height: 110px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  overflow: hidden;
  cursor: zoom-in;
}

.artifact-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artifact-thumb.artifact-file {
  cursor: default;
  color: var(--faint);
}

.artifact-thumb.artifact-file .i {
  width: 28px;
  height: 28px;
}

.artifact-meta strong {
  display: block;
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifact-dl {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--muted);
}

.library-hit p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.budget-meter {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.budget-meter-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--muted);
}

.budget-meter-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  overflow: hidden;
}

.budget-meter-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--success);
  transition: width var(--dur-2) var(--ease-out);
}

.budget-meter.warm .budget-meter-fill {
  background: var(--warning);
}

.budget-meter.over .budget-meter-fill {
  background: var(--danger);
}

.usage-rows {
  display: grid;
  gap: 7px;
}

.usage-row {
  display: grid;
  grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
}

.usage-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  overflow: hidden;
}

.usage-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--primary);
  opacity: 0.75;
}

.canary-pair {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}

.canary-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.canary-col {
  display: grid;
  gap: 6px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  min-width: 0;
}

.canary-answer {
  font-size: var(--text-md);
  overflow-wrap: anywhere;
  max-height: 300px;
  overflow-y: auto;
}

/* A pill control (the composer footer's Mac chip). */
.mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.mode-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--text);
  background: var(--surface);
}

.mode-chip.active {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-weight: 600;
}

.code-station-slot:empty {
  display: none;
}

/* The workstation indicator is a statement of fact, not a control: which
   machine is bound, or the one command that binds one. */
.code-station {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-station code {
  font-size: 11px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--code-bg);
}

.code-station.live {
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
}

@media (pointer: coarse) {
  .mode-chip,
  .message-copy,
  .audit-fix,
  .audit-badge,
  .msg-feedback button {
    min-height: 36px;
  }

  .msg-feedback button {
    min-width: 36px;
  }
}

/* ---- Habu Chat composer: the message box and its toolbar ----
   The message fills the box's first row; under it, attach and three menu
   buttons (Mode, Effort, ⋯) on the left, the Model button, mic and send on
   the right. Every control is a direct child of the box so `order` can lay
   the row out differently on a phone: there the message shares its row
   with attach, mic and send, and the menus take the row below. The
   composer stacks over the transcript so its menus open above everything
   in it (the scroll-to-latest button included). */
.chat-composer.with-toolbar {
  position: relative;
  z-index: 20;
}

.composer-box.has-toolbar {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  border-radius: 20px;
  padding: 8px 8px 7px 9px;
}

.composer-box.has-toolbar textarea {
  flex: 1 0 100%;
  order: 0;
  min-height: 28px;
  padding: 5px 7px 7px;
}

.composer-box.has-toolbar > .composer-attach { order: 1; }
.composer-box.has-toolbar > .composer-menu-mode { order: 2; }
.composer-box.has-toolbar > .composer-menu-effort { order: 3; }
.composer-box.has-toolbar > .composer-menu-options { order: 4; }
.composer-box.has-toolbar > .composer-badges { order: 5; }
.composer-box.has-toolbar > .composer-menu-model { order: 6; margin-left: auto; }
.composer-box.has-toolbar > .composer-mic { order: 7; }
.composer-box.has-toolbar > .composer-send { order: 8; }

.composer-box.has-toolbar .composer-attach,
.composer-box.has-toolbar .composer-mic {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.composer-box.has-toolbar .composer-send {
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin-left: 2px;
  font-size: 16px;
}

/* A menu and its button. */
.hmenu {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.hmenu-trigger {
  gap: 5px;
  height: 32px;
  min-height: 32px;
  max-width: 200px;
  padding: 0 8px 0 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.hmenu-trigger:hover,
.hmenu.open > .hmenu-trigger {
  background: var(--nav-hover);
  color: var(--ink);
}

/* A choice that changes what runs (a team mode, Code, more or less effort, a
   picked model) is tinted, so it is never on by accident unnoticed. */
.hmenu-trigger.is-on {
  background: var(--primary-soft);
  color: var(--primary);
}

.hmenu-trigger.is-on:hover,
.hmenu.open > .hmenu-trigger.is-on {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--primary);
}

.hmenu-trigger.is-icon {
  width: 32px;
  padding: 0;
}

.hmenu-trigger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.hmenu-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hmenu-chevron {
  width: 13px;
  height: 13px;
  margin-left: -1px;
  opacity: 0.7;
  transition: transform var(--dur-2) var(--ease-out);
}

.hmenu.open .hmenu-chevron {
  transform: rotate(180deg);
}

.hmenu-list {
  position: absolute;
  z-index: 60;
  bottom: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 1px;
  width: max-content;
  min-width: 230px;
  max-width: min(340px, calc(100vw - 24px));
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  transform-origin: bottom left;
  animation: hmenu-in var(--dur-2) var(--ease-out);
}

.hmenu-list[hidden] {
  display: none;
}

.hmenu-list.below {
  top: calc(100% + 8px);
  bottom: auto;
  transform-origin: top left;
}

.hmenu-list:focus {
  outline: none;
}

@keyframes hmenu-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hmenu-list { animation: none; }
  .hmenu-chevron { transition: none; }
}

.hmenu-heading {
  margin: 6px 10px 3px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hmenu-sep {
  height: 1px;
  margin: 5px 6px;
  background: var(--line);
}

.hmenu-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 0;
  padding: 7px 10px 7px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
}

.hmenu-item:hover,
.hmenu-item:focus {
  background: var(--nav-hover);
  outline: none;
}

.hmenu-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus);
}

.hmenu-item[aria-disabled="true"] {
  cursor: default;
  opacity: 0.5;
}

/* The mark column: a tick for the chosen option, a box for a toggle. */
.hmenu-mark {
  display: inline-grid;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  place-items: center;
}

.hmenu-item[role="menuitemradio"][aria-checked="true"] .hmenu-mark::before {
  content: "";
  width: 9px;
  height: 5px;
  border: 2px solid var(--primary);
  border-top: 0;
  border-right: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.hmenu-item[role="menuitemcheckbox"] .hmenu-mark {
  flex-basis: 14px;
  width: 14px;
  height: 14px;
  margin: 2px 1px 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
}

.hmenu-item[role="menuitemcheckbox"][aria-checked="true"] .hmenu-mark {
  border-color: var(--primary);
  background: var(--primary);
}

.hmenu-item[role="menuitemcheckbox"][aria-checked="true"] .hmenu-mark::before {
  content: "";
  width: 7px;
  height: 4px;
  border: 2px solid var(--on-primary, #fff);
  border-top: 0;
  border-right: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.hmenu-item[aria-checked="true"] .hmenu-label {
  font-weight: 650;
}

.hmenu-icon {
  display: inline-flex;
  margin-top: 1px;
  color: var(--muted);
}

.hmenu-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.hmenu-label {
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.hmenu-hint {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
}

.hmenu-sub {
  display: grid;
  gap: 1px;
  padding-left: 22px;
}

.hmenu-sub[hidden] {
  display: none;
}

.hmenu-note {
  margin: 4px 10px 6px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.hmenu-note .code-station {
  white-space: normal;
}

.hmenu-item[data-kind="cold-blooded"][aria-checked="true"] {
  color: var(--danger);
}

.hmenu-item[data-kind="cold-blooded"][aria-checked="true"] .hmenu-mark {
  border-color: var(--danger);
  background: var(--danger);
}

/* Signs that stay in view: Cold-blooded while it is on, and the machine
   Code mode works on. The group takes the row's free space and no more (a
   zero basis), so a long machine name is cut short instead of pushing the
   Model button and send onto a row of their own; the Cold-blooded badge
   never shrinks. */
.composer-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  align-self: center;
}

.composer-box.has-toolbar > .composer-badges {
  flex: 1 1 0;
  overflow: hidden;
}

.composer-badges .cold-blooded-badge {
  flex: 0 0 auto;
}

.composer-badges .code-station-slot:not(:empty) {
  display: inline-flex;
  min-width: 0;
}

.composer-badges .code-station {
  min-width: 0;
}

.cold-blooded-badge {
  gap: 4px;
  height: 26px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-size: 12px;
  font-weight: 650;
}

.cold-blooded-badge:hover {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}

.cold-blooded-badge[hidden] {
  display: none;
}

.composer-badges .code-station {
  max-width: 220px;
  padding: 2px 9px;
}

.code-station-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (pointer: coarse) {
  .hmenu-trigger,
  .composer-box.has-toolbar .composer-attach,
  .composer-box.has-toolbar .composer-mic {
    height: 38px;
    min-height: 38px;
  }

  .hmenu-trigger.is-icon,
  .composer-box.has-toolbar .composer-attach,
  .composer-box.has-toolbar .composer-mic {
    width: 38px;
  }

  .composer-box.has-toolbar .composer-send {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .hmenu-item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* A phone: the message, mic and send on the first row; attach and the menus
   on the second; the menu buttons drop their icons to fit. */
@media (max-width: 560px) {
  .composer-box.has-toolbar {
    padding: 6px 6px 6px 8px;
  }

  .composer-box.has-toolbar textarea {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px 6px;
  }

  .composer-box.has-toolbar > .composer-attach { order: -1; }
  .composer-box.has-toolbar > .composer-mic { order: 1; }
  .composer-box.has-toolbar > .composer-send { order: 2; }

  .composer-box.has-toolbar::after {
    content: "";
    flex-basis: 100%;
    order: 3;
    height: 0;
  }

  .composer-box.has-toolbar > .composer-menu-mode { order: 5; }
  .composer-box.has-toolbar > .composer-menu-effort { order: 6; }
  .composer-box.has-toolbar > .composer-menu-model { order: 7; margin-left: 0; }
  .composer-box.has-toolbar > .composer-menu-options { order: 8; }
  .composer-box.has-toolbar > .composer-badges { order: 9; }

  .hmenu-trigger:not(.is-icon) > .i:first-child,
  .hmenu-chevron {
    display: none;
  }

  .hmenu-trigger {
    max-width: 128px;
    padding: 0 9px;
  }

  .cold-blooded-badge .badge-text {
    display: none;
  }

  .composer-badges .code-station {
    max-width: 104px;
  }
}

/* ---- Habu Lightning on an answer (reflex.js) ----
   One quiet pill in a settled answer's foot, "Answered via fast path", that
   opens a small panel beside it (a sheet from the bottom on a phone); and,
   while a reply is in flight, a band at the foot of its live card with "Take
   more time". */
.lightning-slot:empty {
  display: none;
}

/* With the pill in it, the answer's foot no longer fits a phone's line:
   it wraps rather than squeezing its badges. */
.message-foot-start {
  flex-wrap: wrap;
  row-gap: 6px;
}

.lightning-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  padding: 2px 10px 2px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: none;
}

.lightning-pill:hover,
.lightning-pill[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--primary-soft);
}

.lightning-pill .i,
.lightning-mark .i,
.lightning-live-label .i {
  width: 12px;
  height: 12px;
  fill: currentColor;
  stroke-width: 1.2;
}

/* A column: the head and the long way stay in view, and only what it did
   scrolls when the panel is short of room. */
.lightning-panel {
  position: fixed;
  z-index: 2050;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 24px));
  max-height: min(72vh, 540px);
  overflow: hidden;
  padding: 14px 16px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  animation: lightning-pop var(--dur-2) var(--ease-out);
}

.lightning-panel:focus {
  outline: none;
}

.lightning-panel-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.lightning-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lightning-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}

.lightning-mark .i {
  width: 14px;
  height: 14px;
}

.lightning-panel-head h3 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.lightning-close {
  flex: none;
  min-height: 30px;
  width: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.lightning-close:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

.lightning-intro {
  margin: 0 0 14px;
  color: var(--muted);
}

.lightning-sub {
  margin: 0 0 7px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lightning-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lightning-list li {
  position: relative;
  padding-left: 22px;
}

/* A small check before each thing it did. */
.lightning-list li::before {
  content: "";
  position: absolute;
  top: 0.32em;
  left: 5px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
}

.lightning-stats {
  margin: 12px 0 0;
  color: var(--faint);
  font-size: 12px;
}

.lightning-redo-block {
  flex: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lightning-redo {
  width: 100%;
  min-height: 36px;
}

.lightning-redo .i {
  width: 14px;
  height: 14px;
}

.lightning-redo-hint {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* On a phone the panel is a sheet from the bottom, over a scrim. */
.lightning-scrim {
  position: fixed;
  inset: 0;
  z-index: 2049;
  background: var(--scrim);
  animation: modal-fade 140ms ease;
}

.lightning-panel.sheet {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-height: 82vh;
  max-height: 82dvh;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  font-size: 14px;
  animation: lightning-sheet var(--dur-3) var(--ease-out);
}

.lightning-panel.sheet::before {
  content: "";
  display: block;
  flex: none;
  width: 36px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 2px;
  background: var(--line-strong);
}

.lightning-panel.sheet .lightning-redo {
  min-height: 44px;
}

@keyframes lightning-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes lightning-sheet {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* The live card's band: what is shaping the reply, and the way to the long
   path right there. */
.lightning-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin: 9px -12px -9px;
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  font-size: 12px;
}

.lightning-live-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--primary);
  font-weight: 600;
}

/* Right-hand, on the label's line or, on a narrow card, under it. */
.lightning-live-switch {
  margin-left: auto;
  min-height: 26px;
  padding: 2px 11px;
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--primary);
  font-size: 12px;
}

.lightning-live-switch:hover {
  background: var(--primary-soft);
}

.lightning-live-note {
  color: var(--muted);
  font-style: italic;
}

@media (pointer: coarse) {
  .lightning-pill,
  .lightning-live-switch {
    min-height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightning-panel,
  .lightning-panel.sheet,
  .lightning-scrim {
    animation: none;
  }
}

/* Instant answers (docs/INSTANT_REPLIES.md): the usage panel's line about
   what never reached a model, and the agent editor's switch for them. */
.usage-instant {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.usage-instant .i {
  flex: none;
  width: 12px;
  height: 12px;
  fill: var(--primary);
  stroke-width: 1.2;
  transform: translateY(1px);
}

.editor-instant {
  margin-top: -2px;
}

/* ---- Settings → Fast decisions ---- */
.reflex-form {
  display: grid;
  gap: 14px;
}

.reflex-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 16px;
  align-items: end;
}

.reflex-fields > label:not(.sso-check) {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.reflex-check {
  align-self: center;
}

.reflex-fields > .reflex-sample {
  grid-column: 1 / -1;
  max-width: 560px;
}

.reflex-sample-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reflex-sample-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--primary);
}

.reflex-sample-row output {
  min-width: 3.2em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-align: right;
}

.reflex-field-hint,
.reflex-decision-hint {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
}

.reflex-fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.reflex-fieldset legend {
  padding: 0 6px;
  font-weight: 650;
}

.reflex-fieldset > label:not(.sso-check) {
  display: grid;
  gap: 5px;
  max-width: 360px;
}

.reflex-decision-table td {
  padding-top: 6px;
  padding-bottom: 6px;
  white-space: normal;
  vertical-align: middle;
}

.reflex-decision-table select {
  width: auto;
  min-width: 120px;
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.reflex-tiers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 13px;
}

.reflex-warning {
  color: var(--warning);
}

.reflex-report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reflex-report-head h3 {
  margin: 0;
}

.reflex-days {
  display: inline-flex;
  gap: 4px;
}

.reflex-days button {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 12px;
}

.reflex-days button[aria-checked="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--ink);
}

.reflex-report {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.reflex-report h4 {
  margin: 8px 0 0;
}

.reflex-table td.num,
.reflex-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Headings wrap so the live table's nine columns fit a settings pane. */
.reflex-table th {
  white-space: normal;
  vertical-align: bottom;
}

.reflex-table th,
.reflex-table td {
  padding-left: 8px;
  padding-right: 8px;
}

.reflex-total td {
  background: var(--surface-soft);
}

/* The verdict leads the report: a pill in the verdict's colour, the
   summary, then the reasons it rests on. */
.reflex-verdict {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.reflex-verdict.success { border-left-color: var(--success); }
.reflex-verdict.danger { border-left-color: var(--danger); }
.reflex-verdict.neutral { border-left-color: var(--faint); }

.reflex-verdict-pill {
  justify-self: start;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}

.reflex-verdict.success .reflex-verdict-pill { background: var(--success-soft); color: var(--success); }
.reflex-verdict.danger .reflex-verdict-pill { background: var(--danger-soft); color: var(--danger); }

.reflex-verdict-summary {
  margin: 0;
  font-weight: 600;
}

.reflex-verdict-reasons {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12.5px;
}

.reflex-final {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
}

.reflex-final-title {
  margin: 0;
}

.reflex-final-details > summary {
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}

/* Step-budget landing notice: the answer completed but the effort budget cut
   the work short — disclose it and offer the retry inline. */
.budget-landing {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--warning, #b45309) 35%, transparent);
  background: color-mix(in srgb, var(--warning, #b45309) 7%, transparent);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
}

.budget-retry {
  min-height: 0;
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
}

.budget-retry:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.failure-retry {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--danger, #b91c1c) 32%, transparent);
  background: color-mix(in srgb, var(--danger, #b91c1c) 8%, transparent);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
}

.grounding-pill.open {
  border-color: color-mix(in srgb, var(--muted) 40%, transparent);
  color: var(--muted);
}

/* Credentials: list-first page. Quick-setup strip for the services built-in
   tools look up by name; add/rotate lives in a dialog; help folds away. */
.cred-quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 14px;
}

.cred-quick-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.cred-quick-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cred-quick-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

.cred-quick-item:hover {
  border-color: var(--primary);
  background: var(--surface-soft);
}

.cred-quick-item.is-configured {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.cred-quick-item small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.credential-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.credential-card .credential-meta {
  gap: 6px;
}

.cred-help {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

.cred-help summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cred-help summary::before {
  content: "▸";
  font-size: 11px;
  transition: transform var(--dur-2, 0.15s);
}

.cred-help[open] summary::before {
  transform: rotate(90deg);
}

.cred-help ul {
  margin: 10px 0 0 18px;
  display: grid;
  gap: 6px;
  max-width: 78ch;
}

.cred-dialog-fields {
  display: grid;
  gap: 8px;
}

.cred-dialog-fields-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cred-dialog-fields-head .eyebrow {
  margin: 0;
  flex: 1;
}

.cred-dialog-fields-head a {
  font-size: 12px;
}

.cred-dialog-url {
  margin-top: 4px;
}

.cred-scope-grid .check-card.is-disabled {
  opacity: 0.6;
}

.app-modal-dialog:has(#credential-form) {
  width: min(640px, 100%);
}

/* Provider → Models… dialog: pick which of an endpoint's models agents may use. */
.provider-models-tools { gap: 8px; align-items: center; margin: 6px 0 10px; }
.provider-models-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; padding-right: 4px; }
.provider-model-row { display: flex; gap: 10px; align-items: flex-start; line-height: 1.35; }
.provider-model-row input { margin-top: 3px; }
/* The model on the left; whether agents and Habu chat may use it on the right. */
.provider-model-info { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.provider-model-flag { display: inline-flex; flex: none; gap: 5px; align-items: flex-start; white-space: nowrap; font-size: 12px; color: var(--muted); cursor: pointer; }
.provider-model-flag:has(input:disabled) { opacity: 0.5; cursor: default; }
.provider-models-actions { justify-content: flex-end; margin-top: 12px; }

/* Provider form: Default model with its Discover models step. */
.model-field { display: flex; flex-direction: column; gap: 4px; }
.model-field-controls { display: flex; flex-direction: column; gap: 6px; }
.model-field-actions { gap: 10px; align-items: center; flex-wrap: wrap; }
.model-field-status:empty { display: none; }

/* AI Gateway → Errors: the provider's words and the fix, wrapped, not clipped. */
.gateway-errors-table td { vertical-align: top; white-space: normal; }
.gateway-errors-table .gateway-error-when { white-space: nowrap; }
.gateway-errors-table .gateway-error-when button { margin-top: 4px; padding: 2px 8px; font-size: 0.85em; }
.gateway-error-text { min-width: 220px; max-width: 34ch; white-space: normal; word-break: break-word; line-height: 1.35; }
.gateway-error-hint { opacity: 0.85; }

/* Settings → Channels (WhatsApp, SMS, iMessage) */
.messaging-row .messaging-webhook { display: block; margin-top: 4px; }
.messaging-row .messaging-webhook code { word-break: break-all; }
.messaging-row .messaging-webhook button { padding: 2px 8px; margin-left: 6px; }
.messaging-options { flex-wrap: wrap; gap: 8px 18px; }
.messaging-text { max-width: 420px; white-space: pre-wrap; word-break: break-word; }

/* Canvas → Web tab: the view fills the body; web-view.css draws the rest. */
.canvas-body.web {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.canvas-body.web > #canvas-web {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Command palette (palette.js) */
.palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--scrim, rgba(0, 0, 0, 0.45));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.palette {
  width: min(640px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.palette-icon { width: 18px; height: 18px; color: var(--primary); flex: 0 0 auto; }

.palette-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 15px/1.4 inherit;
  outline: none;
}

.palette-kbd, .palette-foot kbd, .shortcut-table kbd, .nav-kbd {
  font: 11px/1 var(--mono);
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--muted);
  background: var(--surface-soft);
}

.palette-list { overflow: auto; padding: 6px; min-height: 0; }

.palette-group {
  padding: 8px 10px 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint, var(--muted));
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.palette-item.selected { background: var(--primary-soft, rgba(55, 182, 196, 0.14)); }
.palette-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.palette-item-title { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-item-sub, .palette-item-group { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-item-shortcut { font: 11px/1 var(--mono); color: var(--muted); padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; white-space: nowrap; }
.palette-empty { padding: 24px; text-align: center; color: var(--muted); }

.palette-foot {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}

.palette-foot kbd { margin-right: 3px; }
.shortcut-table { border-collapse: collapse; width: 100%; }
.shortcut-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.shortcut-table td:first-child { width: 120px; white-space: nowrap; }
.nav-kbd { margin-left: 6px; }
body.palette-open { overflow: hidden; }

@media (max-width: 640px) {
  .palette-overlay { padding-top: 4vh; }
  .palette { max-height: 85vh; }
  .nav-kbd { display: none; }
}

/* Desktop sign-in: the code the app shows, typed in the browser. */
.auth-code {
  margin: 14px 0 6px;
  font: 600 30px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.desktop-approve-form { margin-top: 14px; }
.auth-code-input {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  text-align: center;
  font: 600 24px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.auth-note { margin: 4px 0; color: var(--muted); font-size: 13px; }
.auth-wait { margin-top: 10px; }
.auth-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 12px 0 0; }
.auth-link {
  background: none;
  border: 0;
  padding: 4px 2px;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-link:hover { color: var(--ink); }

/* A toast with something to do: Habu's Open in browser. */
.toast-action {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.toast-action:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.toast-action:disabled { opacity: 0.7; cursor: default; }

/* Providers: who runs on this provider, by model. */
.provider-usage {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}
.provider-usage.is-empty { padding: 8px 12px; }
.provider-usage-head {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.provider-usage.is-empty .provider-usage-head { margin-bottom: 0; }
.provider-usage-model { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 4px 0; }
.provider-usage-model code { font-size: 12px; padding-top: 4px; }
.provider-usage-agents { display: flex; flex-wrap: wrap; gap: 6px; }
.provider-usage-agents.is-collapsed .usage-chip:nth-child(n+7):not(.usage-chip-more) { display: none; }
.usage-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}
.usage-chip:hover { border-color: var(--primary); }
.usage-chip-more { padding: 3px 10px; color: var(--muted); }
.usage-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}
.usage-chip-avatar img, .usage-chip-avatar svg { width: 100%; height: 100%; display: block; }
.usage-chip-sys { color: var(--muted); font-size: 11px; }
.agent-badge-model { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.agent-badge-soft { opacity: 0.8; }
.agent-routing-hint { align-self: end; margin: 0 0 6px; }

/* This Mac, lent to a conversation (desktop app only). */
.mac-chip-slot { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.mac-chip-slot:empty { display: none; }
.mac-chip.warn {
  border-color: color-mix(in srgb, var(--warning, #b7791f) 55%, transparent);
  color: var(--warning, #b7791f);
}
.mac-chip:disabled { opacity: 0.7; cursor: default; }
.mac-chip-settings { padding: 4px 6px; min-height: 0; color: var(--muted); }
.mac-chip-settings:hover { color: var(--text); }
.mac-warn { color: var(--warning, #b7791f); }
.record-row .mac-badge.mac-badge-off { color: var(--muted, #6b7280); border-color: currentColor; background: transparent; }
.mac-watch-prompt { margin-top: 6px; font-size: 0.86em; }
.mac-watch-prompt summary { cursor: pointer; color: var(--muted, #6b7280); }
.mac-watch-prompt p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mac-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}
.mac-folder { flex-wrap: wrap; }
.mac-folder-name { min-width: 0; }
.mac-folder-name strong { display: inline-flex; align-items: center; gap: 6px; }
.mac-folder-actions, .mac-version-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mac-folder-actions select { width: auto; flex: none; min-height: 0; padding: 4px 28px 4px 8px; font-size: 12px; }
.mac-folder-actions, .mac-version-actions { flex: none; justify-content: flex-end; }
.record-row .mac-badge { display: inline-block; color: var(--primary); }
.record-row .mac-folder-actions, .record-row .mac-version-actions { display: flex; }
.mac-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.mac-check input { margin-top: 3px; flex: none; }
.mac-check strong { display: block; font-weight: 600; }
.mac-check em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
[data-mac-settings] h4 { margin: 16px 0 2px; font-size: 13px; }

/* Files an agent handed over: where they are, and a way to open them. */
.mac-files { display: grid; gap: 6px; margin: 10px 0 2px; }
.mac-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 80%, var(--bg));
}
.mac-file-icon { color: var(--primary); flex: none; display: inline-flex; }
.mac-file-text { min-width: 0; flex: 1; }
.mac-file-text strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.mac-file-text em { display: block; font-style: normal; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.mac-file-actions { display: flex; gap: 6px; flex: none; }
.mac-file-actions button { min-height: 0; padding: 3px 9px; font-size: 12px; }

/* Cold-blooded mode: the badge in the toolbar and the line over the message
   box say plainly that Habu is not stopping to ask. */
.cold-blooded-note {
  margin: 0 2px 8px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.cold-blooded-note[hidden] {
  display: none;
}

/* ---- Habu, the desktop app: Habu Chat alone ----
   The console's navigation is hidden and the chats rail is the sidebar, with
   settings, the theme and the full console at its foot (app.js harnessApp).
   The main column spans the whole width whatever column template another
   rule sets, focus mode's included. */
html.harness-app .shell-sidebar,
html.harness-app #nav-backdrop,
html.harness-app .mobile-topbar {
  display: none !important;
}

html.harness-app body,
html.harness-app body.nav-collapsed,
html.harness-app body[data-view="chat"].chat-focus {
  grid-template-columns: minmax(0, 1fr);
}

html.harness-app .shell-main {
  grid-column: 1 / -1;
}

/* Header, search, the list, an update waiting (hidden when none), the foot. */
html.harness-app .chat-rail {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.chat-rail-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.chat-rail-foot .rail-foot-settings {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

html.harness-app .page-header {
  align-items: center;
}

/* ---- The desktop app's update, in the left rail ----
   One banner while an update waits (desktop-update.js): in Habu above the
   chats rail's foot and in Settings → This app, in Habu Platform above the
   navigation's foot. Where the navigation is only icons wide (collapsed, or
   a window under 1081px) a small button stands in for it and opens the
   banner in a dialog. */
.update-slot[hidden] {
  display: none !important;
}

.update-banner {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  color: var(--ink);
  padding: 9px;
  font-size: var(--text-sm);
  line-height: 1.35;
}

.update-banner.is-asked {
  animation: update-asked 1.1s var(--ease-out) 1;
}

@keyframes update-asked {
  from {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent);
  }
  to {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--primary) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .update-banner.is-asked {
    animation: none;
  }
}

.update-banner-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.update-banner-mark {
  display: inline-grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
}

.update-banner-mark .i {
  width: 13px;
  height: 13px;
  stroke-width: 2.1;
}

.update-banner-title {
  min-width: 0;
  padding-top: 2px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.update-banner-note {
  margin: 0;
  color: var(--muted);
}

/* Both buttons fit one row in the narrowest rail (the navigation's 236px);
   should they not, Later goes under Install and relaunch, on the right. */
.update-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.update-banner-actions button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.update-banner-install {
  flex: 1 1 auto;
}

.update-banner-install[aria-busy="true"]:disabled {
  cursor: progress;
  opacity: 0.8;
}

.update-banner-later {
  flex: 0 0 auto;
}

/* Habu: above the chats rail's foot. */
.chat-rail > .update-slot {
  margin-top: 10px;
}

/* Habu: Settings → This app. */
.update-slot[data-update-slot="settings"] {
  max-width: 440px;
  margin-top: 14px;
}

/* The dialog: the banner is the dialog's whole content. */
.update-dialog .update-banner {
  gap: 12px;
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--text-md);
}

.update-dialog .update-banner-title {
  font-size: var(--text-lg);
}

.update-dialog .update-banner-actions {
  gap: 8px;
}

.update-dialog .update-banner-actions button {
  min-height: 32px;
  padding: 5px 12px;
  font-size: var(--text-md);
}

.update-dialog .update-banner-install {
  flex: 0 0 auto;
}

/* Habu Platform: above the navigation's foot, or the small button where the
   navigation is only icons wide. */
.update-slot .update-compact {
  display: none;
  color: var(--primary);
}

.update-compact-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--nav);
}

.update-compact[aria-busy="true"] .update-compact-dot {
  animation: status-pulse 1.6s ease-in-out infinite;
}

body.nav-collapsed .sidebar-update .update-banner {
  display: none;
}

body.nav-collapsed .sidebar-update .update-compact {
  display: flex;
}

@media (min-width: 641px) and (max-width: 1080px) {
  .sidebar-update .update-banner {
    display: none;
  }

  .sidebar-update .update-compact {
    display: flex;
  }
}

/* A phone's navigation drawer always has room for the banner. */
@media (max-width: 640px) {
  .sidebar-update .update-banner,
  body.nav-collapsed .sidebar-update .update-banner {
    display: grid;
  }

  .sidebar-update .update-compact,
  body.nav-collapsed .sidebar-update .update-compact {
    display: none;
  }
}

/* A machine somebody else paired to your account (machine-notice.js, SR-35):
   the same banner, in the same places, in the warning colour, with Keep,
   Revoke and Not now (the small cross in the head). */
.update-banner.machine-notice {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}

.update-banner.machine-notice .update-banner-mark {
  background: var(--warning-soft);
  color: var(--warning-text);
}

.update-banner.machine-notice .update-banner-title {
  flex: 1 1 auto;
}

.machine-notice-machine {
  font-weight: 400;
  color: var(--muted);
}

.machine-notice-later {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  margin: 0 0 0 auto;
  color: var(--muted);
}

.machine-notice-later .i {
  width: 12px;
  height: 12px;
}

.update-banner.machine-notice .update-banner-actions button {
  flex: 1 1 auto;
}

.update-banner.machine-notice.is-busy .update-banner-actions button:disabled {
  cursor: progress;
  opacity: 0.8;
}

.update-compact.machine-notice {
  color: var(--warning-text);
}

.update-compact.machine-notice .update-compact-dot {
  background: var(--warning);
}

/* More than one machine: the banners stack. */
[data-machine-notice-slot] .update-banner + .update-banner {
  margin-top: 6px;
}

/* Habu on a phone: the chats rail is a drawer, and the banner is in it. The
   drawer's button carries a dot while an update waits (desktop-update.js
   sets update-waiting) or a machine waits to be kept or revoked
   (machine-notice.js sets machine-notice-waiting). */
@media (max-width: 720px) {
  html.harness-app.update-waiting #chat-focus-toggle,
  html.harness-app.machine-notice-waiting #chat-focus-toggle {
    position: relative;
  }

  html.harness-app.machine-notice-waiting #chat-focus-toggle::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning);
    box-shadow: 0 0 0 2px var(--surface);
  }

  html.harness-app.update-waiting #chat-focus-toggle::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--surface);
  }
}

/* Habu for Android's sign-in names its server, with the way to another: a
   phone has no launcher to choose it on. */
.auth-server {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 10px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.auth-server strong {
  color: var(--ink);
  font-weight: 600;
}

/* The approval's way back to the phone's app: a link that looks like the
   button it stands for. */
a.auth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

a.auth-cta.primary {
  border-color: transparent;
  background: var(--ink);
  color: var(--bg);
}

/* ---- Choose a model ---- */
.demo-model-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.demo-model-banner button {
  flex: 0 0 auto;
}

.choose-model-presets,
.theme-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.choose-model-presets {
  margin: 12px 0 14px;
}

.choose-model-preset.active,
.theme-choice .active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--ink);
}

/* ---- Settings → Your data, Memory, Scheduled (your-data.js) ----
   Cards like This phone's: hairline borders, a coloured left edge, plain
   words, and buttons big enough for a thumb. Nothing is wider than the
   screen at 360 px. */
.yd {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.yd-panel h3 {
  margin-bottom: 4px;
}

.yd-panel > .form-hint:first-of-type {
  margin-top: 0;
}

.yd-subhead {
  margin: 18px 0 6px;
  font-size: 13px;
}

.link-button {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--info);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-button:hover {
  background: none;
  color: var(--primary-dark);
}

.link-button:active {
  transform: none;
}

/* The categories: a card each. */
.yd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 10px;
  margin-top: 14px;
}

.yd-cards > .empty-state {
  grid-column: 1 / -1;
}

.yd-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.yd-card.is-empty {
  border-left-color: var(--line-strong);
}

.yd-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.yd-card-head h4 {
  margin: 0;
  font-size: 14.5px;
  overflow-wrap: anywhere;
}

.yd-size {
  flex: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.yd-card-what,
.yd-card-counts,
.yd-card-age {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.yd-card-what { color: var(--muted); }
.yd-card-counts { color: var(--ink); font-weight: 600; }
.yd-card.is-empty .yd-card-counts { color: var(--faint); font-weight: 400; }
.yd-card-age { color: var(--faint); }

.yd-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.yd-card-actions button,
.yd-all button,
.yd-sched-actions button,
.yd-note-actions button,
.yd-mem-actions button,
.yd-more button {
  min-height: 38px;
}

.yd-all {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Keep my data for. */
.yd-keep {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.yd-keep-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 220px);
  align-items: center;
  gap: 4px 14px;
}

.yd-keep-row > label {
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
}

.yd-keep-row select {
  min-height: 40px;
  padding: 8px 10px;
}

.yd-keep-now {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--faint);
  font-size: 12px;
}

@media (max-width: 520px) {
  .yd-keep-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* What deleting means. */
.yd-points {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.yd-points strong {
  color: var(--ink);
}

.yd-phone-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.yd-phone-note .i {
  flex: none;
  margin-top: 2px;
}

/* A deletion, confirmed: what goes, listed; the word to type. */
.yd-confirm {
  width: min(460px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}

.yd-confirm h3 {
  margin-bottom: 10px;
}

.yd-confirm-body p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
}

.yd-confirm-list {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.yd-confirm-warning {
  color: var(--danger);
  font-weight: 600;
}

.yd-confirm-type {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 13px;
}

.yd-confirm-type input {
  font-family: var(--mono);
  letter-spacing: 0.06em;
}

/* Memory: the switch, the search, the list, the project notes. */
.yd-switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.yd-switch input[role="switch"] {
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  margin: 1px 0 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.yd-switch input[role="switch"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}

.yd-switch input[role="switch"]:checked {
  border-color: var(--primary);
  background: var(--primary);
}

.yd-switch input[role="switch"]:checked::after {
  background: var(--on-primary);
  transform: translateX(16px);
}

.yd-switch input[role="switch"]:disabled {
  opacity: 0.55;
  cursor: wait;
}

.yd-switch-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.yd-switch-text strong {
  font-weight: 600;
}

.yd-switch-text em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

.yd-switch-note {
  margin: 8px 0 0 52px;
  color: var(--warning-text);
}

.yd-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 190px);
  gap: 8px;
  margin: 10px 0 12px;
}

@media (max-width: 520px) {
  .yd-filter {
    grid-template-columns: minmax(0, 1fr);
  }
}

.yd-mem-list,
.yd-notes,
.yd-sched-list {
  display: grid;
  gap: 10px;
}

.yd-notes {
  margin-top: 12px;
}

.yd-mem,
.yd-note,
.yd-sched {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.yd-mem.is-shared {
  border-left-color: var(--line-strong);
}

.yd-mem.is-editing {
  background: var(--surface);
}

.yd-mem-head,
.yd-note-head,
.yd-sched-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
}

.yd-note-head {
  justify-content: flex-start;
}

.yd-mem-title,
.yd-note-head strong {
  min-width: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.yd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.yd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.yd-chip .i {
  width: 11px;
  height: 11px;
}

.yd-chip.is-strong { background: var(--warning-soft); color: var(--warning-text); }
.yd-chip.is-shared { background: var(--info-soft); color: var(--info); }

.yd-mem-body {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.yd-mem-meta {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.yd-mem-actions,
.yd-note-actions,
.yd-sched-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.yd-mem-readonly {
  color: var(--faint);
  font-size: 12px;
}

.yd-mem-form {
  display: grid;
  gap: 2px;
}

.yd-mem-form .field {
  margin: 4px 0;
}

.yd-mem-form textarea {
  min-height: 84px;
}

.yd-mem-form .yd-mem-actions {
  justify-content: flex-end;
}

.yd-more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.yd-note-preview {
  margin: 4px 0 0;
  max-height: 9.5em;
  overflow: hidden;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.yd-note-empty {
  margin: 2px 0 0;
  color: var(--faint);
  font-size: 13px;
}

/* Scheduled: one card per task. */
.yd-sched-list {
  margin-top: 12px;
}

.yd-sched.is-paused {
  border-left-color: var(--warning);
}

.yd-sched-head h4 {
  margin: 0;
  min-width: 0;
  font-size: 14.5px;
  overflow-wrap: anywhere;
}

.yd-sched-when {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.yd-sched-when .i,
.yd-sched-mac .i {
  flex: none;
  color: var(--muted);
}

.yd-facts {
  display: grid;
  gap: 4px;
  margin: 6px 0 2px;
}

.yd-facts > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}

.yd-facts dt {
  color: var(--muted);
  font-size: 12.5px;
}

.yd-facts dd {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.yd-run {
  font-weight: 700;
}

.yd-run.is-success { color: var(--success-text); }
.yd-run.is-danger { color: var(--danger); }
.yd-run.is-warning { color: var(--warning-text); }
.yd-run.is-info { color: var(--info); }

.yd-sched-mac {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.yd-sched-prompt {
  margin-top: 4px;
}

.yd-sched-prompt > summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* A small chevron that turns when the prompt (or the folded events) is
   open: the disclosure's own marker goes with display: inline-flex. */
.yd-sched-prompt > summary::before,
.phone-events-earlier > summary::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--ease-out);
}

.yd-sched-prompt[open] > summary::before,
.phone-events-earlier[open] > summary::before {
  transform: rotate(45deg);
}

.yd-sched-prompt > summary::-webkit-details-marker,
.phone-events-earlier > summary::-webkit-details-marker {
  display: none;
}

.yd-sched-prompt > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.yd-sched-prompt p {
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.yd-empty {
  margin-top: 4px;
  padding: 22px 18px;
}

.yd-empty strong {
  color: var(--ink);
}

.yd-empty span {
  max-width: 52ch;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .yd-switch input[role="switch"],
  .yd-switch input[role="switch"]::after {
    transition: none;
  }
}