/* guia/web/painel.css — estilos do painel não-modal do agente-guia (FONTE ÚNICA).
   Consumido por qualquer camada que incluir painel.js via <link rel="stylesheet">.
   Sem ?guia= na URL o painel não é injetado, então estas regras ficam inativas. */

/* ── Painel do guia (não-modal, persistente) ───────────────────────── */
#painelGuia {
  position: fixed;
  top: 60px;
  right: 16px;
  width: 280px;
  height: 40vh;
  background: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  font-size: 13px;
  line-height: 1.4;
  z-index: 500;
  display: none;
  flex-direction: column;
}
#painelGuia.ativo { display: flex; }
#painelGuia .pg-cabecalho {
  font-weight: 700;
  font-size: 12px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  padding: 10px 12px 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
  cursor: move;
  flex-shrink: 0;
}
#painelGuia .pg-corpo {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 8px 12px 10px;
}
/* Handle de resize no canto inferior-direito */
#painelGuia .pg-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  flex-shrink: 0;
}
#painelGuia .pg-vazio {
  color: #888;
  font-style: italic;
  font-size: 12px;
}
#painelGuia .pg-msg {
  background: #f0f4ff;
  border-left: 3px solid #1565c0;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 4px;
}
#painelGuia .pg-msg.dica   { background: #f0f4ff; border-left-color: #1565c0; }
#painelGuia .pg-msg.info   { background: #f5f5f5; border-left-color: #888; }
#painelGuia .pg-msg.alerta { background: #fff3e0; border-left-color: #f57c00; }
#painelGuia .pg-msg-texto { color: #222; }
#painelGuia .pg-msg-meta {
  font-size: 10px;
  color: #888;
  margin-top: 4px;
}

/* Viewport estreito (< 900px) — encolhe o painel pra não cobrir
   painéis laterais de edição (L3 tem painel direito ~340px; L2_box
   tem painel ~200px). Em telas pequenas o painel vira tira fina no
   canto. */
@media (max-width: 900px) {
  #painelGuia { width: 200px; font-size: 12px; }
  #painelGuia .pg-cabecalho { font-size: 11px; margin-bottom: 6px; }
  #painelGuia .pg-msg { padding: 6px 8px; margin-bottom: 6px; }
  #painelGuia .pg-msg-meta { font-size: 9px; }
}

/* ─── Tema escuro override — coerente com copiloto.css ────────────────
   Override de cores chave pro painel ler bem em UI dark. Mantém estrutura
   light original; sobrescreve só backgrounds e textos pra contraste. */
#painelGuia {
  background: #1f1f2e;
  color: #e0e0e0;
  border-color: #2a3d6a;
}
#painelGuia .pg-cabecalho {
  background: #16213e;
  color: #d0d8f0;
  border-bottom-color: #0f3460;
}
#painelGuia .pg-vazio { color: #b0b0b0; }
#painelGuia .pg-msg {
  background: #1a2d50;
  border-left-color: #00b4d8;
}
#painelGuia .pg-msg.dica {
  background: #0f3460;
  border-left-color: #00b4d8;
}
#painelGuia .pg-msg.info {
  background: #1a2d50;
  border-left-color: #6a7a9a;
}
#painelGuia .pg-msg.alerta {
  background: #3e2a14;
  border-left-color: #f57c00;
}
#painelGuia .pg-msg.dica .pg-msg-texto   { color: #e0e0e0; }
#painelGuia .pg-msg.info .pg-msg-texto   { color: #b0b0b0; }
#painelGuia .pg-msg.alerta .pg-msg-texto { color: #ffb74d; }
#painelGuia .pg-msg-texto { color: #e0e0e0; }
#painelGuia .pg-msg-meta  { color: #8090b0; }