/* ═══ Чат (/chat, /chat/<id>) ══════════════════════════════════════════
   Слева — стеклянная панель чатов, справа — лента и строка ввода. Пустой
   чат — крупный заголовок, строка ввода по центру и четыре примера.
   Акцент (переливающаяся заливка) — только у кнопки «Отправить»; выбранное
   отмечается лёгким оттенком и светящейся кромкой. Все классы — с cx-. */

.cx {
    --side-w: 296px;
    --read-w: 820px;
    --sel-bg: linear-gradient(100deg, rgba(167, 159, 208, 0.17), rgba(146, 196, 198, 0.07));
    --sel-ring: inset 0 0 0 1px rgba(201, 193, 230, 0.3);
    position: relative;
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    height: calc(100dvh - var(--nav-h) - var(--tabs-h));
    overflow: hidden;
    transition: grid-template-columns var(--dur-3) var(--ease-out);
}
.cx[data-side="closed"] { grid-template-columns: 0px minmax(0, 1fr); }

/* ── Кнопки-значки ─────────────────────────────────────────────────────── */
.cx-iconbtn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-3);
    transition: background var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.cx-iconbtn:hover { background: var(--glass-2); color: var(--text); }
.cx-iconbtn:active { transform: scale(0.94); }
.cx-iconbtn svg { width: 19px; height: 19px; }

/* ═══ Левая панель ═══════════════════════════════════════════════════ */
.cx-side {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    margin: 12px 0 12px 12px;
    border-radius: var(--r-2xl);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 45%),
        rgba(10, 10, 15, 0.74);
    /* Без backdrop-filter: под панелью всё время плывёт фон — размытие
       пересчитывалось каждый кадр, а на мягком фоне его почти не видно. */
    box-shadow: var(--sh-2);
    overflow: hidden;
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), margin var(--dur-3) var(--ease-out);
}
.cx-side::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    background: var(--edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.cx[data-side="closed"] .cx-side { opacity: 0; transform: translateX(-24px); pointer-events: none; margin-right: -12px; }

.cx-side-head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 10px; }
.cx-newbtn {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px var(--line), 0 8px 20px -12px rgba(0, 0, 0, 0.9);
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    transition: background var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.cx-newbtn svg { width: 18px; height: 18px; color: var(--text-2); }
.cx-newbtn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px var(--line-2), 0 10px 26px -12px rgba(226, 222, 242, 0.113); }
.cx-newbtn:active { transform: scale(0.98); }
.cx-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cx-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    margin: 0 12px 6px;
    padding: 0 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow var(--dur-2) ease, background var(--dur-2) ease;
}
.cx-search:focus-within { background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px rgba(201, 193, 230, 0.45), 0 0 0 3px rgba(167, 159, 208, 0.12); }
.cx-search svg { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; }
.cx-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: var(--fs-md); }
.cx-search input::placeholder { color: var(--text-3); }
.cx-search input::-webkit-search-cancel-button { filter: invert(0.7); }

.cx-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 8px 16px;
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 22px), transparent);
    mask: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 22px), transparent);
}
.cx-group + .cx-group { margin-top: 8px; }
.cx-group-label {
    padding: 12px 10px 6px;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-4);
}
.cx-item {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 12px;
    transition: background var(--dur-1) ease, box-shadow var(--dur-2) ease;
}
.cx-item + .cx-item { margin-top: 1px; }
.cx-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 38px 0 10px;
    border-radius: inherit;
    color: var(--text-2);
    font-size: var(--fs-md);
    transition: color var(--dur-1) ease;
}
.cx-item-logo { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.55; transition: opacity var(--dur-2) ease; }
.cx-item-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-item:hover { background: rgba(255, 255, 255, 0.05); }
.cx-item:hover .cx-item-link { color: var(--text); }
.cx-item:hover .cx-item-logo { opacity: 0.9; }
.cx-item.is-active { background: var(--sel-bg); box-shadow: var(--sel-ring); }
.cx-item.is-active .cx-item-link { color: var(--text); font-weight: var(--fw-medium); }
.cx-item.is-active .cx-item-logo { opacity: 1; }
.cx-item-more {
    position: absolute;
    right: 4px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-3);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--dur-1) ease, background var(--dur-1) ease, color var(--dur-1) ease;
}
.cx-item-more svg { width: 18px; height: 18px; }
.cx-item:hover .cx-item-more, .cx-item:focus-within .cx-item-more, .cx-item.is-active .cx-item-more, .cx-item-more[aria-expanded="true"] { opacity: 1; }
.cx-item-more:hover, .cx-item-more[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.cx-item.is-editing { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(201, 193, 230, 0.45); }
.cx-rename {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--fs-md);
}

.cx-list-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 18px; text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.cx-list-empty svg { width: 26px; height: 26px; opacity: 0.6; }

.cx-side-login { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 14px; text-align: center; }
.cx-side-login b { font-size: var(--fs-base); }
.cx-side-login p { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 8px; }
.cx-side-login-art {
    width: 84px;
    height: 84px;
    margin-bottom: 8px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--line-2), 0 18px 50px -12px rgba(226, 222, 242, 0.12);
}
.cx-side-login-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }

.cx-side-foot { padding: 10px 16px 14px; border-top: 1px solid var(--line); min-height: 44px; }
.cx-side-foot:empty { display: none; }
.cx-sync { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-3); }
.cx-sync svg { width: 15px; height: 15px; }
.cx-sync.is-ok svg { color: var(--success); opacity: 0.8; }
.cx-sync.is-busy svg { animation: cx-pulse 1.2s ease-in-out infinite; }
.cx-sync.is-error { color: var(--warn); }

.cx-scrim { display: none; }

/* ═══ Правая часть ═══════════════════════════════════════════════════ */
.cx-main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.cx-top {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    flex: 0 0 auto;
    padding: 8px 20px 0;
}
.cx-open, .cx-top-new { display: none; }
.cx[data-side="closed"] .cx-open, .cx[data-side="closed"] .cx-top-new { display: inline-grid; }
.cx-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.25; text-align: center; }
.cx-title-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.cx-title-model { font-size: var(--fs-xs); color: var(--text-3); }
.cx.is-empty .cx-title { visibility: hidden; }
.cx[data-side="open"] .cx-top::after { content: ''; width: 40px; flex: 0 0 auto; }
.cx[data-side="open"] .cx-top::before { content: ''; width: 40px; flex: 0 0 auto; }

.cx-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    outline: none;
    scrollbar-gutter: stable;
}
.cx-thread {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: calc(var(--read-w) + 48px);
    margin: 0 auto;
    padding: 18px 24px 36px;
}
.cx.is-empty .cx-thread, .cx.is-empty .cx-dock { display: none; }
.cx:not(.is-empty) .cx-hero { display: none; }
.cx-loading { display: grid; place-items: center; padding: 80px 0; }

.cx-dock {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: calc(var(--read-w) + 48px);
    margin: 0 auto;
    padding: 0 24px max(16px, env(safe-area-inset-bottom));
}
.cx-dock::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -36px;
    height: 36px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
    pointer-events: none;
}
.cx-down {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 16px);
    z-index: 5;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(24, 24, 32, 0.95);
    box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px -8px rgba(0, 0, 0, 0.9);
    color: var(--text);
    transform: translateX(-50%);
    animation: cx-pop var(--dur-3) var(--ease-out);
}
.cx-down svg { width: 18px; height: 18px; }
.cx-down:hover { background: rgba(36, 36, 48, 0.95); }

/* ── Пустой экран ──────────────────────────────────────────────────────── */
.cx-hero {
    display: flex;
    justify-content: center;
    min-height: 100%;
    padding: clamp(20px, 8vh, 96px) 24px 48px;
}
.cx-hero-in { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(100%, 1060px); }
/* Мягкое дыхание сияния за заголовком и строкой ввода — глубина без лишнего акцента. */
.cx-hero-in::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -60px;
    left: 50%;
    width: min(980px, 110%);
    height: 420px;
    transform: translateX(-50%);
    background:
        radial-gradient(40% 45% at 38% 45%, rgba(157, 149, 204, 0.2), rgba(157, 149, 204, 0.07) 45%, transparent 76%),
        radial-gradient(38% 40% at 64% 55%, rgba(136, 185, 189, 0.12), rgba(136, 185, 189, 0.04) 45%, transparent 76%);
    /* Мягкость — спадом градиента, без filter: blur (он пересчитывался каждый кадр дыхания). */
    pointer-events: none;
    animation: cx-breathe 10s var(--ease-in-out) infinite alternate;
}
@keyframes cx-breathe { from { opacity: 0.65; transform: translateX(-50%) scale(0.96); } to { opacity: 1; transform: translateX(-50%) scale(1.04); } }
.cx-hero-head { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 900px; }
/* Двойник этого заголовка из HTML сервера — css/pages.css (/chat, LCP): размер
   шрифта, высота строки и отступы героя меняйте в обоих местах. */
.cx-hero-title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: clamp(22px, 2.7vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 0 40px rgba(226, 222, 242, 0.045);
}
.cx-hero-name {
    background: var(--aurora-flow);
    background-size: 200% 100%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: aurora-flow 14s linear infinite;
}
.cx-hero-slot { width: min(100%, 780px); margin-top: 18px; }
/* С записью SEO (pages/chat.js renderHero): <h1> — что это за страница,
   приветствие — подзаголовком под ним, вводный абзац — тихой строкой под
   примерами (строка ввода остаётся на первом экране). */
.cx-hero-head.has-sub { flex-direction: column; gap: 10px; text-align: center; }
.cx-hero-sub {
    color: var(--text-2);
    font-size: clamp(16px, 1.35vw, 19px);
    font-weight: var(--fw-medium);
    line-height: 1.35;
    text-wrap: balance;
}
.cx-hero-note {
    max-width: 700px;
    margin-top: 22px;
    color: var(--text-3);
    font-size: var(--fs-md);
    line-height: 1.55;
    text-align: center;
    text-wrap: pretty;
}
/* Блок «Как это работает, цены, вопросы» — ниже героя пустого чата, в той же
   прокрутке; у открытого чата его нет. */
.cx:not(.is-empty) .cx-seo { display: none; }
.cx-seo > .seo-slot > .seo-doc { padding-top: 8px; }

.cx-sugs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-top: 40px;
}
.cx-sug {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), rgba(10, 10, 15, 0.6);
    box-shadow: var(--sh-1);
    color: var(--text);
    text-align: left;
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.cx-sug::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1px;
    border-radius: inherit;
    background: var(--edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background var(--dur-2) ease;
}
.cx-sug-art { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.cx-sug-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 900ms var(--ease-out), filter var(--dur-3) ease; filter: saturate(0.9) brightness(0.86); }
.cx-sug-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 10, 15, 0.92)); }
.cx-sug-body { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 0 14px 14px; margin-top: -18px; }
.cx-sug-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.cx-sug-title svg { width: 16px; height: 16px; color: var(--text-2); }
.cx-sug-text { font-size: 12.5px; line-height: 1.45; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-sug:hover { transform: translateY(-3px); box-shadow: var(--sh-3), 0 26px 60px -30px var(--glow-violet); }
.cx-sug:hover::before { background: linear-gradient(135deg, rgba(204, 197, 231, 0.6), rgba(191, 222, 223, 0.25) 50%, rgba(209, 219, 192, 0.4)); }
.cx-sug:hover .cx-sug-art img { transform: scale(1.08); filter: saturate(1.05) brightness(1); }
.cx-sug:active { transform: translateY(-1px) scale(0.99); }

/* ═══ Строка ввода ═══════════════════════════════════════════════════ */
.cx-composer {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px 10px 16px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 55%),
        rgba(12, 12, 18, 0.88);
    /* Без backdrop-filter: под строкой всё время переливается живой фон чата —
       размытие считалось каждый кадр. Заливка плотнее — текст под ней не мельтешит. */
    box-shadow: var(--sh-2), 0 30px 80px -40px rgba(0, 0, 0, 0.9);
    transition: box-shadow var(--dur-3) var(--ease-out);
}
.cx-composer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    background: var(--edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background var(--dur-3) ease, opacity var(--dur-3) ease;
}
/* Кольцо сияния при фокусе. */
.cx-composer::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 1;
    padding: 1.5px;
    border-radius: 27px;
    background: conic-gradient(from var(--cx-a, 0deg), #ccc5e7, #b7c3e4, #bfdedf, #d1dbc0, #ccc5e7);
    -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 var(--dur-3) ease;
}
@property --cx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cx-composer:focus-within::after { opacity: 0.85; animation: cx-spin 8s steps(160) infinite; }   /* угол градиента — перерисовка: 20 раз в секунду, а не каждый кадр */
.cx-composer:focus-within { box-shadow: var(--sh-2), 0 0 0 5px rgba(167, 159, 208, 0.08), 0 26px 80px -34px rgba(226, 222, 242, 0.1); }
.cx-composer.is-flash::after { animation: cx-flash 900ms var(--ease-out); }

.cx-input {
    display: block;
    width: 100%;
    min-height: 30px;
    max-height: 240px;
    padding: 4px 4px 6px 2px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
    resize: none;
    overflow-y: hidden;
}
.cx-input::placeholder { color: var(--text-3); }
.cx.is-empty .cx-input { min-height: 56px; }

.cx-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-tools { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.cx-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.cx-tool {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    min-width: 0;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition: background var(--dur-1) ease, color var(--dur-1) ease, box-shadow var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.cx-tool svg { width: 16px; height: 16px; flex: 0 0 auto; }
.cx-tool:hover { background: rgba(255, 255, 255, 0.085); color: var(--text); }
.cx-tool:active { transform: scale(0.96); }
.cx-tool.is-on, .cx-tool[aria-expanded="true"] { background: var(--sel-bg); box-shadow: var(--sel-ring); color: var(--text); }
.cx-tool.is-on svg { color: var(--cyan-hi); }
.cx-tool-icon { width: 36px; padding: 0; justify-content: center; }
.cx-tool-icon svg { width: 18px; height: 18px; }
.cx-model { padding-left: 6px; }
.cx-model .cx-logo { width: 24px; height: 24px; padding: 3px; border-radius: 8px; background: #16161e; box-shadow: inset 0 0 0 1px var(--line-2); }
.cx-model-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: var(--fw-semibold); }
.cx-chev { width: 14px !important; height: 14px !important; color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
.cx-tool[aria-expanded="true"] .cx-chev { transform: rotate(180deg); }
.cx-logo { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }

.cx-mic.is-on, .cx-mic[aria-pressed="true"] { color: var(--danger); background: var(--danger-bg); }
.cx-send { --h: 40px; border-radius: 50%; }
.cx-send svg { width: 19px; height: 19px; }
.cx-send.btn-primary:disabled {
    opacity: 1;
    color: var(--text-4);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px var(--line);
}
.cx-send.btn-primary:disabled::after { display: none; }
.cx-send.is-stop {
    color: #07070b;
    background: linear-gradient(180deg, #ffffff, #d9d9e4);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -10px rgba(255, 255, 255, 0.5);
}
.cx-send.is-stop::after { display: none; }
.cx-stop-ic { width: 14px !important; height: 14px !important; fill: currentColor; stroke: none; }

/* Вложения до отправки. */
.cx-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px; }
.cx-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 64px;
    max-width: 220px;
    padding: 0 30px 0 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--line-2);
    overflow: hidden;
    animation: cx-pop var(--dur-3) var(--ease-out);
}
.cx-file.is-img { width: 64px; padding: 0; }
.cx-file.is-img img { width: 100%; height: 100%; object-fit: cover; }
.cx-file-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; background: rgba(167, 159, 208, 0.14); color: var(--violet-hi); }
.cx-file-ic svg { width: 18px; height: 18px; }
.cx-file-name { min-width: 0; font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-file-state { position: absolute; inset: 0; display: none; place-items: center; background: rgba(0, 0, 0, 0.5); }
.cx-file.is-up .cx-file-state, .cx-file.is-err .cx-file-state { display: grid; }
.cx-ring {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: conic-gradient(var(--cyan-hi) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.16) 0);
    -webkit-mask: radial-gradient(circle, transparent 8.5px, #000 9.5px);
    mask: radial-gradient(circle, transparent 8.5px, #000 9.5px);
}
.cx-file.is-err .cx-ring { background: var(--danger); }
.cx-file-x {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
}
.cx-file-x svg { width: 12px; height: 12px; }
.cx-file-x::after { content: ''; position: absolute; inset: -8px; }

/* Запись голоса. */
.cx-rec { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 2px 0 4px; }
.cx-composer.is-recording .cx-input { display: none; }
.cx-composer.is-recording .cx-tools { opacity: 0.35; pointer-events: none; }
.cx-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 12px var(--danger); animation: cx-pulse 1.1s ease-in-out infinite; flex: 0 0 auto; }
.cx-rec-time { font-size: var(--fs-md); font-weight: var(--fw-semibold); min-width: 36px; }
.cx-rec-bars { flex: 1 1 auto; display: flex; align-items: center; gap: 3px; height: 28px; min-width: 0; overflow: hidden; }
.cx-rec-bars i { flex: 1 1 0; max-width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--cyan-hi), var(--violet-hi)); opacity: 0.8; transform: scaleY(0.15); transition: transform 90ms linear; }
.cx-rec-label { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.cx-rec-ok { color: var(--success); }
.cx-composer.is-transcribing .cx-rec-bars i { animation: cx-wave 1s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1ms); }
.cx-composer.is-transcribing .cx-rec-dot { background: var(--cyan-hi); box-shadow: 0 0 12px var(--glow-cyan); }

/* Дискуссия: три модели в строке ввода. */
.cx-disc-slots { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.cx-disc-label { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 4px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); white-space: nowrap; }
.cx-disc-label svg { width: 16px; height: 16px; color: var(--cyan-hi); }
.cx-disc-slot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    min-width: 0;
    max-width: 150px;
    padding: 0 10px 0 6px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--sel-bg);
    box-shadow: var(--sel-ring);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition: background var(--dur-1) ease;
}
.cx-disc-slot span { overflow: hidden; text-overflow: ellipsis; }
.cx-disc-slot .cx-logo { width: 22px; height: 22px; padding: 3px; border-radius: 7px; background: #16161e; }
.cx-disc-slot:hover { background: linear-gradient(100deg, rgba(167, 159, 208, 0.25), rgba(146, 196, 198, 0.12)); }

/* Меню «+», размышлений и чата. */
.popover.cx-pop-menu { min-width: 250px; max-width: min(340px, calc(100vw - 16px)); padding: 6px; }
.cx-menu { display: flex; flex-direction: column; gap: 2px; }
.cx-menu .menu-item { min-height: 42px; font-size: var(--fs-md); }
.cx-menu .menu-item[aria-checked="true"], .cx-menu .menu-item[aria-pressed="true"] { background: var(--sel-bg); box-shadow: var(--sel-ring); }
.cx-menu .menu-item .mi-end svg { color: var(--cyan-hi); width: 16px; height: 16px; }
.cx-menu-title { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.cx-menu-title svg { width: 15px; height: 15px; }
.cx-menu-note { padding: 6px 12px 8px; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-3); border-top: 1px solid var(--line); margin-top: 4px; }
.cx-lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; width: 26px; flex: 0 0 auto; }
.cx-lvl i { flex: 1 1 0; border-radius: 1.5px; background: rgba(255, 255, 255, 0.14); }
.cx-lvl i:nth-child(1) { height: 30%; } .cx-lvl i:nth-child(2) { height: 45%; } .cx-lvl i:nth-child(3) { height: 60%; }
.cx-lvl i:nth-child(4) { height: 75%; } .cx-lvl i:nth-child(5) { height: 90%; } .cx-lvl i:nth-child(6) { height: 100%; }
.cx-lvl i.on { background: linear-gradient(180deg, var(--cyan-hi), var(--violet-hi)); }

/* ═══ Сообщения ══════════════════════════════════════════════════════ */
.cx-msg { position: relative; min-width: 0; }
.cx-msg.is-new, .cx-msg.is-live { animation: cx-in var(--dur-3) var(--ease-out) both; }

.cx-msg.is-user { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cx-msg.is-user .cx-acts { position: absolute; right: 0; top: 100%; margin: 2px -6px 0 0; }
.cx-bubble {
    max-width: min(80%, 640px);
    padding: 11px 16px;
    border-radius: 20px 20px 6px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.055));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 30px -18px rgba(0, 0, 0, 0.9);
    font-size: 15.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.cx-atts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: min(80%, 640px); }
.cx-att {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    max-width: 240px;
    padding: 0 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: var(--fs-sm);
    color: var(--text-2);
}
.cx-att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-att svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--violet-hi); }
.cx-att.is-img { width: 132px; height: 132px; padding: 0; overflow: hidden; border-radius: 16px; }
.cx-att.is-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.cx-att.is-img:hover img { transform: scale(1.04); }
.cx-att.is-gone { justify-content: center; width: 72px; height: 72px; }

.cx-msg.is-bot { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.cx-av {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(180deg, #1c1c27, #101016);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px var(--line-2), 0 8px 18px -8px rgba(0, 0, 0, 0.9);
}
.cx-av-img { width: 20px; height: 20px; object-fit: contain; }
.cx-av.is-disc svg { width: 18px; height: 18px; color: var(--cyan-hi); }
.cx-msg.is-live .cx-av::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    padding: 1.5px;
    background: conic-gradient(from var(--cx-a, 0deg), transparent 0 55%, #b7c3e4 75%, #bfdedf 90%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: cx-spin 1.6s linear infinite;
}
.cx-bot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cx-bot-name { margin-top: 7px; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-3); letter-spacing: 0.01em; }
.cx-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cx-body:empty, .cx-tail:empty, .cx-foot:empty, .cx-think-slot:empty { display: none; }
.cx-tail { display: flex; flex-direction: column; gap: 12px; }
.cx-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-typing { display: none; gap: 5px; align-items: center; height: 24px; }
.cx-msg.is-waiting .cx-typing { display: flex; }
.cx-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: cx-dot 1.2s ease-in-out infinite; }
.cx-typing i:nth-child(2) { animation-delay: 0.15s; }
.cx-typing i:nth-child(3) { animation-delay: 0.3s; }

.cx-acts { display: flex; align-items: center; gap: 2px; margin-left: -6px; min-height: 32px; opacity: 0; transition: opacity var(--dur-2) ease; }
.cx-acts:empty { display: none; }
.cx-msg:hover .cx-acts, .cx-msg:focus-within .cx-acts, .cx-msg.is-bot.is-last .cx-acts { opacity: 1; }
.cx-acts-user { margin: 0 -6px 0 0; }
.cx-act {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-3);
    transition: background var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.cx-act svg { width: 16px; height: 16px; }
.cx-act:hover { background: var(--glass-2); color: var(--text); }
.cx-act:active { transform: scale(0.9); }
.cx-act.is-on { color: var(--cyan-hi); }
.cx-act[hidden] { display: none; }

/* ── Размышления ───────────────────────────────────────────────────────── */
.cx-think {
    max-width: 700px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
}
.cx-think-head {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-align: left;
}
.cx-think-head:hover { color: var(--text-2); }
.cx-think-head svg { width: 16px; height: 16px; flex: 0 0 auto; }
.cx-think-head .cx-chev { margin-left: auto; }
.cx-think.is-open .cx-think-head .cx-chev { transform: rotate(180deg); }
.cx-think.is-live .cx-think-head > svg:first-child { color: var(--violet-hi); animation: cx-pulse 1.4s ease-in-out infinite; }
.cx-think.is-live .cx-think-label {
    /* Мягкий блик: широкий и плавный, без чёткой светлой полосы. */
    background: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 22%, rgba(255, 255, 255, 0.72) 50%, var(--text-3) 78%, var(--text-3) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: cx-shine 1.8s linear infinite;
}
.cx-think-body { max-height: 0; overflow: hidden; transition: max-height var(--dur-3) var(--ease-out); }
.cx-think.is-open .cx-think-body { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.cx-think.is-live.is-open .cx-think-body {
    max-height: 150px;
    -webkit-mask: linear-gradient(180deg, transparent, #000 26px);
    mask: linear-gradient(180deg, transparent, #000 26px);
}
.cx-think-text { padding: 0 16px 14px 37px; font-size: 13.5px; line-height: 1.62; color: var(--text-3); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Markdown ответа ───────────────────────────────────────────────────── */
.md { font-size: 15.5px; line-height: 1.72; color: rgba(244, 244, 247, 0.93); overflow-wrap: anywhere; min-width: 0; }
.md :where(p, ul, ol, pre, blockquote, table, figure) { margin: 0; }
.md > * + * { margin-top: 0.85em; }
.md h1, .md h2, .md h3, .md h4 { font-family: var(--font-ui); font-weight: 650; line-height: 1.3; color: #fff; letter-spacing: -0.01em; margin-bottom: 0; }
.md > :is(h1, h2, h3, h4) { margin-top: 1.4em; }
.md > :first-child { margin-top: 0; }
.md h1 { font-size: 1.5em; } .md h2 { font-size: 1.3em; } .md h3 { font-size: 1.14em; } .md h4 { font-size: 1.02em; }
.md ul, .md ol { padding-left: 1.45em; }
.md li + li { margin-top: 0.35em; }
.md li > ul, .md li > ol { margin-top: 0.35em; }
.md li::marker { color: var(--text-3); }
.md strong { color: #fff; font-weight: 650; }
.md em { color: var(--text); }
.md a { color: var(--blue-hi); text-decoration: underline; text-decoration-color: rgba(183, 195, 228, 0.4); text-underline-offset: 3px; transition: text-decoration-color var(--dur-1) ease; }
.md a:hover { text-decoration-color: currentColor; }
.md :not(pre) > code {
    padding: 0.14em 0.42em;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    font-family: var(--font-mono);
    font-size: 0.87em;
    color: #e9e6ff;
}
.md blockquote { margin-left: 0; padding: 0.15em 0 0.15em 1em; border-left: 3px solid rgba(201, 193, 230, 0.45); color: var(--text-2); }
.md hr { height: 1px; border: 0; margin: 1.5em 0; background: linear-gradient(90deg, transparent, var(--line-3), transparent); }
.md img { max-width: 100%; border-radius: 12px; }
.md-code {
    border-radius: 14px;
    overflow: hidden;
    background: #09090e;
    box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 44px -26px rgba(0, 0, 0, 0.95);
}
.md-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 6px 0 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--line);
}
.md-lang { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); text-transform: lowercase; }
.md-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    font-size: 12px;
    font-weight: var(--fw-medium);
    transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.md-copy:hover { background: var(--glass-2); color: var(--text); }
.md-copy.is-done { color: var(--success); }
.md pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.62; tab-size: 4; }
.md pre code { font-family: inherit; color: #d9d8e8; background: none; }
.md-table { overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.md table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.md th { text-align: left; font-weight: var(--fw-semibold); color: var(--text); background: rgba(255, 255, 255, 0.045); }
.md th, .md td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.md tr:last-child td { border-bottom: 0; }
.md tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.md-math:not([data-tex]) { font-family: var(--font-mono); font-size: 0.9em; color: var(--text-2); }
.md-math.is-block { display: block; margin: 0.9em 0; overflow-x: auto; overflow-y: hidden; text-align: center; }
.md .katex { font-size: 1.08em; }
.md-caret {
    display: inline-block;
    width: 0.5em;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: -0.16em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--cyan-hi), var(--violet-hi));
    box-shadow: 0 0 12px var(--glow-cyan);
    animation: cx-caret 0.9s ease-in-out infinite alternate;
}

/* Подсветка кода: приглушённые цвета сияния. */
.md .hljs-keyword, .md .hljs-selector-tag, .md .hljs-built_in, .md .hljs-doctag { color: #cfc7e8; }
.md .hljs-string, .md .hljs-regexp, .md .hljs-addition, .md .hljs-template-variable { color: #cbd6bb; }
.md .hljs-number, .md .hljs-literal, .md .hljs-symbol, .md .hljs-bullet { color: #e5cdb0; }
.md .hljs-comment, .md .hljs-quote { color: rgba(244, 244, 247, 0.38); font-style: italic; }
.md .hljs-title, .md .hljs-title.function_, .md .hljs-section { color: #bdc9e7; }
.md .hljs-attr, .md .hljs-attribute, .md .hljs-property, .md .hljs-params { color: #c2dfe1; }
.md .hljs-type, .md .hljs-title.class_, .md .hljs-class { color: #ddc2d0; }
.md .hljs-tag, .md .hljs-name, .md .hljs-selector-id, .md .hljs-selector-class { color: #ddc2d0; }
.md .hljs-meta, .md .hljs-meta .hljs-keyword { color: rgba(244, 244, 247, 0.55); }
.md .hljs-variable, .md .hljs-subst { color: #eceaf6; }
.md .hljs-deletion { color: #ff8a96; }
.md .hljs-emphasis { font-style: italic; }
.md .hljs-strong { font-weight: 700; }

/* ── Генерация в чате: карточка «рисую / снимаю» ───────────────────────
   Кадр в формате результата с живой анимацией (сияние, сетка, блик, пылинки,
   ядро), статус с таймером и полосой; справа (у широких кадров — снизу)
   модель, промпт, плашки и цена. Наклон за курсором — --px/--py (−0.5…0.5). */
.cx-gen {
    --fh: clamp(240px, 48vh, 400px);        /* высота кадра у вертикальных и квадратных */
    --tilt: 1;
    position: relative;
    display: flex;
    align-items: stretch;
    align-self: flex-start;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 7px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px var(--line-2), var(--sh-2);
    animation: cx-in var(--dur-3) var(--ease-out) both;
}
.cx-gen.is-wide { flex-direction: column; width: min(100%, 640px); }
.cx-gen-stage { position: relative; flex: 0 1 auto; width: calc(var(--fh) * var(--arn, 1)); max-width: 100%; min-width: 0; perspective: 1100px; }
.cx-gen.is-wide .cx-gen-stage { flex: 0 0 auto; width: 100%; }

/* Ореол сияния за кадром — даёт глубину, пока идёт генерация. */
.cx-gen-stage::before {
    content: '';
    position: absolute;
    inset: 10% 8%;
    z-index: 0;
    border-radius: 40px;
    /* Ореол — цветные тени вокруг скруглённого прямоугольника (рисуются один
       раз), дышит transform/opacity. Раньше: конический градиент с blur(42px),
       угол которого менялся каждый кадр, — размытие считалось заново каждый кадр. */
    box-shadow:
        0 -22px 70px 18px rgba(167, 159, 208, 0.62),
        30px -4px 70px 14px rgba(147, 163, 207, 0.5),
        24px 24px 70px 14px rgba(146, 196, 198, 0.5),
        -18px 26px 70px 14px rgba(185, 199, 164, 0.4),
        -30px -6px 70px 14px rgba(207, 170, 189, 0.46);
    opacity: 0.42;
    animation: cx-halo 4.5s var(--ease-in-out) infinite alternate;
    transition: opacity 1200ms ease;
    pointer-events: none;
}
@keyframes cx-halo {
    from { transform: rotate(-3deg) scale(0.97); opacity: 0.34; }
    to { transform: rotate(3deg) scale(1.03); opacity: 0.48; }
}
.cx-gen.is-done .cx-gen-stage::before, .cx-gen.is-failed .cx-gen-stage::before, .cx-gen.is-detached .cx-gen-stage::before { opacity: 0; animation: none; }

.cx-gen-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: var(--ar, 1 / 1);
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    background: #05050a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 28px 60px -28px rgba(0, 0, 0, 0.95);
    transform: rotateX(calc(var(--py, 0) * -9deg * var(--tilt))) rotateY(calc(var(--px, 0) * 11deg * var(--tilt)));
    transition: transform 700ms var(--ease-out), box-shadow var(--dur-3) ease;
}
.cx-gen-frame.is-tilt { transition: transform 140ms linear, box-shadow var(--dur-3) ease; }
.cx-gen.is-done { --tilt: 0.35; }
.cx-gen.is-pending .cx-gen-frame.is-tilt { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 34px 70px -26px rgba(0, 0, 0, 0.95), 0 0 50px -18px var(--glow-violet); }

/* Анимация: три пятна сияния, сетка, пылинки, пробегающий блик, ядро. */
.cx-gen-anim { position: absolute; inset: 0; transition: opacity 900ms ease, transform 1100ms var(--ease-out), filter 900ms ease; }
.cx-gen-blob {
    position: absolute;
    width: 95%;
    height: 95%;
    border-radius: 50%;
    translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -18px);
    transition: translate 700ms var(--ease-out);
}
.cx-gen-blob.a { left: -30%; top: -35%; background: radial-gradient(closest-side, rgba(167, 159, 208, 0.95), transparent 72%); animation: cx-gen-a 7s var(--ease-in-out) infinite alternate; }
.cx-gen-blob.b { right: -35%; top: -5%; background: radial-gradient(closest-side, rgba(146, 196, 198, 0.75), transparent 72%); animation: cx-gen-b 9s var(--ease-in-out) infinite alternate; }
.cx-gen-blob.c { left: 5%; bottom: -50%; background: radial-gradient(closest-side, rgba(185, 199, 164, 0.42), transparent 72%); animation: cx-gen-c 11s var(--ease-in-out) infinite alternate; }
.cx-gen-grid {
    position: absolute;
    inset: -50% 0 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 72%);
    animation: cx-gen-grid 3.2s linear infinite;
}
.cx-gen-dust { position: absolute; inset: 0; translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 10px); transition: translate 700ms var(--ease-out); }
.cx-gen-dust i {
    position: absolute;
    left: calc(6% + var(--i) * 7.6%);
    bottom: -6px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px 1px rgba(226, 222, 242, 0.12);
    opacity: 0;
    animation: cx-gen-dust calc(4.2s + var(--i) * 0.37s) linear infinite;
    animation-delay: calc(var(--i) * -0.61s);
}
.cx-gen-dust i:nth-child(3n) { box-shadow: 0 0 8px 1px rgba(226, 222, 242, 0.12); width: 2px; height: 2px; }
.cx-gen-dust i:nth-child(4n) { box-shadow: 0 0 8px 1px rgba(226, 222, 242, 0.12); }
/* Блик сияния: косая переливающаяся полоса проходит через кадр. */
.cx-gen-sheen {
    position: absolute;
    inset: -20% -60%;
    background: linear-gradient(112deg, transparent 38%, rgba(201, 193, 230, 0.16) 44%, rgba(183, 195, 228, 0.24) 48%, rgba(191, 222, 223, 0.3) 51%, rgba(209, 219, 192, 0.16) 55%, transparent 61%);
    transform: translateX(-38%);
    animation: cx-gen-sheen 3.1s var(--ease-in-out) infinite;
}
.cx-gen-core {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 62%, transparent 70%);
    translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 22px);
    transition: translate 700ms var(--ease-out);
}
.cx-gen-core svg { position: relative; width: 26px; height: 26px; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 24px rgba(226, 222, 242, 0.12)); animation: cx-gen-pulse 2.4s var(--ease-in-out) infinite; }
.cx-gen-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.85);
    border-right-color: rgba(191, 222, 223, 0.55);
    animation: cx-gen-rot 1.6s linear infinite;
}
.cx-gen-ring.is-2 { inset: -9px; border-width: 1px; border-top-color: transparent; border-bottom-color: rgba(201, 193, 230, 0.6); border-left-color: rgba(209, 219, 192, 0.35); animation-duration: 2.8s; animation-direction: reverse; }

/* Результат: из размытия и лёгкого увеличения — в резкость. */
.cx-gen-media { position: absolute; inset: 0; z-index: 1; }
.cx-gen-media:empty { display: none; }
.cx-gen-media img, .cx-gen-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cx-gen-media video { object-fit: contain; background: #000; }
.cx-gen-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cx-gen:not(.is-static) .cx-gen-media > * { transition: opacity 800ms ease, filter 1100ms var(--ease-out), transform 1100ms var(--ease-out); }
.cx-gen.is-loading .cx-gen-media > * { opacity: 0; filter: blur(22px) saturate(1.3); transform: scale(1.06); }
.cx-gen.is-done:not(.is-loading) .cx-gen-anim { opacity: 0; transform: scale(1.08); pointer-events: none; }
.cx-gen.is-static .cx-gen-anim { display: none; }
.cx-gen-open img { transition: transform 700ms var(--ease-out); }
.cx-gen.is-done .cx-gen-frame:hover .cx-gen-open img { transform: scale(1.025); }
/* Вспышка в момент проявления. */
.cx-gen.is-reveal .cx-gen-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), rgba(201, 193, 230, 0.18) 40%, transparent 70%);
    pointer-events: none;
    animation: cx-gen-flash 1100ms var(--ease-out) forwards;
}

/* Блик стекла за курсором. */
.cx-gen-glare {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at calc((var(--px, 0) + 0.5) * 100%) calc((var(--py, 0) + 0.5) * 100%), rgba(255, 255, 255, 0.085), transparent 46%);   /* без soft-light: слабее, обычным наложением */
    opacity: 0;
    transition: opacity var(--dur-3) ease;
    pointer-events: none;
}
.cx-gen-frame.is-tilt .cx-gen-glare { opacity: 1; }

.cx-gen-status {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px 0 10px;
    border-radius: var(--r-pill);
    background: rgba(8, 8, 14, 0.74);   /* без backdrop-filter: под плашкой анимация — размытие каждый кадр */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
    font-weight: var(--fw-semibold);
    color: var(--text);
    transition: opacity 600ms ease, transform 600ms var(--ease-out);
}
.cx-gen-status { max-width: calc(100% - 24px); white-space: nowrap; }
.cx-gen-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-gen-time { color: var(--text-3); font-weight: var(--fw-medium); }
.cx-gen.is-detached .cx-gen-status { opacity: 0; pointer-events: none; }
.cx-gen-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-hi); box-shadow: 0 0 10px var(--glow-cyan); animation: cx-pulse 1.2s ease-in-out infinite; }
.cx-gen.is-done:not(.is-loading) .cx-gen-status { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.cx-gen.is-done .cx-gen-dot { background: var(--success); box-shadow: 0 0 10px var(--success); }
.cx-gen.is-failed .cx-gen-dot { background: var(--danger); box-shadow: 0 0 10px var(--danger); animation: none; }
.cx-gen.is-detached .cx-gen-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: none; }
.cx-gen.is-failed .cx-gen-anim, .cx-gen.is-detached .cx-gen-anim { filter: grayscale(0.85) brightness(0.55); }
.cx-gen.is-failed .cx-gen-anim *, .cx-gen.is-detached .cx-gen-anim * { animation-play-state: paused; }
.cx-gen.is-failed .cx-gen-frame { box-shadow: inset 0 0 0 1px rgba(255, 92, 108, 0.35), 0 28px 60px -28px rgba(0, 0, 0, 0.95); }

.cx-gen-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(255, 255, 255, 0.07); transition: opacity 700ms ease 300ms; }
.cx-gen-bar > span { display: block; height: 100%; background: var(--aurora-vivid); box-shadow: 0 0 14px var(--glow-cyan); transform-origin: left; transform: scaleX(0.04); transition: transform 1000ms var(--ease-out); }
.cx-gen.is-done .cx-gen-bar, .cx-gen.is-failed .cx-gen-bar, .cx-gen.is-detached .cx-gen-bar { opacity: 0; }

.cx-gen-acts { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-out); }
.cx-gen.is-done .cx-gen-frame:hover .cx-gen-acts, .cx-gen.is-done .cx-gen-frame:focus-within .cx-gen-acts { opacity: 1; transform: none; }
.cx-gen:not(.is-done) .cx-gen-acts { display: none; }
.cx-gen-act {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 11px;
    color: var(--text);
    background: rgba(8, 8, 14, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: background var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.cx-gen-act:hover { background: rgba(20, 20, 30, 0.8); }
.cx-gen-act:active { transform: scale(0.94); }
.cx-gen-act svg { width: 17px; height: 17px; }

/* Сведения о генерации. */
.cx-gen-info { flex: 1 0 200px; max-width: 250px; display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 12px 10px 10px 12px; }
.cx-gen.is-wide .cx-gen-info {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'eye eye' 'model price' 'prompt prompt' 'chips btns' 'hint hint';
    align-items: center;
    gap: 9px 14px;
    padding: 10px 8px 6px;
}
.cx-gen.is-wide .cx-gen-eyebrow { grid-area: eye; }
.cx-gen.is-wide .cx-gen-model { grid-area: model; }
.cx-gen.is-wide .cx-gen-foot { display: contents; }
.cx-gen.is-wide .cx-gen-price { grid-area: price; justify-self: end; }
.cx-gen.is-wide .cx-gen-btns, .cx-gen.is-wide .cx-gen-lib { grid-area: btns; justify-self: end; }
.cx-gen.is-wide .cx-gen-prompt { grid-area: prompt; }
.cx-gen.is-wide .cx-gen-chips { grid-area: chips; }
.cx-gen.is-wide .cx-gen-hint { grid-area: hint; }
.cx-gen-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-hi); }
.cx-gen-eyebrow svg { width: 14px; height: 14px; }
.cx-gen.is-done .cx-gen-eyebrow { color: var(--success); }
.cx-gen.is-failed .cx-gen-eyebrow { color: var(--danger); }
.cx-gen.is-detached .cx-gen-eyebrow { color: var(--amber); }
.cx-gen.is-static .cx-gen-eyebrow { display: none; }
.cx-gen-model { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-gen-logo { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; background: #15151d; box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 16px -8px rgba(0, 0, 0, 0.8); }
.cx-gen-logo-img { width: 20px; height: 20px; object-fit: contain; }
.cx-gen-mname { display: flex; flex-direction: column; min-width: 0; }
.cx-gen-mname b { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-gen-mname small { font-size: var(--fs-xs); color: var(--text-3); }
.cx-gen-mname small:empty { display: none; }
.cx-gen-prompt {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.cx-gen.is-wide .cx-gen-prompt, .cx-gen.is-static .cx-gen-prompt { -webkit-line-clamp: 2; }
.cx-gen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-gen-chips:empty { display: none; }
.cx-gen-chips .chip svg { width: 13px; height: 13px; }
.cx-gen-chips .cx-ratio { margin-right: 1px; }
.cx-gen-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.cx-gen-foot:has(> .cx-gen-price:empty):not(:has(.cx-gen-lib, .cx-gen-btns)) { display: none; }
.cx-gen-price:empty { display: none; }
.cx-gen-cost, .cx-gen-free { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 9px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: var(--fw-semibold); white-space: nowrap; }
.cx-gen-cost { color: var(--text); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-2); }
.cx-gen-cost b { font-weight: var(--fw-bold); }
.cx-gen-cost svg { width: 12px; height: 12px; color: var(--cyan-hi); }
.cx-gen-free { color: var(--success); background: rgba(62, 224, 143, 0.1); box-shadow: inset 0 0 0 1px rgba(62, 224, 143, 0.22); }
.cx-gen-free svg { width: 13px; height: 13px; }
.cx-gen-hint { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-3); }
.cx-gen.is-failed .cx-gen-hint { color: var(--danger); font-size: var(--fs-sm); }
.cx-gen.is-detached .cx-gen-hint { color: var(--text-2); font-size: var(--fs-sm); }
.cx-gen-lib { align-self: flex-start; }
.cx-gen.is-failed .cx-gen-price { display: none; }
.cx-gen-btns { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 0 100%; }
.cx-gen-btns .btn { --h: 34px; padding: 0 12px; }

@keyframes cx-gen-a { to { transform: translate(38%, 28%) scale(1.18); } }
@keyframes cx-gen-b { to { transform: translate(-32%, 22%) scale(0.9); } }
@keyframes cx-gen-c { to { transform: translate(22%, -38%) scale(1.22); } }
@keyframes cx-gen-grid { to { transform: translateY(36px); } }
@keyframes cx-gen-dust { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 12% { opacity: 0.9; } 70% { opacity: 0.55; } 100% { opacity: 0; transform: translateY(calc(-1 * var(--fh, 360px) - 40px)) scale(1.1); } }
@keyframes cx-gen-sheen { 0% { transform: translateX(-38%); } 100% { transform: translateX(38%); } }
@keyframes cx-gen-pulse { 50% { transform: scale(1.18); opacity: 0.85; } }
@keyframes cx-gen-rot { to { transform: rotate(360deg); } }
@keyframes cx-gen-flash { from { opacity: 1; } to { opacity: 0; } }
.cx-ratio { display: inline-block; flex: 0 0 auto; border: 1.5px solid currentColor; border-radius: 3px; opacity: 0.8; }

/* ── Плашки выбора: чем рисовать, как снимать ──────────────────────────── */
.cx-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 700px;
    padding: 18px;
    border-radius: 22px;
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(167, 159, 208, 0.1), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px var(--line-2), var(--sh-2);
    animation: cx-in var(--dur-3) var(--ease-out) both;
}
.cx-pick-head { display: flex; align-items: center; gap: 12px; }
.cx-pick-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; color: var(--text); background: linear-gradient(145deg, rgba(167, 159, 208, 0.35), rgba(146, 196, 198, 0.18)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.cx-pick-ic svg { width: 20px; height: 20px; }
.cx-pick-title { flex: 1 1 auto; min-width: 0; }
.cx-pick-title b { display: block; font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.cx-pick-title span { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-3); }
.cx-pick-title span:empty { display: none; }
.cx-pick-bal:empty { display: none; }
.cx-bal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 5px 0 12px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--text);
    font-size: var(--fs-sm);
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--dur-1) ease, box-shadow var(--dur-2) ease;
}
.cx-bal:hover { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px var(--line-3); }
.cx-bal-l { color: var(--text-3); margin-right: 2px; }
.cx-bal > svg { width: 13px; height: 13px; color: var(--cyan-hi); }
.cx-bal b { font-weight: var(--fw-bold); }
.cx-bal-plus { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.cx-bal-plus svg { width: 13px; height: 13px; }

.cx-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 10px; }
.cx-mgrid.is-compact { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.cx-mcard {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 64px;
    padding: 11px 12px 11px 11px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text);
    text-align: left;
    transition: background var(--dur-1) ease, transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease, opacity var(--dur-2) ease;
}
.cx-mcard:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-1px); }
.cx-mcard[aria-checked="true"] {
    background: linear-gradient(150deg, rgba(167, 159, 208, 0.2), rgba(147, 163, 207, 0.1) 55%, rgba(146, 196, 198, 0.08));
    box-shadow: inset 0 0 0 1.5px rgba(201, 193, 230, 0.7), 0 10px 30px -14px rgba(226, 222, 242, 0.12);
}
.cx-mcard:disabled { cursor: default; }
.cx-pick:has(.cx-go.is-busy) .cx-mcard:not([aria-checked="true"]) { opacity: 0.4; }
.cx-mcard-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #15151d; box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 14px -8px rgba(0, 0, 0, 0.8); }
.cx-mcard-img { width: 22px; height: 22px; object-fit: contain; }
.cx-mgrid.is-compact .cx-mcard-logo { width: 36px; height: 36px; border-radius: 11px; }
.cx-mgrid.is-compact .cx-mcard-img { width: 20px; height: 20px; }
.cx-mcard-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-mcard-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; min-width: 0; }
.cx-mcard-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.25; overflow-wrap: anywhere; }
.cx-mcard-name .badge { flex: 0 0 auto; }
.cx-mcard-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-mcard-chips .chip { height: 22px; padding: 0 7px; font-size: 11px; gap: 4px; }
.cx-mcard-chips .chip svg { width: 11px; height: 11px; }
.cx-mcard-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; align-self: start; padding-top: 2px; }
.cx-mcard-price { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
.cx-mcard-price svg { width: 12px; height: 12px; color: var(--cyan-hi); }
.cx-mcard-quota { font-size: 12px; font-weight: var(--fw-semibold); color: var(--success); white-space: nowrap; }
.cx-mcard-logo { position: relative; }
.cx-mcard-check {
    position: absolute;
    right: -7px;
    bottom: -7px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--on-aurora);
    background: var(--aurora);
    box-shadow: 0 0 0 3px #0b0b10, 0 4px 12px -2px rgba(226, 222, 242, 0.12);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-spring);
}
.cx-mcard-check svg { width: 12px; height: 12px; stroke-width: 2.8; }
.cx-mcard[aria-checked="true"] .cx-mcard-check { opacity: 1; transform: none; }

.cx-vsec { display: flex; flex-direction: column; gap: 9px; }
.cx-vsec[hidden] { display: none; }
.cx-vlabel { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.cx-vlabel svg { width: 14px; height: 14px; }
.cx-vval { margin-left: auto; font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0; text-transform: none; color: var(--text); }
.cx-vval:empty { display: none; }

/* Форматы — маленькие рамки в пропорции кадра. */
.cx-ars { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-arp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 86px;
    padding: 10px 6px 9px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2);
    transition: background var(--dur-1) ease, color var(--dur-1) ease, box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.cx-arp:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); color: var(--text); transform: translateY(-1px); }
.cx-arp-box { display: grid; place-items: center; width: 40px; height: 36px; }
.cx-arp-frame { display: block; border-radius: 4px; border: 1.5px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.04); transition: border-color var(--dur-2) ease, background var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.cx-arp b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.cx-arp small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.cx-arp[aria-checked="true"] { background: linear-gradient(160deg, rgba(167, 159, 208, 0.2), rgba(146, 196, 198, 0.08)); box-shadow: inset 0 0 0 1.5px rgba(201, 193, 230, 0.7); color: var(--text); }
.cx-arp[aria-checked="true"] .cx-arp-frame { border-color: transparent; background: linear-gradient(135deg, rgba(201, 193, 230, 0.9), rgba(191, 222, 223, 0.75)); box-shadow: 0 0 16px -2px rgba(226, 222, 242, 0.12); }

/* Длина: плашки или ползунок. */
.cx-durs { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-durp {
    min-width: 58px;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    transition: background var(--dur-1) ease, color var(--dur-1) ease, box-shadow var(--dur-2) ease;
}
.cx-durp:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.cx-durp[aria-checked="true"] { color: var(--text); background: linear-gradient(160deg, rgba(167, 159, 208, 0.22), rgba(146, 196, 198, 0.1)); box-shadow: inset 0 0 0 1.5px rgba(201, 193, 230, 0.7); }
.cx-durs.is-range { flex-direction: column; gap: 6px; max-width: 460px; }
.cx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.cx-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #a79fd0, #92c4c6 var(--p, 50%), rgba(255, 255, 255, 0.1) var(--p, 50%)); }
.cx-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #a79fd0, #92c4c6 var(--p, 50%), rgba(255, 255, 255, 0.1) var(--p, 50%)); }
.cx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(167, 159, 208, 0.35), 0 4px 12px rgba(0, 0, 0, 0.6); }
.cx-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(167, 159, 208, 0.35), 0 4px 12px rgba(0, 0, 0, 0.6); }
.cx-range:focus-visible { outline: none; }
.cx-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus), 0 4px 12px rgba(0, 0, 0, 0.6); }
.cx-range-ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); }

/* Итог и главное действие. */
.cx-pick-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.cx-pick-sum { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 220px; font-size: var(--fs-sm); color: var(--text-3); }
.cx-pick-what { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: var(--fw-semibold); }
.cx-pick-what .cx-logo { width: 18px; height: 18px; }
.cx-pick-cost:empty { display: none; }
.cx-pick-sum.is-warn .cx-pick-cost { color: var(--amber); }
.cx-go { --h: 46px; gap: 9px; padding: 0 8px 0 18px; font-weight: var(--fw-semibold); }
.cx-go[data-mode="topup"] { padding: 0 18px; }
.cx-go-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 11px;
    border-radius: 10px;
    background: rgba(7, 7, 11, 0.9);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}
.cx-go-price svg { width: 12px; height: 12px; color: var(--cyan-hi); }

/* ── Не хватает кредитов ───────────────────────────────────────────────── */
.cx-nc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
    max-width: 640px;
    padding: 18px;
    border-radius: 22px;
    background:
        radial-gradient(90% 90% at 0% 0%, rgba(224, 196, 154, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(224, 196, 154, 0.2), var(--sh-2);
    animation: cx-in var(--dur-3) var(--ease-out) both;
}
.cx-nc-art { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #ead8bb; background: linear-gradient(150deg, rgba(224, 196, 154, 0.32), rgba(207, 170, 189, 0.12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(224, 196, 154, 0.3); }
.cx-nc-art svg { position: relative; width: 24px; height: 24px; }
.cx-nc-halo { position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 196, 154, 0.32), rgba(224, 196, 154, 0.1) 55%, transparent); animation: cx-gen-pulse 3s var(--ease-in-out) infinite; }
.cx-nc-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cx-nc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cx-nc-head b { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.cx-nc-model { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--text-2); }
.cx-nc-model .cx-logo { width: 16px; height: 16px; }
.cx-nc-text { font-size: var(--fs-md); line-height: 1.5; color: var(--text-2); }
.cx-nc-meter { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cx-nc-meter > span { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e0c49a, #cfaabd); box-shadow: 0 0 12px rgba(226, 222, 242, 0.12); }
.cx-nc-stats { display: flex; gap: 22px; }
.cx-nc-stats > span { display: flex; flex-direction: column; gap: 1px; }
.cx-nc-stats small { font-size: var(--fs-xs); color: var(--text-3); }
.cx-nc-stats b { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.cx-nc-stats b svg { width: 13px; height: 13px; color: var(--cyan-hi); }
.cx-nc-hint { font-size: var(--fs-xs); color: var(--text-3); }
.cx-nc-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Уведомления в ленте ───────────────────────────────────────────────── */
.cx-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 660px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px var(--line-2);
    animation: cx-in var(--dur-3) var(--ease-out) both;
}
.cx-note > svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.cx-note.is-error > svg { color: var(--danger); }
.cx-note.is-credits > svg, .cx-note.is-limit > svg { color: var(--amber); }
.cx-note.is-info > svg { color: var(--cyan-hi); }
.cx-note.is-error { background: linear-gradient(180deg, rgba(255, 92, 108, 0.07), rgba(255, 92, 108, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 92, 108, 0.2); }
.cx-note-body { flex: 1 1 auto; min-width: 0; }
.cx-note b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.cx-note p { margin-top: 3px; font-size: var(--fs-md); line-height: 1.5; color: var(--text-2); }
.cx-note-body:not(:has(b:not(:empty))) p { margin-top: 0; }
.cx-note { flex-wrap: wrap; }
.cx-note-body { flex: 1 1 240px; }
.cx-note > .btn { align-self: center; flex: 0 0 auto; }
.cx-note-acts { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 0 100%; padding-left: 32px; }
.cx-note-acts:empty { display: none; }

/* ── Источники, игра ───────────────────────────────────────────────────── */
.cx-sources {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px 0 6px;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.cx-sources:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); }
.cx-fav-stack { display: inline-flex; }
.cx-fav-stack > * { width: 22px; height: 22px; margin-left: -7px; border-radius: 50%; background: #1a1a22; box-shadow: 0 0 0 2px #0b0b10; object-fit: cover; }
.cx-fav-stack > :first-child { margin-left: 0; }
.cx-fav-ph { display: inline-grid; place-items: center; color: var(--text-3); }
.cx-fav-ph svg { width: 12px; height: 12px; }
.cx-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); font-size: 11px; color: var(--text-2); }
.popover.cx-pop-src { width: min(380px, calc(100vw - 16px)); padding: 6px; }
.cx-src-list { display: flex; flex-direction: column; gap: 2px; }
.cx-src { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 12px; transition: background var(--dur-1) ease; }
.cx-src:hover { background: var(--glass-2); }
.cx-src > img, .cx-src > .cx-fav-ph { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px; }
.cx-src > svg { width: 14px; height: 14px; color: var(--text-3); flex: 0 0 auto; }
.cx-src-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cx-src-title { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-src-host { font-size: var(--fs-xs); color: var(--text-3); }
.cx-play .btn svg { color: var(--lime-hi); }

/* ── Дискуссия ─────────────────────────────────────────────────────────── */
.cx-disc { display: flex; flex-direction: column; gap: 10px; max-width: 740px; }
.cx-disc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.cx-disc-head svg { width: 16px; height: 16px; color: var(--cyan-hi); }
.cx-disc-note { flex-basis: 100%; font-weight: var(--fw-regular); color: var(--text-3); }
.cx-disc-list { display: flex; flex-direction: column; gap: 8px; }
.cx-disc-item { border-radius: 16px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.cx-disc-item > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 8px 14px;
    cursor: pointer;
    list-style: none;
    transition: background var(--dur-1) ease;
}
.cx-disc-item > summary::-webkit-details-marker { display: none; }
.cx-disc-item > summary:hover { background: rgba(255, 255, 255, 0.03); }
.cx-disc-item > summary .cx-logo { width: 28px; height: 28px; padding: 5px; border-radius: 9px; background: #16161e; box-shadow: inset 0 0 0 1px var(--line-2); }
.cx-disc-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); white-space: nowrap; }
.cx-disc-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--text-3); }
.cx-disc-item > summary .cx-chev { margin-left: auto; flex: 0 0 auto; }
.cx-disc-item[open] > summary .cx-chev { transform: rotate(180deg); }
.cx-disc-md { padding: 2px 16px 14px; }
.cx-disc-md.md { font-size: 14.5px; }
.cx-disc-err { display: flex; align-items: center; gap: 8px; padding: 0 16px 14px; color: var(--danger); font-size: var(--fs-sm); }
.cx-disc-err svg { width: 16px; height: 16px; }
.cx-disc-wait { display: flex; gap: 5px; padding: 0 16px 16px 52px; }
.cx-disc-wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: cx-dot 1.2s ease-in-out infinite; }
.cx-disc-wait i:nth-child(2) { animation-delay: 0.15s; } .cx-disc-wait i:nth-child(3) { animation-delay: 0.3s; }
.cx-disc-item.is-live > summary { pointer-events: none; }
.cx-disc-sum {
    padding: 14px 16px 4px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(167, 159, 208, 0.12), rgba(146, 196, 198, 0.05));
    box-shadow: inset 0 0 0 1px rgba(201, 193, 230, 0.25);
}
.cx-disc-sum-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cx-disc-sum-head svg { width: 16px; height: 16px; color: var(--violet-hi); }
.cx-disc-sum .cx-disc-md { padding: 0 0 12px; }

/* ── Перетаскивание файлов ─────────────────────────────────────────────── */
.cx-dropzone {
    position: absolute;
    inset: 10px 14px 14px;
    z-index: 20;
    display: grid;
    place-items: center;
    border-radius: 26px;
    border: 2px dashed rgba(201, 193, 230, 0.5);
    background: rgba(6, 6, 12, 0.78);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) ease;
}
/* Размытие — только пока зона видна: невидимый слой с backdrop-filter тоже стоит кадров. */
.cx-main.is-drop .cx-dropzone { opacity: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cx-dropzone-in { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text-2); font-size: var(--fs-sm); transform: translateY(8px); transition: transform var(--dur-3) var(--ease-out); }
.cx-main.is-drop .cx-dropzone-in { transform: none; }
.cx-dropzone-in svg { width: 34px; height: 34px; color: var(--violet-hi); margin-bottom: 4px; }
.cx-dropzone-in b { font-size: var(--fs-lg); color: var(--text); }

/* ═══ Движение ═══════════════════════════════════════════════════════ */
@keyframes cx-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes cx-pop { from { opacity: 0; transform: translateX(-50%) scale(0.9); } }
.cx-file { animation-name: cx-pop-file; }
@keyframes cx-pop-file { from { opacity: 0; transform: scale(0.9); } }
@keyframes cx-spin { to { --cx-a: 360deg; } }
@keyframes cx-flash { 0% { opacity: 1; } 100% { opacity: 0.85; } }
@keyframes cx-pulse { 50% { opacity: 0.45; } }
@keyframes cx-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes cx-caret { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes cx-shine { to { background-position: -200% 0; } }
@keyframes cx-wave { 50% { transform: scaleY(0.9); } }

/* ═══ Планшет и телефон ══════════════════════════════════════════════ */
@media (max-width: 1180px) {
    .cx { --side-w: 268px; }
    .cx-sugs { gap: 12px; }
}
@media (max-width: 1100px) {
    .cx-tool-lbl { display: none; }
    .cx-tool.cx-model ~ .cx-tool { width: 36px; padding: 0; justify-content: center; }
}
@media (max-width: 900px) {
    .cx { grid-template-columns: minmax(0, 1fr) !important; }
    .cx-side {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        width: min(86vw, 340px);
        margin: 0;
        border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 45%),
            rgba(10, 10, 15, 0.94);
        transform: translateX(-104%);
        opacity: 1;
        pointer-events: auto;
        transition: transform var(--dur-3) var(--ease-out);
    }
    .cx[data-side="closed"] .cx-side { opacity: 1; margin: 0; transform: translateX(-104%); pointer-events: auto; }
    .cx.is-drawer .cx-side { transform: none; box-shadow: var(--sh-3), 30px 0 80px -20px rgba(0, 0, 0, 0.9); }
    .cx-scrim {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 25;
        background: var(--scrim);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-3) ease;
    }
    /* Размытие — только пока ящик открыт (невидимый слой с backdrop-filter тоже стоит кадров). */
    .cx.is-drawer .cx-scrim { opacity: 1; pointer-events: auto; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .cx-open, .cx-top-new, .cx[data-side] .cx-open, .cx[data-side] .cx-top-new { display: inline-grid; }
    .cx[data-side] .cx-top::before, .cx[data-side] .cx-top::after { content: none; }
    .cx-top { padding: 6px 10px 0; height: 52px; }
    .cx.is-empty .cx-top { height: 48px; }
    .cx-sugs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
    .cx-hero { padding-top: clamp(8px, 4vh, 40px); }
}
@media (max-width: 640px) {
    .cx-thread { padding: 10px 14px 28px; gap: 24px; }
    .cx-dock { padding: 0 10px max(10px, env(safe-area-inset-bottom)); }
    .cx-composer { padding: 10px 8px 8px 12px; border-radius: 22px; }
    .cx-composer::after { border-radius: 23px; }
    .cx-model-name { max-width: 150px; }
    .cx-model .cx-chev { display: none; }
    .cx-tool[data-c="search"] { display: none; }
    .cx-tool { padding: 0 10px; }
    .cx-model { padding-left: 5px; }
    .cx-disc-slot { max-width: 44px; padding: 0 5px; }
    .cx-disc-slot span, .cx-disc-label span { display: none; }
    .cx-hero { padding: 6px 16px 28px; }
    .cx-hero-head { flex-direction: column; gap: 14px; }
    .cx-hero-title { font-size: clamp(21px, 6.4vw, 28px); text-align: center; }
    .cx-hero-head.has-sub { gap: 8px; }
    .cx-hero-sub { font-size: var(--fs-base); }
    .cx-hero-note { margin-top: 18px; font-size: var(--fs-sm); }
    .cx-hero-slot { margin-top: 10px; }
    .cx.is-empty .cx-input { min-height: 48px; }
    .cx-sugs { gap: 10px; margin-top: 22px; }
    .cx-sug { border-radius: 16px; }
    .cx-sug-art { aspect-ratio: 16 / 9; }
    .cx-sug-body { padding: 0 11px 11px; margin-top: -14px; }
    .cx-sug-title { font-size: var(--fs-sm); }
    .cx-sug-text { font-size: 12px; }
    .cx-bubble { max-width: 88%; font-size: 15px; }
    .cx-atts { max-width: 88%; }
    .cx-msg.is-bot { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
    .cx-av { width: 28px; height: 28px; border-radius: 9px; }
    .cx-av-img { width: 16px; height: 16px; }
    .cx-bot-name { margin-top: 5px; }
    .md { font-size: 15px; }
    .cx-msg.is-bot .cx-acts { opacity: 1; }
    .cx-acts-user { opacity: 0; }
    .cx-note { flex-wrap: wrap; }
    .cx-note > .btn { margin-left: 32px; }
    .cx-gen, .cx-gen.is-wide { flex-direction: column; width: 100%; padding: 6px; border-radius: 20px; }
    .cx-gen { --fh: min(62vh, 440px); }
    .cx-gen-stage, .cx-gen.is-wide .cx-gen-stage { flex: 0 0 auto; width: min(100%, calc(var(--fh) * var(--arn, 1))); align-self: center; }
    .cx-gen-frame { border-radius: 15px; }
    .cx-gen-info, .cx-gen.is-wide .cx-gen-info {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: 'eye eye' 'model price' 'prompt prompt' 'chips chips' 'btns btns' 'hint hint';
        align-items: center;
        gap: 8px 12px;
        padding: 10px 6px 6px;
    }
    .cx-gen-eyebrow { grid-area: eye; }
    .cx-gen-model { grid-area: model; }
    .cx-gen-foot, .cx-gen.is-wide .cx-gen-foot { display: contents; }
    .cx-gen-price, .cx-gen.is-wide .cx-gen-price { grid-area: price; justify-self: end; }
    .cx-gen-btns, .cx-gen-lib, .cx-gen.is-wide .cx-gen-btns, .cx-gen.is-wide .cx-gen-lib { grid-area: btns; justify-self: stretch; }
    .cx-gen-btns .btn { flex: 1 1 0; }
    .cx-gen-prompt { grid-area: prompt; -webkit-line-clamp: 2; }
    .cx-gen-chips { grid-area: chips; }
    .cx-gen-hint { grid-area: hint; }
    .cx-gen-acts { opacity: 1; transform: none; }
    .cx-pick, .cx-nc { padding: 14px 12px; border-radius: 20px; }
    .cx-pick-head { flex-wrap: wrap; }
    .cx-pick-bal { order: 3; flex: 1 0 100%; }
    .cx-bal-l { display: inline; }
    .cx-mgrid, .cx-mgrid.is-compact { grid-template-columns: 1fr; }
    .cx-mcard { min-height: 58px; }
    .cx-ars { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
    .cx-arp { width: auto; min-width: 0; padding: 9px 4px 8px; }
    .cx-pick-foot { flex-direction: column; align-items: stretch; }
    .cx-pick-sum { flex: 0 0 auto; }
    .cx-go { width: 100%; justify-content: space-between; }
    .cx-nc { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
    .cx-nc-art { width: 44px; height: 44px; border-radius: 14px; }
    .cx-nc-acts { grid-column: 1 / -1; }
    .cx-nc-acts .btn { flex: 1 1 auto; }
    .cx-rec-label { display: none; }
}
@media (max-width: 380px) {
    .cx-model-name { max-width: 118px; }
    .cx-tools { gap: 4px; }
}

@media (hover: none) {
    .cx-item-more { opacity: 1; }
    .cx-msg.is-bot .cx-acts { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cx-composer:focus-within::after, .cx-msg.is-live .cx-av::after, .cx-hero-in::before { animation: none !important; }
    .cx-gen-stage::before, .cx-gen-blob, .cx-gen-grid, .cx-gen-dust i, .cx-gen-sheen, .cx-gen-core svg, .cx-gen-ring, .cx-gen-dot, .cx-nc-halo { animation: none !important; }
    .cx-gen-dust, .cx-gen-sheen { display: none; }
    .cx-gen-frame { transform: none !important; }
    .cx-gen-media > *, .cx-gen-anim { transition-duration: 1ms !important; }
    .cx-mcard:hover:not(:disabled), .cx-arp:hover:not(:disabled) { transform: none; }
    .cx-sug:hover { transform: none; }
}

/* Живое сияние (components/aurora-field.js): в разговоре тише, чтобы не мешать чтению.
   Через --af-dim (прозрачность на полях, aurora-field.css), а не opacity всего
   слоя: та требовала отдельного прохода смешивания каждый кадр. */
.cx:not(.is-empty) .af { --af-dim: 0.45; }

/* chat tools */
/* ── Инструменты модели: поиск, чтение, код (components/tool-card.js; docs/chat-tools/SPEC.md §17) ──
   Вид приглушённый (R-C01): без акцента и неона, строки состояния цвета --text-3.
   Без вложенной прокрутки: у вывода — последние 8 строк и «Показать весь вывод»;
   у pre — только своя прокрутка вбок, страница на 360 px вбок не едет. */
.tc { max-width: 740px; min-width: 0; }
.tc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-align: left;
}
button.tc-row { margin-left: -8px; padding: 0 8px; border-radius: 10px; transition: background var(--dur-1) ease, color var(--dur-1) ease; }
button.tc-row:hover:not(:disabled) { background: var(--glass-1); color: var(--text-2); }
button.tc-row:disabled { cursor: default; color: var(--text-3); }
.tc-ic { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; }
.tc-ic svg { width: 16px; height: 16px; }
.tc-label, .tc-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Подпись не режется, пока есть место: первым сжимается хвост (запрос, домен, язык). */
.tc-label { flex: 0 0 auto; max-width: 100%; }
.tc-meta { flex: 0 1 auto; color: var(--text-4); font-weight: var(--fw-regular); }
a.tc-a[href] { color: var(--text-4); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--dur-1) ease, text-decoration-color var(--dur-1) ease; }
a.tc-a[href]:hover { color: var(--text-2); text-decoration-color: currentColor; }
.tc-chev { display: inline-grid; flex: 0 0 auto; color: var(--text-4); }
.tc-chev svg { width: 14px; height: 14px; }
.tc.is-static .tc-chev, .tc.is-live .tc-chev { display: none; }
.tc.is-live > .tc-row .tc-label {
    /* Тихий блик по тексту, как у «Размышляет…». */
    background: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 22%, rgba(255, 255, 255, 0.72) 50%, var(--text-3) 78%, var(--text-3) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: cx-shine 1.8s linear infinite;
}

/* Карточка кода */
.tc-run { display: flex; flex-direction: column; gap: 6px; }
.tc-box {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
}
.tc-box > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid var(--line); }
.tc-sec { min-width: 0; }
.tc-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 6px 0 14px; font-size: var(--fs-xs); color: var(--text-4); }
.tc-bar-t { font-weight: var(--fw-medium); }
.tc-acts { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.tc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    font-size: 12px;
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.tc-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.tc-btn:hover { background: var(--glass-2); color: var(--text); }
.tc-btn.is-done { color: var(--success); }
.tc-pre {
    max-width: 100%;
    margin: 0;
    padding: 2px 14px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: pre;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    tab-size: 4;
    color: #d9d8e8;
}
.tc-pre code { font-family: inherit; background: none; }
.tc-code-pre.is-tail { color: var(--text-2); }
.tc-code-pre.is-clamped {
    max-height: calc(6 * 1.6em + 14px);
    -webkit-mask: linear-gradient(180deg, #000 62%, transparent);
    mask: linear-gradient(180deg, #000 62%, transparent);
}
/* Подсветка — та же палитра, что у кода в ответах (.md .hljs-*): карточка не внутри .md. */
.tc-src .hljs-keyword, .tc-src .hljs-selector-tag, .tc-src .hljs-built_in, .tc-src .hljs-doctag { color: #cfc7e8; }
.tc-src .hljs-string, .tc-src .hljs-regexp, .tc-src .hljs-addition, .tc-src .hljs-template-variable { color: #cbd6bb; }
.tc-src .hljs-number, .tc-src .hljs-literal, .tc-src .hljs-symbol, .tc-src .hljs-bullet { color: #e5cdb0; }
.tc-src .hljs-comment, .tc-src .hljs-quote { color: rgba(244, 244, 247, 0.38); font-style: italic; }
.tc-src .hljs-title, .tc-src .hljs-title.function_, .tc-src .hljs-section { color: #bdc9e7; }
.tc-src .hljs-attr, .tc-src .hljs-attribute, .tc-src .hljs-property, .tc-src .hljs-params { color: #c2dfe1; }
.tc-src .hljs-type, .tc-src .hljs-title.class_, .tc-src .hljs-class { color: #ddc2d0; }
.tc-src .hljs-meta, .tc-src .hljs-meta .hljs-keyword { color: rgba(244, 244, 247, 0.55); }
.tc-src .hljs-variable, .tc-src .hljs-subst { color: #eceaf6; }
.tc-out-pre { color: var(--text-2); }
.tc-err { color: rgba(255, 150, 160, 0.8); }
.tc-files { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; padding: 12px 14px; }
.tc-img {
    display: block;
    max-width: min(100%, 520px);
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #0e0e14;
    box-shadow: inset 0 0 0 1px var(--line);
    cursor: zoom-in;
}
.tc-img img { display: block; max-width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.tc-file { display: flex; flex: 1 0 100%; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.tc-file .tc-ic { color: var(--text-3); }
.tc-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-fsize { flex: 0 0 auto; color: var(--text-4); }
.tc-file .tc-btn { margin-left: auto; }
.tc-file.is-gone { color: var(--text-4); }
.tc-note { margin: 0; padding: 10px 14px; font-size: var(--fs-xs); color: var(--text-4); }
.tc-notice { display: flex; align-items: flex-start; gap: 8px; max-width: 740px; margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-4); }
.tc-notice svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.tc-view { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.tc-view img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 12px; object-fit: contain; }
.tc-view figcaption { font-size: var(--fs-sm); color: var(--text-3); text-align: center; overflow-wrap: anywhere; }
/* «Источники»: непроцитированные — «ещё N» */
.cx-src-more { color: var(--text-4); font-weight: var(--fw-regular); white-space: nowrap; }
.cx-src-more-btn { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--text-3); font-size: var(--fs-sm); text-align: left; }
.cx-src-more-btn:hover { background: var(--glass-2); color: var(--text-2); }
.cx-src-rest { display: flex; flex-direction: column; gap: 2px; }
/* Внешняя картинка из ответа модели — ссылка по нажатию (П-T1) */
.md a.md-ext-img { color: var(--text-3); }
@media (max-width: 640px) {
    .tc-pre { padding: 2px 12px 10px; font-size: 12px; }
    .tc-bar { padding-left: 12px; }
    .tc-files { padding: 10px 12px; }
    .tc-img img { max-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
    .tc.is-live > .tc-row .tc-label { animation: none; background: none; color: var(--text-3); -webkit-text-fill-color: currentColor; }
}