/* Ночь = альбом (assets/js/night.js). Часы идут вместе с музыкой, комната и тема светлеют к рассвету, в конце — рассвет и зарядка, при загрузке — включение телефона.
   Тема: html.dawn-mix (идёт музыка) и html.dawn (рассвет) не вводят новых цветов, а переопределяют токены (--void --ice --muted --screen --cyan --magenta --low --line), которыми уже написан весь сайт.
   --dawn (0…1, пишет night.js) — доля альбома. До --dm-split (.66) тема «сумерки»: фон темнеет→синеет, светлый текст; за ней — «день»: тёмный текст на светлом фоне, он нарастает до --dawn-bg.
   Одним плавным цветом через середину не пройти: светлый и тёмный текст не набирают 4,5:1 на одном и том же сером, поэтому на отметке .66 текст меняется, а фон 1,6 с «разгорается» (transition). */
:root{--nt-void:#07080C;--nt-ice:#EAF4FA;--nt-muted:#8A93A3;--nt-screen:#BFD7FF;--nt-cyan:#19E3FF;--nt-magenta:#FF2BD6;--nt-low:#FF453A;
 --dusk-bg:#46526C;--day0-bg:#A8B3C4;--dm-t:1.6s;--chg:0}
html.dawn{--dawn:1;--dm-t:2.5s}
html.dawn-mix,html.dawn{--dm1:clamp(0,calc(var(--dawn) / .66),1);--dm2:clamp(0,calc((var(--dawn) - .66) / .34),1)}

/* сумерки: фон и приглушённый текст сдвигаются к --dusk-bg, основной текст остаётся светлым */
html.dawn-mix:not(.dawn-day):not(.dawn){
 --void:color-mix(in srgb,var(--nt-void) calc((1 - var(--dm1))*100%),var(--dusk-bg));
 --muted:color-mix(in srgb,var(--nt-muted) calc((1 - var(--dm1))*100%),color-mix(in srgb,var(--nt-ice) 85%,var(--dusk-bg)));
 --low:color-mix(in srgb,var(--nt-low) calc((1 - var(--dm1))*100%),#FFC2BC);--magenta:color-mix(in srgb,var(--nt-magenta) calc((1 - var(--dm1))*100%),#FFB6F2);      /* красный и маджента как текст на сумеречном фоне */
 --line:color-mix(in srgb,var(--nt-ice) calc(10% + var(--dm1)*6%),transparent)}
/* день: тёмный текст, акценты темнее — читаются на светлом */
html.dawn,html.dawn-mix.dawn-day{
 --void:color-mix(in srgb,var(--day0-bg) calc((1 - var(--dm2))*100%),var(--dawn-bg));
 --ice:var(--dawn-ink);
 --muted:color-mix(in srgb,var(--dawn-ink) calc(85% - var(--dm2)*10%),var(--void));
 --screen:#1F3A66;--cyan:#004855;--magenta:#7A0A5E;--low:#7A130E;
 --line:color-mix(in srgb,var(--dawn-ink) 14%,transparent)}
/* острова ночи: блокировка, рабочий стол (текст по обоям-видео) и просмотр клипа не светлеют */
html.dawn-mix :is(#lock,#home,.viewer,.br-hero,.clip-card .poster),html.dawn :is(#lock,#home,.viewer,.br-hero,.clip-card .poster){
 --void:var(--nt-void);--ice:var(--nt-ice);--muted:var(--nt-muted);--screen:var(--nt-screen);--cyan:var(--nt-cyan);--magenta:var(--nt-magenta);--low:var(--nt-low);
 --line:rgba(234,244,250,.10);--bg:var(--nt-void);--ink:var(--nt-ice);color:var(--nt-ice)}

/* плавность смены цвета (только у элементов, у которых нет своих transition) */
html.dawn-mix :is(.phone,#chat,#profile,.screen.app,.app-head,.msg,.typing,.chip,.list,.card,.seg),html.dawn :is(.phone,#chat,#profile,.screen.app,.app-head,.msg,.typing,.chip,.list,.card,.seg){
 transition:background-color var(--dm-t) linear,color var(--dm-t) linear,border-color var(--dm-t) linear}

/* жёстко тёмные стёкла и пузыри → от токенов (ночью выглядят как прежде, днём светлеют) */
html.dawn-mix :is(.msg.krita,.typing),html.dawn :is(.msg.krita,.typing){background:color-mix(in srgb,var(--ice) 8%,transparent)}
html.dawn-mix .msg.you,html.dawn .msg.you{background:color-mix(in srgb,var(--screen) 16%,transparent)}
html.dawn-day .msg.you,html.dawn .msg.you{background:color-mix(in srgb,var(--dawn-gold) 60%,transparent)}
html.dawn-mix .bar,html.dawn .bar{background:color-mix(in srgb,var(--void) 74%,transparent)}
html.dawn-mix .cookie,html.dawn .cookie{background:color-mix(in srgb,var(--void) 84%,transparent)}
html.dawn-mix #homeBar,html.dawn #homeBar{background:color-mix(in srgb,var(--ice) 80%,transparent)}
html.dawn-mix .prof-in,html.dawn .prof-in{background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--void) 62%,transparent) 40px,color-mix(in srgb,var(--void) 86%,transparent) 120px,color-mix(in srgb,var(--void) 92%,transparent));text-shadow:none}
html.dawn-mix .btn,html.dawn .btn{background:color-mix(in srgb,var(--void) 35%,transparent)}
html.dawn-mix .sub-row input,html.dawn .sub-row input{background:color-mix(in srgb,var(--void) 50%,transparent)}
html.dawn-mix .back,html.dawn .back{background:color-mix(in srgb,var(--void) 60%,transparent)}
html.dawn-mix .back::before,html.dawn .back::before{border-color:var(--ice)}
html.dawn-mix .toast,html.dawn .toast{color:var(--nt-ice)}
html.dawn-mix .pl::after,html.dawn .pl::after{border-left-color:var(--nt-ice)}
html.dawn-mix .pill.primary,html.dawn .pill.primary{background:var(--ice);color:var(--void);border-color:var(--ice)}

/* комната (десктоп): фон светлеет вместе с альбомом, на рассвете поверх обоев — светлая дымка с «солнцем» снизу */
.room::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity var(--dm-t) linear;
 background:radial-gradient(110% 70% at 50% 108%,color-mix(in srgb,var(--dawn-gold) 78%,var(--dawn-bg)),var(--dawn-bg) 62%)}
html.dawn-mix .room::after,html.dawn .room::after{opacity:calc(clamp(0,calc((var(--dawn) - .3) / .7),1)*.86)}
html.dawn-mix .room-lyrics,html.dawn .room-lyrics{z-index:2}
html.dawn-mix #roomBg,html.dawn #roomBg{filter:blur(42px) brightness(calc(.2 + var(--dawn)*.6)) saturate(1.1);transition:opacity 1.2s,filter var(--dm-t) linear}
html.dawn-mix .room-lyrics .rl,html.dawn .room-lyrics .rl{color:var(--ice)}

/* свет экрана в такт музыке (reactive.css) на светлом — не тёмная вуаль, а лёгкое осветление */
html.dawn-day .phone::after,html.dawn .phone::after{mix-blend-mode:screen}

/* кнопка «до конца» в профиле: мелкая, тихая */
#toDawn{border-style:dashed}

/* батарея: заряд 1 % → 100 % (night.js пишет --chg 0…1 и число); красный → бирюзовый; молния рядом. Статус-бары блокировки и стола и плашка .chg у верха телефона */
html.chg .bat,.chg-hud{--chg-c:color-mix(in srgb,var(--low) calc((1 - var(--chg))*100%),var(--cyan))}
html.chg .bat i::before{width:calc(2px + 14px*var(--chg));background:var(--chg-c);transition:none}
html.chg .facts dt.mono{color:var(--cyan)}
html.chg .bat b{color:var(--chg-c);min-width:3.2ch;text-align:right}
.bat .bolt{display:none;width:10px;height:14px;fill:none;stroke:var(--chg-c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.chg .bat .bolt{display:block}
.chg-hud{position:absolute;z-index:60;left:50%;top:max(10px,env(safe-area-inset-top,0px));display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;pointer-events:none;gap:10px;
 background:color-mix(in srgb,var(--void) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);color:var(--ink);
 opacity:0;transform:translate(-50%,-14px);transition:opacity .35s,transform .35s var(--ease)}
.chg-hud.in{opacity:1;transform:translate(-50%,0)}
.chg-hud .bolt{display:block;width:13px;height:19px;fill:none;stroke:var(--chg-c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chg-bat{position:relative;width:42px;height:20px;border:1.8px solid color-mix(in srgb,var(--ink) 70%,transparent);border-radius:5px}
.chg-bat::after{content:'';position:absolute;right:-5px;top:4.5px;width:2.5px;height:7px;border-radius:1px;background:color-mix(in srgb,var(--ink) 70%,transparent)}
.chg-bat::before{content:'';position:absolute;left:2px;top:2px;bottom:2px;width:calc(34px*var(--chg));border-radius:2px;background:var(--chg-c)}
.chg-hud b{min-width:4ch;text-align:right;font:500 17px/1 var(--mono);color:var(--chg-c)}
.chg-hud .lbl{font:500 12px/1 var(--sans);color:var(--muted)}

/* рассвет: вспышка света снизу (только при включённых эффектах) */
.night-flash{position:absolute;inset:0;z-index:150;pointer-events:none;opacity:0;border-radius:inherit;
 background:radial-gradient(90% 55% at 50% 105%,rgba(255,238,205,.95),rgba(255,226,170,.45) 48%,transparent 78%)}
.night-flash.go{animation:nflash 1.8s ease-out}
@keyframes nflash{0%{opacity:0}18%{opacity:.9}100%{opacity:0}}

/* включение телефона. html.boot-on ставит night-gate.js до первого кадра (свежая загрузка без хеша экрана, без reduced и без «Эффекты: выкл»):
   чёрный экран, значок разряженной батареи 0,9 с, затем 0,5 с «оживание» (чёрное тает, лёгкая вспышка). Весь ход — на CSS (не зависит от JS), итого 1,4 с; в конце visibility:hidden.
   pointer-events:none — нажатия проходят сквозь, а JS по нажатию/клавише снимает boot-on; фокуса не берёт (aria-hidden, без tabindex) */
.boot{display:none;position:absolute;inset:0;z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#000;pointer-events:none;border-radius:inherit}
html.boot-on .boot{display:flex;animation:boot-out 1.4s linear both}
.boot::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 50% at 50% 42%,rgba(191,215,255,.5),transparent 70%);opacity:0}
html.boot-on .boot::after{animation:boot-flash 1.4s linear both}
.boot-bat{width:72px;height:36px;fill:none;stroke:var(--nt-low);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.boot-bat rect.f{fill:var(--nt-low);stroke:none}
.boot-pct{font:500 18px/1 var(--mono);letter-spacing:.06em;color:var(--nt-low);opacity:0}
html.boot-on .boot-bat,html.boot-on .boot-pct{animation:boot-in .3s ease-out .12s both}
html.boot-on .boot-bat rect.f{animation:boot-blink 1.1s ease-in-out .2s both}
@keyframes boot-out{0%,64%{opacity:1;visibility:visible;background:#000}100%{opacity:0;visibility:hidden;background:#000}}
@keyframes boot-flash{0%,62%{opacity:0}74%{opacity:.7}100%{opacity:0}}
@keyframes boot-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes boot-blink{0%,100%{opacity:1}35%{opacity:.25}60%{opacity:1}}
html.boot-on .boot-bat,html.boot-on .boot-pct{will-change:opacity}
@media (prefers-reduced-motion:reduce){.boot{display:none!important}}

/* утро: тонкая подстройка тинтов приложений (тёмный цвет акцента на светлом фоне даёт «тяжёлую» заливку) */
html.dawn-day .day.has-event,html.dawn .day.has-event{background:color-mix(in srgb,var(--low) 8%,transparent)}
html.dawn-day .day.sel,html.dawn .day.sel{background:color-mix(in srgb,var(--screen) 14%,transparent)}
html.dawn-mix .day.sel.has-event,html.dawn .day.sel.has-event{background:color-mix(in srgb,var(--low) 12%,color-mix(in srgb,var(--screen) 8%,transparent))}
html.dawn-day .clk-dawn,html.dawn .clk-dawn{background:color-mix(in srgb,var(--cyan) 4%,transparent)}

/* кнопки сцены рассвета в чате: «Зарядить» — главная (сплошная), «Включить ночь» — вторая (контур); две кнопки рядом, как пара */
.act-btn{min-height:44px}
.act-btn[data-act=charge]{background:var(--ice);color:var(--void);border-color:var(--ice)}
.msg.act+.msg.act{margin-top:-2px}
/* «Включить ночь»: плашка на рабочем столе и кнопка в профиле; затемнение «ночь возвращается» */
.night-pill{align-self:center;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(191,215,255,.5);background:rgba(7,8,12,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--nt-ice);font:500 14px/1 var(--sans);letter-spacing:.02em;text-shadow:none;-webkit-tap-highlight-color:transparent;transition:transform .15s,background .2s}
.night-pill:active{transform:scale(.96)}
@media (hover:hover){.night-pill:hover{background:rgba(191,215,255,.16)}}
.night-fade{position:absolute;inset:0;z-index:180;background:#000;opacity:0;pointer-events:none;transition:opacity .3s ease;border-radius:inherit}
.night-fade.on{opacity:1}      /* слой не перехватывает нажатия: сброс короткий, а зависший не должен запирать телефон */
html.dawn #home .hwall{filter:blur(9px) brightness(.88) saturate(1.1)}
html.dawn-mix .clk-banner,html.dawn .clk-banner{background:color-mix(in srgb,var(--low) 9%,var(--void))}
html.dawn-mix .day.today.sel.has-event .n,html.dawn .day.today.sel.has-event .n{color:var(--ink)}