/* ============================================================================
   YUKIO — identidade visual Guaptel (a mesma do portal/hub Engenheiro ISP)
   Paleta oficial: #F5801F (marca) · #CCCCCC · #4D4D4D
   Tema escuro fixo, como o portal. Texto sobre laranja é SEMPRE escuro
   (branco sobre #F5801F dá 2,63:1 e reprova WCAG).
   ==========================================================================*/
:root{
  /* marca */
  --brand:#F5801F; --brand-lt:#FF9A45; --brand-dk:#DC6E12;
  --g-lt:#CCCCCC; --g-dk:#4D4D4D;
  --sobre-marca:#231202;              /* texto/ícone quando o fundo é laranja */
  /* superfícies */
  --bg:#17181b; --panel:#212327; --side:#1b1c1f; --field:#131417;
  --fg:#eceef0; --muted:#8b9198; --line:rgba(255,255,255,.09);
  --ok:#3fb950; --no:#e5675f; --aviso-cor:#d29922;
  --raio:10px; --app-h:100dvh;

  /* apelidos herdados: o CSS antigo referencia estes nomes */
  --fundo:var(--bg); --superficie:var(--panel); --superficie2:var(--field);
  --borda:var(--line); --texto:var(--fg); --texto2:var(--muted);
  --acento:var(--brand); --erro:var(--no); --aviso:var(--aviso-cor);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:15px/1.55 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;overflow:hidden}
button{cursor:pointer;font-family:inherit;font-weight:600;border:none}
.oculto{display:none !important}
.sutil{color:var(--muted);font-size:13px}
.erro{color:var(--no)}
.obrig{color:var(--no)}

/* ===================== AUTENTICAÇÃO (padrão do portal) ===================== */
.tela-login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:22px;overflow:auto;
  background:
    radial-gradient(860px 460px at 50% -6%, rgba(245,128,31,.15), transparent 60%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.02) 0 1px, transparent 1px 26px),
    #111214}
.cartao-login{position:relative;width:100%;max-width:412px;text-align:center;
  padding:36px 34px 22px;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#1e2024,#161719);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 32px 72px -26px rgba(0,0,0,.75), 0 0 0 1px rgba(245,128,31,.05) inset;
  animation:lgsobe .5s cubic-bezier(.2,.7,.3,1) both;
  display:flex;flex-direction:column;gap:0}
@keyframes lgsobe{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* fibra acesa no centro, apagando para as bordas */
.cartao-login::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(245,128,31,.30) 22%,var(--brand) 50%,
    rgba(245,128,31,.30) 78%,transparent)}
.cartao-login::after{content:"";position:absolute;top:0;left:-26%;width:26%;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand-lt),transparent);
  animation:lgpulso 5.5s ease-in-out infinite}
@keyframes lgpulso{0%{left:-26%;opacity:0}12%{opacity:1}60%{opacity:1}72%,100%{left:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){.cartao-login,.cartao-login::after{animation:none}}

.cartao-login .logo{height:40px;width:auto;max-width:64%;display:block;margin:0 auto 12px;
  object-fit:contain}
.cartao-login .eyebrow{color:var(--g-lt);font-size:10.5px;font-weight:700;letter-spacing:2.6px;
  text-transform:uppercase;margin-bottom:28px}
.cartao-login .eyebrow b{color:var(--brand)}
.campo-login{text-align:left;margin-bottom:15px}
.campo-login label{display:block;font-size:10px;font-weight:700;color:rgba(204,204,204,.72);
  letter-spacing:1.5px;text-transform:uppercase;margin:0 0 7px 1px}
.caixa-entrada{display:flex;align-items:center;gap:10px;background:var(--field);
  border:1px solid rgba(204,204,204,.14);border-radius:12px;padding:0 13px;
  transition:border-color .15s, box-shadow .15s}
.caixa-entrada:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(245,128,31,.18)}
.caixa-entrada svg{flex:0 0 auto;color:rgba(204,204,204,.42);transition:color .15s}
.caixa-entrada:focus-within svg{color:var(--brand)}
.caixa-entrada input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  padding:14px 0;font-size:15px;color:#fff;width:auto}
.caixa-entrada input::placeholder{color:rgba(204,204,204,.34)}
.caixa-entrada input:-webkit-autofill,.caixa-entrada input:-webkit-autofill:hover,
.caixa-entrada input:-webkit-autofill:focus{-webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px var(--field) inset;caret-color:#fff;
  transition:background-color 9999s ease-out 0s}
.olho{background:none;border:none;padding:5px;margin-right:-3px;border-radius:7px;
  color:rgba(204,204,204,.42);cursor:pointer;display:flex}
.olho:hover{color:var(--g-lt)}
.olho:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.cartao-login .botao.primario{width:100%;margin-top:4px;padding:14px;border-radius:12px;
  font-size:15px;letter-spacing:.3px}
.cartao-login .erro{margin-top:15px;padding:11px 12px;border-radius:10px;font-size:12.5px;
  text-align:left;line-height:1.45;background:rgba(229,103,95,.12);
  border:1px solid rgba(229,103,95,.34);color:#F0A9A3}
.rodape-login{margin-top:26px;padding-top:15px;border-top:1px solid var(--g-dk);
  color:rgba(204,204,204,.52);font-size:11.5px;line-height:1.85}
.rodape-login b{color:var(--brand)}
.rodape-login .selo-app{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:10px;
  color:var(--g-dk);margin-top:1px}

/* ============================ APLICAÇÃO (3 colunas) ======================= */
.aplicacao{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;
  grid-template-rows:minmax(0,1fr);height:100vh;height:var(--app-h)}
.aplicacao.sem-mesa{grid-template-columns:250px minmax(0,1fr) 0}
.aplicacao.sem-mesa .mesa{display:none}
.aplicacao.sem-lateral{grid-template-columns:0 minmax(0,1fr) 300px}
.aplicacao.sem-lateral .lateral{display:none}
.aplicacao.sem-lateral.sem-mesa{grid-template-columns:0 minmax(0,1fr) 0}

/* ------------------------------- lateral --------------------------------- */
.lateral{background:var(--side);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-width:0}
.lateral-topo{padding:15px 14px 10px;display:flex;align-items:center;gap:9px}
.lateral-topo img{height:22px;width:auto;object-fit:contain}
.marca{font-weight:600}

/* menus: Chat · Configurações · Motor · Áudio · Mesa de Trabalho */
.menu{display:flex;flex-direction:column;gap:2px;padding:6px 8px}
.menu button{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;
  color:var(--fg);font-size:13.5px;cursor:pointer;background:transparent;border:none;
  width:100%;text-align:left;font-weight:500}
.menu button:hover{background:rgba(255,255,255,.05)}
.menu button.ativo{background:rgba(255,255,255,.06);font-weight:600}
.menu button.ativo svg{color:var(--brand)}
.menu button svg{flex:0 0 auto;color:var(--muted)}
.menu button .marcador{margin-left:auto;font-size:10px;color:var(--muted)}
.menu button.ativo .marcador{color:var(--brand)}

.rotulo-secao{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 4px;font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted)}
.rotulo-secao .add{background:var(--brand);color:var(--sobre-marca);width:20px;height:20px;
  border-radius:6px;font-size:15px;line-height:18px;text-align:center;cursor:pointer;
  border:none;padding:0}
.lista-conversas{flex:1;overflow-y:auto;padding:2px 8px 12px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent}
.lista-conversas::-webkit-scrollbar{width:9px}
.lista-conversas::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:9px;
  border:2px solid transparent;background-clip:content-box}
.item-conversa{padding:8px 10px;border-radius:9px;cursor:pointer;font-size:13px;
  border-left:3px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-conversa:hover{background:rgba(255,255,255,.05)}
.item-conversa.ativa{background:rgba(255,255,255,.07);border-left-color:var(--brand)}
.lateral-rodape{flex:0 0 auto;padding:9px 12px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:8px}
.avatar-usuario{width:24px;height:24px;border-radius:50%;background:var(--brand);
  color:var(--sobre-marca);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex:0 0 auto}
#rotulo-usuario{flex:1;font-size:12px;color:var(--fg);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------ principal -------------------------------- */
.principal{min-width:0;min-height:0;display:flex;flex-direction:column;height:100%;position:relative}
.secao{display:flex;flex-direction:column;flex:1;min-height:0}

/* cabeçalho comum a todas as seções internas */
.barra-motor,.cabecalho-config,.cabecalho-secao{flex:0 0 auto;display:flex;align-items:center;
  gap:10px;padding:11px 18px;background:var(--panel);border-bottom:1px solid var(--line);
  flex-wrap:wrap;z-index:10}
.barra-motor .titulo,.cabecalho-secao .titulo{font-weight:600;font-size:14.5px}
.espacador{flex:1}
.campo-motor{display:flex;align-items:center;gap:6px}
.campo-motor label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.barra-motor select,.cabecalho-secao select{background:var(--field);color:var(--fg);
  border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:12px;width:auto}
.botao-icone{background:transparent;border:1px solid var(--line);color:var(--muted);
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.botao-icone:hover{color:var(--brand);border-color:var(--brand)}
.botao-icone.ligado{color:var(--brand);border-color:var(--brand);background:rgba(245,128,31,.14)}

/* ------------------------------ mensagens -------------------------------- */
.mensagens{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:22px 18px 14px;display:flex;flex-direction:column;gap:18px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent}
.mensagens::-webkit-scrollbar{width:9px}
.mensagens::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:9px;
  border:2px solid transparent;background-clip:content-box}
.vazio{margin:auto;text-align:center;max-width:460px}
.vazio h2{margin:0 0 8px;font-size:19px}

/* linha = avatar + balão, no padrão do portal */
.linha-msg{display:flex;gap:11px;max-width:820px;width:100%;margin:0 auto}
.linha-msg .avatar{width:27px;height:27px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:700;overflow:hidden}
.linha-msg.user .avatar{background:#33353a;color:#cfd2d6}
.linha-msg.assistant .avatar{background:var(--brand);color:var(--sobre-marca)}
.linha-msg.gerando .avatar{animation:avPulso 1.15s ease-out infinite, avGira 2.4s linear infinite}
@keyframes avPulso{0%{box-shadow:0 0 0 0 rgba(245,128,31,.55)}
  70%{box-shadow:0 0 0 8px rgba(245,128,31,0)}100%{box-shadow:0 0 0 0 rgba(245,128,31,0)}}
@keyframes avGira{to{transform:rotate(360deg)}}

.msg{flex:1;min-width:0;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;
  line-height:1.55;font-size:14.5px;padding-top:3px;max-width:none;border:none;background:none}
.msg.user{color:#dcdee1}
.msg.assistant{background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:12px 15px}
.msg.falhou{border-color:var(--no)}
.selo{display:block;margin-top:7px;font-size:10.5px;color:var(--muted);letter-spacing:.2px}
.cursor-digitando::after{content:"▍";animation:pisca 1s steps(2) infinite}
@keyframes pisca{50%{opacity:0}}

/* ações da resposta (ouvir / copiar) */
.acoes-msg{display:flex;gap:6px;margin-top:8px;opacity:0;transition:opacity .12s}
.linha-msg:hover .acoes-msg{opacity:1}
.linha-msg.gerando .acoes-msg{display:none}
.acao-msg{display:inline-flex;align-items:center;gap:5px;background:transparent;
  border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:3px 8px;
  font-size:11px;cursor:pointer;font-weight:500}
.acao-msg:hover{color:var(--fg);border-color:var(--muted)}
.acao-msg.ativa{color:var(--brand);border-color:var(--brand)}
.acao-msg svg{width:13px;height:13px}

/* ----------------------------- composição -------------------------------- */
.composicao{flex:0 0 auto;display:flex;gap:8px;padding:10px 14px 12px;
  border-top:1px solid var(--line);background:var(--bg);align-items:flex-end}
.composicao textarea{flex:1;resize:none;max-height:180px;background:var(--field);
  color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:11px 13px;
  font:inherit;font-size:14.5px}
.composicao textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(245,128,31,.15)}
.botao.anexar,.botao.microfone{background:#2b2d31;color:var(--fg);border:1px solid var(--line);
  width:40px;height:40px;padding:0;border-radius:12px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;font-size:19px;line-height:1}
.botao.anexar:hover,.botao.microfone:hover{background:#34363b;border-color:var(--muted)}
.botao.microfone svg{width:18px;height:18px}
.botao.microfone.gravando{background:#e5484d;color:#fff;border-color:#e5484d;
  animation:micPulsa 1.2s infinite}
@keyframes micPulsa{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}
  50%{box-shadow:0 0 0 7px rgba(229,72,77,0)}}
.dica-rodape{flex:0 0 auto;text-align:center;font-size:11px;color:var(--muted);
  padding:0 14px 9px;background:var(--bg);line-height:1.6}
.dica-rodape b{color:var(--brand)}

/* =============================== BOTÕES =================================== */
.botao{background:var(--field);color:var(--fg);border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;cursor:pointer;font:inherit;font-weight:600;font-size:14px}
.botao:hover{border-color:var(--brand);color:var(--fg)}
.botao.primario{background:linear-gradient(135deg,var(--brand),var(--brand-dk));
  border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(245,128,31,.26)}
.botao.primario:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(245,128,31,.36)}
.botao.primario:active{transform:translateY(0)}
.botao.perigo{background:transparent;border-color:var(--no);color:var(--no)}
.botao.perigo:hover{background:rgba(229,103,95,.12)}
.botao.plano{background:transparent;border-color:transparent;color:var(--muted)}
.botao.plano:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.botao.pequeno{padding:5px 10px;font-size:13px;border-radius:8px}
.botao:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ============================== FORMULÁRIOS =============================== */
label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
input,select,textarea{background:var(--field);color:var(--fg);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;font:inherit;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(245,128,31,.15)}

/* ============================= MESA DE TRABALHO =========================== */
.mesa{background:var(--side);border-left:1px solid var(--line);display:flex;
  flex-direction:column;min-width:0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent}
.mesa::-webkit-scrollbar{width:9px}
.mesa::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:9px;
  border:2px solid transparent;background-clip:content-box}
.mesa-titulo{flex:0 0 auto;padding:14px 16px 12px;font-weight:700;font-size:13px;
  letter-spacing:.4px;border-bottom:1px solid var(--line);background:var(--panel)}
.mesa-bloco{padding:13px 16px;border-bottom:1px solid var(--line)}
.mesa-bloco h4{margin:0 0 9px;font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.mesa-vazio{color:var(--muted);font-size:12px}
.mesa-linha{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12.5px;padding:3px 0}
.mesa-linha .rot{color:var(--muted);flex:0 0 auto}
.mesa-linha .val{color:var(--fg);text-align:right;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.mesa-linha .val.marca{color:var(--brand);font-weight:600}
.mesa-etiqueta{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:99px;
  border:1px solid var(--line);color:var(--muted);margin:2px 4px 2px 0}
.mesa-etiqueta.ok{color:var(--ok);border-color:rgba(63,185,80,.4)}
.mesa-etiqueta.marca{color:var(--brand);border-color:rgba(245,128,31,.4)}
.mesa-barra{display:block;height:5px;margin-top:6px;border-radius:999px;
  background:rgba(255,255,255,.12);overflow:hidden}
.mesa-barra i{display:block;height:100%;width:0;border-radius:999px;background:var(--brand);
  transition:width .3s}

/* ========================= SEÇÕES INTERNAS (painéis) ====================== */
.painel{flex:1;min-height:0;overflow-y:auto;padding:20px;display:flex;
  flex-direction:column;gap:14px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent}
.painel::-webkit-scrollbar{width:9px}
.painel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:9px;
  border:2px solid transparent;background-clip:content-box}
.cartao{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px}
.cartao h3{margin:0 0 6px;font-size:15.5px}
.cartao > .sutil{margin:0 0 12px}

/* motor: cartão por provider */
.cartao-motor{background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.cartao-motor.em-uso{border-color:var(--brand);box-shadow:0 0 0 1px rgba(245,128,31,.25)}
.cartao-motor .cabeca{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cartao-motor .cabeca h3{margin:0;font-size:15px}
.modelos-do-motor{display:flex;flex-direction:column;gap:6px}
.opcao-modelo{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--field);
  border:1px solid var(--line);border-radius:9px;cursor:pointer;font-size:13px;
  text-align:left;color:var(--fg);font-weight:500}
.opcao-modelo:hover{border-color:var(--muted)}
.opcao-modelo.em-uso{border-color:var(--brand);color:var(--fg)}
.opcao-modelo .id{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:ui-monospace,Menlo,monospace;font-size:12px}

/* áudio */
.linha-preferencia{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.linha-preferencia:last-child{border-bottom:none}
.linha-preferencia .texto{flex:1;min-width:200px}
.linha-preferencia .texto strong{display:block;font-size:14px;font-weight:600;color:var(--fg)}
.linha-preferencia .texto span{font-size:12.5px;color:var(--muted)}
.linha-preferencia .controle{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.linha-preferencia select{width:auto;min-width:180px}
.linha-preferencia input[type=range]{width:150px;padding:0;background:transparent;border:none;
  accent-color:var(--brand)}
.chave{position:relative;width:44px;height:24px;flex:0 0 auto}
.chave input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.chave i{position:absolute;inset:0;background:#3a3d43;border-radius:99px;transition:background .18s}
.chave i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .18s}
.chave input:checked + i{background:var(--brand)}
.chave input:checked + i::after{transform:translateX(20px)}
.nota{border-left:3px solid var(--aviso-cor);background:rgba(210,153,34,.08);
  border-radius:0 9px 9px 0;padding:11px 13px;font-size:12.5px;color:var(--g-lt);line-height:1.6}
.nota b{color:var(--aviso-cor)}

/* ========================== CONFIGURAÇÕES (existente) ===================== */
.cabecalho-config h2{margin:0;font-size:16px}
.abas-config{display:flex;gap:4px}
.aba{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);
  padding:8px 14px;cursor:pointer;font:inherit;font-size:14px;border-radius:6px 6px 0 0;
  font-weight:500}
.aba:hover{color:var(--fg)}
.aba.ativa{color:var(--fg);border-bottom-color:var(--brand);font-weight:600}
.lista-providers{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
#painel-apis,#painel-ferramentas{flex:1;min-height:0;overflow-y:auto}
.cartao-provider{background:var(--panel);border:1px solid var(--line);
  border-radius:13px;padding:16px}
.cartao-provider h3{margin:0 0 6px;font-size:15.5px}
.cartao-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cartao-topo h3{margin:0;font-size:15.5px}
.etiqueta{font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.etiqueta.ativo{color:var(--ok);border-color:rgba(63,185,80,.4)}
.etiqueta.inativo{color:var(--muted)}
.etiqueta.padrao{color:var(--brand);border-color:rgba(245,128,31,.4)}
.linhas-provider{margin:9px 0;display:grid;gap:3px;font-size:13px;color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.acoes-provider{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* ================================ MODAL ================================== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.66);display:grid;place-items:center;
  padding:20px;z-index:50}
.modal-conteudo{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px;width:min(560px,100%);max-height:90vh;overflow-y:auto;
  box-shadow:0 32px 72px -26px rgba(0,0,0,.75)}
.modal-conteudo.largo{width:min(760px,100%)}
.modal-conteudo h3{margin:0 0 14px}
#form-provider{display:flex;flex-direction:column;gap:12px}
.linha{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.inline{flex-direction:row;align-items:center;gap:6px;width:auto}
.inline input{width:auto}
.curto{width:120px}
.acoes-modal{display:flex;gap:8px;align-items:center;margin-top:16px}
.espaco{flex:1}
.resultado-teste{border:1px solid var(--line);border-radius:9px;padding:11px;font-size:13px}
.resultado-teste.ok{border-color:rgba(63,185,80,.5)}
.resultado-teste.falha{border-color:var(--no)}
.resultado-teste div{margin:2px 0}

/* ============================== MODELOS ================================== */
.lista-modelos{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.item-modelo{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--field);
  border:1px solid var(--line);border-radius:9px;flex-wrap:wrap}
.item-modelo .id{flex:1;min-width:150px}
.estrela{cursor:pointer;color:var(--muted);font-size:16px;background:none;border:none}
.estrela.marcada{color:var(--brand)}
.form-modelo{display:flex;gap:8px;flex-wrap:wrap}
.form-modelo input{flex:1;min-width:140px}
.item-modelo.editando{border-color:var(--brand);background:var(--panel)}
.item-modelo.editando input{flex:1;min-width:130px}
.item-modelo.editando input.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;flex:2}
.botao.pequeno.primario{background:var(--brand);border-color:var(--brand);color:var(--sobre-marca);
  box-shadow:none}

/* =============================== AVISO =================================== */
.aviso{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:11px 18px;z-index:100;
  max-width:min(560px,92vw);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.aviso.erro{border-color:var(--no)}
.aviso.ok{border-color:rgba(63,185,80,.5)}

/* =============================== ANEXOS ================================== */
.bandeja-anexos{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 0;
  border-top:1px solid var(--line);background:var(--bg)}
.chip-anexo{display:flex;align-items:center;gap:8px;background:var(--field);
  border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:13px;max-width:340px}
.chip-anexo.enviando{opacity:.6}
.chip-anexo.falhou{border-color:var(--no)}
.chip-anexo .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-anexo .tipo{font-size:11px;color:var(--muted);text-transform:uppercase}
.chip-anexo .remover{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px}
.chip-anexo .remover:hover{color:var(--no)}

#secao-chat{position:relative}
#secao-chat.arrastando-arquivo{outline:2px dashed var(--brand);outline-offset:-2px;border-radius:10px}
#secao-chat.arrastando-arquivo::after{content:'Solte o arquivo para anexar';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;background:rgba(23,24,27,.82);
  color:var(--brand-lt);font-size:15px;font-weight:600;letter-spacing:.02em;
  border-radius:inherit;z-index:5;pointer-events:none}
.aviso-anexo{font-size:12px;color:var(--aviso-cor);margin-top:5px}
.msg .anexos-da-msg{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.msg .anexos-da-msg a{font-size:12px;color:inherit;opacity:.85;text-decoration:underline}
.imagens-da-msg{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.imagens-da-msg a{display:block;line-height:0}
.imagens-da-msg img{max-width:min(420px,100%);max-height:420px;border-radius:9px;
  border:1px solid var(--line);background:var(--field)}

/* ============================ CABEÇALHOS EXTRAS ========================== */
.area-cabecalhos{border:1px solid var(--line);border-radius:9px;padding:12px;margin:0}
.area-cabecalhos legend{padding:0 6px;font-size:13px;color:var(--muted)}
.lista-cabecalhos{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.item-cabecalho{display:flex;align-items:center;gap:8px;background:var(--field);
  border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px;flex-wrap:wrap}
.item-cabecalho .cb-nome{font-family:ui-monospace,Menlo,monospace;font-weight:600;min-width:110px}
.item-cabecalho .cb-valor{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--muted);font-family:ui-monospace,Menlo,monospace}
.form-cabecalho{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.form-cabecalho input[type=text],.form-cabecalho input:not([type]){flex:1;min-width:120px}

/* ============================== FERRAMENTAS ============================== */
.lista-ferramentas{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.item-ferramenta{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  background:var(--field);border:1px solid var(--line);border-radius:9px}
.item-ferramenta .nome{font-family:ui-monospace,Menlo,monospace;font-weight:600;min-width:120px;
  font-size:13px}
.item-ferramenta .desc{flex:1;font-size:13px;color:var(--muted);min-width:180px}
.item-ferramenta .origem{font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em}
.limites{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;
  margin-top:6px;display:grid;gap:4px}
.limites code{font-size:12px}
.liberacao-motores{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.motor-linha{padding:11px 13px;background:var(--field);border:1px solid var(--line);
  border-radius:9px}
.motor-linha .cabeca{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.motor-linha .cabeca strong{font-size:14px}
.caixas-ferramenta{display:flex;gap:14px;flex-wrap:wrap}
.caixas-ferramenta label{flex-direction:row;align-items:center;gap:5px;width:auto;font-size:13px;
  color:var(--fg);cursor:pointer}
.caixas-ferramenta input{width:auto}
.motor-linha .estado{font-size:12px;color:var(--muted);margin-top:7px;min-height:16px}
#form-ferramenta{display:flex;flex-direction:column;gap:12px}
#form-ferramenta textarea.mono,#form-ferramenta input.mono{font-family:ui-monospace,Menlo,monospace;
  font-size:12.5px}
#form-ferramenta textarea{resize:vertical}
.lista-exemplos{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.cartao-exemplo{background:var(--field);border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;cursor:pointer}
.cartao-exemplo:hover{border-color:var(--brand)}
.cartao-exemplo .nome{font-family:ui-monospace,Menlo,monospace;font-weight:600;font-size:13px}
.cartao-exemplo .desc{font-size:13px;color:var(--muted);margin:5px 0}
.cartao-exemplo .url{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cartao-exemplo .obs{font-size:12px;color:var(--aviso-cor);margin-top:6px}

/* ============================== RESPONSIVO =============================== */
@media (max-width:1180px){
  .aplicacao{grid-template-columns:250px minmax(0,1fr)}
  .mesa{display:none}
  .aplicacao.mesa-aberta{grid-template-columns:250px minmax(0,1fr) 300px}
  .aplicacao.mesa-aberta .mesa{display:flex}
}
@media (max-width:820px){
  .aplicacao,.aplicacao.mesa-aberta{grid-template-columns:minmax(0,1fr)}
  .lateral{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:40;display:none}
  .aplicacao.lateral-aberta .lateral{display:flex}
  .aplicacao.mesa-aberta .mesa{position:fixed;right:0;top:0;bottom:0;width:290px;z-index:40}
}

/* coluna da mensagem: balão em cima, ações embaixo (fora do .msg, para o
   texto das ações não entrar na leitura do conteúdo) */
.linha-msg .coluna{flex:1;min-width:0;display:flex;flex-direction:column}

/* ============================== VOZ (TTS) ================================ */
/* player compacto: aparece embaixo da resposta e na tela de teste */
.player-voz{display:flex;align-items:center;gap:10px;margin-top:9px;padding:8px 11px;
  background:var(--field);border:1px solid var(--line);border-radius:10px;max-width:520px}
.player-voz.compacto{margin-top:8px;padding:6px 10px}
.player-botao{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--brand);
  color:var(--sobre-marca);display:flex;align-items:center;justify-content:center;border:none;
  cursor:pointer}
.player-botao:hover{background:var(--brand-lt)}
.player-botao svg{width:15px;height:15px}
.player-barra{flex:1;min-width:60px;height:6px;border-radius:999px;
  background:rgba(255,255,255,.14);cursor:pointer;overflow:hidden}
.player-barra i{display:block;height:100%;width:0;background:var(--brand);border-radius:999px}
.player-tempo{flex:0 0 auto;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.player-acao{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;color:var(--muted);border:1px solid var(--line);
  text-decoration:none}
.player-acao:hover{color:var(--brand);border-color:var(--brand)}
.player-acao svg{width:14px;height:14px}
.player-velocidade{flex:0 0 auto;min-width:36px;height:28px;padding:0 7px;border-radius:8px;
  background:transparent;color:var(--muted);border:1px solid var(--line);cursor:pointer;
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.player-velocidade:hover{color:var(--brand);border-color:var(--brand)}
.player-velocidade:disabled{opacity:.55;cursor:default;color:var(--muted);border-color:var(--line)}

/* falha de geração: não pode parecer que o chat quebrou */
.falha-voz{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 11px;
  border-left:3px solid var(--aviso-cor);background:rgba(210,153,34,.08);
  border-radius:0 9px 9px 0;font-size:12.5px;color:var(--g-lt)}

/* resultado do teste de voz */
.resultado-voz{margin-top:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ficha-voz{width:100%;max-width:520px;border-top:1px solid var(--line);padding-top:9px}
#form-voz-teste textarea{resize:vertical}
#voz-diagnostico{margin-top:4px}

/* ==================== RECUPERAÇÃO DE SENHA (login) ====================== */
.link-login{display:inline-block;margin-top:18px;color:rgba(204,204,204,.62);
  font-size:13px;cursor:pointer;text-decoration:none}
.link-login b{color:var(--brand);font-weight:700}
.link-login:hover b{text-decoration:underline}
.dica-login{color:rgba(204,204,204,.62);font-size:12.5px;margin:0 0 16px;
  line-height:1.55;text-align:left}
.aviso-login{display:flex;align-items:flex-start;gap:9px;margin-top:15px;
  padding:11px 12px;border-radius:10px;font-size:12.5px;text-align:left;
  line-height:1.45;background:rgba(245,128,31,.10);
  border:1px solid rgba(245,128,31,.34);color:var(--brand-lt)}
.aviso-login.falhou{background:rgba(229,103,95,.12);
  border-color:rgba(229,103,95,.34);color:#F0A9A3}
#tela-login form{display:block}

/* =============== AÇÕES DA CONVERSA (renomear/arquivar/excluir) =========== */
.acoes-rotulo{display:flex;gap:5px;align-items:center}
.botao-rotulo{background:transparent;border:none;color:var(--muted);cursor:pointer;
  font-size:13px;padding:0 3px;line-height:1}
.botao-rotulo:hover{color:var(--fg)}
.botao-rotulo.ligado{color:var(--brand)}

/* a linha da conversa vira flex para caber título + botões */
.item-conversa{display:flex;align-items:center;gap:3px}
.item-conversa .titulo-conversa{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Em repouso os botões somem: a lista é para LER, não para agir. */
.acao-conversa{opacity:0;background:transparent;border:none;color:var(--muted);
  cursor:pointer;padding:3px;border-radius:6px;display:flex;flex:0 0 auto}
.item-conversa:hover .acao-conversa{opacity:.8}
.acao-conversa:hover{opacity:1;color:var(--fg);background:rgba(255,255,255,.08)}
.acao-conversa.excluir:hover{color:var(--no);background:rgba(229,103,95,.12)}
.acao-conversa svg{width:14px;height:14px}
/* Enquanto renomeia, os botões saem do caminho. */
.item-conversa.renomeando .acao-conversa{display:none}
.item-conversa.renomeando{background:var(--field);border-left-color:var(--brand)}
.campo-renomear{flex:1;min-width:0;background:var(--bg);color:var(--fg);
  border:1px solid var(--brand);border-radius:6px;padding:4px 7px;font:inherit;font-size:13px}
.campo-renomear:focus{outline:none;box-shadow:0 0 0 2px rgba(245,128,31,.2)}
.lista-vazia{color:var(--muted);font-size:12px;padding:10px 12px;text-align:center}

/* Controle que não vale no modo atual: some do caminho em vez de enganar. */
.linha-preferencia.inativa{opacity:.45}
.linha-preferencia.inativa .controle{pointer-events:none}