/* Reaktionen + Kommentare unter Artikeln.

   Liegt in /public statt in src/styles, weil zwei verschiedene Welten
   dieselben Regeln brauchen: die Astro-Seiten (/logbuch/...) und die
   Memoire-Seiten, die eine Pages Function als fertiges HTML ausliefert.
   Eine Quelle, kein Build-Trick, kein Auseinanderdriften.

   Die beiden Welten benennen ihre Design-Tokens leider nicht identisch —
   die Memoire-Seite kennt z. B. --ink-faint statt --ink-dim und gar keine
   --text-*-Skala. Deshalb uebersetzt der Block unten EINMAL alles in
   lokale --rx-*-Variablen; der Rest der Datei kennt nur noch diese.

   Zwei Zustaende, gesteuert ueber .reactions--locked am Wurzelelement:
     locked    -> Pills blass und inaktiv, darunter der Login-Weg
     entsperrt -> Pills bedienbar, Kommentarbereich sichtbar */

.reactions {
  --reactions-gap: 12px;

  /* --- Token-Bruecke: Hauptseite zuerst, Memoire als Fallback ----------- */
  --rx-ink: var(--ink);
  --rx-ink-mid: var(--ink-mid);
  --rx-ink-dim: var(--ink-dim, var(--ink-faint, #9ca6b9));
  --rx-line: var(--line-soft, var(--line));
  --rx-gold: var(--gold);
  --rx-gold-warm: var(--gold-warm, var(--gold));
  --rx-avatar-fallback: var(--bg-3, var(--panel-raised));

  /* Emoji-Schriften ausdruecklich in der Kette. Ohne sie erbt der
     Kommentartext 'Fraunces' — eine Serif ohne Emoji-Glyphen; je nach Gerät
     erscheinen getippte Emoji dann als leere Kästchen oder in einem
     Schwarzweiss-Ersatz. */
  --rx-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji', 'Android Emoji', 'EmojiSymbols', sans-serif;

  --rx-fs-xs: var(--text-xs, 11px);
  --rx-fs-sm: var(--text-sm, 12px);
  --rx-fs-md: var(--text-md, 14px);
  --rx-fs-body: var(--text-body, clamp(14px, 1.4vw, 16px));

  /* Werkzeug-Material wie in der Logbuch-Filterleiste. Die --ctrl-*-Tokens
     sind dort auf .feed-controls scoped, also hier mit derselben Formel neu
     deklariert statt global hochgezogen — so bleibt jede Werkzeugflaeche
     Herrin ihres eigenen Materials. */
  --ctrl-line: color-mix(in oklab, var(--line) 52%, transparent);
  --ctrl-bg: color-mix(in oklab, var(--panel-deep) 68%, transparent);

  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--rx-line);
}

html[data-theme="light"] .reactions {
  --ctrl-line: color-mix(in oklab, var(--line) 70%, transparent);
  --ctrl-bg: color-mix(in oklab, var(--panel-raised) 94%, var(--bg-deep));
}

/* Auf den Memoire-Seiten steht das Widget im Textcontainer und braucht
   denselben Innenabstand wie der Fliesstext darueber. */
.content .reactions {
  margin-top: 40px;
}

.reactions__heading {
  margin: 0 0 var(--reactions-gap);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  /* Gleiche Optik wie der „KAPITEL · ÖSTERREICH"-Kicker darueber: 10px,
     weite Sperrung. Vorher stand hier eine deutlich groessere Schrift, was
     die beiden Abschnitte am Seitenende ungleich gewichtet aussehen liess. */
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rx-ink-dim);
}

/* --- Reaktionsleiste ---------------------------------------------------- */

.reactions__bar {
  position: relative;
}

.reactions__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reactions__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ctrl-line);
  border-radius: 999px;
  background: var(--ctrl-bg);
  color: var(--rx-ink-mid);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.reactions__pill:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--rx-gold) 45%, var(--ctrl-line));
}

.reactions__pill:active:not(:disabled) {
  transform: translateY(1px);
}

.reactions__pill:disabled {
  cursor: default;
}

/* Die eigene Reaktion ist die einzige goldene Markierung hier — sonst wird
   die Leiste unruhig. */
.reactions__pill--mine {
  border-color: var(--rx-gold);
  background: color-mix(in oklab, var(--rx-gold) 14%, var(--ctrl-bg));
  color: var(--rx-ink);
}

.reactions__emoji {
  font-family: var(--rx-emoji);
  font-size: 17px;
  line-height: 1;
}

/* Die Zahl ist eine eigene Schaltflaeche: sie zeigt, wer so reagiert hat.
   Auf Touch der einzige auffindbare Weg dorthin (Hover gibt es nicht, und
   einen langen Druck probiert niemand aus, den nichts andeutet). */
.reactions__count {
  padding: 3px 2px;
  margin: -3px -2px;
  font-size: var(--rx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--rx-ink-dim);
  cursor: pointer;
  border-bottom: 1px dotted color-mix(in oklab, currentColor 45%, transparent);
}

.reactions__pill--mine .reactions__count {
  color: var(--rx-ink);
}

/* --- Wer hat reagiert ---------------------------------------------------- */

/* Kleine Namensliste ueber der Pille. Auf dem Desktop per Hover/Fokus, auf
   Touch per langem Druck — das Script steuert nur `hidden`. */
/* Oeffnet nach UNTEN: nach oben wuerde die Liste aus dem Artikel ragen und
   bei einem Widget am oberen Bildrand abgeschnitten. Unter den Pillen ist
   immer Platz — dort folgen ohnehin die Kommentare. */
.reactions__people {
  position: absolute;
  top: calc(100% + 8px);
  /* Linksbuendig an der Pille, nicht zentriert: bei der ersten Pille ragte
     eine zentrierte Liste ueber den linken Seitenrand hinaus. */
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: max-content;
  max-width: 60vw;
  padding: 8px 11px;
  border: 1px solid var(--ctrl-line);
  border-radius: 9px;
  background: var(--panel-raised, var(--bg-2));
  box-shadow: 0 8px 24px color-mix(in oklab, var(--shadow, #000) 28%, transparent);
  font-size: var(--rx-fs-sm);
  line-height: 1.45;
  color: var(--rx-ink-mid);
  text-align: left;
  pointer-events: none;
}

.reactions__people[hidden] {
  display: none;
}

.reactions__pill {
  position: relative;
}

/* Zeiger hinauf zur Pille. */
.reactions__people::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 16px;
  border: 5px solid transparent;
  border-bottom-color: var(--ctrl-line);
}

.reactions__people-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Auf Touch-Geraeten hat die Liste mehr Platz und darf mittig stehen. */
@media (max-width: 520px) {
  .reactions__people {
    max-width: 78vw;
  }
}

/* --- Gesperrter Zustand ------------------------------------------------- */

.reactions--locked .reactions__buttons {
  opacity: 0.4;
  filter: saturate(0.25);
  pointer-events: none;
}

/* Der Login-Weg steht UNTER den ausgegrauten Pills, nicht darueber.
   Ein Overlay quer ueber die Reaktionen war unlesbar und sah nach Defekt
   aus — so sieht man erst, was einen erwartet, und darunter, wie man
   hinkommt. */
.reactions__lock {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px dashed var(--ctrl-line);
  border-radius: 999px;
  background: var(--ctrl-bg);
  color: var(--rx-ink-mid);
  text-decoration: none;
  font-size: var(--rx-fs-md);
  transition: border-color 0.15s, color 0.15s;
}

.reactions--locked .reactions__lock {
  display: inline-flex;
}

.reactions__lock:hover {
  border-color: color-mix(in oklab, var(--rx-gold) 55%, var(--ctrl-line));
  color: var(--rx-ink);
}

.reactions__lock-icon {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 520px) {
  .reactions__lock {
    width: 100%;
    justify-content: center;
    font-size: var(--rx-fs-sm);
  }
}

/* --- Kommentare --------------------------------------------------------- */

.reactions__comments {
  margin-top: 22px;
}

.reactions__list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reactions__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: start;
}

/* Bewusst vollstaendig ausgeschrieben statt nur als Ergaenzung zur globalen
   .avatar-Regel: die lebt in travelers.css, das auf den Memoire-Seiten nicht
   geladen wird — dort war der Avatar sonst eckig statt rund. Das Widget muss
   ohne fremdes CSS vollstaendig sein. */
.reactions__avatar {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: var(--bg-deep, #222b3f);
  cursor: default;
  /* Fallback, falls der Proxy keine Farbe liefert. */
  background: var(--rx-avatar-fallback);
}

.reactions__item-main {
  min-width: 0;
}

.reactions__item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.reactions__item-name {
  font-weight: 500;
  font-size: var(--rx-fs-md);
  color: var(--rx-ink);
}

.reactions__item-time {
  font-size: var(--rx-fs-xs);
  color: var(--rx-ink-dim);
}

.reactions__item-body {
  margin: 0;
  /* Emoji-Fallback hinter der Textschrift. `inherit` waere in einer
     Font-Liste ungueltig, deshalb die Kette ausgeschrieben — Fraunces ist in
     beiden Welten die Lese-Schrift. */
  font-family: 'Fraunces', Georgia, serif, var(--rx-emoji);
  font-size: var(--rx-fs-body);
  line-height: 1.55;
  color: var(--rx-ink-mid);
  /* Kommentare kommen als Rohtext mit echten Zeilenumbruechen an. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.reactions__delete {
  border: 0;
  background: none;
  padding: 2px 6px;
  font-size: 18px;
  line-height: 1;
  color: var(--rx-ink-dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.reactions__item:hover .reactions__delete,
.reactions__delete:focus-visible {
  opacity: 1;
}

.reactions__delete:hover {
  color: var(--rx-ink);
}

/* Touch-Geraete kennen kein Hover — dort ist der Knopf dauerhaft sichtbar,
   nur zurueckhaltend. */
@media (hover: none) {
  .reactions__delete {
    opacity: 0.55;
  }
}

.reactions__empty {
  margin: 0 0 16px;
  font-size: var(--rx-fs-md);
  color: var(--rx-ink-dim);
}

/* Einmaliger Hinweis vor dem ersten Kommentar. Zurueckhaltend — er soll
   informieren, nicht wie ein Cookie-Banner wirken. */
.reactions__notice {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-left: 2px solid color-mix(in oklab, var(--rx-gold) 55%, transparent);
  font-size: var(--rx-fs-sm);
  line-height: 1.5;
  color: var(--rx-ink-dim);
}

.reactions__notice[hidden] {
  display: none;
}

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

/* Eingabefeld und Senden-Knopf in EINER Zeile: der Knopf darunter liess eine
   halbe Zeile Luft ungenutzt und schob den Seitenfuss unnoetig nach unten. */
.reactions__form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px;
}

.reactions__input {
  grid-column: 1;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--ctrl-line);
  border-radius: 10px;
  background: var(--ctrl-bg);
  color: var(--rx-ink);
  font: inherit;
  /* Damit Emoji schon beim Tippen richtig aussehen, nicht erst nach dem Senden. */
  font-family: 'Fraunces', Georgia, serif, var(--rx-emoji);
  font-size: var(--rx-fs-body);
  line-height: 1.5;
  resize: vertical;
  min-height: 62px;
}

.reactions__input:focus-visible {
  outline: none;
  border-color: var(--rx-gold);
}

.reactions__input::placeholder {
  color: var(--rx-ink-dim);
}

.reactions__form-foot {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Die Restzeichen-Anzeige erscheint erst kurz vor dem Limit — sie darf das
   Layout dann nicht springen lassen, also legt sie sich ueber das Feld. */
.reactions__remaining {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  font-size: var(--rx-fs-xs);
  color: var(--rx-ink-dim);
  white-space: nowrap;
}

.reactions__form-foot {
  position: relative;
}

.reactions__submit {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--rx-gold);
  border-radius: 999px;
  background: color-mix(in oklab, var(--rx-gold) 16%, transparent);
  color: var(--rx-ink);
  font: inherit;
  font-size: var(--rx-fs-md);
  cursor: pointer;
  transition: background 0.15s;
}

.reactions__submit:hover:not(:disabled) {
  background: color-mix(in oklab, var(--rx-gold) 28%, transparent);
}

.reactions__submit:disabled {
  border-color: var(--ctrl-line);
  background: var(--ctrl-bg);
  color: var(--rx-ink-dim);
  cursor: default;
}

.reactions__error {
  margin: 12px 0 0;
  font-size: var(--rx-fs-md);
  color: var(--rx-gold-warm);
}

/* Nur fuer Screenreader — die Emoji allein sagen nicht, was sie bedeuten. */
.reactions__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}