globals.css

@import "tailwindcss";

@source "./**/*.{js,jsx,ts,tsx}";
@source "../index.html";

/* Class-based dark mode (html.dark) — toggled by ThemeProvider + inline FOUC script */
@custom-variant dark (&:where(.dark, .dark *));

/* Semantic palette: :root = light, html.dark = dark */
:root {
  --font-dm-sans: 'DM Sans Variable', system-ui, sans-serif;
  color-scheme: light;
  --app-bg: var(--md-sys-color-surface);
  --app-bg-elevated: var(--md-sys-color-surface-container);
  --app-bg-muted: var(--md-sys-color-surface-container-low);
  /* Image placeholders / sunken panels */
  --app-bg-sunken: var(--md-sys-color-surface-container-lowest);
  /* Derived border/track/overlay from editable heading token so custom palette auto-follows */
  --app-border: var(--md-sys-color-outline-variant);
  --app-border-muted: color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent);
  --app-text: var(--md-sys-color-on-surface);
  --app-text-heading: var(--md-sys-color-on-surface);
  --app-text-subtle: var(--md-sys-color-on-surface-variant);
  --app-input: var(--md-sys-color-surface-container-high);
  --app-track: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  --app-overlay: color-mix(in srgb, var(--md-sys-color-on-surface) 45%, transparent);
  --scrollbar-track: var(--app-bg-muted);
  --scrollbar-thumb: var(--md-sys-color-outline-variant);
  --chart-grid: rgba(148, 163, 184, 0.3);
  --chart-legend: #475569;
  --chart-title: #475569;
  --code-bg: var(--md-sys-color-surface-container-lowest);
  --shadow-elevated:
    rgba(15, 23, 42, 0.06) 0 10px 15px -3px, rgba(15, 23, 42, 0.04) 0 4px 6px -2px;

  --text: var(--app-text);
  --text-h: var(--app-text-heading);
  --bg: var(--app-bg);
  --border: var(--app-border);
  --accent: var(--md-sys-color-primary);
  /* Derived accent alpha tokens — auto-follow when --accent is customized */
  --accent-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);
  --social-bg: rgba(241, 245, 249, 0.8);
  --shadow: var(--shadow-elevated);
  /* Links / interactive blue (readable on light surfaces) */
  --app-link: var(--md-sys-color-primary);
  --app-link-soft: var(--md-sys-color-primary-container);

  --chat-bg: var(--app-bg);
  --chat-surface: var(--app-bg-elevated);
  --chat-surface-hover: var(--app-bg-muted);
  --chat-glow: rgba(66, 97, 255, 0.08);
  --chat-glow-secondary: rgba(138, 79, 255, 0.04);

  /* Warm secondary accent (welcome moments / highlights) — complements the cool blue */
  --accent-warm: #f97316;
  --accent-warm-soft: #fb923c;
  --accent-2: #8b5cf6;
  --surface-warm: color-mix(in srgb, var(--accent-warm) 6%, transparent);

  /* Elevation scale (depth) */
  --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --elevation-2: 0 6px 16px -4px rgba(15, 23, 42, 0.1);
  --elevation-3: 0 16px 36px -8px rgba(15, 23, 42, 0.18);

  /* Semantic status / severity colors — bound to Google Material 3 tokens */
  --color-danger: var(--md-sys-color-error);
  --color-danger-bg: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
  --color-danger-border: color-mix(in srgb, var(--md-sys-color-error) 35%, transparent);
  --color-warning: var(--md-sys-color-warning);
  --color-warning-bg: color-mix(in srgb, var(--md-sys-color-warning) 12%, transparent);
  --color-warning-border: color-mix(in srgb, var(--md-sys-color-warning) 35%, transparent);
  --color-success: var(--md-sys-color-success);
  --color-success-bg: color-mix(in srgb, var(--md-sys-color-success) 12%, transparent);
  --color-success-border: color-mix(in srgb, var(--md-sys-color-success) 35%, transparent);
  --color-info: var(--md-sys-color-info);
  --color-info-bg: color-mix(in srgb, var(--md-sys-color-info) 12%, transparent);
  --color-info-border: color-mix(in srgb, var(--md-sys-color-info) 35%, transparent);

  /* Chat surface tokens (referenced by components, overridable by user) */
  --chat-header-bg: #030712;
  --chat-header-fg: rgba(255, 255, 255, 0.9);
  --chat-header-fg-muted: rgba(255, 255, 255, 0.5);
  --chat-user-bubble: var(--accent);
  --chat-user-bubble-fg: #ffffff;
  --chat-assistant-bubble: var(--app-bg-sunken);
  --status-online: #22c55e;
  --status-online-ping: rgba(34, 197, 94, 0.6);

  /* Motion tokens (theme-independent) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* Google Material 3 (M3) Expressive Tokens (Light) */
  --md-sys-color-primary: #1a73e8;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d2e3fc;
  --md-sys-color-on-primary-container: #041e49;

  --md-sys-color-secondary: #5f6368;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8eaed;
  --md-sys-color-on-secondary-container: #202124;

  --md-sys-color-tertiary: #ea8600;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #fee1bb;
  --md-sys-color-on-tertiary-container: #4e2800;

  --md-sys-color-error: #d93025;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fce8e6;
  --md-sys-color-on-error-container: #5c130d;

  --md-sys-color-success: #137333;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #ceead6;
  --md-sys-color-on-success-container: #0d652d;

  --md-sys-color-warning: #ea8600;
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #feefc3;
  --md-sys-color-on-warning-container: #4e2800;

  --md-sys-color-info: #1a73e8;
  --md-sys-color-on-info: #ffffff;
  --md-sys-color-info-container: #d2e3fc;
  --md-sys-color-on-info-container: #041e49;

  --md-sys-color-surface: #f8fafc;
  --md-sys-color-on-surface: #1e293b;
  --md-sys-color-surface-variant: #e2e8f0;
  --md-sys-color-on-surface-variant: #475569;
  --md-sys-color-surface-dim: #edeef2;
  --md-sys-color-surface-bright: #ffffff;

  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f8fafc;
  --md-sys-color-surface-container: #f1f5f9;
  --md-sys-color-surface-container-high: #e2e8f0;
  --md-sys-color-surface-container-highest: #cbd5e1;

  --md-sys-color-outline: #94a3b8;
  --md-sys-color-outline-variant: #cbd5e1;

  /* M3 Expressive Motion Tokens */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short: 200ms;
  --md-sys-motion-duration-medium: 350ms;
  --md-sys-motion-duration-long: 500ms;

  /* M3 Expressive Shape Tokens */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-sm: 8px;
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-lg: 16px;
  --md-sys-shape-corner-xl: 24px;
  --md-sys-shape-corner-full: 9999px;
}

html.dark {
  color-scheme: dark;
  --app-bg: var(--md-sys-color-surface);
  --app-bg-elevated: var(--md-sys-color-surface-container);
  --app-bg-muted: var(--md-sys-color-surface-container-low);
  --app-bg-sunken: var(--md-sys-color-surface-container-lowest);
  /* Derived border/track/overlay — auto-follow custom --app-text-heading on dark */
  --app-border: var(--md-sys-color-outline-variant);
  --app-border-muted: color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent);
  --app-text: var(--md-sys-color-on-surface);
  --app-text-heading: var(--md-sys-color-on-surface);
  --app-text-subtle: var(--md-sys-color-on-surface-variant);
  --app-input: var(--md-sys-color-surface-container-high);
  --app-track: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
  --app-overlay: color-mix(in srgb, black 55%, transparent);
  --scrollbar-track: var(--app-bg);
  --scrollbar-thumb: var(--md-sys-color-outline-variant);
  --chart-grid: rgba(100, 116, 139, 0.3);
  --chart-legend: #94a3b8;
  --chart-title: #94a3b8;
  --code-bg: var(--md-sys-color-surface-container-lowest);
  --shadow-elevated:
    rgba(0, 0, 0, 0.35) 0 10px 15px -3px, rgba(0, 0, 0, 0.22) 0 4px 6px -2px;

  --text: var(--app-text);
  --text-h: var(--app-text-heading);
  --bg: var(--app-bg);
  --border: var(--app-border);
  --accent: var(--md-sys-color-primary);
  /* Derived accent alpha tokens — auto-follow when --accent is customized */
  --accent-bg: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);
  --social-bg: rgba(47, 48, 58, 0.5);
  --shadow: var(--shadow-elevated);
  --app-link: var(--md-sys-color-primary);
  --app-link-soft: var(--md-sys-color-primary-container);

  --chat-bg: var(--app-bg);
  --chat-surface: var(--app-bg-elevated);
  --chat-surface-hover: var(--app-bg-muted);
  --chat-glow: rgba(37, 99, 235, 0.06);
  --chat-glow-secondary: rgba(37, 99, 235, 0.03);

  /* Warm secondary accent — brighter on dark surfaces */
  --accent-warm: #fb923c;
  --accent-warm-soft: #fdba74;
  --accent-2: #a78bfa;
  --surface-warm: color-mix(in srgb, var(--accent-warm) 8%, transparent);

  /* Elevation scale — deeper shadows on dark */
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elevation-2: 0 6px 16px -4px rgba(0, 0, 0, 0.45);
  --elevation-3: 0 16px 36px -8px rgba(0, 0, 0, 0.55);

  /* Semantic status / severity colors (dark) — bound to Google Material 3 tokens */
  --color-danger: var(--md-sys-color-error);
  --color-danger-bg: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
  --color-danger-border: color-mix(in srgb, var(--md-sys-color-error) 35%, transparent);
  --color-warning: var(--md-sys-color-warning);
  --color-warning-bg: color-mix(in srgb, var(--md-sys-color-warning) 12%, transparent);
  --color-warning-border: color-mix(in srgb, var(--md-sys-color-warning) 35%, transparent);
  --color-success: var(--md-sys-color-success);
  --color-success-bg: color-mix(in srgb, var(--md-sys-color-success) 12%, transparent);
  --color-success-border: color-mix(in srgb, var(--md-sys-color-success) 35%, transparent);
  --color-info: var(--md-sys-color-info);
  --color-info-bg: color-mix(in srgb, var(--md-sys-color-info) 12%, transparent);
  --color-info-border: color-mix(in srgb, var(--md-sys-color-info) 35%, transparent);

  /* Chat surface tokens (dark) */
  --chat-header-bg: #030712;
  --chat-header-fg: rgba(255, 255, 255, 0.9);
  --chat-header-fg-muted: rgba(255, 255, 255, 0.5);
  --chat-user-bubble: var(--accent);
  --chat-user-bubble-fg: #ffffff;
  --chat-assistant-bubble: var(--app-bg-sunken);
  --status-online: #4ade80;
  --status-online-ping: rgba(74, 222, 128, 0.6);

  /* Google Material 3 (M3) Expressive Tokens (Dark) */
  --md-sys-color-primary: #8ab4f8;
  --md-sys-color-on-primary: #041e49;
  --md-sys-color-primary-container: #174ea6;
  --md-sys-color-on-primary-container: #d2e3fc;

  --md-sys-color-secondary: #bdc1c6;
  --md-sys-color-on-secondary: #202124;
  --md-sys-color-secondary-container: #3c4043;
  --md-sys-color-on-secondary-container: #e8eaed;

  --md-sys-color-tertiary: #fdd663;
  --md-sys-color-on-tertiary: #402d00;
  --md-sys-color-tertiary-container: #7b5804;
  --md-sys-color-on-tertiary-container: #ffeebb;

  --md-sys-color-error: #f28b82;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8c1d18;
  --md-sys-color-on-error-container: #fce8e6;

  --md-sys-color-success: #81c995;
  --md-sys-color-on-success: #0d652d;
  --md-sys-color-success-container: #137333;
  --md-sys-color-on-success-container: #ceead6;

  --md-sys-color-warning: #fdd663;
  --md-sys-color-on-warning: #402d00;
  --md-sys-color-warning-container: #7b5804;
  --md-sys-color-on-warning-container: #feefc3;

  --md-sys-color-info: #8ab4f8;
  --md-sys-color-on-info: #041e49;
  --md-sys-color-info-container: #174ea6;
  --md-sys-color-on-info-container: #d2e3fc;

  --md-sys-color-surface: #0b0f19;
  --md-sys-color-on-surface: #e2e8f0;
  --md-sys-color-surface-variant: #1f2937;
  --md-sys-color-on-surface-variant: #94a3b8;
  --md-sys-color-surface-dim: #06080f;
  --md-sys-color-surface-bright: #1f2937;

  --md-sys-color-surface-container-lowest: #06080f;
  --md-sys-color-surface-container-low: #0b0f19;
  --md-sys-color-surface-container: #111827;
  --md-sys-color-surface-container-high: #1f2937;
  --md-sys-color-surface-container-highest: #374151;

  --md-sys-color-outline: #64748b;
  --md-sys-color-outline-variant: #334155;
}

@theme {

  --color-accent-warm: var(--accent-warm);
  --color-accent-warm-soft: var(--accent-warm-soft);
  --color-accent-2: var(--accent-2);

  --color-danger: var(--color-danger);
  --color-warning: var(--color-warning);
  --color-success: var(--color-success);
  --color-status-online: var(--status-online);

  --shadow-elevation-1: var(--elevation-1);
  --shadow-elevation-2: var(--elevation-2);
  --shadow-elevation-3: var(--elevation-3);

  --radius-sm: 0.5rem;
  --radius-card: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;

  --spacing-page-x: 1.5rem;
  --spacing-page-y: 1.5rem;
  --spacing-card: 1.25rem;

  /* Google Material 3 Expressive Theme Mappings */
  --color-md-sys-primary: var(--md-sys-color-primary);
  --color-md-sys-on-primary: var(--md-sys-color-on-primary);
  --color-md-sys-primary-container: var(--md-sys-color-primary-container);
  --color-md-sys-on-primary-container: var(--md-sys-color-on-primary-container);

  --color-md-sys-secondary: var(--md-sys-color-secondary);
  --color-md-sys-on-secondary: var(--md-sys-color-on-secondary);
  --color-md-sys-secondary-container: var(--md-sys-color-secondary-container);
  --color-md-sys-on-secondary-container: var(--md-sys-color-on-secondary-container);

  --color-md-sys-tertiary: var(--md-sys-color-tertiary);
  --color-md-sys-on-tertiary: var(--md-sys-color-on-tertiary);
  --color-md-sys-tertiary-container: var(--md-sys-color-tertiary-container);
  --color-md-sys-on-tertiary-container: var(--md-sys-color-on-tertiary-container);

  --color-md-sys-error: var(--md-sys-color-error);
  --color-md-sys-on-error: var(--md-sys-color-on-error);
  --color-md-sys-error-container: var(--md-sys-color-error-container);
  --color-md-sys-on-error-container: var(--md-sys-color-on-error-container);

  --color-md-sys-success: var(--md-sys-color-success);
  --color-md-sys-on-success: var(--md-sys-color-on-success);
  --color-md-sys-success-container: var(--md-sys-color-success-container);
  --color-md-sys-on-success-container: var(--md-sys-color-on-success-container);

  --color-md-sys-warning: var(--md-sys-color-warning);
  --color-md-sys-on-warning: var(--md-sys-color-on-warning);
  --color-md-sys-warning-container: var(--md-sys-color-warning-container);
  --color-md-sys-on-warning-container: var(--md-sys-color-on-warning-container);

  --color-md-sys-info: var(--md-sys-color-info);
  --color-md-sys-on-info: var(--md-sys-color-on-info);
  --color-md-sys-info-container: var(--md-sys-color-info-container);
  --color-md-sys-on-info-container: var(--md-sys-color-on-info-container);

  --color-md-sys-surface: var(--md-sys-color-surface);
  --color-md-sys-on-surface: var(--md-sys-color-on-surface);
  --color-md-sys-surface-dim: var(--md-sys-color-surface-dim);
  --color-md-sys-surface-bright: var(--md-sys-color-surface-bright);

  --color-md-sys-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
  --color-md-sys-surface-container-low: var(--md-sys-color-surface-container-low);
  --color-md-sys-surface-container: var(--md-sys-color-surface-container);
  --color-md-sys-surface-container-high: var(--md-sys-color-surface-container-high);
  --color-md-sys-surface-container-highest: var(--md-sys-color-surface-container-highest);

  --color-md-sys-surface-variant: var(--md-sys-color-surface-variant);
  --color-md-sys-on-surface-variant: var(--md-sys-color-on-surface-variant);
  --color-md-sys-outline: var(--md-sys-color-outline);
  --color-md-sys-outline-variant: var(--md-sys-color-outline-variant);

  --radius-md-sys-none: var(--md-sys-shape-corner-none);
  --radius-md-sys-xs: var(--md-sys-shape-corner-xs);
  --radius-md-sys-sm: var(--md-sys-shape-corner-sm);
  --radius-md-sys-md: var(--md-sys-shape-corner-md);
  --radius-md-sys-lg: var(--md-sys-shape-corner-lg);
  --radius-md-sys-xl: var(--md-sys-shape-corner-xl);
  --radius-md-sys-full: var(--md-sys-shape-corner-full);

  --ease-md-sys-emphasized: var(--md-sys-motion-easing-emphasized);
  --ease-md-sys-decelerate: var(--md-sys-motion-easing-emphasized-decelerate);
  --ease-md-sys-accelerate: var(--md-sys-motion-easing-emphasized-accelerate);
}

/* Google Material 3 Expressive Typography Scale */
.m3-display-large {
  font-size: 3.5625rem;
  line-height: 4rem;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.m3-display-medium {
  font-size: 2.8125rem;
  line-height: 3.25rem;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.m3-display-small {
  font-size: 2.25rem;
  line-height: 2.75rem;
  letter-spacing: 0;
  font-weight: 400;
}
.m3-headline-large {
  font-size: 2rem;
  line-height: 2.5rem;
  letter-spacing: 0;
  font-weight: 600;
}
.m3-headline-medium {
  font-size: 1.75rem;
  line-height: 2.25rem;
  letter-spacing: 0;
  font-weight: 600;
}
.m3-headline-small {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0;
  font-weight: 600;
}
.m3-title-large {
  font-size: 1.375rem;
  line-height: 1.75rem;
  letter-spacing: 0;
  font-weight: 600;
}
.m3-title-medium {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.009em;
  font-weight: 600;
}
.m3-title-small {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.007em;
  font-weight: 600;
}
.m3-body-large {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.031em;
  font-weight: 400;
}
.m3-body-medium {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.018em;
  font-weight: 400;
}
.m3-body-small {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.033em;
  font-weight: 400;
}
.m3-label-large {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.007em;
  font-weight: 500;
}
.m3-label-medium {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.033em;
  font-weight: 500;
}
.m3-label-small {
  font-size: 0.6875rem;
  line-height: 1rem;
  letter-spacing: 0.045em;
  font-weight: 500;
}

/* Google Material 3 Expressive Component Utilities */
.m3-button-filled {
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-weight: 500;
  padding: 0.625rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized);
}
.m3-button-filled:hover {
  filter: brightness(1.05);
  box-shadow: var(--elevation-2);
}
.m3-button-filled:active {
  transform: scale(0.98);
}

.m3-button-tonal {
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 500;
  padding: 0.625rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized);
}
.m3-button-tonal:hover {
  filter: brightness(0.96);
}
.m3-button-tonal:active {
  transform: scale(0.98);
}

.m3-button-outlined {
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
  font-weight: 500;
  padding: 0.625rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized);
}
.m3-button-outlined:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.m3-button-outlined:active {
  transform: scale(0.98);
}

.m3-button-text {
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-primary);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized);
}
.m3-button-text:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.m3-button-text:active {
  transform: scale(0.98);
}

.m3-button-fab {
  border-radius: var(--md-sys-shape-corner-xl);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  padding: 1rem;
  box-shadow: var(--elevation-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized);
}
.m3-button-fab:hover {
  filter: brightness(1.05);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.25);
}
.m3-button-fab:active {
  transform: scale(0.96);
}

.m3-card {
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-xl);
  border: 1px solid var(--md-sys-color-outline-variant);
  padding: 1.5rem;
  transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized);
}

.m3-card-interactive {
  cursor: pointer;
}
.m3-card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2);
}
.m3-card-interactive:active {
  transform: scale(0.99);
}

.m3-chip {
  border-radius: var(--md-sys-shape-corner-full);
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized);
}
.m3-chip-selected {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

.m3-dialog {
  border-radius: 1.75rem; /* 28px */
  background-color: var(--md-sys-color-surface-container-highest);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 40%, transparent);
  box-shadow: var(--elevation-3);
}

.m3-sheet {
  background-color: var(--md-sys-color-surface-container-highest);
  border-left: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 40%, transparent);
  box-shadow: var(--elevation-3);
}

.m3-focus-ring {
  outline: none;
}
.m3-focus-ring:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}


:root {
  --font-size-base: 18px;
  font: var(--font-size-base)/145% var(--font-dm-sans), var(--sans, system-ui, "Segoe UI", Roboto, sans-serif);
  letter-spacing: 0.18px;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 1024px) {
    font-size: 16px;
  }
}

html,
body {
  min-height: 100vh;
}

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--app-text);
}

/* The landing deck renders on a fixed, uniformly-scaled canvas. Keep the root
   font size stable there so rem-based slide text isn't shrunk a second time by
   the global ≤1024px step above — that would break the "identical at every
   size" guarantee. Specificity (0,1,1) beats the :root media rule. */
html:has(.landing-grid-bg) {
  font-size: 18px;
}

/* Report layout: scrollbar (theme-aware) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.08);
}

/* Full-height views (Links, Network): single internal scroll, no outer page scroll */
#viewContainer:has([data-full-height]) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#viewContainer:has([data-full-height]) > .fade-in {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.fade-in {
  animation: fadeIn var(--dur-base, 0.3s) var(--ease-out, ease-in-out);
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.tab-active {
  background-color: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}

h1,
h2 {
  font-family: var(--heading, system-ui, "Segoe UI", Roboto, sans-serif);
  font-weight: 500;
  color: var(--text-h);
}

/* Reset h1 — app views use Tailwind (text-3xl, mb-*, etc.). Legacy hero margins caused a huge gap under the top nav. */
h1 {
  margin: 0;
  font-size: inherit;
  letter-spacing: inherit;
}
h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
p {
  margin: 0;
}

code,
.counter {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
}

code {
  font-size: 15px;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
}

/* Chat shell layout — explicit breakpoints so sidebar participates in flex on desktop */
.chat-sidebar-rail {
  position: relative;
  z-index: 40;
  display: flex;
  height: 100%;
  width: 3.5rem;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  border-right: 1px solid var(--app-border-muted);
  background: var(--app-bg-elevated);
  padding: 0.75rem 0;
}

.chat-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  border: 0;
  background: var(--app-overlay);
}

.chat-sidebar-panel {
  z-index: 40;
  display: flex;
  height: 100%;
  width: 17.5rem;
  flex-shrink: 0;
  flex-direction: column;
  border-right: 1px solid var(--app-border-muted);
  background: var(--app-bg-elevated);
}

@media (max-width: 767px) {
  .chat-sidebar-backdrop {
    display: block;
  }

  .chat-sidebar-panel {
    position: fixed;
    inset: 0 auto 0 0;
  }
}

@media (min-width: 768px) {
  .chat-sidebar-backdrop {
    display: none;
  }

  .chat-sidebar-panel {
    position: relative;
  }
}

/* Chat shell — explicit height chain (flex-1 alone was not filling the viewport) */
.chat-shell-main {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: hidden;
}

.chat-main-panel {
  display: flex;
  height: 100%;
  min-height: 0;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: hidden;
}

.chat-context-bar {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

/* Grid pins composer to the bottom; messages scroll in the top row */
.chat-conversation {
  display: grid;
  min-height: 0;
  flex: 1 1 0%;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.chat-messages-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-composer-dock {
  border-top: 1px solid var(--app-border-muted);
  background: color-mix(in srgb, var(--app-bg) 92%, transparent);
  backdrop-filter: blur(8px);
}

/* Chat page ambient glow */
.chat-glow {
  background: radial-gradient(
    ellipse 90% 60% at 50% 42%,
    var(--chat-glow) 0%,
    var(--chat-glow-secondary) 40%,
    transparent 72%
  );
}

.chat-hero-input {
  box-shadow:
    0 0 0 1px var(--app-border),
    var(--elevation-2);
}

.chat-hero-input:focus-within {
  box-shadow:
    0 0 0 1px var(--accent-border),
    var(--elevation-3);
}

/* Chat markdown prose */
.chat-prose {
  color: var(--app-text);
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-prose-h1,
.chat-prose-h2,
.chat-prose-h3 {
  color: var(--app-text-heading);
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}

.chat-prose-h1 { font-size: 1.125rem; }
.chat-prose-h2 { font-size: 1rem; }
.chat-prose-h3 {
  font-size: 0.9375rem;
  margin-top: 1.25rem;
  padding-top: 0.25rem;
  color: var(--app-text-heading);
}

.chat-prose > h3:first-child,
.chat-prose > h4:first-child,
.chat-prose > h5:first-child {
  margin-top: 0;
}

.chat-prose-p {
  margin: 0.5rem 0;
}

.chat-prose-ul,
.chat-prose-ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.chat-prose-li {
  margin: 0.25rem 0;
}

.chat-prose-a {
  color: var(--app-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.chat-prose-blockquote {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--app-border);
  border-radius: 0 0.375rem 0.375rem 0;
  color: var(--app-text-subtle);
  background: rgb(255 255 255 / 0.02);
}

.chat-prose-insight {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid rgb(245 158 11 / 0.55);
  border-radius: 0 0.375rem 0.375rem 0;
  background: rgb(245 158 11 / 0.08);
  color: var(--app-text);
}

.chat-prose-insight-title {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border-left: 3px solid rgb(245 158 11 / 0.55);
  background: rgb(245 158 11 / 0.08);
  color: rgb(253 230 138 / 0.95);
}

.chat-prose > .chat-prose-insight-title:first-child {
  margin-top: 0;
}

.chat-prose-ol {
  counter-reset: chat-rec;
}

.chat-prose-ol > .chat-prose-li {
  margin: 0.5rem 0;
  padding-left: 0.25rem;
}

.chat-prose-ol > .chat-prose-li::marker {
  font-weight: 600;
  color: var(--accent, rgb(96 165 250));
}

.chat-prose-hr {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--app-border-muted);
}

.chat-prose-table-wrap {
  margin: 0.75rem 0;
  overflow-x: auto;
}