/* ═══════════════════════════════════════════════════════════════
   CIC Design System — Patch sobre InsightsApp v1.0
   Remapeia os tokens existentes para os valores do CIC DS.
   Não altera classes .ds-* nem estrutura HTML.
   Importar DEPOIS do design-system.css.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   PALETA CIC (referência interna)
   ───────────────────────────────────────────── */
:root {
  --_cic-brand-900: #460073;
  --_cic-brand-700: #6200a3;
  --_cic-brand-500: #8b00e0;
  --_cic-brand-100: #f0e0ff;
  --_cic-accent-blue: #224bff;
  --_cic-accent-cyan: #05f2db;
  --_cic-accent-pink: #ff50a0;
  --_cic-neutral-0:   #ffffff;
  --_cic-neutral-50:  #f5f5f5;
  --_cic-neutral-100: #e0e0e0;
  --_cic-neutral-200: #999999;
  --_cic-neutral-300: #666666;
  --_cic-neutral-700: #2a2a2a;
  --_cic-neutral-800: #1a1a1a;
  --_cic-neutral-900: #0d0d0d;
}

/* ─────────────────────────────────────────────
   REMAPEAMENTO DOS TOKENS DO INSIGHTSAPP
   Cada variável do design-system.css original
   recebe o equivalente semântico do CIC DS.
   ───────────────────────────────────────────── */
:root,
[data-theme="dark"] {

  /* Backgrounds → superfícies CIC */
  --bg-page:        #0d0d0d;   /* cic: bg-base */
  --bg-header:      #1a1a1a;   /* cic: bg-surface */
  --bg-card-top:    #1a1a1a;   /* cic: bg-surface */
  --bg-card-bottom: #0d0d0d;   /* cic: bg-base */

  /* Surface elevation → escala neutra CIC */
  --surface-1: #1a1a1a;
  --surface-2: #2a2a2a;
  --surface-3: #333333;
  --surface-4: #3d3d3d;

  /* Text → escala de texto CIC */
  --text-primary:     #ffffff;
  --text-secondary:   #999999;
  --text-muted:       #666666;
  --text-tertiary:    #444444;
  --text-placeholder: #444444;

  /* Borders → bordas CIC (mantém transparência nos soft) */
  --border-soft:   rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.10);

  /* Accents → brand CIC
     orange (Accenture #A100FF → CIC brand-500 #8b00e0)
     purple (agente 2 → CIC brand-700)
     cyan   (agente 3 → CIC accent-cyan) */
  --accent-orange: #8b00e0;   /* era #A100FF → brand-500 CIC */
  --accent-purple: #6200a3;   /* era #B151F0 → brand-700 CIC */
  --accent-cyan:   #05f2db;   /* era #35D3DD → accent-cyan CIC */
  --accent:        #8b00e0;

  /* Amber (alias para accent primário) */
  --amber:      #8b00e0;
  --amber-soft: rgba(139, 0, 224, 0.10);
  --amber-dim:  rgba(139, 0, 224, 0.05);

  /* Named agents seguem seus accents remapeados */
  --agent-joao:    #8b00e0;
  --agent-beatriz: #6200a3;
  --agent-sabrina: #05f2db;

  /* Status — success CIC, alert mantém vermelho legível */
  --status-green:    #05f2db;            /* cic: success-fg dark */
  --status-error:    #ff50a0;            /* cic: alert-fg dark   */
  --status-error-bg: rgba(255, 80, 160, 0.10);

  /* Border radius → estética quadrada CIC
     NOTA: o CIC usa bordas retas. Se preferir manter
     o arredondamento do InsightsApp, comente esta seção. */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   4px;
  --r-xl:   8px;
  --r-pill: 99px;   /* pills: estrutural, mantém */

  /* Spacing — base 4px idêntica, sem mudança */
  /* --s1..s8 já coincidem com o CIC, não precisa remapear */

  /* Shadows → mais rasas, CIC prefere elevação por borda */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-btn: 0 2px 8px  rgba(0, 0, 0, 0.4);
}

/* ─────────────────────────────────────────────
   TIPOGRAFIA
   Troca Inter pela família CIC.
   Graphik requer licença e arquivos em /fonts.
   Enquanto não estiver disponível, system-ui é
   o fallback — visualmente muito próximo.
   ───────────────────────────────────────────── */
body {
  font-family: 'Graphik', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─────────────────────────────────────────────
   FOCO VISÍVEL
   Substitui o padrão do browser pelo CIC:
   outline azul (#224bff) com offset de 2px.
   ───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #224bff;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────
   SCROLLBAR
   Mantém a scrollbar fina do InsightsApp,
   ajusta cor para a borda CIC.
   ───────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ─────────────────────────────────────────────
   AJUSTE: nav-btn ativo
   ───────────────────────────────────────────── */
.ds-nav-btn.active {
  border-color: #8b00e0;
  background: rgba(139, 0, 224, 0.08);
}

/* ─────────────────────────────────────────────
   AJUSTE: agent card listening
   ───────────────────────────────────────────── */
.ds-agent-card--listening {
  box-shadow: 0 0 0 1px rgba(139, 0, 224, 0.16), 0 16px 48px rgba(0, 0, 0, 0.32);
}

/* ─────────────────────────────────────────────
   AJUSTE: msg bub do usuário
   ───────────────────────────────────────────── */
.ds-msg-bub--user {
  background: rgba(139, 0, 224, 0.10);
  border-color: rgba(139, 0, 224, 0.20);
}

/* ─────────────────────────────────────────────
   AJUSTE: badge pending
   ───────────────────────────────────────────── */
.ds-badge-pending {
  background: rgba(139, 0, 224, 0.10);
  border-color: rgba(139, 0, 224, 0.30);
  color: #8b00e0;
}

/* ─────────────────────────────────────────────
   AJUSTE: btn-primary
   ───────────────────────────────────────────── */
.ds-btn-primary {
  background: rgba(139, 0, 224, 0.10);
  border-color: rgba(139, 0, 224, 0.35);
  color: #8b00e0;
}
.ds-btn-primary:hover {
  background: rgba(139, 0, 224, 0.20);
}

/* ─────────────────────────────────────────────
   AJUSTE: key-insight border-left
   ───────────────────────────────────────────── */
.ds-key-insight {
  border-left-color: #8b00e0;
  background: rgba(139, 0, 224, 0.05);
}

/* ─────────────────────────────────────────────
   AJUSTE: agent chips remapeados
   ───────────────────────────────────────────── */
.ds-agent-chip--orange { background: rgba(139, 0, 224, 0.15); color: #8b00e0; }
.ds-agent-chip--purple { background: rgba(98,  0, 163, 0.15); color: #6200a3; }
.ds-agent-chip--cyan   { background: rgba(5,  242, 219, 0.12); color: #05f2db; }

/* ─────────────────────────────────────────────
   AJUSTE: connect buttons
   ───────────────────────────────────────────── */
.ds-connect-btn--orange { color: #8b00e0; border-color: rgba(139, 0, 224, 0.35); }
.ds-connect-btn--orange:hover { background: rgba(139, 0, 224, 0.10); }
.ds-connect-btn--cyan   { color: #05f2db; border-color: rgba(5, 242, 219, 0.35); }
.ds-connect-btn--cyan:hover   { background: rgba(5, 242, 219, 0.10); }

/* ─────────────────────────────────────────────
   AJUSTE: status dot "thinking"
   ───────────────────────────────────────────── */
.ds-status-dot--thinking { background: #8b00e0; }

/* ─────────────────────────────────────────────
   AJUSTE: link brand-home
   ───────────────────────────────────────────── */
.brand-home-link:hover { color: #8b00e0; }

/* ─────────────────────────────────────────────
   AJUSTE: avatares — gradientes hardcoded
   ───────────────────────────────────────────── */
.ds-avatar--orange {
  background: linear-gradient(135deg, #8b00e0 0%, #6200a3 100%);
}
.ds-avatar--purple {
  background: linear-gradient(135deg, #460073 0%, #6200a3 100%);
}
.ds-avatar--cyan {
  background: linear-gradient(135deg, #05f2db 0%, #05c4b0 100%);
}

.ds-msg-avatar--agent {
  background: linear-gradient(135deg, #05f2db, #05c4b0);
}
.ds-msg-avatar--user {
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}

/* ─────────────────────────────────────────────
   AJUSTE: barras de sentimento
   ───────────────────────────────────────────── */
.ds-sentiment--positive {
  background: rgba(5, 242, 219, 0.12);
  color: #05f2db;
}
.ds-sent-bar__fill--positive { background: #05f2db; }

.ds-sentiment--neutral {
  background: rgba(153, 153, 153, 0.12);
  color: #999999;
}
.ds-sent-bar__fill--neutral { background: #666666; }

.ds-sentiment--hesitant {
  background: rgba(139, 0, 224, 0.12);
  color: #8b00e0;
}
.ds-sent-bar__fill--hesitant { background: #8b00e0; }

.ds-sentiment--resistant {
  background: rgba(255, 80, 160, 0.12);
  color: #ff50a0;
}
.ds-sent-bar__fill--resistant { background: #ff50a0; }

.ds-alert-item { color: #ff50a0; }
.ds-opportunity-item { color: #05f2db; }