/*
===============================================================================
  GENESIS AI v2.0 // JARVIS EDITION
===============================================================================
  Arquivo: css/styles.css
  Descrição: Estilos visuais completos da interface Jarvis HUD
  Versão: 2.0.0

  ORGANIZAÇÃO DO CSS:
  1. VARIÁVEIS CSS (cores configuráveis via :root)
  2. RESET E BASE (*, body, background layers)
  3. EFEITOS DE FUNDO (grid, scanlines, gradientes)
  4. HUD TOPO (cabeçalho com logo e status)
  5. HUDs LATERAIS (esquerdo/direito)
  6. MÉTRICAS E ALERTAS
  7. CHAT E MENSAGENS
  8. HUD INFERIOR (input bar)
  9. BOTÕES DE CONTROLE
  10. VISUALIZADOR DE ÁUDIO
  11. NOTIFICAÇÕES E STATUS
  12. MODAL DE CONFIGURAÇÕES
  13. COMPARTILHAMENTO DE TELA
  14. SCROLLBARS
  15. RESPONSIVO E MODOS ALTERNATIVOS

  DICA: Para mudar o tema rapidamente, altere apenas as variáveis
  em :root na seção 1. Tudo o mais se adapta automaticamente.
*/


/* ==========================================================================
   FONTE OFICIAL DA MARCA - Johnny Fever (mesma fonte usada na logo)
   Carregada do diretório /fonts via @font-face para uso em qualquer
   elemento com a classe .brand-text ou .logo-text
   ========================================================================== */
@font-face {
  font-family: 'Johnny Fever';
  src: url('../fonts/johnny-fever.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Classe utilitária reusada nos pontos da UI que renderizam o nome da marca.
   `scaleY(0.8)` deixa a letra 20% achatada verticalmente, igual à arte
   oficial da logo Genesis (a fonte original é mais "alta" que o brand). */
.brand-text,
.logo-text {
  font-family: 'Johnny Fever', 'Orbitron', sans-serif;
  letter-spacing: 3px;
  text-transform: none;
  user-select: none;
  display: inline-block;
  transform: scaleY(0.8);
  transform-origin: center center;
}


/* ==========================================================================
   1. VARIÁVEIS CSS GLOBAIS
   Alterando aqui muda todo o tema visual da aplicação
   ========================================================================== */
:root{
  --pri: #00f0ff;      /* Cor primária - ciano neon (HUD, bordas, textos) */
  --sec: #ff00ff;      /* Cor secundária - magenta (acentos, gradientes) */
  --bg: #000000;       /* Fundo principal - preto puro (campo estrelar) */
  --user: #ff00ff;     /* Cor das mensagens do usuário */
  --ai: #00f0ff;       /* Cor das mensagens da IA */
  --iauser: #829e91;   /* Cor unificada IA+User (modo combinado) */
  --wave: #00f0ff;     /* Cor do visualizador de áudio */
  --imgbg: #ffffff;    /* Cor de fundo de imagens customizadas */
  --glow: 0 0 10px var(--pri);  /* Sombra/brilho padrão usado em vários elementos */
}


/* ==========================================================================
   2. RESET E BASE
   Remove margens/paddings padrão e define fonte global
   ========================================================================== */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rajdhani', sans-serif;  /* Fonte principal - condensada futurista */
}

body{
  background: var(--bg);
  color: var(--pri);
  overflow: hidden;      /* Remove scroll do body - HUD é fixo */
  height: 100vh;
  user-select: none;     /* Impede seleção de texto acidental nos HUDs */
}


/* ==========================================================================
   3. EFEITOS DE FUNDO HOLOGRÁFICOS
   Múltiplas camadas sobrepostas criam o efeito sci-fi de profundidade
   ========================================================================== */

/* Camada 1: Gradiente radial sutilíssimo (quase imperceptível)
   Dá leve profundidade sem comprometer o fundo preto estrelar */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,30,60,.3), transparent 80%);
}

/* Camada 2: Scanlines muito sutis (efeito CRT suave) */
body::after{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,240,255,.015) 0,
    rgba(0,240,255,.015) 1px,
    transparent 1px,
    transparent 4px
  );
  animation: scan 8s linear infinite;
}

/* Animação: faz as scanlines "rolarem" para baixo */
@keyframes scan{
  to { background-position: 0 100px; }
}

/* Grade holográfica quase invisível (só aparece em certos ângulos) */
.grid-bg{
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(0,240,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.02) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: gm 30s linear infinite;
}

/* Animação: grade se desloca lentamente criando movimento sutil */
@keyframes gm{
  to { background-position: 50px 50px; }
}

/* Canvas do Three.js onde a esfera é renderizada */
#three-canvas{
  position: fixed;
  inset: 0;
  z-index: 3;
}


/* ==========================================================================
   4. HUD TOPO - Cabeçalho superior
   ========================================================================== */
.hud-top{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 10;
  background: linear-gradient(180deg, rgba(0,20,40,.9), transparent);
  border-bottom: 1px solid rgba(0,240,255,.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  backdrop-filter: blur(10px);  /* Desfoque atrás do HUD (glassmorphism) */
}

/* Logotipo Genesis (fallback para texto, sem efeito de brilho) */
.logo{
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: var(--pri);
  letter-spacing: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;                      /* espaço entre o ícone IA e o texto Genesis */
  text-decoration: none;
}

/* ÍCONE IA (imagem redonda à esquerda do texto Genesis)
   Aparece em todos os pontos onde a logo é renderizada: header desktop,
   header mobile, drawer head e drawer footer. A cor da borda acompanha
   o tema (ciano no escuro, preto no claro). */
.logo-icon{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--pri, #00f0ff);
  object-fit: cover;
  background: #000;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}
.m-logo .logo-icon         { width: 30px; height: 30px; border-width: 1.5px; }
.drawer-head .logo .logo-icon { width: 34px; height: 34px; }
.drawer-foot-icon          { width: 32px; height: 32px; }

/* Parte .AI do logo em magenta (fallback texto, sem brilho) */
.logo span{
  color: var(--sec);
}

/* Imagem do logo Genesis (oficial) */
.logo-img{
  height: 38px;                    /* Altura fixa no HUD topo */
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(0,240,255,.4));  /* Glow ciano discreto */
  transition: filter .3s, transform .3s;
}
.logo:hover .logo-img{
  filter: drop-shadow(0 0 14px rgba(0,240,255,.7));
  transform: scale(1.02);
}

/* ==========================================================================
   LOGO EM TEXTO - usa fonte Johnny Fever (mesma fonte da arte oficial)
   Aplicada nos quatro pontos onde antes ficava a imagem da logo:
   .logo (header desktop), .m-logo (mobile header), .drawer-head .logo,
   .drawer-foot-logo
   ========================================================================== */

/* Header desktop - destaque maior, SEM brilho/glow (estilo limpo) */
.logo .logo-text{
  font-family: 'Johnny Fever', 'Orbitron', sans-serif;
  font-size: 42px;
  letter-spacing: 4px;
  color: var(--pri);
  line-height: 1;
  transition: transform .3s;
}
.logo:hover .logo-text{
  transform: scale(1.02);
}

/* Mobile header (.m-logo) - mais compacto, sem brilho */
.m-logo .logo-text{
  font-family: 'Johnny Fever', 'Orbitron', sans-serif;
  font-size: 26px;
  letter-spacing: 2.5px;
  color: var(--pri);
  line-height: 1;
}

/* Drawer header - tamanho médio, sem brilho */
.drawer-head .logo .logo-text{
  font-family: 'Johnny Fever', 'Orbitron', sans-serif;
  font-size: 32px;
  letter-spacing: 3px;
  color: var(--pri);
  line-height: 1;
}

/* Drawer footer - apresentação institucional, sem brilho.
   Sobrescreve max-width/width/filter herdados do mobile.css (eram para <img>) */
.drawer-foot-logo.logo-text{
  font-family: 'Johnny Fever', 'Orbitron', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
  color: var(--pri);
  line-height: 1;
  max-width: none;
  width: auto;
  height: auto;
  filter: none;
  opacity: 1;
  display: inline-block;
}

/* Responsivo - reduz fonte da logo do header desktop em telas estreitas */
@media (max-width: 768px){
  .logo .logo-text{ font-size: 28px; letter-spacing: 3px; }

  /* MOBILE TEMA ESCURO - garante ciano na logo Genesis.
     Usa body:not(.light-theme) para só atuar quando o tema escuro está ativo. */
  body:not(.light-theme) .m-logo,
  body:not(.light-theme) .m-logo .logo-text,
  body:not(.light-theme) .drawer-head .logo,
  body:not(.light-theme) .drawer-head .logo .logo-text,
  body:not(.light-theme) .drawer-foot-logo,
  body:not(.light-theme) .drawer-foot-logo.logo-text,
  body:not(.light-theme) .logo .logo-text{
    color: #00f0ff;
  }
  body:not(.light-theme) .logo span,
  body:not(.light-theme) .m-logo span{
    color: #00f0ff;
  }
  /* Mobile escuro: garante borda ciano no ícone IA */
  body:not(.light-theme) .logo-icon{
    border-color: #00f0ff;
  }
}

/* Cobertura via classe is-mobile (mobile.js seta no <html>) para
   tablets/celulares que tenham viewport maior que 768px */
html.is-mobile body:not(.light-theme) .m-logo,
html.is-mobile body:not(.light-theme) .m-logo .logo-text,
html.is-mobile body:not(.light-theme) .drawer-head .logo,
html.is-mobile body:not(.light-theme) .drawer-head .logo .logo-text,
html.is-mobile body:not(.light-theme) .drawer-foot-logo,
html.is-mobile body:not(.light-theme) .drawer-foot-logo.logo-text,
html.is-mobile body:not(.light-theme) .logo .logo-text{
  color: #00f0ff;
}

/* Container direito do HUD topo (badges + relógio + fullscreen) */
.hud-top-r{
  display: flex;
  gap: 18px;
  align-items: center;
  font-family: 'Orbitron';
  font-size: 11px;
  letter-spacing: 2px;
}

/* Badge: conjunto dot + texto (status online, modo IA) */
.badge{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ponto luminoso pulsante (indicador de status) */
.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0f8;             /* Verde por padrão (online) */
  box-shadow: 0 0 10px #0f8;
  animation: pulse 2s infinite; /* Pulsação contínua */
}

/* Animação: dot pulsa mudando escala e opacidade */
@keyframes pulse{
  50% {
    opacity: .5;
    transform: scale(1.2);
  }
}

/* Relógio digital com brilho */
.clock{
  font-size: 14px;
  color: var(--pri);
  text-shadow: 0 0 8px var(--pri);
}

/* Data abaixo do relógio (menor e discreta) */
.date-info{
  font-size: 10px;
  opacity: .7;
}


/* ==========================================================================
   5. HUDs LATERAIS (Esquerdo = módulos, Direito = métricas)
   ========================================================================== */

/* Painel lateral esquerdo - Módulos IA e Controles */
.hud-left{
  position: fixed;
  left: 0;
  top: 60px;       /* Inicia abaixo do HUD topo */
  bottom: 90px;    /* Termina acima do HUD inferior */
  width: 230px;
  z-index: 10;
  background: linear-gradient(90deg, rgba(0,20,40,.85), transparent);
  border-right: 1px solid rgba(0,240,255,.3);
  padding: 18px;
  backdrop-filter: blur(10px);
  overflow-y: auto;  /* Scroll se houver muitos botões */
}

/* Painel lateral direito - Métricas, Alertas, Log */
.hud-right{
  position: fixed;
  right: 0;
  top: 60px;
  bottom: 90px;
  width: 270px;    /* Um pouco mais largo para acomodar métricas */
  z-index: 10;
  background: linear-gradient(-90deg, rgba(0,20,40,.85), transparent);
  border-left: 1px solid rgba(0,240,255,.3);
  padding: 18px;
  backdrop-filter: blur(10px);
  overflow-y: auto;
}

/* Título das seções nos HUDs laterais (ex: "▸ MÓDULOS IA") */
.hud-title{
  font-family: 'Orbitron';
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--pri);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,240,255,.3);
}

/* Botão de módulo (usado em todos os controles laterais) */
.module-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  background: rgba(0,240,255,.05);
  border: 1px solid rgba(0,240,255,.2);
  color: var(--pri);
  margin-bottom: 6px;
  cursor: pointer;
  transition: .3s;
  font-family: 'Rajdhani';
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: 4px;
  text-align: left;
}

/* Hover: brilho e deslocamento lateral */
.module-btn:hover{
  background: rgba(0,240,255,.15);
  border-color: var(--pri);
  box-shadow: 0 0 15px rgba(0,240,255,.4);
  transform: translateX(4px);
}

/* Botão ativo (módulo selecionado) - muda para magenta */
.module-btn.active{
  background: rgba(255,0,255,.15);
  border-color: var(--sec);
  color: var(--sec);
}

/* Ícone emoji/símbolo antes do texto do botão */
.icon{
  font-size: 16px;
}

/* ==========================================================================
   ÍCONES SVG DOS MÓDULOS / CONTROLES (HUD lateral esquerdo)
   Line-art ciano translúcido similar ao botão Enviar
   ========================================================================== */
.mod-icon{
  width: 20px;
  height: 20px;
  stroke: var(--pri);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.45));
  transition: stroke .25s, filter .25s, transform .25s;
}
.module-btn:hover .mod-icon{
  stroke: #80fbff;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.9));
  transform: scale(1.08);
}
.mod-label{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   BOTÃO DE COLAPSAR/MINIMIZAR MENU LATERAL
   ========================================================================== */
.hud-collapse-btn{
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  cursor: pointer;
  color: var(--pri);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, box-shadow .2s, transform .3s;
}
.hud-collapse-btn:hover{
  background: rgba(0, 240, 255, 0.18);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}
.hud-collapse-btn .mod-icon{
  width: 18px;
  height: 18px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.hud-left.collapsed .hud-collapse-btn .mod-icon{
  transform: rotate(180deg);
}

/* ==========================================================================
   ESTADO COLAPSADO DO HUD LATERAL ESQUERDO
   (largura reduzida, só ícones visíveis, tooltip no hover)
   ========================================================================== */
.hud-left{
  transition: width .3s cubic-bezier(.4,0,.2,1), padding .3s;
}
.hud-left.collapsed{
  width: 62px;
  padding: 18px 8px;
}
.hud-left.collapsed .hud-title{
  display: none;
}
.hud-left.collapsed .mod-label{
  display: none;
}
.hud-left.collapsed .module-btn{
  justify-content: center;
  padding: 10px 6px;
  position: relative;
}
.hud-left.collapsed .module-btn:hover{
  transform: none;  /* desabilita slide horizontal quando colapsado */
}
/* Tooltip global flutuante usado pelo HUD lateral colapsado.
   O elemento #hudTooltip vive no <body>, fora do contexto de overflow
   dos HUDs, permitindo que apareça fora da área scrollável.
   Posicionamento é feito via JS. Visual igual ao da toolbar superior. */
.hud-floating-tooltip{
  position: fixed;
  z-index: 9999;
  background: rgba(0, 10, 25, 0.96);
  border: 1px solid rgba(0, 240, 255, 0.55);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pri);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease-out;
}
.hud-floating-tooltip.visible{ opacity: 1; }
/* Setinha do tooltip (varia de lado conforme direção) */
.hud-floating-tooltip::before{
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(0, 10, 25, 0.96);
  border: 1px solid rgba(0, 240, 255, 0.55);
}
.hud-floating-tooltip[data-side="right"]::before{
  left: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-top: none;
  border-right: none;
}
.hud-floating-tooltip[data-side="left"]::before{
  right: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: none;
  border-left: none;
}
/* Tema claro */
body.light-theme .hud-floating-tooltip{
  background: rgba(255, 255, 255, 0.98);
  border-color: #0088c8;
  color: #003a5c;
  box-shadow: 0 4px 16px rgba(0, 136, 200, 0.25);
}
body.light-theme .hud-floating-tooltip::before{
  background: rgba(255, 255, 255, 0.98);
  border-color: #0088c8;
}

/* Ajusta chat quando menu lateral está colapsado */
body.hud-left-collapsed .chat-container{
  left: 80px !important;
}

/* ==========================================================================
   ÍCONES DAS SEÇÕES DO HUD DIREITO (STATUS, ALERTAS, LOG, HISTÓRICO)
   ========================================================================== */
.section-icon{
  width: 18px;
  height: 18px;
  stroke: var(--pri);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.45));
  display: none;   /* Só aparece no estado colapsado */
}
.hud-right.collapsed .section-icon{
  display: block;
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   ESTADO COLAPSADO DO HUD LATERAL DIREITO
   ========================================================================== */
.hud-right{
  transition: width .3s cubic-bezier(.4,0,.2,1), padding .3s;
}
.hud-right.collapsed{
  width: 62px;
  padding: 18px 8px;
}
/* Esconde conteúdo textual e dados */
.hud-right.collapsed .section-label,
.hud-right.collapsed .metric,
.hud-right.collapsed #alertsBox,
.hud-right.collapsed .log-box,
.hud-right.collapsed .hist-search-wrap,
.hud-right.collapsed .hist-list,
.hud-right.collapsed .hist-new-btn{
  display: none;
}
/* Títulos viram apenas containers de ícones centralizados */
.hud-right.collapsed .hud-title{
  display: flex !important;
  justify-content: center;
  padding: 14px 0;
  margin: 8px 0;
  border-bottom: 1px solid rgba(0,240,255,.15);
  position: relative;
  cursor: pointer;
  transition: background .2s;
  border-radius: 6px;
}
.hud-right.collapsed .hud-title:hover{
  background: rgba(0,240,255,.08);
  box-shadow: 0 0 10px rgba(0,240,255,.25);
}
/* Tooltip do HUD direito colapsado usa o mesmo .hud-floating-tooltip
   global (declarado em outro bloco) — sem CSS ::after porque o overflow
   do .hud-right cortaria o tooltip dentro do contêiner scrollável. */
@keyframes fadeInTipLeft{
  from { opacity: 0; transform: translateY(-50%) translateX(6px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* Botão de minimizar à direita rotaciona 180° quando colapsado */
.hud-right.collapsed .hud-collapse-btn .mod-icon{
  transform: rotate(180deg);
}

/* Ajusta chat quando painel direito está colapsado */
body.hud-right-collapsed .chat-container{
  right: 80px !important;
}

/* ==========================================================================
   MODO CHAT-FOCUS (compacto)
   Ativado ao clicar no botão "Chat" 2x. Esfera 3D encolhe para 10%
   e o chat ganha mais espaço vertical. Textos ficam maiores e mais legíveis.
   ========================================================================== */
body.chat-focus #three-canvas{
  transform: scale(0.127);          /* +15% sobre 0.11 (0.11 × 1.15 ≈ 0.127) */
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}

/* Chat ocupa quase toda a tela (mais espaço vertical) */
body.chat-focus .chat-container{
  top: 62px !important;
  bottom: 100px !important;
}

/* Mensagens maiores e com mais espaçamento para melhor leitura */
body.chat-focus .msg{
  font-size: 16px;
  line-height: 1.55;
  padding: 13px 20px;
  max-width: 80%;
}
body.chat-focus .msg.system{
  font-size: 12px;
}

/* Input aumentado para digitação confortável */
body.chat-focus #cmdInput{
  font-size: 17px;
  padding: 18px 22px;
}

/* Status "AGUARDANDO COMANDO" dimmer (esfera é pequena, status secundário) */
body.chat-focus .ai-status-text{
  opacity: 0.5;
  font-size: 10px;
  letter-spacing: 4px;
}

/* Restabelece tamanho padrão da esfera (transição suave de volta) */
body:not(.chat-focus) #three-canvas{
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}


/* ==========================================================================
   6. MÉTRICAS E ALERTAS (HUD Direito)
   ========================================================================== */

/* Container de cada métrica (CPU, Memória, etc.) */
.metric{
  margin-bottom: 12px;
}

/* Label superior: nome + valor percentual */
.metric-lbl{
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--pri);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  font-family: 'Orbitron';
}

/* Barra de fundo da métrica */
.metric-bar{
  height: 5px;
  background: rgba(0,240,255,.1);
  border: 1px solid rgba(0,240,255,.3);
  border-radius: 3px;
  overflow: hidden;
}

/* Preenchimento animado (vai de ciano para magenta) */
.metric-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--pri), var(--sec));
  box-shadow: 0 0 8px var(--pri);
  transition: .5s;  /* Anima mudança de largura suavemente */
}

/* Item de alerta (3 variações: info/warning/danger) */
.alert-item{
  padding: 8px 10px;
  background: rgba(0,240,255,.05);
  border-left: 3px solid var(--pri);
  margin-bottom: 6px;
  font-size: 11px;
  border-radius: 2px;
  animation: slideIn .4s;  /* Entra deslizando da direita */
}

/* Variante: alerta de aviso (amarelo) */
.alert-item.warning{
  border-color: #fa0;
  color: #fa0;
}

/* Variante: alerta crítico (vermelho) */
.alert-item.danger{
  border-color: #f05;
  color: #f05;
}

/* Animação: item desliza da direita ao aparecer */
@keyframes slideIn{
  from {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* Caixa de log em tempo real (estilo terminal) */
.log-box{
  font-family: monospace;
  font-size: 10px;
  color: #ffffff;                   /* Branco */
  max-height: 140px;
  overflow-y: auto;
  background: rgba(0,0,0,.3);
  padding: 8px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.15);
}


/* ==========================================================================
   7. CHAT E MENSAGENS
   ========================================================================== */

/* Container do chat (entre os HUDs laterais) */
.chat-container{
  position: fixed;
  left: 250px;     /* Após HUD esquerdo (230 + padding) */
  right: 290px;    /* Antes HUD direito (270 + padding) */
  top: 70px;
  bottom: 110px;   /* Acima do HUD inferior + espaço para viz */
  z-index: 5;
  display: flex;
  flex-direction: column;
  pointer-events: none;  /* Permite clicar através dele (para esfera 3D) */
}

/* Área rolável das mensagens */
.chat-msgs{
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  pointer-events: auto;  /* Reativa cliques nas mensagens */
  user-select: text;
  -webkit-user-select: text;
  /* Máscara: fade nas bordas superior/inferior para efeito cinematográfico */
  mask-image: linear-gradient(180deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* Balão de mensagem base - shrink-to-content (não ocupa largura toda) */
.msg{
  max-width: 75%;
  width: fit-content;          /* Balão se adapta ao tamanho do texto */
  margin-bottom: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  animation: msgIn .4s;
  backdrop-filter: blur(10px);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* Animação: mensagem aparece com fade + slide para cima */
@keyframes msgIn{
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Mensagem do USUÁRIO (direita, magenta) */
.msg.user{
  margin-left: auto;              /* Empurra para a direita */
  margin-right: 0;
  background: rgba(255,0,255,.15);
  border: 1px solid rgba(255,0,255,.5);
  color: #fff;
  box-shadow: 0 0 12px rgba(255,0,255,.3);
  border-bottom-right-radius: 4px; /* "rabinho" do lado direito (estilo chat) */
}

/* Mensagem da IA (esquerda, ciano) */
.msg.ai{
  margin-right: auto;             /* Garante que fique à esquerda */
  margin-left: 0;
  background: rgba(0,240,255,.1);
  border: 1px solid rgba(0,240,255,.5);
  color: #e0f7ff;
  box-shadow: 0 0 12px rgba(0,240,255,.3);
  border-bottom-left-radius: 4px; /* "rabinho" do lado esquerdo (estilo chat) */
}

/* Cursor piscando durante a digitação (typewriter da IA) -
   bloco vertical estilo terminal/HUD em cor primária com pulso suave */
.msg.ai .msg-cursor{
  display: inline-block;
  margin-left: 2px;
  color: var(--pri);
  font-weight: 900;
  text-shadow: 0 0 6px var(--pri);
  vertical-align: baseline;
  line-height: 1;
  animation: msgCursorBlink .8s steps(2, end) infinite;
}
@keyframes msgCursorBlink{
  to { opacity: 0; }
}

/* Mensagem do SISTEMA (centro, amarelo, fonte Orbitron) */
.msg.system{
  margin-left: auto;
  margin-right: auto;            /* Centraliza o balão */
  background: rgba(255,170,0,.1);
  border: 1px solid rgba(255,170,0,.5);
  color: #fd8;
  font-family: 'Orbitron';
  font-size: 11px;
  text-align: center;
  max-width: 90%;
  letter-spacing: 2px;
  border-radius: 12px;            /* Reset dos radius dos outros tipos */
}

/* ==========================================================================
   8. HUD INFERIOR - Barra de input
   ========================================================================== */
.hud-bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  z-index: 10;
  background: linear-gradient(0deg, rgba(0,20,40,.95), transparent);
  border-top: 1px solid rgba(0,240,255,.3);
  padding: 18px 25px;
  backdrop-filter: blur(10px);
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Input de texto do comando */
#cmdInput{
  flex: 1;  /* Ocupa todo espaço disponível */
  padding: 15px 20px;
  background: rgba(0,20,40,.6);
  border: 2px solid rgba(0,240,255,.4);
  color: var(--pri);
  font-size: 15px;
  font-family: 'Rajdhani';
  border-radius: 8px;
  outline: none;
  letter-spacing: 1px;
  transition: .3s;
}

/* Input focado: glow ciano intenso */
#cmdInput:focus{
  border-color: var(--pri);
  box-shadow: 0 0 18px rgba(0,240,255,.5);
}

/* Placeholder mais apagado */
#cmdInput::placeholder{
  color: rgba(0,240,255,.4);
}


/* ==========================================================================
   9. BOTÕES DE CONTROLE (Mic, Enviar, Stop, Anexar, Fullscreen)
   ========================================================================== */

/* Botão circular de controle */
.btn-ctrl{
  position: relative;                               /* Ancora o tooltip ::after */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(0, 240, 255, 0.55);
  background: rgba(0, 240, 255, 0.22);             /* Ciano translúcido */
  color: var(--pri);
  cursor: pointer;
  font-size: 20px;
  transition: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;                                   /* Não encolhe em telas pequenas */
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Hover: brilho e escala */
.btn-ctrl:hover{
  background: rgba(0, 240, 255, 0.38);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
  color: #fff;
  transform: scale(1.1);
}

/* TOOLTIP nos botões da barra superior (chat, voz, câmera, AIoT, tema,
   tela cheia, etc). Aparece embaixo do botão usando o atributo title.
   Aplica em qualquer .btn-ctrl que tenha [title]; sem JS. */
.btn-ctrl[title]:hover::after{
  content: attr(title);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 10, 25, 0.96);
  border: 1px solid rgba(0, 240, 255, 0.55);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 300;
  color: var(--pri);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.25);
  pointer-events: none;
  animation: fadeInTipFade .18s ease-out;
}
/* Setinha apontando pra cima (em direção ao botão) */
.btn-ctrl[title]:hover::before{
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: rgba(0, 10, 25, 0.96);
  border-top: 1px solid rgba(0, 240, 255, 0.55);
  border-left: 1px solid rgba(0, 240, 255, 0.55);
  z-index: 299;
  pointer-events: none;
  animation: fadeInTipFade .18s ease-out;
}

/* BARRA INFERIOR (.hud-bottom) - tooltip aparece ACIMA dos botões
   (se aparecesse embaixo, ficaria fora da viewport). Sobrescreve o
   posicionamento padrão definido acima. */
.hud-bottom .btn-ctrl[title]:hover::after{
  top: auto;
  bottom: calc(100% + 8px);
}
.hud-bottom .btn-ctrl[title]:hover::before{
  top: auto;
  bottom: calc(100% + 2px);
  /* Inverte a setinha: agora a "ponta" fica embaixo, apontando pro botão */
  border-top: none;
  border-left: none;
  border-bottom: 1px solid rgba(0, 240, 255, 0.55);
  border-right: 1px solid rgba(0, 240, 255, 0.55);
}
body.light-theme .hud-bottom .btn-ctrl[title]:hover::before{
  border-bottom-color: #0088c8;
  border-right-color: #0088c8;
  border-top-color: transparent;
  border-left-color: transparent;
}
@keyframes fadeInTipFade{
  from { opacity: 0; }
}
/* Tema claro: tooltip mais legível em fundos claros */
body.light-theme .btn-ctrl[title]:hover::after{
  background: rgba(255, 255, 255, 0.98);
  border-color: #0088c8;
  color: #003a5c;
  box-shadow: 0 4px 16px rgba(0, 136, 200, 0.25);
}
body.light-theme .btn-ctrl[title]:hover::before{
  background: rgba(255, 255, 255, 0.98);
  border-top-color: #0088c8;
  border-left-color: #0088c8;
}

/* Ícones HUD ciano neon (estilo line-art futurista)
   Usado em: botão anexar, microfone */
.hud-icon{
  width: 22px;
  height: 22px;
  stroke: var(--pri);                                     /* Ciano HUD */
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.75));   /* Glow ciano */
  transition: stroke .25s, filter .25s, transform .25s;
}
.btn-ctrl:hover .hud-icon{
  stroke: #80fbff;                                         /* Mais claro no hover */
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 1));      /* Glow intenso */
  transform: scale(1.05);
}
/* Ícone branco quando mic está gravando */
.btn-ctrl.active .hud-icon{
  stroke: #fff;
  filter: drop-shadow(0 0 8px #fff);
}

/* Botão ATIVO (ex: mic gravando) - vermelho pulsante */
.btn-ctrl.active{
  background: #f05;
  border-color: #f05;
  color: #fff;
  box-shadow: 0 0 25px #f05;
  animation: rec 1s infinite;
}

/* Animação: botão de gravação pulsa */
@keyframes rec{
  50% { box-shadow: 0 0 40px #f05; }
}

/* Botão ENVIAR - gradiente ciano→magenta, fonte preta */
.btn-send{
  background: rgba(0, 240, 255, 0.22);           /* Ciano translúcido */
  color: var(--pri);                              /* Ícone/texto ciano brilhante */
  font-weight: 900;
  border: 1px solid rgba(0, 240, 255, 0.55);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-send:hover{
  background: rgba(0, 240, 255, 0.38);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
  color: #fff;
}

/* Botão STOP - borda vermelha */
.btn-stop{
  border-color: #f05;
  color: #f05;
}

.btn-stop:hover{
  background: rgba(255,0,85,.2);
  box-shadow: 0 0 18px #f05;
}


/* ==========================================================================
   10. VISUALIZADOR DE ÁUDIO (barras reativas)
   ========================================================================== */
.audio-viz{
  /* Wave removida da tela — agora a pulsação da esfera (30% mais forte quando
     a IA fala) é o feedback visual principal. O elemento permanece no DOM
     para não quebrar initViz()/startVizSimulation() existentes. */
  display: none !important;
  position: fixed;
  bottom: 148px;
  left: 50%;
  transform: translateX(-50%);
  gap: 3px;
  align-items: flex-end;
  height: 40px;
  z-index: 9;
  opacity: 0;
  transition: .3s;
}

/* Quando ativo (mic ou TTS falando) */
.audio-viz.active{
  opacity: 1;
}

/* Cada barra individual */
.audio-bar{
  width: 4px;
  background: linear-gradient(180deg, var(--sec), var(--pri));
  border-radius: 2px;
  box-shadow: 0 0 5px var(--pri);
  transition: .1s;  /* Anima mudança de altura rapidamente */
}


/* ==========================================================================
   11. NOTIFICAÇÕES E STATUS CENTRAL
   ========================================================================== */

/* Container das notificações toast */
.notifs{
  position: fixed;
  top: 75px;
  right: 290px;  /* Ao lado do HUD direito */
  z-index: 20;
}

/* Notificação individual (desaparece após 3.5s via JS) */
.notif{
  padding: 12px 18px;
  background: rgba(0,20,40,.95);
  border: 1px solid rgba(0,240,255,.5);
  color: var(--pri);
  margin-bottom: 8px;
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(0,240,255,.4);
  animation: notifIn .5s;
  max-width: 280px;
  font-size: 12px;
  backdrop-filter: blur(10px);
}

/* Animação: notificação entra deslizando da direita */
@keyframes notifIn{
  from {
    opacity: 0;
    transform: translateX(50px);
  }
}

/* Status da IA (texto fixo no rodapé do chat, acima da barra de input) */
.ai-status{
  position: fixed;
  bottom: 108px;                    /* Logo acima do hud-bottom (100px) */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 4;
  pointer-events: none;              /* Não bloqueia cliques no input */
  font-family: 'Orbitron';
}

/* Texto "AGUARDANDO COMANDO" com glow + efeito pulsação sutil */
.ai-status-text{
  display: inline-block;
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--pri);
  text-shadow: 0 0 10px var(--pri), 0 0 20px rgba(0,240,255,.3);
  opacity: .85;
  padding: 6px 18px;
  background: rgba(0,5,16,.4);       /* Fundo escuro sutil para legibilidade */
  border: 1px solid rgba(0,240,255,.25);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: statusPulse 3s ease-in-out infinite;
}

/* Pulsação sutil do glow da legenda */
@keyframes statusPulse{
  0%, 100% { text-shadow: 0 0 10px var(--pri), 0 0 20px rgba(0,240,255,.3); }
  50%      { text-shadow: 0 0 14px var(--pri), 0 0 28px rgba(0,240,255,.5); }
}


/* ==========================================================================
   12. MODAL DE CONFIGURAÇÕES
   ========================================================================== */

/* Overlay escuro cobrindo a tela */
.modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,5,16,.92);
  display: none;             /* Oculto por padrão */
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

/* Modal visível (adicionado via JS: classList.add('active')) */
.modal.active{
  display: flex;
}

/* Caixa central do modal */
.modal-box{
  background: rgba(0,20,40,.95);
  border: 1px solid var(--pri);
  border-radius: 10px;
  padding: 30px;
  min-width: 450px;
  max-width: 90%;
  max-height: 85vh;   /* Limita altura e adiciona scroll */
  overflow-y: auto;
  box-shadow: 0 0 30px rgba(0,240,255,.4);
}

/* Título do modal */
.modal-title{
  font-family: 'Orbitron';
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,240,255,.3);
  color: var(--pri);
}

/* Linha do modal (label + input) */
.modal-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}

.modal-row label{
  font-size: 13px;
  letter-spacing: 1px;
  flex: 1;
}

/* Color picker customizado */
.modal-row input[type=color]{
  width: 50px;
  height: 32px;
  border: 1px solid rgba(0,240,255,.4);
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
}

/* Inputs de texto e arquivo dentro do modal */
.modal-row input[type=text],
.modal-row input[type=file]{
  flex: 2;
  padding: 8px;
  background: rgba(0,20,40,.6);
  border: 1px solid rgba(0,240,255,.4);
  color: var(--pri);
  border-radius: 4px;
  font-family: 'Rajdhani';
}

/* Rodapé do modal com botões OK/Cancelar */
.modal-foot{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(0,240,255,.2);
}

/* Botão do modal (ghost por padrão) */
.modal-btn{
  padding: 10px 22px;
  background: rgba(0,240,255,.1);
  border: 1px solid var(--pri);
  color: var(--pri);
  cursor: pointer;
  border-radius: 4px;
  letter-spacing: 2px;
  font-family: 'Orbitron';
  font-size: 11px;
  transition: .3s;
}

.modal-btn:hover{
  box-shadow: 0 0 15px var(--pri);
}

/* Botão OK (primário, ciano sólido) */
.modal-btn.ok{
  background: var(--pri);
  color: #000;
  font-weight: bold;
}

/* Botão RESET (reverte cores para padrão do tema) */
.modal-btn-reset{
  background: rgba(255, 170, 0, 0.12);
  border-color: rgba(255, 170, 0, 0.6);
  color: #ffaa00;
  margin-right: auto;  /* empurra para a esquerda, separa do CANCELAR/OK */
}
.modal-btn-reset:hover{
  background: rgba(255, 170, 0, 0.25);
  box-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
}

/* Linha especial da "Cor Geral" - destaque no topo do modal */
.config-general-row{
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(255, 0, 255, 0.06));
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px !important;
  gap: 12px;
}
.config-general-row label{
  color: var(--pri);
  text-shadow: 0 0 4px rgba(0, 240, 255, .3);
}
.config-general-row .modal-btn{
  font-size: 10px;
  letter-spacing: 1.5px;
}

/* Divisor entre a Cor Geral e as cores individuais */
.config-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, .3), transparent);
  margin: 14px 0;
}

/* ==========================================================================
   ACIONAMENTO POR VOZ - linha destacada do modal + switch + trigger
   ========================================================================== */
.config-voice-row{
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(0, 200, 255, 0.04));
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px !important;
  gap: 12px;
  align-items: center;
}
.voice-toggle-label{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.voice-toggle-title{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--pri);
  text-shadow: 0 0 4px rgba(0, 240, 255, .3);
}
.voice-toggle-desc{
  font-size: 10px;
  opacity: .65;
  line-height: 1.4;
}

/* Switch toggle (estilo iOS futurista) */
.voice-switch{
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.voice-switch input{
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.voice-switch-track{
  position: absolute;
  inset: 0;
  background: rgba(0, 20, 40, .8);
  border: 1px solid rgba(0, 240, 255, .35);
  border-radius: 13px;
  transition: .25s;
}
.voice-switch-thumb{
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: rgba(0, 240, 255, .55);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 240, 255, .35);
  transition: .25s;
}
.voice-switch input:checked + .voice-switch-track{
  background: rgba(0, 240, 255, .25);
  border-color: var(--pri);
  box-shadow: 0 0 10px rgba(0, 240, 255, .5),
              inset 0 0 6px rgba(0, 240, 255, .2);
}
.voice-switch input:checked + .voice-switch-track .voice-switch-thumb{
  left: 24px;
  background: var(--pri);
  box-shadow: 0 0 10px var(--pri);
}

/* Linha do gatilho - estilizada como sub-row mais discreta */
.config-voice-row-trigger{
  padding: 4px 12px 12px;
  margin-bottom: 12px !important;
}
.config-voice-row-trigger input[type=text]{
  flex: 0 0 auto;
  width: 160px;
  text-transform: lowercase;
  letter-spacing: 1px;
}


/* ==========================================================================
   PULSE de "ESCUTANDO" - quando voice activation está ativa, body recebe
   .voice-listening e o canvas Three.js ganha um halo cíano pulsante.
   ========================================================================== */
body.voice-listening #three-canvas{
  animation: voiceListenPulse 2.2s ease-in-out infinite;
}
@keyframes voiceListenPulse{
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.35))
            drop-shadow(0 0 14px rgba(0, 240, 255, 0.18));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(0, 240, 255, 0.85))
            drop-shadow(0 0 36px rgba(0, 240, 255, 0.45));
  }
}

/* Tema claro: ajusta tons do switch */
body.light-theme .voice-switch-track{
  background: rgba(255, 255, 255, .9);
  border-color: rgba(0, 136, 200, .4);
}
body.light-theme .voice-switch input:checked + .voice-switch-track{
  background: rgba(0, 168, 222, .25);
  border-color: #0088c8;
}


/* ==========================================================================
   BOTÃO "ACIONAMENTO POR VOZ" no header superior
   - Idle: visual padrão (.btn-ctrl), ondas com opacity baixa
   - Ativo: glow ciano + ondas piscando (sincronizado com o pulse da esfera)
   ========================================================================== */
#voiceActivationBtn .va-wave{
  transform-origin: center;
}
#voiceActivationBtn.va-active{
  background: rgba(0, 240, 255, .18);
  border-color: var(--pri);
  color: var(--pri);
  box-shadow: 0 0 12px rgba(0, 240, 255, .55),
              inset 0 0 6px rgba(0, 240, 255, .2);
}
#voiceActivationBtn.va-active .va-wave-l{
  animation: vaBtnWaveL 1.4s ease-in-out infinite;
}
#voiceActivationBtn.va-active .va-wave-r{
  animation: vaBtnWaveR 1.4s ease-in-out infinite;
}
@keyframes vaBtnWaveL{
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  50%      { opacity: 1;    transform: translateX(-1px); }
}
@keyframes vaBtnWaveR{
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  50%      { opacity: 1;    transform: translateX(1px); }
}

body.light-theme #voiceActivationBtn.va-active{
  background: rgba(0, 168, 222, .18);
  border-color: #0088c8;
  color: #0088c8;
  box-shadow: 0 0 10px rgba(0, 136, 200, .45);
}

/* ==========================================================================
   ESTADO "GRAVANDO" - microfone ativo capturando comando do usuário
   Sobrepõe .va-active (vermelho dominante quando ambas as classes estão ativas)
   ========================================================================== */
#voiceActivationBtn.va-recording{
  background: rgba(255, 0, 85, .25) !important;
  border-color: #ff0055 !important;
  color: #ff0055 !important;
  box-shadow: 0 0 14px rgba(255, 0, 85, .7),
              inset 0 0 8px rgba(255, 0, 85, .25) !important;
  animation: vaRecBtnPulse 0.95s ease-in-out infinite;
}
#voiceActivationBtn.va-recording .va-wave-l{
  animation: vaBtnWaveL 0.7s ease-in-out infinite;   /* ondas mais rápidas */
}
#voiceActivationBtn.va-recording .va-wave-r{
  animation: vaBtnWaveR 0.7s ease-in-out infinite;
}
@keyframes vaRecBtnPulse{
  0%, 100% { box-shadow: 0 0 12px rgba(255, 0, 85, .55), inset 0 0 6px rgba(255, 0, 85, .2); }
  50%      { box-shadow: 0 0 22px rgba(255, 0, 85, .95), inset 0 0 10px rgba(255, 0, 85, .35); }
}

/* Glow VERMELHO ao redor do canvas Three.js durante gravação ativa */
body.voice-recording #three-canvas{
  animation: voiceRecordPulse 1.4s ease-in-out infinite;
}
@keyframes voiceRecordPulse{
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 0, 85, 0.45))
            drop-shadow(0 0 18px rgba(255, 0, 85, 0.22));
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(255, 0, 85, 0.9))
            drop-shadow(0 0 44px rgba(255, 0, 85, 0.55));
  }
}

/* Tema claro do estado vermelho - tonalidade levemente diferente */
body.light-theme #voiceActivationBtn.va-recording{
  background: rgba(220, 0, 70, .18) !important;
  border-color: #cc0044 !important;
  color: #cc0044 !important;
}

.modal-btn.ok:hover{
  background: var(--sec);
  border-color: var(--sec);
  box-shadow: 0 0 15px var(--sec);
}


/* ==========================================================================
   13. COMPARTILHAMENTO DE TELA
   Janela flutuante arrastável, redimensionável e semitransparente
   com vídeo da tela compartilhada pelo usuário
   ========================================================================== */
.share-screen{
  position: fixed;
  top: 80px;
  left: 260px;
  width: 360px;
  height: 240px;
  min-width: 220px;              /* Previne janela muito pequena */
  min-height: 140px;
  max-width: 90vw;
  max-height: 80vh;
  z-index: 50;
  border: 2px solid var(--pri);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,240,255,.4);
  display: none;
  background: #000;
  opacity: 0.75;                 /* 25% transparente por padrão */
  resize: both;                  /* Redimensionável nativamente */
  overflow: hidden;              /* Necessário para resize funcionar */
  transition: opacity .25s, box-shadow .25s;
}

/* Ativo após getDisplayMedia autorizado */
.share-screen.active{
  display: flex;
  flex-direction: column;
}

/* Hover: levemente mais visível para facilitar interação */
.share-screen:hover{
  opacity: 0.92;
  box-shadow: 0 10px 40px rgba(0,240,255,.6);
}

/* Modo "sólido" quando toggle de opacidade ativado */
.share-screen.solid{
  opacity: 1;
}

/* Modo TELA CHEIA - ocupa toda a viewport */
.share-screen.fullscreen{
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
  border-width: 0;
  opacity: 1;
  resize: none;                  /* Desabilita resize manual em fullscreen */
  z-index: 500;                  /* Acima de tudo */
}

/* Botão ativo (ex: tela cheia ativada) */
.share-btn.active{
  background: rgba(0,240,255,.3);
  border-color: var(--pri);
  box-shadow: 0 0 8px var(--pri);
  color: #fff;
}

/* Cabeçalho da janela - alça para arrastar */
.share-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px 6px 12px;
  background: linear-gradient(180deg, rgba(0,240,255,.18), rgba(0,240,255,.08));
  border-bottom: 1px solid rgba(0,240,255,.35);
  cursor: move;                  /* Indica que é arrastável */
  user-select: none;
  -webkit-user-select: none;
  height: 30px;
  flex-shrink: 0;
}

.share-header:active{ cursor: grabbing; }

.share-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron';
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--pri);
  font-weight: 700;
}

/* Bolinha pulsante indicando "ao vivo" */
.share-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f05;
  box-shadow: 0 0 6px #f05;
  animation: pulse 1.5s infinite;
}

.share-actions{
  display: flex;
  gap: 4px;
}

.share-btn{
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid rgba(0,240,255,.4);
  color: var(--pri);
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  line-height: 1;
}
.share-btn:hover{
  background: rgba(0,240,255,.2);
  box-shadow: 0 0 8px var(--pri);
}
.share-close:hover{
  background: rgba(255,0,85,.3);
  border-color: #f05;
  color: #fff;
  box-shadow: 0 0 10px #f05;
}

/* Vídeo ocupa o espaço restante */
.share-screen video{
  width: 100%;
  flex: 1;                       /* Cresce para preencher altura restante */
  display: block;
  object-fit: contain;
  background: #000;
  pointer-events: none;          /* Não intercepta cliques (facilita arrastar) */
}


/* ==========================================================================
   14. SCROLLBARS CUSTOMIZADAS
   Scrollbars finas estilo cyber
   ========================================================================== */
::-webkit-scrollbar{
  width: 5px;
}

::-webkit-scrollbar-track{
  background: rgba(0,240,255,.05);
}

::-webkit-scrollbar-thumb{
  background: rgba(0,240,255,.4);
  border-radius: 3px;
}


/* ==========================================================================
   15. RESPONSIVO E MODOS ALTERNATIVOS
   ========================================================================== */

/* Mobile / tablets: oculta HUDs laterais, chat ocupa tela toda */
@media (max-width: 900px){
  .hud-left,
  .hud-right{
    display: none;
  }
  .chat-container{
    left: 5px;
    right: 5px;
  }
  .notifs{
    right: 5px;
  }
  .modal-box{
    min-width: 90%;
  }
}

/* ==========================================================================
   MODOS DE VISUALIZAÇÃO ALTERNATIVOS (Widget / Iframe 1 / Iframe 2)
   Em todos os 3 modos: HUD TOPO permanece visível com a MESMA logo Genesis
   (ícone iA + texto) e os MESMOS botões da tela inicial (Chat, Voz, Visão,
   Tema, Fullscreen). A barra é apenas mais compacta para economizar espaço.
   ========================================================================== */

/* Cabeçalho compacto aplicado nos 3 modos alternativos */
body.widget-mode .hud-top,
body.iframe-mode .hud-top,
body.iframe-mode-2 .hud-top{
  height: 50px;
  padding: 0 14px;
}
body.widget-mode .hud-top-r,
body.iframe-mode .hud-top-r,
body.iframe-mode-2 .hud-top-r{
  gap: 10px;
}
/* Badges (IA ONLINE / modo) e relógio escondidos para sobrar espaço
   nos modos compactos. Logo + botões continuam visíveis. */
body.widget-mode .hud-top .badge,
body.iframe-mode .hud-top .badge,
body.iframe-mode-2 .hud-top .badge,
body.widget-mode .hud-top .clock,
body.widget-mode .hud-top .date-info,
body.iframe-mode .hud-top .clock,
body.iframe-mode .hud-top .date-info,
body.iframe-mode-2 .hud-top .clock,
body.iframe-mode-2 .hud-top .date-info{
  display: none;
}
/* Logo um pouco menor para casar com a barra compacta */
body.widget-mode .logo .logo-text,
body.iframe-mode .logo .logo-text,
body.iframe-mode-2 .logo .logo-text{
  font-size: 32px;
  letter-spacing: 3px;
}
body.widget-mode .logo .logo-icon,
body.iframe-mode .logo .logo-icon,
body.iframe-mode-2 .logo .logo-icon{
  width: 32px;
  height: 32px;
}

/* CORES DA LOGO nos modos compactos - garante paridade com a tela inicial
   - Tema ESCURO: texto + borda do ícone em CIANO (var(--pri) = #00f0ff)
   - Tema CLARO:  texto + borda em PRETO, fundo do ícone branco */
body.widget-mode .logo,
body.widget-mode .logo .logo-text,
body.iframe-mode .logo,
body.iframe-mode .logo .logo-text,
body.iframe-mode-2 .logo,
body.iframe-mode-2 .logo .logo-text{
  color: var(--pri, #00f0ff);
}
body.widget-mode .logo .logo-icon,
body.iframe-mode .logo .logo-icon,
body.iframe-mode-2 .logo .logo-icon{
  border-color: var(--pri, #00f0ff);
  background: #000;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

/* Tema claro - texto preto, ícone com borda preta sobre fundo branco */
body.light-theme.widget-mode .logo,
body.light-theme.widget-mode .logo .logo-text,
body.light-theme.iframe-mode .logo,
body.light-theme.iframe-mode .logo .logo-text,
body.light-theme.iframe-mode-2 .logo,
body.light-theme.iframe-mode-2 .logo .logo-text{
  color: #000;
}
body.light-theme.widget-mode .logo .logo-icon,
body.light-theme.iframe-mode .logo .logo-icon,
body.light-theme.iframe-mode-2 .logo .logo-icon{
  border-color: #000;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}


/* MODO WIDGET: hud-top compacto + esconde HUDs laterais */
body.widget-mode .hud-left,
body.widget-mode .hud-right{
  display: none;
}
body.widget-mode .chat-container{
  left: 10px;
  right: 10px;
  top: 60px;        /* respiro abaixo da hud-top compacta de 50px */
}

/* MODO IFRAME 1: hud-top compacto (logo + botões) + esconde HUDs laterais */
body.iframe-mode .hud-left,
body.iframe-mode .hud-right{
  display: none;
}
body.iframe-mode .chat-container{
  left: 0;
  right: 0;
  top: 50px;        /* topo logo abaixo da hud-top compacta */
  bottom: 90px;
}

/* MODO IFRAME 2: hud-top compacto + esconde apenas HUD esquerdo */
body.iframe-mode-2 .hud-left{
  display: none;
}
body.iframe-mode-2 .chat-container{
  left: 5px;
  top: 60px;
}


/* ==========================================================================
   MENU DE AÇÕES POR MENSAGEM (botão "⋯" + popup)
   - Aparece no canto inferior direito de cada balão (user/ai)
   - Discreto em idle (50% opacidade), forte no hover do balão
   - Popup com ícones SVG: Copiar mensagem / Copiar diálogo / Exportar
   ========================================================================== */
.msg{
  position: relative;            /* ancora o botão e o popup */
}
/* Padding extra só nas mensagens que têm o menu (user/ai), não no system */
.msg.user,
.msg.ai{
  padding-bottom: 26px;          /* espaço para o "⋯" não pisar no texto */
}

.msg-menu-btn{
  position: absolute;
  bottom: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: rgba(0, 240, 255, 0.8);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: opacity .2s, background .2s, box-shadow .2s, border-color .2s;
}
.msg:hover > .msg-menu-btn,
.msg-menu-btn[aria-expanded="true"]{
  opacity: 1;
}
.msg-menu-btn:hover,
.msg-menu-btn[aria-expanded="true"]{
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--pri);
  color: var(--pri);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}
/* Cor do botão segue o tema do balão (user = magenta, ai = ciano) */
.msg.user > .msg-menu-btn{
  border-color: rgba(255, 0, 255, 0.3);
  color: rgba(255, 0, 255, 0.8);
}
.msg.user > .msg-menu-btn:hover,
.msg.user > .msg-menu-btn[aria-expanded="true"]{
  background: rgba(255, 0, 255, 0.18);
  border-color: var(--sec);
  color: var(--sec);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
}

/* Popup do menu */
.msg-menu-popup{
  position: absolute;
  bottom: calc(100% - 4px);     /* sobe acima do balão para evitar cortar */
  right: 0;
  min-width: 200px;
  background: linear-gradient(180deg, rgba(0, 10, 25, 0.95), rgba(0, 20, 45, 0.92));
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 240, 255, 0.3),
              0 0 0 1px rgba(0, 240, 255, 0.18);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  padding: 6px;
  z-index: 50;
  display: none;
  font-family: 'Rajdhani', sans-serif;
  animation: msgMenuIn .15s ease-out;
}
.msg-menu-popup.open{ display: flex; flex-direction: column; gap: 2px; }
@keyframes msgMenuIn{
  from { opacity: 0; transform: translateY(4px); }
}

.msg-menu-popup button[data-act]{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: #e0f7ff;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-align: left;
  transition: .15s;
}
.msg-menu-popup button[data-act]:hover{
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.35);
  color: var(--pri);
}
.msg-menu-popup button[data-act] svg{
  width: 14px; height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* Tema claro */
body.light-theme .msg-menu-popup{
  background: linear-gradient(180deg, rgba(238, 242, 246, 0.97), rgba(221, 228, 235, 0.94));
  border-color: rgba(0, 136, 200, 0.4);
  color: #18222f;
}
body.light-theme .msg-menu-popup button[data-act]{
  color: #18222f;
}
body.light-theme .msg-menu-popup button[data-act]:hover{
  background: rgba(0, 168, 222, 0.15);
  border-color: rgba(0, 136, 200, 0.45);
  color: #0088c8;
}

/* Mobile - botão um pouco maior para toque */
@media (max-width: 768px){
  .msg-menu-btn{ width: 26px; height: 26px; font-size: 15px; opacity: 0.7; }
  .msg-menu-popup{ min-width: 180px; }
}


/* ==========================================================================
   VOICE ACTIVATION - botão do header + estados visuais da esfera
   ========================================================================== */

/* Botão "Escuta Contínua" no header - idle */
#voiceActivationBtn .va-wave{
  transform-origin: center;
}
/* Estado ATIVO - glow vermelho + ondas pulsando */
#voiceActivationBtn.va-active{
  background: rgba(255, 0, 85, .25);
  border-color: #ff0055;
  color: #ff0055;
  box-shadow: 0 0 14px rgba(255, 0, 85, .65),
              inset 0 0 6px rgba(255, 0, 85, .2);
  animation: vaBtnPulse 1.2s ease-in-out infinite;
}
#voiceActivationBtn.va-active .va-wave-l{
  animation: vaBtnWaveL 0.9s ease-in-out infinite;
}
#voiceActivationBtn.va-active .va-wave-r{
  animation: vaBtnWaveR 0.9s ease-in-out infinite;
}
@keyframes vaBtnPulse{
  0%, 100% { box-shadow: 0 0 12px rgba(255, 0, 85, .55), inset 0 0 6px rgba(255, 0, 85, .2); }
  50%      { box-shadow: 0 0 22px rgba(255, 0, 85, .9),  inset 0 0 10px rgba(255, 0, 85, .35); }
}
@keyframes vaBtnWaveL{
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50%      { opacity: 1;   transform: translateX(-1px); }
}
@keyframes vaBtnWaveR{
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50%      { opacity: 1;   transform: translateX(1px); }
}

/* ==========================================================================
   VISUAIS DA ESFERA durante voice activation
   - .voice-mode-listening → partículas VERMELHAS + pulso forte (no animate())
   - .voice-mode-thinking  → partículas BRANCAS + pulso forte (no animate())
   - Falando/digitando: usa o sistema atual (cyan via isSpeaking/isTyping)
   O efeito visual é aplicado diretamente nas partículas Three.js
   (script.js → animate()), não no canvas via CSS filter.
   ========================================================================== */
body.light-theme #voiceActivationBtn.va-active{
  background: rgba(220, 0, 70, .15);
  border-color: #cc0044;
  color: #cc0044;
}

/* Acessibilidade: respeita preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce){
  #voiceActivationBtn.va-active,
  #voiceActivationBtn.va-active .va-wave-l,
  #voiceActivationBtn.va-active .va-wave-r{
    animation: none;
  }
}

/* Linha de configuração da palavra de gatilho - reusa estilo HUD */
.config-voice-row{
  background: linear-gradient(135deg, rgba(255, 0, 85, .08), rgba(255, 0, 85, .04));
  border: 1px solid rgba(255, 0, 85, 0.25);
  border-radius: 8px;
  padding: 12px;
  gap: 12px;
  margin-bottom: 12px !important;
  align-items: center;
}
.config-voice-row input[type="text"]{
  background: rgba(0, 20, 40, .6);
  border: 1px solid rgba(255, 0, 85, 0.4);
  color: #ff0055;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  outline: none;
}
.config-voice-row input[type="text"]:focus{
  border-color: #ff0055;
  box-shadow: 0 0 8px rgba(255, 0, 85, .35);
}
body.light-theme .config-voice-row{
  background: linear-gradient(135deg, rgba(220, 0, 70, .08), rgba(220, 0, 70, .04));
  border-color: rgba(220, 0, 70, .3);
}
body.light-theme .config-voice-row input[type="text"]{
  background: #ffffff;
  border-color: rgba(220, 0, 70, .4);
  color: #cc0044;
}


/* ==========================================================================
   VOZ OPENAI - seção do modal de Configurações
   - Card destacado quando ativo
   - Reusa .voice-switch (já estilizado para Acionamento por Voz)
   - Select customizado com setinha SVG e tema HUD
   ========================================================================== */
.config-openai-row{
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(0, 200, 255, 0.04));
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px !important;
  gap: 12px;
  align-items: center;
}
.openai-toggle-label{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.openai-toggle-title{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--pri);
  text-shadow: 0 0 4px rgba(0, 240, 255, .3);
}
.openai-toggle-desc{
  font-size: 10px;
  opacity: .65;
  line-height: 1.4;
}
.config-openai-row-sub{
  padding: 4px 12px 8px;
  margin-bottom: 8px !important;
}
.config-openai-row-sub code{
  background: rgba(0, 240, 255, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}

/* === API GENESIS CMMS (configuração unificada) ====================== */
.config-cmms-row{
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.06), rgba(0, 240, 255, 0.04));
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px !important;
  gap: 12px;
  align-items: center;
}
.config-cmms-row code{
  background: rgba(0, 240, 255, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}
.config-cmms-row-sub{
  padding: 4px 12px 8px;
  margin-bottom: 6px !important;
  gap: 12px;
}
.config-cmms-row-sub code{
  background: rgba(0, 240, 255, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}
body.light-theme .config-cmms-row{
  background: linear-gradient(135deg, rgba(0, 168, 222, 0.08), rgba(0, 168, 222, 0.04));
  border-color: rgba(0, 136, 200, 0.4);
}
body.light-theme .config-cmms-row code,
body.light-theme .config-cmms-row-sub code{
  background: rgba(0, 168, 222, 0.12);
  color: #003a5c;
}

/* Select customizado - setinha SVG no canto direito, sem visual nativo */
.openai-select{
  background: rgba(0, 20, 40, .6) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") right 10px center / 12px no-repeat;
  border: 1px solid rgba(0, 240, 255, .4);
  color: var(--pri);
  border-radius: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  padding: 8px 32px 8px 12px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.openai-select:focus{
  border-color: var(--pri);
  box-shadow: 0 0 8px rgba(0, 240, 255, .35);
}
.openai-select option{
  background: #001020;
  color: var(--pri);
  padding: 6px;
}

/* Tema claro */
body.light-theme .config-openai-row{
  background: linear-gradient(135deg, rgba(0, 168, 222, .08), rgba(0, 168, 222, .04));
  border-color: rgba(0, 136, 200, .3);
}
body.light-theme .openai-toggle-title{ color: #0088c8; text-shadow: none; }
body.light-theme .openai-select{
  background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230088c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") right 10px center / 12px no-repeat;
  border-color: rgba(0, 136, 200, .4);
  color: #18222f;
}
body.light-theme .openai-select option{
  background: #ffffff;
  color: #18222f;
}


/* ==========================================================================
   QUICK PROMPTS - Sugestões de perguntas frequentes/recentes
   Botão ao lado do microfone na hud-bottom abre um dropdown flutuante.
   ========================================================================== */
.quick-prompts-wrap{
  position: relative;
  display: inline-flex;
}

#quickPromptsBtn.qp-active{
  background: rgba(0, 240, 255, .22);
  border-color: var(--pri);
  color: var(--pri);
  box-shadow: 0 0 10px rgba(0, 240, 255, .55);
}

/* Painel dropdown - sobe acima da input bar */
.quick-prompts-panel{
  position: absolute;
  bottom: calc(100% + 12px);   /* logo acima do botão */
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  transform-origin: bottom center;
  width: 360px;
  max-width: 92vw;
  max-height: 380px;
  background: linear-gradient(180deg, rgba(0, 10, 25, 0.94), rgba(0, 20, 45, 0.92));
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 10px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 12px 40px rgba(0, 240, 255, 0.3),
              0 0 0 1px rgba(0, 240, 255, 0.2),
              inset 0 1px 0 rgba(0, 240, 255, 0.15);
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  color: #e0f7ff;
  z-index: 200;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.quick-prompts-panel.qp-open{
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* Setinha apontando para o botão */
.quick-prompts-panel::after{
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 240, 255, .45);
}

/* Header do painel */
.qp-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 240, 255, .25);
  background: linear-gradient(180deg, rgba(0, 240, 255, .12), rgba(0, 240, 255, .04));
  border-radius: 10px 10px 0 0;
}
.qp-title{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: var(--pri);
  text-shadow: 0 0 4px rgba(0, 240, 255, .5);
}
.qp-clear{
  background: transparent;
  border: 1px solid rgba(255, 170, 0, .4);
  color: #fa0;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 9px;
  letter-spacing: 1.2px;
  cursor: pointer;
  font-family: 'Orbitron';
  transition: .2s;
}
.qp-clear:hover{
  background: rgba(255, 170, 0, .15);
  box-shadow: 0 0 6px rgba(255, 170, 0, .5);
}

/* Body com lista scrollável */
.qp-body{
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qp-body::-webkit-scrollbar{ width: 4px; }
.qp-body::-webkit-scrollbar-thumb{ background: rgba(0, 240, 255, .35); border-radius: 2px; }

/* Subtítulo de seção (Mais usadas / Recentes) */
.qp-section-title{
  font-size: 8.5px;
  letter-spacing: 2px;
  color: rgba(0, 240, 255, .65);
  padding: 8px 8px 4px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.qp-section-title::before{
  content: '';
  width: 5px; height: 5px;
  background: var(--pri);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--pri);
}

/* Item da lista - clicável */
.qp-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: rgba(0, 240, 255, .04);
  border: 1px solid rgba(0, 240, 255, .15);
  border-radius: 6px;
  cursor: pointer;
  transition: .18s;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: #e0f7ff;
  text-align: left;
  width: 100%;
  letter-spacing: .3px;
}
.qp-item:hover{
  background: rgba(0, 240, 255, .14);
  border-color: rgba(0, 240, 255, .55);
  box-shadow: 0 0 8px rgba(0, 240, 255, .35);
  transform: translateX(2px);
}
.qp-item-text{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qp-item-count{
  flex-shrink: 0;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(0, 240, 255, .55);
  font-family: 'Orbitron';
  background: rgba(0, 240, 255, .08);
  border: 1px solid rgba(0, 240, 255, .25);
  border-radius: 10px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.qp-item-icon{
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: rgba(0, 240, 255, .6);
}

/* Estado vazio - sem histórico ainda */
.qp-empty{
  text-align: center;
  padding: 30px 16px;
  color: rgba(0, 240, 255, .5);
  font-family: 'Orbitron';
  font-size: 10px;
  letter-spacing: 1.8px;
  line-height: 1.6;
}
.qp-empty-hint{
  font-family: 'Rajdhani';
  font-size: 12px;
  letter-spacing: .5px;
  margin-top: 8px;
  opacity: .8;
  text-transform: none;
}

/* Tema claro */
body.light-theme .quick-prompts-panel{
  background: linear-gradient(180deg, rgba(238, 242, 246, 0.97), rgba(221, 228, 235, 0.94));
  border-color: rgba(0, 136, 200, 0.4);
  color: #18222f;
  box-shadow: 0 12px 40px rgba(0, 136, 200, 0.3);
}
body.light-theme .qp-title{ color: #004870; }
body.light-theme .qp-item{
  background: rgba(255, 255, 255, .65);
  border-color: rgba(0, 136, 200, .25);
  color: #18222f;
}
body.light-theme .qp-item:hover{
  background: rgba(0, 168, 222, .15);
  border-color: rgba(0, 136, 200, .55);
}
body.light-theme .qp-item-count{
  background: rgba(0, 168, 222, .12);
  color: #0088c8;
  border-color: rgba(0, 136, 200, .3);
}

/* Mobile - painel ocupa quase toda largura */
@media (max-width: 768px){
  .quick-prompts-panel{
    width: 320px;
  }
}