/* =============================================================================
   praxIAtech · app.css — console da banca
   Mesma paleta 60/30/10 da vitrine. Layout de trabalho, não de folheto.
   ========================================================================== */

html, body { height: 100%; }
body.app { background: var(--marinho); overflow: hidden; }

/* ---------------------------------------------------------------- portaria */
.portaria{
  min-height:100dvh; display:grid; place-items:center; padding:28px 20px;
  background:
    radial-gradient(880px 460px at 78% -8%, rgba(30,79,163,.5), transparent 62%),
    radial-gradient(560px 320px at 8% 106%, rgba(232,145,42,.14), transparent 60%),
    linear-gradient(168deg, var(--marinho) 0%, #0A1729 100%);
  overflow-y:auto;
}
.portaria-caixa{
  width:100%; max-width:470px; background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.13); border-radius:18px;
  padding:clamp(30px,5vw,44px); box-shadow:var(--sombra-alta); backdrop-filter:blur(10px);
}
.portaria .marca{ justify-content:center; margin-bottom:26px; }
.portaria h1{ color:var(--gelo); font-size:1.55rem; text-align:center; margin-bottom:8px; }
.portaria .sub{ color:#9DB0CC; font-size:14.2px; text-align:center; margin-bottom:28px; line-height:1.65; }

.codigo-campo{
  width:100%; padding:18px 16px; border-radius:11px; text-align:center;
  font-family:var(--mono); font-size:23px; letter-spacing:4px; font-weight:700; text-transform:uppercase;
  background:rgba(255,255,255,.07); border:2px dashed rgba(232,145,42,.5); color:var(--gelo);
  transition:var(--transicao);
}
.codigo-campo::placeholder{ color:#5C74A0; letter-spacing:3px; font-weight:400; }
.codigo-campo:focus{ outline:none; border-color:var(--ambar); background:rgba(255,255,255,.1); }

.abas{ display:flex; gap:6px; background:rgba(0,0,0,.24); border-radius:11px; padding:5px; margin-bottom:26px; }
.aba{
  flex:1; padding:11px 12px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:#9DB0CC; font-family:var(--sans); font-size:13.5px; font-weight:600;
  transition:var(--transicao);
}
.aba.ativa{ background:var(--ambar); color:var(--marinho); }
.painel-aba{ display:none; }
.painel-aba.ativa{ display:block; }

.portaria .btn{ width:100%; margin-top:18px; }
.portaria .rodape-link{ text-align:center; margin-top:22px; font-size:13px; color:#7189AB; }
.portaria .rodape-link a{ color:var(--ambar); }

/* ------------------------------------------------------------------ console */
.console{ display:grid; grid-template-columns:296px 1fr; height:100dvh; background:var(--gelo); }

.lateral{
  background:var(--marinho); color:#C7D4E8; display:flex; flex-direction:column;
  border-right:1px solid rgba(255,255,255,.08); overflow:hidden;
}
.lateral-topo{ padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.1); }
.lateral-topo .marca .nome{ font-size:18px; }

.saldo{
  margin:16px 20px; padding:14px 16px; border-radius:11px;
  background:rgba(232,145,42,.12); border:1px solid rgba(232,145,42,.3);
}
.saldo .lbl{ font-size:10.5px; letter-spacing:1.7px; text-transform:uppercase; color:#F3C58C; }
.saldo .val{ font-family:var(--serif); font-size:1.55rem; color:var(--gelo); line-height:1.2; }
.saldo .obs{ font-size:11.8px; color:#9DB0CC; margin-top:2px; }
.barra{ height:4px; background:rgba(255,255,255,.13); border-radius:3px; margin-top:10px; overflow:hidden; }
.barra i{ display:block; height:100%; background:var(--ambar); border-radius:3px; transition:width .4s ease; }

.cadeiras{ flex:1; overflow-y:auto; padding:6px 12px 18px; }
.cadeiras::-webkit-scrollbar{ width:7px; }
.cadeiras::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:4px; }
.zona-tit{
  font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#6B7E9B;
  padding:16px 10px 7px; font-weight:700;
}
.cadeira{
  display:block; width:100%; text-align:left; border:0; cursor:pointer;
  background:transparent; color:#C7D4E8; padding:10px 12px; border-radius:9px;
  font-family:var(--sans); font-size:13.6px; line-height:1.35; transition:var(--transicao);
  border-left:3px solid transparent;
}
.cadeira:hover{ background:rgba(255,255,255,.06); color:var(--gelo); }
.cadeira.ativa{ background:rgba(232,145,42,.15); color:var(--gelo); border-left-color:var(--ambar); }
.cadeira b{ display:block; font-weight:600; }
.cadeira span{ font-size:11.4px; color:#7E92B2; display:block; margin-top:1px; }
.cadeira.ativa span{ color:#B7C7DF; }

.lateral-pe{ padding:14px 20px; border-top:1px solid rgba(255,255,255,.1); display:flex; gap:10px; align-items:center; }
.lateral-pe button{
  background:transparent; border:1px solid rgba(255,255,255,.2); color:#9DB0CC;
  border-radius:7px; padding:8px 13px; font-size:12.5px; cursor:pointer; font-family:var(--sans);
  transition:var(--transicao);
}
.lateral-pe button:hover{ border-color:var(--ambar); color:var(--ambar); }

/* --------------------------------------------------------------- área de fala */
.palco{ display:flex; flex-direction:column; height:100dvh; overflow:hidden; background:var(--gelo); }

.palco-topo{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 26px; background:var(--gelo-puro); border-bottom:var(--borda); flex:none;
}
.palco-topo h2{ font-size:1.08rem; margin:0; }
.palco-topo .meta{ font-size:12px; color:var(--grafite-tenue); }
.pill{
  font-size:11px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; background:var(--ambar-veu); color:var(--ambar-forte);
  border:1px solid rgba(232,145,42,.32); white-space:nowrap;
}
.abre-lateral{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.abre-lateral span{ display:block; width:22px; height:2px; background:var(--marinho); margin:5px 0; }

.fluxo{ flex:1; overflow-y:auto; padding:28px 26px 10px; scroll-behavior:smooth; }
.fluxo-env{ max-width:820px; margin:0 auto; }

.fala{ display:flex; gap:14px; margin-bottom:26px; align-items:flex-start; }
.fala .av{
  width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  font-family:var(--serif); font-size:14px; font-weight:700;
}
.fala.eu .av{ background:var(--cobalto); color:#fff; }
.fala.ia .av{ background:var(--marinho); color:var(--ambar); }
.fala .corpo{ flex:1; min-width:0; }
.fala .quem{ font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--grafite-tenue); margin-bottom:6px; }
.bolha{
  background:var(--gelo-puro); border:var(--borda); border-radius:12px;
  padding:18px 22px; font-size:15.4px; line-height:1.75; color:var(--grafite);
  overflow-wrap:break-word;
}
.fala.eu .bolha{ background:#EAF0FA; border-color:#D3DEF1; }
.bolha > *:first-child{ margin-top:0; }
.bolha > *:last-child{ margin-bottom:0; }
.bolha h1,.bolha h2,.bolha h3,.bolha h4{ font-size:1.06rem; margin:20px 0 9px; color:var(--marinho); }
.bolha p{ margin:0 0 .85em; }
.bolha ul,.bolha ol{ margin:0 0 .9em; padding-left:22px; }
.bolha li{ margin-bottom:6px; }
.bolha strong{ color:var(--marinho); font-weight:650; }
.bolha code{ font-family:var(--mono); font-size:.88em; background:#EEF1F6; padding:2px 6px; border-radius:4px; color:var(--cobalto); }
.bolha pre{ background:var(--marinho); color:#D7E2F2; padding:16px; border-radius:9px; overflow-x:auto; font-size:13px; }
.bolha pre code{ background:none; color:inherit; padding:0; }
.bolha blockquote{ border-left:3px solid var(--ambar); margin:0 0 .9em; padding-left:16px; color:var(--grafite-sub); font-style:italic; }
.bolha table{ width:100%; border-collapse:collapse; margin:0 0 1em; font-size:14px; }
.bolha th{ background:var(--marinho); color:var(--gelo); text-align:left; padding:9px 12px; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; }
.bolha td{ padding:9px 12px; border-top:1px solid var(--gelo-linha); }
.bolha hr{ border:0; border-top:1px solid var(--gelo-linha); margin:18px 0; }
.marca-trab{ background:var(--ambar-veu); color:var(--ambar-forte); font-weight:700; padding:1px 6px; border-radius:4px; font-family:var(--mono); font-size:.86em; }

/* -------------------------------------------------------------- laudo inline */
.nota-fim{ margin-top:10px; padding:8px 10px; border-left:3px solid var(--ambar-forte,#E8912A); background:var(--ambar-veu,#FBEFDD); font-size:.9em; }
.laudo{
  margin-bottom:10px; border-radius:10px; padding:11px 15px; font-size:12.6px;
  border:1px solid; display:flex; gap:11px; align-items:flex-start; line-height:1.6;
}
.laudo b{ font-family:var(--mono); font-size:11px; letter-spacing:1px; flex:none; padding-top:1px; }
.laudo.l-VERDE   { background:#EDF6EF; border-color:#C6E3CE; color:#1B6B36; }
.laudo.l-AZUL    { background:#EDF2FB; border-color:#CBDBF3; color:#1B4A8F; }
.laudo.l-AMARELO { background:#FBF4E3; border-color:#EDDCB4; color:#8A6516; }
.laudo.l-LARANJA { background:#FCF0E3; border-color:#F0D5B4; color:#94550F; }
.laudo.l-VERMELHO{ background:#FBECEC; border-color:#EFCACA; color:#8A1C1C; }

/* --------------------------------------------------------------- digitando */
.pensando{ display:flex; gap:6px; padding:6px 0; }
.pensando i{
  width:7px; height:7px; border-radius:50%; background:var(--grafite-tenue);
  animation:salto 1.3s ease-in-out infinite;
}
.pensando i:nth-child(2){ animation-delay:.18s; }
.pensando i:nth-child(3){ animation-delay:.36s; }
@keyframes salto{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-6px); opacity:1 } }
.cursor::after{ content:"▍"; color:var(--ambar); animation:pisca-c .9s step-end infinite; }
@keyframes pisca-c{ 50%{ opacity:0 } }

/* ------------------------------------------------------------------ entrada */
.compositor{ flex:none; padding:14px 26px 20px; background:var(--gelo); border-top:var(--borda); }
.compositor-env{ max-width:820px; margin:0 auto; }
.caixa-texto{
  background:var(--gelo-puro); border:1.5px solid var(--gelo-linha); border-radius:13px;
  padding:12px 14px; transition:var(--transicao); box-shadow:0 1px 2px rgba(11,27,51,.05);
}
.caixa-texto:focus-within{ border-color:var(--cobalto); box-shadow:0 0 0 3px rgba(30,79,163,.1); }
.caixa-texto textarea{
  width:100%; border:0; outline:none; resize:none; background:transparent;
  font-family:var(--sans); font-size:15.4px; line-height:1.65; color:var(--grafite);
  max-height:230px; min-height:26px;
}
.caixa-texto textarea::placeholder{ color:var(--grafite-tenue); }
.compositor-pe{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:10px; }
.dica{ font-size:11.8px; color:var(--grafite-tenue); }
.enviar{
  background:var(--ambar); color:var(--marinho); border:0; border-radius:9px;
  padding:11px 22px; font-family:var(--sans); font-size:14px; font-weight:700; cursor:pointer;
  transition:var(--transicao); display:inline-flex; align-items:center; gap:8px;
}
.enviar:hover:not([disabled]){ background:#F0A245; transform:translateY(-1px); }
.enviar[disabled]{ opacity:.5; cursor:not-allowed; }

.aviso-fim{
  margin:0 auto 12px; max-width:820px; border-radius:10px; padding:14px 18px;
  background:#FCF0E3; border:1px solid #F0D5B4; color:#94550F; font-size:14px; display:none;
}
.aviso-fim.ver{ display:block; }
.aviso-fim a{ color:var(--ambar-forte); font-weight:700; text-decoration:underline; }

/* ----------------------------------------------------------------- sugestões */
.sugestoes{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); margin-top:22px; }
.sugestao{
  text-align:left; background:var(--gelo-puro); border:var(--borda); border-radius:11px;
  padding:15px 17px; cursor:pointer; transition:var(--transicao); font-family:var(--sans);
}
.sugestao:hover{ border-color:var(--cobalto); transform:translateY(-2px); box-shadow:var(--sombra); }
.sugestao b{ display:block; font-size:14px; color:var(--marinho); margin-bottom:4px; }
.sugestao span{ font-size:12.7px; color:var(--grafite-sub); line-height:1.55; }

.abertura{ text-align:center; padding:34px 0 10px; }
.abertura h2{ font-size:1.6rem; margin-bottom:10px; }
.abertura p{ color:var(--grafite-sub); max-width:56ch; margin:0 auto; font-size:15px; }

/* -------------------------------------------------------------- responsivo */
@media (max-width:900px){
  .console{ grid-template-columns:1fr; }
  .lateral{
    position:fixed; inset:0 auto 0 0; width:284px; z-index:60;
    transform:translateX(-100%); transition:transform .28s ease;
  }
  .lateral.aberta{ transform:none; box-shadow:0 0 60px rgba(0,0,0,.5); }
  .abre-lateral{ display:block; }
  .veu{ position:fixed; inset:0; background:rgba(11,27,51,.55); z-index:50; display:none; }
  .veu.ver{ display:block; }
  .fluxo, .compositor{ padding-left:18px; padding-right:18px; }
  .sugestoes{ grid-template-columns:1fr; }
}