/* ==========================================================================
   Vision Flow Art — дизайн-слой фото/видео генерации.
   Чёрно-белый космос: чистый чёрный, белый свет, тонкие линии, стекло.
   Подключается ПОСЛЕ veo-desktop.css / veo-3-1-mobile.css, поэтому
   перекрывает их по специфичности `body.veo-generation-body …`.
   Два вида (переключатель в хедере, класс на <body>):
     .vf-view-chat   — лента-чат (как раньше)
     .vf-view-studio — единичная генерация: панель слева, холст справа
   ========================================================================== */

body.veo-generation-body {
    --vf-bg: #040706;
    --vf-bg-2: #08100d;
    --vf-surface: rgba(255, 246, 222, 0.035);
    --vf-surface-2: rgba(255, 246, 222, 0.06);
    --vf-surface-3: rgba(255, 246, 222, 0.1);
    --vf-line: rgba(236, 224, 198, 0.11);
    --vf-line-2: rgba(236, 224, 198, 0.22);
    --vf-line-3: rgba(236, 224, 198, 0.45);
    --vf-text: #f5eddc;
    --vf-dim: rgba(245, 237, 220, 0.66);
    --vf-mute: rgba(245, 237, 220, 0.4);
    --vf-tint: 160;
    --vf-halo: rgba(236, 224, 198, 0.14);
    --vf-halo-strong: rgba(236, 224, 198, 0.32);
    --vf-r-sm: 12px;
    --vf-r: 18px;
    --vf-r-lg: 26px;
    --vf-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --vf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --vf-font: "Inter", -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
    background: var(--vf-bg) !important;
    color: var(--vf-text);
    font-family: var(--vf-font);
    -webkit-font-smoothing: antialiased;
}
body.veo-generation-body.nano-banana-page { --vf-tint: 160; }
body.veo-generation-body.veo-page,
body.veo-generation-body.wan-page,
body.veo-generation-body.infinitalk-page,
body.veo-generation-body.kling-page,
body.veo-generation-body.seedance-page { --vf-tint: 268; }

/* ---------- Космический фон ---------- */
body.veo-generation-body .veo-background-animation {
    background:
        radial-gradient(60% 45% at 50% 108%, var(--vf-halo) 0%, transparent 70%),
        radial-gradient(40% 30% at 85% -5%, hsla(var(--vf-tint), 20%, 92%, 0.07) 0%, transparent 70%),
        var(--vf-bg) !important;
}
body.veo-generation-body .veo-nebula-orb {
    background: radial-gradient(circle, hsla(var(--vf-tint), 20%, 92%, 0.08), transparent 65%) !important;
    filter: blur(40px);
    opacity: 1 !important;
}
body.veo-generation-body .veo-nebula-orb--2 { animation-duration: 38s !important; }
body.veo-generation-body .veo-cosmic-star--burgundy,
body.veo-generation-body .veo-cosmic-star--coral,
body.veo-generation-body .veo-cosmic-star--pink,
body.veo-generation-body .veo-cosmic-star--cyan,
body.veo-generation-body .veo-cosmic-star--blue {
    background: var(--vf-cta) !important;
    box-shadow: 0 0 6px 1px rgba(236, 224, 198, 0.5) !important;
}
#vfArtStars {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
#vfArtSpot {
    position: fixed;
    left: 0;
    top: 0;
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--vf-halo) 0%, transparent 62%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.6s var(--vf-ease);
    will-change: transform;
}
body.vf-art-spot-on #vfArtSpot { opacity: 1; }

/* ---------- Хедер ---------- */
body.veo-generation-body .header {
    background: linear-gradient(180deg, rgba(4, 4, 4, 0.86), rgba(4, 4, 4, 0.5)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border-bottom: 1px solid var(--vf-line) !important;
    box-shadow: none !important;
}
body.veo-generation-body .header-brand-name {
    font-family: var(--vf-font);
    font-weight: 700;
    letter-spacing: 0.22em;
    font-size: 0.82rem;
    text-transform: uppercase;
    background: linear-gradient(90deg, #f7efde 30%, rgba(247, 239, 222, 0.55));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.veo-generation-body .nav-link,
body.veo-generation-body .desktop-header .nav-link {
    color: var(--vf-dim) !important;
    border-radius: 999px;
    transition: color 0.25s, background 0.25s;
}
body.veo-generation-body .nav-link:hover {
    color: var(--vf-ink) !important;
    background: var(--vf-surface-2) !important;
}
body.veo-generation-body .nav-link.vf-nav-current {
    color: var(--vf-on) !important;
    background: var(--vf-cta) !important;
    box-shadow: 0 0 24px rgba(236, 224, 198, 0.28);
}
body.veo-generation-body .nav-link.vf-nav-current .nav-link-icon,
body.veo-generation-body .nav-link.vf-nav-current svg,
body.veo-generation-body .nav-link.vf-nav-current span { color: var(--vf-on) !important; stroke: var(--vf-on) !important; }
body.veo-generation-body .nav-link-icon,
body.veo-generation-body :root { --nav-header-icon: #f7efde; --nav-header-icon-hover: #f7efde; }
body.veo-generation-body .buy-balance-group {
    background: var(--vf-surface) !important;
    border: 1px solid var(--vf-line) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
body.veo-generation-body .profile-buy-btn {
    background: var(--vf-cta) !important;
    color: var(--vf-on) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 700;
    transition: transform 0.3s var(--vf-spring), box-shadow 0.3s;
}
body.veo-generation-body .profile-buy-btn:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 0 26px rgba(236, 224, 198, 0.4);
}
body.veo-generation-body .profile-user-avatar {
    border: 1px solid var(--vf-line-2) !important;
    box-shadow: 0 0 0 3px rgba(247, 239, 222, 0.04), 0 0 22px var(--vf-halo) !important;
}

/* ---------- Переключатель вида Чат / Студия ---------- */
.vf-view-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    margin-right: 10px;
    border-radius: 999px;
    background: var(--vf-surface);
    border: 1px solid var(--vf-line);
    font-family: var(--vf-font);
    flex: 0 0 auto;
}
.vf-view-switch__thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 999px;
    background: var(--vf-cta);
    box-shadow: 0 0 18px rgba(236, 224, 198, 0.35);
    transition: transform 0.45s var(--vf-spring);
}
body.vf-view-studio .vf-view-switch__thumb { transform: translateX(100%); }
.vf-view-switch button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: var(--vf-dim);
    font: 600 12px/1 var(--vf-font);
    letter-spacing: 0.02em;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.3s;
    white-space: nowrap;
}
.vf-view-switch button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vf-view-switch button[aria-pressed="true"] { color: var(--vf-on); }
.vf-view-switch button:not([aria-pressed="true"]):hover { color: var(--vf-ink); }
.vf-view-switch--mobile { margin: 0 8px 0 0; }
.vf-view-switch--rail { flex-direction: column; margin: 4px 0 10px; padding: 3px; border-radius: 16px; }
.vf-view-switch--rail .vf-view-switch__thumb { width: calc(100% - 6px); height: calc(50% - 3px); border-radius: 13px; }
body.vf-view-studio .vf-view-switch--rail .vf-view-switch__thumb { transform: translateY(100%); }
.vf-view-switch--rail button { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 13px; }
.vf-view-switch--rail button span { display: none; }
.vf-view-switch--rail button svg { width: 18px; height: 18px; }
.vf-view-switch--mobile button { padding: 6px 9px; }
.vf-view-switch--mobile button span { display: none; }

/* ---------- Левая рейка: иконки ---------- */
body.veo-generation-body:not(.mobile-version) .veo-left-sidebar {
    background: linear-gradient(180deg, rgba(247, 239, 222, 0.025), transparent) !important;
    border-right: 1px solid var(--vf-line) !important;
}
body.veo-generation-body .veo-left-icon-btn {
    border-radius: 14px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: background 0.25s, border-color 0.25s, transform 0.35s var(--vf-spring) !important;
}
body.veo-generation-body .veo-left-icon-btn:hover {
    background: var(--vf-surface-2) !important;
    border-color: var(--vf-line-2) !important;
    transform: translateY(-2px) scale(1.06);
}
body.veo-generation-body .veo-left-icon-btn:active { transform: scale(0.94); }
body.veo-generation-body .veo-left-sidebar-icon { background: rgba(247, 239, 222, 0.78) !important; transition: background 0.25s, transform 0.4s var(--vf-spring); }
body.veo-generation-body .veo-left-icon-btn:hover .veo-left-sidebar-icon { background: var(--vf-cta) !important; transform: rotate(-6deg) scale(1.08); }
/* единый набор линейных иконок (stroke 1.8, скруглённые концы) */
body.veo-generation-body .veo-left-icon-chats {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.6A8 8 0 1 1 21 12Z'/%3E%3Cpath d='M8.5 11h7M8.5 14.5h4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.6A8 8 0 1 1 21 12Z'/%3E%3Cpath d='M8.5 11h7M8.5 14.5h4'/%3E%3C/svg%3E") !important;
}
body.veo-generation-body .veo-left-new-chat .veo-new-chat-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3C/svg%3E") !important;
}
body.veo-generation-body .veo-left-icon-filter {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") !important;
}
body.veo-generation-body .veo-left-icon-chat-motion {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Z'/%3E%3Cpath d='M19 16v4M17 18h4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Z'/%3E%3Cpath d='M19 16v4M17 18h4'/%3E%3C/svg%3E") !important;
}
body.veo-generation-body .veo-left-icon-zoom {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6M11 8v6M8 11h6'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6M11 8v6M8 11h6'/%3E%3C/svg%3E") !important;
}
body.veo-generation-body .veo-tooltip,
body.veo-generation-body .veo-left-tooltip {
    background: rgba(14, 14, 14, 0.96) !important;
    color: var(--vf-ink) !important;
    border: 1px solid var(--vf-line-2) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    font-family: var(--vf-font);
}

/* ---------- Приветствие / пустой чат ---------- */
body.veo-generation-body .veo-chat-welcome,
body.veo-generation-body .veo-welcome {
    color: var(--vf-dim);
}
body.veo-generation-body .veo-chat-welcome strong,
body.veo-generation-body .veo-chat-welcome b { color: var(--vf-ink); }
body.veo-generation-body .veo-chat-title-text {
    color: var(--vf-mute) !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ---------- Область ввода (промпт) ---------- */
body.veo-generation-body .veo-prompt-wrapper { background: linear-gradient(180deg, transparent 0%, rgba(4, 4, 4, 0.55) 40%, rgba(4, 4, 4, 0.92) 100%) !important; }
body.veo-generation-body .veo-prompt-input-zone { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.veo-generation-body .veo-prompt-control-bar { flex-wrap: wrap; gap: 8px; }
body.veo-generation-body .veo-prompt-control-right { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
body.veo-generation-body .veo-scroll-to-bottom {
    background: rgba(247, 239, 222, 0.92) !important;
    color: var(--vf-on) !important;
    border: 0 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(236, 224, 198, 0.25) !important;
}
body.veo-generation-body .veo-prompt-box {
    position: relative;
    background: linear-gradient(180deg, rgba(247, 239, 222, 0.055), rgba(247, 239, 222, 0.025)) !important;
    border: 1px solid var(--vf-line-2) !important;
    border-radius: var(--vf-r-lg) !important;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(247, 239, 222, 0.02) inset,
        0 1px 0 rgba(247, 239, 222, 0.08) inset !important;
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    transition: border-color 0.35s var(--vf-ease), box-shadow 0.45s var(--vf-ease);
}
body.veo-generation-body .veo-prompt-box:focus-within {
    border-color: var(--vf-line-3) !important;
    box-shadow:
        0 24px 90px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(247, 239, 222, 0.045),
        0 0 60px var(--vf-halo) !important;
}
/* бегущий свет по рамке при фокусе */
body.veo-generation-body .veo-prompt-box::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--vf-spin, 0deg), transparent 0 70%, rgba(247, 239, 222, 0.9) 85%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
    animation: vf-spin 4.5s linear infinite;
}
body.veo-generation-body .veo-prompt-box:focus-within::before { opacity: 0.9; }
@property --vf-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes vf-spin { to { --vf-spin: 360deg; } }

body.veo-generation-body .veo-prompt-input {
    background: transparent !important;
    color: var(--vf-ink) !important;
    font-family: var(--vf-font);
    font-size: 15px;
    line-height: 1.55;
    caret-color: #f7efde;
}
body.veo-generation-body .veo-prompt-input::placeholder { color: var(--vf-mute) !important; }
body.veo-generation-body .veo-prompt-char-count { color: var(--vf-mute) !important; font-variant-numeric: tabular-nums; }

body.veo-generation-body .veo-prompt-control-bar { border-top: 1px solid var(--vf-line) !important; background: transparent !important; }

/* кнопки панели ввода: загрузка, Enter, автоотправка, микрофон */
body.veo-generation-body .veo-photo-upload-btn,
body.veo-generation-body .veo-prompt-action,
body.veo-generation-body .veo-prompt-enter-btn {
    background: var(--vf-surface) !important;
    border: 1px solid var(--vf-line) !important;
    color: var(--vf-dim) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.35s var(--vf-spring) !important;
}
body.veo-generation-body .veo-photo-upload-btn:hover,
body.veo-generation-body .veo-prompt-action:hover,
body.veo-generation-body .veo-prompt-enter-btn:hover {
    background: var(--vf-surface-3) !important;
    border-color: var(--vf-line-3) !important;
    color: var(--vf-ink) !important;
    transform: translateY(-2px);
}
body.veo-generation-body .veo-prompt-enter-btn[aria-pressed="true"],
body.veo-generation-body .veo-prompt-action[aria-pressed="true"] {
    background: rgba(247, 239, 222, 0.16) !important;
    border-color: var(--vf-gold) !important;
    color: var(--vf-ink) !important;
    box-shadow: 0 0 22px rgba(236, 224, 198, 0.22) !important;
}
body.veo-generation-body .veo-prompt-tokens {
    color: var(--vf-ink) !important;
    background: var(--vf-surface-2) !important;
    border: 1px solid var(--vf-line) !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* главная кнопка — белая «звезда» */
body.veo-generation-body .veo-prompt-send {
    position: relative;
    overflow: hidden;
    background: var(--vf-cta) !important;
    color: var(--vf-on) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--vf-font);
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: 0 0 0 1px rgba(236, 224, 198, 0.5), 0 8px 30px rgba(236, 224, 198, 0.22), 0 0 40px var(--vf-halo-strong) !important;
    transition: transform 0.4s var(--vf-spring), box-shadow 0.4s !important;
}
body.veo-generation-body .veo-prompt-send:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0 0 1px #f7efde, 0 12px 44px rgba(236, 224, 198, 0.34), 0 0 70px var(--vf-halo-strong) !important;
}
body.veo-generation-body .veo-prompt-send:active:not(:disabled) { transform: scale(0.96); }
body.veo-generation-body .veo-prompt-send::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(247, 239, 222, 0.85), transparent);
    transform: skewX(-18deg);
    animation: vf-sheen 4.2s var(--vf-ease) infinite;
    pointer-events: none;
}
@keyframes vf-sheen { 0%, 55% { left: -60%; } 100% { left: 140%; } }
body.veo-generation-body .veo-prompt-send:disabled { opacity: 0.4; filter: grayscale(1); }
body.veo-generation-body .veo-prompt-send:disabled::after { display: none; }
.vf-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    transform: scale(0);
    animation: vf-ripple 0.7s var(--vf-ease) forwards;
    pointer-events: none;
}
@keyframes vf-ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Правая панель настроек ---------- */
body.veo-generation-body:not(.mobile-version) .veo-right-settings {
    background: linear-gradient(180deg, rgba(247, 239, 222, 0.03), rgba(247, 239, 222, 0.01)) !important;
    border-left: 1px solid var(--vf-line) !important;
}
body.veo-generation-body .veo-settings-section {
    background: var(--vf-surface) !important;
    border: 1px solid var(--vf-line) !important;
    border-radius: var(--vf-r) !important;
    box-shadow: none !important;
    overflow: visible;
    transition: border-color 0.3s;
}
body.veo-generation-body .veo-settings-section:hover { border-color: var(--vf-line-2) !important; }
body.veo-generation-body .veo-settings-section-header {
    border: 0 !important;
    box-shadow: none !important;
    color: var(--vf-dim) !important;
    background: transparent !important;
    letter-spacing: 0.16em;
    font-size: 0.68rem !important;
    font-weight: 700;
    text-transform: uppercase;
}
body.veo-generation-body .veo-settings-label { color: var(--vf-mute) !important; font-size: 0.72rem; letter-spacing: 0.04em; }
body.veo-generation-body .veo-custom-select-trigger {
    background: rgba(247, 239, 222, 0.045) !important;
    border: 1px solid var(--vf-line) !important;
    border-radius: 14px !important;
    color: var(--vf-ink) !important;
    box-shadow: none !important;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s !important;
}
body.veo-generation-body .veo-custom-select-trigger:hover:not(:disabled) { border-color: var(--vf-line-3) !important; background: var(--vf-surface-2) !important; }
body.veo-generation-body .veo-custom-select-trigger[aria-expanded="true"] { border-color: var(--vf-gold) !important; box-shadow: 0 0 0 3px rgba(247, 239, 222, 0.07) !important; }
body.veo-generation-body .veo-custom-select-chevron { stroke: var(--vf-dim); transition: transform 0.35s var(--vf-spring); }
body.veo-generation-body .veo-custom-select-trigger[aria-expanded="true"] .veo-custom-select-chevron { transform: rotate(180deg); }
body.veo-generation-body .veo-custom-select-lock-icon { color: var(--vf-mute) !important; }
body.veo-generation-body .veo-custom-select-dropdown,
body.nano-banana-page .veo-custom-select-dropdown {
    background: rgba(11, 11, 11, 0.97) !important;
    border: 1px solid var(--vf-line-2) !important;
    border-radius: var(--vf-r) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75), 0 0 60px rgba(247, 239, 222, 0.03) !important;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    animation: vf-pop 0.35s var(--vf-spring);
}
@keyframes vf-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
body.veo-generation-body .veo-custom-select-dropdown .veo-custom-select-option,
body.nano-banana-page .veo-custom-select-dropdown .veo-custom-select-option {
    color: var(--vf-dim) !important;
    border-radius: 11px !important;
    transition: background 0.2s, color 0.2s, transform 0.25s var(--vf-ease) !important;
}
body.veo-generation-body .veo-custom-select-dropdown .veo-custom-select-option:hover,
body.nano-banana-page .veo-custom-select-dropdown .veo-custom-select-option:hover {
    background: var(--vf-surface-3) !important;
    color: var(--vf-ink) !important;
    transform: translateX(3px);
}
body.veo-generation-body .veo-custom-select-dropdown .veo-custom-select-option.selected,
body.nano-banana-page .veo-custom-select-dropdown .veo-custom-select-option.selected {
    background: rgba(247, 239, 222, 0.1) !important;
    color: var(--vf-ink) !important;
    box-shadow: inset 0 0 0 1px var(--vf-line-3) !important;
}
body.nano-banana-page .veo-custom-select-dropdown .veo-custom-select-option.selected::after {
    background: var(--vf-cta) !important;
    box-shadow: 0 0 12px #f7efde !important;
    border-color: var(--vf-on) !important;
}
body.veo-generation-body .veo-settings-footer { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.veo-generation-body .veo-settings-btn {
    background: var(--vf-surface) !important;
    border: 1px solid var(--vf-line) !important;
    color: var(--vf-dim) !important;
    border-radius: 14px !important;
    transition: all 0.25s !important;
}
body.veo-generation-body .veo-settings-btn:hover { color: var(--vf-ink) !important; border-color: var(--vf-line-3) !important; background: var(--vf-surface-3) !important; }
body.veo-generation-body input[type="range"] { accent-color: #f7efde; }

/* ---------- Сообщения чата и результаты ---------- */
body.veo-generation-body .veo-chat-message--user .veo-chat-message-bubble {
    background: var(--vf-surface-2) !important;
    border: 1px solid var(--vf-line) !important;
    border-radius: 20px 20px 6px 20px !important;
    color: var(--vf-ink) !important;
    box-shadow: none !important;
}
body.veo-generation-body .veo-chat-message--assistant .veo-chat-message-bubble {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--vf-text) !important;
}
body.veo-generation-body .veo-video-wrapper,
body.veo-generation-body .veo-video-wrapper--image {
    border-radius: var(--vf-r) !important;
    border: 1px solid var(--vf-line-2) !important;
    background: #060606 !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 80px var(--vf-halo) !important;
    overflow: hidden;
    transition: transform 0.6s var(--vf-ease), box-shadow 0.6s var(--vf-ease);
}
body.veo-generation-body .veo-chat-result-img,
body.veo-generation-body .veo-video-wrapper img,
body.veo-generation-body .veo-video-wrapper video { transition: transform 0.9s var(--vf-ease); }
body.veo-generation-body .veo-video-wrapper:hover { transform: translateY(-3px); box-shadow: 0 40px 110px rgba(0, 0, 0, 0.7), 0 0 110px var(--vf-halo-strong) !important; }
body.veo-generation-body .veo-video-wrapper:hover img { transform: scale(1.025); }
body.veo-generation-body .veo-result-with-toolbar--arriving .veo-video-wrapper { animation: vf-arrive 1s var(--vf-ease); }
@keyframes vf-arrive {
    from { opacity: 0; transform: scale(0.94) translateY(14px); filter: blur(14px) brightness(1.8); }
}
body.veo-generation-body .veo-result-toolbar {
    background: rgba(10, 10, 10, 0.7) !important;
    border: 1px solid var(--vf-line-2) !important;
    border-radius: 999px !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
body.veo-generation-body .veo-result-toolbar button { color: var(--vf-dim) !important; transition: color 0.2s, transform 0.3s var(--vf-spring); }
body.veo-generation-body .veo-result-toolbar button:hover { color: var(--vf-ink) !important; transform: translateY(-2px) scale(1.12); }
body.veo-generation-body .veo-chat-message-meta { color: var(--vf-mute) !important; font-size: 0.7rem; }

/* генерация: бело-лунный шиммер вместо фиолетового */
body.veo-generation-body .veo-generating-placeholder {
    background: #060606 !important;
    border: 1px solid var(--vf-line-2) !important;
    border-radius: var(--vf-r) !important;
}
body.veo-generation-body .veo-generating-placeholder-shimmer {
    background: linear-gradient(110deg, transparent 20%, rgba(247, 239, 222, 0.09) 50%, transparent 80%) !important;
}
body.veo-generation-body .veo-generating-loader-ring {
    border-color: rgba(247, 239, 222, 0.12) !important;
    border-top-color: #f7efde !important;
    filter: drop-shadow(0 0 10px rgba(236, 224, 198, 0.6));
}
body.veo-generation-body .veo-generating-badge,
body.veo-generation-body .veo-generating-caption { color: var(--vf-dim) !important; }
body.veo-generation-body .veo-generating-dots span { background: var(--vf-cta) !important; }

/* ---------- Панель чатов / фильтры / модалки ---------- */
body.veo-generation-body .veo-chats-panel,
body.veo-generation-body .veo-video-catalog-panel,
body.veo-generation-body .veo-chat-zoom-panel {
    background: rgba(9, 9, 9, 0.94) !important;
    border: 1px solid var(--vf-line-2) !important;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7) !important;
    color: var(--vf-text);
}
body.veo-generation-body .veo-chats-panel-backdrop,
body.veo-generation-body .veo-video-catalog-backdrop { background: rgba(0, 0, 0, 0.55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.veo-generation-body .veo-video-catalog-btn--primary,
body.veo-generation-body .veo-chats-panel-new-btn {
    background: var(--vf-cta) !important;
    color: var(--vf-on) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 700;
}
body.veo-generation-body .veo-chats-panel-search-input,
body.veo-generation-body .veo-video-catalog-input {
    background: var(--vf-surface) !important;
    border: 1px solid var(--vf-line) !important;
    border-radius: 14px !important;
    color: var(--vf-ink) !important;
}
body.veo-generation-body .veo-chats-panel-search-input:focus,
body.veo-generation-body .veo-video-catalog-input:focus { border-color: var(--vf-gold) !important; outline: none; box-shadow: 0 0 0 3px rgba(247, 239, 222, 0.07); }

/* скроллбары */
body.veo-generation-body * { scrollbar-width: thin; scrollbar-color: rgba(247, 239, 222, 0.22) transparent; }
body.veo-generation-body *::-webkit-scrollbar { width: 6px; height: 6px; }
body.veo-generation-body *::-webkit-scrollbar-thumb { background: rgba(247, 239, 222, 0.2); border-radius: 99px; }
body.veo-generation-body *::-webkit-scrollbar-thumb:hover { background: rgba(247, 239, 222, 0.4); }
body.veo-generation-body ::selection { background: var(--vf-cta); color: var(--vf-on); }

/* ==========================================================================
   ВИД «СТУДИЯ» (десктоп): панель управления слева, холст справа
   ========================================================================== */
@media (min-width: 980px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-desktop-layout {
        display: grid !important;
        grid-template-columns: 60px minmax(360px, 430px) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0 18px;
        padding-right: 18px;
    }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-left-sidebar { grid-column: 1; grid-row: 1 / 3; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-right-settings {
        grid-column: 2;
        grid-row: 1;
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        border: 0 !important;
        background: transparent !important;
        position: relative;
        padding-top: 14px;
    }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-right-settings .veo-settings-scroll { max-height: none; overflow: visible; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-center-area,
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-body { display: contents !important; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-wrapper {
        grid-column: 2;
        grid-row: 2;
        position: relative !important;
        inset: auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 6px 0 14px !important;
        margin: 0 !important;
        align-self: stretch;
        transform: none !important;
    }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-stack,
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-box { height: 100%; min-height: 0; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-area { height: 100%; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-box { flex-direction: column; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-input-zone { flex: 1; min-height: 140px; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-input { height: 100% !important; max-height: none !important; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-messages-wrap {
        grid-column: 3;
        grid-row: 1 / 3;
        position: relative !important;
        margin: 14px 0 14px;
        border: 1px solid var(--vf-line) !important;
        border-radius: var(--vf-r-lg) !important;
        background: radial-gradient(80% 60% at 50% 0%, rgba(247, 239, 222, 0.045), transparent 70%), rgba(247, 239, 222, 0.015) !important;
        overflow: hidden;
        min-width: 0;
    }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-messages { padding: 22px 26px 40px; }
    body.vf-view-studio .veo-chat-title-bar { display: none !important; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-right-settings .veo-settings-scroll {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 0 !important;
    }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-settings-scroll > .veo-settings-section { margin: 0 !important; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) #nanoBananaSettingsModel { grid-column: 1 / -1; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-settings-scroll > .veo-settings-section:not(#nanoBananaSettingsModel) { grid-column: 1 / -1; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-settings-footer,
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-right-settings > div:last-child:not(.veo-settings-scroll) {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px;
        padding: 8px 0 0 !important;
        background: transparent !important;
        border: 0 !important;
        position: static !important;
    }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-right-settings .veo-settings-btn { padding: 8px 10px !important; font-size: 0.78rem; flex: 1; }
    body.vf-view-studio .veo-chat-message--user .veo-chat-message-bubble,
    body.vf-view-studio .veo-chat-message--user .veo-chat-message-user-content { border-radius: 14px !important; }
}
body.vf-view-studio .veo-chat-message--assistant { max-width: 100% !important; }
body.vf-view-studio .veo-video-wrapper--image,
body.vf-view-studio .veo-video-wrapper { margin-inline: auto; max-width: min(100%, calc(78vh / var(--vf-z, 1))); }

/* вид «Студия» на телефоне: результаты — полноширинные карточки, док остаётся */
body.vf-view-studio.mobile-version .veo-chat-message--user { opacity: 0.85; }
body.vf-view-studio.mobile-version .veo-chat-messages { padding-inline: 10px; }
body.vf-view-studio.mobile-version .veo-video-wrapper { max-width: 100%; border-radius: 22px !important; }

/* ==========================================================================
   Телефон: хедер, панель модели, док ввода
   ========================================================================== */
body.veo-generation-body.mobile-version .veo-mobile-chat-toolbar {
    background: linear-gradient(180deg, rgba(4, 4, 4, 0.9), rgba(4, 4, 4, 0.55)) !important;
    border-bottom: 1px solid var(--vf-line) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
body.veo-generation-body.mobile-version .veo-mobile-toolbar-btn,
body.veo-generation-body.mobile-version .veo-mobile-toolbar-model-pill {
    background: var(--vf-surface) !important;
    border: 1px solid var(--vf-line) !important;
    color: var(--vf-ink) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
body.veo-generation-body.mobile-version .veo-mobile-toolbar-btn:active { transform: scale(0.92); }
body.veo-generation-body.mobile-version .veo-mobile-input-dock,
body.veo-generation-body.mobile-version .veo-mobile-dock-collapsible {
    background: transparent !important;
}
body.veo-generation-body.mobile-version .veo-mobile-dock-capsule {
    background: linear-gradient(180deg, rgba(247, 239, 222, 0.09), rgba(247, 239, 222, 0.04)) !important;
    border: 1px solid var(--vf-line-2) !important;
    border-radius: 999px !important;
    color: var(--vf-dim) !important;
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6), 0 0 40px var(--vf-halo) !important;
}
body.veo-generation-body.mobile-version .veo-mobile-keyboard-fab {
    background: var(--vf-cta) !important;
    color: var(--vf-on) !important;
    border: 0 !important;
    box-shadow: 0 10px 40px rgba(236, 224, 198, 0.28), 0 0 50px var(--vf-halo-strong) !important;
}
body.veo-generation-body.mobile-version .veo-mobile-prompt-tabs {
    background: var(--vf-surface) !important;
    border: 1px solid var(--vf-line) !important;
    border-radius: 999px !important;
}
body.veo-generation-body.mobile-version .veo-mobile-prompt-tab { color: var(--vf-dim) !important; border-radius: 999px !important; transition: all 0.3s var(--vf-ease); }
body.veo-generation-body.mobile-version .veo-mobile-prompt-tab--active { background: var(--vf-cta) !important; color: var(--vf-on) !important; box-shadow: 0 0 20px rgba(236, 224, 198, 0.25); }
body.veo-generation-body.mobile-version .veo-mobile-settings-tile {
    background: var(--vf-surface) !important;
    border: 1px solid var(--vf-line) !important;
    border-radius: var(--vf-r) !important;
    color: var(--vf-ink) !important;
}
body.veo-generation-body.mobile-version .veo-mobile-settings-tile:active { transform: scale(0.97); background: var(--vf-surface-3) !important; }
body.veo-generation-body.mobile-version .veo-mobile-onboarding-pop-inner {
    background: rgba(14, 14, 14, 0.95) !important;
    border: 1px solid var(--vf-line-2) !important;
    color: var(--vf-ink) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
body.veo-generation-body.mobile-version .veo-mobile-onboarding-pop-pointer { background: rgba(14, 14, 14, 0.95) !important; border-color: var(--vf-line-2) !important; }

@media (prefers-reduced-motion: reduce) {
    body.veo-generation-body * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* кнопка «создать» в студии — на всю ширину отдельной строкой */
body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-control-bar { padding: 10px 12px 12px !important; }
body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-control-left { flex: 1 1 auto; }
body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-send-wrap { flex: 1 1 100%; order: 9; display: block; }
body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-send { width: 100%; height: 48px; justify-content: center; }
body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-tokens { margin-left: auto; }
body.veo-generation-body .veo-photo-upload-counter { background: var(--vf-cta) !important; color: var(--vf-on) !important; border: 0 !important; box-shadow: 0 0 10px rgba(236, 224, 198, .4); }
body.veo-generation-body .veo-photo-upload-btn svg, body.veo-generation-body .veo-photo-upload-img-icon { color: var(--vf-ink) !important; }

/* нейтрализация остатков фиолета из nano-banana-overrides.css */
body.nano-banana-page .veo-chat-result-image-wrap { background: radial-gradient(ellipse 80% 65% at 50% 18%, rgba(247, 239, 222, 0.08) 0%, transparent 60%), #060606 !important; }
body.veo-generation-body .veo-ai-icon-badge { background: linear-gradient(145deg, #1b1b22, #0a0a0a) !important; box-shadow: 0 0 0 1px var(--vf-line-2) inset, 0 4px 18px rgba(247, 239, 222, 0.06) !important; }
body.veo-generation-body .vf-nano-ref-reorder-tip { background: var(--vf-surface-2) !important; border: 1px solid var(--vf-line-2) !important; box-shadow: none !important; color: var(--vf-dim) !important; }
body.veo-generation-body .veo-photo-upload-btn .veo-photo-upload-img-svg *,
body.veo-generation-body .veo-photo-upload-btn svg * { stroke: currentColor !important; }
body.veo-generation-body .veo-photo-upload-btn { color: var(--vf-ink) !important; }
/* студия: компоновка левой колонки */
@media (min-width: 980px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-right-settings { padding: 14px 0 0 0 !important; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-control-left { flex: 0 0 auto; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-control-bar { height: auto !important; min-height: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 8px; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-control-right { display: contents !important; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-message--user { width: 100%; text-align: left; display: flex; justify-content: flex-start; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-message--user { align-self: flex-start; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-message--user .veo-chat-message-bubble { background: transparent !important; border: 0 !important; padding-left: 2px !important; color: var(--vf-dim) !important; font-size: 0.85rem; }
}

@media (min-width: 980px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) #veoScrollToBottomBtn { display: none !important; }
}
body.vf-view-studio .veo-video-block { display: flex; flex-direction: column; align-items: center; }
body.vf-view-studio .veo-video-block .veo-chat-message-meta { align-self: center; }
body.veo-generation-body .veo-photo-upload-btn .veo-photo-upload-img-icon * { stroke: var(--vf-ink) !important; fill: none; }
body.veo-generation-body .veo-photo-upload-btn .veo-photo-upload-img-icon { filter: none !important; }

/* ==========================================================================
   Модалки, плашки и мелочи — всё в чёрно-белую гамму
   ========================================================================== */
body.veo-generation-body .veo-confirm-modal,
body.veo-generation-body .veo-content-filter-modal,
body.veo-generation-body .veo-generated-modal,
body.veo-generation-body .veo-attachment-crop-modal,
body.veo-generation-body .veo-gallery-picker-modal {
    background: rgba(10, 10, 10, 0.96) !important;
    border: 1px solid var(--vf-line-2) !important;
    border-radius: var(--vf-r-lg) !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8), 0 0 80px rgba(247, 239, 222, 0.03) !important;
    color: var(--vf-text) !important;
}
body.veo-generation-body .veo-confirm-icon,
body.veo-generation-body .veo-content-filter-icon {
    background: var(--vf-surface-3) !important;
    color: var(--vf-ink) !important;
    border-color: var(--vf-line-2) !important;
    box-shadow: none !important;
}
body.veo-generation-body .veo-content-filter-label,
body.veo-generation-body .veo-video-pick-desc,
body.veo-generation-body .veo-attachment-crop-desc,
body.veo-generation-body #wanBBoxEditorHint { color: var(--vf-dim) !important; }
body.veo-generation-body .veo-content-filter-list,
body.veo-generation-body .veo-gallery-picker-footer { border-color: var(--vf-line) !important; }
body.veo-generation-body .veo-notify-btn-primary,
body.veo-generation-body .veo-content-filter-ok,
body.veo-generation-body .veo-gallery-picker-apply,
body.veo-generation-body .veo-attachment-crop-apply {
    background: var(--vf-cta) !important;
    color: var(--vf-on) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 700;
    box-shadow: 0 8px 28px rgba(236, 224, 198, 0.18) !important;
    transition: transform 0.3s var(--vf-spring), box-shadow 0.3s !important;
}
body.veo-generation-body .veo-notify-btn-primary:hover,
body.veo-generation-body .veo-gallery-picker-apply:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(236, 224, 198, 0.3) !important; }
body.veo-generation-body #veoConfirmAutoSendCheckbox { accent-color: #f7efde; border-color: var(--vf-line-3) !important; }

/* мобильные пилюли хедера и FAB прокрутки */
body.veo-generation-body .vf-mobile-balance-pill,
body.veo-generation-body .mobile-audio-toggle-btn,
body.veo-generation-body .veo-mobile-header-avatar {
    background: var(--vf-surface) !important;
    border: 1px solid var(--vf-line-2) !important;
    box-shadow: none !important;
    color: var(--vf-ink) !important;
}
body.veo-generation-body .vf-media-mobile-scroll-down-fab {
    background: rgba(247, 239, 222, 0.94) !important;
    color: var(--vf-on) !important;
    border: 0 !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 36px rgba(236, 224, 198, 0.25) !important;
}
body.veo-generation-body .vf-scroll-down-fab-icon { color: var(--vf-on) !important; border-color: var(--vf-on) !important; }
body.veo-generation-body .veo-mobile-toolbar-model-pill-chevron { color: var(--vf-dim) !important; }
body.veo-generation-body .veo-mobile-onboarding-pop-dismiss { background: var(--vf-surface-3) !important; color: var(--vf-ink) !important; }
body.veo-generation-body .vf-gallery-view-toolbar { background: rgba(10, 10, 10, 0.7) !important; border: 1px solid var(--vf-line-2) !important; backdrop-filter: blur(18px); }

/* мобильный фон: чистый чёрный космос */
body.veo-generation-body.mobile-version,
body.veo-generation-body.mobile-version .app-container,
body.veo-generation-body.mobile-version .veo-main { background-color: var(--vf-bg) !important; background-image: none !important; }
body.veo-generation-body .veo-ai-icon-badge,
body.veo-generation-body .veo-mobile-toolbar-model-badge,
body.veo-generation-body .veo-nano-banana-toolbar-badge { background: linear-gradient(145deg, #202028, #0a0a0a) !important; border: 1px solid var(--vf-line-2) !important; box-shadow: 0 0 18px rgba(247, 239, 222, 0.08) !important; }
body.veo-generation-body .vf-currency-trigger.vf-mobile-balance-pill { border-color: var(--vf-line-2) !important; background: var(--vf-surface-2) !important; }
body.veo-generation-body .veo-nebula-orb { background: radial-gradient(circle, rgba(247, 239, 222, 0.07), transparent 65%) !important; }
body.veo-generation-body .veo-background-animation::before,
body.veo-generation-body .veo-background-animation::after { background: none !important; }

/* повышенная специфичность: перебить фоны из mobile/nano CSS */
html body.veo-generation-body.veo-generation-body { background: var(--vf-bg) !important; background-color: var(--vf-bg) !important; }
html body.veo-generation-body.veo-generation-body .veo-background-animation {
    background-color: var(--vf-bg) !important;
    background-image:
        radial-gradient(60% 45% at 50% 108%, var(--vf-halo) 0%, transparent 70%),
        radial-gradient(40% 30% at 85% -5%, hsla(var(--vf-tint), 20%, 92%, 0.07) 0%, transparent 70%) !important;
}
html body.veo-generation-body.veo-generation-body .veo-confirm-overlay,
html body.veo-generation-body.veo-generation-body .veo-content-filter-overlay,
html body.veo-generation-body.veo-generation-body .veo-notify-overlay { background: rgba(0, 0, 0, 0.7) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------- Мобильный док ввода: тёмное матовое стекло, белые акценты ---------- */
html body.veo-generation-body.mobile-version .veo-mobile-input-dock .veo-prompt-box {
    background: rgba(11, 11, 11, 0.9) !important;
    -webkit-backdrop-filter: blur(30px) saturate(100%);
    backdrop-filter: blur(30px) saturate(100%);
}
html body.veo-generation-body.mobile-version .veo-mobile-dock-collapsible-wrap { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body.veo-generation-body.mobile-version .veo-mobile-prompt-tab:not(.veo-mobile-prompt-tab--active) {
    background: var(--vf-surface-2) !important;
    border-color: var(--vf-line-2) !important;
    color: var(--vf-dim) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body.veo-generation-body.mobile-version .veo-mobile-prompt-tab--active { background: var(--vf-cta) !important; border-color: var(--vf-gold) !important; color: var(--vf-on) !important; }
html body.veo-generation-body.mobile-version .veo-prompt-send {
    background: var(--vf-cta) !important;
    border: 0 !important;
    color: var(--vf-on) !important;
    box-shadow: 0 6px 24px rgba(236, 224, 198, 0.3) !important;
}
html body.veo-generation-body.mobile-version .veo-prompt-send svg,
html body.veo-generation-body.mobile-version .veo-prompt-send * { color: var(--vf-on) !important; stroke: var(--vf-on); }
html body.veo-generation-body.mobile-version .veo-mobile-toolbar-settings { color: var(--vf-ink) !important; }
html body.veo-generation-body.mobile-version .veo-mobile-dock-collapsible::before {
    background: linear-gradient(180deg, rgba(4, 4, 4, 0.3) 0%, rgba(4, 4, 4, 0.9) 100%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(100%) !important;
    backdrop-filter: blur(16px) saturate(100%) !important;
    border-top: 1px solid var(--vf-line) !important;
}
html body.veo-generation-body.mobile-version .veo-prompt-swipe-handle::after {
    background: rgba(247, 239, 222, 0.38) !important;
    box-shadow: none !important;
    height: 4px !important;
    border-radius: 99px !important;
}
html body.veo-generation-body .veo-prompt-box::after,
html body.veo-generation-body .veo-prompt-control-bar::before,
html body.veo-generation-body .veo-photo-upload-limit::before { background: none !important; }
html body.veo-generation-body.mobile-version .veo-prompt-send.veo-prompt-send--mobile-icon {
    background: var(--vf-cta) !important;
    border: 0 !important;
    color: var(--vf-on) !important;
    box-shadow: 0 6px 24px rgba(236, 224, 198, 0.3) !important;
}
html body.veo-generation-body .veo-photo-upload-dropdown {
    background: rgba(11, 11, 11, 0.98) !important;
    border: 1px solid var(--vf-line-2) !important;
    border-radius: var(--vf-r) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75) !important;
}
html body.veo-generation-body .veo-photo-upload-option { color: var(--vf-dim) !important; border-radius: 11px; transition: background 0.2s, color 0.2s; }
html body.veo-generation-body .veo-photo-upload-option:hover { background: var(--vf-surface-3) !important; color: var(--vf-ink) !important; }
html body.veo-generation-body.mobile-version #submitButtonDesktop.veo-prompt-send {
    background: var(--vf-cta) !important;
    border: 0 !important;
    color: var(--vf-on) !important;
}
html body.veo-generation-body #veoPhotoUploadCounter,
html body.veo-generation-body .veo-photo-upload-counter { background: var(--vf-cta) !important; color: var(--vf-on) !important; border: 0 !important; }
html body.veo-generation-body #veoPhotoUploadBtn,
html body.veo-generation-body #veoPhotoUploadBtn * { color: var(--vf-ink) !important; }
html body.veo-generation-body #veoPhotoUploadBtn svg *:not(.veo-photo-upload-counter) { stroke: var(--vf-ink) !important; }
html body.veo-generation-body .veo-prompt-cost-badge,
html body.veo-generation-body .veo-prompt-tokens #costDisplayDesktop { color: var(--vf-ink) !important; }
@media (min-width: 980px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-desktop-layout { grid-template-rows: auto minmax(260px, 1fr); }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-right-settings {
        max-height: calc(calc(100vh / var(--vf-z, 1)) - 54px - 290px);
        max-height: calc(calc(100dvh / var(--vf-z, 1)) - 54px - 290px);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable;
        padding-right: 4px !important;
    }
}

html body.veo-generation-body #vfMobileBalanceTrigger,
html body.veo-generation-body #mobileAudioMuteToggle,
html body.veo-generation-body #mobileUserAvatar {
    background: var(--vf-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--vf-line-2) !important;
    box-shadow: none !important;
}
html body.veo-generation-body .veo-ai-icon-badge,
html body.veo-generation-body .veo-mobile-toolbar-model-badge {
    background-image: linear-gradient(145deg, #23232b, #0a0a0a) !important;
    background-color: #0b0b0e !important;
}

/* «Студия» на телефоне: промпт — подпись над карточкой, карточка — крупная и светящаяся */
html body.vf-view-studio.mobile-version .veo-chat-message--user { align-self: flex-start; width: 100%; display: flex; justify-content: flex-start; margin: 22px 0 8px; }
html body.vf-view-studio.mobile-version .veo-chat-message--user .veo-chat-message-bubble,
html body.vf-view-studio.mobile-version .veo-chat-message--user .veo-chat-message-user-content {
    background: none !important;
    border: 0 !important;
    padding: 0 6px !important;
    color: var(--vf-dim) !important;
    font-size: 0.8rem !important;
    text-align: left;
    max-width: 100%;
}
html body.vf-view-studio.mobile-version .veo-chat-message--user .veo-chat-message-text::before { content: "✦ "; color: var(--vf-ink); opacity: 0.8; }
html body.vf-view-studio.mobile-version .veo-video-wrapper { box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 90px var(--vf-halo-strong) !important; }
html body.vf-view-studio.mobile-version .veo-chat-messages { padding-inline: 12px; }

/* ==========================================================================
   ПУСТОЕ СОСТОЯНИЕ («герой»): орбитальная эмблема, заголовок, идеи промптов
   ========================================================================== */
body.veo-generation-body .veo-welcome-chat {
    position: relative;
    max-width: 640px;
    margin: clamp(24px, calc(9vh / var(--vf-z, 1)), 96px) auto 0;
    padding: 0 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: vf-hero-in 1.1s var(--vf-ease) both;
}
@keyframes vf-hero-in { from { opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(10px); } }
body.veo-generation-body .veo-welcome-chat-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.vf-orbit {
    position: relative;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
}
.vf-orbit::before {
    content: "";
    position: absolute;
    inset: -34%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--vf-halo-strong) 0%, transparent 62%);
    animation: vf-breathe 5.5s ease-in-out infinite;
}
.vf-orbit__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(247, 239, 222, 0.16);
}
.vf-orbit__ring--a { transform: rotateX(68deg) rotateZ(0deg); animation: vf-orbit-a 14s linear infinite; }
.vf-orbit__ring--b { inset: -14%; border-color: rgba(247, 239, 222, 0.09); transform: rotateX(68deg) rotateY(18deg); animation: vf-orbit-b 22s linear infinite reverse; }
.vf-orbit__ring--a::after,
.vf-orbit__ring--b::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--vf-cta);
    box-shadow: 0 0 12px 3px rgba(236, 224, 198, 0.8);
}
@keyframes vf-orbit-a { to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes vf-orbit-b { to { transform: rotateX(68deg) rotateY(18deg) rotateZ(360deg); } }
@keyframes vf-breathe { 50% { transform: scale(1.14); opacity: 0.7; } }
.vf-orbit .veo-welcome-chat-icon {
    position: relative;
    z-index: 2;
    width: 84px !important;
    height: 84px !important;
    border-radius: 26px !important;
    animation: vf-float 6s ease-in-out infinite !important;
}
@keyframes vf-float { 50% { transform: translateY(-7px) rotate(-1.5deg); } }
body.veo-generation-body .veo-welcome-chat-title {
    margin: 0;
    font-family: var(--vf-font);
    font-size: clamp(1.7rem, calc(3.4vw / var(--vf-z, 1)), 2.5rem) !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    background: linear-gradient(180deg, #f7efde 30%, rgba(247, 239, 222, 0.5));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
body.veo-generation-body .veo-welcome-chat-desc {
    margin: 0;
    max-width: 520px;
    color: var(--vf-dim) !important;
    font-size: 0.95rem;
    line-height: 1.6;
}
body.veo-generation-body .veo-welcome-chat-desc strong { color: var(--vf-ink); }
body.veo-generation-body .veo-welcome-chat-action {
    margin: 0;
    max-width: 480px;
    color: var(--vf-mute) !important;
    font-size: 0.82rem;
    line-height: 1.55;
}
body.veo-generation-body .veo-welcome-chat-hint {
    margin: 4px 0 0;
    color: var(--vf-mute) !important;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.vf-ideas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 600px;
    margin-top: 6px;
}
.vf-ideas__chip {
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--vf-line-2);
    background: var(--vf-surface);
    color: var(--vf-dim);
    font: 500 0.8rem/1.2 var(--vf-font);
    cursor: pointer;
    opacity: 0;
    animation: vf-chip-in 0.7s var(--vf-ease) forwards;
    transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.4s var(--vf-spring), box-shadow 0.3s;
}
.vf-ideas__chip:hover {
    color: var(--vf-on);
    background: var(--vf-cta);
    border-color: var(--vf-gold);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 30px rgba(236, 224, 198, 0.25);
}
.vf-ideas__chip:active { transform: scale(0.96); }
@keyframes vf-chip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   АНИМАЦИЯ ГЕНЕРАЦИИ — «рождение звезды»
   ========================================================================== */
body.veo-generation-body .veo-generating-placeholder {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #060606 !important;
    border: 1px solid var(--vf-line-2) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 90px var(--vf-halo) !important;
}
body.veo-generation-body .veo-generating-placeholder::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 22%, #f7efde, transparent 60%),
        radial-gradient(1px 1px at 68% 14%, rgba(247, 239, 222, 0.9), transparent 60%),
        radial-gradient(1.6px 1.6px at 84% 62%, #f7efde, transparent 60%),
        radial-gradient(1px 1px at 32% 78%, rgba(247, 239, 222, 0.8), transparent 60%),
        radial-gradient(1.2px 1.2px at 52% 46%, rgba(247, 239, 222, 0.7), transparent 60%),
        radial-gradient(1px 1px at 91% 90%, rgba(247, 239, 222, 0.9), transparent 60%),
        radial-gradient(1.2px 1.2px at 6% 64%, rgba(247, 239, 222, 0.8), transparent 60%);
    background-size: 260px 260px;
    animation: vf-stardrift 26s linear infinite;
    opacity: 0.75;
}
@keyframes vf-stardrift { to { background-position: 260px 520px; } }
body.veo-generation-body .veo-generating-placeholder::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 239, 222, 0.16) 0%, rgba(247, 239, 222, 0.04) 38%, transparent 66%);
    animation: vf-nebula 4.8s ease-in-out infinite;
}
@keyframes vf-nebula { 0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.55; } 50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; } }
body.veo-generation-body .veo-generating-placeholder-shimmer {
    z-index: 1;
    background: linear-gradient(115deg, transparent 30%, rgba(247, 239, 222, 0.1) 50%, transparent 70%) !important;
    background-size: 250% 100% !important;
    animation: vf-sweep 2.8s var(--vf-ease) infinite !important;
}
@keyframes vf-sweep { from { background-position: 180% 0; } to { background-position: -80% 0; } }
body.veo-generation-body .veo-generating-center { position: relative; z-index: 2; gap: 18px; }
body.veo-generation-body .veo-generating-loader { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
body.veo-generation-body .veo-generating-loader-ring {
    position: absolute;
    inset: 0;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 55%, rgba(247, 239, 222, 0.15) 70%, #f7efde 100%) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    filter: drop-shadow(0 0 8px rgba(236, 224, 198, 0.7));
    animation: vf-spin-ring 1.5s linear infinite !important;
}
body.veo-generation-body .veo-generating-loader::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px dashed rgba(247, 239, 222, 0.28);
    animation: vf-spin-ring 9s linear infinite reverse;
}
body.veo-generation-body .veo-generating-loader::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #f7efde 20%, rgba(247, 239, 222, 0.4) 60%, transparent 70%);
    box-shadow: 0 0 26px 8px rgba(236, 224, 198, 0.55);
    animation: vf-core 1.8s ease-in-out infinite;
}
@keyframes vf-spin-ring { to { transform: rotate(360deg); } }
@keyframes vf-core { 50% { transform: scale(1.7); box-shadow: 0 0 40px 14px rgba(236, 224, 198, 0.7); } }
body.veo-generation-body .veo-generating-dots { display: none !important; }
body.veo-generation-body .veo-generating-caption {
    margin: 0;
    font-family: var(--vf-font);
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    background: linear-gradient(100deg, rgba(247, 239, 222, 0.4) 20%, #f7efde 50%, rgba(247, 239, 222, 0.4) 80%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: vf-caption 2.4s linear infinite;
}
@keyframes vf-caption { to { background-position: -220% 0; } }
body.veo-generation-body .veo-generating-badge {
    z-index: 2;
    background: rgba(247, 239, 222, 0.06) !important;
    border: 1px solid var(--vf-line-2) !important;
    border-radius: 999px !important;
    color: var(--vf-dim) !important;
}
html body.veo-generation-body #veoPhotoUploadBtn #veoPhotoUploadCounter,
html body.veo-generation-body #veoPhotoUploadBtn .veo-photo-upload-counter { color: var(--vf-on) !important; font-weight: 800; font-size: 0.62rem; }
body.veo-generation-body .veo-welcome-chat { margin-top: clamp(40px, calc(12vh / var(--vf-z, 1)), 120px); }
body.veo-generation-body .veo-welcome-chat { margin: auto !important; padding-top: 14px; padding-bottom: 150px; gap: 12px; }
.vf-orbit { width: 112px; height: 112px; }
.vf-orbit .veo-welcome-chat-icon { width: 74px !important; height: 74px !important; border-radius: 23px !important; }
@media (max-height: 820px) { body.veo-generation-body .veo-welcome-chat-action { display: none; } }
@media (max-height: 700px) { body.veo-generation-body .veo-welcome-chat-desc { display: none; } .vf-orbit { width: 90px; height: 90px; } .vf-orbit .veo-welcome-chat-icon { width: 60px !important; height: 60px !important; } }
body.veo-generation-body .veo-welcome-chat { padding-bottom: 0 !important; }
@media (max-height: 860px) { .vf-ideas__chip:nth-child(n+5) { display: none; } }
@media (max-height: 720px) { .vf-ideas__chip:nth-child(n+4) { display: none; } }
body.veo-generation-body .header-brand-name { letter-spacing: 0.15em; font-size: 0.76rem; white-space: nowrap; }
@media (max-width: 1240px) { body.veo-generation-body .header-brand-name { display: none; } }
body.veo-generation-body:has(#veoWelcomeMessage) #veoScrollToBottomBtn { display: none !important; }
/* иконки моделей — монохромные */
body.veo-generation-body .vf-nano-family-opt-badge img,
body.veo-generation-body .veo-custom-select-option img,
body.veo-generation-body .veo-custom-select-trigger img { filter: grayscale(1) brightness(1.15) contrast(1.05); }
body.veo-generation-body .veo-chats-panel { z-index: 3000 !important; }
body.veo-generation-body .veo-chats-panel-backdrop { z-index: 2990 !important; }
body.veo-generation-body .veo-chats-panel-item { border-radius: 14px; color: var(--vf-dim); transition: background .2s, color .2s, transform .3s var(--vf-ease); }
body.veo-generation-body .veo-chats-panel-item:hover { background: var(--vf-surface-2) !important; color: var(--vf-ink); transform: translateX(3px); }
body.veo-generation-body .veo-chats-panel-item--active { background: var(--vf-surface-3) !important; color: var(--vf-ink); box-shadow: inset 0 0 0 1px var(--vf-line-3); }

/* мобильный док: плотный чёрный, без мутного «серого стекла» */
html body.veo-generation-body.mobile-version .veo-mobile-dock-collapsible::before {
    background: linear-gradient(180deg, rgba(6, 6, 6, 0.9) 0%, rgba(4, 4, 4, 0.98) 28%) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(236, 224, 198, 0.12);
}
html body.veo-generation-body.mobile-version .veo-mobile-prompt-tabs { background: rgba(247, 239, 222, 0.05) !important; }
html body.veo-generation-body.mobile-version .veo-mobile-prompt-tab { color: rgba(247, 239, 222, 0.7) !important; }
html body.veo-generation-body.mobile-version .veo-mobile-prompt-tab--active { color: var(--vf-on) !important; background: var(--vf-cta) !important; }
html body.veo-generation-body .veo-mobile-settings-reset-btn,
html body.veo-generation-body .veo-mobile-settings-back-btn {
    background: var(--vf-surface-2) !important;
    border: 1px solid var(--vf-line-2) !important;
    color: var(--vf-ink) !important;
    border-radius: 999px !important;
}
html body.veo-generation-body .veo-mobile-settings-tile-icon svg { stroke: var(--vf-ink); }
html body.veo-generation-body .veo-mobile-settings-tile-label { color: var(--vf-dim) !important; letter-spacing: 0.06em; }
html body.veo-generation-body .veo-mobile-settings-tile-value { color: var(--vf-ink) !important; }
html body.veo-generation-body .vf-media-sheet-btn-primary,
html body.veo-generation-body .veo-mobile-format-sheet-footer-btn,
html body.veo-generation-body .veo-mobile-mode-sheet-footer-btn {
    background: var(--vf-cta) !important;
    color: var(--vf-on) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 700;
    box-shadow: 0 10px 34px rgba(236, 224, 198, 0.22) !important;
    transition: transform .3s var(--vf-spring);
}
html body.veo-generation-body .vf-media-sheet-btn-primary:active,
html body.veo-generation-body .veo-mobile-format-sheet-footer-btn:active { transform: scale(0.97); }

/* ---------- Анимации: появление сообщений, наклон карточек, запуск ---------- */
body.veo-generation-body .veo-chat-message { animation: vf-msg-in 0.7s var(--vf-ease) both; }
@keyframes vf-msg-in { from { opacity: 0; transform: translateY(16px); } }
body.veo-generation-body .veo-chat-message--user { animation-name: vf-msg-in-user; }
@keyframes vf-msg-in-user { from { opacity: 0; transform: translateY(10px) scale(0.97); transform-origin: 100% 100%; } }
@media (hover: hover) {
    body.veo-generation-body .veo-video-wrapper {
        transform: perspective(1000px) rotateX(var(--vf-ry, 0deg)) rotateY(var(--vf-rx, 0deg)) translateY(var(--vf-lift, 0px));
        transition: transform 0.5s var(--vf-ease), box-shadow 0.6s var(--vf-ease);
        will-change: transform;
    }
    body.veo-generation-body .veo-video-wrapper.vf-tilting { --vf-lift: -4px; transition: transform 0.08s linear, box-shadow 0.6s var(--vf-ease); }
    body.veo-generation-body .veo-video-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: radial-gradient(420px circle at var(--vf-gx, 50%) var(--vf-gy, 0%), rgba(247, 239, 222, 0.16), transparent 55%);
        opacity: 0;
        transition: opacity 0.4s;
        z-index: 3;
    }
    body.veo-generation-body .veo-video-wrapper.vf-tilting::after { opacity: 1; }
}
.vf-burst {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 5000;
}
.vf-burst i {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    margin: -2px;
    border-radius: 50%;
    background: var(--vf-cta);
    box-shadow: 0 0 10px 2px rgba(236, 224, 198, 0.8);
    animation: vf-burst 0.95s cubic-bezier(0.12, 0.8, 0.3, 1) forwards;
}
@keyframes vf-burst { to { transform: translate(var(--bx), var(--by)) scale(0.2); opacity: 0; } }
body.vf-view-anim .veo-desktop-layout, body.vf-view-anim .veo-chat-messages { animation: vf-view-in 0.55s var(--vf-ease); }
@keyframes vf-view-in { from { opacity: 0.2; transform: scale(0.985); filter: blur(6px); } }
body.veo-generation-body .veo-right-settings { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
body:not(.vf-view-studio) .veo-right-settings { -webkit-mask-image: none; mask-image: none; }
html body.veo-generation-body.mobile-version .veo-welcome-chat { padding-inline: 14px; margin-top: 18px !important; }
html body.veo-generation-body.mobile-version .veo-welcome-chat-brand { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 10px; }
html body.veo-generation-body.mobile-version .veo-welcome-chat-title { text-align: center !important; font-size: 1.7rem !important; }
html body.veo-generation-body.mobile-version .veo-welcome-chat-desc,
html body.veo-generation-body.mobile-version .veo-welcome-chat-action { text-align: center !important; }
html body.veo-generation-body.mobile-version .vf-ideas { gap: 7px; }
html body.veo-generation-body.mobile-version .vf-ideas__chip { padding: 8px 13px; font-size: 0.78rem; max-width: 100%; }
html body.veo-generation-body.mobile-version .vf-orbit { margin-top: 6px; }

/* ---------- Нижняя навигация (телефон): чёрное стекло, белые акценты ---------- */
body.veo-generation-body .bottom-nav, body.page-main .bottom-nav {
    background: linear-gradient(180deg, rgba(5, 5, 8, 0.72), rgba(3, 3, 5, 0.96)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border-top: 1px solid rgba(247, 239, 222, 0.12) !important;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55) !important;
}
body.veo-generation-body .bottom-nav .nav-item, body.page-main .bottom-nav .nav-item { color: rgba(247, 239, 222, 0.5) !important; transition: color 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
body.veo-generation-body .bottom-nav .nav-item:active, body.page-main .bottom-nav .nav-item:active { transform: scale(0.9); }
body.veo-generation-body .bottom-nav .nav-item.active, body.page-main .bottom-nav .nav-item.active,
body.veo-generation-body .bottom-nav .nav-item:hover, body.page-main .bottom-nav .nav-item:hover { color: var(--vf-ink) !important; }
body.veo-generation-body .create-btn-main, body.page-main .create-btn-main {
    background: var(--vf-cta) !important;
    color: var(--vf-on) !important;
    border: 0 !important;
    box-shadow: 0 10px 34px rgba(236, 224, 198, 0.28), 0 0 0 6px rgba(247, 239, 222, 0.06) !important;
}
body.veo-generation-body .create-btn-main svg, body.page-main .create-btn-main svg { stroke: var(--vf-on) !important; }
body.veo-generation-body .nav-text-create, body.page-main .nav-text-create { color: var(--vf-ink) !important; }
body.veo-generation-body .arc-btn, body.page-main .arc-btn {
    --btn-color: #f7efde !important;
    background: rgba(10, 10, 14, 0.92) !important;
    border: 1px solid rgba(247, 239, 222, 0.25) !important;
    color: var(--vf-ink) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), 0 0 24px rgba(247, 239, 222, 0.08) !important;
}
body.veo-generation-body .arc-btn svg, body.page-main .arc-btn svg { stroke: var(--vf-ink) !important; }
body.veo-generation-body .create-arc-overlay, body.page-main .create-arc-overlay { background: rgba(0, 0, 0, 0.7) !important; }

/* ==========================================================================
   «Студия»: активная генерация + плёнка истории
   ========================================================================== */
.vf-film[hidden] { display: none !important; }
.vf-film {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    margin: 12px 14px 0;
    overflow-x: auto;
    flex: 0 0 auto;
    border-radius: 20px;
    border: 1px solid var(--vf-line);
    background: rgba(247, 239, 222, 0.03);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    scrollbar-width: none;
    position: relative;
    z-index: 3;
}
.vf-film::-webkit-scrollbar { display: none; }
.vf-film__item {
    position: relative;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--vf-line-2);
    background: #0a0a0e center / cover no-repeat;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s var(--vf-spring), border-color 0.25s, box-shadow 0.3s, opacity 0.3s;
    opacity: 0.62;
    animation: vf-chip-in 0.5s var(--vf-ease) both;
}
.vf-film__item video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.vf-film__item:hover { opacity: 1; transform: translateY(-3px) scale(1.06); border-color: var(--vf-line-3); }
.vf-film__item.is-on { opacity: 1; border-color: var(--vf-gold); box-shadow: 0 0 0 2px rgba(236, 224, 198, 0.18), 0 0 26px rgba(236, 224, 198, 0.3); transform: translateY(-2px); }
.vf-film__n { position: absolute; right: 5px; bottom: 3px; font: 800 0.62rem/1 var(--vf-font); color: var(--vf-ink); text-shadow: 0 1px 4px #000; }
.vf-film__item i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: var(--vf-dim); }
.vf-film__spin::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(247, 239, 222, 0.2); border-top-color: #f7efde; animation: vf-spin-ring 0.9s linear infinite; }
body.veo-generation-body [data-vf-hide="1"] { display: none !important; }
body.vf-view-studio .veo-chat-message.vf-active .veo-video-wrapper { max-width: min(100%, calc((calc(100vh / var(--vf-z, 1)) - 330px) * var(--vf-ar, 1.3))); max-height: calc(calc(100vh / var(--vf-z, 1)) - 330px); }
body.vf-view-studio .veo-chat-message.vf-active { animation: vf-msg-in 0.6s var(--vf-ease) both; }
@media (min-width: 980px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-messages-wrap { display: flex; flex-direction: column; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-messages { flex: 1 1 auto; min-height: 0; justify-content: center; }
}
body.veo-generation-body .veo-chat-messages:has(.veo-chat-message) .veo-welcome-chat { display: none !important; }

/* ==========================================================================
   СЦЕНА ФОНА — горизонт планеты, туманности, зерно
   ========================================================================== */
#vfScene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(120% 70% at 50% 115%, rgba(247, 239, 222, 0.07), transparent 60%),
        linear-gradient(180deg, #010102 0%, #040407 55%, #07070b 100%);
}
.vf-scene__neb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    will-change: transform;
}
.vf-scene__neb--a { width: calc(58vw / var(--vf-z, 1)); height: calc(58vw / var(--vf-z, 1)); left: calc(-16vw / var(--vf-z, 1)); top: calc(-22vw / var(--vf-z, 1)); background: radial-gradient(circle, rgba(247, 239, 222, 0.11), transparent 65%); animation: vf-neb-a 38s ease-in-out infinite alternate; }
.vf-scene__neb--b { width: calc(46vw / var(--vf-z, 1)); height: calc(46vw / var(--vf-z, 1)); right: calc(-14vw / var(--vf-z, 1)); top: calc(8vh / var(--vf-z, 1)); background: radial-gradient(circle, rgba(215, 222, 240, 0.085), transparent 65%); animation: vf-neb-b 46s ease-in-out infinite alternate; }
.vf-scene__neb--c { width: calc(40vw / var(--vf-z, 1)); height: calc(40vw / var(--vf-z, 1)); left: calc(30vw / var(--vf-z, 1)); bottom: calc(6vh / var(--vf-z, 1)); background: radial-gradient(circle, rgba(247, 239, 222, 0.06), transparent 65%); animation: vf-neb-a 52s ease-in-out infinite alternate-reverse; }
@keyframes vf-neb-a { to { transform: translate3d(calc(9vw / var(--vf-z, 1)), calc(7vh / var(--vf-z, 1)), 0) scale(1.18); } }
@keyframes vf-neb-b { to { transform: translate3d(calc(-10vw / var(--vf-z, 1)), calc(10vh / var(--vf-z, 1)), 0) scale(0.88); } }
/* планета: огромный круг, видна только светящаяся дуга горизонта */
.vf-scene__planet {
    position: absolute;
    left: 50%;
    top: calc(100% - calc(15vh / var(--vf-z, 1)));
    width: calc(230vw / var(--vf-z, 1));
    aspect-ratio: 1;
    margin-left: calc(-115vw / var(--vf-z, 1));
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 0%, rgba(247, 239, 222, 0.16) 0%, rgba(247, 239, 222, 0.04) 8%, transparent 22%),
        #020203;
    box-shadow:
        0 -1px 0 rgba(247, 239, 222, 0.85),
        0 -2px 14px rgba(247, 239, 222, 0.55),
        0 -26px 70px rgba(247, 239, 222, 0.22),
        0 -90px 190px rgba(210, 220, 245, 0.12),
        inset 0 22px 60px rgba(247, 239, 222, 0.1);
    animation: vf-planet 14s ease-in-out infinite;
}
@keyframes vf-planet { 50% { transform: translateY(-5px); box-shadow: 0 -1px 0 rgba(236, 224, 198, .95), 0 -2px 18px rgba(236, 224, 198, .7), 0 -34px 90px rgba(236, 224, 198, .28), 0 -110px 220px rgba(210,220,245,.15), inset 0 22px 60px rgba(236, 224, 198, .12); } }
.vf-scene__grain {
    position: absolute;
    inset: -50%;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: vf-grain 0.9s steps(6) infinite;
}
@keyframes vf-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
body.veo-generation-body .veo-background-animation, body.page-main .vf-main-with-bg::before { opacity: 0.35; }
body.veo-generation-body .app-container { position: relative; z-index: 2; }
#vfArtStars { z-index: 1; }
.vf-scene__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.55)); }

/* ==========================================================================
   СИСТЕМА КНОПОК И ИКОНОК
   ========================================================================== */
/* левая рейка: стеклянные «таблетки» с анимированными SVG */
body.veo-generation-body:not(.mobile-version) .veo-left-sidebar { width: 64px; padding-top: 14px; gap: 10px; align-items: center; }
body.veo-generation-body .veo-left-icon-btn {
    position: relative;
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(247, 239, 222, 0.07), rgba(247, 239, 222, 0.02)) !important;
    border: 1px solid rgba(247, 239, 222, 0.1) !important;
    box-shadow: 0 1px 0 rgba(236, 224, 198, 0.12) inset, 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    display: grid;
    place-items: center;
}
body.veo-generation-body .veo-left-icon-btn:hover {
    border-color: rgba(247, 239, 222, 0.4) !important;
    box-shadow: 0 1px 0 rgba(236, 224, 198, 0.2) inset, 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 28px rgba(236, 224, 198, 0.14) !important;
}
body.veo-generation-body .veo-left-icon-btn .veo-left-sidebar-icon { display: none !important; }
.vf-ico { width: 22px; height: 22px; stroke: var(--vf-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.vf-ico * { transition: transform 0.55s var(--vf-spring), opacity 0.3s, stroke-dashoffset 0.7s var(--vf-ease); transform-box: fill-box; transform-origin: center; }
/* чаты: пузырь рисуется заново, точки «печатают» */
.vf-ico--chat .b { stroke-dasharray: 80; stroke-dashoffset: 0; }
.veo-left-icon-btn:hover .vf-ico--chat .b { animation: vf-draw 0.9s var(--vf-ease); }
.vf-ico--chat .d { fill: #f7efde; stroke: none; }
.veo-left-icon-btn:hover .vf-ico--chat .d1 { animation: vf-dot 0.9s 0s infinite; }
.veo-left-icon-btn:hover .vf-ico--chat .d2 { animation: vf-dot 0.9s 0.15s infinite; }
.veo-left-icon-btn:hover .vf-ico--chat .d3 { animation: vf-dot 0.9s 0.3s infinite; }
@keyframes vf-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes vf-dot { 40% { transform: translateY(-3px); } }
/* новый чат: плюс поворачивается, круг дорисовывается */
.vf-ico--plus .c { stroke-dasharray: 60; }
.veo-left-icon-btn:hover .vf-ico--plus .c { animation: vf-draw2 0.9s var(--vf-ease); }
.veo-left-icon-btn:hover .vf-ico--plus .p { transform: rotate(90deg) scale(1.15); }
@keyframes vf-draw2 { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
/* фильтр: ползунки разъезжаются */
.vf-ico--sliders .k1 { fill: #f7efde; }
.vf-ico--sliders .k2 { fill: #f7efde; }
.vf-ico--sliders .k3 { fill: #f7efde; }
.veo-left-icon-btn:hover .vf-ico--sliders .k1 { transform: translateX(7px); }
.veo-left-icon-btn:hover .vf-ico--sliders .k2 { transform: translateX(-6px); }
.veo-left-icon-btn:hover .vf-ico--sliders .k3 { transform: translateX(5px); }
/* анимация чата: искра мерцает */
.veo-left-icon-btn:hover .vf-ico--spark .s1 { animation: vf-twinkle 0.9s infinite; }
.veo-left-icon-btn:hover .vf-ico--spark .s2 { animation: vf-twinkle 0.9s 0.3s infinite; }
@keyframes vf-twinkle { 50% { transform: scale(1.35) rotate(18deg); opacity: 0.55; } }
.veo-left-icon-btn[aria-pressed="true"] .vf-ico--spark { opacity: 0.35; }
/* зум: линза «дышит» */
.veo-left-icon-btn:hover .vf-ico--zoom .l { animation: vf-lens 1.1s ease-in-out infinite; }
@keyframes vf-lens { 50% { transform: scale(1.14); } }

/* шапка: иконки навигации оживают */
body.veo-generation-body .desktop-nav .nav-link { padding: 9px 16px; gap: 8px; }
body.veo-generation-body .desktop-nav .nav-link-icon svg { stroke-width: 1.8; transition: transform 0.5s var(--vf-spring); }
body.veo-generation-body .desktop-nav .nav-link:hover .nav-link-icon svg { transform: translateY(-2px) rotate(-6deg) scale(1.12); }

/* ---- КНОПКИ ---- */
/* главная кнопка: вращающаяся светящаяся кромка + блик + иконка-искра */
body.veo-generation-body .veo-prompt-send-wrap { position: relative; display: inline-block; }
body.veo-generation-body .veo-prompt-send {
    position: relative;
    isolation: isolate;
    min-height: 46px;
    padding: 0 26px 0 22px !important;
    gap: 10px;
    letter-spacing: 0.08em;
}
body.veo-generation-body .veo-prompt-send::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from var(--vf-spin, 0deg), rgba(247, 239, 222, 0) 0 55%, #f7efde 78%, rgba(247, 239, 222, 0) 100%);
    filter: blur(5px);
    opacity: 0.85;
    animation: vf-spin 3.2s linear infinite;
}
body.veo-generation-body .veo-prompt-send svg { transition: transform 0.6s var(--vf-spring); }
body.veo-generation-body .veo-prompt-send:hover:not(:disabled) svg { transform: rotate(20deg) scale(1.2); }
body.veo-generation-body .veo-prompt-send:disabled::before { display: none; }
/* вторичные иконочные кнопки в панели ввода */
body.veo-generation-body .veo-prompt-action,
body.veo-generation-body .veo-photo-upload-btn,
body.veo-generation-body .veo-prompt-enter-btn {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(247, 239, 222, 0.08), rgba(247, 239, 222, 0.025)) !important;
    border: 1px solid rgba(247, 239, 222, 0.12) !important;
    box-shadow: 0 1px 0 rgba(236, 224, 198, 0.14) inset, 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
body.veo-generation-body .veo-photo-upload-btn { width: auto; padding: 0 12px; }
body.veo-generation-body .veo-prompt-action svg, body.veo-generation-body .veo-prompt-enter-btn svg { transition: transform 0.5s var(--vf-spring); }
body.veo-generation-body .veo-prompt-action:hover svg { transform: scale(1.18) rotate(-6deg); }
/* кубик «случайная идея» */
.vf-dice { width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(236, 224, 198, 0.12); background: linear-gradient(180deg, rgba(247, 239, 222, 0.08), rgba(247, 239, 222, 0.025)); box-shadow: 0 1px 0 rgba(236, 224, 198, 0.14) inset, 0 6px 18px rgba(0, 0, 0, 0.35); display: grid; place-items: center; cursor: pointer; color: var(--vf-ink); transition: transform 0.4s var(--vf-spring), border-color 0.25s; position: relative; }
.vf-dice svg { width: 21px; height: 21px; stroke: var(--vf-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.6s var(--vf-spring); }
.vf-dice svg circle { fill: #f7efde; stroke: none; }
.vf-dice:hover { border-color: rgba(247, 239, 222, 0.4); transform: translateY(-2px); }
.vf-dice:hover svg { transform: rotate(180deg) scale(1.1); }
.vf-dice:active svg { transform: rotate(360deg) scale(0.9); }
.vf-dice .veo-tooltip { white-space: nowrap; }

/* ---- Чипы соотношения сторон ---- */
.vf-ratios { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 4px; }
.vf-ratios__lbl { width: 100%; font: 700 0.64rem/1 var(--vf-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--vf-mute); margin-bottom: 2px; }
.vf-ratio { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 12px; border: 1px solid rgba(247, 239, 222, 0.12); background: rgba(247, 239, 222, 0.035); color: var(--vf-dim); font: 600 0.78rem/1 var(--vf-font); cursor: pointer; transition: all 0.3s var(--vf-ease); }
.vf-ratio i { display: block; border: 1.6px solid currentColor; border-radius: 3px; transition: box-shadow 0.3s; }
.vf-ratio:hover { color: var(--vf-ink); border-color: rgba(247, 239, 222, 0.4); transform: translateY(-2px); }
.vf-ratio.is-on { background: var(--vf-cta); color: var(--vf-on); border-color: var(--vf-gold); box-shadow: 0 0 24px rgba(236, 224, 198, 0.3); }
.vf-ratio.is-on i { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; }

/* ---- Перетаскивание фото ---- */
.vf-drop { position: fixed; inset: 0; z-index: 6000; display: none; place-items: center; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
body.vf-dragging .vf-drop { display: grid; animation: vf-pop 0.3s var(--vf-spring); }
.vf-drop__box { padding: 54px 70px; border-radius: 34px; border: 2px dashed rgba(247, 239, 222, 0.55); background: radial-gradient(circle at 50% 0%, rgba(247, 239, 222, 0.14), transparent 70%); text-align: center; color: var(--vf-ink); font-family: var(--vf-font); animation: vf-drop-pulse 1.6s ease-in-out infinite; }
.vf-drop__box b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.vf-drop__box span { color: var(--vf-dim); font-size: 0.9rem; }
.vf-drop__box svg { width: 54px; height: 54px; stroke: var(--vf-ink); fill: none; stroke-width: 1.5; margin-bottom: 14px; animation: vf-float 3s ease-in-out infinite; }
@keyframes vf-drop-pulse { 50% { box-shadow: 0 0 60px rgba(236, 224, 198, 0.2); border-color: var(--vf-gold); } }

/* ---- Тост ---- */
.vf-toast { position: fixed; left: 50%; bottom: 110px; transform: translate(-50%, 20px); z-index: 7000; padding: 11px 18px; border-radius: 999px; background: rgba(12, 12, 16, 0.94); border: 1px solid rgba(236, 224, 198, 0.25); color: var(--vf-ink); font: 600 0.82rem/1 var(--vf-font); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.5s var(--vf-spring); }
.vf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
kbd.vf-kbd { display: inline-block; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(247, 239, 222, 0.25); background: rgba(247, 239, 222, 0.06); font: 600 0.7rem/1.4 var(--vf-font); color: var(--vf-dim); }

/* студия: формат выбирается чипами — строку-селект и нижние кнопки прячем, освобождая место */
@media (min-width: 980px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .vf-row-in-chips,
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-settings-footer { display: none !important; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-right-settings { max-height: calc(calc(100dvh / var(--vf-z, 1)) - 54px - 380px); }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-input-zone { min-height: 90px; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-desktop-layout { grid-template-rows: auto minmax(330px, 1fr); }
}
@media (min-width: 980px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-messages { justify-content: flex-start !important; padding-top: 16px; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-message.vf-active { margin-block: 0; }
}
html body.veo-generation-body.mobile-version #submitButtonDesktop .veo-prompt-send-icon { display: flex !important; opacity: 1 !important; }
html body.veo-generation-body.mobile-version #submitButtonDesktop .veo-prompt-send-icon svg { display: block !important; opacity: 1 !important; width: 20px !important; height: 20px !important; stroke: var(--vf-on) !important; stroke-width: 2.4 !important; fill: none !important; }
html body.veo-generation-body.mobile-version #submitButtonDesktop .veo-prompt-send-text { display: none !important; }
html body.veo-generation-body.mobile-version #submitButtonDesktop { width: 46px; height: 46px; padding: 0 !important; justify-content: center; align-items: center; display: inline-flex; }
.vf-gen-meta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; max-width: 86%; text-align: center; }
.vf-gen-timer { font: 800 1.35rem/1 var(--vf-font); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--vf-ink); text-shadow: 0 0 24px rgba(236, 224, 198, 0.5); }
.vf-gen-tip { min-height: 2.4em; color: var(--vf-mute); font: 500 0.76rem/1.5 var(--vf-font); }
.vf-gen-tip.is-in { animation: vf-chip-in 0.7s var(--vf-ease) both; }
@media (max-width: 860px) {
    .vf-ratios { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
    .vf-ratios::-webkit-scrollbar { display: none; }
    .vf-ratios__lbl { display: none; }
    .vf-ratio { flex: 0 0 auto; }
}

/* ==========================================================================
   АДАПТИВНОСТЬ: 320 → 4K, портрет/ландшафт, планшеты
   ========================================================================== */
html, body.veo-generation-body { max-width: 100%; overflow-x: hidden; }
body.veo-generation-body img, body.veo-generation-body video { max-width: 100%; }

/* ---------- Десктоп 961–1279: компактная шапка и колонки ---------- */
@media (min-width: 961px) and (max-width: 1279px) {
    body.veo-generation-body:not(.mobile-version) .desktop-nav .nav-link:not(.vf-nav-current) > span:not(.nav-link-icon) { display: none; }
    body.veo-generation-body:not(.mobile-version) .desktop-nav .nav-link { padding: 9px 12px; }
    body.veo-generation-body:not(.mobile-version) .vf-currency-selector,
    body.veo-generation-body:not(.mobile-version) .profile-separator-equals { display: none !important; }
    body.veo-generation-body:not(.mobile-version) .desktop-header { gap: 10px; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-desktop-layout { grid-template-columns: 60px minmax(300px, 360px) minmax(0, 1fr); gap: 0 12px; padding-right: 12px; }
    body.vf-view-chat.veo-generation-body:not(.mobile-version) .veo-right-settings { width: 240px !important; min-width: 240px !important; }
    .vf-ratio { padding: 7px 10px 7px 8px; font-size: 0.74rem; }
}
@media (min-width: 961px) and (max-width: 1099px) {
    body.veo-generation-body:not(.mobile-version) .audio-toggle-btn { display: none; }
}

/* ---------- Широкие экраны ---------- */
@media (min-width: 1700px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-desktop-layout { grid-template-columns: 72px minmax(440px, 540px) minmax(0, 1fr); gap: 0 24px; padding-right: 24px; }
    body.veo-generation-body .veo-prompt-input { font-size: 16px; }
    body.vf-view-studio .veo-chat-message.vf-active .veo-video-wrapper { max-width: min(100%, calc((calc(100vh / var(--vf-z, 1)) - 330px) * var(--vf-ar, 1.3))); }
    .vf-film__item { width: 66px; height: 66px; }
}
@media (min-width: 2300px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-desktop-layout { grid-template-columns: 84px minmax(520px, 620px) minmax(0, 1fr); }
    body.veo-generation-body .veo-prompt-input { font-size: 18px; }
    .vf-ratio { font-size: 0.9rem; padding: 10px 14px 10px 12px; }
    .vf-film__item { width: 80px; height: 80px; border-radius: 18px; }
    .vf-hero__title { font-size: 7rem; }
}

/* ---------- Телефонный шаблон на широких экранах (планшет, ландшафт) ---------- */
@media (min-width: 700px) {
    body.veo-generation-body.mobile-version .veo-chat-messages { max-width: 880px; margin-inline: auto; width: 100%; }
    body.veo-generation-body.mobile-version .veo-chat-messages-wrap > .vf-film { max-width: 880px; margin-inline: auto; width: calc(100% - 28px); }
    body.veo-generation-body.mobile-version .veo-mobile-input-dock,
    body.veo-generation-body.mobile-version .veo-mobile-dock-capsule-bar { max-width: 780px; margin-inline: auto; }
    body.veo-generation-body.mobile-version .veo-welcome-chat { max-width: 720px; }
    body.veo-generation-body.mobile-version .veo-mobile-chat-toolbar { padding-inline: max(14px, calc((calc(100vw / var(--vf-z, 1)) - 880px) / 2)); }
}
@media (min-width: 1100px) and (orientation: landscape) {
    body.vf-view-studio.veo-generation-body.mobile-version .veo-chat-messages { max-width: 1040px; }
    body.vf-view-studio.veo-generation-body.mobile-version .veo-video-wrapper { max-height: calc(calc(100vh / var(--vf-z, 1)) - 360px); width: auto; margin-inline: auto; }
}

/* ---------- Совсем узкие телефоны (≤360) ---------- */
body.vf-xs.veo-generation-body .veo-mobile-header-right { gap: 6px; }
body.vf-xs.veo-generation-body .vf-view-switch--mobile { margin-right: 4px; }
body.vf-xs.veo-generation-body .vf-view-switch--mobile button { padding: 6px 7px; }
body.vf-xs.veo-generation-body .vf-mobile-balance-pill { padding-inline: 8px !important; font-size: 0.82rem; }
body.vf-xs.veo-generation-body .veo-mobile-toolbar-model-text { max-width: calc(30vw / var(--vf-z, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-xs.veo-generation-body .veo-welcome-chat-title { font-size: 1.45rem !important; }
body.vf-xs.veo-generation-body .vf-ideas__chip { font-size: 0.72rem; padding: 7px 11px; }
body.vf-xs.veo-generation-body .vf-ratio { padding: 7px 9px 7px 8px; font-size: 0.72rem; }
body.vf-xs.page-main .vf-hero__title { font-size: 2.15rem; }
body.vf-xs.page-main .vf-hero__composer { padding: 10px 10px 8px; border-radius: 22px; }
body.vf-xs.page-main .vf-hero__modes button { padding: 6px 12px; }
body.vf-xs.page-main .vf-trend { width: calc(78vw / var(--vf-z, 1)); }

/* ---------- Ландшафт телефона / низкие окна ---------- */
body.vf-short.veo-generation-body .veo-welcome-chat-desc,
body.vf-short.veo-generation-body .veo-welcome-chat-action,
body.vf-short.veo-generation-body .veo-welcome-chat-hint,
body.vf-short.veo-generation-body .vf-ideas { display: none !important; }
body.vf-short.veo-generation-body .vf-orbit { width: 72px; height: 72px; }
body.vf-short.veo-generation-body .vf-orbit .veo-welcome-chat-icon { width: 48px !important; height: 48px !important; }
body.vf-short.veo-generation-body .vf-ratios__lbl { display: none; }
body.vf-short.veo-generation-body.mobile-version .veo-mobile-input-dock { max-height: calc(72vh / var(--vf-z, 1)); overflow-y: auto; }
body.vf-short.page-main .vf-first-screen { min-height: 460px; }
body.vf-short.page-main .vf-hero__sub, body.vf-short.page-main .vf-hero__pill, body.vf-short.page-main .vf-hero__ideas { display: none; }
body.vf-short.page-main .vf-first-screen-overlay.vf-hero { padding-top: 64px; gap: 10px; }
body.vf-short.page-main .vf-hero__title { font-size: 2.2rem; }
@media (max-height: 520px) and (orientation: landscape) {
    body.veo-generation-body .vf-gen-tip { display: none; }
    body.veo-generation-body .veo-generating-loader { width: 64px; height: 64px; }
}

/* безопасные зоны (вырез/«чёлка») */
body.veo-generation-body.mobile-version .veo-mobile-input-dock { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
body.veo-generation-body.mobile-version .veo-mobile-chat-toolbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.vf-toast { bottom: max(110px, calc(env(safe-area-inset-bottom) + 96px)); }

/* сцена: на телефоне лёгче */
@media (max-width: 700px) {
    .vf-scene__neb { filter: blur(48px); }
    .vf-scene__planet { top: calc(100% - calc(11vh / var(--vf-z, 1))); width: calc(320vw / var(--vf-z, 1)); margin-left: calc(-160vw / var(--vf-z, 1)); }
    .vf-scene__grain { display: none; }
}
@media (prefers-reduced-data: reduce) { .vf-scene__grain { display: none; } }
@media (min-width: 961px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-right-settings .veo-settings-scroll { grid-auto-rows: max-content; height: auto !important; max-height: none !important; align-content: start; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-settings-section { flex-shrink: 0; min-height: min-content; }
}
@media (min-width: 961px) and (max-height: 820px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .vf-ratios { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .vf-ratios::-webkit-scrollbar { display: none; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .vf-ratios__lbl { display: none; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .vf-ratio { flex: 0 0 auto; }
}
@media (min-width: 961px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-right-settings > div.veo-settings-footer:last-child { display: none !important; }
}
/* студия (десктоп): холст не прокручивается (активная генерация всегда целиком), форма не растягивается на всю высоту */
@media (min-width: 961px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-messages,
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-chat-messages-wrap { overflow: clip !important; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-wrapper { align-self: start !important; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-stack,
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-box,
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-area { height: auto !important; max-height: 520px; }
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-input-zone { min-height: 110px; }
    body.vf-view-studio .veo-chat-message.vf-active .veo-generating-placeholder { min-height: min(calc(56vh / var(--vf-z, 1)), 520px); width: min(100%, 560px); margin-inline: auto; }
    body.vf-view-studio .veo-chat-message.vf-active .veo-video-wrapper { max-height: calc(calc(100vh / var(--vf-z, 1)) - 340px); }
}
@media (min-width: 961px) and (min-height: 940px) {
    body.vf-view-studio.veo-generation-body:not(.mobile-version) .veo-prompt-input-zone { min-height: 190px; }
}
body.vf-xs.veo-generation-body .vf-mobile-balance-pill { min-width: 52px; gap: 4px; }
body.vf-xs.veo-generation-body .vf-mobile-balance-pill-chevron, body.vf-xs.veo-generation-body .vf-mobile-balance-pill-fiat { display: none !important; }
body.vf-xs.veo-generation-body .veo-mobile-header-left .veo-mobile-nav-trigger-icon { display: none; }
/* чипы не должны растягивать родителя (док/панель) */
.vf-ratios { width: 0; min-width: 100%; max-width: 100%; box-sizing: border-box; }
body.veo-generation-body .veo-prompt-box, body.veo-generation-body .veo-prompt-area, body.veo-generation-body .veo-mobile-tab-panel, body.veo-generation-body .veo-mobile-tab-panels { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* ==========================================================================
   v3: ЧАТ и РЕЗУЛЬТАТЫ — своя подача; СТУДИЯ — только генерация + результат
   ========================================================================== */

/* (оформление ленты чата и панели результата — как в исходной версии; свои правки сняты по просьбе пользователя) */
/* ---------- СТУДИЯ: только генерация слева и результат справа ---------- */
body.vf-view-studio .vf-film { display: none !important; }
body.vf-view-studio .veo-chat-message--user { display: none !important; }
body.vf-view-studio .veo-chat-message.vf-active { max-width: 100% !important; align-self: center !important; }
body.vf-view-studio .veo-chat-message.vf-active .veo-result-with-toolbar { align-items: center; }
body.vf-view-studio .veo-chat-message.vf-active .veo-video-block { align-items: center; }
body.vf-view-studio .veo-chat-messages { align-items: center !important; justify-content: center !important; padding: 56px 28px 32px !important; }

/* кнопка «Мои генерации» */
.vf-mygen {
    position: absolute;
    z-index: 6;
    top: 14px;
    right: 14px;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--vf-line-2);
    background: rgba(10, 10, 14, 0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: var(--vf-ink);
    font: 700 0.8rem/1 var(--vf-font);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s var(--vf-spring), border-color 0.25s, background 0.25s;
}
body.vf-view-studio .vf-mygen.has-items { display: inline-flex; }
.vf-mygen:hover { transform: translateY(-2px); border-color: var(--vf-gold); }
.vf-mygen svg { width: 17px; height: 17px; stroke: var(--vf-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vf-mygen b { min-width: 20px; padding: 3px 6px; border-radius: 999px; background: var(--vf-cta); color: var(--vf-on); font-size: 0.68rem; text-align: center; }

/* выезжающая панель с историей */
.vf-gallery {
    position: absolute;
    z-index: 7;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: inherit;
    background: rgba(4, 4, 6, 0.94);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(0.985);
    transition: opacity 0.3s ease, transform 0.5s var(--vf-ease);
}
body.vf-gal-open .vf-gallery { opacity: 1; pointer-events: auto; transform: none; }
.vf-gallery__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 8px; }
.vf-gallery__head b { font: 800 1.15rem/1 var(--vf-font); letter-spacing: -0.01em; }
.vf-gallery__close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--vf-line-2); background: var(--vf-surface-2); color: var(--vf-ink); font-size: 1.1rem; cursor: pointer; transition: transform 0.4s var(--vf-spring); }
.vf-gallery__close:hover { transform: rotate(90deg) scale(1.1); background: var(--vf-cta); color: var(--vf-on); }
.vf-gallery__grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 12px 22px 24px; align-content: start; }
.vf-gal-item { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 1px solid var(--vf-line-2); background: #0a0a0e center / cover no-repeat; cursor: pointer; padding: 0; opacity: 0; animation: vf-chip-in 0.5s var(--vf-ease) forwards; transition: transform 0.45s var(--vf-spring), border-color 0.25s, box-shadow 0.3s; }
.vf-gal-item video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vf-gal-item:hover { transform: translateY(-4px) scale(1.03); border-color: var(--vf-gold); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(236, 224, 198, 0.15); }
.vf-gal-item.is-on { border-color: var(--vf-gold); box-shadow: 0 0 0 2px rgba(236, 224, 198, 0.25), 0 0 34px rgba(236, 224, 198, 0.3); }
.vf-gal-item i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: var(--vf-dim); }
.vf-gal-item .vf-film__spin::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(247, 239, 222, 0.2); border-top-color: #f7efde; animation: vf-spin-ring 0.9s linear infinite; }
.vf-gal-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85)); font-size: 0.68rem; line-height: 1.35; color: var(--vf-ink); text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 960px) {
    body.vf-view-studio.mobile-version .vf-mygen { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 112px); right: 12px; }
    body.vf-view-studio.mobile-version .vf-gallery { position: fixed; inset: 0; border-radius: 0; z-index: 9000; }
    body.vf-view-studio.mobile-version .veo-chat-messages { padding: 24px 12px 150px !important; }
}
body.veo-generation-body .veo-chat-message--assistant .veo-generating-placeholder { width: min(calc(86vw / var(--vf-z, 1)), 460px) !important; min-width: 0; min-height: 320px; aspect-ratio: 1 / 1; max-height: calc(60vh / var(--vf-z, 1)); }
body.vf-view-studio .veo-chat-message.vf-active .veo-generating-placeholder { width: min(80%, 520px) !important; min-height: 0; aspect-ratio: 1 / 1; max-height: calc(calc(100vh / var(--vf-z, 1)) - 220px); }
body.veo-generation-body .veo-generating-caption { white-space: nowrap; }
body.vf-view-chat .veo-chat-title-bar { position: sticky; top: 0; z-index: 4; }