/* ========================================================================== 
   MOBILE AUDIT — финальные мобильные переопределения
   Загружается последним, чтобы у всех режимов был единый viewport-контракт.
   ========================================================================== */

@media (max-width: 991px) {
    html,
    body.is-logged-in {
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        overflow-x: hidden;
    }

    body.is-logged-in {
        overscroll-behavior-x: none;
    }

    .main-container,
    .controls-panel,
    .generation-space,
    .generation-space > div {
        min-width: 0;
        max-width: 100%;
    }

    .generation-space > div,
    #results-grid,
    #profile-view,
    #music-view,
    #video-history-view,
    #radio-view,
    #shop-view,
    #events-view,
    #collective-view,
    #admin-view,
    #lyrics-generator-view,
    #nodes-view,
    #inpaint-view {
        width: 100%;
        min-width: 0;
    }

    #results-grid,
    #profile-view,
    #music-view,
    #video-history-view,
    #radio-view,
    #shop-view,
    #events-view,
    #collective-view,
    #admin-view,
    #lyrics-generator-view {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    .table-responsive,
    .table-wrapper,
    pre,
    .tc-code-wrapper,
    .shop-tabs-scroll-area,
    .music-tabs,
    .filter-group {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    button,
    [role="button"],
    .mode-button-icon,
    .filter-btn,
    .shop-tab-btn {
        touch-action: manipulation;
    }

    /* PHOTOSHOOT / LYRICS GENERATOR
       These are long editor pages, so the document must own the vertical
       gesture. Keeping height:100% + overflow:hidden on their inner flex
       shells made the lower controls unreachable in mobile Safari. */
    html:has(body.app-mode-photoshoot),
    html:has(body.app-mode-lyrics_generator),
    body.app-mode-photoshoot,
    body.app-mode-lyrics_generator {
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.app-mode-photoshoot .main-container,
    body.app-mode-lyrics_generator .main-container {
        position: relative;
        inset: auto;
        display: flex;
        width: 100%;
        height: auto !important;
        min-height: 100dvh;
        max-height: none;
        padding: 4px;
        gap: 8px;
        overflow: visible !important;
    }

    body.app-mode-photoshoot .controls-panel,
    body.app-mode-lyrics_generator .controls-panel {
        order: 1;
        width: 100%;
        height: auto !important;
        min-height: 0;
        max-height: none;
        flex: 0 0 auto;
        overflow: visible !important;
    }

    body.app-mode-photoshoot #controls-container,
    body.app-mode-photoshoot #photoshoot-mode-container,
    body.app-mode-photoshoot #photoshoot-form,
    body.app-mode-photoshoot .photoshoot-scroll,
    body.app-mode-lyrics_generator #controls-container,
    body.app-mode-lyrics_generator #lyrics-sidebar-view {
        height: auto !important;
        min-height: 0;
        max-height: none;
        overflow: visible !important;
    }

    body.app-mode-photoshoot .photoshoot-scroll,
    body.app-mode-lyrics_generator #lyrics-generator-view {
        touch-action: pan-y;
    }

    body.app-mode-photoshoot .generation-space,
    body.app-mode-lyrics_generator .generation-space {
        order: 2;
        width: 100%;
        height: auto;
        min-height: 0;
        flex: 0 0 auto;
        margin: 0;
        overflow: visible;
    }

    body.app-mode-photoshoot #results-grid {
        height: auto;
        min-height: 280px;
        overflow: visible !important;
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
    }

    /* switchMode keeps the music shell mounted for this mode, although its
       header, tabs and footer are hidden. Do not let that empty 100%-high
       shell consume or clip the mobile page. */
    body.app-mode-lyrics_generator #music-mode-container {
        height: 0 !important;
        min-height: 0;
        flex: 0 0 0;
        overflow: hidden !important;
    }

    body.app-mode-lyrics_generator #lyrics-generator-view {
        height: auto !important;
        min-height: 0;
        overflow: visible !important;
        padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    }

    body.app-mode-lyrics_generator #lyrics-generator-view .advanced-lyrics-screen {
        margin-bottom: 0 !important;
    }

    /* Режимы с собственной лентой используют один скролл-контейнер на экран. */
    body.app-mode-text,
    body.app-mode-community,
    body.app-mode-radio,
    body.app-mode-collective,
    body.app-mode-shop,
    body.app-mode-profile,
    body.app-mode-events,
    body.app-mode-admin {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden !important;
    }

    body.app-mode-text .main-container,
    body.app-mode-community .main-container,
    body.app-mode-radio .main-container,
    body.app-mode-collective .main-container,
    body.app-mode-shop .main-container,
    body.app-mode-profile .main-container,
    body.app-mode-events .main-container,
    body.app-mode-admin .main-container {
        position: fixed;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100dvh !important;
        min-height: 0;
        max-height: none;
        padding: 4px;
        overflow: hidden;
        gap: 4px;
    }

    body.app-mode-text .controls-panel,
    body.app-mode-community .controls-panel,
    body.app-mode-radio .controls-panel,
    body.app-mode-collective .controls-panel,
    body.app-mode-shop .controls-panel,
    body.app-mode-profile .controls-panel,
    body.app-mode-events .controls-panel,
    body.app-mode-admin .controls-panel {
        order: 1;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: min(42dvh, 390px);
        flex: 0 0 auto;
        overflow: visible;
    }

    body.app-mode-text .generation-space,
    body.app-mode-community .generation-space,
    body.app-mode-radio .generation-space,
    body.app-mode-collective .generation-space,
    body.app-mode-shop .generation-space,
    body.app-mode-profile .generation-space,
    body.app-mode-events .generation-space,
    body.app-mode-admin .generation-space {
        order: 2;
        width: 100%;
        height: auto;
        min-height: 0;
        flex: 1 1 0;
        margin: 0;
        overflow: hidden;
    }

    /* Контентные разделы прокручиваются внутри оставшейся после шапки высоты. */
    body.app-mode-radio #radio-view,
    body.app-mode-collective #collective-view,
    body.app-mode-shop #shop-view,
    body.app-mode-profile #profile-view,
    body.app-mode-events #events-view,
    body.app-mode-admin #admin-view {
        width: 100%;
        height: 100% !important;
        min-height: 0;
        max-height: none;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: max(28px, env(safe-area-inset-bottom));
        scroll-padding-bottom: max(28px, env(safe-area-inset-bottom));
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* ADMIN / EVENTS: the view, not the page body, owns the vertical gesture.
       This keeps the last card and action row reachable below the mobile header. */
    body.app-mode-admin #admin-view,
    body.app-mode-events #events-view {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
        scroll-padding-top: 58px;
        scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }

    /* В разметке истории задано inline height:100%. На телефоне закрытый
       аккордеон должен занимать только высоту заголовка, а не часть экрана. */
    body.app-mode-text #text-chat-sidebar-view {
        width: 100%;
        height: auto !important;
        min-height: 34px;
        max-height: 34px;
        flex: 0 0 auto;
        overflow: hidden;
    }

    body.app-mode-text #text-chat-sidebar-view .chat-sidebar-header {
        min-height: 34px;
        flex: 0 0 34px;
    }

    body.app-mode-text #text-chat-sidebar-view.mobile-open {
        max-height: min(42dvh, 390px);
    }

    body.app-mode-text #text-chat-sidebar-view.mobile-open #tc-history-list {
        max-height: min(30dvh, 280px);
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* TEXT: поле ввода всегда остаётся в нижней части доступного viewport. */
    body.app-mode-text #text-mode-container {
        height: 100% !important;
        min-height: 0;
        overflow: hidden;
        border-radius: 14px;
        background: var(--bg-main);
    }

    body.app-mode-text .text-chat-header {
        min-height: 54px;
        flex: 0 0 auto;
        padding: 6px 9px !important;
    }

    body.app-mode-text #text-chat-messages {
        min-height: 0;
        padding: 10px 10px 0 !important;
        gap: 16px !important;
        scroll-padding-bottom: 112px;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.app-mode-text .text-chat-input-wrapper {
        right: 0;
        bottom: 0;
        left: 0;
        padding: 8px 8px max(8px, env(safe-area-inset-bottom));
        background: linear-gradient(0deg, var(--bg-main) 72%, transparent 100%);
    }

    body.app-mode-text .chat-input-box {
        min-height: 54px;
        padding: 6px 8px;
        border-radius: 16px !important;
    }

    body.app-mode-text #text-chat-input {
        min-height: 40px;
        max-height: min(132px, 24dvh);
        padding: 8px 6px;
        font-size: 16px;
    }

    body.app-mode-text .text-chat-input-wrapper .text-center {
        display: none;
    }

    body.app-mode-text #chat-bottom-spacer {
        min-height: 104px !important;
        height: 104px !important;
    }

    body.app-mode-text #text-chat-welcome {
        display: flex;
        width: min(100%, 520px);
        min-height: 100%;
        margin: 0 auto;
        padding: 8px 0 112px;
        flex-direction: column;
        justify-content: center;
    }

    body.app-mode-text .tc-welcome-orb {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
        border-radius: 15px;
    }

    body.app-mode-text .tc-welcome-orb svg {
        width: 27px;
        height: 27px;
    }

    body.app-mode-text .tc-welcome-orbit {
        inset: -5px;
        border-radius: 18px;
    }

    body.app-mode-text .tc-welcome-eyebrow {
        margin-bottom: 6px;
        font-size: 0.54rem;
    }

    body.app-mode-text .tc-welcome h2 {
        margin-bottom: 7px;
        font-size: clamp(1.05rem, 5.2vw, 1.28rem);
        line-height: 1.16;
    }

    body.app-mode-text .tc-welcome > p {
        display: -webkit-box;
        max-width: 330px;
        margin-bottom: 12px;
        overflow: hidden;
        font-size: 0.72rem;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.app-mode-text .tc-suggestion-grid {
        width: min(100%, 430px);
        margin-inline: auto;
        gap: 7px;
    }

    body.app-mode-text .suggestion-btn.tc-suggestion-card {
        min-height: 52px;
        padding: 7px 9px;
        grid-template-columns: 32px minmax(0, 1fr) 14px;
        gap: 8px;
        border-radius: 12px;
    }

    body.app-mode-text .tc-suggestion-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    body.app-mode-text .tc-suggestion-copy strong {
        font-size: 0.74rem;
    }

    body.app-mode-text .tc-suggestion-copy small {
        display: none;
    }

    body.app-mode-text .suggestion-btn.tc-suggestion-card:nth-child(n + 3) {
        display: none;
    }

    /* COMMUNITY: только #results-grid прокручивается; жест больше не застревает. */
    body.app-mode-community #results-grid {
        height: 100%;
        min-height: 0;
        max-height: none;
        align-content: start;
        overflow-x: hidden;
        overflow-y: auto !important;
        padding: 0 3px calc(36px + env(safe-area-inset-bottom)) 3px;
        scroll-padding-bottom: calc(36px + env(safe-area-inset-bottom));
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    body.app-mode-community .challenge-feed-wrapper,
    body.app-mode-community .community-masonry-feed,
    body.app-mode-community #community-audio-event-root {
        min-width: 0;
        max-width: 100% !important;
        overflow: visible;
    }

    body.app-mode-community .challenge-feed-wrapper {
        padding-bottom: 20px;
        gap: 12px !important;
    }

    body.app-mode-community .chal-feed-post {
        min-width: 0;
        padding: 12px;
        gap: 10px;
        overflow: visible;
        border-radius: 14px;
    }

    body.app-mode-community .chal-post-gallery,
    body.app-mode-community .chal-post-media-container {
        min-width: 0;
        max-width: 100%;
    }

    body.app-mode-community audio,
    body.app-mode-community video {
        width: 100%;
        max-width: 100%;
    }

    body.app-mode-community audio {
        min-height: 44px;
    }

    body.app-mode-community .challenge-vote-btn,
    body.app-mode-community .community-card-like-btn {
        min-height: 44px;
    }
}

@media (max-width: 576px) {
    #shop-view,
    #events-view,
    #collective-view,
    #profile-view,
    #admin-view {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .modal-dialog,
    .modal-content {
        max-width: calc(100vw - 8px);
    }

    .modal-body {
        overflow-wrap: anywhere;
    }

    .comparison-slot,
    .public-profile-header,
    .form-actions,
    .modal-footer {
        min-width: 0;
    }
}

@media (max-width: 420px), (max-height: 700px) {
    body.app-mode-text .tc-welcome-orb,
    body.app-mode-text .tc-welcome-eyebrow {
        display: none;
    }

    body.app-mode-text #text-chat-welcome {
        padding-top: 4px;
    }
}

@media (orientation: landscape) and (max-height: 560px) {
    body.app-mode-text .controls-panel,
    body.app-mode-community .controls-panel,
    body.app-mode-radio .controls-panel,
    body.app-mode-collective .controls-panel,
    body.app-mode-shop .controls-panel,
    body.app-mode-profile .controls-panel,
    body.app-mode-events .controls-panel,
    body.app-mode-admin .controls-panel {
        max-height: 34dvh;
    }

    body.app-mode-text .tc-suggestion-grid,
    body.app-mode-text .tc-welcome > p,
    body.app-mode-text .tc-welcome-eyebrow,
    body.app-mode-text .tc-welcome-orb {
        display: none;
    }
}

/* PROFILE: compact mobile account center without the duplicated user header. */
@media (max-width: 576px) {
    body.app-mode-profile .controls-panel {
        position: fixed;
        z-index: 70;
        top: 0;
        left: 0;
        width: 0 !important;
        height: 0 !important;
        min-height: 0;
        max-height: 0;
        padding: 0;
        overflow: visible;
        flex: 0 0 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        pointer-events: none;
    }

    body.app-mode-profile .controls-panel .app-logo-text,
    body.app-mode-profile .controls-panel #controls-container,
    body.app-mode-profile .controls-panel #profile-stats-view,
    body.app-mode-profile .controls-panel #community-authors-view,
    body.app-mode-profile .controls-panel #text-chat-sidebar-view,
    body.app-mode-profile .user-block .user-avatar,
    body.app-mode-profile .user-block .user-details,
    body.app-mode-profile .user-block #profileButton {
        display: none !important;
    }

    body.app-mode-profile #auth-status-container {
        position: fixed;
        z-index: 71;
        top: max(8px, env(safe-area-inset-top));
        left: 8px;
        width: 46px;
        height: 46px;
        pointer-events: none;
    }

    body.app-mode-profile .user-block {
        width: 46px;
        height: 46px;
        min-height: 46px;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
        pointer-events: none;
    }

    body.app-mode-profile .user-block::before { display: none; }

    body.app-mode-profile #mobile-menu-toggle {
        display: grid !important;
        position: static;
        width: 46px;
        height: 46px;
        place-items: center;
        border: 1px solid rgba(var(--primary-rgb), 0.34);
        border-radius: 14px;
        background: rgba(15, 15, 17, 0.9);
        color: var(--primary);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(16px);
        pointer-events: auto;
    }

    body.app-mode-profile .generation-space {
        order: 1;
        width: 100%;
        height: 100% !important;
        flex: 1 1 100%;
    }

    body.app-mode-profile #profile-view {
        padding: calc(62px + env(safe-area-inset-top)) 8px calc(42px + env(safe-area-inset-bottom)) !important;
        scroll-padding-top: calc(62px + env(safe-area-inset-top));
    }

    body.app-mode-profile #profile-view .profile-layout {
        gap: 9px;
        padding-bottom: 18px;
    }

    body.app-mode-profile #profile-view .profile-page-heading {
        display: none;
    }

    body.app-mode-profile #profile-view .user-main-card {
        padding: 13px;
        border-radius: 16px;
    }

    body.app-mode-profile #profile-view .user-header-wrap {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
    }

    body.app-mode-profile #profile-view .avatar-container {
        width: 64px;
        height: 64px;
    }

    body.app-mode-profile #profile-view .avatar-edit-btn {
        width: 24px;
        height: 24px;
    }

    body.app-mode-profile #profile-view .avatar-edit-btn svg {
        width: 12px;
        height: 12px;
    }

    body.app-mode-profile #profile-view .user-info-wrap { gap: 5px; }
    body.app-mode-profile #profile-view .user-top-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    body.app-mode-profile #profile-view .user-name-line { gap: 6px; }
    body.app-mode-profile #profile-view .user-name-line h2 {
        max-width: 100%;
        font-size: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.app-mode-profile #profile-view .badge-lvl,
    body.app-mode-profile #profile-view .badge-pro {
        height: 20px;
        padding: 0 7px;
        font-size: 0.6rem;
    }

    body.app-mode-profile #profile-view .top-right-actions {
        position: static !important;
        width: 100% !important;
        min-width: 0;
        gap: 6px;
        justify-content: flex-start;
    }

    body.app-mode-profile #profile-view .tg-channel-btn,
    body.app-mode-profile #profile-view .edit-tg-btn,
    body.app-mode-profile #profile-view .bell-btn {
        min-width: 36px;
        height: 36px;
        padding: 0 9px;
    }

    body.app-mode-profile #profile-view .tg-channel-btn { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
    body.app-mode-profile #profile-view .user-meta-line { display: none; }

    body.app-mode-profile #profile-view .profile-badges-wrapper {
        margin-top: 7px;
        padding-bottom: 2px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.app-mode-profile #profile-view .profile-badges-wrapper::-webkit-scrollbar { display: none; }
    body.app-mode-profile #profile-view .user-badge-tag {
        padding: 4px 8px;
        flex: 0 0 auto;
        font-size: 0.62rem;
        white-space: nowrap;
    }

    body.app-mode-profile #profile-view .progress-box {
        margin-top: 11px;
        padding: 9px 10px;
        border-radius: 10px;
    }

    body.app-mode-profile #profile-view .progress-labels {
        margin-bottom: 6px;
        font-size: 0.6rem;
    }

    body.app-mode-profile #profile-view .progress-labels .lbl { letter-spacing: 0.025em; }
    body.app-mode-profile #profile-view .progress-labels .val { font-size: 0.62rem; }

    body.app-mode-profile #profile-view .shop-badges-wrapper {
        margin-top: 10px;
        padding-top: 9px;
    }

    body.app-mode-profile #profile-view .shop-badges-grid {
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.app-mode-profile #profile-view .shop-badges-grid::-webkit-scrollbar { display: none; }
    body.app-mode-profile #profile-view .shop-badge-item {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    body.app-mode-profile #profile-view .profile-section-heading {
        min-height: 34px;
        margin-top: 4px;
        padding: 0 3px;
        gap: 0;
    }

    body.app-mode-profile #profile-view .profile-section-heading > div > span,
    body.app-mode-profile #profile-view .profile-section-heading p {
        display: none;
    }

    body.app-mode-profile #profile-view .profile-section-heading h3 { font-size: 0.9rem; }

    body.app-mode-profile #profile-view .profile-row-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body.app-mode-profile #profile-view .profile-row-actions .action-btn,
    body.app-mode-profile #profile-view .profile-row-actions .btn-theme {
        min-height: 68px;
        padding: 9px;
        gap: 1px 8px;
        grid-template-columns: 34px minmax(0, 1fr);
        border-radius: 12px;
    }

    body.app-mode-profile #profile-view .profile-row-actions .action-btn .ico,
    body.app-mode-profile #profile-view .profile-row-actions .btn-theme .ico {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    body.app-mode-profile #profile-view .profile-row-actions .action-btn .ico svg,
    body.app-mode-profile #profile-view .profile-row-actions .btn-theme .ico svg {
        width: 17px;
        height: 17px;
    }

    body.app-mode-profile #profile-view .profile-row-actions .action-btn .tit,
    body.app-mode-profile #profile-view .profile-row-actions .btn-theme .tit {
        font-size: 0.72rem;
    }

    body.app-mode-profile #profile-view .profile-row-actions .action-btn .dsc,
    body.app-mode-profile #profile-view .profile-row-actions .btn-theme .dsc {
        font-size: 0.52rem;
        letter-spacing: 0;
    }

    body.app-mode-profile #profile-view .profile-row-split { gap: 8px; }
    body.app-mode-profile #profile-view .info-card {
        min-height: 0;
        padding: 13px;
        border-radius: 13px;
    }

    body.app-mode-profile #profile-view .info-card-head { margin-bottom: 8px; }
    body.app-mode-profile #profile-view .pro-features-list { display: none; }
    body.app-mode-profile #profile-view .ref-card,
    body.app-mode-profile #profile-view .profile-challenges-card {
        padding: 13px;
        border-radius: 14px;
    }

    body.app-mode-profile #profile-view .ref-dsc {
        display: -webkit-box;
        margin: 7px 0 11px;
        overflow: hidden;
        font-size: 0.68rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.app-mode-profile #profile-view .ref-percents {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    body.app-mode-profile #profile-view .ref-pct-box {
        min-height: 58px;
        padding: 11px 4px 8px;
    }

    body.app-mode-profile #profile-view .ref-pct-val { font-size: 1rem; }
    body.app-mode-profile #profile-view .ref-pct-lbl { font-size: 0.52rem; }
    body.app-mode-profile #profile-view .event-card {
        min-height: 0;
        padding: 12px;
        gap: 10px;
    }

    body.app-mode-profile #profile-view .dashboard-footer {
        margin-top: 2px;
        padding-top: 12px;
    }
}

@media (max-width: 360px) {
    body.app-mode-profile #profile-view .profile-row-actions { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
    textarea,
    select,
    [contenteditable="true"] {
        font-size: 16px !important;
    }
}