@font-face {
    font-family: "Vazirmatn";
    src: url("./Vazirmatn-Bold.woff2") format("woff2");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}
/* ========================================
   واکنش‌گرایی پیام‌رسان
======================================== */

@media (min-width: 1400px) {
    .container {
        width: min(1120px, 84%);
    }
}

@media (max-width: 768px) {
    .topbar {
        min-height: 72px;
        padding: 12px 5%;
    }

    .brand {
        gap: 9px;
    }

    .brand-icon {
        width: 43px;
        height: 43px;
        border-radius: 13px;
    }

    .brand-text h1 {
        font-size: 14px;
    }

    .brand-text p {
        font-size: 10px;
    }

    .login-button {
        padding: 8px 13px;
        font-size: 12px;
    }

    .container {
        width: 90%;
        margin-top: 24px;
    }

    .welcome-card {
        padding: 30px 24px;
        border-radius: 23px;
    }

    .welcome-card h2 {
        font-size: 27px;
    }

    .welcome-card > p {
        font-size: 12px;
    }

    .welcome-decoration {
        left: -60px;
        bottom: -105px;
        opacity: 0.7;
    }

    .section-heading {
        margin-top: 32px;
    }

    .section-heading h2 {
        font-size: 18px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card {
        padding: 17px;
        gap: 12px;
        border-radius: 17px;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 22px;
    }

    .feature-info h3 {
        font-size: 13px;
    }

    .feature-info p {
        font-size: 10px;
    }

    .security-notice {
        padding: 17px;
    }

    .security-notice h3 {
        font-size: 12px;
    }

    .security-notice p {
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .brand-text h1 {
        font-size: 12px;
    }

    .brand-text p {
        font-size: 9px;
    }

    .login-button {
        padding: 7px 10px;
        font-size: 11px;
    }

    .welcome-card {
        padding: 25px 18px;
    }

    .welcome-card h2 {
        font-size: 23px;
    }

    .welcome-label {
        font-size: 10px;
    }

    .primary-button {
        padding: 10px 15px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


@media (max-width: 600px) {
    .messenger-header {
        min-height: 68px;
        padding: 10px 4%;
    }

    .messenger-brand {
        gap: 8px;
    }

    .messenger-brand .brand-icon {
        width: 41px;
        height: 41px;
    }

    .messenger-brand strong {
        font-size: 12px;
    }

    .messenger-brand small {
        font-size: 9px;
    }

    .account-button {
        gap: 5px;
        padding: 8px 10px;
        font-size: 11px;
    }

    .messenger-main {
        width: 94%;
        min-height: 430px;
        margin: 16px auto;
        border-radius: 17px;
    }

    .messenger-tab {
        min-height: 56px;
        font-size: 12px;
    }

    .tab-panel {
        padding: 17px 13px;
    }

    .list-heading h1 {
        font-size: 17px;
    }

    .conversation-item {
        gap: 10px;
        padding: 13px 10px;
        border-radius: 14px;
    }

    .conversation-avatar {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 20px;
    }

    .conversation-title h2 {
        font-size: 12px;
    }

    .conversation-details p {
        font-size: 10px;
    }

    .conversation-arrow {
        font-size: 18px;
    }
}