/* iNova 1.2.0 — visual da previa kgchat_visual_temas.html. Tema: sem data-tema segue o Windows (prefers-color-scheme);
   data-tema="claro"/"escuro" e' a escolha do analista (tema.js). Os tokens escuros aparecem duas vezes de proposito. */
:root {
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#f8fafc; --fg:#17202b; --muted:#647184; --line:#e3e8ef;
  --accent:#1162b5; --accent2:#e8f1fb; --accent-fg:#ffffff; --me:#1162b5; --me-fg:#ffffff; --cy:#1fb6d9;
  --ok:#15803d; --okbg:#e8f6ee; --warn:#b45309; --warnbg:#fdf3e4; --bad:#b91c1c; --chip:#eef2f7; --chip-fg:#2b3a4d;
  --nome:#253a8a; --code:#f1f4f8; --shadow:0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
  --glow:rgba(53,82,184,.3);
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) {
  --bg:#0e1116; --panel:#151a21; --panel2:#11161c; --fg:#e7ebf0; --muted:#8e9aab; --line:#252c36;
  --accent:#4c9ef0; --accent2:#16273b; --accent-fg:#06101c; --me:#1f4f86; --me-fg:#eef5ff; --cy:#7ff3ff;
  --ok:#4ade80; --okbg:#10291b; --warn:#fbbf24; --warnbg:#2d230c; --bad:#f87171; --chip:#1d2430; --chip-fg:#c9d3df;
  --nome:#e8ecf3; --code:#1b222c; --shadow:0 1px 2px rgba(0,0,0,.4); --glow:rgba(127,243,255,.3);
} }
:root[data-tema="escuro"] {
  --bg:#0e1116; --panel:#151a21; --panel2:#11161c; --fg:#e7ebf0; --muted:#8e9aab; --line:#252c36;
  --accent:#4c9ef0; --accent2:#16273b; --accent-fg:#06101c; --me:#1f4f86; --me-fg:#eef5ff; --cy:#7ff3ff;
  --ok:#4ade80; --okbg:#10291b; --warn:#fbbf24; --warnbg:#2d230c; --bad:#f87171; --chip:#1d2430; --chip-fg:#c9d3df;
  --nome:#e8ecf3; --code:#1b222c; --shadow:0 1px 2px rgba(0,0,0,.4); --glow:rgba(127,243,255,.3);
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:14.5px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif; }
button { font:inherit; cursor:pointer; }
button:disabled { opacity:.6; cursor:default; }

.screen { display:none; } .screen.on { display:flex; }
/* marca: NovaCon (sempre em chip branco, o PNG nao tem fundo transparente) + logo iNova + nome */
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
/* 1.3.5: cabecalho da proposta A (Marketing; Diego aprovou 09/11): divisor fino, halo no icone, frase em caixa-alta */
.brand .sep { width:1px; height:34px; background:var(--line); margin:0 2px; flex:none; }
.marca { background:#fff; border-radius:9px; padding:4px 8px; display:inline-flex; align-items:center; border:1px solid var(--line); }
.marca img { height:26px; display:block; }
.inova { width:36px; height:36px; display:block; flex:none; border-radius:50%;
  box-shadow:0 0 0 3px var(--panel), 0 0 0 4px var(--line), 0 0 16px var(--glow); }
.nome { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.nome b { font-size:23px; font-weight:700; letter-spacing:-.4px; color:var(--nome); }
.nome b .i { color:#d22f2f; }
.nome > span { color:var(--muted); font-size:9.5px; letter-spacing:.15em; font-weight:600; text-transform:uppercase; margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.temas { display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; flex:none; }
.temas button { border:0; background:var(--panel); color:var(--muted); padding:5px 9px; font-size:14px; line-height:1; }
.temas button.on { background:var(--accent2); color:var(--accent); }

/* login */
#login, #troca { min-height:100vh; align-items:center; justify-content:center; padding:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 24px; width:100%; max-width:460px; box-shadow:var(--shadow); }
.card .nome > span { white-space:normal; }   /* no login o subtitulo quebra a linha em vez de cortar */
.cardTop { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:18px; }
label { display:block; font-size:12px; color:var(--muted); margin:12px 0 4px; }
input, textarea, select { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:var(--panel2); color:var(--fg); font:inherit; }
.primary { width:100%; margin-top:18px; border:0; border-radius:9px; padding:10px; background:var(--accent); color:var(--accent-fg); font-weight:600; }
.fine { color:var(--muted); font-size:12px; margin-top:14px; }
.erro { color:var(--bad); font-size:13px; min-height:18px; margin-top:8px; }

/* app */
#app { flex-direction:column; height:100vh; height:100dvh; }   /* 1.3.5 M2: no celular o 100vh passa da barra do navegador */
.top { display:flex; align-items:center; gap:10px; padding:8px 16px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.top .grow { flex:1; }
.acoesTopo { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.menuBtn, .veu { display:none; }
.status { display:flex; align-items:center; gap:4px; background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:3px; }
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.pill.ok { color:var(--ok); background:var(--okbg); } .pill.warn { color:var(--warn); background:var(--warnbg); }
.pill.n { color:var(--muted); background:var(--chip); }
.dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.linkbtn { border:1px solid var(--line); background:var(--panel); color:var(--fg); border-radius:8px; padding:5px 11px; font-size:13px; }
.user { color:var(--muted); font-size:12.5px; } .user a { color:inherit; }
.body { flex:1; display:flex; min-height:0; }
.side { width:270px; background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.side .new { margin:14px 14px 10px; border:0; border-radius:9px; padding:9px; background:var(--accent); color:var(--accent-fg); font-weight:600; }
.side .search { margin:0 14px 8px; }
.side .search input { padding:7px 10px; font-size:13px; }
.convs { overflow:auto; flex:1; padding-bottom:8px; }
.grp { padding:10px 16px 4px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.conv { margin:2px 8px; padding:8px 10px; border-radius:8px; cursor:pointer; }
.conv:hover { background:var(--panel2); } .conv.on { background:var(--accent2); }
.conv b { display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv { position:relative; } .conv .ren { position:absolute; right:6px; top:6px; border:0; background:none; color:var(--muted);
  cursor:pointer; font-size:13px; padding:0 4px; opacity:0; } .conv:hover .ren, .conv .ren:focus { opacity:1; }
.conv .renIn { width:100%; box-sizing:border-box; font-family:inherit; font-size:13.5px; font-weight:600; padding:2px 4px; border:1px solid var(--accent);
  border-radius:6px; background:var(--panel); color:inherit; }
.conv span { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.conv .tag { font-size:11px; padding:0 7px; border-radius:999px; background:var(--chip); color:var(--chip-fg); font-style:normal; }
.conv .tag.ok { background:var(--okbg); color:var(--ok); } .conv .tag.warn { background:var(--warnbg); color:var(--warn); }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.thread { flex:1; overflow:auto; padding:22px 16px 10px; }
.msgw { max-width:780px; margin:0 auto; }

/* mensagens: a do analista em bolha; a do iNova em cartao de leitura com o logo ao lado */
.msg.me { display:block; margin:6px 0 18px auto; width:fit-content; max-width:75%; background:var(--me); color:var(--me-fg); padding:9px 14px; border-radius:16px 16px 4px 16px; overflow-wrap:anywhere; white-space:pre-wrap; }
.msg.me .meta { color:inherit; opacity:.7; font-size:11px; text-align:right; margin-top:2px; }
.msg.me .anexoMe { font-size:12px; opacity:.85; margin-top:3px; }
.bot { display:flex; gap:12px; margin:0 0 22px; }
.bot > img { width:30px; height:30px; flex:none; margin-top:2px; }
.msg.cartao { flex:1; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:4px 14px 14px 14px; padding:12px 18px 14px; box-shadow:var(--shadow); overflow-wrap:anywhere; }
.who { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:6px; flex-wrap:wrap; }
.who b { color:var(--fg); font-size:13px; }
.who .accs { margin-left:auto; display:flex; gap:2px; }
.who .accs button { border:0; background:transparent; color:var(--muted); padding:2px 7px; border-radius:6px; font-size:12.5px; }
.who .accs button:hover { background:var(--panel2); color:var(--fg); }
.who .accs button.on { background:var(--accent2); color:var(--accent); }
.msg.cartao p { margin:6px 0; } .msg.cartao ul { margin:4px 0 6px; padding-left:20px; } .msg.cartao li { margin:2px 0; }
.msg.cartao code { background:var(--code); padding:1px 5px; border-radius:5px; font-size:13px; }
.msg.cartao a { color:var(--accent); }
/* 1.3.6 (PRO3): tabela da resposta; rola de lado no celular em vez de estourar a tela */
.msg.cartao .tabw { overflow-x:auto; margin:8px 0; }
.msg.cartao table.mdTab { border-collapse:collapse; font-size:13px; min-width:60%; }
.msg.cartao .mdTab th, .msg.cartao .mdTab td { border:1px solid var(--line); padding:4px 8px; text-align:left; vertical-align:top;
  overflow-wrap:normal; word-break:normal; }   /* o cartao quebra em qualquer letra; na tabela so' entre palavras */
.msg.cartao .mdTab th { white-space:nowrap; }
.msg.cartao .mdTab th { background:var(--panel2); font-weight:600; }
.fontes { margin-top:12px; border-top:1px dashed var(--line); padding-top:8px; }
.fontes summary { cursor:pointer; font-size:12.5px; color:var(--muted); }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.kb { font-size:12px; padding:2px 9px; border-radius:999px; background:var(--chip); color:var(--chip-fg); border:1px solid var(--line); }
.kb.mos { border-color:transparent; background:var(--warnbg); color:var(--warn); }
.meta { color:var(--muted); font-size:12px; margin-top:6px; }
.internal { font-size:12px; color:var(--warn); margin-top:6px; }
.acts { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; align-items:center; }
.acts span { color:var(--muted); font-size:12.5px; }
.acts button { border:1px solid var(--line); background:var(--panel); color:var(--fg); border-radius:8px; padding:3px 12px; font-size:12.5px; }
.stage { display:flex; gap:8px; align-items:center; justify-content:center; color:var(--muted); font-size:13px; margin:4px 0 16px; }
.typing { display:inline-flex; gap:3px; }
.typing i { width:5px; height:5px; border-radius:50%; background:var(--cy); animation:b 1.2s infinite; }
.typing i:nth-child(2) { animation-delay:.2s; } .typing i:nth-child(3) { animation-delay:.4s; }
@keyframes b { 0%, 80%, 100% { opacity:.25; } 40% { opacity:1; } }
.queue { text-align:center; color:var(--muted); font-size:13px; margin:4px 0 16px; }
.queue b { color:var(--fg); }
.msg.cartao.proposta { margin:-12px 0 22px 42px; border-color:var(--accent); }
body.soltando .row { outline:2px dashed var(--accent); outline-offset:4px; }
.queue.aviso { color:var(--fg); background:var(--accent2); border-radius:10px; padding:8px 12px; }
.anexo { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px; padding:6px 10px; margin:8px 0 2px; background:var(--panel2); font-size:13px; }
.anexo .ic { min-width:34px; height:26px; border-radius:6px; display:grid; place-items:center; font-size:10px; font-weight:700; color:#fff; background:#5f6b7a; }
.anexo .grow { flex:1; min-width:0; overflow-wrap:anywhere; } .anexo .m { color:var(--muted); font-size:11px; }
.anexo a.baixar { border-radius:6px; padding:4px 12px; background:var(--accent); color:var(--accent-fg); font-weight:600; text-decoration:none; }

/* caixa de envio unica */
.composer { padding:10px 16px 14px; }
.composer .row { max-width:780px; margin:0 auto; display:flex; gap:6px; align-items:flex-end; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:7px 7px 7px 8px; box-shadow:var(--shadow); }
.composer textarea { flex:1; border:0; outline:0; resize:none; background:transparent; height:44px; padding:6px 4px; }
.composer button.clip { border:0; background:transparent; color:var(--muted); width:36px; height:36px; border-radius:8px; font-size:16px; padding:0; }
.composer button.clip:hover { background:var(--panel2); }
.composer #send { border:0; background:var(--accent); color:var(--accent-fg); width:38px; height:38px; border-radius:10px; font-size:16px; padding:0; }
.composer .hint { max-width:780px; margin:6px auto 0; color:var(--muted); font-size:11.5px; text-align:center; }
.composer .sel { max-width:780px; margin:0 auto 6px; display:flex; flex-wrap:wrap; gap:6px; } .composer .sel:empty { display:none; }
.chipArq { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:2px 4px 2px 10px; font-size:12px; background:var(--chip); }
.chipArq button { border:0; background:transparent; color:var(--muted); padding:0 6px; font-size:14px; }

/* janelas */
.ov { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:16px; z-index:8; }
.ov.on { display:flex; }
.modal { background:var(--panel); color:var(--fg); border-radius:14px; width:100%; max-width:640px; max-height:94vh; overflow:auto; border:1px solid var(--line); }
.mh { display:flex; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); align-items:center; flex-wrap:wrap; }
.mh b { font-size:14px; }
.timer { font-variant-numeric:tabular-nums; color:var(--warn); font-weight:600; font-size:13px; }
.mf { padding:0 14px 14px; color:var(--muted); font-size:12.5px; }
.mf ul { margin:6px 0; padding-left:18px; }
.mf h4 { color:var(--fg); margin:16px 0 6px; font-size:13.5px; }
.mbtns { display:flex; gap:8px; justify-content:flex-end; padding:0 14px 14px; flex-wrap:wrap; }
.mbtns button { border:1px solid var(--line); background:var(--panel); color:var(--fg); border-radius:8px; padding:6px 12px; }
/* Tela espelhada: ocupa quase toda a janela (a 640 px a pagina da Oracle de 1280 px saia pela metade e borrada - Diego 05/11) */
.modal.tela { max-width:min(1320px, 96vw); }
.mirror { position:relative; overflow:hidden; display:block; aspect-ratio:1280/900; margin:8px auto; width:min(calc(100% - 28px), calc(76vh * 1280 / 900)); border:1px solid var(--line); border-radius:8px; background:#1b1f24; }
.mirror canvas { width:100%; height:100%; display:block; outline:none; }
.mirror #mirrorMsg { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.55); text-align:center; padding:12px; font-size:15px; }
.mirror #mirrorMsg:empty { display:none; }
.mirror #mirrorMsg.fim { background:var(--panel); color:var(--fg); font-size:16px; line-height:1.5; padding:24px 40px; }
.modal.wide { max-width:900px; }
.tab { width:100%; border-collapse:collapse; font-size:13px; margin:6px 0 12px; color:var(--fg); }
.tab th, .tab td { text-align:left; padding:4px 8px; border-bottom:1px solid var(--line); }
.tab th { color:var(--muted); font-weight:600; }
.tab button { border:1px solid var(--line); background:var(--panel); color:var(--fg); border-radius:6px; padding:1px 8px; font-size:12px; margin-right:4px; }
.linha { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; } .linha input, .linha select { width:auto; flex:1; min-width:140px; padding:6px 8px; }
.linha .go { border:0; border-radius:8px; padding:6px 14px; background:var(--accent); color:var(--accent-fg); font-weight:600; }
.senhaNova { border:1px solid var(--warn); background:var(--warnbg); color:var(--fg); border-radius:8px; padding:8px 12px; margin:8px 0; font-size:13px; }
.senhaNova code { font-size:15px; font-weight:700; user-select:all; }
/* painel do aprendizado */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; }
.kpi { border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--panel2); }
.kpi b { display:block; font-size:20px; color:var(--fg); font-variant-numeric:tabular-nums; }
.kpi span { font-size:12px; }
.aprDet { margin-top:6px; font-size:12.5px; } .aprDet p { margin:4px 0; }
[hidden] { display:none !important; }
/* 1.3.5 (Diego: "bem desconfigurado" no celular; Qualidade M1-M6 em 375x812) */
@media (hover:none) { .conv .ren { opacity:1; } }                    /* M6: no toque nao ha hover */
@media (max-width:760px) {
  /* M4: topo de uma linha (~56 px): o ☰, o logo e o nome; o resto vai para a gaveta (o app.js muda o .acoesTopo de lugar) */
  .top { flex-wrap:nowrap; gap:8px; padding:8px 10px; min-height:56px;
    padding-left:max(10px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right)); }   /* O3: iPhone deitado */
  .top .marca, .top .sep, .top .nome > span { display:none; } .top .inova { width:30px; height:30px; } .top .nome b { font-size:18px; }
  .menuBtn { display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; padding:0;
    border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--fg); font-size:19px; }
  /* M1: a lista, a busca, "+ Nova conversa" e o renomear numa gaveta que o ☰ abre */
  .side { position:fixed; z-index:6; top:0; bottom:0; left:0; width:min(320px, 86vw); transform:translateX(-105%);
    transition:transform .2s ease; box-shadow:0 0 24px rgba(0,0,0,.25); overflow:auto; }
  body.menu .side { transform:none; }
  body.menu .veu { display:block; position:fixed; inset:0; z-index:5; background:rgba(0,0,0,.4); }
  .side .acoesTopo { flex-direction:column; align-items:stretch; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); }
  .side .acoesTopo .status, .side .acoesTopo .temas { align-self:flex-start; }
  .side .acoesTopo .status { flex-wrap:wrap; } .side .acoesTopo .user { padding:2px 2px 0; }
  .side .convs { overflow:visible; flex:none; }
  /* M3: abaixo de 16 px o Safari do iPhone da' zoom sozinho ao tocar no campo */
  input, textarea, select, .side .search input, .conv .renIn { font-size:16px; }
  /* 1.3.6 (print do Diego, Android): no login/troca de senha os temas cobriam o nome e a frase virava uma coluna de
     palavras. Linha 1: logo NovaCon | icone; linha 2: o nome e a frase na largura toda; os temas descem para a direita */
  #login, #troca { min-height:100dvh; padding:12px; }
  .card { padding:20px 16px; }
  .cardTop { flex-wrap:wrap; row-gap:10px; }
  .card .brand { flex-wrap:wrap; row-gap:8px; flex:1 1 100%; }
  .card .nome { flex-basis:100%; }
  .cardTop .temas { margin-left:auto; }
  /* M5: o rodape "Enter envia" nao serve no celular; a caixa respeita a barra de baixo do iPhone */
  .composer .hint { display:none; }
  .composer { padding:8px 10px; padding-bottom:max(10px, env(safe-area-inset-bottom));
    padding-left:max(10px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right)); }
  .thread { padding:14px 10px 8px; }
  .msg.me { max-width:90%; } .bot > img { display:none; } .msg.cartao { padding:10px 12px; }
}