/* Modern light/dark theme for SLWE */

/* ------------------------------------------------------------- */
/* Global semantic action button fallbacks                       */
/* These provide defaults so themes only override what they need */
/* ------------------------------------------------------------- */
:root {
  --btn-play-bg: var(--primary);
  --btn-play-bg-hover: var(--btn-play-bg);
  --btn-play-fg: var(--primary-contrast, #ffffff);
  /* Send button semantic tokens */
  --btn-send-bg: var(--primary);
  --btn-send-bg-hover: var(--btn-send-bg);
  --btn-send-fg: var(--primary-contrast, #ffffff);
  /* New: Stop button semantic tokens */
  --btn-stop-bg: var(--primary);
  --btn-stop-bg-hover: var(--btn-stop-bg);
  --btn-stop-fg: var(--primary-contrast, #ffffff);
  --btn-delete-bg: var(--danger, #dc2626);
  --btn-delete-bg-hover: var(--btn-delete-bg);
  --btn-delete-fg: var(--primary-contrast, #ffffff);
  --btn-reply-bg: var(--primary);
  --btn-reply-bg-hover: var(--btn-reply-bg);
  --btn-reply-fg: var(--primary-contrast, #ffffff);
  --btn-forward-bg: var(--primary);
  --btn-forward-bg-hover: var(--btn-forward-bg);
  --btn-forward-fg: var(--primary-contrast, #ffffff);
  /* New: Attachment button semantic tokens */
  --btn-attachment-bg: var(--primary);
  --btn-attachment-bg-hover: var(--btn-attachment-bg);
  --btn-attachment-fg: var(--primary-contrast, #ffffff);
  --focus-ring: #276fa3;
  /* Read row background (light-theme default) */
  --read-row-bg: rgba(0, 0, 0, 0.02);
  /* Read row left bar should match the read row border */
  --read-row-bar: var(--read-row-border, #9ca3af);
  /* New: Accessible cues for read state */
  --read-stripe: #2d7d46; /* green stripe for read */
  --read-badge-bg: #e6f4ea;    /* light green plate */
  --read-badge-fg: #1f5132;    /* dark green text */
  --read-badge-border: #b7e0c2;/* subtle border */
  --read-row-border: #cbd5e1;  /* read-row border color (light grey) */
  --read-row-border-hover: #9ca3af; /* read-row hover border (darker grey) */
  /* New: Slightly muted text color for read (non-selected) rows */
  --read-row-fg: #1f2937; /* very dark grey vs black */
  /* Default read-status tokens (can be overridden per-theme) */
  --read-status-fill: #2ECC71;   /* green fill for read */
  --read-status-stroke: #4c5d69; /* dark grey border for both states */
  /* New: Unread-only check color (very subtle) */
  --read-status-unread: #f7fafc; /* ultra-light grey for unread check */

  /* Toolbar (left menu) accent – keep separate from global --primary */
  --toolbar-accent: var(--primary, #3b7fb3);
  --toolbar-accent-hover: var(--toolbar-accent);
  --toolbar-accent-contrast: var(--primary-contrast, #ffffff);

  /* Inbox header message pill (flash-like) category colors */
  --header-msg-success-border: #10b981;
  --header-msg-success-bg: rgba(16,185,129,.12);
  --header-msg-success-fg: #065f46;
  --header-msg-info-border: #3b82f6;
  --header-msg-info-bg: rgba(59,130,246,.12);
  --header-msg-info-fg: #1e3a8a;
  --header-msg-warning-border: #f59e0b;
  --header-msg-warning-bg: rgba(251,191,36,.18);
  --header-msg-warning-fg: #92400e;
  --header-msg-error-border: #ef4444;
  --header-msg-error-bg: rgba(239,68,68,.15);
  --header-msg-error-fg: #7f1d1d;

  /* Layout-only divider between header and content (no button impact) */
  --layout-accent: var(--primary, #3b7fb3);
  --section-divider-h: 3px;
  --section-divider-start: color-mix(in srgb, var(--layout-accent) 50%, var(--bg, #ffffff) 50%);
  --section-divider-mid: rgba(0,0,0,0.10);
  --section-divider-end: color-mix(in srgb, var(--layout-accent) 10%, var(--bg, #ffffff) 90%);
}

@keyframes get-mail-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--get-mail-pulse-glow, transparent);
  }
  35% {
    transform: scale(1.03);
    box-shadow: 0 0 0 3px var(--get-mail-pulse-glow-soft, var(--get-mail-pulse-glow, transparent));
  }
  55% {
    transform: scale(1.06);
    box-shadow: 0 0 0 6px var(--get-mail-pulse-glow-strong, var(--get-mail-pulse-glow-soft, var(--get-mail-pulse-glow, transparent)));
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--get-mail-pulse-glow, transparent);
  }
}

/* ------------------------------------------------------------- */
/* New Default Theme: Coastal Light (modern earth blues)          */
/* ------------------------------------------------------------- */
.theme-coastal-light {
  /* Layout/background palette derived from logo teal (#0d8b85) + neutrals */
  /* Option B: more contrast, more layered (sidebar matches body) */
  --bg: #fcfefe;
  --fg: #0f1d29;
  --panel: #ffffff;
  --sidebar-bg: var(--bg);
  --header-bg: #e9f1f0;
  --border: #c3d6d3;
  /* Read row cues: keep them neutral grey (not teal) */
  --read-row-border: #cbd5e1;
  --read-row-border-hover: #9ca3af;
  --read-row-bar: var(--read-row-border);
  /* Divider accent derived from logo teal (layout-only) */
  --layout-accent: #0d8b85;

  /* Left inbox toolbar (Get Mail / New Message / Sent Mail) uses teal */
  --toolbar-accent: var(--layout-accent);
  --toolbar-accent-hover: color-mix(in srgb, var(--layout-accent) 90%, #ffffff 10%);
  --toolbar-accent-contrast: #ffffff;

  /* Header message pill colors: harmonize with teal header background */
  --header-msg-success-border: var(--layout-accent);
  --header-msg-success-bg: color-mix(in srgb, var(--header-bg) 86%, var(--layout-accent) 14%);
  --header-msg-success-fg: color-mix(in srgb, var(--fg) 82%, var(--layout-accent) 18%);

  /* Info messages are used heavily for button-talk guidance; keep them teal in Coastal Light */
  --header-msg-info-border: var(--layout-accent);
  --header-msg-info-bg: color-mix(in srgb, var(--header-bg) 86%, var(--layout-accent) 14%);
  --header-msg-info-fg: color-mix(in srgb, var(--fg) 86%, var(--layout-accent) 14%);

  /* Keep warnings amber regardless of Forward button color */
  --header-msg-warning-border: #b45309;
  --header-msg-warning-bg: color-mix(in srgb, var(--header-bg) 86%, #b45309 14%);
  --header-msg-warning-fg: color-mix(in srgb, var(--fg) 86%, #b45309 14%);

  --header-msg-error-border: var(--danger, #ef4444);
  --header-msg-error-bg: color-mix(in srgb, var(--header-bg) 86%, var(--danger, #ef4444) 14%);
  --header-msg-error-fg: color-mix(in srgb, var(--fg) 86%, var(--danger, #ef4444) 14%);
  /* Divider tuning: clear border with subtle vertical fade */
  /* Border blends the top (header) into the bottom (body) */
  --section-divider-start: color-mix(in srgb, var(--layout-accent) 42%, var(--header-bg) 58%);
  --section-divider-mid: color-mix(in srgb, var(--layout-accent) 68%, var(--header-bg) 32%);
  --section-divider-end: color-mix(in srgb, var(--layout-accent) 34%, var(--bg) 66%);
  --primary: #3b7fb3;
  --primary-hover: #346f9d;
  --primary-contrast: #ffffff;
  --muted: #4c5d69;
  --input-bg: #ffffff;
  --input-border: #c7d2da;
  --input-fg: #0f1d29;
  --button-bg: #3b7fb3;
  --button-fg: #ffffff;
  --button-border: #3b7fb3;
  --danger: #c53030;
  --danger-bg: #fde8e8;
  /* Read-status check tokens (coastal light overrides) */
  --read-status-fill: #219e54;   /* tuned mid green to match action-button visual weight */
  --read-status-stroke: #3F4B57; /* slate outline (was near-black) */
  /* Unread light grey (keep read ring unchanged) */
  --read-status-unread: #f7fafc;
  /* Semantic buttons */
  --btn-play-bg: var(--read-status-fill);
  --btn-play-bg-hover: var(--read-status-fill);
  --btn-play-fg: #ffffff;
  /* Stop uses a distinct green shade (slightly more teal/darker) */
  --btn-stop-bg: #2c7a6b;
  --btn-stop-bg-hover: #256358;
  --btn-stop-fg: #ffffff;
  --btn-delete-bg: #b91c1c;
  --btn-delete-bg-hover: #991b1b;
  --btn-delete-fg: #ffffff;
  /* Reply: warmer orange test */
  --btn-reply-bg: #d97a14;
  --btn-reply-bg-hover: #bd6a11;
  --btn-reply-fg: #ffffff;

  /* Saved (liked) Reply blue */
  --btn-reply-blue-saved-bg: var(--primary);
  --btn-reply-blue-saved-bg-hover: var(--primary-hover, var(--primary));
  --btn-reply-blue-saved-fg: var(--primary-contrast, #ffffff);
  /* Forward: teal-blue bridge secondary */
  --btn-forward-bg: #2d7fa8;
  --btn-forward-bg-hover: #256b8e;
  --btn-forward-fg: #ffffff;
  /* Forward-compatible token for delete icon dark body (not applied in external sprite due to <use> limitations) */
  --icon-delete-body-color: #313131;
  /* Cancel button (distinct red, softer than delete) */
  --btn-cancel-bg: #ef4444; /* red-500 */
  --btn-cancel-bg-hover: #dc2626; /* red-600 */
  --btn-cancel-fg: #ffffff;
  /* Send button */
  --btn-send-bg: #22c55e; /* green-500 */
  --btn-send-bg-hover: #16a34a; /* green-600 */
  --btn-send-fg: #ffffff;
  /* Attachment: orchid-violet */
  --btn-attachment-bg: #8a4c86;
  --btn-attachment-bg-hover: #743f70;
  --btn-attachment-fg: #ffffff;
  --focus-ring: #276fa3;
  /* Selection highlight: teal-tinted to match Coastal Light */
  --selection-bg-solid: color-mix(in srgb, var(--panel) 88%, var(--layout-accent) 12%);
  --selection-fg: var(--fg);
  --selection-border: var(--layout-accent);
}


/* ------------------------------------------------------------------ */
/* Global text color stabilization & variable aliases                 */
/* Some components referenced --text / --text-muted which were unset. */
/* Provide stable aliases and ensure body/base color always tracks fg */
/* without being overridden by dynamically injected partial styles.   */
/* ------------------------------------------------------------------ */
body { color: var(--fg); }
:root { --text: var(--fg); --text-muted: var(--muted, var(--fg)); }

/* Read row background tints for dark themes */
.theme-cyborg,
.theme-darkly,
.theme-solar,
.theme-superhero,
.theme-blue-earthy,
.theme-slate,
.theme-deep-slate,
.theme-ocean-breeze,
.theme-vapor {
  --read-row-bg: rgba(255, 255, 255, 0.04);
  --read-stripe: #5ee3a8; /* brighter mint stripe */
  --read-badge-bg: rgba(94, 227, 168, 0.18);
  --read-badge-fg: #a7f3d0;
  --read-badge-border: rgba(94, 227, 168, 0.35);
  --read-row-border: #94a3b8;
  --read-row-fg: #d1d5db; /* light grey vs pure white for dark themes */
}

/* High-contrast variants: slightly lifted black */
.theme-high-contrast,
.theme-neon-contrast {
  --read-row-bg: #101010;
}

/* Sidebar (container 1) explicit theme foreground; avoid descendant blanket inheritance */
.inbox-left-container { color: var(--fg); }
.inbox-header, .inbox-header .page-title { color: var(--fg); }
.inbox-left-container .inbox-action-unit { color: var(--fg); }

/* Preferences page: match inbox header + teal tabs in Coastal Light */
.theme-coastal-light .prefs-top {
  background: var(--header-bg, var(--bg));
  border-bottom: 0;
}

/* Preferences shell layout: full-width top + bottom (no side gutters) */
.prefs-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.prefs-top {
  /* Keep header background full-bleed; inner gutter is handled by .prefs-header-row */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Preferences close button: positioning handled by header grid */

#tab-content {
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  /* Inner gutter so tab contents don't touch screen edge */
  padding-left: var(--prefs-page-pad, 16px) !important;
  padding-right: var(--prefs-page-pad, 16px) !important;
  background: var(--bg) !important;
}

/* Options tab: remove outer gutter margins so the content spans full width */
.prefs-container .options-panel-scroll {
  margin: 0 !important;
}

/* Preferences content: make legacy --primary-driven UI teal within Preferences only */
.theme-coastal-light .prefs-container {
  --primary: var(--layout-accent);
  --primary-hover: #0b776f;
  --primary-contrast: #ffffff;
  --button-bg: var(--layout-accent);
  --button-border: var(--layout-accent);
  --focus-ring: var(--layout-accent);
}

.theme-coastal-light .prefs-container .prefs-close-btn:hover { color: var(--layout-accent); }
.theme-coastal-light .prefs-container .prefs-close-btn:focus-visible { outline-color: var(--layout-accent); }

.theme-coastal-light .prefs-tab-bar .nav-link:hover { border-color: var(--layout-accent) var(--layout-accent) transparent; }
.theme-coastal-light .prefs-tab-bar .nav-link:focus { outline-color: var(--layout-accent); }
.theme-coastal-light .prefs-tab-bar .nav-link.active {
  color: var(--layout-accent) !important;
  border-color: var(--border) var(--border) var(--bg) !important;
}


/* Forest Green – soft green background, dark green text, earthy accents */
.theme-forest-green { /* Removed .theme-evergreen */
  --bg: #e8f5e9;        /* light green */
  --fg: #000000;        /* black on white panel */
  --panel: #ffffff;
  --sidebar-bg: #e1efe2;
  --header-bg: #d8ead9;
  --border: #c8e6c9;
  --primary: #2f855a;   /* green accent */
  --primary-contrast: #ffffff;
  --muted: #000000;
  --input-bg: #ffffff;
  --input-border: #a5d6a7;
  --input-fg: #000000;
  --button-bg: #2f855a;
  --button-fg: #ffffff;
  --button-border: #2f855a;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --selection-bg-solid: #d8ead9; /* header tone */
  --selection-fg: #000000;
  --selection-border: #2f855a;
}

/* Mono Gray – light gray background, dark gray text, no bright colors */
.theme-mono-gray { /* Removed .theme-mono-focus */
  --bg: #f3f4f6;
  --fg: #000000;
  --panel: #ffffff;
  --sidebar-bg: #ebedef;
  --header-bg: #e2e5e7;
  --border: #d1d5db;
  --primary: #374151;   /* muted dark gray */
  --primary-contrast: #ffffff;
  --muted: #000000;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-fg: #000000;
  --button-bg: #374151;
  --button-fg: #ffffff;
  --button-border: #374151;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --selection-bg-solid: #e2e5e7; /* header tone */
  --selection-fg: #000000;
  --selection-border: #374151;
}

/* ===== ttkbootstrap-inspired themes (accessible mappings) ===== */
/* Fully specified per-theme variables for consistency and no preprocessor required */
/* Light variants (distinct backgrounds/panels/borders for variety) */
.theme-cosmo { --bg:#f8f9fb; --fg:#000000; --panel:#ffffff; --border:#dfe3ea; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#ccd3dc; --input-fg:#000000; --danger:#dc2626; --danger-bg:#fee2e2; --primary:#2780e3; --button-bg:#2780e3; --button-fg:#ffffff; --button-border:#2780e3; --selection-bg-solid:#e8ecf2; --selection-fg:#000000; --selection-border:#2780e3; }
.theme-cosmo { --sidebar-bg:#f1f3f6; --header-bg:#e8ecf2; }
.theme-flatly { --bg:#ecf7f4; --fg:#000000; --panel:#ffffff; --border:#cae9df; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#b8e1d6; --input-fg:#000000; --danger:#b91c1c; --danger-bg:#fde2e2; --primary:#18bc9c; --button-bg:#18bc9c; --button-fg:#ffffff; --button-border:#18bc9c; --selection-bg-solid:#d7ece6; --selection-fg:#000000; --selection-border:#18bc9c; } /* Removed .theme-smooth-teal */
.theme-flatly { --sidebar-bg:#e2f2ed; --header-bg:#d7ece6; }
.theme-journal { --bg:#fff7f7; --fg:#000000; --panel:#ffffff; --border:#f2c8c6; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#e8b0ad; --input-fg:#000000; --danger:#b91c1c; --danger-bg:#fde2e2; --primary:#eb6864; --button-bg:#eb6864; --button-fg:#ffffff; --button-border:#eb6864; --selection-bg-solid:#f8e1e1; --selection-fg:#000000; --selection-border:#eb6864; }
.theme-journal { --sidebar-bg:#fdeeee; --header-bg:#f8e1e1; }
.theme-litera, .theme-editorial-blue { --bg:#f2f6ff; --fg:#000000; --panel:#ffffff; --border:#cddbf7; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#b8c9f0; --input-fg:#000000; --danger:#b91c1c; --danger-bg:#fde2e2; --primary:#4582ec; --button-bg:#4582ec; --button-fg:#ffffff; --button-border:#4582ec; }
.theme-litera, .theme-editorial-blue { --sidebar-bg:#e7efff; --header-bg:#dce8ff; }
/* Added explicit selection for editorial-blue / litera (blue emphasis) */
.theme-litera, .theme-editorial-blue {
  --selection-bg-solid: #dce8ff; /* same as header for consistency */
  --selection-fg: #000000;
  --selection-border: #4582ec;
}
.theme-lumen { --bg:#f5fbff; --fg:#000000; --panel:#ffffff; --border:#cbe5f1; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#b6d8e7; --input-fg:#000000; --danger:#dc2626; --danger-bg:#fde2e2; --primary:#158cba; --button-bg:#158cba; --button-fg:#ffffff; --button-border:#158cba; --selection-bg-solid:#dbedf7; --selection-fg:#000000; --selection-border:#158cba; } /* Removed .theme-sky-daylight */
.theme-lumen { --sidebar-bg:#e9f5fc; --header-bg:#dbedf7; }
.theme-minty { --bg:#e8f5f0; --fg:#000000; --panel:#ffffff; --border:#c3e6d8; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#b6ded0; --input-fg:#000000; --danger:#b91c1c; --danger-bg:#fde2e2; --primary:#78c2ad; --button-bg:#78c2ad; --button-fg:#0b1412; --button-border:#78c2ad; --selection-bg-solid:#d4e8e3; --selection-fg:#000000; --selection-border:#78c2ad; } /* Removed .theme-mint-breeze */
.theme-minty { --sidebar-bg:#dff0ea; --header-bg:#d4e8e3; }
.theme-pulse { --bg:#f7f3ff; --fg:#000000; --panel:#ffffff; --border:#d9c9f5; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#cbb7f0; --input-fg:#000000; --danger:#b91c1c; --danger-bg:#fde2e2; --primary:#593196; --button-bg:#593196; --button-fg:#ffffff; --button-border:#593196; --selection-bg-solid:#e6dbff; --selection-fg:#000000; --selection-border:#593196; }
.theme-pulse { --sidebar-bg:#eee7ff; --header-bg:#e6dbff; }
.theme-sandstone { --bg:#f9f6f1; --fg:#000000; --panel:#ffffff; --border:#e5d9c8; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#dbcdb6; --input-fg:#000000; --danger:#b91c1c; --danger-bg:#fde2e2; --primary:#325d88; --button-bg:#325d88; --button-fg:#ffffff; --button-border:#325d88; --selection-bg-solid:#ebe2d7; --selection-fg:#000000; --selection-border:#325d88; } /* Removed .theme-soft-sand */
.theme-sandstone { --sidebar-bg:#f1ece3; --header-bg:#ebe2d7; }
.theme-united { --bg:#fff4ee; --fg:#000000; --panel:#ffffff; --border:#f4cbb8; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#edb89e; --input-fg:#000000; --danger:#b91c1c; --danger-bg:#fde2e2; --primary:#e95420; --button-bg:#e95420; --button-fg:#ffffff; --button-border:#e95420; --selection-bg-solid:#fddfd3; --selection-fg:#000000; --selection-border:#e95420; }
.theme-united { --sidebar-bg:#ffe9df; --header-bg:#fddfd3; }
.theme-yeti { --bg:#eef7fb; --fg:#000000; --panel:#ffffff; --border:#cfe3ef; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#c2d9e8; --input-fg:#000000; --danger:#b91c1c; --danger-bg:#fde2e2; --primary:#008cba; --button-bg:#008cba; --button-fg:#ffffff; --button-border:#008cba; --selection-bg-solid:#dcebf3; --selection-fg:#000000; --selection-border:#008cba; } /* Removed .theme-polar-ice */
.theme-yeti { --sidebar-bg:#e3f1f7; --header-bg:#dcebf3; }

/* Dark variants */
.theme-cyborg { --bg:#06090f; --fg:#ffffff; --panel:#0d1117; --border:#30363d; --primary-contrast:#ffffff; --muted:#8b949e; --input-bg:#0f141a; --input-border:#30363d; --input-fg:#f8fafc; --danger:#ef4444; --danger-bg:#3b1f1f; --primary:#2a9fd6; --button-bg:#2a9fd6; --button-fg:#ffffff; --button-border:#2a9fd6; } /* Removed .theme-circuit-dark */
.theme-cyborg { --sidebar-bg:#0a1017; --header-bg:#101823; }
.theme-darkly { --bg:#0e141b; --fg:#ffffff; --panel:#121a24; --border:#283445; --primary-contrast:#ffffff; --muted:#aab6c5; --input-bg:#131c26; --input-border:#283445; --input-fg:#f8fafc; --danger:#ef4444; --danger-bg:#3b1f1f; --primary:#375a7f; --button-bg:#375a7f; --button-fg:#ffffff; --button-border:#375a7f; } /* Removed .theme-ink-night */
.theme-darkly { --sidebar-bg:#15202b; --header-bg:#1b2b39; }
.theme-solar { --bg:#002b36; --fg:#eaeaea; --panel:#073642; --border:#0d3a46; --primary-contrast:#001219; --muted:#93a1a1; --input-bg:#093847; --input-border:#124454; --input-fg:#f1f5f9; --danger:#ef4444; --danger-bg:#3b1f1f; --primary:#b58900; --button-bg:#b58900; --button-fg:#001219; --button-border:#b58900; }
.theme-solar { --sidebar-bg:#0a3642; --header-bg:#0d4653; }
.theme-superhero { --bg:#0c1d2e; --fg:#ffffff; --panel:#0f2538; --border:#1f3b56; --primary-contrast:#ffffff; --muted:#a9bbcc; --input-bg:#112a40; --input-border:#1f3b56; --input-fg:#f8fafc; --danger:#ef4444; --danger-bg:#3b1f1f; --primary:#df691a; --button-bg:#df691a; --button-fg:#0b0e11; --button-border:#df691a; }
.theme-superhero { --sidebar-bg:#113049; --header-bg:#153755; }
/* Dark theme selection: explicit lighter tint for visibility */
.theme-cyborg {
  --selection-bg-solid: #16212e;
  --selection-fg: #ffffff;
  --selection-border: #2a9fd6;
}
.theme-darkly {
  --selection-bg-solid: #1a2938;
  --selection-fg: #ffffff;
  --selection-border: #375a7f;
}
.theme-solar {
  --selection-bg-solid: #0a4553;
  --selection-fg: #eaeaea;
  --selection-border: #b58900;
}
.theme-superhero {
  --selection-bg-solid: #15364d;
  --selection-fg: #ffffff;
  --selection-border: #df691a;
}
.theme-blue-earthy {
  --selection-bg-solid: #182640;
  --selection-fg: #f1f5f9;
  --selection-border: #60a5fa;
}
.theme-slate,
.theme-deep-slate {
  --selection-bg-solid: #1e2531;
  --selection-fg: #e5e7eb;
  --selection-border: #94a3b8;
}

/* Flat variants */
.theme-morph { --bg:#f4f6fb; --fg:#000000; --panel:#ffffff; --border:#dce3f7; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#c7d2f3; --input-fg:#000000; --danger:#dc2626; --danger-bg:#fee2e2; --primary:#5b8dee; --button-bg:#5b8dee; --button-fg:#ffffff; --button-border:#5b8dee; --selection-bg-solid:#e3ebf6; --selection-fg:#000000; --selection-border:#5b8dee; }
.theme-morph { --sidebar-bg:#edf1f9; --header-bg:#e3ebf6; }
.theme-simplex { --bg:#fbf3f2; --fg:#000000; --panel:#ffffff; --border:#f0c8c2; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#e9b9b3; --input-fg:#000000; --danger:#b91c1c; --danger-bg:#fde2e2; --primary:#d9230f; --button-bg:#d9230f; --button-fg:#ffffff; --button-border:#d9230f; --selection-bg-solid:#ecdeda; --selection-fg:#000000; --selection-border:#d9230f; } /* Removed .theme-barebones */
.theme-simplex { --sidebar-bg:#f4e9e8; --header-bg:#ecdeda; }
.theme-cerculean { --bg:#eef6fc; --fg:#000000; --panel:#ffffff; --border:#cae0f3; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#bdd6ef; --input-fg:#000000; --danger:#b91c1c; --danger-bg:#fde2e2; --primary:#2fa4e7; --button-bg:#2fa4e7; --button-fg:#ffffff; --button-border:#2fa4e7; --selection-bg-solid:#dbeaf7; --selection-fg:#000000; --selection-border:#2fa4e7; }
.theme-cerculean { --sidebar-bg:#e5f2fc; --header-bg:#dbeaf7; }

/* Extras */
.theme-vapor { --bg:#0b0f1a; --fg:#e6e8ef; --panel:#101527; --border:#2a3456; --primary-contrast:#ffffff; --muted:#b3b7d3; --input-bg:#11182b; --input-border:#2a3456; --input-fg:#f8fafc; --danger:#ef4444; --danger-bg:#3b1f1f; --primary:#7c3aed; --button-bg:#7c3aed; --button-fg:#ffffff; --button-border:#7c3aed; --selection-bg-solid:#182341; --selection-fg:#e6e8ef; --selection-border:#7c3aed; } /* Removed .theme-vaporwave-glow */
.theme-vapor { --sidebar-bg:#121b30; --header-bg:#182341; }
.theme-zephyr { --bg:#eef9f9; --fg:#000000; --panel:#ffffff; --border:#cfeeee; --primary-contrast:#ffffff; --muted:#000000; --input-bg:#ffffff; --input-border:#bfe6e6; --input-fg:#000000; --danger:#0ea5a5; --danger-bg:#fde2e2; --primary:#0ea5a5; --button-bg:#0ea5a5; --button-fg:#ffffff; --button-border:#0ea5a5; --selection-bg-solid:#d9efef; --selection-fg:#000000; --selection-border:#0ea5a5; }
.theme-zephyr { --sidebar-bg:#e3f4f4; --header-bg:#d9efef; }
.theme-slate, .theme-deep-slate { --bg:#0f1115; --fg:#e5e7eb; --panel:#141720; --border:#2a2f3a; --primary-contrast:#0f1115; --muted:#a3a8b3; --input-bg:#161a24; --input-border:#2a2f3a; --input-fg:#f8fafc; --danger:#ef4444; --danger-bg:#3b1f1f; --primary:#94a3b8; --button-bg:#94a3b8; --button-fg:#0f1115; --button-border:#94a3b8; }
.theme-slate, .theme-deep-slate { --sidebar-bg:#191d26; --header-bg:#1f2530; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff, 'Segoe UI', 'Roboto', Arial, sans-serif);
  margin: 0;
  min-height: 100vh;
}
/* Base font-size variable used across the app; overridable per-user via :root { --fs: Npx } */
:root {
  --fs: 13px;
  /* Default SVG button icon size token (will be overridden inline from templates) */
  --svg-btn-size: 28px;
  /* Default equal-width for action pills; overridden by containers (forms/toolbars) */
  --action-pill-w: auto;
}
/* Apply uniform font-size to common elements */
html, body, button, input, select, textarea, label, a, p, li, td, th, small, strong, span, div {
  font-size: var(--fs);
  font-family: var(--ff, inherit);
}
/* Let the native scrollbar sit at the extreme right edge to align with overlay arrows */
/* If content overlap becomes an issue, reintroduce: html, body { scrollbar-gutter: stable; } */
.panel, .wrap, .list, .right, .setup-box, .accounts li, .result {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
/* Removed custom overlay scrollbar reservation variables (was --sb-*) */
input, select, textarea {
  background: var(--input-bg);
  color: var(--input-fg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 8px;
  font-size: 1rem;
}
button, .btn {
  background: var(--button-bg);
  color: var(--button-fg);
  border: 1px solid var(--button-border);
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
button.secondary, .btn.secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
button.danger, .btn-danger {
  background: var(--danger);
  color: var(--primary-contrast);
  border: 1px solid var(--danger);
}

/* Theme-aware Cancel button and right-aligned action row */
:root {
  /* Global cancel button tokens, theme-overridable */
  --btn-cancel-bg: var(--selection-bg-solid, var(--border));
  --btn-cancel-bg-hover: var(--btn-cancel-bg);
  --btn-cancel-fg: var(--selection-fg, var(--fg));
  --btn-cancel-border: var(--selection-border, var(--border));
}
button.cancel, .btn-cancel {
  background: var(--btn-cancel-bg);
  color: var(--btn-cancel-fg);
  border: 1px solid var(--btn-cancel-border);
}
button.cancel:hover, .btn-cancel:hover {
  background: var(--btn-cancel-bg-hover, var(--btn-cancel-bg));
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--button-border);
  background: var(--button-bg);
  color: var(--button-fg);
  cursor: pointer;
  text-decoration: none;
}
.pill:hover { filter: brightness(0.98); }
.pill-cancel {
  background: var(--btn-cancel-bg);
  color: var(--btn-cancel-fg);
  border-color: var(--btn-cancel-border);
}
.pill-cancel:hover { background: var(--btn-cancel-bg-hover, var(--btn-cancel-bg)); }
/* Themed Send pill (green) */
.pill-send {
  background: var(--btn-send-bg);
  color: var(--btn-send-fg);
  border-color: var(--btn-send-bg);
}
.pill-send:hover {
  background: var(--btn-send-bg-hover, var(--btn-send-bg));
  border-color: var(--btn-send-bg-hover, var(--btn-send-bg));
}
.pill-send[disabled],
.pill-send[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  filter: none;
}
.form-actions, .actions-right {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 18px;
}

/* Equal-width Cancel/Send pills wherever form/action toolbars are used */
/* Include common toolbar patterns across standalone pages and inline cards */
.form-actions,
.actions-right,
.toolbar,
.reply-inline-card .toolbar,
.reply-inline-card .actions,
.forward-inline-card .toolbar,
.forward-inline-card .forward-toolbar,
.compose-audio-card .toolbar,
.compose-audio-card .actions {
  /* More compact equal-width pills to match target screenshot */
  /* For default xlarge icon (62px), calc branch ~155px; clamp keeps 120–160px */
  --action-pill-w: clamp(120px, calc(var(--svg-btn-size) * 2.5), 160px);
}
.form-actions.actions-split {
  justify-content: space-between;
}
.form-actions .pill.pill-cancel,
.form-actions .pill.pill-send,
.actions-right .pill.pill-cancel,
.actions-right .pill.pill-send,
.toolbar .pill.pill-cancel,
.toolbar .pill.pill-send,
.reply-inline-card .toolbar .pill.pill-cancel,
.reply-inline-card .toolbar .pill.pill-send,
.reply-inline-card .actions .pill.pill-cancel,
.reply-inline-card .actions .pill.pill-send,
.forward-inline-card .toolbar .pill.pill-cancel,
.forward-inline-card .toolbar .pill.pill-send,
.forward-inline-card .forward-toolbar .pill.pill-cancel,
.forward-inline-card .forward-toolbar .pill.pill-send,
.compose-audio-card .toolbar .pill.pill-cancel,
.compose-audio-card .toolbar .pill.pill-send,
.compose-audio-card .actions .pill.pill-cancel,
.compose-audio-card .actions .pill.pill-send {
  width: var(--action-pill-w);
  justify-content: center;
}

/* Attribute-based semantic action button styling */
.inbox-action-unit[data-action="play"] {
  background: var(--btn-play-bg); color: var(--btn-play-fg); border-color: var(--btn-play-bg);
}
.inbox-action-unit[data-action="play"]:hover {
  background: var(--btn-play-bg-hover, var(--btn-play-bg));
}
.inbox-action-unit[data-action="delete"], .inbox-action-unit[data-action="trash"] {
  background: var(--btn-delete-bg); color: var(--btn-delete-fg); border-color: var(--btn-delete-bg);
}
.inbox-action-unit[data-action="delete"]:hover, .inbox-action-unit[data-action="trash"]:hover {
  background: var(--btn-delete-bg-hover, var(--btn-delete-bg));
}
.inbox-action-unit[data-action="reply"] {
  background: var(--btn-reply-bg); color: var(--btn-reply-fg); border-color: var(--btn-reply-bg);
}
.inbox-action-unit[data-action="reply"]:hover {
  background: var(--btn-reply-bg-hover, var(--btn-reply-bg));
}
.inbox-action-unit[data-action="forward"] {
  background: var(--btn-forward-bg); color: var(--btn-forward-fg); border-color: var(--btn-forward-bg);
}
.inbox-action-unit[data-action="forward"]:hover {
  background: var(--btn-forward-bg-hover, var(--btn-forward-bg));
}
.inbox-action-unit:focus-visible {
  outline: 2px solid var(--focus-ring, #276fa3);
  outline-offset: 2px;
}
/* ------------------------------------------------------------- */
/* Flash messages (generic blocks used outside inbox header pill) */
/* Many templates/JS apply category classes: .flash.success/info/ */
/* warning/error. Make these theme-driven and consistent.         */
/* ------------------------------------------------------------- */
:root {
  --flash-success-border: var(--header-msg-success-border, #10b981);
  --flash-success-bg: var(--header-msg-success-bg, rgba(16,185,129,.12));
  --flash-success-fg: var(--header-msg-success-fg, #065f46);

  --flash-info-border: var(--header-msg-info-border, #3b82f6);
  --flash-info-bg: var(--header-msg-info-bg, rgba(59,130,246,.12));
  --flash-info-fg: var(--header-msg-info-fg, #1e3a8a);

  --flash-warning-border: var(--header-msg-warning-border, #f59e0b);
  --flash-warning-bg: var(--header-msg-warning-bg, rgba(251,191,36,.18));
  --flash-warning-fg: var(--header-msg-warning-fg, #92400e);

  --flash-error-border: var(--header-msg-error-border, #ef4444);
  --flash-error-bg: var(--header-msg-error-bg, rgba(239,68,68,.15));
  --flash-error-fg: var(--header-msg-error-fg, #7f1d1d);
}

.flash {
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  border: 2px solid var(--flash-border, var(--border, rgba(0,0,0,0.15)));
  background: var(--flash-bg, var(--panel, #ffffff));
  color: var(--flash-fg, var(--fg, #111827));
}
.flash.success {
  --flash-border: var(--flash-success-border);
  --flash-bg: var(--flash-success-bg);
  --flash-fg: var(--flash-success-fg);
}
.flash.info {
  --flash-border: var(--flash-info-border);
  --flash-bg: var(--flash-info-bg);
  --flash-fg: var(--flash-info-fg);
}
.flash.warning {
  --flash-border: var(--flash-warning-border);
  --flash-bg: var(--flash-warning-bg);
  --flash-fg: var(--flash-warning-fg);
}
.flash.error {
  --flash-border: var(--flash-error-border);
  --flash-bg: var(--flash-error-bg);
  --flash-fg: var(--flash-error-fg);
}
.muted, .hint {
  color: var(--muted);
}

/* Global scaling for SVG icons inside buttons based on --svg-btn-size */
button svg, .btn svg, .inbox-action-unit svg:not(.loading-chase), .providers .ico svg, .pill svg {
  width: var(--svg-btn-size) !important;
  height: var(--svg-btn-size) !important;
}

/* Preserve special small icons in tight contexts if needed by allowing overrides via inline styles or more specific selectors */

/* TTS pill bar */
.tts-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--button-border, rgba(0,0,0,0.15));
  background: var(--button-bg, var(--panel));
  color: var(--button-fg, var(--fg));
  margin: 8px 0 12px;
}
.tts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--svg-btn-size) + 8px);
  height: calc(var(--svg-btn-size) + 8px);
  border-radius: 999px;
  border: 1px solid var(--button-border, rgba(0,0,0,0.15));
  background: var(--panel);
  cursor: pointer;
  color: var(--fg);
  transition: all 0.15s ease-in-out;
  transform: scale(1);
  position: relative;
  overflow: hidden;
}
.tts-btn[disabled] { opacity: 0.5; cursor: default; pointer-events: none; }
.tts-btn svg { width: var(--svg-btn-size); height: var(--svg-btn-size); display: block; }
.tts-btn svg, .tts-btn svg * { fill: currentColor; stroke: none; }
.tts-btn .icon { min-width: var(--svg-btn-size); min-height: var(--svg-btn-size); }

/* Playing state visual feedback */
.tts-btn.playing {
  background: var(--primary);
  color: var(--primary-contrast);
  cursor: not-allowed;
}

.tts-btn:hover:not([disabled]):not(.playing) { 
  background: rgba(0,0,0,0.03); 
  color: var(--text);
  transform: scale(1.05);
}

/* Click animation */
.tts-btn:active:not([disabled]) {
  transform: scale(0.95);
  background: var(--primary);
  color: var(--primary-contrast);
  transition: all 0.1s ease-in-out;
}

/* Ripple effect on click */
.tts-btn:not([disabled])::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  pointer-events: none;
  top: 0;
  left: 0;
}

.tts-btn:not([disabled]):active::after {
  transform: scale(1.4);
  opacity: 1;
  transition: transform 0.15s ease-out, opacity 0.05s ease-out;
}

/* Ensure Cancel buttons pick up per-theme palette automatically. If a theme
   defines specific delete button colors, reuse those; otherwise, fall back to
   that theme's --danger tone. This keeps Cancel visually consistent with each
   theme without repeating overrides in every theme block. */
[class*="theme-"] {
  --btn-cancel-bg: var(--selection-bg-solid, var(--border));
  --btn-cancel-bg-hover: var(--btn-cancel-bg);
  --btn-cancel-fg: var(--selection-fg, var(--fg));
  --btn-cancel-border: var(--selection-border, var(--border));
}
/* Ensure specific themes can override the generic [class*="theme-"] defaults above */
.theme-coastal-light {
  --btn-cancel-bg: #ef4444;
  --btn-cancel-bg-hover: #dc2626;
  --btn-cancel-fg: #ffffff;
}
.tts-rate { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.tts-rate-label { font-size: var(--fs); color: var(--fg); }
.tts-rate-slider { width: 180px; }
.tts-rate-value { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }