/* ==========================================================================
   Finanztracker — Maskottchen (roter Panda) und die Momo-Seite

   Inhalt:
     01  Maskottchen: Blinzeln, Sprechen, Nachdenken (DESIGN.md §10)
     02  Rauchfrei-Karte (Dashboard)
     03  Momo-Chat: Gerüst, Kopf, Verlauf, Blasen, Schnellantworten, Eingabe
     04  App-Gefühl auf dem Handy (global)

   Regeln wie überall: nur Tokens aus DESIGN.md §2, nur die Abstandsskala
   4/8/12/16/20/24/32/40/56/72, keine Verläufe, keine Schatten ausser Ebene 2/3.
   Dunkel kommt aus tokens.css — Momos eigene Farben bleiben dabei stehen, er
   sitzt im Dunkeln auf --momo-tile (Abschnitt 01, «Im Dunkeln»).
   ========================================================================== */

/* ==========================================================================
   01  MASKOTTCHEN
   ========================================================================== */

.fw-panda {
  display: block;
  overflow: visible;
  /* Transform-Ursprung relativ zur eigenen Bounding-Box: macht die
     Augen-/Mund-Animationen unabhaengig von der SVG-Groesse. */
}

.fw-panda__head,
.fw-panda__brow,
.fw-panda__eye,
.fw-panda__eye-smile,
.fw-panda__mouth-open,
.fw-panda__mouth-rest,
.fw-panda__tongue {
  transform-box: fill-box;
  transform-origin: center;
}

/* --- Ruhezustand: Mund geschlossen ------------------------------------- */

.fw-panda__mouth-open {
  transform-origin: center top;   /* oeffnet nach unten wie ein Kiefer */
  transform: scaleY(0);
  opacity: 0;
}

.fw-panda__mouth-rest {
  opacity: 1;
  transition: opacity 90ms ease;
}

/* --- Blinzeln ----------------------------------------------------------- */

.fw-panda__eye {
  animation: fw-blink 6.5s infinite;
}
/* Rechtes Auge minimal versetzt = wirkt lebendiger, nicht mechanisch */
.fw-panda__eye--r { animation-delay: .07s; }

@keyframes fw-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.08); }
}

/* --- Laecheln ------------------------------------------------------------ */
/* Das Markup (templates/partials/panda.php) liefert zwei Augenformen: gerade
   Striche und zusammengekniffene Boegen mit opacity="0". Beim Laecheln
   tauschen sie die Plaetze — CSS gewinnt gegen das Praesentationsattribut. */

.fw-panda__eye,
.fw-panda__eye-smile {
  transition: opacity var(--t-fast, 150ms ease);
}

.fw-panda.is-smiling .fw-panda__eye {
  opacity: 0;
  animation: none;                 /* nicht blinzeln, waehrend gelacht wird */
}

.fw-panda.is-smiling .fw-panda__eye-smile { opacity: 1; }

/* --- Sprechen ----------------------------------------------------------- */

.fw-panda.is-speaking .fw-panda__mouth-rest {
  opacity: 0;
}

.fw-panda.is-speaking .fw-panda__mouth-open {
  opacity: 1;
  animation: fw-talk 620ms infinite;
}

.fw-panda.is-speaking .fw-panda__tongue {
  animation: fw-tongue 620ms infinite;
}

/* Unregelmaessige Schrittfolge -> wirkt wie Sprache, nicht wie ein Metronom */
@keyframes fw-talk {
  0%   { transform: scaleY(.12); }
  12%  { transform: scaleY(.85); }
  24%  { transform: scaleY(.30); }
  38%  { transform: scaleY(1);   }
  52%  { transform: scaleY(.22); }
  66%  { transform: scaleY(.70); }
  80%  { transform: scaleY(.18); }
  92%  { transform: scaleY(.55); }
  100% { transform: scaleY(.12); }
}

@keyframes fw-tongue {
  0%, 100% { transform: translateY(0) scaleY(.8); }
  38%      { transform: translateY(2px) scaleY(1); }
  66%      { transform: translateY(1px) scaleY(.9); }
}

/* Sanftes Nicken beim Sprechen */
.fw-panda.is-speaking .fw-panda__head {
  animation: fw-nod 1.9s ease-in-out infinite;
}

@keyframes fw-nod {
  0%, 100% { transform: translateY(0)      rotate(0deg); }
  30%      { transform: translateY(-1.5%)  rotate(-1.2deg); }
  70%      { transform: translateY(.8%)    rotate(1deg); }
}

/* --- "Denkt nach" (waehrend die Antwort geladen wird) -------------------- */

.fw-panda.is-thinking .fw-panda__head {
  animation: fw-think 2.4s ease-in-out infinite;
}

@keyframes fw-think {
  0%, 100% { transform: rotate(0deg); }
  35%      { transform: rotate(-4deg); }
  70%      { transform: rotate(3deg); }
}

/* --- Groessen-Varianten -------------------------------------------------- */

.fw-panda--chat   { width: 36px; height: 36px; flex: 0 0 36px; }
.fw-panda--brand  { width: 30px; height: 30px; flex: 0 0 30px; }
.fw-panda--hero   { width: 96px; height: 96px; }
.fw-panda--empty  { width: 72px; height: 72px; opacity: .9; }
.fw-panda--momo   { width: 30px; height: 30px; flex: 0 0 30px; }

/* --- Im Dunkeln ---------------------------------------------------------- */
/* Momos Tinte (#143C54) verschwaende auf dunklem Grund, und seine Farben
   werden nie umdefiniert. Darum sitzt er dort auf einer hellen Papierkachel
   wie das App-Icon — ein Kreis, der Kopf passt mit Rand hinein.
   light-dark() statt @media: folgt der Einstellung Darstellung, nicht dem System. */
.fw-panda { background: light-dark(transparent, var(--momo-tile)); border-radius: var(--radius-pill); }

/* --- Barrierefreiheit ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fw-panda__eye,
  .fw-panda.is-speaking .fw-panda__mouth-open,
  .fw-panda.is-speaking .fw-panda__tongue,
  .fw-panda.is-speaking .fw-panda__head,
  .fw-panda.is-thinking .fw-panda__head {
    animation: none;
  }
  /* Sprechen bleibt sichtbar erkennbar — nur ohne Bewegung */
  .fw-panda.is-speaking .fw-panda__mouth-open {
    opacity: 1;
    transform: scaleY(.6);
  }
}

/* ==========================================================================
   02  RAUCHFREI-KARTE (Dashboard)
   ========================================================================== */

.fw-smokefree__head { display: flex; align-items: center; gap: var(--sp-12); }
.fw-smokefree__head .fw-panda { flex: 0 0 44px; width: 44px; height: 44px; }
.fw-smokefree { border-color: var(--brand-weak); }

.card__note {
  margin: var(--sp-12) 0 0;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--radius-control);
  background: var(--positive-weak);
  color: var(--text);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

/* ==========================================================================
   03  MOMO-CHAT
   --------------------------------------------------------------------------
   Aufbau (templates/chat.php):

     .fw-momo                    Seitenabschnitt, traegt den Zustand (is-busy)
       .fw-momo__shell           Spalte: Kopf | Verlauf | Eingabe
         .fw-momo__head          klebt oben: Momo mit Online-Punkt, ⋯ (Handy)
         .fw-stream              scrollt — hier und nur hier
           .fw-turn              eine Wortmeldung (--momo links, --me rechts)
             .fw-turn__avatar    kleiner Panda an Momos Blasen
             .fw-bubble          die Sprechblase
           .fw-replies           Schnellantworten, immer als letztes Element
         .fw-composer            Eingabezeile, unten fixiert

   Auf dem Handy fuellt .fw-momo__shell den Bildschirm zwischen Statusleiste
   und Tab-Leiste; gescrollt wird ausschliesslich im Verlauf. Der Chat steht
   auf demselben Gruppengrund wie alle Seiten (--bg), Momos Blasen sind
   Flaechen wie Karten — keine weissen Baender, kein eigenes Papier (8.10.2026).
   ========================================================================== */

.fw-momo {
  --fw-avatar: 32px;    /* Panda an Momos Sprechblase */
  --fw-halo:   36px;    /* Kreis hinter dem Panda im Kopf */
}

.fw-momo__shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: min(74vh, 760px);
  height: min(74dvh, 760px);
  overflow: hidden;
}

/* --- Kopf ---------------------------------------------------------------- */

.fw-momo__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: calc(var(--control-h-touch) + var(--sp-16));
  padding: var(--sp-8) var(--sp-16);
  background: var(--bg);
  border-bottom: 1px solid var(--separator);   /* der Verlauf scrollt darunter */
}

.fw-momo__avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--fw-halo);
  height: var(--fw-halo);
  border-radius: var(--radius-pill);
  background: light-dark(var(--brand-weak), var(--momo-tile));
}

.fw-momo__avatar .fw-panda {
  animation: fw-momo-float 5s ease-in-out infinite;
}

@keyframes fw-momo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Der Name wie der kompakte Titel der Navigationsleiste (app.css .topbar__title). */
.fw-momo__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

/* ⋯ nur auf dem Handy, dort traegt app.css (.topbar__action) die 44er Form. */
.fw-momo__mehr { display: none; }

/* Online-Punkt am Bild; der Ring in der Kopffarbe loest ihn vom Kreis. */
.fw-momo__pulse {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--bg);
  border-radius: var(--radius-pill);
  background: var(--positive);
}

.fw-momo.is-busy .fw-momo__pulse {
  background: var(--brand);
  animation: fw-momo-pulse 1.2s ease-in-out infinite;
}

@keyframes fw-momo-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* Konto-Auswahl: klein, aber mit 44px Trefferflaeche (§8). */
/* Das Konto-Wahlfeld im Kopf ist bewusst entfallen: Momo fragt beim Erfassen,
   von welchem Konto es abgeht — das ist die Stelle, an der die Frage auch
   wirklich anfaellt. Fragen und Auswertungen gelten ueber alle Konten. */

/* --- Verlauf ------------------------------------------------------------- */

.fw-stream {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-16);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.fw-stream__note {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-body-sm);
  color: var(--text-muted);   /* das KI-Kontingent will gelesen werden */
  text-align: center;
}

.fw-stream__note code { font-family: var(--font-mono); }

/* --- Wortmeldungen -------------------------------------------------------- */

.fw-turn {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-8);
  animation: fw-turn-in 180ms ease both;
}

@keyframes fw-turn-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.fw-turn--momo { justify-content: flex-start; }
.fw-turn--me   { justify-content: flex-end; }

/* Folgeblasen desselben Sprechers behalten die Einrueckung, nicht den Kopf. */
.fw-turn--cont .fw-turn__avatar { visibility: hidden; }

/* Momo als Standbild — momo-avatar.svg stammt aus derselben Zeichnung wie das
   Maskottchen (templates/partials/panda.php), nur ohne die beweglichen Teile. */
.fw-turn__avatar {
  flex: none;
  width: var(--fw-avatar);
  height: var(--fw-avatar);
  border-radius: var(--radius-pill);
  background: var(--brand-weak) url("momo-avatar.svg") 50% 58% / 24px 24px no-repeat;
}
/* Im Dunkeln die Papierkachel (siehe «Im Dunkeln» oben) — steht hier, weil die
   Kurzform darueber background-color sonst wieder ueberschreibt. */
.fw-turn__avatar { background-color: light-dark(var(--brand-weak), var(--momo-tile)); }

.fw-bubble {
  max-width: min(78%, 62ch);
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

/* Zeilenumbrueche aus Momos Antworten erhalten — aber nur dort, wo der Text
   aus JavaScript kommt. Auf .fw-bubble selbst wuerde pre-wrap die Einrueckung
   des servergerenderten HTML mitdrucken. */
.fw-bubble__text,
.fw-bubble--me { white-space: pre-wrap; }

.fw-bubble--momo {
  background: var(--surface);
  border-bottom-left-radius: var(--sp-4);
}

/* Die eigene Blase wie in Nachrichten: gefuellt in Navy mit Weiss (11.64),
   dunkel #8EC1E3 mit #0B1E2A (8.83) — genau --accent/--on-accent (Plan §3).
   Momos Blase oben ist eine Flaeche wie eine Karte: --surface auf --bg traegt
   sich ohne Rand (1.13, §4 Cards). */
.fw-bubble--me {
  background: var(--accent);
  color: var(--on-accent);
  border-bottom-right-radius: var(--sp-4);
}

.fw-bubble--ok    { background: var(--positive-weak); border-color: transparent; }
.fw-bubble--error { background: var(--negative-weak); border-color: transparent; }

/* Der sichtbare Text wird zeichenweise gefuellt; Vorlesegeraete bekommen den
   fertigen Satz aus dem .sr-only-Zwilling (siehe panda.js). */
.fw-bubble__text:empty::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  vertical-align: -.15em;
}

/* --- Tippt gerade … ------------------------------------------------------ */

.fw-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  height: 1em;
}

.fw-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--text-subtle);
  animation: fw-dot 1.2s ease-in-out infinite;
}

.fw-dots i:nth-child(2) { animation-delay: .15s; }
.fw-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes fw-dot {
  0%, 60%, 100% { transform: translateY(0);    opacity: .4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* --- Schnellantworten ----------------------------------------------------- */

.fw-replies {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding-left: calc(var(--fw-avatar) + var(--sp-8));
}

.fw-replies:empty { display: none; }

.fw-replies__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.fw-replies__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--text-muted);
}

.fw-replies__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

/* Waehrend eine Anfrage laeuft, sind Vorschlaege nicht anklickbar. */
.fw-replies.is-locked { opacity: .5; pointer-events: none; }

.fw-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--control-h-touch);
  padding: 0 var(--sp-16);
  border: 1px solid var(--separator);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.fw-chip:hover { background: var(--fill); border-color: var(--border-strong); }
.fw-chip:active { transform: translateY(1px); }

.fw-chip__name   { min-width: 0; }
.fw-chip__amount,
.fw-chip__count  { font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.fw-chip__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--cat, var(--text-subtle));
}
/* Im Dunkeln aufgehellt wie .chip__dot in app.css. */
.fw-chip__dot {
  background: light-dark(var(--cat, var(--text-subtle)),
                         color-mix(in srgb, var(--cat, var(--text-subtle)) 75%, white));
}

/* Kategorie-Chip im Chat: dieselbe Formel wie .chip--category in app.css
   (Flaeche 14 %, Text 55 % der Kategoriefarbe). Ohne diese Regel blieb der
   Chip hier eine weisse Pille, waehrend er auf jeder anderen Seite getoent ist.
   Erbauer des Markups ist templates/chat.php; panda.js klont dessen HTML. */
.fw-chip--cat {
  --cat: var(--text-muted);
  background: var(--fill);
  color: var(--text);
}

@supports (background: color-mix(in srgb, red 14%, white)) {
  .fw-chip--cat {
    background: color-mix(in srgb, var(--cat) 14%, var(--surface));
    color: color-mix(in srgb, var(--cat) 55%, var(--text));
  }

  .fw-chip--cat:hover {
    background: color-mix(in srgb, var(--cat) 22%, var(--surface));
    border-color: color-mix(in srgb, var(--cat) 55%, var(--text));
  }
}

/* Routine: Haendler+Betrag, die staendig zusammen auftreten — Momos Farbe. */
.fw-chip--combo { background: var(--brand-weak); border-color: var(--brand-weak); }
.fw-chip--combo:hover { background: var(--brand-weak); border-color: var(--brand); }

/* Haendler, bei dem genau dieser Betrag schon vorkam. */
.fw-chip--match { border-color: var(--tint); }

/* Nebenwege (zurueck, ohne Angabe, Beispiel-Fragen): da, aber leiser. */
.fw-chip--ghost {
  background: transparent;
  color: var(--text-muted);
}

.fw-chip--ghost:hover { background: var(--surface); color: var(--text); }

/* --- Eingabezeile --------------------------------------------------------- */

.fw-composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-16) var(--sp-12);
}

.fw-composer__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.fw-composer__prefix {
  position: absolute;
  left: var(--sp-16);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  pointer-events: none;
}

.fw-composer__input {
  width: 100%;
  min-width: 0;
  height: var(--control-h-touch);
  padding: 0 var(--sp-16);
  border: 1px solid transparent;          /* weisse Kapsel wie die Suche (Buchungen) */
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;                 /* darunter zoomt iOS beim Fokus (§8) */
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

/* Nur mit Maus: auf dem Touchscreen bliebe der Rand nach dem Tippen haengen. */
@media (hover: hover) {
  .fw-composer__input:hover { border-color: var(--border-strong); }
}

.fw-composer__input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--tint);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.fw-composer__input:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}

/* Betragsschritt: Zahl gross, rechtsbuendig, mit vorangestelltem CHF (§4). */
.fw-composer.is-amount .fw-composer__input {
  padding-left: var(--sp-56);
  font-size: var(--fs-money-lg);
  font-weight: var(--fw-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fw-composer__send {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-h-touch);
  height: var(--control-h-touch);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  transition: background-color var(--t-fast), opacity var(--t-fast);
}

.fw-composer__send:hover { background: var(--accent-hover); }
.fw-composer__send:active { transform: translateY(1px); }
.fw-composer__send:disabled { opacity: .4; cursor: default; }
.fw-composer__send svg { stroke: currentColor; fill: none; }

/* --- Handy: der Chat fuellt den Bildschirm -------------------------------- */

@media (max-width: 767.98px) {
  /* Die Momo-Seite ist eine App-Ansicht, keine Textseite: sie fuellt den
     Bildschirm bis zur Tab-Leiste. Gescrollt wird nur im Verlauf, die Seite
     selbst nie. --tabbar-space (app.css) enthaelt die Safe Area unten; oben
     traegt sie der Chatkopf selbst, denn die Navigationsleiste ist hier aus:
     Momos Kopf ist die Leiste (Bild, Name, ⋯). */
  body[data-nav="panda"] .topbar { display: none; }

  .fw-momo__head {
    padding-top: max(var(--sp-8), env(safe-area-inset-top, 0px));
    padding-right: max(var(--sp-16), env(safe-area-inset-right, 0px));
  }
  .fw-momo__mehr { display: grid; }
  body[data-nav="panda"] .main {
    height: calc(100vh - var(--tabbar-space, 64px));
    height: calc(100dvh - var(--tabbar-space, 64px));
    min-height: 0;
    overflow: hidden;
  }

  /* Randlos bis an die Kanten; im Querformat bleibt die Safe Area frei. */
  body[data-nav="panda"] .content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0
             env(safe-area-inset-right, 0px)
             0
             env(safe-area-inset-left, 0px);
  }

  body[data-nav="panda"] .fw-momo {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  body[data-nav="panda"] .flash-stack { margin: var(--sp-12) var(--sp-16) 0; }

  .fw-momo__shell {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .fw-bubble { max-width: 82%; }
}

/* Der Seitentitel steht schon im Chatkopf — fuer Vorlesegeraete bleibt er. */
body[data-nav="panda"] .page-header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Weniger Bewegung ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .fw-turn,
  .fw-dots i,
  .fw-momo__avatar .fw-panda,
  .fw-momo.is-busy .fw-momo__pulse {
    animation: none;
  }
  .fw-chip:active,
  .fw-composer__send:active { transform: none; }
}

/* ==========================================================================
   04  APP-GEFUEHL AUF DEM HANDY (global)
   Kleinigkeiten, die den Unterschied zwischen "Website" und "App" ausmachen.
   ========================================================================== */

/* Grauer Blitz beim Antippen — das verrät sofort eine Website. */
html { -webkit-tap-highlight-color: transparent; }

/* Kein Gummiband-Effekt beim Überscrollen der ganzen Seite. */
html, body { overscroll-behavior-y: none; }

/* Bedienelemente nicht markierbar (Text und Beträge bleiben markierbar). */
.btn, .fw-chip, .fw-cat, .tabbar__item, .nav-item,
.fw-composer__send, .fw-replies__label {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* Im Standalone-Modus (und in der App-Huelle, html.is-app): Platz für die
   Statusleiste. Nur ab 768px — auf dem Handy traegt die Navigationsleiste die
   Safe Area schon, hier stuende sie sonst doppelt ueber dem grossen Titel.
   Die Tab-Leiste rechnet ihren Abstand selbst (--tabbar-unten).
   WICHTIG: addieren, nicht ersetzen. Ein blosses padding-top ueberschreibt
   den oberen Wert der padding-Kurzschreibweise aus app.css — der Seitentitel
   klebte dann im Vollbildmodus am oberen Rand. */
@media (display-mode: standalone) and (min-width: 768px) {
  .content { padding-top: calc(var(--sp-20, 20px) + env(safe-area-inset-top, 0px)); }
  .sidebar { padding-top: calc(var(--sp-24, 24px) + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 768px) {
  .is-app .content { padding-top: calc(var(--sp-20, 20px) + env(safe-area-inset-top, 0px)); }
  .is-app .sidebar { padding-top: calc(var(--sp-24, 24px) + env(safe-area-inset-top, 0px)); }
}

/* --- Verzweigung: eine Frage auf einmal ---------------------------------- */
.fw-branch.is-hidden { display: none; }
/* --- Die Schnellwege, nach Familie abgestuft ------------------------------
   Drei Familien, damit die Reihe auf einen Blick zu lesen ist: buchen (hier
   fliesst Geld), pruefen (kommt vor dem Geld) und fragen (neutral). Sie stufen
   sich ab statt sich zu widersprechen — gefuellt, umrandet, schlicht.
   EINE Farbe, in zwei Staerken: --brand-deep und --brand-deep-weak. Auf dieser
   Seite ist sie sonst nirgends belegt. Die naheliegenderen Toene sind alle
   vergeben und duerfen hier nicht auftauchen (DESIGN.md §9, zwei Bedeutungen
   teilen sich nie eine Farbe auf demselben Schirm):
     --accent       = Romains eigene Sprechblase (.fw-bubble--me)
     --accent-weak  = der Fokus-Schein der Eingabezeile
     --brand-weak   = die Routine-Chips (.fw-chip--combo, Z. 492)
   Die Kante bleibt in jeder Familie die --border-strong aus .fw-chip--intent:
   eine Flaeche mit 1.1:1 gegen den Untergrund ist kein Umriss (WCAG 1.4.11).
   Der Text bleibt ueberall --text; --brand-deep auf --brand-deep-weak kaeme
   nur auf 4.4:1. Und die Farbe traegt die Bedeutung nie allein — das Wort auf
   dem Knopf tut es. */
.fw-chip--intent { border-color: var(--border-strong); }

/* buchen: Ausgabe und Bargeldbezug — derselbe Handgriff, nur ohne Kategorie. */
.fw-chip--buchen { background: var(--brand-deep-weak); }
.fw-chip--buchen:hover { background: var(--brand-deep-weak); border-color: var(--brand-deep); }

/* Kombis: Händlername einmal, Beträge daneben — statt fünfmal derselbe Name */
.fw-combos { display: flex; flex-direction: column; gap: 8px; }
.fw-combo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fw-combo__name {
  flex: 0 1 auto; min-width: 0;
  font-size: 14px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fw-combo__amounts { display: flex; gap: 6px; flex-wrap: wrap; }
/* Betrags-Chips sind Zahlen — Mono wie alle Betraege (DESIGN.md §3). */
.fw-combo__amounts .fw-chip { padding: 0 12px; font-variant-numeric: tabular-nums; }

/* --- Antwort-Chips: fest über der Eingabezeile ---------------------------
   Sie gehoeren in Daumenreichweite, nicht ins scrollende Gespraech. Bei
   vielen Chips scrollt nur dieser Streifen, nicht die Seite.

   Bewusst OHNE Trennlinie und OHNE eigene Flaeche: die Chips schweben ueber
   dem Gespraech, nicht als zweite Leiste ueber der Eingabe. Huelle, Verlauf
   und Eingabe stehen alle auf dem Seitengrund (--bg), darum genuegt hier
   «keine Flaeche». */
.fw-momo__shell > .fw-replies {
  flex: 0 0 auto;
  max-height: 34vh;
  overflow-y: auto;
  padding: 12px 16px 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.fw-momo__shell > .fw-replies:empty { display: none; padding: 0; }
.fw-momo__shell > .fw-replies .fw-replies__group + .fw-replies__group { margin-top: 12px; }