/* ===========================================================================
   naveg-padrao.css — padronizacao dos controles de barra do Naveg Hub.
   ---------------------------------------------------------------------------
   Escopo: AMBIENTE ISOLADO (_visual). Nao existe no repositorio.

   Motivo, medido em whatsapp.html a 1440px: 13 controles na mesma barra com
   OITO alturas diferentes (15, 19, 24, 28, 30, 32 px...), tres raios de borda
   e tres tamanhos de fonte. Sem `nowrap`, rotulos como "Atendimentos OPA"
   quebravam em duas linhas e esticavam so aquele botao.

   Os valores vem do DESIGN.md do proprio projeto — raio de controle 7px,
   fonte 13px, espacamento 7px. Nao invento token novo.

   Escopo deliberadamente estreito: SO controles dentro de barras
   (.topbar, .topbar-right, .tb-actions, .toolbar). Botao de tabela, de card
   e de formulario ficam como estao — padronizar tudo de uma vez mudaria
   telas que ninguem pediu para mexer.
   =========================================================================== */

:root {
  --nv-ctrl-h: var(--ui-ctrl-h, 32px);          /* altura unica de controle de barra */
  --nv-ctrl-r: var(--ui-r-ctl, 7px);           /* rounded.control do DESIGN.md */
  --nv-ctrl-fs: 13px;         /* typography.label do DESIGN.md */
  --nv-ctrl-gap: 7px;         /* spacing.sm do DESIGN.md */
}

/* --- 1. Todo controle de barra: mesma caixa ------------------------------ */
.topbar .btn,
.topbar button,
.topbar a.btn,
.topbar-right .btn,
.topbar-right button,
.tb-actions .btn,
.tb-actions button,
.toolbar .btn,
.toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nv-ctrl-gap);

  height: var(--nv-ctrl-h);
  min-height: var(--nv-ctrl-h);
  padding: 0 13px;
  box-sizing: border-box;

  border-radius: var(--nv-ctrl-r);
  font-size: var(--nv-ctrl-fs);
  line-height: 1;

  /* Sem isto, "Atendimentos OPA" e "Conectar / QR" quebravam em duas linhas
     e cresciam em altura, desalinhando a fileira inteira.                   */
  white-space: nowrap;
  flex: none;
}

/* Botao so de icone continua quadrado, sem padding de rotulo. */
.topbar .iconbtn,
.topbar-right .iconbtn,
.tb-actions .iconbtn,
.toolbar .iconbtn {
  width: var(--nv-ctrl-h);
  padding: 0;
}

/* Icone dentro do controle: tamanho unico, alinhado ao texto. */
.topbar .btn svg,
.topbar button svg,
.topbar-right .btn svg,
.tb-actions .btn svg,
.toolbar .btn svg {
  width: 15px;
  height: 15px;
  flex: none;
  display: block;
}

/* A variante pequena vira so uma fonte menor — nao outra altura. */
.topbar .btn-sm,
.topbar-right .btn-sm,
.tb-actions .btn-sm {
  font-size: 12px;
  padding: 0 10px;
}

/* --- 2. Indicadores acompanham a mesma fileira --------------------------- */
/* O status continua em formato de pilula (e informacao, nao acao), mas
   passa a ter a mesma altura, para a linha de base bater.                   */
.topbar .status-pill,
.topbar-right .status-pill {
  height: var(--nv-ctrl-h);
  min-height: var(--nv-ctrl-h);
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex: none;
}

/* Texto solto (nome do usuario) nao vira botao: so alinha na fileira. */
.topbar .who,
.topbar-right .who {
  display: inline-flex;
  align-items: center;
  height: var(--nv-ctrl-h);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  flex: none;
}

/* --- 3. A fileira respira igual ------------------------------------------ */
.topbar-right,
.tb-actions,
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--nv-ctrl-gap);
}

/* --- 3b. Naveg Phone: painel flutuante movivel --------------------------- */
/* O painel ja era position:fixed, mas cravado no canto inferior direito.
   O arrasto e feito pelo naveg-softphone.js; aqui vem so a affordance.

   touch-action:none e obrigatorio: sem isso o navegador interpreta o arrasto
   no celular como rolagem e o painel nao sai do lugar.                       */
.voip-header.nv-arrastavel {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.voip-header.nv-arrastando { cursor: grabbing; }

/* Enquanto arrasta, sobe acima de tudo e perde a sombra "colada". */
.voip-panel:has(.nv-arrastando) {
  z-index: 9999;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .62);
}

/* Marca de pega — duas linhas discretas antes do titulo. */
.voip-header.nv-arrastavel > h3::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 10px;
  margin-right: 9px;
  vertical-align: -1px;
  border-left: 2px dotted currentColor;
  border-right: 2px dotted currentColor;
  opacity: .38;
}

/* O corpo do painel nao deve herdar a proibicao de selecao da alca. */
.voip-body { user-select: text; -webkit-user-select: text; }

/* --- 4. Foco visivel, igual em todos ------------------------------------- */
.topbar .btn:focus-visible,
.topbar button:focus-visible,
.topbar-right .btn:focus-visible,
.tb-actions .btn:focus-visible {
  outline: 2px solid var(--accent, #2dd4bf);
  outline-offset: 2px;
}

/* ===========================================================================
   5. ENQUADRAMENTO — a tela nao muda de forma por causa do conteudo.
   ---------------------------------------------------------------------------
   A secao 1 padronizou os CONTROLES. Esta padroniza o que o operador nao
   controla: o texto que chega.

   Medido em whatsapp.html com nome de grupo longo e um link sem espacos,
   que e o conteudo real de todo dia:

     nome no cabecalho da conversa .... 4 linhas, cabecalho de 69 -> 107px
     link de 98 caracteres na bolha ... estoura a bolha em 376px e faz a
                                        area de mensagens rolar 235px de lado
     chat entre 721 e 900px ........... 400px, porque a lista fica fixa em 360

   Os tres tem a mesma origem: largura de caixa decidida pelo conteudo, e nao
   pelo layout. O padrao inverte isso — a caixa manda, o texto se acomoda.
   =========================================================================== */

/* --- 5a. Rotulo de uma linha continua sendo de uma linha ------------------ */
/* O bloco de identificacao da conversa e rotulo, nao corpo de texto: cada
   filho ocupa uma linha e corta com reticencias. Sem `min-width:0` o item
   flex se recusa a encolher abaixo do proprio conteudo e as reticencias nunca
   aparecem — e a regra parece nao ter efeito nenhum.                        */
.chat-header { min-width: 0; }
.chat-header .chat-contact { min-width: 0; overflow: hidden; }
.chat-header .chat-contact > * {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O nome completo nao se perde: continua no title do avatar, que a propria
   pagina ja preenche. Reticencia esconde, nao apaga.                        */

/* --- 5b. Texto que chega de fora quebra dentro da bolha ------------------- */
/* `break-word` e nao `anywhere`: os dois resolvem o estouro, mas `anywhere`
   tambem reduz a largura minima da caixa, o que mudaria a forma de bolha
   curta. Aqui so se quer que o token gigante ceda.                          */
.msg,
.msg *,
.bubble,
.conv-preview {
  overflow-wrap: break-word;
}

/* --- 5b2. Midia nunca e mais larga que a bolha que a contem --------------- */
/* O renderizador de mensagens escreve a largura direto no elemento:
   audio `max-width:260px`, imagem 260px, video 280px. Numa bolha estreita
   isso deixa de ser teto e vira piso — o controle nativo do audio, que tem
   largura minima propria, atravessa a borda.

   Medido a 461px de tela: bolha de 209px com player de 260px, 51px para
   fora, exatamente sobre o texto da mensagem seguinte.

   Precisa de !important: a largura vem de atributo style inline, e regra de
   folha nao vence estilo inline sem isso. Aqui o !important nao esconde
   problema nenhum — e a unica forma de alcancar a declaracao.

   `max-width` e nao `width`: com `width:100%` a bolha, que se dimensiona pelo
   conteudo, encolhia para 37px junto com o player. Medido tambem.

   E `min(260px, 100%)` e nao `100%` puro: o teto em pixels era proposital.
   Trocado por 100% seco, o player passava a 300px (a largura natural do
   controle) no desktop — 40px a mais do que o autor da pagina escolheu.
   Assim o teto original continua valendo, e o limite da bolha so entra
   quando ela e a mais estreita dos dois.                                    */
#chat-msgs .msg audio,
#chat-msgs .msg img { max-width: min(260px, 100%) !important; }
#chat-msgs .msg video { max-width: min(280px, 100%) !important; }

/* --- 5b2b. O botao de responder e um circulo, e nao uma elipse ------------ */
/* Medido: 24x40 com `border-radius: 50%`. Raio de 50% num retangulo nao
   desenha circulo — desenha elipse. Era o formato torto que aparecia colado
   na quina da bolha, parecendo defeito de renderizacao.

   Caixa quadrada resolve a forma. E em mensagem ENVIADA ele muda de lado: a
   bolha de saida encosta na borda direita da conversa, e um botao 34px mais
   a direita sairia da area de mensagens. Para dentro, ele fica sempre
   alcancavel.                                                               */
#chat-msgs .msg-reply-btn {
  width: 32px;
  height: 32px;
  /* O piso de toque de 40px da camada mobile alcanca todo `button` e mantinha
     a altura em 40 contra uma largura de 28 — a elipse continuava. 32px e o
     meio-termo: circulo de verdade, e o alvo mais proximo do piso que a forma
     permite. Vale para uma acao secundaria que so aparece no hover.         */
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  right: -34px;
}
#chat-msgs .msg-out .msg-reply-btn,
#chat-msgs .msg-saida .msg-reply-btn {
  right: auto;
  left: -34px;
}

/* --- 5b3. O aviso do campo de mensagem cabe em uma linha ------------------ */
/* O placeholder tem 76 caracteres ("Digite a mensagem... (Enter envia,
   Shift+Enter nova linha, @ para mencionar)"). Num campo de 229px com fonte
   de 16px ele ocupa 4 linhas de 23px = 86px, dentro de uma caixa de 40px:
   46px decepados no meio de uma palavra.

   A dica continua inteira para quem tem espaco — em tela larga o texto cabe
   sem reticencia. Onde nao cabe, corta no fim, e nao no meio.               */
.chat-input-area textarea::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 5b4. Anexo, audio e resposta sobem para uma faixa propria ------------ */
/* O composer e um flex `nowrap` com NOVE filhos, e tres deles sao avisos que
   a pagina liga sob demanda: previa de audio, barra de resposta e previa de
   anexo. Ligados, eles entram na MESMA linha do campo e comem a largura dele.

   Medido com um anexo: o campo cai de 508px para 419px — 89px a menos para
   escrever, justamente quando se esta escrevendo uma legenda.

   `flex-wrap: wrap` mais `flex-basis: 100%` poe cada aviso numa faixa
   inteira, e o `order` negativo a coloca ACIMA da linha de digitacao. Nenhum
   no muda de lugar no documento — muda so onde o flex os desenha.

   Quando nao ha aviso os tres estao em `display:none`, nao ocupam linha
   nenhuma e a altura do composer fica igual a de hoje.                      */
.chat-input-area { flex-wrap: wrap; }

.chat-input-area > #audio-preview,
.chat-input-area > #reply-bar,
.chat-input-area > #attach-preview {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}
/* Ordem entre eles: o que responde vem antes do que anexa, que vem antes de
   gravar — a mesma sequencia em que o operador toma as decisoes.            */
.chat-input-area > #reply-bar      { order: -3; }
.chat-input-area > #attach-preview { order: -2; }
.chat-input-area > #audio-preview  { order: -1; }

/* --- 5c. A lista cede largura antes de espremer a conversa ---------------- */
/* A lista mantinha 360px cravados em qualquer tela, e a conversa ficava com o
   resto: 540px numa tela de 900. Nesta faixa a lista passa a ceder, com piso
   de 260px (onde nome e previa ainda se leem) e teto nos mesmos 360px do
   desktop, para nao existir salto na transicao — a 1100px o clamp ja devolve
   360, que e o valor de 1101 em diante.

   Medido a 900px: lista 360 -> 306, conversa 540 -> 594.

   Comeca em 821 e nao em 721: abaixo disso quem decide a largura da lista e o
   dock, que a reduz a uma regua de 76px. Escrever 721 aqui descreveria uma
   faixa onde esta regra nunca decide nada.

   `:has(#conv-list)` limita a regra a lista de conversas. A `.sidebar` das
   outras paginas e menu de navegacao, com largura propria — um clamp comum
   alargaria menu que ninguem pediu para mexer.                              */
@media (min-width: 821px) and (max-width: 1100px) {
  .sidebar:has(#conv-list) { width: clamp(260px, 34vw, 360px); }
}