/* ============================================================================ НОВИЯТ ИЗГЛЕД — ПЛАСТ ОТГОРЕ, НЕ ВТОРА СТРАНИЦА. [СЛОЙ 1 от три: ВИДЪТ] ⚠ ВСЯКО ПРАВИЛО ТУК ЗАПОЧВА С html[data-skin="new"] И ТОВА НЕ Е СТИЛ, А ПРЕДПАЗИТЕЛ. Признакът се слага от saris_skin_boot.js СЛЕД като е решил, че новият изглед е позволен. Няма ли го — нито едно правило не важи и страницата е точно днешната. Тоест счупен файл тук не може да счупи стария изглед: той просто остава без действие. ⚠ КОЖАТА НЕ ОТПУШВА И НЕ ЗАПУШВА НИЩО. Иконите в дока стоят с `display:none` в разметката и живият код ги отпушва СПОРЕД ПРОФИЛА (IS_KID / IS_OWNER / IS_IVA). Тук е ЗАБРАНЕНО да се пише `display` върху `#dock .ic` — това би показало на децата Финанси, Трейдинг и Документи. Кой какво вижда, решава живият код, както днес. Кожата само стои другояче. Проверява се от _t_skin_look.py, който сравнява списъка видими икони при ?skin=old и при ?skin=new за трите профила. ⚠ И НЕ РИСУВА БУТОН, КОЙТО ПРАВИ СЪЩОТО. В този слой няма нито един нов елемент — CSS не може да прави елементи и точно затова слоят е пръв. Всичко долу е ПРЕПОДРЕЖДАНЕ и ПРЕОБЛИЧАНЕ на живата разметка: същите id-та, същите обработчици, същата функционалност. Ако вечерта свърши тук, той вижда нова подредба със стария SARIS отдолу и нищо не е счупено. Размерът на орба идва в слой 2, поведението — в слой 3. ========================================================================= */ /* Един-единствен признак, за да се вижда отвън (и в проверките), че пластът е зареден. Не рисува нищо. */ html[data-skin="new"] body { --saris-skin: 1; } /* ══ 1. СЦЕНАТА ═══════════════════════════════════════════════════════════ Едно-единствено правило, но то е поправка, а не украса. `#log` е flex-дете с `flex:1`. По подразбиране `min-height` на flex-дете е `auto`, тоест то НЕ МОЖЕ да падне под съдържанието си. На легнал телефон (844×390) това изяжда всичко отдолу: измерено на живо преди тази промяна — долната лента и ЦЕЛИЯТ ДОК излизат под ръба и просто ги няма. Не са скрити, не са изключени; отрязани са, защото дневникът не отстъпва. `min-height:0` му позволява да се свие и дока се връща на екрана. Докът е достъп, не украса — затова това е в първия слой, не в последния. */ html[data-skin="new"] #log{min-height:0;padding:12px 14px 8px;} /* ══ 1б. РАЗМЕРЪТ НА ОРБА [СЛОЙ 2] ═══════════════════════════════════════ ⚠ КУТИЯТА Е РАДИУСЪТ. Rs = 0.30 · min(ширина, височина) НА ПЛАТНОТО. Тоест „не пипам орба, само кутията" е вярно като дума и безполезно като защита: смениш ли кутията, сменил си радиуса. Тук се гледа първо, ако орбът някога стане друг по големина. 31vh → 40vh. Не защото е по-красиво, а защото в прототипа опитах обратното — изравних платното с живия — и той го отхвърли с думите „прекалено смалени са, губи се на фона на всичко, а това е центърът ни". Голямото е ИЗБОР, не пропуск. Доводът „в живия е 129, значи трябва 129" вече е чуван и отхвърлен. Дневникът плаща — той превърта, орбът не. Стъклената сфера при това НЕ порасва толкова: GLASS_FIT 0.82 я свива обратно към лицето (виж saris_skin.js). Порастват дъгите, тикчетата и пръстенът — те четат пълния радиус. Тоест печели рамката около нея, не самата тя. Самата кутия се задава по-долу, в дял „СЦЕНАТА" — там е и доводът защо вече не е закована на дял от екрана, а расте до колкото остане. */ /* ══ 1в. СЦЕНАТА [СЛОЙ 4] ════════════════════════════════════════════════ ДОТУК КОЖАТА БЕШЕ ПРЕБОЯДИСВАНЕ. Той го каза с една снимка до друга: ъгли, капсули и док — но сцената си остана старата. Разликата, мерена от двата кадъра на един и същ телефон: сфера прототип 475 px · живо 345 px (−27%) под орба прототип: нищо · живо: целият дневник Орбът НЕ беше по-малък, защото не съм му дала числата. Беше по-малък, защото дневникът яде половината екран. Оттам и всичко останало. ⚠ ДНЕВНИКЪТ НЕ СЕ СКРИВА. `#log` е където `add()` пише, където живее `#histbox`, и поне две места четат `#log.parentNode` (закачането на известията, лентата „Отговарям на"). Скрия ли го, всяко балонче, което не съм предвидила — включително бъдещо — изчезва тихо. СЪЩИЯТ ЕЛЕМЕНТ, ДРУГА КУТИЯ: свит до една реплика, с превъртане до дъното. Нула копия, които могат да се разминат с истината. Орбът взима освободеното: `#top` става отстъпчив нагоре (`flex:1 1 auto`), тоест расте до колкото остане, вместо да е закован на дял от екрана. */ /* ⚠ ПОДЪТ Е В ПИКСЕЛИ, НЕ В ПРОЦЕНТИ, И ТОВА Е ИЗМЕРЕНО. С `min-height:40vh` на най-тесния телефон (320×568) долната лента излезе 39 px под ръба: 40vh от 568 е 227 px под, който орбът отказва да слезе, а мебелта отдолу няма къде. Процентът е удобен на голям екран и опасен на малък — точно обратното на това, за което го слагаме. Подът е нисък и в пиксели; на голям екран `flex:1` и без това дава на орба всичко, което остане. */ /* ⚠ ПЛАТНОТО ВЕЧЕ Е ЗАКОВАНО, А НЕ „РАСТЕ ДО КОЛКОТО ОСТАНЕ". Докато растеше, `Rs` ставаше произволен — и понеже стъклото беше свито отделно (GLASS_FIT 0.82), всичко останало плуваше около него. Сега стъклото Е `Rs`, значи кутията определя ЦЯЛАТА рисунка наведнъж. 40vh + 54: при 844 px екран платното е 338 px, `Rs = 0.30 · 338 = 101` — точно колкото беше видимата сфера досега, тоест той няма да види сферата да скача. Петдесет и четирите са ивицата за състоянието и подсказката. */ /* ⚠ 40vh СЕ ОКАЗА ПРИЧИНАТА БАЛОНЧЕТО ДА ГО НЯМА — и това е мерено (_skin_band_probe.py), а не разсъждавано: прототип: платно 390 × 563 → по-малката страна е ШИРОЧИНАТА Rs = 0.30 · 390 = 117 · сфера центрирана на y=364 над нея остават 112 px празно платно → балончето ляга там живо: платно 390 × 313 → по-малката страна е ВИСОЧИНАТА Rs = 0.30 · 313 = 94 · над сферата остават 16 px → `noroom` Тоест не редовете горе изяждаха балончето. Сметнах и това: махна ли двата реда без друга промяна, лентата пак е 16 px, защото кутията почва веднага под тях и сферата се вдига заедно с тях. Мястото се вземаше от 40vh. ⚠ И НЕ Е ТЯСНО — измерено е, че живото хабеше 183 px. Съдържанието свършваше на 661 при екран 844. Кутията ги взима, а не ги отнема от нещо. ⚠ 66.7vh БЕШЕ ГРЕШНИЯТ ИЗВОД ОТ ВЯРНОТО МЕРЕНЕ. Пренесох кутията на прототипа с мисълта, че щом `Rs` стане неговите 117, и сферата ще стане неговата. Сравнителят го опроверга: прототип 100.7 px, живо **124.9** — с 24% ПО-ГОЛЯМА, тоест обратното на исканото. Причината: `Rs` не е сферата. Прототипът рисува 0.861·Rs, живото 1.067·Rs (тук стъклото Е `Rs` — решение отпреди). Едно и също `Rs` дава две различни сфери. Пренасях числото, а трябваше желания РЕЗУЛТАТ. Затова кутията се връща на 40vh+29 (платно 313 → сфера ~100, тоест прототипните 100.7), а мястото за балончето идва от ОТДЕЛЕН ПОЯС отгоре, а не от разтягане на платното. Двете неща вече не се борят за един и същ пиксел: поясът е за балончето, платното е за сферата. ⚠ ПОЯСЪТ ТРЯБВА ДА Е ОТДЕЛЕН, ИНАЧЕ НЕ СЪЩЕСТВУВА. Сметнато и проверено: лентата за балончето е `ab+6 … draws-6`, а `draws` се мери от платното, което почва веднага под редовете. Тоест махането на редове вдига И сферата и лентата остава същите ~10 px — затова изрязването на реда с лимитите не върна балончето. С пояс P лентата става P+10, тоест 46 → 56 px, над прага 34. ⚠ В ЛЕГНАЛ ЕКРАН ПОЯСЪТ ОТПАДА САМ — правилото по-долу задава `margin` изцяло. Там балончето се скрива (`noroom`), което е верният избор: по-добре го няма, отколкото да легне върху сферата. ⚠⚠ ТУК БЕШЕ ЗАТВОРЕН КОМЕНТАРЪТ (звезда-наклонена) И ТОВА ИЗЯЖДАШЕ ПРАВИЛОТО. (Затварящият знак нарочно е изписан с думи — напишеш ли го буквално, затваряш коментара точно тук. Сгреших го веднъж по този начин.) Редовете отдолу оставаха ГОЛ ТЕКСТ в таблицата. CSS не се предава — той се възстановява от грешка, като чете боклука за СЕЛЕКТОР до първата `{`. Първата `{` е тази на `html[data-skin="new"] #top` след коментара, тоест петте реда обяснение + селекторът ставаха един невалиден селектор и блокът се изхвърляше ЗАЕДНО с тях. Измерено, не предположено (`_skin_why_top.py`): в заредената таблица на кожата това правило ГО НЯМАШЕ, а съседните (`padding-bottom:54px` и легналото) ги имаше. Затова печелеше вграденото `#top{height:31vh; min-height:160px;flex:0 0 auto}` — оттам идваха и трите оплаквания наведнъж: платно 208 px вместо 366, сфера 62 вместо ~100, лента за балончето 9 px (под прага 34) и 309 px празно под лентата за писане. Същият клас грешка като правите кавички в `_t_proto_diff.py`: файлът изглежда правилен, а машината чете друго. Оттук нататък — след промяна по кожата се пуска `_skin_why_top.py` и се гледа ГО ИМА ЛИ правилото. ⚠ `flex` СЕ ПАЗИ ОТСТЪПЧИВ и е важното при малък екран: на 568 px това иска повече, отколкото има, и тогава отстъпва ОРБЪТ, а не дока — правилото от легналия екран по-долу важи и тук. Затова процентът е безопасен само защото свиването е разрешено; закова ли се някога с `min-height`, долната лента пак ще излезе под ръба. */ /* ⚠ `flex:1 1 auto` + `height:auto`, НЕ дял от екрана. Дялът (31vh/40vh) е причината за празнината: сборът на закованите братя беше 535 px при екран 844, тоест 309 px (37%) черно под лентата за писане, а орбът стоеше свит до 208. Дял НЕ МОЖЕ да запълни екран, чиито останали редове се менят — всеки път остава или дупка, или преливане. Затова орбът взима ОСТАВАЩОТО: расте до колкото има и се свива пръв, когато няма (`min-height:0`). Това е и записаният по-горе замисъл („#top става отстъпчив нагоре“) — написано е било `0 1 auto`, тоест расте с нула. */ html[data-skin="new"] #top{ flex:1 1 auto;height:auto;min-height:0; margin-top:var(--saris-say-band,46px);} /* ══ ЧАТ БОКСЪТ ИЗЛИЗА ОТ СЦЕНАТА ═════════════════════════════════════════ „Нали премахваме като цяло концепцията с чат бокса." — да. Свит до ивица пак си беше чат: три излишни реда под орба („докосни орба, за да чуеш поздрава", „Часовникът горе — стари разговори", балонче с дълъг текст) го смачкваха. Под орба остава СЪСТОЯНИЕТО и толкова. ⚠ НО НЕ СЕ СКРИВА С `display:none`. Изнася се извън кадъра — както лимитите — за да продължи да работи всичко, което го пипа: `add()` пише в него, `#histbox` живее в него, две места четат `#log.parentNode`, а превъртането до дъното иска истинска височина. Скрит елемент няма размери и това мълчи; изнесеният ги има. Излиза и ОТ ПОТОКА (`position:fixed`), тоест `#app` вече не му дава място и орбът получава целия остатък. Двата подсказващи реда изчезват сами със самия дневник — те са `add("sys",…)` вътре в него, а не отделни неща. */ html[data-skin="new"] #log{ position:fixed;left:-10000px;top:0;width:92vw;height:60vh; max-height:none;flex:0 0 auto;overflow-y:auto;padding:8px 14px;} /* ИСТОРИЯТА НА ЖЕСТ — същият елемент, трета кутия. Плъзгане надолу по орба го връща в кадър като панел; плъзгане нагоре или докосване на ✕ го прибира. Нищо не се копира и нищо не се строи наново — това е СЪЩИЯТ `#log`, само на друго място. */ html[data-skin="new"].skinhist #log{ left:0;right:0;width:auto;top:0;bottom:0;height:auto;z-index:14; background:rgba(5,8,16,.96);backdrop-filter:blur(18px); padding:calc(env(safe-area-inset-top) + 44px) 14px 20px;} html[data-skin="new"] #skinhistx{ position:fixed;top:calc(env(safe-area-inset-top) + 10px);right:14px;z-index:15; width:36px;height:36px;border-radius:50%;display:none; align-items:center;justify-content:center;cursor:pointer; background:rgba(5,20,32,.65);border:1px solid rgba(53,228,255,.45); color:var(--cyan);font-size:18px;line-height:1;} html[data-skin="new"].skinhist #skinhistx{display:flex;} /* Докато историята е отворена, сцената отстъпва — иначе орбът и капсулите светят през панела и се чете двойно. */ html[data-skin="new"].skinhist #top, html[data-skin="new"].skinhist #topbar, html[data-skin="new"].skinhist #skinecho, html[data-skin="new"].skinhist #skinhint{opacity:0;pointer-events:none;} /* ══ ПИСАНЕ ВЪТРЕ В „РАЗГОВОРИ" (10.09.2026, по искане на Светослав) ══════════ Дневникът тук става цял екран (z-index:14) и покриваше капсулата с полето — затова „Отговори" отваряше клавиатура, но нямаше къде да се пише. Сега СЪЩАТА капсула (поле „Питай SARIS" + камера/кламер/микрофон) плува НАД дневника долу, а дневникът получава място отдолу, за да не се крие последното под нея. Лентата за отговор („↩ Отговор на:…") сяда точно над капсулата. */ html[data-skin="new"].skinhist #bar{ position:fixed;left:0;right:0;bottom:0;z-index:16; margin:0 12px calc(9px + env(safe-area-inset-bottom));} html[data-skin="new"].skinhist #log{padding-bottom:88px;} html[data-skin="new"].skinhist #replybar{ position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom)); z-index:16;margin:0 12px 6px;} /* ══ БАЛОНЧЕТО С НЕЙНАТА РЕПЛИКА ══════════════════════════════════════════ Мястото, което дневникът освободи, но не запълни. Едно балонче с последната ѝ реплика. Формата идва от живите класове `.m.s .t`; тук е само кутията. ⚠ ВТОРИ ОПИТ, И ПЪРВИЯТ БЕШЕ ГРЕШЕН ПО ЗАМИСЪЛ, НЕ ПО ЧИСЛО. Сложих балончето В ПОТОКА, за да си вземе място от flex — и точно това го направи „пореден ред в чат": орбът се свиваше всеки път, щом тя проговори, а сцената се преподреждаше. Той го видя веднага. Отворих прототипа и го премерих (_t_proto_diff.py), вместо да го помня: прототип: балончето е на 0.18 от височината — НАД орба, ИЗВЪН потока моето: на 0.62 — ПОД орба, В потока Оттам и разликата, която се вижда с просто око. Сега е като там: ивица между горните хапчета и орба, наслагва се, не се вклинява. Съдържанието е ЗАЛЕПЕНО ЗА ДОЛНИЯ ѝ ръб, тоест дългият текст расте НАГОРЕ, към празното, а не надолу върху орба. Двата ръба се мерят (виж saris_skin.js) — на око тук значи да се разминава при всяка промяна. `pointer-events:none` — балончето не бива да поема допир, предназначен за орба зад него. */ /* ⚠⚠ КОТВАТА Е ГОРЕ, НЕ ДОЛУ — И ТОВА Е ОБРАТНОТО НА ПЪРВОТО РЕШЕНИЕ. Дотук балончето беше залепено за ДОЛНИЯ ръб (`justify-content:flex-end`) с маска, която стопява горния край. Разсъждението беше „краят на изречението е важният, началото се стопява меко". На екран това значи, че при дълга реплика ПЪРВОТО, което човек чете, е средата на дума. Измерено (`_skin_say_long.py`, 210 знака): текстът е 151 px в кутия 99 px, първата дума „Добър" стои на y=72, а видимото поле почва на 114 — тоест 22 px НАД ръба, извън. Виждаха се 139 от 210 знака (66%); една трета от репликата просто я нямаше и нищо не подсказваше, че липсва. Меко скрито начало не е по-добро от рязано начало — то е същата загуба, само по-трудна за забелязване. Сега: залепено ГОРЕ, расте НАДОЛУ до предела на пояса и оттам ПРЕВЪРТА в себе си. Началото се вижда винаги; излишъкът е достижим, а не изгубен. Долната маска и стрелката се появяват САМО когато наистина има още (класът `more` се слага след мерене в saris_skin.js) — постоянна маска би стопявала последния ред и на кратка реплика, тоест би лъгала. */ /* ⚠⚠ ТРЕТИ ОПИТ, И ДВАТА ПРЕДИШНИ БЯХА ЕДНА И СЪЩА ГРЕШКА: даваха на балончето ФИКСИРАНА кутия и после спореха какво да се РЕЖЕ от нея. · първи опит — котва долу + маска отгоре: губеше се НАЧАЛОТО (мерено: 139 от 210 знака, първата дума 22 px над ръба); · втори опит — котва горе + превъртане: губеше се ВСИЧКО СЛЕД ПЪРВИЯ РЕД и отдолу увисваше гол надпис „още“. Смяна на едно рязане с друго. Причината е обща: кутията беше фиксирана. ПРОТОТИПЪТ НЕ РЕЖЕ. Измерено (`_proto_say.py`) при същите 210 знака: `#card` 116 px → 214 px (расте, `height` е авто) overflow visible/visible (никъде нищо не се крие) маска none (няма стопяване) превъртане False (няма вътрешна ролка) видими 210 от 210 знака, 6.9 реда, първите И последните вътре Тоест балончето просто СТАВА ТОЛКОВА, КОЛКОТО Е РЕПЛИКАТА. Тук е пренесено същото. Цената, която прототипът също плаща и която казвам изрично, вместо да я скрия: при дълга реплика балончето слиза върху горния ръб на сферата (в прототипа картата е 76–290, орбът почва на 82 — същото наслагване). Пресметнато тук: 7 реда ≈ 170 px, тоест 114–284, а сферата почва на 283. Докосва я, не я покрива. Реплика, която се чете цяла, върху ръба на сферата е по-добра от реплика, показана наполовина. Орбът НЕ СЕ СМАЧКВА: балончето е `fixed`, извън потока — мерено 117 → 117. */ /* ⚠ ПРЕДЕЛ, ЗАЩОТО БЕЗ ПРЕДЕЛ БАЛОНЧЕТО ИЗЯЖДА СЦЕНАТА. Без таван реплика от 350 знака стигна до y≈370 и покри надписите „Трейдинг“ и „Задачи“ заедно с горните части на двете дъги. Таванът е пресметнат, не избран на око: надписите по горните дъги стоят на екранни ~219 px, тоест 100 px биха ги опазили — но при 100 px реплика от два абзаца се показва на една трета и той видя точно това („излезе само първата част от него“). ⚠ ИЗБОРЪТ Е ОБЯВЕН: по-добре балончето да покрие за малко два надписа, отколкото да реже текст мълчаливо. Затова таванът е ТРЕТИНА ОТ ЕКРАНА (33vh ≈ 279 px при 844) — при него двата абзаца от снимката се побират ЦЕЛИ и ролка изобщо не потрябва. Оттам нататък текстът превърта в себе си И се появява видим знак „↓ още“ — мълчаливото рязане е дефектът, който гоним цял ден, а невидимата ролка е същото рязане с друго име. */ html[data-skin="new"] #skinsay{ display:none;position:fixed;left:0;right:0;z-index:10; top:var(--saris-say-top,14vh);height:auto; max-height:max(33vh,var(--saris-say-h,20vh)); /* ⚠ ПРОСВЕТ ПОД КУТИЯТА — ЗАСТРАХОВКА, НЕ ПОПРАВКА НА ИЗМЕРЕН ДЕФЕКТ. Мерено при четири дължини (7 / 127 / 363 / 598 знака, включително с активна ролка): външната височина на балончето с подплънката и рамката съвпада с видимата, отрязано 0 px. Тоест ТУК рязане няма и не мога да го възпроизведа — а той го вижда. Затова долният ръб получава 6 px въздух: ако някъде подредбата е с пиксел по-тясна, отрязва се празно, не рамка. `border-box`, за да не разшири тавана. */ padding:0 14px 6px;box-sizing:border-box;pointer-events:none; flex-direction:column;align-items:flex-start;justify-content:flex-start; overflow:visible;} html[data-skin="new"] #skinsay .m{ max-height:100%;min-height:0;display:flex;flex-direction:column;} /* ⚠ РАЗМЕРЪТ Е НЕГОВО РЕШЕНИЕ, НЕ ПРОТОТИПНО. Мерено: прототипът е `-apple-system 15px / ред 21.75px`, а живото беше СЪЩОТО — тоест нямаше какво да се „вземе от прототипа“, двете вече съвпадаха. Той поиска по-малко, затова тук е 14/20 — едно стъпало ПОД прототипа, обявено като отклонение. Връща се на 15/21.75 с една дума. */ html[data-skin="new"] #skinsay .t{font-size:14px;line-height:20px;} /* 4.5 (17.10.2026) КРАТКИЯТ ОТГОВОР НА ЕДИН РЕД. Общото `.m .t{max-width:86%}` (index.html) е 86% от `.m`, а тук `.m` се свива по съдържанието (#skinsay е flex-start) → кръгов процент: картата винаги беше с 14% по-тясна от текста и последната дума падаше на нов ред („Винаг/и.“, „Лека нощ,/Светослав.“). Таванът вече е от ширината на картата (390 − 2×14 px) — дългите отговори са на същите 86% (~311 px при 390), краткият е на един ред. */ html[data-skin="new"] #skinsay .t{max-width:calc((100vw - 28px) * .86);} /* 4.1 (17.10.2026) „Знам какво те попитах“: „↩ на моето „…?“ · преди N мин“ — тих ред ВЪТРЕ в картата, над думите. Текстът идва от атрибута data-op (saris_skin.js, opl) — не е в textContent на репликата. При гост — не. */ html[data-skin="new"] #skinsay .t[data-op]::before{ content:attr(data-op);display:block;font-size:12px;line-height:16px;opacity:.62;color:inherit;margin:0 0 4px;} html.gcur #skinsay .t[data-op]::before{display:none;} /* 4.3 🧵 (17.10.2026): „🧵 Записах: … · питам …“ ПОД думите в балончето — от атрибута data-thr (saris_skin.js, thl); не е в textContent на репликата (гласът и подписът за „махнато“ не го виждат). При гост — не. */ html[data-skin="new"] #skinsay .t[data-thr]::after{ content:attr(data-thr);display:block;font-size:12px;line-height:16px;opacity:.68;color:inherit;margin:6px 0 0;} html.gcur #skinsay .t[data-thr]::after{display:none;} /* 1.2 „Погледът ѝ“ (17.10.2026): „погледнах: 📅 📈 · 🧠 3“ ПОД думите в картата — огледало на живия `.lkln` (saris_skin.js, lkl); тап на иконка → подробността на нов ред. `pointer-events:auto`: родителят е `none`. При гост — не. */ /* Своя тиха капсула (като опциите), не гол текст: под картата е небето и редът трябва да се чете върху всяко. */ html[data-skin="new"] #skinlook{display:none;flex:0 0 auto;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px; align-self:flex-start;max-width:calc((100vw - 28px) * .86);box-sizing:border-box;padding:3px 10px;border-radius:12px; background:rgba(8,20,30,.74);border:1px solid rgba(53,228,255,.22);color:#dff3ff; font-size:12px;line-height:18px;pointer-events:auto;} html[data-skin="new"] body.lightui #skinlook{background:rgba(255,255,255,.84);border-color:rgba(21,70,96,.25);color:#14394f;} html[data-skin="new"] body.lightui #skinlook .lki{border-color:rgba(21,70,96,.30);} html[data-skin="new"] #skinlook.on{display:flex;} html[data-skin="new"] #skinlook .lki{cursor:pointer;padding:0 6px;border-radius:8px;border:1px solid rgba(143,220,238,.32); -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;} html[data-skin="new"] #skinlook .lki:active{background:rgba(143,220,238,.18);} html[data-skin="new"] #skinlook .lksep{opacity:.6;} html[data-skin="new"] #skinlook .lkdet{flex-basis:100%;margin-top:2px;} html[data-skin="new"] #skinlook .lkgo{margin-left:8px;text-decoration:underline;cursor:pointer;} html.gcur #skinlook{display:none!important;} /* 3.2 „Числата в разговора“ (22.10.2026): графиката под думите в картата — огледало на живия `.chln` (saris_skin.js, chl); тап по стълбче → подробността НА МЯСТОТО на заглавието (`.det`), за да не расте картата към пръстена. Своя тиха капсула като #skinlook (под картата е небето). При гост — не. Ширината 320 → подробността на ден („Ср 21.10 · 132 € · Лидл 54, бензин 60, аптека 18“) се събира на един ред. */ html[data-skin="new"] #skinchart{display:none;flex:0 0 auto;margin-top:6px;align-self:flex-start; width:min(320px, calc((100vw - 28px) * .92));box-sizing:border-box;padding:6px 10px 6px;border-radius:12px; background:rgba(8,20,30,.74);border:1px solid rgba(53,228,255,.22);color:#dff3ff;font-size:12px;line-height:16px; pointer-events:auto;} html[data-skin="new"] body.lightui #skinchart{background:rgba(255,255,255,.88);border-color:rgba(21,70,96,.25);color:#14394f;} html[data-skin="new"] #skinchart.on{display:block;} html[data-skin="new"] #skinchart .chti{opacity:.72;font-size:11.5px;margin-bottom:3px;} /* 22.10.2026 (въпрос 4 от прегледа): в картата платното е 58 px (не 74) — с 74 капсулата застъпваше горните чертички на пръстена. Дневникът (.chln в index.html) остава 74 px: там пръстен няма. */ html[data-skin="new"] #skinchart canvas{display:block;width:100%;height:58px;cursor:pointer;color:inherit; -webkit-tap-highlight-color:transparent;} html[data-skin="new"] #skinchart .chdet{font-size:11.5px;margin-bottom:3px;overflow:hidden;} /* обичайната подробност е един ред (картата не расте); дълга (3 записа с дълги бележки) — до 2 реда, после „…“ */ html[data-skin="new"] #skinchart.det .chdet{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} html[data-skin="new"] #skinchart.det .chti{display:none;} html.gcur #skinchart{display:none!important;} /* Текстът е единственото, което превърта; името и бутоните не мърдат. */ /* ⚠ ЛЕНТАТА НА РОЛКАТА Е ВИДИМА — И ТОВА Е ПОПРАВКА НА МОЯ ДЕФЕКТ. Бях сложил `scrollbar-width:none` и `::-webkit-scrollbar{display:none}`, тоест ролка имаше, но нищо не я показваше. За човека отсреща това е неразличимо от мълчаливо рязане — той видя „само първата част“ и беше прав. Скрита ролка не е ролка. */ html[data-skin="new"] #skinsay .t{ flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch;overscroll-behavior:contain; pointer-events:auto;padding-right:10px; scrollbar-width:thin; scrollbar-color:rgba(53,228,255,.55) rgba(53,228,255,.10);} html[data-skin="new"] #skinsay .t::-webkit-scrollbar{ width:5px;-webkit-appearance:none;} html[data-skin="new"] #skinsay .t::-webkit-scrollbar-track{ background:rgba(53,228,255,.10);border-radius:3px;} html[data-skin="new"] #skinsay .t::-webkit-scrollbar-thumb{ background:rgba(53,228,255,.55);border-radius:3px;} /* ⚠ РОЛКА БЕЗ ЗНАК Е СЪЩОТО КАТО РЯЗАНЕ. Класът `more` се слага след МЕРЕНЕ (saris_skin.js), не по дължина на текста: същият низ заема различен брой редове при друга ширина. Знакът стои върху `#skinsay`, който НЕ е маскиран — сложен вътре в балончето, попада под собствената му маска и изчезва точно там, където трябва да се види (сгреших го веднъж така). */ /* ⚠ РЯЗАНЕТО ТРЯБВА ДА ЛИЧИ, НЕ ДА СЕ СТОПЯВА. Меката маска правеше края да изглежда като завършено изречение — тоест скриваше, че има още. Сега ръбът е ЯВЕН: тънка линия през целия долен ръб на текста. */ html[data-skin="new"] #skinsay.more .t{ border-bottom:1px solid rgba(53,228,255,.42);} html[data-skin="new"] #skinsay.more::after{ content:"↓ още";position:absolute;right:18px;bottom:-3px; font-family:ui-monospace,Consolas,monospace; font-size:9px;line-height:1;letter-spacing:.12em; color:var(--cyan);opacity:.9;pointer-events:none;} /* ══ ОПЦИИТЕ КЪМ РЕПЛИКАТА ═══════════════════════════════════════════════ Тези бутони НЕ правят нищо сами — натискат живия бутон в дневника (виж saris_skin.js). Затова тук има само вид, нула поведение. `pointer-events:auto` е задължително: родителят е `none`, за да пропуска допира към орба, а точно тези елементи трябва да го поемат. */ html[data-skin="new"] #skinsayacts{ display:none;flex:0 0 auto;gap:8px;flex-wrap:wrap;margin-top:8px; pointer-events:auto;} html[data-skin="new"] #skinsayacts.on{display:flex;} html[data-skin="new"] #skinsayacts button{ padding:7px 13px;border-radius:9px;font-size:13px;line-height:1.1; cursor:pointer;border:1px solid rgba(53,228,255,.34); background:rgba(8,20,30,.92);color:var(--fg,#dff3ff); font-family:inherit;-webkit-user-select:none;user-select:none;} html[data-skin="new"] #skinsayacts button:first-child{ border-color:#2a7f5a;background:#0c2416;color:#7fe9b8;} html[data-skin="new"] #skinsayacts button:active{transform:translateY(1px);} /* 4.2 (17.10.2026) „Докато те нямаше“: огледаното хапче „⟲ още N“ (data-from="awln", saris_skin.js acts) — тихо, като хапчето в дневника, не зелено като „първата опция“; при гост — никога (завесата може да дойде и след отговора). */ html[data-skin="new"] #skinsayacts button[data-from="awln"]{ border-color:rgba(223,243,255,.34);background:rgba(8,20,30,.72);color:var(--fg,#dff3ff);opacity:.86;border-radius:999px;} html.gcur #skinsayacts button[data-from="awln"]{display:none!important;} /* 4.6 (17.10.2026) „Уточнява с готови отговори“: огледаните бутони-отговори ([CHIPS] от #chipsRow) са РАВНИ избори — „Петров 15:00 | Зъболекар пт“ — затова нито един не е зелен като „първата опция“; хапчета в цвета на живите чипове. */ html[data-skin="new"] #skinsayacts button[data-from="chips"]{ border-radius:999px;border-color:#0a7f96;background:rgba(10,40,52,.92);color:#28e6ff;} html[data-skin="new"] #skinsay.on{display:flex;} /* Гасне плавно, не изчезва рязко. Виж saris_skin.js защо 20 s и защо реплика с опции НЕ стига дотук. */ html[data-skin="new"] #skinsay{transition:opacity .55s ease;} html[data-skin="new"] #skinsay.gone{opacity:0;pointer-events:none;} @media (prefers-reduced-motion:reduce){ html[data-skin="new"] #skinsay{transition:none;} } /* Няма място над орба → балончето мълчи, вместо да ляга върху него. */ html[data-skin="new"] #skinsay.noroom{display:none;} html[data-skin="new"] #skinsay .m{margin-bottom:0;} /* Появява се, както в прототипа: изплува отдолу, не изниква. */ html[data-skin="new"] #skinsay .t{ animation:skinsayin .42s cubic-bezier(.2,1.25,.35,1) both;} @keyframes skinsayin{ from{opacity:0;transform:translateY(14px) scale(.965);} to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){ html[data-skin="new"] #skinsay .t{animation:none;} } /* ⚠ ВЪЗДУХ ПОД ПЛАТНОТО, НЕ ВЪРХУ НЕГО. Състоянието и подсказката имат СВОЯ ивица под орба; без нея те лягат върху еквалайзера и се четат през него. Отстъпът е вътре в `#top`, тоест платното свършва по-нагоре — а не да се слагат отгоре с по-голям z-index. */ html[data-skin="new"] #top{padding-bottom:54px;} /* СЪСТОЯНИЕТО — ПОД ОРБА, БЕЗ ДА МЪРДА В DOM. ⚠ `.pill` НЕ СЕ МЕСТИ. `_pillSync()` го търси с `document.querySelector( "#topbar .pill")` и по думите на самия жив код е „единствената точка, през която минава видимостта на хапчето" и единственото място, което може да покаже „НЕ СТАНА". Извадя ли го от `#topbar`, функцията излиза на `if(!p)return` и този сигнал спира тихо. Затова остава дете на `#topbar`, а слиза само визуално: закача се за долния ръб на орба през променливата `--saris-state-top`, която кожата премерва и записва (виж saris_skin.js). Мерене, не отгатване. */ /* ⚠ РЕЗЕРВАТА Е ВИДИМА, НЕ СКРИТА. Първо написах `-999px` — тоест, ако меренето не тръгне, състоянието излиза извън екрана и просто го няма. Това е точно грешката, от която се пазим: тихо изчезнало нещо. Резервата е 44vh — не идеалното място, но НА ЕКРАНА и четимо. */ html[data-skin="new"] #topbar .rt{ position:fixed;left:0;right:0;top:var(--saris-state-top,44vh); justify-content:center;z-index:6;pointer-events:none; background:transparent;border:0;padding:0;} html[data-skin="new"] #topbar .rt .pill{pointer-events:auto;} /* ⚠ ЧАСЪТ НЕ СЕ СКРИВА. Написах `display:none` и щях да го оставя така — а часовникът горе Е ВХОДЪТ КЪМ СТАРИТЕ РАЗГОВОРИ („⏱ Часовникът горе — стари разговори" пише самата страница). Скрия ли го, историята остава без врата и никой няма да разбере, докато не му потрябва. Затова остава видим и кликаем тук, докато капсулата „сега" горе вляво не е готова да го поеме ЗАЕДНО с действието му. Дотогава стои до състоянието. */ html[data-skin="new"] #topbar .rt #clk{ font-size:12px;color:#a7bccd;padding-left:10px; border-left:1px solid rgba(53,228,255,.22);margin-left:2px;} /* ══ 2. КАПСУЛАТА ГОРЕ ════════════════════════════════════════════════════ Днес горе вдясно стоят ДВЕ неща: хапче със състоянието и, отделно, часът. В прототипа „сега" е ЕДНО изречение в ЕДНА капсула, а часът е едрото в него. Тук същото, но без нов елемент: капсулата става `.rt` (тя вече е обвивката на двете), часът минава пръв с `order` и получава разделител, а вътрешното хапче си сваля контура — иначе капсула в капсула. ⚠ Тъмната подложка на `#state` НЕ СЕ ПИПА. Тя не е стил, а измерена сметка: „в покой" е #ff3347 върху небе, което мени яркостта си през деня, и без нея пада на 2.7:1. Виж дългата бележка при `#state` в saris_server.py. */ /* ⚠ ТУК БЕШЕ КАПСУЛАТА „час │ състояние" И ТЯ ВЕЧЕ НЕ СЪЩЕСТВУВА. В слой 4 часът излезе от този ред (отива в капсулата „сега" горе вляво), а състоянието слезе под орба. Остане ли контурът на `.rt`, той се разпъва през целия екран под орба като празна лента — точно това се видя на първата снимка след промяната. Затова `.rt` вече е само носач: без фон, без контур, без отстъп. Оформлението е на `.pill` вътре, както е и в прототипа. */ html[data-skin="new"] #topbar .rt{gap:0;} html[data-skin="new"] #topbar .rt .pill{ background:rgba(4,8,14,.92);border:1px solid rgba(53,228,255,.30); border-radius:999px;padding:4px 12px;gap:6px;} /* ══ 2б. ЧЕТИРИТЕ ОТ ПРОТОТИПА [СЛОЙ 4] ══════════════════════════════════ Горната лента става на два реда, както е в прототипа: марка и хапчета горе, „сега" вляво и пулсът вдясно отдолу. `#topbar` вече е с пренасяне, тоест новите две капсули сами слизат на втори ред. */ html[data-skin="new"] #topbar{padding:10px 14px 2px;row-gap:6px;} /* Лимитите вече седят на реда на мозъка (преместени в saris_skin.js). Тук само се свиват, за да се поберат четиримата на един ред: собствените им отстъпи бяха мислени за самостоятелна лента през целия екран. */ html[data-skin="new"] #usebar{margin:0;padding:0;gap:5px;flex:0 1 auto; min-width:0;overflow:hidden;} html[data-skin="new"] #usebar>span{padding:2px 7px!important;} /* ══ 2в. ЛИМИТИТЕ И МОЗЪКЪТ СЕ СГЪВАТ В ГОРНАТА ЛЕНТА [СЛОЙ 5] ═══════════ Мерено, не преценено (_skin_rows_why.py): над орба живото има 9 реда срещу 7 в прототипа, и разликата са точно тези двата — `#usebar` на y=84 и `#brainb` на y=109. Горната част (марка, час, част от деня, пулс) е вече еднаква: 0–77 тук срещу 0–82 там. В прототипа потреблението е ЕДИН жетон в горната лента („CLAUDE · 39%"), а значката на мозъка изобщо я няма на този екран. Затова тук: и двете влизат в лентата, но НЕ в потока ѝ. ⚠ АБСОЛЮТНО, НЕ КАТО FLEX ЕЛЕМЕНТ. `#topbar` е с пренасяне — сложа ли ги в потока, при по-дълъг текст те сами си правят ТРЕТИ ред и връщам точно проблема, който махам, само че по-късно и по-трудно за забелязване. Абсолютното разположение прави „сгънато" проверимо: лентата остава 79 px каквото и да се напълни вътре. ⚠ НИЩО НЕ СЕ ИЗКЛЮЧВА. Местят се САМИТЕ елементи, не копия — `renderUsage()` и `renderBrainBadge()` ги пълнят по id и не знаят кой им е родителят, а `#brainb` си носи обработчика, тоест натиска се както преди. Скриване с `display:none` би било по-кратко и щеше да отреже врата към избора на мозък. */ html[data-skin="new"] #topbar{position:relative;} /* ⚠ АБСОЛЮТНОТО РАЗПОЛОЖЕНИЕ БЕШЕ ГРЕШКАТА, НЕ ЧИСЛОТО В НЕГО. Първо сложих `#skinmeta` с `position:absolute` горе вдясно. На снимката от телефона върху една и съща ивица се оказаха часът, времето, двата лимита и значката — обрязани скоби и срязани думи. Измерено след това (_skin_topbar_map.py): **32 застъпвания**, от които главното е `#skinmeta` 211×37 точно върху `#skinnow` 200×30. Поуката е обща и я пиша, за да не се повтори: абсолютният елемент ПО ПОСТРОЕНИЕ не знае какво друго стои в ивицата. Той не се подрежда — той се надрежда. Затова тук всичко е В ПОТОКА и подредбата е на flex, както е и в прототипа: два реда, всеки с ляво и дясно, нищо върху нищо. Разделителят `#skinbreak` е ИСТИНСКИ елемент, а не `::after`: виден е в инспектора и се търси с grep, тоест следващият човек ще разбере откъде идва пренасянето. */ html[data-skin="new"] #topbar{ display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;} /* ══ ПОСОКА Б · стъпки 1–2: ЛЕНТАТА СТАВА ДВОЙКА, НЕ РЕДИЦА ═══════════ Дотук горе стояха девет неща: марка, версия, час, част от деня, време, разговори, живо, обзор, жетон, пулс, надпис, луна — и центърът (орбът) излизаше СЕДМИ по ред на четене. Сега са четири, в две колони: ред 1: SARIS ................ ◉живо ◎обзор ред 2: CLAUDE · 43% ......... ♥ 73 Марката и жетонът са ДВОЙКА, един под друг, с еднаква тежест — както той поиска. Часът и времето слизат под орба (виж по-долу), защото в посока Б часът е резка по пръстена, а не капсула. */ html[data-skin="new"] #brand{order:0;} html[data-skin="new"] #skinlive{order:1;margin-left:auto;} html[data-skin="new"] #skinbreak{order:2;width:100%;height:0;margin:0;} html[data-skin="new"] #skinmeta{order:3;} html[data-skin="new"] #skinpulse{order:4;margin-left:auto;} /* ══ СИМЕТРИЯ НА ЛЕНТАТА (07.09.2026) ═══════════════════════════════════ Марката стоеше ~16px под падинга: капсулите „живо/обзор" и „пулс" носеха margin-top от старата ЕДНОРЕДОВА лента, а center-подравняването дърпаше късата марка надолу спрямо високия им ред. Тук нулираме тези отстъпи и даваме ЕДИН чист row-gap → двата реда стават симетрични (марка↔жетон вляво, живо/обзор↔пулс вдясно; ляво и дясно вече са на 14px). margin-left:auto по десните двойки се пази — пипа се само вертикалата. */ html[data-skin="new"] #topbar{padding-top:6px;row-gap:0;} html[data-skin="new"] #topbar #brand{align-self:center;margin-left:10px;} /* ══ ПРЕНАРЕДЕНА ЛЕНТА (07.09.2026) ═══════════════════════════════════════ Мозъкът (жетонът CLAUDE·NN%) отива ГОРЕ ВДЯСНО (ред 1, до марката); живо и обзор слизат при „разговори" на ред 2 — със същото оформление (размер, отстъп, контур като разговори). Празната обвивка #skinlive се маха. */ html[data-skin="new"] #topbar #skinuse{order:1;margin-left:auto;} /* Детският бадж (Тути/Теди) — ЗАЛЕПЕН НАЙ-ВДЯСНО, точно преди звука. На широк екран стоеше центриран „в нищото", защото за разлика от скрития #skinuse нямаше margin-left:auto → сега го групираме с mute (order:1) и абсорбираме лявото свободно място. (23.09.2026) */ html[data-skin="new"] #topbar #kidbadge{order:1;margin-left:auto;} html[data-skin="new"] #skinlive:empty{display:none;} html[data-skin="new"] #skinmeta #livego, html[data-skin="new"] #skinmeta #skinsweep{ font-size:10px !important;letter-spacing:.12em !important; padding:3px 8px !important;line-height:1;border-radius:999px; font-family:ui-monospace,Consolas,monospace;} /* ⚠ ЧАСЪТ НЕ СЕ МАХА, А СЛИЗА. В посока Б мястото му е при пръстена, но пръстенът идва в стъпка 3 — махна ли капсулата сега, той остава без час до тогава. Затова тук се ПРЕМЕСТВА под орба като един тих ред. */ html[data-skin="new"] #skinnow{ order:9;position:fixed;left:0;right:0; top:var(--saris-state-top,52vh); justify-content:center;margin:0;padding:0; background:none;border:0;pointer-events:none;} html[data-skin="new"] #skinnow #clk{ font-size:13px;font-weight:400;letter-spacing:.14em;opacity:.8;} html[data-skin="new"] #skinnow #skindaypart{font-size:9px;opacity:.7;} html[data-skin="new"] #skinnow #skinwx{font-size:10px;opacity:.75;} /* „сърцето на Ива“ отпада — в Б пулсът е точка по пръстена и надписът става излишен. Числото ОСТАВА, за да не се губи стойността. */ html[data-skin="new"] #skinpulse em{display:none;} html[data-skin="new"] #skinpulse b{font-size:15px;} /* ⚠ „РАЗГОВОРИ“ ОСТАВА. Първо го скрих с довода „жестът по орба и докът са достатъчни“ — но жестът никъде не е обявен, а точно необявеният жест вече веднъж се оказа липсваща функция. Освен това правилото и не работеше: по-късната дефиниция на `#skinhistb` го биеше, тоест капсулата се виждаше, а CSS-ът твърдеше обратното. Мерено: с нея лентата е 209 px в 215 налични — един ред, топбар 70 px. Има място, значи няма причина да се маха. */ /* „живо“ и „обзор“: малки, с иконка, горе вдясно — двойка срещу двойката вляво. Иконките са в JS (един знак пред думата), за да не са картинки. */ html[data-skin="new"] #skinlive{ flex:0 0 auto;display:flex;align-items:center;gap:6px;} html[data-skin="new"] #skinmeta #livego, html[data-skin="new"] #skinmeta #skinsweep{ font-size:9px;letter-spacing:.1em;padding:2px 7px;} /* ⚠⚠ РЕДЪТ НИКОГА НЕ РЕЖЕ СЪДЪРЖАНИЕ — ПРЕНАСЯ ГО. ТУК ПИСАШЕ „нищо не се крие — ивицата се плъзга“ и това беше отстъпка, маскирана като решение. Плъзгане, което никъде не е обявено, НЕ Е достъп: на екрана се вижда отрязана капсула, а не подсказка, че има още. Точно това се случи два пъти — веднъж с лимитите („…ца 41%“), после с жетона, от който остана само мозъчето 🧠 на десния ръб. Мерено при 390 px: четирите капсули са 381 px в разполагаеми 257. Затова редът вече е ПРЕНАСЯЩ СЕ (`flex-wrap:wrap`), а не плъзгащ: · нищо не излиза извън платното, при никоя ширина; · правилото важи и за капсули, които още не съществуват — добави ли се пета, тя пада на нов ред, вместо да избута някого навън; · цената е височина, и тя е измерена, не предположена (виж доклада). ⚠ НЕ ВРЪЩАЙ `overflow-x:auto` и `flex-wrap:nowrap` тук. Изглеждат по-спретнато на широк екран и режат на тесен — тоест чупят се точно там, където има най-малко място за грешка. */ html[data-skin="new"] #skinmeta{ display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:5px; min-width:0;max-width:none;flex:0 1 auto; overflow:visible;} /* ⚠ ЗАПАЗЕНАТА ЗОНА НА ЛУНАТА — виж saris_skin.js защо е граница, а не число. `#atMoon` е собствен слой само за луната, тоест преместването не пипа звездите и ореола. `transform-origin` е горе-вдясно, за да се смалява към своя ъгъл, а не към центъра на екрана. */ html[data-skin="new"] #atMoon{ transform:translateY(var(--saris-moon-push,0px)) scale(var(--saris-moon-scale,1)); transform-origin:88% 14%; transition:transform .6s ease;} /* ⚠ ЛЕНТАТА НЕ ЗАГРАБВА ШИРИНАТА НА ПУЛСА. С `flex:1 1 auto` тя порасна до целия ред и стисна `#skinpulse` — надписът „сърцето на Ива“ се разчупи на два реда ОКОЛО луната и точно тя се оказа върху числото. Тоест поправката на едно място роди дефекта, който бяхме измерили на друго. `0 1 auto`: расте само до съдържанието си, свива се при нужда, пренася се. */ html[data-skin="new"] #skinpulse{flex:0 0 auto;white-space:nowrap;} html[data-skin="new"] #skinpulse em, html[data-skin="new"] #skinpulse b{white-space:nowrap;} html[data-skin="new"] #skinmeta>*{flex:0 0 auto;max-width:100%;} /* ══ ЖЕТОНЪТ ЗА ПОТРЕБЛЕНИЕТО + ЛИСТЪТ ПОД НЕГО ═══════════════════════════ Плъзгащата се лента беше отстъпка, а не решение: `#usebar` е 316 px в кутия 257 px, тоест седмичният прозорец стоеше ФИЗИЧЕСКИ ОТРЯЗАН и се четеше „…ца 41%". Жест, който никъде не е обявен, не е достъп — същият дефект като необявеното плъзгане по орба за разговорите. Прототипът има ЕДИН жетон и лист под него; тук е същото. ⚠ `#usebar` НЕ Е `display:none` — той е ЖИВИЯТ ИЗТОЧНИК на числата и живият код го пипа по име. Държи се смален до нула в листа, а при паднало разчитане (`.raw`) се показва суров. Скрит елемент, който още се пълни, е по-евтин от копие, което ще излъже. */ html[data-skin="new"] #skinuse{ flex:0 0 auto;display:inline-flex;align-items:center;gap:4px; font-family:ui-monospace,Consolas,monospace; font-size:10px;letter-spacing:.12em;text-transform:uppercase; line-height:1;padding:3px 8px;cursor:pointer; white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis; border:1px solid rgba(53,228,255,.30);border-radius:999px; -webkit-user-select:none;user-select:none;} html[data-skin="new"] #skinuse:active{color:var(--cyan);} /* Знакът на мозъка в жетона (22.10.2026): вградена SVG — същата мрежа като „Мозък“ в дока, currentColor → в цвета на надписа. Надписът е в `.skinusetxt`, затова многоточието е на него (на flex-родителя не важи за детето). */ html[data-skin="new"] #skinuse svg.brainic{flex:0 0 auto;display:block;width:12px;height:12px;margin-right:1px;} html[data-skin="new"] #skinuse .skinusetxt{min-width:0;overflow:hidden;text-overflow:ellipsis;} /* Старо (последно измерено) или липсващо число — кехлибарен контур; обяснението е в листа под жетона. */ html[data-skin="new"] #skinuse[data-stale="1"]{border-color:rgba(255,207,135,.6);} /* ⚠ „НА ЖИВО“ и „ОБЗОР“ — В ЛЕНТАТА, СЪС СЪЩИЯ ШРИФТ. В прототипа ги няма изобщо (търсени и в лентата, и в дока), тоест типографията им се изравнява с останалите капсули от втория ред, а не с нещо негово. Същият моноширинен шрифт, същият 10 px, същата разредка — иначе пак „лепени по различно време“. */ html[data-skin="new"] #skinlive{ flex:0 0 auto;display:flex;align-items:center;gap:6px; margin:0;padding:0;width:auto;text-align:left;} html[data-skin="new"] #skinmeta #livego, html[data-skin="new"] #skinmeta #skinsweep{ font-family:ui-monospace,Consolas,monospace; font-size:10px;letter-spacing:.12em;line-height:1; padding:3px 8px;margin:0;flex:0 0 auto;white-space:nowrap;} /* ⚠ НАДПИСЪТ Е В ДЪЩЕРЕН ЕЛЕМЕНТ. `#livego` е обвивката; текстът седи в `#livegotxt` със собствени 9 px и разредка 0.2 px, тоест правилото върху родителя не го докосва и капсулата остава с друг размер от съседките си. Мерено — точно това се случи на първия опит. */ html[data-skin="new"] #skinmeta #livego #livegotxt{ font-family:ui-monospace,Consolas,monospace; font-size:10px;letter-spacing:.12em;font-weight:600;} html[data-skin="new"] #skinusepop{ display:none;position:fixed;z-index:60; left:10px;right:10px;top:calc(var(--saris-say-band,46px) + 46px); max-height:62vh;overflow-y:auto; padding:12px 14px 14px;border-radius:16px; background:rgba(6,14,22,.96);border:1px solid rgba(53,228,255,.28); box-shadow:0 18px 46px rgba(0,0,0,.6);} html[data-skin="new"].skinuse #skinusepop{display:block;} html[data-skin="new"] #skinusehd{ display:flex;align-items:center;justify-content:space-between; font-size:10px;letter-spacing:.16em;color:var(--muted);margin-bottom:10px;} html[data-skin="new"] #skinusex{ font-style:normal;cursor:pointer;padding:2px 6px;color:var(--muted);} html[data-skin="new"] #skinusex:active{color:var(--cyan);} html[data-skin="new"] .skinusesec{ font-size:10px;letter-spacing:.16em;color:var(--muted); margin:14px 0 8px;padding-top:10px; border-top:1px solid rgba(53,228,255,.14);} /* Един прозорец = един ред: име, колко е изядено, кога се нулира. Числото е едрото, обяснението — дребното. */ html[data-skin="new"] .skinuserow{margin:0 0 10px;line-height:1.35;} html[data-skin="new"] .skinuserow b{ display:block;font-size:11px;font-weight:600;color:var(--fg,#dff3ff);} html[data-skin="new"] .skinuserow u{ display:block;text-decoration:none;font-size:15px;color:var(--cyan);} html[data-skin="new"] .skinuserow em{ display:block;font-style:normal;font-size:10px;color:var(--muted);} /* Суровата лента: невидима, но жива. Показва се само ако разчитането падне. */ html[data-skin="new"] #skinusepop #usebar{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);pointer-events:none;} html[data-skin="new"] #skinusepop #usebar.raw{ position:static;width:auto;height:auto;overflow:visible;clip-path:none; display:flex;flex-wrap:wrap;gap:6px;font-size:10px;pointer-events:auto;} /* Значката на мозъка стои цяла в листа — там има ширина и не се реже. */ html[data-skin="new"] #skinusebrain #brainb{ margin:0;font-size:11px;padding:5px 10px;max-width:none;white-space:normal;} /* ══ ВРАТАТА КЪМ РАЗГОВОРИТЕ [СЛОЙ 5] ════════════════════════════════════ ⚠ ПРОВЕРИХ ЗА ЖИВ БУТОН И ТАКЪВ НЯМА — казвам го, вместо да се направя, че съм „извела съществуващия". В стария изглед дневникът просто СТОЕШЕ на екрана, тоест вратата беше самият екран. В кожата той излезе настрани и единственият вход остана жест (плъзгане надолу по орба), който никъде не е обявен. Невидим жест = липсваща функция; той го каза точно така. Затова тук има видимо копче, но то НЕ прави своя история: вика `SARIS_SKIN_HIST.open()` — същия панел, същия `#log`. */ /* ⚠ ТИПОГРАФИЯТА НА ДВЕТЕ КАПСУЛИ Е ПО ПРОТОТИПА, НЕ ПО МОЯ ВКУС. Мерено (`_t_top_type.py`), прототипният жетон `#braint`: ui-monospace · 10px · 400 · разредка 1.2px (=.12em) а тукашните две капсули бяха `-apple-system · 9px · без разредка` — тоест ДРУГ шрифт до часовника и марката, които са моноширинни. Точно това се чете като „лепени по различно време“: в една ивица стоят два шрифта. */ html[data-skin="new"] #skinhistb{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; gap:4px;font-family:ui-monospace,Consolas,monospace; font-size:10px;letter-spacing:.12em; line-height:1;padding:3px 8px;cursor:pointer; color:#a7bccd;background:rgba(4,8,14,.92); border:1px solid rgba(53,228,255,.30);border-radius:999px; -webkit-user-select:none;user-select:none;} html[data-skin="new"] #skinhistb:active{color:var(--cyan);} /* — капсулата „сега": часът е едрото, останалото се чете около него — */ /* ⚠ ЕДИН РЕД ЗА ДВЕТЕ, НЕ ПО ЕДИН ЗА ВСЯКО. Първо дадох на капсулата `max-width:74vw` и тя изяде целия ред — пулсът слезе САМ на трети ред, вляво, вместо да е горе вдясно както в прототипа. Затова капсулата вече отстъпва (`flex:1 1 auto` + `min-width:0`, тоест текстът ѝ се реже с многоточие, ако трябва), а пулсът стои неотстъпчив вдясно. */ html[data-skin="new"] #skinnow{ display:inline-flex;align-items:center;gap:8px; background:rgba(53,228,255,.07);border:1px solid rgba(53,228,255,.22); border-radius:999px;padding:5px 13px; flex:1 1 auto;min-width:0;max-width:none;} html[data-skin="new"] #skinnow #clk{ font-family:ui-monospace,Consolas,monospace;font-size:15px;font-weight:600; color:var(--ink);letter-spacing:.04em;font-variant-numeric:tabular-nums; background:none;padding:0;border:0;} /* Разредката е по прототипа: мерено `#daypart` 1.62 px при 9 px = .18em (тук беше .16em → 1.44 px). Дребно, но точно от такива дребни разлики се получава усещането „лепени по различно време". */ html[data-skin="new"] #skindaypart{ font-family:ui-monospace,Consolas,monospace;font-size:9px;letter-spacing:.18em; color:#a7bccd;opacity:.85;} html[data-skin="new"] #skinnow .skinsep{ width:1px;height:13px;background:rgba(53,228,255,.28);flex:0 0 auto;} html[data-skin="new"] #skinnow .skinwxdot{ width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:0 0 auto; box-shadow:0 0 8px var(--cyan);} /* Прототип `#wxt`: 0.88 px при 11 px = .08em (тук беше .06em → 0.66 px). */ html[data-skin="new"] #skinwx{ font-family:ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.08em; color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html[data-skin="new"] body.lightui #skinnow{ background:rgba(255,255,255,.80);border-color:rgba(21,70,96,.28);} html[data-skin="new"] body.lightui #skinnow #clk{color:#233a4d;} html[data-skin="new"] body.lightui #skindaypart{color:#4a5f74;} html[data-skin="new"] body.lightui #skinwx{color:#14506b;} /* — пулсът: числото е едрото, отдолу чие е сърцето — */ /* ⚠ ГОРНИЯТ ОТСТЪП Е ПО ПРОТОТИПА, ИЗМЕРЕН. Луната е мастило върху `#atMoonCv` и стои на 105–139 px и в двете страници. Просветът до „сърцето на Ива“ беше 30 px в прототипа и само 22 px тук, защото двуредовата лента бута пулса 8 px по-надолу. −8 px връща паритета. */ html[data-skin="new"] #skinpulse{ text-align:right;cursor:pointer;flex:0 0 auto;margin-left:auto;padding-left:10px; margin-top:-8px;} html[data-skin="new"] #skinpulse b{ display:block;font-size:17px;font-weight:600;line-height:1.1;color:#ff7a88; font-variant-numeric:tabular-nums;} html[data-skin="new"] #skinpulse i{ font-style:normal;display:inline-block;color:#ff5563; transition:transform .13s cubic-bezier(.2,1.7,.4,1);} html[data-skin="new"] #skinpulse i.hit{transform:scale(1.34);} html[data-skin="new"] #skinpulse em{ display:block;font-family:ui-monospace,Consolas,monospace;font-size:8.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--muted); margin-top:2px;font-style:normal;} html[data-skin="new"] body.lightui #skinpulse b{color:#a3132a;} html[data-skin="new"] body.lightui #skinpulse em{color:#4a5f74;} /* — ехото: неговата последна реплика, свита в един ред над дневника — */ /* ⚠ ЕХОТО ВЪРВИ С БАЛОНЧЕТО, НЕ СЪС СЪСТОЯНИЕТО. Беше закачено за `--saris-state-top`, тоест слезе под орба заедно с него — измерено: прототип 0.14 от височината, моето 0.72. В прототипа двете са ЕДНО място: неговата реплика най-горе в ивицата, нейната — залепена за долния ѝ ръб. */ html[data-skin="new"] #skinecho{ position:fixed;right:12px;z-index:11;max-width:74vw; top:var(--saris-say-top,14vh); display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.3; color:#9fd8ef;background:rgba(7,20,28,.82); border:1px solid rgba(53,228,255,.26);border-radius:12px; border-bottom-right-radius:4px;padding:4px 10px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity:0;transform:translateY(6px);pointer-events:none; transition:opacity .34s cubic-bezier(.2,.8,.3,1),transform .46s;} html[data-skin="new"] #skinecho.on{opacity:.9;transform:none;} /* Неговата реплика също гасне — виж saris_skin.js. `gone` бие `on`, затова стои след него. */ html[data-skin="new"] #skinecho.gone{opacity:0;pointer-events:none;} /* Ехото трябва да ПОЕМА допира, за да го хване жестът — иначе плъзгането минава през него към орба и нищо не става. */ html[data-skin="new"] #skinecho{pointer-events:auto;} /* Дългата реплика се РЯЗАШЕ твърдо (без многоточие): в flex-контейнер text-overflow иска да е на СВИВАЩИЯ СЕ елемент (span), а той по подразбиране е min-width:auto и не се свива → преливаше и се клипваше рязко. Ellipsis-ът е на span-а + min-width:0. (23.09.2026) */ html[data-skin="new"] #skinecho span{ min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Намекът след плъзгане на въпрос с бутони: казва КЪДЕ е останал. Един ред, изчезва сам за 4 s, не иска действие. */ html[data-skin="new"] #skinkept{ position:fixed;left:24px;right:24px;bottom:96px;z-index:12; text-align:center;font-family:ui-monospace,Consolas,monospace; font-size:10px;letter-spacing:.1em;color:var(--cyan); background:rgba(6,14,22,.92);border:1px solid rgba(53,228,255,.24); border-radius:10px;padding:7px 10px; opacity:0;pointer-events:none;transition:opacity .3s;} html[data-skin="new"] #skinkept.on{opacity:.95;} html[data-skin="new"] #skinecho b{ font-family:ui-monospace,Consolas,monospace;font-size:8px;letter-spacing:.14em; color:var(--cyan);opacity:.8;flex:0 0 auto;} html[data-skin="new"] body.lightui #skinecho{ background:rgba(255,255,255,.80);border-color:rgba(21,70,96,.26);color:#1d5e7d;} /* — подсказката: под състоянието, мълчи докато тя говори — */ html[data-skin="new"] #skinhint{ position:fixed;left:0;right:0;z-index:5;text-align:center; top:calc(var(--saris-state-top,44vh) + 26px); font-family:ui-monospace,Consolas,monospace;font-size:9.5px;letter-spacing:.1em; color:var(--muted);pointer-events:none;transition:opacity .3s;} html[data-skin="new"] #skinhint.mute{opacity:0;} /* ══ 3. ФОРМАТА НА БАЛОНЧЕТО ══════════════════════════════════════════════ Формата вече е неговата (радиус 15, подвит ъгъл 5 от страната на говорещия) и НЕ се сменя. Липсва ѝ само дълбочината: в прототипа балончето е ОТКЪСНАТО от фона със сянка и има малко повече въздух вътре, за да не изглежда като ред от списък. Двете числа са от прототипа (alive.html, #say .t). Сянката е ЧЕРНА и с голямо разсейване — на тъмно тя се чете като повдигане, не като контур. В светла тема същата сянка става мръсно петно, затова там е с друга стойност (виж дял 6), а не изключена: и на светло балончето трябва да стои над фона, само че с по-мека сянка. */ html[data-skin="new"] .m .t{ padding:10px 14px;font-size:15px;line-height:1.45; box-shadow:0 8px 30px rgba(0,0,0,.45);} /* ══ 4. ЛЕНТАТА ЗА ПИСАНЕ — КАПСУЛА, НЕ ДЪНО ══════════════════════════════ Днес `#bar` е лента през целия екран с чертичка отгоре, тоест изглежда като ръба на страницата. В прототипа е капсула, която ПЛУВА над дъното — същите поле, същите четири бутона, същите обработчици, само кутията е друга. Безопасната зона на телефона слиза от вътрешния отстъп във външния, за да не се залепва капсулата за долния ръб. */ html[data-skin="new"] #bar{ margin:0 12px calc(9px + env(safe-area-inset-bottom)); padding:6px 7px;gap:7px;border-radius:999px; background:rgba(6,10,18,.72); border:1px solid rgba(53,228,255,.16);} html[data-skin="new"] #inp{padding:10px 15px;font-size:16px;} /* ⚠ 320 ПИКСЕЛА. Капсулата взима място отстрани, а бутоните са четири и не се свиват — при най-тесния телефон подсказката в полето падна от „Питай SARIS…" на „Питай SAR". Полето работеше, но текстът се режеше, а точно рязането е нещото, което този проект вече веднъж е ловил (виж #usebar в saris_server.py). Затова на тясно капсулата се прибира: измерено — полето получава 134 px, тоест ПОВЕЧЕ от 128-те, които имаше при старата лента през целия екран. */ @media (max-width:360px){ html[data-skin="new"] #bar{margin-left:6px;margin-right:6px;padding:5px 5px;gap:5px;} html[data-skin="new"] #inp{padding:10px 12px;} } /* ══ 5. ДОКЪТ ═════════════════════════════════════════════════════════════ В прототипа лентата с иконите стои НАД полето за писане: пишеш най-долу, а таблата са на един ред над пръста. Тук същото, БЕЗ да се пипа разметката — `order` разменя двамата, защото и двата са преки деца на `#app`. ⚠ ТОВА Е РАЗМЯНА НА МЕСТА, НЕ НА ВИДИМОСТ. Никъде долу няма `display`. Иконите остават точно тези, които живият код е отпушил за профила. Отдолу докът вече не е последният елемент, значи безопасната зона на телефона му е излишна — тя се пое от капсулата в дял 4. Остави ли се и на двете места, на телефон с ръб долу се появява празна ивица от 34 пиксела. */ html[data-skin="new"] #app>#dock{order:1;} html[data-skin="new"] #app>#bar{order:2;} html[data-skin="new"] #dock{padding:5px 8px 3px;} /* ══ 5б. ОБХОЖДАНЕТО НА ТАБЛАТА [СЛОЙ 3] ═════════════════════════════════ Докато обзорът говори, таблото, за което говори, СВЕТВА в дока, а изминатите остават леко подчертани. Пътят се чете: къде сме, къде сме били, колко още. ⚠ ТУК НЯМА `display` И НЯМА ДА ИМА. Свети се само онова, което живият код е отпушил за профила — а кое е това, решава той, не кожата. Класът се слага от saris_skin.js и само върху икона, която ВЕЧЕ се вижда. Анимира се цвят, контур и сияние — не разположение, тоест дока не подскача и съседните икони не се местят, докато светлината минава по тях. */ html[data-skin="new"] #dock .ic.sweepwalk{ color:var(--cyan); background:rgba(53,228,255,.14); box-shadow:0 0 0 1px rgba(53,228,255,.55),0 0 22px rgba(53,228,255,.30);} html[data-skin="new"] #dock .ic.sweepwalk svg{ filter:drop-shadow(0 0 7px rgba(53,228,255,.85));} html[data-skin="new"] #dock .ic.sweepseen{ color:#8fd0e2;background:rgba(53,228,255,.05);} html[data-skin="new"] #dock .ic{transition:background .28s,box-shadow .28s,color .2s;} /* 1.3 „ПОКАЖИ МИ“ (22.10.2026): иконата, до която стигна лъчът от орба — свети по-силно от обзора и пулсира три пъти; остава светнала до тапа (или 9 s). Само цвят, контур и сияние — докът не подскача. Класът го слага saris_skin.js (W.SARIS_SHOW) и само върху икона, която ВЕЧЕ се вижда. */ html[data-skin="new"] #dock .ic.showme{ color:var(--cyan);background:rgba(53,228,255,.18); box-shadow:0 0 0 1.5px rgba(53,228,255,.9),0 0 26px rgba(53,228,255,.45); animation:showmePulse 1.1s ease-in-out 3;} html[data-skin="new"] #dock .ic.showme svg{filter:drop-shadow(0 0 8px rgba(53,228,255,.95));} @keyframes showmePulse{ 0%,100%{box-shadow:0 0 0 1.5px rgba(53,228,255,.9),0 0 26px rgba(53,228,255,.45);} 50%{box-shadow:0 0 0 5px rgba(53,228,255,.28),0 0 38px rgba(53,228,255,.7);}} @media (prefers-reduced-motion:reduce){html[data-skin="new"] #dock .ic.showme{animation:none;}} /* Хапчето, с което той пуска обзора. Живее в реда на „НА ЖИВО" и говори на неговия език — същият размер, същият шрифт, същият контур. */ html[data-skin="new"] #skinsweep{ display:inline-flex;align-items:center;gap:5px;cursor:pointer; font:600 9px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.2px; color:#7fd4e8;background:rgba(40,230,255,.07); border:1px solid rgba(40,230,255,.32);border-radius:999px;padding:3px 10px; white-space:nowrap;transition:background .25s,border-color .25s,color .25s;} html[data-skin="new"] #skinsweep.on{ color:#eaffff;background:rgba(40,230,255,.22);border-color:#28e6ff;} html[data-skin="new"] body.lightui #skinsweep{ background:rgba(8,14,24,.78);border-color:rgba(53,228,255,.5);color:#bfe9f5;} @media (prefers-reduced-motion:reduce){ html[data-skin="new"] #dock .ic{transition:none;} } /* ══ 6. СВЕТЛА ТЕМА ═══════════════════════════════════════════════════════ Светлият режим не е втора тема, а четимост на слънце — числата в него са мерени, не подбрани. Затова тук се сменят САМО кутиите, които аз въведох (капсулата горе, капсулата долу, сянката на балончето). Нито един цвят на текст не се пипа: те си остават каквито живият код ги е измерил. */ /* ⚠ ТУК ВЕДНЪЖ ИЗГУБИХ ЧАСА. Мое правило по-горе дава на `#clk` цвят `--ink` (почти бяло) и то бие живото `body.lightui #clk{color:#233a4d}` по тежест — два id-та срещу един. На светло часът стана бял върху бяло и просто го нямаше. Хванато на снимка от ДЕТСКИЯ профил, който е на светла тема. Затова: на светло капсулата е само контур, а часът си остава точно както живият код го е измерил — със собствената си светла подложка и тъмно мастило. Разделителят отпада — той би минал през тази подложка. */ html[data-skin="new"] body.lightui #topbar .rt{ background:transparent;border-color:rgba(21,70,96,.22);} html[data-skin="new"] body.lightui #topbar #clk{ color:#233a4d;border-right:0;padding-right:0;} html[data-skin="new"] body.lightui #bar{ background:rgba(246,249,252,.86);border-color:rgba(21,70,96,.22);} html[data-skin="new"] body.lightui .m .t{box-shadow:0 6px 18px rgba(21,70,96,.14);} /* ══ 7. ЛЕГНАЛ ТЕЛЕФОН ════════════════════════════════════════════════════ На 390 пиксела височина просто няма място за всичко. Прототипът дава реда на отпадане и той е същият тук: първо си отива ВЪЗДУХЪТ, после дневникът се свива, а долната мебел ОСТАВА — тя е достъпът. ИЗМЕРЕНО НА ЖИВО, не пресметнато наум (_t_skin_fit.py + _skin_probe.py): при легнал екран 844×390 и ПУСНАТ „разговор на живо" сборът на неотстъпчивите редове беше 408 px при 390 налични. Оттам излизаха 13 px под ръба — тоест долният ред бутони. Затова тук има ДВЕ различни неща, и второто е важното: · дребните полета отпадат (те са въздух, не съдържание); · `#top` СПИРА ДА БЪДЕ НЕОТСТЪПЧИВ — `flex:0 1 auto` с под от 96 px. Второто е разликата между „намерих 13 пиксела" и „повече няма да излиза": появи ли се утре още един ред горе, отстъпва орбът, а не дока. Орбът НЕ СЕ СМАЛЯВА, докато има място — при 390 px височина той си остава на пълните 160 и остават 3 px незаети. Свива се само когато алтернативата е да изчезне достъпът. */ @media (orientation:landscape) and (max-height:560px){ html[data-skin="new"] #top{margin:0 0 2px;flex:0 1 auto;min-height:96px;} html[data-skin="new"] #log{padding:0 12px;} html[data-skin="new"] #livebar{margin:0 auto 3px;} html[data-skin="new"] #bar{margin-bottom:calc(4px + env(safe-area-inset-bottom));} html[data-skin="new"] #dock{padding:2px 8px 2px;} } /* ══ ПОСОКА Б · стъпки 1–2: ПОСЛЕДНА ДУМА ═════════════════════════════════ ⚠ ТЕЗИ ЧЕТИРИ ПРАВИЛА СА В КРАЯ НАРОЧНО. Написах ги първо горе, при подредбата, и НЕ СЕ ПРИЛОЖИХА: по-късните дефиниции на същите елементи ги биеха при равна специфичност. Мерено — „сърцето на Ива" още се виждаше, а CSS-ът твърдеше, че е скрито. Редът в листа е част от правилото, не подробност. */ /* 1. Надписът под пулса отпада — в Б пулсът става точка по пръстена. Числото ОСТАВА: стойността не бива да се губи заедно с надписа. */ html[data-skin="new"] #skinpulse em{display:none!important;} html[data-skin="new"] #skinpulse{padding-left:0;} /* 2. БЕЗ ИКОНКИ ПРЕД ПРЕВКЛЮЧВАТЕЛИТЕ (махнати 05.09.2026). Стояха два геометрични знака — плътно кръгче и празно кръгче. Две беди: (а) същият знак се слагаше И от JS-а в текста, тоест „НА ЖИВО" излизаше с ДВЕ иконки; (б) знаците не приличат нито на SVG линиите на дока, нито на емоджитата на лентата — трети език, който не значи нищо. Правило оттук нататък: или се взима иконата от ЕДИН от двата съществуващи езика, или няма икона. Не се измисля трети. */ /* 3. Часът и състоянието НЕ СЕ ЗАСТЪПВАТ. И двете висяха на `--saris-state-top`: мерено, часът беше на y=631, състоянието на 636 — един върху друг. Състоянието остава на котвата (то е единственото, което може да каже „НЕ СТАНА"), а часът слиза под него. */ html[data-skin="new"] #skinnow{ top:calc(var(--saris-state-top,52vh) + 30px)!important;} /* 4. Часът е тих ред, не капсула — до идването на пръстена в стъпка 3. */ html[data-skin="new"] #skinnow{gap:7px;} /* 5. Часът долу е ТИХ РЕД, не втора капсула. Рамката и фонът идват от старата дефиниция на `#skinnow` и се виждаха на кадъра — още едно място, където редът в листа реши изхода, не специфичността. */ html[data-skin="new"] #skinnow{ background:none!important;border:0!important;box-shadow:none!important; padding:0!important;} /* ══ ДВАТА ПУЛСА С ИМЕНА ═══════════════════════════════════════════════════ Два реда, един под друг, вдясно: `♥ 79 Ива` / `♥ 98 Светослав`. Мерено защо два реда, а не един: с имена двете капсули са ~140 px, а ред 2 вече носи „разговори" (95) и жетона (113) при 215 налични. Вертикално заемат 90 px ширина и 2×13 px височина — събират се, без да бутат нищо. */ html[data-skin="new"] #skinpulse{ display:flex;flex-direction:column;align-items:flex-end;gap:1px; text-align:right;white-space:nowrap;} html[data-skin="new"] #skinpulse .pulseline{ display:flex;align-items:baseline;gap:5px;font-weight:400;line-height:1.15;} html[data-skin="new"] #skinpulse .pulseline i{ font-style:normal;color:#ff5563;font-size:10px;} html[data-skin="new"] #skinpulse .pulseline span{ font-size:15px;font-weight:600;color:#ff7a88; font-variant-numeric:tabular-nums;} html[data-skin="new"] #skinpulse .pulseline em{ font-family:ui-monospace,Consolas,monospace;font-style:normal; font-size:9px;letter-spacing:.1em;color:#a7bccd;opacity:.85;} /* ⚠ „НЕ ОТСЕГА" И „НЕ МОГА ДА ПРОЧЕТА" СЕ ВИЖДАТ. Число отпреди часове, показано като днешно, е точно лъжата, която пазим да не изречем. */ html[data-skin="new"] #skinpulse .pulseline.stale span{ color:#7E93A4;font-weight:400;} html[data-skin="new"] #skinpulse .pulseline.stale i{color:#5C7688;} html[data-skin="new"] #skinpulse .pulseline.stale em::after{ content:" · не отсега";opacity:.75;} html[data-skin="new"] #skinpulse .pulseline.fail span{color:#5C7688;} html[data-skin="new"] #skinpulse .pulseline.fail i{color:#3A4A57;} html[data-skin="new"] #skinpulse .pulseline.fail em::after{ content:" · не се чете";opacity:.75;} /* ⚠ КАПСУЛАТА НЕ СЕ СВИВА. С двата реда тя стана 37 px широка и имената се режеха — flex я стискаше, защото `white-space:nowrap` пази текста, но не пази КУТИЯТА. `min-width:max-content` е разликата между „текстът не се пренася" и „кутията е толкова, колкото е текстът". */ html[data-skin="new"] #skinpulse{ flex:0 0 auto!important;min-width:max-content!important; margin-left:auto;} /* ⚠ ОТМЯНА НА СОБСТВЕНО ПРАВИЛО. В стъпка 1 скрих `#skinpulse em`, за да махна изречението „сърцето на Ива". Сега ИМЕНАТА живеят точно в `em` — тоест старото правило ги изяде и капсулата остана 37 px, само с числото. Не махам правилото горе (то е част от историята на стъпка 1), а го отменям тук изрично, за да си личи защо. */ html[data-skin="new"] #skinpulse .pulseline em{display:inline!important;} /* ⚠ ЕДИН ПУЛС, НЕ ДВА — и капсулата се връща в един ред. Правилата за колона отгоре бяха за двата пулса един под друг; той го отмени. */ html[data-skin="new"] #skinpulse{ flex-direction:row!important;align-items:baseline;gap:5px;} html[data-skin="new"] #skinpulse .pulseline span{color:#ff5563;} /* ══ ПУЛСЪТ: ЧЕРВЕН ВИНАГИ, СЪРЦЕТО БИЕ ВИНАГИ ════════════════════════════ Сивото и спрялото сърце изглеждаха като повреда — той го каза направо. Цветът се връща; „не отсега" се показва по ДРУГИ ТРИ начина, за да не се загуби смисълът, който вече е верен: · ритъмът пада на 44/мин (по-бавен от всеки жив пулс в покой) — виж `pump()` в saris_skin.js; · наситеността слиза с една стъпка, но остава ЧЕРВЕНА; · до името стои ПРЕДИ КОЛКО („преди 4 ч") — конкретно, не етикет. */ html[data-skin="new"] #skinpulse .pulseline i, html[data-skin="new"] #skinpulse .pulseline.stale i, html[data-skin="new"] #skinpulse .pulseline.fail i{color:#ff5563!important;} html[data-skin="new"] #skinpulse .pulseline span, html[data-skin="new"] #skinpulse .pulseline.stale span{ color:#ff7a88!important;font-weight:600!important;} html[data-skin="new"] #skinpulse .pulseline.stale{opacity:.82;} html[data-skin="new"] #skinpulse .pulseline.stale em::after, html[data-skin="new"] #skinpulse .pulseline.fail em::after{content:"";} html[data-skin="new"] #skinpulse .pulseline u{ font-family:ui-monospace,Consolas,monospace;text-decoration:none; font-size:8.5px;letter-spacing:.08em;color:#7E93A4;margin-left:4px;} /* „не се чете" е друго нещо от „старо" — там няма число и тирето е сиво. */ html[data-skin="new"] #skinpulse .pulseline.fail span{color:#5C7688!important;} /* ══ МАХНАТОТО НАИСТИНА СЕ МАХА ═══════════════════════════════════════════ ⚠ ВТОРИ ДЕФЕКТ ОТ СЪЩИЯ ЖЕСТ. `gone` беше само `opacity:0`. Кутията оставаше в подредбата ВЪРХУ дъгите, а `.t` вътре е `pointer-events:auto` (сложено за ролката и жеста) — тоест невидимото балонче ядеше допира и бутоните около орба не се натискаха. Текстът също си стоеше, затова задържане предлагаше да се копира изчезнало съобщение. ДВЕ СТЪПКИ, И ДВЕТЕ ЗАДЪЛЖИТЕЛНИ: `gone` — от ПЪРВИЯ кадър на прехода вече не поема допир и не се избира, нито то, нито НИТО ЕДНО от децата му (`*` е нарочно: точно детето беше проблемът); `off` — след прехода излиза и от подредбата. Само първото оставя невидим капан за пръста; само второто убива прехода. */ html[data-skin="new"] #skinsay.gone, html[data-skin="new"] #skinecho.gone{ opacity:0 !important; pointer-events:none !important; -webkit-user-select:none !important;user-select:none !important; -webkit-touch-callout:none !important;} html[data-skin="new"] #skinsay.gone *, html[data-skin="new"] #skinecho.gone *{ pointer-events:none !important; -webkit-user-select:none !important;user-select:none !important; -webkit-touch-callout:none !important;} html[data-skin="new"] #skinsay.gone.off, html[data-skin="new"] #skinecho.gone.off{display:none !important;} /* ══ ЦЕЛТА ЗА ПРЪСТ · 18 px не е копче (05.09.2026) ═══════════════════════ Той каза „ОБЗОР изобщо не работи". Проверих действието: работи — планът е седем стъпки, тръгва, говори, реплики влизат в балончето. Тоест не липсва действие, а ДОПИР. Мерено с решетка от допири около хапчето (_t_aim.py, три размера екран): попадения 32 от 144 проби (22%). Кутията е 48x18 px, залепена за горния ръб (y=15..33). Прицелиш ли се 10 px по-високо или по-ниско — пада встрани и НИЩО не се случва. Съседното „НА ЖИВО" е същото: 73x18. Това е моя грешка от стъпка 1: свалих реда в лентата и капсулите се сбиха до височина на надпис. Надпис с рамка не е копче. ⚠ ПОПРАВЯТ СЕ ДВЕ РАЗЛИЧНИ НЕЩА, не едно: ВИДИМОТО расте умерено (18 → 26 px), защото твърде дебели капсули биха изяли лентата и биха избутали орба — а орбът е центърът. ДОПИРЪТ расте до 44 px през прозрачен `::after`, който НЕ участва в подредбата. Тоест пръстът получава цялото копче, без екранът да порасне с още 18 px. ⚠ РАЗСТОЯНИЕТО СЕ ПРАВИ С ОТСТЪП НА САМАТА КАПСУЛА, НЕ С `row-gap` НА ЛЕНТАТА. Първо го направих с `row-gap:18px` и мерката го хвана: на малък екран разстоянията излязоха 36 px между едни редове и 10 px между други, защото капсулите висят на ТРИ различни родителя (`#skinlive`, `#skinmeta`, самата лента) и всеки има собствен `row-gap`. Резултатът: зоните на „жетона" и „пулса" се застъпваха 8 px — тоест натискаш едно, отваря се друго. Отстъпът от 9 px обаче е на самата капсула и пътува с нея, независимо кой я държи: зоната за пръст расте точно колкото отстъпа, тоест две съседни зони СЕ ДОПИРАТ и никога не се препокриват. ⚠ „НА ЖИВО" ИСКА `!important` — и това не е мързел. Живият код му слага ВГРАДЕН стил (`style="…padding…"`), а вграденото бие всяко правило по име. Мерено: съседът порасна на 26 px, а „НА ЖИВО" остана 18. Затова тук се пипат само двата отстъпа, а не целият стил — останалото си остава на живия код. ⚠ БЕЗ `overflow:hidden` по родителите на тези капсули — зоната излиза извън кутията им и скрит препълнен родител би я отрязал обратно. */ html[data-skin="new"] #topbar #livego, html[data-skin="new"] #topbar #skinsweep, html[data-skin="new"] #skinhistb, html[data-skin="new"] #skinuse, html[data-skin="new"] #skinpulse{ position:relative; /* 07.09.2026: маржът беше 9px и правеше голяма дупка над марката и между двата реда (марката няма такъв марж). Тап-зоната идва от PADDING-а (7px), не от маржа — затова маржът пада на 4px за симетрия, padding-ът остава. */ margin-top:4px !important;margin-bottom:4px !important; padding-top:7px !important;padding-bottom:7px !important;} html[data-skin="new"] #topbar #livego::after, html[data-skin="new"] #topbar #skinsweep::after, html[data-skin="new"] #skinhistb::after, html[data-skin="new"] #skinuse::after, html[data-skin="new"] #skinpulse::after{ content:"";position:absolute; left:-2px;right:-2px;top:-9px;bottom:-9px; /* ⚠ ПРАВОЪГЪЛНИК, НЕ ХАПЧЕ. Първо сложих `border-radius:999px` по навик от видимата капсула — и решетката веднага го хвана: при 54x44 закръглянето прави елипса и ЧЕТИРИТЕ ъгъла изпадат от зоната. Зоната за пръст няма форма, тя има площ. */ border-radius:0;background:transparent;} /* ══ ЛЕГЕНДА НА ПРЪСТЕНА (07.09.2026) — панел, отварян с допир по пръстена. Скрит по подразбиране; вижда се при html.skinleg. Долен панел, център. */ html[data-skin="new"] #skinlegend{ position:fixed;left:16px;right:16px;bottom:92px;z-index:60; max-width:520px;margin:0 auto; background:rgba(12,10,20,.93);border:1px solid rgba(53,228,255,.22); border-radius:14px;padding:12px 14px; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); font-size:12px;color:rgba(230,244,255,.92); box-shadow:0 10px 30px rgba(0,0,0,.45); /* 07.09.2026: мек fade вместо рязко display:none→block. Скрита е с opacity+ visibility (не display), за да може да се анимира; pointer-events:none, за да не лови допир, докато е невидима. */ opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;} html[data-skin="new"].skinleg #skinlegend{ opacity:1;visibility:visible;transform:none;pointer-events:auto; transition:opacity .2s ease, transform .2s ease, visibility 0s;} html[data-skin="new"] #skinleghd{ display:flex;justify-content:space-between;align-items:center; font-size:11px;letter-spacing:.14em;opacity:.72;margin-bottom:8px;} html[data-skin="new"] #skinlegx{cursor:pointer;opacity:.7;font-style:normal;padding:2px 8px;} html[data-skin="new"] #skinleglist div{ display:flex;align-items:center;gap:8px;margin:5px 0;line-height:1.35;} html[data-skin="new"] #skinleglist em{ width:15px;height:3px;border-radius:2px;font-style:normal;flex:0 0 auto;} html[data-skin="new"] #skinleglist s{ text-decoration:none;color:rgba(230,244,255,.95);font-weight:600;} html[data-skin="new"] #skinleglist .dash{ background:repeating-linear-gradient(90deg,#3A4A57 0 4px,transparent 4px 7px);} /* ══ ПРИСЪСТВИЕ НА ДРУГИЯ (07.09.2026) — зелена точка „● <име>" пред пулса, когато е онлайн сега. Тиха, с меко сияние и бавен пулс; крие се, когато го няма. */ html[data-skin="new"] #skinpresence{ color:#46e0a8;font-size:11px;line-height:1;margin-right:4px; text-shadow:0 0 6px rgba(70,224,168,.85); animation:skinPresPulse 2.6s ease-in-out infinite;} @keyframes skinPresPulse{0%,100%{opacity:.55}50%{opacity:1}} @media (prefers-reduced-motion: reduce){html[data-skin="new"] #skinpresence{animation:none;}} /* ══ ПЛЪЗГАНЕ ПО ПРЪСТЕНА — 08.09.2026. Без touch-action:none браузърът приема дъргането по орба за скрол и прекъсва жеста (pointercancel) → плъзгането „не работи" на телефон. Орбът не е за скролване, затова спираме жестовете на браузъра върху него; скролът на дневника отдолу не се пипа. */ html[data-skin="new"] #orb{touch-action:none;} /* ══ ГЛАС/БЕЗ ГЛАС ГОРЕ ВДЯСНО (08.09.2026) — иконата се мести от дока в лентата (виж arrange() в skin.js). Само икона (без надпис), до жетона; червена при спрян глас. Изборът е ТРАЕН (профилна настройка tts_muted + localStorage). */ html[data-skin="new"] #topbar #mutebtn{ order:1;display:inline-flex;align-items:center;flex:0 0 auto;cursor:pointer; color:rgba(230,244,255,.72);padding:2px 5px;margin:0 0 0 6px;border-radius:8px;} html[data-skin="new"] #topbar #mutebtn span{display:none;} html[data-skin="new"] #topbar #mutebtn svg{width:18px;height:18px;} html[data-skin="new"] #topbar #mutebtn.muted{color:#ff6b6b;} /* ── БЪРЗ ПРЕГЛЕД ПРИ ЗАДЪРЖАНЕ НАД ДЪГА (07.09.2026) ───────────────────── Бокс с нещата зад числото. Центриран, тъмна карта с цветна горна ивица (цвета на дъгата), редове един под друг. Допир навсякъде затваря (виж skin.js). */ /* ⚠ 08.09.2026: задържането над дъга отваряше бокса, но Chrome на Android хващаше СЪЩОТО задържане като избор на текст (излизаше „Копиране/Споделяне" + дръжки). Спираме избора и callout-а върху бокса — задържането е жест за преглед, не за маркиране. */ #skinpeek,#skinpeek *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;} #skinpeek{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center; background:rgba(3,10,18,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); animation:pkin .12s ease-out;} @keyframes pkin{from{opacity:0}to{opacity:1}} #skinpeek .pk-card{width:min(84vw,340px);max-height:70vh;overflow:auto; background:#0e1d2b;border:1px solid #16354b;border-top:3px solid #28e6ff;border-radius:16px; padding:14px 16px;box-shadow:0 18px 60px rgba(0,0,0,.55); font-family:-apple-system,Segoe UI,Roboto,sans-serif;color:#e7f1f7;} #skinpeek .pk-hd{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin:0 0 10px;} #skinpeek .pk-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;} #skinpeek .pk-row{font-size:14px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);line-height:1.35;} #skinpeek .pk-row:last-child{border-bottom:0;} #skinpeek .pk-s{color:#8fb0c4;font-size:12.5px;} #skinpeek .pk-a{font-weight:700;} #skinpeek .pk-note{color:#8fb0c4;font-size:13.5px;padding:4px 0 2px;} /* ── С2 (17.10.2026): ПОДНОВЯВАНЕ С ТРИ ТАПА — редовете на „Документи“ са бутони ──────────────────────── Тап по реда → [📅 Нов срок] [⏰ Напомни ми] [📄 Отвори]; „Нов срок“ → дата + „✓ Запиши“ → редът отлита в орба. */ #skinpeek .pk-doc{display:flex;align-items:center;gap:4px;cursor:pointer;border-radius:8px;} #skinpeek .pk-doc:active{background:rgba(255,255,255,.05);} #skinpeek .pk-doc:focus-visible{outline:2px solid #28e6ff;outline-offset:2px;} #skinpeek .pk-doc .pk-go{margin-left:auto;padding-left:8px;color:#5d8aa3;font-size:18px;line-height:1;} #skinpeek .pk-act{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:4px 0 10px; border-bottom:1px solid rgba(255,255,255,.06);animation:pkin .14s ease-out;} #skinpeek .pk-act button{flex:1 1 auto;min-height:40px;border-radius:11px;border:1px solid #1f4a63; background:rgba(40,230,255,.08);color:#d9f3ff;font:600 13px/1.15 -apple-system,Segoe UI,Roboto,sans-serif; padding:8px 9px;cursor:pointer;} #skinpeek .pk-act button:disabled{opacity:.55;} #skinpeek .pk-act .pk-save{flex:0 0 auto;background:#28e6ff;color:#04222b;border-color:#28e6ff;padding:8px 14px;} #skinpeek .pk-dl{flex:1 1 150px;display:flex;flex-direction:column;gap:3px;color:#8fb0c4;font-size:12px;} #skinpeek .pk-dl input{-webkit-user-select:auto;user-select:auto;min-height:40px;box-sizing:border-box;width:100%; background:#12283a;border:1px solid #1f4a63;color:#e7f1f7;border-radius:10px;padding:8px 10px;font-size:15px; font-family:inherit;color-scheme:dark;} #skinpeek .pk-msg{flex:1 0 100%;color:#9fd8c4;font-size:12.5px;min-height:0;} #skinpeek .pk-msg:empty{display:none;} .pk-fly{position:fixed;z-index:61;pointer-events:none;box-sizing:border-box;padding:8px 10px;border-radius:12px; background:rgba(14,29,43,.96);border:1px solid rgba(70,224,168,.6);color:#e7f1f7; font:600 14px/1.3 -apple-system,Segoe UI,Roboto,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; box-shadow:0 0 18px rgba(70,224,168,.35);transform-origin:50% 50%; transition:transform .64s cubic-bezier(.55,0,.8,.25),opacity .64s ease-in;} .pk-fly .pk-fly-ok{color:#46e0a8;} /* ── С2: ВЕТРИЛОТО ПРИ ПРАГА — картите излизат от дъгата „Документи“ и се прибират в нея (~3.5 s) ──────── Позицията (left/top) и двете трансформации (--df-from = при дъгата, --df-to = разтворено) ги дава skin.js. */ #docfan{position:fixed;left:0;top:0;width:0;height:0;z-index:58;pointer-events:none;} #docfan .df-card{position:fixed;width:156px;min-height:88px;box-sizing:border-box;padding:9px 11px 8px; background:rgba(14,29,43,.95);border:1px solid #16354b;border-top:3px solid rgb(247,120,178);border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.5);color:#e7f1f7;font:600 13.5px/1.25 -apple-system,Segoe UI,Roboto,sans-serif; pointer-events:auto;cursor:pointer;opacity:0;transform:var(--df-from);transform-origin:50% 60%; transition:transform .46s cubic-bezier(.2,.9,.25,1.12),opacity .3s ease-out; -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;} #docfan.open .df-card{opacity:1;transform:var(--df-to);} #docfan.fold .df-card{opacity:0;transform:var(--df-from);transition:transform .5s cubic-bezier(.6,0,.8,.4),opacity .45s ease-in;} #docfan .df-card.hot{border-color:rgba(255,199,74,.5);border-top-color:rgb(247,120,178); box-shadow:0 0 0 1px rgba(255,199,74,.28),0 12px 32px rgba(0,0,0,.5),0 0 24px rgba(255,190,70,.22);} #docfan .df-card.calm{background:rgba(11,22,33,.93);} #docfan .df-top{display:flex;align-items:center;gap:7px;} #docfan .df-ic{font-size:18px;line-height:1;flex:0 0 auto;} #docfan .df-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #docfan .df-kind{color:#8fb0c4;font-size:11.5px;font-weight:500;margin:2px 0 0 25px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #docfan .df-when{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:14.5px;font-weight:800;} #docfan .hot .df-when{color:#ffc74a;} #docfan .calm .df-when{color:#46e0a8;font-weight:700;} #docfan .df-hg{width:13px;height:19px;flex:0 0 auto;} #docfan .df-ok{font-size:15px;} #docfan .df-more{position:absolute;top:-10px;right:-6px;font-size:11.5px;font-weight:800;color:#ffd6e8; background:#3a1f31;border:1px solid rgba(247,120,178,.65);border-radius:999px;padding:2px 8px;} /* дясната задна карта: съдържанието вдясно — лявата ѝ половина е зад предната */ #docfan .df-r .df-top,#docfan .df-r .df-when{flex-direction:row-reverse;} #docfan .df-r .df-name{text-align:right;} #docfan .df-r .df-kind{margin:2px 25px 0 0;text-align:right;} #docfan.rm .df-card{transform:var(--df-to);transition:opacity .25s linear;} #docfan.rm.fold .df-card{transform:var(--df-to);transition:opacity .3s linear;} @media (prefers-reduced-motion: reduce){ #docfan .df-card,#docfan.fold .df-card{transform:var(--df-to)!important;transition:opacity .25s linear!important;} .pk-fly{transition:none!important;} } /* ── С3 (17.10.2026): СВЕТУЛКИТЕ — картичката (тап по светулка), искрата и точиците „Свършено днес“ горе вдясно ─────── Самите светулки и полетът им са в платното (кадърът на пръстена, skin.js → W.taskFlies); тук е само DOM-ът. Точиците живеят в #top — под панелите (z 8–9) и независимо от темата; при гост (html.gcur) ги няма. */ #tfcard{position:fixed;z-index:60;width:min(78vw,260px);box-sizing:border-box;padding:11px 13px 12px; background:rgba(14,29,43,.97);border:1px solid #16354b;border-top:3px solid rgb(70,224,168);border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 22px rgba(200,255,120,.12);color:#e7f1f7; font:600 14px/1.3 -apple-system,Segoe UI,Roboto,sans-serif;animation:pkin .14s ease-out; -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;} #tfcard .tf-t{font-size:15px;font-weight:700;overflow-wrap:anywhere;} #tfcard .tf-fam{font-size:14px;} #tfcard .tf-d{color:#8fb0c4;font-size:12.5px;font-weight:600;margin:3px 0 10px;} #tfcard .tf-d.over{color:#ffc04a;} #tfcard .tf-ok{width:100%;min-height:42px;border-radius:11px;border:1px solid #46e0a8;background:#46e0a8;color:#04222b; font:700 14.5px/1 -apple-system,Segoe UI,Roboto,sans-serif;cursor:pointer;} #tfcard .tf-ok:disabled{opacity:.55;} #tfcard .tf-msg{color:#ffb38a;font-size:12.5px;margin-top:6px;} #tfcard .tf-msg:empty{display:none;} #tfcard .tf-note{color:#8fb0c4;font-size:13.5px;} .tf-spark{position:fixed;z-index:61;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%; background:radial-gradient(circle,#fffde8 0,#e2ff9a 38%,rgba(214,255,128,0) 72%); box-shadow:0 0 14px 5px rgba(214,255,128,.55);opacity:1; transition:transform .62s cubic-bezier(.3,.1,.25,1),opacity .62s ease-in;} #taskdots{position:absolute;top:8px;right:10px;z-index:2;display:flex;align-items:center;gap:5px; min-height:24px;box-sizing:border-box;padding:8px 9px;border-radius:999px;cursor:pointer; -webkit-tap-highlight-color:transparent;} #taskdots[hidden]{display:none;} #taskdots .tf-dot{display:block;width:6px;height:6px;border-radius:50%;background:#eaffb0; box-shadow:0 0 6px 2px rgba(214,255,128,.55);animation:tfbreath 3.6s ease-in-out infinite;} #taskdots .tf-dot:nth-child(2n){animation-delay:-1.2s;} #taskdots .tf-dot:nth-child(3n){animation-delay:-2.3s;} #taskdots .tf-dot.pop{animation:tfpop .5s ease-out,tfbreath 3.6s ease-in-out .5s infinite;} #taskdots b{color:#cfe9b0;font:700 11px/1 -apple-system,Segoe UI,Roboto,sans-serif;margin-left:2px;} @keyframes tfbreath{0%,100%{opacity:.62}50%{opacity:1}} @keyframes tfpop{0%{transform:scale(2.4);opacity:1}100%{transform:scale(1);opacity:.9}} #tfdone{position:absolute;top:40px;right:10px;z-index:3;max-width:min(76vw,280px);box-sizing:border-box;padding:8px 11px; background:rgba(14,29,43,.95);border:1px solid rgba(70,224,168,.45);border-radius:12px;color:#e7f1f7; font:500 13px/1.35 -apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.45);animation:pkin .14s ease-out;} #tfdone b{color:#9fe6b8;font-weight:700;} html.gcur #taskdots,html.gcur #tfdone{display:none!important;} /* ── С4 (18.10.2026): СЪДЪТ НА МЕСЕЦА — прегледът на „Финанси“ (над 90 %, „Свободно до …“, [🥛 Ами ако…]) и лентата под чашата („~31 €/ден до 31-ви“, „ако дам 120 € → …“, картата [Запиши] [Отказ]). Съдът и чашата са в платното (skin.js → W.finVessel); тук е само DOM-ът. При гост (html.gcur) лентата я няма. */ #skinpeek .pk-fin{margin-top:4px;} #skinpeek .pk-hot{font-size:13px;color:#ffc27a;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06);} #skinpeek .pk-free{margin-top:10px;font-size:13.5px;color:#cfe3ee;} #skinpeek .pk-free b{color:#ffd77a;} #skinpeek .pk-free.pk-unk{color:#9fb6c4;} #skinpeek .pk-cup{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px; min-height:42px;border-radius:12px;border:1px solid rgba(255,199,74,.55);background:rgba(255,199,74,.12);color:#ffe2a0; font:600 14.5px/1 -apple-system,Segoe UI,Roboto,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;} #skinpeek .pk-cup:active{background:rgba(255,199,74,.22);} #skinpeek .pk-cup i{position:absolute;right:46px;top:6px;width:28px;height:28px;border-radius:50%; background:rgba(230,245,255,.18);border:1.5px solid rgba(230,245,255,.7);box-shadow:0 0 14px rgba(230,245,255,.3); animation:fcfinger 2.4s ease-in-out infinite;} @keyframes fcfinger{0%,18%{transform:translateY(-3px);opacity:.0}30%{opacity:1}70%{transform:translateY(6px);opacity:1}100%{transform:translateY(6px);opacity:0}} #skinpeek .pk-hint{margin-top:8px;font-size:11.5px;color:#7f9aab;text-align:center;} #fincup{position:fixed;left:50%;transform:translateX(-50%);z-index:55;width:min(calc(100vw - 32px),330px);box-sizing:border-box; text-align:center;color:#f3f7fa;font:600 13.5px/1.35 -apple-system,Segoe UI,Roboto,sans-serif;pointer-events:auto; -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:pkin .2s ease-out;} #fincup .fc-l1{font-size:13.5px;} #fincup .fc-gold{color:#ffe2a0;} #fincup .fc-l2{font:400 11.5px/1.35 -apple-system,Segoe UI,Roboto,sans-serif;color:#8fb0c4;margin-top:2px;} #fincup .fc-l3{font:600 11px/1.35 -apple-system,Segoe UI,Roboto,sans-serif;color:rgba(53,228,255,.9);margin-top:4px;} #fincup .fc-x{position:absolute;right:-6px;top:-8px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(143,176,196,.35); background:rgba(9,16,26,.8);color:#9fb6c4;font:600 13px/1 -apple-system,Segoe UI,Roboto,sans-serif;cursor:pointer;} #fincup.card{width:min(calc(100vw - 32px),316px);} #fincup .fc-card{border-radius:14px;background:rgba(9,16,26,.92);border:1px solid rgba(255,199,74,.45);padding:9px 12px 10px; box-shadow:0 10px 30px rgba(0,0,0,.5);} #fincup .fc-card .fc-l1{color:#f3f7fa;} #fincup .fc-card .fc-l1 b{color:#ffd77a;} /* „за какво?“ (по избор) — 16px, за да не увеличава iOS страницата при фокус; родителят е user-select:none → тук text */ #fincup .fc-for{display:block;width:100%;box-sizing:border-box;margin-top:8px;min-height:36px;padding:6px 12px;border-radius:10px; border:1px solid rgba(143,176,196,.45);background:rgba(255,255,255,.06);color:#f3f7fa;font:400 16px/1.2 -apple-system,Segoe UI,Roboto,sans-serif; -webkit-user-select:text;user-select:text;outline:none;-webkit-appearance:none;appearance:none;} #fincup .fc-for::placeholder{color:#7f9aab;opacity:1;} #fincup .fc-for:focus{border-color:rgba(255,199,74,.75);background:rgba(255,199,74,.08);} #fincup .fc-bt{display:flex;gap:8px;justify-content:center;margin-top:8px;} #fincup .fc-bt button{min-height:36px;padding:0 16px;border-radius:999px;font:600 13px/1 -apple-system,Segoe UI,Roboto,sans-serif;cursor:pointer;} #fincup .fc-save{background:rgb(255,199,74);color:#2a1a00;border:0;} #fincup .fc-no{background:transparent;color:#cfe3ee;border:1px solid rgba(143,176,196,.5);} html.gcur #fincup{display:none!important;} @media (prefers-reduced-motion: reduce){ #skinpeek .pk-cup i{animation:none;opacity:.8;} #fincup{animation:none;} } /* ── С1 (17.10.2026): ЛУНИТЕ НА СДЕЛКИТЕ — балончето до луната (тап) или под орба (задържане над „Трейдинг“) ───────────── Луните, скалата и полетите са в платното (skin.js → W.tradeMoons); тук е само DOM-ът. Фонът е лек и БЕЗ размиване — луните и скалата остават видими (затова не е центрираният #skinpeek). При гост балончето го няма. */ #tmwrap{position:fixed;inset:0;z-index:60;background:rgba(3,10,18,.30);animation:pkin .12s ease-out; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;} #tmbub{position:absolute;width:min(calc(100vw - 24px),340px);--tmc:#5aa5f0;} #tmbub .tm-arr{position:absolute;top:-7px;width:14px;height:14px;background:#0e1d2b;border-left:1px solid #16354b; border-top:3px solid var(--tmc);transform:rotate(45deg);} #tmbub.up .tm-arr{top:auto;bottom:-7px;border:0;border-right:1px solid #16354b;border-bottom:1px solid #16354b;} #tmbub .tm-card{box-sizing:border-box;background:#0e1d2b;border:1px solid #16354b;border-top:3px solid var(--tmc); border-radius:16px;padding:12px 14px;box-shadow:0 18px 60px rgba(0,0,0,.55);max-height:62vh;overflow:auto; font-family:-apple-system,Segoe UI,Roboto,sans-serif;color:#e7f1f7;} #tmbub .tm-hd{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin:0 0 8px;} #tmbub .tm-hd .tm-n{margin-left:auto;font-size:12px;font-weight:600;color:#8fb0c4;} #tmbub .tm-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;} #tmbub .tm-line{font-size:14px;font-weight:600;color:#f1f7fb;line-height:1.35;overflow-wrap:anywhere;} #tmbub .tm-sub{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;line-height:1.3;color:#8fb0c4;} #tmbub .tm-bar{flex:0 0 auto;} #tmbub .tm-btns{display:flex;gap:8px;margin-top:10px;} #tmbub .tm-btns button{flex:1 1 0;min-height:42px;border-radius:10px;padding:8px;cursor:pointer; font:600 13.5px/1.1 -apple-system,Segoe UI,Roboto,sans-serif;border:1px solid rgba(53,228,255,.45); background:rgba(53,228,255,.10);color:#dffaff;} #tmbub .tm-btns button.sec{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#cfe0ea;} #tmbub .tm-row{display:flex;align-items:center;gap:8px;font-size:14px;padding:9px 2px;min-height:28px;cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06);border-radius:8px;} #tmbub .tm-row:active{background:rgba(255,255,255,.05);} #tmbub .tm-row:focus-visible{outline:2px solid #28e6ff;outline-offset:2px;} #tmbub .tm-row.on{background:rgba(90,165,240,.10);box-shadow:inset 0 0 0 1px rgba(90,165,240,.28);border-bottom-color:transparent;} #tmbub .tm-row .tm-sym{flex:1 1 auto;min-width:0;} #tmbub .tm-det{padding:6px 2px 10px;border-bottom:1px solid rgba(255,255,255,.06);animation:pkin .14s ease-out;} #tmbub .tm-s{color:#8fb0c4;font-size:12.5px;} #tmbub .tm-pos{color:#7ff0c0;} #tmbub .tm-neg{color:#ffb38a;} #tmbub .tm-note{color:#9fb6c6;font-size:12px;margin-top:8px;} #tmbub .tm-hint{font-size:11.5px;color:#6f8ea3;margin-top:6px;text-align:center;} html.gcur #tmwrap{display:none!important;} #taskdots.rm .tf-dot{animation:none;} @media (prefers-reduced-motion: reduce){ #taskdots .tf-dot{animation:none!important;} .tf-spark{transition:none!important;} } /* Вход към Claude таблото — в дъното на попъпа за потребление (07.09.2026). */ #skinuseboard{margin-top:10px;text-align:center;cursor:pointer; background:rgba(40,230,255,.12);border:1px solid rgba(40,230,255,.35);color:#28e6ff; border-radius:10px;padding:9px;font-size:13px;font-weight:700;} #skinuseboard:hover{background:rgba(40,230,255,.2);} /* ══ ВРЕМЕТО — впечатляващ интерактивен панел (15.09.2026) ═══════════════════ Отваря се с тап върху времето в капсулата „сега". Фонът се сменя според условието (ясно ден/нощ, облаци, дъжд, сняг, буря, мъгла). */ #wxov{position:fixed;inset:0;z-index:100000;display:none;overflow:hidden;color:#eaf6ff; font-family:-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent; animation:wxfade .28s ease;} #wxov.on{display:block;} @keyframes wxfade{from{opacity:0}to{opacity:1}} #wxsky{position:absolute;inset:0;background:linear-gradient(180deg,#0b1a30,#0b2547 55%,#123a63);transition:background 1s;} #wxsky::before,#wxsky::after{content:"";position:absolute;inset:0;pointer-events:none;} /* ☀️ ЯСНО ДЕН — слънчев диск (пулс) + бавно въртящи се лъчи */ #wxov.d-clear #wxsky{background:linear-gradient(180deg,#2f74bd,#5aa0dd 55%,#a6d4f2);} #wxov.d-clear #wxsky::before{background:radial-gradient(circle at 78% 16%,rgba(255,246,196,.98),rgba(255,244,190,0) 27%);animation:wxpulse 6s ease-in-out infinite;} #wxov.d-clear #wxsky::after{background:repeating-conic-gradient(from 0deg at 78% 16%,rgba(255,240,175,.18) 0deg 4deg,transparent 4deg 20deg);-webkit-mask:radial-gradient(circle at 78% 16%,#000 30%,transparent 46%);mask:radial-gradient(circle at 78% 16%,#000 30%,transparent 46%);transform-origin:78% 16%;animation:wxrays 90s linear infinite;opacity:.55;} /* 🌙 ЯСНО НОЩ — звезди (мигат) + падаща звезда */ #wxov.n-clear #wxsky{background:linear-gradient(180deg,#050a1c,#0a1836 60%,#132a52);} #wxov.n-clear #wxsky::before{background-image:radial-gradient(1.6px 1.6px at 18% 26%,#fff,transparent),radial-gradient(1.5px 1.5px at 68% 20%,#cfe,transparent),radial-gradient(1.2px 1.2px at 44% 58%,#fff,transparent),radial-gradient(1.6px 1.6px at 84% 50%,#fff,transparent),radial-gradient(1.2px 1.2px at 30% 78%,#dff,transparent),radial-gradient(1.4px 1.4px at 60% 82%,#fff,transparent),radial-gradient(1.3px 1.3px at 12% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 90% 32%,#cfe,transparent);opacity:.85;animation:wxtwinkle 4s ease-in-out infinite;} #wxov.n-clear #wxsky::after{inset:auto;top:14%;left:-160px;width:130px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95));box-shadow:0 0 7px #fff;transform:rotate(24deg);opacity:0;animation:wxshoot 11s ease-in 3s infinite;} /* ☁️ ОБЛАЧНО — плуващи облаци */ #wxov.cloud #wxsky{background:linear-gradient(180deg,#46566a,#657688 60%,#8ba0b2);} #wxov.cloud #wxsky::before{background-image:radial-gradient(closest-side,rgba(255,255,255,.22),transparent),radial-gradient(closest-side,rgba(255,255,255,.16),transparent);background-repeat:no-repeat;background-size:46% 30%,38% 24%;background-position:-30% 26%,120% 40%;animation:wxdrift 30s linear infinite;} /* 🌧️ ДЪЖД — две струи (далечна бавна + близка бърза) */ #wxov.rain #wxsky{background:linear-gradient(180deg,#28323d,#3a4d5c 60%,#516675);} /* ДЪЖДЪТ (26.09.2026): капките са на canvas (#wxraincv, saris_skin.js → _rainSync) — не ивици. Тук остава само небето: мека тъмнина отгоре и лека мъгла отдолу, без движение. */ #wxov.rain #wxsky::before{background:linear-gradient(180deg,rgba(14,20,28,.38),transparent 45%);} #wxov.rain #wxsky::after{background:linear-gradient(0deg,rgba(200,215,228,.10),transparent 30%);} #wxraincv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;} /* ⛈️ БУРЯ — светкавици + дъжд */ #wxov.storm #wxsky{background:linear-gradient(180deg,#191f29,#28333f 60%,#37485a);} #wxov.storm #wxsky::before{animation:wxflash 6s linear infinite;} #wxov.storm #wxsky::after{background:linear-gradient(0deg,rgba(200,215,228,.08),transparent 30%);} /* капките — на canvas */ /* 🌨️ СНЯГ — две пелени снежинки */ #wxov.snow #wxsky{background:linear-gradient(180deg,#54657a,#7c90a4 60%,#c0cfdd);} #wxov.snow #wxsky::before{background-image:radial-gradient(2.4px 2.4px at 15% 10%,#fff,transparent),radial-gradient(2.6px 2.6px at 55% 24%,#fff,transparent),radial-gradient(2.2px 2.2px at 85% 12%,#fff,transparent),radial-gradient(2.5px 2.5px at 35% 46%,#fff,transparent),radial-gradient(2.3px 2.3px at 72% 56%,#fff,transparent);animation:wxsnow 9s linear infinite;opacity:.9;} #wxov.snow #wxsky::after{background-image:radial-gradient(1.6px 1.6px at 25% 20%,#eef,transparent),radial-gradient(1.8px 1.8px at 65% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 45% 36%,#eef,transparent),radial-gradient(1.7px 1.7px at 88% 40%,#fff,transparent);animation:wxsnow 5.5s linear infinite;opacity:.7;} /* 🌫️ МЪГЛА — плуващи пелени */ #wxov.fog #wxsky{background:linear-gradient(180deg,#59636e,#79838d 60%,#9aa4ad);} #wxov.fog #wxsky::after{background:linear-gradient(0deg,rgba(222,230,237,.24),transparent 42%),linear-gradient(0deg,rgba(222,230,237,.16),transparent 58%);background-size:220% 60%,220% 44%;background-position:0 82%,0 56%;background-repeat:no-repeat;animation:wxfogdrift 20s ease-in-out infinite;} @keyframes wxpulse{0%,100%{opacity:.82}50%{opacity:1}} @keyframes wxtwinkle{0%,100%{opacity:.55}50%{opacity:.95}} @keyframes wxrain{to{background-position:0 100px}} @keyframes wxsnow{to{background-position:0 120px}} @keyframes wxflash{0%,92%,100%{background:rgba(255,255,255,0)}93%{background:rgba(255,255,255,.4)}94%{background:rgba(255,255,255,0)}96%{background:rgba(255,255,255,.28)}} @keyframes wxrays{to{transform:rotate(360deg)}} @keyframes wxshoot{0%{opacity:0;transform:translate(0,0) rotate(24deg)}3%{opacity:1}13%{opacity:1;transform:translate(360px,150px) rotate(24deg)}15%,100%{opacity:0;transform:translate(360px,150px) rotate(24deg)}} @keyframes wxdrift{0%{background-position:-30% 26%,120% 40%}100%{background-position:130% 26%,-25% 40%}} @keyframes wxfogdrift{0%,100%{background-position:0 82%,0 56%}50%{background-position:38% 82%,-38% 56%}} #wxcard{position:relative;z-index:2;height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column; padding:calc(18px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;box-sizing:border-box;} #wxtop{display:flex;justify-content:space-between;align-items:center;} #wxcity{font-size:15px;font-weight:600;letter-spacing:.3px;opacity:.95;text-shadow:0 1px 6px rgba(0,0,0,.45);} #wxclose{font-size:24px;cursor:pointer;opacity:.9;padding:0 6px;line-height:1;} #wxhero{text-align:center;margin:22px 0 4px;text-shadow:0 2px 14px rgba(0,0,0,.4);} #wxicon{font-size:66px;line-height:1;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));} #wxtemp{font-size:72px;font-weight:200;line-height:1;margin-top:2px;letter-spacing:-3px;} #wxcond{font-size:17px;opacity:.96;margin-top:2px;text-transform:capitalize;} #wxfeels{font-size:13px;opacity:.78;margin-top:4px;} #wxrange{font-size:14px;opacity:.9;margin-top:8px;letter-spacing:.5px;} #wxarc{margin:18px auto 2px;max-width:340px;width:100%;} /* — часова лента (следващите ~12ч) в таблото с времето (23.09.2026) — */ #wxhours{margin:16px 0 2px;} #wxhours{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;} #wxhours::-webkit-scrollbar{display:none;} #wxhours .wxhwrap{position:relative;} #wxhours .wxcurve{position:absolute;left:0;top:0;pointer-events:none;} #wxhours .wxhrow{display:flex;position:relative;z-index:2;} #wxhours .wxhr{flex:0 0 52px;width:52px;display:flex;flex-direction:column;align-items:center;} #wxhours .wxht{height:14px;margin:8px 0 4px;font-size:11px;opacity:.86;font-weight:600;letter-spacing:.02em;} #wxhours .wxhi{height:24px;margin-bottom:4px;line-height:0;} #wxhours .wxhi svg{width:24px;height:24px;} #wxhours .wxhband{height:40px;} #wxhours .wxhv{height:18px;margin-top:4px;font-size:15px;font-weight:700;} #wxhours .wxhp{height:12px;font-size:9.5px;color:#8fd6ff;line-height:1;} #wxhours .wxhr.now .wxht{color:#fff;opacity:1;} #wxhours .wxhr.now .wxhv{color:#fff;} #wxtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:16px;} #wxov .wxtile{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:18px; padding:13px 9px;text-align:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} #wxov .wxtile .i{font-size:21px;line-height:1;} #wxov .wxtile .v{font-size:16px;font-weight:600;margin-top:6px;word-break:break-word;} #wxov .wxtile .l{font-size:10px;opacity:.72;margin-top:3px;letter-spacing:.2px;} #wxov .wxbar{height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin-top:8px;overflow:hidden;} #wxov .wxbar>i{display:block;height:100%;border-radius:3px;} #wxov .wxarr{display:inline-block;font-size:20px;transition:transform .6s ease;} #wxfoot{font-size:10.5px;opacity:.6;text-align:center;margin-top:16px;} #skinwx{transition:opacity .15s;} #skinwx:active{opacity:.6;} /* ⚠ ФИКС (15.09.2026): #skinnow е pointer-events:none (да не пречи на орба), затова тапът върху времето не стигаше. Връщаме тапа САМО на времето (точка+текст) — дете-елемент с pointer-events:auto надделява над none на родителя. Уголемяваме и зоната за докосване, понеже текстът е дребен (10px). */ html[data-skin="new"] #skinnow #skinwx, html[data-skin="new"] #skinnow .skinwxdot{pointer-events:auto;cursor:pointer;} html[data-skin="new"] #skinnow #skinwx{opacity:.92;padding:8px 6px;margin:-8px -6px; border-radius:10px;transition:background .15s,opacity .15s;} html[data-skin="new"] #skinnow #skinwx:active{background:rgba(255,255,255,.14);opacity:1;} /* — целият „сега" балон е удобна тап-мишена за времето (16.09.2026): точката (7px) и текстът (11px) са твърде дребни за пръст. Невидима лента (::before) вдига активната височина до ~50px без да троши вида; тап където и да е по балона → времето. */ /* ПОПРАВКА №2 (16.09.2026): #topbar .rt (z-index:6) седи ВЪРХУ #skinnow (z:0) — двата са на --saris-state-top. Вдигаме #skinnow над него (z:7), но pointer-events:none — целият балон НЕ яде тапа на пулса (вдясно); ловят САМО точката+текстът, едри. */ html[data-skin="new"] #skinnow{z-index:7;pointer-events:none;cursor:pointer;} html[data-skin="new"] #skinnow #skinwx, html[data-skin="new"] #skinnow .skinwxdot{pointer-events:auto;cursor:pointer;} html[data-skin="new"] #skinnow #skinwx{position:relative;opacity:.92; padding:16px 14px;margin:-16px -14px;border-radius:12px; transition:background .15s,opacity .15s;} html[data-skin="new"] #skinnow #skinwx:active{background:rgba(255,255,255,.16);opacity:1;} html[data-skin="new"] body.lightui #skinnow #skinwx:active{background:rgba(21,70,96,.12);} /* — многодневна прогноза в таблото с времето (16.09.2026) — */ #wxdays{margin:4px 0 2px;} #wxdays .wxdrow{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} #wxdays .wxdrow::-webkit-scrollbar{display:none;} #wxdays .wxday{flex:0 0 auto;min-width:58px;display:flex;flex-direction:column;align-items:center;gap:3px; padding:8px 6px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);} #wxdays .wxday.now{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);} #wxdays .wxdl{font-size:11px;letter-spacing:.04em;opacity:.85;font-weight:600;} #wxdays .wxdi{font-size:20px;line-height:1;} #wxdays .wxdt{font-size:12.5px;white-space:nowrap;} #wxdays .wxdt b{font-weight:700;} #wxdays .wxdt span{opacity:.6;} #wxdays .wxdpop{font-size:9.5px;min-height:12px;color:#8fd6ff;opacity:.9;} /* — бутон „преглед на ефектите" в таблото с времето (16.09.2026) — */ #wxprev{margin:8px auto 2px;padding:9px 16px;border-radius:999px; border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08); color:#dff3ff;font-size:12.5px;text-align:center;cursor:pointer;max-width:270px; transition:background .15s;-webkit-user-select:none;user-select:none;} #wxprev:active{background:rgba(255,255,255,.18);} /* — по време на „преглед на ефектите" таблото става ПРОЗРАЧНО, за да се виждат орбът и ефектите зад него; остава само контролът долу (16.09.2026) — */ #wxov.previewing{pointer-events:none;background:transparent!important;} #wxov.previewing #wxsky{opacity:0;} #wxov.previewing #wxcard{background:transparent!important;box-shadow:none!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none;} #wxov.previewing #wxcard > *:not(#wxprev){display:none!important;} #wxov.previewing #wxprev{display:block!important;pointer-events:auto;position:fixed; left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);transform:translateX(-50%); z-index:5;background:rgba(10,16,26,.74);border-color:rgba(255,255,255,.32); box-shadow:0 6px 22px rgba(0,0,0,.4);} /* Пулсът на Ива с 3 цифри + онлайн („● ♥ 100 ИВА преди 5 ч") пренасяше реда и мачкаше орба. Свиваме МАЛКО разделите вляво (разговори/живо/обзор) и самото число, за да се събере всичко на ЕДИН ред. Само home-скинът, само горната лента. (21.09.2026) */ html[data-skin="new"] #skinhistb, html[data-skin="new"] #skinmeta #livego, html[data-skin="new"] #skinmeta #skinsweep{ font-size:8.5px !important; letter-spacing:.05em !important; padding:2px 6px !important; } html[data-skin="new"] #skinmeta{gap:5px;} html[data-skin="new"] #skinpulse b{font-size:13px;} html[data-skin="new"] #skinpulse{gap:4px;} /* ═══ НОВ ВИД НА ВРЕМЕТО (02.10.2026): анимирани SVG иконки + небе „Атмосфера" ═══ Пренесено от одобрения прототип. Съобразено с prefers-reduced-motion. */ /* размери на SVG иконките по контекст */ #wxicon{line-height:0;} #wxicon svg{width:118px;height:118px;} #wxov .wxtile .i{line-height:0;} #wxov .wxtile .i svg{width:21px;height:21px;} #wxdays .wxdi{line-height:0;} #wxdays .wxdi svg{width:24px;height:24px;} #skinwx .skinwxic{display:inline-flex;vertical-align:-3px;margin-right:4px;} #skinwx .skinwxic svg{width:15px;height:15px;} /* анимация на иконките (gated) */ @keyframes wi-spin{to{transform:rotate(360deg)}} @keyframes wi-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} @keyframes wi-cloud{0%,100%{transform:translateX(-.6px)}50%{transform:translateX(1.4px)}} @keyframes wi-drop{0%{transform:translateY(-2px);opacity:0}25%{opacity:1}100%{transform:translateY(11px);opacity:0}} @keyframes wi-flake{0%{transform:translateY(-2px);opacity:0}25%{opacity:1}100%{transform:translateY(11px);opacity:0}} @keyframes wi-bolt{0%,86%,100%{opacity:.18}88%,95%{opacity:1}} @keyframes wi-twinkle{0%,100%{opacity:.45}50%{opacity:1}} @media (prefers-reduced-motion:no-preference){ .wi .wi-spin{animation:wi-spin 46s linear infinite;transform-origin:12px 12px;} .wi .wi-breathe{animation:wi-breathe 4.5s ease-in-out infinite;transform-origin:12px 12px;} .wi .wi-cloud{animation:wi-cloud 7s ease-in-out infinite;} .wi .wi-drop{animation:wi-drop 1.15s linear infinite;} .wi .wi-flake{animation:wi-flake 2.8s linear infinite;} .wi .wi-bolt{animation:wi-bolt 2.6s steps(1,end) infinite;} .wi .wi-star{animation:wi-twinkle 3.4s ease-in-out infinite;} } /* небе „Атмосфера" в панела — слоеве в #wxsky (под #wxraincv и под #wxcard) */ #wxsun{position:absolute;inset:0;pointer-events:none;transition:opacity .8s,filter .8s,background .8s;} #wxclouds{position:absolute;inset:0;overflow:hidden;pointer-events:none;filter:blur(14px);transition:opacity .8s;} #wxclouds i{position:absolute;display:block;border-radius:50%;will-change:transform;animation:wxclouddrift linear infinite;} @keyframes wxclouddrift{from{transform:translate3d(-42%,0,0)}to{transform:translate3d(150%,0,0)}} #wxfog{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .8s; background:linear-gradient(180deg,rgba(212,222,232,.02),rgba(212,222,232,.42) 60%,rgba(212,222,232,.16));} /* когато небето е в режим „Атмосфера" — старите декорации по условие се изключват */ #wxov.atmo #wxsky::before,#wxov.atmo #wxsky::after{content:none!important;} /* буря: светкавица (пълноекранно просветване, без да се бори с градиента) */ @keyframes wxflash2{0%,92%,100%{box-shadow:inset 0 0 0 2000px rgba(255,255,255,0)}93%{box-shadow:inset 0 0 0 2000px rgba(255,255,255,.34)}94%{box-shadow:inset 0 0 0 2000px rgba(255,255,255,0)}96%{box-shadow:inset 0 0 0 2000px rgba(255,255,255,.22)}} #wxov.atmo.storm #wxsky{animation:wxflash2 6s linear infinite;} @media (prefers-reduced-motion:reduce){ #wxclouds i{animation:none!important;} #wxov.atmo.storm #wxsky{animation:none!important;} } /* ═══ ЧЕТИМОСТ ПО ЯРКОСТ НА НЕБЕТО (02.10.2026) ═══════════════════════════════ Проблем на живо: при СВЕТЛО небе (ден/залез) белият текст се губи. _skyPaint смята яркостта на нарисуваното небе и слага .wxlight → тъмно мастило; иначе бяло. Плюс защитен ореол (text-shadow) и в двата случая — за граничните часове. */ #wxov{ --wxink:#eaf6ff; --wxink-dim:rgba(234,246,255,.82); --wxpop:#8fd6ff; --wxhalo:0 1px 3px rgba(0,0,0,.6),0 0 10px rgba(0,0,0,.4); } #wxov.wxlight{ --wxink:#102234; --wxink-dim:rgba(16,34,52,.82); --wxpop:#146487; --wxhalo:0 1px 2px rgba(255,255,255,.78),0 0 10px rgba(255,255,255,.5); } #wxov, #wxov #wxcard{ color:var(--wxink); } #wxcity,#wxclose,#wxtemp,#wxcond,#wxfeels,#wxrange{ color:var(--wxink); text-shadow:var(--wxhalo); } #wxhours .wxht,#wxhours .wxhv{ color:var(--wxink); text-shadow:var(--wxhalo); } #wxhours .wxhr.now .wxht,#wxhours .wxhr.now .wxhv{ color:var(--wxink); } #wxhours .wxhp{ color:var(--wxpop); } #wxov .wxtile .v{ color:var(--wxink); text-shadow:var(--wxhalo); } #wxov .wxtile .l{ color:var(--wxink-dim); } #wxdays .wxdl,#wxdays .wxdt{ color:var(--wxink); text-shadow:var(--wxhalo); } #wxdays .wxdt span{ color:var(--wxink-dim); } #wxdays .wxdpop{ color:var(--wxpop); } #wxfoot{ color:var(--wxink-dim); text-shadow:var(--wxhalo); } /* на светло небе: картончетата да са леко ТЪМНО тонирани (не бели), за да „хванат" тъмния текст и иконите; на тъмно остава светлото стъкло както е. */ #wxov.wxlight .wxtile{ background:rgba(12,24,38,.12); border-color:rgba(12,24,38,.16); } #wxov.wxlight .wxtile .bar{ background:rgba(12,24,38,.16); } #wxov.wxlight #wxhours .wxhr.now{ background:transparent; }