/*
 * tokens.css — Design tokens modernos (Linear/Vercel style)
 * Override-only: não modifica app.css nem qualquer outro arquivo.
 * Carregado APÓS app.css no index.html.
 */

/* ── 1. TOKENS GLOBAIS ────────────────────────────────────────────── */
:root {
  /* Fundo levemente acinzentado, mais quente */
  --main-bg:       #f5f7fa;
  --surface:       #ffffff;
  --surface-2:     #f0f4f8;

  /* Bordas sutis */
  --border:        #e4e9f0;
  --border-strong: #cdd5e0;

  /* Sombras minimalistas */
  --shadow:        0 1px 2px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md:     0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);

  /* Primária com gradiente */
  --primary:       #3b82f6;
  --primary-hover: #2563eb;
  --primary-light: rgba(59,130,246,0.08);
  --primary-ring:  rgba(59,130,246,0.18);
  --primary-grad:  linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

  /* Semânticas */
  --green-ok:      #22c55e;
  --green-bg:      rgba(34,197,94,0.1);
  --red-err:       #ef4444;
  --red-bg:        rgba(239,68,68,0.1);
  --amber-bg:      rgba(245,158,11,0.1);
  --purple-bg:     rgba(139,92,246,0.1);

  /* Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* Transição padrão */
  --t: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. NAV RAIL ──────────────────────────────────────────────────── */
.nav-rail {
  background: #0d1117;
  border-right: 1px solid rgba(255,255,255,0.04);
}
.nav-brand {
  border-bottom-color: rgba(255,255,255,0.04);
}
.nav-btn {
  border-radius: 10px;
  transition: var(--t);
}
.nav-btn:hover {
  background: rgba(255,255,255,0.07);
  color: #e2e8f0;
}
.nav-btn.active {
  background: var(--primary-grad);
  box-shadow: 0 2px 8px rgba(59,130,246,0.35);
  color: #fff;
}

/* ── 3. SIDEBAR ────────────────────────────────────────────────────── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 0 var(--border);
}
.sidebar-hdr {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 64px;
}
.sidebar-hdr h2 {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.sidebar-search {
  background: var(--surface);
  border-bottom-color: var(--border);
  padding: 10px 12px;
}
.sidebar-search input {
  background: var(--main-bg);
  border-color: var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  transition: var(--t);
}
.sidebar-search input:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

/* ── 4. CONVERSATION LIST ─────────────────────────────────────────── */
.conv-item {
  border-bottom: 1px solid var(--border);
  padding: 11px 14px;
  transition: background 150ms ease;
}
.conv-item:hover {
  background: var(--main-bg);
}
.conv-item.active {
  background: var(--primary-light);
  border-left-color: var(--primary);
}
.conv-tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.conv-tab {
  transition: var(--t);
  font-weight: 500;
}
.conv-tab:hover {
  background: var(--main-bg);
  color: var(--text);
}
.conv-tab.active {
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
}
.unread-badge {
  background: var(--primary-grad);
  box-shadow: 0 1px 4px rgba(59,130,246,0.3);
}

/* ── 5. CHAT AREA ─────────────────────────────────────────────────── */
.chat-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}
.send-btn {
  background: var(--primary-grad);
  border-radius: var(--r-full);
  box-shadow: 0 1px 4px rgba(59,130,246,0.25);
  font-weight: 600;
  transition: var(--t);
}
.send-btn:hover {
  background: var(--primary-hover);
  box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}
.input-area {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.input-area input {
  background: var(--main-bg);
  border-color: var(--border);
  border-radius: var(--r-full);
  transition: var(--t);
}
.input-area input:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.chat-hdr-btn {
  border-radius: var(--r-sm);
  border-color: var(--border);
  background: var(--main-bg);
  transition: var(--t);
}
.chat-hdr-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.bubble.received {
  box-shadow: var(--shadow);
  border-radius: 4px 16px 16px 16px;
}
.bubble.sent {
  background: var(--primary-grad);
  box-shadow: 0 1px 4px rgba(59,130,246,0.2);
}

/* ── 6. BOTÕES PRINCIPAIS ─────────────────────────────────────────── */
.btn-primary {
  background: var(--primary-grad);
  border-radius: var(--r-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 4px rgba(59,130,246,0.2);
  transition: var(--t);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}
.btn-outline {
  border-color: var(--border);
  border-radius: var(--r-sm);
  transition: var(--t);
  font-weight: 500;
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.btn-danger {
  border-color: rgba(239,68,68,0.3);
  border-radius: var(--r-sm);
  transition: var(--t);
}
.btn-danger:hover {
  background: var(--red-bg);
  border-color: rgba(239,68,68,0.5);
}
.btn-green {
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 1px 4px rgba(34,197,94,0.2);
  transition: var(--t);
}
.btn-green:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}
.btn-sm {
  border-radius: var(--r-sm);
  transition: var(--t);
}

/* ── 7. CONTACT PANEL ─────────────────────────────────────────────── */
.contact-panel {
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -1px 0 0 var(--border);
}
.cp-header {
  background: linear-gradient(180deg, #f8faff 0%, #f0f4f8 100%);
  border-bottom: 1px solid var(--border);
}
.cp-badge {
  background: var(--purple-bg);
  color: #7c3aed;
  font-weight: 600;
}
.cp-badge.human {
  background: rgba(20,184,166,0.1);
  color: #0f766e;
}
.cp-section {
  background: var(--main-bg);
  border-radius: var(--r-md);
}
.cp-select, .cp-textarea {
  border-color: var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: var(--t);
}
.cp-select:focus, .cp-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
  outline: none;
}

/* ── 8. CONFIG / SETTINGS ─────────────────────────────────────────── */
.config-section {
  border-color: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.config-section-header {
  border-bottom: 1px solid var(--border);
}
.config-input,
.config-select {
  border-color: var(--border);
  border-radius: var(--r-sm);
  background: var(--main-bg);
  transition: var(--t);
}
.config-input:focus,
.config-select:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.config-sidenav-btn {
  border-radius: var(--r-sm);
  transition: var(--t);
}
.config-sidenav-btn:hover {
  background: var(--main-bg);
  color: var(--text);
}
.config-sidenav-btn.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}
.voice-item {
  border-color: var(--border);
  border-radius: var(--r-md);
  transition: var(--t);
}
.voice-item:hover,
.voice-item.selected {
  border-color: var(--primary);
  background: var(--primary-light);
}
.voice-item-tag {
  background: rgba(59,130,246,0.1);
  color: var(--primary);
}
.range-value {
  background: rgba(59,130,246,0.1);
  color: var(--primary);
  border-radius: var(--r-sm);
}
.info-box {
  background: rgba(59,130,246,0.06);
  border-color: rgba(59,130,246,0.2);
  border-radius: var(--r-sm);
}
.connected-badge {
  background: rgba(34,197,94,0.1);
  color: #166534;
  border-radius: var(--r-full);
}
.bot-conv-toggle {
  border-radius: var(--r-sm);
  transition: var(--t);
}
.bot-conv-toggle.active {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.4);
  color: #166534;
}
.bot-conv-toggle.paused {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.4);
  color: #92400e;
}

/* ── 9. DASHBOARD ──────────────────────────────────────────────────── */
.dash-page {
  background: var(--main-bg);
}
.kpi-card {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: var(--t);
}
.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.kpi-card.kpi-blue  { border-top: 2px solid rgba(59,130,246,0.5); }
.kpi-card.kpi-green { border-top: 2px solid rgba(34,197,94,0.5); }
.kpi-card.kpi-purple{ border-top: 2px solid rgba(139,92,246,0.5); }
.kpi-card.kpi-amber { border-top: 2px solid rgba(245,158,11,0.5); }
.kpi-label {
  font-weight: 500;
  letter-spacing: 0.04em;
}
.kpi-value {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.dash-chart-card {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.dash-chart-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dash-section {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.dash-section-title {
  font-weight: 600;
}
.dash-inst-badge {
  background: rgba(59,130,246,0.08);
  color: #2563eb;
  border-color: rgba(59,130,246,0.2);
  border-radius: var(--r-full);
  font-weight: 500;
}
.dash-refresh-btn {
  border-color: var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: var(--t);
}
.dash-refresh-btn:hover {
  background: var(--main-bg);
  border-color: var(--border-strong);
  color: var(--text);
}
.dash-activity-item,
.dash-no-resp-item {
  border-bottom-color: var(--border);
}

/* ── 10. CRM ───────────────────────────────────────────────────────── */
.crm-page {
  background: var(--main-bg);
}
.crm-board-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}
.crm-board-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.crm-board-chip {
  background: var(--main-bg);
  border-color: var(--border);
  border-radius: var(--r-full);
  font-weight: 500;
}
.crm-col {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.crm-col-header {
  border-bottom: 1px solid var(--border);
}
.crm-col-label {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.crm-col-count {
  font-weight: 600;
}
.crm-card {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  transition: var(--t);
}
.crm-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.crm-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-ring);
}
.crm-card-score {
  background: rgba(59,130,246,0.1);
  color: var(--primary);
  font-weight: 600;
  border-radius: var(--r-full);
}
.urgency-badge {
  border-radius: var(--r-full);
  font-weight: 600;
}
.u-high   { background: rgba(239,68,68,0.1);   color: #dc2626; }
.u-medium { background: rgba(245,158,11,0.1);   color: #b45309; }
.u-low    { background: rgba(34,197,94,0.1);    color: #15803d; }
.crm-col-add {
  border-radius: var(--r-md);
  transition: var(--t);
}
.crm-col-add:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.crm-filter-btn {
  border-radius: var(--r-sm);
  transition: var(--t);
  font-weight: 500;
}
.crm-filter-btn:hover {
  background: var(--main-bg);
}
.crm-filter-btn.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  border-left-color: var(--primary);
}
.crm-filter-count {
  background: rgba(0,0,0,0.06);
  border-radius: var(--r-full);
}
.crm-detail {
  background: var(--surface);
  border-left: 1px solid var(--border);
}
.crm-detail-hdr {
  border-bottom: 1px solid var(--border);
}
.crm-sel, .crm-txt {
  background: var(--main-bg);
  border-color: var(--border);
  border-radius: var(--r-sm);
  transition: var(--t);
}
.crm-sel:focus, .crm-txt:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
  outline: none;
}
.crm-score-val {
  background: rgba(59,130,246,0.1);
  color: var(--primary);
  border-radius: var(--r-sm);
}
.act-item {
  background: var(--main-bg);
  border-radius: var(--r-sm);
}
.btn-crm-save {
  background: var(--primary-grad);
  border-radius: var(--r-sm);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(59,130,246,0.2);
  transition: var(--t);
}
.btn-crm-save:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}
.crm-pick-box {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.crm-pick-item {
  border-radius: var(--r-sm);
  transition: background 150ms ease;
}
.crm-pick-item:hover {
  background: var(--main-bg);
}

/* ── 11. NÚMEROS / INSTÂNCIAS ─────────────────────────────────────── */
.inst-detail-hdr {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.inst-detail-btn {
  border-color: var(--border);
  border-radius: var(--r-sm);
  transition: var(--t);
}
.inst-detail-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.inst-detail-btn.green {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(34,197,94,0.25);
}
.inst-detail-btn.green:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}

/* ── 12. TOAST ─────────────────────────────────────────────────────── */
.toast {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* ── 13. TOGGLE ────────────────────────────────────────────────────── */
.toggle-slider {
  background: #cbd5e1;
  border-radius: var(--r-full);
}
.toggle input:checked + .toggle-slider {
  background: var(--primary-grad);
  box-shadow: 0 1px 4px rgba(59,130,246,0.3);
}

/* ── 14. PRODUÇÃO ──────────────────────────────────────────────────── */
.prod-period-btn {
  border-color: var(--border);
  border-radius: var(--r-full);
  transition: var(--t);
  font-weight: 500;
}
.prod-period-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.prod-period-btn.active {
  background: var(--primary-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 4px rgba(59,130,246,0.25);
}
.prod-conv-chip {
  background: var(--main-bg);
  border-color: var(--border);
  border-radius: var(--r-full);
}

/* ── 15. INSTÂNCIA FILTER BAR ─────────────────────────────────────── */
.inst-filter-pill {
  border-radius: var(--r-full) !important;
  transition: var(--t) !important;
}

/* ── 16. SCROLLBARS ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }