/* ═══ Голос (/voice) ═══════════════════════════════════════════════════
   Слева панель студии, справа история озвучек списком. Акцентная заливка —
   только у главной кнопки; выбранное — лёгкий оттенок и светлая кромка.
   ═══════════════════════════════════════════════════════════════════════ */

/* Перламутр страницы: вода и сирень, как звуковая волна. */
body[data-page="voice"] { --a1: #6fa3a8; --a2: #8f86bd; --a3: #88ac9c; --a4: #7d90bd; }

/* ── Панель ────────────────────────────────────────────────────────────── */
.vc-panel .studio-scroll { gap: 12px; }
.vc-panel [data-show][hidden] { display: none !important; }

/* Образец голоса: загрузчик и карточка записи. */
.vc-sample .dropzone { min-height: 138px; }
.vc-sample .dz-icons > span { width: 40px; height: 40px; }

/* Модель без клона: одна тихая карточка «Образец голоса · не клонирует» с выходом. */
.vc-off {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 12px;
    border-radius: var(--r-lg);
    border: 1.5px dashed rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.018);
    animation: vc-pop 300ms var(--ease-out);
}
.vc-off-ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--text-3);
    background: linear-gradient(180deg, #22222c, #121218);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.vc-off-ic svg { width: 16px; height: 16px; }
.vc-off-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.vc-off-body > b { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-2); }
.vc-off-why { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4; }
.vc-off-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 40px;
    margin-top: 8px;
    padding: 0 10px 0 6px;
    border: 0;
    border-radius: var(--r-pill);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    transition: background var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.vc-off-btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)); }
.vc-off-btn:active { transform: scale(0.97); }
.vc-off-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-off-btn svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--text-3); }
.vc-off-logo { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.vsc-note-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.vsc-note .vc-off-btn { margin-top: 6px; color: var(--text); }

.vc-soon {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--r-lg);
    background: rgba(224, 196, 154, 0.07);
    box-shadow: inset 0 0 0 1px rgba(224, 196, 154, 0.18);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.45;
}
.vc-soon svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--amber); }

.vc-sample-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 14px;
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(146, 196, 198, 0.07), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    animation: vc-pop 360ms var(--ease-out);
}
.vsc-head { display: flex; align-items: center; gap: 10px; }
.vsc-ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(180deg, #2a2a36, #15151c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 16px -6px rgba(0, 0, 0, 0.8);
}
.vsc-ic svg { width: 17px; height: 17px; }
.vsc-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vsc-meta b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.vsc-meta .faint { font-size: var(--fs-xs); line-height: 1.35; overflow-wrap: anywhere; }
.vsc-note { display: flex; align-items: flex-start; gap: 7px; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4; }
.vsc-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--success); opacity: 0.85; }
.vsc-note.is-warn { color: var(--amber); }
.vsc-note.is-warn svg { color: var(--amber); }

/* Текст. */
.vc-script .textarea { min-height: 132px; max-height: 40dvh; overflow: auto; }
.vc-script .field-head { cursor: text; }
.vc-est { font-size: var(--fs-xs); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.vc-script-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.vc-hint { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.35; }
.vc-hint svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
/* Своего предела у сайта нет: подсказка — только когда текст длиннее потолка модели. */
.vc-limit { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: var(--fs-xs); color: var(--danger); line-height: 1.4; }
.vc-limit[hidden] { display: none; }
.vc-limit svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.vc-transcript .textarea { min-height: 56px; }

/* Строка «Голос». */
.vc-voice .vc-orb { width: 34px; height: 34px; }
.vc-vname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-vtags { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-3); }
.vc-vcount {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}
.vc-row-skel { display: block; width: 100%; height: 38px; border-radius: 12px; }

/* Шарик-аватар голоса: тёмная стеклянная сфера с цветным светом изнутри. */
.vc-orb {
    --o1: hsl(262 41% 66%);
    --o2: hsl(300 39% 40%);
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.92) 0 4%, rgba(255, 255, 255, 0.32) 10%, transparent 24%),
        radial-gradient(circle at 42% 38%, var(--o1) 0%, var(--o2) 56%, #07070b 100%);
    box-shadow:
        inset 0 -6px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 8px 20px -10px var(--o1);
}
.vc-orb.is-xs { width: 16px; height: 16px; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.vc-orb.is-mic {
    display: inline-grid;
    place-items: center;
    color: var(--text);
    background: radial-gradient(circle at 35% 30%, #3b3b4a, #121218 75%);
}
.vc-orb.is-mic svg { width: 46%; height: 46%; }

/* Скорость. */
.vc-speed-end { display: inline-flex; align-items: center; gap: 4px; }
.vc-speed-val { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.vc-speed-reset { --h: 28px; padding: 0 10px; font-size: var(--fs-xs); }
.vc-range {
    --v: 33.3%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.vc-range:focus-visible { outline-offset: 4px; }
.vc-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.78) var(--v), rgba(255, 255, 255, 0.1) var(--v));
}
.vc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, #d9d9e3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 5px rgba(255, 255, 255, 0.07);
    transition: transform var(--dur-1) var(--ease-out);
}
.vc-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.vc-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.vc-range::-moz-range-progress { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.78); }
.vc-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: linear-gradient(180deg, #fff, #d9d9e3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.vc-range-marks { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-4); font-variant-numeric: tabular-nums; }

/* Стиль и эмоция. */
.vc-style .textarea { min-height: 52px; }
.vc-style-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    transition: background var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.vc-chip:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); }
.vc-chip:active { transform: scale(0.96); }
.vc-chip[aria-pressed="true"] {
    color: var(--text);
    background: linear-gradient(100deg, rgba(167, 159, 208, 0.2), rgba(146, 196, 198, 0.1));
    box-shadow: inset 0 0 0 1px rgba(201, 193, 230, 0.38);
}

.vc-nudge { animation: vc-nudge 460ms var(--ease-out); }
@keyframes vc-nudge {
    0% { transform: none; }
    20% { transform: translateX(-5px); }
    45% { transform: translateX(4px); }
    70% { transform: translateX(-2px); }
    100% { transform: none; }
}
@keyframes vc-pop { from { opacity: 0; transform: translateY(6px) scale(0.985); } }

/* ── Правая часть ──────────────────────────────────────────────────────── */
.vc-main { position: relative; overflow: hidden; }
.vc-main::after {
    /* Мягкий свет сверху истории — «сцена», поверх которой лежат карточки. */
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 320px;
    z-index: -1;
    background: radial-gradient(60% 100% at 70% 0%, rgba(136, 185, 189, 0.08), transparent 70%),
        radial-gradient(50% 90% at 20% 0%, rgba(157, 149, 204, 0.07), transparent 70%);
    pointer-events: none;
}
.vc-toolbar { min-height: 40px; }
.vc-toolbar .segmented { flex: 0 0 auto; }
.vc-toolbar .segmented > button { padding: 0 14px; }
.vc-count { font-size: var(--fs-sm); padding-right: 6px; font-variant-numeric: tabular-nums; }
.vc-hist { flex: 1 1 auto; display: flex; flex-direction: column; }
.vc-hist .hist-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.vc-hist .hist-empty { flex: 1 1 auto; display: flex; }
/* История не загрузилась — сообщение и «Повторить» по центру панели. */
.vc-hist .hist-empty.is-error { align-items: center; justify-content: center; }
.vc-hist .hist-skel { aspect-ratio: auto; height: 132px; border-radius: var(--r-xl); }
.vc-how { flex: 1 1 auto; display: flex; }

/* Задача идёт: строка-ожидание в стиле карточки — стекло, бегущий свет, волна,
   по которой пробегает сияние. Разметку рисует studio-kit (layout 'row'). */
.vc-hist .hist-tile.is-pending {
    min-height: 118px;
    border-radius: var(--r-xl);
    place-items: stretch;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), rgba(10, 10, 14, 0.55);
    box-shadow: var(--sh-1), 0 18px 60px -40px rgba(226, 222, 242, 0.12);
}
.vc-hist .hist-tile.is-pending:hover { transform: none; }
.vc-hist .hist-tile.is-pending > .skeleton { background: transparent; }
.vc-hist .hist-tile.is-pending > .skeleton::after {
    background: linear-gradient(100deg, transparent 25%, rgba(157, 149, 204, 0.1) 45%, rgba(136, 185, 189, 0.12) 55%, transparent 75%);
    animation-duration: 2.4s;
}
.vc-hist .hist-tile.is-pending:not(.is-failed) .pend {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'spin text bar' 'spin prompt bar' 'wave wave wave';
    align-items: center;
    gap: 3px 14px;
    padding: 16px 18px 14px;
    text-align: left;
}
.vc-hist .hist-tile.is-pending .spinner { grid-area: spin; width: 26px; height: 26px; }
.vc-hist .hist-tile.is-pending .pend-text { grid-area: text; color: var(--text); font-weight: var(--fw-semibold); }
.vc-hist .hist-tile.is-pending .pend-prompt { grid-area: prompt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-hist .hist-tile.is-pending .progress { grid-area: bar; }
.vc-hist .hist-tile.is-pending:not(.is-failed) .pend::after {
    content: '';
    grid-area: wave;
    height: 28px;
    margin-top: 10px;
    background:
        linear-gradient(90deg, transparent, rgba(191, 222, 223, 0.95), rgba(204, 197, 231, 0.95), transparent) -40% 0 / 36% 100% no-repeat,
        rgba(255, 255, 255, 0.14);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='28'%3E%3Cpath d='M0 7.5h3v13h-3zM6 7h3v14h-3zM12 5.5h3v17h-3zM18 8.5h3v11h-3zM24 6h3v16h-3zM30 5h3v18h-3zM36 6.5h3v15h-3zM42 5h3v18h-3zM48 9.5h3v9h-3zM54 10h3v8h-3zM60 11h3v6h-3zM66 10.5h3v7h-3zM72 9.5h3v9h-3zM78 10h3v8h-3zM84 12h3v4h-3zM90 12h3v4h-3zM96 10h3v8h-3zM102 6.5h3v15h-3zM108 6h3v16h-3zM114 7h3v14h-3zM120 5.5h3v17h-3zM126 8.5h3v11h-3zM132 3h3v22h-3zM138 4.5h3v19h-3zM144 6h3v16h-3zM150 8h3v12h-3zM156 9h3v10h-3zM162 8.5h3v11h-3zM168 9.5h3v9h-3zM174 8.5h3v11h-3zM180 9.5h3v9h-3zM186 12h3v4h-3zM192 12h3v4h-3zM198 12h3v4h-3zM204 10.5h3v7h-3zM210 8.5h3v11h-3zM216 7h3v14h-3zM222 8.5h3v11h-3zM228 8h3v12h-3zM234 5h3v18h-3z'/%3E%3C/svg%3E") 0 50% / 240px 28px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='28'%3E%3Cpath d='M0 7.5h3v13h-3zM6 7h3v14h-3zM12 5.5h3v17h-3zM18 8.5h3v11h-3zM24 6h3v16h-3zM30 5h3v18h-3zM36 6.5h3v15h-3zM42 5h3v18h-3zM48 9.5h3v9h-3zM54 10h3v8h-3zM60 11h3v6h-3zM66 10.5h3v7h-3zM72 9.5h3v9h-3zM78 10h3v8h-3zM84 12h3v4h-3zM90 12h3v4h-3zM96 10h3v8h-3zM102 6.5h3v15h-3zM108 6h3v16h-3zM114 7h3v14h-3zM120 5.5h3v17h-3zM126 8.5h3v11h-3zM132 3h3v22h-3zM138 4.5h3v19h-3zM144 6h3v16h-3zM150 8h3v12h-3zM156 9h3v10h-3zM162 8.5h3v11h-3zM168 9.5h3v9h-3zM174 8.5h3v11h-3zM180 9.5h3v9h-3zM186 12h3v4h-3zM192 12h3v4h-3zM198 12h3v4h-3zM204 10.5h3v7h-3zM210 8.5h3v11h-3zM216 7h3v14h-3zM222 8.5h3v11h-3zM228 8h3v12h-3zM234 5h3v18h-3z'/%3E%3C/svg%3E") 0 50% / 240px 28px repeat-x;
    animation: vc-scan 2.2s var(--ease-in-out) infinite;
}
@keyframes vc-scan { to { background-position: 140% 0, 0 0; } }
.vc-hist .hist-tile.is-pending.is-failed .pend { flex-direction: row; justify-content: center; gap: 10px; }

/* ── Сцена генерации (components/gen-stage.js) ─────────────────────────── */
/* Класс вида (.is-kind-speech) и спрятанное ядро (.is-audio) ставит общая сцена.
   Волна расходится от шара голоса в обе стороны. */
.vc .gen-stage.is-kind-speech .gs-wave {
    -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 36%, transparent 43%, transparent 57%, #000 64%, #000 90%, transparent);
    mask: linear-gradient(90deg, transparent, #000 10%, #000 36%, transparent 43%, transparent 57%, #000 64%, #000 90%, transparent);
}
.vcs-orb {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: -46px 0 0 -46px;
}
.vcs-orb > .vc-orb {
    width: 100%;
    height: 100%;
    animation: vcs-talk 1.7s var(--ease-in-out) infinite;
    box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 70px -8px var(--o1);
}
.vcs-orb > .vc-orb.is-mic svg { width: 38%; height: 38%; }
.vcs-orb > i {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    place-self: stretch;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    opacity: 0;
    animation: vcs-ring 2.7s var(--ease-out) infinite;
}
.vcs-orb > i:nth-child(2) { animation-delay: 0.9s; }
.vcs-orb > i:nth-child(3) { animation-delay: 1.8s; }
@keyframes vcs-ring { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes vcs-talk { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.06); } 55% { transform: scale(0.97); } 75% { transform: scale(1.03); } }

/* Готово: шар и имя голоса, под ними — большой проигрыватель на всю ширину кадра. */
.vcs-res {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: min(86%, 720px);
    animation: vcs-in 700ms var(--ease-out) both;
}
.vcs-res::before {
    content: '';
    position: absolute;
    left: -80px;
    top: -90px;
    z-index: -1;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(157, 149, 204, 0.22), rgba(136, 185, 189, 0.07) 60%, transparent);
    pointer-events: none;
}
.vcs-res-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.vcs-res-orb { width: 64px; height: 64px; }
.vcs-res-orb.is-mic svg { width: 38%; height: 38%; }
.gs-result.is-playing .vcs-res-orb { animation: vcs-talk 1.7s var(--ease-in-out) infinite; }
.vcs-res-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vcs-res-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.vcs-res-name { font-size: clamp(18px, 1.7vw, 24px); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcs-res-player { min-width: 0; }
@keyframes vcs-in { from { opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(6px); } }

/* Карточка озвучки. */
.vc-item {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 14px 18px;
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)), rgba(10, 10, 14, 0.5);
    box-shadow: var(--sh-1);
    transition: background var(--dur-2) ease, box-shadow var(--dur-3) var(--ease-out), opacity var(--dur-3) ease, transform var(--dur-3) var(--ease-out);
}
.vc-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    background: var(--edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background var(--dur-2) ease;
}
.vc-item:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)), rgba(10, 10, 14, 0.5); }
.vc-item:hover::before { background: var(--edge-hover); }
.vc-item.is-playing { box-shadow: var(--sh-2), 0 24px 70px -36px rgba(226, 222, 242, 0.12); }
.vc-item.is-playing::before { background: linear-gradient(135deg, rgba(204, 197, 231, 0.55), rgba(191, 222, 223, 0.3) 45%, rgba(255, 255, 255, 0.08)); }
.vc-item.is-leaving { opacity: 0; transform: scale(0.98); }
.vc-item.reveal { animation-duration: 620ms; }

.vc-item-top { display: flex; align-items: flex-start; gap: 12px; }
.vc-item-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--text);
    white-space: pre-line;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    cursor: pointer;
    text-wrap: pretty;
}
.vc-item.is-open .vc-item-text { display: block; -webkit-line-clamp: unset; }
.vc-item-acts { display: flex; gap: 2px; margin: -6px -6px 0 0; flex: 0 0 auto; }
.vc-item-acts .btn { color: var(--text-3); }
.vc-item-acts .btn:hover { color: var(--text); }
.vc-item-acts .vc-del:hover { color: var(--danger); background: var(--danger-bg); }
@media (hover: hover) and (pointer: fine) {
    .vc-item-acts { opacity: 0; transform: translateX(4px); transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out); }
    .vc-item:hover .vc-item-acts, .vc-item:focus-within .vc-item-acts { opacity: 1; transform: none; }
}
.vc-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12.5px; color: var(--text-2); }
.vc-meta-voice, .vc-meta-model { display: inline-flex; align-items: center; gap: 7px; font-weight: var(--fw-medium); }
.vc-meta-logo { width: 16px; height: 16px; border-radius: 5px; object-fit: cover; box-shadow: inset 0 0 0 1px var(--line-2); }
.vc-meta-dim { color: var(--text-3); font-variant-numeric: tabular-nums; }
.vc-meta-cr { display: inline-flex; align-items: center; gap: 3px; }
.vc-meta-cr svg { width: 11px; height: 11px; color: var(--text-3); }
.vc-item-player { padding-top: 2px; }

/* ── Пустая история: «Превратите текст в голос» ────────────────────────── */
.vc-hero {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vw, 32px);
    width: 100%;
    padding: clamp(20px, 4.5vw, 56px) clamp(4px, 1.5vw, 20px) clamp(12px, 2vw, 24px);
}
.vc-hero-head { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 760px; text-align: center; }
.vc-hero-title { font-size: clamp(26px, 3.4vw, 46px); }
.vc-hero-head .lead { max-width: 560px; }
.vc-hero-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 1180px; }
.vc-hcard {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 16px 16px;
    border: 0;
    border-radius: var(--r-2xl);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
        rgba(10, 10, 16, 0.62);
    box-shadow: var(--sh-2);
    color: var(--text);
    text-align: left;
    overflow: hidden;
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.vc-hcard::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1px;
    border-radius: inherit;
    background: var(--edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background var(--dur-3) ease;
}
.vc-hcard:hover { transform: translateY(-3px); box-shadow: var(--sh-3), 0 36px 90px -46px rgba(226, 222, 242, 0.12); }
.vc-hcard:hover::before { background: linear-gradient(135deg, rgba(204, 197, 231, 0.6), rgba(191, 222, 223, 0.28) 50%, rgba(255, 255, 255, 0.12)); }
.vc-hcard:active { transform: translateY(-1px) scale(0.995); }
.vc-hcard-copy { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.vc-hcard-title { font-size: clamp(18px, 1.7vw, 23px); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.2; }
.vc-hcard-text { font-size: var(--fs-md); color: var(--text-2); line-height: 1.5; max-width: 440px; }
.vc-hcard-art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: #07070b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.vc-hcard-art > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 1.4s var(--ease-out), filter 1.4s var(--ease-out);
}
.vc-hcard-art.is-voices > img { filter: saturate(0.9) brightness(0.8); }
.vc-hcard-art.is-script > img { filter: saturate(0.85) brightness(0.72); }
.vc-hcard:hover .vc-hcard-art > img { transform: scale(1.1); filter: saturate(1) brightness(0.86); }
.vc-hcard-art::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(90% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

/* Плывущие «таблетки» голосов. */
.vc-float { position: absolute; z-index: 2; animation: vc-drift 7s var(--ease-in-out) infinite alternate; }
.vc-float.f1 { left: 50%; top: 52%; transform: translate(-50%, -50%); }
.vc-float.f2 { right: 5%; top: 9%; transform: scale(0.82); transform-origin: right top; animation-duration: 8.5s; animation-delay: -2s; }
.vc-float.f3 { left: 5%; bottom: 9%; transform: scale(0.82); transform-origin: left bottom; animation-duration: 9.5s; animation-delay: -4s; }
@keyframes vc-drift {
    from { translate: 0 5px; }
    to { translate: 0 -7px; }
}
.vc-pill {
    /* Без backdrop-filter (26.09, лаги): подложка плотнее */
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 8px;
    border-radius: var(--r-pill);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), rgba(12, 12, 18, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 60px -20px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}
.vc-pill .vc-orb { width: 38px; height: 38px; }
.vc-pill.is-big { gap: 16px; padding: 10px 26px 10px 10px; }
.vc-pill.is-big .vc-orb { width: clamp(46px, 5vw, 64px); height: clamp(46px, 5vw, 64px); }
.vc-pill.is-big .vc-pill-txt b { font-size: clamp(20px, 2.2vw, 28px); }
.vc-pill.is-big .vc-pill-txt small { font-size: 13px; }
.vc-pill-txt { display: flex; flex-direction: column; line-height: 1.15; }
.vc-pill-txt b { font-size: 15px; font-weight: var(--fw-semibold); }
.vc-pill-txt small { font-size: 11.5px; color: var(--text-2); }
.vc-pill-wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; margin-left: 4px; }
.vc-pill-wave i { width: 3px; height: 100%; border-radius: 2px; background: rgba(255, 255, 255, 0.85); animation: vc-eq 1s var(--ease-in-out) infinite alternate; animation-delay: var(--d, 0s); }
.vc-pill.is-clone .vc-orb { width: 38px; height: 38px; }
@keyframes vc-eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

/* Мини-панель «Текст → волна». */
.vc-mock {
    /* Без backdrop-filter (26.09, лаги): подложка плотнее */
    position: absolute;
    z-index: 2;
    left: 9%;
    right: 9%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), rgba(10, 10, 16, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 70px -24px rgba(0, 0, 0, 0.9);
}
.vc-mock-label { font-size: 12px; color: var(--text-3); font-weight: var(--fw-medium); }
.vc-mock-text { font-size: clamp(13px, 1.25vw, 16px); line-height: 1.45; color: var(--text); }
.vc-mock-text > span::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: -2px;
    border-radius: 1px;
    background: var(--cyan-hi);
    box-shadow: 0 0 8px var(--glow-cyan);
    animation: vc-caret 1.1s steps(1) infinite;
}
@keyframes vc-caret { 50% { opacity: 0; } }
.vc-mock-wave { display: flex; align-items: center; gap: 3px; height: clamp(26px, 3vw, 36px); margin-top: 2px; }
.vc-mock-wave i {
    flex: 1 1 0;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(180deg, #fff, rgba(224, 229, 241, 0.75));
    transform: scaleY(var(--h, 0.5));
    animation: vc-eq2 1.3s var(--ease-in-out) infinite alternate;
    animation-delay: calc(var(--d, 0s) * -1);
}
@keyframes vc-eq2 { from { transform: scaleY(calc(var(--h, 0.5) * 0.3)); } to { transform: scaleY(var(--h, 0.5)); } }

.vc-try { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 900px; }
.vc-try-label { margin-right: 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.vc-try-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    transition: background var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.vc-try-chip:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.vc-try-chip:active { transform: scale(0.97); }
.vc-try-chip svg { width: 14px; height: 14px; opacity: 0.6; }

/* ── Выбор голоса ──────────────────────────────────────────────────────── */
.popover.vp-pop {
    padding: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 30%), #0d0d13;
    /* Непрозрачно: при 97% Chromium и Safari показывали сквозь панель сцену и историю (слои с размытием фона). */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.popover.vp-pop.is-beside { margin-top: 0; }
.vc-vp-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.vp { width: min(700px, calc(100vw - 24px)); max-height: min(620px, calc(100dvh - 32px)); display: flex; flex-direction: column; }
.vp-head { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.vp-title { display: flex; flex-direction: column; gap: 4px; padding-right: 8px; }
.vp-h { font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -0.005em; text-transform: uppercase; }
.vp-sub { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-3); }
.vp-logo { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; box-shadow: inset 0 0 0 1px var(--line-2); }
.vp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vp-tools:empty { display: none; }
.vp-search { flex: 1 1 200px; height: 40px; }
.vp-g { flex: 0 0 auto; }
/* Языки голосов: нейтральные плашки, выбранная — светлее. */
.vp-langs {
    display: flex;
    gap: 6px;
    margin: 0 -18px;
    padding: 0 18px 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.vp-langs::-webkit-scrollbar { display: none; }
.vp-lang {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    transition: background var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.vp-lang > span { color: var(--text-4); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.vp-lang:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.vp-lang[aria-pressed="true"] { background: rgba(255, 255, 255, 0.13); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.vp-lang[aria-pressed="true"] > span { color: var(--text-3); }
.vp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    padding: 12px;
    overflow: auto;
    overscroll-behavior: contain;
}
.vp-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 10px 26px 10px 10px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: var(--text);
    text-align: left;
    animation: vp-in 320ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 12ms);
    transition: background var(--dur-1) ease, box-shadow var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.vp-card:hover, .vp-card:focus-visible { background: rgba(255, 255, 255, 0.07); }
.vp-card:active { transform: scale(0.98); }
.vp-card[aria-selected="true"] {
    background: linear-gradient(100deg, rgba(167, 159, 208, 0.18), rgba(146, 196, 198, 0.08));
    box-shadow: inset 0 0 0 1px rgba(201, 193, 230, 0.36);
}
.vp-card .vc-orb { width: 42px; height: 42px; }
.vp-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vp-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.vp-tags { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-check { position: absolute; top: 9px; right: 9px; width: 15px; height: 15px; color: var(--cyan-hi); }
.vp-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 12px; color: var(--text-3); }
.vp-empty svg { width: 26px; height: 26px; }
@keyframes vp-in { from { opacity: 0; transform: translateY(6px); } }

/* Меню «⋯» вместо трёх значков: телефон и сенсорные экраны. */
.vc-more { display: none; }
.card-menu { min-width: 220px; }
/* Непрозрачно: сквозь полупрозрачное меню просвечивали слои с размытием фона. */
.popover.card-menu-pop { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 30%), #0d0d13; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: none), (max-width: 560px) {
    .vc-item-acts > [data-act]:not([data-act="more"]) { display: none; }
    .vc-more { display: inline-flex; }
    .vc-item-acts { opacity: 1; transform: none; }
}

/* ── Размеры экрана ────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .vc-hero-cards { gap: 12px; }
    .vc-pill.is-big { padding: 8px 20px 8px 8px; }
}
@media (max-width: 1024px) {
    .vc-main { min-height: 0; }
    .vc-hero { padding-top: 28px; }
}
@media (max-width: 760px) {
    .vc-hero-cards { grid-template-columns: minmax(0, 1fr); }
    .vc-hcard { padding: 18px 12px 12px; }
    .vc-hcard-art { aspect-ratio: 16 / 11; }
    .vp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-item { padding: 14px 12px 12px 14px; }
    .vc-item-meta { gap: 4px 12px; }
    .vc-toolbar .segmented > button { min-height: 40px; }
}
@media (max-width: 640px) {
    /* Телефон: кадр сцены выше, проигрыватель — под именем голоса. */
    .vc .gen-stage.is-kind-speech .gs-canvas { aspect-ratio: 4 / 3; }
    .vcs-orb { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
    .vcs-res { width: 90%; gap: 16px; }
    .vcs-res-orb { width: 48px; height: 48px; }
    .vcs-res-name { font-size: 18px; }
    .vcs-res .ap.ap-xl { --ap-play: 50px; --ap-wave: 44px; }
    .vc-hist .hist-tile.is-pending:not(.is-failed) .pend { grid-template-areas: 'spin text text' 'spin prompt prompt' 'wave wave wave'; padding: 14px; }
    .vc-hist .hist-tile.is-pending .progress { display: none; }
}
@media (max-width: 420px) {
    .vc-float.f2 { right: 3%; top: 6%; transform: scale(0.72); }
    .vc-float.f3 { left: 3%; bottom: 6%; transform: scale(0.72); }
    .vc-pill-wave { display: none; }
    .vc-pill.is-big .vc-pill-wave { display: inline-flex; }
    .vp-card { padding: 8px 22px 8px 8px; gap: 10px; min-height: 58px; }
    .vp-card .vc-orb { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .vc-float, .vc-pill-wave i, .vc-mock-wave i, .vc-mock-text > span::after { animation: none !important; }
    .vp-card { animation: none; }
    .vcs-orb > .vc-orb, .vcs-orb > i, .gs-result.is-playing .vcs-res-orb, .vcs-res,
    .vc-hist .hist-tile.is-pending .pend::after { animation: none !important; }
    .vcs-orb > i { opacity: 0; }
}