/* =========================================================
   NEXUS IA WIDGET (flutuante + tema Nexus)
   - Botão flutuante (draggable)
   - Painel com header (draggable)
   ========================================================= */

:root{
  --nx-red:#ff2b2b;
  --nx-red2:#ff5c2a;
  --nx-bg:#0b1220;
  --nx-panel:rgba(17,24,39,.92);
  --nx-stroke:rgba(148,163,184,.18);
  --nx-text:#e5e7eb;
  --nx-muted:#9ca3af;
}

#nexus-ia-widget{
  position: fixed;
  z-index: 9999;
  /* posição controlada via JS (left/top). */
  left: auto;
  top: auto;
  right: 16px;
  bottom: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

#nexus-ia-fab{
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nx-red), var(--nx-red2));
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: grab;
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
  user-select:none;
  touch-action:none;
}
#nexus-ia-fab:active{cursor:grabbing}
#nexus-ia-fab .dot{
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,.95);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.18);
}

#nexus-ia-panel{
  width: min(420px, calc(100vw - 24px));
  height: 520px;
  border: 1px solid var(--nx-stroke);
  border-radius: 18px;
  overflow:hidden;
  background: var(--nx-panel);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 55px rgba(0,0,0,.45);
  display:none;
}

#nexus-ia-panel.open{display:block}

#nexus-ia-header{
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 12px;
  border-bottom: 1px solid rgba(148,163,184,.14);
  background: rgba(15,23,42,.92);
  user-select:none;
  cursor: grab;
  touch-action:none;
}
#nexus-ia-header:active{cursor:grabbing}

#nexus-ia-title{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--nx-text);
  font-weight: 900;
}
#nexus-ia-badge{
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(229,231,235,.92);
}

#nexus-ia-close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(255,255,255,.03);
  color: var(--nx-text);
  cursor:pointer;
}

#nexus-ia-body{
  height: calc(520px - 54px - 58px);
  padding: 12px;
  overflow:auto;
}

.nx-msg{
  margin-bottom: 10px;
  display:flex;
}
.nx-msg.user{justify-content:flex-end}
.nx-bubble{
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(255,255,255,.03);
  color: rgba(229,231,235,.95);
  white-space: pre-wrap;
  word-break: break-word;
}
.nx-msg.user .nx-bubble{
  background: rgba(255,43,43,.12);
  border-color: rgba(255,43,43,.25);
}

#nexus-ia-footer{
  height: 58px;
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-top: 1px solid rgba(148,163,184,.14);
  background: rgba(2,6,23,.32);
}

#nexus-ia-input{
  flex: 1;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(2,6,23,.35);
  color: var(--nx-text);
  padding: 0 12px;
  outline:none;
}
#nexus-ia-input:focus{
  border-color: rgba(255,43,43,.55);
  box-shadow: 0 0 0 4px rgba(255,43,43,.12);
}

#nexus-ia-send{
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, var(--nx-red), var(--nx-red2));
  color: #fff;
  font-weight: 900;
  cursor:pointer;
}

@media (max-width: 520px){
  #nexus-ia-panel{height: 460px}
  #nexus-ia-body{height: calc(460px - 54px - 58px)}
}