/**
 * Mobile Bottom Nav: zwei getrennte Islands
 * 1) Nav-Island: Kreise wie Desktop, nur Icons ohne Text
 * 2) Such-Island: ein Kreis (Such-Button), rechts daneben
 */

/* KI Morph (Mobil): Innenfläche mit max-width der Pille ausblenden — kinma-ai-search-pill.css setzt sonst opacity/visibility sofort. */
@keyframes kinma-mb-ai-pill-inner-morph-fade {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Desktop: Mobile-Nav ausblenden (ab min-width 1025px); Design-Iframe-Vorschau ausnehmen */
@media (min-width: 1025px) {
    .mobile-bottom-nav:not(.kinma-mobile-nav-design-preview) {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    /* Desktop-Nav auf Mobile ausblenden */
    .left-nav-cluster {
        display: none !important;
    }

    /* Gleiches Padding wie Top-Nav (10px, unten + Safe-Area); Spalte: Label direkt über Islands, kein Abstand */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10002;
        padding: 10px;
        padding-left: max(10px, env(safe-area-inset-left, 0));
        padding-right: max(10px, env(safe-area-inset-right, 0));
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
        pointer-events: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* Wie .mobile-top-nav-row: gleiche Innenhöhe, Kreisgröße und Pille */
        --kinma-mbn-island-pad-y: 2px;
        --kinma-mbn-island-pad-x: 4px;
        --kinma-mbn-pill-h: 50px;
        --kinma-mbn-btn: calc(var(--kinma-mbn-pill-h) * 0.95);
        --kinma-mbn-island-height: calc(var(--kinma-mbn-pill-h) + (2 * var(--kinma-mbn-island-pad-y)));
        /* Früher 48px / 56px Innen auf 60px Außen — proportional skalieren */
        --kinma-mbn-aux-btn: calc(var(--kinma-mbn-island-height) * 48 / 60);
        --kinma-mbn-story-close-ring: calc(var(--kinma-mbn-island-height) * 56 / 60);
        --kinma-mbn-extras-collapse: calc(var(--kinma-mbn-island-height) * 36 / 60);
        --kinma-mobile-island-sublabel-fs: 9px;
        --kinma-mobile-island-sublabel-lh: 1.15;
    }
    .mobile-bottom-nav::-webkit-scrollbar {
        display: none;
    }

    /* Wrapper: Nav-Island (Icons) */
    .mobile-bottom-nav-island-with-label {
        flex: 1 1 0%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        gap: 4px;
    }
    /* Zeile: linke Buttons | Nav-Island (nutzt ganzen Platz dazwischen) | rechter Such-Button */
    .mobile-bottom-nav-islands-row {
        display: flex;
        align-items: center;
        justify-content: stretch;
        gap: 10px;
        width: 100%;
        min-width: 0;
        overflow: visible;
        pointer-events: none;
    }
    /* Chat-Modus: etwas mehr Abstand links ↔ Mitte (Filter/Zurück vs. Tabs) */
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-islands-row {
        gap: 12px;
        align-items: center;
    }
    .mobile-bottom-nav-islands-row > * {
        pointer-events: auto;
    }
    /* Back/Continue: nur sichtbar auf Feedback-Seite oder wenn Feedback-Modal/Overlay offen */
    .mobile-bottom-nav-feedback-back-island,
    .mobile-bottom-nav-feedback-continue-island {
        display: none !important;
    }
    .mobile-bottom-nav-feedback .mobile-bottom-nav-feedback-back-island,
    .mobile-bottom-nav-feedback .mobile-bottom-nav-feedback-continue-island,
    body.feedback-modal-open .mobile-bottom-nav-feedback-back-island,
    body.feedback-modal-open .mobile-bottom-nav-feedback-continue-island {
        display: flex !important;
    }
    /* Such-Button ausblenden auf Feedback-Seite und wenn Feedback-Modal/Overlay offen */
    .mobile-bottom-nav-feedback .mobile-bottom-nav-search-island,
    body.feedback-modal-open .mobile-bottom-nav-search-island {
        display: none !important;
    }
    body.feedback-modal-open .mobile-bottom-nav-add-island,
    body.feedback-modal-open .mobile-bottom-nav-story-book-back-island,
    body.feedback-modal-open .mobile-bottom-nav-persons-quick,
    body.feedback-modal-open .mobile-bottom-nav-story-editor-left,
    body.feedback-modal-open .mobile-bottom-nav-story-editor-publish,
    body.feedback-modal-open .mobile-bottom-nav-tree-tools-wrap {
        display: none !important;
    }
    /* Feedback page: only hide search UI in center island (Back/Continue replace search island) */
    .mobile-bottom-nav-feedback .mobile-bottom-nav-search-input-wrap,
    .mobile-bottom-nav-feedback .mobile-bottom-nav-search-filter-btn {
        display: none !important;
    }
    /* Add links, Nav Mitte, Such rechts – eine Zeile; Wrap entfernt für Symmetrie */

    /* Gemeinsames Styling: gleiche Außenhöhe wie Top-Nav-Insel */
    .mobile-bottom-nav-island,
    .mobile-bottom-nav-feedback-back-island,
    .mobile-bottom-nav-feedback-continue-island {
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: var(--kinma-mbn-island-pad-y) var(--kinma-mbn-island-pad-x);
        min-height: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /*
     * Rechte Such-Insel: gleiches Framework wie .gallery-bottom-search-pill / .gallery-bottom-search-dock-Buttons
     * (--gallery-island-* setzt z. B. body.page-gallery .gallery-container; sonst Fallback wie in gallery.css).
     */
    .mobile-bottom-nav-search-island {
        pointer-events: auto;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        max-width: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        box-sizing: border-box;
        border-radius: 50%;
        color: #1a1a1a;
        background: var(--gallery-island-surface, #ffffff);
        border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.06));
        box-shadow: var(
            --gallery-island-shadow,
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 0 0 1px rgba(0, 0, 0, 0.05)
        );
        transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* Stammbaum-Seite: Launcher (immer); Zu mir + Minimap/Orientierung in Stack, nach oben einblendbar */
    .mobile-bottom-nav-tree-tools-wrap {
        flex-shrink: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
    }
    .mobile-bottom-nav-tree-tools-stack {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        z-index: 5;
        width: max-content;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 12px);
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    }
    .mobile-bottom-nav-tree-tools-wrap.tree-tools-expanded .mobile-bottom-nav-tree-tools-stack {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        pointer-events: auto;
    }

    /* Vertikale 10px-Schiene: gleiches Dunkelgrau wie aktiver Bottom-Nav-Tab (.mobile-bottom-nav-item.active → #1a1a1a) */
    .mobile-bottom-nav-tree-tools-wrap.tree-tools-expanded .mobile-bottom-nav-tree-tools-stack::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        top: 0;
        bottom: calc(-1 * (var(--kinma-mbn-island-height) + 8px));
        z-index: 0;
        pointer-events: none;
        box-sizing: border-box;
        border-radius: 5px;
        background: #1a1a1a !important;
        background-image: none !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

    .mobile-bottom-nav-tree-tools-wrap.tree-tools-expanded .mobile-bottom-nav-tree-tools-stack > * {
        position: relative;
        z-index: 1;
    }

    .mobile-bottom-nav-tree-tools-wrap.tree-tools-expanded .mobile-bottom-nav-tree-tools-launcher {
        position: relative;
        z-index: 6;
    }

    .mobile-bottom-nav-tree-tools-launcher {
        flex-shrink: 0;
        width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        line-height: 0;
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
        /* Wie Such-Insel: immer volle Weißfläche (kein Anthrazit im Dark Mode) */
        color: #1a1a1a;
        background: #ffffff;
        background-color: #ffffff;
        background-image: none;
        opacity: 1;
        border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.06));
        box-shadow: var(
            --gallery-island-shadow,
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 0 0 1px rgba(0, 0, 0, 0.05)
        );
        cursor: pointer;
    }
    /* Nur das „offen“-Icon stylen — sonst überschreibt display:block die display:none-Regel für .launcher-icon-close */
    .mobile-bottom-nav-tree-tools-launcher .mobile-bottom-nav-tree-tools-launcher-icon-open {
        display: block;
        flex-shrink: 0;
    }
    .mobile-bottom-nav-tree-tools-launcher:hover,
    .mobile-bottom-nav-tree-tools-launcher:focus-visible,
    .mobile-bottom-nav-tree-tools-launcher:active {
        background: #ffffff;
        background-color: #ffffff;
        background-image: none;
        opacity: 1;
        color: #1a1a1a;
        outline: none;
        border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.06));
        box-shadow: var(
            --gallery-island-shadow,
            0 8px 32px rgba(0, 0, 0, 0.14),
            0 0 0 1px rgba(0, 0, 0, 0.06)
        );
    }
    .mobile-bottom-nav-tree-tools-launcher-icon-close {
        display: none;
    }
    .mobile-bottom-nav-tree-tools-wrap.tree-tools-expanded .mobile-bottom-nav-tree-tools-launcher-icon-open {
        display: none;
    }
    .mobile-bottom-nav-tree-tools-wrap.tree-tools-expanded .mobile-bottom-nav-tree-tools-launcher-icon-close {
        display: block;
    }
    .mobile-bottom-nav-zu-mir-island,
    .mobile-bottom-nav-tree-aux-island {
        flex-shrink: 0;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        background: #ffffff;
        background-color: #ffffff;
        background-image: none;
        opacity: 1;
        border: 1px solid #e2e8f0;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
        color: #1a1a1a;
    }
    .mobile-bottom-nav-tree-tool-btn {
        width: var(--kinma-mbn-aux-btn);
        height: var(--kinma-mbn-aux-btn);
        min-width: var(--kinma-mbn-aux-btn);
        min-height: var(--kinma-mbn-aux-btn);
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #1a1a1a;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bottom-nav-tree-tool-btn:hover,
    .mobile-bottom-nav-tree-tool-btn:focus-visible {
        background: #f1f5f9;
        color: #1a1a1a;
    }
    .mobile-bottom-nav-tree-tool-btn.minimap-toggle.active {
        background: #1a1a1a;
        color: #fff;
    }
    .mobile-bottom-nav-tree-tool-btn svg {
        width: 20px;
        height: 20px;
        display: block;
    }
    .mobile-bottom-nav-tree-tool-btn .mobile-bottom-nav-minimap-icon {
        flex-shrink: 0;
    }
    .mobile-bottom-nav-tree-tool-btn .tree-zu-mir-waypoint-icon {
        width: 20px;
        height: 20px;
    }
    /* Rotations-Pfeile außen, Stammbaum-Icon innen (nur Inneres dreht per JS) */
    .mobile-bottom-nav-tree-tool-btn .tree-orientation-with-rotate {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
    }
    .mobile-bottom-nav-tree-tool-btn .tree-orientation-rotate-ring {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        pointer-events: none;
        opacity: 0.92;
    }
    .mobile-bottom-nav-tree-tool-btn .tree-orientation-toggle-stack .tree-orientation-toggle-icon {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
    }
    .mobile-bottom-nav-tree-tool-btn .tree-orientation-toggle-stack .tree-orientation-tree-icon {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Nav-Island: füllt den verfügbaren Platz zwischen den Nachbar-Buttons, keine max-width */
    .mobile-bottom-nav-island {
        flex: 1 1 0%;
        min-width: 0;
        width: 100%;
        justify-content: stretch;
        color: #1a1a1a;
        overflow: hidden;
        position: relative;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .mobile-bottom-nav-island::-webkit-scrollbar {
        display: none;
    }

    /* Äußere Pill-Hülle: Verläufe (::before/::after) bleiben am sichtbaren Rand, scrollt nur der innere Shell */
    .mobile-bottom-nav-items-scroll-fade-clip {
        flex: 1 1 0%;
        min-width: 0;
        align-self: stretch;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: stretch;
        border-radius: 9999px;
        overflow: hidden;
        background: #ffffff;
        margin-right: -2px;
        isolation: isolate;
    }

    .mobile-bottom-nav-items-scroll-shell {
        flex: 1 1 0%;
        min-width: 0;
        align-self: stretch;
        position: relative;
        z-index: 0;
        display: flex;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        background: transparent;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        -ms-overflow-style: auto;
    }

    .mobile-bottom-nav-items-scroll-shell::-webkit-scrollbar {
        height: 4px;
    }
    .mobile-bottom-nav-items-scroll-shell::-webkit-scrollbar-thumb {
        background: rgba(26, 26, 26, 0.28);
        border-radius: 4px;
    }

    /* Box mit Menü-Buttons: Breite = Inhalt (max-content), mindestens volle Pillenbreite */
    .mobile-bottom-nav-items {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        flex: 0 0 auto;
        width: max-content;
        min-width: 100%;
        min-height: 0;
        align-self: stretch;
        overflow: visible;
        position: relative;
        padding: 0;
        box-sizing: border-box;
    }

    /* Volle Pillenbreite, Inhalt schmaler: Einträge gleichmäßig (Klassen setzt JS wenn kein Horizontal-Scroll) */
    .mobile-bottom-nav-items-scroll-fade-clip.nav-items-balanced .mobile-bottom-nav-items {
        justify-content: space-evenly;
    }
    /* Trennlinie links vom Control-Panel: nur halbe Höhe, zentriert */
    .mobile-bottom-nav-control-panel-separator {
        flex-shrink: 0;
        width: 1px;
        align-self: center;
        height: 50%;
        min-height: 18px;
        max-height: 22px;
        margin: 0 2px;
        background: #cbd5e1;
        border-radius: 1px;
    }
    /* Control-Panel-Button außerhalb der Scrollview, immer sichtbar */
    .mobile-bottom-nav-control-panel-wrap {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px 0 0;
    }
    .mobile-bottom-nav-control-panel-wrap .mobile-bottom-nav-item {
        width: var(--kinma-mbn-btn);
        height: var(--kinma-mbn-btn);
        min-width: var(--kinma-mbn-btn);
        min-height: var(--kinma-mbn-btn);
        max-width: var(--kinma-mbn-btn);
        max-height: var(--kinma-mbn-btn);
    }

    /* Ohne Control-Panel: kein margin overlap rechts; links dichter an die Pillenkurve (rechts etwas Luft für Scroll-Fade) */
    @supports selector(:has(*)) {
        .mobile-bottom-nav-island:not(:has(.mobile-bottom-nav-control-panel-wrap)) .mobile-bottom-nav-items-scroll-fade-clip {
            margin-right: 0;
        }
        .mobile-bottom-nav-island:not(:has(.mobile-bottom-nav-control-panel-wrap)) .mobile-bottom-nav-items {
            padding-left: 0;
            padding-right: 0;
        }
    }

    .mobile-bottom-nav-item {
        flex-shrink: 0;
        touch-action: pan-x;
    }
    .mobile-bottom-nav-item.mobile-bottom-nav-item--disabled {
        opacity: 0.42;
        cursor: not-allowed;
        pointer-events: none;
        color: #94a3b8;
    }

    /* Extras-Button: Standard sichtbar; Disco/Kino/Library ausgeblendet. Nach Klick umgekehrt. */
    .mobile-bottom-nav-extras-group-item { display: none !important; }
    body.nav-extras-expanded .mobile-bottom-nav-extras-group-item { display: flex !important; }
    body.nav-extras-expanded .mobile-bottom-nav-extras-btn { display: none !important; }

    /* Vertikale Trennlinie vor Disco, wenn Extras ausgeblendet */
    .mobile-bottom-nav-extras-group-separator {
        display: none !important;
        flex-shrink: 0;
        width: 1px;
        align-self: center;
        height: 50%;
        min-height: 18px;
        max-height: 22px;
        margin: 0 2px 0 4px;
        background: #cbd5e1;
        border-radius: 1px;
    }
    body.nav-extras-expanded .mobile-bottom-nav-extras-group-separator {
        display: block !important;
    }

    /* Extras-Button: Ring per box-shadow — echte border würde bei border-box die Innenfläche schmälern (wirkt kleiner als <a>-Items) */
    .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn {
        border: none !important;
        box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.18) !important;
        box-sizing: border-box;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        margin: 0 !important;
        font: inherit !important;
        color: inherit !important;
        /* Echte Geräte: <button> + height:auto sonst anders als <a>-Nav (DevTools-Viewport täuscht oft) */
        width: var(--kinma-mbn-btn) !important;
        min-width: var(--kinma-mbn-btn) !important;
        max-width: var(--kinma-mbn-btn) !important;
        height: var(--kinma-mbn-btn) !important;
        min-height: var(--kinma-mbn-btn) !important;
        max-height: var(--kinma-mbn-btn) !important;
    }
    .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn:focus {
        outline: none;
    }
    .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn:focus-visible {
        outline: 2px solid currentColor !important;
        outline-offset: 2px;
    }

    /* Einklappen: nur kleines Chevron, weniger Fläche als Standard-Nav-Items */
    .mobile-bottom-nav-extras-collapse-btn {
        width: var(--kinma-mbn-extras-collapse) !important;
        height: var(--kinma-mbn-extras-collapse) !important;
        min-width: var(--kinma-mbn-extras-collapse) !important;
        min-height: var(--kinma-mbn-extras-collapse) !important;
        border-radius: 0 !important;
        padding: 2px !important;
        gap: 0 !important;
    }

    .mobile-bottom-nav-extras-collapse-btn svg {
        width: calc(var(--kinma-mbn-extras-collapse) * 0.5) !important;
        height: calc(var(--kinma-mbn-extras-collapse) * 0.5) !important;
    }

    /* Scroll-Handle: Mobile ausgeblendet */
    .mobile-bottom-nav-scroll-handle {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Weicher Rand-Schatten in der Scroll-Pill: sanfter Verlauf (keine harte Kante) + opacity-Einblendung */
    .mobile-bottom-nav-items {
        z-index: 0;
    }
    .mobile-bottom-nav-items-scroll-fade-clip::before,
    .mobile-bottom-nav-items-scroll-fade-clip::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 48px;
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.38s ease;
        /* Leicht in die Rundung ziehen + eigene Kante, weniger Subpixel-Lücken */
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .mobile-bottom-nav-items-scroll-fade-clip::before {
        left: -1px;
        width: 49px;
        border-radius: 9999px 0 0 9999px;
        background: linear-gradient(
            to right,
            #ffffff 0%,
            #ffffff 10%,
            rgba(255, 255, 255, 0.94) 22%,
            rgba(255, 255, 255, 0.78) 38%,
            rgba(255, 255, 255, 0.48) 58%,
            rgba(255, 255, 255, 0.2) 78%,
            rgba(255, 255, 255, 0.06) 91%,
            rgba(255, 255, 255, 0) 100%
        );
    }
    .mobile-bottom-nav-items-scroll-fade-clip::after {
        right: -1px;
        width: 49px;
        border-radius: 0 9999px 9999px 0;
        background: linear-gradient(
            to left,
            #ffffff 0%,
            #ffffff 10%,
            rgba(255, 255, 255, 0.94) 22%,
            rgba(255, 255, 255, 0.78) 38%,
            rgba(255, 255, 255, 0.48) 58%,
            rgba(255, 255, 255, 0.2) 78%,
            rgba(255, 255, 255, 0.06) 91%,
            rgba(255, 255, 255, 0) 100%
        );
    }
    .mobile-bottom-nav-items-scroll-fade-clip.has-scroll:not(.at-start)::before {
        opacity: 1;
    }
    .mobile-bottom-nav-items-scroll-fade-clip.has-scroll:not(.at-end)::after {
        opacity: 1;
    }

    /* Suchmodus: Nav-Items ausblenden, Eingabefeld in der Nav-Island anzeigen */
    .mobile-bottom-nav-search-input-wrap {
        display: none;
        flex: 1;
        min-width: 0;
        padding: 0 4px;
        align-items: center;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-items-scroll-fade-clip {
        display: none !important;
    }

    /* Suchmodus: Control-Panel (Zahnrad) und Trennlinie ausblenden – nur Suche + Schließen */
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-control-panel-separator,
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-control-panel-wrap {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Im Suchmodus: Filter links neben der Eingabeleiste (nicht innerhalb). Island nur noch Container. */
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-island {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0;
    }

    /* Filter-Kreis + Suchpille: Mitte-Insel clippt sonst unnötig (overflow war für die Scroll-Pill; die ist im Suchmodus aus) */
    .mobile-bottom-nav.is-search-mode:not(.chat-mode) .mobile-bottom-nav-island-with-label,
    .mobile-bottom-nav.is-search-mode:not(.chat-mode) .mobile-bottom-nav-island {
        overflow: visible;
    }

    /* Filter-Kreis immer visuell links von der Suchpille (auch wenn im DOM andere Knoten dazwischen liegen) */
    .mobile-bottom-nav.is-search-mode:not(.chat-mode) .mobile-bottom-nav-search-filter-btn {
        order: -1;
    }

    /* Stammbaum: kein Filter-Kreis — links sitzt der Werkzeug-Launcher (s. tree-tools-wrap), sobald KI-Treffer da sind */
    #mobile-bottom-nav[data-page="index"].is-search-mode .mobile-bottom-nav-search-filter-btn {
        display: none !important;
    }

    /* KI-Suche aktiv: kein Filter-Button (während RGB-/Pastell-Pille und Treffern) — andere Seiten */
    #mobile-bottom-nav.is-search-mode:has(.mobile-bottom-nav-search--ai-active):not([data-page="index"]) .mobile-bottom-nav-search-filter-btn {
        display: none !important;
    }

    /* Suchtext-Clear (X in der Pille): im Mobil-Suchmodus nur bei Eingabe sichtbar */
    #mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-input-wrap .kinma-search-clear-wrap.kinma-search-clear--empty .kinma-search-clear-btn-inner {
        display: none !important;
        pointer-events: none;
    }

    /*
     * KI-Bewertung: Host in #mobile-bottom-nav-search-pill (position: relative). Über der Suchpille (bottom: 100%),
     * zur Pille horizontal zentriert — Daumen sitzen optisch über der Bar, nicht seitlich versetzt.
     */
    .mobile-bottom-nav-search-ai-rating-host {
        display: none;
        position: absolute;
        left: 50%;
        right: auto;
        top: auto;
        bottom: 100%;
        margin-bottom: 6px;
        transform: translateX(-50%);
        z-index: 9;
        width: auto;
        max-width: calc(100% - 16px);
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        flex-shrink: 0;
        box-sizing: border-box;
        overflow: visible;
        pointer-events: none;
    }

    #mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active:not(
            .mobile-bottom-nav-search-input-wrap--ai-busy
        )
        .mobile-bottom-nav-search-ai-rating-host:has(.kinma-ai-search-pill__rating:not([hidden])) {
        display: flex;
    }

    .mobile-bottom-nav-search-ai-rating-host .kinma-ai-search-pill__rating {
        overflow: visible;
        max-width: 100%;
        pointer-events: auto;
    }

    .mobile-bottom-nav-search-ai-rating-host .kinma-ai-search-pill__rating-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    /* Nur Daumen auf der Pille — Untertitel würde horizontal zu viel brauchen */
    .mobile-bottom-nav-search-ai-rating-host .kinma-ai-search-pill__rating-sublabel {
        display: none !important;
    }

    .mobile-bottom-nav-search-ai-rating-host .kinma-ai-search-pill__rating-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .mobile-bottom-nav-search-ai-rating-host .kinma-ai-search-pill__rating-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .mobile-bottom-nav-search-ai-rating-host .kinma-ai-search-pill__rating-btn svg {
        width: 17px;
        height: 17px;
    }

    .mobile-bottom-nav.is-search-mode:not(.chat-mode) .mobile-bottom-nav-search-input-wrap {
        order: 0;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-input-wrap {
        display: flex !important;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background: transparent !important;
        border: none !important;
        border-radius: 0;
        box-shadow: none !important;
        box-sizing: border-box;
        /* Wie .tree-search-wrapper (modules/tree.css): keine separaten Mobile-Kurven/Zeiten */
        transition:
            width 0.38s ease,
            min-width 0.38s ease,
            max-width 0.38s ease,
            padding 0.38s ease,
            border-radius 0.38s ease,
            height 0.38s ease,
            min-height 0.38s ease;
    }

    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap:not(.mobile-bottom-nav-search--ai-active):not(.mobile-bottom-nav-search-input-wrap--ai-busy) {
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
    }

    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active:not(.mobile-bottom-nav-search-input-wrap--ai-busy) {
        position: relative;
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
    }

    /* Sichtbare Suchpille wie Desktop (.gallery-desktop-search-inner: gap 4px, padding 4px 14px) */
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill:not(.kinma-ai-search-pill--ai-active):not(.kinma-ai-search-pill--ai-busy) {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: stretch;
        height: 100%;
        border-radius: 9999px;
        background: var(--gallery-island-surface, #ffffff);
        border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.06));
        box-shadow: var(
            --gallery-island-shadow,
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 0 0 1px rgba(0, 0, 0, 0.05)
        );
        box-sizing: border-box;
        overflow: hidden;
    }

    /*
     * KI-Pille: RGB-Halo = kinma-ai-search-pill.css (::before + blur). Mobile: dort eigener Block
     * (.mobile-bottom-nav.is-search-mode … ::before) — breite Kapsel braucht mehr horizontalen Überstand.
     * Hier nur leichter Tiefen-Schatten + Rand; overflow: visible damit nichts den Halo clippt.
     */
    /*
     * Morph Pille → Kreis: nur min/max-width interpolieren (0.38s). width:100% → width:auto springt ohne Transition;
     * daher durchgehend width:auto + flex:1 1 0% — Auszug und Busy nutzen dieselbe Logik wie der Block unten (--ai-busy).
     */
    /* Layout nur — KI-Verlauf, ::before-Halo und keyframe-Animation: kinma-ai-search-pill.css (wie Desktop) */
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy) {
        flex: 1 1 0%;
        min-width: 0;
        width: auto;
        max-width: 100%;
        display: flex;
        align-items: stretch;
        height: 100%;
        border-radius: 9999px;
        box-sizing: border-box;
        overflow: visible;
        /* Pastell-RGB als 3px-Rand (padding-box weiß) — kinma-ai-search-pill.css */
    }

    /* Morph wie .tree-search-wrapper: dieselben Properties + 0,38s ease (modules/tree.css) */
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill {
        position: relative;
        transition:
            width 0.38s ease,
            min-width 0.38s ease,
            max-width 0.38s ease,
            padding 0.38s ease,
            border-radius 0.38s ease,
            height 0.38s ease,
            min-height 0.38s ease;
    }

    /*
     * KI aktiv: Morph Pille ↔ Lade-Kreis wie Desktop (.tree-search-wrapper in modules/tree.css: 0,38s ease).
     */
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active {
        transition: width 0.38s ease, min-width 0.38s ease, max-width 0.38s ease, padding 0.38s ease, height 0.38s ease, min-height 0.38s ease, max-height 0.38s ease;
    }

    /*
     * KI-Busy: Erst Pille → Kreis (kinma-ai-search-pill--ai-busy), Wrap--ai-busy erst per JS verzögert.
     * Sonst kollabieren rechte Such-Insel / Filter sofort → Flex-Breite springt, max-width-Transition entfällt.
     */
    /* KI aktiv: kein Fade/Transition beim Kontext löschen (Pfad, Clear, Innenzeile) */
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active
        .kinma-search-clear-wrap,
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active
        .kinma-search-clear-btn-inner,
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active
        .mobile-bottom-nav-path-field,
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active
        .mobile-bottom-nav-path-prefix,
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active
        .mobile-bottom-nav-path-input,
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active
        .mobile-bottom-nav-profile-family-field,
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active
        .mobile-bottom-nav-search-input,
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active
        .kinma-ai-search-pill__inner,
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active
        .mobile-bottom-nav-search-pill__inner {
        transition: none !important;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill__inner {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 4px;
        min-width: 0;
        min-height: 0;
        padding: 4px 14px;
        box-sizing: border-box;
    }

    /* KI: gleiche Innenabstände wie Nicht-KI-Pille (4px 14px); Clear-Input behält padding-right 2.25rem (search-input-clear.css) */
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-search-pill__inner {
        padding: 4px 14px;
        box-sizing: border-box;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill__inner-right {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        margin-left: auto;
        gap: 6px;
        padding-left: 4px;
        padding-right: 2px;
        overflow: visible;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill__inner-right:not(:has(.mobile-bottom-nav-tree-ai-match-btn)) {
        display: none;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill .kinma-ai-search-pill__search-icon {
        flex-shrink: 0;
        color: #64748b;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill__inner > .mobile-bottom-nav-search-input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: auto;
        padding: 8px 4px;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill__inner .mobile-bottom-nav-profile-family-field {
        flex: 1 1 auto;
        min-width: 0;
    }

    /*
     * KI aktiv (Wrap nicht im kompakten Busy-Modus): Pille horizontal zentrieren — auch während Expand nach Treffern,
     * wenn --ai-busy von der Pille fällt (Transition) und :has(.kinma-ai-search-pill--ai-busy) nicht mehr greift.
     * Sonst wächst max-width vom Busy-Kreis (Inselhöhe) → 100% vom linken Wrap-Rand und wirkt „nach links“ statt symmetrisch wie Desktop.
     */
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active:not(.mobile-bottom-nav-search-input-wrap--ai-busy) {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0;
        overflow: visible !important;
        /* Wie Desktop: kein Zusatz-Inset — Abstände nur über Pille (.tree-search-wrapper + .tree-search-inner) */
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        min-height: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-input-wrap {
            transition: none;
        }

        .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active {
            transition: none;
        }

        .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill {
            transition: none;
        }

        .mobile-bottom-nav.is-search-mode
            .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy
            .kinma-ai-search-pill__inner {
            animation: none !important;
            /* kinma-ai-search-pill.css blendet __inner bei Busy nur außerhalb .mobile-bottom-nav-search-pill aus — hier Endzustand ohne Morph. */
            visibility: hidden !important;
            opacity: 0 !important;
            position: absolute !important;
            inset: 0 !important;
            pointer-events: none !important;
            overflow: hidden !important;
        }
    }

    /* KI-Verlauf/Spinner: prefers-reduced-motion → kinma-ai-search-pill.css (@media) */

    /* Lade-Kreis: Mitte-Insel — bei wrap--ai-busy (Start-Morph hat erst verzögert Layout, sonst entfällt die Bar→Kreis-Animation) */
    #mobile-bottom-nav.is-search-mode .mobile-bottom-nav-island:has(.mobile-bottom-nav-search-input-wrap--ai-busy) {
        justify-content: center !important;
        min-height: var(--kinma-mbn-island-height) !important;
    }

    /* Nach Treffern: wrap--ai-busy ist schon weg, Pille noch Kreis — JS setzt .mobile-bottom-nav--mb-ai-expand-phase */
    #mobile-bottom-nav.is-search-mode.mobile-bottom-nav--mb-ai-expand-phase .mobile-bottom-nav-island:has(
            #mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy
        ) {
        justify-content: center !important;
        min-height: var(--kinma-mbn-island-height) !important;
    }

    /*
     * KI-Busy (wrap): Zeile zentrieren + Zusatz-Inseln aus — erst wenn wrap--ai-busy (nach verzögertem Layout beim Start).
     */
    #mobile-bottom-nav.is-search-mode:has(.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-islands-row {
        justify-content: center !important;
        gap: 0 !important;
    }

    #mobile-bottom-nav.is-search-mode.mobile-bottom-nav--mb-ai-expand-phase:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-islands-row {
        justify-content: center !important;
        gap: 0 !important;
    }

    #mobile-bottom-nav.is-search-mode:has(.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-add-island,
    #mobile-bottom-nav.is-search-mode:has(.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-profile-edit-island,
    #mobile-bottom-nav.is-search-mode:has(.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-filter-btn {
        display: none !important;
    }

    #mobile-bottom-nav.is-search-mode.mobile-bottom-nav--mb-ai-expand-phase:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-add-island,
    #mobile-bottom-nav.is-search-mode.mobile-bottom-nav--mb-ai-expand-phase:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-profile-edit-island,
    #mobile-bottom-nav.is-search-mode.mobile-bottom-nav--mb-ai-expand-phase:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-search-filter-btn {
        display: none !important;
    }

    /*
     * KI läuft: Schließen-Kreis sofort ohne Animation — sobald Pille --ai-busy (sofort beim Start),
     * nicht erst wenn wrap --ai-busy (kommt verzögert für den Morph).
     */
    #mobile-bottom-nav.is-search-mode:has(.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-close,
    #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy) .mobile-bottom-nav-search-close,
    #mobile-bottom-nav.is-search-mode.mobile-bottom-nav--mb-ai-hold-search-close .mobile-bottom-nav-search-close {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: none !important;
    }

    /* Stammbaum: linker Werkzeug-Launcher neben der Pille während KI-Laden aus (rechts X+Spinner reicht) */
    #mobile-bottom-nav[data-page="index"].is-search-mode:has(.mobile-bottom-nav-search-input-wrap--ai-busy)
        .mobile-bottom-nav-tree-tools-wrap,
    #mobile-bottom-nav[data-page="index"].is-search-mode:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-tree-tools-wrap,
    #mobile-bottom-nav[data-page="index"].is-search-mode.mobile-bottom-nav--mb-ai-hold-search-close
        .mobile-bottom-nav-tree-tools-wrap {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: none !important;
    }

    #mobile-bottom-nav.is-search-mode:has(.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-island-with-label {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    #mobile-bottom-nav.is-search-mode.mobile-bottom-nav--mb-ai-expand-phase:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-island-with-label {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    /*
     * Morph-Start (Pille --ai-busy, wrap--ai-busy noch nicht): rechte Such-Insel nur unsichtbar — Flex-Maße bleiben,
     * damit die Suchleiste→Kreis-Transition Platz und max-width interpolieren kann.
     */
    #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy):not(
            :has(.mobile-bottom-nav-search-input-wrap--ai-busy)
        ):not(.mobile-bottom-nav--mb-ai-expand-phase)
        .mobile-bottom-nav-search-island {
        background: transparent !important;
        border-color: transparent !important;
        border-width: 0 !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: none !important;
    }

    #mobile-bottom-nav.is-search-mode:has(.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }

    #mobile-bottom-nav.is-search-mode.mobile-bottom-nav--mb-ai-expand-phase:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-search-island {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }

    /*
     * KI-Busy: wie Desktop/Stammbaum — .kinma-ai-search-pill__busy-layer sitzt *in* der Pille (kinma-ai-search-pill.css);
     * die Pille morpht per .kinma-ai-search-pill--ai-busy. Kein position:fixed am Wrap — sonst entfällt die Transition.
     */
    .mobile-bottom-nav-search-input-wrap--ai-busy {
        display: flex !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        bottom: auto !important;
        top: auto !important;
        z-index: auto !important;
        pointer-events: auto !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .mobile-bottom-nav-search-input-wrap--ai-busy .mobile-bottom-nav-search-ai-rating-host {
        display: none !important;
    }

    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active.mobile-bottom-nav-search-input-wrap--ai-busy {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        animation: none !important;
    }

    .mobile-bottom-nav-search-input-wrap--ai-busy .mobile-bottom-nav-search-input,
    .mobile-bottom-nav-search-input-wrap--ai-busy .mobile-bottom-nav-path-input,
    .mobile-bottom-nav-search-input-wrap--ai-busy .mobile-bottom-nav-profile-family-field,
    .mobile-bottom-nav-search-input-wrap--ai-busy .mobile-bottom-nav-tree-ai-match-btn {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    .mobile-bottom-nav-search-input-wrap--ai-busy .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy {
        align-self: center;
    }

    /*
     * Morph: globales kinma-ai-search-pill--ai-busy nutzt flex:0 0 54px — flex interpoliert schlecht und wirkt abgehackt.
     * Gleiches Flex-Verhalten wie ausgezogen, Breite nur über min/max-width (interpoliert zuverlässig).
     * Busy-Durchmesser = Zeilenhöhe (Such-Wrap), gleich mobiler Inselhöhe.
     */
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: var(--kinma-mbn-island-height) !important;
        max-width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy {
        flex: 1 1 0% !important;
        width: auto !important;
        max-width: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
    }

    /* Sichtbarer Morph: Inneninhalt blendet mit der 0,38s-Pille aus statt per kinma sofort unsichtbar. */
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy
        .kinma-ai-search-pill__inner {
        visibility: visible;
        animation: kinma-mb-ai-pill-inner-morph-fade 0.38s ease forwards !important;
    }

    /*
     * Wie modules/tree.css (.tree-search-compose:has(.tree-search-wrapper--ai-busy) + .tree-search-hit-row width: fit-content):
     * Solange die Pille noch Kreis ist, das Wrap-Busy aber schon weg ist (Morph-Ende / mb-ai-expand-phase),
     * darf der Wrap nicht die volle Inselbreite füllen — sonst wirkt der Ladekreis links und springt beim Aufklappen.
     */
    #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active:not(
            .mobile-bottom-nav-search-input-wrap--ai-busy
        ) {
        flex: 0 1 auto !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Dieselbe Phase: Mittel-Insel zentrieren (ohne Stammbaum-Add links wirkt die Zeile sonst asymmetrisch). */
    #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy):not(
            :has(.mobile-bottom-nav-search-input-wrap--ai-busy)
        )
        #mobile-bottom-nav-island,
    #mobile-bottom-nav.is-search-mode.mobile-bottom-nav--mb-ai-expand-phase:has(
            #mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy
        )
        #mobile-bottom-nav-island {
        justify-content: center !important;
    }

    /* KI-Busy __inner: kinma-ai-search-pill.css (wie Desktop), kein display:none — sonst abweichendes Verhalten */

    /* Filter-Button links von der Eingabeleiste, eigener Kreis (außerhalb des Inputs) */
    .mobile-bottom-nav-search-filter-btn {
        flex-shrink: 0;
        width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
        box-sizing: border-box;
        background: var(--gallery-island-surface, #ffffff) !important;
        border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.06));
        box-shadow: var(
            --gallery-island-shadow,
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 0 0 1px rgba(0, 0, 0, 0.05)
        );
        color: #1a1a1a;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav-search-filter-btn:hover,
    .mobile-bottom-nav-search-filter-btn:focus-visible {
        background: rgba(0, 0, 0, 0.06) !important;
    }

    .mobile-bottom-nav-search-filter-btn svg {
        width: 22px;
        height: 22px;
    }

    /* Nav-Buttons: wie Top-Nav — 95 % der Innenhöhe (px, nicht em) */
    .mobile-bottom-nav-item {
        flex-shrink: 0;
        width: var(--kinma-mbn-btn);
        height: var(--kinma-mbn-btn);
        min-width: var(--kinma-mbn-btn);
        min-height: var(--kinma-mbn-btn);
        max-width: var(--kinma-mbn-btn);
        max-height: var(--kinma-mbn-btn);
        aspect-ratio: 1 / 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 0;
        border: none;
        border-radius: 9999px;
        overflow: hidden;
        background: transparent !important;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        box-shadow: none !important;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav-item:hover,
    .mobile-bottom-nav-item:focus-visible {
        background: rgba(0, 0, 0, 0.06) !important;
        box-shadow: none !important;
    }

    .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn:hover,
    .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn:focus-visible {
        box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.18) !important;
    }

    .mobile-bottom-nav-item.active {
        background: #1a1a1a !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .mobile-bottom-nav-item.active:hover,
    .mobile-bottom-nav-item.active:focus-visible {
        background: #1a1a1a !important;
    }

    .mobile-bottom-nav-item svg {
        width: calc(var(--kinma-mbn-btn) * 0.4);
        height: calc(var(--kinma-mbn-btn) * 0.4);
        max-width: 22px;
        max-height: 22px;
        flex-shrink: 0;
    }

    .mobile-bottom-nav-item .mobile-nav-item-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: var(--kinma-mobile-island-sublabel-fs, 9px);
        line-height: var(--kinma-mobile-island-sublabel-lh, 1.15);
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        opacity: 0.9;
        pointer-events: none;
        align-self: center;
        padding: 0 2px;
        box-sizing: border-box;
    }

    .mobile-bottom-nav-item.active .mobile-nav-item-label {
        font-weight: 700;
    }

    .mobile-bottom-nav-chat-ai-btn .mobile-nav-item-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: var(--kinma-mobile-island-sublabel-fs, 9px);
        line-height: var(--kinma-mobile-island-sublabel-lh, 1.15);
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        opacity: 0.9;
        pointer-events: none;
        align-self: center;
        padding: 0 2px;
        box-sizing: border-box;
    }

    .mobile-bottom-nav-chat-ai-btn.active .mobile-nav-item-label {
        font-weight: 700;
    }

    .mobile-bottom-nav-item .mobile-nav-item-label-track {
        display: inline-block;
        white-space: nowrap;
    }

    .mobile-bottom-nav-chat-ai-btn .mobile-nav-item-label-track {
        display: inline-block;
        white-space: nowrap;
    }

    @keyframes mobile-bottom-nav-label-marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-33.3333%); }
    }

    .mobile-bottom-nav-item.mobile-label-marquee .mobile-nav-item-label-track {
        animation: mobile-bottom-nav-label-marquee 6s linear infinite;
    }

    .mobile-bottom-nav-chat-ai-btn.mobile-label-marquee .mobile-nav-item-label-track {
        animation: mobile-bottom-nav-label-marquee 6s linear infinite;
    }

    /* Feedback page: Back / Weiter – compact pill islands */
    .mobile-bottom-nav-feedback-back-island,
    .mobile-bottom-nav-feedback-continue-island {
        flex-shrink: 0;
        padding: 0 4px;
        min-width: 0;
        border-radius: 9999px;
        color: #1a1a1a;
    }
    .mobile-bottom-nav-feedback-back-island {
        padding-left: 6px;
        padding-right: 8px;
    }
    .mobile-bottom-nav-feedback-continue-island {
        padding-left: 8px;
        padding-right: 6px;
    }
    .mobile-bottom-nav-feedback-back-btn,
    .mobile-bottom-nav-feedback-continue-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 36px;
        padding: 6px 8px;
        border: none;
        border-radius: 9999px;
        background: transparent;
        color: inherit;
        font-size: 0.8125rem;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .mobile-bottom-nav-feedback-back-btn:hover,
    .mobile-bottom-nav-feedback-back-btn:focus-visible,
    .mobile-bottom-nav-feedback-continue-btn:hover,
    .mobile-bottom-nav-feedback-continue-btn:focus-visible {
        background: rgba(0, 0, 0, 0.06);
    }
    .mobile-bottom-nav-feedback-back-btn:disabled,
    .mobile-bottom-nav-feedback-continue-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }
    .mobile-bottom-nav-feedback-back-btn:disabled:hover,
    .mobile-bottom-nav-feedback-back-btn:disabled:focus-visible,
    .mobile-bottom-nav-feedback-continue-btn:disabled:hover,
    .mobile-bottom-nav-feedback-continue-btn:disabled:focus-visible {
        background: transparent;
    }
    /* Weiter-Button: dunkles Grau wie überall, Text weiß */
    .mobile-bottom-nav-feedback-continue-island {
        background: #1a1a1a !important;
        border-color: #1a1a1a !important;
        color: #fff !important;
    }
    .mobile-bottom-nav-feedback-continue-btn {
        color: #fff !important;
    }
    .mobile-bottom-nav-feedback-continue-btn:hover:not(:disabled),
    .mobile-bottom-nav-feedback-continue-btn:focus-visible:not(:disabled) {
        background: rgba(255, 255, 255, 0.12) !important;
    }
    .mobile-bottom-nav-feedback-back-btn svg,
    .mobile-bottom-nav-feedback-continue-btn svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    /* Annotation-Werkzeuge in der Bottom-Nav-Island (nur Mobil, wenn Feedback-Modal im Zeichen-Schritt) */
    .mobile-bottom-nav-annotation-tools {
        display: none !important;
        flex-direction: row;
        align-items: center;
        gap: 0;
        flex-wrap: nowrap;
        padding: 0 6px;
        width: 100%;
        min-width: 0;
    }
    body.feedback-annotation-step .mobile-bottom-nav-annotation-tools {
        display: flex !important;
    }
    /* Werkzeuge scrollbar, Trennlinie + Farb-Button immer rechts sichtbar */
    .mobile-annotation-tools-scroll {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        flex: 1 1 0%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 2px;
    }
    .mobile-annotation-tools-scroll::-webkit-scrollbar {
        display: none;
    }
    .mobile-annotation-tools-divider,
    .mobile-annotation-color-btn {
        flex-shrink: 0;
    }
    body.feedback-annotation-step .mobile-bottom-nav-items-scroll-fade-clip,
    body.feedback-annotation-step .mobile-bottom-nav-items,
    body.feedback-annotation-step .mobile-bottom-nav-chat-items {
        display: none !important;
    }
    body.feedback-annotation-step .mobile-bottom-nav-search-input-wrap,
    body.feedback-annotation-step .mobile-bottom-nav-search-filter-btn {
        display: none !important;
    }
    .mobile-bottom-nav-annotation-tools .annotation-tool-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #1a1a1a;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }
    .mobile-bottom-nav-annotation-tools .annotation-tool-btn:hover,
    .mobile-bottom-nav-annotation-tools .annotation-tool-btn:focus-visible {
        background: #f1f5f9;
    }
    /* Ausgewählter Knopf: Trennlinie links */
    .mobile-bottom-nav-annotation-tools .annotation-tool-btn.active {
        background: #1a1a1a;
        color: #fff;
        margin-left: 2px;
    }
    .mobile-bottom-nav-annotation-tools .annotation-tool-btn.active::before {
        content: '';
        position: absolute;
        left: -5px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 24px;
        background: #e2e8f0;
        border-radius: 0;
    }
    .mobile-bottom-nav-annotation-tools .annotation-tool-btn svg {
        width: 22px;
        height: 22px;
    }

    /* Trennlinie links vom Farb-Button (zwischen Tools und Farbe) */
    .mobile-annotation-tools-divider {
        width: 1px;
        height: 28px;
        background: #cbd5e1;
        flex-shrink: 0;
        margin: 0 6px 0 4px;
    }

    /* Farb-Button rechts in der Island */
    .mobile-annotation-color-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 2px #e2e8f0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-annotation-color-btn:hover,
    .mobile-annotation-color-btn:focus-visible {
        box-shadow: 0 0 0 2px #cbd5e1;
        transform: scale(1.05);
    }
    .mobile-annotation-color-btn-swatch {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    }

    /* Popover für Farbauswahl über dem Farb-Button */
    .annotation-color-popover {
        display: none;
        position: fixed;
        z-index: 10010;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.18);
        padding: 16px;
        border: 1px solid #e2e8f0;
    }
    .annotation-color-popover.is-open {
        display: block;
    }
    .annotation-color-popover .annotation-color-sidebar {
        margin-left: 0;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    /* Im Modal: Seitenleiste mit Werkzeugen auf Mobil ausblenden, wenn Werkzeuge in der Bottom-Nav sind */
    body.feedback-annotation-step .annotation-tools-sidebar {
        display: none !important;
    }

    /* Im Modal: Farbinsel rechts auf Mobil ausblenden (Farbauswahl nur über Bottom-Nav-Button + Popover) */
    body.feedback-annotation-step .annotation-color-island {
        display: none !important;
    }

    /* Add-Button-Insel: gleiches Dunkelgrau wie aktiver Nav-Button (#1a1a1a) in allen Menüs */
    .mobile-bottom-nav-add-island {
        flex-shrink: 0;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        max-width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        background: #1a1a1a !important;
        border: 1px solid #1a1a1a !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
        color: #fff !important;
    }

    .mobile-bottom-nav-add-btn {
        width: var(--kinma-mbn-aux-btn);
        height: var(--kinma-mbn-aux-btn);
        min-width: var(--kinma-mbn-aux-btn);
        min-height: var(--kinma-mbn-aux-btn);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 9999px;
        background: transparent !important;
        color: #fff !important;
        cursor: pointer;
        box-shadow: none !important;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        text-decoration: none;
    }

    .mobile-bottom-nav-add-btn:hover,
    .mobile-bottom-nav-add-btn:focus-visible {
        background: rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
    }

    .mobile-bottom-nav-add-btn svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Geschichten: Zurück aus dem Buch — gleicher Kreis wie Add-Insel (nur sichtbar ohne [hidden]) */
    .mobile-bottom-nav-story-book-back-island[hidden] {
        display: none !important;
    }

    .mobile-bottom-nav-story-book-back-island:not([hidden]) {
        flex-shrink: 0;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        max-width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        background: #1a1a1a !important;
        border: 1px solid #1a1a1a !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
        color: #fff !important;
    }

    body.kinma-story-book-mobile-open .mobile-bottom-nav-add-island {
        display: none !important;
    }

    /* Buch lesen: Kapitel-/Seiten-Steuerung in der Mitte-Insel statt separater schwebender Leiste */
    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-items-scroll-fade-clip {
        display: none !important;
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-control-panel-separator,
    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-control-panel-wrap {
        display: none !important;
    }

    /* Buch lesen: Kapitel über mittleren Text in der Pille; Hamburger ausgeblendet */
    .mobile-bottom-nav-story-book-chapters-btn {
        display: none;
        align-items: center;
        justify-content: center;
        width: var(--kinma-mbn-aux-btn);
        height: var(--kinma-mbn-aux-btn);
        min-width: var(--kinma-mbn-aux-btn);
        min-height: var(--kinma-mbn-aux-btn);
        padding: 0;
        border-radius: 9999px;
        background: #1a1a1a !important;
        border: 1px solid #1a1a1a !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
        color: #fff !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }

    .mobile-bottom-nav-story-book-chapters-btn:hover,
    .mobile-bottom-nav-story-book-chapters-btn:focus-visible {
        background: #2a2a2a !important;
    }

    .mobile-bottom-nav-story-book-chapters-btn svg {
        flex-shrink: 0;
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-story-book-chapters-btn {
        display: none !important;
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__chapters-hit:hover,
    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__chapters-hit:focus-visible {
        background: rgba(26, 26, 26, 0.07);
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-search-btn {
        display: none !important;
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-search-close {
        display: none !important;
    }

    .mobile-bottom-nav-book-inbook-search-btn {
        display: none;
        align-items: center;
        justify-content: center;
        width: var(--kinma-mbn-aux-btn);
        height: var(--kinma-mbn-aux-btn);
        min-width: var(--kinma-mbn-aux-btn);
        min-height: var(--kinma-mbn-aux-btn);
        padding: 0;
        border-radius: 9999px;
        background: #1a1a1a !important;
        border: 1px solid #1a1a1a !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
        color: #fff !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }

    .mobile-bottom-nav-book-inbook-search-btn:hover,
    .mobile-bottom-nav-book-inbook-search-btn:focus-visible {
        background: #2a2a2a !important;
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-inbook-search-btn:not([hidden]) {
        display: flex !important;
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-inbook-search-btn[hidden] {
        display: none !important;
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-inbook-search-btn--open {
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45), 0 -2px 12px rgba(0, 0, 0, 0.2);
    }

    /* Lesezeichen sitzt über der weißen Pille: gemeinsame Unterkante mit den Seiten-Kreisen */
    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-islands-row {
        align-items: flex-end;
    }

    body.dark-mode #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__chapters-hit:hover,
    body.dark-mode #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__chapters-hit:focus-visible,
    [data-theme="dark"] #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__chapters-hit:hover,
    [data-theme="dark"] #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__chapters-hit:focus-visible {
        background: rgba(255, 255, 255, 0.1);
    }

    body.dark-mode #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-inbook-search-btn,
    [data-theme="dark"] #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-inbook-search-btn {
        background: #1a1a1a !important;
        border-color: rgba(148, 163, 184, 0.35) !important;
        color: #f1f5f9 !important;
    }

    body.dark-mode #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-inbook-search-btn:hover,
    body.dark-mode #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-inbook-search-btn:focus-visible,
    [data-theme="dark"] #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-inbook-search-btn:hover,
    [data-theme="dark"] #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-inbook-search-btn:focus-visible {
        background: #1a1a1a !important;
    }

    .mobile-bottom-nav-book-toolbar-host:not([hidden]) {
        flex: 1 1 0%;
        min-width: 0;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        align-self: flex-end;
        position: relative;
        z-index: 1;
        margin-right: -2px;
        background: transparent;
        box-sizing: border-box;
        overflow: visible;
        padding: 0;
        gap: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        isolation: auto;
    }

    .mobile-bottom-nav-book-toolbar-pill {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2px;
        box-sizing: border-box;
        border-radius: 9999px;
        background: #ffffff;
        overflow: hidden;
        isolation: isolate;
        padding: 0 4px;
    }

    #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        z-index: auto !important;
        max-width: 100% !important;
        width: auto !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 4px 6px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        pointer-events: auto;
    }

    #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__pager--chapter-page {
        gap: 4px;
    }

    #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__btn {
        min-width: 36px;
        min-height: 36px;
        padding: 0 8px;
    }

    #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__btn--round {
        min-width: 36px;
        min-height: 36px;
        padding: 0;
    }

    #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__page-label--primary {
        font-size: 10px;
        max-width: min(200px, 38vw);
    }

    body.dark-mode #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill,
    [data-theme="dark"] #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill {
        background: #1a1a1a;
    }

    body.dark-mode #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__page-label,
    body.dark-mode #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__page-label--primary,
    [data-theme="dark"] #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__page-label,
    [data-theme="dark"] #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__page-label--primary {
        color: #e2e8f0 !important;
    }

    body.dark-mode #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__btn,
    [data-theme="dark"] #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__btn {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        color: #e2e8f0 !important;
    }

    body.dark-mode #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__btn:hover,
    [data-theme="dark"] #mobile-bottom-nav .mobile-bottom-nav-book-toolbar-pill .story-book-mobile-controls__btn:hover {
        background: rgba(255, 255, 255, 0.14) !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
    }

    /* In-Buch-Suche: gleiches Markup wie Desktop (gallery/kinma-Pille), im Host statt zweitem Fixed-Band */
    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-toolbar-host > .story-book-search-dock {
        display: flex !important;
        flex-direction: column-reverse;
        align-items: stretch;
        justify-content: flex-end;
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        position: static !important;
        z-index: auto;
        --story-book-inbook-search-pill-max: 100%;
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-toolbar-host > .story-book-search-dock .story-book-inbook-search-pill {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
        border-radius: 9999px;
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-toolbar-host > .story-book-search-dock .book-search-results {
        width: 100%;
        max-width: 100%;
        max-height: min(42vh, 340px);
        overflow-y: auto;
        margin-bottom: 8px;
        margin-top: 0;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    #mobile-bottom-nav.mobile-bottom-nav--book-reading .mobile-bottom-nav-book-toolbar-host > .story-book-search-dock .story-book-inbook-search-pill .gallery-desktop-search-input.book-search-input {
        font-size: 16px;
    }

    /* Personen-Seite: Person anlegen (+ links) + Stammbaum-Statistiken (rechts), gleiche Kreise wie Add-Insel */
    .mobile-bottom-nav-persons-quick {
        flex-shrink: 0;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        max-width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        background: #1a1a1a !important;
        border: 1px solid #1a1a1a !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
        color: #fff !important;
    }

    .mobile-bottom-nav-persons-quick-btn {
        width: var(--kinma-mbn-aux-btn);
        height: var(--kinma-mbn-aux-btn);
        min-width: var(--kinma-mbn-aux-btn);
        min-height: var(--kinma-mbn-aux-btn);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 9999px;
        background: transparent !important;
        color: #fff !important;
        cursor: pointer;
        box-shadow: none !important;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        text-decoration: none;
    }

    .mobile-bottom-nav-persons-quick-btn:hover,
    .mobile-bottom-nav-persons-quick-btn:focus-visible {
        background: rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
    }

    .mobile-bottom-nav-persons-quick-btn svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .mobile-bottom-nav.mobile-bottom-nav-persons .mobile-bottom-nav-islands-row {
        gap: 8px;
    }

    /* Add-Story-Editor (Mobil): helle/weiße Insel wie Such-Button — keine schwarze Add-Insel */
    .mobile-bottom-nav-story-editor-left {
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 8px;
        min-width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        box-sizing: border-box;
        border-radius: 9999px;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }

    /* Nur noch ein Schließen-Button (X) — gleiche Größe wie Veröffentlichen-Kreis */
    .mobile-bottom-nav-story-editor-left--single {
        padding: 0;
        gap: 0;
        min-width: var(--kinma-mbn-island-height);
        width: var(--kinma-mbn-island-height);
        max-width: var(--kinma-mbn-island-height);
    }

    .mobile-bottom-nav-story-editor-close {
        width: var(--kinma-mbn-story-close-ring);
        height: var(--kinma-mbn-story-close-ring);
        min-width: var(--kinma-mbn-story-close-ring);
        min-height: var(--kinma-mbn-story-close-ring);
        border-radius: 50%;
        color: #1a1a1a !important;
    }

    .mobile-bottom-nav-story-editor-close:hover,
    .mobile-bottom-nav-story-editor-close:focus-visible {
        background: #f1f5f9 !important;
        color: #1a1a1a !important;
    }

    .mobile-bottom-nav-story-editor-btn {
        width: var(--kinma-mbn-aux-btn);
        height: var(--kinma-mbn-aux-btn);
        min-width: var(--kinma-mbn-aux-btn);
        min-height: var(--kinma-mbn-aux-btn);
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent !important;
        color: #1a1a1a !important;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    .mobile-bottom-nav-story-editor-btn:hover,
    .mobile-bottom-nav-story-editor-btn:focus-visible {
        background: #f1f5f9 !important;
    }

    .mobile-bottom-nav-story-editor-delete {
        color: #dc2626 !important;
    }

    .mobile-bottom-nav-story-editor-delete:hover,
    .mobile-bottom-nav-story-editor-delete:focus-visible {
        background: #fef2f2 !important;
        color: #b91c1c !important;
    }

    .mobile-bottom-nav-story-editor-btn svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Veröffentlichen rechts: heller Kreis wie Such-Insel, Inhalt in Primärfarbe */
    .mobile-bottom-nav-story-editor-publish {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        max-width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        padding: 0;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }

    .mobile-bottom-nav-story-editor-publish-btn {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 9999px;
        background: #ffffff !important;
        color: #6366f1 !important;
        cursor: pointer;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    .mobile-bottom-nav-story-editor-publish-btn:hover,
    .mobile-bottom-nav-story-editor-publish-btn:focus-visible {
        background: #eef2ff !important;
        transform: scale(1.04);
    }

    .mobile-bottom-nav-story-editor-publish-btn svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    body.dark-mode .mobile-bottom-nav-story-editor-left {
        background: #1a1a1a !important;
        border-color: #1a1a1a !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    body.dark-mode .mobile-bottom-nav-story-editor-btn {
        color: #cbd5e1 !important;
    }

    body.dark-mode .mobile-bottom-nav-story-editor-btn:hover,
    body.dark-mode .mobile-bottom-nav-story-editor-btn:focus-visible {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    body.dark-mode .mobile-bottom-nav-story-editor-delete {
        color: #fca5a5 !important;
    }

    body.dark-mode .mobile-bottom-nav-story-editor-delete:hover,
    body.dark-mode .mobile-bottom-nav-story-editor-delete:focus-visible {
        background: rgba(239, 68, 68, 0.2) !important;
        color: #fecaca !important;
    }

    body.dark-mode .mobile-bottom-nav-story-editor-close {
        color: #cbd5e1 !important;
    }

    body.dark-mode .mobile-bottom-nav-story-editor-close:hover,
    body.dark-mode .mobile-bottom-nav-story-editor-close:focus-visible {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #f1f5f9 !important;
    }

    body.dark-mode .mobile-bottom-nav-story-editor-publish {
        background: #1a1a1a;
        border-color: #1a1a1a;
    }

    body.dark-mode .mobile-bottom-nav-story-editor-publish-btn {
        background: #1a1a1a !important;
        color: #a5b4fc !important;
    }

    body.dark-mode .mobile-bottom-nav-story-editor-publish-btn:hover,
    body.dark-mode .mobile-bottom-nav-story-editor-publish-btn:focus-visible {
        background: #1a1a1a !important;
    }

    /* Suchmodus: Editor-Inseln ausblenden (falls je nach Seite aktiv) */
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-story-editor-left,
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-story-editor-publish {
        display: none !important;
    }

    .mobile-bottom-nav-search-btn {
        position: relative;
        width: var(--kinma-mbn-aux-btn);
        height: var(--kinma-mbn-aux-btn);
        min-width: var(--kinma-mbn-aux-btn);
        min-height: var(--kinma-mbn-aux-btn);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 9999px;
        background: transparent !important;
        color: inherit;
        cursor: pointer;
        box-shadow: none !important;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav-search-btn:hover,
    .mobile-bottom-nav-search-btn:focus-visible {
        background: rgba(0, 0, 0, 0.06) !important;
        box-shadow: none !important;
    }

    /*
     * Noch ein Suchbegriff aktiv (ohne KI): schwarzer Kreis, neutral — kein Pastell-RGB.
     * KI-Lupe: ganze Insel schwarz + RGB (kinma-ai-search-pill.css + Klassen .mobile-bottom-nav-search-island--kinma-ai).
     */
    .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search):not(
            .mobile-bottom-nav-search-island--kinma-ai
        ) {
        position: relative;
        z-index: 4;
        overflow: visible;
        isolation: isolate;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        background: #1a1a1a !important;
        background-image: none !important;
        animation: none !important;
        color: #fff !important;
        box-shadow:
            0 2px 10px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(0, 0, 0, 0.25);
    }

    .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn {
        color: #fff !important;
        background: transparent !important;
    }

    .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn-icon {
        color: #fff !important;
        stroke: #fff;
    }

    .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn-loupe-inner-dot {
        fill: #fff;
    }

    .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn:hover,
    .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn:focus-visible {
        background: rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
    }

    /*
     * KI aktiv: Pastell-RGB auf der Lupe — Klassen via syncMobileSearchIslandKinmaAiChrome() (assets/js/mobile-bottom-nav.js).
     * Zwei IDs schlagen die neutrale Pending-Insel; ersetzt :has(#wrap…) falls WebKit am Nav nicht matcht.
     */
    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ) {
        position: relative;
        isolation: isolate;
        overflow: visible !important;
        z-index: 6;
        outline: none !important;
        border: none !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none;
        animation: kinma-mb-search-ai-island-rgb-shadow 12s linear infinite;
        color: #f8fafc !important;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        )::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
            90deg,
            #e0e7ff,
            #ede9fe,
            #fce7f3,
            #e0f2fe,
            #d1fae5,
            #fef9c3,
            #e0f2fe,
            #e0e7ff
        );
        background-repeat: no-repeat;
        background-size: 320% 100%;
        animation: kinma-ai-search-pill-bar-gradient-flow 3s linear infinite;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        )
        .mobile-bottom-nav-search-btn {
        position: relative;
        z-index: 1;
        isolation: isolate;
        overflow: visible;
        outline: none !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border: none !important;
        border-radius: 50% !important;
        background: #1a1a1a !important;
        background-image: none !important;
        animation: none !important;
        box-shadow: none;
        color: #f8fafc !important;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        )
        .mobile-bottom-nav-search-btn-icon {
        animation: kinma-mb-search-ai-icon-pastel-flow 3s linear infinite;
        color: #c4cbf5;
        stroke: #c4cbf5;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        )
        .mobile-bottom-nav-search-btn:hover,
    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        )
        .mobile-bottom-nav-search-btn:focus-visible {
        background: rgba(255, 255, 255, 0.09) !important;
        background-image: none !important;
        animation: none !important;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        )
        .mobile-bottom-nav-search-btn::before {
        content: none !important;
        display: none !important;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ):has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn-ring-chars text,
    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ):has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn-ring .mobile-bottom-nav-search-btn-ring-text {
        fill: #c4cbf5;
        animation: kinma-mb-search-ai-ring-text-pastel-flow 3s linear infinite !important;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        ) {
        outline: none !important;
        border: none !important;
        background: #ffffff !important;
        background-image: none !important;
        animation: kinma-mb-search-ai-island-rgb-shadow 12s linear infinite !important;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn {
        position: relative;
        flex: 0 0 auto !important;
        width: var(--kinma-mbn-story-close-ring) !important;
        height: var(--kinma-mbn-story-close-ring) !important;
        min-width: var(--kinma-mbn-story-close-ring) !important;
        min-height: var(--kinma-mbn-story-close-ring) !important;
        outline: none !important;
        border: none !important;
        background: #1a1a1a !important;
        background-image: none !important;
        box-shadow: none;
        animation: kinma-mb-search-ai-btn-rgb-shadow 12s linear infinite !important;
        color: #f8fafc !important;
        isolation: isolate !important;
        z-index: 1 !important;
        overflow: visible !important;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn .mobile-bottom-nav-search-btn-icon {
        animation: kinma-mb-search-ai-icon-pastel-flow 3s linear infinite;
        color: #c4cbf5;
        stroke: #c4cbf5;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn-ring-chars text,
    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn-ring .mobile-bottom-nav-search-btn-ring-text {
        fill: #c4cbf5;
        animation: kinma-mb-search-ai-ring-text-pastel-flow 3s linear infinite !important;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn:hover,
    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn:focus-visible {
        background: #171717 !important;
        background-image: none !important;
        animation: kinma-mb-search-ai-btn-rgb-shadow 12s linear infinite !important;
    }

    #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn::before {
        content: '' !important;
        display: block !important;
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(
            90deg,
            #e0e7ff,
            #ede9fe,
            #fce7f3,
            #e0f2fe,
            #d1fae5,
            #fef9c3,
            #e0f2fe,
            #e0e7ff
        );
        background-size: 320% 100%;
        animation: kinma-ai-search-pill-bar-gradient-flow 3s linear infinite;
    }

    /* Gebogener Hinweistext entlang des oberen Innenrands, wenn noch ein Suchbegriff gespeichert ist */
    .mobile-bottom-nav-search-btn-ring {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.18s ease;
        z-index: 0;
    }

    .mobile-bottom-nav-search-btn.has-pending-search .mobile-bottom-nav-search-btn-ring {
        opacity: 1;
    }

    .mobile-bottom-nav-search-btn-ring-text {
        fill: #ffffff;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        /*
         * Wichtig: font-size auf SVG-<text> ist in User-Units der viewBox (0–40), nicht „winzige Screen-Pixel“.
         * ~4 war praktisch unsichtbar; ~10 entspricht grob lesbarer Größe relativ zur Lupenmitte.
         */
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        opacity: 0.92;
    }

    #mobile-bottom-nav-search-island:not(.mobile-bottom-nav-search-island--kinma-ai) .mobile-bottom-nav-search-btn-ring-chars text,
    #mobile-bottom-nav-search-island:not(.mobile-bottom-nav-search-island--kinma-ai)
        .mobile-bottom-nav-search-btn-ring
        .mobile-bottom-nav-search-btn-ring-text {
        fill: #ffffff !important;
    }

    #mobile-bottom-nav-search-ring-measure {
        visibility: hidden;
        pointer-events: none;
    }

    #mobile-bottom-nav-search-island:not(.mobile-bottom-nav-search-island--kinma-ai)
        .mobile-bottom-nav-search-btn.has-pending-search
        .mobile-bottom-nav-search-btn-ring,
    #mobile-bottom-nav-search-island:not(.mobile-bottom-nav-search-island--kinma-ai)
        .mobile-bottom-nav-search-btn.has-pending-search
        .mobile-bottom-nav-search-btn-ring
        text,
    #mobile-bottom-nav-search-island:not(.mobile-bottom-nav-search-island--kinma-ai)
        .mobile-bottom-nav-search-btn.has-pending-search
        .mobile-bottom-nav-search-btn-ring
        .mobile-bottom-nav-search-btn-ring-chars
        text {
        fill: #ffffff !important;
        color: #ffffff !important;
    }

    .mobile-bottom-nav-search-island:not(.mobile-bottom-nav-search-island--kinma-ai):has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn-ring
        text,
    .mobile-bottom-nav-search-island:not(.mobile-bottom-nav-search-island--kinma-ai):has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn-ring
        .mobile-bottom-nav-search-btn-ring-chars
        text {
        fill: #ffffff !important;
    }

    .mobile-bottom-nav-search-btn-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
    }

    .mobile-bottom-nav-search-btn-icon .mobile-bottom-nav-search-btn-loupe-inner-dot {
        opacity: 0;
        transition: opacity 0.14s ease;
        pointer-events: none;
    }

    .mobile-bottom-nav-search-btn.has-pending-search .mobile-bottom-nav-search-btn-loupe-inner-dot {
        opacity: 1;
    }

    .mobile-bottom-nav-search-btn.has-pending-search {
        overflow: visible;
    }

    /* Suchmodus: Such-Button ausblenden, Schließen-Button anzeigen (Kreis wie die anderen) */
    .mobile-bottom-nav-search-close {
        display: none;
        width: var(--kinma-mbn-aux-btn);
        height: var(--kinma-mbn-aux-btn);
        min-width: var(--kinma-mbn-aux-btn);
        min-height: var(--kinma-mbn-aux-btn);
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 9999px;
        background: transparent !important;
        color: inherit;
        cursor: pointer;
        box-shadow: none !important;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav-search-close:hover,
    .mobile-bottom-nav-search-close:focus-visible {
        background: rgba(0, 0, 0, 0.06) !important;
    }

    .mobile-bottom-nav-search-close svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-btn {
        display: none !important;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-close {
        display: flex !important;
    }

    /* Suchmodus, kein KI, Eingabe nicht leer: Schließen = schwarzer Kreis (kein Pastell-RGB) */
    #mobile-bottom-nav.is-search-mode:has(
            #mobile-bottom-nav-search-input-wrap:not(.mobile-bottom-nav-search--ai-active)
        ):has(
            #mobile-bottom-nav-search-input-wrap .kinma-search-clear-wrap:not(.kinma-search-clear--empty)
        )
        .mobile-bottom-nav-search-close {
        background: #1a1a1a !important;
        background-image: none !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        color: #f8fafc !important;
        animation: none !important;
        box-shadow:
            0 2px 10px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(0, 0, 0, 0.2) !important;
    }

    #mobile-bottom-nav.is-search-mode:has(
            #mobile-bottom-nav-search-input-wrap:not(.mobile-bottom-nav-search--ai-active)
        ):has(
            #mobile-bottom-nav-search-input-wrap .kinma-search-clear-wrap:not(.kinma-search-clear--empty)
        )
        .mobile-bottom-nav-search-close::before {
        content: none !important;
        display: none !important;
    }

    #mobile-bottom-nav.is-search-mode:has(
            #mobile-bottom-nav-search-input-wrap:not(.mobile-bottom-nav-search--ai-active)
        ):has(
            #mobile-bottom-nav-search-input-wrap .kinma-search-clear-wrap:not(.kinma-search-clear--empty)
        )
        .mobile-bottom-nav-search-close:hover,
    #mobile-bottom-nav.is-search-mode:has(
            #mobile-bottom-nav-search-input-wrap:not(.mobile-bottom-nav-search--ai-active)
        ):has(
            #mobile-bottom-nav-search-input-wrap .kinma-search-clear-wrap:not(.kinma-search-clear--empty)
        )
        .mobile-bottom-nav-search-close:focus-visible {
        background: #171717 !important;
        background-image: none !important;
        box-shadow:
            0 2px 12px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(0, 0, 0, 0.25) !important;
    }

    /*
     * Stammbaum (index): Suchmodus — ein Werkzeug-Launcher links neben der Pille (kein zweites Chevron in der Insel).
     * Während KI-Ladekreis (--ai-busy): aus — s. auch Block oben mit visibility/opacity.
     */
    #mobile-bottom-nav[data-page="index"].is-search-mode .mobile-bottom-nav-tree-tools-wrap {
        display: flex !important;
    }

    #mobile-bottom-nav[data-page="index"].is-search-mode:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-tree-tools-wrap,
    #mobile-bottom-nav[data-page="index"].is-search-mode:has(.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-tree-tools-wrap {
        display: none !important;
    }

    /* Stammbaum: Schließen rechts — gleiche Zentrierung wie früher linker Kreis (X + optional Spinner) */
    #mobile-bottom-nav[data-page="index"].is-search-mode .mobile-bottom-nav-search-close--tree {
        position: relative;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .mobile-bottom-nav-tree-ai-match-btn {
        display: none;
        flex-shrink: 0;
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        min-height: 2.25rem;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 9999px;
        background: transparent !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* KI-Start (.kinma-ai-search-pill__start-btn): animierter RGB-Rand + box-shadow aus kinma-ai-search-pill.css — nicht überschreiben */
    .mobile-bottom-nav-tree-ai-match-btn:not(.kinma-ai-search-pill__start-btn) {
        box-shadow: none !important;
    }

    /* Wie Desktop .tree-search-ai-match-btn: sichtbare Lupe mit Insel-Rand — nicht KI-Start (.kinma-ai-search-pill__start-btn: eigener Verlauf-Rand) */
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-tree-ai-match-btn.mobile-bottom-nav-tree-ai-match-btn--visible:not(.kinma-ai-search-pill__start-btn) {
        border: 1px solid #e2e8f0 !important;
        border-radius: 50%;
        background: #ffffff !important;
        box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05);
    }

    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-tree-ai-match-btn.mobile-bottom-nav-tree-ai-match-btn--visible:not(.kinma-ai-search-pill__start-btn) {
        border: 1px solid rgba(129, 140, 248, 0.45) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow:
            0 1px 3px rgba(99, 102, 241, 0.12),
            0 0 0 1px rgba(129, 140, 248, 0.12) !important;
    }

    /* KI-Start-Lupe (Framework): Pastell-Rand wie Desktop — inkl. 3s-Verlauf wie SVG-Lupe (SMIL dur="3s") */
    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-tree-ai-match-btn.kinma-ai-search-pill__start-btn.mobile-bottom-nav-tree-ai-match-btn--visible {
        overflow: visible !important;
        border: 4px solid transparent !important;
        border-radius: 50% !important;
        background-color: transparent !important;
        background-image:
            linear-gradient(#ffffff, #ffffff) padding-box,
            linear-gradient(
                90deg,
                #a5b4fc,
                #c4b5fd,
                #f9a8d4,
                #86efac,
                #93c5fd,
                #fcd34d,
                #a5b4fc,
                #f9a8d4
            )
                border-box !important;
        background-origin: padding-box, border-box !important;
        background-clip: padding-box, border-box !important;
        -webkit-background-clip: padding-box, border-box !important;
        background-size: auto, 320% 100% !important;
        animation:
            kinma-ai-search-pill__start-btn-glow-soft 3s linear infinite,
            kinma-ai-search-pill-start-btn-border-gradient-flow 3s linear infinite !important;
        /* box-shadow: Keyframes aus kinma-ai-search-pill.css — Basis-Regel .mobile-bottom-nav-tree-ai-match-btn darf KI-Start nicht mit none !important überschreiben */
    }

    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-tree-ai-match-btn.kinma-ai-search-pill__start-btn.mobile-bottom-nav-tree-ai-match-btn--visible {
        overflow: visible !important;
        border: 4px solid transparent !important;
        background-color: transparent !important;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) padding-box,
            linear-gradient(
                90deg,
                #a5b4fc,
                #c4b5fd,
                #f9a8d4,
                #86efac,
                #93c5fd,
                #fcd34d,
                #a5b4fc,
                #f9a8d4
            )
                border-box !important;
        background-origin: padding-box, border-box !important;
        background-clip: padding-box, border-box !important;
        -webkit-background-clip: padding-box, border-box !important;
        background-size: auto, 320% 100% !important;
        animation:
            kinma-ai-search-pill__start-btn-glow-soft 3s linear infinite,
            kinma-ai-search-pill-start-btn-border-gradient-flow 3s linear infinite !important;
        /* box-shadow: s. Block darüber */
    }

    .mobile-bottom-nav-tree-ai-match-btn:hover:not(.kinma-ai-search-pill__start-btn),
    .mobile-bottom-nav-tree-ai-match-btn:focus-visible:not(.kinma-ai-search-pill__start-btn) {
        background: rgba(0, 0, 0, 0.06) !important;
    }

    .mobile-bottom-nav-tree-ai-match-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .mobile-bottom-nav-tree-ai-match-btn--busy {
        pointer-events: none;
        opacity: 0.65;
    }

    /* Stammbaum: linker Kreis — X und Spinner exakt mittig (Spinner: margin statt transform, sonst kollidiert rotate-Animation) */
    .mobile-bottom-nav-search-close-left__icon {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 20px;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    #mobile-bottom-nav[data-page="index"].is-search-mode .mobile-bottom-nav-tree-ai-match-btn.mobile-bottom-nav-tree-ai-match-btn--visible {
        display: flex !important;
    }

    #mobile-bottom-nav[data-page="index"].is-search-mode .mobile-bottom-nav-tree-ai-match-btn:not(.mobile-bottom-nav-tree-ai-match-btn--visible) {
        display: none !important;
    }

    #mobile-bottom-nav[data-page="gallery"].is-search-mode .mobile-bottom-nav-tree-ai-match-btn.mobile-bottom-nav-tree-ai-match-btn--visible {
        display: flex !important;
    }

    #mobile-bottom-nav[data-page="gallery"].is-search-mode .mobile-bottom-nav-tree-ai-match-btn:not(.mobile-bottom-nav-tree-ai-match-btn--visible) {
        display: none !important;
    }

    #mobile-bottom-nav[data-page="media"].is-search-mode .mobile-bottom-nav-tree-ai-match-btn.mobile-bottom-nav-tree-ai-match-btn--visible {
        display: flex !important;
    }

    #mobile-bottom-nav[data-page="media"].is-search-mode .mobile-bottom-nav-tree-ai-match-btn:not(.mobile-bottom-nav-tree-ai-match-btn--visible) {
        display: none !important;
    }

    #mobile-bottom-nav[data-page="stories"].is-search-mode .mobile-bottom-nav-tree-ai-match-btn.mobile-bottom-nav-tree-ai-match-btn--visible {
        display: flex !important;
    }

    #mobile-bottom-nav[data-page="stories"].is-search-mode .mobile-bottom-nav-tree-ai-match-btn:not(.mobile-bottom-nav-tree-ai-match-btn--visible) {
        display: none !important;
    }

    /* Suchmodus: Add-Button ausblenden */
    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-add-island {
        display: none !important;
    }

    /* Stammbaum: Add (+) in der Baumsuche wieder sichtbar (sonst wirkt die Insel „leer“) */
    #mobile-bottom-nav[data-page="index"].is-search-mode.has-add-button:not(.chat-mode) .mobile-bottom-nav-add-island {
        display: flex !important;
    }

    /* KI läuft: Add wieder aus (überschreibt Regel direkt darüber) */
    #mobile-bottom-nav[data-page="index"].is-search-mode.has-add-button:not(.chat-mode):has(
            .mobile-bottom-nav-search-input-wrap--ai-busy
        )
        .mobile-bottom-nav-add-island,
    #mobile-bottom-nav[data-page="index"].is-search-mode.has-add-button:not(.chat-mode).mobile-bottom-nav--mb-ai-expand-phase:has(
            #mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy
        )
        .mobile-bottom-nav-add-island {
        display: none !important;
    }

    /* Profil: Bearbeiten links neben der Nav-Island (nur eigenes Profil) */
    .mobile-bottom-nav-profile-edit-island {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        max-width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        padding: 0;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }

    .mobile-bottom-nav-profile-edit-btn {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 9999px;
        background: transparent !important;
        color: #4f46e5 !important;
        cursor: pointer;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    .mobile-bottom-nav-profile-edit-btn:hover,
    .mobile-bottom-nav-profile-edit-btn:focus-visible {
        background: #eef2ff !important;
    }

    .mobile-bottom-nav-profile-edit-btn svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-profile-edit-island {
        display: none !important;
    }

    /* Profil: gleiche Pfad-Zeile wie Desktop ({familienId}://profile/…) – Suche nach anderen Profilen */
    .mobile-bottom-nav-path-field {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        gap: 2px;
    }

    .mobile-bottom-nav-path-prefix {
        flex-shrink: 0;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
        letter-spacing: -0.02em;
        max-width: 46%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-bottom-nav-path-input {
        flex: 1;
        min-width: 0;
    }

    .mobile-bottom-nav.is-search-mode[data-profile-url-prefix] .mobile-bottom-nav-search-input-wrap {
        position: relative;
        overflow: visible;
    }

    .mobile-bottom-nav.is-search-mode[data-profile-url-prefix] .mobile-bottom-nav-island-with-label,
    .mobile-bottom-nav.is-search-mode[data-profile-url-prefix] .mobile-bottom-nav-island {
        overflow: visible;
        z-index: 30;
    }

    /* Desktop-Dropdown (#profile-selector-dropdown) bei mobiler Bottom-Nav-Suche nach oben verankern */
    body.profile-mobile-nav-search-open #profile-selector-dropdown {
        position: fixed !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        top: auto !important;
        bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-top: 0 !important;
        border-radius: 14px !important;
        max-height: min(44vh, 320px) !important;
        z-index: 100002 !important;
        box-shadow: 0 -8px 32px rgba(26, 26, 26, 0.18) !important;
        animation: none;
    }

    body.dark-mode .mobile-bottom-nav-profile-edit-island {
        background: #1a1a1a !important;
        border-color: #1a1a1a !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    body.dark-mode .mobile-bottom-nav-profile-edit-btn {
        color: #a5b4fc !important;
    }

    body.dark-mode .mobile-bottom-nav-profile-edit-btn:hover,
    body.dark-mode .mobile-bottom-nav-profile-edit-btn:focus-visible {
        background: rgba(99, 102, 241, 0.2) !important;
    }

    body.dark-mode .mobile-bottom-nav-path-prefix {
        color: #94a3b8;
    }

    body.dark-mode.profile-mobile-nav-search-open #profile-selector-dropdown {
        background: #1a1a1a !important;
        border: 1px solid #1a1a1a !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45) !important;
    }

    .mobile-bottom-nav-search-input {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0 8px;
        border: none;
        background: transparent;
        font-size: 16px;
        font-weight: 500;
        color: #1a1a1a;
        outline: none;
        font-family: inherit;
    }

    .mobile-bottom-nav-search-input::placeholder {
        color: #94a3b8;
    }

    /* Dark mode – Haupt-Pille wie Desktop .left-nav-cluster */
    body.dark-mode .mobile-bottom-nav-island,
    body.dark-mode .mobile-bottom-nav-feedback-back-island,
    body.dark-mode .mobile-bottom-nav-feedback-continue-island {
        background: #1a1a1a;
        border-color: #1a1a1a;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    /*
     * Such-Insel: helle Pille wie body.dark-mode .gallery-container / .gallery-bottom-search-pill
     * (nicht die anthrazitfarbene Haupt-Nav-Insel).
     */
    body.dark-mode .mobile-bottom-nav-search-island,
    [data-theme="dark"] .mobile-bottom-nav-search-island {
        background: var(--gallery-island-surface, #ffffff);
        border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
        box-shadow: var(
            --gallery-island-shadow,
            0 8px 32px rgba(0, 0, 0, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.08)
        );
        color: #1a1a1a;
    }

    /* Stammbaum-Werkzeug-Launcher: gleiche helle Insel wie Suche — nicht mit Zu-mir/Minimap anthrazit */
    body.dark-mode .mobile-bottom-nav-tree-tools-launcher,
    [data-theme="dark"] .mobile-bottom-nav-tree-tools-launcher {
        background: #ffffff;
        background-color: #ffffff;
        background-image: none;
        border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
        box-shadow: var(
            --gallery-island-shadow,
            0 8px 32px rgba(0, 0, 0, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.08)
        );
        color: #1a1a1a;
    }
    body.dark-mode .mobile-bottom-nav-tree-tools-launcher:hover,
    body.dark-mode .mobile-bottom-nav-tree-tools-launcher:focus-visible,
    body.dark-mode .mobile-bottom-nav-tree-tools-launcher:active,
    [data-theme="dark"] .mobile-bottom-nav-tree-tools-launcher:hover,
    [data-theme="dark"] .mobile-bottom-nav-tree-tools-launcher:focus-visible,
    [data-theme="dark"] .mobile-bottom-nav-tree-tools-launcher:active {
        background: #ffffff;
        background-color: #ffffff;
        background-image: none;
        color: #1a1a1a;
        border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
        box-shadow: var(
            --gallery-island-shadow,
            0 8px 32px rgba(0, 0, 0, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.08)
        );
    }

    body.dark-mode
        .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search):not(
            .mobile-bottom-nav-search-island--kinma-ai
        ) {
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        background: #1a1a1a !important;
        background-image: none !important;
        animation: none !important;
        color: #fff !important;
        box-shadow:
            0 2px 12px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    body.dark-mode
        .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search):not(
            .mobile-bottom-nav-search-island--kinma-ai
        )
        .mobile-bottom-nav-search-btn:hover,
    body.dark-mode
        .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search):not(
            .mobile-bottom-nav-search-island--kinma-ai
        )
        .mobile-bottom-nav-search-btn:focus-visible {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    body.dark-mode
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ):has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn,
    [data-theme="dark"]
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ):has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn {
        color: #f8fafc !important;
    }

    body.dark-mode
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ):has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn-icon,
    [data-theme="dark"]
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ):has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn-icon {
        animation: kinma-mb-search-ai-icon-pastel-flow 3s linear infinite;
        color: #c4cbf5;
        stroke: #c4cbf5;
    }

    body.dark-mode
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ):has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn-ring-chars text,
    body.dark-mode
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ):has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn-ring .mobile-bottom-nav-search-btn-ring-text,
    [data-theme="dark"]
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ):has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn-ring-chars text,
    [data-theme="dark"]
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai:not(
            .mobile-bottom-nav-search-island--kinma-ai-wrap-busy
        ):has(.mobile-bottom-nav-search-btn.has-pending-search)
        .mobile-bottom-nav-search-btn-ring .mobile-bottom-nav-search-btn-ring-text {
        fill: #c4cbf5;
        animation: kinma-mb-search-ai-ring-text-pastel-flow 3s linear infinite !important;
    }

    body.dark-mode
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn::before,
    [data-theme="dark"]
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn::before {
        opacity: 1;
        filter: none;
    }

    body.dark-mode
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn .mobile-bottom-nav-search-btn-icon,
    [data-theme="dark"]
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn .mobile-bottom-nav-search-btn-icon {
        animation: kinma-mb-search-ai-icon-pastel-flow 3s linear infinite;
        color: #c4cbf5;
        stroke: #c4cbf5;
    }

    body.dark-mode
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn-ring-chars text,
    body.dark-mode
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn-ring .mobile-bottom-nav-search-btn-ring-text,
    [data-theme="dark"]
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn-ring-chars text,
    [data-theme="dark"]
        #mobile-bottom-nav:not(.is-search-mode)
        #mobile-bottom-nav-search-island.mobile-bottom-nav-search-island--kinma-ai.mobile-bottom-nav-search-island--kinma-ai-wrap-busy:has(
            .mobile-bottom-nav-search-btn.has-pending-search
        )
        .mobile-bottom-nav-search-btn-ring .mobile-bottom-nav-search-btn-ring-text {
        fill: #c4cbf5;
        animation: kinma-mb-search-ai-ring-text-pastel-flow 3s linear infinite !important;
    }

    body.dark-mode .mobile-bottom-nav-feedback-back-island {
        color: #e2e8f0;
    }
    body.dark-mode .mobile-bottom-nav-feedback-continue-island {
        background: #1a1a1a !important;
        border-color: #1a1a1a !important;
        color: #fff !important;
    }
    body.dark-mode .mobile-bottom-nav-feedback-continue-btn {
        color: #fff !important;
    }
    body.dark-mode .mobile-bottom-nav-feedback-continue-btn:hover:not(:disabled),
    body.dark-mode .mobile-bottom-nav-feedback-continue-btn:focus-visible:not(:disabled) {
        background: rgba(255, 255, 255, 0.12) !important;
    }
    body.dark-mode .mobile-bottom-nav-feedback-back-btn:hover,
    body.dark-mode .mobile-bottom-nav-feedback-back-btn:focus-visible,
    body.dark-mode .mobile-bottom-nav-feedback-continue-btn:hover,
    body.dark-mode .mobile-bottom-nav-feedback-continue-btn:focus-visible {
        background: rgba(255, 255, 255, 0.1);
    }
    body.dark-mode .mobile-bottom-nav-feedback-back-btn:disabled,
    body.dark-mode .mobile-bottom-nav-feedback-continue-btn:disabled {
        opacity: 0.45;
    }
    body.dark-mode .mobile-bottom-nav-control-panel-separator {
        background: #1a1a1a;
    }
    body.dark-mode .mobile-bottom-nav-extras-group-separator {
        background: #1a1a1a;
    }
    body.dark-mode .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn,
    [data-theme="dark"] .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn {
        box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.28) !important;
    }
    body.dark-mode .mobile-bottom-nav-items-scroll-fade-clip,
    [data-theme="dark"] .mobile-bottom-nav-items-scroll-fade-clip {
        background: #1a1a1a;
    }
    body.dark-mode .mobile-bottom-nav-items-scroll-fade-clip::before {
        background: linear-gradient(
            to right,
            #1a1a1a 0%,
            #1a1a1a 10%,
            rgba(26, 26, 26, 0.94) 22%,
            rgba(26, 26, 26, 0.78) 38%,
            rgba(26, 26, 26, 0.48) 58%,
            rgba(26, 26, 26, 0.2) 78%,
            rgba(26, 26, 26, 0.06) 91%,
            rgba(26, 26, 26, 0) 100%
        );
    }
    body.dark-mode .mobile-bottom-nav-items-scroll-fade-clip::after {
        background: linear-gradient(
            to left,
            #1a1a1a 0%,
            #1a1a1a 10%,
            rgba(26, 26, 26, 0.94) 22%,
            rgba(26, 26, 26, 0.78) 38%,
            rgba(26, 26, 26, 0.48) 58%,
            rgba(26, 26, 26, 0.2) 78%,
            rgba(26, 26, 26, 0.06) 91%,
            rgba(26, 26, 26, 0) 100%
        );
    }
    [data-theme="dark"] .mobile-bottom-nav-items-scroll-fade-clip::before {
        background: linear-gradient(
            to right,
            #1a1a1a 0%,
            #1a1a1a 10%,
            rgba(26, 26, 26, 0.94) 22%,
            rgba(26, 26, 26, 0.78) 38%,
            rgba(26, 26, 26, 0.48) 58%,
            rgba(26, 26, 26, 0.2) 78%,
            rgba(26, 26, 26, 0.06) 91%,
            rgba(26, 26, 26, 0) 100%
        );
    }
    [data-theme="dark"] .mobile-bottom-nav-items-scroll-fade-clip::after {
        background: linear-gradient(
            to left,
            #1a1a1a 0%,
            #1a1a1a 10%,
            rgba(26, 26, 26, 0.94) 22%,
            rgba(26, 26, 26, 0.78) 38%,
            rgba(26, 26, 26, 0.48) 58%,
            rgba(26, 26, 26, 0.2) 78%,
            rgba(26, 26, 26, 0.06) 91%,
            rgba(26, 26, 26, 0) 100%
        );
    }
    body.dark-mode .mobile-bottom-nav-scroll-handle {
        background: rgba(255, 255, 255, 0.25);
    }

    body.dark-mode .mobile-bottom-nav-zu-mir-island,
    body.dark-mode .mobile-bottom-nav-tree-aux-island {
        background: #1a1a1a;
        border-color: #1a1a1a;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        color: #e2e8f0;
    }
    body.dark-mode .mobile-bottom-nav-tree-tools-wrap.tree-tools-expanded .mobile-bottom-nav-tree-tools-stack::before {
        background: #1a1a1a !important;
        background-image: none !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }
    body.dark-mode .mobile-bottom-nav-tree-tool-btn {
        color: #94a3b8;
    }
    body.dark-mode .mobile-bottom-nav-tree-tool-btn:hover,
    body.dark-mode .mobile-bottom-nav-tree-tool-btn:focus-visible {
        background: #1a1a1a;
        color: #e2e8f0;
    }
    body.dark-mode .mobile-bottom-nav-tree-tool-btn.minimap-toggle.active {
        background: #1a1a1a;
        color: #fff;
    }
    body.dark-mode .mobile-bottom-nav-tree-tool-sep {
        background: #1a1a1a;
    }

    body.dark-mode .mobile-bottom-nav-chat-ai-island,
    body.dark-mode .mobile-bottom-nav-chat-search-island {
        background: #1a1a1a !important;
        border-color: #1a1a1a !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }
    body.dark-mode .mobile-bottom-nav-chat-ai-btn,
    body.dark-mode .mobile-bottom-nav-chat-left-action-btn:not(.mobile-bottom-nav-chat-back-btn) {
        color: #94a3b8;
    }
    body.dark-mode .mobile-bottom-nav-chat-ai-btn:hover,
    body.dark-mode .mobile-bottom-nav-chat-ai-btn:active,
    body.dark-mode .mobile-bottom-nav-chat-left-action-btn:not(.mobile-bottom-nav-chat-back-btn):hover,
    body.dark-mode .mobile-bottom-nav-chat-left-action-btn:not(.mobile-bottom-nav-chat-back-btn):active {
        background: rgba(255, 255, 255, 0.08);
        color: #e2e8f0;
    }
    body.dark-mode .mobile-bottom-nav-chat-ai-btn.active,
    body.dark-mode .mobile-bottom-nav-chat-left-action-btn.active:not(.mobile-bottom-nav-chat-back-btn) {
        background: #1a1a1a !important;
        color: #fff !important;
    }
    body.dark-mode .mobile-bottom-nav-chat-back-btn {
        background: #1a1a1a !important;
        color: #f1f5f9 !important;
    }
    body.dark-mode .mobile-bottom-nav-chat-back-btn svg {
        stroke: #f1f5f9 !important;
    }
    body.dark-mode .mobile-bottom-nav-chat-search-island-btn {
        color: #94a3b8;
    }
    body.dark-mode .mobile-bottom-nav-chat-search-island-btn:hover,
    body.dark-mode .mobile-bottom-nav-chat-search-island-btn:active {
        background: rgba(255, 255, 255, 0.08);
        color: #e2e8f0;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        border: none !important;
        box-shadow:
            0 -2px 12px rgba(99, 102, 241, 0.42),
            0 2px 8px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn {
        color: #ffffff !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn svg {
        stroke: #ffffff !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn:hover,
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn:active {
        background: rgba(255, 255, 255, 0.14) !important;
        color: #ffffff !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) {
        background: #1a1a1a !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn {
        color: #f1f5f9 !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn svg {
        stroke: #f1f5f9 !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn:hover,
    body.dark-mode .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn:active {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    body.dark-mode .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-island {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.dark-mode .mobile-bottom-nav-search-close:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    body.dark-mode
        .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-tree-ai-match-btn.mobile-bottom-nav-tree-ai-match-btn--visible:not(.kinma-ai-search-pill__start-btn) {
        border-color: #1a1a1a !important;
        background: #1a1a1a !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    }

    body.dark-mode
        .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-tree-ai-match-btn.kinma-ai-search-pill__start-btn.mobile-bottom-nav-tree-ai-match-btn--visible {
        overflow: visible !important;
        border: 4px solid transparent !important;
        background-color: transparent !important;
        background-image:
            linear-gradient(#1a1a1a, #1a1a1a) padding-box,
            linear-gradient(
                90deg,
                #a5b4fc,
                #c4b5fd,
                #f9a8d4,
                #86efac,
                #93c5fd,
                #fcd34d,
                #a5b4fc,
                #f9a8d4
            )
                border-box !important;
        background-origin: padding-box, border-box !important;
        background-clip: padding-box, border-box !important;
        -webkit-background-clip: padding-box, border-box !important;
        background-size: auto, 320% 100% !important;
        animation:
            kinma-ai-search-pill__start-btn-glow-soft 3s linear infinite,
            kinma-ai-search-pill-start-btn-border-gradient-flow 3s linear infinite !important;
        /* box-shadow: s. heller KI-Start-Block */
    }

    body.dark-mode
        .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-tree-ai-match-btn.mobile-bottom-nav-tree-ai-match-btn--visible:not(.kinma-ai-search-pill__start-btn) {
        border-color: rgba(129, 140, 248, 0.45) !important;
        background: rgba(26, 26, 26, 0.92) !important;
        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(129, 140, 248, 0.2) !important;
    }

    body.dark-mode
        .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-tree-ai-match-btn.kinma-ai-search-pill__start-btn.mobile-bottom-nav-tree-ai-match-btn--visible {
        overflow: visible !important;
        border: 4px solid transparent !important;
        background-color: transparent !important;
        background-image:
            linear-gradient(rgba(26, 26, 26, 0.92), rgba(26, 26, 26, 0.92)) padding-box,
            linear-gradient(
                90deg,
                #a5b4fc,
                #c4b5fd,
                #f9a8d4,
                #86efac,
                #93c5fd,
                #fcd34d,
                #a5b4fc,
                #f9a8d4
            )
                border-box !important;
        background-origin: padding-box, border-box !important;
        background-clip: padding-box, border-box !important;
        -webkit-background-clip: padding-box, border-box !important;
        background-size: auto, 320% 100% !important;
        animation:
            kinma-ai-search-pill__start-btn-glow-soft 3s linear infinite,
            kinma-ai-search-pill-start-btn-border-gradient-flow 3s linear infinite !important;
        /* box-shadow: s. heller KI-Start-Block */
    }

    body.dark-mode .mobile-bottom-nav-tree-ai-match-btn:hover:not(.kinma-ai-search-pill__start-btn),
    body.dark-mode .mobile-bottom-nav-tree-ai-match-btn:focus-visible:not(.kinma-ai-search-pill__start-btn) {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    body.dark-mode .mobile-bottom-nav-item:hover,
    body.dark-mode .mobile-bottom-nav-search-btn:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: none !important;
    }

    body.dark-mode .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn:hover,
    body.dark-mode .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn:focus-visible,
    [data-theme="dark"] .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn:hover,
    [data-theme="dark"] .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn:focus-visible {
        box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.28) !important;
    }

    body.dark-mode .mobile-bottom-nav-add-island,
    body.dark-mode .mobile-bottom-nav-story-book-back-island,
    [data-theme="dark"] .mobile-bottom-nav-add-island,
    [data-theme="dark"] .mobile-bottom-nav-story-book-back-island {
        background: #1a1a1a !important;
        border-color: #1a1a1a !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
        color: #e2e8f0 !important;
    }

    body.dark-mode .mobile-bottom-nav-add-btn:hover,
    body.dark-mode .mobile-bottom-nav-add-btn:focus-visible,
    body.dark-mode .mobile-bottom-nav-story-book-back-btn:hover,
    body.dark-mode .mobile-bottom-nav-story-book-back-btn:focus-visible,
    [data-theme="dark"] .mobile-bottom-nav-add-btn:hover,
    [data-theme="dark"] .mobile-bottom-nav-add-btn:focus-visible,
    [data-theme="dark"] .mobile-bottom-nav-story-book-back-btn:hover,
    [data-theme="dark"] .mobile-bottom-nav-story-book-back-btn:focus-visible {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    body.dark-mode .mobile-bottom-nav-persons-quick {
        background: #1a1a1a !important;
        border-color: #1a1a1a !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
        color: #e2e8f0 !important;
    }

    body.dark-mode .mobile-bottom-nav-persons-quick-btn:hover,
    body.dark-mode .mobile-bottom-nav-persons-quick-btn:focus-visible {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    body.dark-mode .mobile-bottom-nav-item.active {
        background: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
    }

    body.dark-mode .mobile-bottom-nav-item.active:hover {
        background: rgba(255, 255, 255, 0.25) !important;
    }

    body.dark-mode .mobile-bottom-nav-search-input {
        color: #1a1a1a;
    }

    body.dark-mode .mobile-bottom-nav-search-input::placeholder {
        color: #64748b;
    }

    body.dark-mode .mobile-bottom-nav-search-close {
        color: #1a1a1a;
    }

    body.dark-mode .mobile-bottom-nav-search-close:hover {
        background: #f1f5f9;
        color: #1a1a1a;
    }

    body.dark-mode .mobile-bottom-nav-search-filter-btn:hover,
    body.dark-mode .mobile-bottom-nav-search-filter-btn:focus-visible {
        background: rgba(0, 0, 0, 0.06) !important;
    }

    /* Suchmodus: sichtbare Pille — KI-Zustand kommt aus kinma-ai-search-pill.css */
    body.dark-mode
        .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-pill:not(.kinma-ai-search-pill--ai-active):not(.kinma-ai-search-pill--ai-busy) {
        background: var(--gallery-island-surface, #ffffff);
        border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
        box-shadow: var(
            --gallery-island-shadow,
            0 8px 32px rgba(0, 0, 0, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.08)
        );
    }

    body.dark-mode .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill .kinma-ai-search-pill__search-icon {
        color: #94a3b8;
    }

    /* KI aktiv (Dark): Verlauf + Schatten wie Desktop → kinma-ai-search-pill.css (body.dark-mode .kinma-ai-search-pill…) */

    body.dark-mode
        .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active.mobile-bottom-nav-search-input-wrap--ai-busy {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        animation: none !important;
    }

    body.dark-mode .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-filter-btn {
        background: var(--gallery-island-surface, #ffffff) !important;
        border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
        box-shadow: var(
            --gallery-island-shadow,
            0 8px 32px rgba(0, 0, 0, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.08)
        );
        color: #1a1a1a;
    }
}

/*
 * Sehr kleine Viewports: große Kreise + 10px-Gaps fressen die Mitte-Insel auf.
 * Kompaktere Maße + schmalere Scroll-Fades, damit die Pill proportional und scrollbar bleibt.
 */
@media (max-width: 400px) {
    .mobile-bottom-nav {
        padding: 8px;
        padding-left: max(6px, env(safe-area-inset-left, 0px));
        padding-right: max(6px, env(safe-area-inset-right, 0px));
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-bottom-nav-island-with-label {
        gap: 2px;
    }

    .mobile-bottom-nav-islands-row {
        gap: 6px;
    }

    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-islands-row {
        gap: 8px;
    }

    .mobile-bottom-nav-island,
    .mobile-bottom-nav-search-island,
    .mobile-bottom-nav-feedback-back-island,
    .mobile-bottom-nav-feedback-continue-island {
        min-height: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav-tree-tools-wrap {
        width: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav-tree-tools-launcher {
        width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav-zu-mir-island,
    .mobile-bottom-nav-tree-aux-island {
        width: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav-search-island {
        width: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        max-width: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav-add-island {
        width: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        max-width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav-story-editor-left {
        min-width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
        padding: 0 6px !important;
        gap: 4px !important;
    }

    .mobile-bottom-nav-story-editor-left--single {
        min-width: var(--kinma-mbn-island-height) !important;
        width: var(--kinma-mbn-island-height) !important;
        max-width: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav-story-editor-publish {
        width: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        max-width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav-profile-edit-island {
        width: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        max-width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-input-wrap:not(.mobile-bottom-nav-search--ai-active) {
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
        padding: 0 !important;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active:not(.mobile-bottom-nav-search-input-wrap--ai-busy) {
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
        position: relative !important;
    }

    .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill__inner {
        padding: 4px 14px !important;
    }

    .mobile-bottom-nav.is-search-mode
        .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)
        .mobile-bottom-nav-search-pill__inner {
        padding: 4px 14px !important;
    }

    #mobile-bottom-nav.is-search-mode .mobile-bottom-nav-island:has(.mobile-bottom-nav-search-input-wrap--ai-busy) {
        min-height: var(--kinma-mbn-island-height) !important;
        justify-content: center !important;
    }

    #mobile-bottom-nav.is-search-mode.mobile-bottom-nav--mb-ai-expand-phase
        .mobile-bottom-nav-island:has(#mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy) {
        min-height: var(--kinma-mbn-island-height) !important;
        justify-content: center !important;
    }

    .mobile-bottom-nav-search-filter-btn {
        width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
    }

    /*
     * Gleiche Kreisgröße wie >400px (--kinma-mbn-btn), nicht 2.35em: em folgt der Body-Schrift (~16px)
     * und wirkt auf echten Handys viel kleiner als in DevTools (oft >400px CSS-Breite).
     */
    .mobile-bottom-nav-item svg {
        width: calc(var(--kinma-mbn-btn) * 0.4) !important;
        height: calc(var(--kinma-mbn-btn) * 0.4) !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }

    .mobile-bottom-nav-add-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .mobile-bottom-nav-profile-edit-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /*
     * Icon + Label: Insel wächst mit dem Inhalt; Items mindestens Tap-Target-Größe, ohne overflow:hidden-Clip.
     */
    .mobile-bottom-nav-island,
    .mobile-bottom-nav-items-scroll-fade-clip,
    .mobile-bottom-nav-items-scroll-shell {
        min-height: var(--kinma-mbn-island-height) !important;
        height: auto !important;
        max-height: none !important;
    }

    .mobile-bottom-nav-item,
    .mobile-bottom-nav-control-panel-wrap .mobile-bottom-nav-item {
        width: var(--kinma-mbn-btn) !important;
        min-width: var(--kinma-mbn-btn) !important;
        max-width: var(--kinma-mbn-btn) !important;
        height: auto !important;
        min-height: var(--kinma-mbn-btn) !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .mobile-bottom-nav-item.mobile-bottom-nav-extras-btn {
        width: var(--kinma-mbn-btn) !important;
        min-width: var(--kinma-mbn-btn) !important;
        max-width: var(--kinma-mbn-btn) !important;
        height: var(--kinma-mbn-btn) !important;
        min-height: var(--kinma-mbn-btn) !important;
        max-height: var(--kinma-mbn-btn) !important;
    }

    .mobile-bottom-nav-items {
        gap: 2px !important;
        padding: 0 !important;
    }

    @supports selector(:has(*)) {
        .mobile-bottom-nav-island:not(:has(.mobile-bottom-nav-control-panel-wrap)) .mobile-bottom-nav-items {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }

    .mobile-bottom-nav-items-scroll-fade-clip::before,
    .mobile-bottom-nav-items-scroll-fade-clip::after {
        width: 28px !important;
    }

    .mobile-bottom-nav-items-scroll-fade-clip::before {
        width: 29px !important;
    }

    .mobile-bottom-nav-control-panel-wrap {
        padding: 0 2px 0 0 !important;
    }
}

/* Ultra-schmal: noch weniger horizontaler Abstand */
@media (max-width: 360px) {
    .mobile-bottom-nav-islands-row {
        gap: 4px !important;
    }

    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-islands-row {
        gap: 6px !important;
    }

    .mobile-bottom-nav-items-scroll-fade-clip::before,
    .mobile-bottom-nav-items-scroll-fade-clip::after {
        width: 20px !important;
    }

    .mobile-bottom-nav-items-scroll-fade-clip::before {
        width: 21px !important;
    }

    .mobile-bottom-nav-items {
        gap: 1px !important;
        padding: 0 !important;
    }

    @supports selector(:has(*)) {
        .mobile-bottom-nav-island:not(:has(.mobile-bottom-nav-control-panel-wrap)) .mobile-bottom-nav-items {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }
}

/* Chat auf Mobile/Tablet/Querformat: Fullscreen, Nav wandert in Bottom-Nav */
@media (max-width: 1024px) {
    /* Reduziert „Doppel-Scroll“ wenn die Tastatur den sichtbaren Bereich verkleinert (Layout-Viewport bleibt hoch). */
    body.chat-overlay-open {
        overflow: hidden;
        overscroll-behavior-y: none;
        overscroll-behavior-x: none;
    }

    @supports selector(:has(*)) {
        html:has(body.chat-overlay-open) {
            overflow: hidden;
            height: 100%;
            overscroll-behavior-y: none;
            overscroll-behavior-x: none;
        }
    }

    /* Wenn Chat als Overlay offen: gesamter Hintergrund (inkl. Stammbaum-Slots) nicht klickbar/hoverbar –
       verhindert z.B. Tooltips wie "Elternteil hinzufügen für Slot darunter" über dem Chat */
    body.chat-overlay-open * {
        pointer-events: none !important;
    }
    body.chat-overlay-open #chatPopup,
    body.chat-overlay-open #chatPopup *,
    body.chat-overlay-open #mobile-bottom-nav,
    body.chat-overlay-open #mobile-bottom-nav * {
        pointer-events: auto !important;
    }

    body.chat-overlay-open #chatPopup,
    body.chat-overlay-open #chatPopup #chatMain,
    body.chat-overlay-open #chatPopup #chatMessages,
    body.chat-overlay-open #chatPopup .chat-messages {
        touch-action: pan-y pinch-zoom;
        overscroll-behavior-x: none;
    }

    /* UI, das am body hängt (über #chatPopup): chat-overlay-open * setzt sonst pointer-events:none auf alles */
    body.chat-overlay-open .chat-attachment-menu,
    body.chat-overlay-open .chat-attachment-menu *,
    body.chat-overlay-open .chat-attachment-menu-backdrop,
    body.chat-overlay-open .chat-message-context-menu,
    body.chat-overlay-open .chat-message-context-menu *,
    body.chat-overlay-open .chat-contact-context-menu,
    body.chat-overlay-open .chat-contact-context-menu *,
    body.chat-overlay-open .chat-share-dialog,
    body.chat-overlay-open .chat-share-dialog *,
    body.chat-overlay-open .chat-poll-dialog,
    body.chat-overlay-open .chat-poll-dialog *,
    body.chat-overlay-open .chat-camera-dialog,
    body.chat-overlay-open .chat-camera-dialog *,
    body.chat-overlay-open .incoming-call-popup,
    body.chat-overlay-open .incoming-call-popup *,
    body.chat-overlay-open .kinma-chat-hist-voice-menu-wrap,
    body.chat-overlay-open .kinma-chat-hist-voice-menu-wrap * {
        pointer-events: auto !important;
    }
    body.chat-overlay-open .kinma-chat-message-receipt-overlay,
    body.chat-overlay-open .kinma-chat-message-receipt-overlay * {
        pointer-events: auto !important;
    }
    /* Fixe Top-Zeile (KINMA, Chat/AI-Insel, Top-Nav): weiterhin klickbar, damit Chat-Toggle schließen kann */
    body.chat-overlay-open .mobile-top-nav-row,
    body.chat-overlay-open .mobile-top-nav-row * {
        pointer-events: auto !important;
    }
    body.chat-overlay-open .mobile-top-nav-row {
        z-index: 100110 !important;
    }
    body.chat-overlay-open #mobile-bottom-nav {
        z-index: 100110 !important;
    }

    /* iOS Safari: bei Fokus auf Inputs mit font-size < 16px zoomt die Seite; Chat-Suche/Input war teils 12–14px */
    .chat-popup.chat-popup-mobile-fullscreen .chat-input,
    .chat-popup.chat-popup-mobile-fullscreen .chat-search-input,
    .chat-popup.chat-popup-mobile-fullscreen .chat-calls-search-bar-input,
    #chatSearchInput,
    #chatNewContactsSearchInput,
    #chatCallsSearchInput,
    #mobile-bottom-nav-search-input {
        font-size: 16px !important;
    }

    /* Wenn Chat offen (ohne Chat-Bottom-Nav): Stammbaum-Inseln / Nav-Items ausblenden */
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-tree-tools-wrap,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-add-island,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-persons-quick,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-story-editor-left,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-story-editor-publish,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-search-island,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-items-scroll-fade-clip,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-items,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-control-panel-separator,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-control-panel-wrap,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-scroll-handle,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-search-filter-btn,
    body.chat-overlay-open #mobile-bottom-nav .mobile-bottom-nav-search-input-wrap {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Suchmodus im Chat-Overlay: Mitte = Suchfeld, rechts Schließen – muss die #mobile-bottom-nav-Regeln oben überschreiben */
    body.chat-overlay-open #mobile-bottom-nav.chat-mode.is-search-mode .mobile-bottom-nav-search-island,
    body.chat-overlay-open #mobile-bottom-nav.chat-mode.is-search-mode .mobile-bottom-nav-search-input-wrap {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Höhere Spezifität (body) damit 400px-Regeln aus PHP/chat.css nicht gewinnen.
       inset + 100% statt 100vw/100vh, damit kein Streifen rechts (100vw = Viewport inkl. Scrollbar). */
    body .chat-popup.active.chat-popup-mobile-fullscreen {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        cursor: default !important;
        background: #f8f9fa !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        overscroll-behavior: none !important;
    }

    /* Header inkl. X-Button auf Mobile ausblenden, nicht ziehbar */
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-header {
        display: none !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-close {
        display: none !important;
    }
    .chat-popup.chat-popup-mobile-fullscreen {
        cursor: default !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-body {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        align-items: stretch !important;
        /* Let conversation scroll behind nav islands; reserve spacing only on header/input elements */
        padding-top: env(safe-area-inset-top, 0) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        padding-left: env(safe-area-inset-left, 0) !important;
        padding-right: env(safe-area-inset-right, 0) !important;
        gap: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    /* Nav-Section im Popup verstecken – die Buttons sind jetzt in der Bottom-Nav */
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-navigation-section {
        display: none !important;
    }

    /* Header row in conversation: unter Top-Nav-Insel (80px + safe-area) + kleiner Luftabstand */
    #chatMain .chat-main-header-row {
        display: flex !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin: calc(80px + env(safe-area-inset-top, 0)) 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
        position: sticky !important;
        /* Unter der festen App-Top-Nav kleben, nicht bei top:0 (überlappt sonst die Icons) */
        top: calc(80px + env(safe-area-inset-top, 0px)) !important;
        z-index: 10 !important;
        background: transparent !important;
        /* Padding oben/unten/links/rechts: --kinma-chat-header-inset in chat-content-area.css */
    }

    /* Input in conversation: unten bündig (Safe-Area nur in .chat-input-bar-row); kein Platz für Bottom-Nav-Insel mehr nötig */
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-input-container {
        background: transparent !important;
        margin-bottom: 0 !important;
    }

    /* Unten wie oben: gleicher Abstand wie Header-Zeile (8px + Safe-Area) zum Bildschirmrand */
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-input-bar-row {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Verlaufssuche: Such-Framework sitzt in #chatInputBarRow (Composer); keine zweite Suchzeile in der Bottom-Nav.
       #mobile-bottom-nav hängt am body, nicht unter .chat-popup — daher :has(#chatPopup...) wie weiter unten. */
    body.kinma-chat-history-search-active:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) #mobile-bottom-nav.chat-mode.chat-history-search-mode .mobile-bottom-nav-chat-history-search {
        display: none !important;
    }
    /* Gleiche Absicht ohne :has (JS: kinma-chat-history-search-composer-mobile) — gewinnt sonst ggf. gegen .chat-history-search-mode … display:flex */
    body.kinma-chat-history-search-composer-mobile #mobile-bottom-nav.chat-mode.chat-history-search-mode .mobile-bottom-nav-chat-history-search {
        display: none !important;
    }
    /*
     * Verlaufssuche im Composer: #mobile-bottom-nav-island bleibt sonst als leere 60px-Pille sichtbar
     * (Kinder ausgeblendet, Shell mit min-height + weißem Hintergrund) und überlappt den Chat.
     * Linke/rechte Chat-Inseln sind im Vollbild-Overlay ohnehin aus — die ganze Bottom-Nav-Zeile entfernen.
     */
    body.kinma-chat-history-search-composer-mobile #mobile-bottom-nav.chat-mode.chat-history-search-mode {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Scrollbereich: oben Platz unter Zurück+Header-Pill (wie .chat-main-header-row: 80px + safe-area + ~60px Zeile + Luft) */
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-messages,
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMessages {
        padding-top: calc(
            80px + var(--chat-pill-min-height, 48px) + (var(--kinma-chat-header-inset, 12px) * 2) + 20px +
                env(safe-area-inset-top, 0)
        ) !important;
        padding-bottom: calc(var(--kinma-chat-composer-bottom, 140px) + env(safe-area-inset-bottom, 0)) !important;
        scroll-padding-bottom: calc(var(--kinma-chat-composer-bottom, 140px) + env(safe-area-inset-bottom, 0)) !important;
        overscroll-behavior-y: contain !important;
    }

    body.kinma-chat-history-search-active .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-messages,
    body.kinma-chat-history-search-active .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain #chatMessages {
        /* Suchleiste im Composer wie normale Eingabe — gleicher unterer Scrollraum */
        padding-bottom: calc(var(--kinma-chat-composer-bottom, 140px) + env(safe-area-inset-bottom, 0)) !important;
        scroll-padding-bottom: calc(var(--kinma-chat-composer-bottom, 140px) + env(safe-area-inset-bottom, 0)) !important;
    }

    /* KI-Modus: Kopfzeile wie Familien-Chat im Fluss unter globaler Top-Nav (s. sticky top + chat-content-area position) */
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain {
        background: #ffffff !important;
    }
    /* KI-Modus: gleicher oberer Scroll-Reserve wie Familien-Chat — sonst rutschen Bubbles unter die sticky Header-Pill */
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain .chat-messages,
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain #chatMessages {
        padding-top: calc(80px + 40px + 20px + env(safe-area-inset-top, 0)) !important;
        scroll-padding-top: calc(80px + 40px + 16px + env(safe-area-inset-top, 0)) !important;
        background: transparent !important;
        overscroll-behavior-y: contain !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain.chat-main-has-activity-strip .chat-messages,
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain.chat-main-has-activity-strip > .chat-messages,
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain.chat-main-has-activity-strip #chatMessages {
        padding-top: calc(80px + 40px + 68px + env(safe-area-inset-top, 0)) !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode .chat-popup-content-wrapper #chatMain::before {
        height: calc(40px + env(safe-area-inset-top, 0)) !important;
        max-height: 20vh !important;
    }
    body.mobile-chat-input-focused .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode .chat-popup-content-wrapper #chatMain::before {
        height: calc(40px + env(safe-area-inset-top, 0)) !important;
        max-height: 15vh !important;
    }

    /* Kanten-Fade am Nachrichtenbereich: gleiche Flächenfarbe wie Fullscreen-Chat, etwas höhere Verläufe unter Inseln */
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain {
        --chat-edge-fade: #f8f9fa !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode .chat-popup-content-wrapper #chatMain {
        --chat-edge-fade: #ffffff !important;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain {
        --chat-edge-fade: #1a1a1a !important;
    }
    /* Obere/untere weiße Kanten-Fade: gleiche Höhenlogik (oben: safe-area-top, unten: safe-area-bottom) */
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain::before {
        height: calc(152px + env(safe-area-inset-top, 0)) !important;
        max-height: 36vh !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain::after {
        height: calc(152px + env(safe-area-inset-bottom, 0)) !important;
        max-height: 36vh !important;
    }
    body.kinma-chat-history-search-active .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain::after {
        height: calc(152px + env(safe-area-inset-bottom, 0)) !important;
        max-height: 36vh !important;
    }
    /* Bottom nav hidden while typing: kürzerer Fade unten — oben gleiche Höhe */
    body.mobile-chat-input-focused .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain::before {
        height: calc(90px + env(safe-area-inset-top, 0)) !important;
        max-height: 22vh !important;
    }
    body.mobile-chat-input-focused .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain::after {
        height: calc(90px + env(safe-area-inset-bottom, 0)) !important;
        max-height: 22vh !important;
    }
    /* Zurück-Button: immer perfekter Kreis (--chat-pill-min-height), unabhängig von der Header-Pill-Höhe */
    .chat-main-header-back-island {
        display: none !important;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        align-self: center;
        box-sizing: border-box !important;
        width: var(--chat-pill-min-height, 48px) !important;
        height: var(--chat-pill-min-height, 48px) !important;
        min-width: var(--chat-pill-min-height, 48px) !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        max-width: var(--chat-pill-min-height, 48px) !important;
        max-height: var(--chat-pill-min-height, 48px) !important;
        aspect-ratio: 1 / 1 !important;
        background: #1a1a1a !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .chat-popup.ai-mode .chat-main-header-back-island {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        box-shadow: 0 4px 22px rgba(79, 70, 229, 0.35), 0 2px 8px rgba(99, 102, 241, 0.2) !important;
    }
    /*
     * Zurück nur im Composer (s. chat-enhancements.css) — kein Platzhalter links in der Header-Zeile,
     * sonst bleibt weißer Streifen / doppelte Navigation. Ausnahme: Antwort-Verlaufssuche (Grid mit Zurück).
     */
    body:not(.kinma-chat-reply-header-search)
        .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact
        .chat-main-header-back-island,
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-main-header-ghost-close-island,
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact
        #chatMain
        .chat-main-header-row
        > .chat-main-header-history-search-slot[hidden] {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    /* Antwortmodus: Zurück | Verlaufssuche | X — festes 3-Spalten-Grid, gleicher Rand wie normale Header-Zeile */
    body.kinma-chat-reply-header-search
        .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact
        #chatMain
        .chat-main-header-row {
        display: grid !important;
        grid-template-columns: var(--chat-pill-min-height, 48px) minmax(0, 1fr) var(--chat-pill-min-height, 48px) !important;
        grid-template-areas: 'back search close' !important;
        background: transparent !important;
        overflow: visible !important;
        z-index: 12 !important;
        isolation: isolate;
        height: var(--chat-pill-min-height, 48px) !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        max-height: var(--chat-pill-min-height, 48px) !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body.kinma-chat-reply-header-search
        .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact
        .chat-main-header-back-island {
        grid-area: back !important;
        align-self: center !important;
        justify-self: start !important;
        flex: none !important;
        width: var(--chat-pill-min-height, 48px) !important;
        height: var(--chat-pill-min-height, 48px) !important;
        min-width: var(--chat-pill-min-height, 48px) !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        max-width: var(--chat-pill-min-height, 48px) !important;
        max-height: var(--chat-pill-min-height, 48px) !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
    }

    body.kinma-chat-reply-header-search
        .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact
        #chatMain
        .chat-main-header-row
        > :not(.chat-main-header-back-island):not(.chat-main-header-history-search-slot):not(
            .chat-composer-history-search-close-btn
        ) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    body.kinma-chat-reply-header-search .chat-main-header-search-island,
    body.kinma-chat-reply-header-search .chat-main-header-search-island:not([hidden]) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.kinma-chat-reply-header-search .chat-reference-search-bar,
    body.kinma-chat-reply-header-search #chatMain .chat-reference-search-dock {
        display: none !important;
    }

    body.kinma-chat-reply-header-search .chat-main-header-history-search-slot:not([hidden]) {
        grid-area: search !important;
        display: flex !important;
        flex: none !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        align-items: center !important;
        align-self: center !important;
        justify-self: stretch !important;
        height: var(--chat-pill-min-height, 48px) !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        max-height: var(--chat-pill-min-height, 48px) !important;
        overflow: hidden !important;
    }

    /* Nur Such-Pille im Slot — kein zweites Grid-Segment für X (X sitzt in Spalte 3 der Zeile) */
    body.kinma-chat-reply-header-search
        #chatMain.chat-main--reply-header-search
        .chat-main-header-history-search-slot
        .chat-composer-history-search-dock--in-header:not([hidden]) {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: var(--chat-pill-min-height, 48px) !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        max-height: var(--chat-pill-min-height, 48px) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-template: none !important;
        grid-template-columns: none !important;
    }

    body.kinma-chat-reply-header-search
        #chatMain.chat-main--reply-header-search
        .chat-main-header-history-search-slot
        .chat-composer-history-search-dock--in-header
        .chat-composer-history-search-close-btn {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        position: absolute !important;
    }

    body.kinma-chat-reply-header-search
        .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact
        #chatMain
        .chat-main-header-row
        > .chat-composer-history-search-close-btn {
        grid-area: close !important;
        display: inline-flex !important;
        flex: none !important;
        align-self: center !important;
        justify-self: end !important;
        width: var(--chat-pill-min-height, 48px) !important;
        height: var(--chat-pill-min-height, 48px) !important;
        min-width: var(--chat-pill-min-height, 48px) !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        max-width: var(--chat-pill-min-height, 48px) !important;
        max-height: var(--chat-pill-min-height, 48px) !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border: none !important;
        border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
        background: #1a1a1a !important;
        color: #f8fafc !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    body.kinma-chat-reply-header-search
        #chatMain.chat-main--reply-header-search
        .chat-main-header-history-search-slot
        .kinma-ai-search-pill-feedback-consent {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        position: absolute !important;
    }

    body.kinma-chat-reply-header-search
        #chatMain.chat-main--reply-header-search
        .chat-main-header-history-search-slot
        #chatDesktopConversationSearch:not([hidden]) {
        display: flex !important;
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: var(--chat-pill-min-height, 48px) !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        max-height: var(--chat-pill-min-height, 48px) !important;
        margin: 0 !important;
        justify-self: stretch !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }

    body.kinma-chat-reply-header-search
        #chatMain.chat-main--reply-header-search
        .chat-main-header-history-search-slot
        #chatDesktopConversationSearch:not(.kinma-ai-search-pill--ai-busy):not([hidden]) {
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
    }

    body.kinma-chat-reply-header-search
        #chatMain.chat-main--reply-header-search
        .chat-main-header-history-search-slot
        #chatDesktopConversationSearch
        .kinma-ai-search-pill__inner {
        height: 100% !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        max-height: var(--chat-pill-min-height, 48px) !important;
        box-sizing: border-box !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.dark-mode.kinma-chat-reply-header-search
        .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact
        #chatMain
        .chat-main-header-row {
        background: transparent !important;
    }
    .chat-main-header-back-island .chat-main-header-back-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent !important;
        color: #ffffff !important;
        cursor: pointer;
        border-radius: 50%;
        -webkit-tap-highlight-color: transparent;
    }
    .chat-main-header-back-island .chat-main-header-back-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    .chat-main-header-back-island .chat-main-header-back-btn svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
    }
    /* Header-Pill: gleiche Höhe wie Zurück-/Composer-Zeile (--chat-pill-min-height) */
    /* #chatMain erhöht Spezifität gegenüber #chatMain .chat-main-header { position:absolute; top:0 } aus chat-content-area */
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-main-header-row .chat-main-header,
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain > .chat-main-header-row > #chatMainHeader.chat-main-header {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        height: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 5px !important;
        align-items: center !important;
        display: flex !important;
        align-self: stretch !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-header-activity-strip {
        top: calc(
            80px + var(--chat-pill-min-height, 48px) + (var(--kinma-chat-header-inset, 12px) * 2) + 8px +
                env(safe-area-inset-top, 0)
        ) !important;
        left: calc(var(--kinma-chat-header-inset, 12px) + env(safe-area-inset-left, 0px)) !important;
        right: calc(var(--kinma-chat-header-inset, 12px) + env(safe-area-inset-right, 0px)) !important;
        z-index: 9 !important;
        display: none;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain.chat-main-has-activity-strip .chat-messages,
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain.chat-main-has-activity-strip > .chat-messages,
    .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain.chat-main-has-activity-strip #chatMessages {
        padding-top: calc(
            80px + var(--chat-pill-min-height, 48px) + (var(--kinma-chat-header-inset, 12px) * 2) + 68px +
                env(safe-area-inset-top, 0)
        ) !important;
    }
    body.dark-mode .chat-main-header-back-island {
        background: #1a1a1a !important;
    }
    body.dark-mode .chat-main-header-back-island .chat-main-header-back-btn {
        color: #e2e8f0 !important;
    }
    body.dark-mode .chat-main-header-back-island .chat-main-header-back-btn svg {
        color: #e2e8f0 !important;
        stroke: #e2e8f0 !important;
    }
    body.dark-mode .chat-main-header-back-island .chat-main-header-back-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* Lupe rechts neben der Header-Pill (Mobile-Fullscreen + Konversation) */
    .chat-main-header-search-island {
        display: none;
        flex: 0 0 var(--chat-pill-min-height, 48px) !important;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        align-self: center !important;
        width: var(--chat-pill-min-height, 48px) !important;
        height: var(--chat-pill-min-height, 48px) !important;
        min-width: var(--chat-pill-min-height, 48px) !important;
        max-width: var(--chat-pill-min-height, 48px) !important;
        min-height: var(--chat-pill-min-height, 48px) !important;
        max-height: var(--chat-pill-min-height, 48px) !important;
        aspect-ratio: 1 / 1 !important;
        background: #1a1a1a !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .chat-main-header-search-island:not([hidden]) {
        display: flex !important;
    }
    .chat-main-header-search-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent !important;
        color: #e2e8f0 !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .chat-main-header-search-btn:hover,
    .chat-main-header-search-btn:focus-visible {
        background: rgba(255, 255, 255, 0.08) !important;
        outline: none;
    }
    .chat-main-header-search-btn svg {
        flex-shrink: 0;
    }
    body.dark-mode .chat-main-header-search-island {
        background: #1a1a1a !important;
        border-color: #1a1a1a !important;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
    }
    body.dark-mode .chat-main-header-search-btn {
        color: #e2e8f0 !important;
    }

    /* Konversation: keine globale Top-/Bottom-Nav; Verlaufssuche nutzt schmale untere Zeile */
    @supports selector(:has(*)) {
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .mobile-top-nav-row {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
            pointer-events: none !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) #mobile-bottom-nav.chat-mode:not(.chat-history-search-mode):not(.call-mode) {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) #mobile-bottom-nav.chat-mode.chat-history-search-mode .mobile-bottom-nav-chat-ai-island,
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) #mobile-bottom-nav.chat-mode.chat-history-search-mode .mobile-bottom-nav-chat-right-stack {
            display: none !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-main-header-row {
            margin-top: calc(8px + env(safe-area-inset-top, 0)) !important;
            top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-input-container {
            margin-bottom: 0 !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-messages,
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain #chatMessages {
            padding-top: calc(
                8px + var(--chat-pill-min-height, 48px) + (var(--kinma-chat-header-inset, 12px) * 2) + 20px +
                    env(safe-area-inset-top, 0)
            ) !important;
            padding-bottom: calc(var(--kinma-chat-composer-bottom, 84px) + env(safe-area-inset-bottom, 0)) !important;
            scroll-padding-bottom: calc(var(--kinma-chat-composer-bottom, 84px) + env(safe-area-inset-bottom, 0)) !important;
        }
        body.kinma-chat-history-search-active.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-messages,
        body.kinma-chat-history-search-active.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain #chatMessages {
            padding-bottom: calc(var(--kinma-chat-composer-bottom, 140px) + env(safe-area-inset-bottom, 0)) !important;
            scroll-padding-bottom: calc(var(--kinma-chat-composer-bottom, 140px) + env(safe-area-inset-bottom, 0)) !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain .chat-messages,
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain #chatMessages {
            padding-top: calc(
                8px + var(--chat-pill-min-height, 48px) + (var(--kinma-chat-header-inset, 12px) * 2) + 20px +
                    env(safe-area-inset-top, 0)
            ) !important;
            scroll-padding-top: calc(8px + 40px + 16px + env(safe-area-inset-top, 0)) !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain.chat-main-has-activity-strip .chat-messages,
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain.chat-main-has-activity-strip > .chat-messages,
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact.ai-mode #chatMain.chat-main-has-activity-strip #chatMessages {
            padding-top: calc(8px + 40px + 68px + env(safe-area-inset-top, 0)) !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-header-activity-strip {
            top: calc(8px + 40px + 8px + env(safe-area-inset-top, 0)) !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain.chat-main-has-activity-strip .chat-messages,
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain.chat-main-has-activity-strip > .chat-messages,
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain.chat-main-has-activity-strip #chatMessages {
            padding-top: calc(8px + 40px + 68px + env(safe-area-inset-top, 0)) !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain::before {
            height: calc(80px + env(safe-area-inset-top, 0)) !important;
            max-height: 28vh !important;
        }
        body.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain::after {
            height: calc(72px + env(safe-area-inset-bottom, 0)) !important;
            max-height: 20vh !important;
        }
        body.kinma-chat-history-search-active.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain::after {
            height: calc(152px + env(safe-area-inset-bottom, 0)) !important;
            max-height: 36vh !important;
        }
        body.mobile-chat-input-focused.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain::before {
            height: calc(48px + env(safe-area-inset-top, 0)) !important;
            max-height: 18vh !important;
        }
        body.mobile-chat-input-focused.chat-overlay-open:has(#chatPopup.active.chat-popup-mobile-fullscreen.has-active-contact) .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact .chat-popup-content-wrapper #chatMain::after {
            height: calc(48px + env(safe-area-inset-bottom, 0)) !important;
            max-height: 16vh !important;
        }
    }

    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: #f8f9fa !important;
        visibility: visible !important;
        contain: none !important;
        position: relative !important;
        box-sizing: border-box !important;
        overscroll-behavior: none !important;
    }
    /* Profile/Settings-Panels auf Mobile kein Platz, damit nur Content-Wrapper sichtbar ist */
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-profile-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-settings-panel {
        flex: 0 0 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Content-Bereich und Views füllen den Platz, Sichtbarkeit erzwingen (inkl. #chatViewSplit) */
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatChatView,
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatViewSplit,
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatNewContactsView,
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatCallsView,
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatMain {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
        visibility: visible !important;
    }

    /* view-chat + Kontakte oder KI-Modus: #chatViewSplit sichtbar (KI hat eigene Liste ohne .has-contacts) */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-contacts .chat-popup-content-wrapper #chatViewSplit,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.ai-mode .chat-popup-content-wrapper #chatViewSplit {
        display: flex !important;
        visibility: visible !important;
    }
    /* view-chat + keine Kontakte und nicht KI: nur #chatChatView (Platzhalter) */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-contacts):not(.ai-mode) .chat-popup-content-wrapper #chatChatView {
        display: flex !important;
        visibility: visible !important;
    }

    /* Mobile: gleicher weißer Grund wie Desktop (Familien- + KI-Chat) */
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatChatView,
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatViewSplit {
        background: #ffffff !important;
    }

    /* Mobile fullscreen chat: remove split divider/gap that can reveal background strip */
    .chat-popup.active.chat-popup-mobile-fullscreen #chatDivider,
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-divider {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatViewSplit {
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Also target class-based split container to override desktop chat-content-area widths */
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper .chat-view-split,
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatViewSplit {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 0% !important;
        box-sizing: border-box !important;
    }

    /* Mobile fullscreen chat/new-contacts list must never keep desktop sidebar widths */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-new-contacts:not(.view-new-contacts-selected) .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-right: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper .chat-view-split .chat-contacts-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-new-contacts:not(.view-new-contacts-selected) .chat-popup-content-wrapper .chat-view-split .chat-contacts-panel {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-right: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    /* Mobile Chat-Liste: Suche nur über Bottom-Nav (Familie + KI); „+“ bleibt unten in der Toolbar sichtbar */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact):not(.ai-mode) .chat-popup-content-wrapper #chatViewSplit #normalChatSearchContainer,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact):not(.ai-mode) .chat-popup-content-wrapper #chatViewSplit .chat-search-wrapper.chat-search-wrapper-top {
        display: none !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact):not(.ai-mode) .chat-popup-content-wrapper #chatViewSplit #chatContactsToolbar {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 5 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        gap: 8px !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact):not(.ai-mode) .chat-popup-content-wrapper #chatViewSplit #chatContactsToolbar {
        background: transparent !important;
        box-shadow: none !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact).ai-mode .chat-popup-content-wrapper #chatViewSplit #aiConversationsSearchContainer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        border: 0 !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        position: absolute !important;
        width: 1px !important;
        opacity: 0 !important;
    }
    /*
     * KI-Modus: Familien-Kontaktsuche im Panel muss zuverlässig weg sein.
     * Zwei sichtbare Suchleisten fressen die Flex-Höhe — #aiConversationsList wirkt „leer“ (Höhe 0).
     */
    .chat-popup.active.chat-popup-mobile-fullscreen.ai-mode .chat-popup-content-wrapper #chatViewSplit #normalChatSearchContainer,
    .chat-popup.active.chat-popup-mobile-fullscreen.ai-mode .chat-popup-content-wrapper #chatViewSplit #normalChatSearchContainer.chat-search-wrapper-top {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        border: 0 !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        position: absolute !important;
        width: 1px !important;
        opacity: 0 !important;
    }
    /* KI-Liste: gleiche Abstände wie Familienliste (keine Kopf-Suchzeile) */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact).ai-mode .chat-popup-content-wrapper #chatViewSplit #chatContactsPanel {
        padding-top: 0 !important;
        box-sizing: border-box !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact).ai-mode .chat-popup-content-wrapper #chatViewSplit #aiConversationsList {
        flex: 1 1 0% !important;
        min-height: 120px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain !important;
        padding-top: calc(80px + env(safe-area-inset-top, 0px) + 12px) !important;
        padding-bottom: 8px !important;
        padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
        box-sizing: border-box !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel {
        position: relative !important;
        --kinma-chat-contacts-toolbar-reserve: 56px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-contacts-list.chat-contacts-list-no-separators {
        position: absolute !important;
        inset: 0 !important;
        padding-top: calc(80px + env(safe-area-inset-top, 0px) + 12px) !important;
        padding-bottom: calc(var(--kinma-chat-contacts-toolbar-reserve, 56px) + max(10px, env(safe-area-inset-bottom, 0px)) + 8px) !important;
        padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
        box-sizing: border-box !important;
        overscroll-behavior-y: contain !important;
    }

    /* Kontaktzeilen: weniger Leerraum links/rechts am Drag-Griff */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-contact-item {
        padding-left: 8px !important;
        padding-right: 12px !important;
    }
    /* „Neue Kontakte“: keine Kopf-Suchleiste auf Mobile – Suche nur über Bottom-Nav */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-new-contacts:not(.view-new-contacts-selected) .chat-popup-content-wrapper #chatNewContactsView .chat-new-contacts-header {
        display: none !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-new-contacts:not(.view-new-contacts-selected) .chat-popup-content-wrapper #chatNewContactsView .chat-new-contacts-list {
        padding-top: calc(80px + env(safe-area-inset-top, 0px) + 12px) !important;
    }

    /* Robust mobile chat split behavior (independent of has-contacts class) */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper .chat-view-split .chat-chat-right-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper .chat-view-split .chat-contacts-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
        border-right: 0 !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper .chat-view-split .chat-chat-right-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 0% !important;
        margin: 0 !important;
        padding-right: 0 !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.view-new-contacts:not(.view-new-contacts-selected) .chat-popup-content-wrapper #chatNewContactsView {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* =======================================================================
       MOBILE CHAT SECTION REWORK (view-chat)
       Single-panel behavior to avoid split-width/gap artifacts:
       - without active contact: full contacts panel
       - with active contact: full conversation panel
       ======================================================================= */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat .chat-popup-content-wrapper #chatViewSplit,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat .chat-popup-content-wrapper .chat-view-split {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat .chat-popup-content-wrapper .chat-view-split .chat-contacts-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat .chat-popup-content-wrapper .chat-view-split .chat-chat-right-panel {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding-right: 0 !important;
        border-right: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Default in mobile chat section: show contacts full width */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper .chat-view-split .chat-contacts-panel {
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        z-index: 2 !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper .chat-view-split .chat-chat-right-panel {
        display: none !important;
        z-index: 1 !important;
    }

    /* When contact is active: show conversation full width */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper .chat-view-split .chat-contacts-panel {
        display: none !important;
        z-index: 1 !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper .chat-view-split .chat-chat-right-panel {
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        z-index: 2 !important;
    }

    /* Ensure chat main always fills the visible conversation panel in mobile */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatMain {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }

    /* Aktive Call-Ansicht immer komplett unter der oberen Nav-Insel starten lassen */
    .chat-popup.active.chat-popup-mobile-fullscreen #chatMain > .chat-call-view.active {
        top: calc(80px + env(safe-area-inset-top, 0px) + 8px) !important;
        bottom: 0 !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen #chatMain > .chat-call-view.active .chat-call-container {
        min-height: 0 !important;
        height: 100% !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
        overflow: hidden !important;
    }

    /* PiP-Kamera über der Chat-Bottom-Nav (z-index 100110); fixed = Viewport, unten genug Luft für Insel + Safe-Area */
    body.chat-overlay-open .chat-popup.active.chat-popup-mobile-fullscreen #chatMain > .chat-call-view.active .chat-call-container {
        --chat-call-pip-bottom-offset: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.chat-overlay-open .chat-popup.active.chat-popup-mobile-fullscreen .chat-call-local-video-wrapper.visible {
        position: fixed !important;
        z-index: 100115 !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel {
        margin: 0 !important;
        padding-right: 0 !important;
        border-right: 0 !important;
        max-width: 100% !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel {
        background: #fff !important;
    }

    /* Mobile Chat: Mind. 1 Kontakt → Kontaktliste volle Breite; kein Kontakt → Platzhalter */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-contacts:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit {
        display: flex !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-contacts:not(.has-active-contact) .chat-popup-content-wrapper #chatChatView {
        display: none !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-contacts:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-contacts:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel {
        display: none !important;
    }

    /* KI-Modus: Unterhaltungsliste wie Kontaktliste (ohne .has-contacts der Familie) */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.ai-mode:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit {
        display: flex !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.ai-mode:not(.has-active-contact) .chat-popup-content-wrapper #chatChatView {
        display: none !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.ai-mode:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.ai-mode:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel {
        display: none !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-contacts):not(.has-active-contact):not(.ai-mode) .chat-popup-content-wrapper #chatViewSplit {
        display: none !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-contacts):not(.has-active-contact):not(.ai-mode) .chat-popup-content-wrapper #chatChatView {
        display: flex !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Force empty chat placeholder (JS sets .force-mobile-chat-empty) */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.force-mobile-chat-empty:not(.has-active-contact):not(.ai-mode) .chat-popup-content-wrapper #chatViewSplit {
        display: none !important;
        visibility: hidden !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.force-mobile-chat-empty:not(.has-active-contact):not(.ai-mode) .chat-popup-content-wrapper #chatChatView {
        display: flex !important;
        visibility: visible !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    /* Mobile: Fallback empty panel (JS #chatMobileEmptyFallback) should match site styles */
    #chatMobileEmptyFallback .chat-chat-view-empty {
        padding: 24px 16px !important;
        min-height: 0 !important;
        text-align: center !important;
    }
    #chatMobileEmptyFallback .chat-chat-view-empty-intro {
        max-width: 440px;
        margin: 0 auto;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    #chatMobileEmptyFallback .chat-chat-view-empty-icon {
        color: #94a3b8 !important;
        margin-bottom: 14px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #chatMobileEmptyFallback .chat-chat-view-empty-title {
        margin: 0 0 8px 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        letter-spacing: -0.01em;
    }
    #chatMobileEmptyFallback .chat-chat-view-empty-hint {
        margin: 0 auto 16px auto !important;
        font-size: 14px !important;
        color: #64748b !important;
        line-height: 1.5 !important;
        max-width: 320px !important;
    }
    #chatMobileEmptyFallback .chat-chat-view-cta {
        padding: 10px 18px !important;
        border-radius: 9999px !important;
        border: none !important;
        background: #1a1a1a !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        min-width: 220px;
    }
    #chatMobileEmptyFallback .chat-chat-view-cta:active {
        background: #1a1a1a !important;
    }
    #chatMobileEmptyFallback .chat-chat-view-cta:hover {
        background: #1a1a1a !important;
    }

    body.dark-mode #chatMobileEmptyFallback .chat-chat-view-empty-title {
        color: #f1f5f9 !important;
    }
    body.dark-mode #chatMobileEmptyFallback .chat-chat-view-empty-hint {
        color: #94a3b8 !important;
    }
    body.dark-mode #chatMobileEmptyFallback .chat-chat-view-empty-icon {
        color: #94a3b8 !important;
    }

    /* Chat ausgewählt: nur Konversation fullscreen, Kontaktliste ausgeblendet */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatViewSplit {
        display: flex !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel {
        display: none !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    /* Nur #chatMain sichtbar und volle Breite – Platzhalter/New-Contacts nehmen keinen Platz (override Inline-Styles) */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatChatView,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatNewContactsView {
        display: none !important;
        flex: 0 0 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-chat.has-active-contact .chat-popup-content-wrapper #chatMain {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Sections strikt getrennt: pro View nur die zugehörige Content-View sichtbar */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-popup-content-wrapper #chatViewSplit,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-popup-content-wrapper #chatChatView,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-popup-content-wrapper #chatNewContactsView {
        display: none !important;
    }

    /* Anrufe: Content-View füllt den Wrapper (nicht nur absolute Such-Insel sichtbar) */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-popup-content-wrapper #chatCallsView {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
        /* Abstand unter App-Top-Nav – einmal am View, nicht pro Spalten-Header */
        padding-top: calc(80px + env(safe-area-inset-top, 0px)) !important;
        background: #f8f9fa !important;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-popup-content-wrapper #chatCallsView {
        background: #0f0f0f !important;
    }

    /* Calls View Mobile: horizontales Karussell – eine Säule = 100% Breite, Swipe links/rechts, Endlos-Loop */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-history {
        overflow: hidden;
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        width: 100% !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-columns {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: 100% !important;
        scrollbar-width: none;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-columns::-webkit-scrollbar {
        display: none;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border-right: none !important;
        border-bottom: none !important;
        box-sizing: border-box;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        flex-shrink: 0;
        min-height: auto !important;
        padding: 10px 12px 8px !important;
        gap: 6px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-prev,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-next {
        display: flex;
        flex: 1 1 0%;
        min-width: 0;
        max-width: 32vw;
        align-items: flex-end;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-prev {
        justify-content: flex-start;
        text-align: left;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-next {
        justify-content: flex-end;
        text-align: right;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-prev::before {
        content: "\25C0";
        display: inline-block;
        margin-right: 6px;
        font-size: 12px;
        line-height: 1;
        opacity: 0.55;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-next::after {
        content: "\25B6";
        display: inline-block;
        margin-left: 6px;
        font-size: 12px;
        line-height: 1;
        opacity: 0.55;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-center {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        gap: 8px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-label {
        text-align: center;
        font-size: 14px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-hint-called { color: #3f7dcf; opacity: 0.72; }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-hint-accepted { color: #2f8b61; opacity: 0.72; }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-hint-declined { color: #bf5b67; opacity: 0.72; }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-header-hint-missed { color: #7b8794; opacity: 0.72; }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-col-list {
        min-height: 0;
        max-height: none;
        flex: 1 1 0%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding-bottom: 12px;
        box-sizing: border-box;
    }

    /* Anrufe: Suchleiste + Sprachnachrichten-FAB als Flex-Zeile über der Chat-Bottom-Nav (nicht absolut schwebend) */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-bottom-dock {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        margin-top: auto !important;
        padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px) + 80px) !important;
        box-sizing: border-box !important;
        z-index: 4 !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-voicemail-row-label,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-calls .chat-calls-voicemail-row-chevron {
        display: none !important;
    }

    .chat-popup.active.chat-popup-mobile-fullscreen.view-new-contacts .chat-popup-content-wrapper #chatViewSplit,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-new-contacts .chat-popup-content-wrapper #chatChatView,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-new-contacts .chat-popup-content-wrapper #chatCallsView {
        display: none !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-popup-content-wrapper #chatViewSplit,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-popup-content-wrapper #chatChatView,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-popup-content-wrapper #chatCallsView,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-popup-content-wrapper #chatNewContactsView {
        display: none !important;
    }
    /* Mobile: Bei Settings-Ansicht Content-Wrapper einklappen, damit das Settings-Panel den Platz bekommt */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-popup-content-wrapper {
        flex: 0 0 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-panel,
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings #chatSettingsMenu {
        display: flex !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: auto !important;
        flex-direction: column !important;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Settings Section – Mobile: volle Breite, touch-freundlich, lesbare Schrift */
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-panel-header {
        padding: 16px 16px 16px 20px;
        min-height: 60px;
        padding-left: calc(16px + env(safe-area-inset-left, 0));
        flex-shrink: 0;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-panel-header h2 {
        font-size: 18px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-panel-close {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-panel-content {
        padding: 12px 16px 24px;
        padding-left: calc(16px + env(safe-area-inset-left, 0));
        padding-right: calc(16px + env(safe-area-inset-right, 0));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-section {
        padding: 16px 0;
        border-bottom: 1px solid #e9ecef;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-section h3 {
        font-size: 13px;
        margin-bottom: 12px;
        letter-spacing: 0.6px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-options {
        gap: 10px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option {
        min-height: 48px;
        padding: 14px 18px;
        -webkit-tap-highlight-color: transparent;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option-label {
        font-size: 15px;
        line-height: 1.35;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option input[type="checkbox"] {
        width: 48px;
        height: 28px;
        min-width: 48px;
        min-height: 28px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option input[type="checkbox"]::before {
        width: 22px;
        height: 22px;
        top: 3px;
        left: 3px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option input[type="checkbox"]:checked {
        background: #1a1a1a;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option input[type="checkbox"]:checked::before {
        left: 23px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option-full {
        padding: 14px 18px;
        gap: 10px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option-full label {
        font-size: 15px;
        min-height: 24px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-device-row {
        gap: 10px;
        align-items: stretch;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-select {
        flex: 1;
        min-height: 48px;
        padding: 12px 14px;
        font-size: 15px;
    }
    .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-test-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
    }

    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen {
        background: #1a1a1a !important;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper,
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatChatView,
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatViewSplit {
        background: #1a1a1a !important;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel,
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel {
        background: #262626 !important;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-panel-header {
        background: #1a1a1a;
        border-bottom-color: #1a1a1a;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-panel-header h2 {
        color: #f0f0f0;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-panel-close {
        color: #94a3b8;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-panel-close:hover {
        color: #f0f0f0;
        background: #1a1a1a;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-panel,
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings #chatSettingsMenu {
        background: #1a1a1a;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-section {
        border-bottom-color: #1a1a1a;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-section h3 {
        color: #94a3b8;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option {
        background: #262626;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option:hover {
        background: #1a1a1a;
        border-color: #444;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option-label {
        color: #e2e8f0;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option input[type="checkbox"] {
        background: #1a1a1a;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option input[type="checkbox"]:checked {
        background: #1a1a1a;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option-full {
        background: #262626;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-option-full label {
        color: #e2e8f0;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-select {
        background: #262626;
        border-color: #444;
        color: #e2e8f0;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-test-btn {
        background: #262626;
        border-color: #444;
        color: #94a3b8;
    }
    body.dark-mode .chat-popup.active.chat-popup-mobile-fullscreen.view-settings .chat-settings-test-btn:hover {
        background: #1a1a1a;
        border-color: #555;
        color: #e2e8f0;
    }

    /* ===== Bottom-Nav: Chat-Modus ===== */

    /* Chat-Items standardmäßig versteckt */
    .mobile-bottom-nav-chat-items {
        display: none !important;
    }

    /* Verlaufssuche in aktiver Konversation: ersetzt die Chat-Nav-Zeile in der Mitte */
    .mobile-bottom-nav-chat-history-search {
        display: none !important;
        flex-direction: row !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        align-items: center !important;
        align-self: stretch !important;
        gap: 6px !important;
        padding: 0 6px 0 10px !important;
        box-sizing: border-box !important;
    }
    .mobile-bottom-nav-chat-history-search-input {
        flex: 1 1 0%;
        min-width: 0;
        border: none;
        background: transparent;
        font-size: 14px !important;
        line-height: 1.25;
        padding: 4px 4px;
        outline: none;
        color: #1a1a1a;
    }
    .mobile-bottom-nav-chat-history-search-input::placeholder {
        color: #94a3b8;
        font-size: 13px;
        opacity: 1;
    }
    .mobile-bottom-nav-chat-history-search-meta {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        flex-shrink: 0;
    }
    .mobile-bottom-nav-chat-history-search-nav-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        flex-shrink: 0;
    }
    .mobile-bottom-nav-chat-history-search-count {
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        min-width: 28px;
        text-align: center;
        padding: 0 2px;
        line-height: 1;
        align-self: center;
    }
    .mobile-bottom-nav-chat-history-voice-btn.mobile-bottom-nav-chat-history-voice-btn--hidden {
        display: none !important;
    }
    .mobile-bottom-nav-chat-history-search-nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 18px;
        min-width: 30px;
        min-height: 18px;
        padding: 0;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: #1a1a1a;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bottom-nav-chat-history-search-nav-btn:hover,
    .mobile-bottom-nav-chat-history-search-nav-btn:active {
        background: #f1f5f9;
        color: #1a1a1a;
    }
    .mobile-bottom-nav-chat-history-voice-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: #f1f5f9;
        color: #1a1a1a;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bottom-nav-chat-history-voice-btn:hover,
    .mobile-bottom-nav-chat-history-voice-btn:focus-visible {
        background: #e2e8f0;
        color: #1a1a1a;
        outline: none;
    }
    .mobile-bottom-nav-chat-history-voice-btn.recording {
        background: #fee2e2;
        color: #b91c1c;
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35);
        animation: kinma-hist-voice-rec-pulse 1.1s ease-in-out infinite;
    }
    .mobile-bottom-nav-chat-history-voice-btn.uploading {
        opacity: 0.65;
        pointer-events: none;
    }
    @keyframes kinma-hist-voice-rec-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.04); }
    }
    .mobile-bottom-nav.chat-mode.chat-history-search-mode .mobile-bottom-nav-chat-add-island {
        display: none !important;
    }
    .mobile-bottom-nav.chat-mode.chat-history-search-mode .mobile-bottom-nav-chat-items {
        display: none !important;
    }
    .mobile-bottom-nav.chat-mode.chat-history-search-mode .mobile-bottom-nav-chat-history-search {
        display: flex !important;
    }
    body.dark-mode .mobile-bottom-nav-chat-history-search-input {
        color: #e2e8f0;
    }
    body.dark-mode .mobile-bottom-nav-chat-history-search-count {
        color: #94a3b8;
    }
    body.dark-mode .mobile-bottom-nav-chat-history-search-nav-btn:hover,
    body.dark-mode .mobile-bottom-nav-chat-history-search-nav-btn:active {
        background: rgba(255, 255, 255, 0.08);
        color: #e2e8f0;
    }
    body.dark-mode .mobile-bottom-nav-chat-history-voice-btn {
        background: rgba(255, 255, 255, 0.1);
        color: #e2e8f0;
    }
    body.dark-mode .mobile-bottom-nav-chat-history-voice-btn:hover,
    body.dark-mode .mobile-bottom-nav-chat-history-voice-btn:focus-visible {
        background: rgba(255, 255, 255, 0.16);
        color: #f8fafc;
    }
    body.dark-mode .mobile-bottom-nav-chat-history-voice-btn.recording {
        background: rgba(127, 29, 29, 0.45);
        color: #fecaca;
    }

    /* Menü: gespeicherte Sprachnotiz (Neu / Anhören / Löschen) */
    .kinma-chat-hist-voice-menu-wrap {
        position: fixed;
        inset: 0;
        z-index: 100120;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0));
        box-sizing: border-box;
        background: rgba(26, 26, 26, 0.45);
        -webkit-tap-highlight-color: transparent;
    }
    .kinma-chat-hist-voice-menu-panel {
        width: 100%;
        max-width: 360px;
        border-radius: 16px;
        padding: 12px;
        background: #ffffff;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-sizing: border-box;
    }
    .kinma-chat-hist-voice-menu-btn {
        display: block;
        width: 100%;
        padding: 12px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #f8fafc;
        color: #1a1a1a;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .kinma-chat-hist-voice-menu-btn--primary {
        background: #1a1a1a;
        color: #fff;
        border-color: #1a1a1a;
    }
    .kinma-chat-hist-voice-menu-btn:active {
        transform: scale(0.99);
    }
    body.dark-mode .kinma-chat-hist-voice-menu-panel {
        background: #1a1a1a;
        border: 1px solid #1a1a1a;
    }
    body.dark-mode .kinma-chat-hist-voice-menu-btn {
        background: #1a1a1a;
        color: #e2e8f0;
        border-color: #1a1a1a;
    }
    body.dark-mode .kinma-chat-hist-voice-menu-btn--primary {
        background: #6366f1;
        border-color: #6366f1;
        color: #fff;
    }

    .chat-messages .chat-message.chat-history-search-match-active {
        position: relative;
        z-index: 2;
        box-shadow: 0 0 0 2px #f59e0b;
        border-radius: 10px;
    }
    body.dark-mode .chat-messages .chat-message.chat-history-search-match-active {
        box-shadow: 0 0 0 2px #fbbf24;
    }

    /* Wenn Chat aktiv: normale Nav-Items und Zusatz-Inseln verstecken */
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-items-scroll-fade-clip,
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-items,
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-scroll-handle,
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-search-filter-btn,
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-search-input-wrap {
        display: none !important;
    }
    /* Control Panel nur in der normalen Nav – in Chat- und Feedback-Bottom-Nav nicht anzeigen */
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-control-panel-separator,
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-control-panel-wrap,
    .mobile-bottom-nav.mobile-bottom-nav-feedback .mobile-bottom-nav-control-panel-separator,
    .mobile-bottom-nav.mobile-bottom-nav-feedback .mobile-bottom-nav-control-panel-wrap,
    body.feedback-modal-open .mobile-bottom-nav-control-panel-separator,
    body.feedback-modal-open .mobile-bottom-nav-control-panel-wrap,
    body.feedback-annotation-step .mobile-bottom-nav-control-panel-separator,
    body.feedback-annotation-step .mobile-bottom-nav-control-panel-wrap {
        display: none !important;
    }
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-tree-tools-wrap,
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-add-island,
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-story-editor-left,
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-story-editor-publish,
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-search-island {
        display: none !important;
    }
    /* Chat geöffnet: Profil-Bearbeiten links nicht anzeigen (z. B. nach Sprung aus dem Profilmenü) */
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-profile-edit-island {
        display: none !important;
    }

    /* Chat + Suchmodus (Kontakte / Anrufe / neue Kontakte): Mitte = Eingabe wie auf Stammbaum; rechts Schließen-Insel */
    .mobile-bottom-nav.chat-mode.is-search-mode .mobile-bottom-nav-search-input-wrap {
        display: flex !important;
    }
    .mobile-bottom-nav.chat-mode.is-search-mode .mobile-bottom-nav-chat-items {
        display: none !important;
    }
    .mobile-bottom-nav.chat-mode.is-search-mode .mobile-bottom-nav-chat-history-search {
        display: none !important;
    }
    .mobile-bottom-nav.chat-mode.is-search-mode .mobile-bottom-nav-search-island {
        display: flex !important;
    }
    .mobile-bottom-nav.chat-mode.is-search-mode .mobile-bottom-nav-chat-search-island {
        display: none !important;
    }
    .mobile-bottom-nav.chat-mode.is-search-mode .mobile-bottom-nav-chat-right-stack {
        display: none !important;
    }

    /* While typing in chat input on mobile: hide entire bottom chat nav area */
    body.mobile-chat-input-focused .mobile-bottom-nav.chat-mode {
        display: none !important;
    }

    /* Fallback hiding for chat controls/island while typing */
    body.mobile-chat-input-focused .mobile-bottom-nav.chat-mode .mobile-bottom-nav-island-with-label,
    body.mobile-chat-input-focused .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-ai-island,
    body.mobile-chat-input-focused .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-search-island,
    body.mobile-chat-input-focused .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-right-stack {
        display: none !important;
    }

    /* Reclaim reserved bottom space inside mobile fullscreen chat when nav is hidden */
    body.mobile-chat-input-focused .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-body {
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    /* When nav is hidden during typing, remove extra bottom offset */
    body.mobile-chat-input-focused .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-input-container {
        margin-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    /* When nav is hidden, reduce scroll padding accordingly */
    body.mobile-chat-input-focused .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMain .chat-messages,
    body.mobile-chat-input-focused .chat-popup.active.chat-popup-mobile-fullscreen.has-active-contact #chatMessages {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0)) !important;
        overscroll-behavior-y: contain !important;
    }
    /* AI-Switch-Insel: gleicher Insel-Look und Höhe wie zentrale Nav */
    .mobile-bottom-nav-chat-ai-island {
        display: none !important;
        pointer-events: auto;
    }
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-ai-island {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        flex-grow: 0;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        max-width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        z-index: 1;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    /* Plus im linken Slot: KI = violett, Familie = dunkelgrau (Farbe über .mobile-bottom-nav-ai-chat) */
    .mobile-bottom-nav-chat-ai-island > .mobile-bottom-nav-chat-add-island:not([hidden]) {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    /* Nur ein sichtbarer Button im Slot; [hidden] zuverlässig ausblenden */
    .mobile-bottom-nav-chat-filter-btn[hidden],
    .mobile-bottom-nav-chat-back-btn[hidden],
    .mobile-bottom-nav-chat-call-back-btn[hidden] {
        display: none !important;
    }
    .mobile-bottom-nav-chat-filter-btn:not([hidden]),
    .mobile-bottom-nav-chat-back-btn:not([hidden]),
    .mobile-bottom-nav-chat-call-back-btn:not([hidden]) {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    /* Keine dynamischen Untertitel unter Filter/Zurück */
    .mobile-bottom-nav-chat-left-action-btn .mobile-nav-item-label {
        display: none !important;
    }
    /* seltener Fall: Konversation auf Desktop-Split — weder Filter noch unterer Zurück; Insel ausblenden */
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-ai-island.mobile-bottom-nav-chat-left-island--empty {
        display: none !important;
    }
    .mobile-bottom-nav-chat-ai-btn,
    .mobile-bottom-nav-chat-left-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        width: var(--kinma-mbn-btn);
        height: var(--kinma-mbn-btn);
        min-width: var(--kinma-mbn-btn);
        min-height: var(--kinma-mbn-btn);
        max-width: var(--kinma-mbn-btn);
        max-height: var(--kinma-mbn-btn);
        aspect-ratio: 1 / 1;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #1a1a1a;
        cursor: pointer;
        /* Kein Transition beim schnellen Wechsel Filter ↔ Zurück */
        transition: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bottom-nav-chat-ai-btn:active,
    .mobile-bottom-nav-chat-left-action-btn:active {
        opacity: 0.9;
    }
    .mobile-bottom-nav-chat-ai-btn.active,
    .mobile-bottom-nav-chat-left-action-btn.active {
        background: #1a1a1a !important;
        color: #fff !important;
    }
    .mobile-bottom-nav-chat-ai-icon,
    .mobile-bottom-nav-chat-filter-icon {
        flex-shrink: 0;
        width: calc(var(--kinma-mbn-btn) * 0.4);
        height: calc(var(--kinma-mbn-btn) * 0.4);
        max-width: 22px;
        max-height: 22px;
    }
    .mobile-bottom-nav-chat-back-btn {
        background: #1a1a1a !important;
        color: #ffffff !important;
    }
    .mobile-bottom-nav-chat-call-back-btn {
        background: #1a1a1a !important;
        color: #ffffff !important;
    }
    .mobile-bottom-nav-chat-back-btn svg {
        stroke: #ffffff !important;
    }
    .mobile-bottom-nav-chat-call-back-btn svg {
        stroke: #ffffff !important;
    }
    .mobile-bottom-nav-chat-back-btn:hover,
    .mobile-bottom-nav-chat-back-btn:focus-visible,
    .mobile-bottom-nav-chat-call-back-btn:hover,
    .mobile-bottom-nav-chat-call-back-btn:focus-visible {
        background: #262626 !important;
    }

    /* Chat rechts: Suche (Plus nur bei „Zurück“ in der Konversation darüber) */
    .mobile-bottom-nav-chat-right-stack {
        display: none !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex-shrink: 0;
        pointer-events: auto;
    }
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-right-stack {
        display: flex !important;
    }
    /* Chat-Such-Insel: gleicher Insel-Look und Höhe wie zentrale Nav */
    .mobile-bottom-nav-chat-search-island {
        display: none !important;
        pointer-events: auto;
    }
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-search-island {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        padding: 0;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    .mobile-bottom-nav-chat-add-island {
        display: none;
        pointer-events: auto;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: var(--kinma-mbn-island-height);
        min-width: var(--kinma-mbn-island-height);
        height: var(--kinma-mbn-island-height);
        min-height: var(--kinma-mbn-island-height);
        max-height: var(--kinma-mbn-island-height);
        padding: 0;
        box-sizing: border-box;
        border-radius: 9999px;
    }
    .mobile-bottom-nav-chat-add-island:not([hidden]) {
        display: flex !important;
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        border: none;
        box-shadow:
            0 -2px 12px rgba(99, 102, 241, 0.38),
            0 2px 8px rgba(79, 70, 229, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn {
        color: #ffffff;
        background: transparent;
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn svg {
        stroke: #ffffff;
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn:hover,
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn:focus-visible,
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn:active {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }
    .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) {
        background: #1a1a1a;
        border: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }
    .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn {
        color: #ffffff;
        background: transparent;
    }
    .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn svg {
        stroke: #ffffff;
    }
    .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn:hover,
    .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn:focus-visible,
    .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-add-island:not([hidden]) .mobile-bottom-nav-chat-add-island-btn:active {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }
    .mobile-bottom-nav-chat-add-island-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bottom-nav-chat-add-island-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }
    .mobile-bottom-nav-chat-search-island-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #1a1a1a;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bottom-nav-chat-search-island-btn:hover,
    .mobile-bottom-nav-chat-search-island-btn:active {
        background: #f1f5f9;
        color: #1a1a1a;
    }

    /* Chat-Items: Hauptzeile (4 Tabs) + Trennstrich + Schließen rechts */
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-items {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding: 0 6px !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    /* KI-Vollbild: gleiche Chat-Insel wie Family; Familie-only / KI-only Modus-Buttons umschalten */
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-item--family-only {
        display: none !important;
    }
    /* Family/KI-Wechsel: oben in der Leiste / woanders — nicht in der unteren Insel */
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-items [data-chat-nav="switchAi"],
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-items [data-chat-nav="switchFamily"] {
        display: none !important;
    }
    .mobile-bottom-nav.chat-mode:not(.mobile-bottom-nav-ai-chat) .mobile-bottom-nav-chat-item--ai-only {
        display: none !important;
    }

    /* KI-Vollbild: Akzent Lila/Indigo statt Schwarz (#1a1a1a) */
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-back-btn,
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-call-back-btn {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        color: #ffffff !important;
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-back-btn:hover,
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-back-btn:focus-visible,
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-call-back-btn:hover,
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-call-back-btn:focus-visible {
        background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-filter-btn:not([hidden]) {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        color: #ffffff !important;
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-filter-btn:not([hidden]):hover,
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-filter-btn:not([hidden]):focus-visible {
        background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-filter-icon,
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-filter-btn:not([hidden]) svg {
        stroke: #ffffff !important;
        color: #ffffff !important;
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-ai-btn.active,
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-left-action-btn.active {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        color: #ffffff !important;
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-items .mobile-bottom-nav-item.active {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        color: #ffffff !important;
    }
    .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-items .mobile-bottom-nav-item.active svg {
        stroke: #ffffff !important;
        color: #ffffff !important;
    }

    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-back-btn,
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-call-back-btn {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        color: #ffffff !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-back-btn:hover,
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-call-back-btn:hover {
        background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-filter-btn:not([hidden]) {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        color: #ffffff !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-ai-btn.active,
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-left-action-btn.active {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        color: #ffffff !important;
    }
    body.dark-mode .mobile-bottom-nav.chat-mode.mobile-bottom-nav-ai-chat .mobile-bottom-nav-chat-items .mobile-bottom-nav-item.active {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        color: #ffffff !important;
    }

    .mobile-bottom-nav-chat-call-items {
        display: none !important;
    }

    .mobile-bottom-nav.chat-mode.call-mode .mobile-bottom-nav-chat-items,
    .mobile-bottom-nav.chat-mode.call-mode .mobile-bottom-nav-chat-history-search,
    .mobile-bottom-nav.chat-mode.call-mode .mobile-bottom-nav-search-input-wrap,
    .mobile-bottom-nav.chat-mode.call-mode .mobile-bottom-nav-chat-search-island,
    .mobile-bottom-nav.chat-mode.call-mode .mobile-bottom-nav-chat-add-island,
    .mobile-bottom-nav.chat-mode.call-mode .mobile-bottom-nav-chat-right-stack {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .mobile-bottom-nav.chat-mode.call-mode .mobile-bottom-nav-chat-call-items {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    .mobile-bottom-nav.chat-mode.call-mode .mobile-bottom-nav-chat-ai-island {
        display: flex !important;
    }

    .mobile-bottom-nav-chat-call-items .mobile-bottom-nav-item {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 9999px !important;
    }

    .mobile-bottom-nav-chat-call-btn[hidden] {
        display: none !important;
    }

    .mobile-bottom-nav-chat-call-btn {
        background: #f8fafc !important;
        color: #1a1a1a !important;
    }

    .mobile-bottom-nav-chat-call-btn-label {
        display: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .mobile-bottom-nav-chat-call-btn.muted,
    .mobile-bottom-nav-chat-call-btn.active {
        background: #1a1a1a !important;
        color: #ffffff !important;
    }

    .mobile-bottom-nav-chat-call-btn-end {
        background: #ef4444 !important;
        color: #ffffff !important;
    }

    .mobile-bottom-nav.chat-mode.call-mode.call-mode-pending .mobile-bottom-nav-chat-call-items {
        justify-content: center !important;
    }

    .mobile-bottom-nav.chat-mode.call-mode.call-mode-pending .mobile-bottom-nav-chat-call-btn-end {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        gap: 8px !important;
    }

    .mobile-bottom-nav.chat-mode.call-mode.call-mode-pending .mobile-bottom-nav-chat-call-btn-label {
        display: inline-flex !important;
    }

    .mobile-bottom-nav-chat-call-btn-end:hover,
    .mobile-bottom-nav-chat-call-btn-end:focus-visible {
        background: #dc2626 !important;
        color: #ffffff !important;
    }

    body.mobile-chat-input-focused .mobile-bottom-nav.chat-mode.call-mode {
        display: flex !important;
    }

    body.mobile-chat-input-focused .mobile-bottom-nav.chat-mode.call-mode .mobile-bottom-nav-island-with-label,
    body.mobile-chat-input-focused .mobile-bottom-nav.chat-mode.call-mode .mobile-bottom-nav-chat-ai-island {
        display: flex !important;
    }

    .mobile-bottom-nav-chat-items-main {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .mobile-bottom-nav-chat-items-main::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-bottom-nav-chat-close-sep {
        flex-shrink: 0 !important;
        width: 1px !important;
        align-self: stretch !important;
        min-height: 28px !important;
        margin: 0 4px 0 6px !important;
        background: #e2e8f0 !important;
        border-radius: 1px !important;
    }

    /* Chat-Nav-Buttons: same size as normal nav items */
    .mobile-bottom-nav-chat-items .mobile-bottom-nav-item {
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    /* Chat-Insel: nur Icons (6+ Tabs) – Untertitel würden sich überlappen */
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-items .mobile-nav-item-label {
        display: none !important;
    }

    /* Aktiver Chat-Nav-Button */
    .mobile-bottom-nav-chat-items .mobile-bottom-nav-item.active {
        background: #1a1a1a !important;
        color: #fff !important;
    }

    /* Profil-Avatar im Chat-Nav */
    .mobile-bottom-nav-chat-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 700;
        color: #fff;
        line-height: 1;
    }

    .mobile-bottom-nav-chat-close-btn {
        flex-shrink: 0 !important;
        opacity: 1;
    }

    /* Mobile Chatbox: kein Separator + kein X-Button (Family + AI) */
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-close-sep,
    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-close-btn {
        display: none !important;
    }
    .mobile-bottom-nav-chat-close-btn:hover,
    .mobile-bottom-nav-chat-close-btn:focus-visible {
        background: #f1f5f9 !important;
        color: #1a1a1a !important;
    }
    .mobile-bottom-nav-chat-close-btn:active {
        opacity: 1;
    }

    body.dark-mode .mobile-bottom-nav-chat-close-sep {
        background: #1a1a1a !important;
    }
    body.dark-mode .mobile-bottom-nav-chat-close-btn:hover,
    body.dark-mode .mobile-bottom-nav-chat-close-btn:focus-visible {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #e2e8f0 !important;
    }
    body.dark-mode .mobile-bottom-nav-chat-call-btn {
        background: rgba(26, 26, 26, 0.88) !important;
        color: #e2e8f0 !important;
    }
    body.dark-mode .mobile-bottom-nav-chat-call-btn.muted,
    body.dark-mode .mobile-bottom-nav-chat-call-btn.active {
        background: #e2e8f0 !important;
        color: #1a1a1a !important;
    }
    body.dark-mode .mobile-bottom-nav-chat-call-btn-end {
        background: #ef4444 !important;
        color: #ffffff !important;
    }

    /*
     * Chat-Section (view-chat, Kontaktliste): rechter Streifen schließen.
     * chat-content-area.css nutzt Desktop 280px-Split; ohne :not(.chat-popup-mobile-fullscreen) konnte
     * flex-direction:row + feste Breite unter dem Mobile-Stack weiter greifen.
     */
    body .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit,
    body .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper .chat-view-split {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        align-content: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    body .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-contacts-panel,
    body .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper .chat-view-split .chat-contacts-panel {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        /* Platz über der schwebenden Bottom-Nav-Insel (wie chat-input-container bei aktivem Chat) */
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0)) !important;
    }
    body .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper #chatViewSplit .chat-chat-right-panel,
    body .chat-popup.active.chat-popup-mobile-fullscreen.view-chat:not(.has-active-contact) .chat-popup-content-wrapper .chat-view-split .chat-chat-right-panel {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: none !important;
    }

    /*
     * Nachrichtenliste: gleiche vertikale Abstände wie Desktop (modules/chat.css).
     * Touch-Viewport / spätere Regeln können Margins sonst minimal anders wirken lassen.
     */
    #chatMain .chat-messages,
    #chatMessages.chat-messages {
        flex-direction: column !important;
        gap: 0 !important;
    }
    #chatMain .chat-messages .chat-message,
    #chatMessages > .chat-message {
        gap: 6px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    #chatMain .chat-messages .chat-message.chat-message-user,
    #chatMessages > .chat-message.chat-message-user {
        gap: 3px !important;
    }
    /* >5 Min seit vorheriger Nachricht — Abstand (Absender egal) */
    #chatMain .chat-messages .chat-message-time-cluster-start,
    #chatMessages > .chat-message-time-cluster-start,
    #chatMain .chat-messages .chat-message + .chat-message.chat-message-time-cluster-start,
    #chatMessages > .chat-message + .chat-message.chat-message-time-cluster-start {
        margin-top: 16px !important;
        margin-bottom: 0 !important;
    }

    #chatMain .chat-messages .chat-message + .chat-message.chat-message-after-side-break:not(.chat-message-time-cluster-start),
    #chatMessages > .chat-message + .chat-message.chat-message-after-side-break:not(.chat-message-time-cluster-start) {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }

    #chatMain .chat-messages .chat-message + .chat-message:has(.chat-message-quote-stack),
    #chatMessages > .chat-message + .chat-message:has(.chat-message-quote-stack),
    #chatMain .chat-messages .chat-message + .chat-message.chat-message-user.chat-message-user-has-outgoing-quote,
    #chatMessages > .chat-message + .chat-message.chat-message-user.chat-message-user-has-outgoing-quote,
    #chatMain .chat-messages .chat-message.chat-message-user-has-outgoing-quote + .chat-message,
    #chatMessages > .chat-message.chat-message-user-has-outgoing-quote + .chat-message,
    #chatMain .chat-messages .chat-message.chat-message-user-has-outgoing-quote + .chat-message.chat-message-user-has-outgoing-quote,
    #chatMessages > .chat-message.chat-message-user-has-outgoing-quote + .chat-message.chat-message-user-has-outgoing-quote,
    #chatMain .chat-messages .chat-message + .chat-message.chat-message-bot.chat-message-bot-has-incoming-quote,
    #chatMessages > .chat-message + .chat-message.chat-message-bot.chat-message-bot-has-incoming-quote,
    #chatMain .chat-messages .chat-message.chat-message-bot-has-incoming-quote + .chat-message,
    #chatMessages > .chat-message.chat-message-bot-has-incoming-quote + .chat-message,
    #chatMain .chat-messages .chat-message.chat-message-bot-has-incoming-quote + .chat-message.chat-message-bot-has-incoming-quote,
    #chatMessages > .chat-message.chat-message-bot-has-incoming-quote + .chat-message.chat-message-bot-has-incoming-quote {
        margin-top: 20px !important;
    }
}


/* Personen-Button: kleines Zahnrad oben rechts am Icon (Mobile + Desktop) */
.mobile-bottom-nav-icon-with-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Person etwas nach links für mehr Abstand zum Zahnrad */
.nav-icon-persons-badge .nav-icon-persons-figure {
    transform: translateX(-3px);
}
.mobile-bottom-nav-icon-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 0.5em;
    height: 0.5em;
    min-width: 10px;
    min-height: 10px;
    max-width: 12px;
    max-height: 12px;
    color: #1a1a1a;
    opacity: 1;
    pointer-events: none;
}
/* Zahnrad bei Person verwalten etwas größer (Desktop + Mobile gleiches Icon) */
.nav-item .mobile-bottom-nav-icon-badge.nav-icon-badge-gear,
.left-nav-cluster .nav-item .mobile-bottom-nav-icon-badge.nav-icon-badge-gear {
    color: inherit;
    opacity: 1;
    min-width: 12px;
    min-height: 12px;
    max-width: 14px;
    max-height: 14px;
}
/* Zahnrad beim ausgewählten Personen-Button weiß (Mobile Bottom Nav) */
.mobile-bottom-nav-item.active .mobile-bottom-nav-icon-badge.nav-icon-badge-gear {
    color: #fff !important;
}

/* Geschichten: Personenwahl-Modal — linker FAB = Verwerfen, rechter FAB = Weiter
   Gleiche Viewport-Regel wie .mobile-bottom-nav (max-width: 1024px oder kurzes Fenster) */
@media (max-width: 1024px) {
    body.story-pre-selection-open #mobile-bottom-nav-add-island {
        background: #fef2f2 !important;
        border-color: #fecaca !important;
        box-shadow: 0 -2px 12px rgba(220, 38, 38, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
        color: #dc2626 !important;
    }

    body.story-pre-selection-open #mobile-bottom-nav-add-island .mobile-bottom-nav-add-btn {
        color: #dc2626 !important;
    }

    body.story-pre-selection-open #mobile-bottom-nav-add-island .mobile-bottom-nav-add-btn:hover,
    body.story-pre-selection-open #mobile-bottom-nav-add-island .mobile-bottom-nav-add-btn:focus-visible {
        background: rgba(220, 38, 38, 0.12) !important;
    }

    body.story-pre-selection-open #mobile-bottom-nav-search-island .mobile-bottom-nav-search-btn {
        background: #15803d !important;
        color: #fff !important;
    }

    body.story-pre-selection-open #mobile-bottom-nav-search-island .mobile-bottom-nav-search-btn:hover,
    body.story-pre-selection-open #mobile-bottom-nav-search-island .mobile-bottom-nav-search-btn:focus-visible {
        background: #166534 !important;
    }

    body.dark-mode.story-pre-selection-open #mobile-bottom-nav-add-island {
        background: rgba(127, 29, 29, 0.45) !important;
        border-color: rgba(248, 113, 113, 0.4) !important;
        color: #fecaca !important;
    }

    body.dark-mode.story-pre-selection-open #mobile-bottom-nav-add-island .mobile-bottom-nav-add-btn {
        color: #fecaca !important;
    }

    body.dark-mode.story-pre-selection-open #mobile-bottom-nav-add-island .mobile-bottom-nav-add-btn:hover,
    body.dark-mode.story-pre-selection-open #mobile-bottom-nav-add-island .mobile-bottom-nav-add-btn:focus-visible {
        background: rgba(248, 113, 113, 0.15) !important;
    }

    body.dark-mode.story-pre-selection-open #mobile-bottom-nav-search-island .mobile-bottom-nav-search-btn {
        background: #22c55e !important;
        color: #1a1a1a !important;
    }

    body.dark-mode.story-pre-selection-open #mobile-bottom-nav-search-island .mobile-bottom-nav-search-btn:hover,
    body.dark-mode.story-pre-selection-open #mobile-bottom-nav-search-island .mobile-bottom-nav-search-btn:focus-visible {
        background: #16a34a !important;
    }
}

/*
 * Chat-Bottom-Nav: bei schmalen Viewports Inselmaße erneut setzen (gleiche Breakpoints wie oben).
 */
@media (max-width: 400px) {
    .mobile-bottom-nav-chat-right-stack {
        gap: 6px !important;
    }

    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-ai-island {
        width: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        max-width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav.chat-mode .mobile-bottom-nav-chat-search-island {
        width: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
    }

    .mobile-bottom-nav-chat-add-island {
        width: var(--kinma-mbn-island-height) !important;
        min-width: var(--kinma-mbn-island-height) !important;
        height: var(--kinma-mbn-island-height) !important;
        min-height: var(--kinma-mbn-island-height) !important;
        max-height: var(--kinma-mbn-island-height) !important;
    }
}

@media (max-width: 360px) {
    .mobile-bottom-nav-chat-right-stack {
        gap: 4px !important;
    }
}