/* Ultron (ex-ialocal): interface em Liquid Glass, na mesma linguagem do /chats do mark2.
   Regras da lente: ela é um elemento vazio (.lente), irmão do conteúdo, nunca um pseudo-elemento e nunca animada; um desfoque por
   superfície; o movimento é só de geometria (transform) no invólucro, sem opacidade, para o desfoque não sumir durante a animação. */

:root {
  color-scheme: dark;
  /* papel de parede */
  --pagina-de: #070a11; --pagina-ate: #0a0e17;
  --lavado-ciano: rgba(94, 200, 229, 0.075); --lavado-ouro: rgba(212, 168, 67, 0.055);
  --malha-vertical: rgba(122, 176, 220, 0.06); --malha-horizontal: rgba(122, 176, 220, 0.038); --feixe: rgba(150, 198, 232, 0.03);
  /* texto e traços */
  --rotulo: rgba(236, 242, 251, 0.95); --rotulo-suave: rgba(236, 242, 251, 0.7); --rotulo-fraco: rgba(236, 242, 251, 0.58);
  --fio: rgba(150, 166, 196, 0.22); --borda-ativa: rgba(170, 190, 225, 0.58);
  --preenchimento: rgba(255, 255, 255, 0.06); --preenchimento-forte: rgba(255, 255, 255, 0.12); --preenchimento-de-campo: rgba(0, 0, 0, 0.26);
  --codigo: #0b0f18; --codigo-em-linha: #464f62;
  --chapado-da-pagina: rgb(10, 13, 20); --chapado-funcional: rgb(22, 27, 38); --chapado-de-conteudo: rgb(30, 36, 49); --chapado-de-destaque: rgb(58, 48, 30);
  --ok: #7fd87b; --alerta: #f1b631; --falha: #fa937f; --informacao: #56dafb;
  --acao: #d8a72c; --acao-rotulo: #0a0c10; --destaque: #e8c579;
  --veu: rgba(0, 0, 0, 0.32);
  /* vidro funcional: barras e painéis do chassi */
  --funcional-tinta: rgba(30, 36, 50, 0.34); --funcional-desfoque: 14px; --funcional-saturacao: 205%; --funcional-brilho: 0.86;
  --funcional-aro: rgba(255, 255, 255, 0.40); --funcional-aro-suave: rgba(255, 255, 255, 0.09);
  --funcional-sombra: 0 1px 1px rgba(0, 0, 0, 0.34), 0 5px 14px rgba(0, 0, 0, 0.42), 0 14px 34px rgba(0, 0, 0, 0.36);
  --funcional-sombra-interna: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.58);
  --funcional-chanfro: 0.13; --funcional-chanfro-de-baixo: 0.05; --funcional-chanfro-do-lado: 0.04;
  /* vidro de conteúdo: bolhas e cartões */
  --conteudo-tinta: rgba(38, 45, 62, 0.42); --conteudo-desfoque: 8px; --conteudo-saturacao: 185%; --conteudo-brilho: 0.92;
  --conteudo-aro: rgba(255, 255, 255, 0.30); --conteudo-aro-suave: rgba(255, 255, 255, 0.08);
  --conteudo-sombra: 0 1px 1px rgba(0, 0, 0, 0.24), 0 4px 12px rgba(0, 0, 0, 0.26);
  --conteudo-sombra-interna: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 0.5px rgba(0, 0, 0, 0.50);
  --conteudo-chanfro: 0.095; --conteudo-chanfro-de-baixo: 0.025; --conteudo-chanfro-do-lado: 0.025;
  /* vidro de destaque: fala de quem usa */
  --destaque-tinta: rgba(78, 62, 32, 0.54); --destaque-aro: rgba(232, 197, 121, 0.34); --destaque-aro-suave: rgba(232, 197, 121, 0.10);
  /* vidro transitório: diálogos e folhas */
  --transitorio-tinta: rgba(22, 27, 38, 0.70); --transitorio-desfoque: 22px; --transitorio-saturacao: 190%; --transitorio-brilho: 0.9;
  --transitorio-sombra: 0 2px 2px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.46), 0 32px 80px rgba(0, 0, 0, 0.44);
  /* geometria */
  --raio-do-chassi: 26px; --raio-de-conteudo: 18px; --raio-de-controle: 10px; --raio-pequeno: 8px;
  --recuo-do-chassi: 12px; --alvo: 34px; --coluna-da-conversa: 880px;
  --texto-de-titulo: 17px; --texto: 15px; --texto-menor: 13px; --texto-de-legenda: 12px; --texto-micro: 11px;
  /* movimento */
  --curva-de-camada: cubic-bezier(0.32, 0.72, 0, 1); --curva-de-pintura: cubic-bezier(0.25, 0.1, 0.25, 1);
  --mola-de-controle: linear(0 0%, .0668 5%, .2159 10%, .3914 15%, .5598 20%, .7041 25%, .8178 30%, .9013 35%, .9583 40%, .9941 45%, 1.0142 50%, 1.0233 55%, 1.0254 60%, 1.0234 65%, 1.0195 70%, 1.0151 75%, 1.0108 80%, 1.0072 85%, 1.0044 90%, 1.0024 95%, 1.0010 100%);
  /* medidas vivas, escritas pelo app.js */
  --altura-do-topo: 120px; --altura-da-base: 96px;
}
:root[data-aparencia="clara"] {
  color-scheme: light;
  --pagina-de: #f4f6fa; --pagina-ate: #e7ecf5;
  --lavado-ciano: rgba(60, 150, 190, 0.10); --lavado-ouro: rgba(190, 140, 40, 0.08);
  --malha-vertical: rgba(70, 100, 140, 0.07); --malha-horizontal: rgba(70, 100, 140, 0.045); --feixe: rgba(90, 130, 170, 0.04);
  --rotulo: rgba(12, 16, 25, 0.92); --rotulo-suave: rgba(12, 16, 25, 0.72); --rotulo-fraco: rgba(12, 16, 25, 0.64);
  --fio: rgba(60, 72, 98, 0.18); --borda-ativa: rgba(60, 84, 128, 0.55);
  --preenchimento: rgba(20, 30, 50, 0.05); --preenchimento-forte: rgba(20, 30, 50, 0.10); --preenchimento-de-campo: rgba(255, 255, 255, 0.62);
  --codigo: #eef1f7; --codigo-em-linha: #dde2ec;
  --chapado-da-pagina: rgb(244, 246, 250); --chapado-funcional: rgb(250, 251, 253); --chapado-de-conteudo: rgb(255, 255, 255); --chapado-de-destaque: rgb(255, 244, 222);
  --ok: #146423; --alerta: #744b05; --falha: #93230e; --informacao: #0a5c76;
  --acao: #8c630d; --acao-rotulo: #ffffff; --destaque: #8c630d;
  --veu: rgba(16, 22, 34, 0.18);
  --funcional-tinta: rgba(255, 255, 255, 0.30); --funcional-saturacao: 170%; --funcional-brilho: 1.02;
  --funcional-aro: rgba(255, 255, 255, 0.86); --funcional-aro-suave: rgba(255, 255, 255, 0.22);
  --funcional-sombra: 0 1px 1px rgba(20, 27, 36, 0.06), 0 5px 14px rgba(20, 27, 36, 0.10), 0 14px 34px rgba(20, 27, 36, 0.10);
  --funcional-sombra-interna: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 0.5px rgba(20, 27, 36, 0.18);
  --funcional-chanfro: 0.5; --funcional-chanfro-de-baixo: 0.2; --funcional-chanfro-do-lado: 0.2;
  --conteudo-tinta: rgba(255, 255, 255, 0.46); --conteudo-saturacao: 158%; --conteudo-brilho: 1;
  --conteudo-aro: rgba(255, 255, 255, 0.9); --conteudo-aro-suave: rgba(255, 255, 255, 0.3);
  --conteudo-sombra: 0 1px 1px rgba(20, 27, 36, 0.05), 0 4px 12px rgba(20, 27, 36, 0.08);
  --conteudo-sombra-interna: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 0.5px rgba(20, 27, 36, 0.14);
  --conteudo-chanfro: 0.4; --conteudo-chanfro-de-baixo: 0.15; --conteudo-chanfro-do-lado: 0.15;
  --destaque-tinta: rgba(255, 244, 222, 0.62); --destaque-aro: rgba(160, 116, 20, 0.34); --destaque-aro-suave: rgba(160, 116, 20, 0.12);
  --transitorio-tinta: rgba(252, 253, 255, 0.80); --transitorio-saturacao: 160%; --transitorio-brilho: 1.02;
  --transitorio-sombra: 0 2px 2px rgba(20, 27, 36, 0.06), 0 12px 32px rgba(20, 27, 36, 0.16), 0 32px 80px rgba(20, 27, 36, 0.16);
}
@media (pointer: coarse) { :root { --alvo: 44px; --texto: 16px; } }

* { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
html, body { overflow: hidden; overscroll-behavior: none; }
body {
  height: 100%; margin: 0; color: var(--rotulo); -webkit-tap-highlight-color: transparent;
  font: var(--texto)/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(120% 80% at 12% -10%, var(--lavado-ciano), transparent 60%),
    radial-gradient(90% 70% at 100% 105%, var(--lavado-ouro), transparent 62%),
    linear-gradient(118deg, transparent 38%, var(--feixe) 50%, transparent 62%),
    linear-gradient(180deg, var(--pagina-de), var(--pagina-ate));
  background-color: var(--pagina-de);
}
/* Malha do papel de parede: some para as bordas, para não competir com o texto. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--malha-vertical) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, var(--malha-horizontal) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(110% 90% at 30% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(110% 90% at 30% 0%, #000 0%, transparent 78%);
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--borda-ativa); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--acao) 42%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--fio) transparent; }

/* ---------- a lente ---------- */
.vidro, .mensagem.do-usuario, .mensagem.do-assistente, dialog {
  --vidro-tinta: var(--funcional-tinta); --vidro-desfoque: var(--funcional-desfoque); --vidro-saturacao: var(--funcional-saturacao); --vidro-brilho: var(--funcional-brilho);
  --vidro-aro: var(--funcional-aro); --vidro-aro-suave: var(--funcional-aro-suave);
  --vidro-sombra: var(--funcional-sombra); --vidro-sombra-interna: var(--funcional-sombra-interna);
  --vidro-chanfro: var(--funcional-chanfro); --vidro-chanfro-de-baixo: var(--funcional-chanfro-de-baixo); --vidro-chanfro-do-lado: var(--funcional-chanfro-do-lado);
  --vidro-largura-do-chanfro: 20px; --vidro-chapado: var(--chapado-funcional);
}
.vidro { position: relative; }
.vidro > :not(.lente), .mensagem > :not(.lente):not(.rodape-da-mensagem), dialog > :not(.lente) { position: relative; z-index: 1; }
.mensagem.do-assistente, .mensagem.do-usuario, .vidro-de-conteudo {
  --vidro-tinta: var(--conteudo-tinta); --vidro-desfoque: var(--conteudo-desfoque); --vidro-saturacao: var(--conteudo-saturacao); --vidro-brilho: var(--conteudo-brilho);
  --vidro-aro: var(--conteudo-aro); --vidro-aro-suave: var(--conteudo-aro-suave);
  --vidro-sombra: var(--conteudo-sombra); --vidro-sombra-interna: var(--conteudo-sombra-interna);
  --vidro-chanfro: var(--conteudo-chanfro); --vidro-chanfro-de-baixo: var(--conteudo-chanfro-de-baixo); --vidro-chanfro-do-lado: var(--conteudo-chanfro-do-lado);
  --vidro-largura-do-chanfro: 12px; --vidro-chapado: var(--chapado-de-conteudo);
}
.mensagem.do-usuario { --vidro-tinta: var(--destaque-tinta); --vidro-aro: var(--destaque-aro); --vidro-aro-suave: var(--destaque-aro-suave); --vidro-chapado: var(--chapado-de-destaque); }
dialog {
  --vidro-tinta: var(--transitorio-tinta); --vidro-desfoque: var(--transitorio-desfoque); --vidro-saturacao: var(--transitorio-saturacao); --vidro-brilho: var(--transitorio-brilho);
  --vidro-sombra: var(--transitorio-sombra);
}
.lente {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: clip; isolation: isolate; pointer-events: none;
  background: var(--vidro-tinta);
  box-shadow: var(--vidro-sombra), var(--vidro-sombra-interna);
  -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao)) brightness(var(--vidro-brilho));
  backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao)) brightness(var(--vidro-brilho));
}
.lente::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, var(--vidro-chanfro)), transparent) top / 100% var(--vidro-largura-do-chanfro) no-repeat,
    linear-gradient(to top, rgba(255, 255, 255, var(--vidro-chanfro-de-baixo)), transparent) bottom / 100% var(--vidro-largura-do-chanfro) no-repeat,
    linear-gradient(to right, rgba(255, 255, 255, var(--vidro-chanfro-do-lado)), transparent) left / var(--vidro-largura-do-chanfro) 100% no-repeat,
    linear-gradient(to left, rgba(255, 255, 255, var(--vidro-chanfro-do-lado)), transparent) right / var(--vidro-largura-do-chanfro) 100% no-repeat;
}
.lente::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(145deg, var(--vidro-aro), var(--vidro-aro-suave) 36%, var(--vidro-aro-suave) 64%, var(--vidro-aro));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Atrás das bolhas só existe o papel de parede, que não se move: no celular elas ficam sem desfoque, que custa caro na rolagem. */
@media (pointer: coarse) {
  .mensagem > .lente { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--vidro-chapado) 78%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
  .lente { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vidro-chapado); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lente { background: var(--vidro-chapado); }
}

/* ---------- controles ---------- */
.marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: -0.015em; font-size: var(--texto-de-titulo); }
.icone-da-marca { flex: none; width: 22px; height: 22px; }
.botao-icone {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--alvo); height: var(--alvo);
  background: transparent; border: 0; border-radius: var(--raio-de-controle); color: var(--rotulo-suave);
  transition: background-color 0.16s var(--curva-de-pintura), color 0.16s var(--curva-de-pintura), transform 0.34s var(--mola-de-controle);
}
.botao-icone:hover:not(:disabled) { background: var(--preenchimento-forte); color: var(--rotulo); }
.botao-icone:active:not(:disabled), .botao-principal:active:not(:disabled), .botao-texto:active:not(:disabled) { transform: scale(0.93); }
.botao-icone.perigo { color: var(--falha); }
.botao-icone:disabled { opacity: 0.4; }
.botao-icone[aria-pressed="true"] { color: var(--destaque); background: var(--preenchimento-forte); }
.botao-texto {
  background: var(--preenchimento); border: 1px solid var(--fio); color: var(--rotulo-suave); padding: 6px 10px; border-radius: var(--raio-de-controle);
  font-size: var(--texto-menor); transition: background-color 0.16s var(--curva-de-pintura), color 0.16s var(--curva-de-pintura), transform 0.34s var(--mola-de-controle);
}
.botao-texto:hover { color: var(--rotulo); background: var(--preenchimento-forte); }
.botao-texto.perigo { color: var(--falha); }
.botao-principal {
  background: var(--acao); color: var(--acao-rotulo); border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: opacity 0.16s var(--curva-de-pintura), transform 0.34s var(--mola-de-controle), filter 0.16s var(--curva-de-pintura);
}
.botao-principal:hover:not(:disabled) { filter: brightness(1.08); }
.botao-principal:disabled { opacity: 0.38; box-shadow: none; }
.botao-principal.perigo { background: var(--falha); color: #1a0a06; }
:root[data-aparencia="clara"] .botao-principal.perigo { color: #fff; }
.botao-principal.so-icone { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; width: 40px; height: 40px; }
@media (pointer: coarse) { .botao-principal.so-icone { width: 44px; height: 44px; } }
select, input[type=number], input[type=text], input[type=password], textarea { font: inherit; color: var(--rotulo); }
select {
  -webkit-appearance: none; appearance: none; background-color: var(--preenchimento-de-campo); border: 1px solid var(--fio); border-radius: var(--raio-de-controle);
  padding: 8px 30px 8px 11px; font-size: 16px; outline: none; max-width: 100%;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color 0.16s var(--curva-de-pintura);
}
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--borda-ativa); }
select option { background: var(--chapado-funcional); color: var(--rotulo); }
.erro { color: var(--falha); font-size: var(--texto-menor); min-height: 18px; }
.nota { font-size: var(--texto-de-legenda); color: var(--rotulo-suave); overflow-wrap: anywhere; }
.preco { font-variant-numeric: tabular-nums; }
.vazio { margin: auto; color: var(--rotulo-fraco); font-size: var(--texto-menor); }

/* ---------- chassi ---------- */
#aplicacao {
  position: relative; z-index: 1; display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: var(--recuo-do-chassi);
  height: var(--altura-visivel, 100dvh);
  padding: max(var(--recuo-do-chassi), env(safe-area-inset-top)) max(var(--recuo-do-chassi), env(safe-area-inset-right)) max(var(--recuo-do-chassi), env(safe-area-inset-bottom)) max(var(--recuo-do-chassi), env(safe-area-inset-left));
}
#barra-lateral { display: flex; flex-direction: column; min-height: 0; border-radius: var(--raio-do-chassi); }
.topo-da-barra { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 18px; }
#lista-de-chats { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.item-de-chat {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: var(--raio-de-conteudo);
  padding: 9px 12px; margin-bottom: 2px; color: var(--rotulo);
  transition: background-color 0.16s var(--curva-de-pintura), transform 0.34s var(--mola-de-controle);
}
.item-de-chat:hover { background: var(--preenchimento); }
.item-de-chat:active { transform: scale(0.98); }
.item-de-chat.atual { background: var(--preenchimento-forte); box-shadow: inset 0 0 0 1px var(--fio); }
.item-de-chat .titulo { display: block; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.item-de-chat .quando { display: block; margin-top: 2px; font-size: var(--texto-micro); color: var(--rotulo-fraco); font-variant-numeric: tabular-nums; }
.item-de-chat .ocupado { color: var(--destaque); }
.rodape-da-barra { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 12px 12px; border-top: 1px solid var(--fio); }

#area-do-chat { position: relative; min-width: 0; min-height: 0; }
#painel-do-topo { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; flex-direction: column; border-radius: var(--raio-do-chassi); }
#barra-do-topo { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--fio); }
.metricas { display: flex; align-items: center; gap: 6px 20px; flex-wrap: wrap; }
.metricas.custos { margin-left: auto; }
.metrica { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.metrica small { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rotulo-fraco); }
.metrica b { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rotulo); }
.metrica.no-teto b { color: var(--falha); }
.metrica.no-fim b { color: var(--alerta); }
#gpu-desliga { min-width: 4.2ch; }
.chave-mestra {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--fio); background: var(--preenchimento);
  color: var(--rotulo-suave); border-radius: 999px; padding: 5px 13px 5px 6px; font-size: var(--texto-menor); font-weight: 600; white-space: nowrap;
  transition: color 0.2s var(--curva-de-pintura), border-color 0.2s var(--curva-de-pintura), transform 0.34s var(--mola-de-controle);
}
.chave-mestra:active:not(:disabled) { transform: scale(0.96); }
/* A chave que desliga a GPU de todos fica no rodapé da barra lateral, longe dos controles de uso: no topo era fácil tocar sem querer. */
.chave-na-barra { padding: 10px 12px 2px; border-top: 1px solid var(--fio); }
.chave-na-barra .chave-mestra { width: 100%; justify-content: flex-start; }
/* Consumo total (todas as placas e todas as conversas), acima da chave geral. A barra do topo mostra só o gasto da conversa aberta. */
.consumo-na-barra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0 4px 10px; }
#botao-desligar-placa-do-chat { border-radius: 999px; background: var(--preenchimento); }
.chave-na-barra:not([hidden]) + .rodape-da-barra { border-top: 0; }
.trilho-da-chave { position: relative; width: 32px; height: 19px; border-radius: 999px; background: var(--preenchimento-forte); box-shadow: inset 0 0 0 1px var(--fio); transition: background-color 0.2s var(--curva-de-pintura); }
.trilho-da-chave::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.4s var(--mola-de-controle);
}
.chave-mestra[aria-checked="true"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.chave-mestra[aria-checked="true"] .trilho-da-chave { background: var(--ok); }
.chave-mestra[aria-checked="true"] .trilho-da-chave::after { transform: translateX(13px); }
.chave-mestra.ligando { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 55%, transparent); }
.chave-mestra.ligando .trilho-da-chave { background: var(--alerta); }
.chave-mestra.com-erro { color: var(--falha); border-color: color-mix(in srgb, var(--falha) 55%, transparent); }
.chave-mestra.com-erro .trilho-da-chave { background: var(--falha); }
.chave-mestra:disabled { opacity: 0.6; cursor: progress; }
#detalhe-da-metrica { padding: 6px 16px; font-size: var(--texto-de-legenda); color: var(--rotulo-suave); border-bottom: 1px solid var(--fio); overflow-wrap: anywhere; }
#cabecalho-do-chat { display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 18px; min-height: 52px; }
#cabecalho-do-chat h1 { flex: 1; min-width: 0; font-size: var(--texto); font-weight: 600; letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; cursor: text; line-height: 1.3; }
#botao-abrir-barra { display: none; }
#tokens-do-chat { display: inline-flex; align-items: center; gap: 7px; font-size: var(--texto-menor); color: var(--rotulo-suave); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 5px 4px; cursor: default; }
#tokens-do-chat .trilho-de-tokens { width: 44px; height: 5px; border-radius: 999px; background: var(--preenchimento-forte); overflow: hidden; }
#tokens-do-chat .trilho-de-tokens i { display: block; height: 100%; background: var(--destaque); border-radius: 999px; transition: width 0.4s var(--curva-de-camada); }
#tokens-do-chat.cheio { color: var(--falha); }
#tokens-do-chat.cheio .trilho-de-tokens i { background: var(--falha); }
#configuracao-do-chat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#configuracao-do-chat .icone-da-prioridade { color: var(--destaque); }
#esforco-do-chat { font-size: var(--texto-menor); padding: 6px 28px 6px 10px; color: var(--rotulo-suave); background-color: var(--preenchimento); }
.icone-da-prioridade { display: inline-flex; align-items: center; }

/* ---------- conversa ---------- */
#mensagens {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px; border-radius: var(--raio-do-chassi);
  padding: calc(var(--altura-do-topo) + 18px) max(18px, calc((100% - var(--coluna-da-conversa)) / 2)) calc(var(--altura-da-base) + 20px);
}
.mensagem { position: relative; max-width: 100%; margin-bottom: 20px; border-radius: var(--raio-de-conteudo); }
.mensagem.do-usuario { align-self: flex-end; max-width: min(640px, 88%); padding: 9px 14px; border-bottom-right-radius: 6px; }
.mensagem.do-assistente { align-self: flex-start; padding: 12px 16px; border-bottom-left-radius: 6px; }
.mensagem.do-assistente .texto { line-height: 1.6; }
.mensagem.com-erro { --vidro-aro: color-mix(in srgb, var(--falha) 60%, transparent); }
.mensagem.com-erro .texto { color: var(--falha); }
.mensagem.chegando { animation: mensagem-chegando 0.36s var(--curva-de-camada) backwards; }
.mensagem.do-usuario.chegando { transform-origin: 100% 100%; }
.mensagem.do-assistente.chegando { transform-origin: 0 100%; }
@keyframes mensagem-chegando { from { transform: translate3d(0, 10px, 0) scale3d(0.96, 0.9, 1); } }
.mensagem .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.mensagem .texto code { background: var(--codigo-em-linha); padding: 1px 5px; border-radius: 5px; font-size: 0.88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Resposta formatada: o texto do assistente vira parágrafos, títulos, listas, tabelas e blocos de código. */
.mensagem.do-assistente .texto, .marca-de-compactacao .texto { white-space: normal; }
.texto > :first-child { margin-top: 0; }
.texto > :last-child { margin-bottom: 0; }
.texto p { margin: 0 0 10px; }
.texto h2 { font-size: var(--texto-de-titulo); margin: 18px 0 8px; line-height: 1.3; letter-spacing: -0.01em; }
.texto h3 { font-size: 15.5px; margin: 16px 0 6px; line-height: 1.3; }
.texto h4 { font-size: 14.5px; margin: 14px 0 6px; color: var(--rotulo-suave); }
.texto ul, .texto ol { margin: 0 0 10px; padding-left: 22px; }
.texto li { margin: 3px 0; }
.texto li > ul, .texto li > ol { margin: 3px 0 0; }
.texto blockquote { margin: 0 0 10px; padding: 2px 12px; border-left: 3px solid var(--fio); color: var(--rotulo-suave); }
.texto hr { border: 0; border-top: 1px solid var(--fio); margin: 14px 0; }
.texto a { color: var(--informacao); overflow-wrap: anywhere; text-underline-offset: 2px; }
.texto pre { position: relative; white-space: pre; margin: 0 0 10px; }
.mensagem pre, .passo pre, .marca-de-compactacao pre {
  background: var(--codigo); border: 1px solid var(--fio); border-radius: var(--raio-de-controle); padding: 11px 13px; overflow-x: auto;
  font-size: var(--texto-menor); line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 6px 0;
}
.mensagem .texto pre code, .texto pre code { background: transparent; padding: 0; font-size: inherit; border-radius: 0; }
.texto pre .botao-copiar-codigo {
  position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  background: var(--chapado-de-conteudo); border: 1px solid var(--fio); color: var(--rotulo-suave); border-radius: var(--raio-pequeno); opacity: 0;
  transition: opacity 0.16s var(--curva-de-pintura);
}
.texto pre:hover .botao-copiar-codigo, .texto pre .botao-copiar-codigo:focus-visible { opacity: 1; }
@media (hover: none) { .texto pre .botao-copiar-codigo { opacity: 1; } }
.moldura-da-tabela { overflow-x: auto; margin: 0 0 10px; border: 1px solid var(--fio); border-radius: var(--raio-de-controle); }
.texto table { border-collapse: collapse; font-size: 14px; width: 100%; }
.texto th, .texto td { border-bottom: 1px solid var(--fio); border-right: 1px solid var(--fio); padding: 7px 11px; text-align: left; vertical-align: top; }
.texto tr > :last-child { border-right: 0; }
.texto tbody tr:last-child td { border-bottom: 0; }
.texto th { background: var(--preenchimento); font-weight: 600; }
.grupo-de-passos { align-self: flex-start; font-size: var(--texto-de-legenda); color: var(--rotulo-suave); max-width: 100%; }
.grupo-de-passos > summary, .marca-de-compactacao > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--fio); border-radius: 999px;
  background: var(--preenchimento); transition: background-color 0.16s var(--curva-de-pintura);
}
.grupo-de-passos > summary:hover, .marca-de-compactacao > summary:hover { background: var(--preenchimento-forte); }
.grupo-de-passos > summary::-webkit-details-marker, .marca-de-compactacao > summary::-webkit-details-marker, .passo summary::-webkit-details-marker { display: none; }
.grupo-de-passos[open] > summary { margin-bottom: 6px; }
.passo { border-left: 2px solid var(--fio); padding: 2px 0 2px 10px; margin-left: 12px; }
.passo summary { cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.passo summary b { color: var(--rotulo); font-weight: 600; }
.passo pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }
.marca-de-compactacao { align-self: center; max-width: 100%; font-size: var(--texto-de-legenda); color: var(--rotulo-suave); }
.marca-de-compactacao > summary { border-style: dashed; }
.marca-de-compactacao > div {
  white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 8px; padding: 11px 13px; border: 1px solid var(--fio); border-radius: var(--raio-de-controle);
  background: var(--preenchimento); color: var(--rotulo); font-size: 13.5px; max-height: 360px; overflow-y: auto;
}
.arquivos { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.arquivos video { max-width: 100%; max-height: 62vh; border-radius: var(--raio-de-controle); background: #000; display: block; }
.arquivos img { max-width: 100%; max-height: 62vh; border-radius: var(--raio-de-controle); border: 1px solid var(--fio); display: block; }
.ficha-de-arquivo {
  display: inline-flex; align-items: center; gap: 10px; background: var(--preenchimento); border: 1px solid var(--fio); border-radius: var(--raio-de-controle);
  padding: 7px 11px; font-size: var(--texto-menor); text-decoration: none; color: var(--rotulo); width: fit-content; max-width: 100%;
  transition: border-color 0.16s var(--curva-de-pintura), background-color 0.16s var(--curva-de-pintura);
}
.ficha-de-arquivo:hover { border-color: var(--borda-ativa); background: var(--preenchimento-forte); }
.ficha-de-arquivo .nome { overflow-wrap: anywhere; }
.ficha-de-arquivo .tamanho { color: var(--rotulo-fraco); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ficha-de-arquivo .acao { display: inline-flex; align-items: center; color: var(--destaque); white-space: nowrap; }
/* Hora, marcas de estado e copiar ficam logo abaixo da bolha, fora dela: a bolha não carrega uma linha vazia. */
.rodape-da-mensagem {
  position: absolute; z-index: 1; top: 100%; left: 6px; display: flex; align-items: center; gap: 8px; margin-top: 1px; min-height: 20px; white-space: nowrap;
  font-size: var(--texto-micro); color: var(--rotulo-fraco); opacity: 0; transition: opacity 0.16s var(--curva-de-pintura);
}
.mensagem.do-usuario .rodape-da-mensagem { left: auto; right: 6px; }
.mensagem:hover .rodape-da-mensagem, .mensagem:focus-within .rodape-da-mensagem, .rodape-da-mensagem:has(.marca-de-estado) { opacity: 1; }
@media (hover: none) { .rodape-da-mensagem { opacity: 1; } }
.rodape-da-mensagem time { font-variant-numeric: tabular-nums; }
.rodape-da-mensagem .marca-de-estado { color: var(--alerta); }
.rodape-da-mensagem .marca-de-autor { color: var(--destaque); }
/* Selo com o nome do dono, nas conversas de outro usuário (lista e cabeçalho). */
.dono-da-conversa {
  display: inline-flex; align-items: center; flex: none; padding: 1px 8px; border-radius: 999px; font-size: var(--texto-micro); font-weight: 600; line-height: 1.5;
  color: var(--destaque); background: color-mix(in srgb, var(--acao) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acao) 45%, transparent); white-space: nowrap;
}
.item-de-chat .quando .dono-da-conversa { margin-right: 6px; }
#dono-do-chat { font-size: var(--texto-de-legenda); padding: 2px 10px; }
.botao-copiar { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--rotulo-suave); padding: 2px 6px; border-radius: 6px; }
.botao-copiar:hover { background: var(--preenchimento-forte); color: var(--rotulo); }

/* Botão de voltar ao fim: fica acima de tudo que está na base (linha de atividade, fila e campo), qualquer que seja a altura. */
#botao-ir-para-o-fim {
  position: absolute; z-index: 5; right: max(18px, calc((100% - var(--coluna-da-conversa)) / 2)); bottom: calc(var(--altura-da-base) + 12px);
  width: 40px; height: 40px; border-radius: 999px; color: var(--rotulo); animation: botao-surgindo 0.36s var(--mola-de-controle) backwards;
}
@keyframes botao-surgindo { from { transform: scale3d(0.5, 0.5, 1); } }
@media (pointer: coarse) { #botao-ir-para-o-fim { width: 44px; height: 44px; } }

/* ---------- base: linha de atividade e campo ---------- */
#doca-de-baixo {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 max(12px, calc((100% - var(--coluna-da-conversa) - 40px) / 2)); pointer-events: none;
}
#doca-de-baixo > * { pointer-events: auto; width: 100%; }
#linha-de-atividade {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 22px; font-size: var(--texto-menor); color: var(--rotulo-suave);
  animation: capsula-surgindo 0.4s var(--curva-de-camada) backwards; transform-origin: 50% 100%;
}
@keyframes capsula-surgindo { from { transform: translate3d(0, 10px, 0) scale3d(0.9, 0.7, 1); } }
#texto-da-atividade { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.trilho-de-progresso { flex: 0 1 96px; min-width: 32px; height: 4px; background: var(--preenchimento-forte); border-radius: 999px; overflow: hidden; }
#barra-de-progresso { height: 100%; width: 0; background: var(--acao); border-radius: 999px; transition: width 0.3s var(--curva-de-pintura); }
#barra-de-progresso.indefinida { width: 34%; animation: vai-e-volta 1.3s ease-in-out infinite alternate; }
@keyframes vai-e-volta { from { transform: translateX(-10%); } to { transform: translateX(205%); } }
#percentual-da-atividade { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
#percentual-da-atividade:empty { display: none; }
#botao-parar { flex: none; border-radius: 999px; }
#compositor { border-radius: var(--raio-do-chassi); padding: 8px; }
.linha-do-compositor { display: flex; align-items: flex-end; gap: 6px; }
.linha-do-compositor .botao-icone { width: 40px; height: 40px; border-radius: 999px; }
@media (pointer: coarse) { .linha-do-compositor .botao-icone { width: 44px; height: 44px; } }
#campo-de-mensagem {
  flex: 1; min-width: 0; resize: none; background: transparent; border: 0; border-radius: var(--raio-de-conteudo); padding: 9px 8px; max-height: 180px; outline: none;
  line-height: 1.45;
}
#campo-de-mensagem::placeholder { color: var(--rotulo-fraco); }
#anexos-pendentes { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 4px 8px; }
#anexos-pendentes:empty { display: none; }
.anexo-pendente {
  display: inline-flex; align-items: center; gap: 8px; background: var(--preenchimento); border: 1px solid var(--fio); border-radius: 999px;
  padding: 4px 6px 4px 12px; font-size: var(--texto-de-legenda); max-width: 100%; animation: mensagem-chegando 0.3s var(--curva-de-camada) backwards;
}
.anexo-pendente .nome { overflow-wrap: anywhere; }
.anexo-pendente .andamento { color: var(--rotulo-fraco); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anexo-pendente.com-erro { border-color: var(--falha); color: var(--falha); }
.anexo-pendente button { background: transparent; border: 0; color: var(--rotulo-fraco); padding: 0 4px; min-width: 24px; min-height: 24px; border-radius: 999px; }
/* Fila de pedidos enviados enquanto o modelo trabalha. O texto aparece inteiro; a lista rola se ficar alta. */
#fila-de-pedidos { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; max-height: calc(var(--altura-visivel, 100dvh) * 0.24); overflow-y: auto; }
#fila-de-pedidos:empty { display: none; }
.pedido-na-fila {
  display: flex; align-items: flex-start; gap: 6px; padding: 4px 4px 4px 12px; border: 1px dashed var(--fio); border-radius: var(--raio-de-conteudo);
  background: var(--preenchimento); animation: mensagem-chegando 0.3s var(--curva-de-camada) backwards;
  transition: border-color 0.2s var(--curva-de-pintura);
}
.pedido-na-fila.entregando { border-style: solid; border-color: var(--acao); }
.pedido-na-fila .marca-da-fila { display: inline-flex; color: var(--rotulo-suave); padding-top: calc((var(--alvo) - 15px) / 2); }
.pedido-na-fila.entregando .marca-da-fila { color: var(--destaque); }
.texto-do-pedido-na-fila { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; padding: calc((var(--alvo) - 20px) / 2) 0; }
.anexo-do-pedido-na-fila { display: inline-block; margin: 0 6px 0 0; padding: 1px 8px; border: 1px solid var(--fio); border-radius: 999px; font-size: var(--texto-de-legenda); color: var(--rotulo-suave); }
#alvo-de-soltar {
  position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600;
  background: color-mix(in srgb, var(--chapado-da-pagina) 80%, transparent); border: 2px dashed var(--acao); border-radius: var(--raio-do-chassi);
}

/* ---------- entrada coreografada do chassi (só geometria) ---------- */
@media (min-width: 801px) {
  #barra-lateral { animation: entrada-da-barra-lateral 0.52s var(--mola-de-controle) backwards; transform-origin: 0 50%; }
}
#painel-do-topo { animation: entrada-do-topo 0.46s var(--mola-de-controle) 0.06s backwards; transform-origin: 50% 0; }
#compositor { animation: entrada-do-campo 0.5s var(--mola-de-controle) 0.1s backwards; transform-origin: 50% 100%; }
@keyframes entrada-da-barra-lateral { from { transform: translate3d(-14px, 0, 0) scale3d(0.86, 0.96, 1); } }
@keyframes entrada-do-topo { from { transform: scale3d(0.72, 0.86, 1); } }
@keyframes entrada-do-campo { from { transform: translate3d(0, 14px, 0) scale3d(0.84, 0.72, 1); } }

/* ---------- diálogos e folhas ---------- */
dialog { border: 0; padding: 0; background: transparent; color: var(--rotulo); border-radius: var(--raio-do-chassi); overflow: visible; max-width: none; max-height: none; }
dialog::backdrop { background: var(--veu); }
dialog[open] { display: flex; flex-direction: column; animation: dialogo-abrindo 0.24s var(--curva-de-camada) backwards; }
dialog[open]::backdrop { animation: veu-surgindo 0.24s var(--curva-de-pintura) backwards; }
dialog.fechando { animation: dialogo-fechando 0.16s var(--curva-de-pintura) forwards; pointer-events: none; }
dialog.fechando::backdrop { animation: veu-sumindo 0.16s var(--curva-de-pintura) forwards; }
@keyframes dialogo-abrindo { from { transform: scale3d(0.94, 0.94, 1); } }
@keyframes dialogo-fechando { to { transform: scale3d(0.9, 0.9, 1); } }
@keyframes veu-surgindo { from { opacity: 0; } }
@keyframes veu-sumindo { to { opacity: 0; } }
dialog h2 { font-size: var(--texto-de-titulo); font-weight: 650; letter-spacing: -0.015em; margin: 0; outline: none; }
.botoes-do-dialogo { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.botoes-do-dialogo .botao-icone { width: 40px; height: 40px; border-radius: 999px; background: var(--preenchimento); }
@media (pointer: coarse) { .botoes-do-dialogo .botao-icone { width: 44px; height: 44px; } }

dialog#confirmacao-da-gpu, dialog#dialogo-de-texto { width: min(400px, calc(100vw - 32px)); padding: 22px; gap: 10px; }
dialog#confirmacao-da-gpu p { margin: 0 0 6px; color: var(--rotulo-suave); font-size: 14px; }
dialog#confirmacao-da-gpu select { width: 100%; margin: 0 0 6px; }
dialog#dialogo-de-texto input { width: 100%; background: var(--preenchimento-de-campo); border: 1px solid var(--fio); border-radius: var(--raio-de-controle); padding: 10px 12px; font-size: 16px; outline: none; margin: 4px 0 6px; }

/* Conversa nova e modelo da conversa: tamanho fixo. A lista de placas reserva sempre as mesmas linhas, nas duas prioridades,
   e a linha de avisos tem altura fixa: nada pula quando a escolha muda. */
dialog#dialogo-da-conversa { width: min(460px, calc(100vw - 32px)); max-height: calc(var(--altura-visivel, 100dvh) - 24px); padding: 22px 22px 18px; gap: 14px; }
.corpo-do-dialogo { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin: 0 -6px; padding: 0 6px; }
.campos-da-conversa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campos-da-conversa label, .grade-de-campos label { display: flex; flex-direction: column; gap: 5px; font-size: var(--texto-de-legenda); color: var(--rotulo-suave); min-width: 0; }
.campos-da-conversa .campo-largo { grid-column: 1 / -1; }
.campos-da-conversa select { width: 100%; }
.rotulo-do-campo { font-size: var(--texto-de-legenda); color: var(--rotulo-suave); margin: 0 0 -6px; }
.escolha-de-prioridade { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--preenchimento-de-campo); border: 1px solid var(--fio); }
.escolha-de-prioridade button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px 10px; border-radius: var(--raio-de-controle);
  border: 0; background: transparent; color: var(--rotulo-suave); font-size: 14px;
  transition: background-color 0.2s var(--curva-de-pintura), color 0.2s var(--curva-de-pintura), transform 0.34s var(--mola-de-controle);
}
.escolha-de-prioridade button:active { transform: scale(0.96); }
.escolha-de-prioridade button[aria-checked="true"] { color: var(--rotulo); background: var(--preenchimento-forte); font-weight: 600; box-shadow: inset 0 0 0 1px var(--fio), 0 1px 3px rgba(0, 0, 0, 0.18); }
.escolha-de-prioridade button[aria-checked="true"] .icone-da-prioridade { color: var(--destaque); }
.colunas-das-placas, .placa-da-conversa { display: grid; grid-template-columns: 20px minmax(0, 1fr) 58px 62px 58px; column-gap: 8px; align-items: center; }
.colunas-das-placas { padding: 0 12px; margin: 0 0 -6px; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rotulo-fraco); }
.colunas-das-placas span:nth-child(n+3), .placa-da-conversa .medida { text-align: right; }
#conversa-placas { display: flex; flex-direction: column; gap: 6px; height: 226px; flex: none; overflow-y: auto; transition: opacity 0.16s var(--curva-de-pintura); }
#conversa-placas[aria-busy="true"] { opacity: 0.6; }
/* Tabela de placas recolhida: fica só a placa escolhida, com o preço por hora. O botão ao lado de "Placa" (ou um toque na linha) abre a tabela. */
.rotulo-do-campo.com-acao { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 -10px; }
.botao-de-expandir {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; padding: 0; border: 0; border-radius: var(--raio-pequeno);
  background: transparent; color: var(--rotulo-suave);
}
.botao-de-expandir:hover { background: var(--preenchimento-forte); }
.botao-de-expandir svg { transition: transform 0.3s var(--curva-de-camada); }
.botao-de-expandir[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (pointer: coarse) { .botao-de-expandir { width: 44px; height: 36px; } }
dialog.placas-recolhidas .colunas-das-placas, dialog.placas-recolhidas .placa-da-conversa[aria-checked="false"],
dialog.placas-recolhidas .placa-da-conversa .medida.de-velocidade, dialog.placas-recolhidas .placa-da-conversa .medida small { display: none; }
dialog.placas-recolhidas #conversa-placas { height: auto; min-height: 54px; overflow: visible; }
dialog.placas-recolhidas .placa-da-conversa { grid-template-columns: 20px minmax(0, 1fr) auto; }
dialog.placas-recolhidas .placa-da-conversa .medida.de-preco b::before { content: "US$ "; }
dialog.placas-recolhidas .placa-da-conversa .medida.de-preco b::after { content: "/h"; }
.placa-da-conversa {
  height: 52px; flex: none; padding: 0 12px; text-align: left; border-radius: 14px; border: 1px solid var(--fio); background: var(--preenchimento); color: var(--rotulo);
  transition: border-color 0.2s var(--curva-de-pintura), background-color 0.2s var(--curva-de-pintura), transform 0.34s var(--mola-de-controle);
}
.placa-da-conversa:active:not(:disabled) { transform: scale(0.985); }
.placa-da-conversa:hover:not(:disabled) { background: var(--preenchimento-forte); }
.placa-da-conversa[aria-checked="true"] { border-color: var(--acao); background: color-mix(in srgb, var(--acao) 13%, transparent); }
.placa-da-conversa:disabled { opacity: 0.5; }
.placa-da-conversa .icone-da-prioridade { color: var(--rotulo-fraco); }
.placa-da-conversa[aria-checked="true"] .icone-da-prioridade { color: var(--destaque); }
.placa-da-conversa .nome-e-estado, .placa-da-conversa .medida { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.placa-da-conversa b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.placa-da-conversa small { font-size: var(--texto-micro); color: var(--rotulo-fraco); font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 14px; }
.placa-da-conversa .medida small { color: var(--destaque); }
.placa-da-conversa small.falha { color: var(--falha); }
.placa-da-conversa small.ligada { color: var(--ok); }
.placa-da-conversa small.fixada { color: var(--destaque); }
#conversa-dimensionamento { display: flex; flex-wrap: wrap; align-content: center; gap: 0 10px; height: 36px; flex: none; font-size: var(--texto-de-legenda); line-height: 1.4; color: var(--rotulo-suave); overflow: hidden; }
#conversa-dimensionamento .alerta { color: var(--alerta); }
#conversa-dimensionamento .falha { color: var(--falha); }
#conversa-dimensionamento .ligada { color: var(--ok); }
#conversa-dimensionamento b { color: var(--rotulo); font-weight: 600; }

dialog#painel-de-placas { width: min(680px, calc(100vw - 24px)); max-height: min(80dvh, 720px); }
.topo-das-placas { display: flex; align-items: center; gap: 12px; padding: 16px 14px 12px 22px; border-bottom: 1px solid var(--fio); }
.topo-das-placas h2 { flex: 1; }
.topo-das-placas .preco { font-weight: 600; }
#aviso-das-placas { padding: 8px 22px 0; }
#aviso-das-placas:empty { display: none; }
#lista-de-placas-ligadas { overflow-y: auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
#lista-de-placas-ligadas .vazio { padding: 18px 6px; font-size: 14px; }
.placa-ligada { border: 1px solid var(--fio); border-radius: var(--raio-de-conteudo); padding: 12px 14px; background: var(--preenchimento); }
.placa-ligada .linha-da-placa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.placa-ligada .nome-da-placa-ligada { font-weight: 600; font-size: 15px; }
.placa-ligada .situacao-da-placa { font-size: var(--texto-de-legenda); padding: 1px 9px; border-radius: 999px; border: 1px solid var(--fio); color: var(--rotulo-suave); }
.placa-ligada .situacao-da-placa.pronta { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.placa-ligada .preco { margin-left: auto; font-weight: 600; }
.placa-ligada .dados-da-placa { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-size: var(--texto-menor); color: var(--rotulo-suave); font-variant-numeric: tabular-nums; }
.placa-ligada .conversas-da-placa { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--fio); display: flex; flex-direction: column; gap: 2px; }
.placa-ligada .conversas-da-placa li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.placa-ligada .conversas-da-placa button { flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; color: var(--rotulo); padding: 6px 8px; border-radius: var(--raio-pequeno); overflow-wrap: anywhere; }
.placa-ligada .conversas-da-placa button:hover { background: var(--preenchimento-forte); }
.placa-ligada .conversas-da-placa .de-outro-usuario { flex: 1; padding: 6px 8px; color: var(--rotulo-suave); }
.placa-ligada .conversas-da-placa .estado-da-conversa { font-size: var(--texto-de-legenda); color: var(--rotulo-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.placa-ligada .conversas-da-placa .estado-da-conversa.trabalhando { color: var(--destaque); }
.placa-ligada .sem-conversa { margin-top: 8px; font-size: var(--texto-menor); color: var(--rotulo-suave); }
.placa-ligada .rodape-da-placa { display: flex; justify-content: flex-end; margin-top: 6px; }

dialog#painel-de-ajustes { width: min(940px, calc(100vw - 24px)); height: min(720px, calc(var(--altura-visivel, 100dvh) - 24px)); }
.topo-dos-ajustes { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--fio); }
.abas { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--preenchimento-de-campo); border: 1px solid var(--fio); }
.aba {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 34px; background: transparent; border: 0; border-radius: var(--raio-de-controle);
  color: var(--rotulo-suave); transition: background-color 0.2s var(--curva-de-pintura), color 0.2s var(--curva-de-pintura), transform 0.34s var(--mola-de-controle);
}
.aba:active { transform: scale(0.94); }
.aba.ativa { color: var(--destaque); background: var(--preenchimento-forte); box-shadow: inset 0 0 0 1px var(--fio), 0 1px 3px rgba(0, 0, 0, 0.18); }
.conteudo-da-aba { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 18px 18px; gap: 12px; }
.grade-de-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; align-content: start; flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px 2px; }
.grade-de-campos .campo-largo { grid-column: 1 / -1; }
.grade-de-campos input, .grade-de-campos select, .conteudo-da-aba textarea {
  background-color: var(--preenchimento-de-campo); border: 1px solid var(--fio); border-radius: var(--raio-de-controle); padding: 9px 11px; font-size: 16px; outline: none;
  transition: border-color 0.16s var(--curva-de-pintura);
}
.grade-de-campos select { padding-right: 30px; }
.conteudo-da-aba textarea { flex: 1; min-height: 0; resize: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--texto-menor); line-height: 1.5; }
.duas-colunas { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr; gap: 12px; }
#lista-de-skills { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
#lista-de-skills button { text-align: left; background: transparent; border: 0; border-radius: var(--raio-de-controle); padding: 8px 10px; color: var(--rotulo); font-size: 13.5px; overflow-wrap: anywhere; }
#lista-de-skills button:hover { background: var(--preenchimento); }
#lista-de-skills button.atual { background: var(--preenchimento-forte); box-shadow: inset 0 0 0 1px var(--fio); }
.rodape-dos-ajustes { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.rodape-dos-ajustes .botao-principal { margin-left: auto; }
.bloco-de-placas { display: flex; flex-direction: column; gap: 6px; }
.rotulo-do-bloco { font-size: var(--texto-de-legenda); color: var(--rotulo-suave); }
#lista-de-placas { display: flex; flex-direction: column; border: 1px solid var(--fio); border-radius: 14px; overflow: hidden; background: var(--preenchimento); }
.linha-de-placa { display: grid; grid-template-columns: auto 1fr auto auto auto auto; align-items: center; gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--fio); font-size: 13.5px; }
.linha-de-placa:last-child { border-bottom: 0; }
.linha-de-placa.desmarcada { color: var(--rotulo-fraco); }
.linha-de-placa input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--acao); }
.linha-de-placa .nome-da-placa { font-weight: 600; overflow-wrap: anywhere; }
.linha-de-placa .dado-da-placa { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rotulo-suave); }
.linha-de-placa .estoque.sem { color: var(--falha); }
.linha-de-placa .estoque.com { color: var(--ok); }
.linha-de-placa .mover { display: inline-flex; gap: 2px; }
.linha-de-placa .mover button { width: 30px; height: 28px; border: 1px solid var(--fio); background: var(--preenchimento); color: var(--rotulo); border-radius: 7px; font-size: 12px; }
.linha-de-placa .mover button:disabled { opacity: 0.3; }
@media (pointer: coarse) { .linha-de-placa .mover button { width: 40px; height: 40px; } }

/* ---------- login: Ultron ---------- */
/* Sempre escura, em grafite e vermelho. O que se move é só o brilho dos olhos, fora da lente. */
body.pagina-de-login {
  color-scheme: dark;
  --malha-vertical: rgba(255, 96, 96, 0.075); --malha-horizontal: rgba(255, 96, 96, 0.05);
  --fio: rgba(196, 204, 218, 0.22); --borda-ativa: rgba(255, 92, 92, 0.8);
  --preenchimento-de-campo: rgba(0, 0, 0, 0.44); --falha: #ff9288;
  --funcional-tinta: rgba(22, 25, 32, 0.50); --funcional-aro: rgba(255, 128, 128, 0.42); --funcional-aro-suave: rgba(255, 128, 128, 0.10);
  --vermelho-do-ultron: #e11d2e;
  display: flex; align-items: center; justify-content: center; height: 100dvh; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  background:
    radial-gradient(54% 40% at 50% 46%, rgba(225, 29, 46, 0.22), transparent 72%),
    radial-gradient(120% 60% at 50% 118%, rgba(225, 29, 46, 0.20), transparent 62%),
    linear-gradient(180deg, #050608, #0c0e13);
  background-color: #050608;
}
body.pagina-de-login::before {
  -webkit-mask-image: radial-gradient(78% 70% at 50% 46%, #000 0%, transparent 78%);
  mask-image: radial-gradient(78% 70% at 50% 46%, #000 0%, transparent 78%);
}
/* Colmeia de fundo, bem fraca, só no centro. */
body.pagina-de-login::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16.2v32.3L28 64.7 0 48.5V16.2zM28 64.7v32.3M0 48.5v0M56 48.5v0' fill='none' stroke='%23ff5a5a' stroke-opacity='0.16' stroke-width='1'/%3E%3C/svg%3E") center / 56px 97px;
  -webkit-mask-image: radial-gradient(60% 56% at 50% 46%, #000 0%, transparent 74%);
  mask-image: radial-gradient(60% 56% at 50% 46%, #000 0%, transparent 74%);
}
.cartao-de-login {
  z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(360px, calc(100vw - 32px));
  border-radius: var(--raio-do-chassi); padding: 28px 26px 12px;
  animation: entrada-do-topo 0.5s var(--mola-de-controle) backwards;
}
.emblema-do-ultron { position: relative; align-self: center; width: 104px; height: 104px; filter: drop-shadow(0 10px 24px rgba(225, 29, 46, 0.36)); }
.emblema-do-ultron svg { display: block; width: 104px; height: 104px; }
.emblema-do-ultron::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: 42%; height: 26%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 70, 70, 0.95), rgba(255, 40, 40, 0.35) 55%, transparent);
  mix-blend-mode: screen; filter: blur(5px); animation: pulso-dos-olhos-do-ultron 3.4s ease-in-out infinite;
}
@keyframes pulso-dos-olhos-do-ultron { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.95; } }
.cartao-de-login .marca {
  align-self: center; font-size: 27px; font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.2em; margin-right: -0.2em; white-space: nowrap;
  background: linear-gradient(180deg, #f6f8fa 0%, #b3bcc8 46%, #707b8b 54%, #d3d9e1 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.filete-do-ultron {
  align-self: center; width: 62%; height: 1px; margin: 2px 0 10px;
  background: linear-gradient(90deg, transparent, var(--vermelho-do-ultron), transparent); box-shadow: 0 0 12px rgba(225, 29, 46, 0.85);
}
.cartao-de-login input[type=password], .cartao-de-login input[type=text] {
  background: var(--preenchimento-de-campo); border: 1px solid var(--fio); border-radius: var(--raio-de-controle); padding: 11px 12px; font-size: 16px; outline: none;
  color: var(--rotulo); transition: border-color 0.16s var(--curva-de-pintura), box-shadow 0.16s var(--curva-de-pintura);
}
.cartao-de-login input:focus { border-color: var(--vermelho-do-ultron); box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.24); }
.cartao-de-login .botao-principal {
  align-self: stretch; min-height: 44px; margin-top: 4px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #e8343f, #ae111c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 6px 22px rgba(225, 29, 46, 0.38);
}
.cartao-de-login .erro { text-align: center; }

/* ---------- janela estreita do computador e celular ---------- */
/* Até 1100 px o cabeçalho da conversa vira duas linhas: menu, título inteiro e ações em cima; modelo e tokens embaixo.
   O esforço sai do cabeçalho: ele é escolhido no diálogo que o botão do modelo abre. */
@media (max-width: 1100px) {
  #cabecalho-do-chat { flex-wrap: wrap; gap: 4px 6px; padding-left: 12px; }
  #cabecalho-do-chat h1 { order: 1; flex: 1 1 0; min-width: 140px; }
  #dono-do-chat { order: 1; }
  #botao-abrir-barra { order: 0; }
  #botao-arquivar-chat { order: 2; }
  #botao-apagar-chat { order: 3; }
  #cabecalho-do-chat::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  #configuracao-do-chat { order: 4; }
  #tokens-do-chat { order: 5; }
  #esforco-do-chat { display: none; }
}
@media (max-width: 800px) {
  :root { --recuo-do-chassi: 8px; --raio-do-chassi: 22px; }
  #aplicacao { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  #barra-lateral {
    position: fixed; z-index: 10; top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left));
    width: min(310px, 86vw); transform: translate3d(calc(-100% - 24px), 0, 0); transition: transform 0.42s var(--curva-de-camada);
    --vidro-tinta: var(--transitorio-tinta); --vidro-desfoque: var(--transitorio-desfoque);
  }
  #aplicacao.barra-aberta #barra-lateral { transform: none; }
  #aplicacao::after { content: ""; position: fixed; inset: 0; z-index: 9; background: var(--veu); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--curva-de-pintura); }
  #aplicacao.barra-aberta::after { opacity: 1; }
  #botao-abrir-barra { display: inline-flex; }
  #painel-do-topo { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); }
  /* A barra de custos vira duas linhas, sem valor escondido em rolagem lateral: em cima a chave, a placa e o modelo; embaixo os custos. */
  #barra-do-topo { gap: 6px 14px; padding: 9px 12px; }
  #barra-do-topo .metricas { gap: 4px 14px; }
  #barra-do-topo .metricas.custos { margin-left: auto; }
  #metrica-vram, #metrica-por-dia { display: none; }
  #cabecalho-do-chat { padding: 6px 6px 6px 6px; }
  #mensagens { border-radius: 0; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .mensagem.do-usuario { max-width: 92%; }
  .mensagem.do-assistente { padding: 11px 13px; }
  .arquivos video { max-height: 70vh; width: 100%; }
  #doca-de-baixo { padding: 0 max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  #botao-ir-para-o-fim { right: max(14px, env(safe-area-inset-right)); }
  #alvo-de-soltar { border-radius: 0; }
  /* Diálogos de escolha viram folha de baixo; os que têm campo de texto ficam presos ao topo, acima do teclado. */
  dialog#dialogo-da-conversa, dialog#confirmacao-da-gpu { margin: auto 0 0; width: 100%; border-radius: 26px 26px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  dialog#dialogo-da-conversa[open], dialog#confirmacao-da-gpu[open], dialog#painel-de-ajustes[open], dialog#painel-de-placas[open] { animation: folha-subindo 0.42s var(--curva-de-camada) backwards; }
  dialog#dialogo-da-conversa.fechando, dialog#confirmacao-da-gpu.fechando, dialog#painel-de-ajustes.fechando, dialog#painel-de-placas.fechando { animation: folha-descendo 0.28s var(--curva-de-pintura) forwards; }
  dialog#dialogo-da-conversa { max-height: calc(var(--altura-visivel, 100dvh) - max(12px, env(safe-area-inset-top))); }
  dialog#painel-de-ajustes, dialog#painel-de-placas {
    margin: max(8px, env(safe-area-inset-top)) 0 0; width: 100%; height: calc(var(--altura-visivel, 100dvh) - max(8px, env(safe-area-inset-top))); max-height: none;
    border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom);
  }
  dialog#dialogo-de-texto { margin: max(16px, calc(env(safe-area-inset-top) + 8px)) auto auto; }
  .duas-colunas { grid-template-columns: 1fr; grid-template-rows: 130px 1fr; }
  .conteudo-da-aba textarea { font-size: 16px; }
  .conteudo-da-aba { padding: 14px 14px 14px; }
  .grade-de-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .grade-de-campos input, .grade-de-campos select { min-width: 0; width: 100%; }
  .linha-de-placa { grid-template-columns: auto 1fr auto auto; }
  .linha-de-placa .dado-da-placa.vram { display: none; }
  .linha-de-placa .estoque { grid-column: 2; }
  .colunas-das-placas, .placa-da-conversa { grid-template-columns: 18px minmax(0, 1fr) 48px 54px 50px; column-gap: 6px; }
}
@keyframes folha-subindo { from { transform: translate3d(0, 100%, 0); } }
@keyframes folha-descendo { to { transform: translate3d(0, 100%, 0); } }
/* Dedo: controles com pelo menos 40 px. */
@media (pointer: coarse) {
  .botao-texto { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  .item-de-chat { padding: 12px 12px; }
  .ficha-de-arquivo { padding: 10px 12px; }
  .anexo-pendente button { min-width: 40px; min-height: 40px; font-size: 18px; }
  .botao-copiar { min-height: 40px; min-width: 40px; }
  .texto pre .botao-copiar-codigo { width: 40px; height: 40px; }
  .rodape-da-mensagem { min-height: 40px; margin-top: -8px; }
  .mensagem { margin-bottom: 26px; }
  .aba { min-height: 42px; min-width: 56px; }
  .escolha-de-prioridade button { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
  #barra-de-progresso.indefinida { animation: none; width: 100%; opacity: 0.5; }
}