/* Kinekt Chat — Design-System v1 (Clash Display + Satoshi, ein Akzent #6fb0ab).
   Hell "Perplexity-Computer" als Basis, Dusk-Dunkel folgt dem System. */
@font-face{font-family:'Clash Display';src:url('/fonts/ClashDisplay-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Display';src:url('/fonts/ClashDisplay-Semibold.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/Satoshi-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/Satoshi-Medium.otf') format('opentype');font-weight:500;font-display:swap}

:root{
  --accent:#6fb0ab;
  --disp:'Clash Display',sans-serif;
  --sans:'Satoshi',sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --bg:#f4f3ef; --fg:#151617; --dim:#6e7073;
  --line:rgba(0,0,0,.1); --karte:rgba(0,0,0,.045);
  --glas:rgba(244,243,239,.72); --glasrand:rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1319; --fg:#e6e7e9; --dim:#8d9095;
    --line:rgba(255,255,255,.09); --karte:rgba(255,255,255,.055);
    --glas:rgba(17,21,27,.62); --glasrand:rgba(255,255,255,.09);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--sans);background:var(--bg);color:var(--fg);
  min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.025;mix-blend-mode:soft-light;z-index:60;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── schwebende Glass-Nav-Pill ── */
.pill{
  position:fixed;z-index:40;left:50%;transform:translateX(-50%);
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  width:min(720px, calc(100% - 24px));
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px 8px 16px;border-radius:999px;
  background:var(--glas);border:1px solid var(--glasrand);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 30px rgba(0,0,0,.10);
}
.brand{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.02em;
  display:flex;align-items:center;gap:8px}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent)}
.pill-actions{display:flex;align-items:center;gap:6px}
.seg{display:flex;background:var(--karte);border-radius:999px;padding:3px}
.seg-b{border:0;background:transparent;color:var(--dim);font-family:var(--disp);font-weight:500;
  font-size:12.5px;padding:6px 12px;border-radius:999px;cursor:pointer;
  transition:color .3s var(--ease), background .3s var(--ease)}
.seg-b.on{background:var(--bg);color:var(--fg);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.ghost{border:0;background:transparent;color:var(--dim);font-size:17px;line-height:1;
  width:36px;height:36px;border-radius:50%;cursor:pointer;transition:background .3s var(--ease)}
.ghost:active{background:var(--karte)}

/* ── Chatlauf ── */
main{
  max-width:720px;margin:0 auto;
  padding:calc(env(safe-area-inset-top, 0px) + 86px) 20px 170px;
}
.leer{padding-top:18dvh;text-align:left}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px}
.eyebrow .edot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.leer h1{font-family:var(--disp);font-weight:600;font-size:clamp(34px,8vw,52px);
  letter-spacing:-.02em;word-spacing:.08em;line-height:1.04;margin:18px 0 12px}
.leer .sub{color:var(--dim);max-width:42ch;line-height:1.6;font-size:15.5px}

.zug{margin:26px 0;animation:auf .6s var(--ease)}
@keyframes auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.zug.nutzer{display:flex;justify-content:flex-end}
.zug.nutzer .blase{
  max-width:85%;background:var(--karte);border:1px solid var(--line);
  border-radius:18px 18px 4px 18px;padding:11px 15px;font-size:15.5px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word}
.zug.antwort{max-width:65ch;font-size:15.5px;line-height:1.65;word-break:break-word}
.zug.antwort p{margin:0 0 10px}
.zug.antwort b{font-weight:500;font-family:var(--disp);letter-spacing:-.01em}
.zug.antwort code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:var(--karte);border-radius:6px;padding:2px 6px}
.zug.antwort pre{background:var(--karte);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;overflow-x:auto;font-size:13px;line-height:1.5;margin:10px 0}
.zug.antwort pre code{background:none;padding:0}
.zug.antwort ul{margin:2px 0 10px;padding-left:0;list-style:none}
.zug.antwort li{padding-left:16px;position:relative;margin:3px 0}
.zug.antwort li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}

.meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--accent);font-style:normal}
.denkt{color:var(--dim);font-size:13px;display:inline-flex;align-items:center;gap:8px}
.denkt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:puls 1.2s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

.confirm{display:flex;gap:10px;margin:12px 0 2px}
.confirm button{font-family:var(--disp);font-weight:500;font-size:13.5px;border-radius:999px;
  padding:9px 18px;cursor:pointer;transition:transform .2s var(--ease)}
.confirm button:active{transform:scale(.98)}
.confirm .ja{border:0;background:var(--fg);color:var(--bg)}
.confirm .nein{border:1px solid var(--line);background:transparent;color:var(--fg)}

.fehler{color:#b3564e;font-size:14px}

/* ── Composer ── */
.composer-wrap{position:fixed;z-index:40;left:0;right:0;bottom:0;
  padding:12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background:linear-gradient(to top, var(--bg) 55%, transparent);pointer-events:none}
.composer{
  pointer-events:auto;max-width:720px;margin:0 auto;display:flex;align-items:flex-end;gap:8px;
  background:var(--glas);border:1px solid var(--glasrand);border-radius:26px;
  padding:8px 8px 8px 18px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 30px rgba(0,0,0,.12)}
#eingabe{flex:1;border:0;background:transparent;color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.45;resize:none;outline:none;max-height:132px;padding:9px 0}
#eingabe::placeholder{color:var(--dim)}
.island{border:0;width:40px;height:40px;border-radius:50%;background:var(--fg);color:var(--bg);
  font-size:17px;cursor:pointer;flex:0 0 auto;display:grid;place-items:center;
  transition:transform .25s var(--ease), opacity .2s}
.island:active{transform:scale(.94)}
.island:disabled{opacity:.35}

/* ── Sitzungen-Drawer ── */
.drawer{position:fixed;z-index:70;top:0;right:0;bottom:0;width:min(360px, 88vw);
  background:var(--bg);border-left:1px solid var(--line);
  transform:translateX(105%);transition:transform .5s var(--ease);
  padding:calc(env(safe-area-inset-top, 0px) + 16px) 0 env(safe-area-inset-bottom, 0px);
  display:flex;flex-direction:column}
.drawer.offen{transform:none}
.drawer-kopf{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 14px}
.drawer-kopf h2{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.02em}
.drawer-liste{overflow-y:auto;flex:1}
.sitzung{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);
  padding:13px 18px;cursor:pointer}
.sitzung:last-child{border-bottom:1px solid var(--line)}
.sitzung .info{flex:1;min-width:0}
.sitzung .titel{font-family:var(--disp);font-weight:500;font-size:14.5px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitzung .vorschau{color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:2px}
.sitzung .wann{color:var(--dim);font-size:11px;letter-spacing:.06em;flex:0 0 auto}
.sitzung .weg{flex:0 0 auto;border:0;background:transparent;color:var(--dim);font-size:14px;
  width:30px;height:30px;border-radius:50%;cursor:pointer}
.sitzung .weg:active{background:var(--karte)}
.sitzung.aktiv .titel{color:var(--accent)}
.schleier{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.3);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}