/* ============================================================================
   ai-panel.css — стили панели ИИ-генерации холст-ноды
   ----------------------------------------------------------------------------
   ⚡ A3. Вынесено из aiImageNode.js, где эти правила жили внутри функции
   _injectCSS и вставлялись тегом <style> при первом рендере панели.

   Почему это было плохо: стили не кэшировались отдельно, не были видны
   инструментам разработчика как файл, не участвовали в общей теме и не могли
   быть переопределены без правки JS.

   ⚡ ПОРЯДОК ПОДКЛЮЧЕНИЯ КРИТИЧЕН. Блок :root ниже выводит токены панели через
   color-mix из переменных темы. Файл ОБЯЗАН подключаться ПОСЛЕ theme.css —
   иначе color-mix получит неопределённые переменные и вернёт прозрачный цвет.
   Порядок в index.html: theme.css → imageCanvas.css → ai-panel.css.

   ⚡ Заодно удалены мёртвые правила полосы кадров (.aig-gcell, .aig-gadd,
   .aig-frame, .aig-filmstrip) — сама полоса снесена в К5 вместе с механикой
   «несколько кадров в одной ноде».
   ============================================================================ */

/* ⚡ C5. ЛОКАЛЬНЫЕ ТОКЕНЫ ПАНЕЛИ — все производные от темы.
       В theme.css нет токенов для: полупрозрачных вуалей, затемняющих подложек
       под миниатюрами и цвета опасного действия. Поэтому они выведены здесь
       через color-mix из существующих переменных, а не зашиты цифрами: при
       смене темы панель поедет вместе с остальным интерфейсом, а не останется
       тёмным островом.
       ⚠ --aig-danger — признак пробела в самой теме: токена опасного действия
       в ней нет вовсе. Когда он появится, эту строку надо будет удалить. */
    :root {
        --aig-veil:        color-mix(in srgb, var(--ui-text) 7%,  transparent);
        --aig-veil-weak:   color-mix(in srgb, var(--ui-text) 4%,  transparent);
        --aig-veil-strong: color-mix(in srgb, var(--ui-text) 25%, transparent);
        --aig-text-soft:   color-mix(in srgb, var(--ui-text) 75%, transparent);
        --aig-accent-tint: color-mix(in srgb, var(--ui-accent) 5%, transparent);
        --aig-scrim:       color-mix(in srgb, var(--ui-bg-deep) 82%, transparent);
        --aig-scrim-hard:  color-mix(in srgb, var(--ui-bg-deep) 92%, transparent);
        /* --aig-danger удалён: теперь --ui-danger в theme.css */
    }

    .aig-panel { display:flex; flex-direction:column; gap:0; }
    .aig-sec { padding:11px 12px; border-bottom:1px solid var(--ui-border); }
    .aig-sec:last-child { border-bottom:none; }
    .aig-h { font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--ui-text-muted); text-transform:uppercase;
        margin-bottom:7px; display:flex; align-items:center; justify-content:space-between; }
    .aig-h .n { color:var(--ui-text-dim); font-weight:700; }
    /* ⚡ v127. ЧЕКБОКСЫ И РАДИО ИСКЛЮЧЕНЫ ИЗ ОБЩЕГО ПРАВИЛА.
       Здесь стояло `.aig-panel input` без оговорок, то есть width:100% и
       padding:7px получал И чекбокс. Растянутый на всю ширину чекбокс рисуется
       по ЦЕНТРУ своей коробки и выдавливает соседей за край: в плоской строке
       выбора модулей он съедал всю ширину и текст сжимался в ноль — снаружи это
       выглядело как «один голый чекбокс без подписи» (два репорта Дениса со
       скриншотами, и оба раза я искал причину не там). */
    .aig-panel select,
    .aig-panel input:not([type="checkbox"]):not([type="radio"]),
    .aig-panel textarea { width:100%; box-sizing:border-box;
        background:var(--ui-bg-input); color:var(--ui-text); border:1px solid var(--ui-border);
        border-radius:var(--ui-radius-sm); font-size:12px; padding:7px 8px; font-family:var(--ui-font); }
    .aig-panel select:focus,
    .aig-panel input:not([type="checkbox"]):not([type="radio"]):focus,
    .aig-panel textarea:focus { outline:none; border-color:var(--ui-border-focus); }
    /* Явный размер, чтобы строка не зависела от умолчаний браузера. */
    .aig-panel input[type="checkbox"] { width:auto; flex-shrink:0; margin:0; padding:0; }
    .aig-model { display:flex; flex-direction:column; gap:7px; }
    .aig-model-hint { font-size:10px; color:var(--ui-text-muted); }
    .aig-key-ok { font-size:14px; color:var(--ui-accent); width:10px; }
    .aig-refs { display:flex; gap:6px; flex-wrap:wrap; }
    .aig-refs.empty { padding:10px; border:1px dashed var(--ui-border); border-radius:var(--ui-radius); }
    .aig-hint { font-size:11px; color:var(--ui-text-muted); line-height:1.5; }
    /* ⚡ (Денис) Блок «Общий стиль» — по образцу видео-ноды: невысокое поле + строка-подсказка */
    .aig-global { min-height:52px !important; }
    .aig-global + .aig-hint { margin-top:6px; }
    /* ⚡ v060: шапка с кнопкой «подхватить связи» ЛИПНЕТ к верху панели.
       Раньше она уезжала вместе со скроллом, и до обновления связей надо было
       сперва прокрутить панель обратно вверх. */
    .aig-panel { height:100%; min-height:0; }
    .aig-title { flex:0 0 auto;
        display:flex; align-items:center; justify-content:space-between; gap:8px;
        font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
        color:var(--ui-text-dim,var(--ui-text-dim)); padding:0 0 8px;
        border-bottom:1px solid var(--ui-border,var(--aig-veil)); }
    .aig-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding-top:12px;
        display:flex; flex-direction:column; gap:0; }
    .aig-refresh { background:transparent; border:none; color:var(--ui-text-dim,var(--ui-text-dim)); cursor:pointer; padding:2px; display:flex; }
    .aig-refresh:hover { color:var(--ui-accent,var(--ui-accent-hover)); }
    .aig-ref { position:relative; width:50px; height:50px; border-radius:var(--ui-radius-sm); overflow:hidden;
        background:var(--ui-bg-deep) center/cover no-repeat; border:1.5px solid transparent; }
    .aig-ref.off { opacity:.32; }
    .aig-ref .tg { position:absolute; top:2px; right:2px; width:15px; height:15px; border-radius:3px; border:none;
        background:var(--aig-scrim); color:var(--ui-text); cursor:pointer; font-size:9px; line-height:1; padding:0; }
    .aig-ref .del { position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:3px; border:none;
        background:var(--aig-scrim); color:var(--ui-text); cursor:pointer; font-size:11px; line-height:1; padding:0; }
    .aig-ref .del:hover { background:var(--ui-danger); }
    .aig-ref .nm { position:absolute; bottom:0; left:0; right:0; font-size:7px; padding:1px 3px; background:var(--aig-scrim-hard);
        color:var(--aig-text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* ⚡ (Денис): заметка к рефу — как в видео-ноде (.vai-ref-note-btn):
       кнопка видна на hover, при заполненной заметке — всегда + точка. Оба
       верхних угла плитки заняты (tg/del), поэтому кнопка сидит над подписью. */
    .aig-ref .note { position:absolute; right:2px; bottom:12px; width:15px; height:15px; border-radius:3px; border:none;
        background:var(--aig-scrim); color:var(--ui-accent); cursor:pointer; padding:0; display:none;
        align-items:center; justify-content:center; }
    .aig-ref:hover .note { display:inline-flex; }
    .aig-ref .note.has { display:inline-flex; }
    .aig-ref .note.has::after { content:''; position:absolute; top:-2px; right:-2px; width:6px; height:6px;
        border-radius:50%; background:var(--ui-accent); }
    .aig-ref-note-pop { position:fixed; z-index:99999; width:240px;
        background:var(--ui-bg-deep); border:1px solid var(--ui-border);
        border-radius:var(--ui-radius); padding:8px; box-shadow:0 10px 40px var(--aig-scrim-hard); }
    .aig-ref-note-pop .head { font-size:10px; font-weight:700; letter-spacing:0.04em; opacity:0.8;
        margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ui-text); }
    .aig-ref-note-pop textarea { width:100%; resize:vertical; font-size:11px; background:var(--aig-veil-weak);
        border:1px solid var(--ui-border); border-radius:var(--ui-radius-sm); color:var(--ui-text); padding:5px 6px; box-sizing:border-box; }
    .aig-ref-note-pop .row { display:flex; gap:6px; margin-top:5px; }
    .aig-ref-note-pop .row button { flex:1; font-size:10px; padding:4px 6px; border-radius:var(--ui-radius-sm); border:none; cursor:pointer;
        background:var(--ui-accent); color:var(--ui-bg-deep); font-weight:700; }
    .aig-ref-note-pop .row button.ghost { background:var(--aig-veil); color:var(--ui-text); font-weight:500; }
    .aig-chips { display:flex; gap:6px; flex-wrap:wrap; }
    .aig-chip { display:flex; align-items:center; gap:5px; padding:3px 8px 3px 3px; border-radius:20px;
        background:var(--aig-veil-weak); border:1px solid var(--ui-border); color:var(--ui-text); font-size:11px; cursor:pointer; transition:all .12s; }
    .aig-chip:hover { border-color:var(--ui-text-muted); }
    .aig-chip.on { border-color:var(--ui-accent); background:var(--ui-accent-glow); color:var(--ui-accent); }
    .aig-chip .av { width:18px; height:18px; border-radius:50%; background:var(--ui-border) center/cover no-repeat; flex-shrink:0;
        display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--ui-text-dim); }
    .aig-chip .k { font-size:8px; opacity:.55; text-transform:uppercase; }
    .aig-prompt { min-height:80px; resize:vertical; line-height:1.5; }
    /* ⚡ v126. Строки выбора модулей — та же разметка, что в видео-ноде.
       Плоская строка «чекбокс + span» здесь не годилась: при пустом тексте
       span пуст, и строка становилась НЕВИДИМОЙ — визуально неотличимо от
       «модулей нет», хотя модуль есть и его можно выбрать (репорт Дениса со
       скриншотом). Теперь у строки есть шапка с типом, поэтому она видна
       всегда, а пустой текст показывается как «—». */
    .aig-sb-list { display:flex; flex-direction:column; gap:6px; max-height:230px; overflow-y:auto; overflow-x:hidden; padding-right:2px; }
    .aig-sb { border:1px solid var(--ui-border); border-left:3px solid var(--ui-border); border-radius:8px;
              padding:7px 9px; cursor:pointer; background:var(--ui-bg-input,var(--ui-bg-deep));
              transition:border-color .12s, background .12s; }
    .aig-sb.action { border-left-color:var(--ui-text-muted); }
    .aig-sb.dialog { border-left-color:var(--ui-accent); }
    .aig-sb:hover  { background:var(--aig-veil-weak); }
    .aig-sb.on     { border-color:var(--ui-accent); background:var(--ui-accent-glow); }
    .aig-sb-head { display:flex; align-items:center; gap:7px; margin-bottom:4px; }
    .aig-sb-cb   { flex-shrink:0; }
    .aig-sb-type { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
                   color:var(--ui-text-dim,var(--ui-text-muted)); flex-shrink:0; }
    /* ⚡ min-width:0 и overflow-wrap ОБЯЗАТЕЛЬНЫ. В flex-шапке текстовый потомок
       по умолчанию имеет min-width:auto и не может сжаться уже своего
       содержимого: длинное имя персонажа распирало бы строку и уводило текст
       за пределы видимой области. Урок из прошлого репорта, перенесён сюда. */
    .aig-sb-char { font-size:11px; font-weight:700; color:var(--ui-accent); margin-left:auto;
                   min-width:0; overflow-wrap:anywhere; text-align:right; }
    .aig-sb-text { font-size:12px; line-height:1.4; color:var(--ui-text); white-space:pre-wrap;
                   overflow-wrap:anywhere; }
    #imgcanvas-wrap { position:relative; }
    .aig-refinfo { display:flex; gap:8px; align-items:center; margin-top:9px; padding:6px; border-radius:var(--ui-radius-sm); background:var(--ui-bg-input); border:1px solid var(--ui-border); }    .aig-refinfo .thumb { width:40px; height:40px; flex-shrink:0; border-radius:4px; overflow:hidden; background:var(--ui-bg-deep,var(--ui-bg-input)); display:flex; align-items:center; justify-content:center; }
    .aig-refinfo .thumb img { width:100%; height:100%; object-fit:contain; }
    .aig-refinfo .thumb .ph { color:var(--ui-text-muted); font-size:16px; }
    .aig-refinfo .meta { min-width:0; }
    .aig-refinfo .lbl { font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ui-text-muted); }
    .aig-refinfo .src { font-size:11px; color:var(--ui-accent); margin-top:2px; word-break:break-word; line-height:1.3; }
    .aig-gen { width:100%; box-sizing:border-box; margin-top:9px; padding:11px; border-radius:var(--ui-radius); border:none; cursor:pointer;        background:var(--ui-accent); color:var(--ui-text); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .14s; }
    .aig-gen:hover { background:var(--ui-accent-hover); }
    .aig-gen:disabled { opacity:.5; cursor:default; }
    .aig-gen.stop { background:var(--ui-danger); }
    .aig-progress { height:3px; margin-top:8px; border-radius:2px; background:var(--ui-bg-input); overflow:hidden; display:none; position:relative; }
    .aig-progress.on { display:block; }
    .aig-progress.on::after { content:''; position:absolute; inset:0; width:40%; background:var(--ui-accent); animation:aigBar 1.1s ease-in-out infinite; }
    @keyframes aigBar { 0%{left:-40%} 100%{left:100%} }
    .aig-foot { margin-top:8px; font-size:10px; color:var(--ui-text-muted); line-height:1.5; }
    .aig-size-cur { font-size:10px; color:var(--ui-text-muted); margin-bottom:7px; }
    .aig-size-cur b { color:var(--ui-accent); }
    .aig-size-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; }
    .aig-size-grid button { padding:6px 3px; border-radius:var(--ui-radius-sm); cursor:pointer; font-size:9px; font-weight:700;
        border:1px solid var(--ui-border); background:transparent; color:var(--ui-text-dim); line-height:1.3; }
    .aig-size-grid button.on { border-color:var(--ui-accent); background:var(--ui-accent-glow); color:var(--ui-accent); }
    .aig-size-grid button span { display:block; font-weight:400; opacity:.6; font-size:8px; }
    .aig-size-custom { display:flex; gap:5px; align-items:center; margin-top:6px; }
    .aig-size-custom input { width:0; flex:1; }
    .aig-size-custom .x { color:var(--ui-text-muted); font-size:11px; }
    .aig-size-custom button { padding:6px 10px; border:none; border-radius:var(--ui-radius-sm); background:var(--ui-accent); color:var(--ui-text); font-weight:700; font-size:10px; cursor:pointer; }
    .aig-angles { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; }
    .aig-angles button { padding:8px 3px; border-radius:var(--ui-radius-sm); cursor:pointer; font-size:9px; font-weight:600;
        border:1px solid var(--ui-border); background:var(--aig-veil-weak); color:var(--ui-text-dim); transition:all .12s; }
    .aig-angles button:hover { border-color:var(--ui-accent); color:var(--ui-accent); background:var(--ui-accent-glow); }
    .aig-angles button:disabled { opacity:.4; cursor:default; }
    .aig-turntable { width:100%; box-sizing:border-box; margin-top:6px; padding:8px; border-radius:var(--ui-radius-sm); cursor:pointer;
        border:1px dashed var(--ui-border); background:transparent; color:var(--ui-text); font-size:11px; font-weight:600; }
    .aig-turntable:hover { border-color:var(--ui-accent); color:var(--ui-accent); }
    .aig-turntable:disabled { opacity:.4; cursor:default; }
    .aig-orbit { display:flex; flex-direction:column; gap:8px;
        -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
    .aig-orbit, .aig-orbit * { -webkit-user-select:none; user-select:none; }
    .aig-orbit-svg text { -webkit-user-select:none; user-select:none; }
    .aig-orbit-svg { width:100%; height:128px; }
    .aig-orbit-svg .ring { fill:var(--aig-accent-tint); stroke:var(--ui-border); stroke-width:1.5; }
    .aig-orbit-svg .ringv { fill:none; stroke:var(--ui-border); stroke-width:1.2; stroke-dasharray:3 3; opacity:.65; }
    .aig-orbit-descrow { display:flex; align-items:flex-start; gap:8px; }
    .aig-orbit-descrow .aig-orbit-desc { flex:1 1 auto; min-width:0; }
    .aig-orbit-reset { flex-shrink:0; width:26px; height:26px; padding:0; display:inline-flex;
        align-items:center; justify-content:center; border-radius:var(--ui-radius-sm);
        background:transparent; border:1px solid var(--ui-border); color:var(--ui-text-muted);
        cursor:pointer; transition:color .12s, border-color .12s, background .12s; }
    .aig-orbit-reset:hover { color:var(--ui-accent); border-color:var(--ui-accent); background:var(--ui-accent-glow); }
    .aig-analyze-row { display:flex; align-items:center; gap:8px; margin-top:8px; padding:7px 8px;
        border-radius:var(--ui-radius-sm); background:var(--ui-bg-input); cursor:pointer;
        font-size:11px; font-weight:600; color:var(--ui-text); }
    .aig-analyze-row:hover { color:var(--ui-accent); }
    .aig-analyze-row input { accent-color:var(--ui-accent); width:14px; height:14px; margin:0; flex-shrink:0; }
    .aig-orbit-svg .subj { fill:var(--ui-text-muted); }
    .aig-orbit-svg .subj-frame { fill:none; stroke:var(--aig-veil-strong); stroke-width:1; }
    .aig-orbit-svg .cam { fill:var(--ui-accent); stroke:var(--ui-text); stroke-width:1.5; }
    .aig-orbit-svg .beam { stroke:var(--ui-accent); stroke-width:1.5; stroke-dasharray:3 3; opacity:.55; }
    .aig-orbit-svg .lbl { fill:var(--ui-text-muted); font-size:9px; font-weight:700; font-family:var(--ui-font); }
    .aig-orbit-slider { display:flex; align-items:center; gap:7px; }
    .aig-orbit-slider .ic { color:var(--ui-text-muted); font-size:12px; width:12px; text-align:center; flex-shrink:0; }
    .aig-orbit-slider input { flex:1; min-width:0; accent-color:var(--ui-accent); }
    .aig-orbit-slider .val { font-size:10px; color:var(--ui-accent); min-width:62px; text-align:right; flex-shrink:0; }
    .aig-orbit-desc { display:flex; flex-direction:column; gap:3px; padding:7px 8px; border-radius:var(--ui-radius-sm); background:var(--ui-bg-input); min-height:54px; box-sizing:border-box; justify-content:center; }
    .aig-orbit-desc .ru { font-size:11px; color:var(--ui-text); font-weight:600; }
    .aig-orbit-desc code { font-size:9px; color:var(--ui-accent); font-family:ui-monospace,monospace; word-break:break-word; line-height:1.4; }
    .aig-folder { margin-top:8px; display:flex; align-items:center; gap:6px; }
    .aig-folder button { background:var(--aig-veil); border:1px solid var(--ui-border); color:var(--ui-text-dim);
        border-radius:var(--ui-radius-sm); font-size:11px; padding:5px 8px; cursor:pointer; }
    .aig-folder button:hover { border-color:var(--ui-accent); color:var(--ui-text); }
    .aig-folder .cur { font-size:10px; color:var(--ui-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================================
   ⚡ C1. ВИДИМЫЙ ФОКУС.
   Клавиатурная навигация бесполезна, если не видно, где ты находишься. Именно
   поэтому :focus-visible, а не :focus: обводка появляется при обходе с
   клавиатуры и НЕ появляется от клика мышью — иначе она выглядела бы багом.
   ============================================================================ */
/* ⚡ Поля ввода перечислены ЯВНО: правило .aig-panel select:focus выше гасит
   обводку (outline:none) и специфичнее общего :focus-visible — без этого списка
   оно перебило бы обводку именно при обходе с клавиатуры. Для мыши гашение
   остаётся: там достаточно смены цвета рамки. */
.aig-panel :focus-visible,
.aig-panel select:focus-visible,
.aig-panel input:focus-visible,
.aig-panel textarea:focus-visible,
.aig-chip:focus-visible {
    outline: 2px solid var(--ui-border-focus);
    outline-offset: 2px;
    border-radius: var(--ui-radius-xs);
}
/* Секция принимает фокус только программно (возврат после пересборки) —
   собственной обводки ей не нужно, иначе мигала бы вся панель. */
.aig-sec:focus,
.aig-sec:focus-visible { outline: none; }