/* SidiTools-Assistent — Gestaltung.
 *
 * Grundlage ist die Bildsprache von siditools.com: dieselben Farbwerte, dieselbe
 * Schrift, dieselbe Hintergrundbuehne. Wer von dort herkommt, soll nicht das
 * Gefuehl haben, auf einem fremden Werkzeug gelandet zu sein.
 * Weiterhin ohne Framework und ohne Build.
 *
 * DIE SCHRIFTEN WERDEN SELBST AUSGELIEFERT, NICHT VON GOOGLE GEHOLT.
 * siditools.com bindet Geist ueber fonts.googleapis.com ein. Hier waere das ein
 * Rueckschritt: jeder Seitenaufruf uebertruege die IP des Besuchers an Google
 * (deutsche Gerichte werten das als Uebermittlung, LG Muenchen I, 3 O 17493/20),
 * und die Datenschutzseite dieses Dienstes nennt genau zwei Empfaenger — OpenAI
 * und Cloudflare. Ein dritter durch die Hintertuer waere schlicht falsch.
 * Zusammen 52 KB unter /fonts/. Nebeneffekt: die CSP bleibt bei 'self'.
 */

@font-face{
  font-family:"Geist";
  src:url("/fonts/geist-latin.woff2") format("woff2");
  font-weight:100 900;          /* variabel — eine Datei fuer alle Schnitte */
  font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Geist Mono";
  src:url("/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* SAGT DEM BROWSER, DASS DIESE SEITE DUNKEL IST.
     Ohne diese Zeile zeichnet das Betriebssystem alles Native in hell — und
     das aufgeklappte <select> stand mit fast weisser Schrift (--ink #EEF2F9)
     auf weissem Grund. Lesbar war nur die markierte Zeile, weil die vom
     System blau hinterlegt wird. Betrifft ausserdem Scrollbalken, Textcursor
     und die Autofill-Farben. */
  color-scheme: dark;
  /* Farbwerte, Radien, Schatten und Kurven 1:1 aus siditools.com */
  --bg:#05070C; --bg-1:#080B12; --bg-2:#0C1018; --bg-3:#11161F; --bg-4:#161C27;
  --glass:rgba(12,16,24,.62);
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.11);
  --line-3:rgba(255,255,255,.18);
  --ink:#EEF2F9; --ink-2:#A7B0C2; --ink-3:#6C7689; --ink-4:#454E60;
  --green:#10D680; --green-hi:#3BF2A2; --green-dim:#0A6F45;
  --green-g:rgba(16,214,128,.5);
  --red:#F4546A; --gold:#FFB547; --blue:#6C9BFF;
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 22px 48px -28px rgba(0,0,0,.9);
  --shadow-2:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 90px -40px rgba(0,0,0,.95),
             0 0 0 1px rgba(255,255,255,.045);
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:56rem;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv01";
  display:flex; flex-direction:column; align-items:center;
}

/* ── Hintergrundbuehne ────────────────────────────────────────────────────────
   Dieselben sechs Schichten wie auf siditools.com. `contain:strict` haelt die
   Rechenarbeit in diesem Teilbaum — ohne das laesst der 150px-Weichzeichner der
   Wolken das Scrollen auf schwaecheren Geraeten ruckeln. */
.bg-canvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--bg); overflow:hidden; contain:strict;
}
.bg-canvas .orb{position:absolute; border-radius:50%; filter:blur(150px);
  will-change:transform}
.bg-canvas .orb-1{width:900px; height:900px; background:#0B7A4D;
  top:-420px; left:-320px; opacity:.16; animation:drift1 34s ease-in-out infinite}
.bg-canvas .orb-2{width:760px; height:760px; background:#24406F;
  top:42%; right:-320px; opacity:.14; animation:drift2 42s ease-in-out infinite}
.bg-canvas .orb-3{width:780px; height:780px; background:#5C2440;
  bottom:-380px; left:24%; opacity:.12; animation:drift3 48s ease-in-out infinite}
.bg-canvas .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 88% 62% at 50% 24%,#000 32%,transparent 88%);
          mask-image:radial-gradient(ellipse 88% 62% at 50% 24%,#000 32%,transparent 88%);
}
.bg-canvas .vignette{position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 30%,transparent 34%,rgba(0,0,0,.72) 100%)}
.bg-canvas .grain{
  position:absolute; inset:-50%; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(70px,90px) scale(1.07)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-90px,50px) scale(1.05)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(50px,-70px) scale(1.08)}}

header,main,form,footer{width:100%; max-width:var(--max);
  padding:0 clamp(1rem,3vw,1.5rem); position:relative; z-index:1}

/* ── Kopf ────────────────────────────────────────────────────────────────────
   Markenzeile wie auf siditools.com: rundes Logo, Wortmarke mit gruener zweiter
   Haelfte. Masse und Schatten sind uebernommen, nicht nachempfunden. */
header{padding-top:1.9rem}
.brand{display:flex; align-items:center; gap:.62rem; flex-wrap:wrap}
.mark{display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  color:var(--ink)}
.brand-logo{
  height:34px; width:34px; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 0 22px rgba(16,214,128,.16);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mark:hover .brand-logo{
  transform:rotate(-8deg) scale(1.05);
  box-shadow:0 0 0 1px rgba(16,214,128,.4), 0 0 26px rgba(16,214,128,.3);
}
.name{font-weight:650; font-size:17px; letter-spacing:-.03em}
.name em{font-style:normal; color:var(--green)}
.sep{color:var(--ink-4); font-size:1.05rem; line-height:1}
h1{font-size:1.15rem; margin:0; letter-spacing:-.022em; font-weight:600}
.tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; font-weight:500; color:var(--green);
  border:1px solid rgba(16,214,128,.32); background:rgba(16,214,128,.07);
  border-radius:var(--r-pill); padding:5px 9px; line-height:1;
}
.sub{margin:.5rem 0 1.1rem; color:var(--ink-2); font-size:.94rem; max-width:46rem}

/* Werkzeugleiste als Glasstreifen — auf siditools.com traegt die Navigation
   dieselbe Behandlung (Milchglas ueber der Buehne, feine Linie darunter). */
.tools{
  display:flex; gap:.55rem; align-items:center; flex-wrap:wrap;
  padding:.5rem .7rem; margin-bottom:.2rem;
  background:var(--glass); backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border:1px solid var(--line); border-radius:var(--r-pill);
}
.tools label{font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); padding-left:.45rem}

select,button,textarea{font-family:inherit; font-size:inherit; color:var(--ink)}
select,#lang{
  background:rgba(255,255,255,.03); border:1px solid var(--line-2);
  border-radius:var(--r-pill); padding:.36rem .7rem; font-size:.88rem;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.tools select{flex:1 1 8rem; min-width:0}
/* Rueckfallebene fuer die aufgeklappte Liste. color-scheme oben erledigt das
   auf aktuellen Browsern; aeltere Chrome-Versionen unter Windows und Linux
   nehmen dagegen nur diese expliziten Farben an. Auf macOS ignoriert Safari
   beides und faellt auf die Systemdarstellung zurueck — dort traegt
   color-scheme. Deshalb beides, nicht eines. */
select option, select optgroup{
  background-color:var(--bg-3); color:var(--ink);
}
select:hover,#lang:hover{border-color:var(--line-3); background:rgba(255,255,255,.06)}
select:focus-visible,#lang:focus-visible,textarea:focus-visible{
  outline:2px solid var(--green); outline-offset:1px; border-color:transparent}
button{cursor:pointer}
#lang{flex:0 0 auto; margin-left:auto; min-width:3.1rem;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em}

/* ── Verlauf ─────────────────────────────────────────────────────────────── */
main{flex:1; overflow-y:auto; padding-top:1.5rem; padding-bottom:1rem;
  scrollbar-width:thin; scrollbar-color:var(--line-3) transparent}
main::-webkit-scrollbar{width:10px}
main::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:var(--r-pill);
  border:3px solid transparent; background-clip:content-box}
main::-webkit-scrollbar-thumb:hover{background:var(--line-3); background-clip:content-box}

/* ── Einstieg ────────────────────────────────────────────────────────────────
   Ohne ihn stand nach dem Laden ein Begruessungssatz in einer sonst leeren
   Flaeche — technisch richtig, aber es sagt niemandem, was hier geht. Die
   Beispielfragen fuellen die Leere UND beantworten die eigentliche Einstiegs-
   frage: was kann ich fragen und wie genau wird geantwortet. */
#intro{animation:rise .4s var(--ease) both; padding-top:.4rem}
#intro .body{font-size:1.06rem; line-height:1.62; color:var(--ink);
  max-width:44rem; margin:0 0 1.6rem}
#intro .hint{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .7rem;
  display:flex; align-items:center; gap:.6rem;
}
#intro .hint::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent)}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
/* Form und Verhalten der .layer-chip von siditools.com. */
.chip{
  font-family:inherit; font-size:.85rem; text-align:left; color:var(--ink-2);
  background:rgba(8,11,18,.75); border:1px solid var(--line-2);
  border-radius:var(--r-pill); padding:.42rem .85rem;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:color .18s var(--ease), border-color .18s var(--ease),
             background .18s var(--ease), transform .18s var(--ease);
}
.chip:hover{
  color:var(--ink); border-color:rgba(16,214,128,.45);
  background:rgba(16,214,128,.07); transform:translateY(-1px);
}
.chip:active{transform:translateY(0)}
.chip:focus-visible{outline:2px solid var(--green); outline-offset:2px}

.msg{margin:0 0 1.5rem; animation:rise .32s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* Die Frage als kompakte Blase rechts, die Antwort als offener Text links.
   Beides in Blasen zu setzen macht lange Antworten schwerer lesbar. */
.msg.user{text-align:right}
.msg.user .body{
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border:1px solid var(--line-2); box-shadow:var(--shadow-1);
  border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
  padding:.6rem .95rem; display:inline-block; max-width:100%; text-align:left;
}
/* Windows-Pfade und Feldnamen sind laenger als ein Telefon breit ist. Ohne
   anywhere schob "Documents\NinjaTrader 8\templates\SidiResources\…" die ganze
   Seite seitlich heraus. */
.msg .body{overflow-wrap:anywhere}
.msg.bot .body{white-space:pre-wrap}
.msg.bot .body strong{color:#fff; font-weight:600}
.msg.bot .body code{
  font-family:var(--mono); font-size:.86em;
  background:rgba(16,214,128,.08); border:1px solid rgba(16,214,128,.2);
  border-radius:var(--r-xs); padding:.1rem .38rem; color:var(--green-hi);
}
/* Codebloecke (seit 2026-08-24, mit der Entwickler-API-Schicht).
   Der Rumpf steht auf white-space:pre-wrap; <pre> bringt sein eigenes
   white-space mit, die Einrueckung im Code bleibt also erhalten.
   Das innere <code> muss die Inline-Pille zuruecksetzen — sonst bekommt der
   ganze Block Rahmen, Polsterung und Gruen aus der Regel darueber. */
.msg.bot .body pre.codeblock{
  margin:.7rem 0; padding:.75rem .85rem; border-radius:var(--r-xs);
  background:var(--bg-1); border:1px solid var(--line-2);
  overflow-x:auto; white-space:pre; position:relative;
}
.msg.bot .body pre.codeblock code{
  background:none; border:0; padding:0; border-radius:0;
  color:var(--ink); font-family:var(--mono); font-size:.8rem; line-height:1.6;
}
/* Sprachmarke oben rechts, nur wenn das Modell eine genannt hat. */
.msg.bot .body pre.codeblock code[data-lang]::before{
  content:attr(data-lang); position:absolute; top:.4rem; right:.6rem;
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-4);
}
.typing::after{content:"▍"; animation:blink 1s steps(2) infinite; color:var(--green)}
@keyframes blink{50%{opacity:0}}

/* ── Quellen ─────────────────────────────────────────────────────────────────
   Als abgesetzte Karte mit gruener Kante: die Fundstellen sind der Beleg, nicht
   Beiwerk — sie sind der Unterschied zwischen einer Auskunft und einer
   Behauptung. */
.sources{
  margin-top:1rem; padding:.8rem 1rem;
  background:linear-gradient(180deg,rgba(12,16,24,.86),rgba(8,11,18,.86));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-2); border-left:2px solid var(--green);
  border-radius:var(--r-xs) var(--r) var(--r) var(--r-xs);
  box-shadow:var(--shadow-1);
}
.sources h3{
  margin:0 0 .5rem; font-family:var(--mono); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3);
  font-weight:500; display:flex; align-items:center; gap:.6rem;
}
.sources h3::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent)}
.src{font-size:.85rem; color:var(--ink-2); margin:.34rem 0; line-height:1.5}
.src + .src{padding-top:.34rem; border-top:1px solid rgba(255,255,255,.04)}
.src b{color:var(--ink); font-weight:600}
/* Eine Fundstelle mit Adresse fuehrt weiter — das muss man ihr ansehen. */
.srclink{color:var(--ink); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(16,214,128,.35);
  transition:color .18s var(--ease), border-color .18s var(--ease)}
.srclink:hover{color:var(--green-hi); border-color:var(--green)}
.srclink::after{content:"↗"; font-size:.78em; margin-left:.28em;
  color:var(--green); vertical-align:.08em}
.where{font-family:var(--mono); font-size:9px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-4); margin-left:.5rem}
.src .path{font-family:var(--mono); font-size:.78rem; color:var(--green);
  letter-spacing:-.01em}
.badge{
  display:inline-block; font-family:var(--mono); font-size:9px;
  padding:3px 7px; border-radius:var(--r-pill); margin-left:.45rem;
  letter-spacing:.09em; text-transform:uppercase;
  background:rgba(255,181,71,.12); color:var(--gold);
  border:1px solid rgba(255,181,71,.28);
}

/* ── Eingabe ─────────────────────────────────────────────────────────────────
   Eingabefeld und Knopf sitzen in einer gemeinsamen Glasleiste, die beim
   Fokussieren gruen aufleuchtet — ein Element statt zweier loser Teile. */
form{display:flex; gap:.6rem; padding-bottom:.8rem; align-items:flex-end;
  padding-top:.2rem; flex-wrap:wrap}

/* Turnstile. Steht im Markup VOR der Eingabeleiste und bekommt mit
   flex-basis:100% eine eigene Zeile darueber — sonst draengte es sich als
   dritter Flex-Nachbar neben Feld und Knopf und quetschte beide.
   Die zweite Zeile ist nicht optional: eine ID-Regel mit display:flex schlaegt
   das [hidden]-Attribut, der Kasten waere dauerhaft sichtbar. */
#turnstile-box{flex:0 0 100%; display:flex; justify-content:center;
  margin:0 0 .55rem}
#turnstile-box[hidden]{display:none}
.composer{
  flex:1; display:flex; gap:.6rem; align-items:flex-end;
  background:var(--glass); backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:.4rem .4rem .4rem .3rem; box-shadow:var(--shadow-1);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.composer:focus-within{
  border-color:rgba(16,214,128,.45);
  box-shadow:var(--shadow-1), 0 0 0 3px rgba(16,214,128,.09);
}
textarea{
  flex:1; resize:none; background:transparent; border:0;
  padding:.55rem .7rem; max-height:8rem; line-height:1.5;
}
textarea:focus{outline:none}
textarea::placeholder{color:var(--ink-4)}

/* Der Absendeknopf ist der einzige gruene Vollton der Seite — wie der primaere
   Knopf auf siditools.com, samt des Lichtstreifens beim Ueberfahren. */
#send{
  position:relative; overflow:hidden;
  height:2.7rem; padding:0 1.3rem; font-weight:600; letter-spacing:-.005em;
  background:var(--green); color:#04160E; border:0; border-radius:var(--r-pill);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,
             0 8px 22px -14px var(--green-g);
  transition:background .18s var(--ease), box-shadow .18s var(--ease),
             transform .12s var(--ease);
}
#send::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.45) 42%,
             transparent 62%);
  transform:translateX(-120%);
}
#send:hover:not([disabled]){background:var(--green-hi);
  box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,
             0 12px 30px -14px var(--green-g)}
#send:hover:not([disabled])::after{transform:translateX(120%);
  transition:transform .85s var(--ease)}
#send:active:not([disabled]){transform:translateY(1px) scale(.995)}
#send[disabled]{opacity:.42; cursor:not-allowed; box-shadow:none}

/* ── Fuss ────────────────────────────────────────────────────────────────── */
footer{padding-bottom:1.5rem}
.disclaimer{
  color:var(--ink-3); font-size:.78rem; margin:.4rem 0 .55rem;
  border-top:1px solid var(--line); padding-top:.8rem; line-height:1.55;
}
.meta{color:var(--ink-3); font-size:.75rem; margin:0;
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.meta a{color:var(--ink-3); text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:1px;
  transition:color .18s var(--ease), border-color .18s var(--ease)}
.meta a:hover{color:var(--ink); border-color:var(--green)}
#counter{margin-right:auto; font-family:var(--mono); font-size:10px;
  letter-spacing:.06em; color:var(--ink-4)}
.err{color:var(--red)}

/* Schmale Einbettung: ?embed=1 blendet Kopf- und Fusstext aus. Die Buehne
   bleibt weg — im iframe traegt der Hintergrund der einbettenden Seite. */
body.embed header .sub, body.embed .brand, body.embed footer .disclaimer,
body.embed .bg-canvas{display:none}
body.embed{background:transparent}
body.embed header{padding-top:.9rem}

/* Auf dem Telefon zaehlt jede Zeile Hoehe. */
@media (max-width:560px){
  header{padding-top:1.2rem}
  /* Die Wortmarke traegt; das Trennzeichen stuende allein in Zeile zwei. */
  .sep{display:none}
  h1{font-size:1.05rem}
  .sub{font-size:.88rem; margin-bottom:.9rem}
  form{gap:.45rem}
  #send{padding:0 1rem}
  textarea{font-size:.95rem}
  /* Der 150px-Weichzeichner dreier grosser Flaechen kostet auf dem Telefon
     spuerbar Leistung. Kleinere Wolken, gleiche Wirkung. */
  .bg-canvas .orb{filter:blur(110px)}
  .bg-canvas .grid{background-size:52px 52px}
}

/* Wer Bewegung abbestellt hat, bekommt die Buehne ruhig — nicht weniger
   Gestaltung, nur keine Animation. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .bg-canvas .orb{animation:none}
}

/* Antwortmoeglichkeiten unter einer Rueckfrage. Gleiche Form wie die
   Beispielknoepfe oben, aber gruen gerandet: sie gehoeren zur Antwort und
   sind der naechste Schritt, nicht ein Vorschlag ins Blaue. */
.chips.wahl{margin:.9rem 0 0}
.chips.wahl .chip{border-color:rgba(16,214,128,.35); color:var(--ink)}
.chips.wahl .chip:hover{border-color:rgba(16,214,128,.6)}