/* Kairo — paleta tropical: anil profundo de fundo, e as cores das frutas contam o que ele está fazendo.
   Maracujá = ouvindo · Açaí = pensando · Pitanga = falando · Água de coco = tudo certo */
:root {
  --anil: #1C1446;
  --ametista: #2B2160;
  --ametista-2: #3A2D7A;
  --maracuja: #FFC83D;
  --pitanga: #FF5A7A;
  --acai: #8E4DFF;
  --coco: #22D3B6;
  --texto: #FFF8F0;
  --suave: #BDB2E6;
  --linha: rgba(189, 178, 230, .18);
  --fundo: radial-gradient(1200px 700px at 15% -10%, #3B1F7A 0%, transparent 60%),
           radial-gradient(900px 600px at 110% 10%, #5A1A5E 0%, transparent 55%),
           var(--anil);
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --corpo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --anil: #F6F0FF; --ametista: #FFFFFF; --ametista-2: #EFE6FF;
    --texto: #24164F; --suave: #6B5E96; --linha: rgba(36, 22, 79, .12);
    --fundo: radial-gradient(1100px 600px at 10% -10%, #E7D9FF 0%, transparent 60%),
             radial-gradient(800px 500px at 110% 0%, #FFE0E8 0%, transparent 55%), var(--anil);
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--anil); }
body { background: var(--fundo); min-height: 100vh; color: var(--texto); font: 16px/1.5 var(--corpo); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--maracuja); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- topo ---------- */
.topo { display: flex; align-items: center; gap: 12px; padding: 12px 20px; }
.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.marca span { font: 800 26px/1 var(--display); letter-spacing: -.02em; }
.pessoa { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; border: 0;
  background: var(--ametista); font-weight: 600; cursor: default; }
.pessoa-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--coco); box-shadow: 0 0 0 4px rgba(34, 211, 182, .25); }
.saude { margin-left: auto; display: flex; gap: 6px; }
.saude span { font-size: 13px; color: var(--suave); padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ametista) 70%, transparent); }
.saude span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--suave); }
.saude .ok::before { background: var(--coco); } .saude .meio::before { background: var(--maracuja); } .saude .falha::before { background: var(--pitanga); }
.sair { color: var(--suave); text-decoration: none; font-size: 14px; }
.pessoa:not([hidden]) ~ .saude { margin-left: auto; }

/* ---------- palco ---------- */
.palco { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; padding: 8px 20px 32px; max-width: 1240px; margin: 0 auto; }
.palco > * { min-width: 0; }
.centro { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }

/* O cérebro: as notas do Obsidian como bolinhas ligadas (desenhado em grafo.js). */
.aura { position: relative; width: min(420px, 88vw); aspect-ratio: 1; }
.aura canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.aura::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; z-index: -1; filter: blur(40px); opacity: .35;
  background: radial-gradient(circle, var(--acai), transparent 70%); transition: background .6s; }
.aura[data-estado="ouvindo"]::before { background: radial-gradient(circle, var(--coco), transparent 70%); }
.aura[data-estado="pensando"]::before { background: radial-gradient(circle, #B98CFF, transparent 70%); opacity: .5; }
.aura[data-estado="falando"]::before { background: radial-gradient(circle, var(--maracuja), transparent 70%); }
.cores { list-style: none; margin: -6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12.5px; color: var(--suave); }
.cores li { display: flex; align-items: center; gap: 6px; }
.cores i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }

.saudacao { margin: 4px 0 0; font: 800 clamp(30px, 5vw, 44px)/1.05 var(--display); letter-spacing: -.02em; text-align: center; }
.legenda { margin: 0; min-height: 3em; max-width: 44ch; text-align: center; color: var(--suave); font-size: 17px; }

.comandos { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.mic { width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer; color: #1C1446; display: grid; place-items: center;
  background: conic-gradient(from 210deg, var(--maracuja), var(--pitanga), var(--acai), var(--coco), var(--maracuja));
  box-shadow: 0 10px 30px -8px rgba(255, 90, 122, .6); transition: transform .15s; }
.mic:hover { transform: scale(1.04); }
.mic svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)); }
.mic.gravando { background: var(--pitanga); color: #fff; animation: pulso 1.2s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 122, .55); } 100% { box-shadow: 0 0 0 22px rgba(255, 90, 122, 0); } }
.alternar { display: flex; flex-direction: column; gap: 6px; }
.chave { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--suave); cursor: pointer; }
.chave input { appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--ametista-2); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.chave input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--suave); transition: transform .2s, background .2s; }
.chave input:checked { background: var(--coco); }
.chave input:checked::after { transform: translateX(16px); background: #fff; }

.atalhos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; padding: 4px 2px 6px; }
.atalhos::-webkit-scrollbar { display: none; }
.atalho { flex: none; border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 14px; cursor: pointer; color: #1C1446; }
.a1 { background: var(--maracuja); } .a2 { background: var(--coco); } .a3 { background: var(--pitanga); color: #fff; }
.a4 { background: var(--acai); color: #fff; } .a5 { background: var(--ametista-2); color: var(--texto); }

.compor { display: flex; gap: 8px; width: 100%; max-width: 560px; padding: 6px; border-radius: 999px; background: var(--ametista); border: 1px solid var(--linha); }
.compor input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 6px; outline: none; }
.foto, .enviar { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; }
.foto { background: var(--ametista-2); color: var(--suave); }
.enviar { background: var(--acai); color: #fff; }

/* ---------- painel ---------- */
.painel { background: color-mix(in srgb, var(--ametista) 82%, transparent); border: 1px solid var(--linha); border-radius: 28px; padding: 10px; display: flex; flex-direction: column; min-height: 520px; }
.abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--anil); }
.abas button { border: 0; background: transparent; border-radius: 999px; padding: 9px 6px; font-weight: 600; color: var(--suave); cursor: pointer; }
.abas button[aria-selected="true"] { background: var(--ametista-2); color: var(--texto); }
.contador { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--pitanga); color: #fff; font-size: 12px; }
.aba { padding: 14px 8px 4px; overflow-y: auto; max-height: 64vh; }
.vazio { list-style: none; color: var(--suave); text-align: center; padding: 28px 12px; }

.conversa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.conversa li:not(.vazio) { padding: 10px 14px; border-radius: 18px; max-width: 88%; }
.conversa .voce { align-self: flex-end; background: var(--acai); color: #fff; border-bottom-right-radius: 6px; }
.conversa .kairo { align-self: flex-start; background: var(--ametista-2); border-bottom-left-radius: 6px; }
.conversa .whats { align-self: flex-start; width: min(100%, 360px); background: color-mix(in srgb, var(--coco) 14%, var(--ametista)); border: 1px solid color-mix(in srgb, var(--coco) 55%, transparent); border-bottom-left-radius: 6px; display: grid; gap: 8px; }
.whats .para { margin: 0; font-size: 13px; font-weight: 600; color: var(--coco); }
.whats .msg { margin: 0; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: rgba(0,0,0,.22); white-space: pre-wrap; }
.whats.feito .para::before { content: "✓ "; }
.whats .botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.whats button { font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.whats .ok { background: var(--coco); color: #0E2E29; }
.whats .nao { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--suave); }
.whats .opcao { background: var(--ametista-2); color: var(--texto); text-align: left; }
.whats button:focus-visible { outline: 2px solid var(--maracuja); outline-offset: 2px; }
@media (prefers-color-scheme: light) { .whats .msg { background: rgba(255,255,255,.7); } }
.conversa small { display: block; font-size: 12px; opacity: .75; margin-top: 2px; }

.tarefas, .pessoas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tarefas li:not(.vazio) { padding: 12px 14px; border-radius: 16px; background: var(--anil); cursor: pointer; border-left: 4px solid var(--suave); }
.tarefas li.rodando { border-left-color: var(--maracuja); } .tarefas li.concluida { border-left-color: var(--coco); }
.tarefas li.erro, .tarefas li.interrompida { border-left-color: var(--pitanga); }
.tarefas strong { display: block; } .tarefas p { margin: 4px 0 0; color: var(--suave); font-size: 14px; }
.tarefas .st { font-size: 12px; color: var(--suave); }

.explica { color: var(--suave); margin: 0 4px 12px; font-size: 15px; }
.pessoas li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--anil); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 800 16px var(--display); color: #1C1446; flex: none; }
.pessoas .nome { font-weight: 600; } .pessoas .info { color: var(--suave); font-size: 13px; }
.pessoas .esquecer { margin-left: auto; border: 0; background: transparent; color: var(--pitanga); cursor: pointer; font-weight: 600; }
.cadastrar, .gravar { margin-top: 14px; width: 100%; border: 0; border-radius: 999px; padding: 13px; font-weight: 700; cursor: pointer;
  background: linear-gradient(90deg, var(--maracuja), var(--pitanga)); color: #1C1446; }
.gravar:disabled { opacity: .45; cursor: not-allowed; }
.gravar.gravando { background: var(--pitanga); color: #fff; }
.aviso-voz { color: var(--maracuja); font-size: 14px; }

/* ---------- diálogos ---------- */
dialog { border: 0; border-radius: 24px; background: var(--ametista); color: var(--texto); width: min(640px, 94vw); padding: 0; }
dialog::backdrop { background: rgba(20, 10, 50, .6); backdrop-filter: blur(4px); }
dialog header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
dialog h3 { margin: 0; font: 700 20px var(--display); }
dialog header button { background: none; border: 0; cursor: pointer; font-size: 18px; color: var(--suave); }
#dCorpo { padding: 14px 18px; max-height: 70vh; overflow: auto; white-space: pre-wrap; font-size: 15px; }
#dCorpo a { color: var(--coco); }
.cad-corpo { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.cad-corpo label { color: var(--suave); font-size: 14px; }
.cad-corpo input#cNome { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linha); background: var(--anil); }
.consent { display: flex; gap: 10px; align-items: flex-start; }
.consent input { margin-top: 3px; accent-color: var(--coco); width: 18px; height: 18px; }
.frases { margin: 6px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--suave); }
.frases li.atual { color: var(--texto); font-weight: 600; }
.frases li.feita { color: var(--coco); text-decoration: line-through; }
.cad-status { margin: 4px 0 0; color: var(--suave); font-size: 14px; }

/* ---------- entrar ---------- */
.tela-entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.caixa-entrar { display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); padding: 32px 28px; border-radius: 28px; background: var(--ametista); text-align: center; border: 1px solid var(--linha); }
.caixa-entrar img { align-self: center; }
.caixa-entrar h1 { margin: 0 0 8px; font: 800 34px var(--display); letter-spacing: -.02em; }
.caixa-entrar label { text-align: left; color: var(--suave); font-size: 14px; }
.caixa-entrar input { padding: 13px 14px; border-radius: 14px; border: 1px solid var(--linha); background: var(--anil); }
.caixa-entrar button { padding: 13px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 700; color: #1C1446; background: linear-gradient(90deg, var(--maracuja), var(--pitanga)); }
.aviso { color: var(--pitanga); margin: 0; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .palco { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 16px 24px; }
  .saude { display: none; }
  .pessoa { margin-left: auto; }
  .painel { min-height: 0; }
  .aba { max-height: none; }
  .atalhos { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: 100%; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}