:root{--noite:#0A1C33;--azul:#0F2A4A;--azul2:#16365E;--azul3:#1F4E85;--ouro:#C9A227;--ouroc:#E6C766;--texto:#1c2735;--suave:#5b6775;--linha:#e3e8ef;--bg:#F4F6F9;--ok:#1f8f4e;--erro:#b3261e}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--texto);background:var(--bg);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;color:var(--azul);margin:0 0 12px}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;border-radius:8px;padding:9px 16px;background:var(--azul);color:#fff;font-weight:600}
button.sec{background:#fff;color:var(--azul);border:1px solid var(--linha)}button.perigo{background:var(--erro)}button.ouro{background:var(--ouro);color:var(--noite)}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{width:100%;border:1px solid #cfd6df;border-radius:8px;padding:9px 11px;background:#fff}
textarea{min-height:120px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
label{display:block;font-weight:600;margin:12px 0 4px;font-size:.9rem}
.dica{color:var(--suave);font-size:.85rem;margin:4px 0 0}
.oculto{display:none!important}
/* entrar */
.tela-entrar{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1b3d68,var(--noite) 70%);padding:16px}
.cartao-entrar{background:#fff;border-radius:16px;padding:34px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:center}
.cartao-entrar img{width:72px;height:72px}.cartao-entrar form{text-align:left}.cartao-entrar button{width:100%;margin-top:18px;padding:12px}
.msg-erro{color:var(--erro);font-size:.9rem;min-height:1.2em;margin-top:10px}
/* painel */
.topo{background:var(--noite);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;flex-wrap:wrap}
.topo .marca{display:flex;align-items:center;gap:10px;font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:700}.topo img{width:36px;height:36px}
.topo nav{display:flex;gap:4px;flex-wrap:wrap}.topo nav button{background:transparent;color:#d6dfeb;font-weight:500}.topo nav button[aria-current=page]{background:var(--azul2);color:var(--ouroc)}
.usuario{font-size:.85rem;color:#b9c6d6;display:flex;gap:10px;align-items:center}.usuario button{padding:5px 10px;background:transparent;border:1px solid #3a5577}
main{padding:18px;max-width:1300px;margin:0 auto}
.caixa{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:18px;margin-bottom:16px}
.aviso{background:#FFF6D8;border-left:4px solid var(--ouro);padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:.9rem}
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* conversas */
.conversas{display:grid;grid-template-columns:320px 1fr;gap:16px;height:calc(100vh - 110px)}
.lista{background:#fff;border:1px solid var(--linha);border-radius:12px;overflow:auto}
.item{padding:12px 14px;border-bottom:1px solid var(--linha);cursor:pointer;display:flex;justify-content:space-between;gap:8px}.item:hover,.item.ativo{background:#eef3fa}
.item b{display:block}.item small{color:var(--suave)}
.selo{font-size:.7rem;font-weight:700;border-radius:20px;padding:2px 8px;white-space:nowrap;align-self:start}.selo.agente{background:#e3f1e8;color:var(--ok)}.selo.humano{background:#fdeede;color:#9a5a00}
.badge{background:var(--ouro);color:var(--noite);border-radius:20px;font-size:.7rem;font-weight:700;padding:1px 7px;margin-left:4px}
.chat{background:#fff;border:1px solid var(--linha);border-radius:12px;display:flex;flex-direction:column;min-height:0}
.chat-topo{padding:12px 16px;border-bottom:1px solid var(--linha);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.msgs{flex:1;overflow:auto;padding:16px;background:#efeae2;display:flex;flex-direction:column;gap:8px}
.bolha{max-width:75%;padding:8px 12px;border-radius:10px;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bolha.cliente{background:#fff;align-self:flex-start}.bolha.agente{background:#d9fdd3;align-self:flex-end}.bolha.atendente{background:#dbe8fb;align-self:flex-end}.bolha.sistema{background:#fde2e1;align-self:center;font-size:.85rem}
.bolha small{display:block;color:var(--suave);font-size:.72rem;margin-top:3px}
.enviar{display:flex;gap:8px;padding:10px;border-top:1px solid var(--linha)}.enviar textarea{min-height:44px;height:44px;font-family:inherit;font-size:15px}
.vazio{color:var(--suave);text-align:center;margin:auto;padding:30px}
/* conhecimento */
.kb{display:grid;grid-template-columns:280px 1fr;gap:16px}
.kb .lista .item{display:block}.kb textarea{min-height:60vh}
.acoes{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;font-size:.88rem}th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--linha);vertical-align:top}
.ferr{font-size:.75rem;color:var(--suave)}
@media(max-width:800px){.conversas,.kb,.grade2{grid-template-columns:1fr}.conversas{height:auto}.lista{max-height:40vh}.chat{height:70vh}}