@media (max-width: 980px) {
    body.user-body-meetings .meeting-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        overflow: auto;
    }

    body.user-body-meetings .meeting-left-panel,
    body.user-body-meetings .meeting-cockpit {
        grid-column: 1;
    }

    body.user-body-meetings .meeting-hub {
        min-height: min(760px, calc(100vh - 28px));
    }

    body.user-body-meetings .meeting-cockpit {
        overflow: visible;
    }
}

@media (max-width: 760px) {
    body.user-body-meetings .meeting-layout {
        padding-bottom: 0;
    }

    body.user-body-meetings .meeting-cockpit {
        padding: 16px;
    }

    body.user-body-meetings .meeting-scheduled-row,
    body.user-body-meetings .meeting-row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.user-body-meetings .meeting-row-actions {
        justify-content: stretch;
    }

    body.user-body-meetings .meeting-row-actions .primary-button,
    body.user-body-meetings .meeting-row-actions .secondary-button,
    body.user-body-meetings .meeting-row-actions .meeting-join-button {
        width: 100%;
    }


}

@media (max-width: 980px) {
    body.user-body-workspace:has(.workspace-calendar-shell) {
        overflow: auto;
    }

    body.user-body-workspace:has(.workspace-calendar-shell) .user-shell {
        height: auto;
        min-height: 100vh;
    }

    body.user-body-workspace:has(.workspace-calendar-shell) .workspace-calendar-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        max-height: none;
    }

    body.user-body-workspace:has(.workspace-calendar-shell) .workspace-calendar-main {
        height: min(74vh, 760px);
        min-height: 560px;
    }

    body.user-body-workspace:has(.workspace-calendar-shell) .workspace-week-grid {
        overflow: visible;
        min-width: max(720px, calc(70px + (var(--calendar-day-count) * 128px)));
        grid-template-columns: 60px repeat(var(--calendar-day-count), minmax(118px, 1fr));
    }

    body.user-body-workspace:has(.workspace-calendar-shell) .workspace-calendar-form-panel {
        max-height: 70vh;
    }

    body.user-body-workspace:has(.workspace-calendar-shell) .workspace-calendar-upcoming .workspace-calendar-panel {
        max-height: none;
    }
}

/* Viewport-proportional surface nav sizing for full-width meeting/workspace pages. */
body.user-body-meetings .surface-switcher-user,
body.user-body-workspace .surface-switcher-user {
    width: auto;
    max-width: none;
    justify-content: flex-start;
}

body.user-body-meetings .surface-switcher-user .surface-switcher-link,
body.user-body-workspace .surface-switcher-user .surface-switcher-link {
    flex: 0 0 clamp(52px, 6.5vw, 76px);
    width: clamp(52px, 6.5vw, 76px);
    min-width: 52px;
    min-height: clamp(46px, 5.2vw, 56px);
    border-radius: 16px;
}

body.user-body-meetings .surface-switcher-user .surface-switcher-icon,
body.user-body-workspace .surface-switcher-user .surface-switcher-icon {
    width: clamp(18px, 2.1vw, 22px);
    height: clamp(18px, 2.1vw, 22px);
    flex-basis: clamp(18px, 2.1vw, 22px);
}

@media (max-width: 760px), (max-width: 980px) and (orientation: landscape) {
    body.user-body-meetings .surface-switcher-user,
    body.user-body-workspace .surface-switcher-user {
        gap: 6px;
    }

    body.user-body-meetings .surface-switcher-user .surface-switcher-link,
    body.user-body-workspace .surface-switcher-user .surface-switcher-link {
        flex-basis: clamp(42px, 13vw, 54px);
        width: clamp(42px, 13vw, 54px);
        min-width: 42px;
        min-height: 46px;
        border-radius: 15px;
    }

    body.user-body-meetings .surface-switcher-user .surface-switcher-icon,
    body.user-body-workspace .surface-switcher-user .surface-switcher-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }
}