/* === Alien Assistant v1.3 — Circle‑Ripple Portal === */
.alien-widget{ position:fixed; right:18px; bottom:18px;
  display:flex; flex-direction:column; align-items:center; z-index:999999;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.alien-toggle{ width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  background:#0b1220; color:#9efcff; box-shadow:0 8px 22px rgba(0,0,0,.35);
  animation:glow 4s ease-in-out infinite 1s; }
@keyframes glow{
  0%{box-shadow:0 0 10px rgba(120,255,255,.16),0 0 22px rgba(120,220,255,.10);}
  50%{box-shadow:0 0 16px rgba(120,255,255,.30),0 0 32px rgba(120,220,255,.20);}
  100%{box-shadow:0 0 10px rgba(120,255,255,.16),0 0 22px rgba(120,220,255,.10);} }
.alien-label{ margin-top:6px; font-size:14px; color:#9efcff; opacity:.85;
  text-shadow:0 0 6px rgba(150,255,255,.4); }
.alien-panel{ position:fixed; right:18px; bottom:76px;
  width:360px; height:480px; background:#0d131a; color:#e9f6ff;
  border:1px solid rgba(158,252,255,.16); border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.45); overflow:hidden;
  opacity:0; transform:scale(.3); pointer-events:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
@media (max-width: 700px){
  .alien-panel{ inset:0 !important; width:100% !important; height:100% !important;
    border-radius:0 !important; right:0!important; bottom:0!important; }
}
.alien-panel.open{ opacity:1; transform:scale(1); pointer-events:auto; }
.alien-panel.open::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(circle at 50% 50%,
    rgba(150,255,255,.35) 0%,
    rgba(150,255,255,.22) 12%,
    rgba(150,255,255,.10) 22%,
    rgba(0,0,0,0) 40%);
  opacity:0; transform:scale(.6);
  animation:portalRipple .55s ease-out forwards;
}
@keyframes portalRipple{
  0%{opacity:.95; transform:scale(.6); filter:blur(6px);}
  70%{opacity:.35; transform:scale(1.15); filter:blur(2px);}
  100%{opacity:0; transform:scale(1.35); filter:blur(0px);}
}
.alien-header{ display:flex; justify-content:space-between; align-items:center;
  padding:12px; background:#101820; border-bottom:1px solid rgba(158,252,255,.16);
  font-weight:600; color:#9efcff; }
.alien-close{ background:transparent; border:0; color:#9efcff; font-size:24px; cursor:pointer; }
.alien-body{ height: calc(100% - 106px); padding:12px; overflow-y:auto; }
.alien-bubble{ max-width:92%; margin:10px 0; padding:10px 12px; border-radius:12px; line-height:1.4; }
.alien-bot{ background:rgba(20,30,50,.7); border:1px solid rgba(158,252,255,.18); }
.alien-user{ margin-left:auto; background:rgba(158,252,255,.10); border:1px solid rgba(158,252,255,.28); }
.alien-form{ display:flex; gap:8px; padding:10px; border-top:1px solid rgba(158,252,255,.16);
  background:#0b1220; }
.alien-input{ flex:1; background:#0c162b; color:#e9f6ff; border:1px solid rgba(158,252,255,.22);
  border-radius:8px; padding:10px 12px; outline:none; }
.alien-send{ padding:10px 14px; border-radius:8px; border:0; cursor:pointer;
  background:#0b8ba6; color:#fff; font-weight:600; }
.alien-hint{ font-size:12px; opacity:.7; padding:0 12px 10px; }
/* --- FORCE Alien Assistant out of header/layout --- */
#alien-assistant {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    top: auto !important;
    left: auto !important;

    z-index: 2147483647 !important;
    pointer-events: auto !important;
}

/* Zorg dat children ook klikbaar zijn */
#alien-assistant * {
    pointer-events: auto;
}
/* --- Start Alien Assistant CLOSED --- */
#alien-assistant .alien-window {
    display: none;
}

/* Alleen toggle zichtbaar bij start */
#alien-assistant .alien-toggle {
    display: flex;
}
/* --- Alien Assistant layout: classic popup style --- */

#alien-assistant {
    position: fixed !important;
    bottom: 24px;
    right: 24px;
    width: auto;
    height: auto;
    z-index: 2147483647;
}

/* Toggle button stays fixed */
#alien-assistant .alien-toggle {
    position: relative;
    z-index: 2;
}

/* Chat window pops ABOVE the button */
#alien-assistant .alien-window {
    position: absolute;
    bottom: 72px;           /* hoogte boven de knop */
    right: 0;
    width: 320px;
    max-width: 90vw;
    z-index: 1;
}

/* Zorgt dat openen geen layout verschuiving veroorzaakt */
#alien-assistant,
#alien-assistant * {
    box-sizing: border-box;
}
/* --- Force Alien Assistant to float independently of theme blocks --- */
.alien-window,
.alien-panel {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    top: auto !important;

    z-index: 2147483647 !important;
}

/* Zorg dat hij niet meedoet aan footer/header layout */
.alien-window,
.alien-panel,
.alien-window *,
.alien-panel * {
    transform: none !important;
    pointer-events: auto;
}
/* === FORCE Alien Assistant to float above everything === */

.alien-assistant,
.alien-toggle,
.alien-panel {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Toggle button (alien icon) */
.alien-toggle {
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
}

/* Assistant panel */
.alien-panel {
  bottom: 90px !important; /* above the button */
  right: 24px !important;
  left: auto !important;
  top: auto !important;

  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;

  display: none; /* JS controls open/close */
}

/* Prevent theme containers from affecting it */
.alien-assistant * {
  box-sizing: border-box;
}
/* === FORCE COMPACT FLOATING CHAT === */

#alien-assistant {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;

  width: 380px !important;
  max-width: calc(100vw - 40px) !important;
  height: auto;

  z-index: 99999 !important;

  background: #0b1620 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;

  overflow: hidden !important;
}

/* Inner scroll area (messages) */
#alien-assistant .alien-body {
  max-height: 420px;
  overflow-y: auto;
}

/* Header */
#alien-assistant .alien-header {
  background: #0f1e2c;
  color: #6ff;
}

/* Remove page transparency bleed */
#alien-assistant * {
  backdrop-filter: none !important;
}
/* === FORCE ALIEN ASSISTANT CHATBOX === */

.alien-panel {
  position: fixed !important;
  bottom: 90px !important;
  right: 20px !important;

  width: 380px !important;
  max-width: calc(100vw - 40px) !important;
  height: auto !important;
  max-height: 70vh !important;

  background: rgba(10, 18, 30, 0.98) !important;
  backdrop-filter: none !important;

  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;

  overflow: hidden !important;
  z-index: 99999 !important;
}

/* Scrollbare chat-inhoud */
.alien-body {
  max-height: 50vh;
  overflow-y: auto;
}

/* Zorg dat input altijd zichtbaar blijft */
.alien-footer,
.alien-input-wrapper {
  position: sticky;
  bottom: 0;
  background: #0b1625;
}
/* === FORCE OPAQUE CHAT (NO TRANSPARENCY) === */

.alien-panel,
.alien-window,
.alien-assistant {
  background: #0b1625 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Chat bubbles */
.alien-message,
.alien-bot,
.alien-user {
  background: #122238 !important;
  color: #e8f0ff !important;
}

/* Header bar */
.alien-header {
  background: #0a1524 !important;
}

/* Input area */
.alien-footer,
.alien-input-wrapper {
  background: #0a1524 !important;
}

/* Zorg dat tekst altijd leesbaar is */
.alien-panel * {
  text-shadow: none !important;
}