/* =============================================================================
   ANSAR'S PERSONAL ASSISTANT — cyber-luxe hacker theme
   Matrix rain, scanlines, glitch text, neon glass, animated everything.
   ============================================================================= */

:root{
  --bg:#020503;
  --panel: rgba(6, 16, 11, 0.66);
  --panel2: rgba(9, 22, 16, 0.72);
  --line: rgba(57, 255, 145, 0.16);
  --line-strong: rgba(57, 255, 145, 0.36);
  --text:#dffbe9;
  --muted:#69917d;
  --accent:#39ff8f;
  --accent2:#00e5ff;
  --accent3:#c8ff00;
  --accent-grad: linear-gradient(135deg, #00ff9c 0%, #00e5ff 50%, #39ff14 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(0,255,156,.20), rgba(0,229,255,.20));
  --user: linear-gradient(135deg, #046b4d 0%, #00958a 55%, #00c2c7 130%);
  --danger:#ff3366; --ok:#39ff8f; --warn:#ffd23f;
  --glow: 0 0 0 1px rgba(57,255,145,.20), 0 8px 30px -8px rgba(0,229,255,.35);
  --glow-strong: 0 0 30px -3px rgba(57,255,145,.65), 0 0 70px -18px rgba(0,229,255,.55);
  --radius: 16px;
  --font: "Inter","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"JetBrains Mono","Space Grotesk",monospace;
  --font-mono:"JetBrains Mono",monospace;
  --ease: cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eefbf3;
    --panel: rgba(255,255,255,0.74);
    --panel2: rgba(255,255,255,0.88);
    --line: rgba(6,120,80,0.16);
    --line-strong: rgba(6,120,80,0.30);
    --text:#0a2318; --muted:#4a6a5a;
    --user: linear-gradient(135deg, #00b37a 0%, #00a3a8 60%, #00c2c7 140%);
    --glow: 0 0 0 1px rgba(0,150,110,.16), 0 8px 24px -10px rgba(0,150,110,.30);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (height:100dvh){ html,body{height:100dvh} }
img,video,canvas,svg{max-width:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 var(--font);
  position:relative; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  animation: crtBoot .8s var(--ease) both;
  background-image: repeating-linear-gradient(0deg, rgba(57,255,145,.035) 0px, rgba(57,255,145,.035) 1px, transparent 1px, transparent 3px);
  background-size: 100% 4px;
  animation: crtBoot .8s var(--ease) both, scanShift 7s linear infinite;
}
@keyframes crtBoot{
  0%{opacity:0; filter:brightness(2.4) saturate(0); transform:scaleY(1.02)}
  8%{opacity:1; filter:brightness(.4) saturate(1.4)}
  14%{opacity:.2; filter:brightness(2)}
  20%{opacity:1; filter:brightness(1)}
  100%{opacity:1; filter:brightness(1) saturate(1); transform:scaleY(1)}
}
@keyframes scanShift{ 0%{background-position:0 0} 100%{background-position:0 400px} }

/* ---------------------------------------------------------------------------
   2D-fallback canvas + 3D WebGL-achtergrond (zwevende geometrische solids)
   + vignette (injected by common.js) + scanline sweep
   --------------------------------------------------------------------------- */
#matrixRain{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.5;mix-blend-mode:screen}
#hackerCanvas3D{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:1;mix-blend-mode:normal}
.scanbeam{position:fixed;left:0;right:0;height:180px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(57,255,145,0) 0%, rgba(57,255,145,.07) 45%, rgba(0,229,255,.12) 50%, rgba(57,255,145,.07) 55%, rgba(57,255,145,0) 100%);
  animation: scanbeamMove 9s linear infinite;
}
@keyframes scanbeamMove{ 0%{top:-180px} 100%{top:100%} }
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* Licht thema (systeeminstelling): "screen" blend maakt lichte neon-pixels
   onzichtbaar op een witte achtergrond, en een zwart vignet oogt vies op wit.
   Daarom hier "multiply" (de neon-kleur blijft zichtbaar op wit) en een
   zachter, groentint vignet in plaats van zwart. */
@media (prefers-color-scheme: light){
  #matrixRain{ mix-blend-mode:multiply; opacity:.34 }
  #hackerCanvas3D{opacity:.55}
  .scanbeam{ opacity:.6 }
  .vignette{ background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(10,60,40,.12) 100%); }
}

/* ---------------------------------------------------------------------------
   Animated aurora / mesh background — living neon backdrop
   --------------------------------------------------------------------------- */
body::before, body::after{
  content:""; position:fixed; z-index:-2; inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(38% 38% at 15% 20%, rgba(0,255,156,.26), transparent 65%),
    radial-gradient(34% 34% at 85% 15%, rgba(0,229,255,.24), transparent 65%),
    radial-gradient(40% 40% at 75% 85%, rgba(57,255,20,.20), transparent 65%),
    radial-gradient(30% 30% at 15% 85%, rgba(200,255,0,.10), transparent 65%);
  filter:blur(60px) saturate(140%);
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
body::after{
  inset:-30%;
  background:
    radial-gradient(25% 25% at 60% 40%, rgba(0,229,255,.16), transparent 70%),
    radial-gradient(20% 20% at 30% 60%, rgba(0,255,156,.18), transparent 70%),
    repeating-linear-gradient(115deg, rgba(57,255,145,.05) 0px, rgba(57,255,145,.05) 2px, transparent 2px, transparent 90px);
  animation: auroraDrift 30s ease-in-out infinite alternate-reverse;
  opacity:.85;
}
@keyframes auroraDrift{
  0%{ transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%{ transform: translate3d(4%,-6%,0) rotate(14deg) scale(1.18); }
  100%{ transform: translate3d(-6%,4%,0) rotate(-10deg) scale(1.1); }
}
@media (prefers-color-scheme: light){
  /* Zelfde grote beweging, maar iets minder dekkend zodat tekst op wit leesbaar blijft. */
  body::before{ opacity:.7 }
  body::after{ opacity:.6 }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after, .scanbeam, body{ animation:none; }
  #matrixRain, #hackerCanvas3D{ display:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------------------------
   Typography — terminal display font + glitch flicker on headings/titles
   --------------------------------------------------------------------------- */
h1,h2,h3,#fam,#title,.top h1,#ttl{ font-family:var(--font-display); letter-spacing:.2px; }

@keyframes glitchFlicker{
  0%,89%,100%{ text-shadow:0 0 6px rgba(57,255,145,.55), 0 0 18px rgba(0,229,255,.25); transform:translate(0,0); opacity:1 }
  90%{ text-shadow:-2px 0 rgba(255,0,90,.7), 2px 0 rgba(0,229,255,.7); transform:translate(-1px,0); opacity:.85 }
  91%{ text-shadow:2px 0 rgba(255,0,90,.7), -2px 0 rgba(0,229,255,.7); transform:translate(1px,0); opacity:1 }
  92%{ text-shadow:0 0 6px rgba(57,255,145,.55); transform:translate(0,0); opacity:1 }
}
#fam, #title, #ttl, .bar .title{ animation: glitchFlicker 6s ease-in-out infinite; }
#title::after, #ttl::after, .bar .title::after{
  content:"▌"; margin-left:4px; color:var(--accent); opacity:0;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{ 0%,45%{opacity:1} 46%,100%{opacity:0} }

button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  padding:10px 13px; width:100%; outline:none;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(57,255,145,.6);
  box-shadow: 0 0 0 3px rgba(57,255,145,.16), var(--glow);
}
input[type=checkbox]{width:auto}
textarea{resize:vertical}

/* ---------------------------------------------------------------------------
   Buttons — neon glow, scan sheen, idle breathing pulse on primary CTAs
   --------------------------------------------------------------------------- */
.btn{
  position:relative; background:var(--accent-grad); color:#04140c; border:0; border-radius:12px;
  padding:10px 16px; cursor:pointer; font-weight:700; text-decoration:none; display:inline-block;
  box-shadow: 0 6px 20px -6px rgba(0,229,255,.45);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
  overflow:hidden; letter-spacing:.2px; font-family:var(--font-display);
}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%);
  background-size:220% 100%; background-position:120% 0; opacity:0;
  transition:opacity .2s;
}
.btn:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 38px -6px rgba(0,229,255,.65), var(--glow-strong); filter:saturate(1.2) brightness(1.08); }
.btn:hover::after{ opacity:1; animation: sheen 1s var(--ease); }
.btn:active{ transform:translateY(0px) scale(.97); }
@keyframes sheen{ from{background-position:120% 0} to{background-position:-20% 0} }
.btn:disabled{opacity:.5;cursor:not-allowed; transform:none; box-shadow:none; animation:none}
.btn.ghost{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  box-shadow:none; backdrop-filter: blur(18px); font-weight:600;
}
.btn.ghost:hover{ border-color:var(--line-strong); box-shadow:var(--glow); background:var(--panel); }
.btn.danger{ background:linear-gradient(135deg,#ff3366,#c81e50); box-shadow:0 6px 20px -6px rgba(200,30,80,.55); color:#fff }
.btn.warn{ background:linear-gradient(135deg,#ffd23f,#f59e0b); color:#1a1200; box-shadow:0 6px 20px -6px rgba(245,158,11,.5); }
.btn.small{padding:6px 11px;font-size:13px; border-radius:9px}
a{color:var(--accent2)}

#sendBtn, #go{ animation: ctaPulse 2.6s ease-in-out infinite; }
#sendBtn:hover, #go:hover{ animation:none; }
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 6px 20px -6px rgba(0,229,255,.45), 0 0 0 0 rgba(57,255,145,.4); }
  50%{ box-shadow:0 6px 26px -6px rgba(0,229,255,.65), 0 0 0 14px rgba(57,255,145,0); }
}

/* ---------------------------------------------------------------------------
   Glass surfaces — every panel/card/bar shares this treatment, with a rotating
   neon-conic border sweep for extra "from the future" motion
   --------------------------------------------------------------------------- */
.card, .side, .bar, .composer, .modal, pre.prompt, .member, .chat-view, .top{
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.card{
  position:relative; box-shadow: var(--glow);
  border:1px solid var(--line) !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* Groter, duidelijker hover-effect dan voorheen - maar puur een rechte
   lift + gloed, nooit een rotatie die meedraait met de muispositie. Zo'n
   rotatie liet eerder het hele paneel (en dus elke knop erin) net onder de
   cursor wegdraaien, waardoor klikken in het admin-paneel lastig werd. */
.card:hover{ transform: translateY(-4px); box-shadow: var(--glow-strong); }
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--a,0deg), rgba(0,229,255,.55), rgba(57,255,145,.08) 30%, transparent 55%, rgba(200,255,0,.35) 80%, rgba(0,229,255,.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; opacity:.7;
  animation: borderSpin 7s linear infinite;
  /* Alleen laten draaien terwijl je er echt overheen hovert: met tientallen
     kaarten op één admin-pagina was dit de grootste bron van vertraging
     (elke kaart tekende non-stop een geanimeerde, gemaskeerde rand). */
  animation-play-state: paused;
}
.card:hover::before{ animation-play-state: running; animation-duration: 4s; }
@property --a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes borderSpin{ to{ --a:360deg; } }
.card, .modal{ transition: box-shadow .3s var(--ease); }

/* Toast */
.toast{
  position:fixed;bottom:22px;right:22px;
  background:var(--accent-grad); color:#04140c; padding:12px 18px; font-weight:700;
  border-radius:12px;opacity:0;pointer-events:none;z-index:99;max-width:80vw;
  box-shadow: 0 10px 30px -8px rgba(0,229,255,.6);
  transform:translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  font-family:var(--font-display);
}
.toast.show{opacity:1; transform:translateY(0); animation:toastGlitch .4s var(--ease)}
.toast.err{background:linear-gradient(135deg,#ff3366,#c81e50); color:#fff; box-shadow:0 10px 30px -8px rgba(200,30,80,.6)}
@keyframes toastGlitch{ 0%{clip-path:inset(0 0 100% 0)} 60%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 0 0 0)} }

/* ---------------------------------------------------------------------------
   Scrollbars — slim, neon glowing
   --------------------------------------------------------------------------- */
*{ scrollbar-width:thin; scrollbar-color: rgba(57,255,145,.5) transparent; }
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(57,255,145,.6), rgba(0,229,255,.5)); border-radius:99px }
*::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------------------
   Generic reveal-on-load animation helpers
   --------------------------------------------------------------------------- */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{opacity:0; transform:perspective(700px) scale(.88) rotateX(10deg)} to{opacity:1; transform:perspective(700px) scale(1) rotateX(0)} }
@keyframes msgIn3D{
  from{opacity:0; transform:perspective(700px) translateY(22px) translateZ(-50px) rotateX(14deg)}
  to{opacity:1; transform:perspective(700px) translateY(0) translateZ(0) rotateX(0)}
}
.msg{ animation-name: msgIn3D; }

.chatimg{display:block;max-width:100%;height:auto;border-radius:14px;margin:10px 0;border:1px solid var(--line)}


/* =============================================================================
   RESPONSIVE — telefoon, tablet, laptop, groot scherm, landscape
   Breakpoints: 1200+ groot · 1024 laptop/tablet landscape · 760 tablet portret/telefoon · 420 kleine telefoon
   ============================================================================= */
:root{
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --tap: 44px; /* minimale aanraakgrootte (Apple/Google richtlijn) */
}

/* Aanraakschermen: grotere doelen, geen hover-"spring", geen dubbel-tik-zoom */
@media (hover:none) and (pointer:coarse){
  .btn,button,select{min-height:var(--tap)}
  .btn.small{min-height:38px}
  .btn:hover,.chip:hover,.stat:hover{transform:none}
  button,.btn,.tab,.chip,.item{touch-action:manipulation}
}

/* iOS Safari zoomt in bij focus op velden < 16px: dat voorkomen we op telefoons */
@media (max-width:760px){
  input,select,textarea{font-size:16px}
  .toast{left:12px;right:12px;bottom:calc(14px + var(--sab));max-width:none;text-align:center}
}

/* Zware blur/aurora/matrix-animatie is duur op kleine/zwakke toestellen: lichter maken */
@media (max-width:760px){
  body::before,body::after{filter:blur(40px) saturate(120%);animation-duration:48s}
  .card,.side,.bar,.composer,.modal{backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
  #matrixRain{opacity:.3}
  #hackerCanvas3D{opacity:.55}
  .scanbeam{display:none}
}

/* Landscape telefoon: weinig hoogte, dus alles compacter */
@media (max-height:480px) and (orientation:landscape){
  body::before,body::after{display:none}
  #matrixRain,#hackerCanvas3D,.scanbeam{display:none}
}


/* ---------------------------------------------------------------------------
   Geïnstalleerde app (PWA): de statusbalk is doorschijnend (iOS) of de pagina
   loopt tot aan de rand. Houd de bovenkant vrij van klok/notch, overal.
   --------------------------------------------------------------------------- */
/* De chat (.bar) en het admin-paneel (.top) tellen de veilige bovenrand al zelf mee (zie hierboven).
   Alleen de inlogpagina heeft geen eigen balk en krijgt hem hier. */
html.is-pwa body.login-page{ padding-top:env(safe-area-inset-top,0px); }
/* Geen tekstselectie/lange-tik-menu op knoppen en navigatie: voelt als een echte app */
html.is-pwa .btn, html.is-pwa .bar, html.is-pwa .side .top, html.is-pwa .tabs{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* Voorkom "rubber band" en pull-to-refresh die het hele scherm meesleept */
html.is-pwa, html.is-pwa body{ overscroll-behavior-y:none; }

/* Luxe 3D-achtergrond: rustiger decor eromheen zodat de scène de show steelt */
.scanbeam{display:none}
body::after{display:none}
body::before{opacity:.35}

/* Zichtbaarheid-schuifregelaar: --bgvis (0..1) wordt door common.js gezet.
   Bij 0 blijft alleen de themakleur (--bg) over: zwart in dark, licht in light. */
#hackerCanvas3D,#matrixRain{opacity:var(--bgvis,1);transition:opacity .25s ease}
body::before{opacity:calc(var(--bgvis,1) * .35)}
.bgvis{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;font-family:var(--font)}
.bgvis-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--accent);background:var(--panel2);border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--glow);transition:transform .2s var(--ease)}
.bgvis-btn:hover{transform:scale(1.08)}
.bgvis-panel{position:absolute;left:0;bottom:52px;width:220px;padding:14px 16px;border-radius:14px;
  color:var(--text);background:var(--panel2);border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--glow)}
.bgvis-panel[hidden]{display:none}
.bgvis-panel label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px}
.bgvis-panel input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.bgvis-hint{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}
@media (max-width:760px){ .bgvis{bottom:calc(84px + env(safe-area-inset-bottom,0px))} }