/* ═══ Стартовый экран /agi в один экран (07-09-26) ═════════════════════════
   Область действия: body.hv2.zero — пустая задача (ни сообщений, ни файлов),
   кабинет и гость, БЕЗ лайф-режима (у него свой первый экран).

   Что делает: убирает крупный логотип из hero, делает композер главным
   объектом (градиентная рамка бренда, поле на две строки, микрофон и отправка
   внутри), встраивает панель «Кто выполнит задачу» (#execDetails) в подвал
   этой же карточки как ряд уровней, ужимает «Готовые сценарии» до 3×2 карточек
   (на телефоне — карусель). Ни один id/класс не меняется: это ТОЛЬКО стили,
   JS страницы, трекер пути и тесты видят прежний DOM.

   Откат: AGI_HOME_V2=false в .env (класс hv2 не ставится) или ?ui=classic.
   Бюджет высоты (1366×768 → ~660 px вьюпорта): шапка 57 + hero 50 + композер
   ~140 + сценарии ~250 + сноска 46 ≈ 545 у своих, +52 у гостя (подзаголовок
   и строка про бонус). ═══════════════════════════════════════════════════ */

body.hv2.zero{
    --hv2-a:#8B5CF6;
    --hv2-b:#F472B6;
    --hv2-grad:linear-gradient(135deg,#8B5CF6 0%,#C084FC 52%,#F472B6 100%);
    --hv2-ink:#15121F;
    --hv2-w:840px;
    --hv2-ring:rgba(164,128,239,.18);
    background:
        radial-gradient(900px 460px at 50% 16%, rgba(164,128,239,.17), transparent 70%),
        radial-gradient(640px 380px at 84% 4%, rgba(244,114,182,.11), transparent 70%),
        radial-gradient(560px 340px at 10% 44%, rgba(139,92,246,.08), transparent 70%),
        var(--bg);
}

/* ---- Лента в стартовом состоянии: без лишних полей, содержимое по центру ---- */
/* Только верх/низ: правый отступ под пришвартованную панель «Мои задачи»
   ставит body.drawer-docked .feed — шорткат padding его затирал. */
body.hv2.zero .feed{padding-top:10px;padding-bottom:10px}
body.hv2.zero .feed-inner{max-width:var(--hv2-w);gap:0}
body.hv2.zero .hello{padding:8px 8px 0}
/* Знак продукта уже стоит в шапке — второй, во весь экран, отнимал 150 px. */
/* Только словесный знак в hero (прямой потомок .hello): обложки умений tmux:1 глубже и им не мешаем */
body.hv2.zero .hello > img{display:none}
body.hv2.zero .hello h1{font-size:32px;font-weight:800;letter-spacing:-.035em;line-height:1.12;
    color:var(--hv2-ink);margin:0}
body.hv2.zero .hello p{font-size:14.5px;line-height:1.45;margin:8px auto 0;max-width:740px;color:var(--secondary)}
/* Знак бренда над вопросом — НАСТОЯЩИЙ логотип (vlogo-nofon.webp, тот же, что
   в шапке), а не рисованная волна (замечание владельца 07-09-26). Только когда
   высота позволяет: на 1366×768 каждый пиксель на счету. */
@media (min-height:700px){
    body.hv2.zero .hello h1::before{content:'';display:block;width:64px;height:64px;margin:0 auto 6px;
        background:url("/images/logo/vlogo-nofon.webp?v=1") center/contain no-repeat}
}

/* Появление: три блока по очереди, без движения для тех, кто его отключил. */
@keyframes hv2In{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.hv2.zero .hello h1,
body.hv2.zero .hello p{animation:hv2In .38s cubic-bezier(.2,.7,.2,1) both}
body.hv2.zero .hero-dock{animation:hv2In .42s .05s cubic-bezier(.2,.7,.2,1) both}
body.hv2.zero .skh{animation:hv2In .46s .12s cubic-bezier(.2,.7,.2,1) both}
/* .cando/.quests не анимируем: transform ломает их position:fixed (зона tmux:1) */
@media (prefers-reduced-motion:reduce){
    body.hv2.zero .hello h1,body.hv2.zero .hello p,body.hv2.zero .hero-dock,
    body.hv2.zero .skh{animation:none}
}

/* ---- Композер — главный объект экрана ----------------------------------- */
body.hv2.zero .hero-dock{max-width:var(--hv2-w);margin:18px auto 0}
/* Порядок частей внутри .composer: плашки (почта/агент) → превью вложений →
   полоса диктовки → ПОЛЕ → панель исполнителя → строка гостя про бонус.
   Панель уезжает ПОД поле: сначала пишут задачу, потом выбирают, кто её
   сделает — а не наоборот. DOM не трогаем, только order. */
body.hv2.zero .hero-dock .composer{display:flex;flex-direction:column;position:static;padding:0;background:none}
body.hv2.zero .hero-dock .composer > *{order:5}
body.hv2.zero .hero-dock .ah-gate,
body.hv2.zero .hero-dock .email-gate{order:1;margin-left:0;margin-right:0;margin-bottom:10px}
body.hv2.zero .hero-dock .attach-previews{order:2}
body.hv2.zero .hero-dock .stt-bar{order:3}
body.hv2.zero .hero-dock .composer-row{order:4}
body.hv2.zero .hero-dock .exd{order:6}
body.hv2.zero .hero-dock .composer-hint{order:7}

/* margin:0 — в колонке flex авто-поля (0 auto) сжимают ряд до ширины
   содержимого: карточка ввода была уже панели под ней. */
body.hv2.zero .hero-dock .composer-row{max-width:none;margin:0;width:100%;gap:8px;position:relative;z-index:2}
body.hv2.zero .hero-dock .composer textarea{min-width:0}
/* Градиентная рамка: два фона, внутренний по padding-box, внешний по
   border-box. Сама граница прозрачная — цвет даёт второй слой. */
body.hv2.zero .composer-inner{
    padding:10px 10px 10px 14px;gap:8px;border-radius:22px;
    border:1px solid transparent;
    background:linear-gradient(#fff,#fff) padding-box,
               linear-gradient(135deg,rgba(139,92,246,.55),rgba(244,114,182,.42)) border-box;
    box-shadow:0 24px 54px -20px rgba(124,58,237,.38),0 4px 14px rgba(20,12,50,.06);
    transition:box-shadow .2s,transform .2s;
}
body.hv2.zero .composer-inner:focus-within{
    background:linear-gradient(#fff,#fff) padding-box,var(--hv2-grad) border-box;
    box-shadow:0 28px 64px -20px rgba(124,58,237,.48),0 0 0 4px var(--hv2-ring);
}
/* Состояния, объявленные в основном файле короткими селекторами, — здесь
   повторены под своей областью: иначе рамка выше по специфичности их глушит. */
body.hv2.zero .composer-inner.drag{
    background:linear-gradient(#fff,#fff) padding-box,var(--hv2-grad) border-box;
    box-shadow:0 0 0 4px rgba(124,77,255,.16),0 24px 54px -20px rgba(124,58,237,.38);
}
body.hv2.zero .composer-inner.is-empty-nudge{
    background:linear-gradient(#fff,#fff) padding-box,var(--hv2-grad) border-box;
    box-shadow:0 0 0 4px rgba(164,128,239,.24),0 24px 54px -20px rgba(124,58,237,.38);
    animation:agiNudge .34s ease;
}
@media (prefers-reduced-motion:reduce){ body.hv2.zero .composer-inner.is-empty-nudge{animation:none} }

/* Поле на две строки: задача — это абзац, а не строка поиска. */
body.hv2.zero .hero-dock .composer textarea{min-height:60px;height:60px;font-size:16px;line-height:24px;
    padding:6px 4px;max-height:38vh}
body.hv2.zero .hero-dock .composer textarea::placeholder{color:#8E8E96}

/* Инструменты поля: скрепка · микрофон · (i) · отправить */
body.hv2.zero .composer-inner .tool-btn{width:38px;height:38px;border-radius:12px;color:#6E6E73}
body.hv2.zero .composer-inner .tool-btn:hover{background:rgba(139,92,246,.08);color:#5B21B6}
body.hv2.zero .composer-inner .tool-btn[hidden]{display:none}
body.hv2.zero .composer-inner .tool-btn:disabled{opacity:.5;cursor:wait}
body.hv2.zero .composer-inner .tool-btn.mic{width:38px;height:38px;border-radius:12px;color:#6D28D9;
    background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.18);
    transition:background .15s,color .15s,box-shadow .15s,transform .15s}
body.hv2.zero .composer-inner .tool-btn.mic:hover{background:var(--hv2-grad);color:#fff;border-color:transparent;
    box-shadow:0 8px 18px -6px rgba(139,92,246,.6);transform:translateY(-1px)}
/* Запись идёт — красный пульс, как в ленте. */
body.hv2.zero .composer-inner .tool-btn.rec,
body.hv2.zero .composer-inner .tool-btn.mic.rec{color:#fff;border-color:transparent;transform:none;
    background:linear-gradient(135deg,#F0565B,#D92D43);
    box-shadow:0 2px 12px rgba(229,72,77,.35);animation:recGlow 1.4s ease-in-out infinite}
body.hv2.zero .composer-inner .exd-btn[aria-expanded="true"]{background:rgba(139,92,246,.12);color:#5B21B6}
body.hv2.zero .composer-inner .send{width:40px;height:40px;border-radius:13px;background:var(--hv2-grad);
    box-shadow:0 10px 22px -8px rgba(139,92,246,.75);transition:transform .15s,box-shadow .15s,opacity .15s}
body.hv2.zero .composer-inner .send:hover{transform:translateY(-1px);box-shadow:0 14px 26px -8px rgba(139,92,246,.85)}
body.hv2.zero .composer-inner .send.is-idle{opacity:.55}
body.hv2.zero .composer-inner .send.is-idle:hover{opacity:.85}
body.hv2.zero .composer-inner .send:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---- Панель «Кто выполнит задачу» — подвал карточки ----------------------
   Тот же #execDetails с теми же кнопками: заголовок и крестик остаются
   (крестик сворачивает панель, «(i)» у поля разворачивает), описание
   исполнителя прячется — оно нужно только когда исполнителей два. Всё
   складывается в одну строку: подпись · уровни · подсказка · крестик. */
body.hv2.zero .hero-dock .exd{
    max-width:none;margin:-10px 10px 0;padding:16px 12px 8px;
    border:1px solid rgba(139,92,246,.16);border-top:0;border-radius:0 0 18px 18px;
    background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;position:relative;z-index:1;
}
body.hv2.zero .hero-dock .exd[hidden]{display:none}
body.hv2.zero .hero-dock .exd-head{display:contents}
body.hv2.zero .hero-dock .exd-cap{order:1;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.2;margin-right:2px}
body.hv2.zero .hero-dock .exd-close{order:9;margin-left:auto;width:24px;height:24px;border-radius:8px;
    border-color:transparent;color:var(--muted)}
body.hv2.zero .hero-dock .exd-close:hover{border-color:var(--accent);color:var(--accent-dark)}
body.hv2.zero .hero-dock .exd-rows{display:contents}
body.hv2.zero .hero-dock .exd-row{display:contents}
/* Один исполнитель — строка с его именем и описанием не нужна. */
body.hv2.zero .hero-dock .exd-row-top{display:none}
body.hv2.zero .hero-dock .exd-models{order:2;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0}
body.hv2.zero .hero-dock .exd-model{padding:6px 12px 6px 10px;border-radius:999px;gap:7px;
    border:1px solid rgba(20,12,50,.12);background:#fff;color:var(--text);
    transition:border-color .15s,background .15s,color .15s,box-shadow .15s,transform .15s}
body.hv2.zero .hero-dock .exd-model:hover{border-color:rgba(139,92,246,.6);color:#5B21B6;transform:translateY(-1px)}
body.hv2.zero .hero-dock .exd-model.on{
    background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(244,114,182,.12));
    border-color:rgba(139,92,246,.55);color:#4C1D95;box-shadow:0 6px 14px -8px rgba(139,92,246,.6);transform:none}
body.hv2.zero .hero-dock .exd-model[disabled]{opacity:.6;transform:none}
body.hv2.zero .hero-dock .exd-model-name{font-size:13px;font-weight:650}
body.hv2.zero .hero-dock .exd-scale i{height:9px}
body.hv2.zero .hero-dock .exd-hint{order:3;margin:0;font-size:12.5px;line-height:1.35;color:var(--muted);
    flex:1 1 260px;min-width:220px}
body.hv2.zero .hero-dock .exd-link{font-size:12.5px}
body.hv2.zero .hero-dock .exd-foot{order:8;flex-basis:100%;margin:2px 0 0;padding:0;border:0}
body.hv2.zero .hero-dock .exd-foot:empty{display:none}
/* Два исполнителя (свой сервер подключён): строки остаются строками — там
   нужно и имя, и цена шага, и кнопка «выбрать». Компактно, но целиком. */
body.hv2.zero .hero-dock .exd-rows:has(.exd-row + .exd-row){display:flex;flex-direction:column;gap:6px;
    flex-basis:100%;order:2}
body.hv2.zero .hero-dock .exd-rows:has(.exd-row + .exd-row) .exd-row{display:block;border:1px solid var(--border);
    border-radius:12px;padding:8px 10px;background:#fff}
body.hv2.zero .hero-dock .exd-rows:has(.exd-row + .exd-row) .exd-row.on{border-color:rgba(139,92,246,.5);
    background:rgba(139,92,246,.05)}
body.hv2.zero .hero-dock .exd-rows:has(.exd-row + .exd-row) .exd-row-top{display:flex}
body.hv2.zero .hero-dock .exd-rows:has(.exd-row + .exd-row) .exd-note{display:none}
body.hv2.zero .hero-dock .exd-rows:has(.exd-row + .exd-row) .exd-models{margin-top:6px}
body.hv2.zero .hero-dock .exd-rows:has(.exd-row + .exd-row) .exd-hint{margin-top:6px;flex:none;min-width:0}

/* Гостю под полем — что будет с текстом и деньгами. */
body.hv2.zero .hero-dock .composer-hint{width:100%;max-width:none;margin:10px 0 0;font-size:12.5px;line-height:1.4}

/* ---- Готовые сценарии: заголовок · разделы одной строкой · 3×2 карточки ---- */
body.hv2.zero .skh{max-width:var(--hv2-w);margin:18px auto 0}
body.hv2.zero .skh-head{margin-bottom:8px;gap:10px;align-items:center}
body.hv2.zero .skh-cap{font-size:15px;font-weight:800;letter-spacing:-.02em}
body.hv2.zero .skh-note{font-size:12.5px}
body.hv2.zero .skh-all{font-size:13px;padding:5px 11px;border-radius:999px;background:rgba(139,92,246,.09);
    transition:background .15s,color .15s}
body.hv2.zero .skh-all:hover{background:rgba(139,92,246,.16);color:var(--accent-dark)}
/* Разделы — одна строка на любой ширине: вторая строка чипов стоила 36 px.
   Хвост уходит в прокрутку и гаснет маской, чтобы было видно, что там ещё. */
body.hv2.zero .skh-cats{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin-bottom:8px;padding:2px 2px 4px;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
body.hv2.zero .skh-cats::-webkit-scrollbar{display:none}
/* Порог 820, а не 760: у гостя над полем ещё подзаголовок и строка про бонус,
   и на 1440×790 второй ряд разделов выталкивал сноску за экран на 16 px. */
@media (min-height:820px) and (min-width:641px){
    body.hv2.zero .skh-cats{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
body.hv2.zero .skh-cat{font-size:12.5px;padding:6px 11px;background:rgba(255,255,255,.82);
    border-color:rgba(20,12,50,.1)}
body.hv2.zero .skh-cat:hover{background:#fff}
body.hv2.zero .skh-grid{gap:8px}
body.hv2.zero .skh-card{padding:11px 13px 10px;border-radius:15px;gap:4px;
    background:rgba(255,255,255,.86);border-color:rgba(20,12,50,.08);box-shadow:0 1px 2px rgba(20,12,50,.03)}
body.hv2.zero .skh-card::before{width:3px;
    background:linear-gradient(180deg,var(--skh-sig,var(--accent)),transparent 140%)}
body.hv2.zero .skh-card:hover{transform:translateY(-2px);border-color:var(--skh-sig,var(--accent));background:#fff;
    box-shadow:0 16px 30px -14px color-mix(in srgb,var(--skh-sig,#8B5CF6) 55%,transparent),0 2px 6px rgba(20,12,50,.05)}
body.hv2.zero .skh-card-t{font-size:13.5px;line-height:1.28;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.hv2.zero .skh-card-d{-webkit-line-clamp:2;font-size:12.5px;line-height:1.4}
body.hv2.zero .skh-card-go{font-size:12.5px;padding-top:3px}
body.hv2.zero .skh-own{margin-top:8px;font-size:12.5px}
body.hv2.zero .cando{margin-top:10px}

/* ---- Высокие окна: даём воздуха, поле выше, описания на три строки --------
   Кабинету — с 900 px, гостю — с 1000: у него над полем ещё подзаголовок и
   строка про бонус (+52 px), и на 1920×950 тот же тир давал прокрутку. */
@media (min-height:900px){
    body.hv2.zero:not(.guest) .feed{padding-top:20px}
    body.hv2.zero:not(.guest) .hello h1{font-size:38px}
    body.hv2.zero:not(.guest) .hero-dock{margin-top:26px}
    body.hv2.zero:not(.guest) .hero-dock .composer textarea{min-height:76px;height:76px}
    body.hv2.zero:not(.guest) .skh{margin-top:28px}
    body.hv2.zero:not(.guest) .skh-card{padding:14px 15px 12px;gap:5px}
    body.hv2.zero:not(.guest) .skh-card-d{-webkit-line-clamp:3}
    body.hv2.zero:not(.guest) .cando{margin-top:16px}
}
@media (min-height:1000px){
    body.hv2.zero.guest .feed{padding-top:20px}
    body.hv2.zero.guest .hello h1{font-size:38px}
    body.hv2.zero.guest .hello p{font-size:15.5px;margin-top:10px}
    body.hv2.zero.guest .hero-dock{margin-top:26px}
    body.hv2.zero.guest .hero-dock .composer textarea{min-height:76px;height:76px}
    body.hv2.zero.guest .skh{margin-top:28px}
    body.hv2.zero.guest .skh-card{padding:14px 15px 12px;gap:5px}
    body.hv2.zero.guest .skh-card-d{-webkit-line-clamp:3}
    body.hv2.zero.guest .cando{margin-top:16px}
}

/* ---- Невысокие окна (ноутбук 1366×768 = ~660 px вьюпорта): сжимаем поля,
   сноску «Что я могу» убираем — она раскрывается и так не на первый экран. */
@media (max-height:700px){
    body.hv2.zero .feed{padding-top:6px;padding-bottom:6px}
    body.hv2.zero .hello{padding-top:4px}
    body.hv2.zero .hello h1{font-size:27px}
    body.hv2.zero .hello p{font-size:13.5px;margin-top:5px}
    body.hv2.zero .hero-dock{margin-top:10px}
    body.hv2.zero .hero-dock .composer textarea{min-height:52px;height:52px}
    body.hv2.zero .hero-dock .exd{padding:14px 12px 7px}
    body.hv2.zero .composer-hint{margin-top:7px}
    body.hv2.zero .skh{margin-top:10px}
    body.hv2.zero .skh-head{margin-bottom:6px}
    body.hv2.zero .skh-cats{margin-bottom:6px}
    body.hv2.zero .skh-grid{gap:6px}
    body.hv2.zero .skh-card{padding:9px 12px 8px;gap:3px}
    body.hv2.zero .skh-own{margin-top:6px}
}
/* Гость: над полем ещё подзаголовок и строка про бонус — сноску «Что я могу»
   убираем раньше, чем в кабинете (1536×750 давал 22 px прокрутки). */
@media (max-height:800px){
    body.hv2.zero.guest .hello p{display:none}
}
/* Совсем низко (≤ 600 px): второй ряд карточек за экран не пускаем. */
@media (max-height:600px){
    body.hv2.zero .skh-card:nth-child(n+4){display:none}
    body.hv2.zero .hello p{display:none}
}

/* ---- Планшет: две колонки карточек, чуть плотнее ---------------------------- */
@media (max-width:900px){
    body.hv2.zero .skh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    body.hv2.zero .skh-card:nth-child(n+5){display:none}
}

/* ---- Телефон: всё в один экран — карточки каруселью, уровни в ряд ---------- */
@media (max-width:640px){
    body.hv2.zero .feed{padding:8px 12px 12px}
    body.hv2.zero .hello{padding:6px 2px 0}
    body.hv2.zero .hello h1{font-size:26px;letter-spacing:-.03em}
    body.hv2.zero .hello p{font-size:13.5px;margin-top:6px}
    body.hv2.zero .hero-dock{margin-top:12px}
    body.hv2.zero .composer-row{gap:6px}
    body.hv2.zero .composer-inner{padding:8px 8px 8px 10px;border-radius:20px;gap:6px}
    body.hv2.zero .hero-dock .composer textarea{min-height:56px;height:56px;font-size:16px}
    body.hv2.zero .composer-inner .tool-btn,
    body.hv2.zero .composer-inner .tool-btn.mic{width:36px;height:36px}
    body.hv2.zero .composer-inner .send{width:38px;height:38px}
    body.hv2.zero .hero-dock .exd{margin:-8px 0 0;padding:12px 12px 8px;gap:6px 8px}
    body.hv2.zero .hero-dock .exd-cap{display:none}
    body.hv2.zero .hero-dock .exd-models{flex:1 1 auto;flex-direction:row;flex-wrap:nowrap}
    body.hv2.zero .hero-dock .exd-model{flex:1 1 0;width:auto;justify-content:center;padding:7px 6px;min-width:0}
    body.hv2.zero .hero-dock .exd-model-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    body.hv2.zero .hero-dock .exd-scale{display:none}
    body.hv2.zero .hero-dock .exd-hint{flex:1 1 200px;min-width:0;font-size:12px}
    body.hv2.zero .composer-hint{font-size:12px}
    body.hv2.zero .skh{margin-top:14px}
    body.hv2.zero .skh-head{gap:8px}
    body.hv2.zero .skh-note{display:none}
    body.hv2.zero .skh-cats{margin:0 -14px 8px;padding:2px 14px 4px}
    /* scroll-padding обязателен: `scroll-snap-align:start` прилипает к краю СКРОЛЛ-ПОРТА
       и игнорирует padding — браузер сам прокручивал ленту на 14 px, съедая левый отступ,
       и первая карточка вставала вплотную к краю экрана (замер: scrollLeft=14). */
    body.hv2.zero .skh-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;
        margin:0 -14px;padding:2px 14px 6px;scroll-padding-left:14px;scrollbar-width:none;-ms-overflow-style:none}
    body.hv2.zero .skh-grid::-webkit-scrollbar{display:none}
    body.hv2.zero .skh-card{flex:0 0 80%;scroll-snap-align:start;display:flex;padding:12px 14px 11px;gap:5px}
    body.hv2.zero .skh-card:nth-child(n+5){display:flex}
    body.hv2.zero .skh-card-t{-webkit-line-clamp:2}
    body.hv2.zero .skh-card-d{-webkit-line-clamp:3;font-size:13px}
    body.hv2.zero .skh-card-t{font-size:14px}
    body.hv2.zero .skh-own{margin-top:6px}
    body.hv2.zero .cando{margin-top:8px}
}

/* ═══ Поиск сценария · избранное · плашка (07-09-26, вечер) ═════════════════ */

/* ---- Строка поиска на месте заголовка «Готовые сценарии» ---- */
body.hv2.zero .skh{position:relative}
body.hv2.zero .skh-head{flex-wrap:nowrap;align-items:center;gap:8px;position:relative;margin-bottom:6px}
body.hv2.zero .skh-search{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;padding:0 12px;height:36px;
    border-radius:12px;border:1px solid rgba(20,12,50,.12);background:rgba(255,255,255,.9);cursor:text;
    transition:border-color .15s,box-shadow .15s,background .15s}
body.hv2.zero .skh-search:focus-within{border-color:rgba(139,92,246,.6);box-shadow:0 0 0 3px rgba(164,128,239,.16);background:#fff}
body.hv2.zero .skh-search-i{width:16px;height:16px;flex:none;color:var(--muted)}
body.hv2.zero .skh-search:focus-within .skh-search-i{color:#6D28D9}
/* Подпись блока остаётся для читалок, на экране её заменяет placeholder. */
body.hv2.zero .skh-search .skh-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.hv2.zero .skh-search input{flex:1;min-width:0;border:none;outline:none;background:none;font:inherit;font-size:14px;
    font-weight:600;color:var(--text);height:100%;padding:0}
body.hv2.zero .skh-search input::placeholder{color:#7A7A82;font-weight:600}
body.hv2.zero .skh-search input::-webkit-search-cancel-button{-webkit-appearance:none}
/* Подсказки — поверх карточек: сетка не сдвигается, экран остаётся одним. */
body.hv2.zero .skh-results{position:absolute;left:0;right:0;top:44px;z-index:30;padding:6px;border-radius:14px;
    border:1px solid rgba(139,92,246,.2);background:#fff;
    box-shadow:0 22px 50px -16px rgba(20,12,50,.3),0 4px 12px rgba(20,12,50,.06)}
body.hv2.zero .skh-results[hidden]{display:none}
body.hv2.zero .skh-r{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;align-items:center;gap:10px;
    padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--text)}
body.hv2.zero .skh-r i{width:8px;height:8px;border-radius:50%;background:var(--skh-sig,var(--accent))}
body.hv2.zero .skh-r-t{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.hv2.zero .skh-r-c{font-size:12.5px;color:var(--muted);white-space:nowrap}
body.hv2.zero .skh-r-go{font-size:12.5px;font-weight:700;color:var(--accent-dark);opacity:0;transition:opacity .12s}
body.hv2.zero .skh-r:hover,body.hv2.zero .skh-r.on{background:rgba(139,92,246,.08)}
body.hv2.zero .skh-r:hover .skh-r-go,body.hv2.zero .skh-r.on .skh-r-go{opacity:1}
body.hv2.zero .skh-r-empty{padding:10px 12px;font-size:13px;line-height:1.4;color:var(--muted)}
body.hv2.zero .skh-r-more{display:block;width:100%;margin-top:4px;padding:9px 10px;border:none;border-top:1px solid var(--border);
    background:none;font:inherit;font-size:13px;font-weight:700;color:var(--accent-dark);cursor:pointer;text-align:left}
body.hv2.zero .skh-r-more:hover{background:rgba(139,92,246,.06)}
@media (max-width:640px){
    body.hv2.zero .skh-search{height:36px;padding:0 10px}
    body.hv2.zero .skh-search input{font-size:16px} /* порог автозума iOS */
    body.hv2.zero .skh-r{grid-template-columns:8px minmax(0,1fr) auto}
    body.hv2.zero .skh-r-c{display:none}
    body.hv2.zero .skh-r-go{opacity:1}
}
/* Старый вид (?ui=classic) без hv2: строка поиска остаётся обычным полем. */
.skh-search{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.skh-search-i{width:16px;height:16px;flex:none;color:var(--muted)}
.skh-search input{flex:1;min-width:0;font:inherit;font-size:13.5px;border:1px solid var(--border);border-radius:10px;padding:6px 10px;background:var(--card)}
.skh-results{position:absolute;z-index:30;background:#fff;border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 12px 30px rgba(20,12,50,.15)}
.skh-results[hidden]{display:none}

/* ---- Звезда избранного: на карточке сетки и в окне библиотеки ---- */
.skh-fav,.sk-fav{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;color:#B9B6C4;cursor:pointer;z-index:2;
    transition:color .15s,background .15s,transform .15s}
.skh-fav svg,.sk-fav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.skh-fav:hover,.sk-fav:hover{color:#D97706;background:rgba(245,165,36,.14);transform:scale(1.08)}
.skh-fav.on,.sk-fav.on{color:#F5A524}
.skh-fav.on svg,.sk-fav.on svg{fill:currentColor}
.skh-fav:focus-visible,.sk-fav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sk-card-t{padding-right:30px} /* в окне звезда справа сверху — заголовок под неё не заходит */
/* В сетке главной звезда стоит в правом НИЖНЕМ углу, в строке «Запустить»:
   сверху она заставляла заголовки переноситься на вторую строку, и шестёрка
   вылезала за экран на 1536×750. */
.skh-fav{top:auto;bottom:7px;right:7px;width:28px;height:28px}
.skh-card.is-fav{border-color:rgba(245,165,36,.5)}
body.hv2.zero .skh-card.is-fav{border-color:rgba(245,165,36,.55);box-shadow:0 1px 2px rgba(20,12,50,.03),0 0 0 1px rgba(245,165,36,.18)}
.sk-cat--fav i{background:#F5A524 !important}
.sk-cat--fav.on{border-color:#F5A524;background:rgba(245,165,36,.12);color:#8A4B00}
@media (hover:none){ .skh-fav,.sk-fav{width:36px;height:36px;top:5px;right:5px} .skh-fav svg,.sk-fav svg{width:19px;height:19px} }

/* ---- Плашка-подтверждение ---- */
.hv2-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:90;max-width:min(92vw,560px);
    padding:11px 16px;border-radius:14px;background:#1A1626;color:#fff;font-size:13.5px;line-height:1.4;
    box-shadow:0 14px 40px rgba(20,12,50,.35);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.hv2-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- Поле задачи выше: три строки — задача, а не запрос ---- */
/* Три строки — только когда высота позволяет (≥ 820 px): на ноутбуке
   каждые 12 px — это уже прокрутка. */
@media (min-height:820px){ body.hv2.zero:not(.guest) .hero-dock .composer textarea{min-height:72px;height:72px} }
@media (min-height:900px){ body.hv2.zero:not(.guest) .hero-dock .composer textarea{min-height:88px;height:88px} }
@media (min-height:900px){ body.hv2.zero.guest .hero-dock .composer textarea{min-height:72px;height:72px} }
@media (max-width:640px){ body.hv2.zero .hero-dock .composer textarea{min-height:64px;height:64px} }

/* ═══ Телефон: заполняем экран, а не верхнюю половину (07-09-26, вечер) ═════
   Высокий телефон (≥ 800 px: iPhone 12–16, большинство Android) — сценарии
   идут СПИСКОМ в три строки, поле выше, поиск крупнее; низкий (SE, альбом) —
   карусель, как раньше. Гостю на телефоне остаётся карусель: у него над
   полем ещё подзаголовок и строка про бонус. */
@media (max-width:640px){
    body.hv2.zero .hello h1::before{width:52px;height:52px;margin-bottom:4px}
    body.hv2.zero .composer-inner .tool-btn,
    body.hv2.zero .composer-inner .tool-btn.mic{width:40px;height:40px;border-radius:12px}
    body.hv2.zero .composer-inner .send{width:42px;height:42px}
    body.hv2.zero .hero-dock .exd-model{padding:9px 6px}
    body.hv2.zero .hero-dock .exd-model-name{font-size:13.5px}
    body.hv2.zero .skh-search{height:40px}
    body.hv2.zero .skh-all{padding:7px 12px}
    body.hv2.zero .skh-cat{padding:7px 12px;font-size:13px}
    body.hv2.zero .skh-results{top:48px}
    body.hv2.zero.guest .hello p{display:none} /* три-четыре строки серого текста на телефоне — стена */
}
@media (max-width:640px) and (min-height:800px){
    body.hv2.zero:not(.guest) .hello h1{font-size:28px}
    body.hv2.zero:not(.guest) .hero-dock{margin-top:14px}
    body.hv2.zero:not(.guest) .hero-dock .composer textarea{min-height:80px;height:80px}
    body.hv2.zero:not(.guest) .skh{margin-top:16px}
    body.hv2.zero:not(.guest) .skh-grid{display:grid;grid-template-columns:1fr;gap:8px;overflow:visible;
        margin:0;padding:0;scroll-snap-type:none}
    body.hv2.zero:not(.guest) .skh-card{flex:none;display:flex;padding:12px 14px 11px;gap:4px}
    body.hv2.zero:not(.guest) .skh-card:nth-child(n+4){display:none}
    body.hv2.zero:not(.guest) .skh-card-t{-webkit-line-clamp:1;font-size:14.5px}
    body.hv2.zero:not(.guest) .skh-card-d{-webkit-line-clamp:2;font-size:13px}
    body.hv2.zero:not(.guest) .skh-own{margin-top:8px;font-size:13px}
    body.hv2.zero:not(.guest) .hello h1::before{display:none}
}
@media (max-width:640px) and (min-height:900px){
    body.hv2.zero:not(.guest) .hello h1::before{display:block}
    body.hv2.zero:not(.guest) .skh-card{padding:13px 14px 12px}
}

/* ═══ Композер в две строки: поле сверху, панель действий снизу (07-09-26) ═══
   Кнопки в одной строке с высоким полем прижимались к нижним углам и терялись
   (замечание владельца). Теперь поле занимает всю первую строку, а вторая —
   панель: скрепка · «Голосом» · … · (i) · «Запустить →». DOM прежний, только
   flex-wrap и order. */
body.hv2.zero .composer-inner{flex-wrap:wrap;align-items:center;padding:8px 8px 8px;gap:6px 6px}
body.hv2.zero .hero-dock .composer textarea{flex:1 1 100%;order:0;min-height:56px;height:56px;padding:8px 8px 4px;
    margin:0 0 2px;line-height:24px}
body.hv2.zero .composer-inner .tool-btn{order:2;width:40px;height:40px;border-radius:12px;
    border:1px solid rgba(20,12,50,.1);background:#fff;color:#5B5867;align-self:auto}
body.hv2.zero .composer-inner .tool-btn:hover{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.06);color:#5B21B6}
body.hv2.zero .composer-inner #attachBtn{order:1}
body.hv2.zero .composer-inner .tool-btn.mic{order:2;width:auto;padding:0 14px 0 11px;gap:8px;
    color:#5B21B6;background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.22)}
body.hv2.zero .composer-inner .tool-btn.mic::after{content:'Голосом';font-size:13.5px;font-weight:650;letter-spacing:-.01em}
body.hv2.zero .composer-inner .tool-btn.mic.rec::after{content:'Стоп'}
body.hv2.zero .composer-inner .tool-btn.mic.rec{padding:0 14px 0 11px}
body.hv2.zero .composer-inner .exd-btn{order:3;margin-left:auto}
body.hv2.zero .composer-inner .send{order:4;width:auto;height:40px;padding:0 16px 0 18px;gap:8px;border-radius:12px;
    font:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em}
body.hv2.zero .composer-inner .send::before{content:'Запустить'}
body.hv2.zero .composer-inner .send svg{width:18px;height:18px}
/* Высокие окна: поле три строки, панель прежняя */
@media (min-height:820px){ body.hv2.zero:not(.guest) .hero-dock .composer textarea{min-height:72px;height:72px} }
@media (min-height:900px){ body.hv2.zero:not(.guest) .hero-dock .composer textarea{min-height:84px;height:84px} }
@media (min-height:900px){ body.hv2.zero.guest .hero-dock .composer textarea{min-height:72px;height:72px} }
/* Ноутбук 1366×768: панель действий стоит своих 44 px — поле в одну строку */
@media (max-height:700px){
    body.hv2.zero .hero-dock .composer textarea{min-height:40px;height:40px;padding:6px 8px 2px}
    body.hv2.zero .composer-inner{padding:6px 8px 7px}
    body.hv2.zero .composer-inner .tool-btn{width:38px;height:38px}
    body.hv2.zero .composer-inner .send{height:38px}
}
/* Телефон: крупные кнопки без подписей, «Запустить» — иконкой */
@media (max-width:640px){
    body.hv2.zero .composer-inner{padding:8px 8px 8px;gap:6px 6px}
    body.hv2.zero .hero-dock .composer textarea{min-height:64px;height:64px;font-size:16px;line-height:24px;padding:8px 6px 4px}
    body.hv2.zero .composer-inner .tool-btn{width:42px;height:42px}
    body.hv2.zero .composer-inner .tool-btn.mic{width:44px;height:42px;padding:0}
    body.hv2.zero .composer-inner .tool-btn.mic::after,
    body.hv2.zero .composer-inner .tool-btn.mic.rec::after{content:none}
    body.hv2.zero .composer-inner .tool-btn.mic svg{width:20px;height:20px}
    body.hv2.zero .composer-inner .send{width:48px;height:42px;padding:0;border-radius:12px}
    body.hv2.zero .composer-inner .send::before{content:none}
    body.hv2.zero .composer-inner .send svg{width:20px;height:20px}
}
@media (max-width:640px) and (min-height:800px){
    body.hv2.zero:not(.guest) .hero-dock .composer textarea{min-height:72px;height:72px}
}

/* Тир 700–800 px (1536×750 и подобные): панель действий стоит 40 px — поле
   в полторы строки, кнопки 38 */
@media (max-height:800px) and (min-width:641px){
    body.hv2.zero .hero-dock{margin-top:14px}
    body.hv2.zero .skh{margin-top:14px}
    body.hv2.zero .hero-dock .composer textarea{min-height:44px;height:44px;padding:6px 8px 2px}
    body.hv2.zero .composer-inner{padding:6px 8px 7px}
    body.hv2.zero .composer-inner .tool-btn{width:38px;height:38px}
    body.hv2.zero .composer-inner .send{height:38px}
}
/* Телефон: высокий — поле 64 (не 72), низкий (SE 667) — 44 и кнопки 38 */
@media (max-width:640px) and (min-height:800px){
    body.hv2.zero:not(.guest) .hero-dock .composer textarea{min-height:64px;height:64px}
}
@media (max-width:640px) and (max-height:700px){
    body.hv2.zero .hero-dock .exd{padding:10px 8px 6px}
    body.hv2.zero .skh{margin-top:10px}
    body.hv2.zero .skh-own{margin-top:4px}
    body.hv2.zero .hero-dock .composer textarea{min-height:44px;height:44px;padding:6px 6px 2px}
    body.hv2.zero .composer-inner{padding:6px 8px 7px}
    body.hv2.zero .composer-inner .tool-btn,body.hv2.zero .composer-inner .tool-btn.mic{width:38px;height:38px}
    body.hv2.zero .composer-inner .send{width:44px;height:38px}
}

/* Звезда в строке подсказки поиска: пятая колонка, не абсолют */
body.hv2.zero .skh-r{grid-template-columns:8px minmax(0,1fr) auto auto 28px}
body.hv2.zero .skh-r .skh-fav{position:static;width:28px;height:28px;border-radius:8px;margin:-2px 0}
body.hv2.zero .skh-r .skh-fav svg{width:16px;height:16px}
@media (max-width:640px){
    body.hv2.zero .skh-r{grid-template-columns:8px minmax(0,1fr) auto 32px}
    body.hv2.zero .skh-r .skh-fav{width:32px;height:32px}
}

/* Чип «Все разделы» — хвост ряда разделов */
.skh-cat--all{border-color:rgba(139,92,246,.35);color:var(--accent-dark);font-weight:700}
.skh-cat--all svg{width:12px;height:12px}
.skh-cat--all:hover{background:rgba(139,92,246,.08)}

/* Карточка, только что закреплённая звездой: короткая подсветка, чтобы было видно, куда она встала */
@keyframes skhPop{0%{box-shadow:0 0 0 0 rgba(245,165,36,.55);transform:translateY(-3px)}100%{box-shadow:0 0 0 12px rgba(245,165,36,0);transform:none}}
.skh-card.is-new{animation:skhPop .9s ease-out}
@media (prefers-reduced-motion:reduce){ .skh-card.is-new{animation:none} }

/* ═══ Стекло: карточки сценариев на главной и в окне, чипы, поиск (07-09-26,
   просьба владельца — «глассморфизм, iOS 26»). Полупрозрачное тело с размытием
   фона, тонкая светлая рамка, блик сверху, цвет раздела — мягким свечением в
   углу вместо полоски слева. Один язык для сетки и для окна библиотеки. ═══ */
body.hv2.zero{
    background:
        radial-gradient(1100px 560px at 16% 10%, rgba(139,92,246,.22), transparent 62%),
        radial-gradient(900px 520px at 86% 18%, rgba(244,114,182,.17), transparent 62%),
        radial-gradient(820px 480px at 56% 96%, rgba(56,189,248,.15), transparent 60%),
        #F6F4FB;
}
body.hv2.zero .skh-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body.hv2.zero .skh-card{position:relative;padding:16px 16px 14px 18px;border-radius:20px;gap:6px;
    background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.5));
    -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
    border:1px solid rgba(255,255,255,.88);overflow:hidden;
    box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 12px 32px -14px rgba(52,30,110,.24),0 1px 3px rgba(20,12,50,.05)}
body.hv2.zero .skh-card::before{left:auto;top:-46px;right:-46px;bottom:auto;width:160px;height:160px;border-radius:50%;
    background:radial-gradient(circle,var(--skh-sig,var(--accent)) 0%,transparent 70%);opacity:.24;filter:blur(8px);pointer-events:none}
body.hv2.zero .skh-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 42%)}
body.hv2.zero .skh-card:hover{transform:translateY(-3px);border-color:#fff;
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.64));
    box-shadow:0 1px 0 #fff inset,0 24px 46px -16px color-mix(in srgb,var(--skh-sig,#8B5CF6) 45%,transparent),0 2px 6px rgba(20,12,50,.06)}
body.hv2.zero .skh-card-t{font-size:15px;font-weight:750;letter-spacing:-.015em;-webkit-line-clamp:2;position:relative;z-index:1;padding-right:0}
body.hv2.zero .skh-card-d{font-size:13px;line-height:1.45;-webkit-line-clamp:3;color:#4B4857;position:relative;z-index:1}
body.hv2.zero .skh-card-go{margin-top:8px;padding:6px 12px;border-radius:999px;background:rgba(139,92,246,.1);color:#5B21B6;
    font-size:12.5px;align-self:flex-start;position:relative;z-index:1;transition:background .15s,color .15s}
body.hv2.zero .skh-card:hover .skh-card-go{background:var(--hv2-grad);color:#fff}
body.hv2.zero .skh-card.is-fav{border-color:rgba(245,165,36,.6);
    box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 12px 32px -14px rgba(245,165,36,.4),0 0 0 1px rgba(245,165,36,.2)}
.skh-fav,.sk-fav{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.85);border-radius:999px;z-index:3;box-shadow:0 2px 6px rgba(20,12,50,.06)}
.skh-fav.on,.sk-fav.on{background:rgba(245,165,36,.16);border-color:rgba(245,165,36,.4)}
body.hv2.zero .skh-fav{bottom:12px;right:12px}
/* чипы, поиск и «Все» — тем же стеклом */
body.hv2.zero .skh-cat{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-color:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(20,12,50,.04)}
body.hv2.zero .skh-cat:hover{background:rgba(255,255,255,.9)}
body.hv2.zero .skh-search{background:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.9)}
body.hv2.zero .skh-all{background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.hv2.zero .composer-inner{background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)) padding-box,
               linear-gradient(135deg,rgba(139,92,246,.55),rgba(244,114,182,.42)) border-box}
/* Окно библиотеки — те же карточки */
body.hv2 .sk-card{border-radius:20px;padding:15px 16px 13px 18px;border:1px solid rgba(255,255,255,.95);
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(247,244,252,.78));
    box-shadow:0 1px 0 #fff inset,0 8px 24px -12px rgba(52,30,110,.18)}
body.hv2 .sk-card::before{left:auto;top:-46px;right:-46px;bottom:auto;width:160px;height:160px;border-radius:50%;
    background:radial-gradient(circle,var(--sk-sig,var(--accent)) 0%,transparent 70%);opacity:.24;filter:blur(8px)}
body.hv2 .sk-card:hover{transform:translateY(-3px);border-color:#fff;
    box-shadow:0 1px 0 #fff inset,0 20px 40px -16px color-mix(in srgb,var(--sk-sig,#8B5CF6) 45%,transparent)}
body.hv2 .sk-card-t{font-size:15px;letter-spacing:-.015em;position:relative;z-index:1}
body.hv2 .sk-card-d,body.hv2 .sk-card-f{position:relative;z-index:1}
body.hv2 .sk-go{padding:5px 11px;border-radius:999px;background:rgba(139,92,246,.1);color:#5B21B6;transition:background .15s,color .15s}
body.hv2 .sk-card:hover .sk-go{background:linear-gradient(135deg,#8B5CF6,#C084FC 52%,#F472B6);color:#fff}
body.hv2 .sk-modal{background:linear-gradient(160deg,#FCFBFF,#F4F1FB)}
/* Телефон: карточки компактнее, чтобы три влезли в экран */
@media (max-width:640px){
    body.hv2.zero .skh-card{padding:11px 13px 10px 15px;border-radius:18px;gap:3px}
    body.hv2.zero .skh-card-t{font-size:14.5px;-webkit-line-clamp:1}
    body.hv2.zero .skh-card-d{-webkit-line-clamp:2;font-size:13px;line-height:1.4}
    body.hv2.zero .skh-card-go{margin-top:4px;padding:4px 10px}
    body.hv2.zero .skh-grid{gap:8px}
    body.hv2.zero .skh-fav{bottom:9px;right:9px}
    /* Список избранного на телефоне: избранные видны все, случайные — до трёх */
    body.hv2.zero:not(.guest) .skh-card:nth-child(n+4){display:flex}
    body.hv2.zero:not(.guest) .skh-card:not(.is-fav):nth-child(n+4){display:none}
}
@media (max-height:700px){
    body.hv2.zero .skh-card{padding:12px 14px 11px 16px;gap:4px}
    body.hv2.zero .skh-card-d{-webkit-line-clamp:2}
}

/* Высокий телефон: с пилюлями «Первые шаги» (сосед, ~34 px) три карточки-стекла не влезали — ужимаем свой верх */
@media (max-width:640px) and (min-height:800px){
    body.hv2.zero:not(.guest) .hero-dock{margin-top:10px}
    body.hv2.zero:not(.guest) .hero-dock .composer textarea{min-height:56px;height:56px}
    body.hv2.zero:not(.guest) .skh{margin-top:10px}
    body.hv2.zero:not(.guest) .skh-head{margin-bottom:5px}
    body.hv2.zero:not(.guest) .skh-cats{margin-bottom:6px}
    body.hv2.zero:not(.guest) .skh-own{margin-top:6px}
    body.hv2.zero:not(.guest) .skh-grid{gap:6px}
    body.hv2.zero:not(.guest) .hero-dock .exd{padding-top:12px;padding-bottom:6px}
}

/* Пилюля «Что я могу» (сосед) вернулась под заголовок на всех экранах — ужимаем свои отступы на телефонах */
@media (max-width:640px) and (min-height:800px){
    body.hv2.zero:not(.guest) .skh-cats{padding-bottom:2px;margin-bottom:5px}
    body.hv2.zero:not(.guest) .skh-own{margin-top:4px}
}
@media (max-width:640px) and (max-height:700px){
    body.hv2.zero .composer-hint{margin-top:4px}
    body.hv2.zero .skh-head{margin-bottom:4px}
    body.hv2.zero .skh-cats{margin-bottom:5px;padding-bottom:2px}
    body.hv2.zero .skh-own{margin-top:3px}
}

/* ═══ Телефон: поле ввода по умолчанию на ТРИ строки (08-09-26) ═══
   Замечание владельца: подсказка обрывалась на половине второй строки —
   на телефоне действовал тир `max-height:700px` с полем в 44 px (полторы
   строки), и человек не видел, куда пишет. Поле на телефоне обязано
   показывать три строки СРАЗУ, независимо от высоты окна: браузерная
   панель адреса режет вьюпорт до ~690 px даже на крупном iPhone, и тир
   «низкого экрана» ловил обычные телефоны.
   Блок стоит последним в файле намеренно — специфичность у всех
   телефонных правил одинаковая, побеждает объявленное позже.
   Высота = 3 × line-height + вертикальные отступы (box-sizing:border-box). */
@media (max-width:640px){
    body.hv2.zero .hero-dock .composer textarea,
    body.hv2.zero:not(.guest) .hero-dock .composer textarea,
    body.hv2.zero.guest .hero-dock .composer textarea{
        font-size:16px;line-height:24px;padding:8px 6px 4px;
        min-height:84px;height:84px;
    }
}
@media (max-width:640px) and (max-height:700px){
    body.hv2.zero .hero-dock .composer textarea,
    body.hv2.zero:not(.guest) .hero-dock .composer textarea,
    body.hv2.zero.guest .hero-dock .composer textarea{
        padding:6px 6px 2px;min-height:80px;height:80px;
    }
}

/* ═══ Подсказка «это листается» на телефоне (08-09-26, #634) ═══
   Разделы и карточки на телефоне лежат в горизонтальной ленте, и понять это
   можно было только случайно задев её пальцем: карточка обрывалась ровно по
   краю экрана и читалась как обрезанная вёрстка, а не как продолжение
   (замечание владельца). Два слоя, оба тихие:
   · край ленты карточек гаснет так же, как у разделов, — обрыв перестаёт
     выглядеть дефектом и начинает выглядеть продолжением;
   · один раз за устройство — стеклянная пилюля «Листайте» со стрелкой,
     живущая до первого касания ленты (дальше человек уже знает).
   Пилюлю ставит и позиционирует скрипт: она нужна только когда лента
   действительно длиннее экрана. */
@media (max-width:640px){
    body.hv2.zero .skh{position:relative}
    body.hv2.zero .skh-grid{
        -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
        mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
    }
    /* Долистали до конца — маска не нужна: она гасила бы последнюю карточку. */
    body.hv2.zero .skh-grid.at-end{-webkit-mask-image:none;mask-image:none}
    body.hv2.zero .skh-cats.at-end{-webkit-mask-image:none;mask-image:none}

    body.hv2.zero .skh-swipe{
        position:absolute;right:6px;z-index:4;pointer-events:none;
        display:inline-flex;align-items:center;gap:6px;
        padding:6px 11px 6px 12px;border-radius:999px;
        font-size:12px;font-weight:650;letter-spacing:-.01em;color:#5B21B6;
        background:rgba(255,255,255,.9);border:1px solid rgba(139,92,246,.22);
        -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
        box-shadow:0 2px 6px rgba(20,12,50,.08),0 14px 30px -18px rgba(20,12,50,.55);
        opacity:0;transform:translateY(-50%) translateX(6px);
        transition:opacity .28s ease,transform .28s cubic-bezier(.32,.72,0,1);
    }
    body.hv2.zero .skh-swipe.on{opacity:1;transform:translateY(-50%) translateX(0)}
    body.hv2.zero .skh-swipe svg{width:14px;height:14px;animation:skhSwipeNudge 1.7s ease-in-out infinite}
    @keyframes skhSwipeNudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}
    @media (prefers-reduced-motion:reduce){
        body.hv2.zero .skh-swipe svg{animation:none}
    }
}
