/* ═══════════════════════════════════════════════════════════════════════════
   mobile-audit-fixes.css — §MOBILE-AUDIT-FIX-2026-09-13

   Behebt die Befunde aus audit-views.js (360x800 und 393x852, Ansichten
   rooms · chat · vault). Gemessene Ausgangslage:

     1. Eingabefeld 144 px von 360 px (40 %), Platzhalter
        "Nachricht sicher senden..." mitten im Wort abgeschnitten.
     2. 120 px totes Band unter dem Composer: die Bottom-Nav ist im offenen
        Chat nur per visibility versteckt, belegt aber weiter 60 px, und
        main.ec-mobile-content reserviert zusaetzlich 60 px padding-bottom.
     3. Kein Safe-Area-Abstand am Chat-Kopf (padding-top: 6px).

   Laedt als LETZTES Stylesheet, damit die Regeln ohne Eingriff in die
   gewachsenen Layer (mobile-overrides.css, 589 KB) greifen.

   REVERT: den einen <link> aus public/index.html entfernen.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── Spezifitaet ────────────────────────────────────────────────────────────
   Die bestehenden Regeln eskalieren mit dreifach wiederholter ID
   (#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell, Spezifitaet 3-2-2) und
   schlagen damit jede Klassenkette. Gemessen per CDP getMatchedStylesForNode:
   die Composer-Werte padding 16px / gap 8px stammen aus genau so einer Regel.
   Die Selektoren hier wiederholen die ID daher vierfach — unschoen, aber die
   im Projekt etablierte Methode, und die einzige, die ohne Eingriff in die
   589 KB mobile-overrides.css verlaesslich gewinnt.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Totes Band unter dem Composer schliessen ────────────────────────────
   Im offenen Chat ist die Bottom-Nav fachlich weg — dann darf sie auch
   keinen Platz mehr belegen. display:none statt visibility:hidden, und die
   Platzreserve in main faellt mit weg. Beide Selektorvarianten (mit und ohne
   #ec-mobile-shell), weil die Shell je nach Einstiegspfad unterschiedlich
   tief verschachtelt ist; die nicht passende Variante matcht schlicht nie. */
html body.ec-mobile-shell-active.ec-mobile-chat-open .ec-mobile-app > nav.ec-mobile-bottom-nav,
html body.ec-mobile-shell-active.ec-mobile-chat-open .ec-mobile-app > nav.ecm-bottom-nav,
html body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-app > nav.ec-mobile-bottom-nav,
html body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-app > nav.ecm-bottom-nav {
  display: none !important;
}

html body.ec-mobile-shell-active.ec-mobile-chat-open .ec-mobile-app > main.ec-mobile-content,
html body.ec-mobile-shell-active.ec-mobile-chat-open .ec-mobile-app > main.ecm-main,
html body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-app > main.ec-mobile-content,
html body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-app > main.ecm-main {
  padding-bottom: 0 !important;
}

/* ── 2. Composer: volle Breite, Eingabefeld flexibel ────────────────────────
   Das Panel setzt padding: 0 14px. Der Composer hebt das per negativem
   Rand auf und zieht ueber die volle Breite — das ist auch optisch die
   richtige Leiste, weil sie jetzt buendig am unteren Rand sitzt. Die so
   gewonnenen 28 px plus die engeren Innenabstaende (16 -> 8 px) und
   Abstaende (8 -> 6 px) gehen vollstaendig an das Eingabefeld:
     360 - 2*8 (Composer-Innenabstand) - 3*44 (Buttons) - 3*6 (Abstaende)
     = 194 px statt 144 px.
   Die drei Buttons bleiben bei 44x44 (mobile-touch-targets.css). */
/* Der Innenabstand wandert von der Sektion in Kopf und Nachrichtenstrom.
   Ein negativer Rand am Composer waere der kuerzere Weg, zieht aber die
   content-basierte Grid-Spalte des Panels auf (gemessen: +25 px Ueberstand
   an Kopf und Strom). So bleibt jede Zeile im Raster. */
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"].ec-mobile-panel {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head.ecm-chat-head,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"] #ec-mobile-chat-stream {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer {
  width: auto !important;
  margin-inline: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-top: 10px !important;
  /* Safe-Area unten: mindestens 12 px, auf Geraeten mit Home-Indicator der
     Systemwert. max() statt calc(12px + env()), damit auf Geraeten ohne
     Indicator kein doppelter Abstand entsteht. */
  padding-bottom: max(env(safe-area-inset-bottom), 12px) !important;
  gap: 6px !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer #ec-mobile-msg-input {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  /* 16 px bleiben Pflicht: darunter zoomt iOS beim Fokussieren die Seite. */
  font-size: 16px !important;
}

/* Der Platzhalter darf kleiner sein als der Eingabetext — iOS entscheidet
   den Auto-Zoom an der font-size des Feldes, nicht an der des Platzhalters.
   13.5 px halten "Nachricht sicher senden..." vollstaendig im Feld. */
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer #ec-mobile-msg-input::placeholder {
  font-size: 13px !important;
  text-overflow: clip !important;
}

/* ── 3. Safe-Area am Chat-Kopf ──────────────────────────────────────────────
   Bisher 6 px — unter der Statusleiste/Notch zu wenig. */
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head.ecm-chat-head {
  padding-top: max(env(safe-area-inset-top), 12px) !important;
}

/* ── 4. Grid-Spalten begrenzen — die eigentliche Truncate-Ursache ──────────
   Die Panels und Scroller der Shell sind Grids mit content-basierter Spalte.
   Unter Last gemessen: das Chat-Panel zieht auf 1265 px, der Vault-Scroller
   auf 1287 px. Solange die Spalte mitwaechst, laeuft JEDE Ellipse darunter
   ins Leere — text-overflow greift erst, wenn ein Vorfahre die Breite
   begrenzt. minmax(0, 1fr) bindet die Spalte an den Container statt an den
   Inhalt; min-width:0 nimmt den Flex-Nachfahren die automatische
   Mindestbreite (min-width:auto), die denselben Effekt hat.
   Bewusst nur auf den drei geprueften Ansichten — andere Panels bleiben
   unberuehrt. */
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"].ec-mobile-panel,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="rooms"].ec-mobile-panel,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="vault"].ec-mobile-panel,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-body-scroll,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-body-scroll,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-body-scroll,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"] .ecm-panel-scroll,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="rooms"] .ecm-panel-scroll,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="vault"] .ecm-panel-scroll {
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
}

/* Flex-Zwischenebenen, die sonst per min-width:auto den Inhalt durchdrucken. */
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head.ecm-chat-head,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-recent,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-recent-card,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-body,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="vault"] .ecm-panel-body {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ── 5. Truncate-Absicherung gegen lange Namen ──────────────────────────────
   Chat-Kopf, Raumliste und Vault tragen die Ellipse teils schon; hier wird
   sie fuer alle Namens- und Metazeilen verbindlich gesetzt und jedes
   Flex-/Grid-Elternteil auf min-width:0 gezwungen. Ohne min-width:0 wuerde
   die automatische Mindestbreite eines Flex-Elements (min-width:auto) den
   Inhalt statt die Ellipse durchdruecken — genau der Fall, der bei langen
   Raum- und Dateinamen bricht. */
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ecm-chat-copy,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-chat-meta,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-vault-recent-copy,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-vault-item-copy {
  min-width: 0 !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ecm-chat-copy > strong,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ecm-chat-copy > small,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell #ec-mobile-chat-title,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell #ec-mobile-chat-sub,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-vault-recent-copy > strong,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-vault-recent-copy > small,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-vault-recent-copy > span,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-vault-item-copy > strong,
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell .ec-mobile-vault-item-copy > small {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ── 6. Touch-Target der Chat-Links ─────────────────────────────────────────
   Gemessen: a.ec-chat-link 233x36.7 px (360er) bzw. 260x36.7 px (393er) —
   breit genug, aber zu flach fuer die 44-px-Regel. Die Hoehe kommt aus zwei
   Textzeilen a ~18 px, eine dritte gibt es nicht.

   inline-flex statt Innenabstand: ein Innenabstand an einem Inline-Element
   vergroessert zwar die Trefferflaeche, waechst aber aus der Zeilenbox heraus
   und ueberlappt die Nachbarzeilen — bei mehreren Links in einer Blase
   ueberlagern sich dann die Klickflaechen. inline-flex macht den Link zu
   einem atomaren Inline-Kasten mit eigener Hoehe; der Text darin bricht
   weiterhin normal um.

   Nur die Links im Nachrichtenstrom der Mobile-Shell — Links in Fliesstexten
   anderer Ansichten bleiben unberuehrt. */
html body.ec-mobile-shell-active #ec-mobile-shell#ec-mobile-shell#ec-mobile-shell#ec-mobile-shell [data-ecm-panel="chat"] #ec-mobile-chat-stream a.ec-chat-link {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  min-height: 44px !important;
  max-width: 100% !important;
  /* Der Kasten darf die Blasenbreite nicht sprengen: lange URLs brechen
     weiterhin innerhalb des Links um. */
  overflow-wrap: anywhere !important;
  vertical-align: middle !important;
}