/* extension/stash.css — zůstatek stash a gigantický emote (core/stash.js). Načítá addon (sidepanel.html) i web (@ext). */
/* Ikona stash všude aspoň 28 × 28 (pokyn usera 2026-10-05), na kartě Profilu 42 × 42. */
.uc-stash-ico { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; display: inline-block; }
.uc-stash-bal { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12px; color: var(--text-primary); }
/* Gigantický emote na stejném řádku jako jméno, hlavička zprávy svisle na střed obrázku (jako v Profilu, pokyn usera 2026-10-05). */
.uc-giant-emote { display: inline-block; vertical-align: middle; height: 128px; max-width: 100%; width: auto; object-fit: contain; margin: 2px 0; }
.msg.uc-giant-msg > .pi, .msg.uc-giant-msg > .pi-origin, .msg.uc-giant-msg > .ts, .msg.uc-giant-msg > .bdg, .msg.uc-giant-msg > .un { vertical-align: middle; }
.uc-ep-giant-btn { flex: 0 0 auto; width: 32px; height: 32px; margin-left: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-tertiary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; position: relative; }
.uc-ep-giant-btn { color: var(--text-secondary); transition: color 0.15s ease, border-color 0.15s ease; }
.uc-ep-giant-btn:hover { color: var(--text-primary); }
.uc-ep-giant-btn.on { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.45) inset; }
.uc-ep-giant-btn.locked { opacity: 0.55; }
/* `display: inline-flex` výš by přebilo atribut hidden → tlačítko by bylo vidět i u kanálu bez giganta (McCitron 2026-10-08). */
.uc-ep-giant-btn[hidden] { display: none; }
.uc-ep-giant-btn svg { width: 18px; height: 18px; display: block; }
.uc-ep-search.has-tool { display: flex; align-items: center; }
.uc-ep-search.has-tool input { flex: 1 1 auto; min-width: 0; }
.uc-ep.giant-mode .uc-ep-body img { outline: 1px dashed rgba(255, 140, 0, 0.35); border-radius: 4px; }
/* Profil: sloupec vpravo nahoře — suma darů a pod ní zůstatek stash (větší ikona). */
.uc-uh-side { flex: none; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.uc-uh-stash { cursor: default; }
.uc-uh-stash .uc-stash-bal { font-size: 15px; gap: 5px; }
.uc-uh-stash .uc-stash-ico { width: 42px; height: 42px; }
.uc-uh-stash[hidden] { display: none; }
/* Stash za sledování (core/stash-watch.js, v2 2026-10-06): ikona v SVG kroužku průběhu + text; připraveno = tlačítko
   „Vyzvednout …“ v gradientu druhu (online / offline, barvy streamera --sw-a → --sw-b). Sdílí addon (řádek u pole) i web.
   Kroužek: tlumená stopa (zamčené úseky šedé, odemčené tlumený gradient), průběh = gradient start → end → start po
   obvodu (bez švu) maskovaný délkou; mezery mezi úseky aktivity. Barvy stopy z currentColor → čitelné na tmavém i světlém. */
.uc-sw { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; position: relative; user-select: none; -webkit-user-select: none;   /* pilulka je ovládací prvek, čas se neoznačuje (pokyn usera 2026-10-11) */
  /* Jemný stín pod pilulkou i tlačítkem (pokyn usera 2026-10-06; UnityChat má jen tmavé pozadí), rozměr nemění. */
  --sw-drop: 0 2px 6px rgba(0, 0, 0, 0.35), 0 5px 14px rgba(0, 0, 0, 0.18); }
.uc-sw[hidden] { display: none; }
/* Geometrie (pokyn usera 2026-10-06): výška = průměr kroužku (34 px), levý konec = kroužek. Pilulka: vnější hrana
   kroužku = levá / horní / dolní hrana pilulky (bez šedého lemu). Tlačítko: tmavý kruh s ikonou na stejném místě
   a stejně velký jako vnitřek kroužku, gradient kolem něj lem v tloušťce tahu kroužku (RING.s.sw 3,5 z 34). */
.uc-sw-pill, .uc-sw-claim { display: inline-flex; align-items: center; gap: 5px; height: 34px; box-sizing: border-box; border-radius: 17px; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
  /* Stín přesahuje řádek do pole pro psaní: z-index 1 nad #input-area (viz záře tlačítka níže). */
  position: relative; z-index: 1; }
.uc-sw-pill { padding: 0 9px 0 0; background: color-mix(in srgb, currentColor 6%, transparent); color: var(--text-primary, #e4e4ea); cursor: pointer; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; box-shadow: var(--sw-drop); }
.uc-sw-ring { position: relative; display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; flex-shrink: 0; }
.uc-sw-ring > .uc-swr { position: absolute; inset: 0; width: 100%; height: 100%; }
.uc-sw-ring > :not(.uc-swr) { position: relative; }
.uc-sw-ring .uc-sw-ico { width: 24px; height: 24px; border-radius: 50%; }
.uc-sw-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--sw-a, #ff8c00), var(--sw-b, #ffd93d)); }
/* SVG kroužek: zamčené úseky (currentColor tlumeně), odemčená stopa = tlumený gradient, průběh plný s jemnou září. */
.uc-swr { display: block; overflow: visible; }
.uc-swr-locked { opacity: 0.16; }
.uc-swr-track { opacity: 0.3; }
.uc-swr-fill { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.35)); }
.uc-swr-p { transition: stroke-dasharray 1s linear; }
.uc-swr-lock { transition: color 0.4s ease; }
.uc-swr-lock.closed { color: currentColor; opacity: 0.5; }
/* Neběží / čeká / čas stojí: kroužek ztlumený, text dál čitelný. */
.uc-sw-wait .uc-swr, .uc-sw-paused .uc-swr { opacity: 0.6; }
.uc-sw-activity .uc-swr-fill { opacity: 0.75; }
.uc-sw-activity .uc-sw-txt { opacity: 0.75; }
/* Kroužek = tlačítko panelu, text = přepínač zůstatek ↔ časovač (varianta B, docs/mockups/2026-10-26-plisen-panel.html,
   core watchPillClick). Najetí na kroužek láká ke kliknutí: zvětšení s pružinou, zesvětlení, záře a obíhající oblouk;
   stisk ho zmáčkne, při otevřeném panelu zůstane podsvícený. Text se při najetí jen malinko zvětší (bez posunu okolí). */
.uc-sw-pill { cursor: default; }
.uc-sw-pill .uc-sw-ring, .uc-sw-pill .uc-sw-txt { cursor: pointer; }
.uc-sw-pill .uc-sw-ring { z-index: 1; transition: transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.25s, filter 0.25s; }
.uc-sw-pill .uc-sw-ring::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; opacity: 0; scale: 0.85;
  background: conic-gradient(transparent 0 55%, color-mix(in srgb, var(--sw-a, #ff8c00) 80%, transparent) 75%, var(--sw-b, #ffd93d) 92%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  transition: opacity 0.25s, scale 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); animation: uc-sw-orbit 1.1s linear infinite; animation-play-state: paused; }
.uc-sw-pill .uc-sw-txt { display: inline-block; transform-origin: left center; transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1); }
#stash-watch.uc-sw-open .uc-sw-pill:not(.uc-sw-out) .uc-sw-ring { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sw-b, #ffd93d) 75%, transparent), 0 0 10px color-mix(in srgb, var(--sw-a, #ff8c00) 50%, transparent); }
@media (hover: hover) {
  .uc-sw-pill:not(.uc-sw-out) .uc-sw-ring:hover { transform: scale(1.16); filter: brightness(1.18) saturate(1.25);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sw-b, #ffd93d) 90%, transparent), 0 0 12px 2px color-mix(in srgb, var(--sw-a, #ff8c00) 70%, transparent), 0 0 26px 4px color-mix(in srgb, var(--sw-b, #ffd93d) 32%, transparent); }
  .uc-sw-pill:not(.uc-sw-out) .uc-sw-ring:hover::after { opacity: 1; scale: 1; animation-play-state: running; }
  .uc-sw-pill:not(.uc-sw-out) .uc-sw-ring:active { transform: scale(1.04); transition-duration: 0.08s; }
  .uc-sw-pill:not(.uc-sw-out) .uc-sw-txt:hover { transform: scale(1.035); }
}
@keyframes uc-sw-orbit { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .uc-sw-pill .uc-sw-ring::after { animation: none; }
  .uc-sw-pill .uc-sw-ring, .uc-sw-pill .uc-sw-txt { transition: box-shadow 0.2s, filter 0.2s; }
  .uc-sw-pill:not(.uc-sw-out) .uc-sw-ring:hover, .uc-sw-pill:not(.uc-sw-out) .uc-sw-txt:hover { transform: none; }
}
/* Tlačítko: gradient druhu, písmo podle světlosti barev (--sw-ink), pulzující záře v barvě druhu. Levý konec = plný
   tlumený kroužek (55 % koncové barvy druhu na tmavém, tloušťka tahu kroužku 3,5 px) — gradient tlačítka začíná až
   ve středu kroužku (background 17 px zleva), takže vlevo / nahoře / dole za kroužkem nevykoukne (pokyn usera 2026-10-06). */
.uc-sw-claim { padding: 0 12px 0 0; border: 0; cursor: pointer; color: var(--sw-ink, #fff);
  background: linear-gradient(90deg, var(--sw-a, #00db84), var(--sw-b, #00b870)) 17px 0 / calc(100% - 17px) 100% no-repeat;
  overflow: hidden;
  box-shadow: 0 0 10px color-mix(in srgb, var(--sw-a, #00db84) 45%, transparent), var(--sw-drop); animation: uc-sw-pulse 1.6s ease-in-out infinite; transition: filter 0.15s ease;
  /* Záře (až 14 px) přesahuje řádek (4 px padding) do pole pro psaní pod ním. Neořezává ji overflow, ale přebarví ji
     #input-area (position: relative, neprůhledné pozadí, v DOM později) — addon (#tw-credits) i web (#sw-row) stejně.
     z-index 1 (společné pravidlo výše) ji vykreslí nad ním; panely u pole (z-index 2+) a tooltip (31) zůstávají nahoře. */ }
/* Ikona na tmavém kruhu, okraj = tlumená koncová barva druhu, 2,5 px (sweet spot podle usera; původní tlačítko mělo 2 px; vnější hrana = hrana tlačítka,
   34 px; tmavý kruh 29 px). V přechodu z průběhu tmavý kruh doroste z 27 px (tah kroužku 3,5 px) na 29 px (pokyn usera
   2026-10-06, core animateWatchSwap). Okraj je NEPRŮHLEDNÝ (55 % barvy smíchané s tmavým #18181b = stejný odstín jako
   dřív 55 % přes tmavé pozadí): jinak v přechodu prosvítal gradient tlačítka pravou polovinou a okraj byl rozpůlený. */
.uc-sw-ring-solid { --sw-rim: color-mix(in srgb, var(--sw-b, #fff) 55%, #18181b); background: #18181b; box-shadow: inset 0 0 0 2.5px var(--sw-rim); }
/* Lesk (varianta 1, jen tlačítko): světlý přechod v horní polovině + tenká světlá hrana nahoře. Přejezd lesku jednou
   za 12 s („vyzvedni mě“), jen tlačítko; reduced motion bez přejezdu. Oba ořízne overflow tlačítka do jeho tvaru. */
.uc-sw-claim::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0) 52%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.uc-sw-claim::before { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-140%) skewX(-12deg); animation: uc-sw-shine 12s ease-in-out 1.5s infinite; }
@keyframes uc-sw-shine { 0% { transform: translateX(-140%) skewX(-12deg); } 7%, 100% { transform: translateX(330%) skewX(-12deg); } }
.uc-sw-out.uc-sw-claim::before { animation: none; display: none; }
/* Přechod průběh ↔ tlačítko (core paintWatchPill): odcházející stav dohraje pod / nad novým, nedá se kliknout. */
.uc-sw-out { position: absolute; left: 0; top: 50%; margin-top: -17px; pointer-events: none; }
.uc-sw-claim:hover { filter: brightness(1.08) saturate(1.1); }
.uc-sw-claim:focus-visible { outline: 2px solid var(--sw-b, #fff); outline-offset: 2px; }
.uc-sw-claim:disabled { cursor: progress; opacity: 0.7; animation: none; }
@keyframes uc-sw-pulse { 0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--sw-a, #00db84) 32%, transparent), var(--sw-drop); } 50% { box-shadow: 0 0 14px color-mix(in srgb, var(--sw-a, #00db84) 70%, transparent), var(--sw-drop); } }
/* „Pochlubit se“ (core createWatchBrag, varianta A od usera 2026-10-08): stejné tělo jako „Vyzvednout“ (gradient druhu,
   lesk, záře), bez kroužku, ikona bubliny. Linka odpočtu dole = světlejší odstín tlačítka (bílá v mix-blend-mode overlay). */
.uc-sw-brag { display: inline-flex; align-items: center; gap: 6px; height: 34px; box-sizing: border-box; border-radius: 17px; padding: 0 14px 0 12px; margin-left: 8px;
  border: 0; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  color: var(--sw-ink, #fff); background: linear-gradient(90deg, var(--sw-a, #bf2cdd), var(--sw-b, #7d11e8));
  box-shadow: 0 0 10px color-mix(in srgb, var(--sw-a, #bf2cdd) 40%, transparent), var(--sw-drop); transition: filter 0.15s ease; -webkit-tap-highlight-color: transparent; }
.uc-sw-brag > svg { flex: none; }
.uc-sw-brag::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0) 52%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.uc-sw-brag-t { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; background: #fff; mix-blend-mode: overlay;
  transform-origin: left center; animation: uc-sw-brag-t var(--brag-ms, 60000ms) linear var(--brag-delay, 0ms) forwards; }
@keyframes uc-sw-brag-t { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.uc-sw-brag:hover { filter: brightness(1.08) saturate(1.1); }
.uc-sw-brag:focus-visible { outline: 2px solid var(--sw-b, #fff); outline-offset: 2px; }
.uc-sw-brag:disabled { cursor: progress; opacity: 0.7; }
.uc-sw-brag-out { pointer-events: none; }

/* Tooltip: velký kroužek (148 px, tenčí tah) se zámky u úseků (do 12 úseků). Uvnitř tlačítko: obrázek / video stash,
   klik → časovač (druh / čas / cíl), další klik zpět (pokyn usera 2026-10-06). Tooltip je interaktivní (myš na něj smí). */
.uc-sb-tip.has-visual { min-width: 196px; }
.uc-sb-tip.uc-sb-tip-interactive { pointer-events: auto; }
.uc-sb-tip.uc-sb-tip-interactive:has([data-swt="toggle"]) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Most přes mezeru mezi pilulkou a tooltipem (myš ho při přejezdu neopustí). */
.uc-sb-tip.uc-sb-tip-interactive::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.uc-sb-tip-v { display: flex; justify-content: center; margin: 0 0 2px; }
.uc-swt-ring { position: relative; width: 148px; height: 148px; color: var(--text-primary, #e4e4ea); }
.uc-swt-ring > .uc-swr { position: absolute; inset: 0; width: 100%; height: 100%; }
.uc-swt-in { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; display: block; }
button.uc-swt-in { cursor: pointer; }
button.uc-swt-in:focus-visible { outline: 2px solid var(--sw-b, #fff); outline-offset: 2px; }
.uc-swt-pic, .uc-swt-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
  transition: opacity 0.32s ease, transform 0.38s cubic-bezier(0.2, 0.8, 0.3, 1.15); }
/* Video (webm ikona) má v Chromu vlastní vrstvu, jejíž roh se při čistém zvětšení / posunu přichytává na celý pixel:
   obrázek při hoveru rostl od zaseknutého rohu a co ~1 px poskočil zpět (střed pilovitě ±0,5 px, změřeno 2026-10-06,
   PNG beze změny). Nepatrné natočení (0,01°) transformaci zbaví osové zarovnanosti → bez přichytávání, střed stojí.
   Stejný seznam funkcí ve všech stavech = interpolace po funkcích. Netýká se will-change / drop-shadow (ověřeno). */
.uc-swt-pic { transform: scale(1) rotate(0.01deg); }
/* Stín bez svislého posunu: s `0 2px` byl obrys obrázku (stín v něm) o ~1,8 px pod středem kroužku (změřeno 2026-10-06). */
.uc-swt-img { width: 72px; height: 72px; object-fit: contain; display: block; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.45)); }
.uc-swt-c { opacity: 0; transform: scale(0.7); pointer-events: none; }
.uc-swt.show-timer .uc-swt-pic { opacity: 0; transform: scale(0.55) rotate(-8deg); pointer-events: none; }
.uc-swt.show-timer .uc-swt-c { opacity: 1; transform: none; }
button.uc-swt-in:hover .uc-swt-pic { transform: scale(1.05) rotate(0.01deg); }
.uc-swt.show-timer button.uc-swt-in:hover .uc-swt-pic { transform: scale(0.55) rotate(-8deg); }
.uc-swt-k { font-size: 9px; font-weight: 700; letter-spacing: 0.03em; max-width: 90px; text-align: center; white-space: nowrap; text-transform: uppercase; color: var(--text-secondary, #a0a0b0); }
.uc-swt-v { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 2px 0 1px; background: linear-gradient(90deg, var(--sw-a), var(--sw-b)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 5px color-mix(in srgb, var(--sw-a, #ff8c00) 45%, transparent)); }
.uc-swt-n { font-size: 11px; color: var(--text-secondary, #a0a0b0); font-variant-numeric: tabular-nums; }
/* Stavový řádek aktivity v tooltipu (core watchActivityStatus + renderIconTip `status`): ikona v kroužku, titulek,
   podtext vždy na jeden řádek. UnityChat má jen tmavé pozadí. */
.uc-sws { --sws-ok: color-mix(in srgb, #3ddc84 85%, var(--text-primary, #efeff1)); --sws-stop: color-mix(in srgb, #ff6b6b 85%, var(--text-primary, #efeff1));
  display: flex; align-items: center; gap: 9px; margin: 6px 0 4px; font-size: 12px; min-width: 0; }
.uc-sws-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.uc-sws-ic svg { display: block; }
.uc-sws-x { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.uc-sws-t { font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.uc-sws-d { font-size: 11px; line-height: 1.25; margin-top: 1px; color: var(--text-secondary, #a0a0b0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-sws-reserve .uc-sws-ic { color: var(--sws-ok); background: color-mix(in srgb, var(--sws-ok) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sws-ok) 45%, transparent), 0 0 10px color-mix(in srgb, var(--sws-ok) 35%, transparent); }
.uc-sws-reserve .uc-sws-t { color: var(--sws-ok); }
.uc-sws-last, .uc-sws-early { --sws-warn: var(--sw-b, #ffd93d); }
.uc-sws-last .uc-sws-t, .uc-sws-early .uc-sws-t { color: var(--sws-warn); }
.uc-sws-last .uc-sws-ic, .uc-sws-early .uc-sws-ic { color: var(--sws-warn);
  background: linear-gradient(140deg, color-mix(in srgb, var(--sw-a, #ff8c00) 28%, transparent), color-mix(in srgb, var(--sw-b, #ffd93d) 18%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw-a, #ff8c00) 55%, transparent), 0 0 10px color-mix(in srgb, var(--sws-warn) 35%, transparent); }
/* Odpočet jako počítadlo (core odometer.js, varianta A vybraná userem 2026-10-06): slot číslice pevné šířky 1ch
   (tabular-nums), během animace svisle oříznutý; odcházející číslice jen v ::before (textContent = aktuální čas). */
.uc-odo { display: inline-flex; align-items: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; }
.uc-odo-s { position: relative; display: inline-block; width: 1ch; text-align: center; }
.uc-odo-s > i { font-style: normal; display: block; }
.uc-odo-s > i.uc-odo-o { position: absolute; left: 0; right: 0; top: 0; }
.uc-odo-s > i[data-d]::before { content: attr(data-d); }
.uc-odo-s.uc-odo-run { overflow: clip; clip-path: inset(0 -8px); }
.uc-odo-gone { overflow: hidden; }
.uc-sws-stalled .uc-sws-ic { color: var(--sws-stop); background: color-mix(in srgb, var(--sws-stop) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sws-stop) 50%, transparent), 0 0 10px color-mix(in srgb, var(--sws-stop) 35%, transparent); }
.uc-sws-stalled .uc-sws-t { color: var(--sws-stop); }
/* Tooltip za sledování je o 1/3 větší než ostatní tooltipy ikon (pokyn usera 2026-10-06: velikost jako v renderu —
   render byl v měřítku 2, panel u usera 1,5 → 2 / 1,5; modifikátor z watchTipState `tipClass`, soundboard beze změny).
   V úzkém panelu ho drží max-width, vodorovně ho posune createIconTip (above-start). */
.uc-sb-tip.uc-sb-tip-watch { min-width: min(315px, calc(100% - 8px)); max-width: min(373px, calc(100% - 8px)); padding: 11px 13px; border-radius: 9px; font-size: 16px; line-height: 1.35; }
/* Bez výběru textu (pokyn usera 2026-10-06): klik / dvojklik kamkoli do tooltipu přepíná obrázek ↔ časovač, výběr
   časovače v kroužku („MIMO STREAM 6:00 z 6 h“) ani řádků nedává smysl. */
.uc-sb-tip-watch, .uc-sb-tip-watch *, .uc-swt, .uc-swt * { -webkit-user-select: none; user-select: none; }
.uc-sb-tip-watch .uc-sb-tip-badge { height: 22px; padding: 0 10px 0 8px; gap: 6px; font-size: 12px; }
.uc-sb-tip-watch .uc-sb-tip-badge > i { width: 8px; height: 8px; }
.uc-sb-tip-watch .uc-sb-tip-t:not(:last-child) { margin-bottom: 4px; }
.uc-sb-tip-watch .uc-sb-tip-v { margin: 0 0 3px; }
.uc-sb-tip-watch .uc-swt-ring { width: 198px; height: 198px; }
.uc-sb-tip-watch .uc-swt-in { width: 122px; height: 122px; margin: -61px 0 0 -61px; }
.uc-sb-tip-watch .uc-swt-img { width: 96px; height: 96px; }
/* Zámek dole u spodní hrany kroužku (3, 5… úseků): mezera pod kroužkem, ať nelepí na řádek aktivity / pruhu (pokyn
   usera 2026-10-06). Bez zámků a se zámky po stranách bez mezery; při přepnutí druhu šipkou přejede. */
.uc-sb-tip-watch .uc-swt { transition: padding-bottom 0.3s ease; }
.uc-sb-tip-watch .uc-swt.uc-swt-lock-low { padding-bottom: 14px; }   /* spodní zámek odsazený od kroužku (lockR 61) přesahuje box SVG */
.uc-sb-tip-watch .uc-swt-k { font-size: 12px; max-width: 120px; }
.uc-sb-tip-watch .uc-swt-v { font-size: 28px; margin: 3px 0 1px; }
.uc-sb-tip-watch .uc-swt-n { font-size: 15px; }
.uc-sb-tip-watch .uc-sws { gap: 12px; margin: 8px 0 5px; font-size: 16px; }
.uc-sb-tip-watch .uc-sws-ic { width: 35px; height: 35px; }
.uc-sb-tip-watch .uc-sws-ic svg { transform: scale(1.33); }
.uc-sb-tip-watch .uc-sws-d { font-size: 15px; }
.uc-sb-tip-watch .uc-sbsw { margin-top: 8px; }
.uc-sb-tip-watch .uc-sbsw.multi { grid-template-columns: 32px minmax(0, 1fr) 32px; margin-left: -5px; margin-right: -5px; }
.uc-sb-tip-watch .uc-sbsw-a { width: 32px; height: 32px; }
.uc-sb-tip-watch .uc-sbsw-a svg { width: 19px; height: 19px; }
.uc-sb-tip-watch .uc-sbsw-s { gap: 5px; }
.uc-sb-tip-watch .uc-sbsw-s i { height: 4px; }
.uc-sb-tip-watch .uc-sb-tip-r { margin-top: 7px; }
.uc-sb-tip-watch .uc-sb-tip-r .uc-stash-ico { width: 37px; height: 37px; }
/* Plynulé změny stavu (pokyn usera 2026-10-06): řádek aktivity se ztlumí, když je šipkami zvolený Mimo stream (týká se
   sledování živého streamu), barvy řádku přejedou; kopie časovače při prolnutí druhu je jen vizuální. */
.uc-sb-tip-watch .uc-sws { transition: opacity 0.3s ease, filter 0.3s ease; }
.uc-sb-tip-watch .uc-sws-t, .uc-sb-tip-watch .uc-sws-ic { transition: color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; }
.uc-sb-tip-watch[data-sw-key="offline"] .uc-sws { opacity: 0.4; filter: saturate(0.25); }
.uc-swt-c-out { pointer-events: none; }
/* Popisek pruhu neurčuje šířku tooltipu — přepnutí druhu (jiná délka textu) jinak tooltipem škubne. */
.uc-sb-tip-watch .uc-sbsw-vp { contain: inline-size; }
/* Šipky přepínače po stranách uprostřed výšky horní části + tečky pod dlaždicemi (varianta D, spec 2026-10-18-bonus-plisne
   §3.3, maketa .tip.d / .dside / .ddots). Šipky jsou v DOM pořád v řádku pruhu (.uc-sbsw), umístěné vůči .uc-sb-tip-main. */
.uc-sb-tip-watch .uc-sb-tip-main { position: relative; }
.uc-sb-tip-watch.has-sides:not(.is-alt) { --pi: 22px; padding-left: 22px; padding-right: 22px; }
.uc-sb-tip-watch.has-foot:not(.is-alt) { padding-bottom: 0; }
.uc-sb-tip-watch.is-alt { --pi: 14px; padding: 14px 14px 13px; }
/* Jen vitrína (za sledování vypnuté): šířka jako tooltip s časovačem. */
.uc-sb-tip.uc-sb-tip-watch.alt-only { width: min(315px, calc(100% - 8px)); }
.uc-sb-tip-watch.has-sides .uc-sbsw.multi { grid-template-columns: minmax(0, 1fr); margin-left: 0; margin-right: 0; }
.uc-sb-tip-watch.has-sides .uc-sbsw.multi .uc-sbsw-vp { grid-column: 1; }
.uc-sb-tip-watch.has-sides .uc-sbsw-a { position: absolute; top: 50%; z-index: 5; width: 18px; height: 64px; border-radius: 8px; transform: translateY(-50%); color: #c7c7d0; transition: background 0.2s, color 0.2s; }
.uc-sb-tip-watch.has-sides .uc-sbsw-a::before { inset: -4px -6px; }
.uc-sb-tip-watch.has-sides .uc-sbsw-a-prev { left: -20px; }
.uc-sb-tip-watch.has-sides .uc-sbsw-a-next { right: -20px; }
.uc-sb-tip-watch.has-sides .uc-sbsw-a:hover { background: #2c2c33; color: #fff; }
.uc-sb-tip-watch.has-sides .uc-sbsw-a:active { transform: translateY(-50%) scale(0.9); }
.uc-sb-tip-watch.has-sides .uc-sbsw-a svg { width: 18px; height: 18px; }
.uc-sbsw-dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0 2px; }
.uc-sbsw-dots button { position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: #45454f; cursor: pointer; transition: width 0.3s cubic-bezier(0.22, 0.8, 0.24, 1), background 0.3s; }
.uc-sbsw-dots button::before { content: ''; position: absolute; inset: -6px -3px; }   /* větší cíl pro prst */
.uc-sbsw-dots button.on { width: 18px; background: linear-gradient(90deg, #ff8c00, #ffd93d); }
.uc-sbsw-dots button:focus-visible { outline: 2px solid #ffd93d; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .uc-sbsw-dots button, .uc-sb-tip-watch.has-sides .uc-sbsw-a { transition: none; } }
/* Pilulka bez za sledování (jen bonusy za donaty): ikona v tmavém kruhu s obrysem v barvách UnityChatu + zůstatek. */
.uc-sw-ring-bonus { background: #18181b; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, #ff8c00 60%, #18181b); }
@media (prefers-reduced-motion: reduce) { .uc-sb-tip-watch .uc-swt, .uc-sb-tip-watch .uc-sws, .uc-sb-tip-watch .uc-sws-t, .uc-sb-tip-watch .uc-sws-ic { transition: none; } }
@media (prefers-reduced-motion: reduce) { .uc-sw-claim { animation: none; } .uc-sw-claim::before { animation: none; display: none; } .uc-swr-p, .uc-swr-lock, .uc-swt-pic, .uc-swt-c { transition: none; } button.uc-swt-in:not([aria-pressed="true"]):hover .uc-swt-pic { transform: scale(1) rotate(0.01deg); } }

/* Oslava vyzvednutí stash za sledování (core playStashClaimBurst, jen místně). */
.uc-sw-burst-plus, .uc-sw-burst-ico { position: absolute; pointer-events: none; z-index: 30; transform: translate(-50%, -50%); }
.uc-sw-burst-plus { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 16px; color: var(--sw-b, #00f39a); white-space: nowrap;
  text-shadow: 0 0 8px color-mix(in srgb, var(--sw-a, #00db84) 70%, transparent), 0 1px 2px rgba(0, 0, 0, 0.8); animation: uc-sw-plus 1.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.uc-sw-burst-plus .uc-stash-ico { width: 28px; height: 28px; filter: drop-shadow(0 0 6px rgba(0, 219, 132, 0.6)); }
.uc-sw-burst-name { font-size: 13px; }
@keyframes uc-sw-plus {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -90%) scale(1.15); }
  30% { transform: translate(-50%, -110%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -230%) scale(1); }
}
.uc-sw-burst-ico { opacity: 0; animation: uc-sw-ico 1s cubic-bezier(0.15, 0.7, 0.35, 1) forwards; }
.uc-sw-burst-ico .uc-stash-ico { width: 22px; height: 22px; }
@keyframes uc-sw-ico {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
}
/* Pilulka po vyzvednutí krátce zapulzuje. */
.uc-sw.uc-sw-claimed { animation: uc-sw-pop 0.5s ease-out; }
@keyframes uc-sw-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .uc-sw-burst-plus { animation-duration: 1.2s; } .uc-sw.uc-sw-claimed { animation: none; } }
/* Nápověda veřejných commandů nad polem (core/command-hint.js, pokyn usera 2026-10-08): `/g …` = popis, cena, stav a živý
   náhled emotu; samotné „/“ = seznam commandů. Sedí na místě našeptávače (#emote-suggest), ten má při Tabu přednost. */
.uc-cmdh-host { position: absolute; bottom: 100%; left: 0; right: 0; z-index: 19; pointer-events: none; }
.uc-cmdh-host[hidden] { display: none; }
/* Animace jen při objevení panelu (z display:none), ne při každém překreslení obsahu během psaní. */
.uc-cmdh-host { animation: uc-cmdh-in 0.16s ease-out; }
/* Panel sám zachytí myš (hlášení usera 2026-10-09: pod ním se otevíral tooltip pilulky měny); okolí hostu propouští. */
.uc-cmdh { pointer-events: auto; }
.uc-cmdh { position: relative; margin: 0 6px 6px; padding: 10px 12px 9px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 170, 40, 0.07), rgba(255, 170, 40, 0) 55%), var(--bg-tertiary);
  border: 1px solid rgba(255, 160, 40, 0.35); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25);
  color: var(--text-primary); font-size: 12px; line-height: 1.35; }
.uc-cmdh::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-gradient, linear-gradient(180deg, #ffd23f, #ff8c00)); }
@keyframes uc-cmdh-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .uc-cmdh-host { animation: none; } }
.uc-cmdh-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.uc-cmdh-kbd { font: 700 12px/1 ui-monospace, 'JetBrains Mono', Consolas, monospace; color: #1a1205; background: linear-gradient(180deg, #ffd23f, #ff9a1a);
  padding: 4px 6px; border-radius: 5px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 150, 20, 0.35); }
.uc-cmdh-argn { font: 12px/1 ui-monospace, 'JetBrains Mono', Consolas, monospace; color: var(--text-muted); }
.uc-cmdh-title { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.uc-cmdh-price { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; flex: none; font-weight: 700; color: #ffd56a;
  padding: 2px 8px 2px 4px; border-radius: 999px; background: rgba(255, 190, 60, 0.1); border: 1px solid rgba(255, 190, 60, 0.28); }
.uc-cmdh-price .uc-stash-ico { width: 22px; height: 22px; margin: -2px 0; }
.uc-cmdh-desc { margin: 6px 0 8px; color: var(--text-secondary); }
.uc-cmdh-prev { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 8px; border-radius: 8px;
  background: radial-gradient(ellipse at center, rgba(255, 170, 40, 0.12), rgba(0, 0, 0, 0) 70%), rgba(0, 0, 0, 0.28); border: 1px dashed rgba(255, 255, 255, 0.08); }
.uc-cmdh-prev-emote { border-style: solid; border-color: rgba(255, 170, 40, 0.25); }
/* /zl remaining: skutečná karta (core zlRemainingHtml) místo popisu, bez rámečku náhledu. */
.uc-cmdh-prev-zlcard { display: block; padding: 0; min-height: 0; border: none; background: none; }
.uc-cmdh-prev-zlcard > .msg.uc-zr { margin: 0; }
.uc-cmdh-prev-zlcard > .msg.uc-kofi-msg { margin: 0; padding: 0; }
.uc-cmdh-emote { height: 128px; max-width: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); animation: uc-cmdh-pop 0.22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes uc-cmdh-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .uc-cmdh-emote { animation: none; } }
.uc-cmdh-name { font-weight: 700; color: var(--text-primary); max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-cmdh-ph { color: var(--text-muted); font-style: italic; text-align: center; }
.uc-cmdh-bad { color: #ff8a80; font-style: normal; }
.uc-cmdh-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 18px; }
.uc-cmdh-st { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.uc-cmdh-st .uc-stash-ico { width: 22px; height: 22px; margin: -2px 0; }
.uc-cmdh-ok .uc-cmdh-st { color: var(--text-secondary); }
.uc-cmdh-warn .uc-cmdh-st { color: #ffcc66; }
.uc-cmdh-err .uc-cmdh-st { color: #ff8a80; }
.uc-cmdh-send { margin-left: auto; flex: none; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.uc-cmdh-key { font: 600 10px/1 ui-monospace, Consolas, monospace; color: var(--text-secondary); padding: 3px 5px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-width: 2px; }
.uc-cmdh-list { padding-bottom: 8px; }
.uc-cmdh-cap { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.uc-cmdh-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.uc-cmdh-rt { color: var(--text-secondary); margin-left: 4px; }

/* /g: našeptávač emotů přímo v panelu (pokyn usera 2026-10-08) — vycentrovaná řada emotů vedle sebe, vybraný zvýrazněný,
   pod ní jméno a pořadí. Seznam našeptávače se u /g neukazuje (zakrýval panel). */
.uc-cmdh-prev-pick { flex-direction: column; gap: 6px; border-style: solid; border-color: rgba(255, 170, 40, 0.25); }
/* Náhledy jdou vybrat klikem / ťuknutím (mobil). */
.uc-cmdh-pick, .uc-cmdh-fpick { cursor: pointer; }
.uc-cmdh-pick:hover:not(.on) { border-color: rgba(255, 170, 40, 0.45); }
.uc-cmdh-picks { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; max-width: 100%; overflow: hidden; }
.uc-cmdh-pick { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; flex: none;
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease; }
.uc-cmdh-pick img { max-width: 34px; max-height: 34px; object-fit: contain; }
.uc-cmdh-pick i { font-style: normal; font-size: 9px; color: var(--text-muted, #8a8a95); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36px; }
.uc-cmdh-pick.on { background: rgba(255, 170, 40, 0.16); border-color: rgba(255, 170, 40, 0.75); transform: scale(1.12); box-shadow: 0 0 10px rgba(255, 160, 30, 0.35); }
.uc-cmdh-pickname { display: flex; align-items: baseline; gap: 8px; font-size: 12px; max-width: 100%; }
.uc-cmdh-pickname .uc-cmdh-name { max-width: 60%; font-size: 13px; }
.uc-cmdh-pickn { color: var(--text-muted, #8a8a95); font-size: 11px; }

/* `/feature` v panelu nápovědy (core/command-hint.js featureHintView, pokyn usera 2026-10-09): náhled karty featury a při
   našeptávání řada náhledů (vybraný zvýrazněný jako u /g). Karta i náhled používají třídy z intro.css. */
.uc-cmdh-prev-feature { padding: 0; border-style: solid; border-color: rgba(255, 170, 40, 0.25); overflow: hidden; }
.uc-cmdh .uc-ft { position: relative; display: block; width: 100%; min-height: 96px; border-radius: 8px; overflow: hidden; }
.uc-cmdh-prev-fpick { flex-direction: column; gap: 6px; border-style: solid; border-color: rgba(255, 170, 40, 0.25); }
.uc-cmdh-fpicks { display: flex; align-items: stretch; justify-content: center; gap: 6px; width: 100%; }
.uc-cmdh-fpick { position: relative; flex: 1 1 0; min-width: 0; max-width: 150px; height: 70px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border, #2f2f35); opacity: 0.6; transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.uc-cmdh-fpick.on { opacity: 1; border-color: rgba(255, 170, 40, 0.8); box-shadow: 0 0 10px rgba(255, 160, 30, 0.35); }
.uc-cmdh-fpick .uc-inl-thumb::after { background: linear-gradient(0deg, rgba(14, 14, 18, 0.92) 0%, rgba(14, 14, 18, 0.15) 60%); }
.uc-cmdh-ft { position: absolute; left: 6px; right: 6px; bottom: 4px; z-index: 1; font-size: 10.5px; font-weight: 700; line-height: 1.15;
  color: var(--text-primary, #efeff1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .uc-cmdh-fpick { transition: none; } }
/* Scéna náhledu je navržená pro širokou kartu → v dlaždici zmenšená na střed nad názvem, bez masky karty. */
.uc-cmdh-fpick .uc-inl-thumb { -webkit-mask-image: none; mask-image: none; background: radial-gradient(80% 90% at 50% 40%, rgba(255, 170, 40, 0.12), rgba(255, 170, 40, 0) 70%); }
.uc-cmdh-fpick .uc-inl-scene { left: 50%; right: auto; top: auto; bottom: 16px; width: 230px; height: 104px; padding: 8px; box-sizing: border-box;
  transform: translateX(-50%) scale(0.5); transform-origin: 50% 100%; transition: none; }

/* Počítadlo diváků (core/viewers.js): v tooltipu jsou řádky UnityChat web / addon klikací (mod → seznam), pokyn 2026-10-09. */
.uc-vw-tip .uc-sb-tip-r.uc-vw-list-row { cursor: pointer; border-radius: 6px; margin: 0 -6px; padding-inline: 6px; transition: background-color 0.12s ease; }
.uc-vw-tip .uc-sb-tip-r.uc-vw-list-row:hover { background: color-mix(in srgb, var(--accent, #ff8c00) 16%, transparent); }
.uc-vw-tip .uc-sb-tip-r.uc-vw-list-row:hover b { color: var(--accent-light, #ffd23f); }