/* BrandMaster v0.1 · o campo do chat no BrandMap (prévia interna).
   Veste o espaço reservado do molde (faixa no centro inferior, abre para cima, só texto).
   Usa os tokens do BrandMap: --ink, --ink2, --ink3, --soft, --tone, --rule, --sans, --f-apoio, --f-uso. */

#brandmaster[data-estado="ativo"]{display:block}
/* Centro do conteúdo, e não da janela. Em elemento fixo, 100% é a largura da janela SEM a barra de rolagem,
   a mesma que centraliza o logo da capa; 100vw (o molde) conta a barra junto e empurrava o chat meia barra
   para a direita do logo: 7,5 px em 1440 e em 1024 com a barra de 15 px visível (medido em 25/09/2026). */
#brandmaster[data-estado="ativo"]{left:calc(var(--side) + (100% - var(--side)) / 2);width:min(760px,calc(100% - var(--side) - 32px))}
body.bm-ativo .main{padding-bottom:150px}

#brandmaster .bm-barra{position:relative;padding:12px 12px 12px 22px}
#brandmaster .bm-texto{display:block;width:100%;border:0;outline:0;resize:none;background:transparent;margin:4px 0 10px 6px;padding:0;
  font-family:var(--sans);font-size:var(--f-apoio);line-height:24px;color:var(--ink);min-height:24px;max-height:144px;overflow-y:auto}
#brandmaster .bm-texto::placeholder{color:#8A8A8A;opacity:1}
#brandmaster .bm-barra:focus-within{border-color:var(--ink3)}
#brandmaster .linha{display:flex;align-items:center;gap:10px;justify-content:flex-start}
#brandmaster .linha .modo{margin-left:auto;margin-right:4px}
/* o nome como marca: BrandMaster™, e "beta" pequeno embaixo, alinhado à esquerda do nome */
#brandmaster .bm-assinatura{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
#brandmaster .bm-marca-nome{font-weight:600;color:var(--ink);line-height:16px}
#brandmaster .bm-tm{font-size:.62em;font-weight:500;vertical-align:super;line-height:0;margin-left:1px}
#brandmaster .bm-beta{font-size:9px;line-height:11px;font-weight:500;letter-spacing:.06em;color:var(--ink3);margin-top:1px}
#brandmaster .bm-aviso-uso{font-size:12px;line-height:16px;color:var(--ink3);margin:-12px 0 20px}
#brandmaster .bm-texto:disabled{cursor:not-allowed;color:var(--ink3)}
#brandmaster .bm-recolher{width:36px;height:36px;margin-left:-6px;border-radius:50%;border:0;background:transparent;color:var(--ink3);display:grid;place-items:center;cursor:pointer;flex:none}
#brandmaster .bm-recolher:hover{background:var(--soft);color:var(--ink)}
#brandmaster .bm-recolher svg{width:20px;height:20px}
#brandmaster .bm-mic{width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:#fff;color:var(--ink2);display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s ease,color .15s ease,border-color .15s ease}
#brandmaster .bm-mic:hover{background:var(--soft);color:var(--ink)}
#brandmaster .bm-mic svg{width:19px;height:19px}
#brandmaster .bm-mic .bm-ic-parar{display:none;width:16px;height:16px}
#brandmaster .bm-mic[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;animation:bm-ouvindo 1.4s ease-out infinite}
#brandmaster .bm-mic[aria-pressed="true"] .bm-ic-mic{display:none}
#brandmaster .bm-mic[aria-pressed="true"] .bm-ic-parar{display:block}
@keyframes bm-ouvindo{0%{box-shadow:0 0 0 0 rgba(26,26,26,.28)}70%{box-shadow:0 0 0 10px rgba(26,26,26,0)}100%{box-shadow:0 0 0 0 rgba(26,26,26,0)}}
#brandmaster .bm-status{margin:2px 0 0 6px;font-size:12px;line-height:16px;color:var(--ink3)}
/* vazia, some só da tela: display:none tiraria a região ao vivo da árvore e o próximo aviso poderia não ser lido */
#brandmaster .bm-status:empty{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0)}

/* gravação: a faixa troca o campo pelas ondas da fala, o tempo e o botão de descartar; depois, "transcrevendo" */
#brandmaster .bm-gravacao{display:none;align-items:center;gap:12px;height:24px;margin:4px 0 10px 6px}
#brandmaster .bm-gravando .bm-gravacao,#brandmaster .bm-transcrevendo .bm-gravacao{display:flex}
#brandmaster .bm-gravando .bm-texto,#brandmaster .bm-transcrevendo .bm-texto{display:none}
#brandmaster .bm-ondas{flex:1;min-width:0;height:24px}
#brandmaster .bm-tempo{font-size:var(--f-uso);line-height:20px;color:var(--ink3);font-variant-numeric:tabular-nums}
#brandmaster .bm-descartar{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ink3);display:grid;place-items:center;cursor:pointer;flex:none}
#brandmaster .bm-descartar:hover{background:var(--soft);color:var(--ink)}
#brandmaster .bm-descartar svg{width:16px;height:16px}
#brandmaster .bm-transcrevendo-txt{display:none}
#brandmaster .bm-transcrevendo .bm-transcrevendo-txt{display:inline-flex;align-items:center;gap:6px;flex:1;font-size:var(--f-apoio);line-height:24px;color:var(--ink2)}
#brandmaster .bm-transcrevendo .bm-ondas,#brandmaster .bm-transcrevendo .bm-tempo{display:none}
#brandmaster .bm-reticencias{display:inline-flex;gap:4px}
#brandmaster .bm-reticencias i{width:5px;height:5px;border-radius:50%;background:var(--ink3);opacity:.35;animation:bm-ponto 1.2s infinite ease-in-out}
#brandmaster .bm-reticencias i:nth-child(2){animation-delay:.15s}
#brandmaster .bm-reticencias i:nth-child(3){animation-delay:.3s}
#brandmaster .bm-mic:disabled{opacity:.5;cursor:default}

/* recolhida: a faixa vira uma pílula no mesmo eixo, e a pílula é o aviso de que o chat está ali */
#brandmaster[data-estado="ativo"].bm-recolhido{width:auto}
#brandmaster.bm-recolhido .bm-barra,#brandmaster.bm-recolhido .bm-painel{display:none}
#brandmaster .bm-pilula{display:none}
#brandmaster.bm-recolhido .bm-pilula{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 8px;border-radius:999px;border:1px solid #E6E6E6;
  background:#fff;box-shadow:0 10px 36px rgba(0,0,0,.10);font-family:var(--sans);font-size:var(--f-uso);line-height:20px;font-weight:600;color:var(--ink);
  cursor:pointer;white-space:nowrap;animation:bm-abre .18s ease-out;transition:transform .15s ease,border-color .15s ease}
#brandmaster .bm-pilula:hover{transform:translateY(-1px);border-color:#CFCFCF}
#brandmaster .bm-pilula .ic{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;padding:8px;flex:none}
#brandmaster .bm-pilula .ic svg{width:100%;height:auto}
#brandmaster .bm-sinal{width:8px;height:8px;border-radius:50%;background:var(--accent,#1A1A1A);flex:none;margin-left:-2px}
#brandmaster .bm-sinal[hidden]{display:none}#brandmaster .bm-enviar{width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s ease,transform .15s ease}
#brandmaster .bm-enviar:hover:not(:disabled){transform:translateY(-1px)}
#brandmaster .bm-enviar:disabled{background:var(--tone);color:#8A8A8A;cursor:default}
#brandmaster .bm-enviar svg{width:18px;height:18px}
#brandmaster button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#brandmaster .bm-texto:focus-visible{outline:0} /* o foco do campo aparece na borda da faixa */

/* o painel da conversa abre para cima, na mesma largura da faixa */
.bm-painel{position:absolute;left:0;right:0;bottom:calc(100% + 12px);background:#fff;border:1px solid #E6E6E6;border-radius:24px;
  box-shadow:0 10px 36px rgba(0,0,0,.10);display:flex;flex-direction:column;max-height:min(64vh,620px);overflow:hidden;
  transform-origin:bottom center;animation:bm-abre .18s ease-out}
.bm-painel[hidden]{display:none}
@keyframes bm-abre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bm-topo{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 22px;border-bottom:1px solid var(--rule)}
.bm-topo .bm-nome{display:flex;align-items:center;gap:8px;font-size:var(--f-uso);line-height:20px;font-weight:600;color:var(--ink);margin-right:auto}
.bm-topo .ic{width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;padding:4px}
.bm-topo .ic svg{width:100%;height:auto}
.bm-topo button{border:0;background:transparent;color:var(--ink3);font-family:var(--sans);font-size:var(--f-uso);line-height:20px;cursor:pointer;border-radius:999px;padding:6px 10px}
.bm-topo button:hover{background:var(--soft);color:var(--ink)}
.bm-topo .bm-fechar{width:32px;height:32px;padding:0;display:grid;place-items:center}
.bm-topo .bm-fechar svg{width:18px;height:18px}

.bm-conversa{flex:1;overflow-y:auto;padding:20px 22px 8px;display:flex;flex-direction:column;overscroll-behavior:contain}
.bm-msg{margin:0 0 20px;font-size:var(--f-apoio);line-height:26px;overflow-wrap:anywhere}
.bm-msg.pessoa{align-self:flex-end;max-width:85%;background:var(--soft);color:var(--ink);border-radius:18px 18px 6px 18px;padding:10px 16px;white-space:pre-wrap}
.bm-msg.chat{color:var(--ink2)}
.bm-msg.chat>*:first-child{margin-top:0}
.bm-msg.chat p{margin:0 0 12px}
.bm-msg.chat strong{color:var(--ink);font-weight:700}
.bm-msg.chat ul,.bm-msg.chat ol{margin:0 0 12px;padding-left:22px}
.bm-msg.chat li{margin:0 0 4px}
.bm-msg.chat blockquote{margin:0 0 12px;padding:2px 0 2px 16px;border-left:2px solid var(--accent,#1A1A1A);color:var(--ink)}
.bm-msg.chat code{font-family:inherit;font-size:.94em;background:var(--soft);padding:1px 6px;border-radius:6px}
.bm-msg.chat a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bm-msg.chat .bm-tabela{overflow-x:auto;margin:0 0 12px}
.bm-msg.chat table{border-collapse:collapse;font-size:var(--f-uso);line-height:20px;min-width:100%}
.bm-msg.chat th,.bm-msg.chat td{border-bottom:1px solid var(--rule);padding:8px 10px 8px 0;text-align:left;vertical-align:top}
.bm-msg.chat th{color:var(--ink);font-weight:700}
.bm-msg.chat .bm-onde,.bm-msg.chat .bm-nota{font-size:var(--f-uso);line-height:20px;color:var(--ink3);margin:0 0 8px}
.bm-acoes{display:flex;gap:6px;margin:-8px 0 20px}
.bm-acoes button{border:1px solid var(--rule);background:#fff;color:var(--ink3);font-family:var(--sans);font-size:12px;line-height:16px;border-radius:999px;padding:5px 12px;cursor:pointer}
.bm-acoes button:hover{color:var(--ink);border-color:#CFCFCF}

.bm-pensando{display:flex;gap:6px;align-items:center;height:26px;margin:0 0 20px}
.bm-pensando span{width:7px;height:7px;border-radius:50%;background:var(--ink3);opacity:.35;animation:bm-ponto 1.2s infinite ease-in-out}
.bm-pensando span:nth-child(2){animation-delay:.15s}
.bm-pensando span:nth-child(3){animation-delay:.3s}
@keyframes bm-ponto{0%,80%,100%{opacity:.25;transform:none}40%{opacity:.9;transform:translateY(-3px)}}
.bm-erro{font-size:var(--f-uso);line-height:20px;color:#9A3412;margin:0 0 20px}

.bm-vazio{color:var(--ink2);font-size:var(--f-apoio);line-height:26px}
.bm-vazio p{margin:0 0 16px}
.bm-sugestoes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.bm-sugestoes button{border:1px solid var(--rule);background:#fff;color:var(--ink);font-family:var(--sans);font-size:var(--f-uso);line-height:20px;border-radius:999px;padding:8px 14px;cursor:pointer;text-align:left}
.bm-sugestoes button:hover{border-color:#CFCFCF;background:var(--soft)}
.bm-aviso{font-size:12px;line-height:16px;color:var(--ink3);padding:0 22px 14px}

@media (max-width:767px){
  body.bm-ativo .main{padding-bottom:140px}
  #brandmaster .bm-barra{padding:10px 10px 10px 18px}
  .bm-painel{max-height:calc(100dvh - 210px);border-radius:20px}
  .bm-conversa{padding:16px 18px 6px}
  .bm-topo{padding:12px 10px 10px 18px}
}
@media (prefers-reduced-motion:reduce){.bm-painel{animation:none}.bm-pensando span{animation:none;opacity:.6}#brandmaster .bm-enviar,#brandmaster .bm-mic,#brandmaster .bm-pilula{transition:none}
  #brandmaster.bm-recolhido .bm-pilula{animation:none}#brandmaster .bm-mic[aria-pressed="true"]{animation:none}#brandmaster .bm-reticencias i{animation:none;opacity:.6}}