/* Epikur — prototype: glas og præg.
   Glas på flader der svæver over indholdet (skrivefelt, kort, menuer, sidebar).
   Præg (neumorphism) kun på kontroller: knapper, felter, statusvælger.
   Tekst forbliver flad. Kontroller beholder en synlig kant af hensyn til kontrast.
   Lægges oven på epikur.css; fjern linket i base.html for at slå det fra. */

:root{
  --baggrund:
    radial-gradient(55vw 50vh at 88% 6%, #4f7a58a6, transparent 70%),
    radial-gradient(50vw 45vh at 25% 98%, #8a6a2c80, transparent 70%),
    radial-gradient(40vw 40vh at 60% 55%, #2f5a7055, transparent 70%),
    var(--paper);
  --glas:#232d27a6; --glas-taet:#232d27d9; --glas-kant:#ffffff17; --glas-lys:#ffffff0f;
  --glas-skygge:0 14px 40px #0000004d, 0 2px 6px #00000033;
  --praeg-flade:#222b25; --praeg-lys:#ffffff0d; --praeg-skygge:#00000073;
  --sidebar-glas:#10291fcc;
}
:root{
  --blur:blur(18px) saturate(150%);
  --praeg-ud:-3px -3px 8px var(--praeg-lys), 4px 4px 10px var(--praeg-skygge);
  --praeg-ud-lille:-2px -2px 5px var(--praeg-lys), 2px 2px 6px var(--praeg-skygge);
  --praeg-ind:inset 2px 2px 5px var(--praeg-skygge), inset -2px -2px 5px var(--praeg-lys);
}

body, body.auth{background:var(--baggrund); background-attachment:fixed}

/* ---------------------------------------------------------- glas */

/* Søjlen er halvgennemsigtig uden eget slør: så kan grenenes paneler
   sløre samtalen bag sig i stedet for kun søjlen. */
.sidebar{background:var(--sidebar-glas); border-right:1px solid #ffffff12}

.composer, .menu-ind, .kort, .noegletal-kort, .forbindelseskort, .auth-kort,
.forslag li, pre.laest, .besked.epikur.i-gang{
  background:var(--glas); border:1px solid var(--glas-kant);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glas-lys), var(--glas-skygge);
}
.kort, .noegletal-kort, .forslag li{border-radius:12px}
.forbindelseskort, .auth-kort, .menu-ind{border-radius:14px}
.menu-ind{background:var(--glas-taet)}
.noegletal-kort:hover{border-color:var(--glas-kant); transform:translateY(-1px)}
.noegletal-kort{transition:transform .15s ease}

/* Skrivefeltet bliver hængende i bunden, så samtalen glider ind under glasset. */
.composer{position:sticky; bottom:18px; z-index:4; border-radius:16px; padding:13px 15px 12px}
.composer-bund{border-top-color:var(--glas-kant)}
.arbejdsstatus{border-top-color:var(--glas-kant)}

/* Live-trin: boblen er en glasflade, mens Epikur arbejder. */
.besked.epikur.i-gang{padding:12px 16px; border-radius:14px}
.besked.epikur.i-gang .trin{border-left-color:var(--glas-kant)}

.besked.bruger .boble{background:var(--glas); border:1px solid var(--glas-kant);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}

/* ---------------------------------------------------------- præg */

button, .button{transition:box-shadow .15s ease, transform .15s ease}
button.ghost, .button.ghost, .menu summary{
  background:var(--praeg-flade); border:1px solid var(--ui-border); color:var(--ink);
  box-shadow:var(--praeg-ud-lille);
}
button.ghost:hover, .button.ghost:hover, .menu summary:hover{background:var(--praeg-flade)}
button:not(.rk):not(.ghost), .button:not(.ghost){box-shadow:var(--praeg-ud-lille)}
button:not(.rk):active, .button:active, .menu[open] summary{
  box-shadow:var(--praeg-ind); transform:translateY(1px)}

/* Felter er trykket ned i fladen. */
input, textarea, select{background:var(--praeg-flade); box-shadow:var(--praeg-ind)}
input:focus, select:focus, textarea:focus{border-color:var(--ui-accent)}
.composer textarea{box-shadow:none}

/* Statusvælger: tre knapper i én rille; den valgte er trykket ned. */
.segment{display:inline-flex; gap:4px; margin-top:6px; padding:4px;
  border:1px solid var(--ui-border); border-radius:11px;
  background:var(--praeg-flade); box-shadow:var(--praeg-ind)}
.segment form{display:inline}
.segment button{margin:0; padding:7px 15px; border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--muted); box-shadow:none; font-weight:500;
  text-transform:capitalize}
.segment button:hover{color:var(--ink); opacity:1}
.segment button[aria-pressed="true"]{background:var(--praeg-flade); color:var(--ink);
  border-color:var(--ui-border); box-shadow:var(--praeg-ud); font-weight:600; cursor:default}

/* ---------------------------------------------------------- fravalg */

@media (prefers-reduced-transparency: reduce){
  .sidebar{background:var(--sidebar)}
  .composer, .menu-ind, .kort, .noegletal-kort, .forbindelseskort, .auth-kort,
  .forslag li, pre.laest, .besked.epikur.i-gang, .besked.bruger .boble{
    background:var(--ui-surface); -webkit-backdrop-filter:none; backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .composer, .menu-ind, .kort, .noegletal-kort, .forbindelseskort, .auth-kort,
  .forslag li, pre.laest, .besked.epikur.i-gang{background:var(--glas-taet)}
}
@media (prefers-reduced-motion: reduce){
  button, .button, .noegletal-kort{transition:none}
  .noegletal-kort:hover, button:active, .button:active{transform:none}
}