/* ==========================================================================
   MOBILE UI THEME — Phase 1 : Shell (bottom nav) + Chat screen
   --------------------------------------------------------------------------
   - Applies ONLY under 767px. Desktop layout is completely untouched.
   - Reuses the site's existing CSS variables (--bg-primary, --bg-tertiary,
     --text-primary, --border-color, ...) so the current dark/light toggle
     keeps working exactly as before — only the shape/layout changes to
     match the demo (rounded cards, pill nav, pill composer, soft shadows).
   - Nothing here removes or renames an existing class; it only adds new
     classes (m-bubble, mobile-bottom-nav, mobile-more-sheet, ...) so no
     existing JS selector is affected.
   ========================================================================== */

@media (max-width: 767px) {

    /* ---------- Global shell ---------- */
    /* NOTE: we do NOT use display:none here. The notification and profile
       dropdowns (#notification-dropdown, #profile-dropdown) live inside
       .main-sidebar, and display:none on an ancestor prevents them from
       ever rendering — even when JS removes their own "hidden" class.
       Instead we shrink the sidebar to a zero-size, fixed-position anchor
       (still "on screen", just invisible) so its dropdown children can
       still pop up — and we reposition those dropdowns below as proper
       mobile bottom panels. */
    .main-sidebar {
        position: fixed !important;
        right: 0;
        bottom: 0;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: none !important;
        z-index: 55;
    }

    .main-sidebar > div:first-child {
        display: none !important; /* the icon column itself — replaced by #mobile-bottom-nav */
    }

    .main-sidebar #notification-btn,
    .main-sidebar #profile-btn {
        visibility: hidden;
        width: 1px !important;
        height: 1px !important;
        position: absolute;
    }

    /* The two dropdowns triggered from the (invisible) buttons above —
       reopened here as mobile bottom panels. */
    #notification-dropdown,
    #profile-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 84px !important;
        left: 14px !important;
        right: 14px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 60vh !important;
        border-radius: 20px !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .35) !important;
    }

    #tool-chat, #tool-code {
        padding-bottom: 86px; /* room for the floating bottom nav */
    }

    /* #tool-chat/#tool-code only carry the Tailwind classes "flex-1
       flex-col" (no base "flex"), and the JS that un-hides them
       (navigateToTool in js/ui.js) never adds a "flex" class either — so
       they actually render as plain block boxes: header, message list and
       composer just stack in normal document flow instead of the message
       list stretching between a pinned header and a pinned composer. When
       the message list is short (a new/empty chat), the composer ends up
       floating mid-screen instead of pinned to the bottom.
       IMPORTANT: this must only apply while the tool is actually the
       active/visible one. navigateToTool() hides every .tool-content by
       adding a "hidden" class before showing the new one — an earlier,
       unscoped version of this rule used !important on the bare ID
       selector, which out-specified ".hidden{display:none}" and defeated
       that toggle, leaving #tool-chat/#tool-code visibly stacked on top of
       whichever tool the user actually navigated to. :not(.hidden) keeps
       the rule from ever matching while JS has it hidden. */
    #tool-chat:not(.hidden), #tool-code:not(.hidden) {
        display: flex !important;
        flex-direction: column;
    }

    .header {
        background: transparent !important;
        border-bottom: none !important;
        padding: 14px 14px 8px !important;
    }

    .model-selector-btn {
        background: var(--bg-tertiary);
        box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .25);
        border-radius: 999px;
        padding: 8px 16px !important;
        font-size: 12.5px;
    }

    .menu-toggle-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--bg-tertiary);
        box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .25);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ---------- Chat bubbles ---------- */
    .m-bubble {
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .18);
        font-size: 13.5px !important;
        line-height: 1.85 !important;
        max-width: 84% !important;
    }

    .m-bubble-user {
        border-radius: 16px 16px 4px 16px !important;
    }

    .m-bubble-bot {
        border-radius: 16px 16px 16px 4px !important;
    }

    .user-message, .ai-message {
        margin-bottom: 16px !important;
    }

    /* ---------- Composer ---------- */
    .input-area {
        background: transparent !important;
        border-top: none !important;
        padding: 4px 12px 10px !important;
    }

    #tool-input-container > div {
        background: var(--bg-tertiary);
        border-radius: 26px !important;
        border: none !important;
        box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .25);
    }

    /* ---------- Bottom nav ---------- */
    #mobile-bottom-nav {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: 12px;
        z-index: 60;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: var(--bg-tertiary);
        box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .35);
        border-radius: 999px;
        padding: 10px 6px;
        border: 1px solid var(--border-color);
    }

    #mobile-bottom-nav .nav-item {
        color: var(--text-secondary);
        font-size: 18px;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background .15s, color .15s;
    }

    #mobile-bottom-nav .nav-item.mbn-active {
        color: var(--text-primary);
        background: var(--bg-hover);
    }

    /* ---------- "More" bottom sheet ---------- */
    #mobile-more-sheet-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 65;
        display: none;
    }

    #mobile-more-sheet-overlay.open {
        display: block;
    }

    #mobile-more-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-secondary);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
        z-index: 70;
        transform: translateY(110%);
        transition: transform .25s ease;
    }

    #mobile-more-sheet.open {
        transform: translateY(0);
    }

    #mobile-more-sheet .sheet-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    #mobile-more-sheet .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 4px;
        border-radius: 14px;
        font-size: 11px;
        color: var(--text-secondary);
        background: var(--bg-tertiary);
    }

    #mobile-more-sheet .nav-item i {
        font-size: 19px;
    }

    /* ---- Notification badge/dot (bug fix: the real #notification-count
           element lives inside #notification-btn, which mobile CSS above
           shrinks to a 1px, visibility:hidden anchor — and visibility:hidden
           is inherited, so the count was rendering but invisible on mobile.
           Rather than force-show a badge on that 1px offscreen anchor, we
           mirror the same count onto the mobile bell button (inside the
           "more" sheet) and a small dot onto the always-visible "more" nav
           icon, both kept in sync from js/ui.js:updateNotificationBell(). ---- */
    .mbn-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mbn-badge {
        position: absolute;
        top: -6px;
        right: -8px;
        background: #ef4444;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        border-radius: 999px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--bg-tertiary);
    }

    .mbn-badge.hidden {
        display: none;
    }

    .mbn-dot {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 9px;
        height: 9px;
        background: #ef4444;
        border-radius: 50%;
        border: 2px solid var(--bg-tertiary);
    }

    .mbn-dot.hidden {
        display: none;
    }
}

/* ==========================================================================
   Phase 2 : Image / Video studio screens
   - Model-selection grid (before a model is picked)
   - Generation view header + shared input-form elements across all model
     files (flux, nano, sora, veo, wan22, stability, openaiImage,
     magicEraser, backgroundEraser, ttsFm, voiceClone) — targeted generically
     by element/id so no individual model file needs to be touched.
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- Model picker (before choosing Flux/DALL·E/Sora/Veo/...) ---- */
    .model-selection-container {
        padding: 12px 14px 90px;
    }

    .model-selection-container h2 {
        font-size: 1.15rem;
    }

    .model-grid {
        gap: 10px;
    }

    .model-card {
        border-radius: 16px;
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .2);
    }

    .model-card-title {
        font-size: 1rem;
    }

    .model-card-description {
        font-size: 0.75rem;
    }

    /* ---- Generation view header (back arrow + model name), like the
           demo's top-row / circle-btn / screen-title ---- */
    .back-to-models-btn {
        background: var(--bg-tertiary);
        box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .25);
        border-radius: 999px;
        padding: 8px 16px !important;
        font-size: 12.5px;
    }

    /* ---- Shared input-form elements across every model's generator ---- */
    #generation-view textarea,
    #generation-view select,
    #generation-view input[type="text"] {
        border-radius: 14px !important;
        font-size: 13.5px;
    }

    #generation-view .sora-option-group,
    #generation-view [class$="-option-group"] {
        border-radius: 16px !important;
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .15);
    }

    #generation-view [id$="-generate-btn"] {
        border-radius: 999px !important;
        box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), .55);
    }

    #generation-view .model-example-image {
        border-radius: 12px !important;
    }

    /* ---- Generated result cards (image / video / audio bubbles) ---- */
    .m-bubble img,
    .m-bubble video {
        border-radius: 12px !important;
    }
}

/* ==========================================================================
   Phase 3 : Profile + Gallery
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- Profile header: soft gradient "cover" above the avatar, like
           the demo's .profile-cover, added purely with CSS (no new
           markup needed). ---- */
    #tool-user-profile .user-profile-header {
        position: relative;
        padding-top: 2.5rem;
        overflow: hidden;
    }

    #tool-user-profile .user-profile-header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: linear-gradient(120deg, var(--bg-tertiary), var(--accent));
        opacity: .35;
    }

    #tool-user-profile .profile-avatar {
        position: relative;
        z-index: 1;
    }

    #tool-user-profile .profile-avatar img {
        width: 84px !important;
        height: 84px !important;
    }

    #tool-user-profile .profile-info h2 {
        font-size: 1.25rem;
    }

    /* Level / achievements card */
    #tool-user-profile .medals-section > div.relative.overflow-hidden {
        padding: 1rem !important;
        border-radius: 18px !important;
    }

    /* Post-card feed under the profile (kept as full cards — richer than
       a bare thumbnail grid — just tightened & rounded for mobile) */
    #tool-user-profile .post-card,
    #tool-showcase .post-card {
        border-radius: 16px !important;
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .18);
    }

    /* ---- Gallery ("گالری من") — matches the demo's 3-column
           profile-grid exactly, since this screen IS a media grid. ---- */
    #tool-gallery .grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    #tool-gallery .grid > div {
        border-radius: 10px !important;
    }

    #tool-gallery .header,
    #tool-user-profile .header {
        background: transparent !important;
        border-bottom: none !important;
    }
}

/* ==========================================================================
   Phase 4 : Messenger
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- Conversation list screen ---- */
    #messenger-left-sidebar {
        padding: 6px 10px 90px;
    }

    .conversation-item {
        border-radius: 16px !important;
        padding: 10px !important;
        margin-bottom: 2px;
    }

    /* Unread conversations get the demo's "lifted card" look */
    .conversation-item:has(.unread-badge) {
        background: var(--bg-tertiary);
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .18);
    }

    .conversation-item img {
        width: 44px !important;
        height: 44px !important;
    }

    #chat-header-info {
        background: transparent !important;
        border-bottom: none !important;
        padding: 12px 14px !important;
    }

    /* ---- Conversation screen: bubbles + composer ---- */
    .message-bubble {
        box-shadow: 0 4px 12px -8px rgba(0, 0, 0, .2);
        font-size: 13px;
        max-width: 82% !important;
    }

    .messenger-input-container {
        border-radius: 999px !important;
        box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .25);
    }

    /* The conversation list already reserves this same 90px at the bottom
       (see #messenger-left-sidebar above) so it isn't covered by the
       floating nav; the composer needs the same reserved space. */
    #messenger-input-area {
        margin-bottom: 86px;
    }

    /* ---- Header "Pro"/gem pill + profile avatar (top-right) ---- */
    .mobile-gem-pill {
        display: flex;
        align-items: center;
        gap: 5px;
        background: var(--bg-tertiary);
        box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .25);
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .mobile-gem-pill i {
        color: var(--accent);
        font-size: 11px;
    }

    .mobile-header-avatar-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .3);
        border: 2px solid var(--bg-tertiary);
    }

    .mobile-header-avatar-btn img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Standalone top-right bubble — lives outside the tool-content areas,
       positioned fixed so it always sits above whatever screen is active. */
    #mobile-global-avatar {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 58;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #mobile-global-avatar.hidden {
        display: none;
    }

    /* The messenger conversation header (#chat-header-info) puts real,
       functional call/video/menu buttons in the same top-right corner
       this fixed bubble always occupies (unlike every other tool header,
       which reserves that exact spot with its own inline gem+avatar
       copy — see mobileHeaderRight in js/templates.js). Trying to reserve
       pixel space next to the bubble is fragile (its width shifts with
       the gem-balance digit count), so instead we just hide the bubble
       outright whenever a conversation is actually open — the composer
       and back button already give full navigation from there, so the
       shortcut isn't needed on that specific screen. Reverts on its own
       once #messenger-main-chat gets "hidden" back (see the back-button
       handler in js/handlers.js). */
    body:has(#messenger-main-chat:not(.hidden)) #mobile-global-avatar {
        display: none !important;
    }
}

/* ==========================================================================
   Phase 5 : Notifications + Wallet (gem modal) / Leaderboard
   - Notifications: the dropdown itself already becomes a bottom panel in
     Phase 1 (#notification-dropdown); here we only restyle the rows inside
     it (.notification-item) into the demo's rounded "card with unread
     accent bar" look — no markup change needed, renderNotifications()
     already emits stable classes/structure.
   - Wallet: the project has no separate "wallet" screen — gem purchase
     lives in #gem-modal (triggered from the gem pill). We turn that
     centered desktop dialog into a bottom sheet on mobile (matching the
     #mobile-more-sheet pattern already used elsewhere) and restyle
     .payment-method-btn rows like the demo's .pack cards.
   - Leaderboard: #tool-leaderboard / .lb-* classes already exist from
     renderLeaderboard(); we shrink the podium, round the row/tab/sticky-
     footer corners and add safe-area padding so it matches the demo's
     .rank-row list look on a narrow screen.
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- Notifications ---- */
    #notification-list {
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .notification-item {
        border-radius: 14px !important;
        padding: 10px !important;
        box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .2);
    }

    .notification-item.bg-indigo-500\/10 {
        border-inline-start: 3px solid var(--accent);
    }

    .notification-item img {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0;
    }

    /* ---- Wallet (gem modal) — bottom sheet instead of centered dialog ---- */
    #gem-modal-overlay {
        z-index: 9998;
    }

    #gem-modal {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        border-radius: 22px 22px 0 0 !important;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
        background: var(--bg-secondary);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
        max-height: 82vh;
        overflow-y: auto;
    }

    .payment-method-btn {
        border-radius: 16px !important;
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .18);
        padding: 14px !important;
    }

    /* ---- Leaderboard ---- */
    #tool-leaderboard {
        padding-bottom: 90px;
    }

    .lb-container {
        padding: 0 !important;
    }

    .lb-tabs {
        margin: 0 12px 16px !important;
        border-radius: 999px !important;
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .2);
    }

    .lb-tab-btn {
        font-size: 11.5px;
        padding: 8px 6px;
        border-radius: 999px !important;
    }

    .lb-countdown {
        font-size: 10.5px;
        padding: 6px 12px;
        margin-bottom: 14px !important;
    }

    .lb-podium {
        gap: 6px !important;
        height: auto !important;
        padding-top: 4.5rem !important;
        margin-top: 3rem !important;
        margin-bottom: 1.5rem !important;
    }

    .podium-place img.rounded-full {
        width: 56px !important;
        height: 56px !important;
    }

    .lb-list {
        padding: 0 12px 12px !important;
        gap: 8px !important;
    }

    .lb-item {
        border-radius: 16px !important;
        padding: 8px 10px !important;
    }

    .lb-item img {
        width: 38px !important;
        height: 38px !important;
        margin: 0 8px !important;
    }

    .lb-sticky-footer {
        margin: 0 !important;
        left: 14px;
        right: 14px;
        bottom: 12px;
        border-radius: 999px !important;
        border-top: none;
        box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .4);
    }

    .lb-sticky-inner {
        flex-wrap: nowrap;
    }
}

/* ==========================================================================
   Phase 6 : Support widget (help center + live/AI chat) + Toolbox results
             (audio player, code blocks) — no markup changes; every selector
             below targets classes/ids that #support-chat-widget,
             getSupportWidgetHelpCenterTemplate(), .styled-audio-player-container
             and .ai-content pre already emit today.
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- Launcher button: the desktop position (bottom-5 left-5) sits
           right under #mobile-bottom-nav — lift it above the nav. ---- */
    #support-widget-btn {
        bottom: 86px !important;
        left: 14px !important;
        width: 52px !important;
        height: 52px !important;
        box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .4);
    }

    /* ---- Panel: the desktop 320×500 floating box → full mobile
           "support center" screen, same bottom-sheet pattern already used
           for #mobile-more-sheet / #gem-modal. ---- */
    #support-chat-widget {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 86vh !important;
        max-height: 86vh !important;
        border-radius: 22px 22px 0 0 !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
        padding-bottom: env(safe-area-inset-bottom);
    }

    #support-widget-header {
        border-radius: 22px 22px 0 0;
        padding: 14px 14px !important;
    }

    /* ---- Help center: search field + article rows, like the demo's
           .help-search / .help-item cards. ---- */
    #support-widget-search {
        position: relative;
        margin-bottom: 10px;
    }

    #support-widget-search input {
        width: 100%;
        background: var(--bg-tertiary);
        border: none;
        border-radius: 999px;
        padding: 10px 34px 10px 14px;
        font-size: 13px;
        color: var(--text-primary);
    }

    #support-widget-search i {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        color: var(--text-secondary);
        font-size: 13px;
    }

    .support-help-group-title {
        font-size: 11px;
        color: var(--text-secondary);
        font-weight: 700;
        margin: 12px 4px 6px;
    }

    .support-help-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--bg-tertiary);
        border-radius: 14px !important;
        padding: 11px 12px !important;
        margin-bottom: 6px;
        box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .2);
    }

    .support-help-item .title {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .support-help-item .subtitle {
        font-size: 10.5px;
        color: var(--text-secondary);
        margin-top: 2px;
    }

    #support-widget-start-chat-btn,
    #support-widget-live-btn {
        border-radius: 999px !important;
    }

    /* ---- Toolbox (تشخیص چهره / پاک‌کن جادویی / حذف پس‌زمینه): only 2
           model cards exist today, so — instead of forcing the demo's
           3-column grid onto too few tiles — center them as evenly-sized
           touch-friendly cards, reusing Phase 2's .model-card rounding. ---- */
    #tool-face_recognition .model-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 360px;
        margin-inline: auto;
    }

    /* ---- Audio results (TTS / voice clone) — the demo's "voice studio"
           waveform card maps to the real .styled-audio-player-container
           already used for every generated/played audio bubble. ---- */
    .styled-audio-player-container {
        border-radius: 18px !important;
        box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .18);
    }

    .styled-audio-player .play-pause-btn {
        background: var(--text-primary);
        color: var(--bg-primary);
        width: 40px !important;
        height: 40px !important;
    }

    /* ---- Code blocks in chat — the demo's dedicated "code card" maps to
           .ai-content pre; round it like a card and keep the copy button
           always visible since mobile has no hover state. ---- */
    .ai-content pre {
        border-radius: 14px !important;
        font-size: 12.5px;
    }

    .copy-code-btn {
        opacity: 1 !important;
        background-color: rgba(255, 255, 255, .12);
    }
}

/* ==========================================================================
   Phase 7 : Social showcase — story rail
   - #showcase-feed already renders .story-item / .story-item-avatar /
     .story-item-name exactly like the demo's .stories-row; here we only
     shrink sizes to match the demo's compact 46px ring on a narrow screen.
   ========================================================================== */
@media (max-width: 767px) {

    .story-feed {
        gap: 0.85rem !important;
        padding: 10px 2px 6px;
    }

    .story-item-avatar {
        width: 52px !important;
        height: 52px !important;
    }

    .story-item-avatar img {
        border-width: 2px !important;
    }

    .story-item-name {
        font-size: 10px !important;
        max-width: 52px !important;
    }
}

@media (min-width: 768px) {
    #mobile-global-avatar {
        display: none !important;
    }
    #mobile-bottom-nav,
    #mobile-more-sheet,
    #mobile-more-sheet-overlay {
        display: none !important;
    }
}