/* ============================================================
   Responsive CSS — responsive.css
   Loaded last in the cascade to override desktop constraints.
   All rules are scoped to @media queries (except global resets).
   ============================================================ */

/* --- Global Resets (all widths) --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

img, video, canvas {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   TABLET BREAKPOINT (≤768px)
   ============================================================ */
@media (max-width: 768px) {

    /* --- 3.1: Remove min-width constraints on tab containers --- */
    .chat_window, #chat_tab, #manage_avatar_tab {
        min-width: unset;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    #bible_tab, #strongs_tab, #devotional_tab, #verse_comparison_tab, #account_settings_tab {
        min-width: unset;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .tabcontent {
        margin-left: 0;
        margin-right: 0;
    }

    fieldset.edit_tab_element {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* --- 3.2: Make tab bar responsive --- */
    .tab {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tab button {
        padding: 12px 14px;
        font-size: 1.1em;
        display: inline-block;
    }

    /* --- 3.3: Make chat console responsive --- */
    #chat_console {
        margin-left: 0;
        margin-right: 0;
        min-width: unset;
        width: 100%;
        padding: 8px 4px;
    }

    .ai_warning {
        min-width: unset;
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- 3.4: Make modals and overlays responsive --- */
    .confirm-box {
        width: 90vw;
        left: 5vw;
    }

    .overlay-box, .verse-lookup-box {
        width: 90vw;
        max-width: 95vw;
        left: 5vw;
        min-width: unset;
    }

    .ui-dialog {
        width: 90vw !important;
        min-width: unset;
        left: 5vw !important;
    }

    .draw_avatar {
        width: 100%;
        margin: 0;
    }

    /* --- 3.5: Touch target compliance --- */
    .tab button,
    .bible-btn,
    .save-btn,
    .confirm_btn,
    .cancel_btn,
    button[type="submit"],
    .close,
    .dropbtn {
        min-width: 44px;
        min-height: 44px;
    }

    input[type="text"],
    input[type="password"],
    input[type="url"],
    input[type="email"],
    textarea,
    select {
        min-height: 44px;
        font-size: 16px;
    }

    /* --- 3.6: Scale header and user menu --- */
    h1 {
        max-width: 100%;
        margin-left: 8px;
        margin-right: 8px;
    }

    .dropdown-content {
        right: 0;
        left: auto;
    }

} /* end @media (max-width: 768px) */


/* ============================================================
   PHONE BREAKPOINT (≤480px)
   ============================================================ */
@media (max-width: 480px) {

    /* --- 5.1: Compact tab bar for phone --- */
    .tab button {
        padding: 8px 10px;
        font-size: 0.85em;
    }

    /* --- 5.2: Reduce Bible grid columns --- */
    .bible-chapter-grid,
    .bible-verse-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bible-book-grid .bible-btn {
        min-width: unset;
        width: 100%;
    }

    /* --- 5.3: Compact chat bubbles --- */
    .inner_boundaries_of_chat_bot,
    .inner_boundaries_of_chat_system {
        min-width: unset;
        max-width: 95%;
        width: 95%;
    }

    .inner_boundaries_of_chat_user {
        max-width: 85%;
        width: 85%;
    }

    #emoji_picker_overlay {
        width: 280px;
    }

    /* --- 5.4: Stack profile sections --- */
    .own-profile-container {
        flex-direction: column;
    }

    .own-profile-container input[type="text"],
    .own-profile-container input[type="password"],
    .own-profile-container input[type="url"],
    .own-profile-container textarea,
    .own-profile-container select {
        min-height: 44px;
        font-size: 16px;
    }

} /* end @media (max-width: 480px) */


/* ============================================================
   MINIMUM BREAKPOINT (≤320px)
   ============================================================ */
@media (max-width: 320px) {

    /* --- 6.1: Further reduce grids and padding --- */
    .bible-chapter-grid,
    .bible-verse-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body {
        padding: 4px;
    }

    .tab button {
        padding: 6px 8px;
        font-size: 0.75em;
    }

    /* --- 6.2: Tighten modals --- */
    .confirm-box,
    .overlay-box,
    .verse-lookup-box {
        width: 95vw;
        left: 2.5vw;
    }

    .ui-dialog {
        width: 95vw !important;
        left: 2.5vw !important;
    }

} /* end @media (max-width: 320px) */


/* ============================================================
   RESPONSIVE TYPOGRAPHY (≤768px)
   ============================================================ */
@media (max-width: 768px) {

    /* --- 7.1: Font size and line-length constraints --- */
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 1.4em;
        padding: 14px 8px;
    }

    h2 {
        font-size: 1.25em;
    }

    p, .bot_response, .user_question,
    .bible-chapter-text, .bible-verse-line,
    .devotional-commentary {
        max-width: 75ch;
    }
}