/* Bruce App: mobile-first, tema escuro. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#1b1512;--card:#2a211c;--txt:#f4ece4;--muted:#b3a496;--acc:#e8a838;--ok:#4fae6a;--bad:#d9573f;--line:rgba(255,255,255,.12)}
html,body{margin:0}
body{background:var(--bg);color:var(--txt);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px,env(safe-area-inset-left));min-height:100vh}
main,.topo,.rodape{max-width:560px;margin:0 auto}
.topo{display:flex;align-items:center;justify-content:space-between;padding:14px 0 6px}
h1{margin:0;font-size:24px} h2{margin:22px 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.link{background:none;border:0;color:var(--muted);font:inherit;padding:8px;cursor:pointer}
.cartao{background:var(--card);border-radius:16px;padding:16px;margin-top:10px}
.sub{margin:0 0 10px;color:var(--muted)} .dica{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:rgba(232,168,56,.14);color:var(--acc);font-size:14.5px}
.dica[hidden],.erro[hidden],[hidden]{display:none!important}
.erro{margin:10px 0;padding:10px 12px;border-radius:10px;background:rgba(217,87,63,.18);color:#ffb4a5;border:1px solid rgba(217,87,63,.5);font-size:14.5px}
.linha{display:flex;gap:10px;flex-wrap:wrap}
button{font:inherit;cursor:pointer}
.botao-principal,.botao-sec,.b-feito,.b-adiar,.b-min{min-height:46px;border-radius:23px;border:0;padding:0 18px;font-weight:700}
.botao-principal{background:var(--acc);color:#1b1512;width:100%}
.botao-sec{background:transparent;color:var(--txt);border:1px solid var(--line)}
button:disabled{opacity:.5}
.faixa{margin-top:16px;padding:4px 14px 14px;border-radius:16px;background:rgba(217,87,63,.14);border:1px solid rgba(217,87,63,.55)}
.faixa h2{color:#ffb4a5}
.lista{list-style:none;margin:0;padding:0}
.item{background:var(--card);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.faixa .item{background:rgba(0,0,0,.25)}
.item .texto{font-weight:600;word-break:break-word}
.item .meta{font-size:13.5px;color:var(--muted);margin-top:2px}
.acoes{display:flex;gap:10px;margin-top:10px}
.b-feito{background:var(--ok);color:#06210f;flex:1} .b-adiar{background:transparent;color:var(--txt);border:1px solid var(--line);flex:1}
.menu{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.b-min{background:var(--line);color:var(--txt);min-height:40px;padding:0 14px;font-weight:600}
.vazio{color:var(--muted);margin:0 0 6px;font-size:14.5px}
.rodape{padding:24px 0 18px;text-align:center;color:var(--muted);font-size:12.5px}
.selo-feito{color:var(--ok)} .selo-canc{color:var(--muted)}
/* login */
.tela-login{display:flex;align-items:center;justify-content:center}
.tela-login .cartao{width:100%;max-width:380px;padding:24px 20px}
label{display:block;margin:12px 0 5px;font-size:13px;font-weight:600;color:var(--muted)}
input[type=text],input[type=password]{width:100%;min-height:46px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#1b1512;color:var(--txt)}
.tela-login .botao-principal{margin-top:20px}
@media (pointer:coarse){input{font-size:16px!important}}
/* abas (Lembretes / Conversa) */
.abas{display:flex;gap:6px}
.abas a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:18px;font-weight:600;font-size:15px}
.abas a[aria-current=page]{background:var(--card);color:var(--txt)}
.so-leitor{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* conversa */
.tela-conversa{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.tela-conversa .topo{width:100%;flex:none}
.tela-conversa .estado-ponte,.tela-conversa .erro,.tela-conversa .msgs,.tela-conversa .compor{width:100%;max-width:720px;margin-left:auto;margin-right:auto}
.estado-ponte{flex:none;font-size:13.5px;color:var(--muted);padding:2px 0 8px}
.estado-ponte::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted);margin-right:7px}
.estado-ponte.on::before{background:var(--ok)} .estado-ponte.off::before{background:var(--bad)} .estado-ponte.off{color:#ffb4a5}
.msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 10px;display:flex;flex-direction:column;gap:8px}
.mais-antigas{align-self:center;min-height:38px;font-size:14px}
.bolha{max-width:88%;padding:9px 13px;border-radius:16px;background:var(--card);overflow-wrap:anywhere;word-break:break-word}
.bolha.bruno{align-self:flex-end;background:var(--acc);color:#1b1512;border-bottom-right-radius:5px}
.bolha.bruce{align-self:flex-start;border-bottom-left-radius:5px}
.bolha.larga{max-width:100%;width:100%}
.bolha .corpo p{margin:0 0 6px} .bolha .corpo p:last-child{margin-bottom:0}
.bolha .corpo.pre-linha{white-space:pre-wrap}
.bolha .corpo ul,.bolha .corpo ol{margin:4px 0 6px;padding-left:22px}
.bolha .corpo code{font:13.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(0,0,0,.28);padding:1px 5px;border-radius:5px}
.bolha .corpo pre{margin:6px 0;padding:9px 11px;background:rgba(0,0,0,.35);border-radius:10px;overflow-x:auto}
.bolha .corpo pre code{background:none;padding:0}
.bolha .corpo a{color:var(--acc)} .bolha.bruno .corpo a{color:#1b1512}
.bolha .corpo h4{margin:6px 0 4px;font-size:16px}
.bolha .citacao{font-size:12.5px;color:var(--muted);border-left:3px solid var(--line);padding-left:8px;margin-bottom:5px}
.bolha .hora{font-size:11.5px;opacity:.65;margin-top:3px;text-align:right}
.bolha img.anexo{display:block;max-width:100%;max-height:360px;border-radius:10px;margin-top:6px}
.bolha .arq{display:inline-block;margin-top:6px;color:var(--acc);font-weight:600}
.bolha .arq-estado{font-size:13px;color:var(--muted);margin-top:6px}
.bolha .arq-estado.ruim{color:#ffb4a5}
iframe.lousa{display:block;width:100%;height:120px;border:0;border-radius:10px;margin-top:6px;background:rgba(0,0,0,.2)}
.ir-fim{position:fixed;right:18px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:5;border:0;border-radius:20px;padding:9px 14px;background:var(--acc);color:#1b1512;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.compor{flex:none;display:flex;gap:8px;align-items:flex-end;padding:8px 0 10px}
.compor textarea{flex:1;min-height:46px;max-height:140px;resize:none;padding:11px 14px;border:1px solid var(--line);border-radius:23px;font:inherit;background:#1b1512;color:var(--txt)}
.compor .botao-principal{width:auto;flex:none}
/* tópicos (lista + chat) */
.conv-layout{flex:1;min-height:0;display:flex;gap:14px;width:100%;max-width:1040px;margin:0 auto}
.painel-topicos{flex:none;width:270px;display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:10px}
.painel-chat{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.painel-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 8px}
.painel-cab .botao-sec{min-height:38px;font-size:14px;padding:0 12px}
.form-novo{display:flex;gap:8px;align-items:center;padding-bottom:8px}
.form-novo input{flex:1;min-width:0}
.form-novo .botao-principal{width:auto;flex:none;min-height:46px}
.lista-topicos{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.item-topico{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;min-height:52px;padding:9px 13px;border-radius:14px;border:1px solid transparent;background:var(--card);color:var(--txt);font:inherit;cursor:pointer}
.item-topico.ativo{border-color:var(--acc)}
.item-topico .nome{font-weight:700;overflow-wrap:anywhere}
.item-topico .sub-estado{font-size:12.5px;color:var(--muted)}
.item-topico.rodando .sub-estado{color:var(--acc)} .item-topico.erro .sub-estado{color:#ffb4a5} .item-topico.na_fila .sub-estado{color:var(--muted)}
.ver-arquivados{min-height:38px;font-size:14px;margin-bottom:8px}
.chat-cab{flex:none;display:flex;align-items:center;gap:8px;padding:2px 0 8px;flex-wrap:wrap}
.chat-cab .botao-sec{min-height:36px;font-size:14px;padding:0 12px}
.titulo-topico{flex:1;min-width:0;font-size:17px;overflow-wrap:anywhere}
.custo-topico{font-size:12px;color:var(--muted)}
.seletor-modelo{min-height:36px;border-radius:18px;border:1px solid var(--line);background:#1b1512;color:var(--txt);font:inherit;font-size:14px;padding:0 10px}
.bolha.sistema{align-self:center;background:transparent;border:1px dashed var(--line);color:var(--muted);max-width:94%}
.bolha.sistema.erro-msg{border-color:var(--bad);color:#ffb4a5}
.voltar{display:none}
@media (max-width:759px){
  .conv-layout{gap:0}
  .painel-topicos,.painel-chat{width:100%}
  .conv-layout[data-vista=lista] .painel-chat{display:none}
  .conv-layout[data-vista=chat] .painel-topicos{display:none}
  .voltar{display:inline-block}
}
/* ativas, não lida, confirmação */
.bloco-ativas{margin-bottom:10px}
.titulo-ativas{margin:4px 0 6px;font-size:13px}
.linha-ativa{display:flex;gap:6px;align-items:stretch}
.linha-ativa .item-topico{flex:1;min-width:0}
.linha-ativa .parar{flex:none;min-height:0;font-size:13.5px;padding:0 12px}
.item-topico.rodando.na-ativas{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok) inset}
.linha-nome{display:flex;align-items:center;gap:7px;min-width:0}
.ponto{flex:none;display:inline-block;width:9px;height:9px;border-radius:50%}
.ponto.verde{background:var(--ok)} .ponto.amarelo{background:var(--acc)}
.item-topico:not(.na-ativas) .ponto.verde{width:7px;height:7px;opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .ponto.pulsa{animation:pulsa 1.4s ease-in-out infinite}
  @keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(79,174,106,.65)}50%{box-shadow:0 0 0 6px rgba(79,174,106,0)}}
}
.nao-lida{margin-left:auto;flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--acc);color:#1b1512;font-size:12px;font-weight:800;line-height:20px;text-align:center}
.confirma{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line)}
.confirma[hidden]{display:none}
.confirma span{flex:1 1 100%}
.confirma button{width:auto;min-height:40px}