/* Shared responsive rules for every page. */
html {
    overflow-x: hidden;
}

body {
    width: 100%;
    overflow-x: hidden;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

button,
a,
input,
textarea,
select {
    max-width: 100%;
}

@media (max-width: 600px) {
    body {
        padding: 12px !important;
        align-items: flex-start !important;
    }

    .phone {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: calc(100vh - 24px) !important;
    }

    .screen {
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px 12px 24px !important;
    }

    .top-nav,
    .topbar,
    .welcome,
    .profile-box,
    .profile-header,
    .info-row,
    .expert-shell,
    .container,
    .content,
    .card,
    .auth-card {
        max-width: 100%;
    }

    .top-nav,
    .topbar {
        gap: 8px;
    }

    .nav-title,
    .brand,
    .brand h1,
    .welcome h2,
    .profile-name,
    .profile-email {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .profile-box,
    .profile-header {
        align-items: flex-start;
    }

    .profile-box > *,
    .profile-header > * {
        min-width: 0;
    }

    .profile-box .profile-text,
    .profile-header > div:last-child {
        overflow: hidden;
    }

    .double-btn,
    .stats,
    .side-nav {
        grid-template-columns: 1fr !important;
    }

    .double-btn {
        gap: 8px;
    }

    .btn,
    .btn-outline,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .logout-btn,
    .menu-buttons a {
        min-height: 42px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 620px;
    }

    .actions,
    .inline-form {
        align-items: stretch;
    }

    .actions > *,
    .inline-form > * {
        min-width: 0;
        max-width: 100%;
    }

    .login-box {
        width: 100%;
        margin: 24px auto !important;
        padding: 20px 16px !important;
    }

    .container {
        width: 100%;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .card {
        padding: 16px !important;
        overflow: hidden;
    }

    .expert-shell {
        display: block !important;
    }

    .sidebar {
        position: static !important;
        border-radius: 16px !important;
        padding: 14px !important;
        margin-bottom: 14px;
    }

    .side-nav {
        display: grid !important;
        gap: 8px;
    }

    .topbar {
        flex-wrap: wrap;
        padding: 14px 16px !important;
    }

    .topbar .brand {
        flex: 1 1 160px;
    }

    .topbar form,
    .topbar .logout-btn {
        flex: 0 1 auto;
    }

    .drawer {
        width: min(86vw, 300px) !important;
    }

    .chat-row {
        max-width: 100% !important;
    }

    .info-hero img,
    .logo {
        max-width: 42vw;
        max-height: 130px;
    }
}

@media (max-width: 380px) {
    body {
        padding: 0 !important;
    }

    .phone {
        min-height: 100vh !important;
    }

    .screen {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .auth-card,
    .login-box,
    .card {
        border-radius: 14px !important;
    }
}