@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=EB+Garamond:opsz,wght@8..120,400..800&family=JetBrains+Mono:wght@400;500&display=swap');
@import 'tailwindcss';

:root {
  --tabbar-h: 0px;
}

/* Hide scrollbars until scroll (cross-browser) */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*:hover {
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.dark *:hover {
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 9999px;
}
*:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
}
.dark *:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.2);
}

.root {
  isolation: isolate;
}

/* ═══════════════════════════════════════════════════════════════
   Global theme utilities — use these in components
   ═══════════════════════════════════════════════════════════════ */

.theme-bg { background-color: var(--theme-bg) !important; }
.theme-sidebar { background-color: var(--theme-sidebar) !important; }
.theme-panel { background-color: var(--theme-panel) !important; }
.theme-card { background-color: var(--theme-card) !important; }
.theme-card2 { background-color: var(--theme-card2) !important; }

.theme-border { border-color: var(--theme-border) !important; }
.theme-border-subtle { border-color: var(--theme-border-subtle) !important; }

.theme-text { color: var(--theme-text) !important; }
.theme-muted { color: var(--theme-muted) !important; }

.theme-accent-bg { background-color: var(--theme-accent) !important; }
.theme-accent-text { color: var(--theme-accent) !important; }
.theme-accent-secondary-text { color: var(--theme-accent-secondary) !important; }
.theme-accent-border { border-color: var(--theme-accent) !important; }
.theme-accent-subtle-bg { background-color: var(--theme-accent-subtle) !important; }

.theme-shadow-1 { box-shadow: var(--theme-shadow-1) !important; }
.theme-shadow-2 { box-shadow: var(--theme-shadow-2) !important; }
.theme-shadow-3 { box-shadow: var(--theme-shadow-3) !important; }

/* KPI card utility (label + value + trend badge) */
.kpi-card {
  border: 1px solid var(--theme-border);
  border-radius: 0.75rem;
  background: var(--theme-card);
  box-shadow: var(--theme-shadow-1);
  padding: 0.875rem 1rem;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.kpi-card-label {
  color: var(--theme-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kpi-card-value {
  color: var(--theme-text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.kpi-card-trend {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid var(--theme-accent-border);
  background: var(--theme-accent-subtle);
  color: var(--theme-accent);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.2rem 0.45rem;
}

[data-theme="ops-dark"] .kpi-card:hover,
[data-theme="premium-dark"] .kpi-card:hover,
[data-theme="sunset-brand"] .kpi-card:hover {
  border-color: var(--theme-accent-border);
  box-shadow:
    var(--theme-shadow-2),
    0 0 22px color-mix(in srgb, var(--theme-accent) 26%, transparent);
}

.light {
  color-scheme: light;
}

.system {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  .system {
    color-scheme: dark;
    --color-primary-50: oklch(0.14 0.005 80);
    --color-primary-100: oklch(0.18 0.005 80);
    --color-primary-200: oklch(0.26 0.006 80);
    --color-primary-300: oklch(0.34 0.006 80);
    --color-primary-400: oklch(0.44 0.006 80);
    --color-primary-500: oklch(0.55 0.006 80);
    --color-primary-600: oklch(0.68 0.006 80);
    --color-primary-700: oklch(0.76 0.005 80);
    --color-primary-800: oklch(0.84 0.004 80);
    --color-primary-900: oklch(0.9 0.003 80);
    --color-primary-950: oklch(0.95 0.002 80);
    --color-surface: oklch(0.11 0.005 80);
    --color-ink: oklch(0.95 0.002 80);
    --color-surface-deep: oklch(0.08 0.005 80);
  }
}

html,
body {
  @apply m-0 font-sans;
  letter-spacing: -0.15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  /* Match shell theme-bg so no gray gap shows around floating pill */
  background-color: var(--theme-bg, #f5f5f5);
}

.font-sans {
  letter-spacing: -0.15px;
}

.inline-code {
  background: var(--color-primary-100);
  border: 1px solid var(--color-primary-200);
  border-radius: 0.5rem;
  color: var(--color-primary-900);
  font-family:
    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.95em;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.code-block .shiki {
  background: transparent !important;
  margin: 0;
}

.code-block .shiki code {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
}

code {
  font-family:
    'JetBrains Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
}

@keyframes shimmer {
  0% {
    background-position: 200% 50%;
  }
  100% {
    background-position: -200% 50%;
  }
}

/* Widget skeleton shimmer */
.animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-primary-200) 25%,
    var(--color-primary-100) 50%,
    var(--color-primary-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* iOS-style widget jiggle for edit mode */
@keyframes wiggle {
  0%,
  100% {
    rotate: -1.5deg;
    translate: 0 0;
  }
  25% {
    rotate: 1.5deg;
    translate: 0.5px -0.5px;
  }
  75% {
    rotate: -1deg;
    translate: -0.5px 0.5px;
  }
}

.animate-wiggle {
  animation: wiggle 0.35s ease-in-out infinite alternate;
  transform-origin: center;
}

/* ═══════════════════════════════════════════════════════════════
   Shimmer Thinking Bubble — premium animated thinking indicator
   ═══════════════════════════════════════════════════════════════ */

/* Avatar pulsing glow ring */
@keyframes thinking-avatar-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-500) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-500) 35%, transparent);
  }
}

.thinking-avatar-glow {
  animation: thinking-avatar-glow 2s ease-in-out infinite;
}

/* Shimmer sweep across bubble */
@keyframes thinking-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

.thinking-shimmer-bubble {
  /* bubble bg — slightly elevated from surface */
  background-color: var(--color-primary-100);
}

.dark .thinking-shimmer-bubble {
  background-color: var(--color-primary-100);
}

.thinking-shimmer-sweep {
  background: linear-gradient(
    105deg,
    transparent 40%,
    color-mix(in srgb, white 22%, transparent) 50%,
    color-mix(in srgb, var(--color-accent-400) 8%, transparent) 55%,
    transparent 65%
  );
  width: 60%;
  animation: thinking-shimmer 1.6s ease-in-out infinite;
}

/* Three bouncing dots */
@keyframes thinking-dot-bounce {
  0%, 60%, 100% {
    transform: scale(0.65) translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: scale(1.0) translateY(-4px);
    opacity: 1;
  }
}

.thinking-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background-color: var(--color-accent-500);
  animation: thinking-dot-bounce 1.2s ease-in-out infinite;
}

.thinking-dot-1 {
  animation-delay: 0s;
}

.thinking-dot-2 {
  animation-delay: 0.15s;
}

.thinking-dot-3 {
  animation-delay: 0.3s;
}

/* "Thinking…" label fades in after 2s */
@keyframes thinking-label-fade-in {
  0%, 85% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.thinking-label {
  animation: thinking-label-fade-in 2.35s ease-in forwards;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .thinking-avatar-glow,
  .thinking-shimmer-sweep,
  .thinking-dot,
  .thinking-label {
    animation: none;
    opacity: 1;
  }
}

.chat-streaming-loader {
  display: inline-flex;
  margin-left: 0.25rem;
  vertical-align: text-bottom;
  cursor: default;
}

.three-dots-spinner {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.2rem;
  line-height: 1;
}

.three-dots-spinner-dot {
  width: 0.325rem;
  height: 0.325rem;
  border-radius: 9999px;
  background-color: var(--color-primary-500);
  opacity: 0.42;
  animation: threeDotsSpinnerBounce 1.15s ease-in-out infinite;
}

.three-dots-spinner-dot:nth-child(2) {
  animation-delay: 0.14s;
}

.three-dots-spinner-dot:nth-child(3) {
  animation-delay: 0.28s;
}

.chat-streaming-lobster {
  transform-origin: 50% 65%;
  animation: chatLobsterSpinPulse 1.2s ease-in-out infinite;
}

.logo-loader-track {
  --logo-loader-step: 0.55rem;

  position: relative;
  display: inline-flex;
  align-items: flex-end;
  width: calc(1rem + (var(--logo-loader-step) * 2));
  height: 1.125rem;
}

.logo-loader-icon {
  transform-origin: 50% 80%;
  will-change: transform, opacity;
  animation: logoLoaderIconBounce 1.5s cubic-bezier(0.22, 0.61, 0.36, 1)
    infinite;
}

.chat-streaming-message {
  contain: paint;
}

.chat-streaming-message .chat-streaming-content > :last-child {
  animation: stream-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

.chat-streaming-message
  .chat-streaming-content
  > :last-child
  :where(pre, code, table) {
  text-shadow: none !important;
}

@keyframes stream-reveal {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(4px);
  }
  40% {
    opacity: 0.7;
    filter: blur(0.5px);
    transform: translateY(1px);
    text-shadow: 0 0 20px rgba(234, 88, 12, 0.4);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    text-shadow: none;
  }
}

@keyframes chatLobsterSpinPulse {
  0% {
    opacity: 0.72;
    transform: translateY(1px) rotate(-10deg) scale(0.92);
  }
  35% {
    opacity: 1;
    transform: translateY(-1px) rotate(8deg) scale(1.08);
  }
  65% {
    opacity: 0.96;
    transform: translateY(0) rotate(16deg) scale(1.02);
  }
  100% {
    opacity: 0.72;
    transform: translateY(1px) rotate(350deg) scale(0.92);
  }
}

@keyframes threeDotsSpinnerBounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.42;
  }
  40% {
    transform: translateY(-3px);
    opacity: 0.95;
  }
}

@keyframes logoLoaderIconBounce {
  0% {
    opacity: 0.82;
    transform: translate3d(0, 1px, 0) scale(0.94);
  }
  10% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1);
  }
  20% {
    opacity: 0.9;
    transform: translate3d(0, 1px, 0) scale(0.95);
  }
  25% {
    transform: translate3d(var(--logo-loader-step), 1px, 0) scale(0.94);
  }
  35% {
    opacity: 1;
    transform: translate3d(var(--logo-loader-step), -3px, 0) scale(1);
  }
  45% {
    opacity: 0.9;
    transform: translate3d(var(--logo-loader-step), 1px, 0) scale(0.95);
  }
  50% {
    transform: translate3d(calc(var(--logo-loader-step) * 2), 1px, 0)
      scale(0.94);
  }
  60% {
    opacity: 1;
    transform: translate3d(calc(var(--logo-loader-step) * 2), -3px, 0) scale(1);
  }
  70% {
    opacity: 0.9;
    transform: translate3d(calc(var(--logo-loader-step) * 2), 1px, 0)
      scale(0.95);
  }
  75% {
    transform: translate3d(var(--logo-loader-step), 1px, 0) scale(0.94);
  }
  85% {
    opacity: 1;
    transform: translate3d(var(--logo-loader-step), -3px, 0) scale(1);
  }
  95% {
    opacity: 0.9;
    transform: translate3d(var(--logo-loader-step), 1px, 0) scale(0.95);
  }
  100% {
    opacity: 0.82;
    transform: translate3d(0, 1px, 0) scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .three-dots-spinner-dot,
  .chat-streaming-lobster,
  .logo-loader-icon,
  .chat-streaming-message .chat-streaming-content > :last-child,
  .chat-streaming-glow::before {
    animation: none;
  }
}

/* Message fade-in animation */
@keyframes message-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Streaming glow — active on chat panel while AI is thinking/streaming */
@keyframes chat-panel-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent-500) 30%, transparent),
                0 0 18px 2px color-mix(in srgb, var(--color-accent-500) 12%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent-500) 55%, transparent),
                0 0 28px 4px color-mix(in srgb, var(--color-accent-500) 20%, transparent);
  }
}

.chat-streaming-glow {
  animation: chat-panel-glow-pulse 2.4s ease-in-out infinite;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .chat-streaming-glow {
    animation: none;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-accent-500) 40%, transparent);
  }
}

/* iMessage-style typing dots */
@keyframes typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes page-fade-in {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 1;
  }
}

/* Slide-in from right (navigating to a lower tab index) */
@keyframes slide-in-from-right {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide-in from left (navigating to a higher tab index) */
@keyframes slide-in-from-left {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.page-transition {
  animation: page-fade-in 0.15s ease-out;
}

.page-transition.slide-enter-left {
  animation: slide-in-from-left 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-transition.slide-enter-right {
  animation: slide-in-from-right 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Chat panel: force all content to respect panel width */
.chat-panel-content,
.chat-panel-content [data-chat-scroll-viewport],
.chat-panel-content [data-chat-scroll-viewport] > div {
  max-width: 420px !important;
  overflow-x: hidden !important;
}

@media (max-width: 767px) {
  main {
    touch-action: pan-y;
  }
}

@media (hover: none) and (pointer: coarse) {
  :where(button, [data-slot='button'], a, [role='button']) {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Orange glow pulse on composer when agent is actively working */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 12px var(--theme-accent-subtle, rgba(48, 80, 255, 0.25));
  }
  50% {
    box-shadow: 0 0 28px var(--theme-accent-border, rgba(48, 80, 255, 0.55));
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ── Hermes Workspace Themes ── */
[data-theme="hermes-official"] {
  --theme-bg: #0A0E1A;
  --theme-sidebar: #0D1220;
  --theme-panel: #0D1220;
  --theme-card: #11182A;
  --theme-card2: #151D32;
  --theme-border: #24304A;
  --theme-border-subtle: #1B2740;
  --theme-text: #E6EAF2;
  --theme-muted: #9AA5BD;
  --theme-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --theme-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.52);
  --theme-shadow-3: 0 16px 36px rgba(0, 0, 0, 0.62);
  --theme-glass: rgba(10, 14, 26, 0.88);
  --theme-focus: #818CF8;
  --theme-accent: #6366F1;
  --theme-accent-secondary: #818CF8;
  --theme-accent-subtle: rgba(99, 102, 241, 0.14);
  --theme-accent-border: rgba(99, 102, 241, 0.3);
  --theme-active: #60A5FA;
  --theme-link: #818CF8;
  --theme-success: #22C55E;
  --theme-warning: #F59E0B;
  --theme-danger: #EF4444;
  --theme-stripe: rgba(36, 48, 74, 0.48);
  --theme-header-bg: #0D1220;
  --theme-header-border: #24304A;
  --chat-user-bg: #1A2340;
  --chat-user-border: #3A4B78;
  --chat-user-foreground: #E6EAF2;
  --chat-assistant-bg: #11182A;
  --chat-assistant-border: #1B2740;
  --chat-assistant-foreground: #E6EAF2;
  --composer-bg: #0F1728;
  --composer-border: #2A3550;
  --composer-placeholder: #7D88A2;
  --tool-card-bg: #0F1728;
  --tool-card-border: #2A3550;
  --tool-card-title: #E6EAF2;
  --tool-card-muted: #9AA5BD;
  --code-bg: #0F1728;
  --code-border: #2A3550;
  --code-foreground: #E6EAF2;
  --theme-input: #0F1728;
}

[data-theme="hermes-classic"] {
  --theme-bg: #0d0f12;
  --theme-sidebar: #13171c;
  --theme-panel: #13171c;
  --theme-card: #1a1f26;
  --theme-card2: #1f252d;
  --theme-border: #2a313b;
  --theme-border-subtle: #222933;
  --theme-text: #eceff4;
  --theme-muted: #7f8a96;
  --theme-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --theme-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.52);
  --theme-shadow-3: 0 16px 36px rgba(0, 0, 0, 0.62);
  --theme-glass: rgba(13, 15, 18, 0.88);
  --theme-focus: #b98a44;
  --theme-accent: #b98a44;
  --theme-accent-secondary: #d3a45a;
  --theme-accent-subtle: rgba(185, 138, 68, 0.14);
  --theme-accent-border: rgba(185, 138, 68, 0.3);
  --theme-active: #4c88c7;
  --theme-link: #6fa8c9;
  --theme-success: #4fa36c;
  --theme-warning: #c28a2e;
  --theme-danger: #b55252;
  --theme-stripe: rgba(42, 49, 59, 0.48);
  --theme-header-bg: #13171c;
  --theme-header-border: #2a313b;
  --theme-sidebar: #11151A;
  --chat-user-bg: #1A2533;
  --chat-user-border: #35506D;
  --chat-user-foreground: #EAF2FB;
  --chat-assistant-bg: #151A21;
  --chat-assistant-border: #2B333D;
  --chat-assistant-foreground: #ECEFF4;
  --composer-bg: #10141A;
  --composer-border: #2D3640;
  --composer-placeholder: #7F8A96;
  --tool-card-bg: #121820;
  --tool-card-border: #2A3440;
  --tool-card-title: #DCE6F2;
  --tool-card-muted: #8FA1B5;
  --code-bg: #0F1318;
  --code-border: #28313B;
  --code-foreground: #D7DEE7;
  --theme-input: #232A33;
}

[data-theme="hermes-slate"] {
  --theme-bg: #0d1117;
  --theme-sidebar: #0d1117;
  --theme-panel: #161b22;
  --theme-card: #1c2128;
  --theme-card2: #21262d;
  --theme-border: #30363d;
  --theme-border-subtle: #21262d;
  --theme-text: #c9d1d9;
  --theme-muted: #8b949e;
  --theme-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --theme-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.52);
  --theme-shadow-3: 0 16px 36px rgba(0, 0, 0, 0.62);
  --theme-glass: rgba(13, 17, 23, 0.88);
  --theme-focus: #7eb8f6;
  --theme-accent: #7eb8f6;
  --theme-accent-secondary: #8EA8FF;
  --theme-accent-subtle: rgba(126, 184, 246, 0.14);
  --theme-accent-border: rgba(126, 184, 246, 0.3);
  --theme-active: #7eb8f6;
  --theme-link: #8EA8FF;
  --theme-success: #63D0A6;
  --theme-warning: #e6a855;
  --theme-danger: #F7A072;
  --theme-stripe: rgba(48, 54, 61, 0.48);
  --theme-header-bg: #161b22;
  --theme-header-border: #30363d;
  --chat-user-bg: #1a2233;
  --chat-user-border: #35506D;
  --chat-user-foreground: #EAF2FB;
  --chat-assistant-bg: #161b22;
  --chat-assistant-border: #2B333D;
  --chat-assistant-foreground: #ECEFF4;
  --composer-bg: #0d1117;
  --composer-border: #2D3640;
  --composer-placeholder: #7F8A96;
  --tool-card-bg: #121820;
  --tool-card-border: #2A3440;
  --tool-card-title: #DCE6F2;
  --tool-card-muted: #8FA1B5;
  --code-bg: #0d1117;
  --code-border: #28313B;
  --code-foreground: #D7DEE7;
  --theme-input: #232A33;
}

[data-theme="hermes-mono"] {
  --theme-bg: #111111;
  --theme-sidebar: #111111;
  --theme-panel: #1a1a1a;
  --theme-card: #222222;
  --theme-card2: #2a2a2a;
  --theme-border: #333333;
  --theme-border-subtle: #222222;
  --theme-text: #e6edf3;
  --theme-muted: #888888;
  --theme-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --theme-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.52);
  --theme-shadow-3: 0 16px 36px rgba(0, 0, 0, 0.62);
  --theme-glass: rgba(17, 17, 17, 0.88);
  --theme-focus: #aaaaaa;
  --theme-accent: #aaaaaa;
  --theme-accent-secondary: #cccccc;
  --theme-accent-subtle: rgba(170, 170, 170, 0.14);
  --theme-accent-border: rgba(170, 170, 170, 0.3);
  --theme-active: #aaaaaa;
  --theme-link: #cccccc;
  --theme-success: #888888;
  --theme-warning: #999999;
  --theme-danger: #cccccc;
  --theme-stripe: rgba(51, 51, 51, 0.48);
  --theme-header-bg: #1a1a1a;
  --theme-header-border: #333333;
  --chat-user-bg: #1e1e1e;
  --chat-user-border: #4a4a4a;
  --chat-user-foreground: #E6EDF3;
  --chat-assistant-bg: #1a1a1a;
  --chat-assistant-border: #333333;
  --chat-assistant-foreground: #E6EDF3;
  --composer-bg: #111111;
  --composer-border: #333333;
  --composer-placeholder: #888888;
  --tool-card-bg: #1a1a1a;
  --tool-card-border: #333333;
  --tool-card-title: #E6EDF3;
  --tool-card-muted: #A0A0A0;
  --code-bg: #111111;
  --code-border: #333333;
  --code-foreground: #E6EDF3;
  --theme-input: #222222;
}

[data-theme="hermes-official-light"] {
  --theme-bg: #F6F8FC;
  --theme-sidebar: #EEF2FF;
  --theme-panel: #EEF2FF;
  --theme-card: #FFFFFF;
  --theme-card2: #F8FAFF;
  --theme-border: #D7DEEE;
  --theme-border-subtle: #E6EBF7;
  --theme-text: #111827;
  --theme-muted: #4B5563;
  --theme-shadow-1: 0 1px 2px rgba(17, 24, 39, 0.06);
  --theme-shadow-2: 0 8px 20px rgba(17, 24, 39, 0.09);
  --theme-shadow-3: 0 18px 38px rgba(17, 24, 39, 0.12);
  --theme-glass: rgba(246, 248, 252, 0.86);
  --theme-focus: #6366F1;
  --theme-accent: #4F46E5;
  --theme-accent-secondary: #6366F1;
  --theme-accent-subtle: rgba(79, 70, 229, 0.1);
  --theme-accent-border: rgba(79, 70, 229, 0.22);
  --theme-active: #2563EB;
  --theme-link: #4F46E5;
  --theme-success: #16A34A;
  --theme-warning: #D97706;
  --theme-danger: #DC2626;
  --theme-stripe: rgba(215, 222, 238, 0.38);
  --theme-header-bg: #EEF2FF;
  --theme-header-border: #D7DEEE;
  --chat-user-bg: #EEF2FF;
  --chat-user-border: #C7D2FE;
  --chat-user-foreground: #111827;
  --chat-assistant-bg: #EDF0F8;
  --chat-assistant-border: #D7DEEE;
  --chat-assistant-foreground: #111827;
  --composer-bg: #FFFFFF;
  --composer-border: #C7D2FE;
  --composer-placeholder: #6B7280;
  --tool-card-bg: #F3F6FF;
  --tool-card-border: #D6DDF0;
  --tool-card-title: #111827;
  --tool-card-muted: #4B5563;
  --code-bg: #F3F6FF;
  --code-border: #D6DDF0;
  --code-foreground: #111827;
  --theme-input: #FFFFFF;
}

[data-theme="hermes-classic-light"] {
  --theme-bg: #F5F2ED;
  --theme-sidebar: #EEE8DF;
  --theme-panel: #F0EBE4;
  --theme-card: #FCFAF7;
  --theme-card2: #F7F2EB;
  --theme-border: #D8CCBC;
  --theme-border-subtle: #E7DDD0;
  --theme-text: #1a1f26;
  --theme-muted: #6F675E;
  --theme-shadow-1: 0 1px 2px rgba(31, 24, 18, 0.08);
  --theme-shadow-2: 0 8px 24px rgba(31, 24, 18, 0.1);
  --theme-shadow-3: 0 18px 40px rgba(31, 24, 18, 0.14);
  --theme-glass: rgba(245, 242, 237, 0.84);
  --theme-focus: #b98a44;
  --theme-accent: #b98a44;
  --theme-accent-secondary: #D3A45A;
  --theme-accent-subtle: rgba(185, 138, 68, 0.12);
  --theme-accent-border: rgba(185, 138, 68, 0.28);
  --theme-active: #4C88C7;
  --theme-link: #8E6428;
  --theme-success: #3E8B59;
  --theme-warning: #B67A24;
  --theme-danger: #B55252;
  --theme-stripe: rgba(216, 204, 188, 0.4);
  --theme-header-bg: #F3EEE7;
  --theme-header-border: #D8CCBC;
  --chat-user-bg: #E9DFC9;
  --chat-user-border: #C6A97A;
  --chat-user-foreground: #2B2115;
  --chat-assistant-bg: #FBF8F3;
  --chat-assistant-border: #DCCFBE;
  --chat-assistant-foreground: #1a1f26;
  --composer-bg: #FFFCF8;
  --composer-border: #D6C8B6;
  --composer-placeholder: #7B7267;
  --tool-card-bg: #F8F3EC;
  --tool-card-border: #D7CAB7;
  --tool-card-title: #2A2F36;
  --tool-card-muted: #756B61;
  --code-bg: #F4EEE6;
  --code-border: #D8CCBC;
  --code-foreground: #2B3139;
  --theme-input: #FFFDF9;
}

[data-theme="hermes-slate-light"] {
  --theme-bg: #F6F8FA;
  --theme-sidebar: #F3F5F7;
  --theme-panel: #EEF2F6;
  --theme-card: #FFFFFF;
  --theme-card2: #F6F8FA;
  --theme-border: #D0D7DE;
  --theme-border-subtle: #E2E8F0;
  --theme-text: #24292f;
  --theme-muted: #57606A;
  --theme-shadow-1: 0 1px 2px rgba(36, 41, 47, 0.08);
  --theme-shadow-2: 0 8px 24px rgba(36, 41, 47, 0.1);
  --theme-shadow-3: 0 18px 40px rgba(36, 41, 47, 0.14);
  --theme-glass: rgba(246, 248, 250, 0.84);
  --theme-focus: #3b82f6;
  --theme-accent: #3b82f6;
  --theme-accent-secondary: #60A5FA;
  --theme-accent-subtle: rgba(59, 130, 246, 0.12);
  --theme-accent-border: rgba(59, 130, 246, 0.25);
  --theme-active: #2563EB;
  --theme-link: #2563EB;
  --theme-success: #2DA44E;
  --theme-warning: #BF8700;
  --theme-danger: #CF222E;
  --theme-stripe: rgba(208, 215, 222, 0.42);
  --theme-header-bg: #F6F8FA;
  --theme-header-border: #D0D7DE;
  --chat-user-bg: #DBEAFE;
  --chat-user-border: #93C5FD;
  --chat-user-foreground: #1E3A8A;
  --chat-assistant-bg: #FFFFFF;
  --chat-assistant-border: #D8DEE4;
  --chat-assistant-foreground: #24292f;
  --composer-bg: #FFFFFF;
  --composer-border: #D0D7DE;
  --composer-placeholder: #6E7781;
  --tool-card-bg: #F6F8FA;
  --tool-card-border: #D0D7DE;
  --tool-card-title: #1F2328;
  --tool-card-muted: #57606A;
  --code-bg: #F6F8FA;
  --code-border: #D0D7DE;
  --code-foreground: #1F2328;
  --theme-input: #FFFFFF;
}

[data-theme="hermes-mono-light"] {
  --theme-bg: #FAFAFA;
  --theme-sidebar: #F5F5F5;
  --theme-panel: #F0F0F0;
  --theme-card: #FFFFFF;
  --theme-card2: #F7F7F7;
  --theme-border: #D4D4D4;
  --theme-border-subtle: #E5E5E5;
  --theme-text: #1a1a1a;
  --theme-muted: #666666;
  --theme-shadow-1: 0 1px 2px rgba(26, 26, 26, 0.06);
  --theme-shadow-2: 0 8px 20px rgba(26, 26, 26, 0.09);
  --theme-shadow-3: 0 18px 38px rgba(26, 26, 26, 0.12);
  --theme-glass: rgba(250, 250, 250, 0.86);
  --theme-focus: #666666;
  --theme-accent: #666666;
  --theme-accent-secondary: #8A8A8A;
  --theme-accent-subtle: rgba(102, 102, 102, 0.1);
  --theme-accent-border: rgba(102, 102, 102, 0.22);
  --theme-active: #4A4A4A;
  --theme-link: #4A4A4A;
  --theme-success: #5C5C5C;
  --theme-warning: #7A7A7A;
  --theme-danger: #8A8A8A;
  --theme-stripe: rgba(212, 212, 212, 0.38);
  --theme-header-bg: #F5F5F5;
  --theme-header-border: #D4D4D4;
  --chat-user-bg: #ECECEC;
  --chat-user-border: #C7C7C7;
  --chat-user-foreground: #1a1a1a;
  --chat-assistant-bg: #FFFFFF;
  --chat-assistant-border: #DDDDDD;
  --chat-assistant-foreground: #1a1a1a;
  --composer-bg: #FFFFFF;
  --composer-border: #D4D4D4;
  --composer-placeholder: #7A7A7A;
  --tool-card-bg: #F5F5F5;
  --tool-card-border: #D6D6D6;
  --tool-card-title: #1a1a1a;
  --tool-card-muted: #666666;
  --code-bg: #F5F5F5;
  --code-border: #D4D4D4;
  --code-foreground: #1a1a1a;
  --theme-input: #FFFFFF;
}

[data-theme="hermes-official"] html,
[data-theme="hermes-official"] body,
[data-theme="hermes-official"] #root,
[data-theme="hermes-official"] .dark,
[data-theme="hermes-classic"] html,
[data-theme="hermes-classic"] body,
[data-theme="hermes-classic"] #root,
[data-theme="hermes-classic"] .dark,
[data-theme="hermes-slate"] html,
[data-theme="hermes-slate"] body,
[data-theme="hermes-slate"] #root,
[data-theme="hermes-slate"] .dark,
[data-theme="hermes-mono"] html,
[data-theme="hermes-mono"] body,
[data-theme="hermes-mono"] #root,
[data-theme="hermes-mono"] .dark {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

[data-theme="hermes-official-light"] html,
[data-theme="hermes-official-light"] body,
[data-theme="hermes-official-light"] #root,
[data-theme="hermes-official-light"] .light,
[data-theme="hermes-classic-light"] html,
[data-theme="hermes-classic-light"] body,
[data-theme="hermes-classic-light"] #root,
[data-theme="hermes-classic-light"] .light,
[data-theme="hermes-slate-light"] html,
[data-theme="hermes-slate-light"] body,
[data-theme="hermes-slate-light"] #root,
[data-theme="hermes-slate-light"] .light,
[data-theme="hermes-mono-light"] html,
[data-theme="hermes-mono-light"] body,
[data-theme="hermes-mono-light"] #root,
[data-theme="hermes-mono-light"] .light {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

/* ── Tailwind primary token remaps for dark themes ─────────────────────
   Maps bg-primary-50, text-primary-900, border-primary-200 etc.
   to theme-appropriate values so ALL existing Tailwind classes work.
   Dark: 50=darkest surface, 950=lightest text (already set above) */

[data-theme="hermes-official"],
[data-theme="hermes-classic"],
[data-theme="hermes-slate"],
[data-theme="hermes-mono"] {
  --color-primary-50: var(--theme-panel);
  --color-primary-100: var(--theme-card);
  --color-primary-200: var(--theme-border);
  --color-primary-300: var(--theme-border-subtle);
  --color-primary-400: var(--theme-muted);
  --color-primary-500: var(--theme-muted);
  --color-primary-600: var(--theme-muted);
  --color-primary-700: var(--theme-text);
  --color-primary-800: var(--theme-text);
  --color-primary-900: var(--theme-text);
  --color-primary-950: var(--theme-text);
  --color-surface: var(--theme-bg);
  --color-surface-deep: var(--theme-bg);
  --color-ink: var(--theme-text);
  --color-accent-400: var(--theme-accent-secondary);
  --color-accent-500: var(--theme-accent);
  --color-accent-600: var(--theme-accent);
}

/* ── Tailwind primary token remaps for light themes ────────────────────
   Light: 50=lightest surface, 950=darkest text */

[data-theme="hermes-official-light"],
[data-theme="hermes-classic-light"],
[data-theme="hermes-slate-light"],
[data-theme="hermes-mono-light"] {
  color-scheme: light !important;
  --color-primary-50: var(--theme-card) !important;
  --color-primary-100: var(--theme-card2) !important;
  --color-primary-200: var(--theme-border) !important;
  --color-primary-300: var(--theme-border-subtle) !important;
  --color-primary-400: var(--theme-muted) !important;
  --color-primary-500: var(--theme-muted) !important;
  --color-primary-600: var(--theme-muted) !important;
  --color-primary-700: var(--theme-text) !important;
  --color-primary-800: var(--theme-text) !important;
  --color-primary-900: var(--theme-text) !important;
  --color-primary-950: var(--theme-text) !important;
  --color-surface: var(--theme-bg) !important;
  --color-surface-deep: var(--theme-bg) !important;
  --color-ink: var(--theme-text) !important;
  --color-accent-400: var(--theme-accent-secondary) !important;
  --color-accent-500: var(--theme-accent) !important;
  --color-accent-600: var(--theme-accent) !important;
}

/* Force light theme text and backgrounds to prevent dark mode leakage */
[data-theme$="-light"] * {
  --tw-text-opacity: 1;
}
[data-theme$="-light"] .text-white {
  color: var(--theme-text) !important;
}
/* Keep text-white on accent-bg buttons */
[data-theme$="-light"] [style*="--theme-accent"] .text-white,
[data-theme$="-light"] .bg-accent-500 .text-white {
  color: #fff !important;
}

/* Composer focus ring for all themes */
[data-theme] .composer-input:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 65%, transparent);
  border-color: var(--theme-accent);
}

/* Demo mode — activated via ?demo=1 query param */
[data-demo="true"] {
  font-size: 105%;
}
[data-demo="true"] .tool-card-collapsed {
  display: none;
}
[data-demo="true"] .tool-card-expanded {
  display: block !important;
}
[data-demo="true"] * {
  transition-duration: 0.05s !important;
}

/* Mobile nav drawer — push content right + dim when open */
@media (max-width: 767px) {
  body.nav-drawer-open > #root {
    transform: translateX(288px) scale(0.92);
    opacity: 0.4;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
    pointer-events: none;
  }
  body:not(.nav-drawer-open) > #root {
    transform: translateX(0) scale(1);
    opacity: 1;
    border-radius: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
  }
}