@media (max-width: 1250px) {
    .inbox-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .inbox-sidebar {
        display: flex;
        flex-direction: column;
        order: 1;
        width: 100%;
        gap: 8px;
        padding: 8px;
        background: transparent;
        border: none;
    }

    .inbox-logo {
        display: block;
        margin-bottom: 6px;
    }

    .filter-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .filter-btn {
        width: 100%;
        padding: 10px 12px;
        box-sizing: border-box;
        font-size: 1rem;
        text-align: left;
    }

    .email-list {
        order: 2;
        width: 100%;
        max-width: 100vw;
        max-height: 48vh;
        padding: 10px;
        border-radius: 10px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .email-items {
        max-height: 44vh;
        overflow-y: auto;
    }

    .email-content-container {
        order: 3;
        width: 100%;
        max-width: 100vw;
        max-height: 55vh;
        margin-top: 6px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .email-content-body {
        max-height: calc(55vh - 100px);
        padding: 14px 12px;
        overflow-y: auto;
    }

    .main-container {
        max-width: 100vw;
        margin-left: 12px;
        margin-right: 12px;
        padding: 20px 16px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
}

@media (max-width: 480px) {
    .hero-section .highlight-title {
        font-size: 1.8rem;
        line-height: 1.1;
    }

    .hero-section p {
        padding: 0 8px;
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    body:has(.inbox-container.mobile-open) {
        overflow: hidden;
    }

    .email-content-container {
        display: none;
        max-height: none;
    }

    .inbox-container.mobile-open .email-content-container {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 9000;
        max-height: none;
        padding: 0;
        background: var(--lore-popup-bg);
        overflow-y: auto;
        animation: mobile-email-popup 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    @keyframes mobile-email-popup {
        from {
            transform: translateY(36px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .mobile-back-btn {
        display: block;
        position: sticky;
        top: 0;
        z-index: 1;
        width: 100%;
        padding: 14px 16px;
        box-sizing: border-box;
        background: rgba(11, 15, 27, 0.96);
        border: none;
        border-bottom: 1px solid var(--lore-blue-28);
        color: var(--lore-accent);
        font-family: var(--lore-font-body);
        font-size: 1rem;
        font-weight: bold;
        text-align: left;
        cursor: pointer;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .mobile-back-btn:active {
        background: var(--lore-blue-15);
    }

    .email-content-header {
        padding: 16px 16px 10px;
    }

    .email-content-body {
        flex: 1;
        max-height: none;
        padding: 18px 16px;
        overflow-y: visible;
    }

    .email-item {
        padding: 14px 12px;
    }

    .email-sender {
        font-size: 0.97rem;
    }

    .email-subject {
        font-size: 1rem;
    }

    .email-preview {
        font-size: 0.85rem;
    }

    .email-list {
        max-height: 60vh;
        padding: 8px 10px;
        overflow-y: auto;
    }

    .email-items {
        max-height: none;
    }

    .inbox-container {
        gap: 12px;
        padding: 0 12px;
        box-sizing: border-box;
    }
}