/* ===================================================================
   mobile.css – Smartphone-Regeln (Konzept: Konzepte/Mobile-Ansicht-Konzept.md)
   Phase 1 (2026-09-07): Chat-Fußzeile und Kopfzeile (Agenten-Chat + Dokument-Chat),
   Suchleiste der Dokument-Suche.
   Regeln: NUR additive Breakpoint-Regeln (< 768 px), keine Desktop-Änderung,
   kein JavaScript. Ein Ort zum Prüfen und Zurücknehmen.
   =================================================================== */
@media (max-width: 767.98px) {

    /* --- iOS Safari: 100vh reicht unter die Browser-Leiste; die Seitenleiste verlor unten Profil/Abmelden (Martin, iPhone 07.09.).
       100dvh = tatsächlich sichtbare Höhe; Safe-Area für Geräte mit Home-Indikator. --- */
    .app-container,
    .app-sidebar,
    .app-content {
        height: 100dvh;
    }
    .app-sidebar {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow-y: auto;
    }

    /* --- Chat-Fußzeile: Eingabe volle Breite, Werkzeuge in zweiter Zeile, Senden rechts --- */
    .agent-chat-footer #agent-chat-dropzone,
    .agent-chat-footer #chat-input-dropzone {
        flex-wrap: wrap;
    }
    .agent-chat-footer .agent-input {
        order: -1;                 /* Textfeld zuerst, eigene Zeile */
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        font-size: 16px;           /* iOS: kein Auto-Zoom beim Fokus unter 16 px */
    }
    .agent-chat-footer .agent-send-btn {
        margin-left: auto;         /* Senden rechts unten */
    }
    .agent-chat-footer .agent-icon-btn,
    .agent-chat-footer .agent-send-btn {
        min-width: 44px;           /* Touch-Ziel */
        min-height: 44px;
    }
    .agent-chat-footer {
        padding: 8px 10px !important;
    }
    .agent-chat-toolbar {
        flex-wrap: wrap;
        row-gap: .35rem;
    }

    /* --- Chat-Kopfzeile: Name eine Zeile, Modell/Anbieter darunter mit Ellipsis --- */
    .agent-chat-header .flex-grow-1 {
        min-width: 0;              /* erlaubt Ellipsis im Flex-Kind */
    }
    .agent-chat-header h4 {
        font-size: 1.05rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .agent-chat-header #agent-meta {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .agent-chat-header .btn.me-3 {
        margin-right: .5rem !important;
    }
    .agent-chat-header .agent-avatar-sm.me-3 {
        margin-right: .5rem !important;
    }

    /* --- Dokument-Suche: Hinweiszeile + Schalter umbrechen statt Wort-für-Wort-Spalte --- */
    .search-container > .d-flex.align-items-center.mt-2.pt-2.border-top {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
    .search-container > .d-flex.align-items-center.mt-2.pt-2.border-top > .text-muted.small {
        flex: 1 1 100%;
    }

    /* ===== Phase 2 (08.09.2026): Dokument-Suche – Trefferkarten und Ergebnisleiste ===== */
    .search-container .card-body.p-4,
    #searchResultsContainer .card-body.p-4 { padding: 1rem !important; }
    #searchResultsContainer .wt-toolbar { flex-wrap: wrap; gap: .5rem; }
    #searchResultsContainer .wt-toolbar .ms-auto { margin-left: 0 !important; }
    .wt-pills { flex-wrap: wrap; }
    .search-result-card .card-body { padding: .85rem; }
    .search-result-card .col-md-1 { display: flex; align-items: center; padding-bottom: 0; }
    .search-result-card .col-md-1 .form-check { margin-bottom: 0; }
    .search-result-card .col-md-11 { padding-top: .25rem; }
    .search-result-card .d-flex.justify-content-between.align-items-start { flex-wrap: wrap; gap: .35rem; }
    .search-result-card .card-title { flex: 1 1 100%; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
    .search-result-card .result-actions { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-start; }
    .search-result-card .result-action { min-width: 40px; min-height: 40px; }
    .search-result-card .score-badge { margin-top: 0 !important; }
    .search-result-card .text-muted.small.mb-2 { overflow-wrap: anywhere; }

    /* ===== Phase 3 (08.09.2026): Anmeldung, Onboarding, Profil ===== */
    .login-card, .login-container, .auth-card { max-width: 100%; }
    input.form-control, select.form-select, textarea.form-control { font-size: 16px; } /* iOS: kein Auto-Zoom */
    .onboarding-modal { width: auto; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: 8px; overflow-y: auto; }
    .profile-hero-body .d-flex.flex-wrap { row-gap: .5rem; }
    .agent-chat-footer { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Mobiler Menü-Knopf (sidebar.js: fixed 10px/10px, ~38 px) überlagerte den Zurück-Pfeil des Chat-Kopfs (Martin, iPhone 08.09.) */
    .agent-chat-header { padding-left: 50px !important; }
    #mobile-menu-btn { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
}