:root{
  --preto:#070707; --carvao:#111; --borda:#2a2a2a; --borda-forte:#3d3d3d;
  --texto:#f2f2f2; --suave:#9a9a9a; --destaque:#fff; --ok:#6ee7a8; --aviso:#ffd36e;
  --raio:14px; --fonte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--preto); color:var(--texto); font-family:var(--fonte);
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%, #1c1c1c 0%, transparent 60%);
  display:flex; flex-direction:column; -webkit-font-smoothing:antialiased;
}
header{padding:22px 20px 14px; text-align:center; border-bottom:1px solid var(--borda)}
.logo{font-size:30px; font-weight:300; letter-spacing:10px; margin-left:10px}
.logo b{font-weight:600}
.sub{font-size:11px; letter-spacing:4px; color:var(--suave); text-transform:uppercase; margin-top:6px}
.tag{font-size:12px; color:var(--suave); margin-top:10px; font-style:italic}

main{flex:1; display:flex; flex-direction:column; max-width:860px; width:100%; margin:0 auto; padding:0 16px; min-height:0}
#conversa{flex:1; overflow-y:auto; padding:22px 4px 10px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth}
#conversa::-webkit-scrollbar{width:6px}
#conversa::-webkit-scrollbar-thumb{background:var(--borda-forte); border-radius:3px}

.msg{max-width:92%; line-height:1.55; font-size:15px; animation:surge .25s ease}
@keyframes surge{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.eu{align-self:flex-end; background:#fff; color:#000; padding:11px 16px; border-radius:var(--raio) var(--raio) 4px var(--raio); font-weight:500}
.msg.bot{align-self:flex-start; background:var(--carvao); border:1px solid var(--borda); padding:14px 17px; border-radius:var(--raio) var(--raio) var(--raio) 4px}
.msg.bot h3{font-size:15px; font-weight:600; margin-bottom:4px; letter-spacing:.3px}
.msg.bot .dica{font-size:12.5px; color:var(--suave); margin-top:10px}

.itens{display:flex; flex-direction:column; gap:7px; margin-top:12px}
a.item{display:flex; align-items:center; gap:11px; padding:11px 13px; background:#0b0b0b;
  border:1px solid var(--borda); border-radius:10px; color:var(--texto); text-decoration:none; transition:.15s}
a.item:hover{border-color:#6a6a6a; background:#151515; transform:translateX(3px)}
a.item .ic{font-size:17px; width:22px; text-align:center; flex:none}
a.item .tx{flex:1; min-width:0}
a.item .nm{font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
a.item .cm{font-size:11.5px; color:var(--suave); margin-top:2px}
a.item .seta{color:var(--suave); font-size:13px}

.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.chip{padding:7px 13px; background:transparent; border:1px solid var(--borda-forte); color:var(--texto);
  border-radius:999px; font-size:12.5px; cursor:pointer; font-family:inherit; transition:.15s}
.chip:hover{background:#fff; color:#000; border-color:#fff}

footer{padding:12px 16px 20px; max-width:860px; width:100%; margin:0 auto}
.caixa{display:flex; gap:9px; align-items:flex-end; background:var(--carvao);
  border:1px solid var(--borda-forte); border-radius:var(--raio); padding:9px 10px 9px 15px; transition:.15s}
.caixa:focus-within{border-color:#777; background:#141414}
#entrada{flex:1; background:none; border:none; outline:none; color:var(--texto); font-family:inherit;
  font-size:15px; resize:none; max-height:120px; line-height:1.45; padding:4px 0}
#entrada::placeholder{color:#6a6a6a}
#enviar{background:#fff; color:#000; border:none; width:38px; height:38px; border-radius:9px;
  cursor:pointer; font-size:16px; flex:none; transition:.15s; font-weight:700}
#enviar:hover{transform:scale(1.06)}
#enviar:disabled{opacity:.3; cursor:default; transform:none}
.rodape-nota{text-align:center; font-size:11px; color:#5a5a5a; margin-top:10px; letter-spacing:.3px}

.digitando{display:flex; gap:4px; padding:4px 0}
.digitando i{width:6px; height:6px; background:var(--suave); border-radius:50%; animation:pula 1.2s infinite}
.digitando i:nth-child(2){animation-delay:.2s}
.digitando i:nth-child(3){animation-delay:.4s}
@keyframes pula{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

@media(max-width:600px){
  .logo{font-size:24px; letter-spacing:7px}
  .msg{max-width:97%; font-size:14.5px}
  header{padding:16px 14px 11px}
}

#microfone{background:transparent;border:1px solid var(--borda-forte);color:var(--texto);width:38px;height:38px;
  border-radius:9px;cursor:pointer;font-size:15px;flex:none;transition:.15s}
#microfone:hover{border-color:#fff}
#microfone.gravando{background:#e5484d;border-color:#e5484d;animation:pulsa 1.1s infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.55}}
.aviso-cat{font-size:12.5px;color:var(--aviso);margin-top:9px}
.carimbo{display:inline-block;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
  background:#1d1d1d;border:1px solid var(--borda-forte);color:var(--suave);padding:2px 7px;border-radius:5px;margin-left:7px}
.carimbo.novo{color:var(--ok);border-color:#2b5c43}

/* --- ajustes de celular --- */
@media(max-width:620px){
  a.item{gap:9px; padding:10px 11px}
  a.item .seta{display:none}
  a.item .nm{white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; line-height:1.3}
  a.item .ic{font-size:16px; width:18px}
  .carimbo{display:inline-block; margin:4px 0 0 0}
  #entrada{font-size:16px}           /* evita o zoom automático do iOS */
  .chip{font-size:12px; padding:6px 11px}
  footer{padding:10px 12px 14px}
  .rodape-nota{font-size:10px}
}

.ficha{margin-top:11px;border:1px solid var(--borda);border-radius:10px;overflow:hidden;background:#0b0b0b}
.lf{display:flex;justify-content:space-between;gap:12px;padding:9px 13px;border-bottom:1px solid #1c1c1c;font-size:13.5px}
.lf:last-child{border-bottom:none}
.lf-r{color:var(--suave)}
.lf-v{color:var(--texto);font-weight:500;text-align:right}