/* =====================================================================
   Alle Werte über Custom Properties – Größe/Abstände/Radien einmal hier
   ändern, nicht an zwanzig Stellen. Gesamtgröße hängt an :root font-size.
   ===================================================================== */
:root {
  /* Typografie */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-size-base: 16px;          /* zentraler Regler für die gesamte App */
  --font-size-small: 0.8rem;
  --font-size-big: 1.35rem;
  --line-height: 1.45;

  /* Farben */
  --c-bg: #12141a;
  --c-bg-elev: #1b1e26;
  --c-bg-input: #22262f;
  --c-line: #2c313c;
  --c-text: #e7e9ee;
  --c-text-dim: #9aa1b1;
  --c-accent: #4f8cff;
  --c-accent-soft: #4f8cff22;
  --c-mine: #2f4c86;
  --c-theirs: #262b36;
  --c-ok: #3ecf8e;
  --c-warn: #ff7a59;

  /* Maße – bewusst in em, damit alles mit der Schriftgröße mitskaliert */
  --gap: 0.75em;
  --gap-s: 0.4em;
  --gap-l: 1.25em;
  --pad-block: 0.65em;
  --pad-inline: 1em;
  --radius: 0.9em;
  --radius-s: 0.5em;
  --radius-pill: 999em;
  --bubble-max: 78%;
  --topbar-h: 3.4em;
  --emoji-size: 1.9rem;

  /* iPhone-Notch / Home-Indikator */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Von viewport.js gesetzt: tatsächliche Höhe des SICHTBAREN Viewports.
     100dvh ist nur der Startwert für den ersten Frame und für Browser
     ohne VisualViewport-API. */
  --vvh: 100dvh;
  --vv-top: 0px;
  --kb: 0px;

  --shadow: 0 0.15em 0.6em rgba(0, 0, 0, 0.35);
  --transition: 120ms ease;

  /* Antwort-Pfeil als SVG-Maske (Farbe kommt aus background-color) */
  --icon-reply: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-1.5a4.5 4.5 0 0 0-4.5-4.5H4"/></svg>');
}

* { box-sizing: border-box; }

/* Das Dokument selbst scrollt NIE. Nur so bleiben Kopf- und Fusszeile
   wirklich stehen – sonst zieht das Gummiband-Scrollen von iOS die ganze
   Seite mit, weil "fixed" nur relativ zum Dokument fix ist. */
/* inset:0 statt width/height 100%: das bezieht sich auf den gesamten
   Anzeigebereich inklusive der Safe Areas (viewport-fit=cover) – mit
   height:100% blieb unten der Streifen bis zur Bildschirmrundung frei. */
html, body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;   /* kein Doppeltipp-Zoom */
}

html { font-size: var(--font-size-base); }

body {
  margin: 0;
  font-family: var(--font-stack);
  line-height: var(--line-height);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-text-size-adjust: 100%;
}

/* Bei offener Tastatur ist der Home-Indikator ausgeblendet – der
   Sicherheitsabstand unten würde das Eingabefeld sonst schweben lassen. */
:root.kb-open {
  --safe-bottom: 0px;
}

button, input { font: inherit; color: inherit; }

button {
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-s);
  padding: var(--pad-block) var(--pad-inline);
  background: var(--c-accent);
  color: #fff;
  transition: filter var(--transition);
  /* iOS malt sonst beim Antippen einen grauen Kasten darüber */
  -webkit-tap-highlight-color: transparent;
}

/* Nur echte Zeigegeräte bekommen einen Hover-Zustand. Auf Touch bleibt
   :hover nach dem Antippen HÄNGEN – das war der Grund, warum die
   Emoji-Tasten nach dem Tippen aufgehellt stehen geblieben sind. */
@media (hover: hover) and (pointer: fine) {
  button:hover { filter: brightness(1.1); }
}
button:active { filter: brightness(0.92); }

/* Fokusring nur für Tastaturbedienung, nicht nach einem Fingertipp */
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

button.ghost {
  background: transparent;
  color: var(--c-text-dim);
  border: 1px solid var(--c-line);
}
button.danger { color: var(--c-warn); }

.screen[hidden] { display: none; }

/* ---------------------------- Anmeldung ---------------------------- */
/* Beide Bildschirme hängen an der gemessenen Höhe, nicht an 100dvh –
   dvh kennt die Tastatur im Homescreen-Modus nicht. */
/* Ohne Tastatur wird der Bildschirm über top/bottom aufgespannt – so füllt
   die App garantiert bis zur Unterkante, unabhängig davon, welche Höhe der
   Browser gerade meldet. Erst wenn die Tastatur offen ist, zählt die
   gemessene Höhe aus viewport.js. */
.login, .app {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

:root.kb-open .login,
:root.kb-open .app {
  bottom: auto;
  height: var(--vvh);
  transform: translateY(var(--vv-top));
}

.login {
  display: grid;
  place-items: center;
  padding: var(--gap-l);
  overflow-y: auto;
}
.card {
  width: min(22rem, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--gap-l);
  box-shadow: var(--shadow);
}
.card h1 { margin: 0 0 var(--gap-s); font-size: var(--font-size-big); }
.card label { display: flex; flex-direction: column; gap: var(--gap-s); font-size: var(--font-size-small); color: var(--c-text-dim); }
.card input {
  background: var(--c-bg-input);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  padding: var(--pad-block) var(--pad-inline);
}
.error { color: var(--c-warn); font-size: var(--font-size-small); min-height: 1.2em; margin: 0; }

/* ------------------------------ App ------------------------------- */
.app {
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  /* minmax(0, 1fr) statt der Vorgabe "auto": sonst richtet sich die
     Spaltenbreite nach dem breitesten Inhalt, und ein langes Zitat in der
     Antwort-Leiste schiebt Senden-Knopf und X aus dem Bild. */
  grid-template-columns: minmax(0, 1fr);
}
.app > * { min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: calc(var(--safe-top) + var(--gap-s)) var(--pad-inline) var(--gap-s);
  background: var(--c-bg-elev);
  border-bottom: 1px solid var(--c-line);
}
.who { display: flex; align-items: center; gap: var(--gap-s); font-weight: 600; }
.dot {
  width: 0.6em; height: 0.6em; border-radius: var(--radius-pill);
  background: var(--c-text-dim); transition: background var(--transition);
}
.dot.online { background: var(--c-ok); }

/* Woher jemand online ist – App, Streamdeck oder beides */
.src { display: flex; gap: 0.25em; }
.src span {
  font-size: 0.65rem;
  line-height: 1.6;
  padding: 0 0.45em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  color: var(--c-text-dim);
  font-weight: 500;
}
.src span.on {
  border-color: transparent;
  background: var(--c-ok);
  color: #0b2418;
}

.icon-btn {
  background: transparent;
  color: var(--c-text-dim);
  padding: var(--gap-s);
  margin-left: auto;
}
.who .icon-btn, .reply-bar .icon-btn { margin-left: 0; }

/* ----------------------------- Stream ----------------------------- */
.stream {
  overflow-y: auto;
  /* hält das Gummiband im Nachrichtenbereich, statt es ans Dokument
     weiterzureichen */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  padding: var(--gap);
}

/* Nachrichten kleben unten wie im Messenger. margin-top:auto am ersten
   Element statt justify-content:flex-end – letzteres macht bei Überlauf
   den oberen Teil unscrollbar. */
.stream > :first-child { margin-top: auto; }

.ev {
  display: flex;
  flex-direction: column;
  max-width: var(--bubble-max);
  position: relative;
  /* Senkrechtes Scrollen bleibt beim Browser, waagerechtes gehört uns
     (Wischgeste zum Antworten). */
  touch-action: pan-y;
  /* Verhindert Textauswahl und das iOS-Lupen-Popup beim langen Drücken */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 180ms ease;
}
.ev.dragging { transition: none; }

/* Antwort-Symbol, das beim Wischen einblendet.
   Als SVG-Maske statt Emoji – ein Zeichen aus der Schriftart sieht je nach
   Gerät anders aus. Die Deckkraft kommt aus --swipe-p (0..1), gesetzt von
   app.js: nur einblenden, nicht wachsen. Bei einer Wischbewegung nach links
   bleibt --swipe-p auf 0, das Symbol taucht also gar nicht erst auf.
   Angehängt an die Blase, nicht an den ganzen Eintrag – so sitzt es mittig
   zur Nachricht und nicht mittig zu Nachricht plus Zeitangabe. */
.bubble::before {
  content: "";
  position: absolute;
  left: -2.1em;
  top: 50%;
  translate: 0 -50%;
  width: 1.3em;
  height: 1.3em;
  background-color: var(--c-accent);
  -webkit-mask: var(--icon-reply) center / contain no-repeat;
  mask: var(--icon-reply) center / contain no-repeat;
  opacity: var(--swipe-p, 0);
  pointer-events: none;
}

/* kurz aufleuchten, wenn man über die Antwort-Vorschau zum Original springt */
.ev.flash .bubble { animation: flash 900ms ease; }
@keyframes flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20%      { box-shadow: 0 0 0 0.2em var(--c-accent-soft); }
}
.ev.mine { align-self: flex-end; align-items: flex-end; }
.ev.theirs { align-self: flex-start; }

.bubble {
  position: relative;
  background: var(--c-theirs);
  border-radius: var(--radius);
  padding: var(--pad-block) var(--pad-inline);
  overflow-wrap: anywhere;
}
.ev.mine .bubble { background: var(--c-mine); }

.ev.emoji .bubble {
  background: transparent;
  padding: 0.1em 0.2em;
  font-size: 2.6rem;
  line-height: 1.1;
}

.meta {
  font-size: var(--font-size-small);
  color: var(--c-text-dim);
  padding: 0 0.3em;
}

.ev.system { align-self: center; max-width: 100%; }
.ev.system .bubble {
  background: var(--c-accent-soft);
  color: var(--c-text-dim);
  font-size: var(--font-size-small);
  border-radius: var(--radius-pill);
}

/* -------------------- Antwort-Vorschau in der Blase ----------------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin-bottom: 0.35em;
  padding: 0.3em 0.5em;
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}
.quote-name { font-size: var(--font-size-small); color: var(--c-accent); font-weight: 600; }
.quote-text {
  font-size: var(--font-size-small);
  color: var(--c-text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------- Reaktionen --------------------------- */
/* Chips überlappen die Unterkante der Blase, damit sie sichtbar zur
   Nachricht gehören und nicht unter der Uhrzeit hängen. */
.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
  margin: -0.8em 0 0.15em;
  padding: 0 0.6em;
  position: relative;
  z-index: 1;
}
.reactions:empty { display: none; }
.ev.mine .reactions { justify-content: flex-end; }
.reactions button {
  box-shadow: 0 0 0 0.14em var(--c-bg);
  display: flex;
  align-items: center;
  gap: 0.2em;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 0.05em 0.45em;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--c-text-dim);
}
.reactions button.mine {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-text);
}
.reactions .count { font-size: 0.7rem; font-variant-numeric: tabular-nums; }

/* ------------------ Auswahl beim langen Drücken --------------------- */
.react-pop {
  position: fixed;
  z-index: 50;
  display: flex;
  gap: 0.15em;
  padding: 0.3em;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  animation: pop 140ms ease;
}
.react-pop[hidden] { display: none; }
.react-pop button {
  background: transparent;
  border-radius: var(--radius-pill);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.15em 0.2em;
}
/* "Bearbeiten" am Ende der Auswahl */
.react-pop .edit {
  font-size: 1.05rem;
  color: var(--c-text-dim);
  border-radius: var(--radius-pill);
  margin-left: 0.1em;
  padding: 0.35em 0.45em;
  position: relative;
}
.react-pop .edit::before {
  content: "";
  position: absolute;
  left: -0.1em;
  top: 20%;
  bottom: 20%;
  border-left: 1px solid var(--c-line);
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.85) translateY(0.3em); }
  to   { opacity: 1; transform: none; }
}

/* Hinweiszeile beim Nachladen älterer Nachrichten */
.load-older {
  align-self: center;
  flex: 0 0 auto;
  font-size: var(--font-size-small);
  color: var(--c-text-dim);
  padding: var(--gap-s) 0;
}
.load-older[hidden] { display: none; }

/* Kompakte Zeile im Reaktions-Editor: nur Emoji, keine Beschriftung */
.emoji-row.compact .e { flex: 1; text-align: left; }

.badge-src {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0 0.45em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  font-size: 0.7rem;
  color: var(--c-text-dim);
}

/* "schreibt …" sitzt jetzt direkt neben den Statusanzeigen */
.typing {
  font-size: var(--font-size-small);
  color: var(--c-text-dim);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--transition);
}
.typing:not(:empty) { opacity: 1; }

/* --------------------------- Emoji-Leiste -------------------------- */
.emoji-bar {
  display: flex;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-top: 1px solid var(--c-line);
}
.emoji-bar::-webkit-scrollbar { display: none; }
.emoji-bar button {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  font-size: var(--emoji-size);
  line-height: 1;
  padding: 0.25em 0.35em;
  flex: 0 0 auto;
}

/* --------------------------- Antwort-Leiste ------------------------- */
.reply-bar {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--gap);
  background: var(--c-bg-elev);
  border-top: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
}
.reply-bar[hidden] { display: none; }
.reply-bar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reply-bar-name { font-size: var(--font-size-small); color: var(--c-accent); font-weight: 600; }
.reply-bar-text {
  font-size: var(--font-size-small);
  color: var(--c-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------- Eingabe ------------------------------ */
.composer {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--gap-s);
  /* max() statt Summe: auf dem iPhone genau der Abstand für den
     Home-Indikator, am Rechner der normale Innenabstand – vorher kam
     unten beides zusammen und wirkte doppelt. */
  padding: var(--gap-s) var(--gap) max(var(--safe-bottom), var(--gap-s));
  background: var(--c-bg-elev);
  border-top: 1px solid var(--c-line);
}

/* Malt den Hintergrund der Eingabezeile über die Unterkante hinaus weiter.
   Sichtbar wird das nur, falls der Browser den Anzeigebereich doch kleiner
   ansetzt als den Bildschirm – dann bleibt dort kein andersfarbiger
   Streifen bis zur Bildschirmrundung stehen. */
.composer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 6em;
  background: var(--c-bg-elev);
}

.composer textarea {
  flex: 1;
  min-width: 0;
  background: var(--c-bg-input);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--pad-block) var(--pad-inline);
  resize: none;
  overflow-y: auto;
  min-height: 2.7em;
  max-height: var(--composer-max, 8em);   /* ab hier scrollt das Feld */
  line-height: 1.4;
  /* WICHTIG: font-size mindestens 16px. Alles darunter lässt Safari beim
     Antippen in das Feld hineinzoomen – deshalb 1rem und nicht kleiner.
     "font: inherit" reicht nicht, weil textarea eine eigene UA-Schrift hat. */
  font-family: inherit;
  font-size: 1rem;
  scrollbar-width: thin;
}
.composer textarea:focus { outline: none; border-color: var(--c-accent); }

.composer .send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  padding: 0;
  border-radius: var(--radius-pill);
}
.composer .send svg { width: 1.5em; height: 1.5em; }

/* -------------------------- Einstellungen -------------------------- */
dialog {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-elev);
  color: var(--c-text);
  padding: 0;
  width: min(26rem, 92vw);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.settings-inner { display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap-l); }
.settings-inner h2 { margin: 0; font-size: var(--font-size-big); }
.hint { margin: 0; font-size: var(--font-size-small); color: var(--c-text-dim); }
.emoji-editor { display: flex; flex-direction: column; gap: var(--gap-s); }
.emoji-row { display: flex; gap: var(--gap-s); align-items: center; }
.emoji-row input {
  background: var(--c-bg-input);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  padding: var(--gap-s);
  min-width: 0;
}
.emoji-row .e { width: 3.2em; text-align: center; font-size: 1.3rem; }
.emoji-row .l { flex: 1; }
.emoji-row .x { background: transparent; color: var(--c-text-dim); padding: var(--gap-s); }
.settings-actions { display: flex; gap: var(--gap-s); justify-content: flex-end; }
hr { border: 0; border-top: 1px solid var(--c-line); width: 100%; margin: 0; }

/* Heller Systemmodus: nur die Farbtokens tauschen, sonst nichts. */
@media (prefers-color-scheme: light) {
  :root {
    --c-bg: #f4f5f8;
    --c-bg-elev: #ffffff;
    --c-bg-input: #eef0f5;
    --c-line: #dcdfe7;
    --c-text: #171a21;
    --c-text-dim: #666e80;
    --c-mine: #d3e2ff;
    --c-theirs: #e9ebf1;
  }
  .ev.mine .bubble { color: #10233f; }
}