/* ===========================================
   story_selection_mobile.css
   Мобильная адаптация ТОЛЬКО для story_selection.
   Десктоп не трогаем.
   =========================================== */

/* ---- Вкладки мобильного переключателя ---- */
/* Показываем панель вкладок только на мобильном */
.mobile-page-tabs {
    display: none; /* скрыты на десктопе */
}

@media (max-width: 900px) {

    /* ---- База ---- */
    body {
        height: auto !important;
        overflow: auto !important;
        overflow-x: hidden !important;
        padding: 6px !important;
    }

    /* ---- Шапка ---- */
    .top-bar-wrapper {
        width: 100% !important;
        margin: 0 0 6px 0 !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 8px 10px !important;
        border-radius: 14px !important;
        height: auto !important;
        min-height: auto !important;
    }

    .header-left,
    .header-right {
        gap: 4px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .header-right { align-self: center !important; }

    .header-title {
        font-size: clamp(0.52rem, 2.6vw, 0.85rem) !important;
        white-space: nowrap !important;
    }

    .header-btn {
        padding: 5px 8px !important;
        font-size: 0.75em !important;
        height: 30px !important;
        border-radius: 8px !important;
    }

    /* Кнопка Выход — только иконка, красный фон */
    .logout-btn {
        background: #e53935 !important;
        color: white !important;
        border-color: #c62828 !important;
        padding: 5px 7px !important;
    }
    .logout-text {
        display: none !important;
    }

    /* Скрываем LingvoConstructor и email на мобильном — слишком длинно */
    #btn-lingvo-constructor { display: none !important; }
    .user-email { display: none !important; }

    /* На мобильном имя → смайлик */
    .user-block {
        flex-direction: row !important;
        align-items: center !important;
        cursor: pointer;
    }
    .user-name {
        font-size: 1.3rem !important;
        line-height: 1 !important;
    }
    .user-name-text { display: none !important; }
    .user-name-emoji {
        display: inline !important;
    }

    /* ---- Панель мобильных вкладок ---- */
    .mobile-page-tabs {
        display: flex !important;
        background: rgba(255,255,255,0.8);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.6);
        border-radius: 16px;
        padding: 5px;
        gap: 5px;
        margin-bottom: 10px;
        box-shadow: 0 4px 15px rgba(93,64,55,0.08);
    }

    .mobile-tab-btn {
        flex: 1;
        border: none;
        background: transparent;
        padding: 10px 8px;
        border-radius: 12px;
        font-size: 0.88rem;
        font-weight: 700;
        color: #888;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .mobile-tab-btn.active {
        background: var(--accent-color, #5d4037);
        color: white;
        box-shadow: 0 3px 10px rgba(93,64,55,0.25);
    }

    /* ---- Основной лейаут: grid → flex column ---- */
    .main-wrapper {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    /* ---- Левая колонка (Мастерская) ---- */
    .creation-column {
        height: auto !important;
        overflow: visible !important;
        padding-right: 0 !important;
        padding-bottom: 10px !important;
    }

    /* ---- Правая колонка (Библиотека) ---- */
    /* На десктопе aside — фиксированная панель справа.
       На мобильном — показываем/скрываем через JS. */
    aside.library-panel {
        height: auto !important;
        min-height: 70vh !important;
        border-radius: 16px !important;
        margin-bottom: 10px !important;
    }

    /* ---- Скрытие/показ колонок через data-атрибут ---- */
    /* JS будет переключать: body[data-mobile-tab="workshop"] и body[data-mobile-tab="library"] */
    body[data-mobile-tab="workshop"] .creation-column {
        display: flex !important;
    }
    body[data-mobile-tab="workshop"] aside.library-panel {
        display: none !important;
    }

    body[data-mobile-tab="library"] .creation-column {
        display: none !important;
    }
    body[data-mobile-tab="library"] aside.library-panel {
        display: flex !important;
        flex-direction: column !important;
    }

    /* ---- Карточки внутри creation-column ---- */
    .paper-sheet {
        border-radius: 14px !important;
    }

    .step-header {
        padding: 13px 15px !important;
    }

    .step-header h2 {
        font-size: 0.95rem !important;
    }

    .step-content {
        padding: 14px 15px !important;
    }

    /* ---- Кнопки ---- */
    .action-btn,
    .secondary-btn {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }

    /* ---- Карточки режимов ---- */
    .mode-cards-container {
        gap: 10px !important;
        padding: 14px !important;
    }

    .mode-card-btn {
        min-width: 130px !important;
        max-width: none !important;
        padding: 16px 12px !important;
    }

    .mode-icon { font-size: 2rem !important; }
    .mode-title { font-size: 0.9rem !important; }
    .mode-desc  { font-size: 0.78rem !important; }

    /* ---- Chips ---- */
    .chip {
        padding: 5px 10px !important;
        font-size: 0.8rem !important;
    }

    /* ---- Промт-окно ---- */
    .prompt-window {
        max-height: 160px !important;
        font-size: 0.78rem !important;
    }

    /* ---- textarea ---- */
    textarea {
        height: 90px !important;
        font-size: 13px !important;
    }

    #json-input { height: 150px !important; }

    /* ---- Библиотека: поиск + табы ---- */
    .library-header { padding-bottom: 8px !important; }

    .lib-title-row h2 {
        font-size: clamp(0.72rem, 3.8vw, 0.95rem) !important;
        white-space: nowrap !important;
    }

    .lib-tabs {
        gap: 2px !important;
    }

    .tab-btn {
        font-size: clamp(0.65rem, 3.2vw, 0.78rem) !important;
        padding: 5px 3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }

    /* ---- Карточки историй ---- */
    .story-card {
        padding: 10px 12px !important;
    }

    .story-info {
        min-width: 0 !important;
    }

    .story-title {
        font-size: 0.85rem !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    .story-menu-container {
        flex-shrink: 0 !important;
    }

    /* ---- Превью: 3 колонки → 1 ---- */
    .preview-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    /* ---- Модальные окна ---- */
    .custom-modal-window {
        width: 98% !important;
        height: 90vh !important;
        border-radius: 14px !important;
        padding: 12px !important;
    }

    .modal-header { font-size: 0.95rem !important; }

    .modal-footer {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding-top: 10px !important;
    }

    /* ---- Кнопка черновиков ---- */
    .piggy-bank-btn,
    .drafts-float-btn {
        position: static !important;
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 8px !important;
        background-color: red !important;
        color: white !important;
    }
}

/* Очень маленькие */
@media (max-width: 400px) {
    .header-btn {
        padding: 4px 6px !important;
        font-size: 0.72em !important;
        height: 28px !important;
    }

    .header-title {
        font-size: clamp(0.48rem, 2.4vw, 0.85rem) !important;
    }

    .mode-card-btn {
        min-width: 110px !important;
        padding: 12px 8px !important;
    }

    .step-header h2 { font-size: 0.85rem !important; }

    aside.library-panel {
        min-height: 60vh !important;
    }
}