/* =============================================================================
   RANA FAMILY AI — ultra premium / futuristic theme
   Glassmorphism, animated aurora background, gradient accents, micro-motion.
   ============================================================================= */

:root{
  --bg:#05070d;
  --panel: rgba(20, 24, 38, 0.62);
  --panel2: rgba(30, 36, 56, 0.65);
  --line: rgba(148, 163, 214, 0.16);
  --line-strong: rgba(148, 163, 214, 0.30);
  --text:#eef1fb;
  --muted:#93a0c2;
  --accent:#8b5cf6;
  --accent2:#22d3ee;
  --accent-grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 45%, #22d3ee 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(139,92,246,.20), rgba(34,211,238,.20));
  --user: linear-gradient(135deg, #6d28d9 0%, #4338ca 55%, #0ea5b8 130%);
  --danger:#fb5b74; --ok:#34e0a1; --warn:#ffb454;
  --glow: 0 0 0 1px rgba(139,92,246,.18), 0 8px 30px -8px rgba(99,102,241,.45);
  --glow-strong: 0 0 30px -4px rgba(139,92,246,.55), 0 0 60px -20px rgba(34,211,238,.45);
  --radius: 16px;
  --font: "Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Space Grotesk","Plus Jakarta Sans",sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eef1fb;
    --panel: rgba(255,255,255,0.72);
    --panel2: rgba(255,255,255,0.85);
    --line: rgba(70, 80, 130, 0.14);
    --line-strong: rgba(70, 80, 130, 0.26);
    --text:#161a2c; --muted:#5b6486;
    --user: linear-gradient(135deg, #8b5cf6 0%, #6366f1 60%, #22d3ee 140%);
    --glow: 0 0 0 1px rgba(99,102,241,.14), 0 8px 24px -10px rgba(99,102,241,.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;
}

/* ---------------------------------------------------------------------------
   Animated aurora / mesh background — the "from the future" living 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(139,92,246,.32), transparent 65%),
    radial-gradient(34% 34% at 85% 15%, rgba(34,211,238,.26), transparent 65%),
    radial-gradient(40% 40% at 75% 85%, rgba(99,102,241,.24), transparent 65%),
    radial-gradient(30% 30% at 15% 85%, rgba(236,72,153,.16), transparent 65%);
  filter:blur(60px) saturate(130%);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
body::after{
  inset:-30%;
  background:
    radial-gradient(25% 25% at 60% 40%, rgba(34,211,238,.18), transparent 70%),
    radial-gradient(20% 20% at 30% 60%, rgba(139,92,246,.20), transparent 70%);
  animation: auroraDrift 34s ease-in-out infinite alternate-reverse;
  opacity:.8;
}
@keyframes auroraDrift{
  0%{ transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%{ transform: translate3d(2%,-3%,0) rotate(8deg) scale(1.08); }
  100%{ transform: translate3d(-3%,2%,0) rotate(-6deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */
h1,h2,h3,#fam,#title,.top h1{ font-family:var(--font-display); letter-spacing:.2px; }

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(139,92,246,.55);
  box-shadow: 0 0 0 3px rgba(139,92,246,.16), var(--glow);
}
input[type=checkbox]{width:auto}
textarea{resize:vertical}

/* ---------------------------------------------------------------------------
   Buttons — gradient, glow, lift on hover, press feedback
   --------------------------------------------------------------------------- */
.btn{
  position:relative; background:var(--accent-grad); color:#fff; border:0; border-radius:12px;
  padding:10px 16px; cursor:pointer; font-weight:600; text-decoration:none; display:inline-block;
  box-shadow: 0 6px 20px -6px rgba(139,92,246,.55);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
  overflow:hidden; letter-spacing:.1px;
}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%);
  background-size:220% 100%; background-position:120% 0; opacity:0;
  transition:opacity .2s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -6px rgba(139,92,246,.65), var(--glow-strong); filter:saturate(1.08); }
.btn:hover::after{ opacity:1; animation: sheen 1.1s var(--ease); }
.btn:active{ transform:translateY(0px) scale(.985); }
@keyframes sheen{ from{background-position:120% 0} to{background-position:-20% 0} }
.btn:disabled{opacity:.5;cursor:not-allowed; transform:none; box-shadow:none}
.btn.ghost{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  box-shadow:none; backdrop-filter: blur(18px);
}
.btn.ghost:hover{ border-color:var(--line-strong); box-shadow:var(--glow); background:var(--panel); }
.btn.danger{ background:linear-gradient(135deg,#fb5b74,#e11d48); box-shadow:0 6px 20px -6px rgba(225,29,72,.55); }
.btn.warn{ background:linear-gradient(135deg,#ffb454,#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)}

/* ---------------------------------------------------------------------------
   Glass surfaces — every panel/card/bar shares this treatment
   --------------------------------------------------------------------------- */
.card, .side, .bar, .composer, .modal, pre.prompt, .member, .chat-view, .top{
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.card{
  position:relative; box-shadow: var(--glow);
  border:1px solid var(--line) !important;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(139,92,246,.35), rgba(34,211,238,.08) 40%, transparent 70%);
  -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:.6;
}
.card:hover{ box-shadow: var(--glow-strong); }
.card, .modal{ transition: box-shadow .3s var(--ease); }

/* Toast */
.toast{
  position:fixed;bottom:22px;right:22px;
  background:var(--accent-grad); color:#fff; padding:12px 18px;
  border-radius:12px;opacity:0;pointer-events:none;z-index:99;max-width:80vw;
  box-shadow: 0 10px 30px -8px rgba(99,102,241,.6);
  transform:translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.show{opacity:1; transform:translateY(0)}
.toast.err{background:linear-gradient(135deg,#fb5b74,#e11d48); box-shadow:0 10px 30px -8px rgba(225,29,72,.6)}

/* ---------------------------------------------------------------------------
   Scrollbars — slim, glowing
   --------------------------------------------------------------------------- */
*{ scrollbar-width:thin; scrollbar-color: rgba(139,92,246,.45) transparent; }
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(139,92,246,.55), rgba(34,211,238,.45)); border-radius:99px }
*::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------------------
   Generic reveal-on-load animation helpers
   --------------------------------------------------------------------------- */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{opacity:0; transform:scale(.94)} to{opacity:1; transform:scale(1)} }

.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-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(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}
}

/* Landscape telefoon: weinig hoogte, dus alles compacter */
@media (max-height:480px) and (orientation:landscape){
  body::before,body::after{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; }