/* Layout — Vollbild-App (Startseite/Chat) und Reiterleiste.
   Das frühere Sidebar-/#shell-Layout ist mit dem Telegram-UI-Umbau entfallen;
   die Views (home.js/chat.js) bringen ihr Layout-CSS selbst mit. Das
   Overlay-/Modal-Gerüst steht seit dem Redesign „Rund“ (2026-09-19) in
   components.css, Abschnitt „Dialoge“, bei der Dialogfläche. */

html, body { height: 100%; }

#view {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--md-sys-color-surface);
}
#view > section, #view > div.chat-workspace { flex: 1; min-height: 0; }

/* Reiterleiste — persistentes Shell-Element, Geschwister von #view.
   Seit dem Redesign „Rund“ (2026-09-19) eine deckende, schwebende Pille nach
   dem Vorbild von Telegram, von Jörn am Screenshot gewählt: mittig, nur so
   breit wie ihre Einträge, 12 px über dem unteren Rand. Kein Glas und keine
   Unschärfe mehr — den Effekt trägt der Verlauf darunter (nächste Regel).
   Alle Höhen kommen aus m3-tokens.css: --leiste-hoehe (64 px) plus
   --leiste-abstand (12 px) plus --sa-unten (Safe-Area) ergibt --leiste-unten,
   die Oberkante der Pille. Der Abstand unter dem Inhalt und der Orga-FAB
   rechnen mit derselben Variable — vorher standen dort drei unabhängige
   Zahlen, und ab 23 px Safe-Area wären die letzten Zeilen verdeckt worden. */
#tabbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--sa-unten) + var(--leiste-abstand));
    z-index: 30;
    display: flex;
    gap: 2px;
    width: max-content;
    max-width: calc(100% - 32px);
    height: var(--leiste-hoehe);
    padding: 5px;
    border-radius: var(--r-pille);
    background: var(--panel);
    border: 1px solid var(--rule);
    box-shadow: var(--schatten-schwebend);
}
#tabbar[hidden] { display: none; }
/* Unter der schwebenden Pille blendet ein Verlauf in die Seitenfläche den
   Inhalt aus, über die ganze Breite (wie bei Telegram): was unter der Leiste
   durchläuft, tritt zurück, statt mit ihr zu konkurrieren. Er reicht 32 px
   über die Pille, fängt keine Tipps ab und liegt unter Pille (30) und
   Orga-FAB (31). Der einzige Verlauf der Stylesheets — tests/kein-glas.test.js
   lässt genau ihn zu. */
body[data-tabbar="on"]::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--leiste-unten) + 32px);
    z-index: 29;
    pointer-events: none;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--bg) 0%, transparent),
        color-mix(in srgb, var(--bg) 70%, transparent) 55%,
        color-mix(in srgb, var(--bg) 88%, transparent));
}
/* Jeder Eintrag ist 96 px breit: so wird die Pille nur so breit wie ihre
   Einträge und steht auch auf breiten Bildschirmen kompakt in der Mitte.
   Seit dem vierten Reiter „Heute" (2026-09-20) misst sie 402 px und ist damit
   breiter als ihre eigene Kappe auf einem 430-px-Gerät (398 px) — deshalb ist
   `flex: 0 1 96px` hier keine Formsache: der Schrumpffaktor 1 lässt jeden
   Eintrag auf 95 px zurückgehen (bei 360 px Gerät auf 77,5 px), ohne dass ein
   Inhalt überläuft. Am 2026-09-20 im Headless-Chrome nachgemessen; die
   Rechnung hält tests/tabbar.test.js fest. */
#tabbar button {
    flex: 0 1 96px;
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pille);
    background: transparent;
    color: var(--dim);
    cursor: pointer;
    touch-action: manipulation;
}
#tabbar .material-symbols-rounded { font-size: 24px; }
#tabbar .tabbar-label {
    font-family: var(--schrift-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}
/* Aktiv ist der ganze Eintrag als Pille hinterlegt, im neutralen --tonal —
   Farbe steht in Orbit nur für Kennfarben und Wertungen. */
#tabbar button[aria-current="page"] {
    background: var(--tonal);
    color: var(--text);
}
#tabbar button[aria-current="page"] .tabbar-label { font-weight: 600; }
/* Der Ring liegt innen, damit er nicht über den Rand der Pille ragt. */
#tabbar button:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

/* #view scrollt selbst nicht (overflow:hidden) — der Abstand muss an das
   scrollende Kind, sonst verschwindet dessen letzte Zeile unter der Leiste.
   24 px Luft über der Pille, bei jeder Safe-Area. Die Spezifität (id +
   Attribut + Element) schlägt die padding-Kurzschreibweise der View-eigenen
   <style>-Blöcke, unabhängig von der Reihenfolge. */
body[data-tabbar="on"] #view > section { padding-bottom: calc(var(--leiste-unten) + 24px); }
/* Orga trägt zusätzlich den FAB (16 px über der Pille, --fab-groesse hoch):
   das Listenende steht 16 px über ihm, sonst verdeckt er die letzte Zeile. */
body[data-tabbar="on"] #view > section.dashboard-page {
    padding-bottom: calc(var(--leiste-unten) + 16px + var(--fab-groesse) + 16px);
}