/*
 * The panel, in a floating card.
 *
 * Presentation only, and it lives here rather than in extension/styles because
 * none of it is true of the extension: there the panel is a full-height side
 * panel with three modes, and here it is Study Party in a 340px card that
 * hovers over a video. Loaded after the extension's stylesheet by sync-panel,
 * so this is the layer that overrides, and the panel's own markup and script
 * stay untouched.
 */

/* The mode furniture. The web app has one mode, so a tab strip that cannot
   go anywhere, a summary of the only choice, and a footer note about tabs
   are all just height taken from the chat. */
#yu-tablist,
#yu-mode-summary,
#yu-footer {
    display: none !important;
}

html,
body {
    height: 100%;
    /* The card behind the iframe draws the rounded corners and the shadow;
       the document inside it only has to be transparent enough not to square
       them off again. */
    background: transparent;
}

.yu-panel {
    padding: 12px;
    gap: 12px;
}

/* Four faces in a 340px card, not two and a half. */
.yu-members {
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
}

.yu-member {
    padding: 7px 4px;
}

/* Chat is what the card is for: everything else keeps its natural height and
   this takes the rest. */
.yu-chat {
    min-height: 4.5rem;
}

.yu-room-bar {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* Reaching the send button with a thumb, on a tablet, over a video. */
.yu-reaction-btn {
    min-width: 38px;
    min-height: 38px;
}

/* The picker is a grid of two dozen emoji; capped so opening it cannot push
   the chat out of a card that is only ever a few hundred pixels tall. */
.yu-reaction-grid {
    max-height: 132px;
    overflow-y: auto;
}

/* Toasts are appended to the panel's body, which is now a card with rounded
   corners — keep them off the curve. */
.yu-toast {
    bottom: 62px;
}