/* TextAI shared design tokens.
   Business rule: red is never used. Destructive intent maps to magenta
   (#d946ef), cautionary intent to amber (#f59e0b). */

/* Author rules such as `.login { display: grid }` outrank the user-agent
   `[hidden] { display: none }`, so elements toggled through the `hidden`
   attribute must be pinned here. */
[hidden] {
  display: none !important;
}

:root {
  --bg: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #eef0f8;
  --fg: #0f172a;
  --fg-soft: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --primary: #6366f1;
  --primary-soft: #e0e7ff;
  --primary-fg: #ffffff;
  --accent: #d946ef;
  --accent-soft: #fae8ff;
  --warning: #f59e0b;
  --warning-soft: #fef3c7;
  --success: #16a34a;
  --success-soft: #dcfce7;
  --info: #0ea5e9;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --radius: 12px;
  --radius-sm: 8px;
}

[data-theme='dark'] {
  --bg: #0b1120;
  --surface: #111a2e;
  --surface-2: #17223a;
  --fg: #e2e8f0;
  --fg-soft: #cbd5e1;
  --muted: #94a3b8;
  --line: #1e293b;
  --primary: #818cf8;
  --primary-soft: #1e1b4b;
  --primary-fg: #0b1120;
  --accent: #e879f9;
  --accent-soft: #3b0764;
  --warning: #fbbf24;
  --warning-soft: #422006;
  --success: #4ade80;
  --success-soft: #052e16;
  --info: #38bdf8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

button, input, textarea, select { font: inherit; color: inherit; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
}

.status-online { color: var(--success); background: var(--success-soft); }
.status-busy { color: var(--warning); background: var(--warning-soft); }
.status-offline { color: var(--muted); background: var(--surface-2); }
.status-queued { color: var(--info); background: var(--surface-2); }
.status-closed { color: var(--accent); background: var(--accent-soft); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }