/* Stoat Mobile-Verbesserungen
 * ============================
 * Wird per Caddy `replace`-Direktive (Plugin replace-response) in die
 * index.html des Stoat-Clients injiziert (siehe ../Caddyfile, {$CHAT_HOST}-
 * Block) und greift nur auf schmalen Screens. Desktop bleibt unveraendert.
 *
 * WARUM ueberhaupt:
 * Der Stoat-Client (Panda CSS + Solid.js) bringt KEIN responsives Layout mit
 * (nur Media-Queries fuer print/color-scheme), und es gibt keine semantischen
 * CSS-Klassen. Wir docken daher an den wenigen stabilen Hooks an:
 *   - <main>                                   = Nachrichtenbereich
 *   - [class*="layout-width-channel-sidebar"]  = trifft sowohl die linke
 *                                                Channel-Sidebar ALS AUCH die
 *                                                Mitgliederliste (beide nutzen
 *                                                den CSS-Token w_var(--layout-
 *                                                width-channel-sidebar)). Die
 *                                                Mitgliederliste ist das
 *                                                Geschwister NACH <main>, daher
 *                                                via `main ~ ...` adressierbar.
 *   - input[placeholder="Search messages..."]  = Suchfeld im Channel-Header
 *
 * MITGLIEDERLISTE ALS AUSKLAPP-OVERLAY (siehe Block 1):
 * Der Client rendert die Mitgliederliste NUR, wenn der Header-Button
 * `aria-label="View members"` aktiv ist (bedingtes Rendering). Wir bauen also
 * KEINEN eigenen Toggle, sondern nutzen diesen Button: Sobald die Liste im DOM
 * ist (= als Geschwister nach <main>), legen wir sie als Vollbild-Overlay ueber
 * alles. Der Header (h_48px) bleibt bewusst sichtbar — sonst gaebe es keinen
 * Weg, die Liste per erneutem Tippen auf "View members" wieder zu schliessen.
 *
 * SERVER-LEISTE FOLGT DER CHANNEL-SIDEBAR (siehe Block 2):
 * Server-Leiste (die Icon-Spalte ganz links) und Channel-Sidebar liegen
 * zusammen in EINEM Container ("linkes Cluster"). Der Button
 * `aria-label="Toggle main sidebar"` klappt nur die Channel-Sidebar ein. Damit
 * beim Einklappen auch die Server-Leiste verschwindet (mehr Platz fuer den
 * Chat), blenden wir das gesamte linke Cluster aus, SOBALD die Channel-Sidebar
 * nicht mehr im DOM ist. Das setzt — wie bei der Mitgliederliste — voraus, dass
 * der Client die Channel-Sidebar beim Einklappen aus dem DOM entfernt (bedingtes
 * Rendering). Das linke Cluster wird eindeutig ueber die Tiefe des Home-Links
 * adressiert: `a[href="/app"]` liegt genau `> div > div >` darunter (Rail und
 * Hauptzeile haben andere Tiefen, matchen also nicht).
 *
 * VOLLBILD-DRAWER FUER DIE NAVIGATION (siehe Block 3):
 * Spiegelbild zur Mitgliederliste: Solange die Channel-Sidebar aufgeklappt ist
 * (im DOM), fuellt die Navigation (Rail + Channel-Liste) den ganzen Screen und
 * das Chat-Fenster wird ausgeblendet. Eingeklappt verschwindet die Navigation
 * (Block 2) und das Chat-Fenster fuellt den Screen. So entsteht ein mobiles
 * Drawer-Muster (Navigation Vollbild <-> Chat Vollbild) ueber den vorhandenen
 * "Toggle main sidebar"-Button. Das Chat-Fenster wird ueber den <main>-Container
 * adressiert (`div:has(> div > div > main)`), die Navigation ueber das linke
 * Cluster; beide sind Geschwister, daher per `~` koppelbar.
 *
 * ACHTUNG / Wartung:
 * Diese Hooks sind nicht garantiert stabil. Bei einem Client-Update kann sich
 * Struktur/Markup aendern und Regeln hier ins Leere laufen oder Falsches
 * treffen. Das ist bewusst in Kauf genommen ("so gut wie moeglich"). Wenn nach
 * einem Update etwas kaputt aussieht: zuerst hier pruefen. Insbesondere die
 * Annahme "Liste nur im DOM, wenn aufgeklappt" — sollte der Client die Liste
 * immer rendern, verdeckt das Overlay den Chat dauerhaft und Block 1 muss auf
 * eine zustandsbasierte Loesung (Checkbox-Hack / :has()) umgestellt werden. */

@media (max-width: 768px) {
  /* 1) MITGLIEDERLISTE = AUSKLAPPBARES VOLLBILD-OVERLAY.
        Greift nur, wenn die Liste im DOM ist (Geschwister nach <main>), also
        wenn der User "View members" aktiviert hat. Dann ueber alles legen,
        ausser dem Header (top:48px), damit der Schliessen-Button erreichbar
        bleibt. */
  main ~ [class*="layout-width-channel-sidebar"] {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    z-index: 50 !important;
    background: var(--md-sys-color-surface, #1a1a1a) !important;
    padding-inline: 12px !important;
  }
  /* Innere Spalte der Liste ebenfalls auf volle Breite (sie traegt denselben
     width-Token und wuerde sonst von Regel 2 auf 230px begrenzt). */
  main ~ [class*="layout-width-channel-sidebar"] [class*="layout-width-channel-sidebar"] {
    width: 100% !important;
    max-width: none !important;
  }

  /* 2) SERVER-LEISTE folgt der Channel-Sidebar: das linke Cluster (Rail +
        Channel-Sidebar) ausblenden, sobald die Channel-Sidebar NICHT mehr im
        DOM ist (= "Toggle main sidebar" hat eingeklappt). Solange sie da ist,
        bleibt alles sichtbar. Cluster-Selektor via Home-Link-Tiefe (s. o.). */
  div:has(> div > div > a[href="/app"]):not(
      :has([class*="layout-width-channel-sidebar"])
    ) {
    display: none !important;
  }

  /* 3) AUFGEKLAPPT = VOLLBILD-NAVIGATION. Sobald die Channel-Sidebar im DOM ist
        (= "Toggle main sidebar" aufgeklappt), wird daraus ein Vollbild-Drawer:
        - das linke Cluster (Rail + Channel-Liste) fuellt den ganzen Screen,
        - die Channel-Liste fuellt den Platz neben der schmalen Rail,
        - das Chat-Fenster wird ausgeblendet.
        Ergebnis: sauberes Drawer-Muster (Navigation Vollbild <-> Chat Vollbild),
        umgeschaltet ueber den vorhandenen "Toggle main sidebar"-Button.
        `:has(> [token])` am linken Cluster = "Channel-Sidebar aktuell da". */
  div:has(> div > div > a[href="/app"]):has(> [class*="layout-width-channel-sidebar"]) {
    flex-grow: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  div:has(> div > div > a[href="/app"]):has(> [class*="layout-width-channel-sidebar"])
    > [class*="layout-width-channel-sidebar"] {
    flex-grow: 1 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  /* Chat-Fenster (= div, das `> div > div > main` enthaelt) ausblenden, solange
     die Navigation aufgeklappt ist. Das Chat-Fenster ist das Folge-Geschwister
     des linken Clusters, daher via `~` adressierbar. */
  div:has(> div > div > a[href="/app"]):has(> [class*="layout-width-channel-sidebar"])
    ~ div:has(> div > div > main) {
    display: none !important;
  }

  /* 4) Suchfeld im Channel-Header ausblenden (fest 240px breit, frisst Platz
        in der schmalen Kopfzeile). Suche bleibt ueber den Channel erreichbar. */
  input[placeholder="Search messages..."] {
    display: none !important;
  }

  /* 5) Aussen-/Innenabstaende um den Nachrichtenbereich reduzieren, damit auf
        kleinen Screens mehr Platz fuer den Inhalt bleibt. */
  main {
    margin-inline: 4px !important;
    margin-block-end: 4px !important;
    padding-inline: 6px !important;
  }
}