/* @rspond-css-integration The SDK's page chrome, toggle bar and table on a phone, and its sign-in panel. Each rule here
   states layout because the SDK component it corrects lays itself out one way and offers no setting for another; each
   names the component and why, and each goes when the SDK folds the component itself. Paint stays in messaging.css. */

/* The SDK's sign-in panel (SignInPanelApi.signInPanel, which takes no settings) sets its fields at their own width at
   the start of its form and Sign In at the end of the form's footer. Sign-in centres the box under the heading (D-61),
   so the fields and the button are centred in it too (D-64). The info icon and the button's faded look before both
   fields are filled are the panel's, and stay. The footer's row states its spread inline, hence !important there. */
.messaging-sign-in .rspond-layout-grid-flow > .rspond-hug-width {
    justify-self: center;
}

.messaging-sign-in .rspond-form-body > .rspond-box-block > .rspond-layout-horizontal {
    justify-content: center !important;
}

/* The SDK's table, given a height (Demo's Browse takes the height the window leaves, D-63), hands it to the grid that
   holds its header and its rows, and that grid shares the room out between the two, so the header's band grows and
   the rows stand away from it. TableSettings offers no setting for where that room goes; here it goes below the rows,
   so the header and the rows stand together at the top and the empty space is the table's own. */
.messaging-browse .rspond-layout-grid-flow {
    align-content: start;
}

/* The passphrase and decrypt dialogs keep one width, so a dialog that grows a line of refusal does not change shape
   under its anchor, and that width fits a phone. The SDK's width setting also sets the minimum width to the same
   size, so it cannot say "380 pixels, or less on a narrow screen"; the dialog says it here. 380 rather than more so
   that, at a 1024-pixel desk, the dialog still fits to the right of Send (the form is 580 wide) and leaves Approach,
   Algorithm and kid in view. */
.rspond-overlay-popover.messaging-dialog {
    width: min(380px, 92vw);
    --rspond-popover-max-width: 380px;
}

/* The message inspector (D-68) is the SDK's modal dialog (ConfirmationSettings.open), whose card the SDK holds
   between 20rem and 30rem wide, a confirmation's measure, and as tall as its content. ConfirmationSettings' size
   settings reach the component's own tag, not the card, so the SDK offers no setting for the card's size: here the
   inspector's card takes room for its two panes side by side at a desk, no more than the window less a margin, and
   scrolls inside itself when it is taller than the window. */
.messaging-inspector .rspond-confirmation {
    width: min(64rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    top: 50%;
}

@media (max-width: 480px) {
    /* The SDK's header row does not fold, and with Activity, Sign out, the name and the theme switch beside the
       wordmark it runs past a phone's edge and scrolls the whole page sideways. Letting the row wrap puts the controls
       on following lines under the wordmark instead. */
    header .rspond-layout-horizontal {
        flex-wrap: wrap;
        row-gap: var(--rspond-space-small, 4px);
    }

    /* The header's groups size to their content; capped at the row's width, a group that holds a status, Sign out and
       the name folds inside itself as well. */
    header .rspond-layout-grid-item {
        max-width: 100%;
    }

    /* ...except inside a status, whose count badge belongs beside its sentence. */
    header .rspond-status-view-message .rspond-layout-horizontal {
        flex-wrap: nowrap;
    }

    /* The approach ladder is too wide for a phone in one row, and five rows stood on end push Send below the fold. It
       becomes a grid of two equal columns, read left to right and down, Clear text first and Token last, its choices
       joined into one control as the Algorithm choice beside it is one, so the progression still reads in order and
       the ladder is three rows tall. */
    .rspond-toggle-bar.messaging-ladder {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .rspond-toggle-bar.messaging-ladder > label {
        border-radius: 0;
        margin: 0 0 -1px -1px;
        justify-content: center;
    }

    .rspond-toggle-bar.messaging-ladder > label:first-of-type {
        border-top-left-radius: 6px;
    }

    .rspond-toggle-bar.messaging-ladder > label:nth-of-type(2) {
        border-top-right-radius: 6px;
    }

    .rspond-toggle-bar.messaging-ladder > label:last-of-type {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        grid-column: 1 / -1;
    }

    /* On a desk Browse's kid column, and Activity's Detail, share what is left of the card (fr), so every column
       stands inside it. The SDK gives a column one width and no floor (ColumnDefinitionSettings.withWidth takes a
       single WebSize, written inline as the table's --rspond-col-<column>-width), so on a phone, where the table
       scrolls sideways, those shares come to nothing. Here they take widths of their own; !important because the
       table states its column widths inline. */
    .rspond-table {
        --rspond-col-kid-width: 150px !important;
        --rspond-col-detail-width: 300px !important;
    }

    /* On a phone the inspector fills the screen, edge to edge, and its panes stand one over the other (the grid
       flow's doing); it scrolls inside itself. */
    .messaging-inspector .rspond-confirmation {
        top: 0;
        left: 0;
        transform: none;
        width: 100vw;
        height: 100vh;
        max-height: none;
        border-radius: 0;
        padding: 16px;
    }

    /* A 32-digit IV in the wire face needs 312 pixels; on a phone the dialog's field is 333 pixels wide, and the form
       control's 12-pixel side padding leaves it 307, so the last digit is cut off. The browser's own clear button is not
       the cause (the SDK already hides it on every control). The SDK offers no setting for a control's inner padding,
       so the wire fields in the demonstration's dialogs take 8 pixels a side here -- the inspector's kid and IV too. */
    .rspond-overlay-popover.messaging-dialog input.messaging-wire.rspond-form-control:not([type="checkbox"]):not([type="radio"]),
    .messaging-inspector input.messaging-wire.rspond-form-control:not([type="checkbox"]):not([type="radio"]) {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* The phone's dialogs take the screen's width less the SDK's own 8-pixel margin each side, so a 32-digit IV fits
       its field whole; the SDK caps a popover through its max-width variable, which says the same. */
    .rspond-overlay-popover.messaging-dialog {
        width: calc(100vw - 16px);
        --rspond-popover-max-width: calc(100vw - 16px);
    }
}

/* A toggle bar wraps its choices when the row is too narrow for them -- Send's five approaches on a phone -- but the
   SDK holds its control slot at one control's height with an inline style, so the second row would hang below the
   slot, under the field's note band, where it can be seen but not clicked. The slot is let grow to hold both rows. */
.rspond-layout-grid-item:has(> .rspond-toggle-bar) {
    height: auto !important;
}

/* A toggle bar's radio inputs are hidden by absolute positioning, but the bar is not their containing block, so they
   sit relative to the page and lengthen it past the bottom of the screen. Choosing a toggle focuses its input, and the
   browser scrolls the whole page to bring it into view: the header slides off the top and an empty band opens at the
   bottom. Making the bar their containing block keeps them inside it. */
.rspond-toggle-bar {
    position: relative;
}