:root {
  --fundo: #14161a; --lateral: #1b1e23; --cartao: #22262c; --linha: #2e333a;
  --texto: #e8e6e3; --suave: #9aa0a6; --destaque: #d97757; --eu: #2f4a6b; --erro: #ff7b72; --ok: #56d364;
  --raio: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; border-radius: 10px; background: var(--destaque); padding: 8px 14px; }
button:disabled { opacity: .5; cursor: default; }
button.discreto { background: transparent; color: var(--suave); padding: 6px 10px; }
button.discreto:hover { color: var(--texto); }
button.icone { background: transparent; color: var(--suave); font-size: 18px; padding: 4px 10px; }
input, textarea { font: inherit; color: var(--texto); background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--destaque); outline-offset: -1px; }
.erro { color: var(--erro); min-height: 1.5em; margin: 8px 0 0; }

/* login */
.login { min-height: 100%; display: grid; place-items: center; padding: 20px; }
.cartao { background: var(--lateral); border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px; width: min(360px, 100%); display: grid; gap: 10px; }
.cartao h1 { margin: 0 0 8px; font-size: 22px; }
.cartao label { color: var(--suave); font-size: 13px; }

/* layout */
.app { display: grid; grid-template-columns: 320px 1fr; height: 100dvh; }
.lateral { background: var(--lateral); border-right: 1px solid var(--linha); display: flex; flex-direction: column; min-height: 0; }
.painel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.topo { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linha); min-height: 54px;
  padding-top: max(10px, env(safe-area-inset-top)); }
.topo strong { flex: 1; font-size: 17px; }
.lista { overflow-y: auto; flex: 1; padding: 8px 0 24px; }

.empresa { padding: 14px 16px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.agente > button.nome { width: 100%; text-align: left; background: transparent; border-radius: 0; padding: 10px 16px; display: flex; gap: 8px; align-items: baseline; }
.agente > button.nome:hover { background: var(--cartao); }
.agente.aberto > button.nome { background: var(--cartao); }
.agente .modelo { color: var(--suave); font-size: 12px; margin-left: auto; white-space: nowrap; }
.sessoes { padding: 4px 8px 10px 16px; display: grid; gap: 2px; }
.sessoes .nova { justify-self: start; margin: 4px 0 6px; padding: 6px 12px; font-size: 14px; }
.sessoes .aviso { color: var(--suave); font-size: 13px; padding: 4px 0; }
.sessao { text-align: left; background: transparent; border-radius: 8px; padding: 7px 10px; display: grid; gap: 1px; }
.sessao:hover { background: var(--cartao); }
.sessao.ativa { background: var(--eu); }
.sessao .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sessao .m { color: var(--suave); font-size: 12px; display: flex; gap: 10px; }
.sessao.ativa .m { color: #c9d4e3; }

.topo-chat .voltar { display: none; }
.titulo-chat { flex: 1; min-width: 0; }
.titulo-chat .sub { color: var(--suave); font-size: 12px; }
.titulo-chat .titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.custo { color: var(--suave); font-size: 13px; text-align: right; white-space: nowrap; }

.vazio { flex: 1; display: grid; place-items: center; color: var(--suave); padding: 20px; text-align: center; }

/* mensagens */
.mensagens { flex: 1; overflow-y: auto; padding: 16px clamp(10px, 4vw, 48px) 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.bolha { max-width: min(780px, 92%); padding: 10px 14px; border-radius: var(--raio); overflow-wrap: anywhere; }
.bolha.eu { align-self: flex-end; background: var(--eu); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.bolha.agente { align-self: flex-start; background: var(--cartao); border-bottom-left-radius: 4px; }
.bolha.previa { opacity: .85; }
.bolha.sistema { align-self: center; background: transparent; color: var(--suave); font-size: 13px; text-align: center; padding: 4px; }
.bolha.sistema.erro { color: var(--erro); }
.bolha > :first-child { margin-top: 0; } .bolha > :last-child { margin-bottom: 0; }
.bolha pre { background: #0e1013; padding: 10px; border-radius: 8px; overflow-x: auto; font-size: 13px; }
.bolha code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.bolha :not(pre) > code { background: #0e1013; padding: 1px 5px; border-radius: 5px; }
.bolha table { border-collapse: collapse; display: block; overflow-x: auto; }
.bolha th, .bolha td { border: 1px solid var(--linha); padding: 4px 8px; }
.bolha a { color: #79c0ff; }
.bolha img { max-width: 100%; }
.bolha blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--linha); color: var(--suave); }

/* ferramentas recolhidas */
details.ferramenta { align-self: flex-start; max-width: min(780px, 92%); width: fit-content; background: transparent; border: 1px solid var(--linha); border-radius: 10px; font-size: 13px; }
details.ferramenta > summary { cursor: pointer; padding: 6px 12px; color: var(--suave); list-style: none; display: flex; gap: 8px; align-items: center; }
details.ferramenta > summary::-webkit-details-marker { display: none; }
details.ferramenta > summary::before { content: "\25B8"; font-size: 11px; }
details.ferramenta[open] > summary::before { content: "\25BE"; }
details.ferramenta .estado { margin-left: auto; }
details.ferramenta .estado.ok { color: var(--ok); } details.ferramenta .estado.falha { color: var(--erro); }
details.ferramenta pre { margin: 0; padding: 8px 12px; border-top: 1px solid var(--linha); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; font-size: 12px; }
.confirmar { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--linha); align-items: center; flex-wrap: wrap; }
.confirmar span { color: var(--texto); }
.confirmar .negar { background: var(--linha); }

.pensando { display: flex; align-items: center; gap: 8px; padding: 6px clamp(10px, 4vw, 48px); color: var(--suave); font-size: 14px; }
.pensando button { margin-left: auto; }
.pontos { display: inline-flex; gap: 3px; } .pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--suave); animation: pulsar 1.2s infinite ease-in-out; }
.pontos i:nth-child(2) { animation-delay: .15s; } .pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes pulsar { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.compor { display: flex; gap: 8px; padding: 10px clamp(10px, 4vw, 48px); padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); align-items: flex-end; }
.compor textarea { resize: none; max-height: 40vh; min-height: 44px; font-size: 16px; }
.compor button { height: 44px; min-width: 48px; font-size: 18px; }

/* celular: uma tela por vez */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .app.no-chat .lateral { display: none; }
  .app:not(.no-chat) .painel { display: none; }
  .topo-chat .voltar { display: inline-block; }
  .bolha, details.ferramenta { max-width: 96%; }
}