/* ===================== */
/* Mobile-friendly layout adjustments */
@media (max-width: 768px) {
    html {
        height: 100%;
        overflow: hidden; /* Safari: overflow:hidden on body alone is insufficient — must also set on html */
    }
    body {
        height: 100vh;
        overflow: hidden; /* lock body so it never scrolls — prevents page jump on input focus */
    }

    #messages p, p.Hint, p.Question, p.CloseAnswer {  /* Fix typo: CloseAnswer */
        max-width: 100%;    /* Full width on mobile - no purple background visible */
        font-size: 12px;    /* Increased from 11px for better readability */
        padding: 6px 8px;   /* Reduced padding for edge-to-edge feel */
    }

    /* Quiz messages slightly larger for emphasis */
    p.Question, p.Hint, p.CloseAnswer {
        font-size: 13px;  /* Slightly larger than regular messages */
    }
    #container {
        flex: 1;          /* fill remaining body height after banner/footer */
        min-height: 0;
        overflow-y: auto; /* #container scrolls to reveal leaderboard — body does not scroll */
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        flex-direction: column;
        gap: 8px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 2px;     /* pull room header up toward the banner */
        padding-bottom: 64px; /* clear fixed input form when scrolled to bottom */
        box-sizing: border-box;
    }

    #chat {
        flex: none;
        height: calc(100vh - 60px);    /* basic fallback (all browsers) */
        height: calc(100svh - 60px);   /* small viewport — URL bar visible (Chrome 108+, iOS 15.4+) */
        height: calc(100dvh - 60px);   /* dynamic viewport — updates as browser chrome shows/hides */
        min-height: 300px;
        /* backdrop-filter on this element (set in room.css) causes Chrome to treat it as a
           containing block for position:fixed children, making bottom:0 on #inputForm relative
           to #chat instead of the viewport. Remove it on mobile — the opaque white background
           makes it invisible anyway. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: visible; /* Allow scroll events to chain up to #container */
        padding: 2px 0 2px 2px;  /* Remove right padding to match leaderboard */
        box-sizing: border-box;
    }

    #leaderboardContainer {
        flex: none;
        width: 100%;
        max-width: 100% !important;  /* Override desktop 200px max-width constraint */
        max-height: none;            /* Remove 171px cap — page scrolls to see full leaderboard */
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        box-sizing: border-box;
    }

    #leaderboard {
        flex: none;
        overflow-y: visible;  /* No internal scroll — page scroll handles it */
        padding: 2px 0 2px 2px;
        box-sizing: border-box;
    }

    /* Leaderboard entries full width on mobile */
    #leaderboard p {
        width: 100%;
        margin: 0;
        padding: 6px 0 6px 8px;  /* Zero right padding for true edge-to-edge */
        border-radius: 4px;  /* Further reduced for minimal inset appearance */
        font-size: 12px;
    }

    /* ---- Banner hides when keyboard is open, slides back when closed ---- */
    .app-banner {
        max-height: 80px;   /* larger than real height — enables max-height transition */
        overflow: hidden;
        transition: max-height 0.22s ease, padding-top 0.22s ease, padding-bottom 0.22s ease, box-shadow 0.22s ease;
    }

    body.keyboard-open .app-banner {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        box-shadow: none;
    }

    /* When banner is hidden, chat expands to fill the freed space */
    body.keyboard-open #chat {
        height: 100vh;
        height: 100svh;
        height: 100dvh;
    }

    /* Scrolling up in messages while keyboard is open reveals the banner again */
    body.keyboard-open.banner-revealed .app-banner {
        max-height: 80px;
        padding-top: 8px;
        padding-bottom: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    body.keyboard-open.banner-revealed #chat {
        height: calc(100vh - 60px);
        height: calc(100svh - 60px);
        height: calc(100dvh - 60px);
    }

    h1 {
        font-size: 20px;
        height: 40px;
        padding: 0 4px;  /* Reduced from 8px */
    }

    h2 {
        font-size: 14px;
        margin: 0;
    }

    .quiz-header,
    .leaderboard-header {
        padding: 0 2px 2px 2px;  /* Reduced horizontal from 4px to 2px */
        margin-bottom: 2px;
    }

    /* Add minimal padding to messages container */
    #messages {
        padding: 0px;  /* Zero padding for true edge-to-edge */
        padding-bottom: 56px; /* Clear the fixed input form */
        box-sizing: border-box;
        flex: 1; /* Take remaining space in #chat */
        min-height: 0; /* Allow flexbox shrinking */
        overflow-y: auto; /* Enable scrolling */
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* iOS Safari: momentum scroll inside overflow:hidden parent */
        touch-action: pan-y; /* Chrome + Safari: allow vertical touch-scroll */
        overscroll-behavior: auto; /* Allow scroll to chain up to #container when at boundary */
    }

    /* Floating input bar */
    #inputForm {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px; /* CSS fallback — JS overrides this with top once visualViewport is ready */
        z-index: 100;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 28px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.08);
        padding: 6px 6px 6px 6px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    /* Optimize message avatar layout - avatar + username horizontal, message text below */
    .message-avatar-container {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;  /* 4px vertical, 8px horizontal */
        align-items: flex-start;
    }

    .message-avatar-container > img {
        width: 24px;  /* Smaller on mobile */
        height: 24px;
        flex-shrink: 0;
        align-self: flex-start;
    }

    .question-image,
    .question-video,
    .question-video-embed,
    .question-audio {
        flex-basis: 100%; /* Force onto its own row in the flex-wrap row layout */
    }

    .message-text-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
    }

    .message-username {
        flex: 1;
        display: inline;  /* Override block display */
        margin-bottom: 0;
        font-size: 12px;
        line-height: 1.3;
        min-width: 0;
    }

    .message-text {
        flex-basis: 100%;  /* Force to new row */
        font-size: 12px;
        line-height: 1.4;
    }

    /* Room header becomes flex row to fit kviztali pill alongside room name */
    .quiz-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Compact room header — smaller avatar/text so messages get more height */
    .quiz-header h2 {
        font-size: 13px;
    }

    #roomTitle {
        gap: 8px;
    }

    .room-header-avatar {
        width: 26px;
        height: 26px;
        border-width: 2px;
    }

    /* Kviztali pill moves into the room header on mobile (mirrors Android app layout) */
    #bannerKviztali {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 20px;
        background: rgba(102, 126, 234, 0.15);
        border: 1px solid rgba(102, 126, 234, 0.4);
        font-size: 12px;
        font-weight: bold;
        color: #4a3f8a;
        cursor: pointer;
        flex-shrink: 0;
        order: 2;         /* keep pill rightmost, after the + submit button */
        margin-left: 6px; /* gap between + button and pill */
    }

    /* Hide the leaderboard kviztali entry on mobile — banner pill takes its place */
    .premium-currency-entry { display: none; }

    /* Keep dropdown usable on narrow screens */
    .premium-dropdown {
        width: calc(100vw - 20px);
        max-width: 340px;
    }
}



/* ===================== */
/* Desktop layout (min-width) */
/* Desktop uses room.css settings - no override needed for leaderboard flex */
@media (min-width: 769px) {
    h1 { font-size: 24px; height:50px; }
    h2 { font-size:16px; }
    .quiz-header, .leaderboard-header { padding-bottom:4px; margin-bottom:4px; }
    #bannerKviztali { display: none !important; }
}