kingkont 0.7.39 → 0.7.40

package/renderer/styles.css

@@ -0,0 +1,1018 @@
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { height: 100%; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    background: #1a1a1a; color: #e0e0e0; display: flex; overflow: hidden;
+  }
+
+  .sidebar { width: 280px; background: #222; border-right: 1px solid #333; display: flex; flex-direction: column; flex-shrink: 0; }
+  /* На macOS вверху сидят traffic-lights окна (titleBarStyle: hiddenInset),
+     поэтому верхняя зона sidebar-header пустая под них; и сама эта зона draggable. */
+  .sidebar-header { padding: 32px 12px 12px; border-bottom: 1px solid #333; display: flex; flex-direction: column; gap: 8px; -webkit-app-region: drag; }
+  .sidebar-header h2 { font-size: 14px; }
+  .sidebar-header .brand { display: flex; align-items: center; gap: 8px; }
+  .sidebar-header .brand img {
+    width: 36px; height: 36px; flex-shrink: 0; object-fit: contain;
+    background: #1a1a1a; border-radius: 8px; padding: 4px;
+  }
+  .sidebar-header .recent-film {
+    display: block; font-size: 12px; color: #888; text-decoration: none;
+    padding: 6px 10px; border-radius: 4px; word-break: break-all;
+    background: #262626; border: 1px solid #333;
+    transition: background 0.12s, color 0.12s, border-color 0.12s;
+  }
+  .sidebar-header .recent-film:hover {
+    background: #2e2e2e; color: #ddd; border-color: #444;
+  }
+  .sidebar-footer {
+    border-top: 1px solid #333; padding: 10px 12px;
+    display: flex; flex-direction: column; gap: 6px;
+    font-size: 11px; color: #777;
+  }
+  .sidebar-footer .hint { color: #777; font-size: 11px; line-height: 1.4; }
+  .sidebar-footer .jobs-info { color: #aaccdd; font-size: 11px; }
+  .sidebar-footer .balance-info {
+    display: flex; align-items: center; gap: 6px; font-size: 11px;
+    color: #c4c4c4; padding: 4px 8px; background: #2a2a2a;
+    border: 1px solid #3a3a3a; border-radius: 6px; cursor: pointer;
+    width: fit-content; max-width: 100%;
+    transition: background 0.1s;
+  }
+  .sidebar-footer .balance-info:hover { background: #333; }
+  .sidebar-footer .balance-info .dot {
+    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
+    background: #16a34a;
+  }
+  .sidebar-footer .balance-info.low .dot { background: #f59e0b; }
+  .sidebar-footer .balance-info.empty .dot { background: #dc2626; }
+  .sidebar-footer .balance-info b { color: #fff; font-weight: 500; }
+  /* Когда проект ещё не открыт — секции с персонажами/локациями/сценами
+     не имеют смысла, скрываем их. Класс ставится в openFilm/closeFilm. */
+  body.no-project .sidebar > .sidebar-section,
+  body.no-project .sidebar-search-row { display: none; }
+  .sidebar-search-row { padding: 8px 12px; border-bottom: 1px solid #2a2a2a; }
+  .sidebar-search-row input {
+    width: 100%; padding: 5px 8px; font-size: 12px;
+    background: #1a1a1a; color: #ddd; border: 1px solid #333; border-radius: 4px;
+    outline: none;
+  }
+  .sidebar-search-row input:focus { border-color: #4a6a9a; }
+  .sidebar-list .item.search-hidden { display: none; }
+  .sidebar-header .brand .title { font-size: 14px; font-weight: 600; color: #e0e0e0; line-height: 1.1; }
+  .sidebar-header .brand .brand-version {
+    font-size: 10px; font-weight: 400; color: #666;
+    font-family: ui-monospace, 'SF Mono', monospace;
+    margin-left: 4px;
+  }
+  .sidebar-header .brand .sub   { font-size: 10px; color: #888; letter-spacing: 0.5px; text-transform: uppercase; }
+  .sidebar-header .brand .sub.has-project { color: #aaccdd; text-transform: none; letter-spacing: 0; font-size: 11px; }
+  .sidebar-header .brand .board {
+    margin-top: 3px; font-size: 13px; font-weight: 600; color: #e0e0e0;
+    word-break: break-all; line-height: 1.2;
+    display: flex; align-items: center; gap: 6px;
+  }
+  .sidebar-header .brand .board .kind {
+    font-size: 9px; font-weight: 600; letter-spacing: 0.5px;
+    text-transform: uppercase; padding: 1px 5px; border-radius: 3px;
+    background: #3a3a3a; color: #aaa;
+  }
+  .sidebar-header .brand .board .kind.character { background: #5a3a6a; color: #e0b0f0; }
+  .sidebar-header .brand .board .kind.location  { background: #3a5a4a; color: #b0e0c0; }
+  .sidebar-header .brand .board .kind.episode   { background: #2a4a6a; color: #aac8e6; }
+  /* Когда проект открыт — primary «Открыть проект» больше не нужна. */
+  body:not(.no-project) #pickRoot { display: none; }
+  /* #repliquesBtn в toolbar спрятан — функцию вызываем автоматом для персонажа. */
+  #repliquesBtn { display: none !important; }
+
+  /* === Welcome-screen (виден только когда body.no-project) === */
+  .welcome { display: none; }
+  body.no-project .welcome {
+    display: flex; position: fixed; inset: 0; z-index: 50;
+    flex-direction: column; align-items: center;
+    background: #1a1a1a;
+    -webkit-app-region: drag;
+    padding-top: 64px;
+    overflow: hidden;  /* recents скроллятся внутри своего блока */
+  }
+  body.no-project .sidebar, body.no-project .main, body.no-project .preview-panel { display: none !important; }
+  .welcome-inner {
+    display: flex; flex-direction: column; align-items: center; gap: 12px;
+    width: 100%; max-width: none; padding: 0;
+    flex: 1; min-height: 0;  /* нужно для child overflow */
+    -webkit-app-region: no-drag;
+  }
+  .welcome-header {
+    display: flex; flex-direction: column; align-items: center; gap: 12px;
+    flex-shrink: 0;  /* всегда сверху, не сжимается под recents */
+    padding: 0 32px;
+  }
+  .welcome-logo {
+    width: 96px; height: 96px; object-fit: contain;
+    background: #1f1f1f; border-radius: 16px; padding: 8px;
+    box-shadow: 0 4px 32px rgba(227, 51, 119, 0.18);
+  }
+  .welcome-title { font-size: 28px; font-weight: 600; color: #e0e0e0; margin: 8px 0 0; }
+  .welcome-version {
+    font-size: 13px; font-weight: 400; color: #666;
+    font-family: ui-monospace, 'SF Mono', monospace;
+    vertical-align: middle; margin-left: 6px;
+  }
+  .welcome-sub { font-size: 12px; color: #888; letter-spacing: 0.5px; text-transform: uppercase; }
+  .welcome-open {
+    margin-top: 16px;
+    padding: 12px 28px; font-size: 15px; font-weight: 600;
+    background: #3a5a8a; border-color: #4a6a9a; color: #fff;
+    border-radius: 6px; cursor: pointer; border: 1px solid #4a6a9a;
+  }
+  .welcome-open:hover { background: #4a6a9a; }
+  .welcome-recent {
+    margin-top: 36px; width: 100%;
+    flex: 1; min-height: 0;
+    display: flex; flex-direction: column;
+  }
+  .welcome-recent-title {
+    font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 0.6px;
+    margin-bottom: 14px; text-align: center;
+    flex-shrink: 0;
+  }
+  /* Recents в горизонтальную ленту со скроллом. Карточки фиксированной
+     ширины чтобы scroll работал предсказуемо. */
+  .welcome-recent-grid {
+    display: flex; flex-direction: row; gap: 16px;
+    overflow-x: auto; overflow-y: hidden;
+    padding: 8px 32px 24px;
+    scroll-snap-type: x proximity;
+  }
+  .welcome-recent-grid::-webkit-scrollbar { height: 8px; }
+
+  /* === Глобальные dark-scrollbars === */
+  /* Firefox */
+  * { scrollbar-color: #3a3a3a #1a1a1a; scrollbar-width: thin; }
+  /* WebKit (Electron/Chrome) — все scroll-области в приложении. */
+  ::-webkit-scrollbar { width: 10px; height: 10px; background: #1a1a1a; }
+  ::-webkit-scrollbar-track { background: #1a1a1a; }
+  ::-webkit-scrollbar-thumb {
+    background: #3a3a3a;
+    border-radius: 4px;
+    border: 2px solid #1a1a1a;  /* gap, чтобы thumb «не прилипал» к краям */
+  }
+  ::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
+  ::-webkit-scrollbar-corner { background: #1a1a1a; }
+  .welcome-card {
+    background: #232323; border: 1px solid #333; border-radius: 8px;
+    overflow: hidden; cursor: pointer; transition: border-color 0.12s, transform 0.12s;
+    display: flex; flex-direction: column;
+    width: 240px; flex-shrink: 0;
+    scroll-snap-align: start;
+  }
+  /* Карточка «Открыть проект» — стилизована под обычную recent-карточку,
+     но контент не превью, а большая иконка + надпись. */
+  .welcome-card.open-card {
+    background: linear-gradient(135deg, #2a3e5c, #344a6e);
+    border-color: #4a6a9a;
+  }
+  .welcome-card.open-card:hover {
+    border-color: #6a8aba;
+    background: linear-gradient(135deg, #344a6e, #4a6a9a);
+  }
+  .welcome-card.open-card .welcome-card-thumb {
+    background: transparent; color: #c4d4ec; font-size: 56px; line-height: 1;
+  }
+  .welcome-card.open-card .welcome-card-name {
+    color: #e0e8f4; font-weight: 600;
+  }
+  .welcome-card.open-card .welcome-card-ts { color: #aac0d8; }
+  .welcome-card:hover { border-color: #4a6a9a; transform: translateY(-2px); }
+  .welcome-card-thumb {
+    width: 100%; aspect-ratio: 16 / 9; background: #1a1a1a;
+    display: flex; align-items: center; justify-content: center;
+    color: #444; font-size: 32px;
+  }
+  .welcome-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .welcome-card-meta { padding: 8px 12px; }
+  .welcome-card-name { font-size: 13px; color: #ddd; word-break: break-all; }
+  .welcome-card-ts { font-size: 11px; color: #666; margin-top: 2px; }
+  .welcome-card-del {
+    position: absolute; top: 6px; right: 6px;
+    background: rgba(0,0,0,0.6); color: #aaa;
+    width: 22px; height: 22px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 14px; line-height: 1; cursor: pointer; opacity: 0;
+    transition: opacity 0.12s, color 0.12s;
+  }
+  .welcome-card { position: relative; }
+  .welcome-card:hover .welcome-card-del { opacity: 1; }
+  .welcome-card-del:hover { color: #f88; }
+  /* Интерактивные элементы внутри drag-региона должны быть кликабельными. */
+  .sidebar-header button, .sidebar-header input, .sidebar-header a, .sidebar-header .item { -webkit-app-region: no-drag; }
+  /* Главный toolbar тоже — окно можно таскать за пустое место в шапке. */
+  .toolbar { -webkit-app-region: drag; }
+  .toolbar button, .toolbar input, .toolbar select, .toolbar .badge, .toolbar .zoom-ctl { -webkit-app-region: no-drag; }
+  .sidebar-section { padding: 8px; border-bottom: 1px solid #333; display: flex; flex-direction: column; min-height: 0; }
+  .sidebar-section:last-child { border-bottom: none; }
+  .sidebar-section.flex { flex: 1; overflow-y: auto; }
+  .sidebar-section h3 {
+    font-size: 11px; text-transform: uppercase; color: #888;
+    margin: 4px 8px 8px; letter-spacing: 0.5px;
+    display: flex; justify-content: space-between; align-items: center;
+  }
+  .sidebar-section h3 button { padding: 2px 8px; font-size: 13px; }
+  .sidebar-list { display: flex; flex-direction: column; gap: 2px; }
+
+  .item { padding: 6px 10px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; font-size: 13px; gap: 6px; }
+  .item:hover { background: #2c2c2c; }
+  .item.active { background: #3a5a8a; color: #fff; }
+  .item .item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .item .item-delete {
+    opacity: 0; cursor: pointer; color: #888;
+    font-size: 16px; line-height: 1; padding: 0 4px;
+    flex-shrink: 0;
+  }
+  .item:hover .item-delete { opacity: 1; }
+  .item .item-delete:hover { color: #f88; }
+  .item .badge-mini { font-size: 10px; padding: 1px 4px; border-radius: 2px; background: #444; color: #aaa; }
+
+  button {
+    background: #3a3a3a; color: #e0e0e0; border: 1px solid #444;
+    padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 13px;
+  }
+  button:hover:not(:disabled) { background: #4a4a4a; }
+  button.primary { background: #3a5a8a; border-color: #4a6a9a; color: #fff; }
+  button.primary:hover:not(:disabled) { background: #4a6a9a; }
+  button.danger  { background: #6a3a3a; border-color: #8a4a4a; color: #fff; }
+  button.danger:hover:not(:disabled) { background: #8a4a4a; }
+  button:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+  .toolbar { padding: 8px 16px; background: #222; border-bottom: 1px solid #333; display: flex; gap: 6px; align-items: center; min-height: 48px; flex-wrap: nowrap; overflow-x: auto; }
+  .toolbar button { white-space: nowrap; flex-shrink: 0; }
+  .toolbar > * { flex-shrink: 0; }
+  .toolbar .spacer { flex: 1 0 8px; }
+  .toolbar::-webkit-scrollbar { height: 0; display: none; }
+  .toolbar .path { color: #888; font-size: 13px; }
+  .toolbar .badge {
+    font-size: 10px; padding: 2px 6px; border-radius: 3px;
+    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
+  }
+  .toolbar .badge.episode  { background: #2a4a6a; color: #aac8e6; }
+  .toolbar .badge.character { background: #5a3a6a; color: #e0b0f0; }
+  .toolbar .spacer { flex: 1; }
+  .toolbar .jobs-info { font-size: 12px; color: #aaa; display: flex; align-items: center; gap: 6px; }
+  .zoom-ctl { display: flex; gap: 0; }
+  .zoom-ctl button {
+    padding: 4px 10px; font-size: 13px; border-radius: 0;
+    border-right: none; min-width: 32px;
+  }
+  .zoom-ctl button:first-child { border-radius: 4px 0 0 4px; }
+  .zoom-ctl button:last-child  { border-radius: 0 4px 4px 0; border-right: 1px solid #444; }
+  .zoom-ctl #zoomLabel { font-variant-numeric: tabular-nums; min-width: 56px; cursor: pointer; }
+
+  .canvas-wrap {
+    flex: 1; position: relative; overflow: auto; background: #181818;
+    /* Точечный паттерн фиксированного размера: при зуме НЕ ререндерим весь фон.
+       Раньше background-size = 24px * --zoom — каждый wheel-tick инвалидировал
+       весь видимый фон, GPU-коммит занимал сотни мс. */
+    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
+    background-size: 24px 24px;
+  }
+  .canvas-frame {
+    position: relative;
+    width: 6000px; height: 4000px;
+  }
+  .canvas {
+    position: absolute; left: 0; top: 0; width: 6000px; height: 4000px;
+    transform-origin: 0 0;
+    /* `will-change: transform` — постоянная промоция в композитный слой.
+       Trade-off: hover/scroll иногда вызывают re-raster плитки (~200ms
+       коммиты), НО зум через transform идёт через GPU без layout/paint
+       на main-thread. Без will-change зум форсит full re-raster и layout
+       на каждый wheel-tick (видели 751ms Layout + 2900ms commits в трейсе).
+       Dynamic will-change (toggle on/off) — ещё хуже из-за promotion churn. */
+    will-change: transform;
+  }
+  .canvas-wrap.drag-over::after {
+    content: 'Отпусти, чтобы импортировать';
+    position: fixed; inset: 64px 16px 16px calc(280px + 16px);
+    border: 3px dashed #6a8aaa; border-radius: 12px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 22px; color: #6a8aaa; pointer-events: none;
+    background: rgba(58,90,138,0.05);
+  }
+
+  .node {
+    position: absolute; width: 280px; background: #2a2a2a;
+    border: 1px solid #444; border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.5); user-select: none;
+    display: flex; flex-direction: column;
+    /* `content-visibility: auto` пропускает layout/style/paint для offscreen-нод
+       (на холсте 6000×4000 видимы единицы из сотен — это огромная экономия).
+       С будет работать паре `contain-intrinsic-size` — Chrome использует это
+       вместо реального измерения для skip-нод.
+       НЕ ставим явный `contain: paint` или просто `contain: layout style` —
+       первый плодит paint-property-tree (PrePaint >1s на зуме), второй не
+       изолирует размер и Chrome всё равно гоняет layout-walk через все ноды
+       в каждом frame (482ms layout с dirty=4 из 1446 в трейсе).
+       `isolation: isolate` — стекинг-контекст для .anchor (z-index:5),
+       чтобы он не пробивал поверх соседних нод. */
+    content-visibility: auto;
+    contain-intrinsic-size: 280px 200px;
+    isolation: isolate;
+  }
+  .node.dragging-to-timeline {
+    opacity: 0.5;
+    box-shadow: 0 0 0 2px #5aa8ff, 0 8px 24px rgba(90,168,255,0.4);
+  }
+  .node-body { flex: 1; min-height: 0; }
+  .node.text-node .node-body { padding: 0; display: flex; }
+  .node.text-node .node-body textarea {
+    width: 100%; height: 100%; resize: none; min-height: 80px;
+    border: none; border-radius: 0; padding: 12px; flex: 1;
+  }
+  .node.video-node .node-body { padding: 0; overflow: hidden; border-radius: 0 0 8px 8px; }
+  .node.video-node .node-body video { width: 100%; height: auto; max-height: none; background: transparent; border-radius: 0; display: block; }
+  .audio-speed { display: flex; gap: 2px; margin-top: 6px; }
+  .audio-speed button {
+    flex: 1; font-size: 11px; padding: 3px 4px;
+    background: #1e1e1e; border: 1px solid #383838; color: #aaa;
+    border-radius: 3px; cursor: pointer;
+  }
+  .audio-speed button:hover { background: #2c2c2c; color: #fff; }
+  .audio-speed button.active { background: #3a5a8a; color: #fff; border-color: #4a6a9a; }
+
+  /* Тоны-теги для голосовой генерации */
+  .tones-wrap { position: relative; }
+  .tones-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
+  .tones-tags:empty { min-height: 0; }
+  .tones-tags .chip {
+    display: inline-flex; align-items: center; gap: 4px;
+    background: #3a5a8a; color: #fff; border-radius: 11px;
+    padding: 2px 4px 2px 10px; font-size: 12px;
+    white-space: nowrap;
+  }
+  .tones-tags .chip .x {
+    background: rgba(0,0,0,0.25); border: none; color: #fff;
+    border-radius: 50%; width: 16px; height: 16px;
+    cursor: pointer; line-height: 1; padding: 0; font-size: 14px;
+  }
+  .tones-tags .chip .x:hover { background: rgba(0,0,0,0.5); }
+  .tones-tags .chip.ghost {
+    background: transparent; color: #aaa;
+    border: 1px dashed #555; padding: 2px 10px;
+    cursor: pointer; font: inherit; line-height: 1.4;
+  }
+  .tones-tags .chip.ghost:hover {
+    background: rgba(58,90,138,0.2); border-color: #6a8aaa; color: #ddd;
+  }
+  .tones-tags .chip.ghost:focus { outline: none; }
+  .tones-suggest {
+    position: absolute; left: 0; right: 0; top: 100%;
+    background: #1e1e1e; border: 1px solid #444; border-radius: 6px;
+    margin-top: 4px; max-height: 180px; overflow-y: auto;
+    z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+  }
+  .tones-suggest.hidden { display: none; }
+  .tones-suggest .opt {
+    padding: 6px 10px; cursor: pointer; font-size: 13px;
+  }
+  .tones-suggest .opt:hover, .tones-suggest .opt.sel { background: #3a5a8a; color: #fff; }
+  .resize-handle {
+    position: absolute; right: 0; bottom: 0;
+    width: 16px; height: 16px; cursor: nwse-resize;
+    background:
+      linear-gradient(135deg,
+        transparent 0%, transparent 55%,
+        #777 55%, #777 65%, transparent 65%,
+        transparent 75%, #777 75%, #777 85%, transparent 85%);
+    opacity: 0.45; border-bottom-right-radius: 8px;
+  }
+  .resize-handle:hover { opacity: 1; }
+
+  .node-footer {
+    display: flex; align-items: center; justify-content: center;
+    gap: 2px; padding: 4px;
+    border-top: 1px solid #383838;
+    font-size: 11px; color: #888;
+  }
+  .node-footer button {
+    background: transparent; border: 1px solid transparent;
+    color: #aaa; padding: 2px 8px; border-radius: 3px;
+    cursor: pointer; font-size: 12px; line-height: 1;
+  }
+  .node-footer button:hover:not(:disabled) { background: #3a3a3a; color: #fff; }
+  .node-footer button:disabled { opacity: 0.3; cursor: default; }
+  .node-footer .regen-btn { font-size: 14px; padding: 2px 10px; }
+  .node-footer .pos { padding: 0 6px; font-variant-numeric: tabular-nums; }
+
+  /* Якорь связи: выглядывает из правой грани ноды */
+  .node .anchor {
+    position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
+    width: 18px; height: 18px; background: #6a8aaa;
+    border-radius: 50%; border: 2px solid #1a1a1a;
+    opacity: 0; cursor: crosshair; z-index: 5;
+    transition: opacity 0.12s, transform 0.12s, background 0.12s;
+    box-shadow: 0 0 0 1px rgba(106,138,170,0.3);
+  }
+  .node:hover .anchor { opacity: 1; }
+  .anchor:hover, .anchor.dragging { opacity: 1; background: #88aacc; transform: translateY(-50%) scale(1.3); }
+  .anchor:hover:not(.dragging) {
+    animation: anchorPulse 1.2s ease-out infinite;
+  }
+  @keyframes anchorPulse {
+    0%   { box-shadow: 0 0 0 1px rgba(106,138,170,0.4), 0 0 0 0  rgba(136,170,204,0.55); }
+    100% { box-shadow: 0 0 0 1px rgba(106,138,170,0.4), 0 0 0 14px rgba(136,170,204,0);    }
+  }
+
+  /* SVG-связи поверх холста */
+  .connections-layer {
+    position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible;
+  }
+  .connections-layer .conn { pointer-events: auto; }
+  .connections-layer .hit { stroke: transparent; stroke-width: 16; fill: none; cursor: pointer; pointer-events: stroke; }
+  .connections-layer .line { stroke: #6a8aaa; stroke-width: 2; fill: none; pointer-events: none; }
+  .connections-layer .conn:hover .line { stroke: #f88; stroke-width: 3; }
+  .connections-layer .temp-line { stroke: #6a8aaa; stroke-width: 2; stroke-dasharray: 6 4; fill: none; pointer-events: none; }
+
+  /* Меню «что добавить» */
+  .add-menu {
+    position: fixed; background: #1e1e1e; border: 1px solid #444;
+    border-radius: 6px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.6);
+    z-index: 200; display: flex; flex-direction: column; min-width: 220px;
+  }
+  .add-menu.hidden { display: none; }
+  .add-menu button {
+    background: transparent; border: none; text-align: left;
+    padding: 8px 12px; border-radius: 4px; color: #ddd; font-size: 13px;
+  }
+  .add-menu button:hover { background: #2c2c2c; }
+
+  /* === Fullscreen viewer === */
+  .fs-modal {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.95);
+    z-index: 1000; display: flex; align-items: center; justify-content: center;
+  }
+  .fs-modal.hidden { display: none; }
+  .fs-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px; }
+  .fs-stage img, .fs-stage video {
+    max-width: 100%; max-height: 100%; object-fit: contain;
+  }
+  .fs-modal #fsClose {
+    position: absolute; top: 16px; right: 16px;
+    background: rgba(0,0,0,0.6); border: 1px solid #444; color: #fff;
+    font-size: 22px; line-height: 1; padding: 4px 12px; border-radius: 4px;
+    cursor: pointer;
+  }
+  .fs-modal #fsClose:hover { background: rgba(255,68,68,0.7); }
+
+  /* === Реплики (боковая панель справа) === */
+  .repliques-panel {
+    width: 380px; background: #1c1c1c; border-left: 1px solid #333;
+    display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden;
+  }
+  .repliques-panel.hidden { display: none; }
+  .repliques-header {
+    padding: 10px 12px; border-bottom: 1px solid #333;
+    display: flex; align-items: center; gap: 6px; font-size: 13px;
+  }
+  .repliques-header .spacer { flex: 1; }
+  .repliques-header button {
+    background: transparent; border: none; color: #888;
+    font-size: 18px; padding: 0 6px; cursor: pointer; line-height: 1;
+  }
+  .repliques-header button:hover { color: #f88; }
+  .repliques-body {
+    flex: 1; padding: 10px 12px; display: flex; flex-direction: column;
+    gap: 8px; overflow-y: auto;
+  }
+  .repliques-body select {
+    background: #1e1e1e; color: #ddd; border: 1px solid #333;
+    padding: 6px 8px; border-radius: 3px; font-family: inherit;
+  }
+  .replique-row {
+    display: flex; gap: 6px; padding: 6px;
+    background: #1e1e1e; border: 1px solid #333; border-radius: 4px;
+    align-items: flex-start;
+    cursor: pointer; transition: border-color 0.1s;
+  }
+  .replique-row.selected { border-color: #6a8aaa; background: #1f2a3a; }
+  .replique-row textarea {
+    flex: 1; min-height: 36px; resize: vertical;
+    background: #161616; color: #ddd; border: 1px solid #333;
+    border-radius: 3px; padding: 4px 6px; font-family: inherit; font-size: 12px;
+    line-height: 1.3;
+  }
+  .replique-row .play-btn {
+    flex: 0 0 28px; width: 28px; height: 28px; padding: 0;
+    background: #2c2c2c; border: 1px solid #444; border-radius: 50%;
+    cursor: pointer; color: #ddd; font-size: 12px;
+  }
+  .replique-row .play-btn:hover { background: #3a5a8a; border-color: #4a6a9a; color: #fff; }
+  .replique-row .play-btn.playing { background: #c44; border-color: #d55; }
+  .replique-row .replique-status { font-size: 9px; color: #888; min-height: 10px; flex: 0 0 auto; }
+  .replique-row .replique-status.error { color: #e07a6a; }
+  .replique-actions {
+    display: flex; gap: 4px; flex-wrap: wrap;
+    padding: 8px 0; border-top: 1px solid #333; margin-top: 4px;
+  }
+  .replique-actions button { flex: 1; min-width: 100px; font-size: 12px; }
+
+  /* === Source frame в gen-модалке === */
+  .source-ref {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px; background: #1e1e1e; border: 1px solid #333; border-radius: 4px;
+  }
+  .source-ref img {
+    width: 64px; height: 64px; object-fit: cover; border-radius: 3px;
+    background: #000; flex-shrink: 0;
+  }
+  .source-ref .name {
+    flex: 1; font-size: 12px; color: #ccc; word-break: break-all;
+    line-height: 1.4;
+  }
+  .source-ref .name .hint { display: block; color: #888; font-size: 10px; margin-top: 2px; }
+  .modal-card label .hint { color: #777; font-size: 10px; text-transform: none; letter-spacing: 0; }
+  .source-ref button {
+    background: #2a2a2a; border: 1px solid #444; color: #ccc;
+    border-radius: 3px; padding: 4px 10px; cursor: pointer; font-size: 13px;
+  }
+  .source-ref button:hover { background: #383838; color: #fff; }
+  .source-ref.disabled { opacity: 0.4; }
+  .source-ref.disabled .name { text-decoration: line-through; }
+
+  /* === Picker chips для персонажей === */
+  .picker-chips {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    padding: 8px; background: #1e1e1e; border: 1px solid #333; border-radius: 4px;
+    min-height: 38px;
+  }
+  .picker-chips:empty::before {
+    content: 'нет персонажей в проекте'; color: #666; font-size: 12px;
+  }
+  .picker-chip {
+    display: inline-flex; align-items: center; gap: 6px;
+    background: #2a2a2a; border: 1px solid #444; color: #ccc;
+    padding: 4px 10px; border-radius: 14px; cursor: pointer; font-size: 12px;
+    user-select: none;
+  }
+  .picker-chip:hover { background: #333; }
+  .picker-chip.active {
+    background: #2d4a6a; border-color: #6a8aaa; color: #fff;
+  }
+  .picker-chip .dot {
+    width: 6px; height: 6px; border-radius: 50%; background: #555;
+  }
+  .picker-chip.active .dot { background: #aae06a; }
+
+  /* === Раскладка main === */
+  .content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }
+  /* === Зафиксированная панель превью на правой стороне === */
+  :root { --preview-w: 420px; --preview-collapsed: 36px; }
+  /* БЕЗ transition на padding-right/width: оба не композируются,
+     анимация прогоняла full-tree layout ~470ms каждый кадр × 11 кадров =
+     1+ секунды затыка при collapse-toggle. Snap-collapse — мгновенно. */
+  body { padding-right: var(--preview-w); }
+  body.preview-collapsed { padding-right: var(--preview-collapsed); }
+  .preview-panel {
+    position: fixed; top: 0; right: 0; bottom: 0;
+    width: var(--preview-w);
+    background: #1c1c1c; border-left: 1px solid #333;
+    z-index: 40; overflow: hidden;
+    display: flex; flex-direction: column;
+  }
+  .preview-panel.collapsed { width: var(--preview-collapsed); }
+  .preview-resize-handle {
+    position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
+    cursor: ew-resize; z-index: 2;
+  }
+  .preview-resize-handle:hover { background: rgba(106,138,170,0.4); }
+  .preview-panel.collapsed .preview-resize-handle { display: none; }
+  .preview-header {
+    padding: 8px 10px; border-bottom: 1px solid #333;
+    display: flex; align-items: center; gap: 6px; font-size: 13px;
+    user-select: none; background: #232323;
+    flex-shrink: 0;
+  }
+  .preview-header .spacer { flex: 1; }
+  .preview-header button {
+    background: transparent; border: none; color: #888;
+    font-size: 16px; padding: 0 6px; cursor: pointer; line-height: 1;
+  }
+  .preview-header button:hover { color: #ddd; }
+  .preview-panel.collapsed .preview-header {
+    flex-direction: column; align-items: center; gap: 8px;
+    padding: 10px 4px; cursor: pointer;
+    height: 100%; border-bottom: none;
+    justify-content: flex-start;
+  }
+  .preview-panel.collapsed .preview-header strong {
+    writing-mode: vertical-rl; transform: rotate(180deg);
+    font-size: 12px; letter-spacing: 0.5px;
+  }
+  .preview-panel.collapsed .preview-header .spacer { display: none; }
+  .preview-panel.collapsed .preview-header #previewToggle { transform: rotate(180deg); }
+  .preview-panel .preview-stage {
+    flex: 1; position: relative; background: #000;
+    display: flex; align-items: center; justify-content: center;
+    min-height: 0;
+  }
+  .preview-panel.collapsed .preview-stage { display: none; }
+  .preview-panel .timeline-preview,
+  .preview-panel .timeline-preview-img {
+    position: absolute; inset: 0; width: 100%; height: 100%;
+    object-fit: contain; background: #000;
+  }
+  .preview-panel .timeline-preview-img.hidden,
+  .preview-panel .timeline-preview.hidden { display: none; }
+
+  /* === Таймлайн (нижняя панель, full-width) === */
+  .timeline-panel {
+    border-top: 1px solid #333; background: #1c1c1c;
+    display: flex; flex-direction: column; flex-shrink: 0;
+    max-height: 40vh; min-height: 240px; overflow: hidden;
+  }
+  .timeline-panel.hidden { display: none; }
+  .timeline-header {
+    padding: 10px 12px; border-bottom: 1px solid #333;
+    display: flex; align-items: center; gap: 6px; font-size: 13px;
+  }
+  .timeline-header .spacer { flex: 1; }
+  .timeline-body { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; }
+  .timeline-tracks {
+    position: relative;
+    display: flex; flex-direction: column; gap: 6px;
+    overflow: auto;
+    padding: 8px; background: #161616; border-radius: 4px;
+    flex: 1; min-height: 0;
+  }
+  .timeline-ruler {
+    position: sticky; top: 0; left: 0; height: 18px;
+    background: #161616; border-bottom: 1px solid #2a2a2a;
+    z-index: 8; min-width: 100%;
+  }
+  .timeline-ruler .ruler-content {
+    position: relative; height: 100%; padding-left: 138px;
+  }
+  .timeline-ruler .tick {
+    position: absolute; top: 0; bottom: 0;
+    color: #777; font-size: 9px; font-family: ui-monospace, monospace;
+    border-left: 1px solid #2a2a2a; padding: 2px 4px;
+  }
+  .timeline-playhead {
+    position: absolute; top: 0; bottom: 0; width: 2px;
+    background: #f55; pointer-events: none; z-index: 9;
+  }
+  .timeline-playhead .ph-handle {
+    position: absolute; top: 0; left: -6px;
+    width: 14px; height: 14px; background: #f55;
+    border-radius: 50%; cursor: ew-resize; pointer-events: auto;
+    box-shadow: 0 0 0 2px rgba(255,85,85,0.3);
+  }
+  .timeline-playhead .ph-handle:hover { transform: scale(1.15); }
+  .timeline-track {
+    display: flex; align-items: stretch; gap: 0;
+    background: #1c1c1c; border-radius: 4px;
+    min-height: 90px;
+  }
+  .timeline-track[data-track-kind="audio"] { min-height: 36px; }
+  .timeline-track[data-track-kind="audio"] .track-clips { min-height: 30px; padding: 2px 0; }
+  .timeline-track[data-track-kind="audio"] .timeline-clip {
+    font-size: 11px; padding: 3px 8px; gap: 0;
+    background: #2d7a3a; border-color: #1f5828; color: #fff;
+  }
+  .timeline-track[data-track-kind="audio"] .timeline-clip img,
+  .timeline-track[data-track-kind="audio"] .timeline-clip video,
+  .timeline-track[data-track-kind="audio"] .timeline-clip .clip-type,
+  .timeline-track[data-track-kind="audio"] .timeline-clip .clip-dur { display: none; }
+  .timeline-track[data-track-kind="audio"] .timeline-clip .clip-name {
+    color: #fff; font-size: 11px; padding: 0; line-height: 1.4;
+    font-weight: 500;
+  }
+  .timeline-track[data-track-kind="audio"] .track-meta { padding: 4px 8px; }
+  .timeline-track[data-track-kind="audio"] .track-meta .track-actions { display: none; }
+  .timeline-track[data-track-kind="audio"] .timeline-clip .clip-x {
+    width: 14px; height: 14px; font-size: 9px;
+    background: rgba(0,0,0,0.4);
+  }
+
+  /* Placeholder при перетаскивании клипа */
+  .timeline-clip-placeholder {
+    position: absolute; top: 4px; bottom: 4px;
+    background: rgba(106,138,170,0.2);
+    border: 2px dashed #6a8aaa; border-radius: 4px;
+    pointer-events: none; z-index: 1;
+  }
+  .timeline-clip-placeholder.audio {
+    background: rgba(45,122,58,0.25);
+    border-color: #2d7a3a;
+  }
+  .timeline-clip-placeholder.replace {
+    background: rgba(224,122,106,0.25);
+    border-color: #e07a6a;
+    border-style: solid;
+  }
+  .timeline-clip.replace-target {
+    outline: 2px solid #e07a6a; outline-offset: -2px;
+  }
+  .timeline-clip .clip-status {
+    position: absolute; inset: 0; z-index: 4;
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+    background: rgba(0,0,0,0.55); border-radius: 3px; pointer-events: none;
+    font-size: 11px; color: #ddd; padding: 4px 8px; text-align: center;
+  }
+  .timeline-clip .clip-status.error { background: rgba(80,20,20,0.7); color: #f88; }
+  .timeline-clip .clip-status .spinner {
+    width: 14px; height: 14px; border-width: 2px;
+  }
+  .timeline-clip.is-generating { border-color: #6a8aaa; box-shadow: 0 0 0 1px rgba(106,138,170,0.4) inset; }
+  .timeline-clip.is-error { border-color: #b04040; }
+  .timeline-clip.disabled {
+    opacity: 0.45; filter: grayscale(0.7);
+    background-image: repeating-linear-gradient(45deg,
+      transparent 0 8px, rgba(0,0,0,0.25) 8px 16px);
+  }
+  .timeline-clip.disabled .clip-name { text-decoration: line-through; }
+  .timeline-clip.grouped {
+    border-top: 3px solid var(--group-color, #6a8aaa);
+  }
+  .timeline-clip.grouped::before {
+    content: '🔗'; position: absolute; top: 4px; right: 6px;
+    font-size: 10px; opacity: 0.6; pointer-events: none; z-index: 4;
+  }
+  .timeline-clip.selected {
+    box-shadow: 0 0 0 2px #6a8aaa, 0 0 8px rgba(106,138,170,0.5);
+    border-color: #6a8aaa;
+  }
+  .timeline-track.selected .track-meta {
+    background: #2d4a6a; border-right-color: #6a8aaa;
+  }
+  .timeline-clip .clip-handle {
+    position: absolute; top: 0; bottom: 0; width: 6px;
+    cursor: ew-resize; z-index: 3; background: transparent;
+  }
+  .timeline-clip .clip-handle:hover,
+  .timeline-clip .clip-handle.active { background: rgba(106,138,170,0.55); }
+  .timeline-clip .clip-handle.left { left: 0; border-left: 2px solid transparent; }
+  .timeline-clip .clip-handle.right { right: 0; border-right: 2px solid transparent; }
+  .timeline-clip .clip-handle.left:hover { border-left-color: #6a8aaa; }
+  .timeline-clip .clip-handle.right:hover { border-right-color: #6a8aaa; }
+  .timeline-track .track-meta {
+    position: sticky; left: 0; z-index: 5;
+    background: #16243a; padding: 6px 8px;
+    border-right: 1px solid #1f3251;
+  }
+  .timeline-track .track-meta {
+    width: 130px; flex-shrink: 0; display: flex; flex-direction: column;
+    gap: 4px; border-right: 1px solid #2a2a2a; padding-right: 8px;
+  }
+  .timeline-track .track-name {
+    background: transparent; border: 1px solid transparent; color: #ddd;
+    font-size: 12px; padding: 2px 4px; border-radius: 3px; outline: none;
+  }
+  .timeline-track .track-name:hover { border-color: #383838; }
+  .timeline-track .track-name:focus { background: #1e1e1e; border-color: #6a8aaa; }
+  .timeline-track .track-actions {
+    display: flex; gap: 4px; margin-top: auto;
+  }
+  .timeline-track .track-actions button {
+    flex: 1; background: transparent; border: 1px solid #383838; color: #888;
+    padding: 2px 4px; border-radius: 3px; font-size: 10px;
+    cursor: pointer; line-height: 1;
+  }
+  .timeline-track .track-actions button:hover { color: #ddd; border-color: #555; }
+  .timeline-track .track-kind {
+    font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 0.5px;
+  }
+  .timeline-track .track-clips {
+    flex: 1; position: relative; min-height: 80px; min-width: 0;
+    padding: 4px 0;
+  }
+  .timeline-track .track-clips:empty::before {
+    content: '— пусто —'; color: #555; font-size: 11px;
+    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+  }
+  .add-track-btn {
+    align-self: flex-start; background: transparent; color: #888;
+    border: 1px dashed #444; padding: 6px 12px; border-radius: 4px;
+    cursor: pointer; font-size: 12px;
+  }
+  .add-track-btn:hover { border-color: #666; color: #ddd; }
+  .timeline-clip {
+    position: relative; min-width: 40px; flex-shrink: 0;
+    background: #2a2a2a; border: 1px solid #444; border-radius: 4px;
+    padding: 4px; display: flex; flex-direction: column; gap: 4px;
+    cursor: grab; overflow: hidden;
+  }
+  .timeline-clip.dragging { opacity: 0.5; }
+  .timeline-clip img, .timeline-clip video {
+    width: 70px; height: 70px; object-fit: cover; border-radius: 2px;
+    background: #000; display: block;
+    position: absolute; left: 50%; top: 4px;
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+  .timeline-clip .clip-name {
+    font-size: 10px; color: #aaa; overflow: hidden; text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* В видео-треке имя поверх нижней части превью */
+  .timeline-track[data-track-kind="video"] .timeline-clip .clip-name {
+    position: absolute; left: 4px; right: 4px; bottom: 4px;
+    text-align: center; padding: 1px 4px;
+    background: rgba(0,0,0,0.7); border-radius: 2px;
+    color: #fff; z-index: 2;
+  }
+  .timeline-track[data-track-kind="video"] .timeline-clip .clip-type,
+  .timeline-track[data-track-kind="video"] .timeline-clip .clip-dur { display: none; }
+  .timeline-clip .clip-dur {
+    display: flex; align-items: center; gap: 4px; font-size: 10px; color: #888;
+  }
+  .timeline-clip .clip-dur input {
+    width: 48px; background: #1e1e1e; border: 1px solid #383838;
+    color: #ddd; font-size: 10px; padding: 1px 3px; border-radius: 2px;
+    font-family: ui-monospace, monospace;
+  }
+  .timeline-clip .clip-x {
+    position: absolute; top: 2px; right: 2px;
+    background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%;
+    width: 18px; height: 18px; cursor: pointer; font-size: 11px;
+    line-height: 1; padding: 0; opacity: 0;
+  }
+  .timeline-clip:hover .clip-x { opacity: 1; }
+  .timeline-clip .clip-x:hover { background: #c44; }
+  .timeline-clip .clip-type {
+    position: absolute; top: 2px; left: 2px;
+    font-size: 9px; padding: 1px 4px; border-radius: 2px;
+    background: rgba(0,0,0,0.6); color: #fff; text-transform: uppercase;
+  }
+  .timeline-status { font-size: 11px; color: #888; min-height: 14px; }
+  .timeline-status.error { color: #e07a6a; }
+  .node.selected { border-color: #6a8aaa; box-shadow: 0 0 0 2px rgba(106,138,170,0.4), 0 4px 12px rgba(0,0,0,0.4); }
+  .node.picked { border-color: #f0a040; box-shadow: 0 0 0 2px rgba(240,160,64,0.55), 0 4px 12px rgba(0,0,0,0.4); }
+  .node-header {
+    padding: 4px 8px; border-bottom: 1px solid #383838;
+    display: flex; justify-content: space-between; align-items: center; gap: 6px;
+    min-height: 22px; cursor: move;
+  }
+  .node-header .name {
+    flex: 1; min-width: 0;
+    color: #ccc; font-size: 12px; line-height: 1.2;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    user-select: none;
+  }
+  .node-header .name.empty { color: #555; font-style: italic; }
+  .node-header .delete { cursor: pointer; color: #888; font-size: 16px; line-height: 1; padding: 0 4px; flex-shrink: 0; }
+  .node-header .delete:hover { color: #f88; }
+
+  /* Имя ноды убрано из header — переименование через ПКМ → ✏ Переименовать.
+     Хедер теперь содержит только × delete (и слева пустое место для drag-grab). */
+  .node-body { padding: 12px; }
+  .node-body video, .node-body audio {
+    width: 100%; max-height: 220px; background: #000;
+    border-radius: 4px; display: block; object-fit: contain;
+  }
+  .node.image-node .node-body { padding: 0; overflow: hidden; border-radius: 0 0 8px 8px; }
+  .node.image-node .node-body img { width: 100%; height: auto; display: block; }
+  /* Placeholder отображается до lazy-гидрации media — на оффскрин-нодах
+     не дёргаем диск/декод. Размером совпадает с типичной картинкой/видео. */
+  .media-placeholder {
+    display: flex; align-items: center; justify-content: center;
+    min-height: 140px; font-size: 32px; opacity: 0.35;
+    background: #1e1e1e; border-radius: 4px;
+  }
+  .node.image-node .media-placeholder,
+  .node.video-node .media-placeholder { min-height: 200px; border-radius: 0; }
+  /* Thumbnail отображается до загрузки full media — мгновенный визуальный feedback. */
+  .media-thumb {
+    width: 100%; height: auto; display: block;
+    image-rendering: -webkit-optimize-contrast; /* slight crispness for upscaled thumb */
+  }
+  .node.image-node .media-thumb,
+  .node.video-node .media-thumb { display: block; }
+  .node-body textarea {
+    width: 100%; min-height: 100px; background: #1e1e1e; color: #e0e0e0;
+    border: 1px solid #383838; border-radius: 4px; padding: 8px;
+    font-family: inherit; font-size: 13px; resize: vertical; outline: none;
+  }
+  .node-body textarea:focus { border-color: #6a8aaa; }
+  .node-body .filename {
+    font-size: 11px; color: #888; margin-bottom: 8px; word-break: break-all;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  }
+  .node-body .missing { color: #e07a6a; font-size: 12px; padding: 8px 0; }
+
+  .gen-pending {
+    display: flex; flex-direction: column; gap: 10px; padding: 18px;
+    align-items: center; justify-content: center;
+    border: 1px dashed #444; border-radius: 4px;
+    background: #1e1e1e; min-height: 140px;
+  }
+  /* В text-нодах pending занимает всё тело: убираем рамку, тянемся флексом. */
+  .node.text-node .node-body .gen-pending {
+    flex: 1; width: 100%; height: 100%; min-height: 100px;
+    border: none; border-radius: 0;
+    background: #141414;
+  }
+  .gen-pending .prompt-preview {
+    font-size: 11px; color: #aaa; line-height: 1.4; text-align: center;
+    max-height: 60px; overflow-y: auto; word-break: break-word;
+  }
+  .gen-pending .state-text { font-size: 11px; color: #888; }
+  .gen-error {
+    background: #3a1e1e; border: 1px solid #6a3a3a; border-radius: 4px;
+    padding: 10px; color: #e07a6a; font-size: 12px; line-height: 1.4;
+    word-break: break-word;
+  }
+  .gen-error button { margin-top: 8px; }
+
+  .empty {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    color: #666; font-size: 15px; flex-direction: column; gap: 14px;
+    text-align: center; padding: 24px; pointer-events: none;
+  }
+  .empty h3 { color: #aaa; font-size: 18px; }
+  .empty p { max-width: 420px; line-height: 1.6; }
+  .empty.hidden { display: none; }
+
+  .unsupported { margin: auto; max-width: 540px; padding: 32px; background: #2a2a2a; border-radius: 12px; border: 1px solid #444; }
+  .unsupported h1 { margin-bottom: 12px; }
+  .unsupported p { line-height: 1.6; margin-bottom: 8px; color: #bbb; }
+  .unsupported code { background: #1e1e1e; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
+
+  /* === Modal === */
+  .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; z-index: 100; }
+  .modal.hidden { display: none; }
+  .modal-card {
+    background: #2a2a2a; border: 1px solid #444; border-radius: 12px;
+    padding: 24px; width: 540px; max-width: 92vw; max-height: 90vh;
+    overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
+    position: relative;
+  }
+  .modal-card h3 { font-size: 16px; }
+  .modal-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; }
+  .modal-card input, .modal-card textarea, .modal-card select {
+    background: #1e1e1e; color: #e0e0e0; border: 1px solid #383838;
+    border-radius: 4px; padding: 8px 10px; font-family: inherit; font-size: 14px;
+    outline: none; text-transform: none; letter-spacing: normal;
+  }
+  .modal-card input:focus, .modal-card textarea:focus, .modal-card select:focus { border-color: #6a8aaa; }
+  .modal-card textarea { resize: vertical; min-height: 100px; }
+  .modal-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
+  .modal-actions .spacer { flex: 1; }
+  .seg-control { display: flex; }
+  .seg-control .seg { flex: 1; background: #1e1e1e; border: 1px solid #383838; border-radius: 0; }
+  .seg-control .seg:first-child { border-radius: 4px 0 0 4px; }
+  .seg-control .seg:last-child  { border-radius: 0 4px 4px 0; border-left: none; }
+  .seg-control .seg.active { background: #3a5a8a; border-color: #4a6a9a; color: #fff; }
+  .status { font-size: 12px; color: #aaa; display: flex; align-items: center; gap: 8px; }
+  .status.error { color: #e07a6a; }
+  .spinner { width: 14px; height: 14px; border: 2px solid #444; border-top-color: #6a8aaa; border-radius: 50%; animation: spin 0.9s linear infinite; }
+  .spinner.lg { width: 32px; height: 32px; border-width: 3px; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  /* mention popup */
+  .mention-popup {
+    background: #1e1e1e; border: 1px solid #444; border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+    max-height: 240px; overflow-y: auto;
+    margin-top: 6px;
+  }
+  .mention-popup.hidden { display: none; }
+  .mention-popup .mit {
+    padding: 6px 12px; cursor: pointer; font-size: 13px;
+    display: flex; gap: 8px; align-items: center;
+  }
+  .mention-popup .mit.selected { background: #3a5a8a; color: #fff; }
+  .mention-popup .mit .mtype { font-size: 9px; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; background: #333; }
+  .mention-popup .mit .mtype.video { background: #2a4a6a; color: #aac8e6; }
+  .mention-popup .mit .mtype.audio { background: #6a4a2a; color: #e6c8aa; }
+  .mention-popup .mit .mtype.text  { background: #2a6a2a; color: #c8e6aa; }
+  .mention-popup .mit .mtype.image { background: #5a2a6a; color: #e6aac8; }
+  .mention-popup .empty-msg { padding: 8px 12px; color: #666; font-size: 12px; }
+
+  .settings-row { display: flex; flex-direction: column; gap: 4px; }
+  .settings-row .lbl { font-size: 10px; text-transform: uppercase; color: #888; letter-spacing: 0.5px; }
+  .settings-row .val {
+    background: #1e1e1e; border: 1px solid #383838; border-radius: 4px;
+    padding: 8px 10px; font-size: 13px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto;
+  }
+  .settings-row .val.muted { color: #888; font-style: italic; }
+  .settings-row .chips { display: flex; flex-wrap: wrap; gap: 4px; }
+  .settings-row .chip {
+    font-size: 11px; background: #1e1e1e; border: 1px solid #383838;
+    padding: 3px 8px; border-radius: 11px;
+  }
+
+/* === second style block (originally lines 1221-1231) === */
+  #txLogBody table { width: 100%; border-collapse: collapse; font-size: 12px; }
+  #txLogBody th { text-align: left; padding: 8px 10px; background: #262626;
+                  color: #888; font-weight: 500; border-bottom: 1px solid #333;
+                  position: sticky; top: 0; }
+  #txLogBody td { padding: 7px 10px; border-bottom: 1px solid #2a2a2a; color: #d4d4d4; vertical-align: top; }
+  #txLogBody tr:hover td { background: #232323; }
+  #txLogBody .tx-amount-neg { color: #ef4444; font-family: ui-monospace, monospace; text-align: right; }
+  #txLogBody .tx-amount-pos { color: #16a34a; font-family: ui-monospace, monospace; text-align: right; }
+  #txLogBody .tx-type { color: #888; font-size: 11px; }
+  #txLogBody .tx-model { color: #aaa; font-size: 11px; font-family: ui-monospace, monospace; }
+  #txLogBody .tx-empty { padding: 32px; text-align: center; color: #888; }