/* roger — a UI. Cores via custom properties; dark/light seguem prefers-color-scheme
   por padrão, com override manual em [data-theme]. Mesma estrutura do argus, que é o
   único produto da casa com token layer de verdade — a ideia é que os dois virem um
   pacote compartilhado depois.

   O acento é teal, extensão documentada da rampa ciano→azul→roxo da kitsune: as três
   faixas originais já são do Argus, do Dux e da Lumi. */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --text: #1a1d21;
  --muted: #5c6570;
  --border: #e2e5ea;
  --accent: #0d9488;
  --accent-contrast: #ffffff;
  /* Ícone não é texto: no claro, o quase-preto do --text pesa demais numa forma cheia. */
  --icon: #5d6773;
  --ok: #1f9d55;
  --danger: #d64545;

  --bubble-mine: #d7f2ee;
  --bubble-theirs: #ffffff;

  --radius: 12px;
  --maxw: 860px;

  /* Escala de botões: TODO botão de ação usa um destes dois tamanhos. */
  --btn-h: 38px;
  --btn-h-sm: 32px;
  --btn-px: 16px;
  --btn-px-sm: 12px;
  --btn-radius: 8px;
  --btn-font: 0.9rem;

  --scrollbar-thumb: rgba(90, 100, 115, 0.4);
  --scrollbar-thumb-hover: rgba(90, 100, 115, 0.65);

  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.05);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --surface: #171b21;
    --surface-2: #1d222a;
    --text: #e6e9ee;
    --muted: #9aa4b2;
    --border: #262c34;
    --accent: #2dd4bf;
    --accent-contrast: #06231f;
    --icon: #aab4c0;
    --ok: #3ddc84;
    --danger: #f0736e;

    --bubble-mine: #14342f;
    --bubble-theirs: #1d222a;

    --scrollbar-thumb: rgba(185, 190, 200, 0.28);
    --scrollbar-thumb-hover: rgba(185, 190, 200, 0.5);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* O override manual (botão de tema) tem que vencer o media query. */
[data-theme="light"] {
  --bg: #f6f7f9; --surface: #fff; --surface-2: #f0f2f5; --text: #1a1d21;
  --muted: #5c6570; --border: #e2e5ea; --accent: #0d9488; --accent-contrast: #fff; --icon: #5d6773;
  --ok: #1f9d55; --danger: #d64545; --bubble-mine: #d7f2ee; --bubble-theirs: #fff;
  --scrollbar-thumb: rgba(90, 100, 115, 0.4);
  --scrollbar-thumb-hover: rgba(90, 100, 115, 0.65);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.05);
}
[data-theme="dark"] {
  --bg: #0f1216; --surface: #171b21; --surface-2: #1d222a; --text: #e6e9ee;
  --muted: #9aa4b2; --border: #262c34; --accent: #2dd4bf; --accent-contrast: #06231f; --icon: #aab4c0;
  --ok: #3ddc84; --danger: #f0736e; --bubble-mine: #14342f; --bubble-theirs: #1d222a;
  --scrollbar-thumb: rgba(185, 190, 200, 0.28);
  --scrollbar-thumb-hover: rgba(185, 190, 200, 0.5);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

/* O atributo hidden é fraco: qualquer regra display: o vence. Este reset faz o hidden
   valer em todo o app — o JS liga/desliga [hidden] contando com isso. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* height + overflow:hidden, NÃO min-height: com min-height a página inteira cresce
     junto com a conversa e a barra de digitar sai de cena no scroll. Travando a altura,
     só o #wa rola. */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- topo */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

/* O mark do produto (balão+tique em traço). Vive em stroke, sem preenchimento — é a
   versão mínima do ícone, como o olho do argus é a versão mínima da marca dele. */
.brand .mark {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar .sala {
  font-size: 0.8rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .espaco { margin-left: auto; }

.topbar .acoes {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Separa as ações do técnico (raras, com consequência) dos controles de exibição
   (mute e tema, inofensivos) — evita clicar em "encerrar" mirando o tema. */
.topbar .divisor {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

/* Ícones sólidos (flat), não de traço: o mark da marca já é a linguagem de traço, e
   repetir ela nos controles deixava tudo com o mesmo peso visual. */
.btn-icone svg {
  width: 17px;
  height: 17px;
  fill: var(--icon);
  stroke: none;
}

/* Encerrar é a única ação destrutiva: mantém o vermelho, não o cinza dos demais. */
.btn-perigo svg { fill: var(--danger); }

/* Qual sino aparece vem do aria-pressed do botão — um estado só, sem classe paralela
   pra dessincronizar. */
#muteBtn .icone-mudo { display: none; }
#muteBtn[aria-pressed="true"] .icone-som { display: none; }
#muteBtn[aria-pressed="true"] .icone-mudo { display: inline-block; }

/* Mesmo padrão do mute: aria-pressed é a fonte da verdade e o CSS troca o desenho.
   Cadeado fechado = freio ligado; aberto = o técnico soltou. */
#limiteBtn .icone-sem-limite { display: none; }
#limiteBtn[aria-pressed="true"] .icone-com-limite { display: none; }
#limiteBtn[aria-pressed="true"] .icone-sem-limite { display: inline-block; }
/* Solto é estado de exceção, e a cor diz isso sem precisar ler o rótulo — o mesmo
   vermelho do "Encerrar conversa". O desenho precisa da regra própria: `.menu-item svg`
   fixa o fill em var(--icon), e fill não herda de color. Pintar só o texto deixava o
   cadeado cinza ao lado de um rótulo vermelho. */
#limiteBtn[aria-pressed="true"] { color: var(--danger); }
#limiteBtn[aria-pressed="true"] svg { fill: var(--danger); }

/* --------------------------------------------------------------- menu ⚙ */

.menu-wrap { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 230px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.menu-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.menu-campo label {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Linha de rótulo + controle, lado a lado — para o que não é um item clicável inteiro. */
.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  font-size: 0.9rem;
}

/* Seletor de idioma: en · pt · es, mesmo padrão do Argus. Fileira de links em vez de
   <select> porque cabe numa linha e mostra as opções sem abrir nada. */
.lang-links { display: flex; align-items: center; gap: 1px; }

/* O separador é decorativo, mas sem ele os códigos colam num borrão. */
.lang-sep { color: var(--muted); opacity: 0.45; font-size: 0.8rem; user-select: none; }

.lang-link {
  /* 5px na vertical leva o alvo de toque a ~28px de altura — acima do mínimo de
     24×24 do WCAG 2.5.8. Com 2px ficaria em 22px. */
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  cursor: pointer;
  /* Sublinhado transparente, e não ausente: reservar o espaço evita o texto pular
     um pixel quando ele aparece no hover. */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.lang-link:hover { color: var(--text); text-decoration-color: currentColor; }

.lang-link[aria-pressed="true"] {
  color: var(--accent);
  font-weight: 600;
  text-decoration-color: currentColor;
  cursor: default;
}

/* Na tela de senha o seletor é secundário: fica centrado e discreto, abaixo do botão. */
.login-lang {
  margin-top: 4px;
  justify-content: center;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: none;
  border-radius: var(--btn-radius);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover { background: var(--surface-2); }

.menu-item svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: var(--icon);
  stroke: none;
}

.menu-item-perigo { color: var(--danger); }
.menu-item-perigo svg { fill: var(--danger); }

/* -------------------------------------------------------- modal do nome */

#confirmarChamado h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

#confirmarChamado p {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--muted);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}

.checkbox input { accent-color: var(--accent); }

#pedirNome h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

#pedirNome label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.88rem;
  color: var(--muted);
}

#pedirNome .dica {
  margin: 10px 0 16px;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ------------------------------------------------------------- estrutura */

.app {
  flex: 1;
  min-height: 0;           /* sem isto o flex-child não encolhe e o scroll vaza */
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* A área de mensagens cresce com a janela. Antes era `height: 330px` cravado, com um
   `50vh` num media query que nunca surtia efeito porque o pai estava travado. */
.conversa {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

#wa {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
}

#messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ------------------------------------------------- chamar a atenção */

/* O destaque é uma CLASSE estática, não uma transição: quem pede movimento reduzido
   perde a sacudida (regra lá embaixo) mas continua vendo que foi chamado. */
.conversa.chamado {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.conversa.chamado { animation: sacode 0.5s; }

@keyframes sacode {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}

/* A linha do chamado no histórico tem peso maior que os outros eventos de sistema —
   é o único que pede ação de quem lê. */
.msg-chamado {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

/* ------------------------------------------------------------- mensagens */

/* Era float + clear, técnica pré-flexbox, com max-width: 40% fixo em todo breakpoint. */
.msg {
  max-width: min(75%, 46ch);
  padding: 8px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.msg-left {
  align-self: flex-start;
  background: var(--bubble-theirs);
  border-bottom-left-radius: 4px;
}

.msg-right {
  align-self: flex-end;
  background: var(--bubble-mine);
  border-bottom-right-radius: 4px;
}

.msg-system {
  align-self: center;
  max-width: 90%;
  text-align: center;
  background: none;
  border: none;
  padding: 2px 0;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
}

/* Linha que o convidado nem recebe. A marca é discreta de propósito: informa o técnico
   sem competir com a conversa. */
.so-tech {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.7rem;
  font-style: normal;
  white-space: nowrap;
}

.msg .meta {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent);
  margin-right: 8px;
}

/* Era #888/#999 sobre branco: ~2.7:1, abaixo do mínimo 4.5:1 do WCAG. */
.msg .time {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.typingStatus {
  min-height: 1.25rem;
  padding: 0 14px 8px;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

/* --------------------------------------------------------------- campos */

input[type="text"], input[type="password"], input:not([type]) {
  width: 100%;
  height: var(--btn-h);
  padding: 0 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  font: inherit;
  font-size: 0.95rem;
}

input::placeholder { color: var(--muted); }

input:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

.campo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campo label {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

#form {
  display: flex;
  gap: 8px;
}

#form input { flex: 1; }

/* --------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--btn-font);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover:not(:disabled) { background: var(--surface-2); }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primario {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* O background tem que ser repetido aqui: `.btn:hover` tem especificidade maior que
   `.btn-primario`, e sem isto o hover devolvia o cinza do botão neutro por baixo do texto
   branco — o rótulo sumia. */
.btn-primario:hover:not(:disabled) {
  background: var(--accent);
  filter: brightness(1.08);
}

.btn-perigo {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}

/* Mesmo motivo do primário: precisa vencer o `.btn:hover`. */
.btn-perigo:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border-color: var(--danger);
}

.btn-icone {
  width: var(--btn-h-sm);
  height: var(--btn-h-sm);
  padding: 0;
  font-size: 1rem;
}

/* Na linha de digitar o ícone acompanha a altura do Enviar: o tamanho reduzido é pros
   controles da topbar, e ali embaixo ele quebrava o alinhamento da faixa. */
#form .btn-icone {
  width: var(--btn-h);
  height: var(--btn-h);
  flex: none;
}

#form .btn-icone svg { width: 20px; height: 20px; }

/* --------------------------------------------------------- painel do técnico */

.painel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.painel .ticket { width: 160px; flex: 0 1 160px; }

/* Ticket + exportar andam juntos: ou os dois aparecem, ou nenhum. */
.grupo-export {
  display: flex;
  align-items: center;
  gap: 8px;
}

#statusbar {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 4px;
}

/* classList em vez de sobrescrever o style inteiro, que apagava o font-size junto. */
#statusbar.status-ok { color: var(--ok); }
#statusbar.status-erro { color: var(--danger); }

/* ---------------------------------------------------------------- login */

.login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.login form {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.login .marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.login .marca img { width: 96px; height: auto; }

/* O ícone do produto tem duas artes: neon sobre escuro e tinta chapada sobre claro —
   luz só lê sobre fundo escuro. A troca segue a mesma cascata das cores: base clara,
   media query pro escuro, e [data-theme] vencendo os dois. */
.login .marca .produto-icone {
  width: 96px;
  height: 96px;
  background: url("/assets/roger-icon-light.png") center / contain no-repeat;
}

@media (prefers-color-scheme: dark) {
  .login .marca .produto-icone { background-image: url("/assets/roger-icon.png"); }
}

[data-theme="light"] .login .marca .produto-icone { background-image: url("/assets/roger-icon-light.png"); }
[data-theme="dark"] .login .marca .produto-icone { background-image: url("/assets/roger-icon.png"); }

.login .marca span {
  font-size: 1.1rem;
  font-weight: 600;
}

.erro {
  color: var(--danger);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------------------------------------------------------------- modal */

dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 20px;
  max-width: min(90vw, 380px);
  box-shadow: var(--shadow);
}

dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

dialog p { margin: 0 0 18px; }

.modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ------------------------------------------------------------ scrollbar */

#wa { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
#wa::-webkit-scrollbar { width: 10px; }
#wa::-webkit-scrollbar-track { background: transparent; }
#wa::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#wa::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }

/* ------------------------------------------------------------- responsivo */

/* Os breakpoints antigos só existiam pra desfazer o `padding: 15px 350px` do body. Com
   max-width + margin-inline, o layout já é fluido; sobra ajustar o aperto do celular. */
@media (max-width: 560px) {
  .app { padding: 8px 10px 12px; gap: 8px; }
  #wa { padding: 10px; }
  .msg { max-width: 88%; }
  .painel .ticket { flex: 1 1 100%; width: auto; }
  .topbar .sala { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}