/* editorPolish.css — ⚡ v195 (Денис): «привести в порядок ТОЛЬКО по CSS,
   не меняя логики»: матовое стекло панелей редактора + дизайнерская чистка
   правых панелей Холста и видео-ноды. Файл грузится ПОСЛЕДНИМ и только
   переопределяет существующие селекторы — ни одной строки JS не тронуто,
   выключается удалением одной <link>.

   Материал «стекла» — тот же, что у панели навигации графа
   (#graph-zoom-control / #graph-minimap: rgba-фон + backdrop-filter blur):
   панели полупрозрачные, перетаскиваемое/лежащее под ними просвечивает.

   Специфичность: vai-* стили инжектятся из JS ПОСЛЕ этого файла, поэтому
   правила усилены контейнерами (#vid-side, #image-editor-workspace). */

/* ═══ 0. ПЛАВАЮЩАЯ РАСКЛАДКА РЕДАКТОРА ═══════════════════════════════════
   История правок (все — по репортам Дениса):
   v196 стекло не появлялось — панели стояли В РЯД с кадром, под ними не было
        ничего, кроме плоского фона: backdrop-filter размывать нечего.
   v197 сделал их плавающими, но по классу `.has-layers` — а его получает и
        РАСКАДРОВКА, где внизу лента кадров и плеер: её раскладку снесло.
   v198 сузил скоуп до холста и вынес компенсацию на сам вьюпорт (отступ на
        теле прижимал вьюпорт вниз — под тулбар кадр не попадал).
   v199 фон перебивался `!important` из theme.css — стекло было только на
        слоях, у которых такого правила нет.
   v200 шапка вернулась плотной, правая панель — читаемой (0.93).
   v201 (здесь) РАСКАДРОВКА получает ту же раскладку — но её лента кадров и
        плеер остаются в потоке. Именно наложение ленты ломало вёрстку в
        v197: кадры уезжали под панель слоёв, а плеер терял место. Поэтому
        сверху/слева/справа кадр уходит под панели, а СНИЗУ лента живёт как
        жила, просто не залезая под правую панель (margin-right).

   Геометрия — четыре переменные; --rp-w пишет JS (ширину правой панели
   тянут мышью, из CSS её не прочитать). */

/* ── Общий скоуп: любой редактор со слоями ── */
#image-editor-workspace:is(.is-sketch, .has-layers, :has(.aig-panel)) {
    --tb-h: 50px;    /* тулбар: padding 8+8 + кнопка 34 */
    --lp-w: 104px;   /* полоса слоёв (#sketch-layers-panel) */
    --rp-w: 240px;   /* правая панель — дефолт; живое значение пишет JS */
    --ft-h: 46px;    /* подвал-полоса действий (только режимы холста) */
}

/* ⚡ v200 (Денис): ШАПКА «ХОЛСТ» — ПЛОТНАЯ и в потоке. Плавающей она давала
   просвечивающий топбар и читалась как «схватилась»; заголовок документа —
   якорь интерфейса, ему прозрачность не идёт. Поэтому её стиль не трогаем
   вовсе, а тулбар отсчитывается от верха воркспейса (шапка выше него). */

#image-editor-workspace:is(.is-sketch, .has-layers, :has(.aig-panel)) .imgcanvas-toolbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 40;
    min-height: var(--tb-h);
    box-sizing: border-box;
}
/* Тело БЕЗ отступа сверху: вьюпорт должен доставать до самого верха, иначе
   под тулбаром снова окажется пустота вместо кадра. */
#image-editor-workspace:is(.is-sketch, .has-layers, :has(.aig-panel)) .imgcanvas-body {
    position: relative;
}
#image-editor-workspace:is(.is-sketch, .has-layers, :has(.aig-panel)) .imgcanvas-left {
    position: relative;
}
#image-editor-workspace:is(.is-sketch, .has-layers, :has(.aig-panel)) #sketch-layers-panel {
    position: absolute;
    top: var(--tb-h); left: 0; bottom: 0;
    width: var(--lp-w);
    z-index: 30;
}
#image-editor-workspace:is(.is-sketch, .has-layers, :has(.aig-panel)) .imgcanvas-right {
    position: absolute;
    top: var(--tb-h); right: 0; bottom: 0;
    z-index: 30;
}
#image-editor-workspace:is(.is-sketch, .has-layers, :has(.aig-panel)) #imgcanvas-right-sep {
    position: absolute;
    top: var(--tb-h); bottom: 0;
    right: var(--rp-w);
    z-index: 31;
}
/* Компенсация — на САМОМ вьюпорте: кадр центрируется в свободной области,
   ничего не спрятано, но в зоне отступов он виден сквозь стекло. */
#image-editor-workspace:is(.is-sketch, .has-layers, :has(.aig-panel)) .imgcanvas-viewport {
    box-sizing: border-box;
    padding-top: var(--tb-h);
    padding-left: var(--lp-w);
    padding-right: var(--rp-w);
}
#image-editor-workspace:is(.is-sketch, .has-layers, :has(.aig-panel)) #imgcanvas-zoom-control {
    left: calc(var(--lp-w) + 14px);
}

/* ── Только режимы ХОЛСТА: подвал — тонкая полоса действий, её тоже поверх ── */
#image-editor-workspace:is(.is-sketch, :has(.aig-panel)) .imgcanvas-timeline {
    position: absolute;
    left: 0; right: var(--rp-w); bottom: 0;
    z-index: 30;
    min-height: var(--ft-h);
    box-sizing: border-box;
}
#image-editor-workspace:is(.is-sketch, :has(.aig-panel)) .imgcanvas-viewport {
    padding-bottom: var(--ft-h);
}
#image-editor-workspace:is(.is-sketch, :has(.aig-panel)) #imgcanvas-zoom-control {
    bottom: calc(var(--ft-h) + 14px);
}

/* ── Только РАСКАДРОВКА: лента кадров и плеер остаются в потоке (это рабочие
      полосы с перетаскиванием кадров — накрывать ими холст нельзя), просто
      не залезают под плавающую правую панель. ── */

/* ⚡ v202 (Денис: «сделай только чтобы слои были под панелью кадров»).
   Полоса слоёв плавает от тулбара до самого низа — и накрывала левые 104px
   ленты кадров и плеера: первый кадр выглядывал из-под неё огрызком.
   Лечим с двух сторон, чтобы фикс не держался на одной догадке:
     1) пол панели поднят на высоту нижних полос (--sb-h) — список слоёв
        не уезжает под ленту и остаётся кликабельным до последней строки;
     2) сами полосы получают слой НАД панелью (z 35 > 30) — если лента
        подрастёт (горизонтальный скроллбар при полном ряде кадров), она
        перекроет остаток панели, а не наоборот.
   --sb-h — сумма ДВУХ чисел из animaticLayout.js и animaticPlayer.js;
   их совпадение стережёт t141, иначе под панелью появится щель. */
#image-editor-workspace.has-layers:not(.is-sketch):not(:has(.aig-panel)) {
    --sb-h: 154px;   /* плеер 46 (7+30+7 + 2 рамки) + лента кадров 108 */
}
#image-editor-workspace.has-layers:not(.is-sketch):not(:has(.aig-panel)) #sketch-layers-panel {
    bottom: var(--sb-h);
}
#image-editor-workspace.has-layers:not(.is-sketch):not(:has(.aig-panel)) .imgcanvas-timeline,
#image-editor-workspace.has-layers:not(.is-sketch):not(:has(.aig-panel)) .player-toolbar {
    margin-right: var(--rp-w);
    position: relative;
    z-index: 35;
}

/* ═══ 1. МАТОВОЕ СТЕКЛО ПАНЕЛЕЙ ХОЛСТА ═══════════════════════════════════
   ⚡ v199 (Денис: «стекло только на слоях, больше нигде»). Корень найден:
   theme.css задаёт `background: var(--ui-bg-deep) !important` для
   .canvas-header (653), .imgcanvas-toolbar (694), .imgcanvas-timeline (697)
   и .imgcanvas-right (699). !important бьёт любую специфичность — мой
   полупрозрачный фон просто не применялся, оставался глухой цвет, и
   размывать под ним было нечего. Стекло работало ровно на одной панели —
   полосе слоёв, у которой такого правила нет.
   Здесь фон объявлен с !important — единственный способ перебить
   !important, не трогая theme.css. */

#image-editor-workspace .imgcanvas-toolbar {
    background: rgba(16, 16, 20, 0.56) !important;
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#image-editor-workspace #sketch-layers-panel {
    background: rgba(13, 13, 16, 0.52);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

#image-editor-workspace .imgcanvas-right {
    background: rgba(19, 19, 23, 0.93) !important;
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

#image-editor-workspace .imgcanvas-timeline {
    background: rgba(16, 16, 20, 0.56) !important;
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

/* Видео-нода: её боковая панель — то же стекло */
#vid-side {
    background: rgba(19, 19, 23, 0.93) !important;
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

/* ═══ 2. ПРАВАЯ ПАНЕЛЬ: ЕДИНЫЙ РИТМ (aig-* и vai-*) ══════════════════════ */

/* Заголовки секций — один голос в обеих панелях: тише, разреженнее (Figma-стиль) */
#image-editor-workspace .aig-h,
#vid-side .vai-h {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ui-text-muted, #666);
    margin-bottom: 8px;
}

/* Секции: воздух + волосяные разделители вместо жирных бордеров */
#image-editor-workspace .aig-sec {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#vid-side .vai-sec { gap: 8px; }

/* Поля ввода: тонкая рамка, спокойный фон, мягкий фокус */
#image-editor-workspace .aig-panel select,
#image-editor-workspace .aig-panel textarea,
#image-editor-workspace .aig-panel input:not([type=checkbox]):not([type=radio]),
#vid-side .vai-select,
#vid-side .vai-prompt {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    transition: border-color 0.15s, background 0.15s;
}
#image-editor-workspace .aig-panel select:hover,
#image-editor-workspace .aig-panel textarea:hover,
#vid-side .vai-select:hover,
#vid-side .vai-prompt:hover { border-color: rgba(255, 255, 255, 0.16); }
#image-editor-workspace .aig-panel select:focus,
#image-editor-workspace .aig-panel textarea:focus,
#image-editor-workspace .aig-panel input:focus,
#vid-side .vai-select:focus,
#vid-side .vai-prompt:focus {
    border-color: var(--ui-accent, #48827e);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

/* Служебные подписи: не кричат — полупрозрачные, проявляются при наведении
   на секцию («много лишних подписей» → подписи уходят на второй план) */
#image-editor-workspace .aig-model-hint,
#image-editor-workspace .aig-size-cur,
#vid-side .vai-hint {
    font-size: 9.5px;
    line-height: 1.45;
    color: var(--ui-text-muted, #666);
    opacity: 0.55;
    transition: opacity 0.15s;
}
#image-editor-workspace .aig-sec:hover .aig-model-hint,
#image-editor-workspace .aig-sec:hover .aig-size-cur,
#vid-side .vai-sec:hover .vai-hint { opacity: 0.9; }

/* Чипы Библии/видео: тише рамка, ровнее ритм */
#image-editor-workspace .aig-chip,
#vid-side .vai-chip {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: border-color 0.15s, background 0.15s;
}
#image-editor-workspace .aig-chip:hover,
#vid-side .vai-chip:hover { border-color: rgba(255, 255, 255, 0.2); }

/* Реф-инфо и тумблеры — карточки того же материала */
#image-editor-workspace .aig-refinfo,
#image-editor-workspace .aig-analyze-row {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
}

/* Кнопки размеров холста */
#image-editor-workspace .aig-size-grid button {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    transition: border-color 0.15s, background 0.15s;
}
#image-editor-workspace .aig-size-grid button:hover { border-color: rgba(255, 255, 255, 0.2); }

/* Кнопка генерации — единая в обеих панелях: радиус, вес, контрастный текст
   (на акценте #48827e текст var(--ui-text) серел — нечитаемо) */
#image-editor-workspace .aig-gen,
#vid-side .vai-gen {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0e1112;
    box-shadow: 0 6px 18px rgba(72, 130, 126, 0.28);
    transition: filter 0.15s, box-shadow 0.15s;
}
#image-editor-workspace .aig-gen:hover,
#vid-side .vai-gen:hover { filter: brightness(1.08); }
#image-editor-workspace .aig-gen.stop { color: #fff; box-shadow: none; }

/* Кнопки подвала (сохранить/папка) — тише рамки */
#image-editor-workspace .cab-btn {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
}

/* ═══ 3. СКРОЛЛБАРЫ ПАНЕЛЕЙ — ТОНКИЕ, ТЁМНЫЕ ═════════════════════════════ */

#image-editor-workspace .aig-body::-webkit-scrollbar,
#image-editor-workspace .scene-list-scroll::-webkit-scrollbar,
#vid-side .vai-body::-webkit-scrollbar,
#image-editor-workspace #sketch-layers-panel::-webkit-scrollbar { width: 7px; }
#image-editor-workspace .aig-body::-webkit-scrollbar-track,
#image-editor-workspace .scene-list-scroll::-webkit-scrollbar-track,
#vid-side .vai-body::-webkit-scrollbar-track,
#image-editor-workspace #sketch-layers-panel::-webkit-scrollbar-track { background: transparent; }
#image-editor-workspace .aig-body::-webkit-scrollbar-thumb,
#image-editor-workspace .scene-list-scroll::-webkit-scrollbar-thumb,
#vid-side .vai-body::-webkit-scrollbar-thumb,
#image-editor-workspace #sketch-layers-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}
#image-editor-workspace .aig-body::-webkit-scrollbar-thumb:hover,
#image-editor-workspace .scene-list-scroll::-webkit-scrollbar-thumb:hover,
#vid-side .vai-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }

/* ═══ 4. СТАРТОВЫЙ ЭКРАН — ТОТ ЖЕ МАТЕРИАЛ ═══════════════════════════════
   ⚡ v202 (Денис): «то что сейчас серого цвета — тоже стекло, но по
   интенсивности как правая панель: чтобы был намёк, но не слишком
   прозрачно». Серое — это окно (.hs-window, #232323) и правая колонка со
   списком проектов (.hs-main/.hs-list): плоская заливка рядом с цветной
   обложкой читается как мёртвый прямоугольник.

   ВАЖНО, иначе повторится v199. theme.css (строки 668–676) раздаёт этим
   селекторам `background: … !important`, а грузится ПОСЛЕ homeScreen.css —
   там переопределить нельзя. Здесь можно: файл подключён последним, фон
   объявлен с !important.

   Вторая половина — арифметика, и в v202 я ошибся именно в ней.

   Стекло показывает то, что ПОД ним, — значит его видно ровно настолько,
   насколько ярок фон. За правой панелью редактора лежит КАДР: светлый,
   цветной. Поэтому там 0.93 читается как стекло. За домашним экраном лежит
   ГРАФ НОД: почти чёрное поле с редкими карточками. Та же цифра 0.93 даёт
   0.07 × «почти чёрное» = ничего, и Денис справедливо ответил «не вижу
   стекла, вижу что цвет поменялся на синий».

   Вывод: копировать НОМЕР плотности правой панели было неверно — копировать
   надо ЭФФЕКТ. Плотности подобраны замером в Chromium на макете реального
   фона (граф нод со скриншота Дениса), четыре варианта рядом:
     вуаль 0.50 / окно 0.93 — фон не читается вовсе (v202);
     вуаль 0.35 / окно 0.82 — намёк на грани заметности;
   → вуаль 0.28 / окно 0.74 — карточки графа проступают, текст не страдает;
     вуаль 0.20 / окно 0.66 — уже витрина, окно теряет вес.

   Третье, что делает стекло стеклом независимо от фона, — БЛИК ПО КРОМКЕ:
   светлая линия сверху и тонкий внутренний контур. Без него панель читается
   просто как «другой цвет» — ровно то слово, которое и прозвучало.

   .hs-sidebar НЕ ТРОГАЕМ — там обложка, и шорткат background стёр бы её
   (v155, инвариант t113 §6). */

#home-screen {
    background: rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(22px) saturate(1.1);
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
}

#home-screen .hs-window {
    background: rgba(24, 24, 26, 0.74) !important;
    backdrop-filter: blur(30px) saturate(1.25);
    -webkit-backdrop-filter: blur(30px) saturate(1.25);
    border-color: rgba(255, 255, 255, 0.1);
    /* блик по кромке + отрыв тенью: без них любое стекло выглядит заливкой */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                inset 0 0 0 1px rgba(255, 255, 255, 0.05),
                0 32px 90px rgba(0, 0, 0, 0.6);
}

/* Колонка списка своей заливки не имеет — иначе она закрасила бы стекло
   окна изнутри и весь эффект пропал бы на 2/3 площади. */
#home-screen .hs-main,
#home-screen .hs-list {
    background: transparent !important;
}

#home-screen .hs-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Плашки на стекле — прозрачные подмешивания, а не глухие #141414/#333:
   плоский серый поверх стекла выглядит дырой. */
#home-screen .hs-card-thumb {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.09);
}
#home-screen .hs-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}
#home-screen .hs-card:active {
    background: rgba(255, 255, 255, 0.04);
}
#home-screen .hs-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}