/* Keep member and guest booking forms inside their grid/flex tracks. Do not mask overflow at
   the page level: carousels and tables may scroll inside their own panels. */
@media (max-width: 1023px) {
    /* Only enhanced mobile conversations own their scroll area. Keeping the
       document still prevents Safari's keyboard pan from exposing page space. */
    html[data-message-viewport], html[data-message-viewport] body {
        overflow: hidden;
        overscroll-behavior: none;
        height: 100%;
    }
    html[data-message-viewport] body {
        position: fixed;
        inset: 0;
        width: 100%;
    }
    html[data-message-viewport] [data-message-app-header] {
        position: fixed;
        top: var(--message-viewport-top, 0px);
        left: 0;
        right: 0;
    }
    html[data-message-viewport] [data-message-scroll] {
        position: fixed;
        top: calc(var(--message-viewport-top, 0px) + var(--message-header-height, 64px) + var(--message-banner-height, 0px));
        height: max(0px, calc(var(--message-viewport-height, 100dvh) - var(--message-header-height, 64px) - var(--message-banner-height, 0px) - var(--message-composer-height, 100px) - var(--message-controls-height, 0px)));
        left: 0;
        right: 0;
        overflow-y: auto;
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
        padding-top: 16px;
        padding-bottom: 16px;
        scroll-behavior: auto;
    }
    /* The list's negative top margin must not pull a thread under its banner.
       Let short histories rest above the composer, while long histories grow
       normally so their earliest messages remain reachable by scrolling. */
    html[data-message-viewport] [data-messages-page] {
        margin-top: 0;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
    html[data-message-viewport] [data-messages-page] > [data-messages-mobile-surface] {
        flex-shrink: 0;
        margin-top: auto;
    }
    html[data-message-viewport] [data-message-pinned-banner] {
        position: fixed;
        top: calc(var(--message-viewport-top, 0px) + var(--message-header-height, 64px));
        left: 0;
        right: 0;
        z-index: 10;
        margin: 0;
        padding: 10px var(--message-inline-padding, 16px) 12px;
        background: inherit;
    }
    [data-message-pinned-banner] {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 4px 8px;
        align-items: center;
    }
    .message-banner-back { grid-column: 1; grid-row: 1 / 3; min-height: 44px; }
    .message-banner-name { grid-column: 2; grid-row: 1; min-width: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
    .message-banner-status { grid-column: 3; grid-row: 1; justify-self: end; max-width: 120px; font-size: 10px; padding: 3px 8px; text-align: center; }
    .message-banner-summary { grid-column: 2; grid-row: 2; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
    .message-banner-summary strong { font-size: 12px; }
    .message-banner-summary a { font-size: 10px; white-space: nowrap; }
    .message-banner-view { grid-column: 3; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; min-height: 44px; font-size: 11px; white-space: nowrap; }
    [data-message-thread-history] > [data-message-id] {
        width: fit-content;
        max-width: 84%;
        overflow-wrap: anywhere;
    }
    /* Use the active brand palette for saved and newly appended bubbles. */
    [data-message-thread-history] > [data-message-id] > p {
        color: var(--brand-text) !important;
    }
    [data-message-thread-history] > [data-message-id].ml-auto {
        background-color: color-mix(in srgb, var(--brand-primary) 12%, var(--brand-surface)) !important;
        border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--brand-surface)) !important;
    }
    [data-message-thread-history] > [data-message-id].mr-auto {
        background-color: var(--brand-surface) !important;
        border-color: color-mix(in srgb, var(--brand-muted) 35%, var(--brand-surface)) !important;
    }
    [data-message-thread-composer] { padding-top: 8px; padding-bottom: 8px; }
    [data-message-thread-composer] [data-message-thread-input] {
        height: 44px;
        min-height: 44px;
        max-height: 110px;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 22px;
        resize: none;
        overflow-y: auto;
    }
    [data-message-thread-composer] button[type="submit"] { min-height: 44px; }
    html[data-message-viewport] [data-messages-mobile-surface] > [data-message-thread-surface] { margin-top: 0; }
    html[data-message-viewport] [data-message-thread-history] { padding-bottom: 0; }
    html[data-message-viewport] [data-message-thread-composer] {
        top: calc(var(--message-viewport-top, 0px) + var(--message-viewport-height, 100dvh) - var(--message-composer-height, 100px));
        bottom: auto;
        margin-top: 0;
    }
    html[data-message-viewport] [data-message-newest] {
        top: calc(var(--message-viewport-top, 0px) + var(--message-viewport-height, 100dvh) - var(--message-composer-height, 100px) - 52px);
        bottom: auto !important;
        margin-top: 0;
    }
    :is([data-member-layout], [data-mobile-form-layout]) main,
    :is([data-member-layout], [data-mobile-form-layout]) main :is(.grid, .flex) > *,
    :is([data-member-layout], [data-mobile-form-layout]) main :is(form, fieldset, label) {
        min-inline-size: 0;
    }

    :is([data-member-layout], [data-mobile-form-layout]) :is(input, select, textarea) {
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    /* Safari zooms focused controls below 16px, even with a correct viewport.
       Keep native zoom available for accessibility. */
    :is([data-member-layout], [data-mobile-form-layout]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea, [contenteditable="true"]) {
        font-size: 16px !important;
    }

    :is([data-member-layout], [data-mobile-form-layout]) main :is(label, p, h1, h2, h3, dd, a) {
        overflow-wrap: anywhere;
    }

    :is([data-member-layout], [data-mobile-form-layout]) textarea { resize: vertical; }
    :is([data-member-layout], [data-mobile-form-layout]) input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) {
        inline-size: 100%;
    }

    /* Let the booking date/time field shrink with its form on iPhone Safari.
       Keep the native picker while removing its oversized button appearance. */
    [data-member-layout] #reschedule-start {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        background-color: transparent;
    }

    [data-member-layout] #reschedule-start::-webkit-date-and-time-value {
        min-width: 0;
        text-align: left;
    }
}