/* Base da Sala: a identidade que toda página carrega (o app, as boas-vindas, o cofre, a volta do login, as páginas de
   erro). Revisão de design de 29/09: cada página copiava as cores com valores um pouco diferentes e o app tinha 25
   tamanhos de fonte. Aqui mora o que é comum; o estilo.css só tem o que é do app.

   As quatro regras que decidem quase todo caso novo:
   1. A conversa é o centro: o resto são lugares ao lado dela.
   2. Verde é a marca e a ação do dono. Nenhum agente é verde.
   3. Serifa itálica é a voz da sala (título do lugar, de diálogo, estado vazio); mono é número (hora, dinheiro,
      código). O resto é Plex Sans.
   4. Uma ação, uma forma, um nome.
   A trava está em sala/testes/test_estilo.py: tamanho de fonte, raio e cor soltos só descem. */

/* ---------- tokens ---------- */
:root {
  --fundo: #f3f5f3; --painel: #ffffff; --elevado: #f6f8f6; --tinta: #16241c; --tinta-2: #3b4b41;
  --apagado: #5f6e64; --linha: #e1e7e2; --linha-forte: #cbd5cd;
  --marca: #1b7a3a; --marca-texto: #ffffff; --marca-suave: #e3f1e7; --marca-tinta: #155f2d; --marca-entrega: var(--marca);  /* a faixa da entrega: a cor do dono, posta no cartão */
  --perigo: #b42318; --perigo-suave: #fdecea; --atencao: #9a5a06; --atencao-suave: #fbf0df;
  --neutro-suave: #eef1ee; --info: #2d6f9e;
  --eu-fundo: #e6f3ea; --eu-borda: #cfe6d6; --sobre-cor: #ffffff;
  /* agentes: onze tons, nenhum verde (o verde é da marca). rh.py dá o primeiro livre a quem entra */
  --ag1: #2b59c3; --ag2: #0e7c86; --ag3: #b02e75; --ag4: #4f5d78; --ag5: #a4243b; --ag6: #6a4fc4;
  --ag7: #a3660a; --ag8: #b8431e; --ag9: #2d6f9e; --ag10: #6b6b16; --ag11: #8a3a9e;
  /* nota no mapa: da melhor para a pior */
  --nota-1: var(--marca); --nota-2: #5b8f2a; --nota-3: var(--atencao); --nota-4: var(--perigo); --nota-0: #8a948d;
  --sombra: 0 1px 2px rgba(22, 36, 28, .06), 0 10px 30px rgba(22, 36, 28, .10);
  --sombra-leve: 0 1px 2px rgba(22, 36, 28, .05), 0 4px 14px rgba(22, 36, 28, .05);
  --veu: rgba(10, 18, 13, .38);
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --serifa: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  /* sete tamanhos: o rótulo em caixa alta (e o número de um selo) é o único abaixo de 12 px */
  --t-rotulo: 11px; --t-meta: 12.5px; --t-ui: 13.5px; --t-corpo: 15px; --t-sec: 17px; --t-titulo: 22px; --t-grande: 28px;
  /* cinco raios */
  --r-p: 6px; --r-m: 10px; --r-g: 14px; --r-gg: 20px; --r-pilula: 999px;
  --topo-seguro: env(safe-area-inset-top, 0px); --base-segura: env(safe-area-inset-bottom, 0px);
  --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --certo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  --seta-baixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6e64' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* nomes antigos: instalação de antes de 29/09 guarda a cor pelo nome do agente fundador */
  --grut: var(--marca); --grut-texto: var(--marca-texto); --grut-suave: var(--marca-suave); --grut-tinta: var(--marca-tinta);
  --cecilia: var(--ag2); --bruno: var(--ag1); --marina: var(--ag3); --ravi: var(--ag7); --otavio: var(--ag8);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0c120e; --painel: #111814; --elevado: #172019; --tinta: #e3ebe5; --tinta-2: #c1cdc5;
    --apagado: #8fa095; --linha: #212c25; --linha-forte: #334139;
    --marca: #3fae66; --marca-texto: #07130b; --marca-suave: #15291c; --marca-tinta: #7fd49b;
    --perigo: #f2695c; --perigo-suave: #3a1714; --atencao: #e0a14a; --atencao-suave: #33240f;
    --neutro-suave: #1c261f; --info: #7ab8e8;
    --eu-fundo: #16291d; --eu-borda: #1f3a28; --sobre-cor: #0c120e;
    --ag1: #86a6ff; --ag2: #4cc3cc; --ag3: #f07cb9; --ag4: #a3b1cc; --ag5: #f27a8a; --ag6: #a891f5;
    --ag7: #e3a33f; --ag8: #f59a74; --ag9: #7ab8e8; --ag10: #c9c865; --ag11: #cf8ee0;
    --nota-2: #9fcf5e; --nota-0: #7d8a82;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .4);
    --sombra-leve: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    --veu: rgba(0, 0, 0, .55);
    --seta-baixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa095' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #0c120e; --painel: #111814; --elevado: #172019; --tinta: #e3ebe5; --tinta-2: #c1cdc5;
  --apagado: #8fa095; --linha: #212c25; --linha-forte: #334139;
  --marca: #3fae66; --marca-texto: #07130b; --marca-suave: #15291c; --marca-tinta: #7fd49b;
  --perigo: #f2695c; --perigo-suave: #3a1714; --atencao: #e0a14a; --atencao-suave: #33240f;
  --neutro-suave: #1c261f; --info: #7ab8e8;
  --eu-fundo: #16291d; --eu-borda: #1f3a28; --sobre-cor: #0c120e;
  --ag1: #86a6ff; --ag2: #4cc3cc; --ag3: #f07cb9; --ag4: #a3b1cc; --ag5: #f27a8a; --ag6: #a891f5;
  --ag7: #e3a33f; --ag8: #f59a74; --ag9: #7ab8e8; --ag10: #c9c865; --ag11: #cf8ee0;
  --nota-2: #9fcf5e; --nota-0: #7d8a82;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .4);
  --sombra-leve: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --veu: rgba(0, 0, 0, .55);
  --seta-baixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa095' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
body { margin: 0; font: var(--t-corpo)/1.5 var(--sans); background: var(--fundo); color: var(--tinta); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: var(--r-p); }
code { font-family: var(--mono); font-size: .9em; background: var(--elevado); border: 1px solid var(--linha); padding: 1px 5px; border-radius: var(--r-p); overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rotulo { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.miudo { font-size: var(--t-meta); color: var(--apagado); margin: 0; }
.erro { color: var(--perigo); font-size: var(--t-ui); margin: 0; }
.erro:empty { display: none; }
.espaco { flex: 1; }
.titulo-sala { margin: 0; font: italic 400 var(--t-titulo)/1.2 var(--serifa); }

/* a marca: o símbolo (a mesa com o time em volta) e o nome do produto */
.marca-sala { display: inline-flex; align-items: center; gap: 9px; font: 600 var(--t-ui)/1 var(--sans); letter-spacing: .01em; color: var(--tinta); text-decoration: none; }
.marca-sala::before { content: ""; width: 26px; height: 26px; flex: none; background: url("/icone.svg") center / contain no-repeat; }
.marca-sala small { font-weight: 400; color: var(--apagado); }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-m); border: 1px solid var(--linha-forte); background: var(--painel); font-size: var(--t-ui); font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--tinta); }
.botao svg.i { width: 16px; height: 16px; }
.botao.pequeno { min-height: 32px; padding: 0 12px; }
.botao.grande { min-height: 48px; font-size: var(--t-corpo); }
.botao.largo { width: 100%; min-height: 42px; }
.botao.primario { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.botao.perigo { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 40%, var(--linha)); }
.botao.perigo-cheio { background: var(--perigo); border-color: var(--perigo); color: var(--sobre-cor); }
.botao.fantasma { border-color: transparent; background: none; color: var(--marca-tinta); }
.botao:disabled { opacity: .5; cursor: default; }
.link { border: 0; background: none; padding: 0; font-size: var(--t-ui); color: var(--marca-tinta); text-decoration: underline; text-underline-offset: 3px; }
.link.perigo { color: var(--perigo); }
@media (hover: hover) {
  .botao:hover { background: var(--elevado); }
  .botao.primario:hover { background: var(--marca); filter: brightness(1.07); }
  .botao.perigo:hover { background: var(--perigo-suave); }
  .botao.perigo-cheio:hover { background: var(--perigo); filter: brightness(1.07); }
  .botao.fantasma:hover { background: var(--marca-suave); }
}
.botao:active { transform: translateY(1px); }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- campos ---------- */
/* todo campo de texto e seletor tem o desenho da sala, esteja onde estiver (30/09: o teto mensal, as frases da cópia
   de segurança e os seletores do financeiro ficavam fora de .campo e saíam com a cara crua do navegador). O :where
   não pesa na cascata: quem tem regra própria (a caixa de mensagem, a busca da memória) continua mandando */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"]), select, textarea) { min-height: 40px; padding: 8px 12px; border-radius: var(--r-m); border: 1px solid var(--linha-forte); background: var(--painel); color: var(--tinta); font-size: var(--t-corpo); min-width: 0; }
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"]), select, textarea):focus { outline: 0; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
:where(input, select, textarea)::placeholder { color: var(--apagado); opacity: .8; }
:where(select) { appearance: none; padding-right: 38px; background: var(--painel) var(--seta-baixo) right 12px center / 16px no-repeat; }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--marca); }
input[type="file"] { font-size: var(--t-ui); color: var(--tinta-2); max-width: 100%; }
input[type="file"]::file-selector-button { min-height: 34px; margin-right: 10px; padding: 0 12px; border-radius: var(--r-m); border: 1px solid var(--linha-forte); background: var(--painel); color: var(--tinta); font: 500 var(--t-ui) var(--sans); cursor: pointer; }
.campo { display: grid; gap: 6px; }
.campo input, .campo textarea, .campo select { width: 100%; min-height: 44px; padding: 10px 13px; border-radius: var(--r-m); border: 1px solid var(--linha-forte); background: var(--painel); font-size: var(--t-corpo); color: var(--tinta); }
.campo select { appearance: none; padding-right: 38px; background: var(--painel) var(--seta-baixo) right 12px center / 16px no-repeat; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 0; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.campo textarea { min-height: 84px; resize: vertical; line-height: 1.45; }

/* ---------- estado: ponto + palavra (nunca só a cor). ok, atenção, perigo, neutro e andando ---------- */
.estado { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 1px 9px; border-radius: var(--r-pilula); font-size: var(--t-meta); font-weight: 600; line-height: 1.3; white-space: nowrap; background: var(--neutro-suave); color: var(--tinta-2); }
.estado > i, .estado::before { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.estado::before { content: ""; }
.estado:has(> i)::before { display: none; }
.estado.ok { background: var(--marca-suave); color: var(--marca-tinta); }
.estado.atencao { background: var(--atencao-suave); color: var(--atencao); }
.estado.perigo { background: var(--perigo-suave); color: var(--perigo); }
.estado.neutro { background: var(--neutro-suave); color: var(--apagado); }
.estado.andando { background: var(--marca-suave); color: var(--marca-tinta); }
.estado.andando::before, .estado.andando > i { animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .35; } }

/* etiqueta: um rótulo sem estado (de onde veio, parte de quê, papel). Mesmo desenho em todo lugar */
.etiqueta { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 8px; border-radius: var(--r-pilula); font-size: var(--t-rotulo); font-weight: 600; line-height: 1.6; white-space: nowrap; background: var(--elevado); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha); }
.etiqueta.verde { background: var(--marca-suave); color: var(--marca-tinta); box-shadow: none; }
.etiqueta.atencao, .etiqueta.de-fora { background: var(--atencao-suave); color: var(--atencao); box-shadow: none; }
.etiqueta.perigo { background: var(--perigo-suave); color: var(--perigo); box-shadow: none; }
.etiqueta.codigo { font-family: var(--mono); font-weight: 500; letter-spacing: 0; }

/* ---------- estado vazio: a voz da sala, uma frase e o que fazer ---------- */
.vazio-t { display: grid; gap: 6px; justify-items: center; padding: 28px 20px; border: 1px dashed var(--linha-forte); border-radius: var(--r-g); text-align: center; color: var(--apagado); }
.vazio-t strong { font: italic 400 var(--t-titulo)/1.3 var(--serifa); color: var(--tinta); }
.vazio-t span { max-width: 60ch; }

/* ---------- página solta: entrada, cofre, volta do login, erro ---------- */
.pagina-solta { min-height: 100dvh; display: grid; place-items: center; padding: calc(32px + var(--topo-seguro)) 16px calc(32px + var(--base-segura)); }
.cartao-solto { width: min(440px, 100%); display: grid; gap: 16px; }
.cartao-solto h1 { margin: 0; font: italic 400 var(--t-grande)/1.15 var(--serifa); }
.cartao-solto p { margin: 0; color: var(--tinta-2); }
.cartao-solto .dica { font-size: var(--t-meta); color: var(--apagado); border-top: 1px solid var(--linha); padding-top: 14px; }
.pontos { display: inline-flex; gap: 3px; }
.pontos i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pula 1.2s infinite ease-in-out; }
.pontos i:nth-child(2) { animation-delay: .15s; }
.pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* o modelo do time (modelos.py): uma opção por linha, nas boas-vindas e em Ajustes → IA e custo */
.opcoes-modelo { display: grid; gap: 8px; }
.opcoes-modelo label { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: var(--r-m); background: var(--painel); cursor: pointer; }
.opcoes-modelo label:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.opcoes-modelo input { grid-row: span 2; margin: 0; accent-color: var(--marca); }
.opcoes-modelo b { font-weight: 600; }
.opcoes-modelo small { grid-column: 2; color: var(--tinta-2); font-size: var(--t-meta); }
.opcoes-modelo .outro-modelo { grid-column: 2; display: grid; gap: 6px; margin-top: 6px; }
.opcoes-modelo .outro-modelo input { grid-row: auto; padding: 8px 10px; border: 1px solid var(--linha-forte); border-radius: var(--r-p); font: inherit; font-size: var(--t-ui); background: var(--fundo); color: var(--tinta); }
/* o campo de arquivo em português (05/10): o nativo diz "Choose File" no idioma do navegador. O input de verdade
   fica por cima, invisível; o botão e o nome são da Sala (campoArquivo na página, e as boas-vindas) */
.arquivo-escolha { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.arquivo-oculto { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.arquivo-escolha:focus-within .botao { outline: 2px solid var(--marca); outline-offset: 2px; }
.arquivo-nome { color: var(--apagado); font-size: var(--t-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }