/* Společná lišta nad polem pro psaní (core/live-bar.js): Anketa, Gamba a Točka. Záložky jen při víc položkách;
   mají přirozenou šířku a zkracují se, až když se nevejdou (min. 80 px, vybraná 94 px). Přetečení napoví vyblednutí
   okraje + šipka jen na té straně, kde je další obsah (kolečko a tažení řadu posouvají). Sdílené addonem i webem. */
#live-bar { padding: 0 8px; }
#live-bar.hidden, .uc-lb-slot.hidden { display: none; }
.uc-lb-strip:empty { display: none; }
.uc-lb-strip { margin-top: 6px; }
.uc-lb-tw { position: relative; }
.uc-lb-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; cursor: grab;
  --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  transition: --fl .2s, --fr .2s;
}
.uc-lb-tabs::-webkit-scrollbar { display: none; }
.uc-lb-tabs.drag { cursor: grabbing; scroll-behavior: auto; }
.uc-lb-tw.can-l .uc-lb-tabs { --fl: 34px; }
.uc-lb-tw.can-r .uc-lb-tabs { --fr: 34px; }
@property --fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fr { syntax: '<length>'; inherits: false; initial-value: 0px; }

.uc-lb-nav {
  position: absolute; top: 50%; z-index: 2; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); background: #1b1b20; color: #efeff1;
  font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1; display: grid; place-items: center; padding: 0 0 2px; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.uc-lb-nav.l { left: -2px; transform: translateX(-4px); }
.uc-lb-nav.r { right: -2px; transform: translateX(4px); }
.uc-lb-tw.can-l .uc-lb-nav.l, .uc-lb-tw.can-r .uc-lb-nav.r { opacity: 1; pointer-events: auto; transform: none; }
.uc-lb-nav:hover { background: #26262d; }

.uc-lb-tab {
  flex: 0 1 auto; min-width: 80px; max-width: 100%;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px;
  font: inherit; font-size: 11px; font-weight: 700; color: #a2a2ad; white-space: nowrap; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 255, 255, .12);
  --lb: #3aa0ff;
}
.uc-lb-tab.uc-lb-k-gamba { --lb: #a970ff; }
.uc-lb-tab.uc-lb-k-gw { --lb: #ff8c00; }
.uc-lb-tab svg { flex: none; width: 13px; height: 13px; color: var(--lb); }
.uc-lb-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-lb-tab:hover { color: #efeff1; border-color: rgba(255, 255, 255, .24); }
.uc-lb-tab.on {
  min-width: 94px; color: #efeff1;
  border-color: color-mix(in srgb, var(--lb) 70%, transparent);
  background: color-mix(in srgb, var(--lb) 14%, transparent);
}
/* Posuvné zvýraznění vybrané záložky (core/slide-indicator.js): rámeček + pozadí v barvě druhu (anketa modrá,
   gamba fialová, točka oranžová) přejede ~180 ms z jedné záložky na druhou; vybraná záložka vlastní pozadí nekreslí. */
.uc-lb-tabs.uc-slide-host { isolation: isolate; }
.uc-lb-tabs.uc-slide-host > .uc-lb-tab { position: relative; z-index: 1; }
.uc-lb-tabs.uc-slide-host > .uc-lb-tab.on, .uc-lb-tabs.uc-slide-host > .uc-lb-tab.on:hover { background: transparent; border-color: transparent; }
.uc-lb-tabs > .uc-slide-ind.uc-lb-ind {
  --lb: #3aa0ff;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lb) 70%, transparent);
  background: color-mix(in srgb, var(--lb) 14%, transparent);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), width .18s cubic-bezier(.2, .8, .2, 1), height .18s cubic-bezier(.2, .8, .2, 1),
    border-color .18s ease, background-color .18s ease, opacity .15s ease;
}
.uc-lb-tabs > .uc-slide-ind.uc-lb-ind.uc-lb-k-gamba { --lb: #a970ff; }
.uc-lb-tabs > .uc-slide-ind.uc-lb-ind.uc-lb-k-gw { --lb: #ff8c00; }
.uc-lb-tabs > .uc-slide-ind.uc-lb-ind.uc-slide-noanim { transition: opacity .15s ease; }
/* Skončená položka (výsledek / zrušeno) ztlumená. */
.uc-lb-s-ended:not(.on), .uc-lb-s-resolved:not(.on), .uc-lb-s-cancelled:not(.on) { opacity: .7; }
.uc-lb-new { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #ffd93d; box-shadow: 0 0 6px rgba(255, 217, 61, .6); }
/* Jedno okno (pokyn usera 2026-10-10): rámeček, pozadí a záře kreslí kontejner `.uc-lb-body`, ne karty modulů —
   při přepnutí se okno přetvoří (výška přejede, obsah se prolne na místě) a barva druhu se plynule přelije
   (`--lb-accent` je registrovaná barva → přechod interpoluje; gamba fialová, točka oranžová, anketa modrá,
   vyhodnocená anketa zelená). Rámeček jen když je v okně vidět obsah (slot modulu bez `hidden`). */
@property --lb-accent { syntax: '<color>'; inherits: true; initial-value: #3aa0ff; }
.uc-lb-body { --lb-accent: #3aa0ff; transition: --lb-accent .22s ease; }
.uc-lb-body[data-kind="gamba"] { --lb-accent: #9146ff; }
.uc-lb-body[data-kind="gw"] { --lb-accent: #ff8a00; }
.uc-lb-body[data-kind="poll"]:has(> .uc-lb-pane:not([hidden]) .uc-poll--ended) { --lb-accent: #6be38a; }
.uc-lb-body:has(> .uc-lb-pane:not([hidden]) > .uc-lb-slot:not(.hidden)) {
  margin: 6px 0 2px; border: 1px solid color-mix(in srgb, var(--lb-accent) 50%, transparent); border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lb-accent) 15%, transparent), color-mix(in srgb, var(--lb-accent) 4%, transparent)), #18181b;
  box-shadow: 0 0 14px color-mix(in srgb, var(--lb-accent) 18%, transparent);
}
.uc-lb-strip:not(:empty) + .uc-lb-body:has(> .uc-lb-pane:not([hidden]) > .uc-lb-slot:not(.hidden)) { margin-top: 5px; }
/* Karty modulů uvnitř okna vlastní rámeček / pozadí / záři nekreslí, nadpis a ikona druhu berou barvu okna. */
.uc-lb-body .uc-gb, .uc-lb-body .uc-gw, .uc-lb-body .uc-poll { margin: 0; border-color: transparent; background: transparent; box-shadow: none; }
.uc-lb-body .uc-gb-title, .uc-lb-body .uc-gw-title { color: color-mix(in srgb, var(--lb-accent) 70%, #fff); }
.uc-lb-body .uc-gb-hico, .uc-lb-body .uc-gw-ico { color: var(--lb-accent); }
@media (prefers-reduced-motion: reduce) {
  .uc-lb-tabs { scroll-behavior: auto; transition: none; } .uc-lb-nav { transition: none; }
  .uc-lb-tabs > .uc-slide-ind.uc-lb-ind, .uc-lb-tabs > .uc-slide-ind.uc-lb-ind.uc-slide-noanim { transition: none; }
  .uc-lb-body { transition: none; }
}