/* Atendimento Estação 6: layout estilo WhatsApp do iPhone, claro e escuro (tokens.css), mobile primeiro. */
:root{--btn:#B34A27;--btn-tinta:#fff;--bolha-eu:#DCEBD7;--bolha-eu-tinta:#27331f;--bolha-bot:#F4E7D0;--fundo-chat:#EFE8DE}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){--btn:#F2905F;--btn-tinta:#241a12;--bolha-eu:#3A4A37;--bolha-eu-tinta:#EEF4EA;--bolha-bot:#4A3F2C;--fundo-chat:#1E1B17}}
:root[data-tema="escuro"]{--btn:#F2905F;--btn-tinta:#241a12;--bolha-eu:#3A4A37;--bolha-eu-tinta:#EEF4EA;--bolha-bot:#4A3F2C;--fundo-chat:#1E1B17}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font:15px/1.4 var(--e6-fonte-texto);background:var(--e6-fundo);color:var(--e6-tinta);overscroll-behavior:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
.ic{display:block;flex:none}
#app{height:100dvh;display:flex;flex-direction:column}
:focus-visible{outline:3px solid var(--e6-azul);outline-offset:2px}
.mut{color:var(--e6-tinta-suave)}
.oculto{display:none!important}

/* botões */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--btn);color:var(--btn-tinta);font-weight:700}
.bt.sec{background:var(--e6-superficie-2);color:var(--e6-tinta)}
.bt.peq{min-height:36px;padding:0 14px;font-size:14px}
.bt.perigo{background:#B3261E;color:#fff}
.bt[disabled]{opacity:.5;cursor:default}
.ib{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--e6-tinta)}
.ib:hover{background:var(--e6-superficie-2)}
.campo{width:100%;min-height:46px;border:1px solid var(--e6-linha);background:var(--e6-superficie);border-radius:14px;padding:10px 14px}
label.rot{display:block;font-weight:600;font-size:13px;margin:14px 0 6px;color:var(--e6-tinta-suave)}

/* login */
.entrar{margin:auto;width:min(420px,100% - 32px);padding:28px 24px;background:var(--e6-superficie);border-radius:var(--e6-raio-lg);box-shadow:var(--e6-sombra)}
.entrar img{display:block;width:150px;margin:0 auto 6px}
.entrar h1{font:600 24px var(--e6-fonte-titulo);text-align:center;margin:8px 0 4px}
.entrar p{text-align:center;margin:0 0 8px}
.entrar .bt{width:100%;margin-top:20px}
.erro{background:#F8DAD6;color:#5c150f;border-radius:12px;padding:10px 12px;margin-top:12px;font-size:14px}
:root[data-tema="escuro"] .erro,.erro-escuro{background:#4a1f1b;color:#ffd9d4}
.ok-msg{background:#DDEBD7;color:#233a1b;border-radius:12px;padding:10px 12px;margin-top:12px;font-size:14px}
.trocar{margin-top:14px;text-align:center}
.trocar button{color:var(--e6-marca);font-weight:700;text-decoration:underline;min-height:40px}

/* estrutura principal: lista + conversa */
.corpo{flex:1;display:flex;min-height:0}
.lista{width:100%;display:flex;flex-direction:column;min-height:0;background:var(--e6-fundo-2);border-right:1px solid var(--e6-linha)}
.painel{flex:1;display:none;flex-direction:column;min-width:0;background:var(--fundo-chat)}
.em-conversa .lista{display:none}
.em-conversa .painel{display:flex}
@media (min-width:860px){.lista{width:380px;flex:none;display:flex!important}.painel{display:flex!important}.voltar{display:none}}
.topo{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px) 16px;padding-top:max(10px,env(safe-area-inset-top));background:var(--e6-superficie)}
.topo img{height:30px}
.topo .tit{font:600 20px var(--e6-fonte-titulo);flex:1}
.abas{display:flex;gap:6px;padding:8px 12px;background:var(--e6-superficie)}
.aba{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:12px;font-weight:700;font-size:14px;color:var(--e6-tinta-suave)}
.aba[aria-selected=true]{background:var(--e6-superficie-2);color:var(--e6-tinta)}
.aba .n{min-width:20px;height:20px;border-radius:10px;padding:0 6px;background:var(--btn);color:var(--btn-tinta);font-size:12px;display:grid;place-items:center}
.busca{padding:4px 12px 10px;background:var(--e6-superficie);position:relative}
.busca .campo{min-height:40px;border-radius:12px;padding-left:38px}
.busca .ic{position:absolute;left:24px;top:11px;color:var(--e6-tinta-suave)}
.itens{flex:1;overflow:auto}
.item{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 16px;border-bottom:1px solid var(--e6-linha)}
.item:hover,.item[aria-current=true]{background:var(--e6-superficie-2)}
.av{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 18px var(--e6-fonte-texto);color:#fff;background:var(--e6-verde)}
.item .meio{flex:1;min-width:0}
.item .l1{display:flex;justify-content:space-between;gap:8px}
.item b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item time{font-size:12px;color:var(--e6-tinta-suave);flex:none}
.item .l2{display:flex;justify-content:space-between;gap:8px;align-items:center}
.item .prev{color:var(--e6-tinta-suave);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .nl{min-width:22px;height:22px;border-radius:11px;padding:0 6px;background:var(--btn);color:var(--btn-tinta);font:700 12px var(--e6-fonte-texto);display:grid;place-items:center;flex:none}
.item .dono{font-size:12px;color:var(--e6-marca);font-weight:600}
.vazio{padding:40px 24px;text-align:center;color:var(--e6-tinta-suave)}

/* conversa */
.cab{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 4px;padding-top:max(8px,env(safe-area-inset-top));background:var(--e6-superficie);border-bottom:1px solid var(--e6-linha)}
.cab .quem{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left}
.cab .quem b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab .quem small{color:var(--e6-tinta-suave)}
.msgs{flex:1;overflow:auto;padding:14px 12px;display:flex;flex-direction:column;gap:6px;background-image:radial-gradient(var(--e6-linha) 1px,transparent 1px);background-size:22px 22px}
.dia{align-self:center;background:var(--e6-superficie);color:var(--e6-tinta-suave);font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;margin:8px 0}
.bol{max-width:min(78%,520px);padding:8px 12px 6px;border-radius:18px;background:var(--e6-superficie);box-shadow:var(--e6-sombra-sm);word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}
.bol.eu{align-self:flex-end;background:var(--bolha-eu);color:var(--bolha-eu-tinta);border-bottom-right-radius:6px}
.bol.cli{align-self:flex-start;border-bottom-left-radius:6px}
.bol.bot{align-self:flex-end;background:var(--bolha-bot);border-bottom-right-radius:6px}
.bol .autor{display:block;font-size:12px;font-weight:700;color:var(--e6-marca);margin-bottom:2px}
.bol.bot .autor{color:var(--e6-terra)}
.bol img{display:block;max-width:100%;border-radius:12px;margin-bottom:6px}
.bol time{display:block;text-align:right;font-size:11px;opacity:.65;margin-top:2px}
.bol a{color:inherit;text-decoration:underline}
.compor{display:flex;gap:6px;align-items:flex-end;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:var(--e6-superficie);border-top:1px solid var(--e6-linha);position:relative}
.compor textarea{flex:1;resize:none;max-height:140px;min-height:44px;border:1px solid var(--e6-linha);background:var(--e6-fundo-2);border-radius:22px;padding:11px 16px;line-height:1.35}
.compor .env{background:var(--btn);color:var(--btn-tinta);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.sugestoes{position:absolute;left:8px;right:8px;bottom:calc(100% + 4px);background:var(--e6-superficie);border-radius:16px;box-shadow:var(--e6-sombra);max-height:240px;overflow:auto}
.sugestoes button{display:block;width:100%;text-align:left;padding:10px 14px;border-bottom:1px solid var(--e6-linha)}
.sugestoes b{color:var(--e6-marca)}
.aviso-bot{margin:6px 12px 0;padding:8px 12px;border-radius:12px;background:var(--bolha-bot);font-size:13px}
.painel-vazio{margin:auto;text-align:center;padding:24px;color:var(--e6-tinta-suave)}
.painel-vazio img{width:120px;opacity:.9;margin-bottom:8px}

/* janelas (folhas) */
.fundo{position:fixed;inset:0;background:rgba(20,16,10,.5);display:flex;align-items:flex-end;justify-content:center;z-index:30}
@media (min-width:700px){.fundo{align-items:center}}
.folha{width:min(560px,100%);max-height:88dvh;overflow:auto;background:var(--e6-superficie);border-radius:26px 26px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--e6-sombra)}
@media (min-width:700px){.folha{border-radius:26px}}
.folha h2{font:600 22px var(--e6-fonte-titulo);margin:0 0 6px}
.folha .fim{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.linha-op{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:52px;padding:6px 8px;border-radius:14px}
.linha-op:hover{background:var(--e6-superficie-2)}
.pessoa{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--e6-linha);flex-wrap:wrap}
.pessoa .info{flex:1;min-width:140px}
.pessoa select{min-height:40px;border-radius:10px;border:1px solid var(--e6-linha);background:var(--e6-fundo-2);padding:0 8px}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--e6-amarelo);color:#3A3731}
.perm{display:flex;align-items:center;gap:10px;min-height:40px}
.perm input{width:20px;height:20px}
.prod{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--e6-linha)}
.prod img{width:64px;height:64px;object-fit:cover;border-radius:12px;background:var(--e6-superficie-2)}
.prod .info{flex:1;min-width:0}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--e6-carvao);color:#F3EEE6;padding:10px 18px;border-radius:999px;z-index:50;box-shadow:var(--e6-sombra);font-weight:600}
.toast.erro-t{background:#B3261E;color:#fff}
.horas{display:grid;grid-template-columns:48px 1fr 1fr;gap:6px 10px;align-items:center}

/* símbolo da marca é carvão: no escuro vira creme */
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .marca-svg{filter:invert(.92) sepia(.15)}}
:root[data-tema="escuro"] .marca-svg{filter:invert(.92) sepia(.15)}

/* conexão do WhatsApp */
.wa-topo{display:flex;justify-content:center;margin:10px 0}
.selo{display:inline-block;padding:4px 14px;border-radius:999px;font-weight:700;font-size:13px;background:var(--e6-superficie-2)}
.selo.ok{background:#DDEBD7;color:#233a1b}.selo.ruim{background:#F8DAD6;color:#5c150f}.selo.aviso{background:#F6E7B8;color:#4a3a05}
.wa-caixa{display:flex;justify-content:center;align-items:center;min-height:260px}
.wa-qr{width:min(280px,80vw);height:auto;background:#fff;padding:12px;border-radius:18px;box-shadow:var(--e6-sombra-sm)}
.wa-ok{text-align:center}.wa-ok .ic{margin:0 auto;color:var(--e6-marca)}
.wa-codigo{margin:10px auto 0;text-align:center;font:700 28px/1.2 var(--e6-fonte-titulo);letter-spacing:.12em;background:var(--e6-superficie-2);border-radius:14px;padding:10px}
.faixa-wa{display:block;width:100%;padding:10px 16px;background:#F6E7B8;color:#4a3a05;font-weight:700;font-size:14px;text-align:left}
.bol audio,.bol video{display:block;margin-bottom:6px}