/* ============================================================================
 * lyss/ux.css — общая UX-оболочка кастомайзеров LYSS (Chat · Banner · Goal ·
 * Roulette · Overlay · Transition). Подключается ПОСЛЕ родного CSS приложения;
 * работает только когда <body class="ux"> (ставит lyss/ux.js).
 *
 * Принципы: превью — главный холст; слева узкая рейка из 4–7 групп; одна
 * контекстная панель; редкое прячется (Advanced ▸, Test ▾, ⋯).
 * Цвета берутся из переменных приложения (--bg, --bg2, --line, --ink, --acc…),
 * но у всех есть запасное значение — оболочка не зависит от конкретного CSS.
 * ========================================================================== */

body.ux {
  --ux-bg: var(--bg, #0d1024);
  --ux-bg2: var(--bg2, #141833);
  --ux-bg3: var(--bg3, #1b2043);
  --ux-line: var(--line, #262b52);
  --ux-line2: var(--line2, #303663);
  --ux-ink: var(--ink, #e8e9ff);
  --ux-ink2: var(--ink2, #c3c8f0);
  --ux-mute: var(--mute, #8b91c4);
  --ux-acc: var(--acc, #7b86ff);
  --ux-acc2: var(--acc2, #4b58c8);
  --ux-ok: var(--ok, #49c58e);
  --ux-warn: var(--warn, #ffc9a8);
  --ux-err: var(--err, #ff8fa3);
  --ux-rail: 78px;
  --ux-panel: 352px;
  --ux-r: 12px;
}

/* ---------------------------------------------------------------- раскладка */
body.ux .ux-app { display: grid !important; grid-template-columns: var(--ux-rail) var(--ux-panel) minmax(0, 1fr); gap: 0; }
body.ux.ux-nopanel .ux-app { grid-template-columns: var(--ux-rail) 0 minmax(0, 1fr); }
body.ux.ux-nopanel .ux-side { display: none; }
body.ux.ux-focus .ux-app { grid-template-columns: 0 0 minmax(0, 1fr); }
body.ux.ux-focus .ux-rail, body.ux.ux-focus .ux-side { display: none; }
body.ux.ux-focus .ux-chrome-hide { display: none !important; }
body.ux.ux-focus .ux-header-host { display: none !important; }
body.ux.ux-focus .ux-app { height: 100vh !important; }

.ux-hidden { display: none !important; }
.ux-orig-nav { display: none !important; }

/* ---------------------------------------------------------------- шапка */
body.ux .ux-top { gap: 6px; }
.ux-sep { width: 1px; align-self: stretch; margin: 12px 4px; background: var(--ux-line); opacity: .8; }
.ux-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 0; border-radius: 9px; cursor: pointer; font: 700 12.5px/1 inherit;
  background: #232a55; color: var(--ux-ink); white-space: nowrap; transition: background .15s; }
.ux-btn:hover { background: #333c78; }
.ux-btn.is-primary { background: linear-gradient(135deg, #6b7cff, #9b6cff); color: #fff; }
.ux-btn.is-quiet { background: transparent; color: var(--ux-ink2); }
.ux-btn.is-quiet:hover { background: #20275a; }
.ux-btn.is-icon { padding: 7px 9px; }
.ux-btn[aria-pressed="true"], .ux-btn.on { background: #3a46a8; color: #fff; }
.ux-btn kbd { font: 600 10.5px ui-monospace, Consolas, monospace; padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.1); color: var(--ux-mute); }
.ux-split { position: relative; display: inline-flex; }
.ux-split > .ux-btn:first-child { border-radius: 9px 0 0 9px; }
.ux-split > .ux-btn + .ux-btn { border-radius: 0 9px 9px 0; margin-left: 1px; padding: 7px 8px; }

.ux-save { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font-size: 11.5px; color: var(--ux-mute); white-space: nowrap; }
.ux-save i { width: 8px; height: 8px; border-radius: 50%; background: var(--ux-ok); flex: none; }
.ux-save[data-state="saving"] i { background: #ffd166; animation: ux-pulse 1s ease-in-out infinite; }
.ux-save[data-state="error"] { color: var(--ux-err); }
.ux-save[data-state="error"] i { background: var(--ux-err); }
@keyframes ux-pulse { 50% { opacity: .35; } }

/* меню / поповеры */
.ux-pop { position: fixed; z-index: 400; min-width: 220px; max-width: min(92vw, 420px); padding: 8px; background: #1a1f45; color: var(--ux-ink);
  border: 1px solid var(--ux-line2); border-radius: var(--ux-r); box-shadow: 0 18px 44px rgba(0,0,0,.55); max-height: min(78vh, 640px); overflow: auto; }
.ux-pop[hidden] { display: none; }
.ux-menu-i { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ux-ink); cursor: pointer; font: 700 12.5px/1.2 inherit; }
.ux-menu-i:hover, .ux-menu-i:focus-visible { background: #262d63; outline: 0; }
.ux-menu-i small { font-weight: 400; color: var(--ux-mute); font-size: 11.5px; }
.ux-menu-i.is-on::after { content: "✓"; position: absolute; right: 14px; }
.ux-menu-sep { height: 1px; margin: 6px 4px; background: var(--ux-line); }
.ux-menu-h { padding: 6px 10px 3px; font: 700 10.5px/1 inherit; letter-spacing: .1em; text-transform: uppercase; color: var(--ux-mute); }

/* ---------------------------------------------------------------- рейка */
.ux-rail { display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; background: var(--ux-bg2); border-right: 1px solid var(--ux-line); overflow-y: auto; min-height: 0; }
.ux-rail-b { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 10px 4px 8px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ux-ink2); cursor: pointer; font: 700 10.5px/1.15 inherit; letter-spacing: .04em; text-align: center; position: relative; }
.ux-rail-b .ux-ico { font-size: 20px; line-height: 1; }
.ux-rail-b:hover { background: #1c2250; color: #fff; }
.ux-rail-b[aria-current="true"] { background: #2b3370; color: #fff; box-shadow: inset 3px 0 0 var(--ux-acc); }
.ux-rail-b:focus-visible, .ux-btn:focus-visible, .ux-tab:focus-visible, .ux-chip:focus-visible, .ux-card:focus-visible, .ux-q:focus-visible {
  outline: 2px solid #a3abff; outline-offset: 2px; }
.ux-rail-sp { flex: 1; }
.ux-rail-b.is-util { opacity: .8; font-weight: 600; }

/* ---------------------------------------------------------------- боковая панель */
.ux-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #10132b; border-right: 1px solid var(--ux-line); }
.ux-side > .panel, .ux-side > main, .ux-side > .lcb-panel { flex: 1; min-height: 0; overflow-y: auto; border: 0 !important; height: auto !important; }
.ux-side-h { padding: 12px 14px 0; }
.ux-group-t { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ux-group-t b { font: 700 15px/1.2 'Comfortaa', 'Nunito', system-ui, sans-serif; }
.ux-group-t small { color: var(--ux-mute); font-size: 11.5px; }
.ux-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; border-bottom: 1px solid var(--ux-line); }
.ux-tabs::-webkit-scrollbar { display: none; }
.ux-tab { flex: none; padding: 6px 11px; border: 0; border-radius: 99px; cursor: pointer; font: 700 12px/1 inherit; background: transparent; color: var(--ux-ink2); }
.ux-tab:hover { background: #20275a; }
.ux-tab[aria-selected="true"] { background: #3a46a8; color: #fff; }
.ux-tab.is-more { color: var(--ux-mute); font-weight: 600; border: 1px dashed var(--ux-line2); }
.ux-crumb { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ux-line); background: #131838; }
.ux-crumb[hidden] { display: none; }
.ux-crumb b { flex: 1; font: 700 14px/1.2 'Comfortaa', 'Nunito', system-ui, sans-serif; }
.ux-crumb small { display: block; font: 400 11px/1.2 inherit; color: var(--ux-mute); }
.ux-foot { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--ux-line); background: #0f1229; }
.ux-foot .ux-btn { font-size: 12px; }

/* упрощённая панель: меньше рамок и шума */
body.ux .panel__h, body.ux .ux-hide-title { display: none; }
body.ux .ux-side .f-note { background: transparent; border: 0; padding: 2px 0; color: var(--ux-mute); }
body.ux .ux-side .f-note.warn { background: #241a1e; border: 1px solid #5a3d32; padding: 9px 11px; }
body.ux .ux-side .box { background: transparent; border: 0; padding: 0; margin: 12px 0; }
body.ux .ux-side .f-group { background: transparent; border-color: var(--ux-line); }
body.ux .ux-side .f-head { border-top: 0; margin-top: 20px; padding-top: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ux-mute); }
body.ux .ux-side .f-head small { text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------- превью — главный холст */
body.ux .preview { min-width: 0; background: radial-gradient(1200px 700px at 50% 30%, #0b0e22, #070916); }
.ux-pv-tools { display: flex; align-items: center; gap: 6px; padding: 6px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--ux-line); background: rgba(15, 18, 41, .72); }
.ux-pv-tools .ux-sp { flex: 1; }
.ux-quick { display: flex; align-items: center; gap: 4px; padding: 6px 10px; overflow-x: auto; border-bottom: 1px solid var(--ux-line); scrollbar-width: thin; }
.ux-quick-l { font: 700 10px/1 inherit; letter-spacing: .12em; color: var(--ux-mute); margin-right: 4px; flex: none; }
.ux-q { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--ux-line2); border-radius: 99px; background: #151a3c;
  color: var(--ux-ink); cursor: pointer; font: 700 12px/1 inherit; }
.ux-q:hover { background: #222a5f; }
.ux-q[aria-expanded="true"] { background: #3a46a8; border-color: #6572e8; }
.ux-q .ux-ico { font-size: 14px; }
.ux-state { display: inline-flex; align-items: center; gap: 4px; }
.ux-state select { padding: 5px 8px; border-radius: 8px; background: #0f1330; border: 1px solid var(--ux-line2); color: var(--ux-ink); font: 600 12px inherit; }

/* Test-drawer */
.ux-drawer { position: absolute; right: 12px; bottom: 12px; z-index: 60; width: min(420px, calc(100% - 24px)); max-height: 70%; overflow: auto;
  background: #181d44; border: 1px solid var(--ux-line2); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.ux-drawer[hidden] { display: none; }
.ux-drawer-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ux-line); font: 700 13px/1 inherit; position: sticky; top: 0; background: #181d44; }
.ux-drawer-h span { flex: 1; }
.ux-drawer-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.ux-drawer-b > * { max-width: 100%; }
.ux-drawer-b .pv-demo, .ux-drawer-b .pv-show, .ux-drawer-b .pv-ctl, .ux-drawer-b .pv-test { display: flex !important; flex-wrap: wrap; gap: 6px; position: static !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.ux-drawer-sec { font: 700 10.5px/1 inherit; letter-spacing: .1em; text-transform: uppercase; color: var(--ux-mute); margin-bottom: -4px; }
body.ux.ux-preview-is-host .ux-drawer { position: fixed; }

/* Random strip: Use / Generate Another / Undo */
.ux-strip { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  background: #1d2350; border: 1px solid #5560cc; border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.55); max-width: calc(100% - 24px); flex-wrap: wrap; }
.ux-strip[hidden] { display: none; }
.ux-strip b { font-size: 12.5px; margin-right: 4px; }
.ux-locks { display: flex; gap: 4px; flex-wrap: wrap; width: 100%; padding-top: 6px; border-top: 1px solid var(--ux-line); }
.ux-lock { padding: 3px 8px; border-radius: 99px; border: 1px solid var(--ux-line2); background: transparent; color: var(--ux-ink2); font: 600 11px/1.2 inherit; cursor: pointer; }
.ux-lock[aria-pressed="true"] { background: #5a3d6b; border-color: #a77cc9; color: #fff; }

/* ---------------------------------------------------------------- Preset gallery (общий) */
.ux-gal { display: flex; flex-direction: column; gap: 10px; }
.ux-gal-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ux-gal-bar input[type="search"] { flex: 1; min-width: 120px; padding: 7px 10px; border-radius: 9px; background: #0f1330; border: 1px solid var(--ux-line2); color: var(--ux-ink); font: 12.5px inherit; }
.ux-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ux-chip { padding: 5px 10px; border-radius: 99px; border: 1px solid var(--ux-line2); background: #151a3c; color: var(--ux-ink2); cursor: pointer; font: 700 11.5px/1 inherit; }
.ux-chip:hover { background: #20275a; }
.ux-chip[aria-pressed="true"], .ux-chip.on { background: #3a46a8; border-color: #6572e8; color: #fff; }
.ux-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ux-grid.is-large { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ux-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; text-align: left; border: 1px solid var(--ux-line); border-radius: 12px;
  background: #121637; color: var(--ux-ink); cursor: pointer; }
.ux-card:hover { border-color: #5560cc; background: #171c45; }
.ux-card[aria-checked="true"], .ux-card.on { border-color: #8f9bff; box-shadow: 0 0 0 1px #8f9bff inset; }
.ux-card-pv { min-height: 50px; border-radius: 8px; overflow: hidden; background: #0b0e22; display: grid; place-items: center; }
.ux-card b { font: 700 12.5px/1.2 inherit; padding: 0 4px; }
.ux-card small { padding: 0 4px; font-size: 11px; line-height: 1.3; color: var(--ux-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ux-star { position: absolute; right: 10px; top: 10px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 0; background: rgba(10, 12, 30, .6); color: #8b91c4; cursor: pointer; font-size: 13px; line-height: 24px; }
.ux-star[aria-pressed="true"] { color: #ffd166; }
.ux-sub { font: 700 11px/1 inherit; letter-spacing: .1em; text-transform: uppercase; color: var(--ux-mute); margin: 6px 0 -2px; }
.ux-empty { padding: 22px 10px; text-align: center; color: var(--ux-mute); font-size: 12.5px; }
.ux-steps { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--ux-mute); }
.ux-steps b { color: var(--ux-ink); }

/* Thumb picker */
.ux-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.ux-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 1px solid var(--ux-line); border-radius: 10px; background: #121637;
  color: var(--ux-ink2); cursor: pointer; font: 600 11px/1.2 inherit; text-align: center; }
.ux-thumb:hover { background: #1b2150; }
.ux-thumb[aria-checked="true"] { border-color: #8f9bff; background: #232a66; color: #fff; }
.ux-thumb-pv { width: 100%; min-height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; }

/* Inspector */
.ux-insp { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 80px; }
.ux-insp-sec { display: flex; flex-direction: column; gap: 8px; }
.ux-adv { border: 1px dashed var(--ux-line2); border-radius: 12px; }
.ux-adv > summary { list-style: none; cursor: pointer; padding: 9px 12px; font: 700 12px/1 inherit; color: var(--ux-ink2); display: flex; align-items: center; gap: 8px; }
.ux-adv > summary::-webkit-details-marker { display: none; }
.ux-adv > summary::before { content: "▸"; color: var(--ux-mute); transition: transform .15s; }
.ux-adv[open] > summary::before { transform: rotate(90deg); }
.ux-adv-b { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------- Command palette / search */
.ux-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: start center; padding-top: 12vh; background: rgba(5, 6, 18, .62); }
.ux-modal[hidden] { display: none; }
.ux-palette { width: min(640px, 92vw); max-height: 70vh; display: flex; flex-direction: column; background: #181d44; border: 1px solid var(--ux-line2);
  border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.65); overflow: hidden; }
.ux-palette input { width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--ux-line); background: transparent; color: var(--ux-ink); font: 600 15px inherit; outline: 0; }
.ux-pal-list { overflow: auto; padding: 6px; }
.ux-pal-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ux-ink); cursor: pointer; text-align: left; font: 600 13px/1.2 inherit; }
.ux-pal-i[aria-selected="true"] { background: #2b3370; }
.ux-pal-i .ux-ico { width: 22px; text-align: center; flex: none; }
.ux-pal-i small { margin-left: auto; color: var(--ux-mute); font-weight: 500; font-size: 11px; white-space: nowrap; }
.ux-pal-i em { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 6px; background: #3a2f5a; color: #d9c8ff; margin-left: 6px; }
.ux-pal-foot { padding: 6px 12px; border-top: 1px solid var(--ux-line); color: var(--ux-mute); font-size: 11px; display: flex; gap: 12px; }
.ux-flash { animation: ux-flash 1.6s ease-out 1; border-radius: 10px; }
@keyframes ux-flash { 0% { box-shadow: 0 0 0 3px #ffd166, 0 0 0 9px rgba(255, 209, 102, .25); } 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); } }

/* ---------------------------------------------------------------- First run */
.ux-first { margin: 12px 14px 0; padding: 12px 12px 10px; border-radius: 14px; background: linear-gradient(135deg, #1f2663, #2a2260); border: 1px solid #4f59c8; }
.ux-first[hidden] { display: none; }
.ux-first h4 { font: 700 13.5px/1.2 'Comfortaa', 'Nunito', system-ui, sans-serif; margin-bottom: 8px; }
.ux-first ol { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--ux-ink2); }
.ux-first ol li b { color: #fff; }
.ux-first-b { display: flex; gap: 6px; flex-wrap: wrap; }

/* Floating */
.ux-float { position: absolute; z-index: 65; }
.ux-show-settings { position: absolute; left: 10px; top: 10px; z-index: 70; }
.ux-focus-hint { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 480; padding: 6px 12px; border-radius: 99px;
  background: rgba(20, 24, 56, .85); color: var(--ux-ink2); font: 600 12px inherit; opacity: 0; pointer-events: none; transition: opacity .25s; }
body.ux.ux-focus .ux-focus-hint { opacity: .95; animation: ux-hint 3.2s ease forwards; }
@keyframes ux-hint { 0%, 70% { opacity: .95; } 100% { opacity: 0; } }

/* Тосты: компактные, без простыни */
body.ux .toasts, body.ux #toasts { left: 50%; right: auto; transform: translateX(-50%); bottom: 18px; align-items: center; }
body.ux .toast:not(.err) { padding: 6px 12px; font-size: 12px; opacity: .92; }

/* ---------------------------------------------------------------- Режим «планшет / телефон» */
.ux-view-switch { display: none; }
@media (max-width: 1180px) {
  body.ux { --ux-panel: 320px; --ux-rail: 64px; }
  .ux-rail-b { font-size: 0; padding: 12px 4px; }
  .ux-rail-b .ux-ico { font-size: 20px; }
}
@media (max-width: 860px) {
  body.ux { --ux-panel: 1fr; }
  body.ux .ux-app { grid-template-columns: var(--ux-rail) minmax(0, 1fr) !important; }
  body.ux .ux-side { grid-column: 2; }
  body.ux .preview { grid-column: 2; grid-row: 1; }
  body.ux.ux-view-preview .ux-side { display: none; }
  body.ux:not(.ux-view-preview) .preview { display: none; }
  .ux-view-switch { display: inline-flex; position: fixed; right: 12px; bottom: 12px; z-index: 450; background: #2b3370; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
  .ux-quick { padding: 6px; }
}
@media (max-width: 560px) {
  body.ux .ux-app { grid-template-columns: minmax(0, 1fr) !important; }
  .ux-rail { flex-direction: row; position: fixed; bottom: 0; left: 0; right: 0; z-index: 440; border-right: 0; border-top: 1px solid var(--ux-line); padding: 4px; overflow-x: auto; }
  .ux-rail-b { flex: 1 0 64px; padding: 6px 2px; }
  body.ux .ux-side, body.ux .preview { grid-column: 1; padding-bottom: 64px; }
  .ux-save .ux-save-t { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ux-flash, .ux-save i, body.ux.ux-focus .ux-focus-hint { animation: none !important; } }

/* галерея в узкой панели — две колонки */
.ux-side .ux-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ux-side .ux-grid.is-large { grid-template-columns: 1fr; }

/* подсказка по клавишам */
.ux-hotkeys { display: flex; flex-direction: column; gap: 6px; }
.ux-hk { display: grid; grid-template-columns: 190px 1fr; gap: 10px; align-items: center; font-size: 13px; }
.ux-hk kbd { font: 700 11.5px ui-monospace, Consolas, monospace; padding: 3px 8px; border-radius: 7px; background: #0f1330; border: 1px solid var(--ux-line2); color: var(--ux-ink); }