/* ============================================================
   AI Студия Дизайна — стыковка модуля со страницей сайта.
   Здесь только обвязка: одноэкранная раскладка страницы и правки,
   которые нужны из-за сайтовых стилей. Шапка сайта — родная,
   ничего в ней не переопределяем. Внутренности модуля — styles.css.
   ============================================================ */

/* Модуль занимает экран целиком: скроллится не страница, а колонка
   настроек внутри рабочей зоны (как было в исходном демо). */
body.ai-page { overflow: hidden; }
.ai-page .wrapper { height: 100vh; }

/* На узких экранах одноэкранный режим снимается — иначе рабочая зона,
   которая там перестраивается в колонку, не помещается. */
@media (max-width: 1000px) {
    body.ai-page { overflow: auto; }
    /* Иначе правило выше перебивает блокировку прокрутки под открытым бургер-меню. */
    body.ai-page.overflow-mobile { overflow: hidden; }
    .ai-page .wrapper { height: auto; min-height: 100vh; }
}

/* В рабочей зоне редактора шапка сайта не нужна — модуль занимает экран
   целиком. Класс ставит app.js (switchView), туда же переезжает иконка
   профиля из шапки. */
body.ai-view-studio .header { display: none; }

/* На телефоне шапку не прячем: её мобильная версия компактна (логотип +
   гамбургер), а перенести оттуда профиль нельзя — в мобильной вёрстке он
   развёрнут в широкую строку меню. Пусть остаётся на своём месте. */
@media (max-width: 1000px) {
    body.ai-view-studio .header { display: block; }
}

/* Шапка — во всю ширину экрана, как на /app/projects.php. Там страница
   не подключает common.css, поэтому `.container` остаётся резиновым
   (в header.css он без max-width). У нас common.css нужен ради кнопок
   шапки, поэтому ограничение снимаем точечно и только на этой странице. */
.ai-page .header .container { max-width: none; }
/* Те же отступы шапки, что даёт global.css на /app/projects.php, иначе логотип скачет при переключении. */
.ai-page .header { padding: 0 12px 0 20px; }

/* Баланс и «Купить генерации» в шапке сайта (печатает header.php по $headerExtra).
   Повторяют .token-pill и .btn--ghost модуля, но живут вне .ai-studio. */
.ai-page .ai-hdr-pill, .ai-page .ai-hdr-topup {
    font-family: inherit; cursor: pointer; white-space: nowrap; transition: 0.15s;
}
.ai-page .ai-hdr-pill {
    display: inline-flex; align-items: center; gap: 7px; border: 0;
    background: #eaf3ff; color: #1f6fe0; padding: 7px 13px; border-radius: 20px;
    font-size: 14px; font-weight: 600; line-height: 1.4;
}
.ai-page .ai-hdr-pill svg { width: 16px; height: 16px; fill: none; }
.ai-page .ai-hdr-pill b { color: #3183ff; }
.ai-page .ai-hdr-pill:hover { box-shadow: inset 0 0 0 1px #3183ff; }
.ai-page .ai-hdr-topup {
    background: #fff; color: #2a2f37; border: 1px solid #e3e6ec; border-radius: 8px;
    padding: 7px 14px; font-size: 15px; font-weight: 500; line-height: 1.4;
}
.ai-page .ai-hdr-topup:hover { border-color: #3183ff; color: #3183ff; }
@media (max-width: 1000px) {
    .ai-page .ai-hdr-pill, .ai-page .ai-hdr-topup { display: none; }
}

/* Синяя «Мои проекты» в шапке здесь лишняя: тот же переход стоит полосой
   под шапкой (entrybar.php). На /app/projects.php её так же прячет
   app/css/start_page/mainui.css — поведение одинаковое на обеих страницах. */
.ai-page .my-projects { display: none !important; }

/* reset.css задаёт svg { fill: currentColor }, и штриховые иконки модуля
   (fill="none" в разметке) заливались сплошным цветом — CSS сильнее
   презентационного атрибута. Возвращаем только тем, кто просил «none». */
.ai-studio svg[fill="none"] { fill: none; }

/* Зачем входить: строка про бонус стоит над модалкой входа (разметка в
   aidesigner.php, только для гостя). Модалка — flex-строка, поэтому здесь
   же разворачиваем её в колонку, иначе баннер встал бы сбоку от формы. */
.ai-page #auth_modal {
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.ai-page .ai-auth-bonus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eaf3ff;
    color: #3183ff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

.ai-page .ai-auth-bonus svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

@media (max-width: 575.98px) {
    .ai-page .ai-auth-bonus {
        padding: 8px 10px;
        font-size: 13px;
    }
}