/* =============================================================================
   RWD QM-Assistent – mobile.css   (App-artige Mobil-Shell, Muster Teamplanung)
   Regeln greifen nur ≤1023px; Desktop bleibt unberuehrt.
   ============================================================================= */

/* Mobile-Chrome auf dem Desktop ausblenden */
.qm-topbar, .qm-tabbar, .qm-drawer-overlay { display: none; }

@media (max-width: 1023px) {

    /* ── Grundlagen / App-Feel ── */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { -webkit-tap-highlight-color: transparent; }
    .app-shell { min-height: 100dvh; }
    input, select, textarea { font-size: 16px !important; }  /* iOS-Zoom verhindern */

    /* ── Inhaltsspalte: Platz fuer Top-Bar + Tab-Leiste ── */
    .main {
        margin-left: 0 !important;
        min-width: 0; max-width: 100vw; overflow-x: clip;
        padding: 14px 12px;
        padding-top: calc(60px + env(safe-area-inset-top));
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    /* ── Top-Bar (dunkelblau, Titel mittig) ── */
    .qm-topbar {
        display: flex; align-items: center; gap: 4px;
        position: fixed; top: 0; left: 0; right: 0;
        height: calc(52px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 6px 0;
        background: var(--rwd-blue-900);
        z-index: 120;
        box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    }
    .qm-topbar-btn {
        flex: 0 0 44px; height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: none; color: #fff; cursor: pointer;
        border-radius: 10px; padding: 0;
    }
    .qm-topbar-btn:active { background: rgba(255,255,255,0.14); }
    .qm-topbar-ghost { pointer-events: none; }
    .qm-topbar-title {
        flex: 1; text-align: center; color: #fff;
        font-size: 17px; font-weight: 700; letter-spacing: -0.2px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .qm-burger { position: relative; width: 22px; height: 16px; display: inline-block; }
    .qm-burger span {
        position: absolute; left: 0; width: 22px; height: 2px;
        background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s;
    }
    .qm-burger span:nth-child(1) { top: 0; }
    .qm-burger span:nth-child(2) { top: 7px; }
    .qm-burger span:nth-child(3) { top: 14px; }
    .qm-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .qm-burger.open span:nth-child(2) { opacity: 0; }
    .qm-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── Bottom-Tab-Leiste ── */
    .qm-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0;
        background: #fff; border-top: 1px solid var(--border);
        padding: 4px 4px env(safe-area-inset-bottom);
        z-index: 120;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    }
    .qm-tab {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; padding: 6px 2px; min-height: 52px;
        background: none; border: none; cursor: pointer;
        color: #9aa0a6 !important; font-size: 11px; font-weight: 600;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s;
    }
    .qm-tab .qm-tab-ico { font-size: 21px; line-height: 1; }
    .qm-tab .qm-tab-lbl {
        line-height: 1.2; max-width: 100%;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .qm-tab.active { color: var(--rwd-blue-700) !important; }
    .qm-tab.active .qm-tab-ico { transform: scale(1.06); }
    .qm-tab:active .qm-tab-ico { transform: scale(0.88); transition: transform .08s ease; }

    /* ── Sidebar als Bottom-Sheet (Drawer) ── */
    .qm-drawer-overlay {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.45);
        opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
        z-index: 240;
    }
    .qm-drawer-overlay.open { opacity: 1; pointer-events: auto; }

    .sidebar {
        width: 100% !important;
        left: 0 !important; right: 0 !important;
        top: auto !important; bottom: 0 !important;
        height: auto !important; max-height: 84vh;
        border-radius: 18px 18px 0 0;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        transform: translateY(110%);
        transition: transform .28s cubic-bezier(.2,.8,.2,1);
        z-index: 250;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar.open { transform: translateY(0); box-shadow: 0 -8px 28px rgba(0,0,0,0.28); }
    .sidebar-header { position: relative; }
    .sidebar-header::before {
        content: ''; display: block;
        width: 40px; height: 4px;
        background: rgba(255,255,255,0.32); border-radius: 3px;
        margin: 0 auto 12px;
    }
    .sidebar .nav-link { padding: 13px 14px; font-size: 15px; }
    .nav-mehr, .nav-mehr-liste { display: contents; }
    .sidebar .nav-link:active { background: rgba(255,255,255,0.18); }

    /* "Zum Dashboard"-FAB ueber die Tab-Leiste heben */
    .back-to-dashboard {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        right: 14px !important;
    }
    .back-to-dashboard span { display: none; }

    /* Buttons + Modals fingerfreundlich */
    .btn { min-height: 42px; }
    .modal { width: calc(100vw - 20px) !important; max-width: 100% !important; }
    .kpi-grid { gap: 12px; }

    /* ══ KI-Chat mobil ═══════════════════════════════════════════════════
       Auf 375 px Breite ist die groesste Verbesserung, WEGZULASSEN.

       Der Assistent bekommt deshalb keine Sprechblase mehr: Sein Text IST
       der Inhalt der Seite, keine Wortmeldung daneben. Das spart den Rahmen,
       die Fuellung und die 8 % Randbreite - auf einem Handy sind das rund
       vier Zeichen je Zeile, und der Text liest sich ruhiger. Die Blase
       bleibt dem Nutzer: Sie markiert, was ER gesagt hat, und davon steht
       wenig im Verlauf.

       Zweiter Punkt: Die Gespraechsliste war mobil schlicht ausgeblendet.
       Damit kam man an kein einziges frueheres Gespraech heran und konnte
       auch kein neues anfangen. Sie liegt jetzt als Bogen unter einer
       eigenen Leiste - erreichbar, aber nicht im Weg.
       ═════════════════════════════════════════════════════════════════════ */

    .chat-layout { gap: 0; }
    /* ── Nur der Verlauf scrollt ──────────────────────────────────────────
       Befund des Users: Beim Wischen zog die ganze Seite mit, samt Kopfleiste.
       Ursache war, dass der Rumpf ueberhaupt scrollbar blieb - die Chat-Hoehe
       stand auf einer Rechnung mit festen Zahlen, und schon ein paar Pixel
       Abweichung machen den Rumpf scrollbar. iOS haengt dann die Kopfleiste
       beim Gummiband-Effekt hinterher.

       Jetzt wird der Rumpf auf der Chat-Seite festgesetzt und die Inhalts-
       spalte exakt bildschirmhoch gemacht; die Polsterung, die ohnehin Platz
       fuer Kopf- und Tab-Leiste laesst, bestimmt den Rest. Gerechnet wird
       nichts mehr. */
    html:has(.chat-layout), body:has(.chat-layout) {
        height: 100%; overflow: hidden; overscroll-behavior: none;
    }
    body:has(.chat-layout) .main {
        height: 100dvh; overflow: hidden;
    }
    .chat-layout { height: 100%; min-height: 0; }
    .chat-verlauf { overscroll-behavior: contain; }

    /* Rahmen und Ecken weg: Auf dem Handy ist der Chat die Seite, keine Karte darin. */
    .chat-main {
        border: none; border-radius: 0; background: transparent;
    }

    /* ── Leiste: Verlauf | Titel | neues Gespraech ── */
    .chat-topleiste {
        display: flex; align-items: center; gap: 4px;
        padding: 2px 0 8px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 4px;
    }
    .chat-top-btn {
        flex: 0 0 40px; height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: none; border-radius: 10px;
        font-size: 19px; color: var(--rwd-blue-700); cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .chat-top-btn:active { background: #eef4fa; }
    .chat-top-titel {
        flex: 1; min-width: 0; text-align: center;
        font-size: 13.5px; font-weight: 600; color: var(--text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ── Gespraechsliste als Bogen von unten ── */
    .chat-sessions-overlay {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,0.45);
        opacity: 0; pointer-events: none; transition: opacity .25s ease;
        z-index: 260;
    }
    .chat-layout.verlauf-offen .chat-sessions-overlay { opacity: 1; pointer-events: auto; }
    .chat-sessions {
        position: fixed; left: 0; right: 0; bottom: 0;
        max-height: 76vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        background: #fff; border-radius: 18px 18px 0 0;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
        transform: translateY(110%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
        z-index: 270; flex: none;
    }
    .chat-layout.verlauf-offen .chat-sessions {
        transform: translateY(0); box-shadow: 0 -8px 28px rgba(0,0,0,0.28);
    }
    .chat-sessions::before {
        content: ''; display: block; width: 40px; height: 4px;
        background: var(--border); border-radius: 3px; margin: 0 auto 12px;
    }
    .chat-session-item { padding: 12px 13px; margin-bottom: 8px; }
    .chat-session-titel { font-size: 14px; }

    /* ── Verlauf: Lesefluss statt Blasenwand ── */
    .chat-verlauf {
        padding: 10px 2px 10px; gap: 18px;
        overscroll-behavior: contain;
    }
    .chat-msg { max-width: 100%; }
    .chat-msg.user { max-width: 85%; }
    .chat-bubble { font-size: 15.5px; line-height: 1.65; }

    /* Der Assistent: nackter Text ueber die volle Breite. */
    .chat-msg.assistant .chat-bubble {
        background: transparent; padding: 0; border-radius: 0;
        color: var(--text);
    }
    /* Der Nutzer: eine ruhige, helle Blase - nicht das kraeftige Blau.
       Auf einer ganzen Bildschirmbreite waere das eine Leuchtflaeche. */
    .chat-msg.user .chat-bubble {
        background: #eef1f5; color: var(--text);
        border-radius: 18px; border-bottom-right-radius: 6px;
        padding: 10px 14px;
    }
    .chat-msg.assistant .chat-bubble > :first-child { margin-top: 0; }
    .chat-msg.assistant .chat-bubble > :last-child { margin-bottom: 0; }
    /* Tabellen und Codebloecke duerfen die Seite nicht breiter machen. */
    .chat-bubble pre, .chat-bubble table {
        max-width: 100%; overflow-x: auto; display: block;
    }

    /* ── Eingabe: eine gerundete Karte, Knoepfe darin ── */
    .chat-eingabe {
        gap: 2px; align-items: flex-end;
        padding: 5px 5px 5px 4px;
        background: #fff; border: 1px solid var(--border);
        border-top: 1px solid var(--border);
        border-radius: 24px;
        box-shadow: 0 2px 12px rgba(20,55,94,.09);
    }
    .chat-eingabe textarea {
        border: none; background: transparent; padding: 10px 4px;
        line-height: 1.45; max-height: 40vh;
    }
    .chat-eingabe textarea:focus { border-color: transparent; }
    /* Runde, flache Knoepfe - der Rahmen der Karte traegt sie schon. */
    /* min-height muss mit: Die allgemeine Touch-Regel .btn { min-height: 42px }
       macht aus dem runden Knopf sonst ein Ei. */
    .chat-anhang-btn, .chat-mikro {
        min-width: 40px; width: 40px; height: 40px; min-height: 40px;
        border-radius: 999px; border: none; background: transparent; font-size: 18px;
    }
    .chat-senden {
        min-width: 40px; width: 40px; height: 40px; min-height: 40px;
        border-radius: 999px; font-size: 16px; padding: 0;
    }
    .chat-senden:disabled { opacity: .35; }

    /* Intro ohne Riesen-Emoji: auf dem Handy frisst es eine halbe Seite. */

    /* Der Freigabe-Knopf traegt hier nur das Verb - die Erklaerung dahinter
       brach auf eine zweite Zeile um und kostete Hoehe, die dem Verlauf fehlt. */
    .nur-breit { display: none; }
    .erp-streifen { padding: 8px 2px 0; gap: 6px; }
    .erp-karte { padding: 9px 11px; }
    .erp-karte-knoepfe { gap: 6px; margin-top: 8px; }
    .erp-karte-knoepfe .btn { flex: 1 1 auto; font-size: 13.5px; }
    /* Etwas mehr Luft zwischen den Beitraegen: Ohne Blase am Assistenten ist
       der Abstand das Einzige, was einen Beitrag vom naechsten trennt. */
    .chat-verlauf { gap: 22px; }

    .chat-intro { padding: 12px 6px; }
    .chat-intro-icon { font-size: 30px; margin-bottom: 4px; }
    .chat-beispiel { font-size: 13.5px; padding: 9px 14px; }
}

/* ── Sehr kleine Phones ── */
@media (max-width: 480px) {
    .main { padding-left: 10px; padding-right: 10px; }
    .qm-tab .qm-tab-lbl { font-size: 10px; }
    .qm-topbar-title { font-size: 16px; }
    h1 { font-size: 19px; }
}