/* ═══════════════════════════════════════════════════════════════════════════
   mobile-touch-targets.css — §MOBILE-TOUCH-2026-09-13

   Hebt die bedienbaren Elemente der Mobile-Shell auf die 44x44-px-Mindest-
   flaeche (WCAG 2.5.5 / Apple HIG / Material). Gemessen mit
   audit-mobile-auth.js auf 360x800 und 393x852:

     .ec-mobile-composer-voice    38 x 38
     .ec-mobile-composer-send     40 x 40
     .ec-mobile-composer-attach   42 x 40
     .ec-mobile-back (Chat-Kopf)  40 x 40
     .ec-mobile-icon-btn (Kopf)   40 x 40

   Warum min-width/min-height statt width/height: die bestehenden Regeln
   setzen teils explizite Groessen: min-* gewinnt gegen width/height, ohne
   dass die Ursprungsregeln angefasst werden muessen.

   Platzrechnung Composer bei 360 px (Innenbreite 300 px):
     44 + 8 + [Eingabe] + 8 + 44 + 8 + 44 = 156 px Buttons + Abstaende
     -> Eingabefeld 144 px statt 156 px. Passt, flex:1 1 0 und min-width:0.
   Leistenhoehe innen 47 px (69 minus Padding) -> 44 px passen ohne Wachstum.

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

/* Die Ursprungsregeln setzen width/height durchgehend mit !important und
   nutzen Doppelklassen (.ec-mobile-back.ecm-back) bzw. #ec-mobile-shell
   [data-ecm-bp="1"]. Die Selektoren hier liegen bewusst eine Stufe darueber
   (zusaetzlich .auth-ready am body und die zweite Klasse am Container), damit
   sie unabhaengig von data-ecm-bp greifen. min-width/min-height schlagen im
   Box-Modell die gesetzte width/height; das Icon bleibt durch das dortige
   place-items:center zentriert. Bewusst NUR die Minima — keine Farben, keine
   Radien, kein display. */

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer .ec-mobile-composer-attach,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer .ec-mobile-composer-voice,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer .ec-mobile-composer-send,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer .primary {
  min-width: 44px !important;
  min-height: 44px !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head.ecm-chat-head .ec-mobile-back.ecm-back,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head.ecm-chat-head .ec-mobile-icon-btn.ecm-icon-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Das Eingabefeld gibt die Breite ab, die die groesseren Buttons brauchen. */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer #ec-mobile-msg-input {
  min-width: 0 !important;
  flex: 1 1 0% !important;
}