@media (max-width: 1024px) {
    .chat-sidebar {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .main-content {
        width: 100%;
        padding-top: 12px;
        padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
    }

    .main-content:not(:has(.chat-page-v2, .welcome-hero, .login-page-wrapper)) {
        padding-top: 64px;
    }

    body:has(.chat-page-v2) .main-content {
        padding-bottom: 0;
    }

    .chat-page-v2 {
        padding-top: 56px;
    }

    body:has(.chat-page-v2) .nux-footer {
        display: none;
    }

    .jo-page-jump-wrap {
        display: none;
    }

    .jo-pg-btn,
    .jo-page-size {
        min-height: 36px;
        font-size: 14px;
    }

    .jo-pg-btn[aria-label] {
        min-width: 40px;
    }

    .login-page-wrapper .nux-login-brand {
        order: -1;
    }

    .empty-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .empty-actions .btn {
        width: 100%;
        justify-content: center;
    }

    body:has(.chat-page-v2) > a[aria-label='关于我们'] {
        bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .chat-page-v2 {
        flex-direction: column;
    }

    .chat-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 85vw;
        max-width: 360px;
        height: 100dvh;
        height: 100vh;
        z-index: 350;
        box-shadow: -4px 0 20px rgba(0,0,0,0.12);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-bottom: var(--safe-bottom);
        padding-top: var(--safe-top);
    }
    .chat-sidebar.open {
        transform: translateX(0);
    }
    .chat-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 340;
        background: rgba(0,0,0,0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .chat-sidebar-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }
    .chat-sidebar-toggle {
        position: fixed;
        right: 16px;
        bottom: 100px;
        z-index: 330;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--color-primary, #6366f1);
        color: #fff;
        border: none;
        box-shadow: 0 4px 12px rgba(99,102,241,0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 18px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .chat-sidebar-toggle:active {
        transform: scale(0.92);
    }

    .chat-main {
        border-right: none;
    }

    .interview-page {
        flex-direction: column;
    }

    .interview-sidebar {
        width: 100%;
    }

    .interview-positions-list {
        max-height: 30vh;
    }

    .interview-info-drawer {
        width: 100%;
        max-width: 100%;
    }

    .interview-detail-header {
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

    .detail-header-info {
        min-width: 0;
        flex: 1;
    }

    .detail-header-actions {
        flex-wrap: wrap;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--spacing-4) var(--spacing-4);
    }

    .page-body {
        padding: 0 var(--spacing-4) var(--spacing-4);
    }

    .resumes-grid {
        grid-template-columns: 1fr;
    }

    .templates-grid {
        grid-template-columns: 1fr;
    }

    .rec-content {
        flex-direction: column;
    }

    .rec-preview {
        width: 100%;
        height: 120px;
    }

    .empty-features {
        flex-direction: column;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .modal {
        max-width: calc(100vw - var(--spacing-8));
        margin: var(--spacing-4);
    }

    .modal-lg {
        max-width: calc(100vw - var(--spacing-8));
    }

    .generate-modal {
        max-width: calc(100vw - var(--spacing-8));
    }

    .modal-overlay {
        padding: var(--spacing-4);
    }

    .toast-container {
        left: var(--spacing-4);
        right: var(--spacing-4);
        top: var(--spacing-4);
    }

    .toast {
        min-width: unset;
        max-width: 100%;
    }

    .resume-preview-container {
        padding: var(--spacing-4);
    }

    .resume-paper {
        padding: var(--spacing-5);
    }

    .resume-editor {
        min-height: 300px;
    }

    .welcome-hero {
        padding: var(--spacing-6) var(--spacing-4);
    }

    .welcome-hero h1 {
        font-size: 22px;
    }

    .welcome-body {
        padding: var(--spacing-4);
    }

    .jobs-page {
        padding: var(--spacing-4);
    }

    .star-overview {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .star-stats {
        justify-content: center;
    }

    .profile-content {
        max-width: 100%;
    }

    .chat-header {
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

    .chat-header-actions {
        flex-wrap: wrap;
    }

    .subscription-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
    }

    .job-meta {
        flex-wrap: wrap;
    }

    .completion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }

    .exp-header {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .version-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }

    .version-actions {
        align-self: flex-end;
    }

    .health-ring {
        width: 100px;
        height: 100px;
    }

    .health-ring-value {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: var(--spacing-3) var(--spacing-3);
    }

    .page-body {
        padding: 0 var(--spacing-3) var(--spacing-3);
    }

    .page-header h2 {
        font-size: var(--text-lg);
    }

    .card {
        padding: var(--spacing-4);
    }

    .modal-body {
        padding: var(--spacing-4);
    }

    .modal-header {
        padding: var(--spacing-4);
    }

    .modal-footer {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .modal-banner {
        padding: var(--spacing-4) var(--spacing-4) var(--spacing-3);
    }

    .generate-modal-banner {
        padding: var(--spacing-4) var(--spacing-4) var(--spacing-3);
    }

    .welcome-hero {
        padding: var(--spacing-5) var(--spacing-3);
    }

    .welcome-hero h1 {
        font-size: 20px;
    }

    .welcome-body {
        padding: var(--spacing-3);
    }

    .chat-footer {
        padding: var(--spacing-2) var(--spacing-3) var(--spacing-3);
    }

    .chat-header {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .interview-detail-header {
        padding: var(--spacing-2) var(--spacing-3);
    }

    .interview-sidebar-header {
        padding: var(--spacing-3);
    }

    .interview-positions-list {
        padding: var(--spacing-2);
    }

    .interview-info-drawer {
        width: 100%;
    }

    .info-drawer-header {
        padding: var(--spacing-3);
    }

    .info-drawer-body {
        padding: var(--spacing-2);
    }

    .drawer-action-cards {
        padding: var(--spacing-2);
    }

    .drawer-action-card {
        padding: var(--spacing-2) var(--spacing-3);
    }

    .interview-type-selector {
        flex-wrap: wrap;
    }

    .interview-positions-list {
        display: flex;
        flex-direction: column;
    }

    .chat-tips {
        flex-wrap: wrap;
        gap: var(--spacing-1);
    }

    .chat-tips .enter-mode-hint {
        display: none;
    }

    .jobs-page {
        padding: var(--spacing-3);
    }

    .resume-preview-container {
        padding: var(--spacing-2);
    }

    .resume-paper {
        padding: var(--spacing-4);
    }

    .resume-editor {
        min-height: 250px;
    }

    .star-score-ring {
        width: 64px;
        height: 64px;
    }

    .star-score-value {
        font-size: 18px;
    }

    .star-stats {
        gap: var(--spacing-2);
    }

    .eval-score-circle {
        width: 80px;
        height: 80px;
    }

    .eval-score-value {
        font-size: 22px;
    }

    .health-ring {
        width: 80px;
        height: 80px;
    }

    .health-ring-value {
        font-size: 20px;
    }

    .toast-container {
        left: var(--spacing-2);
        right: var(--spacing-2);
        top: var(--spacing-2);
    }

    .feature-card {
        padding: var(--spacing-4) var(--spacing-3);
    }

    .feature-icon {
        font-size: 20px;
    }

    .position-card {
        padding: var(--spacing-2);
    }

    .loop-action-card {
        padding: var(--spacing-3);
    }

    .loop-action-icon {
        width: 36px;
        height: 36px;
    }

    .loop-action-icon i {
        font-size: 14px;
    }

    .loop-action-text h4 {
        font-size: var(--text-sm);
    }

    .rq-question-item {
        padding: var(--spacing-2);
    }

    .rq-question-header {
        flex-wrap: wrap;
    }

    .subscription-card {
        padding: var(--spacing-3);
    }

    .job-card {
        padding: var(--spacing-3);
    }

    .job-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-1);
    }

    .job-actions {
        flex-wrap: wrap;
    }

    .resume-card {
        padding: var(--spacing-4);
    }

    .resume-card-footer {
        flex-wrap: wrap;
    }

    .template-info {
        padding: var(--spacing-3);
    }

    .template-actions {
        flex-wrap: wrap;
    }

    .template-recommendation {
        padding: var(--spacing-4);
    }

    .profile-section .section-header {
        padding: var(--spacing-3);
    }

    .profile-section .section-body {
        padding: var(--spacing-3);
    }

    .exp-item {
        padding: var(--spacing-3);
    }

    .completion-card {
        padding: var(--spacing-4);
    }

    .version-item {
        padding: var(--spacing-2) var(--spacing-3);
    }

    .btn-toggle-panel {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: 12px;
    }

    .detail-header-badges {
        flex-wrap: wrap;
    }

    .chat-input-box {
        padding: var(--spacing-1) var(--spacing-2);
    }

    .guide-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .guide-action {
        justify-content: center;
    }

    .message {
        max-width: 95%;
    }
}

@media (max-width: 768px) {
    .welcome-hero {
        padding-top: 60px;
    }

    .welcome-hero-seal {
        display: none;
    }
}

@media (max-width: 768px) {
    body > a[aria-label='关于我们'] {
        display: none;
    }

    html,
    body {
        height: auto;
        min-height: 100%;
    }

    .nux-layout-sidebar .nux-layout-main {
        margin-top: 0;
        min-height: 0;
    }

    #app .nux-layout-sidebar .nux-layout-main {
        height: auto;
        overflow: visible;
    }

    #app .nux-layout-sidebar .nux-layout-main .main-content {
        height: auto;
        overflow: visible;
        min-height: calc(100dvh - var(--safe-top, 0px) - var(--safe-bottom, 0px));
    }

    .nux-footer {
        margin-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
    }
}