:root {
  --fundo: #07111f;
  --painel: #0c1a2e;
  --painel2: #102238;
  --linha: rgba(148, 178, 214, .14);
  --texto: #e9eff7;
  --suave: #8fa3bb;
  --fraco: #5d718a;
  --acento: #3d8bfd;
  --acento2: #7fb6ff;
  --ok: #34d399;
  --alerta: #fbbf24;
  --erro: #f87171;
  --raio: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* classes com display próprio (.fundo-modal é grid) venciam o atributo hidden e o modal "fechado" bloqueava os cliques */
[hidden] { display: none !important; }
html, body { height: 100%; }
body { background: var(--fundo); color: var(--texto); font: 14px/1.5 'Inter', system-ui, sans-serif; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; color: var(--texto); }

.marca { font-family: 'Sora', 'Inter', sans-serif; font-weight: 800; letter-spacing: .5px; }
.marca span { color: var(--acento); }
.marca small { display: block; font: 600 10px 'Inter', sans-serif; letter-spacing: 4px; color: var(--suave); margin-top: 2px; }

.btn { border: 1px solid var(--linha); background: var(--painel2); color: var(--texto); border-radius: 8px; padding: 8px 14px; white-space: nowrap; }
.btn:hover { border-color: rgba(148, 178, 214, .35); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.btn.primario:hover { background: #2f7bec; }
.btn.perigo { color: var(--erro); }
.btn.fino { padding: 5px 10px; font-size: 12px; }

.campo { width: 100%; background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; outline: none; }
.campo:focus { border-color: var(--acento); }
label.rotulo { display: block; font-size: 12px; color: var(--suave); margin: 14px 0 6px; }

/* ---------- login ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(700px 360px at 70% 30%, rgba(61,139,253,.14), transparent 60%), var(--fundo); }
.login form { width: 100%; max-width: 380px; background: var(--painel); border: 1px solid var(--linha); border-radius: 14px; padding: 28px; }
.login .marca { font-size: 26px; margin-bottom: 6px; }
.login p.sub { color: var(--suave); margin: 14px 0 6px; }
.login .btn.primario { width: 100%; margin-top: 20px; padding: 11px; }
.msg-erro { color: var(--erro); font-size: 13px; margin-top: 12px; min-height: 18px; }

/* ---------- app ---------- */
.app { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr; height: 100%; }
.topo { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--linha); background: var(--painel); }
.topo .marca { font-size: 18px; line-height: 1; }
.topo .titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.topo .titulo input { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; font-weight: 600; font-size: 15px; width: 100%; max-width: 420px; }
.topo .titulo input:hover, .topo .titulo input:focus { border-color: var(--linha); outline: none; }
.topo .acoes { display: flex; gap: 8px; align-items: center; }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--suave); white-space: nowrap; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--fraco); }
.status.ao-vivo i { background: var(--erro); box-shadow: 0 0 0 4px rgba(248,113,113,.18); animation: pulsa 1.4s infinite; }
.status.ao-vivo { color: var(--texto); }
@keyframes pulsa { 50% { box-shadow: 0 0 0 7px rgba(248,113,113,.05); } }

.niveis { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--suave); }
.nivel { display: flex; align-items: center; gap: 5px; }
.nivel b { display: block; width: 46px; height: 5px; background: var(--painel2); border-radius: 3px; overflow: hidden; }
.nivel b s { display: block; height: 100%; width: 0; background: var(--ok); transition: width .1s; }

.lateral { border-right: 1px solid var(--linha); padding: 14px; overflow-y: auto; background: var(--fundo); }
.lateral .btn { width: 100%; margin-bottom: 12px; }
.lista-reunioes { list-style: none; }
.lista-reunioes li { padding: 9px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 2px; }
.lista-reunioes li:hover { background: var(--painel); }
.lista-reunioes li.ativa { background: var(--painel2); }
.lista-reunioes li b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-reunioes li small { color: var(--fraco); font-size: 11px; }

.palco { display: grid; grid-template-columns: 1fr 400px; min-height: 0; }
.coluna { display: flex; flex-direction: column; min-height: 0; }
.coluna + .coluna { border-left: 1px solid var(--linha); background: var(--painel); }
.coluna h2 { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--suave); padding: 14px 18px 10px; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.rolagem { flex: 1; overflow-y: auto; padding: 0 18px 18px; }

.vazio { color: var(--fraco); text-align: center; padding: 40px 10px; font-size: 13px; }
.vazio strong { color: var(--suave); display: block; margin-bottom: 8px; font-size: 14px; }
.vazio ol { text-align: left; max-width: 420px; margin: 12px auto 0; padding-left: 18px; }
.vazio li { margin: 4px 0; }

.fala { display: flex; gap: 10px; margin: 10px 0; }
.fala .quem { flex: 0 0 52px; font-size: 11px; font-weight: 600; color: var(--fraco); padding-top: 3px; }
.fala .quem time { display: block; font-weight: 400; }
.fala p { flex: 1; }
.fala.eles .quem { color: var(--acento2); }
.fala.parcial p { color: var(--fraco); font-style: italic; }

.sugestao { background: var(--painel2); border: 1px solid var(--linha); border-left: 3px solid var(--acento); border-radius: var(--raio); padding: 12px 14px; margin-bottom: 10px; }
.sugestao.nova { animation: entra .35s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }
.sugestao .cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.etiqueta { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: rgba(61,139,253,.15); color: var(--acento2); }
.sugestao.objecao { border-left-color: var(--alerta); } .sugestao.objecao .etiqueta { background: rgba(251,191,36,.14); color: var(--alerta); }
.sugestao.preco, .sugestao.prazo { border-left-color: var(--erro); } .sugestao.preco .etiqueta, .sugestao.prazo .etiqueta { background: rgba(248,113,113,.14); color: var(--erro); }
.sugestao.concorrente { border-left-color: #a78bfa; } .sugestao.concorrente .etiqueta { background: rgba(167,139,250,.14); color: #c4b5fd; }
.sugestao.resposta { border-left-color: var(--ok); } .sugestao.resposta .etiqueta { background: rgba(52,211,153,.14); color: var(--ok); }
.sugestao .gatilho { color: var(--suave); font-size: 12px; font-style: italic; margin-bottom: 6px; }
.sugestao .texto { font-size: 14.5px; white-space: pre-wrap; }
.copiar { background: none; border: none; color: var(--fraco); font-size: 11px; }
.copiar:hover { color: var(--texto); }

.pensando { font-size: 12px; color: var(--suave); padding: 0 18px 8px; min-height: 26px; }
.pensando[hidden] { display: block !important; visibility: hidden; } /* guarda o espaço para a lista não pular */

.perguntar { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--linha); }
.perguntar input { flex: 1; }

.aviso-topo { background: rgba(251,191,36,.1); color: var(--alerta); border-bottom: 1px solid rgba(251,191,36,.2); padding: 8px 18px; font-size: 13px; grid-column: 1 / -1; }

/* modal */
.fundo-modal { position: fixed; inset: 0; background: rgba(2,8,16,.7); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto; background: var(--painel); border: 1px solid var(--linha); border-radius: 14px; padding: 22px; }
.modal h3 { font-size: 16px; margin-bottom: 4px; }
.modal .ajuda { color: var(--suave); font-size: 12.5px; }
.modal .rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal pre { white-space: pre-wrap; font: inherit; background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 14px; margin-top: 12px; }
.modal hr { border: none; border-top: 1px solid var(--linha); margin: 18px 0 4px; }

.so-celular { display: none; }

@media (max-width: 980px) {
  .app { display: flex; flex-direction: column; height: 100dvh; }
  .palco { flex: 1; min-height: 0; }
  .lateral { display: none; border-right: none; border-bottom: 1px solid var(--linha); max-height: 40vh; }
  .lateral.aberta { display: block; }
  .so-celular { display: inline-flex; }
  .palco { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .coluna + .coluna { border-left: none; border-top: 1px solid var(--linha); }
  .topo { flex-wrap: wrap; padding: 10px 16px; }
  .topo .titulo { order: 3; flex-basis: 100%; }
  .niveis { display: none; }
  .rolagem, .coluna h2, .perguntar, .pensando { padding-left: 16px; padding-right: 16px; }
}