/* ====================================================================
   v5-hud.css — A faixa de comando do Escritório (spec 011, 16/09/2026)
   Cinco cartões do dia, no topo do palco. Identidade LUCREI: nada de cor
   nova, só os tokens que já existem no v5.css.
   ==================================================================== */
/* O PALCO e o que manda no tamanho da faixa, nao a janela.
   Medido em 16/09: numa janela de 1440px o palco tem ~630px de largura (a
   lateral come 260 e o chat come 520). Cinco colunas ali dao 118px por cartao
   e "R$ 4.812" virava "R$ ...". Por isso a faixa usa CONTAINER QUERY: ela
   pergunta a largura do palco, nao a da tela. */
body.v5-escritorio .office-stage{container-type:inline-size;container-name:palco}

body.v5-escritorio .hud{
  display:flex;gap:10px;margin:0 0 18px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-left:-8px;margin-right:-8px;padding:0 8px 6px;scrollbar-width:none;
}
body.v5-escritorio .hud::-webkit-scrollbar{display:none}
body.v5-escritorio .hud > .hud-card{flex:0 0 200px;scroll-snap-align:start}

body.v5-escritorio .hud-card{
  position:relative;text-align:left;border:1px solid #273F49;background:#142228;
  color:#EEF1F8;border-radius:18px;padding:14px 15px;display:flex;
  flex-direction:column;gap:3px;min-width:0;transition:.18s;
}
body.v5-escritorio .hud-card:hover{transform:translateY(-2px);border-color:#385A67;background:#182A31}
body.v5-escritorio .hud-card small{
  font:800 10px/1.2 monospace;letter-spacing:.12em;text-transform:uppercase;color:#6E80B1;
}
body.v5-escritorio .hud-card b{
  font-size:25px;letter-spacing:-1px;line-height:1.1;font-weight:850;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.v5-escritorio .hud-card i{
  font-style:normal;font-size:11px;color:#7B8BB8;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.v5-escritorio .hud-card .hud-seta{
  position:absolute;right:12px;top:12px;width:15px;height:15px;opacity:0;
  color:#7B8BB8;transition:.18s;
}
body.v5-escritorio .hud-card:hover .hud-seta{opacity:1}
body.v5-escritorio .hud-card.cor-lime b{color:var(--lime)}
body.v5-escritorio .hud-card.cor-laranja b{color:var(--orange)}
body.v5-escritorio .hud-card.cor-azul b{color:#99B2F5}
body.v5-escritorio .hud-card.cor-roxo b{color:var(--blue-2)}
/* "a confirmar" nunca compete com um número de verdade */
body.v5-escritorio .hud-card.vazio b{font-size:14px;color:#7B8BB8;letter-spacing:0;
  white-space:normal;line-height:1.25}
/* tem gente esperando resposta */
body.v5-escritorio .hud-card.pede{border-color:#32675C;background:#142925}
body.v5-escritorio .hud-card.pede:before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--blue);
}
body.v5-escritorio .hud-card.carregando{
  animation:hudPulso 1.1s ease-in-out infinite;color:transparent;
}
body.v5-escritorio .hud.demo .hud-card{opacity:.75}
@keyframes hudPulso{0%,100%{opacity:.45}50%{opacity:.8}}
@media(prefers-reduced-motion:reduce){
  body.v5-escritorio .hud-card{transition:none}
  body.v5-escritorio .hud-card.carregando{animation:none}
}
/* a caixa pisca quando a faixa manda abrir nela */
body.v5-escritorio .atd-card.atd-piscou{box-shadow:0 0 0 2px var(--blue)}

/* Palco medio (o caso comum: janela de 1440 com o chat aberto da ~630px de
   palco): os cinco continuam TODOS na tela, em modo compacto. Esconder o
   quarto e o quinto cartao atras de uma rolagem seria esconder justamente
   Perguntas e Mensagens — que e o que o Pedro pediu para ver. */
@container palco (min-width: 560px){
  body.v5-escritorio .hud{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;
    overflow:visible;margin-left:0;margin-right:0;padding:0;
  }
  body.v5-escritorio .hud > .hud-card{flex:none;padding:10px 11px}
  body.v5-escritorio .hud-card i{display:none}
  /* Medido: com o palco em 660px o cartao fica com 113px. "R$ 4.812" a 21px
     pedia 112px so de texto e virava "R$ 4....". A 17px cabe com folga. */
  body.v5-escritorio .hud-card b{font-size:17px;letter-spacing:-.4px}
  body.v5-escritorio .hud-card small{white-space:normal;line-height:1.25}
  body.v5-escritorio .hud-card .hud-seta{display:none}
}

/* Palco intermediario: o numero ja pode crescer, a nota ainda nao cabe. */
@container palco (min-width: 760px){
  body.v5-escritorio .hud > .hud-card{padding:12px 13px}
  body.v5-escritorio .hud-card b{font-size:20px}
}

/* Palco largo (tela grande, ou chat fechado): volta a caber a nota de baixo. */
@container palco (min-width: 980px){
  body.v5-escritorio .hud{gap:10px}
  body.v5-escritorio .hud > .hud-card{padding:14px 15px}
  body.v5-escritorio .hud-card i{display:-webkit-box}
  body.v5-escritorio .hud-card b{font-size:25px}
  body.v5-escritorio .hud-card .hud-seta{display:block}
}
/* No celular o palco ocupa a tela inteira; os cartoes ficam mais largos para
   o numero caber confortavelmente no dedo. */
@media(max-width:620px){
  body.v5-escritorio .hud{margin-left:-12px;margin-right:-12px;padding:0 12px 6px}
  body.v5-escritorio .hud > .hud-card{flex:0 0 63vw;padding:12px 13px;border-radius:15px}
  body.v5-escritorio .hud-card b{font-size:20px}
  body.v5-escritorio .hud-card .hud-seta{display:none}
}

/* ================================================================ spec 011
   O CHAT DEIXA DE PERDER ESPACO PARA OS COMANDOS.

   Queixa do Pedro: "o chat do escritorio esta muito pequeno devido a outras
   informacoes".

   MEDIDO no banco de provas, 16/09/2026, Chromium 1440x900:
     painel 828px = header 61 + cracha 76 + CONVERSA 250 + COMANDOS 288 + form 96
   O bloco de comandos estava MAIOR que a conversa. A causa: .agent-chat-messages
   e flex:1 com min-height:170px, mas .chat-quick-actions (12 comandos em grade
   de 2 colunas) nao tinha teto nenhum.

   Agora: os comandos tem teto e rolagem propria, e a conversa tem PISO. Nas
   mesmas medidas, a conversa passa de 250px para ~430px. Nenhuma cor, nenhum
   componente e nenhum comando foi removido — so o espaco foi redividido. */
body.v5-escritorio .office-chat-panel .agent-chat-messages{
  flex:1 1 auto;min-height:260px;
}
body.v5-escritorio .office-chat-panel .chat-quick-actions{
  flex:0 0 auto;max-height:150px;overflow-y:auto;scrollbar-width:thin;
}
/* Tela alta: sobra espaco, os comandos podem respirar mais. */
@media (min-height:1000px){
  body.v5-escritorio .office-chat-panel .chat-quick-actions{max-height:210px}
}
/* Tela baixa (notebook 13", janela cortada): a conversa cede um pouco, mas
   continua sendo a maior parte do painel. */
@media (max-height:700px){
  body.v5-escritorio .office-chat-panel .agent-chat-messages{min-height:150px}
  body.v5-escritorio .office-chat-panel .chat-quick-actions{max-height:110px}
}

/* ================================================================ spec 011
   NO CELULAR, OS NUMEROS VEM PRIMEIRO.

   Medido: em 390x844 a faixa nascia em y=432px — abaixo do painel lateral
   inteiro, que no celular vira um bloco de largura cheia acima do palco. Ou
   seja, "o card no topo" nao estava no topo de quem abre no telefone.

   O v5.css faz `.app-page.active{display:block}` em <=720px, e em bloco a
   propriedade `order` nao vale nada. Aqui a pagina do escritorio volta a ser
   flex em coluna, so para poder dizer a ordem: palco (numeros, equipe, mapa,
   caixa) primeiro; a lateral (hora, "precisa de voce", resumo do dia, reuniao)
   logo abaixo. Nada foi escondido nem redesenhado — so a ordem mudou. */
@media(max-width:720px){
  body.v5-escritorio .office-page.active{display:flex;flex-direction:column}
  body.v5-escritorio .office-page.active > .office-stage{order:1}
  body.v5-escritorio .office-page.active > .office-panel{order:2}
  /* A folga da barra de cima acompanha quem agora vem primeiro. Sem isto a
     barra fixa deitava em cima do primeiro cartao — medido em 390x844. */
  body.v5-app-topo.v5-escritorio .office-page.active > .office-stage{
    margin-top:var(--barra);
  }
  body.v5-app-topo.v5-escritorio .office-page.active > .office-panel{
    margin-top:0;
  }
  /* os paineis fixos (chat, resposta, ficha) nao entram na ordem do fluxo */
  body.v5-escritorio .office-page.active > .office-chat-panel,
  body.v5-escritorio .office-page.active > .atd-painel,
  body.v5-escritorio .office-page.active > .esc-modal{order:3}
}

/* ================================================================ spec 014
   O AVISO DO RADAR, logo abaixo da faixa de comando.
   Só existe quando há mudança de TARIFA ou de REGRA não lida — as duas que
   mudam a conta da venda. Novidade de produto e convite de live não entram:
   virariam barulho e o dono pararia de olhar. */
body.v5-escritorio .hud-radar{
  display:flex;gap:11px;align-items:center;margin:0 0 18px;
  border:1px solid var(--orange);background:rgba(255,158,61,.10);
  border-radius:15px;padding:11px 14px;color:#EEF1F8;
}
body.v5-escritorio .hud-radar:hover{background:rgba(255,158,61,.16)}
body.v5-escritorio .hud-radar-selo{
  font:800 9.5px/1 monospace;letter-spacing:.11em;flex:none;
  background:var(--orange);color:#102C36;padding:5px 8px;border-radius:99px;
}
body.v5-escritorio .hud-radar b{
  font-size:13px;line-height:1.35;flex:1;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.v5-escritorio .hud-radar i{font-style:normal;font-size:11px;color:#D3A578;flex:none}
body.v5-escritorio .hud-radar svg{width:15px;height:15px;color:var(--orange);flex:none}
@media(max-width:820px){
  body.v5-escritorio .hud-radar{flex-wrap:wrap}
  body.v5-escritorio .hud-radar i{flex:1 0 100%;padding-left:2px}
  body.v5-escritorio .hud-radar svg{display:none}
}