/* HeyChat · tema da tela do Chatwoot com a cara da tela Conversas do painel (docs/design/heychat-caixa.md).
   Entra pelo DASHBOARD_SCRIPTS (zz_heychat_branding.rb, ADR-064), sem mexer no código do Chatwoot. Quase tudo é troca das
   variáveis de cor dele (--slate-*, --solid-*), que valem para qualquer versão; o resto mira classes estáveis
   (.conversation, .left-bubble, .reply-box, a[name]). Cor da marca: cor.css, gerado no build (tema_cor.rb). */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/heychat/Geist-var.woff2') format('woff2') }
/* o Chatwoot pede Inter em todo canto (às vezes com !important): o mesmo nome passa a ser a Geist */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/heychat/Geist-var.woff2') format('woff2') }
@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/heychat/Geist-var.woff2') format('woff2') }

/* ---------- cores: família Vooxi (painel HeyBot), no lugar do cinza e do azul do Chatwoot */
:root, .dark {
  color-scheme: dark;
  --slate-1: 9 11 14; --slate-2: 11 14 17; --slate-3: 14 18 22; --slate-4: 19 24 32; --slate-5: 22 28 40; --slate-6: 28 33 48;
  --slate-7: 42 50 68; --slate-8: 61 72 95; --slate-9: 93 111 142; --slate-10: 112 131 163; --slate-11: 138 161 196; --slate-12: 245 246 248;
  --gray-1: 9 11 14; --gray-2: 11 14 17; --gray-3: 14 18 22; --gray-4: 19 24 32; --gray-5: 22 28 40; --gray-6: 28 33 48;
  --gray-7: 42 50 68; --gray-8: 61 72 95; --gray-9: 93 111 142; --gray-10: 112 131 163; --gray-11: 138 161 196; --gray-12: 245 246 248;
  /* azul do Chatwoot = laranja da Hey (ação principal, aba e link) */
  --blue-1: 20 12 7; --blue-2: 26 15 9; --blue-3: 38 23 13; --blue-4: 52 28 13; --blue-5: 66 34 14; --blue-6: 82 41 16;
  --blue-7: 107 53 20; --blue-8: 160 75 25; --blue-9: 247 102 17; --blue-10: 255 122 43; --blue-11: 255 138 69; --blue-12: 255 214 189;
  /* iris/violeta = roxo do HeyBot (IA) */
  --iris-1: 18 12 28; --iris-2: 22 15 36; --iris-3: 28 20 48; --iris-4: 40 24 72; --iris-5: 52 28 96; --iris-6: 66 34 120;
  --iris-7: 90 40 160; --iris-8: 120 40 200; --iris-9: 161 0 255; --iris-10: 185 76 255; --iris-11: 207 166 255; --iris-12: 236 222 255;
  --violet-1: 18 12 28; --violet-2: 22 15 36; --violet-3: 28 20 48; --violet-4: 40 24 72; --violet-5: 52 28 96; --violet-6: 66 34 120;
  --violet-7: 90 40 160; --violet-8: 120 40 200; --violet-9: 161 0 255; --violet-10: 185 76 255; --violet-11: 207 166 255; --violet-12: 236 222 255;
  /* teal = verde da Hey (resolver, online); rubi = vermelho */
  --teal-3: 10 38 32; --teal-4: 10 48 38; --teal-9: 18 217 139; --teal-10: 40 230 155; --teal-11: 18 217 139; --teal-12: 190 250 225;
  --ruby-3: 42 16 19; --ruby-9: 229 72 77; --ruby-10: 236 90 95; --ruby-11: 255 143 147;
  /* superfícies: menu e lista no painel, conversa no chão */
  --background-color: 11 14 17; --surface-1: 9 11 14; --surface-2: 14 18 22; --surface-active: 19 24 39;
  --solid-1: 14 18 22; --solid-2: 19 24 39; --solid-3: 28 33 48; --solid-active: 19 24 39;
  --solid-blue: 10 34 41; --solid-blue-2: 14 18 22; --text-blue: 201 240 250;   /* bolha da equipe: ciano */
  --solid-iris: 28 20 48; --solid-purple: 28 20 48; --text-purple: 236 222 255;  /* bolha da IA: roxo */
  --solid-amber: 33 26 11; --text-amber: 255 226 184;                             /* nota interna: âmbar */
  --solid-red: 42 16 19;
  --card-color: 14 18 22; --button-color: 14 18 22; --button-hover-color: 255, 255, 255, 0.04;
  --label-background: 22 27 36; --label-border: 255, 255, 255, 0.04;
  --border-strong: 42 50 68; --border-weak: 28 33 48; --border-container: 255, 255, 255, 0; --border-blue: 247, 102, 17, 0.5;
  --alpha-1: 19, 24, 39, 0.8; --alpha-2: 138, 161, 196, 0.1; --alpha-3: 14, 18, 22, 0.96;
  --black-alpha-1: 0, 0, 0, 0.4; --black-alpha-2: 0, 0, 0, 0.25; --white-alpha: 255, 255, 255, 0.08;
  --overlay: 0, 0, 0, 0.55; --overlay-avatar: 0, 0, 0, 0.05; --background-input-box: 255, 255, 255, 0.02;
  --hc-orange: #f76611; --hc-on-orange: #111317; --hc-purple: #a050ff; --hc-cyan: #00bae0; --hc-amber: #ff9900; --hc-green: #12d98b;
  --hc-line: #1c2130; --hc-quiet: #8aa1c4; --hc-faint: #5d6f8e;
}
body, .font-inter { font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important }
body { background: #090b0e; -webkit-font-smoothing: antialiased }
::selection { background: #f7661155 }
* { scrollbar-width: thin; scrollbar-color: #2a3244 transparent }
textarea, input, .ProseMirror { caret-color: var(--hc-orange) }
/* texto escuro no laranja (contraste 6,3; branco no laranja fica ilegível) */
.bg-n-brand.text-white, .bg-n-brand .text-white, .\!bg-n-brand.text-white { color: var(--hc-on-orange) !important }

/* ---------- menu: só o que a equipe da empresa usa */
aside li:has(> a[name="Inbox"]), aside li:has(> a[name="Calls"]), aside li:has(> a[name="Companies"]),
aside li:has(> a[name="Campaigns"]), aside li:has(> a[name="Portals"]),
aside li[name="Mentions"], aside li[name="Participating"] { display: none !important }
aside nav a { font-size: 14px }
aside nav a.active, aside nav a[aria-current="page"] { background: #1a1427 !important; color: #f5f6f8 !important; outline: 0 !important; position: relative }
aside nav a.active::after { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: #a100ff }
aside nav a.active [class*="i-lucide"] { color: #b94cff }

/* ---------- lista de conversas: avatar redondo, nome forte, prévia calma, não lidas em âmbar */
.conversations-list-wrap { border-right: 1px solid var(--hc-line) }
.conversations-list-wrap h1 { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.015em }
.conversation { border-bottom-color: transparent !important; padding-top: 2px; padding-bottom: 2px }
.conversation:hover { background: #0e1216 !important }
.conversation.active { background: #131827 !important; box-shadow: inset 2px 0 0 #a100ff }
.conversation [role="img"], .conversation-details [role="img"] { border-radius: 50% !important }
.conversation .conversation--user { font-size: 15px !important }
.conversation .conversation--user + div { color: var(--hc-quiet) !important; font-weight: 400 !important; font-size: 13.5px }
.conversation .bg-n-teal-9 { background: var(--hc-amber) !important; color: #1a1000 !important; font-weight: 700 }
.conversation .text-xxs { color: var(--hc-faint) }

/* ---------- conversa: chão escuro com luz suave, bolhas pelas cores de quem fala */
.conversation-details-wrap, .conversation-panel { background: radial-gradient(1100px 480px at 50% -10%, #ffffff06, transparent 70%), #090b0e }
[role="img"] { border-radius: 50% !important }
.left-bubble, .right-bubble { border-radius: 12px !important; font-size: 14.5px; line-height: 1.45 }
.left-bubble { border-top-left-radius: 4px !important; border-bottom-left-radius: 12px !important }
.right-bubble { border-top-right-radius: 4px !important; border-bottom-right-radius: 12px !important }
.right-bubble.bg-n-solid-iris { box-shadow: inset 0 0 0 1px #a050ff33 }
.right-bubble.bg-n-solid-blue { box-shadow: inset 0 0 0 1px #00bae026 }
.bg-n-solid-amber[data-bubble-name] { box-shadow: inset 0 0 0 1px #6b4a12; border-style: dashed }
[data-bubble-name] time, [data-bubble-name] .text-xs { color: var(--hc-faint) }

/* ---------- caixa de resposta: cartão arredondado, Responder / Nota no segmento, Enviar laranja */
.reply-box { border-radius: 16px !important; background: #0b0e11 !important; border: 1px solid var(--hc-line) !important }
.reply-box.is-private { background: #211a0b !important; border-color: #6b4a12 !important }
.reply-box button.rounded-full { border-radius: 10px !important; background: #0e1216 !important; border-color: var(--hc-line) !important; white-space: nowrap; font-size: 13px; font-weight: 600 }
.reply-box button.rounded-full > .absolute { border-radius: 8px !important; background: #2a3140 !important }

/* ---------- nada aberto: só a frase, sem desenho nem atalhos de teclado */
.conversation-details-wrap img[src*="no-chat"], .conversation-details-wrap div.mt-9:has(kbd.hotkey) { display: none !important }
.conversation-details-wrap span.text-sm.font-medium.text-center { color: var(--hc-quiet) !important; font-weight: 400 !important; font-size: 14px }

/* ---------- cabeçalho: Resolver em verde, como no painel */
.resolve-actions > div { box-shadow: none !important; outline-color: #0f7a52 !important }
.resolve-actions button { background: #0a2620 !important; color: var(--hc-green) !important; font-weight: 600 }