/* JetBrains Mono, self-hosted (SIL OFL 1.1, unmodified; licence text in
   fonts/jetbrains-mono-OFL.txt). The same upright files the OpenClaw Control UI
   serves, so a box needs no third-party font request. Latin-ext loads only for
   the characters in its range. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0d121b;
  --bg-sidebar: #0f141f;
  --bg-content: #0f1521;
  --bg-hover: rgba(99, 235, 255, 0.05);
  --bg-active: rgba(99, 235, 255, 0.08);
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.11);
  --text: #c9d1d9;
  --text-muted: #9198a1;
  --text-dim: #848d97;
  --card-label-bright: #dbe7f6;
  --accent: #63ebff;
  --on-accent: #0d121b;
  --accent-dim: rgba(99, 235, 255, 0.4);
  --accent-link: rgba(99, 235, 255, 0.6);
  --focus-ring: #63ebff;
  --orange: #d98a58;
  --comment: #8b949e;
  --keyword: #ff7b72;
  --string: #a5d6ff;
  --number: #79c0ff;
  --panel-bg-contrast: rgba(255, 255, 255, 0.028);
  --panel-border-contrast: rgba(255, 255, 255, 0.11);
  --field-bg-contrast: rgba(0, 0, 0, 0.3);
  --field-border-contrast: #626d7c;

  /* ── Semantic theme tokens ────────────────────── */
  --text-bright: #f3f4f6;
  --overlay: rgba(0, 0, 0, 0.7);

  /* Status: error */
  --status-error: #fca5a5;
  --status-error-muted: #f87171;
  --status-error-bg: rgba(127, 29, 29, 0.95);
  --status-error-border: rgba(185, 28, 28, 0.8);

  /* Status: warning */
  --status-warning: #fde047;
  --status-warning-muted: #facc15;
  --status-warning-bg: rgba(66, 32, 6, 0.95);
  --status-warning-border: rgba(161, 98, 7, 0.8);

  /* Status: success */
  --status-success: #86efac;
  --status-success-muted: #22c55e;
  --status-success-bg: rgba(5, 46, 22, 0.5);
  --status-success-border: rgba(21, 128, 61, 0.8);

  /* Status: info */
  --status-info: #a5f3fc;
  --status-info-muted: #06b6d4;
  --status-info-bg: rgba(8, 51, 68, 0.95);
  --status-info-border: rgba(14, 116, 144, 0.8);

  /* ── Design system tokens (DESIGN.md) ─────────── */

  /* Status tones: Badge, ActionButton, dots and callouts. Each foreground
     keeps at least 4.5:1 on its own tint over a card. */
  --tone-ok: #4ade80;
  --tone-ok-bg: rgba(34, 197, 94, 0.1);
  --tone-ok-border: rgba(34, 197, 94, 0.4);
  --tone-warn: #facc15;
  --tone-warn-bg: rgba(234, 179, 8, 0.1);
  --tone-warn-border: rgba(234, 179, 8, 0.4);
  --tone-bad: #fca5a5;
  --tone-bad-bg: rgba(239, 68, 68, 0.1);
  --tone-bad-border: rgba(239, 68, 68, 0.45);
  --tone-accent: #63ebff;
  --tone-accent-bg: rgba(99, 235, 255, 0.1);
  --tone-accent-border: rgba(99, 235, 255, 0.4);
  --tone-neutral: var(--text-muted);
  --tone-neutral-bg: rgba(148, 163, 184, 0.1);
  --tone-neutral-border: rgba(255, 255, 255, 0.14);

  /* Type families: sans for interface text, mono for data (DESIGN.md) */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Type scale */
  --font-size-caption: 12px;
  --font-size-small: 13px;
  --font-size-copy: 14px;
  --font-size-heading: 16px;
  --font-size-stat: 20px;
  --font-size-title: 22px;

  /* Spacing scale (the suffix is the Tailwind unit: p-3 = --space-3) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-control: 6px;
  --radius-card: 10px;
  --radius-pill: 999px;

  /* Layout */
  --layout-sidebar: 248px;
  --layout-content-max: 1120px;
  --layout-gutter: 40px;
}

/* ── Light theme ─────────────────────────────────── */
[data-theme="light"] {
  --bg: #f8f9fb;
  --bg-sidebar: #f0f2f5;
  --bg-content: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(8, 145, 178, 0.08);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.15);
  --text: #1f2937;
  --text-muted: #57606a;
  --text-dim: #5f6873;
  --text-bright: #111827;
  --card-label-bright: #1f2937;
  --accent: #0e7490;
  --on-accent: #ffffff;
  --accent-dim: #3f93a8;
  --accent-link: #0e7490;
  --focus-ring: #0e7490;
  --orange: #c2410c;
  --comment: #5f6873;
  --keyword: #b91c1c;
  --string: #2563eb;
  --number: #0369a1;
  --panel-bg-contrast: rgba(0, 0, 0, 0.02);
  --panel-border-contrast: rgba(0, 0, 0, 0.1);
  --field-bg-contrast: rgba(0, 0, 0, 0.04);
  --field-border-contrast: #7a8491;
  --overlay: rgba(0, 0, 0, 0.5);

  --status-error: #b91c1c;
  --status-error-muted: #b91c1c;
  --status-error-bg: rgba(254, 226, 226, 0.95);
  --status-error-border: rgba(252, 165, 165, 0.8);
  --status-warning: #854d0e;
  --status-warning-muted: #713f12;
  --status-warning-bg: rgba(254, 249, 195, 0.95);
  --status-warning-border: rgba(202, 138, 4, 0.5);
  --status-success: #15803d;
  --status-success-muted: #166534;
  --status-success-bg: rgba(220, 252, 231, 0.95);
  --status-success-border: rgba(134, 239, 172, 0.8);
  --status-info: #0c6478;
  --status-info-muted: #0c6478;
  --status-info-bg: rgba(207, 250, 254, 0.95);
  --status-info-border: rgba(103, 232, 249, 0.8);

  --tone-ok: #166534;
  --tone-ok-bg: rgba(22, 163, 74, 0.1);
  --tone-ok-border: rgba(22, 163, 74, 0.4);
  --tone-warn: #854d0e;
  --tone-warn-bg: rgba(202, 138, 4, 0.12);
  --tone-warn-border: rgba(202, 138, 4, 0.45);
  --tone-bad: #b91c1c;
  --tone-bad-bg: rgba(220, 38, 38, 0.08);
  --tone-bad-border: rgba(220, 38, 38, 0.35);
  --tone-accent: #0c6478;
  --tone-accent-bg: rgba(8, 145, 178, 0.1);
  --tone-accent-border: rgba(8, 145, 178, 0.4);
  --tone-neutral-bg: rgba(0, 0, 0, 0.05);
  --tone-neutral-border: rgba(0, 0, 0, 0.15);
}

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  line-height: 1.6;
}

.ac-logo-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--ac-logo-width, 20px);
  height: var(--ac-logo-height, 20px);
  background: #00efff;
  -webkit-mask: url("../img/logo.svg") center / contain no-repeat;
  mask: url("../img/logo.svg") center / contain no-repeat;
}

[data-theme="light"] .ac-logo-mark {
  background: var(--accent);
}

/* The wordmark is the one non-data use of the mono face (DESIGN.md). */
.ac-wordmark {
  font-family: var(--font-mono);
}

/* Inline data inside sans copy sits one scale step down so the two faces
   match optically (13 px in 14 px copy, never under the 12 px caption). The
   body prefix outranks Tailwind's base reset; a text-* class still wins. */
body code,
body kbd,
body samp {
  font-size: max(var(--font-size-caption), 0.93em);
}

body pre code {
  font-size: inherit;
}

/* Subtle grid texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* Standardised card / section label. */
.card-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.card-label-bright {
  color: var(--card-label-bright);
}

.ac-small-heading {
  font-size: var(--font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Shared collapsible history rows (incidents, webhook requests). */
.ac-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ac-history-list.ac-history-list-tight {
  gap: 0;
}

.ac-history-item {
  border: 1px solid var(--panel-border-contrast);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
}

.ac-history-item.ac-history-item-flat {
  border: 0;
  border-bottom: 1px solid var(--panel-border-contrast);
  border-radius: 0;
  background: transparent;
}

.snippet-collapse-fade {
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.75) 70%);
}

/* Shared inset panel for "surface on surface" layouts. */
.ac-surface-inset {
  border: 1px solid var(--panel-border-contrast);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
}

.ac-history-summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
  color: #d1d5db;
}

.ac-history-summary::-webkit-details-marker {
  display: none;
}

.ac-history-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ac-history-toggle {
  color: var(--text-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.ac-history-item[open] > .ac-history-summary .ac-history-toggle {
  transform: rotate(90deg);
  color: #d1d5db;
}

.ac-history-body {
  margin: 4px 10px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--panel-border-contrast);
}

/* Unified panel treatment across tabs/pages. */
.bg-surface {
  background: var(--panel-bg-contrast) !important;
  border-color: var(--panel-border-contrast) !important;
}

/* Solid background for modals so page content doesn't bleed through. */
.bg-modal {
  background: var(--bg) !important;
  border-color: var(--panel-border-contrast) !important;
}

/* Keyboard focus ring. --focus-ring is at least 3:1 against every surface in
   both themes. [tabindex="0"] covers the focusable tooltip marks and logs.
   The :is() list carries a[href], so the rule outranks Tailwind's
   focus:outline-none and a control that hides the mouse outline still shows
   the keyboard ring. Chat keeps its own rings (chat.css), and the file editor
   shows focus with its caret. */
:is(a[href], button, [role="tab"], [role="button"], [tabindex="0"], summary, input, select, textarea):focus-visible:where(:not([class^="chat-"], [class*=" chat-"], .file-viewer-editor)) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ac-segmented-control .ac-segmented-control-button:focus-visible {
  outline-offset: -2px;
}

/* A dialog panel takes focus when it opens so screen readers announce it;
   it is not a control, so it draws no ring. */
.ac-dialog-panel:focus {
  outline: none;
}

.border-border {
  border-color: var(--panel-border-contrast) !important;
}

.ac-tip-link {
  color: var(--accent-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ac-tip-link:hover {
  color: var(--accent);
}

/* Universal field contrast treatment (all tabs/pages). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background: var(--field-bg-contrast);
  border-color: var(--field-border-contrast);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

::placeholder { color: var(--text-dim) !important; opacity: 1 !important; }
::-webkit-input-placeholder { color: var(--text-dim) !important; }
::-moz-placeholder { color: var(--text-dim) !important; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }

.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* Google scope picker toggle buttons */
.scope-btn { background: rgba(255,255,255,0.03); color: var(--text-muted); border: 1px solid var(--border); transition: all 0.15s; }
.scope-btn:hover { border-color: var(--text-dim); color: var(--text); }
.scope-btn-read.active {
  background: rgba(255, 255, 255, 0.03);
  color: #f3f4f6;
  border-color: rgba(255, 255, 255, 0.35);
}
.scope-btn-write.active {
  background: rgba(255, 255, 255, 0.03);
  color: #f3f4f6;
  border-color: rgba(255, 255, 255, 0.35);
}

/* The page's one solid button (DESIGN.md: one per page, its primary action) */
.ac-btn-solid {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.ac-btn-solid:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ac-btn-solid:active:not(:disabled) {
  transform: translateY(1px);
}

.ac-btn-solid:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Reusable cyan action buttons */
.ac-btn-cyan {
  border: 1px solid var(--tone-accent-border);
  background: var(--tone-accent-bg);
  color: var(--tone-accent);
  box-shadow: inset 0 0 0 1px var(--tone-accent-bg);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.ac-btn-cyan:hover:not(:disabled) {
  border-color: var(--tone-accent);
  background: linear-gradient(var(--tone-accent-bg), var(--tone-accent-bg)), var(--tone-accent-bg);
  color: var(--tone-accent);
  box-shadow: inset 0 0 0 1px var(--tone-accent-border);
}

.ac-btn-cyan:active:not(:disabled) {
  transform: translateY(1px);
}

.ac-btn-cyan:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ac-path-card {
  border: 1px solid var(--panel-border-contrast);
  background: rgba(0, 0, 0, 0.2);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.ac-path-card:hover {
  border-color: rgba(99, 235, 255, 0.5);
  background: rgba(99, 235, 255, 0.04);
  box-shadow:
    inset 0 0 0 1px rgba(99, 235, 255, 0.1),
    0 0 12px rgba(99, 235, 255, 0.08);
}

.ac-path-card:hover .ac-path-icon {
  color: var(--accent);
  border-color: rgba(99, 235, 255, 0.3);
  background: rgba(99, 235, 255, 0.1);
}

.ac-path-card:hover .ac-path-title {
  color: #b9f8ff;
}

.ac-path-card:hover .ac-path-desc {
  color: #94a3b8;
}

.ac-path-icon {
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.ac-btn-secondary {
  border: 1px solid var(--panel-border-contrast);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.ac-btn-secondary:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text-bright);
  background: rgba(255, 255, 255, 0.06);
}

.ac-btn-secondary:active:not(:disabled) {
  transform: translateY(1px);
}

.ac-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ac-btn-ghost {
  border: none;
  color: var(--text-muted);
  background: transparent;
  transition: color 0.15s ease;
}

.ac-btn-ghost:hover:not(:disabled) {
  color: var(--text-bright);
}

.ac-btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ac-btn-danger {
  border: 1px solid var(--tone-bad-border);
  background: var(--tone-bad-bg);
  color: var(--tone-bad);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.ac-btn-danger:hover:not(:disabled) {
  border-color: var(--tone-bad);
  background: linear-gradient(var(--tone-bad-bg), var(--tone-bad-bg)), var(--tone-bad-bg);
  color: var(--tone-bad);
}

.ac-btn-danger:active:not(:disabled) {
  transform: translateY(1px);
}

.ac-btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Neutral (alias: subtle) and warning ActionButton tones. Their disabled
   look comes from ActionButton, so a loading button keeps its own. */
.ac-btn-neutral {
  border: 1px solid var(--panel-border-contrast);
  color: var(--tone-neutral);
  background: transparent;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.ac-btn-neutral:hover:not(:disabled) {
  border-color: var(--text-muted);
  color: var(--text);
}

.ac-btn-warning {
  border: 1px solid var(--tone-warn-border);
  background: var(--tone-warn-bg);
  color: var(--tone-warn);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.ac-btn-warning:hover:not(:disabled) {
  border-color: var(--tone-warn);
  background: linear-gradient(var(--tone-warn-bg), var(--tone-warn-bg)), var(--tone-warn-bg);
}

.ac-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.ac-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ac-toggle-track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--panel-border-contrast);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.ac-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 1px rgba(15, 21, 33, 0.3);
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.ac-toggle-label {
  font-size: var(--font-size-caption);
  color: #d1d5db;
}

.ac-toggle-input:checked + .ac-toggle-track {
  border-color: rgba(99, 235, 255, 0.8);
  background: rgba(99, 235, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(99, 235, 255, 0.2),
    0 0 10px rgba(99, 235, 255, 0.2);
}

.ac-toggle-input:checked + .ac-toggle-track .ac-toggle-thumb {
  transform: translateX(14px);
  background: #b6f6ff;
  box-shadow:
    0 0 0 1px rgba(15, 21, 33, 0.25),
    0 0 10px rgba(99, 235, 255, 0.45);
}

.ac-toggle-input:focus-visible + .ac-toggle-track {
  outline: 2px solid rgba(99, 235, 255, 0.55);
  outline-offset: 2px;
}

.ac-toggle-input:disabled + .ac-toggle-track {
  opacity: 0.55;
  box-shadow: none;
}

/* An inert toggle must not invite clicks: the off state and the disabled
   state are visually close in a dark theme, so the cursor carries the
   distinction (class set by ToggleSwitch — sibling selectors can't reach
   the wrapping label). */
.ac-toggle-disabled {
  cursor: not-allowed;
}

.ac-toggle-input:disabled + .ac-toggle-track + .ac-toggle-label {
  opacity: 0.6;
}

@keyframes acStatusDotPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0.14),
      0 0 5px rgba(34, 197, 94, 0.18);
  }
  50% {
    transform: scale(1.08);
    box-shadow:
      0 0 0 3px rgba(34, 197, 94, 0.08),
      0 0 9px rgba(34, 197, 94, 0.32);
  }
}

@keyframes acStatusDotPulseInfo {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(34, 211, 238, 0.16),
      0 0 5px rgba(34, 211, 238, 0.22);
  }
  50% {
    transform: scale(1.08);
    box-shadow:
      0 0 0 3px rgba(34, 211, 238, 0.1),
      0 0 9px rgba(34, 211, 238, 0.34);
  }
}

/* Shared wizard step indicator (WizardProgress): count line, h2 title and a
   4 px segmented bar. Done segments use --accent (--accent-dim on light,
   3.2:1), the current one adds a 2 px --focus-ring outline, the rest are
   --border-strong. */
.ac-wizard-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.ac-wizard-progress-count {
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--text-muted);
}

.ac-wizard-progress-title {
  font-size: var(--font-size-heading);
  font-weight: 600;
  color: var(--text-bright);
}

.ac-wizard-progress-bar {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 0;
}

.ac-wizard-progress-segment {
  flex: 1 1 0;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}

.ac-wizard-progress-segment.is-done {
  background: var(--accent);
}

[data-theme="light"] .ac-wizard-progress-segment.is-done {
  background: var(--accent-dim);
}

.ac-wizard-progress-segment.is-current {
  background: var(--accent);
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Wizard footer: Back and the primary action side by side; at phone width
   one column with the primary action full width first, in the flow right
   under the form (never fixed over it). */
.ac-wizard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 639px) {
  .ac-wizard-actions {
    display: flex;
    flex-direction: column-reverse;
  }

  .ac-wizard-actions > :empty {
    display: none;
  }
}

.ac-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.ac-status-dot--info {
  background: #22d3ee;
  animation: acStatusDotPulseInfo 2.6s ease-in-out infinite;
}

/* Gateway state dot: color/motion are server-sent ({color, motion}); these
   classes only translate them. Pulse means "operation in progress" — settled
   states (including healthy/running) stay steady. */
.ac-gateway-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: none;
}

/* Dot palette as themed tokens: the dark values are the saturated fills the
   card shipped with; light mode needs darker variants — the raw hexes measure
   ~1.8-2.3:1 on a white card, below the 3:1 non-text minimum (WCAG 1.4.11). */
:root {
  --gateway-dot-gray: #6b7280;
  --gateway-dot-green: #22c55e;
  --gateway-dot-cyan: #22d3ee;
  --gateway-dot-yellow: #eab308;
  --gateway-dot-red: #ef4444;
}

[data-theme="light"] {
  --gateway-dot-gray: #4b5563;
  --gateway-dot-green: #15803d;
  --gateway-dot-cyan: #0891b2;
  --gateway-dot-yellow: #a16207;
  --gateway-dot-red: #dc2626;
}

.ac-gateway-dot--gray {
  background: var(--gateway-dot-gray);
}

.ac-gateway-dot--green {
  background: var(--gateway-dot-green);
}

.ac-gateway-dot--cyan {
  background: var(--gateway-dot-cyan);
}

.ac-gateway-dot--yellow {
  background: var(--gateway-dot-yellow);
}

.ac-gateway-dot--red {
  background: var(--gateway-dot-red);
}

@keyframes acGatewayDotPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.72;
  }
}

.ac-gateway-dot--pulse {
  animation: acGatewayDotPulse 2.6s ease-in-out infinite;
}

/* "Status unavailable": hollow gray ring — visually distinct from every
   filled state. */
.ac-gateway-dot--hollow {
  background: transparent;
  border: 2px solid var(--gateway-dot-gray);
}

/* Boot card stage list (honest boot status): one row per stage — mark,
   label, then status/duration right-aligned. Wraps instead of overflowing
   at 375px. */
.ac-boot-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.ac-boot-stage {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  font-size: var(--font-size-caption);
  color: var(--text-muted);
}
.ac-boot-stage__mark {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-caption);
}
.ac-boot-stage__mark .ac-gateway-dot {
  width: 8px;
  height: 8px;
}
.ac-boot-stage__label {
  overflow-wrap: anywhere;
}
.ac-boot-stage__status {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ac-boot-stage--running {
  color: var(--text);
}
.ac-boot-stage--running .ac-boot-stage__label {
  font-weight: 600;
}
.ac-boot-stage--done .ac-boot-stage__mark {
  color: var(--status-success);
}
.ac-boot-stage--failed {
  color: var(--status-error);
}

/* Minimum touch target for small operational controls (WCAG 2.5.8). Both
   axes: an icon-only dismiss button was 44px tall but ~18px wide. */
.ac-touch {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ac-btn-green {
  border: 1px solid var(--tone-ok-border);
  background: var(--tone-ok-bg);
  color: var(--tone-ok);
  box-shadow: inset 0 0 0 1px var(--tone-ok-bg);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.ac-btn-green:hover:not(:disabled) {
  border-color: var(--tone-ok);
  background: linear-gradient(var(--tone-ok-bg), var(--tone-ok-bg)), var(--tone-ok-bg);
  color: var(--tone-ok);
  box-shadow: inset 0 0 0 1px var(--tone-ok-border);
}

.ac-btn-green:active:not(:disabled) {
  transform: translateY(1px);
}

.ac-btn-green:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes acSpinnerOrbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ac-spinner {
  animation: acSpinnerOrbit 1s cubic-bezier(0.3, 0.2, 0.7, 0.8) infinite;
  transform-origin: center;
  will-change: transform;
}

/* One global reduced-motion block: every pulse keyframe in the app settles
   to steady; spinners slow to a linear crawl (they still convey progress). */
@media (prefers-reduced-motion: reduce) {
  .chat-connection-spinner {
    animation-duration: 1.8s;
    animation-timing-function: linear;
  }

  .ac-spinner {
    animation-duration: 1.8s;
    animation-timing-function: linear;
  }

  .ac-status-dot--info,
  .ac-gateway-dot--pulse,
  /* html-prefixed: tailwind.generated.css loads after this file and its
     .animate-pulse utility has equal specificity — the extra type selector
     lets the reduced-motion override win the cascade without !important. */
  html .animate-pulse {
    animation: none;
  }
}

/* Reusable segmented control (pill toggle). */
.ac-segmented-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--panel-border-contrast);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  height: 28px;
}

.ac-segmented-control-full {
  display: flex;
  width: 100%;
}

.ac-segmented-control-button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--font-size-caption);
  letter-spacing: 0.03em;
  height: 100%;
  line-height: 1;
  padding: 0 10px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}

.ac-segmented-control-full .ac-segmented-control-button {
  flex: 1 1 0%;
}

.ac-segmented-control > .inline-flex {
  align-self: stretch;
  display: flex;
}

.ac-segmented-control-full > .inline-flex {
  flex: 1 1 0%;
}

.ac-segmented-control-lg {
  height: 36px;
  border-radius: 12px;
}

.ac-segmented-control-lg .ac-segmented-control-button {
  font-size: var(--font-size-copy);
  padding: 0 16px;
}

.ac-segmented-control-button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.ac-segmented-control-button.active {
  color: var(--accent);
  background: var(--bg-active);
}

.ac-segmented-control-dark {
  background: rgba(0, 0, 0, 0.25);
}

/* ── PopActions: animated action group ───────── */

.ac-pop-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.ac-pop-actions-hidden {
  visibility: hidden;
  pointer-events: none;
}

.ac-pop-actions-in > * {
  animation: acPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ac-pop-actions-in > *:nth-child(2) {
  animation-delay: 0.06s;
}

.ac-pop-actions-in .ac-btn-cyan {
  animation: acPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s both;
}

.ac-pop-actions-out > * {
  animation: acPopOut 0.18s ease-in both;
}

.ac-pop-actions-out > *:first-child {
  animation-delay: 0.03s;
}

.ac-pop-actions > button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

@keyframes acPopIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes acPopOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.85); }
}

.watchdog-logs-panel {
  min-height: 160px;
  max-height: 80vh;
  resize: vertical;
}

.watchdog-terminal-host {
  position: relative;
}

.watchdog-terminal-host .xterm {
  height: 100%;
  letter-spacing: 0;
  font-kerning: none;
}

.watchdog-terminal-host .xterm-viewport {
  overflow-y: auto !important;
}

/* ── Light theme overrides for hardcoded dark patterns ── */

[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

[data-theme="light"] .ac-history-item {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .ac-history-summary {
  color: var(--text);
}

[data-theme="light"] .ac-history-item[open] > .ac-history-summary .ac-history-toggle {
  color: var(--text);
}

[data-theme="light"] .ac-surface-inset {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .snippet-collapse-fade {
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.85) 70%);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .scope-btn { background: rgba(0, 0, 0, 0.03); }
[data-theme="light"] .scope-btn-read.active,
[data-theme="light"] .scope-btn-write.active {
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-bright);
  border-color: rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .ac-btn-secondary {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .ac-btn-secondary:hover:not(:disabled) {
  border-color: rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ac-toggle-track {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ac-toggle-thumb {
  background: #9ca3af;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ac-toggle-input:checked + .ac-toggle-track {
  border-color: rgba(8, 145, 178, 0.6);
  background: rgba(8, 145, 178, 0.12);
  box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.15);
}

[data-theme="light"] .ac-toggle-input:checked + .ac-toggle-track .ac-toggle-thumb {
  background: #0891b2;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ac-toggle-label {
  color: var(--text);
}

[data-theme="light"] .ac-path-card {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .ac-path-card:hover {
  border-color: rgba(8, 145, 178, 0.4);
  background: rgba(8, 145, 178, 0.04);
  box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.08), 0 0 12px rgba(8, 145, 178, 0.06);
}

[data-theme="light"] .ac-path-card:hover .ac-path-title {
  color: #065666;
}

[data-theme="light"] .ac-path-card:hover .ac-path-desc {
  color: var(--text-muted);
}

[data-theme="light"] .ac-segmented-control {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ac-segmented-control-button:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ac-segmented-control-button.active {
  background: rgba(8, 145, 178, 0.12);
  color: var(--tone-accent);
}

[data-theme="light"] .ac-segmented-control-dark {
  background: rgba(0, 0, 0, 0.04);
}

/* Modal and link overrides for light mode */
[data-theme="light"] .bg-modal {
  background: #ffffff;
}

[data-theme="light"] a[style*="color: rgba(99, 235, 255"] {
  color: #0e7490 !important;
}

[data-theme="light"] a[style*="color: rgba(99, 235, 255"]:hover {
  color: var(--text-bright) !important;
}

[data-theme="light"] .text-cyan-400 {
  color: #0e7490 !important;
}

[data-theme="light"] .text-blue-400 {
  color: #1d4ed8 !important;
}

[data-theme="light"] .text-indigo-300 {
  color: #4338ca !important;
}

[data-theme="light"] .text-purple-400 {
  color: #7e22ce !important;
}