/*
 * 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;
}

/* ---------------- a finger, not a pointer ---------------- */

/*
 * The panel is shipped from the extension, where it is only ever driven by a
 * mouse in a side panel. On a phone it is the main surface of the app, so the
 * two things that make a touch interface work are set here rather than there.
 *
 * The font size is not cosmetic. iOS Safari zooms the whole page in when a text
 * field under 16px takes focus, and it does not zoom back out — so a 13px
 * composer would leave someone scrolled sideways inside an iframe after every
 * message they sent.
 */
@media (pointer: coarse) {
    .yu-input {
        min-height: 44px;
        font-size: 16px;
    }

    .yu-btn {
        min-height: 44px;
        font-size: 15px;
    }

    .yu-mic-btn {
        width: 44px;
        height: 44px;
    }

    .yu-reaction-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Room-bar controls and host actions: small by design, but not so small
       that removing somebody is a coin toss. */
    .yu-icon-btn,
    .yu-mini-btn,
    .yu-sync-chip {
        min-height: 38px;
        padding-left: 11px;
        padding-right: 11px;
    }

    /* The moment in the video a message was about. Grows a hit area without
       growing the text, which has to stay quieter than the message. */
    .yu-msg-stamp {
        padding: 5px 7px;
    }
}

/* Docked at the bottom of a phone, the card is the width of the screen — so the
   seats can be bigger than the four-up grid a 340px floating card needs. */
@media (max-width: 700px) and (orientation: portrait) {
    .yu-members {
        grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    }

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