/* v141bs Bug-Hunt R7: Global .hidden !important (consistent with styles.css) */
.hidden { display: none !important; }

/* ============================================================================
   FlowNXT Mobile Layer
   Erweitert die bestehende WebApp um ein natives Mobile-UI-Gefühl.
   Wird NACH styles.css geladen, überschreibt nur das Nötigste.
   ============================================================================ */

/* ===== Safe-Area + Keyboard Variablen =====
   --kb-h wird live von mobile.js via visualViewport-API gesetzt.
   Ohne JS / Desktop bleibt der Wert 0 → Fallback auf safe-area. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --nav-h: 60px;
  --kb-h: 0px;     /* On-Screen-Keyboard-Höhe (von JS gefüllt) */
}

/* ===== NUR auf Mobile/Touch aktiv =====
   v61: Threshold auf 1023px hochgesetzt, damit auch Tablets im Portrait
   das WhatsApp-Layout bekommen. Landscape-Mode (Hoehe < 500px) wird
   ebenfalls erzwungen, weil bei wenig Hoehe das Desktop-Sidebar-Layout
   keinen Sinn macht. */
@media (max-width: 1023px), (hover: none) and (pointer: coarse), (max-height: 500px) and (orientation: landscape) {

  /* v141bj-FULLSCREEN: App nutzt gesamten Monitor, Safe-Area nur als Padding
     innerhalb der App-Bereiche (nicht am Body) damit Statusbar/Home-Bar
     transparent überlagert werden */
  html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    background: var(--bg-base);
  }

  /* Auth-Screen (Login) bekommt Safe-Area-Padding damit Inhalt nicht unter Statusbar rutscht */
  #auth-screen {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    box-sizing: border-box;
  }

  /* Inputs dürfen Text-Selection haben */
  input, textarea, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Sidebar als Drawer (überschreibt bestehende 85%-Regel) */
  .sidebar {
    width: 88% !important;
    max-width: 360px !important;
    padding-top: var(--safe-top);
  }

  /* Haupt-Chat-Area: full screen, korrekt für iOS Safari */
  .chat-area {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;  /* iOS Safari: erlaubt Flex-Child zu schrumpfen → scrollen geht */
    width: 100% !important;
    max-width: 100vw !important;
    /* Höhe = sichtbarer Viewport - Tastatur.
       dvh shrinkt zwar auf iOS/Android wenn die Tastatur aufgeht, ABER nur
       bei neueren Browsern. Der visualViewport-getriebene --kb-h deckt
       ALLE Fälle zuverlässig ab (inkl. Capacitor WebView). */
    height: calc(100dvh - var(--kb-h, 0px)) !important;
    height: calc(100vh - var(--kb-h, 0px)); /* Fallback */
    padding-top: var(--safe-top);
    box-sizing: border-box;
  }

  /* Chat-Header: kompakter, oben safe-area beachten */
  .chat-header {
    padding-top: calc(0.6rem + var(--safe-top) * 0) !important;
    min-height: 56px;
  }

  /* ===== BOTTOM NAVIGATION BAR (DEPRECATED) =====
     Die alte Chats/Profil-Leiste wurde entfernt (2026-06-11).
     Die Hauptnavigation läuft jetzt über die wa-sidebar-tabs.
     Diese Regeln bleiben nur, um Konflikte zu vermeiden, falls die Klasse
     noch irgendwo im DOM auftaucht. */
  .flownxt-bottom-nav,
  .flownxt-nav-btn,
  .flownxt-nav-badge { display: none !important; visibility: hidden !important; height: 0 !important; }

  /* ===== UPDATE BANNER ===== */
  .flownxt-update-banner {
    position: fixed;
    top: calc(var(--safe-top) + 8px);
    left: 8px;
    right: 8px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    padding: 10px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
    font-size: 0.85rem;
    animation: flownxt-slide-down 0.3s ease-out;
  }

  .flownxt-update-banner.hidden { display: none; }

  .flownxt-update-banner .upd-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  .flownxt-update-banner .upd-text {
    flex: 1;
    line-height: 1.3;
  }

  .flownxt-update-banner .upd-action {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  .flownxt-update-banner .upd-action:active {
    background: rgba(255, 255, 255, 0.3);
  }

  .flownxt-update-banner .upd-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    padding: 0 4px;
    cursor: pointer;
    opacity: 0.7;
  }

  @keyframes flownxt-slide-down {
    from { transform: translateY(-120%); opacity: 0; }
    to   { transform: translateY(0);      opacity: 1; }
  }

  /* ===== CHAT-LISTE als full-screen MAIN VIEW ===== */
  /* Wenn kein Chat offen: zeige Sidebar/Liste als full-screen */
  body.flownxt-no-chat .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh;        /* iOS: dynamische Viewport-Höhe */
    min-height: 100vh;         /* Fallback für ältere Browser */
    box-shadow: none !important;
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom)) !important;
    transform: none !important;
  }

  body.flownxt-no-chat .sidebar-backdrop { display: none !important; }
  body.flownxt-no-chat #sidebar-toggle { display: none !important; }
  body.flownxt-no-chat .chat-area { display: none !important; }

  /* Wenn Chat offen: verstecke Sidebar/List und zeige nur Chat-Area */
  /* v141bj-RESPONSIVE: Sidebar permanent sichtbar auf Mobile (schmal), 
     Chat daneben — User sieht alles gleichzeitig */
  /* v141bj-cleanup RESPONSIVE:
     - Phone (max-width: 767px): full-screen Sidebar (wenn kein Chat), full Chat wenn Chat offen
     - Tablet/Desktop (min-width: 768px): Sidebar 280px permanent + Chat daneben */
  body.flownxt-chat-open .sidebar { 
    display: flex !important; 
    position: relative !important; 
    left: auto !important;
    top: auto !important;
    width: 45% !important; 
    max-width: 260px !important;
    min-width: 160px !important;
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.1)) !important;
    z-index: 1 !important;
    border-right: 1px solid var(--border-default, rgba(255,255,255,0.1)) !important;
  }
  body.flownxt-chat-open .sidebar-backdrop { display: none !important; }
  body.flownxt-chat-open #sidebar-toggle { display: none !important; }
  body.flownxt-chat-open .chat-area {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 65% !important;       
    max-width: 65% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    /* v62: Höhe = sichtbarer Viewport - Safe-Bottom - Tastatur - Sicherheits-Puffer.
       Wenn Tastatur aufgeht → visualViewport shrinkt → 100dvh folgt.
       Safe-Bottom muss abgezogen werden, weil Browser-URL-Bar am unteren
       Rand sonst Inhalt verdeckt.
       +8px Puffer damit auch bei kleinen Safe-Area-Werten nichts abgeschnitten wird. */
    height: calc(100dvh - var(--safe-bottom, 0px) - var(--kb-h, 0px) - 8px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  /* KRITISCH: Bottom-Nav ausblenden wenn Chat offen, sonst ueberdeckt sie das Message-Input */
  body.flownxt-chat-open .flownxt-bottom-nav { display: none !important; }

  /* v52: Composer bleibt im NORMALEN Flex-Layout (kein position:fixed mehr).
     Vorteile:
     - Wird vom Flex-Layout (.chat-area column) automatisch ans untere Ende
       vom sichtbaren Chat-Bereich gesetzt.
     - Wenn 100dvh durch Tastatur schrumpft, schrumpft der Composer-Bereich
       automatisch mit → Tastatur verdeckt nichts mehr.
     - Kein Konflikt mit Android-Chromes Bottom-URL-Bar.
     Nachteil: Composer "schiebt" Messages-Bereich hoch wenn Tastatur aufgeht,
     was aber OK ist, weil Messages scrollbar sind. */
  body.flownxt-chat-open .message-input-container {
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.5rem 0.6rem calc(0.5rem + var(--safe-bottom, 0px)) !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border) !important;
    box-sizing: border-box !important;
    position: relative; /* für Plus-Popup (position:absolute) */
    z-index: 5;
  }
  /* Send-Button explizit sichtbar machen (im WhatsApp-Layout nicht aktiv sichtbar,
     bleibt aber im DOM für app.js-Handler) */
  body.flownxt-chat-open .send-btn {
    display: flex !important;
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Input-Feld füllt den verfügbaren Platz in der Pill */
  body.flownxt-chat-open #message-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
  /* Chat-Header: volle Breite, Back-Button sichtbar */
  body.flownxt-chat-open .chat-header {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
  body.flownxt-chat-open .chat-header #back-to-sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(124, 58, 237, 0.3);
    min-width: 44px;
    min-height: 44px;
  }

  /* v55: Auf Mobile weniger Header-Buttons → Name + Avatar besser sichtbar.
     🔍 Suche und ⏱ Verschwindend werden ins 3-Punkte-Menü verschoben. */
  body.flownxt-chat-open .chat-header .mobile-menu-only { display: none !important; }

  /* v55: Header-Höhe etwas größer damit Avatar + Name gut zur Geltung kommen.
     Avatar 44px, Name prominent. */
  body.flownxt-chat-open .chat-header {
    min-height: 64px !important;
    padding-top: calc(0.5rem + var(--safe-top)) !important;
    padding-bottom: 0.5rem !important;
    gap: 0.5rem !important;
  }
  body.flownxt-chat-open .chat-user-info img,
  body.flownxt-chat-open #chat-avatar {
    width: 44px !important;
    height: 44px !important;
  }
  body.flownxt-chat-open #chat-name {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.flownxt-chat-open #chat-status {
    font-size: 0.75rem !important;
  }
  /* Chat-Action-Buttons: kleiner damit sie den Namen nicht verdrängen */
  body.flownxt-chat-open .chat-actions .bubble-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
  }

  body.flownxt-chat-open .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    width: 100% !important;
    /* Padding unten: Platz für Composer (ca. 64px) + Safe-Area.
       KEIN --kb-h hier, weil der Composer im Flex-Layout den Platz selbst
       einnimmt — Messages wird dadurch kleiner, nicht überlagert. */
    padding-bottom: calc(0.75rem + var(--safe-bottom)) !important;
  }

  /* ===== SCROLLBAR & ANIMATION VERBESSERUNGEN ===== */
  .messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Padding unten: nur Safe-Area + Message-Input-Höhe (ca. 64px).
       Die alte Bottom-Nav ist weg, daher reicht ein kleines Polster.
       Wenn Chat offen ist, übernimmt obige Regel mit Keyboard-Höhe. */
    padding-bottom: calc(0.5rem + var(--safe-bottom)) !important;
  }

  .friends-list {
    /* Chat-Liste: volle Höhe + nur Safe-Area als Polster unten.
       Kein Bottom-Nav mehr, daher voller Scroll-Bereich. */
    padding-bottom: calc(0.5rem + var(--safe-bottom)) !important;
  }

  /* Sidebar: nimmt die volle Höhe ein, Inhalt scrollt */
  .sidebar {
    height: 100dvh !important;
    height: -webkit-fill-available !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* WA-Sidebar-Tabs Container bekommt oben Safe-Area */
  .wa-sidebar { padding-top: var(--safe-top); }

  /* Touch-Target Vergrößerung */
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* ===== Map Modal: füllt den Mobile-View ===== */
  #map-modal .modal-content {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  #map-container {
    height: calc(100dvh - 200px) !important;
    min-height: 300px;
  }

  .friend-item {
    min-height: 68px !important;
  }

  /* Verhindere "Doppel-Tap Zoom" auf Buttons */
  button, .icon-btn, .nav-btn {
    touch-action: manipulation;
  }

  /* === Phase 1: V2 mobile sidebar adjustments === */
  .wa-profile-card { padding: 10px 12px; gap: 10px; }
  .wa-profile-card .avatar { width: 40px; height: 40px; font-size: 1rem; }
  .wa-profile-card .profile-name { font-size: 0.9rem; }
  .wa-profile-card .profile-status { font-size: 0.75rem; }
  .wa-dashboard { padding: 8px 10px; gap: 6px; grid-template-columns: repeat(4, 1fr); }
  .wa-kpi { padding: 8px 10px; min-height: 56px; }
  .wa-kpi .kpi-label { font-size: 0.6rem; }
  .wa-kpi .kpi-value { font-size: 1.15rem; }
  .wa-kpi .kpi-icon { font-size: 0.9rem; }
  .wa-sidebar-tab { padding: 10px 6px; font-size: 0.75rem; }
  .wa-sidebar-tab .tab-badge { font-size: 0.6rem; }
  .location-toggle-card { margin: 8px 10px; padding: 10px 12px; }
  .location-toggle-card .loc-title strong { font-size: 0.85rem; }
  .location-toggle-card .loc-title small { font-size: 0.7rem; }
  .wa-modal { width: 95vw; border-radius: 10px; }
  .wa-modal-header { padding: 12px 16px; }
  .wa-modal-body { padding: 12px 16px; }
  .wa-modal-footer { padding: 10px 16px; }
  .wa-reason-pick label { padding: 10px 10px; font-size: 0.85rem; }
}

/* Auf Desktop: Bottom-Nav verstecken */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .flownxt-bottom-nav { display: none !important; }
  .flownxt-update-banner { display: none !important; }
}

/* Reduce-Motion respect */
@media (prefers-reduced-motion: reduce) {
  .flownxt-update-banner { animation: none; }
}

/* =====================================================
   PHASE 4 - V2: Mobile overrides for call history, in-call chat, group call
   v61: Threshold auf 1023px hochgesetzt (war 720px)
   ===================================================== */
@media (max-width: 1023px) {
  .call-history-modal { max-height: 92vh; border-radius: 12px 12px 0 0; }
  .incall-chat-panel { width: 100%; }
  .call-controls { gap: 8px !important; padding: 14px !important; }
  .call-controls .call-btn { width: 48px !important; height: 48px !important; font-size: 1.1rem !important; }
  .gcm-friends { max-height: 40vh; }
  .wa-modal { max-width: 95vw !important; }

  /* Call container full screen mit Safe-Area */
  .call-container {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }
  .call-header {
    padding: 0.7rem 1rem !important;
    min-height: 52px;
  }
  /* Video-Bereich nutzt die volle Bildschirm-Höhe */
  .call-video {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto !important;
  }
  /* Remote-Video: komplettes Bild sichtbar (kein Crop auf den Kopf) */
  #remote-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  /* Local PiP etwas kleiner auf Mobile, höher platziert (damit Call-Header nicht überlappt) */
  #local-video {
    width: 90px !important;
    height: 130px !important;
    top: calc(12px + var(--safe-top)) !important;
    right: 12px !important;
  }
  /* Audio-only: großer Avatar in der Mitte */
  .call-video.audio-only::before { font-size: 6rem !important; }
}

/* ============================================================================
   Phase B: Mobile Bottom Navigation
   - Auf Desktop: komplett versteckt
   - Auf Mobile: fixed am unteren Rand, ersetzt die wa-sidebar-tabs
   v61: Threshold auf 1023px hochgesetzt
   ============================================================================ */
.flownxt-bottom-nav {
  display: none;
}

@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  .flownxt-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    background: var(--wa-panel, #202c33);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 4px calc(6px + var(--safe-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    /* Über dem sidebar-backdrop, unter dem call-modal */
  }

  .bnav-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--wa-text-muted, rgba(233, 237, 239, 0.6));
    padding: 6px 2px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
    border-radius: 8px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
  }
  .bnav-btn:active {
    background: rgba(255, 255, 255, 0.06);
  }
  .bnav-btn.active {
    color: var(--wa-green, #00a884);
  }
  .bnav-icon {
    font-size: 1.35rem;
    line-height: 1;
  }
  .bnav-label {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.2px;
  }
  .bnav-badge {
    position: absolute;
    top: 0;
    right: 22%;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    line-height: 1.1;
  }

  /* Sidebar-Inhalt nach oben schieben, damit der Bottom-Nav nichts verdeckt.
     + zusätzlich Keyboard-Höhe, damit beim Tippen in Suche die letzte
     Aktion (📎, 📍, 📊, 🎁, 🎤, 😊) nicht unter der Tastatur verschwindet. */
  .sidebar {
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom, 0px) + 8px + var(--kb-h, 0px)) !important;
  }

  /* Sidebar-Aktionen (Bubble-Grid: 📎 Standort, 📊, 🎁, 🎤 etc.) müssen
     ebenfalls Platz für Tastatur + Chrome-Bottom-Bar lassen.
     War Screenshot 3: Icons wurden unter der URL-Bar abgeschnitten. */
  .sidebar-actions,
  .composer-toolbar,
  .wa-modal-footer {
    padding-bottom: calc(var(--safe-bottom, 0px) + 8px) !important;
  }

  /* Die wa-sidebar-tabs sind redundant zum Bottom-Nav auf Mobile → ausblenden */
  .wa-sidebar-tabs {
    display: none !important;
  }

  /* =====================================================================
     B.2: Composer Mobile — WhatsApp-Style (v54)
     Layout: [ + ] [ Pill(😊 + Textarea) ] [ 🗣️ ] [ 🎤 | ➤ ]
     Plus-Popup über [+] mit: 📎 Datei, 📍 Standort, 📊 Umfrage, 🎁 Geschenk
     Keine sichtbaren Inline-Attach-Buttons mehr — alle hinter Plus.
     ===================================================================== */

  /* Container-Grundlayout */
  .message-input-container {
    display: flex !important;
    padding: 0.5rem 0.5rem calc(0.5rem + var(--safe-bottom, 0px));
    gap: 0.35rem;
    flex-wrap: nowrap;
    align-items: flex-end !important;
    position: relative; /* Anchor für Plus-Popup */
  }

  /* v61: Sehr kleine Screens (Phone SE etc.) — Buttons etwas kleiner,
     damit alle 4 Elemente nebeneinander passen. */
  @media (max-width: 360px) {
    #composer-plus-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; font-size: 1.3rem !important; }
    #voice-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; font-size: 1.2rem !important; }
    .message-input-container > #voice-memo-btn,
    .message-input-container > #send-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; font-size: 1.2rem !important; }
    #composer-pill { min-height: 44px !important; padding: 0.3rem 0.35rem !important; }
    #message-input { min-height: 28px !important; padding: 0.35rem 0.3rem !important; }
  }

  /* --- Plus-Button (links außen) --- */
  #composer-plus-btn {
    flex-shrink: 0;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: var(--bg-input, rgba(255,255,255,0.1)) !important;
    color: var(--text-primary, #fff) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.15)) !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.25s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    padding: 0 !important;
    order: 0 !important; /* Ganz links */
  }
  #composer-plus-btn:active {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: scale(0.92);
  }
  /* Plus-Icon rotiert zu X wenn aktiv */
  #composer-plus-btn.active {
    background: var(--primary, #7c3aed) !important;
    color: #fff !important;
    border-color: var(--primary, #7c3aed) !important;
    transform: rotate(45deg);
  }
  #composer-plus-btn svg {
    stroke: currentColor;
    display: block;
  }

  /* --- Eingabe-Pill (Smiley + Textarea) --- */
  #composer-pill {
    flex: 1 1 auto;
    min-width: 0;
    /* v61: Min-Height auf 48px erhöht + padding korrekt, damit Text
       auch bei kleinen Screens (iPhone SE 320px) nicht abgeschnitten wird. */
    background: var(--bg-input, rgba(255,255,255,0.12)) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.18)) !important;
    border-radius: 24px;
    padding: 0.35rem 0.45rem;
    display: flex !important;
    align-items: flex-end !important; /* Bottom-align: Text wächst nach oben */
    gap: 0.2rem;
    transition: border-color 0.15s;
    min-height: 48px !important;
    max-height: 140px;
    order: 1 !important;
    box-sizing: border-box;
  }
  #composer-pill:focus-within {
    border-color: var(--primary, #7c3aed) !important;
    background: rgba(255,255,255,0.16) !important;
  }

  #message-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100% !important;
    /* v61: KEIN height: auto !important — app.js _autogrowInput() setzt
       height explizit. Wir geben min/max vor, App macht den Rest. */
    min-height: 32px !important;
    max-height: 100px !important;
    font-size: 16px !important; /* iOS-Zoom verhindern */
    padding: 0.45rem 0.35rem !important;
    line-height: 1.4;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit;
    resize: none;
    overflow-y: auto;
    box-sizing: border-box !important;
    align-self: stretch !important;
  }

  /* Smiley-Button (links IN der Pill) */
  #composer-pill > #emoji-btn,
  #composer-pill .pill-emoji-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, rgba(233, 237, 239, 0.7));
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    transition: background 0.15s;
  }
  #composer-pill > #emoji-btn:active,
  #composer-pill .pill-emoji-btn:active {
    background: rgba(255, 255, 255, 0.08);
  }

  /* --- 🗣️ Sprache-zu-Text Button (zwischen Pill und Mic) --- */
  /* v57: Selektor war zu eng ("#composer-pill + #voice-btn" = direkter Nachfolger).
     Funktioniert nur wenn voice-btn direkt nach der Pill im DOM ist — was bei
     versteckten 📎📍📊🎁 davor nicht der Fall ist. Jetzt: einfach #voice-btn
     mit order:2 positionieren. */
  #voice-btn {
    flex-shrink: 0;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--text-muted, rgba(233, 237, 239, 0.8)) !important;
    border: none !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    padding: 0 !important;
    transition: background 0.15s;
    order: 2 !important;
  }
  #voice-btn:active {
    background: rgba(255, 255, 255, 0.12) !important;
  }

  /* --- Mic / Send Toggle (rechts außen) --- */
  .message-input-container > #voice-memo-btn,
  .message-input-container > #send-btn {
    flex-shrink: 0;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: var(--primary, #7c3aed) !important;
    color: #fff !important;
    border: none !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
    transition: background 0.2s, transform 0.15s, opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
    order: 3 !important; /* Ganz rechts außen, nach Plus + Pill + 🗣️ */
    /* v65: KEIN Pulse mehr — User mochte das Blinken nicht.
       Recording-Status wird durch das Voice-Overlay angezeigt, nicht durch
       animierten Button. */
  }
  .message-input-container > #voice-memo-btn:active,
  .message-input-container > #send-btn:active {
    transform: scale(0.93);
  }
  /* Initial: Sende-Button versteckt, Mic zeigen */
  .message-input-container > #send-btn { display: none !important; }
  /* Senden-Modus (Text im Feld): Mic aus, Send an, grün */
  body.flownxt-can-send .message-input-container > #voice-memo-btn {
    display: none !important;
  }
  body.flownxt-can-send .message-input-container > #send-btn {
    display: flex !important;
    background: var(--success, #00a884) !important;
    box-shadow: 0 2px 8px rgba(0, 168, 132, 0.4);
  }

  /* v65: Pulse-Animation komplett deaktivieren.
     War v57-64, hat aber den User gestoert. */
  body.flownxt-voice-recording #voice-btn,
  body.flownxt-voice-recording #voice-memo-btn {
    /* Nur statisch rot, ohne Animation */
    background: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important;
  }

  /* --- Inline-Attach-Buttons (📎📍📊🎁): im Composer versteckt --- */
  /* Originale app.js-Buttons bleiben im DOM für Click-Handler (Plus-Popup
     triggert sie per JS .click()), sind aber visuell versteckt.
     Wichtig: greift OHNE JS-Attribut, damit vor JS-Load nichts doppelt
     auftaucht. */
  .message-input-container > #attach-btn,
  .message-input-container > #location-btn,
  .message-input-container > #poll-btn,
  .message-input-container > #sticker-chat-btn {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* --- Plus-Popup --- */
  #composer-attach-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0.5rem;
    background: var(--bg-card, #1f2c33);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 16px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    padding: 0.4rem;
    display: none;
    z-index: 60;
    min-width: 240px;
    animation: flownxt-popup-in 0.18s ease-out;
  }
  #composer-attach-popup.visible {
    display: block;
  }
  #composer-attach-popup .attach-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #composer-attach-popup .attach-row:active {
    background: rgba(255, 255, 255, 0.06);
  }
  #composer-attach-popup .attach-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.18);
    color: var(--primary, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
  }
  #composer-attach-popup .attach-label {
    font-size: 0.95rem;
    font-weight: 500;
  }
  @keyframes flownxt-popup-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }

  /* --- Composer-Buttons-Labels (Desktop): Mobile ausblenden --- */
  .composer-toolbar-label { display: none !important; }

  /* v55: Separator im Chat-Menu (Mobile-only) */
  .chat-menu-sep {
    height: 1px;
    background: var(--border, rgba(255,255,255,0.08));
    margin: 0.3rem 0;
  }

  /* Sidebar-Aktionen unverändert (Phase B.20) */
  .sidebar-actions.bubble-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
}


/* ===== v141bj: Auto-Notification-Setup-Banner ===== */
.sj-notify-setup-banner,
.sj-battery-banner {
    position: fixed;
    bottom: calc(var(--safe-bottom, 0px) + 16px);
    left: 16px;
    right: 16px;
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
    border: 1px solid rgba(126, 91, 239, 0.4);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 99999;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    animation: sjSlideUp 0.3s ease-out;
}

@keyframes sjSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.sj-notify-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.sj-notify-content {
    flex: 1;
    min-width: 0;
}

.sj-notify-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}

.sj-notify-msg {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

.sj-notify-action {
    background: linear-gradient(135deg, #7e5bef 0%, #f857a6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.sj-notify-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    line-height: 1;
}

.sj-notify-dismiss:hover { color: #fff; }

@media (max-width: 600px) {
    .sj-notify-setup-banner,
    .sj-battery-banner {
        left: 8px;
        right: 8px;
        padding: 12px 14px;
    }
}
/* ===== v141bj-mobilekb: Composer fix fuer Mobile-Keyboard =====
   Alter Selector .message-input-container wird nicht mehr genutzt.
   Aktueller Composer ist .chat-input-bar.
   Fix: position:fixed mit bottom = var(--kb-h) (von mobile.js gesetzt). */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  body.flownxt-chat-open .chat-input-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--kb-h, 0px) !important;
    z-index: 50 !important;
    background: var(--ci-bar-bg) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.flownxt-chat-open .chat-area,
  body.flownxt-chat-open #messages {
    padding-bottom: calc(72px + var(--kb-h, 0px) + var(--safe-bottom, 0px)) !important;
  }
}
/* ===== v141bj-mobilekb2: Phone-Layout fix (< 600px) =====
   Auf Phone-Viewport sind Sidebar + Chat beide sichtbar mit
   Sidebar 45% + Chat 65% — beide zu schmal zum Lesen.
   Loesung: Auf < 600px nur EINS gleichzeitig zeigen.
   - KEIN Chat offen: Sidebar Full-Width
   - Chat offen: Chat Full-Width + Sidebar weg */
@media (max-width: 599px) {
  body.flownxt-no-chat .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.flownxt-chat-open .sidebar {
    display: none !important;
  }
  body.flownxt-chat-open .chat-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  body.flownxt-chat-open #back-to-sidebar {
    display: flex !important;
  }
}