/*
===============================================================================
  GENESIS IA MODAL - estilos do botão suspenso + modal da IA
===============================================================================
  Prefixo .iam-* / #iamBubble / #iamModal. Aparece quando qualquer painel
  (AIoT/IE/HL7/Predict/Telas) está em tela cheia: botão no rodapé direito
  que abre a IA em janela flutuante com a mini-esfera Three.js.
*/

/* O balão de chat antigo interno do AIoT sai de cena: este módulo assume
   a função em TODOS os painéis (com esfera + mic + voz + status). */
.aiot-chat-bubble{ display: none !important; }

/* ---------- botão suspenso (rodapé direito) ---------- */
.iam-bubble{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(0, 240, 255, 0.55);
  background: radial-gradient(circle at 30% 30%, rgba(0, 40, 70, 0.95), rgba(0, 10, 25, 0.95));
  box-shadow: 0 8px 30px rgba(0, 240, 255, 0.4),
              0 0 0 1px rgba(0, 240, 255, 0.25);
  z-index: 9300;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform .2s, box-shadow .2s;
}
.iam-bubble-visible{ display: inline-flex; }
.iam-bubble:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 40px rgba(0, 240, 255, 0.55);
}
.iam-bubble-img{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}
.iam-bubble-pulse{
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(0, 240, 255, 0.45);
  animation: iamPulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes iamPulse{
  0%   { transform: scale(0.9); opacity: .9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- modal da IA ---------- */
.iam-modal{
  position: fixed;
  inset: 0;
  z-index: 9350;
  display: none;
  pointer-events: none;
  font-family: 'Rajdhani', 'Orbitron', sans-serif;
  color: #e0f7ff;
}
.iam-modal.iam-open{ display: block; }

.iam-box{
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 380px;
  height: 560px;
  min-width: 300px;
  min-height: 340px;
  max-width: 92vw;
  max-height: 90vh;
  background: linear-gradient(180deg, rgba(0, 10, 25, 0.94), rgba(0, 20, 45, 0.92));
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-radius: 16px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 18px 60px rgba(0, 240, 255, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  resize: both;
  animation: iamIn .28s cubic-bezier(.4, 0, .2, 1);
}
@keyframes iamIn{
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.iam-modal.iam-minimized .iam-box{
  height: auto !important;
  min-height: 0 !important;
  resize: none;
}
.iam-modal.iam-minimized .iam-sphere,
.iam-modal.iam-minimized .iam-msgs,
.iam-modal.iam-minimized .iam-input-bar,
.iam-modal.iam-minimized .iam-resize-handle{ display: none !important; }

/* header (arrastável) */
.iam-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.16), rgba(0, 240, 255, 0.04));
  border-bottom: 1px solid rgba(0, 240, 255, 0.35);
  cursor: grab;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
}
.iam-head:active{ cursor: grabbing; }
.iam-head-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}
.iam-head-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #57d68f;
  box-shadow: 0 0 8px #57d68f;
  animation: iamDot 2s infinite;
}
@keyframes iamDot{ 0%,100%{ opacity: 1; } 50%{ opacity: .45; } }
.iam-head-mode{
  font-size: 9px;
  letter-spacing: 1.5px;
  opacity: .75;
  border: 1px solid rgba(0,240,255,.35);
  border-radius: 10px;
  padding: 2px 8px;
  font-weight: 400;
}
.iam-head-actions{ display: flex; gap: 6px; }

.iam-btn-icon{
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: rgba(0, 240, 255, 0.85);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 50%;
  cursor: pointer;
  transition: .2s;
}
.iam-btn-icon:hover{
  background: rgba(0, 240, 255, 0.18);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

/* esfera Three.js - modo faixa compacta no topo (botão ◑) */
.iam-sphere{
  height: 150px;
  flex-shrink: 0;
  position: relative;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
  background: radial-gradient(ellipse at center, rgba(0, 30, 60, 0.35), transparent 70%);
}
.iam-sphere canvas{ display: block; width: 100% !important; height: 100% !important; }

/* MODO FUNDO (padrão, botão ◐): a esfera vira o fundo da área de chat -
   estilo tela inicial, com as mensagens fluindo por cima das partículas. */
.iam-modal.iam-sphere-bg .iam-box{ position: absolute; }  /* já é; reforço p/ o inset abaixo */
.iam-modal.iam-sphere-bg .iam-sphere{
  position: absolute;
  top: 51px;                     /* logo abaixo do header */
  bottom: 59px;                  /* até a barra de input */
  left: 0; right: 0;
  height: auto;
  z-index: 0;
  border-bottom: none;
  opacity: .8;
  pointer-events: none;          /* rolagem/cliques vão para as mensagens */
}
.iam-modal.iam-sphere-bg .iam-msgs{
  position: relative;
  z-index: 1;
  background: transparent;
}
/* Bolhas um pouco mais opacas no modo fundo para manter a leitura
   confortável sobre as partículas (mesma linguagem da tela inicial). */
.iam-modal.iam-sphere-bg .iam-msg-ai{
  background: rgba(0, 22, 42, 0.78);
  backdrop-filter: blur(2px);
}
.iam-modal.iam-sphere-bg .iam-msg-user{
  background: rgba(34, 0, 34, 0.72);
  backdrop-filter: blur(2px);
}
.iam-modal.iam-sphere-bg .iam-empty{
  background: rgba(0, 12, 28, 0.55);
  border-radius: 10px;
}

/* mensagens (mesma linguagem do chat principal) */
.iam-msgs{
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.iam-empty{
  opacity: .55;
  font-size: 12px;
  text-align: center;
  padding: 18px 10px;
  line-height: 1.7;
}
.iam-msg{
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.iam-msg-ai{
  align-self: flex-start;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-bottom-left-radius: 4px;
}
.iam-msg-user{
  align-self: flex-end;
  background: rgba(255, 0, 255, 0.08);
  border: 1px solid rgba(255, 0, 255, 0.35);
  border-bottom-right-radius: 4px;
}
.iam-msg-system{
  align-self: center;
  opacity: .6;
  font-size: 11px;
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.15);
}

/* barra de input */
.iam-input-bar{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-top: 1px solid rgba(0, 240, 255, 0.2);
  flex-shrink: 0;
}
.iam-input-bar input{
  flex: 1;
  min-width: 0;
  background: rgba(0, 20, 40, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 9px;
  color: inherit;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.iam-input-bar input:focus{ border-color: #00f0ff; box-shadow: 0 0 10px rgba(0,240,255,.25); }

/* Botões da barra: MESMO desenho da tela inicial (.btn-ctrl/.btn-send do
   styles.css - círculo ciano translúcido, glow, blur, hover scale),
   apenas reescalados para caber no modal. Herdamos as classes globais,
   então qualquer ajuste de tema/cor do app se aplica aqui também. */
.iam-input-bar .btn-ctrl{
  width: 44px;
  height: 44px;
  font-size: 17px;
}
.iam-input-bar .hud-icon{
  width: 19px;
  height: 19px;
}

.iam-resize-handle{
  position: absolute;
  right: 3px; bottom: 3px;
  width: 14px; height: 14px;
  border-right: 2px solid rgba(0,240,255,.5);
  border-bottom: 2px solid rgba(0,240,255,.5);
  border-radius: 0 0 4px 0;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.iam-box:hover .iam-resize-handle{ opacity: 1; }

/* responsivo */
@media (max-width: 480px){
  .iam-box{
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    height: min(560px, calc(100vh - 90px));
  }
  .iam-bubble{ right: 14px; bottom: 14px; }
}

/* tema claro */
body.light-theme .iam-box{
  background: linear-gradient(180deg, rgba(240,248,252,.97), rgba(225,238,246,.95));
  border-color: rgba(0,120,160,.45);
  color: #0b2836;
}
body.light-theme .iam-head{ background: linear-gradient(180deg, rgba(0,150,190,.16), rgba(0,150,190,.05)); }
body.light-theme .iam-head-title{ color: #007a99; text-shadow: none; }
body.light-theme .iam-msg-ai{ background: rgba(0,150,190,.08); border-color: rgba(0,120,160,.3); }
body.light-theme .iam-msg-user{ background: rgba(190,0,150,.06); border-color: rgba(190,0,150,.25); }
body.light-theme .iam-modal.iam-sphere-bg .iam-msg-ai{ background: rgba(235,246,251,.9); }
body.light-theme .iam-modal.iam-sphere-bg .iam-msg-user{ background: rgba(250,238,248,.9); }
body.light-theme .iam-input-bar input{ background: rgba(255,255,255,.75); border-color: rgba(0,120,160,.35); }