/* Mobile refinements.
 *
 * Everything here is inside a max-width media query, so desktop rendering is
 * completely unchanged. This file is linked AFTER each page's own <style>
 * block so it can override the per-template rules that hide sidebars and pin
 * heights to 100vh.
 */

/* The drawer toggle exists only on small screens. */
.drawer-toggle { display: none; }
.drawer-scrim  { display: none; }

@media (max-width: 768px) {

    /* --- breathing room ---------------------------------------------- */
    body { padding: 0.6rem !important; }

    .glass { border-radius: 16px; }
    .wrap, .container { max-width: 100% !important; }

    /* --- touch targets ------------------------------------------------ */
    /* 44px is the smallest reliably tappable target. */
    .btn { min-height: 44px; padding: 0.6rem 0.95rem; }
    button, a.btn { touch-action: manipulation; }

    /* 16px stops iOS Safari zooming the page when a field is focused. */
    .field, input, select, textarea { font-size: 16px !important; }

    /* --- full-height chats -------------------------------------------- */
    /* 100vh includes the space behind the address bar on mobile, which pushes
       the composer off-screen. dvh tracks the visible area instead. */
    .shell {
        height: calc(100dvh - 1.2rem) !important;
        max-width: 100% !important;
    }
    .messages { padding: 0.85rem !important; }

    /* --- sidebar becomes a slide-in drawer ---------------------------- */
    /* It used to be display:none, which silently removed the participant list
       and every staff control from phones. */
    .side {
        display: block !important;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(84vw, 310px);
        max-width: 310px;
        z-index: 1200;
        overflow-y: auto;
        border-right: 1px solid var(--ring);
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        padding-top: 1.1rem !important;
    }
    body.drawer-open .side { transform: translateX(0); }

    .drawer-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1100;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }

    .drawer-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
    }


    /* --- chat headers --------------------------------------------------- */
    /* The public room packs a globe, title, status, avatar, name and three
       buttons into one row. On a phone that has to wrap and shrink. */
    .chat-header {
        padding: 0.7rem 0.8rem !important;
        gap: 0.5rem !important;
        row-gap: 0.6rem !important;
    }
    .chat-header h1 { font-size: 1.05rem !important; }
    .chat-header .btn {
        min-height: 38px;
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
    /* The avatar already identifies you; the name is redundant here. */
    .chat-header #usernameDisplay { display: none; }
    /* The globe is decoration, and the row needs the width more. */
    .chat-header > div:first-child > span.text-2xl { display: none; }

    /* The expiry notice wraps rather than forcing the page wide. */
    .shell > div.text-xs { padding: 0.5rem 0.8rem !important; line-height: 1.35; }

    /* --- messages ----------------------------------------------------- */
    .bubble { max-width: 88%; }
    .msg-image { max-width: 190px; max-height: 190px; }
    .avatar { width: 30px; height: 30px; font-size: 0.78rem; }
    .avatar-sm { width: 24px; height: 24px; font-size: 0.64rem; }

    /* --- composer ----------------------------------------------------- */
    /* Icon buttons shrink so the text field keeps most of the width. */
    #emojiBtn, #imageBtn {
        padding: 0.5rem 0.6rem !important;
        min-width: 44px;
        font-size: 1.05rem;
    }
    .emoji-panel { max-width: 100%; }

    /* --- list rows stack instead of squeezing ------------------------- */
    /* friends, room settings, leaderboard: several controls per row that
       become unusable side by side on a narrow screen. */
    .row {
        flex-wrap: wrap;
        gap: 0.5rem 0.6rem;
        padding: 0.8rem 0.5rem;
    }
    .row form { flex: 1 1 auto; }
    .row form .btn { width: 100%; }
    .row .place { width: 2.4rem; font-size: 0.9rem; }

    /* --- themes --------------------------------------------------------- */
    .theme-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }
    .theme-swatch .strip { height: 38px; }

    /* --- dashboard ------------------------------------------------------ */
    .tile { padding: 20px 16px; }
    .tile:hover { transform: none; }   /* no hover lift on touch */

    /* --- leaderboard ---------------------------------------------------- */
    .podium { gap: 8px; }
    .plinth { padding: 10px 5px 9px; }
    .plinth .who { font-size: 0.78rem; }
    .plinth.p1 { height: 132px; }
    .plinth.p2 { height: 106px; }
    .plinth.p3 { height: 90px; }

    /* Long codes and names must never widen the page. */
    .code-box { font-size: 1rem !important; letter-spacing: 2px !important; word-break: break-all; }
    h1 { font-size: 1.6rem !important; }
}

/* Very narrow phones. */
@media (max-width: 380px) {
    .btn { padding: 0.55rem 0.7rem; font-size: 0.86rem; }
    .bubble { max-width: 92%; }
    h1 { font-size: 1.4rem !important; }
}