/* 💻 приложение для Windows (desktop.js): окно выбора «Что показываем», горячие клавиши, плашка обновления;
   в браузере — кнопка «Приложение для Windows» в шапке. Окно выбора — только ПК (приложение на телефоне не бывает). */

/* --- окно выбора источника --- */
.tk-dlg.dk-pick { width:min(860px, calc(100vw - 32px)); display:flex; flex-direction:column; gap:0; padding-bottom:16px; }
.tk-dlg.dk-pick:not([open]) { display:none; }
.dk-sub { margin:0 0 12px; min-height:1.45em; }
.dk-src { display:flex; flex-direction:column; gap:14px; min-height:180px; max-height:min(56vh, 560px); overflow-y:auto; margin:0 -6px; padding:2px 6px 6px;
  scrollbar-width:thin; }
.dk-grp { display:flex; flex-direction:column; gap:8px; }
.dk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; }
.dk-empty { padding:40px 0; text-align:center; }
.dk-tile { position:relative; display:flex; flex-direction:column; gap:0; min-width:0; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--card); color:var(--text); text-align:left; cursor:pointer; font:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
.dk-tile:hover { border-color:color-mix(in srgb, var(--violet) 45%, var(--line)); transform:translateY(-1px); }
.dk-tile:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.dk-tile.on { border-color:transparent; box-shadow:0 0 0 2px var(--violet), 0 12px 26px -16px color-mix(in srgb, var(--violet) 90%, transparent); }
.dk-thw { display:grid; place-items:center; aspect-ratio:16 / 9; background:color-mix(in srgb, var(--text) 7%, var(--bg)); overflow:hidden; }
.dk-th { width:100%; height:100%; object-fit:contain; display:block; }
.dk-th[hidden] { display:none; }
.dk-cap { display:flex; align-items:center; gap:8px; padding:7px 9px 8px; min-width:0; }
.dk-ic { width:18px; height:18px; flex:none; object-fit:contain; }
.dk-ic[hidden] { display:none; }
.dk-tt { display:flex; flex-direction:column; min-width:0; }
.dk-nm { font-size:13px; font-weight:500; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dk-sb { font-size:11.5px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dk-tile.game::after { content:"🎮 игра"; position:absolute; top:7px; left:7px; padding:2px 7px; border-radius:7px; font-size:11px; font-weight:600;
  color:#fff; background:var(--grad, linear-gradient(135deg, #FF5A7A, #C04BE8 55%, #7B61FF)); box-shadow:0 2px 8px rgba(0,0,0,.3); }
.dk-audw { display:flex; flex-direction:column; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.dk-aud { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.dk-aq b { font-size:14px; }
.dk-aq.dis { opacity:.5; cursor:not-allowed; }
.dk-aq.dis:hover { background:none; }
.dk-acts { margin-top:14px; }
.dk-acts .btn[disabled] { opacity:.5; cursor:not-allowed; }

/* --- горячие клавиши в настройках --- */
.dk-krow { gap:10px; }
.dk-krow .tk-keybtn[disabled] { opacity:.45; cursor:not-allowed; }
.dk-krow .tk-keybtn kbd { min-width:44px; white-space:nowrap; }
.dk-kclr { width:30px; height:30px; min-height:0; flex:none; }
.dk-krow .tk-swr-t small.tk-warn-t { color:var(--warn); }

/* --- плашка «Доступно обновление приложения» --- */
.dk-upd { position:fixed; right:16px; top:72px; z-index:50; display:flex; align-items:center; gap:12px; max-width:min(460px, calc(100vw - 32px)); padding:10px 10px 10px 16px;
  border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--text); box-shadow:0 14px 36px -14px rgba(0,0,0,.55); animation:dk-in .25s ease-out both; }
.dk-upd[hidden] { display:none; }
.dk-upd-t { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.dk-upd-t b { font-size:13.5px; font-weight:600; }
.dk-upd-t small { font-size:12px; color:var(--text2); }
.btn.dk-upd-go { min-height:34px; padding:0 14px; font-size:13px; flex:none; }
.dk-upd-x { width:30px; height:30px; min-height:0; flex:none; }
@keyframes dk-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* --- «💻 Приложение для Windows» в шапке (только браузер на Windows-ПК) --- */
.dk-promo { position:relative; margin-left:auto; flex:none; }
.dk-promo[hidden] { display:none; }
.dk-promo:not([hidden]) + .back { margin-left:0; }
.bar-in:has(.dk-promo:not([hidden])) .back-t { display:none; }   /* три вкладки + «Приложение для Windows» — у «Статистики» только стрелка */
.dk-promo-b { display:inline-flex; align-items:center; gap:var(--hb-pgap, 6px); min-height:32px; padding:var(--hb-ppad, 0 11px); border:1px solid var(--line); border-radius:16px; background:none;
  color:var(--text2); font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap; transition:color .15s, border-color .15s, background-color .15s; }
.dk-promo-b:hover, .dk-promo-b[aria-expanded="true"] { color:var(--text); border-color:color-mix(in srgb, var(--violet) 50%, var(--line)); background:color-mix(in srgb, var(--violet) 7%, transparent); }
.dk-promo-c { position:absolute; right:0; top:calc(100% + 8px); z-index:20; width:300px; display:flex; flex-direction:column; gap:8px; padding:14px 16px;
  border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--text); box-shadow:0 18px 44px -16px rgba(0,0,0,.5); }
.dk-promo-c[hidden] { display:none; }
.dk-promo-c > b { font-size:14px; }
.dk-promo-c ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; font-size:12.5px; line-height:1.4; color:var(--text2); }
.dk-promo-c ul b { color:var(--text); font-weight:600; }
.dk-promo-a { display:flex; gap:8px; align-items:center; margin-top:4px; }
.dk-promo-a .btn { min-height:34px; padding:0 14px; font-size:13px; text-decoration:none; }
.dk-promo-a .btn.quiet { padding:0 8px; font-size:12px; color:var(--text2); }
.dk-promo-t { font-size:var(--hb-ptfs, 1em); }   /* узко — только 💻: «лесенка» шапки (account.css, @container sst-bar) ставит 0 — подпись остаётся для экранных дикторов */
@media (max-width: 760px) { .dk-promo { display:none; } }

/* --- 🪟 приложение 1.0.1+ (caps.titleBar → html.dk-tb, titlebar.js): шапка сайта — это и есть полоса заголовка окна ---
   Одна строка 40 px вверху (= titleBarOverlay height, TB_H в main.js): фон — «ручка» окна, логотип/вкладки/ссылки — нажимаются.
   Линия под шапкой — 41-й пиксель (--dk-tbh = 40 + 1): кнопки Windows рисуются ПОВЕРХ страницы на 40 px и линию на 40-м закрывали
   (под ними она «прерывалась»); теперь она ниже них и идёт по всей ширине окна. Линия — ::after с верхом на --dk-ln, и тот же отступ у дорожки
   полосы прокрутки — так обе линии всегда в одном ряду пикселей (border-bottom при 150 % съезжал бы на пиксель). Кнопки Windows при масштабе
   150 % и больше заходят на 1 пиксель экрана ниже 40 px (замерено: Electron 44) — там линия на полпикселя CSS ниже (40,5 px → ровно следующий ряд).
   Справа место кнопок Windows (env(titlebar-area-*) / --tbX, --tbW) пустое, ⬇ обновления — вплотную слева от них.
   Шапка остаётся в потоке страницы, так что --barH (talk.js) уже включает полосу; --dk-tb (лишняя полоса над шапкой) не задаётся = 0.
   В браузере и в приложении 1.0.0 этих правил нет. */
html.dk-tb { --dk-tbh:41px; --dk-ln:40px; }   /* полоса 40 px + линия 1 px (.bar::after); --dk-ln — верх линии */
@media (min-resolution: 1.5dppx) and (max-resolution: 1.99dppx) { html.dk-tb { --dk-ln:40.5px; } }
html.dk-tb .bar { top:0; height:var(--dk-tbh); -webkit-app-region:drag; app-region:drag; -webkit-user-select:none; user-select:none; }
html.dk-tb body .bar { border-bottom-color:transparent; }   /* место линии (фон шапки) — саму линию рисует ::after */
html.dk-tb .bar::after { content:""; position:absolute; left:0; right:0; top:var(--dk-ln); border-top:1px solid var(--line); pointer-events:none; }
html.dk-tb body .bar > .bar-in { max-width:none; height:calc(var(--dk-tbh) - 1px); margin:0; padding:0 0 0 12px; gap:12px;
  margin-left:var(--tbX, env(titlebar-area-x, 0px)); width:var(--tbW, env(titlebar-area-width, calc(100% - 138px))); }
html.dk-tb .bar :is(a, button, input, select, .tabs-nav) { -webkit-app-region:no-drag; app-region:no-drag; }
html.dk-tb .bar img { -webkit-user-drag:none; }
html.dk-tb .bar .logo { gap:8px; font-size:14px; }
html.dk-tb .bar .logo img { width:20px; height:20px; }
html.dk-tb .bar .tabs-nav { padding:2px; }
html.dk-tb .bar { --hb-tnp:0 12px; }
html.dk-tb .bar .tn { min-height:28px; font-size:12.5px; }
html.dk-tb .bar .back { min-height:28px; padding:0 8px; }
html.dk-tb .bar .back:has(+ .dk-tb-upd[hidden]) { margin-right:8px; }   /* без ⬇ — не впритык к кнопкам Windows */
/* полоса прокрутки страницы — под полосой заголовка: верх её дорожки продолжает линию шапки (иначе у правого края — разрыв на ширину полосы) */
html.dk-tb::-webkit-scrollbar { width:12px; background:var(--bg); }
html.dk-tb::-webkit-scrollbar-track { margin-top:var(--dk-ln); border-top:1px solid var(--line); }
html.dk-tb::-webkit-scrollbar-thumb { min-height:40px; border:3px solid transparent; border-radius:8px; background:color-mix(in srgb, var(--text) 26%, transparent) padding-box; }
html.dk-tb::-webkit-scrollbar-thumb:hover { background-color:color-mix(in srgb, var(--text) 42%, transparent); }
html.dk-tb::-webkit-scrollbar-thumb:active { background-color:color-mix(in srgb, var(--text) 55%, transparent); }
html.dk-tb.dk-fs .bar, html.dk-tb.dk-fs .bar * { -webkit-app-region:no-drag; app-region:no-drag; }   /* ⛶ полный экран — не «ручка» поверх видео */
/* ⬇ «обновление готово» */
.dk-tb-upd { display:none; }
html.dk-tb .dk-tb-upd { margin-left:auto; display:grid; place-items:center; flex:none; width:44px; height:100%; padding:0; border:0; border-radius:0; background:none; color:#3BA55D; cursor:pointer;
  -webkit-app-region:no-drag; app-region:no-drag; transition:background-color .15s, color .15s; }
html.dk-tb .back + .dk-tb-upd, html.dk-tb .dk-promo:not([hidden]) + .dk-tb-upd { margin-left:0; }
html.dk-tb .dk-tb-upd[hidden] { display:none; }
.dk-tb-upd:hover { background:color-mix(in srgb, #3BA55D 16%, transparent); }
.dk-tb-upd:active { background:color-mix(in srgb, #3BA55D 26%, transparent); }
.dk-tb-upd:focus-visible { outline:2px solid #3BA55D; outline-offset:-5px; border-radius:8px; }
.dk-tb-upd.ready { animation:dk-tb-in .3s ease-out both; }
.dk-tb-upd:not(.ready) { color:var(--text2); opacity:.55; cursor:default; }   /* скачивается — тихо */
.dk-tb-upd:not(.ready):hover { background:none; }
.dk-tb-upd.busy { cursor:progress; }
.dk-tb-ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.dk-tb-wait { font-size:14px; line-height:1; }
@keyframes dk-tb-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
/* окна поверх страницы — ниже полосы (её не затемняют и не закрывают кнопки Windows) */
html.dk-tb dialog:modal { top:var(--dk-tbh); max-height:calc(100dvh - var(--dk-tbh) - 32px) !important; }
html.dk-tb dialog::backdrop { top:var(--dk-tbh); }
html.dk-tb dialog.tk-lb:modal { top:var(--dk-tbh); height:calc(100dvh - var(--dk-tbh)); max-height:none !important; }
html.dk-tb .tk-pick { top:calc(var(--dk-tbh) + 14px); }
html.dk-tb .countdown { top:var(--dk-tbh); }   /* «3-2-1-ХЛОП» записи — под полосой: вкладки и кнопки окна нажимаются */
html.dk-tb :is(dialog, .tk-menu, .tm-menu, .tk-emenu, .tk-pop, .toast, .tk-pick, :fullscreen) { -webkit-app-region:no-drag; app-region:no-drag; }   /* поверх шапки — не «ручка» */

/* --- 🗂 вкладки в одном окне (caps.views → html.dk-views, titlebar.js) ---
   Активная вкладка шапки — по onViewChange.active; у неактивной — точка в углу: голос или стрим — зелёная,
   запись или 📡 передача игры (красная, дышит), догрузка дорожек (жёлтая). Точка поверх угла (absolute) — ничего не сдвигает. */
.tn-dot { display:none; }
html.dk-views .bar .tn { position:relative; }
html.dk-views .tn-dot { display:block; position:absolute; top:3px; right:4px; width:7px; height:7px; border-radius:50%; background:#3BA55D;
  box-shadow:0 0 0 2px var(--chip, var(--card)); opacity:0; transform:scale(.3); transition:opacity .2s, transform .2s; pointer-events:none; }
html.dk-views .tn-dot.on { opacity:1; transform:none; }
html.dk-views .tn-dot:is(.rec, .live) { background:#ED4245; animation:dk-dot 1.6s ease-in-out infinite; }
html.dk-views .tn-dot.up { background:#FAA61A; }
@keyframes dk-dot { 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { html.dk-views .tn-dot:is(.rec, .live) { animation:none; } }