/*
 * ABR Theme v2 — LIGHT MODE unificado com Portal Clientes + CRM.
 * Sobrescreve TODAS as variáveis dos <style> inline dos templates,
 * inclusive os 3 conjuntos diferentes que existem:
 *   - dashboard.html       (--bg --s1 --s2 --s3 --blue --purple --gradient)
 *   - agent.html/builder   (--surface --surface2 --gold --gold-light --gold-dim)
 *   - admin_* / docs       (--bg --s1 --s2 ...)
 * Carregado DEPOIS do <style> embutido — cascade + !important garantem light mode.
 *
 * Paleta-alvo:
 *   gold   #c79b3a (igual CRM/Portal)
 *   ink    #0f1419 (igual primary CRM)
 *   bg     #ffffff
 *   bg-soft #fafafa
 *   border #e2e8f0
 *   text   #1f2937
 *   muted  #64748b
 */

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

:root {
  /* —— Paleta canônica ABR —— */
  --gold:        #c79b3a !important;
  --gold-dark:   #9c771e !important;
  --gold-light:  #d4af50 !important;
  --gold-soft:   #f4e9c8 !important;
  --gold-dim:    rgba(199,155,58,.10) !important;
  --gold-glow:   rgba(199,155,58,.18) !important;

  --ink:         #0f1419 !important;
  --text:        #1f2937 !important;
  --text-soft:   #64748b !important;
  --muted:       #64748b !important;

  --bg:          #ffffff !important;
  --bg-soft:     #fafafa !important;

  --surface:     #ffffff !important;
  --surface2:    #f8fafc !important;

  --s1:          #ffffff !important;
  --s2:          #fafafa !important;
  --s3:          #f1f5f9 !important;

  --border:      #e2e8f0 !important;
  --border2:     #cbd5e1 !important;

  /* Estados semânticos — tons mais saturados pra contraste contra fundo claro */
  --blue:        #2563eb !important;
  --blue2:       #1d4ed8 !important;
  --blue-glow:   rgba(37,99,235,.10) !important;

  --cyan:        #0891b2 !important;
  --cyan-dim:    rgba(8,145,178,.10) !important;

  --green:       #059669 !important;
  --green-dim:   rgba(5,150,105,.10) !important;

  --yellow:      #d97706 !important;
  --yellow-dim:  rgba(217,119,6,.10) !important;

  --red:         #dc2626 !important;
  --red-dim:     rgba(220,38,38,.10) !important;

  --purple:      #c79b3a !important;          /* mapeado pro gold pra coerência */
  --purple-dim:  rgba(199,155,58,.10) !important;

  --gradient:    linear-gradient(135deg, #c79b3a 0%, #9c771e 100%) !important;
}

/* —— Tipografia ABR —— */
html, body, button, input, select, textarea, p, div, span, li, td, th, label, a {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.brand-text h1, .brand-logo, .headline, .title-heading,
[class*="font-heading"], [class*="serif"] {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* —— Topbar / header —— */
.top, .topbar, header.top, .topbar-main {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  backdrop-filter: blur(10px);
}
.top .logo-icon {
  background: var(--gradient) !important;
  color: #fff !important;
}
.top .logo-text {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.top .right, .top .right a {
  color: var(--text-soft) !important;
}
.top .right a:hover {
  color: var(--gold) !important;
}
.role-tag {
  background: var(--gold-dim) !important;
  color: var(--gold-dark) !important;
  border: 1px solid var(--gold-glow) !important;
}

/* —— Sidebar —— */
.sidebar {
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%) !important;
  border-right: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.sidebar::before {
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-dark)) !important;
}
.sidebar h3 {
  color: var(--text-soft) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-soft) !important;
}
.sidebar h3::before {
  background: var(--gold) !important;
}

.ag-search {
  background: linear-gradient(180deg, #fafafa 85%, rgba(250,250,250,0)) !important;
}
.ag-search input {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.ag-search input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px var(--gold-dim) !important;
}

/* Seções da sidebar */
.ag-section-header {
  color: var(--text) !important;
  border-top: 1px dashed var(--border) !important;
}
.ag-section-header:hover {
  background: linear-gradient(90deg, var(--gold-dim), transparent) !important;
}
.ag-section-header.primary { color: var(--ink) !important; }
.ag-section-header.primary::before { background: var(--gold) !important; }
.ag-section-header.orch    { color: var(--ink) !important; }
.ag-section-header.orch::before    { background: var(--gold-dark) !important; }

.ag-section-header .sec-count,
.ag-section-header.primary .sec-count,
.ag-section-header.orch .sec-count {
  background: var(--gold-dim) !important;
  color: var(--gold-dark) !important;
  border-color: var(--gold-glow) !important;
}

/* Grupos / cards na sidebar */
.ag-group {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.ag-group:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 14px var(--gold-glow) !important;
}
.ag-group.active, .ag-group.selected {
  border-color: var(--gold) !important;
  background: var(--gold-dim) !important;
}

/* Scrollbar na sidebar */
.sidebar #agent-list::-webkit-scrollbar-thumb { background: var(--border2) !important; }
.sidebar #agent-list::-webkit-scrollbar-thumb:hover { background: var(--gold) !important; }

/* —— Conteúdo principal —— */
main, .main, .content, .page-content {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Cards / surfaces */
.card, [class*="card-"], .stat, .stat-card, .agent-card, .activity-card,
.box, .panel, .surface {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  transition: all 0.18s ease-out !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.card:hover, [class*="card-"]:hover, .agent-card:hover, .activity-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 6px 20px var(--gold-glow) !important;
  transform: translateY(-1px);
}

/* —— Botões dourados —— */
.btn-gold, .btn-primary, button.primary,
button[type="submit"]:not(.btn-outline):not(.btn-secondary):not(.btn-ghost):not(.btn-danger) {
  background: var(--gold) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: filter 0.15s ease-out !important;
}
.btn-gold:hover, .btn-primary:hover {
  filter: brightness(0.92);
  color: #ffffff !important;
}

/* Botões outline / secundários */
.btn-outline, .btn-secondary, button.outline, button.secondary {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.btn-outline:hover, .btn-secondary:hover {
  border-color: var(--gold) !important;
  color: var(--gold-dark) !important;
  background: var(--gold-dim) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--text) !important;
  border: 0 !important;
}
.btn-ghost:hover {
  background: var(--gold-dim) !important;
  color: var(--gold-dark) !important;
}

/* —— Inputs / Selects / Textareas —— */
input, select, textarea {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--gold) !important;
  outline-offset: 1px !important;
  border-color: var(--gold) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-soft) !important;
  opacity: .85;
}

/* —— Links —— */
a {
  color: var(--gold-dark) !important;
  transition: color .12s ease-out;
}
a:hover, .btn-link:hover {
  color: var(--gold) !important;
}

/* —— Badges / pills —— */
.pill, .badge {
  border-radius: 999px;
  font-weight: 600;
}
.pill.active, .badge-gold, .tag-active {
  background: var(--gold) !important;
  color: #ffffff !important;
}
.pill:not(.active) {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* —— Brand logo —— */
.brand-logo {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px var(--gold-glow) !important;
}

/* —— Scrollbar global —— */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.30); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); }

/* —— Focus a11y —— */
*:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
}

/* —— Tabelas —— */
table { background: #ffffff !important; color: var(--text) !important; }
table thead th {
  background: var(--bg-soft) !important;
  border-bottom: 2px solid var(--border) !important;
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
table tbody tr {
  border-bottom: 1px solid var(--border) !important;
}
table tbody tr:hover { background: var(--gold-dim) !important; }

/* —— Modais / overlays —— */
.modal, .dialog, [role="dialog"], .overlay-content {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 48px rgba(15,20,25,.15) !important;
}
.overlay, .backdrop, .modal-backdrop {
  background: rgba(15,20,25,.45) !important;
}

/* —— Toast / snackbar —— */
.toast, .snackbar, .notification {
  background: var(--ink) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

/* —— Footer —— */
footer, .footer {
  color: var(--text-soft) !important;
  font-size: 11px;
  border-top: 1px solid var(--border) !important;
}

/* —— Animações suaves —— */
@keyframes abrFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .agent-card, .activity-card { animation: abrFadeIn 0.3s ease-out; }

/* —— Chat / mensagens (agent.html) —— */
.message, .msg, .chat-message {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.message.user, .msg.user, .chat-message.user {
  background: var(--gold-dim) !important;
  border-color: var(--gold-glow) !important;
}
.message.assistant, .msg.assistant, .chat-message.assistant {
  background: var(--bg-soft) !important;
}

/* —— Code blocks —— */
pre, code {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
}

/* —— Loaders / spinners —— */
.spinner, .loader {
  border-color: var(--border) !important;
  border-top-color: var(--gold) !important;
}

/* —— Dropdown menus —— */
.dropdown, .menu, .popover {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 24px rgba(15,20,25,.10) !important;
}
.dropdown-item, .menu-item {
  color: var(--text) !important;
}
.dropdown-item:hover, .menu-item:hover {
  background: var(--gold-dim) !important;
  color: var(--gold-dark) !important;
}

/* —— Listas de agentes (sidebar items) —— */
.agent-item, .ag-item {
  background: transparent !important;
  color: var(--text) !important;
  border-radius: 8px;
}
.agent-item:hover, .ag-item:hover {
  background: var(--gold-dim) !important;
}
.agent-item.active, .ag-item.active {
  background: var(--gold-glow) !important;
  color: var(--gold-dark) !important;
}

/* ════════════════════════════════════════════════════════════════
 * Dashboard.html — neutraliza os ROXOS/AZUIS literais → dourado ABR.
 * (os literais #8b5cf6/#3b82f6 não passam por variável, então força aqui)
 * ════════════════════════════════════════════════════════════════ */

/* Tag de papel no topo */
.role-tag {
  background: var(--gold-dim) !important;
  color: var(--gold-dark) !important;
  border: 1px solid rgba(199,155,58,.25) !important;
}

/* Títulos de grupo na sidebar */
.ag-group-title {
  color: var(--ink) !important;
  background: linear-gradient(135deg, var(--gold-dim), rgba(199,155,58,.04)) !important;
}
.ag-group-title:hover {
  color: var(--ink) !important;
  background: linear-gradient(135deg, var(--gold-glow), var(--gold-dim)) !important;
}
.ag-group-title::before {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark)) !important;
}
.ag-group-title .g-arrow { color: var(--gold-dark) !important; }
.ag-group-title .g-count {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px var(--gold-glow) !important;
}

/* Itens de agente */
.ag { color: var(--text-soft) !important; }
.ag::before { background: linear-gradient(180deg, var(--gold), var(--gold-dark)) !important; }
.ag:hover,
.ag-group-body .ag:hover {
  background: linear-gradient(90deg, var(--gold-dim), transparent) !important;
  color: var(--text) !important;
}
.ag-search input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px var(--gold-glow) !important;
}

/* HERO — fundo claro com leve toque dourado, título em tinta sólida */
.hero {
  background:
    radial-gradient(ellipse 600px 200px at 20% 40%, var(--gold-dim), transparent 60%),
    radial-gradient(ellipse 500px 180px at 80% 60%, rgba(199,155,58,.06), transparent 60%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%) !important;
  border-bottom: 1px solid var(--border) !important;
}
.hero-title {
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}
.hero-sub { color: var(--text-soft) !important; }
.hero-badges span { background: #fff !important; color: var(--text) !important; border-color: var(--border) !important; }
.hero-collapse:hover { border-color: var(--gold) !important; color: var(--gold-dark) !important; }

/* Dropdown "Gestão" no topo */
.top-dd-btn {
  background: var(--gold-dim) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.top-dd-btn:hover {
  border-color: var(--gold) !important;
  background: var(--gold-glow) !important;
}
.top-dd-menu {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 12px 40px rgba(15,20,25,.12), 0 0 0 1px var(--gold-glow) !important;
}
.top-dd-menu a:hover { background: var(--gold-dim) !important; color: var(--gold-dark) !important; }

/* Cards de stats / online / report */
.stat:hover, .ag-card:hover, .report-card .rc-stat:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 14px var(--gold-glow) !important;
}
.sidebar-footer a:hover { color: var(--gold-dark) !important; }

/* Modais de relatório */
.rep-modal, .rep-modal-bd .rep-modal {
  background: #fff !important;
}
.rep-modal-h {
  background: linear-gradient(135deg, var(--gold-dim), rgba(199,155,58,.03)) !important;
}
.rep-tab.active {
  background: var(--gold-dim) !important;
  color: var(--gold-dark) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px var(--gold-glow) !important;
}

/* ════════════════════════════════════════════════════════════════
 * CRM Standard — camada final compartilhada em todas as telas HTML.
 * O CRM usa uma casca operacional: fundo claro, cards brancos, sidebar
 * escura para navegação persistente e dourado ABR apenas para ação/estado.
 * ════════════════════════════════════════════════════════════════ */

:root {
  --crm-bg: #f8fafc;
  --crm-card: #ffffff;
  --crm-ink: #0f1419;
  --crm-text: #1f2937;
  --crm-muted: #64748b;
  --crm-border: #e2e8f0;
  --crm-border-strong: #cbd5e1;
  --crm-sidebar: #0f1419;
  --crm-sidebar-2: #111827;
  --crm-sidebar-border: #1f2937;
  --crm-gold: #c79b3a;
  --crm-gold-dark: #9c771e;
}

html,
body {
  background: var(--crm-bg) !important;
  color: var(--crm-text) !important;
}

body {
  min-height: 100vh;
}

/* Topbars seguem o CRM: superfície clara, texto escuro, borda sutil. */
.top,
.topbar,
header.top,
.topbar-main {
  background: rgba(255,255,255,.96) !important;
  color: var(--crm-text) !important;
  border-bottom: 1px solid var(--crm-border) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
  backdrop-filter: blur(10px);
}

.top h1,
.topbar h1,
.topbar .left h1,
.topbar-main h1 {
  color: var(--crm-ink) !important;
}

.topbar .back,
.top .back {
  color: var(--crm-muted) !important;
}

.topbar .back:hover,
.top .back:hover {
  color: var(--crm-gold-dark) !important;
}

.tabs {
  background: var(--crm-card) !important;
  color: var(--crm-muted) !important;
  border-bottom: 1px solid var(--crm-border) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
}

.tab {
  color: var(--crm-muted) !important;
  border-bottom-color: transparent !important;
}

.tab:hover {
  color: var(--crm-ink) !important;
  background: #f8fafc !important;
}

.tab.active {
  color: var(--crm-ink) !important;
  border-bottom-color: var(--crm-gold) !important;
}

/* Sidebars de navegação ficam iguais ao CRM. */
.sidebar,
.layout-sidebar {
  background: var(--crm-sidebar) !important;
  color: #e5e7eb !important;
  border-right: 1px solid var(--crm-sidebar-border) !important;
}

.sidebar *,
.layout-sidebar * {
  border-color: var(--crm-sidebar-border);
}

.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar-header h3,
.sidebar .group-label,
.layout-sidebar .conv-group-title {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

.sidebar input,
.layout-sidebar input,
.sidebar-search input,
.ag-search input {
  background: var(--crm-sidebar-2) !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
}

.sidebar input::placeholder,
.layout-sidebar input::placeholder {
  color: #94a3b8 !important;
}

.sidebar .new-btn,
.sidebar-new,
.btn-gold,
.btn-primary {
  background: var(--crm-gold) !important;
  border-color: var(--crm-gold) !important;
  color: #fff !important;
}

.sidebar .new-btn:hover,
.sidebar-new:hover,
.btn-gold:hover,
.btn-primary:hover {
  background: var(--crm-gold-dark) !important;
  border-color: var(--crm-gold-dark) !important;
  color: #fff !important;
  filter: none !important;
}

.sidebar .hist-item,
.sidebar .side-btn,
.sidebar-footer a,
.conv-item,
.agent-item,
.ag-item,
.ag {
  color: #dbe4ef !important;
  background: transparent !important;
  border-color: transparent !important;
}

.sidebar .hist-item .ttl,
.conv-item .conv-title {
  color: #f8fafc !important;
}

.sidebar .hist-item .meta,
.conv-item .conv-date,
.sidebar .footer a,
.sidebar-footer a {
  color: #94a3b8 !important;
}

.sidebar .hist-item:hover,
.sidebar .side-btn:hover,
.conv-item:hover,
.agent-item:hover,
.ag-item:hover,
.ag:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(199,155,58,.28) !important;
  color: #fff !important;
}

.sidebar .hist-item.active,
.conv-item.active,
.agent-item.active,
.ag-item.active,
.ag.active {
  background: linear-gradient(90deg, rgba(199,155,58,.22), rgba(199,155,58,.04)) !important;
  border-color: rgba(199,155,58,.45) !important;
  border-left-color: var(--crm-gold) !important;
  color: #fff !important;
}

.sidebar .footer,
.sidebar-footer,
.sidebar-actions,
.sidebar-header,
.sidebar-search {
  background: var(--crm-sidebar) !important;
  border-color: var(--crm-sidebar-border) !important;
}

/* Área principal no padrão CRM. */
.layout-split,
.layout-center,
main,
.main,
.content,
.page-content,
.panel,
.messages,
.knowledge {
  background: var(--crm-bg) !important;
  color: var(--crm-text) !important;
}

.card,
[class*="card-"],
.stat,
.stat-card,
.agent-card,
.activity-card,
.box,
.surface,
.k-stat,
.k-item,
.k-section-header,
.hist-box,
.editor-box,
.upload-box,
.modal,
.dialog,
[role="dialog"],
.right-body,
.layout-right {
  background: var(--crm-card) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-border) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}

/* Chat: nenhuma resposta do agente pode voltar ao bloco preto antigo. */
.messages .msg,
.messages .message,
.messages .chat-message,
.messages .msg-agent,
.messages .msg-user,
.messages .msg-teach-user {
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.06) !important;
}

.messages .msg-agent,
.messages .message.assistant,
.messages .chat-message.assistant,
.messages .msg:not(.msg-user):not(.msg-teach-user) {
  background: var(--crm-card) !important;
  color: var(--crm-text) !important;
  border: 1px solid var(--crm-border) !important;
}

.messages .msg-agent *,
.messages .message.assistant *,
.messages .chat-message.assistant * {
  color: inherit;
}

.messages .msg-agent h1,
.messages .msg-agent h2,
.messages .msg-agent h3,
.messages .msg-agent strong {
  color: var(--crm-ink) !important;
}

.messages .msg-agent p,
.messages .msg-agent li,
.messages .msg-agent td,
.messages .msg-agent span {
  color: var(--crm-text) !important;
}

.messages .msg-user,
.messages .msg-teach-user,
.messages .message.user,
.messages .chat-message.user {
  background: var(--crm-gold) !important;
  border: 1px solid var(--crm-gold) !important;
  color: #fff !important;
}

.messages .msg-user *,
.messages .msg-teach-user * {
  color: #fff !important;
}

.msg-sys {
  background: var(--crm-card) !important;
  color: var(--crm-muted) !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}

/* Composer/input inferior. */
.input-area {
  background: var(--crm-card) !important;
  border-top: 1px solid var(--crm-border) !important;
  box-shadow: 0 -8px 22px rgba(15,23,42,.05) !important;
}

.input-row textarea,
textarea,
input,
select {
  background: var(--crm-card) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-border-strong) !important;
}

.input-row textarea:focus,
textarea:focus,
input:focus,
select:focus {
  border-color: var(--crm-gold) !important;
  outline: 2px solid rgba(199,155,58,.22) !important;
  outline-offset: 1px !important;
}

.upload-label,
.mic-btn,
.screen-btn,
.btn,
button:not(.sidebar-new):not(.new-btn):not(.send-btn):not(.btn-primary):not(.btn-gold) {
  border-radius: 8px !important;
}

.upload-label,
.mic-btn,
.screen-btn {
  background: var(--crm-card) !important;
  border: 1px solid var(--crm-border-strong) !important;
  color: #475569 !important;
}

.upload-label:hover,
.mic-btn:hover,
.screen-btn:hover {
  border-color: var(--crm-gold) !important;
  color: var(--crm-gold-dark) !important;
  background: #fffbeb !important;
}

.send-btn,
.teach-send-btn {
  background: var(--crm-gold) !important;
  color: #fff !important;
  border: 1px solid var(--crm-gold) !important;
}

.send-btn:hover,
.teach-send-btn:hover {
  background: var(--crm-gold-dark) !important;
  border-color: var(--crm-gold-dark) !important;
}

pre,
code {
  background: #f1f5f9 !important;
  color: var(--crm-ink) !important;
  border-color: var(--crm-border) !important;
}

.messages .msg-agent pre {
  background: #f8fafc !important;
  color: var(--crm-ink) !important;
}

@media (max-width: 768px) {
  .sidebar,
  .layout-sidebar.mobile-open {
    background: var(--crm-sidebar) !important;
  }
}