/* ============================================================
   allchat — Design System (shared theme tokens)
   ------------------------------------------------------------
   Single source of truth for the 3 themes. Link this from a page
   and the page's own duplicate token blocks can be removed.

   Default (:root)        → Premium Dark   (charcoal + champagne gold)
   [data-theme="dark"]    → Neutral Dark   (steel blue accent)
   [data-theme="light"]   → Light          (LINE green accent)

   NOTE: token NAMES match the existing per-page blocks exactly, so
   only the *values* change — no markup/JS needs to be touched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

/* ── Premium Dark (default brand theme) ───────────────────── */
:root {
  /* Surfaces */
  --bg-primary: #0E0F13;
  --bg-secondary: #16181D;
  --bg-tertiary: #1E2128;
  --bg-card: rgba(22, 24, 29, 0.72);
  --bg-card-hover: rgba(30, 33, 40, 0.92);
  --bg-input: rgba(13, 14, 18, 0.85);
  --bg-input-focus: rgba(20, 22, 28, 1);
  --bg-overlay: rgba(14, 15, 19, 0.72);
  --bg-overlay-deep: rgba(14, 15, 19, 0.5);
  --bg-overlay-modal: rgba(0, 0, 0, 0.8);

  /* Text */
  --text-primary: #ECECEE;
  --text-secondary: rgba(236, 236, 238, 0.64);
  --text-muted: rgba(236, 236, 238, 0.40);
  --text-on-accent: #1A1407;
  --text-dim: rgba(236, 236, 238, 0.46);

  /* Accent — champagne gold */
  --accent: #D9B45B;
  --accent-dark: #B7913C;
  --accent-glow: rgba(217, 180, 91, 0.22);
  --accent-subtle: rgba(217, 180, 91, 0.10);
  --accent-border: rgba(217, 180, 91, 0.22);
  --accent-border-hover: rgba(217, 180, 91, 0.45);
  --accent-text: rgba(217, 180, 91, 0.80);
  --accent-text-strong: rgba(217, 180, 91, 0.96);

  /* Lines & surfaces */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-muted: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.05);
  --surface-active: rgba(255, 255, 255, 0.10);
  --surface-subtle: rgba(255, 255, 255, 0.05);
  --surface-faint: rgba(255, 255, 255, 0.03);
  --scrollbar-track: rgba(0, 0, 0, 0.25);
  --sidebar-bg: rgba(14, 15, 19, 0.40);

  /* Glow / ambient */
  --shadow-glow: 0 8px 30px rgba(217, 180, 91, 0.14);
  --body-bg-before-1: rgba(217, 180, 91, 0.06);
  --body-bg-before-2: rgba(217, 180, 91, 0.03);

  /* Chat bubbles */
  --bubble-other-bg: rgba(255, 255, 255, 0.06);
  --bubble-other-text: #ECECEE;
  --bubble-me-bg: #3A3320;
  --bubble-me-text: #F5ECD2;
  --bubble-other-bg-solid: #20232B;
  --bubble-other-text-solid: #ECECEE;
  --audio-bubble-bg: #1E2128;

  /* Presence */
  --status-offline-bg: rgba(255, 255, 255, 0.06);
  --status-offline-color: rgba(255, 255, 255, 0.50);
  --status-offline-border: rgba(255, 255, 255, 0.12);
  --status-offline-dot: rgba(255, 255, 255, 0.40);

  /* Misc components */
  --sticky-header-bg: #16181D;
  --sticky-header-text: var(--accent);
  --time-color: #8A8A92;
  --link-color: var(--accent);
  --input-inline-bg: rgba(0, 0, 0, 0.30);
  --input-inline-border: var(--accent-border);
  --btn-cancel-border: rgba(255, 255, 255, 0.18);
  --btn-cancel-color: rgba(255, 255, 255, 0.60);
  --note-date-color: rgba(255, 255, 255, 0.30);
  --loading-color: var(--accent);
  --empty-color: #6A6A72;
  --error-color: #ff6b6b;
  --desc-color: #9A9AA2;
  --label-color: #CFCFD6;

  /* Danger */
  --danger-bg: rgba(255, 80, 80, 0.10);
  --danger-border: rgba(255, 80, 80, 0.25);
  --danger-color: rgba(255, 90, 90, 0.95);
  --danger-bg-hover: rgba(255, 80, 80, 0.18);
  --danger-border-hover: rgba(255, 80, 80, 0.40);
  --danger-color-hover: #ff5a5a;

  /* Follow-up (amber) */
  --followup-bg: rgba(255, 200, 50, 0.10);
  --followup-border: rgba(255, 200, 50, 0.30);
  --followup-color: rgba(255, 200, 50, 0.90);
  --followup-bg-hover: rgba(255, 200, 50, 0.18);
  --followup-border-hover: rgba(255, 200, 50, 0.45);
  --followup-color-hover: #ffc832;

  /* Tags */
  --tag-blue-bg: rgba(59, 130, 246, 0.15);
  --tag-blue-color: #60a5fa;
  --tag-blue-border: rgba(59, 130, 246, 0.30);
  --tag-red-bg: rgba(239, 68, 68, 0.15);
  --tag-red-color: #f87171;
  --tag-red-border: rgba(239, 68, 68, 0.30);
  --tag-yellow-bg: rgba(245, 158, 11, 0.15);
  --tag-yellow-color: #fbbf24;
  --tag-yellow-border: rgba(245, 158, 11, 0.30);
  --tag-purple-bg: rgba(139, 92, 246, 0.15);
  --tag-purple-color: #a78bfa;
  --tag-purple-border: rgba(139, 92, 246, 0.30);

  /* ── Foundation primitives (new) ── */
  --font-sans: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', ui-monospace, monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.38);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.52);
  --ring: 0 0 0 3px var(--accent-subtle);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Neutral Dark (steel blue) ────────────────────────────── */
[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2a2a2a;
  --bg-card: rgba(30, 30, 30, 0.7);
  --bg-card-hover: rgba(42, 42, 42, 0.9);
  --bg-input: rgba(30, 30, 30, 0.8);
  --bg-input-focus: rgba(42, 42, 42, 1);
  --bg-overlay: rgba(18, 18, 18, 0.7);
  --bg-overlay-deep: rgba(18, 18, 18, 0.4);
  --bg-overlay-modal: rgba(0, 0, 0, 0.85);
  --text-primary: #e0e0e0;
  --text-secondary: rgba(224, 224, 224, 0.7);
  --text-muted: rgba(224, 224, 224, 0.4);
  --text-on-accent: #ffffff;
  --text-dim: rgba(224, 224, 224, 0.45);
  --accent: #5b9cf5;
  --accent-dark: #4a8ae6;
  --accent-glow: rgba(91, 156, 245, 0.3);
  --accent-subtle: rgba(91, 156, 245, 0.1);
  --accent-border: rgba(91, 156, 245, 0.2);
  --accent-border-hover: rgba(91, 156, 245, 0.4);
  --accent-text: rgba(91, 156, 245, 0.7);
  --accent-text-strong: rgba(91, 156, 245, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-muted: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-active: rgba(255, 255, 255, 0.12);
  --surface-subtle: rgba(255, 255, 255, 0.04);
  --surface-faint: rgba(255, 255, 255, 0.03);
  --scrollbar-track: rgba(0, 0, 0, 0.3);
  --sidebar-bg: rgba(18, 18, 18, 0.4);
  --shadow-glow: 0 4px 20px rgba(91, 156, 245, 0.2);
  --body-bg-before-1: rgba(91, 156, 245, 0.06);
  --body-bg-before-2: rgba(91, 156, 245, 0.03);
  --bubble-other-bg: rgba(255, 255, 255, 0.08);
  --bubble-other-text: #e0e0e0;
  --bubble-me-bg: #2a2a2a;
  --bubble-me-text: #e0e0e0;
  --bubble-other-bg-solid: #3a3a3a;
  --bubble-other-text-solid: #e0e0e0;
  --audio-bubble-bg: #2a2a2a;
  --status-offline-bg: rgba(255, 255, 255, 0.06);
  --status-offline-color: rgba(255, 255, 255, 0.45);
  --status-offline-border: rgba(255, 255, 255, 0.1);
  --status-offline-dot: rgba(255, 255, 255, 0.35);
  --sticky-header-bg: #1e1e1e;
  --sticky-header-text: var(--accent);
  --time-color: #888888;
  --link-color: var(--accent);
  --input-inline-bg: rgba(0, 0, 0, 0.3);
  --input-inline-border: var(--accent-border);
  --btn-cancel-border: rgba(255, 255, 255, 0.2);
  --btn-cancel-color: rgba(255, 255, 255, 0.6);
  --note-date-color: rgba(255, 255, 255, 0.3);
  --loading-color: var(--accent);
  --empty-color: #888888;
  --error-color: #ff6b6b;
  --desc-color: #999999;
  --label-color: #cccccc;
  --danger-bg: rgba(255, 80, 80, 0.1);
  --danger-border: rgba(255, 80, 80, 0.25);
  --danger-color: rgba(255, 80, 80, 0.9);
  --danger-bg-hover: rgba(255, 80, 80, 0.18);
  --danger-border-hover: rgba(255, 80, 80, 0.4);
  --danger-color-hover: #ff5050;
  --followup-bg: rgba(255, 200, 50, 0.1);
  --followup-border: rgba(255, 200, 50, 0.3);
  --followup-color: rgba(255, 200, 50, 0.9);
  --followup-bg-hover: rgba(255, 200, 50, 0.18);
  --followup-border-hover: rgba(255, 200, 50, 0.45);
  --followup-color-hover: #ffc832;
  --tag-blue-bg: rgba(59, 130, 246, 0.15);
  --tag-blue-color: #60a5fa;
  --tag-blue-border: rgba(59, 130, 246, 0.3);
  --tag-red-bg: rgba(239, 68, 68, 0.15);
  --tag-red-color: #f87171;
  --tag-red-border: rgba(239, 68, 68, 0.3);
  --tag-yellow-bg: rgba(245, 158, 11, 0.15);
  --tag-yellow-color: #fbbf24;
  --tag-yellow-border: rgba(245, 158, 11, 0.3);
  --tag-purple-bg: rgba(139, 92, 246, 0.15);
  --tag-purple-color: #a78bfa;
  --tag-purple-border: rgba(139, 92, 246, 0.3);
}

/* ── Light (LINE green) ───────────────────────────────────── */
[data-theme="light"] {
  --bg-primary: #f0f2f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e8ecf0;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-card-hover: rgba(255, 255, 255, 1);
  --bg-input: rgba(240, 242, 245, 0.8);
  --bg-input-focus: rgba(255, 255, 255, 1);
  --bg-overlay: rgba(240, 242, 245, 0.9);
  --bg-overlay-deep: rgba(255, 255, 255, 0.6);
  --bg-overlay-modal: rgba(0, 0, 0, 0.5);
  --text-primary: #1a1a2e;
  --text-secondary: rgba(26, 26, 46, 0.7);
  --text-muted: rgba(26, 26, 46, 0.45);
  --text-on-accent: #ffffff;
  --text-dim: rgba(26, 26, 46, 0.5);
  --accent: #06c755;
  --accent-dark: #05a647;
  --accent-glow: rgba(6, 199, 85, 0.25);
  --accent-subtle: rgba(6, 199, 85, 0.08);
  --accent-border: rgba(6, 199, 85, 0.2);
  --accent-border-hover: rgba(6, 199, 85, 0.4);
  --accent-text: rgba(6, 199, 85, 0.8);
  --accent-text-strong: rgba(6, 199, 85, 0.9);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-muted: rgba(0, 0, 0, 0.05);
  --surface-hover: rgba(0, 0, 0, 0.04);
  --surface-active: rgba(0, 0, 0, 0.08);
  --surface-subtle: rgba(0, 0, 0, 0.04);
  --surface-faint: rgba(0, 0, 0, 0.03);
  --scrollbar-track: rgba(0, 0, 0, 0.06);
  --sidebar-bg: rgba(240, 242, 245, 0.6);
  --shadow-glow: 0 4px 20px rgba(6, 199, 85, 0.15);
  --body-bg-before-1: rgba(6, 199, 85, 0.05);
  --body-bg-before-2: rgba(6, 199, 85, 0.03);
  --bubble-other-bg: rgba(0, 0, 0, 0.06);
  --bubble-other-text: #1a1a2e;
  --bubble-me-bg: #06c755;
  --bubble-me-text: #ffffff;
  --bubble-other-bg-solid: #ffffff;
  --bubble-other-text-solid: #1a1a2e;
  --audio-bubble-bg: #e8ecf0;
  --status-offline-bg: rgba(0, 0, 0, 0.06);
  --status-offline-color: rgba(0, 0, 0, 0.4);
  --status-offline-border: rgba(0, 0, 0, 0.1);
  --status-offline-dot: rgba(0, 0, 0, 0.25);
  --sticky-header-bg: #f0f2f5;
  --sticky-header-text: var(--accent);
  --time-color: #888888;
  --link-color: var(--accent);
  --input-inline-bg: rgba(0, 0, 0, 0.04);
  --input-inline-border: var(--accent-border);
  --btn-cancel-border: rgba(0, 0, 0, 0.15);
  --btn-cancel-color: rgba(0, 0, 0, 0.5);
  --note-date-color: rgba(0, 0, 0, 0.35);
  --loading-color: var(--accent);
  --empty-color: #999999;
  --error-color: #dc3545;
  --desc-color: #666666;
  --label-color: #444444;
  --danger-bg: rgba(220, 53, 69, 0.1);
  --danger-border: rgba(220, 53, 69, 0.25);
  --danger-color: #dc3545;
  --danger-bg-hover: rgba(220, 53, 69, 0.18);
  --danger-border-hover: rgba(220, 53, 69, 0.4);
  --danger-color-hover: #c82333;
  --followup-bg: rgba(255, 193, 7, 0.12);
  --followup-border: rgba(255, 193, 7, 0.3);
  --followup-color: #d4a017;
  --followup-bg-hover: rgba(255, 193, 7, 0.22);
  --followup-border-hover: rgba(255, 193, 7, 0.5);
  --followup-color-hover: #b8860b;
  --tag-blue-bg: rgba(37, 99, 235, 0.1);
  --tag-blue-color: #2563eb;
  --tag-blue-border: rgba(37, 99, 235, 0.25);
  --tag-red-bg: rgba(220, 53, 69, 0.1);
  --tag-red-color: #dc3545;
  --tag-red-border: rgba(220, 53, 69, 0.25);
  --tag-yellow-bg: rgba(202, 138, 4, 0.1);
  --tag-yellow-color: #ca8a04;
  --tag-yellow-border: rgba(202, 138, 4, 0.25);
  --tag-purple-bg: rgba(109, 40, 217, 0.1);
  --tag-purple-color: #7c3aed;
  --tag-purple-border: rgba(109, 40, 217, 0.25);
}

/* ============================================================
   Motion & smoothing layer — applies to every page that links
   this file. Page-specific rules still win (they load after),
   so this only *adds* smoothness where none was defined.
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Gentle baseline transition for interactive elements (no layout props,
   so it never causes reflow jank). */
a,
button,
[role="button"],
input,
select,
textarea,
summary,
label,
.theme-dropdown-item,
.theme-toggle-btn,
.pricing-card,
.btn {
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease),
    opacity 0.2s var(--ease);
}

/* Reusable entrance animations */
@keyframes lca-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lca-fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lca-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Soft, consistent scrollbars (page-specific styling still wins) */
* { scrollbar-width: thin; scrollbar-color: var(--accent-border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--accent-border);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s var(--ease);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-border-hover);
  background-clip: padding-box;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}