/*
 * 全站响应式层
 * 桌面端保留高密度业务工作台；平板端重排；手机端改为单栏与抽屉导航。
 * 本文件必须最后加载，以便在不破坏既有页面逻辑的前提下覆盖布局。
 */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
    min-width: 0;
    max-width: 100%;
}

body { overflow-x: hidden; }

.page-shell,
.main-area,
.page-view,
.data-panel,
.table-wrap,
.article-reader,
.evidence-panel { min-width: 0; }

.mobile-menu-toggle,
.mobile-nav-scrim,
.mobile-review-nav { display: none; }

.table-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.table-wrap table { min-width: 760px; }

.table-wrap::after {
    content: "";
    display: block;
    width: 1px;
    height: 1px;
}

/* 中等桌面：先让筛选、指标和业务卡片自然换行。 */
@media (max-width: 1360px) {
    .advanced-filters,
    .event-filters {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    .advanced-filters .filter-field:first-child,
    .event-filters .filter-field:first-child { grid-column: span 2; }

    .advanced-filters .news-date-field { grid-column: span 2; }

    .filter-actions-main { grid-column: -2 / -1; }

    .summary-line { flex-wrap: wrap; }
    .summary-line small { width: 100%; margin: 7px 8px 0; }

    .event-cluster {
        grid-template-columns: 78px minmax(280px, 1.5fr) minmax(180px, 1fr) 145px 82px;
        gap: 12px;
    }
}

/* 平板与手机共用：导航抽屉、内容单栏、触控尺寸。 */
@media (max-width: 1024px) {
    :root {
        --sidebar: 0px;
        --topbar: 56px;
        --app-footer: auto;
    }

    body.mobile-nav-open { overflow: hidden; }

    .app-shell {
        display: block;
        min-height: 100dvh;
    }

    .page-shell {
        min-height: 100dvh;
        width: 100%;
    }

    .sidebar {
        inset: 0 auto 0 0;
        z-index: 90;
        width: min(84vw, 320px);
        height: 100dvh;
        transform: translateX(-102%);
        transition: transform .2s ease;
        box-shadow: 10px 0 30px rgba(18, 58, 99, .18);
        overflow: hidden;
    }

    body.mobile-nav-open .sidebar { transform: translateX(0); }

    .sidebar .brand {
        height: 58px;
        flex: 0 0 58px;
        padding-inline: 14px 10px;
    }

    .sidebar .sidebar-collapse {
        width: 44px;
        height: 44px;
    }

    .nav-groups {
        padding: 8px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .nav-group-toggle,
    .nav-item { min-height: 44px; height: 44px; }

    .nav-item span { font-size: 15px; }

    .sidebar-foot { flex: 0 0 auto; }
    .sidebar-resizer,
    .queue-resizer,
    .evidence-resizer,
    .layout-resizer { display: none !important; }

    .mobile-nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 85;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(15, 42, 64, .42);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility .2s ease;
    }

    body.mobile-nav-open .mobile-nav-scrim {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .topbar {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 8px;
        height: var(--topbar);
        padding: 0 10px;
    }

    .mobile-menu-toggle {
        display: inline-grid;
        width: 44px;
        height: 44px;
        color: var(--navy, #123a63);
        border-color: #b9ccd8;
        background: #edf5fa;
    }

    .breadcrumb {
        min-width: 0;
        overflow: hidden;
    }

    .breadcrumb span,
    .breadcrumb svg { flex: 0 0 auto; }

    .breadcrumb strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-actions { gap: 5px; }
    .user-button { min-height: 44px; height: 44px; padding-inline: 6px; }

    .prototype-flag {
        left: auto;
        right: 70px;
        max-width: 140px;
        transform: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .main-area { min-height: calc(100dvh - var(--topbar)); }

    .app-footer {
        min-height: 42px;
        flex: 0 0 auto;
        flex-wrap: wrap;
        gap: 3px 8px;
        padding: 8px 12px;
        white-space: normal;
        text-align: center;
        line-height: 1.5;
    }

    /* 审核工具与批量操作 */
    .review-tools {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px;
    }

    .filter-tabs {
        grid-column: 1 / -1;
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .filter-tab {
        min-width: 150px;
        min-height: 44px;
        flex: 0 0 auto;
    }

    .review-tools .list-search {
        width: 100%;
        height: 42px;
        margin: 0;
    }

    .review-date-filter { justify-self: end; }
    .review-date-presets { min-height: 42px; }
    .review-date-preset { min-width: 48px; min-height: 42px; }
    .review-refresh { grid-column: 1 / -1; justify-self: end; min-height: 42px; }

    .review-custom-date {
        position: fixed;
        z-index: 75;
        top: calc(var(--topbar) + 10px);
        right: 12px;
        left: 12px;
        width: auto;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
        padding: 12px;
        box-shadow: 0 12px 35px rgba(18, 58, 99, .2);
    }

    .review-custom-date input { width: 100%; min-height: 42px; }

    .batch-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        padding: 8px;
    }

    .batch-hint {
        order: 4;
        width: 100%;
        white-space: normal;
    }

    .batch-toolbar .button,
    .batch-dispose > .button { min-height: 42px; }

    .mobile-review-nav {
        position: sticky;
        top: var(--topbar);
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid #adc3d1;
        border-bottom: 1px solid #adc3d1;
        background: #f4f9fc;
    }

    .mobile-review-nav button {
        min-height: 44px;
        padding: 0 8px;
        border: 0;
        border-right: 1px solid #b8ccd9;
        color: #4d687b;
        background: transparent;
        font-weight: 700;
    }

    .mobile-review-nav button:last-child { border-right: 0; }
    .mobile-review-nav button.active { color: #fff; background: var(--civic-blue, #176db3); }

    .review-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
        overflow: visible;
        border-inline: 0;
    }

    .article-queue,
    .article-reader,
    .evidence-panel {
        width: 100%;
        min-width: 0;
        border-right: 0;
        border-bottom: 1px solid #adc3d1;
    }

    .article-queue {
        min-height: 430px;
        height: min(62dvh, 620px);
        overflow: hidden;
    }

    .queue-list {
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .article-reader {
        display: block;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .reader-header { padding: 14px 16px; }
    .reader-header h2 { font-size: clamp(20px, 3.6vw, 28px); overflow-wrap: anywhere; }
    .reader-meta,
    .reader-tools { flex-wrap: wrap; }
    .article-body { min-height: 0; padding: 22px clamp(18px, 5vw, 48px); }

    .evidence-panel {
        max-height: none;
        overflow: visible;
    }

    .decision-steps { padding: 12px; }

    /* 通用筛选区与业务页面 */
    .advanced-filters,
    .event-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
    }

    .advanced-filters .filter-field:first-child,
    .event-filters .filter-field:first-child { grid-column: 1 / -1; }
    .advanced-filters .news-date-field { grid-column: 1 / -1; }
    .filter-actions-main { grid-column: 1 / -1; justify-content: flex-end; }

    .filter-field > button,
    .filter-field > div,
    .advanced-filters .filter-field > input,
    .advanced-filters .filter-field > select { min-height: 42px; height: 42px; }

    .summary-line,
    .event-metrics,
    .analytics-kpis,
    .keyword-overview,
    .permission-summary,
    .highlight-summary,
    .metric-strip,
    .readiness-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-line { padding: 0; }
    .summary-line > div,
    .event-metrics > div,
    .analytics-kpis > div,
    .keyword-overview > div,
    .permission-summary > div,
    .highlight-summary > div,
    .metric-strip > div,
    .readiness-grid > div {
        min-width: 0;
        margin: 0;
        border-right: 1px solid #b8ccd9;
        border-bottom: 1px solid #b8ccd9;
    }

    .summary-line > div:nth-child(even),
    .event-metrics > div:nth-child(even),
    .analytics-kpis > div:nth-child(even),
    .keyword-overview > div:nth-child(even),
    .permission-summary > div:nth-child(even),
    .highlight-summary > div:nth-child(even),
    .metric-strip > div:nth-child(even),
    .readiness-grid > div:nth-child(even) { border-right: 0; }

    .summary-line > small {
        grid-column: 1 / -1;
        width: auto;
        margin: 0;
        padding: 8px 12px;
    }

    .data-toolbar,
    .collection-toolbar,
    .section-title,
    .page-controls,
    .news-data-toolbar {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .toolbar-spacer { display: none; }
    .list-search.wide { width: min(100%, 420px); flex: 1 1 260px; }
    .data-toolbar select { min-height: 42px; height: 42px; }

    .section-actions {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .segmented {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .segmented button { min-height: 40px; flex: 0 0 auto; }

    .table-wrap table { min-width: 820px; }
    .table-footer { gap: 12px; }

    .event-cluster {
        grid-template-columns: 88px minmax(0, 1fr) 150px;
        align-items: start;
    }

    .event-cluster .media-cluster { grid-column: 2 / -1; }
    .event-cluster .sentiment-stack,
    .event-cluster .sentiment-text { grid-column: 2 / -1; }

    .analytics-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .attention-panel { grid-column: auto; }
    .attention-list { grid-template-columns: 1fr; }
    .attention-list > div { border-right: 0; border-bottom: 1px solid #c8d8e3; }

    .source-analysis { flex-wrap: wrap; }
    .trend-chart { overflow-x: auto; }
    .trend-chart > svg { min-width: 560px; }
    .efficiency-table { overflow-x: auto; }
    .efficiency-table > div { min-width: 620px; }

    .delivery-list,
    .account-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .delivery-item,
    .account-card { border-bottom: 1px solid #c8d8e3; }
    .delivery-item:nth-child(even),
    .account-card:nth-child(even) { border-right: 0; }

    .monthly-grid,
    .celebrity-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .month-list { display: flex; overflow-x: auto; }
    .month-list .section-title { min-width: 180px; }
    .month-item { min-width: 160px; width: 160px; }
    .celebrity-detail { min-height: 0; }

    .chain-overview {
        grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr;
        padding: 14px 8px;
    }

    .project-summary { flex-wrap: wrap; gap: 12px; }
    .settings-list > div { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .settings-list > div > .button { grid-column: 2 / -1; justify-self: end; }

    .highlight-keyword-toolbar .read-only-note { white-space: normal; }

    .modal-backdrop {
        padding: 16px;
        overflow-y: auto;
    }

    .modal {
        width: min(100%, 680px);
        max-height: calc(100dvh - 32px);
        display: flex;
        flex-direction: column;
    }

    .modal-body { min-height: 0; overflow-y: auto; }
    .modal > header,
    .modal footer { flex: 0 0 auto; }
}

/* 手机：进一步收拢为单列、保证单手操作与文字可读性。 */
@media (max-width: 640px) {
    :root { --topbar: 52px; }

    .topbar {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        height: var(--topbar);
        padding-inline: 4px 6px;
    }

    .breadcrumb span,
    .breadcrumb svg { display: none; }
    .breadcrumb strong { font-size: 15px; }

    .user-button { gap: 2px; padding-inline: 4px; }
    .user-button small,
    .user-button svg { display: none; }
    .user-button strong { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }

    .prototype-flag {
        right: 6px;
        top: var(--topbar);
        max-width: 112px;
        padding: 3px 7px;
        font-size: 9px;
    }

    .review-tools { grid-template-columns: minmax(0, 1fr); }
    .review-tools .list-search,
    .review-date-filter,
    .review-refresh { grid-column: 1; width: 100%; justify-self: stretch; }
    .review-refresh { justify-content: center; }

    .review-date-presets {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    }

    .review-date-preset { min-width: 0; }

    .review-custom-date {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .review-custom-date .date-range-separator { display: none; }
    .review-custom-date .button { width: 100%; }

    .batch-toolbar .batch-count { margin-right: auto; }
    .batch-toolbar .button,
    .batch-dispose { flex: 1 1 calc(50% - 5px); }
    .batch-dispose > .button { width: 100%; }

    .mobile-review-nav button { font-size: 13px; }

    .article-queue {
        min-height: 390px;
        height: 58dvh;
    }

    .panel-titlebar { padding: 10px 12px; }
    .queue-scope-hint { display: none; }
    .queue-item { min-height: 94px; padding: 12px 10px; }

    .reader-header { padding: 14px 12px; }
    .reader-header h2 { margin-block: 9px; font-size: 21px; line-height: 1.45; }
    .reader-meta { gap: 5px 10px; }
    .reader-tools { gap: 7px; }
    .reader-tools .button { flex: 1 1 auto; min-height: 42px; }
    .font-controls { margin-left: 0; }
    .font-controls button { width: 42px; height: 42px; }
    .duplicate-note { padding: 9px 12px; }
    .article-body { padding: 20px 16px; font-size: 17px; line-height: 1.9; }

    .evidence-head { padding: 12px; }
    .decision-steps { padding: 8px; }
    .decision-card,
    .human-review,
    .final-advice { padding: 14px 12px; }
    .review-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .review-actions .button { min-height: 46px; }

    .advanced-filters,
    .event-filters { grid-template-columns: minmax(0, 1fr); padding: 10px; }
    .advanced-filters .filter-field:first-child,
    .event-filters .filter-field:first-child,
    .advanced-filters .news-date-field,
    .filter-actions-main { grid-column: 1; }
    .filter-actions-main { display: grid; grid-template-columns: 1fr 1fr; }
    .filter-actions-main .button { width: 100%; min-height: 44px; }

    .summary-line,
    .event-metrics,
    .analytics-kpis,
    .keyword-overview,
    .permission-summary,
    .highlight-summary,
    .metric-strip,
    .readiness-grid { grid-template-columns: minmax(0, 1fr); }

    .summary-line > div,
    .event-metrics > div,
    .analytics-kpis > div,
    .keyword-overview > div,
    .permission-summary > div,
    .highlight-summary > div,
    .metric-strip > div,
    .readiness-grid > div { border-right: 0; }

    .summary-line > small { grid-column: 1; }

    .section-title {
        align-items: flex-start;
        padding: 11px 12px;
    }

    .section-title > div:first-child { min-width: 0; }
    .section-title h2 { font-size: 14px; }
    .section-title p { line-height: 1.5; }
    .section-actions { width: 100%; }
    .section-actions .button { min-height: 42px; }

    .data-toolbar,
    .collection-toolbar,
    .page-controls,
    .news-data-toolbar { align-items: stretch; padding: 10px; }

    .data-toolbar > *,
    .collection-toolbar > *,
    .page-controls > * { max-width: 100%; }
    .list-search.wide { width: 100%; flex-basis: 100%; height: 42px; }

    .media-quick-filter {
        width: 100%;
        display: grid;
        gap: 6px;
        padding: 8px 0 0;
        border-left: 0;
        border-top: 1px solid #b8ccd9;
    }

    .media-quick-options {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .media-quick-options button {
        min-width: 0;
        min-height: 42px;
        border-bottom: 1px solid #b8ccd9;
    }

    .table-footer { flex-wrap: wrap; padding: 9px 10px; }
    .table-footer > div { width: 100%; justify-content: center; overflow-x: auto; }

    .event-cluster {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 14px 12px;
    }

    .event-cluster .media-cluster,
    .event-cluster .sentiment-stack,
    .event-cluster .sentiment-text { grid-column: 1; }
    .sentiment-legend { flex-wrap: wrap; }

    .chart-panel > header { align-items: flex-start; flex-wrap: wrap; }
    .trend-chart { padding-left: 36px; }
    .source-analysis { flex-direction: column; }
    .source-legend { width: 100%; }

    .delivery-list,
    .account-source-grid { grid-template-columns: minmax(0, 1fr); }
    .delivery-item,
    .account-card { border-right: 0; }

    .date-strip {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 10px 12px;
    }
    .date-readiness { width: 100%; margin-left: 0; }

    .month-list .section-title { display: none; }
    .month-item { min-width: 140px; width: 140px; }

    .chain-overview {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 16px;
    }

    .chain-overview > b {
        width: 1px;
        height: 26px;
        justify-self: center;
    }

    .chain-node { padding-block: 6px; }

    .project-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }
    .project-summary > div { min-width: 0; }

    .settings-list > div {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
    }
    .settings-list > div > .setting-value,
    .settings-list > div > .button { grid-column: 2; justify-self: stretch; text-align: left; }

    .profile-grid { grid-template-columns: minmax(0, 1fr); }
    .profile-actions { flex-wrap: wrap; }

    .highlight-preview { display: none !important; }
    .highlight-rule-note { align-items: flex-start; }

    .permission-checks,
    .form-grid { grid-template-columns: minmax(0, 1fr); }

    .modal-backdrop {
        place-items: end center;
        padding: 0;
    }

    .modal {
        width: 100%;
        max-height: 92dvh;
    }

    .modal > header { padding: 15px 14px 12px; }
    .modal-body { padding: 14px; }
    .modal footer { padding: 10px 14px; }
    .modal footer .button { min-height: 44px; flex: 1; }

    .toast {
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }
}

/* 登录页独立响应式处理。 */
@media (max-width: 760px) {
    .login-page {
        min-height: 100dvh;
        justify-content: center;
        padding: 16px;
    }

    .login-shell {
        width: min(100%, 520px);
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .login-brand { display: none; }
    .login-card { min-height: 0; padding: 32px 24px; }
    .login-card input { min-height: 48px; }
    .login-card button { min-height: 48px; }
    .login-copyright { width: min(100%, 520px); }
}

@media (max-width: 390px) {
    .login-page { padding: 10px; }
    .login-card { padding: 26px 18px; }
    .sidebar { width: 90vw; }
    .filter-tab { min-width: 136px; }
    .article-body { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .mobile-nav-scrim { transition: none; }
}