/* ==========================================================================
   KI-Chat von MP Media - Stilsystem

   Grundgedanke: Zwei Welten.
   Vorne die BÜHNE (hell, ruhig, viel Luft) - hier wird gesprochen.
   Hinten der MASCHINENRAUM (dunkel, technisch) - hier steht die Wahrheit.
   Dazwischen DER STRANG: zeigt, wann etwas rausgeht, wann gedacht wird,
   und wie voll das Postfach ist. Ein Bauteil, drei Aufgaben.

   Alle Schriften liegen lokal. Kein Aufruf an Google, kein CDN.
   Alle Icons sind SVG im HTML. Keine Icon-Bibliothek.
   ========================================================================== */

@import url('/assets/fonts.css');

/* ------------------------------ Farben ---------------------------------- */

:root {
  --papier:    #f7f8f8;   /* Hintergrund der Bühne, kühles Off-White */
  --flaeche:   #ffffff;   /* Karten, Blasen, Leisten */
  --tinte:     #14151a;   /* Text, nie reines Schwarz */
  --grau:      #6b6f76;   /* Nebentext */
  --grau-hell: #9ca1a8;
  --linie:     #e4e5e7;   /* Haarlinien */
  --flaeche-2: #f1f2f3;   /* gedrückte Knöpfe, Hover */

  --maschine:    #0e0f12; /* Maschinenraum, in beiden Themen dunkel */
  --maschine-2:  #16181d;
  --maschine-3:  #22252d;
  --maschine-tx: #d4d4d8;
  --maschine-gr: #71757e;

  --warnung: #b45309;
  --gefahr:  #b91c1c;
  --gefahr-flaeche: #fef2f2;
  --gefahr-linie:   #fca5a5;

  --schrift-display: 'Space Grotesk', system-ui, sans-serif;
  --schrift-text:    'Inter', system-ui, sans-serif;
  --schrift-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius:   10px;
  --radius-s: 7px;
  --strang-breite: 5px;

  /* --akzent wird pro Mandant aus der Datenbank gesetzt (Whitelabel). */
}

[data-thema='dunkel'] {
  --papier:    #101114;
  --flaeche:   #16181d;
  --tinte:     #e8e9eb;
  --grau:      #8a8f98;
  --grau-hell: #6b6f76;
  --linie:     #262931;
  --flaeche-2: #1d2027;

  --gefahr:         #f87171;
  --gefahr-flaeche: #2a1416;
  --gefahr-linie:   #7f1d1d;
  --warnung:        #fbbf24;
}

/* ------------------------------ Grundlagen ------------------------------- */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  display: flex;
  overflow: hidden;
}

.icon { flex-shrink: 0; vertical-align: -.15em; }

/* Tastaturbedienung muss sichtbar bleiben. */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

button { font-family: inherit; cursor: pointer; }

/* Wer keine Bewegung will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ========================================================================
   Seitenleiste links: die Verläufe
   ======================================================================== */

.seitenleiste {
  width: 15.5rem;
  flex-shrink: 0;
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
}

.marke {
  padding: 1.1rem 1rem .9rem;
  border-bottom: 1px solid var(--linie);
}
.marke .name {
  font-family: var(--schrift-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  display: block;
}
.marke .konto {
  font-size: .74rem;
  color: var(--grau);
  display: block;
  margin-top: .1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.neu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: .8rem;
  padding: .6rem;
  border-radius: var(--radius-s);
  background: var(--akzent);
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  transition: filter .15s;
}
.neu:hover { filter: brightness(1.09); }

.verlaufsliste { flex: 1; overflow-y: auto; padding: 0 .5rem .5rem; }

.verlaufszeile {
  display: flex;
  align-items: center;
  border-radius: var(--radius-s);
  margin-bottom: .1rem;
}
.verlaufszeile:hover { background: var(--flaeche-2); }
.verlaufszeile.aktiv { background: color-mix(in srgb, var(--akzent) 10%, transparent); }

.verlaufszeile a {
  flex: 1;
  min-width: 0;
  padding: .5rem .55rem;
  color: var(--grau);
  text-decoration: none;
  font-size: .83rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.verlaufszeile:hover a { color: var(--tinte); }
.verlaufszeile.aktiv a { color: var(--akzent); font-weight: 600; }

.loeschen {
  border: 0;
  background: none;
  color: var(--grau-hell);
  padding: .3rem .45rem;
  border-radius: 5px;
  display: flex;
  opacity: 0;
  transition: opacity .12s, color .12s;
}
.verlaufszeile:hover .loeschen { opacity: 1; }
.loeschen:hover { color: var(--gefahr); background: var(--gefahr-flaeche); }

.leiste-fuss {
  padding: .7rem 1rem;
  border-top: 1px solid var(--linie);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.leiste-fuss a {
  display: flex; align-items: center; gap: .35rem;
  color: var(--grau); text-decoration: none; font-size: .78rem;
}
.leiste-fuss a:hover { color: var(--tinte); }

.thema-knopf {
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--grau);
  border-radius: 6px;
  padding: .3rem .4rem;
  display: flex;
}
.thema-knopf:hover { color: var(--tinte); background: var(--flaeche-2); }
[data-thema='hell']   .thema-knopf .mond  { display: block; }
[data-thema='hell']   .thema-knopf .sonne { display: none; }
[data-thema='dunkel'] .thema-knopf .mond  { display: none; }
[data-thema='dunkel'] .thema-knopf .sonne { display: block; }

/* ========================================================================
   Mitte: die Bühne
   ======================================================================== */

.buehne { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.5rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.kopf h1 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--schrift-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.debug-knopf {
  display: flex; align-items: center; gap: .4rem;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  color: var(--grau);
  border-radius: 6px;
  padding: .35rem .65rem;
  font-size: .76rem;
  flex-shrink: 0;
}
.debug-knopf:hover { color: var(--tinte); }
.debug-knopf.an { color: var(--akzent); border-color: var(--akzent); }

#verlauf { flex: 1; overflow-y: auto; padding: 2rem 1.5rem; }

.zeile { max-width: 44rem; margin: 0 auto 1.4rem; }
.rolle {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau-hell);
  margin-bottom: .35rem;
}
.zeile.user .rolle { text-align: right; }

.blase {
  padding: .8rem 1.05rem;
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.zeile.user .blase {
  background: var(--akzent);
  color: #fff;
  margin-left: 18%;
  border-bottom-right-radius: 3px;
}
.zeile.assistant .blase {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-bottom-left-radius: 3px;
}
.blase:empty { display: none; }

.tippt::after {
  content: '';
  display: inline-block;
  width: .5em; height: 1em;
  background: var(--akzent);
  vertical-align: -.15em;
  animation: blinzeln 1.1s steps(2) infinite;
}
@keyframes blinzeln { 50% { opacity: 0; } }

/* ---- Die Denkphase ---- */

.denkblock {
  margin-bottom: .5rem;
  border: 1px dashed var(--linie);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--flaeche) 60%, transparent);
  overflow: hidden;
}
.denkkopf {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .7rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--grau);
  letter-spacing: .02em;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
}
.denkblock.laeuft .denkkopf .icon { animation: drehen 2.4s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

.denktext {
  font-family: var(--schrift-mono);
  font-size: .71rem;
  line-height: 1.6;
  color: var(--grau);
  padding: 0 .7rem .6rem;
  max-height: 9rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.denkblock.zu .denktext { display: none; }
.denkblock.zu .denkkopf .pfeil { transform: rotate(-90deg); }
.denkkopf .pfeil { margin-left: auto; transition: transform .15s; }

/* ---- Werkzeuge: was die KI bestellt und was wir ausgeführt haben ---- */

.werkzeugblock {
  margin-bottom: .5rem;
  border: 1px solid color-mix(in srgb, var(--akzent) 30%, var(--linie));
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--akzent) 5%, var(--flaeche));
  overflow: hidden;
}
.werkzeugblock.gescheitert {
  border-color: var(--gefahr-linie);
  background: var(--gefahr-flaeche);
}

.werkzeugkopf {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  padding: .5rem .7rem;
  border: 0;
  background: none;
  text-align: left;
  font-size: .74rem;
  font-weight: 600;
  color: var(--akzent);
  font-family: inherit;
}
.werkzeugblock.gescheitert .werkzeugkopf { color: var(--gefahr); }
.werkzeugkopf .dauer {
  margin-left: auto;
  font-weight: 400;
  color: var(--grau-hell);
  font-family: var(--schrift-mono);
  font-size: .68rem;
}
.werkzeugkopf .pfeil { transition: transform .15s; }
.werkzeugblock.zu .werkzeugkopf .pfeil { transform: rotate(-90deg); }
.werkzeugblock.zu .werkzeugtext { display: none; }

.werkzeugtext { padding: 0 .7rem .6rem; }
.werkzeugtext .marke {
  display: block;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--grau-hell);
  margin: .35rem 0 .15rem;
}
.werkzeugtext pre {
  margin: 0;
  font-family: var(--schrift-mono);
  font-size: .71rem;
  line-height: 1.55;
  color: var(--grau);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Der Riegel unter dem Eingabefeld ---- */

.werkzeugleiste {
  max-width: 44rem;
  margin: .55rem auto 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.werkzeug-schalter {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--papier);
  color: var(--grau);
  font-size: .74rem;
  font-weight: 600;
  transition: color .15s, border-color .15s, background .15s;
}
.werkzeug-schalter:hover { color: var(--tinte); }
.werkzeug-schalter[aria-pressed='true'] {
  color: var(--akzent);
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 8%, transparent);
}
.werkzeug-hinweis {
  font-size: .7rem;
  color: var(--grau-hell);
}
.werkzeug-hinweis.an { color: var(--akzent); }

.fehlerkasten {
  max-width: 44rem;
  margin: 0 auto 1.4rem;
  padding: .8rem 1rem;
  display: flex;
  gap: .6rem;
  background: var(--gefahr-flaeche);
  border: 1px solid var(--gefahr-linie);
  color: var(--gefahr);
  border-radius: var(--radius);
  font-size: .85rem;
}
.fehlerkasten strong { display: block; margin-bottom: .15rem; }

/* ---- Eingabe ---- */

.eingabebereich {
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  padding: .9rem 1.5rem 1rem;
}
.eingabe {
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  gap: .6rem;
  align-items: flex-end;
}
.eingabe textarea {
  flex: 1;
  resize: none;
  padding: .7rem .85rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  background: var(--papier);
  color: var(--tinte);
  font: inherit;
  font-size: .92rem;
  max-height: 10rem;
}
.eingabe textarea::placeholder { color: var(--grau-hell); }
.eingabe textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 18%, transparent);
}
.senden-knopf {
  border: 0;
  border-radius: var(--radius-s);
  background: var(--akzent);
  color: #fff;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s;
}
.senden-knopf:hover:not(:disabled) { filter: brightness(1.09); }
.senden-knopf:disabled { opacity: .4; cursor: default; }

.postfach {
  max-width: 44rem;
  margin: .5rem auto 0;
  font-size: .7rem;
  color: var(--grau-hell);
  text-align: right;
  font-family: var(--schrift-mono);
}
.postfach.warnung  { color: var(--warnung); }
.postfach.kritisch { color: var(--gefahr); }

/* ========================================================================
   DER STRANG - das Signature-Element

   Ruhig, solange nichts passiert. Beim Absenden läuft ein Lichtimpuls nach
   oben: das Paket geht raus. Während gedacht wird, pulsiert er. Die
   eingefärbte Höhe zeigt, wie voll das Postfach ist.
   ======================================================================== */

.strang {
  width: var(--strang-breite);
  flex-shrink: 0;
  background: var(--linie);
  position: relative;
  overflow: hidden;
}

/* Füllstand: wächst von unten. */
.strang .fuellung {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: var(--akzent);
  opacity: .35;
  transition: height .6s cubic-bezier(.4, 0, .2, 1);
}

/* Der Impuls: ein Lichtpunkt, der einmal nach oben wandert. */
.strang .impuls {
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  top: 100%;
  background: linear-gradient(to top,
    transparent,
    var(--akzent) 45%,
    color-mix(in srgb, var(--akzent) 30%, #fff) 100%);
  opacity: 0;
}
.strang.sendet .impuls { animation: impuls-hoch .7s cubic-bezier(.35, 0, .25, 1); }
.strang.empfaengt .impuls { animation: impuls-runter .7s cubic-bezier(.35, 0, .25, 1); }

@keyframes impuls-hoch {
  0%   { top: 100%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: -22%; opacity: 0; }
}
@keyframes impuls-runter {
  0%   { top: -22%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Während gedacht wird: leises Pulsieren über die ganze Länge. */
.strang.denkt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--akzent);
  animation: pulsieren 1.6s ease-in-out infinite;
}
@keyframes pulsieren {
  0%, 100% { opacity: .12; }
  50%      { opacity: .5; }
}

/* ========================================================================
   Maschinenraum rechts
   ======================================================================== */

.maschinenraum {
  width: 27rem;
  flex-shrink: 0;
  background: var(--maschine);
  color: var(--maschine-tx);
  display: flex;
  flex-direction: column;
  font-family: var(--schrift-mono);
  font-size: .715rem;
}
body.debug-aus .maschinenraum,
body.debug-aus .strang { display: none; }

.maschinenraum header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .8rem;
  background: var(--maschine-2);
  border-bottom: 1px solid var(--maschine-3);
}
.maschinenraum header .titel {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--schrift-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: #e4e4e7;
}
.maschinenraum header .knoepfe { display: flex; gap: .25rem; }
.maschinenraum header button {
  background: var(--maschine-3);
  border: 0;
  color: var(--maschine-gr);
  padding: .32rem .4rem;
  border-radius: 5px;
  display: flex;
}
.maschinenraum header button:hover { background: #333741; color: #fff; }

#protokoll { flex: 1; overflow-y: auto; padding: .7rem .8rem; }

.eintrag {
  margin-bottom: .8rem;
  border-left: 2px solid var(--maschine-3);
  padding-left: .6rem;
}
.eintrag .kopfzeile {
  display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem;
}
.eintrag .zeit { color: #52525b; flex-shrink: 0; }
.eintrag .titel { font-weight: 600; word-break: break-all; }
.eintrag pre {
  margin: .15rem 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--maschine-gr);
  line-height: 1.5;
  font-family: inherit;
}

.eintrag.anfrage { border-left-color: #3b82f6; }
.eintrag.anfrage .titel { color: #60a5fa; }
.eintrag.paket   { border-left-color: #8b5cf6; }
.eintrag.paket   .titel { color: #a78bfa; }
.eintrag.denken  { border-left-color: #f59e0b; }
.eintrag.denken  .titel { color: #fbbf24; }
.eintrag.werkzeug { border-left-color: #06b6d4; }
.eintrag.werkzeug .titel { color: #22d3ee; }
.eintrag.antwort { border-left-color: #22c55e; }
.eintrag.antwort .titel { color: #4ade80; }
.eintrag.info    { border-left-color: #52525b; }
.eintrag.info    .titel { color: #a1a1aa; }
.eintrag.problem { border-left-color: #ef4444; background: #2a1416; padding: .4rem .6rem; }
.eintrag.problem .titel { color: #f87171; }
.eintrag.problem pre { color: #fca5a5; }

.nachricht {
  margin: .3rem 0;
  padding: .35rem .5rem;
  background: var(--maschine-2);
  border-radius: 4px;
}
.nachricht .r { font-weight: 600; }
.nachricht .r.system    { color: #fbbf24; }
.nachricht .r.user      { color: #60a5fa; }
.nachricht .r.assistant { color: #4ade80; }

.protokoll-leer {
  color: #52525b;
  text-align: center;
  padding: 2.5rem 1rem;
  line-height: 1.7;
}

/* ========================================================================
   Kleine Bildschirme

   Grundsatz: Nichts wird weggeworfen, nur verschoben. Seitenleiste und
   Maschinenraum werden zu Schubladen, die über die Bühne gleiten. Auf dem
   Handy soll man alles erreichen können, was am Schreibtisch da ist.
   ======================================================================== */

/* Menüknopf und Verdunkelung sind auf großen Schirmen unsichtbar. */
.menue-knopf { display: none; }

/* Verdunkelung hinter einer offenen Schublade. */
.verdunkelung {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 40;
}

/* ---- Bis 1200 px: Maschinenraum wird zur Schublade von rechts ----
   Ob er sichtbar ist, entscheidet weiterhin allein die Klasse
   "debug-aus" am body. Hier ändert sich nur, WO er liegt. */
@media (max-width: 1200px) {
  .strang { display: none; }

  .maschinenraum {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(27rem, 92vw);
    z-index: 50;
    border-left: 1px solid var(--maschine-3);
  }
  body:not(.debug-aus) .verdunkelung { display: block; }
}

/* ---- Bis 900 px: auch die Seitenleiste wird zur Schublade ---- */
@media (max-width: 900px) {
  .menue-knopf {
    display: flex;
    align-items: center;
    background: var(--flaeche-2);
    border: 1px solid var(--linie);
    color: var(--grau);
    border-radius: 6px;
    padding: .35rem .45rem;
    flex-shrink: 0;
  }

  .seitenleiste {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 50;
    width: 16.5rem;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  body.menue-offen .seitenleiste { transform: translateX(0); }
  body.menue-offen .verdunkelung { display: block; }

  .kopf { padding: .7rem .9rem; gap: .7rem; }
  #verlauf { padding: 1.3rem .9rem; }
  .eingabebereich { padding: .8rem .9rem .9rem; }
  .zeile.user .blase { margin-left: 8%; }

  /* Schriftgröße 16px, sonst zoomt iOS beim Antippen des Feldes hinein. */
  .eingabe textarea { font-size: 16px; }
}

@media (max-width: 420px) {
  .zeile.user .blase { margin-left: 0; }
  .kopf h1 { font-size: .88rem; }
}