/* Shared phone layout: constrain content, not vertical scrolling or map/image gestures. */
@media (max-width: 768px), (max-width: 1024px) and (pointer: coarse) {
    html, body {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }
    @supports (overflow: clip) {
        html, body { overflow-x: clip !important; }
    }

    body { overflow-wrap: anywhere; }
    .flex > *, .grid > *, .modal > *, .modal-content,
    .tab-panel, .card, .shell > *, .hero-top > *, .summary-grid > *,
    .package-grid > *, .pay-method-list > * {
        min-width: 0;
        max-width: 100%;
    }
    input, select, textarea, audio, video, iframe {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }
    /* iOS date controls have an intrinsic minimum width unless appearance is reset. */
    input[type="date"], input[type="time"], input[type="datetime-local"] {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        min-width: 0 !important;
        min-inline-size: 0 !important;
    }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }

    /* Vertical panels must not acquire a second scroll axis from a long child. */
    .overflow-y-auto, .overflow-auto, .modal-content, .smart-preview {
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }
    /* Chips and filters remain available by wrapping onto subsequent rows. */
    .flex.overflow-x-auto {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .flex.overflow-x-auto > * { white-space: normal; }
    .module-modal-actions { flex-wrap: wrap; }

    .mobile-safe-table,
    .modal [style*="overflow-x"],
    .card > div[style*="overflow-x"],
    #tab-users .card > div[style*="overflow-x"],
    #tab-broadcasts .card > div[style*="overflow-x"],
    .mobile-safe-table-wrap {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .card table, .modal table, .mobile-safe-table table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    .card th, .card td, .modal th, .modal td,
    #tab-broadcasts table th, #tab-broadcasts table td,
    #user-table-body td {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Admin cards use inline desktop flex rows and fixed table column widths. */
    .card [style*="display: flex"], .card [style*="display:flex"] {
        flex-wrap: wrap !important;
        min-width: 0;
        max-width: 100%;
    }
    .card [style*="display: flex"] > *, .card [style*="display:flex"] > *,
    .voice-column, .voice-row, .voice-select-group {
        min-width: 0 !important;
        max-width: 100%;
    }
    .voice-modes-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .voice-select-group { flex-wrap: wrap; }
    #tab-users col { width: auto !important; min-width: 0 !important; }

    /* The RSS desktop sidebar otherwise consumes most of a narrow dialog. */
    #rssAdminModal > div { overflow-y: auto; overflow-x: hidden; }
    #rssAdminModal > div > .flex-1.flex { flex-direction: column; flex: none; overflow: visible; }
    #rssAdminModal .flex-1.flex-col, #rssAdminFeedsList {
        flex: none;
        width: 100%;
        min-width: 0;
        overflow: visible;
    }
    #rssAdminModal > div > .p-6 { flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
    #rssAdminModal h3 > span { flex-shrink: 0; }
    #rssAdminModal .module-modal-actions { margin-left: auto; }
    #rssConfigModal > div, #settingsModal .modal-content, .modal-card {
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    #rssConfigModal > div > * { flex-shrink: 0; }
    .module-flow-header { flex-wrap: wrap; }
    .module-flow-header > div:first-child { flex: 1 1 12rem; }
    .module-flow-status { flex-shrink: 0; }
    #rssAdminModal .w-48 {
        width: 100%;
        max-height: 25vh;
        flex-shrink: 0;
    }
    #rssAdminModal input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
    #rssAdminModal .min-w-\[200px\] { flex: 1 0 100%; }
    #authDiagnosticsCard > .flex { flex-wrap: wrap; }
    #authDiagnosticsCard > .flex > .flex { flex-shrink: 0; }
    #legacyAppHeader .h-16 { height: auto; min-height: 4rem; flex-wrap: wrap; gap: 12px; padding-block: 12px; }
    #legacyAppHeader button { flex-shrink: 0; }
    #legacyAppHeader .relative > .flex { flex-wrap: wrap; }
    #rssAdminModal .p-4.flex { flex-wrap: wrap; }
    #diaryHistoryOfflineBar, #trackHistoryOfflineBar {
        width: max-content;
        max-width: calc(100% - 24px);
        flex-wrap: wrap;
    }
}
/* Keep a readable photo title when date and duration cannot share a 320px row. */
#userRecycleBinModal { z-index: 3000010 !important; }
#adminAuditModal { z-index: 3000011 !important; }
@media (max-width: 360px) {
    #adminAuditModal > div > div:first-child > div:first-child {
        flex-wrap: wrap;
        gap: 8px;
    }
    #adminAuditModal > div > div:first-child > div:first-child > div:first-child {
        min-width: 0;
        flex: 1 1 100%;
    }
    #adminAuditModal > div > div:first-child h3 > span { display: none; }
    #userRecycleBinModal > div > div:first-child {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
    }
    #userRecycleBinModal > div > div:first-child > div:first-child {
        min-width: 0;
        flex: 1 1 100%;
    }
    #userRecycleBinModal .module-modal-actions {
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    #meetingDetailModal .modal-content > .flex:first-child {
        flex-wrap: wrap;
        min-width: 0;
    }
    #meetingDetailModal .module-modal-actions {
        margin-left: auto;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    #playlist .feed-main-line { flex-wrap: wrap; }
    #playlist .feed-meta-line {
        flex-basis: 100%;
        justify-content: flex-end;
        margin-left: 0;
        padding-left: 0;
    }
}

/* Short landscape screens need a way to reach expanded filters and controls. */
#trackModal { z-index: 2000000 !important; }
#trackFixFreshness { top: .5rem; right: .5rem; z-index: 500; }
#liveTrackMapContainer > [aria-label="轨迹地图视角"] { top: 2.5rem; right: .5rem; z-index: 500; }
@media (max-width: 360px) {
    #trackModal.track-view-live #trackHeader { flex-wrap: wrap; }
    #trackModal.track-view-live #trackHeader h3 { white-space: nowrap; }
    #trackModal.track-view-live #trackHeader .module-modal-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

@media (max-height: 560px) {
    #adminAuditModal > div,
    #userRecycleBinModal > div {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #trackModal.track-view-live .track-panel {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #trackModal.track-view-live #liveTrackMapContainer { flex: 0 0 240px; }
    #musicPanelLibrary {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #musicLibraryScroll { flex: 0 0 auto; min-height: 160px; }
    #liveTranslationContent {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #liveTranslationContent > * { flex-shrink: 0; }
}

/* News status belongs at the head of the News pane.  Keep the actionable
   warning readable on a phone without pushing the first story off-screen. */
#newsSubscriptionStatus {
    border-color: #fecaca;
    background: #fff;
    color: #dc2626;
}
#newsSubscriptionStatus .news-subscription-alert {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.45;
    font-weight: 700;
}
#newsSubscriptionStatus .news-subscription-sources {
    margin-top: 2px;
    color: #475569;
}
#newsSubscriptionStatus .news-subscription-sources > summary {
    display: flex;
    min-height: 34px;
    cursor: pointer;
    align-items: center;
}