/* i18n paint gate: js/i18n.js sets data-i18n-pending on <html> synchronously
   for non-English locales and removes it after translating the DOM. Hiding the
   translatable leaf text until then collapses the English→translated swap into
   a single paint (no flicker). visibility (not display) preserves layout so
   clearing the gate causes no reflow. */
:root[data-i18n-pending] [data-i18n] {
  visibility: hidden;
}

:root,
:root[data-theme="light"] {
  --color-bark-50: #2f2016;
  --color-bark-100: #3d2a1c;
  --color-bark-200: #4d3524;
  --color-bark-300: #6f4a2e;
  --color-bark-400: #8c5f38;
  --color-bark-500: #a67748;
  --color-bark-600: #b89064;
  --color-bark-700: #ccb08a;
  --color-bark-800: #e0cfb5;
  --color-bark-900: #f5ede3;
  --color-bark-950: #faf6f1;

  --color-wa-dark: #f5ede3;
  --color-wa-panel: #fefcf9;
  --color-wa-bubble: #d9fdd3;
  --color-wa-incoming: #efe4d5;
  --color-wa-input: #ffffff;

  --theme-nav-hover: rgba(61, 42, 28, 0.06);
  --theme-surface-soft: rgba(255, 255, 255, 0.85);
  --theme-overlay-strong: rgba(61, 42, 28, 0.28);
  --theme-overlay-soft: rgba(61, 42, 28, 0.2);
  --theme-panel-bg: #fefcf9;
  --theme-panel-border: rgba(224, 207, 181, 0.8);
  --theme-control-bg: #f5ede3;
  --theme-control-bg-hover: #efe4d5;
  --theme-control-border: rgba(224, 207, 181, 0.95);
  --theme-control-text: #3d2a1c;
  --theme-chat-bg: #f5ede3;
  --theme-chat-pattern-opacity: 0.08;
  --theme-react-bg: #ffffff;
  --theme-react-border: rgba(224, 207, 181, 0.95);
  --theme-react-text: #6f4a2e;
  --theme-react-shadow: rgba(61, 42, 28, 0.12);
  --theme-scrollbar-track: transparent;
  --theme-scrollbar-thumb: rgba(61, 42, 28, 0.18);
  --theme-scrollbar-thumb-hover: rgba(61, 42, 28, 0.32);
}

:root[data-theme="dark"] {
  --color-bark-50: #faf6f1;
  --color-bark-100: #f0e8db;
  --color-bark-200: #e0cfb5;
  --color-bark-300: #ccb08a;
  --color-bark-400: #b89064;
  --color-bark-500: #a67748;
  --color-bark-600: #8c5f38;
  --color-bark-700: #6f4a2e;
  --color-bark-800: #5a3d28;
  --color-bark-900: #3d2a1c;
  --color-bark-950: #221710;

  --color-wa-dark: #0b141a;
  --color-wa-panel: #111b21;
  --color-wa-bubble: #005c4b;
  --color-wa-incoming: #1f2c34;
  --color-wa-input: #2a3942;

  --theme-nav-hover: rgba(255, 255, 255, 0.05);
  --theme-surface-soft: rgba(34, 23, 16, 0.9);
  --theme-overlay-strong: rgba(11, 20, 26, 0.45);
  --theme-overlay-soft: rgba(11, 20, 26, 0.35);
  --theme-panel-bg: #3d2a1c;
  --theme-panel-border: rgba(90, 61, 40, 0.5);
  --theme-control-bg: rgba(34, 23, 16, 0.9);
  --theme-control-bg-hover: rgba(61, 42, 28, 0.92);
  --theme-control-border: rgba(90, 61, 40, 0.5);
  --theme-control-text: #f0e8db;
  --theme-chat-bg: #0b141a;
  --theme-chat-pattern-opacity: 0.02;
  --theme-react-bg: #202c33;
  --theme-react-border: rgba(255, 255, 255, 0.18);
  --theme-react-text: #aebac1;
  --theme-react-shadow: rgba(11, 20, 26, 0.7);
  --theme-scrollbar-track: transparent;
  --theme-scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --theme-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
}

.client-item:hover {
  background: var(--theme-nav-hover) !important;
}

.chat-bg {
  background-color: var(--theme-chat-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}

:root[data-theme="light"] .chat-bg {
  background-image: none !important;
}

/* Admin billing: Consultant credit notice — readable amber in both themes. It
   carries its own colour rather than a pale utility, so it still reads as a cost
   warning wherever it is placed. */
.consultant-credit-warning {
  color: #fcd34d;
}
:root[data-theme="light"] .consultant-credit-warning {
  color: #92400e;
}

.theme-toggle {
  position: fixed;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--theme-control-border);
  background: var(--theme-control-bg);
  color: var(--theme-control-text);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: background 0.15s ease;
}

.theme-toggle:hover {
  background: var(--theme-control-bg-hover);
}

.theme-toggle-icon {
  font-size: 0.8rem;
}

@media (max-width: 639px) {
  .theme-toggle {
    right: 0.65rem;
    bottom: 0.65rem;
    padding: 0.36rem 0.62rem;
  }
}

/* Sidebar-mounted variant: sits beside the mute toggle, so it drops the fixed
   positioning and matches that button's square icon shape. Sizing mirrors the
   `h-7 w-7` mute button in js/sidebar.js. */
.theme-toggle-inline {
  position: static;
  z-index: auto;
  flex: none;
  justify-content: center;
  height: 1.75rem;
  width: 1.75rem;
  padding: 0;
  gap: 0;
  border-radius: 0.5rem;
  backdrop-filter: none;
  /* The floating button inverts against the page (light chip on dark content);
     inside the sidebar that reads backwards, so track the sidebar surface the
     way the adjacent mute button does. */
  background: color-mix(in srgb, var(--color-bark-950) 60%, transparent);
  border-color: color-mix(in srgb, var(--color-bark-800) 40%, transparent);
  color: var(--color-bark-300);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.theme-toggle-inline:hover {
  background: color-mix(in srgb, var(--color-bark-950) 60%, transparent);
  border-color: var(--color-bark-700);
  color: var(--color-amber-400);
}

/* Support page: operator-state card shadow — soft in both themes */
:root[data-theme="dark"] .support-session-card {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}
:root[data-theme="light"] .support-session-card {
  box-shadow: 0 12px 32px rgba(61, 42, 28, 0.08);
}

/* Consultant session banner — follows the dashboard theme selection rather
   than the operating system color-scheme preference. */
#support-consultant-banner {
  border-color: rgba(246, 173, 85, 0.3);
  background: rgba(246, 173, 85, 0.05);
  color: var(--color-amber-400);
}
#support-consultant-mode-detail {
  opacity: 0.55;
}
#support-consultant-end-btn {
  opacity: 0.7;
}
#support-consultant-end-btn:hover {
  background: rgba(246, 173, 85, 0.1);
}
:root[data-theme="light"] #support-consultant-banner {
  border-color: rgba(154, 76, 0, 0.35);
  background: rgba(237, 137, 54, 0.1);
  color: #7c3f00;
}
:root[data-theme="light"] #support-consultant-mode-detail {
  opacity: 0.8;
}
:root[data-theme="light"] #support-consultant-end-btn {
  opacity: 0.9;
}
:root[data-theme="light"] #support-consultant-end-btn:hover {
  background: rgba(237, 137, 54, 0.15);
}

/* API app secret reveal warning — readable amber in both themes */
.api-app-secret-warning {
  color: #fbbf24;
}
:root[data-theme="light"] .api-app-secret-warning {
  color: #b45309;
}

/* Handbook: "+ Add" and "Remove" buttons on the links and team sections */
.handbook-add-btn {
  color: #fcd34d;
}
.handbook-add-btn:hover {
  color: #fde68a;
}
:root[data-theme="light"] .handbook-add-btn {
  color: #b45309;
}
:root[data-theme="light"] .handbook-add-btn:hover {
  color: #92400e;
}

.handbook-remove-btn {
  color: #fda4af;
}
.handbook-remove-btn:hover {
  color: #fecdd3;
}
:root[data-theme="light"] .handbook-remove-btn {
  color: #be123c;
}
:root[data-theme="light"] .handbook-remove-btn:hover {
  color: #9f1239;
}

/* Support page: active (post-impersonation) card — readable emerald in light mode */
:root[data-theme="light"] .support-active-card {
  border-color: rgba(5, 122, 85, 0.35);
  background: rgba(5, 122, 85, 0.08);
}
:root[data-theme="light"] .support-active-card .text-emerald-300\/80 {
  color: #057a55;
}
:root[data-theme="light"] .support-active-card .text-emerald-50,
:root[data-theme="light"] .support-active-card .text-emerald-100\/85 {
  color: #04543a;
}
:root[data-theme="light"] .support-active-card a,
:root[data-theme="light"] .support-active-card button {
  border-color: rgba(5, 122, 85, 0.35);
  color: #04543a;
}
:root[data-theme="light"] .support-active-card a:hover,
:root[data-theme="light"] .support-active-card button:hover {
  background: rgba(5, 122, 85, 0.12);
}

/* Post-connect "continue setup" banner — fixed bottom bar linking back to onboarding.html.
   Dark-first with a light override so the amber tint stays readable in both themes. */
.onboarding-continue-banner {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: rgba(120, 53, 15, 0.92);
  color: #fde68a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  font-size: 0.875rem;
}
.onboarding-continue-text {
  font-weight: 500;
}
.onboarding-continue-cta {
  font-weight: 600;
  color: #fbbf24;
  text-decoration: none;
  white-space: nowrap;
}
.onboarding-continue-cta:hover {
  color: #fcd34d;
  text-decoration: underline;
}
.onboarding-continue-dismiss {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.onboarding-continue-dismiss:hover {
  opacity: 1;
}
:root[data-theme="light"] .onboarding-continue-banner {
  border-color: rgba(180, 83, 9, 0.45);
  background: #fffbeb;
  color: #92400e;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
:root[data-theme="light"] .onboarding-continue-cta {
  color: #b45309;
}
:root[data-theme="light"] .onboarding-continue-cta:hover {
  color: #92400e;
}

/* Sidebar "finish onboarding" cue — readable amber on light tint */
:root[data-theme="light"] .onboarding-cue {
  border-color: rgba(180, 83, 9, 0.35);
  background: rgba(180, 83, 9, 0.08);
  color: #92400e;
}
:root[data-theme="light"] .onboarding-cue:hover {
  border-color: rgba(180, 83, 9, 0.6);
  background: rgba(180, 83, 9, 0.14);
}

/* Support page: header eyebrow + read-only notice — readable amber on light tint */
:root[data-theme="light"] .support-eyebrow {
  color: #b45309;
}
:root[data-theme="light"] .support-notice {
  border-color: rgba(180, 83, 9, 0.3);
  background: rgba(180, 83, 9, 0.08);
  color: #92400e;
}

/* Team access page: allow / deny / inherited cells, count chips, admin banner — readable on light tints */
:root[data-theme="light"] .access-cell-allow {
  color: #047857;
}
:root[data-theme="light"] .access-cell-deny {
  color: #b91c1c;
}
:root[data-theme="light"] .access-cell-inherited {
  color: rgba(4, 120, 87, 0.7);
}
:root[data-theme="light"] .access-link:hover {
  color: #b45309;
}
:root[data-theme="light"] .access-count-chip,
:root[data-theme="light"] .access-admin-banner {
  border-color: rgba(180, 83, 9, 0.3);
  background: rgba(180, 83, 9, 0.08);
  color: #92400e;
}

/* Support page: access-denied banner — readable red on light tint */
:root[data-theme="light"] .support-denied {
  border-color: rgba(190, 18, 60, 0.35);
  background: rgba(190, 18, 60, 0.08);
  color: #9f1239;
}
:root[data-theme="light"] .support-denied .text-red-100\/80 {
  color: #b42a4d;
}

/* Shared confirmation dialog and realtime connection status. */
.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(12 9 7 / 72%);
  backdrop-filter: blur(3px);
}
.confirm-dialog-overlay.hidden {
  display: none;
}
.confirm-dialog-card {
  width: min(100%, 28rem);
  border: 1px solid rgb(120 91 64 / 45%);
  border-radius: 0.875rem;
  background: #211b17;
  padding: 1.25rem;
  box-shadow: 0 24px 60px rgb(0 0 0 / 45%);
  color: #f7efe8;
}
.confirm-dialog-message {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: pre-line;
}
.confirm-dialog-detail {
  margin-top: 0.5rem;
  color: #b9a99c;
  font-size: 0.875rem;
  line-height: 1.5;
}
.confirm-dialog-detail.hidden {
  display: none;
}
.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.confirm-dialog-cancel,
.confirm-dialog-confirm {
  min-height: 2.5rem;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition:
    background-color 150ms,
    border-color 150ms;
}
.confirm-dialog-cancel {
  border: 1px solid rgb(120 91 64 / 55%);
  color: #e4d8cf;
}
.confirm-dialog-cancel:hover {
  background: rgb(120 91 64 / 20%);
}
.confirm-dialog-confirm {
  background: #f59e0b;
  color: #211507;
}
.confirm-dialog-confirm:hover {
  background: #fbbf24;
}
.confirm-dialog-confirm.is-danger {
  background: #dc2626;
  color: white;
}
.confirm-dialog-confirm.is-danger:hover {
  background: #ef4444;
}
.confirm-dialog-cancel:focus-visible,
.confirm-dialog-confirm:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}
.connection-degraded-indicator {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 49;
  max-width: calc(100vw - 2rem);
  border: 1px solid rgb(245 158 11 / 35%);
  border-radius: 9999px;
  background: rgb(61 43 27 / 95%);
  padding: 0.5rem 0.75rem;
  color: #fcd34d;
  font-size: 0.75rem;
  line-height: 1.25rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
}
.connection-degraded-indicator.hidden {
  display: none;
}
:root[data-theme="light"] .confirm-dialog-overlay {
  background: rgb(41 30 22 / 45%);
}
:root[data-theme="light"] .confirm-dialog-card {
  border-color: rgb(120 91 64 / 30%);
  background: #fffdf9;
  color: #35271f;
}
:root[data-theme="light"] .confirm-dialog-detail {
  color: #78685c;
}
:root[data-theme="light"] .confirm-dialog-cancel {
  border-color: rgb(120 91 64 / 35%);
  color: #55443a;
}
:root[data-theme="light"] .confirm-dialog-cancel:hover {
  background: #f4ede7;
}
:root[data-theme="light"] .connection-degraded-indicator {
  border-color: rgb(180 83 9 / 30%);
  background: #fff7e6;
  color: #92400e;
}

@media (max-width: 400px) {
  .confirm-dialog-actions {
    flex-direction: column-reverse;
  }
  .confirm-dialog-cancel,
  .confirm-dialog-confirm {
    width: 100%;
  }
}

/* Phase off-graph override warning — danger rose, readable in both themes */
.phase-override-danger {
  color: #fda4af;
}
:root[data-theme="light"] .phase-override-danger {
  border-color: rgba(190, 18, 60, 0.4);
  background: rgba(190, 18, 60, 0.08);
  color: #9f1239;
}

/* Sidebar impersonation banner — readable amber in light mode */
:root[data-theme="light"] .sidebar-impersonation-label {
  color: #9a4c00;
}
:root[data-theme="light"] .sidebar-impersonation-text,
:root[data-theme="light"] .sidebar-impersonation-btn {
  color: #7c3f00;
}
/* amber-400 initials wash out on the pale tint under the light theme. */
:root[data-theme="light"] .sidebar-avatar {
  background-color: rgba(154, 76, 0, 0.12);
  color: #7c3f00;
}
:root[data-theme="light"] .sidebar-impersonation-btn {
  border-color: rgba(154, 76, 0, 0.35);
}
:root[data-theme="light"] .sidebar-impersonation-btn:hover {
  background: rgba(237, 137, 54, 0.18);
}

/* Router escalation WhatsApp status warning — readable amber in light mode */
:root[data-theme="light"] .router-escalation-warning-text {
  color: #7c3f00;
}

/* Reset-context trigger — readable amber outline button in light mode */
:root[data-theme="light"] .reset-context-btn {
  color: #7c3f00;
  border-color: rgba(154, 76, 0, 0.35);
}
:root[data-theme="light"] .reset-context-btn:hover {
  color: #5a2d00;
  border-color: rgba(154, 76, 0, 0.5);
  background: rgba(237, 137, 54, 0.12);
}

/* Contact missing-name warning icon — readable amber in light mode */
:root[data-theme="light"] .client-name-warning {
  color: #9a4c00;
}

/* Account-health fault banner — readable amber in light mode */
:root[data-theme="light"] .account-health-banner {
  border-color: rgba(154, 76, 0, 0.35);
  background: rgba(237, 137, 54, 0.1);
  color: #7c3f00;
}
:root[data-theme="light"] .account-health-banner a {
  color: #7c3f00;
}
:root[data-theme="light"] .account-health-banner a:hover {
  color: #5a2d00;
}

/* Line setup: Meta connection disabled card — readable rose in light mode */
:root[data-theme="light"] .meta-disabled-card {
  border-color: rgba(190, 18, 60, 0.35);
  background: rgba(190, 18, 60, 0.08);
}
:root[data-theme="light"] .meta-disabled-card .text-rose-100,
:root[data-theme="light"] .meta-disabled-card .text-rose-100\/80 {
  color: #831843;
}
:root[data-theme="light"] .meta-disabled-card .text-rose-200\/70 {
  color: #9f1239;
}

/* Coexistence card: amber text on an amber tint goes near-invisible in light
   mode. Darken the amber tones the same way the meta-disabled card darkens its
   rose tones. */
:root[data-theme="light"] .coexistence-card {
  border-color: rgba(180, 83, 9, 0.3);
  background: rgba(245, 158, 11, 0.1);
}
:root[data-theme="light"] .coexistence-card .text-amber-100,
:root[data-theme="light"] .coexistence-card .text-amber-100\/70,
:root[data-theme="light"] .coexistence-card .text-amber-100\/80,
:root[data-theme="light"] .coexistence-card .text-amber-200 {
  color: #92400e;
}
:root[data-theme="light"] .coexistence-card .text-amber-200\/70 {
  color: #b45309;
}
/* The sync-status rows render pale emerald/red on a near-white bark-950 tint in
   light mode — darken to readable tones. */
:root[data-theme="light"] .coexistence-card .text-emerald-300 {
  color: #047857;
}
:root[data-theme="light"] .coexistence-card .text-red-300,
:root[data-theme="light"] .coexistence-card .text-red-100 {
  color: #b91c1c;
}

/* Phases page: chip colors per phase id, with both-mode legibility */
.phase-chip-onboarding {
  background: #38bdf8;
}
.phase-chip-active {
  background: #34d399;
}
.phase-chip-dormant {
  background: #fbbf24;
}
.phase-chip-churned {
  background: #f87171;
}
.phase-chip-default {
  background: #a78bfa;
}
.phase-chip-pending {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
:root[data-theme="light"] .phase-chip-onboarding {
  background: #0284c7;
}
:root[data-theme="light"] .phase-chip-active {
  background: #047857;
}
:root[data-theme="light"] .phase-chip-dormant {
  background: #b45309;
}
:root[data-theme="light"] .phase-chip-churned {
  background: #b91c1c;
}
:root[data-theme="light"] .phase-chip-default {
  background: #6d28d9;
}
:root[data-theme="light"] .phase-chip-pending {
  background: #b45309;
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.2);
}

/* Phases page: pending-request banner — readable amber in both modes */
.phase-pending-banner {
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
  color: #fde68a;
}
:root[data-theme="light"] .phase-pending-banner {
  border-color: rgba(180, 83, 9, 0.4);
  background: rgba(245, 158, 11, 0.12);
  color: #7c3f00;
}

/* Phases page: trigger-source badges in history timeline */
.phase-trigger-badge {
  border: 1px solid transparent;
}
.phase-trigger-webhook {
  background: rgba(56, 189, 248, 0.16);
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.3);
}
.phase-trigger-rule {
  background: rgba(167, 139, 250, 0.16);
  color: #ddd6fe;
  border-color: rgba(167, 139, 250, 0.3);
}
.phase-trigger-manual {
  background: rgba(52, 211, 153, 0.16);
  color: #a7f3d0;
  border-color: rgba(52, 211, 153, 0.3);
}
.phase-trigger-external {
  background: rgba(244, 114, 182, 0.16);
  color: #fbcfe8;
  border-color: rgba(244, 114, 182, 0.3);
}
.phase-trigger-model-approved {
  background: rgba(245, 158, 11, 0.16);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.3);
}
.phase-trigger-manual_override {
  background: rgba(190, 18, 60, 0.16);
  color: #fda4af;
  border-color: rgba(190, 18, 60, 0.35);
}
.phase-trigger-default {
  background: rgba(140, 95, 56, 0.16);
  color: #ccb08a;
  border-color: rgba(140, 95, 56, 0.3);
}
:root[data-theme="light"] .phase-trigger-webhook {
  background: rgba(2, 132, 199, 0.12);
  color: #075985;
  border-color: rgba(2, 132, 199, 0.3);
}
:root[data-theme="light"] .phase-trigger-rule {
  background: rgba(109, 40, 217, 0.1);
  color: #4c1d95;
  border-color: rgba(109, 40, 217, 0.3);
}
:root[data-theme="light"] .phase-trigger-manual {
  background: rgba(4, 120, 87, 0.1);
  color: #04543a;
  border-color: rgba(4, 120, 87, 0.3);
}
:root[data-theme="light"] .phase-trigger-external {
  background: rgba(190, 24, 93, 0.1);
  color: #831843;
  border-color: rgba(190, 24, 93, 0.3);
}
:root[data-theme="light"] .phase-trigger-model-approved {
  background: rgba(180, 83, 9, 0.1);
  color: #7c3f00;
  border-color: rgba(180, 83, 9, 0.35);
}
:root[data-theme="light"] .phase-trigger-manual_override {
  background: rgba(190, 18, 60, 0.1);
  color: #9f1239;
  border-color: rgba(190, 18, 60, 0.35);
}
:root[data-theme="light"] .phase-trigger-default {
  background: rgba(140, 95, 56, 0.1);
  color: #5a3d28;
  border-color: rgba(140, 95, 56, 0.3);
}

/* Admin Phases tab: active phase-detail sub-tab — readable accent in light mode */
:root[data-theme="light"] .phases-admin-subtab-active {
  color: #1c140d;
  border-color: #b45309;
}

/* Admin Phases tab: amber accents (action links, dirty marker, initial badge,
   active segmented-toggle button) and destructive rose buttons — readable in light mode */
:root[data-theme="light"] .phases-admin-action {
  color: #9a4c00;
}
:root[data-theme="light"] .phases-admin-action:hover {
  color: #7c3f00;
}
:root[data-theme="light"] .phases-admin-dirty {
  color: #7c3f00;
}
:root[data-theme="light"] .phases-admin-initial-badge {
  background: rgba(180, 83, 9, 0.12);
  color: #7c3f00;
  border-color: rgba(180, 83, 9, 0.4);
}
:root[data-theme="light"] .phases-admin-toggle-active {
  background: rgba(180, 83, 9, 0.18);
  color: #7c3f00;
}
:root[data-theme="light"] .phases-admin-destructive {
  color: #9f1239;
  border-color: rgba(190, 18, 60, 0.4);
}
:root[data-theme="light"] .phases-admin-destructive:hover {
  color: #831843;
  background: rgba(190, 18, 60, 0.08);
}
:root[data-theme="light"] .phases-admin-edge-remove {
  color: #9f1239;
}
:root[data-theme="light"] .phases-admin-edge-remove:hover {
  color: #831843;
}

/* Phase editor surfaces use semantic colors so their dark-theme bark tones do
   not wash out against the light admin panel. */
:root[data-theme="light"] .phase-editor-title,
:root[data-theme="light"] .phase-prompt-textarea {
  color: #2f2117;
}
:root[data-theme="light"] .phase-editor-description {
  color: #76593f;
}
:root[data-theme="light"] .phase-examples-empty-title {
  color: #62482f;
}
:root[data-theme="light"] .phase-editor-kicker,
:root[data-theme="light"] .phase-examples-empty-icon {
  color: #9a4c00;
  background: rgba(180, 83, 9, 0.09);
  border-color: rgba(180, 83, 9, 0.22);
}

/* Phases page: confirm dialog primary button (default + destructive) */
.phase-confirm-btn {
  background: #f59e0b;
  color: #1f1206;
}
.phase-confirm-btn:hover {
  background: #fbbf24;
}
.phase-confirm-btn.phase-confirm-destructive {
  background: #dc2626;
  color: #fff;
}
.phase-confirm-btn.phase-confirm-destructive:hover {
  background: #ef4444;
}
:root[data-theme="light"] .phase-confirm-btn {
  background: #b45309;
  color: #fff;
}
:root[data-theme="light"] .phase-confirm-btn:hover {
  background: #92400e;
}
:root[data-theme="light"] .phase-confirm-btn.phase-confirm-destructive {
  background: #b91c1c;
}
:root[data-theme="light"] .phase-confirm-btn.phase-confirm-destructive:hover {
  background: #991b1b;
}

/* Scrollbar theming */
* {
  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}

/* Template variable tokens. Three semantic colors so authors can tell at a glance
   which {{vars}} Yapper auto-resolves (cyan), which the sender must supply
   (amber, "custom.*"), and which are unrecognized free-form (rose). The same
   shape is reused in three surfaces: the variable palette, the textarea
   highlight overlay, and the sample-fields legend. */
.template-var-token {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.1;
  border: 1px solid transparent;
  white-space: nowrap;
}
.template-var-token--auto {
  background: rgba(34, 211, 238, 0.12);
  color: #67e8f9;
  border-color: rgba(34, 211, 238, 0.35);
}
.template-var-token--custom {
  background: rgba(251, 191, 36, 0.12);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.35);
}
.template-var-token--unknown {
  background: rgba(244, 63, 94, 0.1);
  color: #fda4af;
  border-color: rgba(244, 63, 94, 0.32);
}
:root[data-theme="light"] .template-var-token--auto {
  background: rgba(8, 145, 178, 0.12);
  color: #0e7490;
  border-color: rgba(8, 145, 178, 0.4);
}
:root[data-theme="light"] .template-var-token--custom {
  background: rgba(180, 83, 9, 0.1);
  color: #92400e;
  border-color: rgba(180, 83, 9, 0.4);
}
:root[data-theme="light"] .template-var-token--unknown {
  background: rgba(190, 18, 60, 0.08);
  color: #9f1239;
  border-color: rgba(190, 18, 60, 0.4);
}

/* Back-compat alias: pre-existing .template-auto-var rendered the auto pill. */
.template-auto-var {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(34, 211, 238, 0.12);
  color: #67e8f9;
  border: 1px solid rgba(34, 211, 238, 0.35);
}
:root[data-theme="light"] .template-auto-var {
  background: rgba(8, 145, 178, 0.12);
  color: #0e7490;
  border-color: rgba(8, 145, 178, 0.4);
}

/* Variable palette: clickable chips that insert {{var}} at cursor. */
.template-var-chip {
  cursor: pointer;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background-color 0.12s ease;
}
.template-var-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.template-var-chip:active {
  transform: translateY(0);
}
.template-var-chip:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Template body editor: a contentEditable div that renders {{vars}} as
   inline pill spans alongside normal editable text. */
.template-body-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0;
  padding: 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(80, 80, 80, 0.4);
  background: rgba(10, 10, 10, 0.45);
  color: #f0e8db;
  caret-color: #fde68a;
  min-height: 8rem;
  max-height: 24rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: normal;
  overflow-wrap: break-word;
  tab-size: 4;
  outline: none;
}
.template-body-input:focus {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.18);
}
.template-body-input:empty::before {
  content: attr(data-placeholder);
  color: rgba(204, 176, 138, 0.55);
  pointer-events: none;
}
:root[data-theme="light"] .template-body-input {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(120, 113, 108, 0.5);
  color: #3d2a1c;
  caret-color: #b45309;
}
:root[data-theme="light"] .template-body-input:focus {
  border-color: rgba(180, 83, 9, 0.6);
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.18);
}
:root[data-theme="light"] .template-body-input:empty::before {
  color: rgba(111, 74, 46, 0.5);
}
.template-body-input .var-pill {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  margin: 0 1px;
  border-radius: 9999px;
  font-weight: 600;
  border: 1px solid transparent;
  vertical-align: baseline;
  user-select: all;
}
.template-body-input .var-pill--auto {
  background: rgba(34, 211, 238, 0.18);
  color: #67e8f9;
  border-color: rgba(34, 211, 238, 0.5);
}
.template-body-input .var-pill--custom {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.5);
}
.template-body-input .var-pill--unknown {
  background: rgba(244, 63, 94, 0.15);
  color: #fda4af;
  border-color: rgba(244, 63, 94, 0.45);
}
:root[data-theme="light"] .template-body-input .var-pill--auto {
  background: rgba(8, 145, 178, 0.16);
  color: #0e7490;
  border-color: rgba(8, 145, 178, 0.5);
}
:root[data-theme="light"] .template-body-input .var-pill--custom {
  background: rgba(180, 83, 9, 0.14);
  color: #92400e;
  border-color: rgba(180, 83, 9, 0.5);
}
:root[data-theme="light"] .template-body-input .var-pill--unknown {
  background: rgba(190, 18, 60, 0.12);
  color: #9f1239;
  border-color: rgba(190, 18, 60, 0.5);
}

/* Phase graph: SVG + HTML node renderer (phases.html, admin > phases) */
.phase-graph {
  border: 1px solid rgba(82, 73, 60, 0.5);
  background: rgba(28, 25, 22, 0.4);
  border-radius: 1rem;
  padding: 0.5rem;
  overflow: auto;
  max-height: 44rem;
}
:root[data-theme="light"] .phase-graph {
  border-color: rgba(120, 113, 100, 0.35);
  background: rgba(250, 250, 249, 0.8);
}
.phase-graph-canvas {
  position: relative;
}
.phase-graph-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.phase-graph-edge {
  fill: none;
  stroke: rgba(168, 162, 158, 0.45);
  stroke-width: 1.5;
}
.phase-graph-edge.is-back {
  stroke: rgba(245, 158, 11, 0.55);
  stroke-dasharray: 4 3;
}
.phase-graph-edge.is-sibling {
  stroke: rgba(168, 162, 158, 0.55);
  stroke-dasharray: 3 3;
}
.phase-graph-edge.is-self {
  stroke: rgba(168, 162, 158, 0.55);
}
.phase-graph-arrow-head {
  fill: rgba(168, 162, 158, 0.7);
}
:root[data-theme="light"] .phase-graph-edge {
  stroke: rgba(87, 83, 78, 0.55);
}
:root[data-theme="light"] .phase-graph-edge.is-back {
  stroke: rgba(180, 83, 9, 0.7);
}
:root[data-theme="light"] .phase-graph-arrow-head {
  fill: rgba(87, 83, 78, 0.85);
}

.phase-graph-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(82, 73, 60, 0.6);
  background: rgba(41, 37, 32, 0.95);
  color: #f5f5f4;
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 120ms ease,
    transform 120ms ease,
    background 120ms ease;
}
.phase-graph-node:hover {
  border-color: rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}
.phase-graph-node.is-selected {
  border-color: rgba(245, 158, 11, 0.85);
  background: rgba(245, 158, 11, 0.08);
}
.phase-graph-node.is-initial {
  box-shadow: inset 2px 0 0 0 rgba(245, 158, 11, 0.7);
}
:root[data-theme="light"] .phase-graph-node {
  border-color: rgba(120, 113, 100, 0.45);
  background: #ffffff;
  color: #1c1917;
}
:root[data-theme="light"] .phase-graph-node:hover {
  border-color: rgba(180, 83, 9, 0.55);
}
:root[data-theme="light"] .phase-graph-node.is-selected {
  border-color: rgba(180, 83, 9, 0.85);
  background: rgba(245, 158, 11, 0.12);
}
.phase-graph-node-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.phase-graph-node-dot-fallback {
  background: #a78bfa;
}
.phase-graph-node-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase-graph-node-count {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: #a8a29e;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background: rgba(82, 73, 60, 0.4);
}
:root[data-theme="light"] .phase-graph-node-count {
  color: #57534e;
  background: rgba(231, 229, 228, 0.9);
}
.phase-graph-node-initial {
  position: absolute;
  left: 0.5rem;
  top: -0.6rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 9999px;
  background: #3a2a14;
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.5);
  font-size: 0.625rem;
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
:root[data-theme="light"] .phase-graph-node-initial {
  background: #fde6c4;
  color: #7c3f00;
  border-color: rgba(180, 83, 9, 0.55);
}

.phase-graph-edge.is-to-draft {
  stroke-dasharray: 6 4;
  stroke: rgba(245, 158, 11, 0.7);
}
:root[data-theme="light"] .phase-graph-edge.is-to-draft {
  stroke: rgba(180, 83, 9, 0.75);
}

/* Rule-driven (time/inactivity) transitions: dashed amber, to read as
   automatic rather than an operator/CRM move. */
.phase-graph-edge.is-timed {
  stroke: rgba(245, 158, 11, 0.6);
  stroke-dasharray: 5 4;
}
:root[data-theme="light"] .phase-graph-edge.is-timed {
  stroke: rgba(180, 83, 9, 0.7);
}

.phase-graph-node.is-draft {
  opacity: 0.65;
  border-style: dashed !important;
}

.phase-graph-node-draft {
  position: absolute;
  right: 0.5rem;
  top: -0.6rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 9999px;
  background: #3a2a14;
  color: #fcd34d;
  border: 1px dashed rgba(245, 158, 11, 0.5);
  font-size: 0.625rem;
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
:root[data-theme="light"] .phase-graph-node-draft {
  background: #fde6c4;
  color: #7c3f00;
  border-color: rgba(180, 83, 9, 0.55);
}

.phase-graph-node-warn {
  position: absolute;
  right: 0.25rem;
  bottom: -0.4rem;
  font-size: 0.75rem;
  color: #fcd34d;
}
:root[data-theme="light"] .phase-graph-node-warn {
  color: #b45309;
}

.phase-graph-node-noninteractive {
  position: absolute;
  left: 0.25rem;
  bottom: -0.4rem;
  font-size: 0.8rem;
  line-height: 1;
  color: #7dd3fc;
}
:root[data-theme="light"] .phase-graph-node-noninteractive {
  color: #0369a1;
}

/* Inbox: IG comment-origin chip on inbound bubbles — readable in light mode */
:root[data-theme="light"] .comment-origin-pill {
  color: #57534e;
  border-color: rgba(87, 83, 78, 0.3);
  background: rgba(87, 83, 78, 0.08);
}

/* Billing: prepaid-credit warning banner — readable in both themes.
   .error = balance exhausted (replies paused); .caution = below auto-recharge
   threshold. The base classes carry both bg + border + text so the box reads as a
   self-contained alert; the light overrides darken text/border against the page. */
.credit-warning-error {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
}
.credit-warning-caution {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
}
:root[data-theme="light"] .credit-warning-error {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.35);
  background: rgba(239, 68, 68, 0.08);
}
:root[data-theme="light"] .credit-warning-caution {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.35);
  background: rgba(245, 158, 11, 0.1);
}
/* Billing: per-cycle spend-limit bar. Three states on the same palette as the
   warning banner above it, so "approaching" and "reached" read the same on the bar
   as they do in the banner and the emails. Fill colors are solid rather than tinted
   — the bar is a thin shape on a muted track, where a 10% wash disappears. */
.credit-cap-bar-ok {
  background: #78716c;
}
.credit-cap-bar-caution {
  background: #f59e0b;
}
.credit-cap-bar-reached {
  background: #ef4444;
}
:root[data-theme="light"] .credit-cap-bar-ok {
  background: #a8a29e;
}
:root[data-theme="light"] .credit-cap-bar-caution {
  background: #d97706;
}
:root[data-theme="light"] .credit-cap-bar-reached {
  background: #dc2626;
}
/* "Your own key" mode badge on the credit panel. Informational, not a warning —
   deliberately cool/neutral so it never reads as a problem state next to the
   amber/red warning band directly above it. */
.credit-byo-badge {
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.16);
}
:root[data-theme="light"] .credit-byo-badge {
  color: #0369a1;
  background: rgba(14, 165, 233, 0.12);
}

/* Billing status dot. Carries the subscription state at a glance beside the
   status text; the state is still spelled out in adjacent text and in the
   screen-reader badge, so colour is never the only channel. */
.billing-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
  background: #78716c;
}
.billing-dot-active {
  background: #34d399;
}
.billing-dot-pending {
  background: #fbbf24;
}
.billing-dot-inactive {
  background: #a8a29e;
}
:root[data-theme="light"] .billing-dot-active {
  background: #059669;
}
:root[data-theme="light"] .billing-dot-pending {
  background: #d97706;
}
:root[data-theme="light"] .billing-dot-inactive {
  background: #78716c;
}

/* Billing overflow menu. Opaque surface — it overlays the money panels below,
   and a translucent one would let two dollar figures show through the actions
   that change them. */
.billing-menu {
  background: #1c1917;
}
:root[data-theme="light"] .billing-menu {
  background: #fffdf9;
  border-color: rgba(120, 113, 108, 0.25);
  box-shadow: 0 8px 24px rgba(41, 37, 36, 0.12);
}
.billing-menu-item-danger {
  color: #fca5a5;
}
:root[data-theme="light"] .billing-menu-item {
  color: #44403c;
}
/* After the generic light-mode item colour, not before it: both selectors carry
   the same specificity, so source order is the only thing that keeps Delete
   Account reading as destructive rather than as an ordinary menu entry. */
:root[data-theme="light"] .billing-menu-item-danger {
  color: #b91c1c;
}
:root[data-theme="light"] .billing-menu-item:hover,
:root[data-theme="light"] .billing-menu label:hover {
  background: rgba(120, 113, 108, 0.1);
}

/* The auto-recharge band's inline edit affordance. A link needs to read as one
   in both themes, and the pale amber it would otherwise borrow washes out
   against the light panel. */
.credit-band-edit {
  color: #d97706;
}
:root[data-theme="light"] .credit-band-edit {
  color: #b45309;
}

/* Ledger credits. `text-emerald-300` washes out on the light page, so the
   positive delta gets a semantic class with a per-theme value instead. */
.credit-delta-positive {
  color: #6ee7b7;
}
:root[data-theme="light"] .credit-delta-positive {
  color: #047857;
}

/* Folded ledger group: a real disclosure button, so it needs a focus ring and
   a hover affordance that a plain row does not. */
.credit-group-toggle:hover .credit-group-caret {
  color: #d6d3d1;
}
:root[data-theme="light"] .credit-group-toggle:hover .credit-group-caret {
  color: #57534e;
}

/* Magnitude bar behind a ledger leaf's amount. Deliberately quiet — it exists to
   make one outlier findable in a column of near-identical figures, not to be read
   as a value of its own; the exact number sits right beside it. Fixed width so
   every bar in a group shares a baseline and their lengths stay comparable. */
.credit-bar {
  display: inline-block;
  width: 2.5rem;
  height: 3px;
  border-radius: 9999px;
  background: #292524;
  overflow: hidden;
}
.credit-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #a8a29e;
}
:root[data-theme="light"] .credit-bar {
  background: #e7e5e4;
}
:root[data-theme="light"] .credit-bar-fill {
  background: #78716c;
}