/* ALFRÉDŮV ROH — JEDNO MÍSTO PRO OBĚ TVÁŘE (10. 8. 2026, ADR-0079). Klient i interní tým mají od dneška TÉHOŽ Alfréda: kolečko s hlavou v pravém dolním rohu, klik = přechod na jeho obrazovku, kde se z kolečka rozvine celá postava (ADR-0078). Cíl se liší (klient /majetek/alfred, back office /asistent), chování ani vzhled ne. PROČ GLOBÁLNÍ SOUBOR, A NE SCOPED CSS ROZVRŽENÍ. Do 10. 8. 2026 bydlely tokeny i vzhled v MajetekLayout.razor.css, tedy ve scoped CSS KLIENTSKÉHO rozvržení. Back office je jiné rozvržení (MainLayout, .mck) — kopie by znamenala dvě sady čísel a za měsíc dvě různé velikosti hlavy. Tady jsou jednou: • tokeny zóny a kolečka (čtou je obě rozvržení i panely v BackOfficeAlfred.razor.css), • vzhled kolečka i hrdinské postavy (kreslí je sdílená komponenta AlfredRoh). Scoped CSS by tohle neuneslo ani technicky: `:root` se ve scoped souboru přepíše na `:root[b-xxx]` a nikdy nesedne, a sdílená komponenta má vlastní scope než rozvržení. */ :root { /* — ALFRÉDOVA ZÓNA (pravý dolní roh) — JEDNO místo pravdy pro postavu, panely i rezervu obsahu. Kolečko (.alfred-roh), hrdinská postava (.alfred-roh-hrdina) i panely maskota (.boa-bublina, .boa-popover, .boa-promluva) čtou právě tyhle tokeny; obsah obou tváří si o výšku zóny drží spodní odsazení (.mjt-obsah, .mck .stage), takže pod Alfrédem z principu nic nekončí — stránkovač i poslední sloupec tabulky končí NAD ním. Rozměry z měření 9. 8. 2026: postava ~101×133 px + offsety. NEMĚNIT jednotlivě — čísla by se rozjela; hlídá AlfredovaZonaTests. ZÓNA SE KOLEČKEM NEZMENŠUJE, a je to schválně (9. 8. 2026). Klidové kolečko je 56 px, tedy o dvě třetiny menší než postava — svádí to rezervu stáhnout na jeho míru. Nesmí se to: 1) Zóna je `padding-bottom` OBSAHU, ne vlastnost postavy. Velký stav se otevírá NAVIGACÍ na jinou adresu — kdyby si klid držel menší rezervu, celá stránka by se při rozvinutí přesypala a stránkovač by ujel pod Alfréda přesně ve chvíli, kdy se na tu tabulku člověk ptá. Jedna rezerva pro oba stavy = žádný skok. 2) Rezerva stojí za to jen na konci dokumentu (prázdný pruh pod posledním řádkem), takže úspora by byla kosmetická a cena — zakrytá čísla — trvalá. Zóna proto dál kryje VELKÝ stav: 133 px postavy + 12 px odsazení + rezerva na stín. — */ --alfred-zona-w: 140px; /* šířka rohu, do které obsah nesmí (velký stav) */ --alfred-zona-h: 150px; /* výška rohu = spodní rezerva obsahu (velký stav) */ --alfred-zona-x: 20px; /* odsazení Alfréda od pravého okraje (klid i velký stav) */ --alfred-zona-y: 12px; /* odsazení Alfréda od spodního okraje (klid i velký stav) */ /* PRŮMĚR KLIDOVÉHO KOLEČKA. Jediné číslo, ze kterého se počítá i výřez hlavy — proto token a ne konstanta na třech místech. 56 px podle srovnání na obrazovce: pod 52 px se tvář rozpadne v mýdlovou skvrnu (nos a oči splynou), nad 60 px už kolečko v rohu tabulky upoutává jako tlačítko akce. Při 56 px vychází zdrojový obrázek na 91 px šířky, tedy zmenšenina 180px pózy `-mini` — TÉŽE, po které sahá hrdinská postava. Že je to týž soubor, není detail: kdyby si kolečko bralo vlastní (menší) variantu, klik by musel obrázek postavy teprve stáhnout a roh by byl do té doby prázdný (viz AlfredRoh.razor). */ --alfred-kolecko: 56px; /* VÝŠKA HRDINSKÉ POSTAVY. Jeden Alfréd, ne dvě velikosti téhož obrázku. */ --alfred-postava: 133px; /* Fokusový prstenec kolečka. Brandová zelená obou tváří (--mjt-green-500 v klientské, --sidebar-brand v back office jsou tatáž barva o odstín vedle) — Alfréd je jeden, tak má i jednu barvu zaměření. */ --alfred-fokus: #afca0b; } /* ── Kolečko: klidový stav a jediný vchod ──────────────────────────────────── Statický ODKAZ, žádný okruh (ADR-0067): prohlížení je ten častý stav a interaktivní ostrůvek v rozvržení by znamenal SignalR okruh na každé stránce sekce. Odkaz nese POLOHU a chování při najetí, kruh uvnitř nese OŘEZ — kdyby ořezával rovnou odkaz, `overflow: hidden` by kolečku ustřihl i vlastní stín a prstenec. */ .alfred-roh { position: fixed; right: var(--alfred-zona-x); bottom: var(--alfred-zona-y); z-index: 60; display: block; line-height: 0; /* Roste ze stejného rohu, ve kterém se pak rozvine velká postava — najetí je ochutnávka toho, co udělá klik. */ transform-origin: bottom right; transition: transform 180ms cubic-bezier(.16, 1, .3, 1); } .alfred-roh:hover { transform: translateY(-2px) scale(1.07); } .alfred-roh:focus-visible { outline: 2px solid var(--alfred-fokus); outline-offset: 3px; border-radius: 50%; } /* KRUHOVÝ OŘEZ HLAVY Z CELÉ POSTAVY — bez nového assetu (9. 8. 2026). Zdrojová póza je 626×819 px a hlava v ní stojí na (117,5 … 502,5) × (−30 … 355), tedy ČTVEREC o straně 385 px, jehož horní okraj přesahuje nad obrázek — to je ten vzduch nad temenem, aby vlasy nedosedly na okraj kolečka. Spodní hrana čtverce padne pod motýlka: ořez končí NA HOTOVÉM TVARU, ne uprostřed něj (uříznutá brada i půlka motýlka vypadají jako chyba vykreslení). Z těch tří čísel vychází všechno ostatní jako poměr k průměru kolečka, takže velikost se mění JEDINÝM tokenem: šířka obrázku = 626/385 = 1,626 × průměr posun vlevo = 117,5/385 = 0,3052 × průměr posun dolů = 30/385 = 0,0779 × průměr Prstence dělá box-shadow, ne border: border by ubral z vnitřku (box-sizing) a výřez by se o ty dva pixely rozešel s výpočtem. Bílý prstenec odděluje tvář od tmavého podkladu, hnědý vlásek od světlého — kolečko se neztratí ani na jednom. */ .alfred-roh-kruh { position: relative; display: block; width: var(--alfred-kolecko); height: var(--alfred-kolecko); border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(46, 35, 26, .14), 0 4px 14px rgba(46, 35, 26, .22); } .alfred-roh-kruh img { position: absolute; display: block; width: calc(var(--alfred-kolecko) * 1.626); height: auto; max-width: none; left: calc(var(--alfred-kolecko) * -0.3052); top: calc(var(--alfred-kolecko) * 0.0779); } /* Mrknutí — překryvný snímek téže pózy, čistým CSS (žádný okruh). V detailu hlavy dává smysl VÍC než na celé postavě: na 96 px byly oči pár pixelů a mrknutí propadlo, v kolečku je to jediná věc, která se hýbe, a Alfréd díky ní žije. */ .alfred-roh-mrk { opacity: 0; animation: alfred-roh-mrk 7s steps(1, end) infinite; } @keyframes alfred-roh-mrk { 0%, 95.5%, 100% { opacity: 0; } 96.5%, 98% { opacity: 1; } } /* ── Hrdinská postava: to, do čeho kolečko doroste ─────────────────────────── PROČ JE VE STATICKÉM MARKUPU ROZVRŽENÍ, a ne uvnitř interaktivního maskota: Blazor při přechodu z předvykreslené stránky na živý okruh VYMĚNÍ uzly interaktivního ostrůvku, takže se CSS animace uvnitř něj rozjede podruhé. Změřeno 10. 8. 2026 na starém překryvu (`animationstart` pro tuhle animaci přišel dvakrát, 207 a 254 ms) — Alfréd vyrostl, scvrkl se a vyrostl znovu. Statický prvek rozvržení výměna ostrůvku nepotká: náběh se přehraje jednou. PŘECHOD NEMŮŽE BÝT `transition`: velký stav vzniká NAVIGACÍ, takže kolečko a postava nejsou tentýž prvek. Plynulost proto dělá NÁBĚH toho, co přišlo: postava vyroste z 0,42 (= 56/133, přesně velikost kolečka) ze SPODNÍHO PRAVÉHO ROHU — a ten mají obě podoby společný, protože obě čtou tytéž tokeny zóny. Oko to čte jako „kolečko se zvětšilo", ne jako výměnu obrázku. */ .alfred-roh-hrdina { position: fixed; right: var(--alfred-zona-x); bottom: var(--alfred-zona-y); /* Pod panely maskota (z-index 60), nad obsahem stránky. */ z-index: 59; line-height: 0; transform-origin: bottom right; /* `backwards`, NIKOLI `both`: dokreslená animace s `forwards`/`both` drží poslední snímek navždy a animace přebíjejí běžné deklarace bez ohledu na specificitu. */ animation: alfred-roh-rozvinuti 320ms cubic-bezier(.16, 1, .3, 1) backwards; } .alfred-roh-hrdina img { display: block; height: var(--alfred-postava); width: auto; max-width: none; } .alfred-roh-hrdina .alfred-roh-mrk { position: absolute; left: 0; bottom: 0; } /* Náběh začíná VIDITELNĚ (opacity .5), ne od nuly. Z nuly byl první snímek po přechodu prázdný roh — přesně to, co se tady nemá stát: postava má NAVÁZAT tam, kde bylo kolečko, ne se objevit. Změřeno po snímcích 10. 8. 2026: s nulou byl roh prázdný ještě ~30 ms po vykreslení stránky. */ @keyframes alfred-roh-rozvinuti { /* Výchozí měřítko = velikost kolečka dělená velikostí postavy (56/133). Na Alfrédově vlastní obrazovce je postava dvojnásobná, takže si tenhle poměr přepíše (56/266) — jinak by „kolečko se zvětšilo" začínalo dvakrát větší, než kolečko doopravdy je. */ from { transform: scale(var(--alfred-rozvinuti-od, .42)); opacity: .5; } to { transform: none; opacity: 1; } } /* NA TELEFONU SE KOLEČKO SKRÝT NESMÍ (ADR-0078): je to jediný vchod k Alfrédovi a v klientské tváři i jediná cesta k dotazu. 56 px v rohu se na displej vejde; rezerva obsahu proto platí i tady. Skrývá se JEN hrdinská postava — 133 px v rohu telefonu leží přes text a nic tam nepřidává, protože ta obrazovka je Alfréd celá. */ @media (max-width: 720px) { .alfred-roh-hrdina { display: none; } } @media (prefers-reduced-motion: reduce) { .alfred-roh { transition: none; } .alfred-roh-mrk { animation: none; } /* Bez pohybu se Alfréd prostě objeví — ale objevit se MUSÍ, proto `none`, ne skrytí. */ .alfred-roh-hrdina { animation: none; } } /* ── Alfréd se sám zvětší, když má co říct (11. 8. 2026) ───────────────────── Kolečko naroste po dobu, co je nahoře jeho bublina — je to táž informace dvakrát (uvidíš ji i koutkem oka) a hlavně to spojí bublinu s tím, kdo mluví. ROSTE TO PŘES :has(), A TO JE PODSTATA. Zvětšení musí vyvolat INTERAKTIVNÍ ostrůvek (bublina), ale sáhnout na STATICKÉ kolečko — kdyby kolečko bylo interaktivní, Blazor by při přechodu z předvykreslení na okruh vyměnil jeho uzly a CSS animace mrknutí by se rozjela podruhé (ADR-0078: změřeno, animationstart 2×). Selektor sourozence tenhle problém nemá: kreslí dál týž statický prvek, jen s jinou třídou v podmínce. Bez animace u těch, kdo si ji vypnuli — zvětšení zůstane, jen skokem. */ body:has(.boa-bublina) .alfred-roh-kruh { transform: scale(1.16); box-shadow: 0 6px 22px rgba(63, 47, 36, 0.22); } .alfred-roh-kruh { transition: transform 260ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms ease; } @media (prefers-reduced-motion: reduce) { .alfred-roh-kruh { transition: none; } } /* ── Na SVÉ obrazovce je Alfréd dvakrát větší (11. 8. 2026) ────────────────── Tady se na něj člověk přišel podívat a ptát se ho — 133 px je velikost pro roh cizí stránky, ne pro obrazovku, která je celá jeho. ZVĚTŠUJE SE PŘEPSÁNÍM TOKENŮ, ne novým pravidlem na obrázku: `--alfred-postava` čte i `--alfred-zona-h` (spodní rezerva obsahu), takže jedno místo zvětší postavu I plochu, do které obsah nesmí. Kdyby se přepsala jen výška obrázku, Alfréd by ležel přes poslední řádky stránky. Podmínkou je PŘÍTOMNOST hrdinské postavy — ta se vykresluje jedině na Alfrédově obrazovce (AlfredRoh Velky), takže se rozsah neváže na adresu a platí v obou tvářích stejně. Vlastní vlastnosti se dědí, proto stačí přepsat je na . */ body:has(.alfred-roh-hrdina) { --alfred-postava: 266px; --alfred-zona-h: 290px; --alfred-zona-w: 270px; --alfred-rozvinuti-od: .21; /* 56/266 — náběh dál začíná přesně ve velikosti kolečka */ } /* ── Alfréd listuje v knize, dokud hledá odpověď ───────────────────────────── Snímky jsou v DOMu pořád (viz AlfredRoh.razor), tady se jen střídají. Spouští je značka `.alfred-pracuje`, kterou vykresluje chat — postava sama zůstává statická (ADR-0078). Čtyři fáze po 300 ms: otevřená kniha → tři fáze otočení stránky. `steps(1, end)` = přepnutí sprite bez prolnutí; prolnutí by z otočené stránky udělalo duchy dvou stránek přes sebe. */ .alfred-roh-kniha { position: absolute; left: 0; bottom: 0; opacity: 0; } body:has(.alfred-pracuje) .alfred-roh-hrdina .alfred-roh-idle, body:has(.alfred-pracuje) .alfred-roh-hrdina .alfred-roh-mrk { opacity: 0; animation: none; } body:has(.alfred-pracuje) .alfred-roh-k0 { animation: alfred-kniha-f0 1200ms steps(1, end) infinite; } body:has(.alfred-pracuje) .alfred-roh-k1 { animation: alfred-kniha-f1 1200ms steps(1, end) infinite; } body:has(.alfred-pracuje) .alfred-roh-k2 { animation: alfred-kniha-f2 1200ms steps(1, end) infinite; } body:has(.alfred-pracuje) .alfred-roh-k3 { animation: alfred-kniha-f3 1200ms steps(1, end) infinite; } @keyframes alfred-kniha-f0 { 0% { opacity: 1; } 25%, 100% { opacity: 0; } } @keyframes alfred-kniha-f1 { 0% { opacity: 0; } 25% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes alfred-kniha-f2 { 0% { opacity: 0; } 50% { opacity: 1; } 75%, 100% { opacity: 0; } } @keyframes alfred-kniha-f3 { 0% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; } } /* Bez pohybu se nelistuje — ale Alfréd přesto DRŽÍ KNIHU, ať je i tak poznat, že pracuje. */ @media (prefers-reduced-motion: reduce) { body:has(.alfred-pracuje) .alfred-roh-kniha { animation: none; } body:has(.alfred-pracuje) .alfred-roh-k0 { opacity: 1; } } /* ── Zbytek obrazovky po dobu hledání ustoupí ──────────────────────────────── Zašednutí je jen POLOVINA práce: neaktivní musí být i pro klávesnici, a to dělá atribut `inert`, který stránka nasazuje ze stavu chatu (Asistent.razor). CSS sem kreslí to, co `inert` samo neukáže. */ .asi-blok { transition: opacity 200ms ease, filter 200ms ease; } .asi-blok[inert] { opacity: .38; filter: grayscale(.75); }