/* Темизация: data-theme="light" на html переопределяет переменные. По умолчанию — dark. */

:root {
  --bg: #0e0e0e;
  --bg-press: #18181c;
  --bg-elev: #1a1a1a;
  --surface: #1f1f24;
  --surface-2: #2a2a30;
  --surface-3: #2e2e34;
  --surface-4: #2e2e36;
  --hover: #404048;

  --text: #e0e0e0;
  --text-soft: #ddd;
  --text-2: #cfd5e1;
  --text-muted: #888;
  --text-muted-2: #777;
  --text-muted-3: #666;
  --text-muted-4: #555;
  --text-faint: #444;
  --text-strong: #fff;

  --border: #333;
  --border-2: #222;
  --border-3: #141414;
  --border-4: #1a1a1a;
  --border-strong: #38383e;

  --accent: #d97757;
  --accent-fg: #fff;
  --accent-soft: rgba(217,119,87,.15);

  --error: #ef4444;
  --error-bg: #3a1a1a;
  --online: #4ecca3;
  --think: #d97757;
  --channel-direct: #22c55e;
  --channel-proxy: #f97316;

  --bubble-mine: #3a2620;
  --bubble-mine-fg: #fff;
  --bubble-mine-name: #f4b495;
  --bubble-mine-link: #f4b495;
  --bubble-bot: #6d3524;
  --bubble-bot-fg: #ddd;
  --bubble-bot-name: #e8a68c;
  --bubble-bot-link: #f4b495;
  --bubble-bot-strong: #fff;
  --bubble-bot-code-bg: #111;
  --bubble-bot-th-bg: #2a1f1a;
  --bubble-bot-th-fg: #fff;
  --bubble-bot-tr-even: #1f1815;
  --bubble-bot-quote-fg: #aaa;

  --proc-bg: #4a2218;
  --proc-fg: #c0907e;
  --chip-icon: #cc8a5e;

  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f5f3ee;
  --bg-press: #e9e5db;
  --bg-elev: #ebe7df;
  --surface: #ffffff;
  --surface-2: #ebe5d6;
  --surface-3: #d8d2c0;
  --surface-4: #d0c9b5;
  --hover: #ddd6c2;

  --text: #15140f;
  --text-soft: #2a261a;
  --text-2: #2a261a;
  --text-muted: #6b6358;
  --text-muted-2: #807868;
  --text-muted-3: #948a78;
  --text-muted-4: #a39884;
  --text-faint: #b3a896;
  --text-strong: #000;

  --border: #cfc5b0;
  --border-2: #ddd2bc;
  --border-3: #e6dcc6;
  --border-4: #ddd2bc;
  --border-strong: #b8ae98;

  --accent: #c46638;
  --accent-fg: #fff;
  --accent-soft: rgba(196,102,56,.10);

  --error: #c0392b;
  --error-bg: #fadcd9;
  --online: #2e7d32;
  --think: #c46638;
  --channel-direct: #15803d;
  --channel-proxy: #c2410c;

  --bubble-mine: #d8c5b3;
  --bubble-mine-fg: #15140f;
  --bubble-mine-name: #8a3e1a;
  --bubble-mine-link: #8a3e1a;
  --bubble-bot: #f3d4c2;
  --bubble-bot-fg: #15140f;
  --bubble-bot-name: #8a3e1a;
  --bubble-bot-link: #8a3e1a;
  --bubble-bot-strong: #000;
  --bubble-bot-code-bg: #f0ead8;
  --bubble-bot-th-bg: #e8dcc8;
  --bubble-bot-th-fg: #15140f;
  --bubble-bot-tr-even: #f0e8d8;
  --bubble-bot-quote-fg: #5a4e3a;

  --proc-bg: #f0e0d0;
  --proc-fg: #8a5e3a;
  --chip-icon: #c46638;

  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent }
::-webkit-scrollbar { width: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: var(--hover) }
@supports (scrollbar-width: thin) { * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent } }
html, body { height: 100dvh }
body { font-family: -apple-system, system-ui, sans-serif; background: var(--bg); color: var(--text); overflow: hidden }

/* === Auth === */
#auth { height: 100%; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px }
#auth h1 { font-size: 16px; color: var(--text-muted); font-weight: 500 }
#auth form { display: flex; flex-direction: column; gap: 10px; width: 280px }
#auth input { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 12px 14px; border-radius: 8px; font-size: 15px; outline: none }
#auth input:focus { border-color: var(--accent) }
#auth input:-webkit-autofill, #auth input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px var(--surface) inset; -webkit-text-fill-color: var(--text) }
#auth button { background: var(--accent); color: var(--accent-fg); border: none; padding: 12px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer }
#auth .err { color: var(--error); font-size: 13px; text-align: center; min-height: 18px }

/* === App layout === */
#app { height: 100%; display: flex; width: 200%; transition: transform .25s ease }
#app.chat { transform: translateX(-50%) }
.view { width: 50%; display: flex; flex-direction: column; position: relative; overflow: hidden }
.view#vc { isolation: isolate }
.view#vc::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: currentColor; -webkit-mask: var(--chat-pattern) repeat 50% 0 / 300px; mask: var(--chat-pattern) repeat 50% 0 / 300px; opacity: .07; z-index: -1 }
.top-row { padding: 5px 12px; border-bottom: 1px solid var(--border-3); flex-shrink: 0; min-height: 38px; display: flex; align-items: center; box-sizing: border-box }
.top-row > * { width: 100% }
.top-row input { background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: 14px; padding: 0 12px; font-size: 13px; outline: none; box-sizing: border-box; height: 28px }
.top-row input:focus { border-color: var(--accent) }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; height: 28px; align-items: center }
.tabs::-webkit-scrollbar { display: none }
.tab { background: none; border: 1px solid var(--border-2); color: var(--text-muted); padding: 0 12px; border-radius: 14px; font-size: 13px; cursor: pointer; white-space: nowrap; font-family: inherit; height: 26px; display: inline-flex; align-items: center; flex-shrink: 0 }
.tab:hover { color: var(--text) }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent) }

.modal-body select, .modal-body input[type="text"] { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color .15s }
.modal-body input[type="text"]:focus, .modal-body select:focus { border-color: var(--accent) }
.modal-body select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path fill='%23888' d='M3.2 5.7L8 10.5l4.8-4.8.7.7L8 12 2.5 6.4z'/></svg>"); background-repeat: no-repeat; background-position: right 10px center }
.modal-body label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em }

@media (min-width: 768px) {
  #app { width: 100%; transition: none }
  #app.chat { transform: none }
  .view#vl { width: 320px; flex-shrink: 0; border-right: 1px solid var(--border-4) }
  .view#vc { flex: 1; width: auto }
  .ch .bb { display: none }
  #app:not(.chat) .view#vc > * { display: none }
  #app:not(.chat) .view#vc::before { content: 'Выберите чат или начните новый'; flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 14px }
  .item { padding: 10px 12px; gap: 10px }
  .item .ava { width: 40px; height: 40px }
}

/* === Sessions list === */
.hdr { padding: 6px 16px; border-bottom: 1px solid var(--border-4); display: flex; justify-content: space-between; align-items: center; min-height: 50px }
.hdr-left { display: flex; align-items: center; gap: 10px }
.hdr h1 { font-size: 20px; font-weight: 600 }
.btn-add { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; width: 26px; height: 26px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: color .15s, border-color .15s }
.btn-add i { display: flex; align-items: center; justify-content: center; line-height: 1 }
.btn-add .bi::before { vertical-align: 0; line-height: 1 }
.btn-add:hover { color: var(--text); border-color: var(--text-muted) }

.items { flex: 1; overflow-y: auto; scrollbar-gutter: stable }
.item { padding: 10px 14px; border-bottom: 1px solid var(--border-3); display: flex; gap: 12px; align-items: center; cursor: pointer; position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none }
.item:active { background: var(--bg-press) }
.item.active { background: var(--surface) }
.item.pinned { border-left: 2px solid var(--accent) }
.ava { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--surface-3) }
.ib { flex: 1; min-width: 0; overflow: hidden }
.it { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.in { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 }
.iw-wrap { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0 }
.iw { font-size: 11px; color: var(--text-muted-4); white-space: nowrap }
.ic-pin-st { color: var(--accent); font-size: 11px }
.ic-lock { color: var(--text-muted); font-size: 13px }

.actions { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .15s; background: linear-gradient(90deg, transparent, var(--bg) 30%); padding: 6px 6px 6px 30px; border-radius: 8px }
.item.active .actions { background: linear-gradient(90deg, transparent, var(--surface) 30%) }
.item:hover .actions { opacity: 1; pointer-events: auto }
.act-btn { background: var(--surface); border: 1px solid var(--surface-4); border-radius: 50%; width: 30px; height: 30px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 0; font-size: 14px }
.act-btn:hover { color: var(--text-soft); border-color: var(--border-strong) }
.act-btn.del:hover { color: var(--error); border-color: var(--error) }
.act-btn.pin:hover { color: var(--accent); border-color: var(--accent) }
.item.pinned .act-btn.pin { color: var(--accent) }
@media (hover: none) { .actions { display: none } }

.item-menu { position: fixed; background: var(--surface); border: 1px solid var(--surface-4); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 10000; box-shadow: 0 8px 24px rgba(0,0,0,.5); min-width: 170px }
.item-menu button { background: none; border: none; color: var(--text-2); text-align: left; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 10px }
.item-menu button:hover { background: var(--surface-2) }
.item-menu button.dlg { color: var(--error) }
.item-menu button.dlg:hover { background: var(--error-bg) }
.ip { font-size: 13px; color: var(--text-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px }
.no { text-align: center; color: var(--text-faint); margin-top: 80px; font-size: 14px }

/* === Chat header === */
.ch { padding: 6px 8px; border-bottom: 1px solid var(--border-4); display: flex; align-items: center; gap: 8px; min-height: 50px; position: absolute; top: 0; left: 0; right: 0; background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); z-index: 3 }
.bb { background: none; border: none; color: var(--text); font-size: 28px; cursor: pointer; padding: 0 6px; line-height: 1 }
.ava-sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface-3) }
.cn { font-size: 14px; font-weight: 500; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 0.95; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere }
.cs { font-size: 11px; color: var(--text-muted-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cs.on { color: var(--online) }
.cs.think { color: var(--think) }
.cs.off { color: var(--error) }
.menu-btn { background: none; border: none; color: var(--text); font-size: 20px; cursor: pointer; padding: 4px 8px }
.menu-toggle { display: none }
.menu { display: none; position: absolute; top: 50px; right: 8px; background: color-mix(in srgb, var(--surface) 93%, transparent); backdrop-filter: blur(20px); border-radius: 8px; padding: 10px 14px; z-index: 4; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.5) }
.menu-toggle:checked ~ .menu { display: block }
.menu-toggle:checked ~ .menu-overlay { display: block }
.menu-overlay { display: none; position: fixed; inset: 0; z-index: 3 }
.menu label { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 6px 0; font-size: 14px; color: var(--text) }
.menu-sep { border-top: 1px solid var(--border); margin: 8px 0 }
.menu-item { background: none; border: none; color: var(--text); text-align: left; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; width: calc(100% + 16px); font-family: inherit }
.menu-item:hover { background: var(--surface-2) }
.menu-item i { font-size: 16px; width: 18px; text-align: center }
.menu input[type=checkbox] { appearance: none; width: 32px; height: 18px; background: var(--border); border-radius: 9px; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; margin-left: 12px }
.menu input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--text-muted); border-radius: 50%; transition: transform .2s, background .2s }
.menu input[type=checkbox]:checked { background: var(--accent) }
.menu input[type=checkbox]:checked::after { transform: translateX(14px); background: var(--accent-fg) }

/* === Messages === */
.msgs { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 70px 12px 8px; display: flex; flex-direction: column-reverse; gap: 4px; -webkit-overflow-scrolling: touch; position: relative }
.load-more { height: 1px }
.spin { animation: spin 1s linear 3 }
.m { padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-wrap: break-word }
.u-wrap { margin-left: auto; max-width: 82% }
.m.u { background: var(--bubble-mine); color: var(--bubble-mine-fg); border-bottom-right-radius: 0; white-space: pre-wrap; position: relative }
.u-wrap .m.u::after { content: ''; position: absolute; bottom: 0; right: -7px; width: 8px; height: 12px; background: var(--bubble-mine); clip-path: path('M0 0 Q0 12 8 12 L0 12 Z') }
.u-time { font-size: 10px; color: var(--bubble-mine-fg); white-space: nowrap }
.u-name { font-size: 13px; font-weight: 600; white-space: nowrap }
.ch-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 6px; vertical-align: middle }
.ch-direct { background: var(--channel-direct) }
.ch-proxy { background: var(--channel-proxy) }
.ch-pending { background: var(--text-muted-4) }
.m.u .u-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; gap: 12px }
.m.u .u-name { color: var(--bubble-mine-name) }
.m.u a { color: var(--bubble-mine-link); text-decoration: underline; word-break: break-all }
.o-wrap { margin-right: auto; max-width: 82% }
.o-wrap .m.u { border-bottom-right-radius: 16px; border-bottom-left-radius: 0 }
.o-wrap .m.u::after { content: ''; position: absolute; bottom: 0; left: -7px; width: 8px; height: 12px; background: inherit; clip-path: path('M8 0 Q8 12 0 12 L8 12 Z') }

.bot-row { margin-right: auto; max-width: 88%; display: flex; align-items: flex-end; gap: 6px }
.m.b { background: var(--bubble-bot); color: var(--bubble-bot-fg); border-bottom-left-radius: 0; position: relative; overflow-wrap: anywhere }
.m.b::after { content: ''; position: absolute; bottom: 0; left: -7px; width: 8px; height: 12px; background: var(--bubble-bot); clip-path: path('M8 0 Q8 12 0 12 L8 12 Z') }
.m.b p { margin: 4px 0 }
.m.b ul, .m.b ol { margin: 4px 0 4px 16px }
.m.b strong { color: var(--bubble-bot-strong) }
.m.b code { background: var(--bubble-bot-code-bg); padding: 1px 4px; border-radius: 3px; font-size: 12px; word-break: break-all }
.m.b pre { background: var(--bubble-bot-code-bg); padding: 8px; border-radius: 6px; overflow-x: auto; margin: 4px 0; white-space: pre-wrap; word-break: break-all }
.m.b pre code { background: none; padding: 0 }
.m.b a { color: var(--bubble-bot-link) }
.m.b table { border-collapse: collapse; margin: 6px 0; font-size: 13px; width: 100%; overflow-x: auto; display: block }
.m.b th, .m.b td { border: 1px solid var(--border); padding: 6px 10px; text-align: left }
.m.b th { background: var(--bubble-bot-th-bg); color: var(--bubble-bot-th-fg); font-weight: 600 }
.m.b tr:nth-child(even) { background: var(--bubble-bot-tr-even) }
.m.b blockquote { border-left: 3px solid var(--accent); margin: 2px 0; padding: 2px 10px; color: var(--bubble-bot-quote-fg) }
.m.b .u-head { display: flex; align-items: center; margin-bottom: 2px; gap: 4px }
.m.b .u-name { color: var(--bubble-bot-name) }
.m.b .u-time { margin-left: auto; color: var(--bubble-bot-fg) }
.m.b hr { border: none; border-top: 1px solid var(--border); margin: 8px 0 }
.m.b img { max-width: min(100%, 400px); max-height: 350px; object-fit: contain; border-radius: 8px; margin: 4px 0 }

.proc-toggle { color: var(--proc-fg); cursor: pointer; display: flex; align-items: center; gap: 3px; font-size: 11px; flex-shrink: 0 }
.diff-plus { color: var(--online) }
.diff-minus { color: var(--error) }
.proc-toggle i { font-size: 12px }
.proc-log { background: var(--proc-bg); border-radius: 6px; padding: 6px 8px; font-family: monospace; font-size: 10px; color: var(--proc-fg); max-height: 150px; overflow-y: auto; margin-bottom: 4px; display: none; scrollbar-width: thin; scrollbar-color: var(--proc-fg) transparent }
.proc-log.open { display: block }
.proc-log::-webkit-scrollbar { width: 6px }
.proc-log::-webkit-scrollbar-thumb { background: var(--proc-fg); border-radius: 3px }
.proc-log .p-line { padding: 1px 0; white-space: pre-wrap; word-break: break-all }

.play { background: var(--surface); border: none; color: var(--text-soft); width: 28px; height: 28px; border-radius: 50%; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .3; pointer-events: none; transition: opacity .3s }
.play.ready { opacity: 1; pointer-events: auto }

/* === Input bar === */
.bar { flex-shrink: 0; padding: 8px 10px; background: var(--bg); border-top: 1px solid var(--border-4); position: relative }
.bar textarea { width: 100%; background: var(--surface); color: var(--text); border: none; border-radius: 20px; padding: 8px 48px 8px 38px; font-size: 16px; outline: none; resize: none; field-sizing: content; max-height: 100px; line-height: 1.4; scrollbar-width: none }
.bar textarea::-webkit-scrollbar { display: none }
.bar .s { position: absolute; right: 14px; bottom: 16px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 50%; width: 32px; height: 32px; min-width: 30px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center }
.bar .s i { transform: translateX(-2px) rotate(45deg) }
.bar .att { position: absolute; left: 14px; bottom: 14px; background: none; color: var(--text-muted); border: none; width: 32px; height: 32px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 }
.bar .att:hover { color: var(--text-soft) }
.bar .att:disabled { opacity: .4; cursor: wait }
.bar .att.busy i { animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

.atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 6px }
.atts:empty { display: none }
.atts .chip { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--surface-4); border-radius: 14px; padding: 4px 6px 4px 10px; font-size: 12px; color: var(--text-2); max-width: 220px }
.atts .chip i.fi { color: var(--chip-icon); font-size: 14px; flex-shrink: 0 }
.atts .chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.atts .chip .rm { background: none; border: none; color: var(--text-muted-3); cursor: pointer; font-size: 14px; padding: 0 4px; display: flex; align-items: center }
.atts .chip .rm:hover { color: var(--error) }

#app.dragging::after { content: 'Отпусти — загружу'; position: fixed; inset: 0; background: var(--accent-soft); border: 3px dashed var(--accent); border-radius: 8px; color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; pointer-events: none; z-index: 9999 }

/* === Modal === */
.modal { margin: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 0; box-shadow: 0 16px 48px rgba(0,0,0,.5) }
.modal-sm { width: min(90vw, 320px) }
.modal-md { width: min(90vw, 480px) }
.modal-lg { width: min(90vw, 640px) }
.modal-xl { width: min(90vw, 800px) }
@media (max-width: 600px) { .modal-sm, .modal-md, .modal-lg, .modal-xl { width: calc(100vw - 24px) } }
.modal::backdrop { background: transparent }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); gap: 12px }
.modal-head h3 { font-size: 16px; font-weight: 600; margin: 0 }
.modal-x { background: none; border: none; color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center }
.modal-x:hover { color: var(--text) }
.modal-body { padding: 16px; max-height: 70vh; overflow-y: auto }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border) }
.modal-btn { background: var(--surface-2); border: none; color: var(--text); padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit }
.modal-btn:hover { background: var(--surface-3) }
.modal-btn.primary { background: var(--accent); color: var(--accent-fg) }
.modal-btn.primary:hover { filter: brightness(1.08) }
.modal-btn.danger { background: var(--error); color: #fff }

.bg-pick { display: flex; flex-wrap: wrap; gap: 6px; max-width: min(70vw, 420px) }
.bg-num { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); width: 36px; height: 36px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; padding: 0; display: flex; align-items: center; justify-content: center }
.bg-num:hover { border-color: var(--text-muted) }
.bg-num.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent) }

.debug-out { font-family: monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; max-height: 60vh; overflow-y: auto; margin: 0 }

/* Плашка видео в ленте */
.vthumb { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; font-size: 14px }
.vthumb i { font-size: 18px; color: var(--accent) }
.vthumb:hover { border-color: var(--accent) }

/* Видео-плеер внизу, видимость классом .show. Доступ к списку видео — через меню чата */
#floatv { position: fixed; z-index: 9999; display: none; left: 12px; right: 12px; top: 72px; max-width: 420px; margin: 0 auto; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.5) }
#floatv.show { display: block }
#floatv video { width: 100%; display: block }
.fv-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: flex-end; gap: 6px; padding: 8px; background: linear-gradient(rgba(0,0,0,.5), transparent); transition: opacity .4s }
#floatv.idle .fv-bar { opacity: 0 }
.fv-bar button { width: 32px; height: 32px; border: none; border-radius: 6px; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 }
.st-pick { width: 100%; font: inherit; color: inherit; cursor: pointer }

/* Хранилище (файловый менеджер) */
.storage .st-empty { color: var(--text-muted); text-align: center; padding: 20px }
.st-head { margin-bottom: 12px }
.st-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden }
.st-fill { height: 100%; background: var(--accent); transition: width .3s }
.st-fill.over { background: #d9534f }
.st-total { margin-top: 6px; font-size: 13px; color: var(--text-muted) }
.st-list { display: flex; flex-direction: column; gap: 6px }
.st-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2) }
.st-info { flex: 1; min-width: 0 }
.st-name { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.st-meta { font-size: 12px; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.st-btn { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 15px }
.st-btn:hover { border-color: var(--text-muted) }
.st-del:hover { border-color: #d9534f; color: #d9534f }
.st-del.armed { background: #d9534f; color: #fff; border-color: #d9534f }
.st-folder { cursor: pointer }
.st-folder:hover { border-color: var(--text-muted) }
.st-ic { color: var(--text-muted); flex-shrink: 0 }
.st-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--accent); cursor: pointer; font-size: 14px }