:root{color-scheme:light dark;--bg:#faf9f5;--lat:#f0eee6;--card:#fff;--tx:#1f1e1d;--mut:#6b6a68;--bd:#e3e0d6;--hover:#e8e5da;--eu:#f0eee6;--ac:#566b2d;--acTx:#fff;--ok:#3f7d3a;--err:#b3261e;--cod:#f5f4ee}
@media (prefers-color-scheme:dark){:root{--bg:#262624;--lat:#1f1e1d;--card:#30302e;--tx:#ece9e0;--mut:#a09d96;--bd:#3e3d3a;--hover:#3a3935;--eu:#3a3935;--ac:#9db368;--acTx:#141a0c;--ok:#86c06e;--err:#ff8a80;--cod:#1f1e1d}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.55;cursor:wait}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
input,textarea,select{font:inherit;color:var(--tx)}
label{display:block;margin-bottom:12px;font-size:13px;color:var(--mut)}
input,textarea{display:block;width:100%;margin-top:4px;padding:9px 11px;border:1px solid var(--bd);border-radius:10px;background:var(--card)}
textarea{min-height:92px;resize:vertical}
.erro{color:var(--err);margin:8px 0 0;min-height:1em;font-size:13px}
.dica{color:var(--mut);margin:0 0 16px}
button.link{background:none;border:0;color:var(--mut);padding:0;text-decoration:underline}
button.primario{background:var(--ac);color:var(--acTx);border:0;border-radius:10px;padding:9px 16px;font-weight:600}
button.sec{background:var(--lat);border:1px solid var(--bd);border-radius:10px;padding:9px 14px}
button.cheio{width:100%}
button.icone{background:none;border:0;border-radius:8px;padding:6px;display:inline-flex;color:var(--mut)}
button.icone:hover{background:var(--hover)}

/* marca e login */
.marca{display:flex;align-items:center;gap:10px;font-weight:650;font-size:16px;letter-spacing:.01em}
.logo{width:28px;height:28px;border-radius:8px;background:var(--ac);color:var(--acTx);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.marca.grande{font-size:20px;margin-bottom:18px}
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}
.login-card{width:100%;max-width:380px;padding:28px;background:var(--card);border:1px solid var(--bd);border-radius:16px}
.login-card h2{margin:0 0 4px;font-size:18px}

/* estrutura */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}
.lateral{width:280px;flex:0 0 280px;background:var(--lat);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:14px 10px;gap:10px;min-height:0}
.lat-topo{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 6px}
.nova{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--card);font-weight:600}
.nova:hover{background:var(--hover)}
.lat-lista{flex:1;min-height:0;overflow-y:auto;padding:4px 0}
.lat-titulo{margin:8px 8px 6px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.lista-ses{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lista-ses li{display:flex;align-items:center;border-radius:10px}
.lista-ses li:hover,.lista-ses li.ativa{background:var(--hover)}
.lista-ses .abrir{flex:1;min-width:0;text-align:left;background:none;border:0;padding:8px 10px;border-radius:10px;overflow:hidden}
.lista-ses .titulo{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.lista-ses small{display:block;color:var(--mut);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-ses .apagar{visibility:hidden;background:none;border:0;color:var(--mut);padding:6px 8px;border-radius:8px}
.lista-ses li:hover .apagar,.lista-ses li:focus-within .apagar{visibility:visible}
.lista-ses .apagar:hover{color:var(--err)}
.lista-vazia{color:var(--mut);padding:8px 10px;font-size:13px}
.lat-rodape{display:grid;gap:2px;border-top:1px solid var(--bd);padding-top:8px}
.lat-rodape .item{background:none;border:0;text-align:left;padding:8px 10px;border-radius:10px;font-size:14px}
.lat-rodape .item:hover{background:var(--hover)}
.usuario{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;color:var(--mut);font-size:13px}
.principal{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}

/* topo */
.topo{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--bd);background:var(--bg)}
.seletores{display:flex;gap:8px;flex-wrap:wrap}
.pilula{margin:0;display:flex;align-items:center;gap:6px;padding:3px 4px 3px 10px;border:1px solid var(--bd);border-radius:999px;background:var(--card);font-size:12px}
.pilula span{color:var(--mut)}
.pilula select{border:0;background:transparent;padding:4px 6px;font-size:13px;max-width:190px;cursor:pointer}

/* conversa */
.conversa{flex:1;overflow-y:auto;padding:24px max(16px,calc((100% - 760px)/2));display:flex;flex-direction:column;gap:20px}
.msg{display:flex;gap:12px;align-items:flex-start}
.msg.eu{justify-content:flex-end}
.msg.eu .bolha{background:var(--eu);border-radius:18px;padding:10px 16px;max-width:85%}
.avatar{flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:var(--ac);color:var(--acTx);display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
.avatar svg,.logo svg{width:68%;height:68%}
.msg.ia .bolha{flex:1;min-width:0;font-family:ui-serif,"Iowan Old Style",Georgia,"Times New Roman",serif;font-size:16.5px;line-height:1.7}
.bolha{overflow-wrap:anywhere}
.bolha.texto{white-space:pre-wrap}
.msg.sis{justify-content:center}
.msg.sis .bolha{background:none;color:var(--mut);font-size:13px;text-align:center;max-width:560px}
.bolha h3{font:600 12px system-ui;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:0 0 4px}
.bolha .meta{color:var(--mut);font:12px system-ui;margin-top:10px}
.bolha .linha{margin:2px 0}.bolha b{font-weight:650}
.bolha pre{white-space:pre-wrap;margin:6px 0 0;font:13px/1.5 ui-monospace,Menlo,monospace}
.caso{border-top:1px solid var(--bd);margin-top:10px;padding-top:8px}
.caso:first-of-type{border-top:0;margin-top:4px;padding-top:0}
details summary{cursor:pointer;color:var(--mut)}
.ferrs{display:grid;gap:8px;margin-bottom:10px;font-family:system-ui,sans-serif}
.ferrs:empty{display:none}
.ferr{border:1px solid var(--bd);border-radius:12px;padding:6px 12px;font-size:13px;background:var(--card)}
.ferr summary{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.ferr.falha{border-color:var(--err)}
.ferr pre{background:var(--cod);border-radius:8px;padding:10px;max-height:280px;overflow:auto;word-break:break-word}
.pensando::after{content:"";display:inline-block;width:10px;height:10px;margin-left:8px;border:2px solid var(--mut);border-top-color:transparent;border-radius:50%;animation:g 1s linear infinite;vertical-align:-1px}
@keyframes g{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pensando::after{animation:none}}

/* compositor */
.compositor{padding:0 16px 14px;background:var(--bg)}
.coluna{max-width:760px;margin:0 auto}
.atalhos{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.atalhos button{padding:4px 12px;font-size:13px;background:var(--card);border:1px solid var(--bd);border-radius:999px;color:var(--mut)}
.atalhos button:hover{background:var(--hover);color:var(--tx)}
.entrada{display:flex;gap:8px;align-items:flex-end;padding:8px 8px 8px 16px;background:var(--card);border:1px solid var(--bd);border-radius:22px;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.entrada:focus-within{border-color:var(--ac)}
.entrada textarea{margin:0;min-height:28px;max-height:200px;resize:none;flex:1;border:0;background:transparent;padding:6px 0;border-radius:0}
.entrada textarea:focus-visible{outline:none}
.enviar{flex:0 0 36px;width:36px;height:36px;border-radius:50%;border:0;background:var(--ac);color:var(--acTx);display:inline-flex;align-items:center;justify-content:center;padding:0}
.enviar.parar{background:var(--tx);color:var(--bg);font-size:12px}
.rodape{color:var(--mut);font-size:11.5px;margin:8px 4px 0;text-align:center}

/* diálogos */
.dlg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:30}
.dlg-corpo{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:22px;width:100%;max-width:520px;max-height:90vh;overflow:auto}
.dlg-corpo h2{margin:0 0 4px;font-size:18px}
.dlg select{width:100%;margin-top:4px;padding:9px 11px;border:1px solid var(--bd);border-radius:10px;background:var(--card)}
.acoes{display:flex;gap:8px;flex-wrap:wrap}

/* telas estreitas: a barra lateral vira gaveta */
button.so-mobile{display:none}
.fundo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:19}
@media (max-width:820px){
  button.so-mobile{display:inline-flex}
  .lateral{position:fixed;inset:0 auto 0 0;z-index:20;width:290px;transform:translateX(-100%);transition:transform .2s ease}
  .app.lateral-aberta .lateral{transform:none}
  .conversa{padding:16px}
  .pilula span{display:none}
  .pilula{padding-left:6px}
  .avatar{display:none}
  .topo{padding:8px 10px}
  .seletores{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
  .seletores::-webkit-scrollbar{display:none}
  .pilula{flex:0 0 auto}
  .pilula select{font-size:13px;max-width:150px}
  .atalhos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .atalhos button{white-space:nowrap;flex:0 0 auto}
  .rodape{display:none}
  .compositor{padding-bottom:10px}
  .vazio h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.lateral{transition:none}}
.lat-lista{overflow-x:hidden;scrollbar-width:thin}
.entrada textarea{overflow-y:auto;scrollbar-width:thin}
.conversa{scrollbar-width:thin}

/* tema manual (o padrão segue o sistema) */
:root[data-tema=light]{color-scheme:light;--bg:#faf9f5;--lat:#f0eee6;--card:#fff;--tx:#1f1e1d;--mut:#6b6a68;--bd:#e3e0d6;--hover:#e8e5da;--eu:#f0eee6;--ac:#566b2d;--acTx:#fff;--ok:#3f7d3a;--err:#b3261e;--cod:#f5f4ee}
:root[data-tema=dark]{color-scheme:dark;--bg:#262624;--lat:#1f1e1d;--card:#30302e;--tx:#ece9e0;--mut:#a09d96;--bd:#3e3d3a;--hover:#3a3935;--eu:#3a3935;--ac:#9db368;--acTx:#141a0c;--ok:#86c06e;--err:#ff8a80;--cod:#1f1e1d}

/* barra lateral recolhível, busca, grupos e renomear */
.app.recolhida .lateral{display:none}
.busca{margin:0;padding:8px 12px;border-radius:10px;background:var(--card);font-size:14px}
.lista-ses .grupo{padding:12px 10px 4px;font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;display:block}
.lista-ses .renomear,.lista-ses .apagar{visibility:hidden;background:none;border:0;color:var(--mut);padding:6px 7px;border-radius:8px;font-size:13px}
.lista-ses li:hover .renomear,.lista-ses li:focus-within .renomear{visibility:visible}
.lista-ses .renomear:hover{color:var(--tx)}
.lista-ses input.edita{margin:3px 6px;padding:6px 8px;font-size:14px;border-radius:8px}
.lista-ses .esqueleto{height:34px;margin:4px 6px;border-radius:10px;background:linear-gradient(90deg,var(--hover),var(--lat),var(--hover));background-size:200% 100%;animation:brilho 1.4s linear infinite}
@keyframes brilho{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.lista-ses .esqueleto{animation:none}}

/* tela inicial */
.vazio{margin:auto;width:100%;max-width:640px;text-align:center;padding:24px 0}
.vazio .logo{width:52px;height:52px;border-radius:14px;margin:0 auto 14px}
.vazio h2{margin:0 0 6px;font:600 28px/1.25 ui-serif,"Iowan Old Style",Georgia,serif}
.vazio p{margin:0 0 22px;color:var(--mut)}
.sugestoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}
.sugestao{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.35}
.sugestao:hover{background:var(--hover)}
.sugestao b{display:block;font-weight:600;margin-bottom:2px}
.sugestao span{color:var(--mut);font-size:13px}
@media (max-width:560px){.sugestoes{grid-template-columns:1fr}}

/* markdown nas respostas */
.msg.ia .bolha .md-p{margin:0 0 .75em}
.msg.ia .bolha .md-p:last-child{margin-bottom:0}
.md-h{font:600 1.05em system-ui,sans-serif;margin:1em 0 .4em}
.md-h1,.md-h2{font-size:1.2em}
.md-lista{margin:0 0 .75em;padding-left:1.4em}
.md-lista li{margin:.2em 0}
.md-cod{font:.88em ui-monospace,Menlo,monospace;background:var(--cod);border:1px solid var(--bd);border-radius:6px;padding:.08em .35em}
.msg.ia .bolha a{color:var(--ac)}
.codigo{margin:.5em 0 .85em;border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:var(--cod);font-family:system-ui,sans-serif}
.cod-topo{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;font-size:12px;color:var(--mut);border-bottom:1px solid var(--bd)}
.cod-topo .copiar{background:none;border:0;color:var(--mut);padding:2px 8px;border-radius:6px;font-size:12px}
.cod-topo .copiar:hover{background:var(--hover);color:var(--tx)}
.codigo pre{margin:0;padding:10px 12px;overflow:auto;font:13px/1.55 ui-monospace,Menlo,monospace;white-space:pre}

/* ferramentas em andamento e concluídas */
.ferr summary{display:flex;align-items:center;gap:8px;list-style:none}
.ferr summary::-webkit-details-marker{display:none}
.ferr summary::before{content:"✓";color:var(--ok);font-weight:700}
.ferr.falha summary::before{content:"✕";color:var(--err)}
.ferr.andando summary::before{content:"";width:12px;height:12px;border:2px solid var(--mut);border-top-color:transparent;border-radius:50%;animation:g 1s linear infinite}
@media (prefers-reduced-motion:reduce){.ferr.andando summary::before{animation:none}}
.ferr .ms{margin-left:auto;color:var(--mut);font:12px system-ui}

/* ações por mensagem */
.acoes-msg{display:flex;gap:4px;margin-top:6px;font-family:system-ui,sans-serif}
.acoes-msg button{background:none;border:0;color:var(--mut);font-size:12.5px;padding:3px 8px;border-radius:8px}
.acoes-msg button:hover{background:var(--hover);color:var(--tx)}
.acoes-msg button[hidden]{display:none}

.acoes-login{display:flex;justify-content:space-between;margin-top:12px}
button.link:disabled{opacity:.5;text-decoration:none;cursor:default}
.codigo-otp{font:600 26px ui-monospace,Menlo,monospace;letter-spacing:.4em;text-align:center}
#etapa-senha[hidden],#etapa-otp[hidden],#etapa-troca[hidden]{display:none}

/* verde só em ícones e contornos: o fundo continua neutro */
.nova{border-color:var(--ac)}
.sugestao:hover,.atalhos button:hover{border-color:var(--ac)}
.pilula:focus-within,input:focus,textarea:focus{border-color:var(--ac)}
.lista-ses li.ativa{box-shadow:inset 2px 0 0 var(--ac)}
.ferr{border-color:color-mix(in srgb,var(--ac) 40%,var(--bd))}

/* tela de login: arte em contornos na tela toda e o formulário à esquerda; sempre escura, em verde musgo */
.login{--bg:#0d0f0c;--card:#151813;--tx:#e9ecdf;--mut:#9aa38f;--bd:#2f3629;--ac:#9db368;--acTx:#141a0c;--err:#ff8a80;--hover:#1d221a;
  position:relative;min-height:100%;display:flex;align-items:stretch;justify-content:flex-start;padding:0;background:radial-gradient(120% 90% at 78% 50%,#141910 0,#0d0f0c 60%);color:var(--tx);overflow:hidden}
.login .arte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;pointer-events:none;user-select:none}
.login::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d0f0c 0,rgba(13,15,12,.94) 24%,rgba(13,15,12,.55) 44%,rgba(13,15,12,0) 68%);pointer-events:none}
.login-painel{position:relative;z-index:1;width:min(560px,100%);padding:clamp(24px,5vw,64px);display:flex;align-items:center}
.login-card{width:100%;max-width:400px;padding:30px;background:#000;border:1px solid color-mix(in srgb,var(--ac) 40%,var(--bd));border-radius:18px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 18px 50px rgba(0,0,0,.65)}
.login .marca.grande{color:var(--tx)}
.login input{background:#0c0e0a;border-color:#2a3024}
.login-lema{position:absolute;z-index:1;right:clamp(20px,4vw,56px);bottom:clamp(18px,4vh,40px);margin:0;max-width:340px;text-align:right;color:var(--ac);opacity:.7;font:12px/1.6 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:820px){
  .login{justify-content:center}
  .login .arte{opacity:.38;object-position:70% center}
  .login::before{background:rgba(13,15,12,.55)}
  .login-painel{padding:20px}
  .login-lema{display:none}
}

/* fundo da área central (conversa, topo e rodapé do campo): preto no tema escuro; o resto da interface mantém as cores atuais */
:root{--cen:var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-tema=light]){--cen:#131312}}
:root[data-tema=dark]{--cen:#131312}
.principal,.topo,.conversa,.compositor{background:var(--cen)}

/* engrenagem ao lado do título e painel de configurações (gaveta à direita) */
.lat-topo{gap:6px}
.lat-topo .marca{flex:1;min-width:0}
button.engrenagem{color:var(--mut);padding:6px}
button.engrenagem:hover{color:var(--ac);background:var(--hover)}
.config{position:fixed;top:0;right:0;bottom:0;z-index:25;width:min(440px,100%);background:var(--lat);border-left:1px solid var(--bd);display:flex;flex-direction:column;gap:6px;padding:16px 18px;overflow-y:auto;box-shadow:-18px 0 50px rgba(0,0,0,.35)}
.config[hidden],#fundo-config[hidden]{display:none!important}
#fundo-config{z-index:24}
.cfg-topo{display:flex;align-items:center;justify-content:space-between}
.cfg-topo h2{margin:0;font-size:18px}
.cfg-secao{border-top:1px solid var(--bd);padding-top:14px;margin-top:8px}
.cfg-secao h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.cfg-secao select,.cfg-secao input:not([type=checkbox]),.cfg-secao textarea{background:var(--card);width:100%;padding:9px 11px;border:1px solid var(--bd);border-radius:10px}
.cfg-secao textarea{min-height:200px;font:13px/1.5 ui-monospace,Menlo,monospace;resize:vertical}
.cfg-desc{margin:-6px 0 12px;font-size:13px}
.marca-check{display:flex;align-items:center;gap:8px;color:var(--tx)}
.marca-check input{width:auto;margin:0}