/* ============================================================
   AGCNET 客服 UI — Design Tokens (P8-C)
   ============================================================
   單一事實來源：所有顏色 / 間距 / 字級 / 圓角 / 陰影 / 動畫
   都從這裡定義，禁止在其他 CSS 寫 hard-coded 值。

   Light mode (預設) 在 :root，Dark mode 在 [data-theme="dark"]。
   Dark mode 已備但尚未啟用，未來加 toggle 即可生效。

   原則：
   1. Phase C 目的是建立 token 系統，視覺零變化 — brand-primary
      暫保留 #007bff (Bootstrap default) 以避免破壞現有畫面。
      未來 phase 想改企業色時只動這一行。
   2. 顏色語意化（confidence-high vs success 分開）— 客服場景需要
      區分「成功操作」與「信心度高」兩種綠。
   ============================================================ */

:root {
  /* ──────────────────────────────────────────────
     COLOR — Brand
     ────────────────────────────────────────────── */
  --color-brand-primary: #1E5AC4;           /* 企業深藍（客戶版）*/
  --color-brand-primary-hover: #17489E;
  --color-brand-secondary: #4A90E2;
  --color-brand-on: #ffffff;                /* 寫在 brand 色上的文字色 */
  --gradient-brand: linear-gradient(135deg, #1E5AC4 0%, #2E6FE0 100%);  /* 頁首 */

  /* ──────────────────────────────────────────────
     COLOR — Semantic (操作結果)
     ────────────────────────────────────────────── */
  --color-success: #28a745;
  --color-success-hover: #218838;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-danger-hover: #c82333;
  --color-info: #17a2b8;

  /* ──────────────────────────────────────────────
     COLOR — Confidence (AI 信心度，與 semantic 區分)
     ────────────────────────────────────────────── */
  --color-confidence-high: #28a745;
  --color-confidence-medium: #6c757d;
  --color-confidence-low: #ed6c02;

  /* ──────────────────────────────────────────────
     COLOR — Surface 背景層
     ────────────────────────────────────────────── */
  --color-bg-page: #f8f9fa;                 /* body */
  --color-bg-surface: #ffffff;              /* chat container、card */
  --color-bg-elevated: #ffffff;             /* dropdown、popover */
  --color-bg-subtle: #f8f9fa;               /* feedback detail、interrupted note */
  --color-bg-muted: #e9ecef;                /* assistant message bubble */
  --color-bg-overlay: rgba(0, 0, 0, 0.5);   /* modal backdrop */
  --color-bg-hover: #f0f0f0;                /* button / item hover */

  /* ──────────────────────────────────────────────
     COLOR — Text
     ────────────────────────────────────────────── */
  --color-text-primary: #212529;
  --color-text-secondary: #495057;
  --color-text-tertiary: #6c757d;           /* muted */
  --color-text-disabled: #adb5bd;
  --color-text-on-brand: #ffffff;           /* 寫在 brand-primary 上 */
  --color-text-link: var(--color-brand-primary);

  /* ──────────────────────────────────────────────
     COLOR — Border
     ────────────────────────────────────────────── */
  --color-border-subtle: #f0f0f0;
  --color-border-default: #dee2e6;
  --color-border-strong: #adb5bd;

  /* ──────────────────────────────────────────────
     COLOR — Chat-specific 對話特定色
     ────────────────────────────────────────────── */
  --color-chat-user-bg: var(--color-brand-primary);
  --color-chat-user-text: var(--color-text-on-brand);
  --color-chat-assistant-bg: var(--color-bg-muted);
  --color-chat-assistant-text: var(--color-text-primary);
  --color-chat-system-bg: var(--color-bg-subtle);
  --color-chat-system-text: var(--color-text-tertiary);
  --color-chat-system-border: var(--color-border-default);

  /* ──────────────────────────────────────────────
     COLOR — Alert backgrounds（建議卡、提示）
     ────────────────────────────────────────────── */
  --color-alert-warning-bg: #fff3cd;
  --color-alert-warning-border: #ffc107;
  --color-alert-warning-text: #856404;
  --color-alert-info-bg: #d1ecf1;
  --color-alert-info-border: #bee5eb;
  --color-alert-info-text: #0c5460;
  --color-alert-success-bg: #d1e7dd;
  --color-alert-danger-bg: #f8d7da;
  --color-alert-diagnostic-bg: #cff4fc;
  --color-alert-diagnostic-border: #0dcaf0;

  /* ──────────────────────────────────────────────
     COLOR — UI elements
     ────────────────────────────────────────────── */
  --color-typing-dot: #9e9ea1;
  --color-scrollbar-track: #f1f1f1;
  --color-scrollbar-thumb: #c1c1c1;
  --color-scrollbar-thumb-hover: #a8a8a8;
  --color-highlight-bg: #fff3cd;            /* autocomplete <mark> */

  /* ──────────────────────────────────────────────
     SPACING — 8pt grid
     ────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ──────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────── */
  --font-family-cn: 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', sans-serif;
  --font-family-en: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono: Consolas, Monaco, 'Andale Mono', monospace;
  --font-family-base: var(--font-family-cn);

  --font-size-xs: 0.72em;
  --font-size-sm: 0.85em;
  --font-size-base: 1em;
  --font-size-lg: 1.1em;
  --font-size-xl: 1.25em;
  --font-size-2xl: 1.5em;
  --font-size-3xl: 2em;

  /* 訊息相關專用字級 */
  --font-size-message: 1em;
  --font-size-message-mobile: 0.95em;
  --font-size-meta: 0.85em;                 /* 時間、來源、信心度 */
  --font-size-caption: 0.72em;              /* 最小註解 */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ──────────────────────────────────────────────
     RADIUS
     ────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;                        /* chat container, message bubble（更圓潤）*/
  --radius-xl: 18px;                        /* pill chip */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ──────────────────────────────────────────────
     SHADOWS — 層級式 elevation
     ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(16, 36, 74, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 36, 74, 0.06);
  --shadow-md: 0 6px 24px rgba(16, 36, 74, 0.08);   /* chat container（柔和現代陰影）*/
  --shadow-lg: 0 8px 24px rgba(16, 36, 74, 0.12);   /* dropdown / card */
  --shadow-xl: 0 16px 40px rgba(16, 36, 74, 0.16);
  --shadow-danger: 0 2px 8px rgba(220, 53, 69, 0.3); /* stop button */
  --shadow-focus: 0 0 0 3px rgba(30, 90, 196, 0.25);

  /* ──────────────────────────────────────────────
     Z-INDEX 階層
     ────────────────────────────────────────────── */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-popover: 1500;
  --z-tooltip: 2000;
  --z-toast: 3000;

  /* ──────────────────────────────────────────────
     ANIMATION
     ────────────────────────────────────────────── */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ──────────────────────────────────────────────
     LAYOUT
     ────────────────────────────────────────────── */
  --layout-chat-container-offset: 150px;        /* viewport-高度 - 偏移 */
  --layout-chat-container-offset-mobile: 130px;
  --layout-message-max-width: 80%;
  --layout-message-max-width-mobile: 90%;
  --layout-system-message-width: 90%;
  --layout-system-message-width-mobile: 95%;
  --layout-touch-target-min: 36px;              /* WCAG 觸控最小尺寸 */
  --layout-touch-target-comfortable: 44px;
}

/* ============================================================
   DARK MODE — 已備好，未啟用
   ============================================================
   啟用方式：在 <html> 加 data-theme="dark"
   或加 JS toggle：document.documentElement.dataset.theme = 'dark'
   ============================================================ */
[data-theme="dark"] {
  --color-brand-primary: #4A90E2;
  --color-brand-primary-hover: #5BA0F2;

  --color-bg-page: #0F1419;
  --color-bg-surface: #1A1F26;
  --color-bg-elevated: #232A33;
  --color-bg-subtle: #1A1F26;
  --color-bg-muted: #2D3640;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);
  --color-bg-hover: #2D3640;

  --color-text-primary: #E6EDF3;
  --color-text-secondary: #C9D1D9;
  --color-text-tertiary: #8B949E;
  --color-text-disabled: #484F58;

  --color-border-subtle: #1F2429;
  --color-border-default: #2D3640;
  --color-border-strong: #484F58;

  --color-chat-assistant-bg: #232A33;
  --color-chat-system-bg: #1A1F26;

  --color-alert-warning-bg: #4A3700;
  --color-alert-warning-text: #FFD700;
  --color-alert-info-bg: #003D52;
  --color-alert-info-text: #4DD0E1;
  --color-alert-success-bg: #1B5E20;
  --color-alert-danger-bg: #4A1A1A;
  --color-alert-diagnostic-bg: #003D52;

  --color-scrollbar-track: #1A1F26;
  --color-scrollbar-thumb: #484F58;
  --color-scrollbar-thumb-hover: #6E7681;

  --color-typing-dot: #6E7681;
  --color-highlight-bg: #5C4900;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   減少動畫偏好 — 尊重 prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}