/*
 * 明心臺 - 移动端共享覆盖层
 * 目标：在不改变 PC 端结构的前提下，补强主要页面的移动端布局秩序。
 * 规则：只在窄屏断点内生效；优先做容器、栅格、面板、按钮、弹层收口。
 */

html {
    -webkit-text-size-adjust: 100%;
}

@media (max-width: 980px) {
    body {
        overflow-x: hidden;
    }

    .container {
        width: min(100%, calc(100vw - 24px)) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .top-nav {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .top-nav-actions,
    .toolbar-actions,
    .message-hero-actions,
    .message-summary,
    .main-header-actions {
        width: 100%;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }

    .page-header {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .page-header-layout,
    .platform-grid,
    .comparison-grid,
    .stats-grid,
    .favorites-grid,
    .detail-meta-grid,
    .signup-highlight-grid,
    .room-info-grid,
    .role-select-grid,
    .admin-log-dashboard,
    .ops-grid-two,
    .dimension-grid,
    .trait-cards,
    .candidate-detail-grid,
    .intake-upload-grid,
    .upload-manifest-grid,
    .toolbar-grid,
    .intake-summary-grid,
    .role-summary-grid,
    .tools-grid {
        grid-template-columns: 1fr !important;
    }

    .action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    .search-box {
        width: 100% !important;
        max-width: none !important;
    }

    .filter-group {
        width: 100%;
        margin-left: 0 !important;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .tabs-nav {
        position: static !important;
        top: auto !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 8px !important;
        gap: 10px !important;
        scroll-snap-type: x proximity;
    }

    .tab-btn,
    .wallet-anchor-btn {
        flex: 0 0 auto !important;
        min-width: max-content !important;
    }

    .voucher-item,
    .message-hero-top,
    .wechat-card-header,
    .cta-strip,
    .modal-actions,
    .maintenance-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .cta-strip .btn,
    .modal-actions .btn,
    .message-hero-actions .message-btn,
    .action-bar .btn,
    .toolbar-actions .btn,
    .maintenance-actions .btn-secondary,
    .maintenance-actions .btn-danger {
        width: 100%;
        justify-content: center;
    }

    .content-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .content-card-body {
        padding: 18px !important;
        overflow-x: auto;
    }

    .data-table {
        min-width: 720px;
    }

    .modal-content,
    .purchase-dialog,
    .modal,
    .login-card {
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: min(100%, calc(100vw - 24px)) !important;
        max-height: min(82vh, 720px);
        overflow: auto;
        padding: 18px !important;
        border-radius: 18px !important;
    }

    #testModal .modal-content,
    #reportModal .modal-panel-report {
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: min(100%, calc(100vw - 24px)) !important;
        padding: 24px 18px !important;
        border-radius: 24px !important;
    }

    #testModal .result-page,
    #reportContent .result-page {
        padding: 44px 2px 2px !important;
    }

    #testModal .soul-landscape-cover,
    #reportContent .soul-landscape-cover {
        border-radius: 22px !important;
        padding: 30px 20px !important;
        margin-bottom: 24px !important;
    }

    #testModal .ai-analysis-card,
    #reportContent .ai-analysis-card {
        padding: 24px 20px !important;
    }

    #testModal .dimension-card,
    #testModal .trait-card,
    #reportContent .dimension-card,
    #reportContent .trait-card {
        padding: 22px 18px !important;
    }

    #testModal .conversion-hook,
    #testModal .wechat-card,
    #reportContent .conversion-hook,
    #reportContent .wechat-card {
        padding: 24px 20px !important;
    }

    .auth-shell {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .auth-hero-panel {
        min-height: auto !important;
        padding: 84px 22px 24px !important;
    }

    .auth-stage-panel {
        padding: 84px 22px 24px !important;
    }

    .auth-hero-grid {
        grid-template-columns: 1fr !important;
    }

    .back-home {
        top: 18px !important;
        left: 20px !important;
    }

    .message-shell {
        width: min(100%, calc(100vw - 20px)) !important;
        padding: 86px 0 28px !important;
    }

    .message-layout {
        grid-template-columns: 1fr !important;
    }

    .message-filter-card {
        position: static !important;
        top: auto !important;
        order: -1;
    }

    .message-hero,
    .message-filter-card,
    .message-list-card {
        border-radius: 24px !important;
    }

    .admin-layout {
        display: block !important;
    }

    .sidebar {
        position: sticky !important;
        top: 0;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
        z-index: 90;
    }

    .sidebar-header {
        padding: 16px 18px !important;
    }

    .sidebar-nav {
        display: flex !important;
        gap: 12px !important;
        overflow-x: auto !important;
        padding: 12px 16px 16px !important;
    }

    .nav-section {
        min-width: 220px;
        margin-bottom: 0 !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .main-header {
        padding: 14px 16px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .main-body {
        padding: 18px 16px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .log-toolbar {
        justify-content: flex-start !important;
    }

    .profile-shell-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .profile-shell-avatar {
        width: 72px !important;
        height: 72px !important;
    }

    .quick-time-options {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .editor-toolbar {
        gap: 8px !important;
    }

    .editor-tool-btn,
    .editor-tool-select,
    .editor-tool-color-wrap {
        min-height: 40px;
    }

    .role-layout,
    .props-layout,
    .intake-layout,
    .intake-grid,
    .intake-preview-grid,
    .candidate-publish-grid,
    .preview-shell {
        grid-template-columns: 1fr !important;
    }

    .intake-hero {
        grid-template-columns: 1fr !important;
    }

    .intake-hero-actions {
        width: 100%;
    }

    .room-panel,
    .canvas-overlay-panel,
    .fa-left-panel {
        max-width: calc(100vw - 24px) !important;
    }

    .room-nav-btn,
    .room-edge-btn,
    .room-toolbar button,
    .room-mobile-dock button,
    .canvas-right-stack .room-toolbar-floating button,
    #toolbar-snapshot-btn,
    #toolbar-clear-scene-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(100%, calc(100vw - 16px)) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero {
        padding: 42px 18px 36px !important;
        border-radius: 28px !important;
    }

    .hero-brand {
        max-width: min(78vw, 280px);
    }

    .carousel-slide {
        min-height: 280px !important;
        padding: 34px 18px 66px !important;
    }

    .page-header {
        padding: 22px 16px !important;
        min-height: auto !important;
    }

    .page-title {
        max-width: none !important;
        font-size: clamp(1.6rem, 8vw, 2rem) !important;
    }

    .page-subtitle {
        max-width: none !important;
    }

    .room-card,
    .voucher-section,
    .content-card,
    .profile-shell-card,
    .auth-hero-panel,
    .auth-stage-panel,
    .message-hero,
    .message-filter-card,
    .message-list-card,
    .message-card {
        border-radius: 20px !important;
    }

    .room-card,
    .voucher-section,
    .message-list-card,
    .message-filter-card {
        padding: 16px !important;
    }

    .search-box {
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    .top-nav-brand {
        width: 100%;
        justify-content: flex-start;
    }

    .top-nav-actions {
        width: 100%;
        justify-content: stretch !important;
    }

    .top-nav-actions > * {
        flex: 1 1 auto;
    }

    .tab-btn {
        padding: 12px 14px !important;
        font-size: 0.86rem !important;
    }

    .detail-meta-grid,
    .signup-highlight-grid {
        gap: 10px !important;
    }

    .detail-meta-card,
    .signup-highlight-card {
        padding: 14px !important;
    }

    .purchase-wechat {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .purchase-wechat .btn {
        width: 100%;
    }

    .auth-shell {
        gap: 14px !important;
    }

    .auth-hero-panel {
        padding: 78px 20px 24px !important;
    }

    .auth-stage-panel {
        padding: 74px 16px 18px !important;
    }

    .auth-hero-title {
        font-size: clamp(1.7rem, 9vw, 2.2rem) !important;
    }

    .message-hero {
        padding: 20px 18px !important;
    }

    .message-btn {
        width: 100%;
    }

    .message-summary {
        gap: 8px !important;
    }

    .stats-grid,
    .admin-log-insight-grid,
    .ops-form-grid,
    .intake-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .wallet-anchor-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 4px;
    }

    .user-menu,
    .auth-btns {
        top: 12px !important;
        right: 12px !important;
    }

    .auth-btns {
        left: 12px !important;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .message-shell {
        width: min(100%, calc(100vw - 12px)) !important;
    }

    .quick-time-options {
        grid-template-columns: 1fr !important;
    }

    .editor-toolbar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .room-panel,
    .canvas-overlay-panel,
    .fa-left-panel {
        border-radius: 20px !important;
    }
}

@media (max-width: 980px) {
    .room-topbar-main {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        padding: 2px 0 0 !important;
        max-width: min(68vw, 420px) !important;
    }

    .room-topbar-main::before {
        display: none !important;
    }

    .room-title-wrap {
        gap: 4px !important;
    }

    .room-title,
    .room-subtitle,
    .room-subtitle-item,
    .room-timer-chip {
        text-shadow: 0 1px 8px rgba(255, 250, 244, 0.82);
    }

    .room-settings-dialog {
        width: min(100%, calc(100vw - 16px)) !important;
        max-width: min(100%, calc(100vw - 16px)) !important;
        border-radius: 18px !important;
    }

    .room-settings-head {
        padding: 14px 16px !important;
    }

    .room-settings-body {
        padding: 0 16px 16px !important;
    }

    .room-settings-card {
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .room-settings-tab {
        min-height: 34px !important;
        padding: 0 12px !important;
        font-size: 0.78rem !important;
    }

    .room-settings-actions {
        padding: 0 16px 16px !important;
        gap: 8px !important;
    }

    .room-settings-actions button,
    .room-settings-inline-action button {
        min-height: 34px !important;
        padding: 0 12px !important;
        font-size: 0.76rem !important;
    }

    .room-settings-orientation-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
    }

    .room-settings-orientation-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .room-settings-switch {
        width: 42px !important;
        height: 24px !important;
    }

    .room-settings-switch::after {
        width: 18px !important;
        height: 18px !important;
        top: 2px !important;
        left: 2px !important;
    }

    .room-settings-switch.is-on::after {
        transform: translateX(18px) !important;
    }

    .room-toast-stack {
        right: 10px !important;
        left: 10px !important;
        top: 10px !important;
        width: auto !important;
    }

    .room-toast {
        min-width: 0 !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        font-size: 0.78rem !important;
    }

    .room-panel,
    .canvas-overlay-panel,
    .fa-left-panel {
        border-radius: 16px !important;
    }

    .room-panel-head,
    .canvas-overlay-head {
        padding: 10px 12px !important;
        min-height: 42px !important;
    }

    .room-panel-copy strong,
    .canvas-overlay-head strong {
        font-size: 0.84rem !important;
    }

    .room-panel-copy span {
        font-size: 0.68rem !important;
    }

    .room-panel-close,
    .canvas-overlay-tools button {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 10px !important;
        font-size: 0.82rem !important;
    }

    .canvas-overlay-body,
    .room-panel .panel-section,
    .panel-section,
    .aux-panel-section {
        padding: 10px !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-padding: 8px !important;
    }

    .participants-list,
    .floating-role-list,
    .guide-list,
    .insight-list {
        gap: 8px !important;
    }

    .participant-row,
    .message-card {
        border-radius: 14px !important;
        padding: 10px !important;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    .room-topbar,
    .room-panel,
    .canvas-overlay-panel,
    .room-edge-btn,
    .room-side-tool-btn,
    .room-settings-dialog,
    .mobile-rotate-controls {
        transition-duration: 0.14s !important;
        animation-duration: 0.16s !important;
    }

    .room-settings-dialog {
        width: min(360px, calc(100vw - 28px)) !important;
        max-width: min(360px, calc(100vw - 28px)) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 16px !important;
    }

    .room-settings-head {
        padding: 10px 12px !important;
    }

    .room-settings-head strong {
        font-size: 0.82rem !important;
    }

    .room-settings-tabs {
        padding: 10px 12px 0 !important;
        gap: 6px !important;
    }

    .room-settings-body {
        padding: 10px 12px 12px !important;
    }

    .room-settings-panel {
        gap: 10px !important;
    }

    .room-settings-card {
        padding: 10px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }

    .room-settings-card strong {
        font-size: 0.74rem !important;
    }

    .room-settings-hint,
    .room-settings-field label,
    .room-settings-field span,
    .room-settings-inline-action p {
        font-size: 0.58rem !important;
        line-height: 1.45 !important;
    }

    .room-settings-slider-row {
        gap: 6px !important;
    }

    .room-settings-slider-row strong {
        font-size: 0.64rem !important;
    }

    .room-settings-slider-value {
        font-size: 0.62rem !important;
    }

    .chat-media-status {
        display: none !important;
    }

    .chat-media-stage {
        min-height: 128px !important;
    }

    .room-topbar {
        top: 8px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
        gap: 8px !important;
    }

    .room-avatar-entry {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.96rem !important;
    }

    .room-topbar-main {
        min-width: 0;
        max-width: min(52vw, 320px) !important;
        padding: 0 !important;
    }

    .room-title {
        font-size: 0.7rem !important;
        line-height: 1.15 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .room-subtitle {
        font-size: 0.52rem !important;
        line-height: 1.22 !important;
        max-width: 100% !important;
    }

    .room-subtitle-line {
        gap: 2px 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .room-timer-chip {
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 0.66rem !important;
        border-radius: 999px !important;
    }

    .room-edge-dock.left {
        left: 8px !important;
        top: 74px !important;
        gap: 5px !important;
    }

    .room-edge-dock.right {
        right: 8px !important;
        gap: 5px !important;
    }

    #members-dock-toggle {
        bottom: 214px !important;
    }

    #chat-dock-toggle {
        bottom: 154px !important;
    }

    #av-dock-toggle {
        bottom: 94px !important;
    }

    #back-to-room-btn {
        bottom: 18px !important;
    }

    .room-edge-btn,
    .room-side-tool-btn,
    .canvas-right-stack .room-toolbar-floating button,
    #toolbar-snapshot-btn,
    #toolbar-clear-scene-btn,
    #back-to-room-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 50% !important;
    }

    .room-edge-btn,
    .room-side-tool-btn,
    .canvas-right-stack .room-toolbar-floating button,
    #toolbar-snapshot-btn,
    #toolbar-clear-scene-btn,
    #back-to-room-btn,
    .room-avatar-entry {
        position: relative !important;
    }

    .room-edge-btn::before,
    .room-side-tool-btn::before,
    .canvas-right-stack .room-toolbar-floating button::before,
    #toolbar-snapshot-btn::before,
    #toolbar-clear-scene-btn::before,
    #back-to-room-btn::before,
    .room-avatar-entry::before {
        content: "" !important;
        position: absolute !important;
        inset: -7px !important;
        border-radius: 50% !important;
        background: transparent !important;
    }

    #members-dock-toggle::before,
    #chat-dock-toggle::before,
    #av-dock-toggle::before,
    #back-to-room-btn::before {
        inset: -4px !important;
    }

    .room-edge-label,
    .room-side-tool-label {
        font-size: 0.44rem !important;
        min-height: 12px !important;
        padding: 0 4px !important;
        border-radius: 999px !important;
        letter-spacing: 0.02em !important;
    }

    .room-edge-btn-inner {
        width: 20px !important;
        height: 20px !important;
    }

    #members-dock-toggle .room-side-tool-label,
    #chat-dock-toggle .room-side-tool-label,
    #av-dock-toggle .room-side-tool-label,
    #back-to-room-btn .room-side-tool-label {
        left: auto !important;
        right: calc(100% + 6px) !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
    }

    #members-dock-toggle .room-side-tool-label::before,
    #chat-dock-toggle .room-side-tool-label::before,
    #av-dock-toggle .room-side-tool-label::before,
    #back-to-room-btn .room-side-tool-label::before {
        left: calc(100% + 2px) !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        width: 5px !important;
        height: 2px !important;
        transform: translateY(-50%) !important;
    }

    .canvas-right-stack {
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 14px !important;
    }

    .fa-left-panel {
        left: 44px !important;
        top: 64px !important;
        width: min(228px, calc(100vw - 92px)) !important;
        height: min(58vh, calc(100vh - 94px)) !important;
        max-height: none !important;
        transform: none !important;
    }

    .canvas-overlay-panel {
        width: min(224px, calc(100vw - 92px)) !important;
        max-height: calc(100vh - 92px) !important;
    }

    .canvas-right-stack .canvas-overlay-panel.members-overlay,
    .canvas-right-stack .canvas-overlay-panel.chat-overlay,
    .canvas-right-stack .canvas-overlay-panel.av-overlay {
        right: 40px !important;
    }

    .canvas-right-stack .canvas-overlay-panel.roles-overlay,
    .canvas-right-stack .canvas-overlay-panel.aux-overlay {
        right: 40px !important;
    }

    .canvas-overlay-panel.av-overlay {
        width: min(214px, calc(100vw - 92px)) !important;
    }

    .room-panel-head,
    .canvas-overlay-head {
        padding: 8px 10px !important;
        min-height: 36px !important;
    }

    .room-panel-copy strong,
    .canvas-overlay-head strong {
        font-size: 0.76rem !important;
    }

    .room-panel-copy span,
    .panel-role-note,
    .panel-role-note-right {
        font-size: 0.58rem !important;
    }

    .canvas-overlay-body,
    .room-panel .panel-section,
    .panel-section,
    .aux-panel-section {
        padding: 8px !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .participant-row {
        padding: 8px !important;
        border-radius: 12px !important;
        gap: 8px !important;
    }

    .participant-name {
        font-size: 0.72rem !important;
    }

    .participant-role {
        font-size: 0.54rem !important;
        gap: 4px !important;
    }

    .participant-chip {
        min-height: 18px !important;
        padding: 0 6px !important;
        font-size: 0.5rem !important;
        border-radius: 999px !important;
        letter-spacing: 0 !important;
        gap: 4px !important;
        border-width: 1px !important;
    }

    .participant-chip-icon {
        width: 11px !important;
        height: 11px !important;
        font-size: 0.42rem !important;
    }

    .participant-chip-label {
        line-height: 1 !important;
        transform: translateY(-0.2px);
    }

    .participant-actions {
        gap: 6px !important;
    }

    .participant-mini-btn {
        min-height: 24px !important;
        padding: 0 8px !important;
        font-size: 0.54rem !important;
    }

    .floating-role-list-shell,
    .floating-role-tools,
    .guide-section,
    .snapshot-section {
        border-radius: 12px !important;
    }

    .property-title,
    .section-title {
        font-size: 0.74rem !important;
        margin-bottom: 8px !important;
    }

    .mobile-rotate-controls {
        bottom: 14px !important;
        padding: 5px 6px !important;
        gap: 5px !important;
        border-radius: 999px !important;
    }

    .mobile-rotate-controls button {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.76rem !important;
    }

    .mobile-rotate-controls span {
        font-size: 0.54rem !important;
    }

    .canvas-focus-card {
        left: 12px !important;
        bottom: 20px !important;
        width: min(128px, calc(100vw - 154px)) !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    .canvas-companion-card {
        left: 12px !important;
        top: 46px !important;
        width: min(148px, calc(100vw - 154px)) !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    .room-toolbar-floating {
        bottom: 18px !important;
    }
}