/**
 * Genius Sounds — полоса «выбрать другой кадр».
 *
 * Живёт на двух страницах: у ИИ-фотосессии узким ярлыком, который
 * раскрывается при наведении, и в нейрохабе — сразу развёрнутой
 * карточкой покрупнее. Разметка одна, разница только в модификаторе.
 */

/* Мостик в каталог промтов -------------------------------------------
 *
 * Полоса прилеплена к окну: тот, кому ни одна готовая подборка не
 * подошла, иначе просто закрывает страницу, а догонять его больше
 * нечем. На широком экране это узкий столбик у правого края — он не
 * отнимает место у страницы; на телефоне строка внизу, где её видно,
 * не перекрывая содержимое.
 *
 * Появляется не сразу, а когда человек уже посмотрел подборки, и
 * закрывается насовсем на неделю: навязчивая подсказка хуже, чем её
 * отсутствие.
 */
.gs-promts-band {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 44px 10px 12px;
    border: 1px solid rgba(167, 139, 250, .32);
    border-radius: 16px 16px 0 0;
    background:
        linear-gradient(120deg, rgba(124, 92, 255, .22), rgba(34, 211, 238, .12) 70%),
        rgba(14, 11, 24, .96);
    box-shadow: 0 -16px 40px -22px rgba(0, 0, 0, 1);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease;
}

.gs-promts-band.is-on { opacity: 1; transform: none; }
.gs-promts-band[hidden] { display: none; }

.gs-promts-band__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(243, 236, 247, .8);
    font: inherit;
    font-size: 17px;
    line-height: 24px;
    cursor: pointer;
}

.gs-promts-band__close:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.gs-promts-band__shots {
    display: flex;
    flex: none;
    gap: 5px;
}

.gs-promts-band__shots img {
    width: 44px;
    height: 58px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .9);
}

.gs-promts-band__shots img:nth-child(n+3) { display: none; }

.gs-promts-band__tab { display: none; }

.gs-promts-band__body {
    display: contents;
}

.gs-promts-band__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gs-promts-band__text strong { font-size: 14.5px; color: #f3ecf7; line-height: 1.25; }
.gs-promts-band__text span { font-size: 12.5px; line-height: 1.35; color: rgba(243, 236, 247, .72); }

.gs-promts-band__go { flex: none; white-space: nowrap; }

/* На узком экране в строку не влезает полная надпись — она обрезалась
   прямо по букве. Длинная остаётся там, где есть место. */
.gs-promts-band__cta-long { display: none; }
.gs-promts-band__cta-short { display: inline; }

/* Пока полоса внизу, под страницей нужен запас — иначе она накрывает
   последнюю строку и кнопку подвала. */
body.gs-band-on { padding-bottom: 92px; }

/* Стрелка «наверх» у темы стоит в том же углу и ложится прямо на кнопку
   полосы. Пока полоса видна, поднимаем стрелку над ней. */
body.gs-band-on .w-toplink { bottom: 96px; }

@media (max-width: 560px) {
    .gs-promts-band { gap: 9px; padding: 9px 38px 9px 10px; }
    .gs-promts-band__shots img:nth-child(n+2) { display: none; }
    .gs-promts-band__text span { display: none; }
    .gs-promts-band__text strong { font-size: 13.5px; }
    .gs-promts-band__go { padding-left: 15px; padding-right: 15px; font-size: 14px; }
}

@media (min-width: 561px) {
    .gs-promts-band__cta-long { display: inline; }
    .gs-promts-band__cta-short { display: none; }
}

/*
 * Широкий экран: узкий ярлык у правого края, раскрывается при наведении.
 *
 * Развёрнутый столбик шириной в две сотни пикселей на обычном мониторе
 * ложится прямо поверх кнопок «Повторить с моими фото» — они стоят у
 * правого края колонки. Перекрывать главную кнопку страницы ради ссылки
 * в соседний раздел нельзя, поэтому в покое висит только ярлык, а всё
 * остальное появляется, когда к нему подводят курсор.
 */
@media (min-width: 1100px) {
    .gs-promts-band {
        top: 50%;
        right: 12px;
        bottom: auto;
        left: auto;
        width: 62px;
        flex-direction: column;
        align-items: center;
        gap: 9px;
        padding: 12px 8px;
        overflow: hidden;
        border-radius: 16px;
        transform: translateY(calc(-50% + 14px));
        box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 1);
        transition: width .28s ease, padding .28s ease,
                    opacity .3s ease, transform .3s ease;
    }

    .gs-promts-band.is-on { transform: translateY(-50%); }

    .gs-promts-band__tab {
        display: block;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        color: #d7cfe9;
        font-size: 12.5px;
        white-space: nowrap;
    }

    .gs-promts-band__shots { flex-direction: column; width: 44px; gap: 5px; }
    .gs-promts-band__shots img { width: 44px; height: 58px; }
    .gs-promts-band__shots img:nth-child(n+2) { display: none; }

    .gs-promts-band__body { display: none; }
    .gs-promts-band__close { display: none; }

    .gs-promts-band:hover,
    .gs-promts-band:focus-within {
        width: 228px;
        align-items: stretch;
        padding: 14px;
    }

    .gs-promts-band:hover .gs-promts-band__tab,
    .gs-promts-band:focus-within .gs-promts-band__tab { display: none; }

    .gs-promts-band:hover .gs-promts-band__shots,
    .gs-promts-band:focus-within .gs-promts-band__shots {
        flex-direction: row;
        width: auto;
        gap: 6px;
    }

    .gs-promts-band:hover .gs-promts-band__shots img,
    .gs-promts-band:focus-within .gs-promts-band__shots img {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        height: 78px;
    }

    .gs-promts-band:hover .gs-promts-band__shots img:nth-child(n+4),
    .gs-promts-band:focus-within .gs-promts-band__shots img:nth-child(n+4) { display: none; }

    .gs-promts-band:hover .gs-promts-band__body,
    .gs-promts-band:focus-within .gs-promts-band__body {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .gs-promts-band:hover .gs-promts-band__close,
    .gs-promts-band:focus-within .gs-promts-band__close { display: block; }

    .gs-promts-band__text strong { font-size: 15px; }
    .gs-promts-band__text span { font-size: 13px; }
    .gs-promts-band__go { width: 100%; text-align: center; }

    body.gs-band-on { padding-bottom: 0; }
    body.gs-band-on .w-toplink { bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .gs-promts-band { transition: none; }
}

/* --- Развёрнутый вид на широком экране -----------------------------------
 *
 * Карточка видна целиком, наводить курсор не нужно. Размеров два:
 * обычный на десятую часть крупнее свёрнутого (ИИ-фотосессия) и ещё
 * чуть больше (нейрохаб) — страница там шире и места хватает.
 *
 * Да, на мониторе около 1366 такая карточка ложится краем на кнопки
 * «Повторить с моими фото»: колонка упирается в правый край экрана, и
 * развести их негде. Это осознанный размен в пользу заметности.
 */
@media (min-width: 1100px) {
    .gs-promts-band--wide {
        width: 251px;
        align-items: stretch;
        padding: 15px;
        gap: 10px;
    }

    .gs-promts-band--wide .gs-promts-band__tab { display: none; }

    .gs-promts-band--wide .gs-promts-band__shots {
        flex-direction: row;
        width: auto;
        gap: 7px;
    }

    .gs-promts-band--wide .gs-promts-band__shots img {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        height: 86px;
    }

    .gs-promts-band--wide .gs-promts-band__shots img:nth-child(n+4) { display: none; }

    .gs-promts-band--wide .gs-promts-band__body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .gs-promts-band--wide .gs-promts-band__close { display: block; }

    .gs-promts-band--wide .gs-promts-band__text strong { font-size: 16.5px; }
    .gs-promts-band--wide .gs-promts-band__text span { font-size: 14.5px; }
    .gs-promts-band--wide .gs-promts-band__go { font-size: 15px; padding: 11px 16px; }

    /* Наведение ничего не меняет: карточка и так раскрыта. */
    .gs-promts-band--wide:hover,
    .gs-promts-band--wide:focus-within { width: 251px; padding: 15px; }

    /* Нейрохаб — ещё крупнее. */
    .gs-promts-band--xl,
    .gs-promts-band--xl:hover,
    .gs-promts-band--xl:focus-within { width: 262px; padding: 16px; }
    .gs-promts-band--xl { gap: 11px; }
    .gs-promts-band--xl .gs-promts-band__shots img { height: 90px; }
    .gs-promts-band--xl .gs-promts-band__text strong { font-size: 17px; }
    .gs-promts-band--xl .gs-promts-band__text span { font-size: 15px; }
    .gs-promts-band--xl .gs-promts-band__go { font-size: 15.5px; }
}