/* UnityChat - Unified Chat Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-primary: #0e0e10;
  --bg-secondary: #18181b;
  --bg-tertiary: #1f1f23;
  --bg-hover: #26262c;
  --text-primary: #efeff1;
  --text-secondary: #adadb8;
  --text-muted: #848494;
  --border: #2f2f35;
  --tw: #9146ff;
  --yt: #ff0000;
  --ki: #53fc18;
  --accent: #ff8c00;
  --accent-light: #ffc800;
  --accent-gradient: linear-gradient(160deg, #ffc800, #ff8c00);
  --accent-glow: 0 0 8px rgba(255, 140, 0, 0.5);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: text;
}

/* Text tlačítek se nedá označit (pokyn usera 2026-10-08: CZ / SK v QR donu, šipka odeslání…) — platí pro addon i web. */
button, [role="button"], [role="tab"], [role="radio"], [role="menuitem"], kbd { -webkit-user-select: none; user-select: none; }
/* Dotyk: podržení zprávy = odpověď (core/long-press.js), ne označení slova + nabídka systému (pokyn usera 2026-10-11);
   kopírovat jde tlačítkem v nabídce zprávy. Pole pro psaní zůstává označitelné. */
@media (pointer: coarse) {
  #chat .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* ---- Layout sizes ---- */
body.layout-medium { font-size: 14px; }
body.layout-medium .msg { padding: 4px 12px; line-height: 1.5; }
body.layout-medium .msg .pi { width: 18px; height: 18px; }
body.layout-medium .msg .ts { font-size: 11px; }
body.layout-medium .bdg-img { height: 20px; width: 20px; }
body.layout-medium .msg .tx img.emote { height: 2.25em; }
body.layout-medium #settings .setting-row label { font-size: 12px; }
body.layout-medium #settings input[type="text"],
body.layout-medium #settings input[type="color"],
body.layout-medium #settings select,
body.layout-medium #settings button { font-size: 14px; }

body.layout-large { font-size: 16px; }
body.layout-large .msg { padding: 5px 14px; line-height: 1.5; }
body.layout-large .msg .pi { width: 20px; height: 20px; }
body.layout-large .msg .ts { font-size: 12px; }
body.layout-large .bdg-img { height: 22px; width: 22px; }
body.layout-large .msg .tx img.emote { height: 2.5em; }
body.layout-large #msg-input, body.layout-large #msg-input-ed { font-size: 14px; padding: 8px 10px; }
body.layout-large .reply-ctx { font-size: 12px; }
body.layout-large #settings .setting-row label { font-size: 13px; }
body.layout-large #settings input[type="text"],
body.layout-large #settings select { font-size: 15px; padding: 8px 10px; }
body.layout-large #settings button { font-size: 15px; padding: 8px 14px; }
body.layout-large #settings details summary { font-size: 15px; }

/* Extra velká (pokyn usera 2026-10-05): o krok nad Velkou — chat na velkém / vzdáleném monitoru. */
body.layout-xlarge { font-size: 18px; }
body.layout-xlarge .msg { padding: 6px 16px; line-height: 1.5; }
body.layout-xlarge .msg .pi { width: 23px; height: 23px; }
body.layout-xlarge .msg .ts { font-size: 13px; }
body.layout-xlarge .bdg-img { height: 25px; width: 25px; }
body.layout-xlarge .msg .tx img.emote { height: 2.6em; }
body.layout-xlarge #msg-input, body.layout-xlarge #msg-input-ed { font-size: 16px; padding: 9px 11px; }
body.layout-xlarge .reply-ctx { font-size: 14px; }
body.layout-xlarge #settings .setting-row label { font-size: 14px; }
body.layout-xlarge #settings input[type="text"],
body.layout-xlarge #settings select { font-size: 16px; padding: 9px 11px; }
body.layout-xlarge #settings button { font-size: 16px; padding: 9px 15px; }
body.layout-xlarge #settings details summary { font-size: 16px; }

/* Obrovská (pokyn usera 2026-10-09): chat +50 % oproti Extra velké (2026-10-09 zmenšeno z +100 %, bylo moc). Ovládací prvky nastavení zůstávají jako u Extra velké. */
body.layout-humongous { font-size: 27px; }
body.layout-humongous .msg { padding: 9px 24px; line-height: 1.5; }
body.layout-humongous .msg .pi { width: 35px; height: 35px; }
body.layout-humongous .msg .ts { font-size: 20px; }
body.layout-humongous .bdg-img { height: 38px; width: 38px; }
body.layout-humongous .msg .tx img.emote { height: 2.6em; }
/* Pole 24 px (1,5× Extra velké). */
body.layout-humongous #msg-input, body.layout-humongous #msg-input-ed { font-size: 24px; padding: 14px 16px; }
body.layout-humongous .reply-ctx { font-size: 21px; }
body.layout-humongous #settings { font-size: 18px; }
body.layout-humongous #settings .setting-row label { font-size: 14px; }
body.layout-humongous #settings input[type="text"],
body.layout-humongous #settings select { font-size: 16px; padding: 9px 11px; }
body.layout-humongous #settings button { font-size: 16px; padding: 9px 15px; }
body.layout-humongous #settings details summary { font-size: 16px; }

/* Monospace písmo (pokyn usera 2026-10-09): Roboto Mono přibalené v extension/fonts (OFL), bez Google Fonts za běhu. */
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/roboto-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/roboto-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
body.font-mono { font-family: 'Roboto Mono', ui-monospace, monospace; }

/* ---- Header ---- */

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  flex-shrink: 0;
}
/* Barvy hlavičky, pole a řádku s polem s nulovou specificitou (:where): vylepšený chat (core/chat-upgrade.css,
   háčky .ucfx-top / .ucfx-composer / .ucfx-in) je přebarví třídami — pravidlo s id by je přebilo. */
:where(#header) { background: var(--bg-secondary); border-bottom: 1px solid var(--border); }

#header-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdr-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: default;
}

.hdr-logo {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.5));
}


/* Countdown bar — starts 100% width, scales to 0 from the right edge over
   10s. Visible only during .auto-reveal phase. transform-origin: left
   keeps the bar "running" right-to-left as remaining time depletes. */
.hdr-logo-wrap.has-update .ut-countdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff7a00, #ffc25a);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.hdr-logo-wrap.has-update.auto-reveal .ut-countdown {
  animation: ut-countdown 10s linear forwards;
}
@keyframes ut-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Verze nahoře, [BETA] pod ní (pokyn usera 2026-10-12). */
.hdr-verbox {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 1px;
  margin-top: -2px;
}

.hdr-ver {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.hdr-beta {
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0.5;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
/* Úzký panel: co ustoupí (verze, nápis, sloučení ikon lišt, zhuštění, Obnovit / popup, diváci), řídí podle skutečné
   kolize core/layout-fit.js + layout-fit.css (nové rozvržení, spec 2026-10-30 § 4) — dřív kontejnerové dotazy tady. */
#header { gap: 6px; }
#header-title { min-width: 0; }
/* Pop-out okno addonu (sidepanel.html?popout=1): ikona „otevřít v samostatném okně“ v něm nemá smysl (spec § 1). */
body.uc-popout #btn-popout { display: none; }

#btn-bar, #btn-reconnect, #btn-popout, #btn-dump, #btn-settings {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}

.ut-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
}
.ut-version {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.ut-text {
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.ut-text code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: rgba(255, 140, 0, 0.12);
  border: 1px solid rgba(255, 140, 0, 0.3);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent);
}
.ut-text a {
  color: #ffc800;
  text-decoration: underline;
  transition: color 0.12s ease, text-shadow 0.12s ease;
}
.ut-text a:hover,
.ut-text a:focus-visible {
  color: #ffe28a;
  text-shadow: 0 0 8px rgba(255, 200, 0, 0.35);
}
.ut-explorer {
  background: #1c1c20;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
}
.ut-exp-path {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-weight: 600;
}
.ut-exp-list {
  list-style: none;
  padding: 0 0 0 10px;
  margin: 0;
  border-left: 1px dashed rgba(255, 255, 255, 0.12);
}
.ut-exp-list li {
  padding: 1px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ut-exp-highlight {
  color: var(--accent);
  font-weight: 700;
  background: rgba(255, 140, 0, 0.12);
  border-radius: 3px;
  padding: 2px 4px !important;
  margin: 2px -4px;
}
.ut-exp-arrow {
  color: var(--accent);
  animation: arrow-bounce 1.1s ease-in-out infinite;
  font-size: 12px;
}
@keyframes arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px); }
}

#btn-dump, #btn-popout {
  font-size: 14px;
}
#btn-reconnect, #btn-popout, #btn-dump { display: inline-flex; align-items: center; }
/* Diody platforem (core/platform-diodes.css): mřížka kuliček místo tečky; id pravidla hlavičky ji nesmí přebít. */
#btn-bar.uc-diodes { display: inline-grid; padding: 3px 6px; }
#btn-bar.uc-diodes[hidden] { display: none; }
#btn-reconnect:active svg { transform: rotate(-90deg); transition: transform 0.15s; }

#btn-bar:hover, #btn-reconnect:hover, #btn-popout:hover, #btn-dump:hover, #btn-settings:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ---- Počet diváků v hlavičce (core/viewers.js): ikona osoby + součet, jen když stream běží (plynule) ---- */
#header { position: relative; }
.uc-vw {
  display: inline-flex; align-items: center; gap: 4px; align-self: stretch;
  max-width: 0; padding: 0; margin: 0; opacity: 0; overflow: hidden; pointer-events: none;
  background: none; border: none; border-radius: 4px; cursor: default;
  color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: max-width .35s ease, opacity .25s ease, padding .35s ease;
}
.uc-vw.on { max-width: 110px; padding: 0 6px; opacity: 1; pointer-events: auto; cursor: pointer; }
.uc-vw:hover, .uc-vw:focus-visible { background: var(--bg-tertiary); color: var(--text-primary); }
.uc-vw-ic { display: inline-grid; color: #ff5b5b; }
/* Režimy (pokyn usera 2026-10-08): živě = osoba (červená) + součet diváků, mimo stream = stejná osoba šedá
   (core/viewers.js UC_COUNT_ICON) + počet otevřených UnityChatů. Přechod = barva se prolne, číslo zmizí a objeví. */
.uc-vw-i { grid-area: 1 / 1; display: inline-flex; transition: opacity .3s ease; }
.uc-vw-i-uc { opacity: 0; color: var(--text-muted, #8a8a95); }
.uc-vw.mode-uc .uc-vw-i-live { opacity: 0; }
.uc-vw.mode-uc .uc-vw-i-uc { opacity: 1; }
.uc-vw-num { transition: opacity .16s ease; }
.uc-vw-num.uc-vw-swap { opacity: 0; }
/* Otevřený seznam (mod / streamer): tlačítko zvýrazněné jako ostatní ikony s otevřeným panelem. */
.uc-vw.active { background: var(--bg-tertiary); color: var(--text-primary); }
.uc-vw-ax:empty { display: none; }
.uc-vw-ax { color: var(--text-muted, #8a8a95); margin-right: -2px; }
@media (prefers-reduced-motion: reduce) { .uc-vw, .uc-vw-i, .uc-vw-num { transition: none; } }
.uc-vw-tip { min-width: 200px; }
.uc-vw-tip .uc-sb-tip-r { align-items: center; }
.uc-vw-tip .uc-sb-tip-r b { text-align: right; }
/* Platforma offline: méně výrazné — šedé „offline“ bez tučného písma, logo a název ztlumené (user 2026-10-07). */
.uc-vw-tip .uc-sb-tip-r.uc-sb-tip-dim b { font-weight: 400; font-size: 11px; color: var(--text-muted, #8a8a95); }
.uc-vw-tip .uc-sb-tip-r.uc-sb-tip-dim .uc-vw-n { opacity: 0.55; }
.uc-sb-tip-r.uc-sb-tip-sep { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border); }
.uc-vw-n { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.uc-vw-logo { flex: none; width: 14px; height: 14px; background: center / contain no-repeat; }
.uc-vw-logo.tw { background-image: url(icons/platform/twitch.svg); }
.uc-vw-logo.yt { background-image: url(icons/platform/youtube.svg); }
.uc-vw-logo.ki { background-image: url(icons/platform/kick.svg); padding: 1px; box-sizing: border-box; background-origin: content-box; background-clip: content-box; }
.uc-vw-logo.uc { background-image: url(icons/icon48.png); filter: drop-shadow(0 0 3px rgba(255, 140, 0, 0.55)); }
.uc-vw-sub { display: inline-flex; margin-left: -4px; color: var(--text-secondary); }
.uc-vw-age { color: var(--text-muted, #8a8a95); font-size: 10.5px; font-weight: 400; }
.uc-vw-tip .uc-sb-tip-l { color: var(--text-muted, #8a8a95); font-size: 11px; }

/* ---- Seznam otevřených UnityChatů (core/viewers-list.js) — jen mod / streamer, panel pod počítadlem v hlavičce ---- */
.uc-vl {
  position: absolute; top: 100%; right: 8px; z-index: 32; margin-top: 4px;
  width: min(300px, calc(100% - 16px)); max-height: min(420px, 70vh);
  display: flex; flex-direction: column;
  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.uc-vl.hidden { display: none; }
.uc-vl:focus { outline: none; }
.uc-vl-h {
  display: flex; align-items: center; gap: 7px; padding: 9px 12px 8px; border-bottom: 1px solid var(--border);
  color: var(--text-primary); font-size: 12px; font-weight: 700;
}
.uc-vl-ic { display: inline-flex; filter: drop-shadow(0 0 3px rgba(255, 196, 51, 0.55)); }
.uc-vl-n { margin-left: auto; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.uc-vl-b { overflow-y: auto; padding: 4px 0 6px; }
.uc-vl-list { list-style: none; margin: 0; padding: 0; }
.uc-vl-row { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 13px; }
.uc-vl-row:hover { background: rgba(255, 255, 255, 0.04); }
.uc-vl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.uc-vl-pl, .uc-vl-cl { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.uc-vl-tag {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 9px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 10.5px; font-weight: 600;
}
.uc-vl-anon { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 7px; }
.uc-vl-anon .uc-vl-name { color: var(--text-muted, #8a8a95); font-weight: 600; }
.uc-vl-note { margin: 0; padding: 10px 12px; color: var(--text-muted, #8a8a95); font-size: 12px; }

/* ---- Settings ---- */

#settings {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Nízké okno (malý monitor): panel se smrskne do okna a posouvá se (report 2026-11-12); chat má flex-basis 0,
     takže dokud se nastavení vejde, výška se nemění. */
  flex-shrink: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#settings.hidden {
  display: none;
}

.setting-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.setting-row > label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Krátká poznámka pod volbou (např. zakázaná oznámení prohlížeče) */
.setting-note {
  font-size: 11px;
  line-height: 1.35;
  color: #ff8a80;
}
.setting-note.hidden { display: none; }
/* Vysvětlující poznámka (ne varování): šedá, např. u telemetrie výkonu. */
.setting-note.setting-note--info { color: var(--text-secondary, #9a9aa6); margin-top: 2px; }

.setting-row input[type="text"],
.setting-row select {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
}

.setting-row input[type="text"]:focus {
  border-color: var(--accent);
}

.platforms {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

/* Volba schovaná podle stavu kanálu (např. „Zvuk při nabití …“ bez zapnutého stash). */
.platform-check[hidden] { display: none !important; }
.platform-check {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px !important;
  color: var(--text-primary) !important;
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Dvě volby zvuku vedle sebe (Zvuk při zmínce | Zvuk při nabití …), na úzkém panelu se zalomí pod sebe. */
.setting-row.uc-sound-pair { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }

.platform-check input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0;
}

.badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  color: #fff;
  line-height: 14px;
}

.badge.tw, .badge.yt, .badge.ki, .badge.uco {
  display: inline-block;
  width: 18px;
  height: 18px;
  padding: 0;
  vertical-align: middle;
  background: center / contain no-repeat;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}
.badge.tw { background-image: url(icons/platform/twitch.svg); }
.badge.yt { background-image: url(icons/platform/youtube.svg); }
.badge.ki { background-image: url(icons/platform/kick.svg); }
/* „Jen UnityChat“ (menu Psát jako, badge u pole): logo UnityChatu */
.badge.uco { background-image: url(icons/icon48.png); }

.actions {
  flex-direction: row;
  gap: 6px;
}

.actions button {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
}

.actions button:hover {
  background: var(--bg-hover);
}

.btn-primary {
  background: var(--accent-gradient) !important;
  color: #000 !important;
  border-color: var(--accent) !important;
  box-shadow: var(--accent-glow);
}

.btn-primary:hover {
  filter: brightness(1.1);
}

/* "Jsem streamer" inline button — sits in the Kanály summary header */
#channels-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Nabídka přepnutí streamera — nad chatem, celá šířka, brand gradient */
#switch-offer {
  padding: 6px 10px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#switch-offer.hidden { display: none; }
#btn-switch-streamer {
  width: 100%;
  padding: 7px 12px;
  border: none;
  border-radius: 6px;
  background: var(--accent-gradient);
  color: #000;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.35);
}
#btn-switch-streamer:hover { filter: brightness(1.08); }
#btn-switch-streamer:active { transform: translateY(1px); }
/* Streamer, jehož chat UnityChat (zatím) nepodporuje: zašedlé, bez akce. */
#btn-switch-streamer.unsupported, #btn-switch-streamer:disabled { background: var(--bg-tertiary, #2a2a35); color: var(--text-muted, #8a8a99); box-shadow: none; cursor: default; filter: none; transform: none; }

/* Auto-switch loading banner (shown during reconnect to new streamer) */
.switch-banner {
  padding: 8px 14px;
  background: var(--accent-gradient);
  color: #000;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  animation: pulse 1.5s ease-in-out infinite;
}
.switch-banner.hidden { display: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ---- Nickname setting ---- */

.save-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
#input-username[readonly],
#input-channel[readonly],
#input-kick-channel[readonly],
#input-yt-channel[readonly] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-nick {
  background: var(--accent-gradient);
  color: #000;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.btn-nick:disabled { opacity: 0.5; cursor: default; }
/* ---- Collapsible channel settings ---- */

.settings-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
}
.settings-section summary {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.settings-section summary::-webkit-details-marker { display: none; }
.settings-section summary::after {
  content: '+';
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.settings-section[open] summary::after {
  content: '−';
}
.settings-section .setting-row {
  padding: 4px 10px 6px;
}
.settings-section .setting-row:last-child {
  padding-bottom: 10px;
}

/* Řádek nad polem je od nového rozvržení vždy vidět (hamburger, QR); body / bity Twitche jen s přihlášeným Twitchem. */
/* Stash za sledování patří účtu UnityChatu, ne Twitchi → řádek zůstane, body / bity / bonus Twitche ne. */
body.uc-no-twitch-login #tw-credits .tc-pill { display: none !important; }
.dev-only { display: none; }
body.uc-signed-out #email-settings { display: none; }
body.uc-dev .dev-only { display: block; }
/* Řádek jen pro moda v Dev mode (odznak podporovatele): bez Dev mode schovaný i modovi. */
body:not(.uc-dev) .uc-mod-only.dev-only { display: none !important; }
/* Bez přihlášení: celé pole pro psaní pryč, zůstane výzva #login-cta. */
#input-area .msg-input-wrap.hidden { display: none !important; }

.nick-status {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  color: var(--text-muted);
  min-height: 15px;
}
.color-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  margin-bottom: 2px;
}
.color-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.color-row input[type="color"] {
  width: 32px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px;
  background: var(--bg-secondary);
  cursor: pointer;
}
.color-row input[type="text"] {
  flex: 1;
  font-family: monospace;
  font-size: 12px;
}
.nick-status.error { color: #ff4444; }

/* ---- Dev tools ---- */

.dev-mode-row { padding-top: 4px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
/* Záložky nastavení (Účet | Rozhraní): posuvné zvýraznění jako jinde (core/slide-indicator.js). */
.settings-tabs { display: flex; gap: 4px; padding: 0 0 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.settings-tab { flex: 1; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.settings-tab:hover { color: var(--text-primary); }
.settings-tab.on { color: var(--text-primary); }
.settings-tabs.uc-slide-host > .settings-tab { position: relative; z-index: 1; }
.settings-tabs > .uc-slide-ind { border-radius: 6px; }
.settings-pane { display: flex; flex-direction: column; gap: 8px; }
.settings-pane[hidden] { display: none; }
/* Sekce nastavení (Účet / Rozhraní) a patička — jako web (#settings-menu .pm-title / .st-foot). */
.settings-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); opacity: 0.7; padding: 6px 0 0; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.settings-title:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.setting-sub { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.7; }
.settings-foot { border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 4px; padding-top: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 11px; }
.settings-links { display: flex; flex-direction: column; gap: 2px; opacity: 0.7; line-height: 1.5; }
.settings-links a { color: inherit; }
.settings-foot .author-stack { align-items: flex-end; margin: 0; text-align: right; }
/* Řádky jen pro moda (odznaky): body.uc-can-moderate je ukáže. */
.uc-mod-only { display: none !important; }
body.uc-can-moderate .uc-mod-only { display: flex !important; }
/* Výběr odznaku dárce (core/donor-badge.js donorBadgePickerHtml). */
.uc-dbp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.uc-dbp-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-tertiary); cursor: pointer; font-size: 11px; color: var(--text-secondary); transition: border-color 0.15s ease, color 0.15s ease; }
.uc-dbp-item:hover { border-color: rgba(255, 140, 0, 0.45); }
.uc-dbp-item.on { border-color: var(--accent); color: var(--text-primary); box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.35) inset; }
.uc-dbp-item input { position: absolute; opacity: 0; pointer-events: none; }
.uc-dbp-pic { display: inline-flex; width: 28px; height: 28px; }
.uc-dbp-img { width: 28px; height: 28px; display: block; }
.uc-dbp-name { white-space: nowrap; }
.uc-donor-badge { width: 20px; height: 20px; }
/* Vlastní obrázek odznaku ze Židolišty (čtverec ±10 %) — nepokřivit. */
img[data-donor-badge="custom"], video[data-donor-badge="custom"] { object-fit: contain; }
video.uc-donor-badge { display: inline-block; vertical-align: middle; background: transparent; }
/* Odznak řízený Židolištou: jen ke čtení s odkazem do dashboardu. */
.uc-dbp.uc-dbp-managed { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-secondary); }
.uc-dbp-managed .uc-dbp-name { white-space: normal; flex: 1 1 auto; min-width: 0; }
.uc-dbp-manage { color: var(--accent); text-decoration: none; white-space: nowrap; }
.uc-dbp-manage:hover { text-decoration: underline; }
/* Volba účtu „odznak podporovatele místo globálního odznaku Twitche“ + náhled vlastní zprávy (core badgeReplaceHtml). */
.badge-replace-row { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.uc-dbr { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; color: var(--text-secondary); line-height: 1.3; }
.uc-dbr input { margin: 0; accent-color: var(--accent); }
.uc-dbr-preview { border: 1px dashed var(--border); border-radius: 8px; padding: 4px 6px; background: var(--bg-tertiary); }
.uc-dbr-preview .msg.uc-badge-preview { margin: 0; pointer-events: none; }
/* Volby animace odznaku (tempo, intenzita, odstupy). */
.uc-dbp-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin-top: 8px; font-size: 11px; color: var(--text-secondary); }
.uc-dbp-opt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uc-dbp-opt select, .uc-dbp-opt input { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-size: 12px; }
.uc-dbp-opt select:focus, .uc-dbp-opt input:focus { outline: none; border-color: var(--accent); }
.uc-dbp-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; cursor: pointer; line-height: 1.3; }
.uc-dbp-check input { margin: 0; accent-color: var(--accent); }
.dev-mode-row label { font-size: 10px; color: var(--text-muted); opacity: 0.4; }
.dev-mode-row label:hover { opacity: 0.7; }
.kofi-link { font-size: 11px; color: var(--text-muted); opacity: 0.55; text-decoration: none; transition: opacity 0.15s; }
.kofi-link:hover { opacity: 0.9; color: #ff5e5b; }

/* Author credit stack — sits to the right of Dev mode checkbox */
.author-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.2;
}
.author-link {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.15s, color 0.15s;
  font-family: 'JetBrains Mono', monospace, monospace;
}
.author-link .author-by { opacity: 0.7; }
.author-link .author-name { font-weight: 600; color: var(--accent); opacity: 0.85; }
.author-link:hover { opacity: 1; }
.author-link:hover .author-name { color: #ffc800; }
.dev-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dev-tools.hidden { display: none; }
.dev-tools button {
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(255, 60, 60, 0.1);
  border: 1px solid rgba(255, 60, 60, 0.3);
  border-radius: 4px;
  color: #ff6b6b;
  cursor: pointer;
}
.dev-tools button:hover {
  background: rgba(255, 60, 60, 0.2);
}
.nick-status.success { color: #53fc18; }

/* ---- Stavová tečka ---- */

/* Stavová tečka (bez stavu = červená). Filtry platforem jsou od nového rozvržení diody v hlavičce. */
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5252;
  display: inline-block;
  flex-shrink: 0;
}

.dot.connected { background: #00e676; box-shadow: 0 0 4px #00e676; }
.dot.connecting { background: #ffc107; animation: pulse 1s infinite; }
.dot.error { background: #ff5252; }
.dot.disabled { background: #333; }
.dot.connected.offair { background: #4aa3ff; box-shadow: 0 0 4px #4aa3ff; }
.dot { transition: background-color .45s ease, box-shadow .45s ease; }
@media (prefers-reduced-motion: reduce) { .dot { transition: none; } }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ---- Chat ---- */

#chat-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  /* Vlastní vrstvení: nic uvnitř chatu (karty GIFů, reakce, Chat historie) nepřeleze panely nad polem
     pro psaní (emoty, soundboard, QR dono) ani přihlašovací okno. */
  isolation: isolate;
}

/* Překryv nad chatem: připnutá zpráva + highlights neodsouvají chat (pokyn usera 2026-10-11), zprávy jedou pod nimi.
   Prázdný překryv nebere kliky (pointer-events jen na bannerech). */
#chat-overlays { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; flex-direction: column; pointer-events: none; }
#chat-overlays > * { pointer-events: auto; }
#chat-overlays > #highlights-banner, #chat-overlays > #pinned-banner { box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }

/* Animovaný obrázek daleko mimo výřez chatu (core/in-view.js installOffscreenMedia): nekreslí se, místo zůstává. */
#chat img.uc-far { visibility: hidden !important; }

#chat {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 0;
  /* Reserve scrollbar gutter even when content doesn't overflow yet — stops
     the width change (and resulting multi-message reflow / "vibration")
     the moment chat first grows past viewport. */
  scrollbar-gutter: stable;
  /* Hard-pin overflow anchor off — browsers sometimes try to "hold" scroll
     at a message during reflows, which on fast chat reads as jitter. */
  overflow-anchor: none;
}

/* Tenký scrollbar bez šipek — JEDINÉ místo pro celý UnityChat (addon i web; audit 2026-09-29). Platí pro každý
   posuvný prvek, nový panel ho dostane sám. Na jednotlivých prvcích NEPSAT `scrollbar-width` / `scrollbar-color`:
   Chrome pak ::-webkit-scrollbar ignoruje a vykreslí systémový posuvník se šipkami (Profil, záložky kanálů). */
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border, #2f2f35); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #555; }
*::-webkit-scrollbar-button { display: none; }
*::-webkit-scrollbar-corner { background: transparent; }
/* Firefox nezná ::-webkit-scrollbar. */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--border, #2f2f35) transparent; } }

/* Timeout / ban / smazání: .uc-deleted* + .uc-mod-tag v moderation.css (core/moderation.js). */

/* ---- Loading overlay ---- */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(ellipse at center,
    rgba(20, 20, 25, 0.96) 0%,
    rgba(14, 14, 16, 0.98) 60%,
    rgba(10, 10, 13, 1) 100%);
  z-index: 50;
  pointer-events: auto;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  opacity: 1;
}
.loading-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-overlay.hidden { display: none; }

.lo-logo-stack {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lo-logo {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 0 12px rgba(255, 140, 0, 0.55));
  animation: lo-logo-pulse 1.8s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.lo-logo-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255, 140, 0, 0.45) 0%,
    rgba(255, 140, 0, 0.18) 35%,
    transparent 70%);
  animation: lo-glow-pulse 1.8s ease-in-out infinite;
  z-index: 1;
}
@keyframes lo-logo-pulse {
  0%, 100% { transform: scale(0.88); filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.45)); }
  50%      { transform: scale(1.14); filter: drop-shadow(0 0 28px rgba(255, 140, 0, 0.95)); }
}
@keyframes lo-glow-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%      { transform: scale(1.25); opacity: 1; }
}

.lo-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  position: relative;
}
/* Animated trailing dots after the label, cycling . / .. / ... */
.lo-text::after {
  content: '';
  display: inline-block;
  width: 20px;
  text-align: left;
  color: var(--accent);
  animation: lo-dots 1.4s steps(4, end) infinite;
}
@keyframes lo-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

.lo-platforms {
  display: flex;
  gap: 8px;
}
.lo-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 3px 10px;
  opacity: 0.4;
  transition: opacity 0.25s, color 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.lo-pill.lo-pulse {
  /* Currently-connecting platform pulses softly */
  animation: lo-pill-pulse 1.2s ease-in-out infinite;
  opacity: 1;
}
.lo-pill.lo-connected {
  /* Connected platform: lit, no animation, brand color */
  opacity: 1;
  animation: none;
  color: #0a0a0d;
  background: linear-gradient(135deg, #ffc25a, #ff7a00);
  border-color: transparent;
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.45);
}
@keyframes lo-pill-pulse {
  0%, 100% { background: rgba(255, 140, 0, 0.10); border-color: rgba(255, 140, 0, 0.25); color: var(--text-primary); }
  50%      { background: rgba(255, 140, 0, 0.25); border-color: rgba(255, 140, 0, 0.55); color: #ffc25a; }
}

/* Indeterminate progress bar — bouncing left-to-right slug. Using
   transform/will-change so the animation stays on the compositor
   thread even when the main thread is busy hydrating the cache. */
.lo-bar {
  width: 160px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.lo-bar > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, transparent 0%, #ff7a00 30%, #ffc25a 55%, #ff7a00 75%, transparent 100%);
  border-radius: 2px;
  transform: translateX(-100%);
  will-change: transform;
  animation: lo-bar-slide 1.35s cubic-bezier(0.55, 0.1, 0.45, 0.9) infinite;
  box-shadow: 0 0 8px rgba(255, 122, 0, 0.55);
}
@keyframes lo-bar-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(355%); }
}

/* Message */

.msg {
  position: relative;
  padding: 2px 10px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Isolate each message's layout from its neighbors — when a message's
     own content changes (emote/avatar async load, paint retint, cleared
     banner), the reflow stops at its boundary instead of cascading
     through the list as sub-pixel jitter. */
  contain: layout style;
}

.msg:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Podržení prstu (core/long-press.js): během podržení bez výběru textu a bez systémové nabídky / calloutu,
   zpráva se jemně zvýrazní (po spuštění odpověď). Jen u dotyku — třídu přidává jen pointerType 'touch'. */
.uc-lp-pressing {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.msg.uc-lp-pressing { background: rgba(255, 140, 0, 0.08); transition: background 0.3s ease 0.1s; }

/* Hover action buttons (reply etc.) */
.msg-actions {
  display: none;
  position: absolute;
  right: 4px;
  /* Float the action cluster above the message line so it doesn't sit
     on top of inline emotes the user wants to hover for the preview. */
  top: -14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 5;
}

.msg:hover .msg-actions {
  display: flex;
  gap: 0;
}

.msg-action-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  width: 20px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 3px;
  font-size: 11px;
}

.msg-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.msg-action-btn svg {
  display: block;
  width: 11px;
  height: 11px;
}

.msg .pi {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 3px;
  vertical-align: middle;
  border-radius: 3px;
  background: center / contain no-repeat;
  /* Text (TW/YT/KI) zůstává v DOM kvůli kopírování/čtečkám, vizuálně ho nahrazuje logo. */
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

.msg .pi.tw { background-image: url(icons/platform/twitch.svg); }
.msg .pi.yt { background-image: url(icons/platform/youtube.svg); }
.msg .pi.ki { background-image: url(icons/platform/kick.svg); }
/* Záloha přes UnityChat (core/uc-only.js applyUcOnlyLook): malé logo platformy, kam chtěl autor psát — zlaté jako
   u uživatelů UnityChatu (icons/platform/*-gold.svg), ale ZTMAVENÉ jako dřív (zlaté + zatmavené, pokyn usera 2026-10-08):
   zpráva na platformu nedošla, logo jen naznačuje, kam mířila. */
.msg > .pi-origin { display: inline-block; width: 11px; height: 11px; margin: 0 3px 0 -1px; vertical-align: middle; background: center / contain no-repeat; opacity: 0.55; filter: brightness(0.7) saturate(0.8); }
.msg > .pi-origin.tw { background-image: url(icons/platform/twitch-gold.svg); }
.msg > .pi-origin.yt { background-image: url(icons/platform/youtube-gold.svg); }
.msg > .pi-origin.ki { background-image: url(icons/platform/kick-gold.svg); }
/* Hlasitost zvuků v nastavení (pod „Přehrávat zvuky“) — addon i web. */
.uc-volume-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 24px; font-size: 12px; color: #adadb8; text-transform: none; letter-spacing: normal; font-weight: 400; }
.uc-volume-row input[type="range"] { flex: 1; min-width: 0; accent-color: #ff8a00; }
.uc-volume-row.disabled { opacity: .45; }
.uc-volume-val { width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* Zpráva jen přes UnityChat (core/uc-only.js): platforma ji nepřijala / nezobrazila → logo UnityChatu. */
/* Specifičtější než .msg .pi.uc.tw (zlaté logo platformy) — jinak by logo UnityChatu prohrálo. */
.msg.uc-only-msg > .pi.tw, .msg.uc-only-msg > .pi.yt, .msg.uc-only-msg > .pi.ki,
.msg.uc-only-msg > .pi.uc.tw, .msg.uc-only-msg > .pi.uc.yt, .msg.uc-only-msg > .pi.uc.ki { background-image: url(icons/icon48.png); padding: 0; filter: drop-shadow(0 0 3px rgba(255, 140, 0, 0.65)); }

/* Broadcast jako jedna zpráva (core/broadcast-group.js): místo loga platformy řada menších log všech cílů.
   Ztmavené = čeká na potvrzení, rozsvícené = kopie dorazila, vykřičník = neodesláno (tooltip s důvodem).
   Vlastní zpráva je ztmavená, dokud nedorazí první kopie. */
.msg.uc-bc > .pi { display: none; }
.msg .pi-bc { display: inline-flex; gap: 2px; margin-right: 3px; vertical-align: middle; }
.msg .pi-bc .uc-bc-slot { position: relative; display: inline-flex; }
.msg .pi-bc .pi { width: 13px; height: 13px; margin: 0; transition: opacity .3s ease, filter .3s ease; }
body.layout-medium .msg .pi-bc .pi { width: 14px; height: 14px; }
body.layout-large .msg .pi-bc .pi { width: 16px; height: 16px; }
body.layout-xlarge .msg .pi-bc .pi { width: 18px; height: 18px; }
body.layout-humongous .msg .pi-bc .pi { width: 27px; height: 27px; }
.msg .pi-bc .uc-bc-wait .pi, .msg .pi-bc .uc-bc-fail .pi { opacity: .35; filter: grayscale(.7); }
.msg .pi-bc .uc-bc-warn {
  position: absolute; right: -3px; top: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #e5484d; color: #fff;
  font: 700 8px/9px system-ui, sans-serif; text-align: center;
  pointer-events: none;
}
.msg.uc-bc-pending { opacity: .5; }
.msg.uc-bc { transition: opacity .3s ease; }
/* Kick K je plný čtverec bez vnitřního okraje → 2px padding, ať opticky sedí k ostatním */
.msg .pi.ki, .badge.ki, #active-badge.ki { padding: 2px; box-sizing: border-box; background-origin: content-box; background-clip: content-box; }

.msg .ts {
  color: var(--text-muted);
  font-size: 10px;
  margin-right: 3px;
}

/* Řádek zprávy na střed velkých písmen jména (pokyn usera 2026-10-21): vertical-align: middle míří na střed malých
   písmen, logo / čas / odznaky tak seděly o 0,07–0,19 em níž (změřeno headless, malé–XL). Posun v em písma ZPRÁVY —
   --uc-row-em se spočítá na .msg (@property), logo má font-size 0 a čas menší písmo. Odznak v3: core/badge-v3.css. */
@property --uc-row-em { syntax: '<length>'; inherits: true; initial-value: 14px; }
.msg { --uc-row-em: 1em; }
.msg .pi { position: relative; top: calc(var(--uc-row-em) * -0.11); }
.msg .ts { position: relative; top: calc(var(--uc-row-em) * -0.09); }
.msg .bdg-img, .msg .bdg-yt { position: relative; top: calc(var(--uc-row-em) * -0.16); }

/* User-toggled via settings — hides timestamps without re-rendering msgs. */
body.no-timestamps .msg .ts { display: none; }

/* User-toggled via settings — reply context on one line, rest cut with … */
body.reply-oneline .reply-ctx {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg .bdg {
  margin-right: 2px;
  display: inline;
  vertical-align: middle;
}

.bdg-img {
  height: 18px;
  width: 18px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 1px;
}
/* Vlastní ikona role ze Židolišty (core/role-badges.js): výška jako ostatní odznaky (layout / OBS), šířka podle poměru
   stran (inline aspect-ratio). Přebíjí pevnou šířku čtverců z layoutů i z OBS (body.uc-raw.uc-font). */
.bdg-img.bdg-role { width: auto !important; max-width: none; object-fit: contain; background: transparent; }
/* Odznaky YouTube (core/yt-badges.js): role jako ikona (barvy jako YouTube), členství = obrázek kanálu (.bdg-img). */
.bdg-yt {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 18px; height: 18px; margin-right: 1px;
}
.bdg-yt svg { width: 15px; height: 15px; }
body.layout-medium .bdg-yt { width: 20px; height: 20px; }
body.layout-large .bdg-yt { width: 22px; height: 22px; }
body.layout-xlarge .bdg-yt { width: 25px; height: 25px; }
body.layout-humongous .bdg-yt { width: 38px; height: 38px; }
body.layout-humongous .bdg-yt svg { width: 23px; height: 23px; }
.bdg-yt-moderator { color: #5e84f1; }
.bdg-yt-owner { color: #ffd600; }
.bdg-yt-verified { color: #aaaaaa; }

/* UnityChat user — zlaté verze log (icons/platform/*-gold.svg) + glow */
.msg .pi.uc { filter: drop-shadow(0 0 3px rgba(255, 140, 0, 0.65)); }
.msg .pi.uc.tw { background-image: url(icons/platform/twitch-gold.svg); }
.msg .pi.uc.yt { background-image: url(icons/platform/youtube-gold.svg); }
.msg .pi.uc.ki { background-image: url(icons/platform/kick-gold.svg); }

/* Custom tooltip pro platform badges — JS-positioned, viewport-clamped */
.msg .pi[data-tooltip] {
  cursor: default;
}

/* Menší varianta (datum u času zprávy). */
.uc-tooltip.small { font-size: 10px; padding: 2px 6px; font-weight: 400; }
/* Víc řádků (rozpis bonusu stashe v pruhu Rozumím). */
.uc-tooltip.multi { white-space: pre-line; line-height: 1.45; max-width: min(340px, calc(100vw - 12px)); }
.msg .ts[data-tooltip] { cursor: default; }
/* GIF zpráva: kopírování pryč (není co kopírovat), místo něj pauza / přehrání animace. */
.msg-action-btn[data-act="gifpause"] { display: none; }
.msg.has-gif .msg-action-btn[data-act="copy"] { display: none; }
.msg.has-gif .msg-action-btn[data-act="gifpause"] { display: flex; }
.msg-action-btn[data-act="gifpause"].uc-gif-paused { color: var(--accent-light, #ffb347); }
/* Obrázky v chatu (image.css): „Smazat obrázek“ jen modovi u zprávy s obrázkem, potvrzení druhým klikem jako koš. */
.msg-action-btn[data-act="imgdel"] { display: none; }
body.uc-can-moderate .msg.has-img:not(.uc-img-gone) .msg-action-btn[data-act="imgdel"] { display: flex; }
body.uc-can-moderate .msg-action-btn[data-act="imgdel"]:hover { color: #ff9a9d; }
.msg-action-btn[data-act="imgdel"].uc-del-armed { color: #fff; background: #d0342c; }
/* Příloha nad polem a karta fronty obrázků (mod) — v toku nad polem pro psaní. */
#img-attach { padding: 0 8px; }
.uc-img-queue { padding: 0 8px; }
.uc-img-queue .uc-gif-card { margin: 0 0 6px; }
.uc-gif-still { display: block; position: absolute; left: 0; top: 0; border-radius: inherit; pointer-events: none; }
.uc-gif--paused .uc-gif-media { visibility: hidden; }
.uc-tooltip {
  position: fixed;
  display: none;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}
/* Reakce na zprávy: reakce + název, pod tím jména pod sebou v barvách z chatu (core reactionTipHtml). */
.uc-rx-tip { display: grid; gap: 1px; min-width: 90px; font-size: 12px; text-align: left; }
.uc-rx-tip-h { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; padding-bottom: 4px; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-weight: 600; }
.uc-rx-tip-h .uc-rx-emo, .uc-rx-tip-h img { width: auto; height: 18px; }
.uc-rx-tip-n { font-weight: 700; color: var(--text-primary); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.uc-rx-tip-m, .uc-rx-tip-f { color: var(--text-muted); font-weight: 500; }
.uc-rx-tip-f { margin-top: 3px; font-size: 10.5px; }
.uc-tooltip.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* @mention / reply-to-you highlight */
.msg.mentioned {
  background: rgba(200, 50, 50, 0.2);
  border-left: 2px solid #cc3333;
  padding-left: 8px;
}

.msg.mentioned:hover {
  background: rgba(200, 50, 50, 0.35);
}

/* Odeslání selhalo — optimistická zpráva, která nikam nešla. Klik vloží text (a obrázek) zpět do pole, tlačítko
   „Odeslat znovu“ (core/send-failed.js) ji pošle rovnou (pokyn usera 2026-10-11). Addon i web. */
.msg.send-failed {
  background: rgba(200, 50, 50, 0.12);
  border-left: 2px solid #cc3333;
  padding-left: 8px;
  opacity: 0.75;
  cursor: pointer;
}
.msg.send-failed:hover { opacity: 1; background: rgba(200, 50, 50, 0.22); }
.msg.send-failed .sf-retry {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; vertical-align: 1px;
  border: 1px solid rgba(229, 72, 77, 0.6); border-radius: 999px; background: rgba(229, 72, 77, 0.12);
  color: #ff8a8a; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.4; cursor: pointer; white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.msg.send-failed .sf-retry:hover { background: rgba(229, 72, 77, 0.28); color: #fff; border-color: #ff6b6b; }
.msg.send-failed .sf-retry:focus-visible { outline: 2px solid #ff6b6b; outline-offset: 2px; }
.msg.send-failed .tx::after {
  content: 'neodesláno';
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e5484d;
  font-style: normal;
}

/* First-time chatter */
.msg.first-msg {
  background: rgba(145, 70, 255, 0.12);
  border-left: 2px solid #9146ff;
  padding-left: 8px;
}

.msg.first-msg:hover {
  background: rgba(145, 70, 255, 0.22);
}

/* (first-label removed — replaced by right-side .msg-tag system) */

/* Right-aligned tag line above message content */
.msg-tag-line {
  text-align: right;
  padding: 1px 4px 0 18px;
  line-height: 4pt;
}
.msg-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}
/* @mention inside message text — bold + colored to the target user's
   chat color (JS writes inline color via _processMentions). Unknown
   users fall back to default bold styling. */
.tx .mention {
  font-weight: 700;
}

.msg-tag.tag-reply { color: #cc3333; }
.msg-tag.tag-mention { color: #cc3333; }
.msg-tag.tag-first { color: #9146ff; }
.msg-tag.tag-raid { color: #ff6b6b; }
.msg-tag.tag-raider { color: #b2e63d; }
.msg-tag.tag-sus { color: #ffc107; }

/* Announcement (USERNOTICE msg-id=announcement) — callout-style block with
   bilateral accent bars (left + right) whose color/gradient is driven by
   msg-param-color. Prominent by design: stronger background, vertical
   spacing, glow, and a pulsing icon so it stands out in a fast chat. */
.msg.announcement {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  /* Left + right borders; top/bottom intentionally 0 so we can run a gradient
     across both vertical edges via border-image without ugly corner pieces. */
  border-style: solid;
  border-color: #9146ff;
  border-width: 0 5px 0 5px;
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 16px rgba(145, 70, 255, 0.18);
}

/* PRIMARY = gold shimmer gradient on both edges (warmer / premium feel
   than the rainbow). `border-image` with `slice: 1` fills each edge
   strip with the full gradient; top/bottom have zero width so there
   are no stretched corner artifacts. */
.msg.announcement[data-announcement-color="PRIMARY"] {
  border-color: transparent;
  /* Mirrored: edges darker, middle brighter — gives the strip a "lit
     from the centre" glint rather than uniform gold. */
  border-image: linear-gradient(
    180deg,
    #8a5a00 0%,
    #c98a11 20%,
    #ffd93d 45%,
    #fff1a8 50%,
    #ffd93d 55%,
    #c98a11 80%,
    #8a5a00 100%
  ) 1;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 20px rgba(255, 200, 40, 0.35);
}
.msg.announcement[data-announcement-color="BLUE"]   { border-color: #00d7ec; box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 16px rgba(0, 215, 236, 0.28); }
.msg.announcement[data-announcement-color="GREEN"]  { border-color: #00db84; box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 16px rgba(0, 219, 132, 0.28); }
.msg.announcement[data-announcement-color="ORANGE"] { border-color: #ffb31e; box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 16px rgba(255, 179, 30, 0.3); }
.msg.announcement[data-announcement-color="PURPLE"] { border-color: #9146ff; box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 16px rgba(145, 70, 255, 0.28); }

.announcement-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding-bottom: 5px;
  color: #fff;
  opacity: 0.92;
}
.announcement-icon {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(255, 175, 20, 0.5));
  animation: announcement-pulse 2.4s ease-in-out infinite;
}
.msg.announcement[data-announcement-color="PRIMARY"] .announcement-label {
  /* Mirror the border gradient: dark amber edges, bright gold center
     for consistent "lit from the middle" feel across label + border. */
  background: linear-gradient(90deg, #8a5a00, #c98a11, #ffd93d, #fff1a8, #ffd93d, #c98a11, #8a5a00);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@keyframes announcement-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(255,175,20,0.5)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(255,175,20,0.75)); }
}

/* Raid — same prominence treatment as Announcements: bilateral accent
   borders + glow + pulsing rocket icon header so it never gets lost in
   fast chat. */
.msg.raid {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.18), rgba(255, 107, 107, 0.06));
  border-style: solid;
  border-color: transparent;
  border-width: 0 5px 0 5px;
  border-image: linear-gradient(180deg, #ff4500 0%, #ff6b6b 50%, #ffaf14 100%) 1;
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 18px rgba(255, 107, 107, 0.32);
}
.msg.raid:hover {
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.26), rgba(255, 107, 107, 0.1));
}

.raid-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding-bottom: 5px;
  color: #fff;
  opacity: 0.95;
}
.raid-icon {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.55));
  animation: raid-pulse 1.6s ease-in-out infinite;
  transform-origin: center;
}
.raid-label {
  background: linear-gradient(90deg, #ffaf14, #ff4500, #ff6b6b);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.raid-count {
  margin-left: auto;
  background: rgba(255, 69, 0, 0.18);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: #ffd9c2;
  text-transform: none;
}
@keyframes raid-pulse {
  0%, 100% { transform: translateX(0) scale(1); filter: drop-shadow(0 0 4px rgba(255,107,107,0.55)); }
  40%      { transform: translateX(2px) scale(1.18); filter: drop-shadow(0 0 10px rgba(255,107,107,0.85)); }
}

/* (raid-label legacy comment removed — replaced by header system) */

/* Raider (came from raid) */
.msg.raider-msg {
  background: rgba(178, 230, 61, 0.12);
  border-left: 2px solid #b2e63d;
  padding-left: 8px;
}
.msg.raider-msg:hover {
  background: rgba(178, 230, 61, 0.22);
}

/* ==== Community highlights (hype train / gift leaderboard / pinned) ==== */
#highlights-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  /* Překryv nad chatem: pod průhledným gradientem musí být neprůhledný podklad, jinak prosvítají zprávy. */
  background: linear-gradient(135deg, rgba(0, 216, 217, 0.14), rgba(145, 70, 255, 0.1)), var(--bg-primary, #0e0e10);
  border-bottom: 1px solid rgba(0, 216, 217, 0.3);
  overflow-x: hidden;
}
#highlights-banner.hidden { display: none; }
.hl-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.92em;
  color: #e8e8ef;
  line-height: 1.35;
}
.hl-card .hl-icon { flex-shrink: 0; font-size: 1.2em; }
.hl-card .hl-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.hl-card .hl-body {
  flex: 1;
  min-width: 0;
  /* Multi-line — let the raider/gifter/whatever text wrap instead of
     being truncated with "…". 3-line clamp caps runaway captions. */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hl-card.hl-hype-train {
  background: linear-gradient(90deg, rgba(0, 216, 217, 0.3), rgba(0, 216, 217, 0.12));
  box-shadow: 0 0 10px rgba(0, 216, 217, 0.2);
}
.hl-card.hl-gift-leaderboard {
  background: linear-gradient(90deg, rgba(145, 70, 255, 0.28), rgba(145, 70, 255, 0.12));
}
/* Raid callout — full width, bilateral red→gold border, pulsing
   rocket header + structured body (raider → target + viewer count +
   points). Matches the .msg.raid chat-line treatment so the raid
   identity reads consistent across both the banner and chat. */
/* Pin highlight card — fancy amber/gold design with layered glow,
   bilateral gradient borders, pulsing pin icon, and strong contrast
   for author names (readableColor() in JS clamps dark hues). */
.hl-card.hl-pin {
  display: block;
  padding: 0;
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 183, 77, 0.10), transparent 60%),
    linear-gradient(155deg, rgba(230, 161, 26, 0.18) 0%, rgba(184, 106, 0, 0.08) 55%, rgba(120, 60, 0, 0.04) 100%);
  /* border-image breaks border-radius in Chrome (spec: ignored when
     border-image is set). Use a solid amber border + layered box-shadow
     for the gradient ring effect so the rounded corners stay smooth. */
  border: 1px solid rgba(230, 161, 26, 0.45);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 195, 80, 0.18),
    0 0 14px -2px rgba(230, 161, 26, 0.28),
    0 4px 18px -4px rgba(120, 60, 0, 0.35),
    inset 0 1px 0 rgba(255, 220, 150, 0.12),
    inset 0 -1px 0 rgba(120, 60, 0, 0.18);
  overflow: hidden;
  animation: hl-pin-glow 5s ease-in-out infinite;
}
.hl-card.hl-pin::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 195, 80, 0.55) 30%, rgba(255, 230, 150, 0.85) 50%, rgba(255, 195, 80, 0.55) 70%, transparent);
  opacity: 0.85;
  pointer-events: none;
}
@keyframes hl-pin-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 195, 80, 0.16),
      0 0 14px -2px rgba(230, 161, 26, 0.22),
      0 4px 18px -4px rgba(120, 60, 0, 0.32),
      inset 0 1px 0 rgba(255, 220, 150, 0.12),
      inset 0 -1px 0 rgba(120, 60, 0, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 210, 120, 0.30),
      0 0 22px -2px rgba(255, 195, 80, 0.45),
      0 6px 24px -4px rgba(120, 60, 0, 0.45),
      inset 0 1px 0 rgba(255, 235, 180, 0.18),
      inset 0 -1px 0 rgba(120, 60, 0, 0.18);
  }
}
.hl-pin-wrap { display: block; position: relative; }
.hl-pin-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  background: linear-gradient(180deg, rgba(255, 183, 77, 0.08), transparent);
}
.hl-pin-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: #ffc34d;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 195, 80, 0.55));
  animation: hl-pin-icon-pulse 2.6s ease-in-out infinite;
}
@keyframes hl-pin-icon-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 195, 80, 0.55)); }
  50%      { transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(255, 210, 120, 0.85)); }
}
.hl-pin-head-text {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--text-muted, #b5b5c0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-weight: 600;
}
.hl-pin-head-user {
  color: #ffc34d;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  margin-left: 2px;
  text-shadow: 0 0 8px rgba(255, 195, 80, 0.4);
}
.hl-pin-btn {
  flex-shrink: 0;
  display: inline-flex;
  width: 24px;
  height: 24px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted, #9a9aa6);
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.hl-pin-btn:hover {
  background: rgba(255, 195, 80, 0.14);
  color: #ffd680;
  transform: translateY(-1px);
}
.hl-pin-chev { transition: transform 0.22s cubic-bezier(.4,.0,.2,1); transform-origin: 12px 12px; }
.hl-pin-wrap.collapsed .hl-pin-chev { transform: rotate(-90deg); }
/* Ikona schované připnuté zprávy ve stavovém řádku hlavičky (addon btn-pin-reopen, web highlights.js): jantar jako karta pinu. */
.uc-adm-btn.uc-pin-reopen { color: #ffc34d; }   /* .uc-adm-btn (giveaway.css) se načítá později a dává šedou */
.uc-adm-btn.uc-pin-reopen svg { width: 17px; height: 17px; filter: drop-shadow(0 0 4px rgba(255, 195, 80, 0.45)); }
.hl-pin-body {
  padding: 4px 14px 12px 14px;
  overflow: hidden;
  max-height: 600px;
  transition: max-height 0.22s ease, padding 0.22s ease, opacity 0.15s ease;
}
.hl-pin-wrap.collapsed .hl-pin-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.hl-pin-body-text {
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 600;
  color: #f6f2ea;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hl-pin-body-text a {
  color: #ffc34d;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 195, 80, 0.5);
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.hl-pin-body-text a:hover {
  color: #ffdc80;
  text-decoration-color: #ffdc80;
}
.hl-pin-body-text img.emote {
  height: 1.7em;
  vertical-align: middle;
  margin: -2px 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
/* Author footer: badges + display name + timestamp. Warm divider,
   padded chip-like rows. Name uses readableColor() in JS + text-shadow
   for guaranteed contrast against the amber background. */
.hl-pin-foot {
  margin-top: 10px;
  padding: 8px 2px 2px;
  border-top: 1px solid rgba(255, 195, 80, 0.22);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, #b5b5c0);
  flex-wrap: nowrap;
  min-width: 0;
  position: relative;
}
.hl-pin-author {
  white-space: nowrap;
  flex-shrink: 0;
}
.hl-pin-time {
  flex-shrink: 0;
  white-space: nowrap;
}
.hl-pin-foot::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 120, 0.7), transparent);
  pointer-events: none;
}
.hl-pin-badges {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 6px;
}
.hl-pin-badge {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.hl-pin-author {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.1px;
  /* JS applies readableColor() to ensure dark hex colors are
     brightened enough to read against the amber card. Stacked
     shadows lock in contrast for any hue. */
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.7);
}
.hl-pin-time {
  color: #d4a85a;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 195, 80, 0.15);
  border-radius: 10px;
  letter-spacing: 0.2px;
}

.hl-card.hl-raid {
  display: block;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.22), rgba(255, 107, 107, 0.07));
  border-style: solid;
  border-color: transparent;
  border-width: 0 5px 0 5px;
  border-image: linear-gradient(180deg, #ff4500 0%, #ff6b6b 50%, #ffaf14 100%) 1;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 14px rgba(255, 107, 107, 0.32);
}
.hl-raid-wrap { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; }
.hl-raid-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.hl-raid-icon {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.55));
  animation: raid-pulse 1.6s ease-in-out infinite;
  transform-origin: center;
}
.hl-raid-label {
  background: linear-gradient(90deg, #ffaf14, #ff4500, #ff6b6b);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hl-raid-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hl-raid-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 107, 107, 0.7);
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.45);
}
.hl-raid-body {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.hl-raid-title {
  font-size: 0.98em;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hl-raid-raider { color: #ffd9c2; }
.hl-raid-arrow { color: #ffaf14; margin: 0 4px; font-weight: 900; }
.hl-raid-target { color: #ffeaa1; }
/* Web: cíl nájezdu jako odkaz na twitch.tv (core raidBannerHtml { link: true }). */
a.hl-raid-target { font-weight: 700; text-decoration: none; }
a.hl-raid-target:hover { text-decoration: underline; }
.hl-raid-meta {
  margin-top: 3px;
  display: flex;
  gap: 12px;
  font-size: 0.86em;
  color: #e0c7a8;
}
.hl-raid-meta .hl-raid-points { color: #ffd93d; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.hl-raid-meta .hl-raid-viewers { color: #ffe3c7; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.hl-raid-meta .hl-raid-viewers svg { filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }
.hl-raid-meta .hl-raid-pts-icon { width: 16px; height: 16px; }
.hl-raid-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #ffd9c2;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  margin-left: auto;
}
.hl-raid-close:hover {
  background: rgba(255, 107, 107, 0.25);
  color: #fff;
  transform: scale(1.08);
}
.hl-card.hl-raid.has-accent .hl-raid-close {
  border-color: rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.35);
}
.hl-card.hl-raid.has-accent .hl-raid-close:hover {
  background: rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.3);
}
/* Countdown progress bar — fills from 100% to 0 over duration, giving
   a visual sense of the "raid in N seconds" deadline. */
.hl-raid-bar {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  margin-top: 2px;
}
.hl-raid-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, #ff6b6b 0%, #ffaf14 50%, #ffd93d 100%);
  box-shadow: 0 0 6px rgba(255, 175, 20, 0.55);
  animation: hl-raid-countdown linear forwards;
  transform-origin: left center;
}
@keyframes hl-raid-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.hl-card.hl-raid.has-accent .hl-raid-bar-fill {
  background: linear-gradient(
    90deg,
    rgb(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b)) 0%,
    rgb(255, 175, 20) 60%,
    rgb(255, 217, 61) 100%
  );
  box-shadow: 0 0 6px rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.6);
}
/* When the card sampled a dominant colour from the avatar, recolor
   the background + border + glow ring from that accent so the banner
   feels "themed" to the raider's brand instead of a fixed red/gold. */
.hl-card.hl-raid.has-accent {
  background: linear-gradient(
    180deg,
    rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.32),
    rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.1)
  );
  border-image: linear-gradient(
    180deg,
    rgb(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b)) 0%,
    rgb(calc(var(--hl-accent-r) * 0.7), calc(var(--hl-accent-g) * 0.7), calc(var(--hl-accent-b) * 0.7)) 50%,
    rgb(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b)) 100%
  ) 1;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 14px rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.4);
}
.hl-card.hl-raid.has-accent .hl-raid-avatar {
  border-color: rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.8);
  box-shadow: 0 0 12px rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.55);
}

/* ==== Subscription gift events ==== */
/* Barva karet subu / daru / členství podle platformy události (pokyn usera 2026-10-08): jedna sada proměnných
   podle data-platform — Twitch fialová, Kick zelená (#53fc18 jako odznak Kicku), YouTube červená (jako členství). */
.msg.gift-bundle, .msg.sub-gift, .msg.sub-event {
  --sub-accent: #9146ff; --sub-rgb: 145, 70, 255; --sub-light: #b78cff; --sub-ink: #e8dcff; --sub-ink2: #d9cbff;
  --sub-bg1: 0.18; --sub-bg2: 0.06;
}
.msg.gift-bundle[data-platform="kick"], .msg.sub-gift[data-platform="kick"], .msg.sub-event[data-platform="kick"] {
  --sub-accent: #53fc18; --sub-rgb: 83, 252, 24; --sub-light: #8cff66; --sub-ink: #e3ffd8; --sub-ink2: #c9f5b8;
  --sub-bg1: 0.14; --sub-bg2: 0.05;
}
.msg.gift-bundle[data-platform="youtube"], .msg.sub-gift[data-platform="youtube"], .msg.sub-event[data-platform="youtube"] {
  --sub-accent: #ff0033; --sub-rgb: 255, 0, 51; --sub-light: #ff6680; --sub-ink: #ffe0e6; --sub-ink2: #ffc9d3;
  --sub-bg1: 0.16; --sub-bg2: 0.05;
}
/* Bundle header: full-width pill v barvě platformy */
.msg.gift-bundle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 4px 0;
  background: linear-gradient(135deg, rgba(var(--sub-rgb), calc(var(--sub-bg1) + 0.1)), rgba(var(--sub-rgb), var(--sub-bg1)));
  border: 1px solid rgba(var(--sub-rgb), 0.5);
  border-radius: 10px;
  color: var(--sub-ink);
  box-shadow: 0 0 16px rgba(var(--sub-rgb), 0.25);
}
.msg.gift-bundle .gift-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(var(--sub-rgb), 0.35);
  color: #fff;
  flex-shrink: 0;
}
.msg.gift-bundle .gift-body {
  flex: 1;
  min-width: 0;
}
.msg.gift-bundle .un {
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
/* Věta „McCitronlp daroval 1 předplatné“ / „X – darovaná předplatná“ — bez dvojtečky za jménem. */
.msg.gift-bundle .un::after { content: none; }
.msg.gift-bundle .gift-line {
  font-size: 0.95em;
  color: var(--sub-ink2);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.msg.gift-bundle .gift-line strong {
  color: #fff;
  font-weight: 700;
}
.msg.gift-bundle .gift-count {
  font-weight: 700;
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

/* Individual subgift line: compact row with purple left border */
.msg.sub-gift {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  margin: 2px 0;
  background: rgba(var(--sub-rgb), var(--sub-bg2));
  border-left: 3px solid var(--sub-accent);
  border-radius: 4px;
  color: var(--text, #d7d7e0);
}
.msg.sub-gift .gift-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: var(--sub-light);
  flex-shrink: 0;
}
.msg.sub-gift .gift-body {
  flex: 1;
  min-width: 0;
}
.msg.sub-gift .un {
  font-weight: 700;
  cursor: pointer;
  margin-right: 2px;
}
.msg.sub-gift .gift-line {
  font-size: 0.95em;
  color: var(--text, #c7c7d0);
  margin-top: 1px;
}
.msg.sub-gift .gift-line strong {
  color: #fff;
  font-weight: 700;
}

/* ==== Subscribe / Resubscribe events ==== */
/* Match the prominence of Announcements / Raids — bilateral accent
   borders, gentle gradient background, glow, and a tier label that
   color-codes Tier 1/2/3 (purple/blue/gold) and Prime (cyan). */
.msg.sub-event {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  margin: 6px 0;
  background: linear-gradient(180deg, rgba(var(--sub-rgb), var(--sub-bg1)), rgba(var(--sub-rgb), var(--sub-bg2)));
  border-style: solid;
  border-color: var(--sub-accent);
  border-width: 0 5px 0 5px;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 16px rgba(var(--sub-rgb), 0.25);
}
/* Kick / YouTube: logo platformy místo ikony předplatného (barvy z proměnných výš). */
.msg.sub-event[data-platform="kick"] .sub-icon { background: url(icons/platform/kick.svg) center / 80% no-repeat; filter: drop-shadow(0 0 4px rgba(83, 252, 24, 0.5)); }
.msg.sub-event[data-platform="kick"] .sub-icon svg { visibility: hidden; }
.msg.sub-event:hover {
  background: linear-gradient(180deg, rgba(var(--sub-rgb), calc(var(--sub-bg1) + 0.08)), rgba(var(--sub-rgb), calc(var(--sub-bg2) + 0.04)));
}
.msg.sub-event[data-platform="youtube"] .sub-icon { background: url(icons/platform/youtube.svg) center / 80% no-repeat; filter: drop-shadow(0 0 4px rgba(255, 0, 51, 0.5)); }
.msg.sub-event[data-platform="youtube"] .sub-icon svg { visibility: hidden; }
/* Prime sub gets the Twitch-Prime cyan/blue accent + crown icon so it
   reads instantly different from a paid Tier 1/2/3 sub. */
.msg.sub-event.tier-2 {
  background: linear-gradient(180deg, rgba(0, 215, 236, 0.16), rgba(0, 215, 236, 0.06));
  border-color: #00d7ec;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 16px rgba(0, 215, 236, 0.25);
}
.msg.sub-event.tier-2 .sub-icon { color: #00d7ec; filter: drop-shadow(0 0 4px rgba(0, 215, 236, 0.55)); }
.msg.sub-event.tier-2 .sub-tier {
  background: linear-gradient(90deg, #5ce0ee, #00d7ec, #009ec0);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.msg.sub-event.tier-3 {
  background: linear-gradient(180deg, rgba(255, 179, 30, 0.18), rgba(255, 179, 30, 0.06));
  border-color: #ffb31e;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 16px rgba(255, 179, 30, 0.3);
}
.msg.sub-event.tier-3 .sub-icon { color: #ffd93d; filter: drop-shadow(0 0 4px rgba(255, 179, 30, 0.6)); }
.msg.sub-event.tier-3 .sub-tier {
  background: linear-gradient(90deg, #ffe57a, #ffd93d, #ffaf14);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.msg.sub-event.prime {
  background: linear-gradient(180deg, rgba(0, 173, 239, 0.18), rgba(0, 173, 239, 0.06));
  border-color: #00adef;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 16px rgba(0, 173, 239, 0.28);
}
.msg.sub-event.prime:hover {
  background: linear-gradient(180deg, rgba(0, 173, 239, 0.28), rgba(0, 173, 239, 0.1));
}
.msg.sub-event.prime .sub-icon {
  color: #00adef;
  filter: drop-shadow(0 0 4px rgba(0, 173, 239, 0.55));
}
.sub-tier {
  background: linear-gradient(90deg, #b78cff, #9146ff, #7a3ce6);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.sub-tier-prime {
  background: linear-gradient(90deg, #00d7ec, #00adef, #0091ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.msg.sub-event .sub-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: var(--sub-light);
  filter: drop-shadow(0 0 4px rgba(var(--sub-rgb), 0.5));
  flex-shrink: 0;
  margin-top: 1px;
}
.msg.sub-event .sub-body {
  flex: 1;
  min-width: 0;
}
.msg.sub-event .un {
  font-weight: 700;
  cursor: pointer;
}
.msg.sub-event .sub-line {
  font-size: 0.95em;
  color: var(--text, #d0d0da);
  margin-top: 2px;
  line-height: 1.4;
}
.msg.sub-event .sub-line strong {
  color: #fff;
  font-weight: 700;
}
.msg.sub-event .sub-text {
  margin-top: 4px;
  color: var(--text, #d0d0da);
}

/* ==== Viewer Milestone (watch-streak) events ==== */
.msg.milestone-event {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  margin: 6px 0;
  background: linear-gradient(180deg, rgba(0, 200, 100, 0.16), rgba(0, 200, 100, 0.05));
  border-style: solid;
  border-color: #00b35a;
  border-width: 0 5px 0 5px;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 16px rgba(0, 200, 100, 0.22);
}
.msg.milestone-event:hover {
  background: linear-gradient(180deg, rgba(0, 200, 100, 0.24), rgba(0, 200, 100, 0.08));
}
.msg.milestone-event .milestone-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: #ff8c3a;
  filter: drop-shadow(0 0 4px rgba(255, 140, 58, 0.55));
  flex-shrink: 0;
  margin-top: 1px;
}
.msg.milestone-event .milestone-body {
  flex: 1;
  min-width: 0;
}
.msg.milestone-event .milestone-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.msg.milestone-event .un {
  font-weight: 700;
  cursor: pointer;
}
.msg.milestone-event .milestone-points {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  color: #ffd93d;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 217, 61, 0.12);
  font-size: 0.92em;
}
.msg.milestone-event .milestone-points svg {
  width: 14px;
  height: 14px;
}
.msg.milestone-event .milestone-line {
  font-size: 0.95em;
  color: var(--text, #d0d0da);
  margin-top: 2px;
  line-height: 1.4;
}
.msg.milestone-event .milestone-line strong {
  color: #fff;
  font-weight: 700;
}
.msg.milestone-event .milestone-text {
  margin-top: 4px;
  color: var(--text, #d0d0da);
}

/* ==== Moderátorské výročí (USERNOTICE modiversary, core/anniversary.js) ====
   Stejná karta jako sub / milník, zelená Twitche #00AD03 a meč. */
.msg.modiversary-event {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  margin: 6px 0;
  background: linear-gradient(180deg, rgba(0, 173, 3, 0.18), rgba(0, 173, 3, 0.05));
  border-style: solid;
  border-color: #00ad03;
  border-width: 0 5px 0 5px;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 16px rgba(0, 173, 3, 0.24);
}
.msg.modiversary-event:hover {
  background: linear-gradient(180deg, rgba(0, 173, 3, 0.26), rgba(0, 173, 3, 0.08));
}
.msg.modiversary-event .modiv-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: #3ddc41;
  filter: drop-shadow(0 0 4px rgba(0, 173, 3, 0.6));
  flex-shrink: 0;
  margin-top: 1px;
}
.msg.modiversary-event .modiv-body { flex: 1; min-width: 0; }
.msg.modiversary-event .un { font-weight: 700; cursor: pointer; }
.msg.modiversary-event .modiv-line {
  color: var(--text, #d0d0da);
  line-height: 1.4;
}
.msg.modiversary-event .modiv-line strong { color: #fff; font-weight: 700; }
.msg.modiversary-event .modiv-text {
  margin-top: 4px;
  color: var(--text, #d0d0da);
}

/* ==== Odměny za body kanálu (core/redeem.js redeemCardHtml, addon i web) ==== */
.msg.redeem {
  padding: 6px 8px;
  margin: 2px 0;
  background: rgba(145, 70, 255, 0.06);
  border-left: 3px solid #9146ff;
  border-radius: 4px;
}
.msg.redeem .redeem-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
}
.msg.redeem .redeem-media {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  /* Barva odměny z Twitche (backgroundColor), jinak fialová. */
  background: var(--rd-bg, rgba(145, 70, 255, 0.35));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.msg.redeem .redeem-media img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.msg.redeem .redeem-main { min-width: 0; }
.msg.redeem .redeem-head {
  color: var(--text-secondary);
  line-height: 1.3;
}
.msg.redeem .un {
  font-weight: 700;
  cursor: pointer;
}
.msg.redeem .redeem-who .un::after { content: none; }
.msg.redeem .redeem-title {
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.msg.redeem .redeem-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: #e3d2ff;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(145, 70, 255, 0.15);
  white-space: nowrap;
}
.msg.redeem .redeem-text {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.msg.highlight {
  background: linear-gradient(90deg, rgba(145, 70, 255, 0.18), rgba(145, 70, 255, 0.04));
  border-left: 3px solid #9146ff;
  padding-left: 8px;
}

/* Suspicious user */
.msg.sus-msg {
  background: rgba(255, 193, 7, 0.1);
  border-left: 2px solid #ffc107;
  padding-left: 8px;
}
.msg.sus-msg:hover {
  background: rgba(255, 193, 7, 0.2);
}

/* Reply context */
.reply-ctx {
  font-size: 11px;
  color: var(--text-muted);
  padding: 1px 0 1px 18px;
  opacity: 0.7;
}

.reply-ctx.clickable {
  cursor: pointer;
  transition: opacity 0.15s;
}

.reply-ctx.clickable:hover {
  opacity: 1;
}

/* Flash animace - když se scrollne k původní zprávě */
@keyframes msg-flash {
  0%, 100% { background: transparent; }
  20% { background: rgba(255, 140, 0, 0.35); box-shadow: inset 0 0 20px rgba(255, 140, 0, 0.2); }
  60% { background: rgba(255, 140, 0, 0.18); }
}

.msg.msg-flash {
  animation: msg-flash 2s ease-out;
}

.rctx-user {
  color: var(--text-secondary);
  font-weight: 600;
}

.rctx-body {
  color: var(--text-muted);
}
/* Emoty v kartách a štítcích (točka, gamba, anketa — EmoteManager.inlineHtml); i uvnitř karty výsledku v chatu. */
.uc-emtx img.emote, body .msg .tx .uc-emtx img.emote.emote {
  height: 1.5em;
  min-width: 0;
  vertical-align: middle;
  margin: -0.25em 1px;
}
.uc-emtx .emote-stack, .msg .tx .uc-emtx .emote-stack { margin: -0.25em 1px; }
.uc-emtx .emote-stack img.emote { margin: 0; }

.rctx-body img.emote {
  height: 1.2em;
  vertical-align: middle;
  margin: -2px 1px;
}

.msg .un {
  cursor: pointer;
}

.msg .un:hover {
  text-decoration: underline;
}

.msg .un {
  font-weight: 700;
  margin-right: 1px;
}

.msg .un::after {
  content: ':';
  color: var(--text-secondary);
  font-weight: 400;
}

.msg .tx {
  color: var(--text-primary);
}
/* Odkaz ve zprávě — v chatu i v Profilu (core/user-history.js `.uc-uh-tx`, addon i web načítají tohle CSS). */
.msg .tx a, .uc-uh-tx a {
  color: #e8b84b;
  text-decoration: none;
  word-break: break-all;
}
.msg .tx a:hover, .uc-uh-tx a:hover { text-decoration: underline; }

.msg .tx img.emote {
  display: inline-block;
  /* Bumped to match Twitch vanilla (~28px chat emotes) — 1.75em on a 13px
     base only got to ~23px which read visibly smaller than vanilla. */
  height: 2em;
  /* Minimum width placeholder so the inline flow reserves space before the
     image loads — without this the text flows through the empty slot and
     reflows (1-pixel-row vibration) when the image pops in. Natural width
     still takes over once the image is decoded. */
  min-width: 2em;
  vertical-align: middle;
  margin: -3px 1px;
  object-fit: contain;
}
/* OG global Twitch face emotes (:), :D, :O, ;), B), <3, …) ship at a
   tiny native resolution. Default emote sizing scales them up and they
   look blurry + visually too big vs vanilla chat. Render closer to
   their native size. */
.msg .tx img.emote.emote-tiny {
  height: 1.25em;
  min-width: auto;
}
body.layout-medium .msg .tx img.emote.emote-tiny { height: 1.4em; }
body.layout-large  .msg .tx img.emote.emote-tiny { height: 1.55em; }
body.layout-xlarge .msg .tx img.emote.emote-tiny { height: 1.65em; }
body.layout-humongous .msg .tx img.emote.emote-tiny { height: 1.65em; }

/* /me (ACTION) messages — italic text in username color */
.msg.action .tx { font-style: italic; }

/* Click-to-play audio easter egg (StreamElements Bulgarians) */
.msg.msg-audio { cursor: pointer; position: relative; }
.msg.msg-audio:hover {
  box-shadow: inset 2px 0 0 rgba(255, 140, 0, 0.55);
}
.msg.msg-audio.playing {
  box-shadow: inset 2px 0 0 #ff8c00, 0 0 18px -6px rgba(255, 140, 0, 0.5);
  background: rgba(255, 140, 0, 0.06);
}
.msg.msg-audio::after {
  content: '\25b6';
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 11px;
  color: rgba(255, 140, 0, 0.55);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.msg.msg-audio:hover::after { opacity: 1; }
.msg.msg-audio.playing::after {
  content: '\23f8';
  color: #ff8c00;
  opacity: 1;
}

.emote-stack {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin: -3px 1px;
}
.emote-stack img.emote {
  grid-area: 1 / 1;
  margin: 0;
}

.msg.superchat {
  background: rgba(255, 214, 0, 0.08);
  border-left: 2px solid #ffd600;
  padding-left: 8px;
}

/* Hidden platform messages (filters) */
.msg.hide-platform {
  display: none;
}

/* System message */
.sys {
  padding: 3px 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
  text-align: center;
}

/* Scroll button */
#btn-scroll {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-gradient);
  color: #000;
  border: none;
  padding: 5px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), var(--accent-glow);
  z-index: 10;
}

#btn-scroll:hover { filter: brightness(1.1); }
#btn-scroll.hidden { display: none; }

/* Tooltip for status */
/* Pinned message banner */
/* Pinned message — Twitch-style banner with expandable body.
   Collapsed: just shows header row with who pinned + chevron.
   Expanded: shows full message text + author footer. */
#pinned-banner {
  display: block;
  padding: 0;
  background: var(--bg-secondary, #1a1a23);
  border-bottom: 1px solid rgba(230, 161, 26, 0.25);
  box-shadow: 0 0 10px rgba(230, 161, 26, 0.08);
  flex-shrink: 0;
  font-size: 12px;
}
#pinned-banner.hidden,
#pinned-banner.dismissed { display: none; }

.pin-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: default;
}
.pin-head-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: #e6a11a;
  flex-shrink: 0;
}
.pin-head-text {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--text-muted, #9999a5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}
.pin-head-user {
  color: #e6a11a;
  font-weight: 700;
}
.pin-btn {
  flex-shrink: 0;
  display: inline-flex;
  width: 24px;
  height: 24px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted, #9a9aa6);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.pin-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
#pinned-banner .pin-chev { transition: transform 0.18s ease; }
#pinned-banner.collapsed .pin-chev { transform: rotate(-90deg); transform-origin: 12px 12px; }

.pin-body {
  padding: 2px 12px 10px 40px;
  overflow: hidden;
  max-height: 400px;
  transition: max-height 0.18s ease, padding 0.18s ease, opacity 0.12s ease;
}
#pinned-banner.collapsed .pin-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.pin-body-text {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text, #e6e6ea);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.pin-body-text a {
  color: #e6a11a;
  text-decoration: underline;
  text-decoration-color: rgba(230, 161, 26, 0.4);
}
.pin-body-text a:hover { text-decoration-color: #e6a11a; }
.pin-body-text img.emote {
  height: 1.6em;
  vertical-align: middle;
  margin: -2px 2px;
}
.pin-body-foot {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted, #9a9aa6);
}
.pin-author {
  font-weight: 700;
}
.pin-author-meta {
  font-size: 11px;
}

/* Unread messages separator */
/* ---- UnityChat Announcement (command v Židolištce s videem) ----
   Matná tmavá deska bez gradientu pod médiem, ať se průhledné video neslévá;
   jen měkký reflektor za ním a tenký zlatý rám s horní linkou. */
.msg.uc-annc { padding: 0; margin: 8px 4px; background: transparent; border: 0; }
.msg.uc-annc:hover { background: transparent; }
.msg.uc-annc .ua-frame {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; min-width: 0;
  padding: 12px 14px; border-radius: 10px; overflow: hidden;
  background: #0c0b10;
  border: 1px solid rgba(230, 161, 26, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6) inset, 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(230, 161, 26, 0.16);
}
/* Světlo na rámečku (jasné nahoře, slabší naproti) pomalu obíhá po obvodu a cestou se houpe tam a zpět — varianta C
   z náhledu, pokyn usera 2026-10-14 (oběhnutí 9 s, houpnutí 6 s, rozkmit 30°). Kuželový gradient se dvěma měkkými
   vrcholy, maskovaný na 1px pruh u okraje; v klidu (úhel 0) = dřívější statické pruhy nahoře 10–90 % a dole 20–80 %.
   Omezení animací = statický stav. */
@property --ua-orbit { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ua-swing { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.msg.uc-annc .ua-frame::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from calc(var(--ua-orbit) + var(--ua-swing)),
    rgba(255, 214, 140, 0.9) 0deg, rgba(255, 214, 140, 0) 72deg,
    rgba(230, 161, 26, 0) 114deg, rgba(230, 161, 26, 0.45) 180deg, rgba(230, 161, 26, 0) 246deg,
    rgba(255, 214, 140, 0) 288deg, rgba(255, 214, 140, 0.9) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: uaOrbit 9s linear infinite, uaSwing 6s ease-in-out infinite alternate;
}
@keyframes uaOrbit { to { --ua-orbit: 360deg; } }
@keyframes uaSwing { from { --ua-swing: -30deg; } to { --ua-swing: 30deg; } }
@media (prefers-reduced-motion: reduce) { .msg.uc-annc .ua-frame::before { animation: none; } }
/* Médium: zadaná šířka (Max. šířka v Židolištce) platí celá, strop je jen šířka desky; výška podle poměru stran.
   Text vedle potřebuje aspoň 120 px — když se nevejde, zalomí se pod médium (flex-wrap), médium zůstane v plné šířce (2026-10-08). */
.msg.uc-annc .ua-media { position: relative; flex: 0 0 auto; max-width: 100%; width: min(var(--ua-w, 192px), 100%); aspect-ratio: var(--ua-ar, auto); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.msg.uc-annc .ua-media .ua-spot {
  position: absolute; inset: -22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(255, 214, 140, 0.16) 0%, rgba(255, 214, 140, 0.06) 40%, transparent 70%);
}
.msg.uc-annc .ua-media video, .msg.uc-annc .ua-media img { position: relative; display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)); }
.msg.uc-annc .ua-body { flex: 1 1 120px; min-width: 0; }
.msg.uc-annc .ua-kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; font-size: calc(10px * var(--ua-title-scale, 1)); font-weight: 800; letter-spacing: calc(1.4px * var(--ua-title-scale, 1)); text-transform: uppercase;
  background: linear-gradient(90deg, #ffd27a, #e6a11a 60%, #ffd27a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.msg.uc-annc .ua-kicker-icon { color: #ffd27a; -webkit-text-fill-color: #ffd27a; }
.msg.uc-annc .ua-cmd { -webkit-text-fill-color: #f3e2b8; color: #f3e2b8; letter-spacing: 0.6px; text-transform: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.msg.uc-annc .ua-ts { flex: 0 0 auto; margin-left: auto; font-weight: 500; letter-spacing: 0; -webkit-text-fill-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.35); }
.msg.uc-annc .ua-text { margin-top: 6px; font-size: 1.08em; line-height: 1.45; color: #f5f1e8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); overflow-wrap: anywhere; }
/* Emoty v textu announcementu = velikost z chatu (.msg .tx img.emote: 2em / 2.25 / 2.5 / 2.6 podle layoutu, tady děleno
   1.08 kvůli většímu písmu desky); `Emote(2)` až `(4)` = násobek (core emotifyAnnouncementText, Židolišta 2026-10-05). */
.msg.uc-annc .ua-text { --ua-emote-h: 1.85em; }
body.layout-medium .msg.uc-annc .ua-text { --ua-emote-h: 2.08em; }
body.layout-large .msg.uc-annc .ua-text { --ua-emote-h: 2.31em; }
body.layout-xlarge .msg.uc-annc .ua-text { --ua-emote-h: 2.41em; }
body.layout-humongous .msg.uc-annc .ua-text { --ua-emote-h: 2.41em; }
.msg.uc-annc .ua-text img.emote { display: inline-block; height: var(--ua-emote-h); width: auto; max-width: 100%; min-width: 0; vertical-align: middle; margin: -3px 1px; object-fit: contain; }
.msg.uc-annc .ua-text img.emote.emote-tiny { height: calc(var(--ua-emote-h) * 0.625); }
.msg.uc-annc .ua-text img.emote.uc-emote-scaled { height: calc(var(--ua-emote-h) * var(--ua-emote-scale, 1)); margin: 2px 1px; }
/* Rich text ze Židolišty (Markdown → HTML): nadpisy škálované k desce, odkazy zlaté. */
/* Nadpis: zlatý přechod přes písmo. text-shadow z .ua-text by u průhledného písma prosvítal a ztmavil ho (2026-10-05
   „nečitelné“) → bez něj, hloubka přes drop-shadow (kreslí se jen pod tvar písmen); šířka podle textu = přechod přes písmo, ne přes celý řádek. */
.msg.uc-annc .ua-text h1, .msg.uc-annc .ua-text h2, .msg.uc-annc .ua-text h3 { display: block; width: fit-content; max-width: 100%; margin: 0 0 4px; line-height: 1.2; font-weight: 800; letter-spacing: 0.2px; background: linear-gradient(90deg, #fff1c2, #ffcc4d 55%, #ffb31e); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 6px rgba(255, 179, 30, 0.35)); }
.msg.uc-annc .ua-text h1 { font-size: 1.35em; } .msg.uc-annc .ua-text h2 { font-size: 1.2em; } .msg.uc-annc .ua-text h3 { font-size: 1.08em; }
.msg.uc-annc .ua-text h1 + br, .msg.uc-annc .ua-text h2 + br, .msg.uc-annc .ua-text h3 + br { display: none; }
.msg.uc-annc .ua-text b { color: #fff; }
.msg.uc-annc .ua-text a { color: #ffd27a; text-decoration: underline; text-decoration-color: rgba(255, 210, 122, 0.5); }
.msg.uc-annc .ua-text a:hover { color: #fff; }
/* Jméno diváka ze Židolišty (data-uc-user) — jméno a barva jako v chatu (core applyAnnouncementUsers). */
.msg.uc-annc .ua-text .uc-annc-user { font-weight: 700; }
.msg.uc-annc .ua-text u { text-decoration-color: rgba(255, 210, 122, 0.6); }
body.layout-small .msg.uc-annc .ua-frame { gap: 10px; padding: 10px 12px; }
/* Nadpis nahoře (titleMode 'top'): nadpis na střed, čas vpravo na stejném řádku, médium pod ním přes celou šířku. */
.msg.uc-annc .ua-title-top { flex-direction: column; align-items: center; gap: 10px; }
.msg.uc-annc .ua-title-top .ua-head { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 8px; width: 100%; }
.msg.uc-annc .ua-title-top .ua-kicker { grid-column: 2; justify-content: center; text-align: center; font-size: calc(11px * var(--ua-title-scale, 1)); }
.msg.uc-annc .ua-title-top .ua-head > .ua-ts { grid-column: 3; justify-self: end; font-size: 10px; }
.msg.uc-annc .ua-title-top .ua-head--nokicker { grid-template-columns: 1fr auto; }
.msg.uc-annc .ua-title-top .ua-head--nokicker > .ua-ts { grid-column: 2; }
.msg.uc-annc .ua-title-top .ua-body { flex: 0 0 auto; align-self: stretch; }
.msg.uc-annc .ua-title-top .ua-text { margin-top: 0; }
/* Bez nadpisu (titleMode 'hidden' = „Nezobrazovat název commandu“): žádný štítek, jen čas — obtéká text, bez textu v rohu. */
.msg.uc-annc .ua-title-hidden .ua-text { margin-top: 0; }
.msg.uc-annc .ua-ts--float, .msg.uc-annc .ua-ts--corner { font-size: 10px; font-weight: 500; }
.msg.uc-annc .ua-ts--float { float: right; margin: 2px 0 2px 8px; line-height: 1.2; }
.msg.uc-annc .ua-ts--corner { position: absolute; top: 4px; right: 9px; z-index: 1; margin: 0; }

.unread-sep {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  margin: 4px 0;
}

.unread-sep::before,
.unread-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
  margin: 0 8px;
}

/* ---- Lazy scroll-up hydration spinner ----
   Shown at the top of the chat while _hydrateOlderMessages prepends an
   older batch (150 msgs). Lives inside #chat so it contributes to the
   scrollHeight delta we use to restore the user's reading position. */
.hydrate-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  margin: 4px 8px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(255, 140, 0, 0.02));
  border: 1px solid rgba(255, 140, 0, 0.22);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(255, 140, 0, 0.08);
  animation: hs-pulse 1.2s ease-in-out infinite;
}
.hydrate-spinner .hs-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 140, 0, 0.25);
  border-top-color: var(--accent);
  animation: hs-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
.hydrate-spinner .hs-label {
  white-space: nowrap;
}
@keyframes hs-spin {
  to { transform: rotate(360deg); }
}
@keyframes hs-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 140, 0, 0.08); }
  50%      { box-shadow: 0 0 26px rgba(255, 140, 0, 0.22); }
}

/* ---- Twitch credits mirror (footer pills above input) ---- */
#tw-credits {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-top: 1px solid var(--border, #2a2a35);
  background: var(--bg-secondary, #1a1a23);
  font-size: 12px;
  color: var(--text, #e4e4ea);
  flex-wrap: wrap;
}
#tw-credits.hidden { display: none; }
#tw-credits .uc-sw-brag { margin-left: 0; }   /* řádek má gap 8 px (web #sw-row ne → margin z stash.css) */
#tw-credits .uc-tts-enh-host { display: contents; }   /* prázdný hostitel nepřidá mezeru gapu; tlačítko = položka řádku */

/* ==== Banner výročí nad polem pro psaní (core/anniversary.js AnniversaryBanner) ====
   Jako výzva Twitche: ikona, text, Sdílet, ×; Sdílet rozbalí zprávu (grid 0fr → 1fr). Předplatné = fialová,
   moderátorské výročí = zelená #00AD03. prefers-reduced-motion → bez animací. */
#anniv-banner { flex-shrink: 0; padding: 6px 10px 0; background: var(--bg-secondary); border-top: 1px solid var(--border); }
#anniv-banner.hidden { display: none; }
.uc-anniv {
  --anniv: #9146ff; --anniv-rgb: 145, 70, 255;
  border: 1px solid rgba(var(--anniv-rgb), 0.55);
  border-left-width: 4px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(var(--anniv-rgb), 0.22), rgba(var(--anniv-rgb), 0.07));
  box-shadow: 0 0 14px rgba(var(--anniv-rgb), 0.22);
  color: var(--text-primary);
  overflow: hidden;
}
.uc-anniv--mod { --anniv: #00ad03; --anniv-rgb: 0, 173, 3; }
.uc-anniv--enter { animation: uc-anniv-in 220ms cubic-bezier(.2, .9, .3, 1.05); }
@keyframes uc-anniv-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.uc-anniv-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; }
.uc-anniv-icon {
  display: inline-flex; flex-shrink: 0; width: 26px; height: 26px; align-items: center; justify-content: center;
  color: var(--anniv); filter: drop-shadow(0 0 5px rgba(var(--anniv-rgb), 0.6));
}
.uc-anniv--resub .uc-anniv-icon { color: #b78cff; }
.uc-anniv--mod .uc-anniv-icon { color: #3ddc41; }
.uc-anniv--open .uc-anniv-icon, .uc-anniv--done .uc-anniv-icon { animation: uc-anniv-pulse 1.6s ease-in-out infinite; }
@keyframes uc-anniv-pulse { 50% { transform: scale(1.12); } }
.uc-anniv-text { flex: 1; min-width: 0; }
.uc-anniv-title { font-weight: 700; line-height: 1.3; }
.uc-anniv-linkwarn { color: #ff6b6b; font-size: 0.8em; line-height: 1.3; margin: 0 0 4px; }
.uc-anniv-sub { font-size: 0.9em; color: var(--text-secondary); line-height: 1.3; }
.uc-anniv-share, .uc-anniv-send {
  flex-shrink: 0; border: 0; border-radius: 4px; padding: 5px 12px; font: inherit; font-weight: 700; cursor: pointer;
  color: #fff; background: var(--anniv); box-shadow: 0 0 8px rgba(var(--anniv-rgb), 0.45);
}
.uc-anniv-share:hover, .uc-anniv-send:hover:not(:disabled) { filter: brightness(1.15); }
.uc-anniv-send:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.uc-anniv-share[hidden] { display: none; }
.uc-anniv-close, .uc-anniv-cancel {
  flex-shrink: 0; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit;
}
.uc-anniv-close { width: 24px; height: 24px; border-radius: 4px; font-size: 18px; line-height: 1; }
.uc-anniv-close:hover, .uc-anniv-cancel:hover:not(:disabled) { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); }
.uc-anniv-cancel { padding: 5px 10px; border-radius: 4px; }
.uc-anniv-form { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms cubic-bezier(.2, .8, .2, 1); }
.uc-anniv--open .uc-anniv-form { grid-template-rows: 1fr; }
.uc-anniv-form-inner { min-height: 0; overflow: hidden; }
.uc-anniv--open .uc-anniv-form-inner { padding: 0 8px 8px 10px; }
.uc-anniv-input {
  display: block; width: 100%; box-sizing: border-box; resize: none; font: inherit; color: var(--text-primary);
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px;
}
.uc-anniv-input:focus { outline: none; border-color: var(--anniv); box-shadow: 0 0 0 1px rgba(var(--anniv-rgb), 0.5); }
.uc-anniv-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.88em; color: var(--text-secondary); }
.uc-anniv-streak { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.uc-anniv-streak input { accent-color: var(--anniv); margin: 0; }
.uc-anniv-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.uc-anniv-count--full { color: #ff6b6b; }
.uc-anniv-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.uc-anniv-msg { color: #ff8a8a; font-size: 0.9em; margin-top: 4px; }
.uc-anniv-msg:empty { display: none; }
.uc-anniv--busy .uc-anniv-send { cursor: progress; }
.uc-anniv--done { border-color: rgba(var(--anniv-rgb), 0.9); }
.uc-anniv--done .uc-anniv-title { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .uc-anniv--enter, .uc-anniv--open .uc-anniv-icon, .uc-anniv--done .uc-anniv-icon { animation: none; }
  .uc-anniv-form { transition: none; }
}

/* Highlights banner background tunes to the accent of its single
   featured card (raid avatar sample, etc.). Fallback = the fixed
   cyan/purple gradient defined earlier. */
#highlights-banner.has-accent {
  background: linear-gradient(
    135deg,
    rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.22),
    rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.07)
  ), var(--bg-primary, #0e0e10);
  border-bottom-color: rgba(var(--hl-accent-r), var(--hl-accent-g), var(--hl-accent-b), 0.5);
}
.tc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tc-pill.hidden { display: none; }
.tc-bits svg { color: #ffd93d; }
.tc-points-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tc-points-icon:not(.has-icon)::before {
  content: '\25C6'; /* ◆ fallback when channel icon URL hasn't arrived yet */
  display: block;
  text-align: center;
  font-size: 12px;
  color: #b78cff;
}
.tc-points { color: #ffd9c2; }
/* Streamer vypnul řádek s body Twitche (unitychat-settings.ui.twitchPoints) — zůstává jen pilulka stash za sledování. */
#tw-credits.tw-points-off .tc-bits, #tw-credits.tw-points-off .tc-points, #tw-credits.tw-points-off .tc-claim, #tw-credits.tw-points-off .tc-points-flash { display: none !important; }
.tc-bits   { color: #ffeaa1; }
/* Claim bonus — solid green like Twitch's own button, pulsing to draw
   attention when bonus is ready. White text for legibility on the
   dark-bg side panel. */
.tc-claim {
  background: linear-gradient(90deg, #00db84, #00b870);
  color: #fff !important;
  font-weight: 700;
  padding: 4px 12px;
  box-shadow: 0 0 10px rgba(0, 219, 132, 0.45);
  animation: tc-claim-pulse 1.6s ease-in-out infinite;
  white-space: nowrap;
}
.tc-claim svg { color: #fff; flex-shrink: 0; }
.tc-claim-label {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.tc-claim:hover {
  background: linear-gradient(90deg, #15e89a, #02c47b);
  box-shadow: 0 0 14px rgba(0, 219, 132, 0.7);
}
/* Bonus k vyzvednutí = pilulka bodů zezelená s dárkem a pulzuje, klik ho vyzvedne (jako na Twitchi; řádek se vejde
   na jeden řádek i s plísní a ikonami ZL / admin panelu, pokyn usera 2026-10-18). .tc-claim drží jen stav. */
#tw-credits .tc-claim { display: none !important; }
.tc-points-gift { display: none; }
#tw-credits.has-claim .tc-points { color: #fff; font-weight: 800; padding-left: 3px; background: linear-gradient(90deg, #00b862, #00d67a);
  box-shadow: 0 0 10px rgba(0, 219, 132, 0.45); animation: tc-claim-pulse 1.6s ease-in-out infinite; }
#tw-credits.has-claim .tc-points:hover { background: linear-gradient(90deg, #15e89a, #02c47b); }
#tw-credits.has-claim .tc-points-icon { display: none; }
#tw-credits.has-claim .tc-points-gift { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
/* UnityChat část (plíseň, ikony) vpravo; ikony ZL a admin panelu u sebe. */
#tw-credits #stash-watch { margin-left: auto; }
#tw-credits #stash-watch:not([hidden]) ~ .uc-adm-btn, #tw-credits .uc-adm-btn:not([hidden]) ~ .uc-adm-btn { margin-left: 2px; }
/* Bez bodů / bitů Twitche (vypnuté v ZL = .tw-points-off, nepřihlášený Twitch, žádné nenačtené) je pilulka měny vlevo jako dřív a ikony zůstanou vpravo:
   první viditelná ikona za pilulkou drží auto, další 2 px (pokyn usera 2026-10-19). */
:is(#tw-credits.tw-points-off, body.uc-no-twitch-login #tw-credits, #tw-credits:not(:has(> .tc-points:not(.hidden), > .tc-bits:not(.hidden)))) #stash-watch { margin-left: 0; }
:is(#tw-credits.tw-points-off, body.uc-no-twitch-login #tw-credits, #tw-credits:not(:has(> .tc-points:not(.hidden), > .tc-bits:not(.hidden)))) #stash-watch:not([hidden]) ~ .uc-adm-btn { margin-left: auto; }
:is(#tw-credits.tw-points-off, body.uc-no-twitch-login #tw-credits, #tw-credits:not(:has(> .tc-points:not(.hidden), > .tc-bits:not(.hidden)))) #stash-watch:not([hidden]) ~ .uc-adm-btn:not([hidden]) ~ .uc-adm-btn { margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { #tw-credits.has-claim .tc-points { animation: none; } }
/* ==== Přepínač měny ⇅ (varianta B, docs/mockups/2026-10-29-meny-prepinac.html, sidepanel.js _wireCurrencyFlip) ====
   Jen když jsou vidět body / bity Twitche i měna UnityChatu (přihlášený Twitch, body nevypnuté v ZL, pilulka stash):
   pak je vidět jedna strana (výchozí UC, `.cur-tw` = Twitch) a ⇅ vlevo. Bez druhé strany řádek vypadá jako dřív. */
.tc-flip { display: none; place-items: center; width: 22px; height: 22px; flex: none; padding: 0; border: 0; border-radius: 50%; position: relative;
  background: rgba(255, 255, 255, 0.05); color: var(--text-muted); cursor: pointer; transition: color 0.2s, background 0.2s; -webkit-tap-highlight-color: transparent; }
.tc-flip:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.09); }
.tc-flip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tc-flip svg { transition: transform 0.45s cubic-bezier(0.3, 1.25, 0.5, 1); }
.tc-flip.uc-flip-turn svg { transform: rotate(180deg); }
body:not(.uc-no-twitch-login) #tw-credits:not(.tw-points-off):has(> :is(.tc-bits, .tc-points):not(.hidden)):has(> #stash-watch:not([hidden])) > .tc-flip { display: inline-grid; }
/* Strana UC: body Twitche pryč, pilulka měny vlevo za ⇅, ikony vpravo (jako řádek bez bodů Twitche, pravidla výše). */
body:not(.uc-no-twitch-login) #tw-credits:not(.tw-points-off):not(.cur-tw):has(> :is(.tc-bits, .tc-points):not(.hidden)):has(> #stash-watch:not([hidden])) > :is(.tc-bits, .tc-points, .tc-points-flash) { display: none !important; }
body:not(.uc-no-twitch-login) #tw-credits:not(.tw-points-off):not(.cur-tw):has(> :is(.tc-bits, .tc-points):not(.hidden)):has(> #stash-watch:not([hidden])) > #stash-watch { margin-left: 0; }
body:not(.uc-no-twitch-login) #tw-credits:not(.tw-points-off):not(.cur-tw):has(> :is(.tc-bits, .tc-points):not(.hidden)):has(> #stash-watch:not([hidden])) > #stash-watch ~ .uc-adm-btn:not([hidden]) { margin-left: auto; }
body:not(.uc-no-twitch-login) #tw-credits:not(.tw-points-off):not(.cur-tw):has(> :is(.tc-bits, .tc-points):not(.hidden)):has(> #stash-watch:not([hidden])) > #stash-watch ~ .uc-adm-btn:not([hidden]) ~ .uc-adm-btn { margin-left: 2px; }
/* Strana Twitch: měna UC (pilulka i Pochlubit se) pryč, ikony vpravo odsune poslední pilulka Twitche. */
body:not(.uc-no-twitch-login) #tw-credits.cur-tw:not(.tw-points-off):has(> :is(.tc-bits, .tc-points):not(.hidden)):has(> #stash-watch:not([hidden])) > :is(#stash-watch, .uc-sw-brag) { display: none !important; }
body:not(.uc-no-twitch-login) #tw-credits.cur-tw:not(.tw-points-off):has(> :is(.tc-bits, .tc-points):not(.hidden)):has(> #stash-watch:not([hidden])) > .tc-points:not(.hidden),
body:not(.uc-no-twitch-login) #tw-credits.cur-tw:not(.tw-points-off):has(> .tc-points.hidden):has(> #stash-watch:not([hidden])) > .tc-bits { margin-right: auto; }
/* Tečka na ⇅: skrytá strana má co vyzvednout (bonus bodů Twitche = .has-claim, UC = tlačítko Vyzvednout). */
.tc-flip::after { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--bg-secondary); opacity: 0; scale: 0.4;
  transition: opacity 0.2s, scale 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
#tw-credits.has-claim:not(.cur-tw) > .tc-flip::after { opacity: 1; scale: 1; background: #00db84; box-shadow: 0 0 6px #00db84; }
#tw-credits.cur-tw:has(> #stash-watch .uc-sw-claim:not(.uc-sw-out)) > .tc-flip::after { opacity: 1; scale: 1; background: var(--accent-light); box-shadow: 0 0 6px var(--accent-light); }
/* Přetočení jako kartička: odcházející strana sklopí (rotateX), příchozí se dopéruje. Perspektiva v transformaci,
   ne na řádku (perspective na #tw-credits by změnila containing block tooltipů v něm). */
#tw-credits > .uc-flip-out { animation: uc-flip-out 0.17s ease-in forwards; }
#tw-credits > .uc-flip-in { animation: uc-flip-in 0.38s cubic-bezier(0.3, 1.25, 0.5, 1); }
@keyframes uc-flip-out { from { transform: perspective(500px) rotateX(0); } to { transform: perspective(500px) rotateX(90deg); opacity: 0.2; } }
@keyframes uc-flip-in { from { transform: perspective(500px) rotateX(-90deg); opacity: 0.2; } to { transform: perspective(500px) rotateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tc-flip svg, .tc-flip::after { transition: none; } #tw-credits > .uc-flip-out, #tw-credits > .uc-flip-in { animation: none; } }
@keyframes tc-claim-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(0, 219, 132, 0.32); }
  50%      { box-shadow: 0 0 14px rgba(0, 219, 132, 0.7); }
}
/* "+N" horizontal flash — slides from just right of the rightmost
   visible pill further right, fading. Stays inline with the credits
   row so it's readable, never overlaps the claim-bonus button
   (anchor logic in _flashPointsDelta picks the rightmost pill). */
#tw-credits { position: relative; }

/* ==== Nové rozvržení (spec 2026-10-30 § 2–3): spodní řádek, horní lišty, nastavení ==== */
/* Vpravo zarovnaná skupina (štít, QR, pohár, hamburger): automatický okraj má jen PRVNÍ viditelné tlačítko (i sloučená
   ikona lišt zařazená do toku), ostatní 2 px. Okraje „auto“ pilulek a Plísně z dřívějších rozvržení pryč, jinak by se
   volné místo dělilo a měna by odjela doprostřed (jen řádek řízený core/layout-fit.js). */
#tw-credits.uc-lf-row > :is(#stash-watch, .tc-pill) { margin-left: 0 !important; margin-right: 0 !important; }
#tw-credits.uc-lf-row > .uc-adm-btn { margin-left: 2px !important; }
#tw-credits.uc-lf-row.uc-lf-tight > .uc-adm-btn { margin-left: 0 !important; }
#tw-credits.uc-lf-row > .uc-adm-btn:not([hidden], .uc-lf-hide, .uc-lf-ghost):not(.uc-adm-btn:not([hidden], .uc-lf-hide, .uc-lf-ghost) ~ *) { margin-left: auto !important; }
/* Ikona soundboardu v poli už není nikdy (SFX jen v hubu); tlačítko drží jen modul soundboardu. */
#btn-sfx { display: none !important; }
/* Horní lišty pod hlavičkou: „Teď hraje“ a pak lišta Točka / Gamba / Anketa. */
#top-slot { flex: none; display: flex; flex-direction: column; }
/* Nabídka sloučené ikony lišt (core/layout-fit.js) je absolutně v <body> → pozicovaný blok. */
body { position: relative; }
/* Segmenty Nahoře / Dole / Vypnuto v nastavení Rozhraní (core/seg-switch.css .uc-seg). */
#settings .uc-set-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
#settings .uc-set-row > label { min-width: 0; }
/* display: flex řádku přebíjí atribut hidden (řádek „Právě hraje“ v kanálu bez Hudby). */
#settings .setting-row[hidden] { display: none; }
.tc-points-flash {
  position: absolute;
  pointer-events: none;
  font-weight: 800;
  font-size: 13px;
  color: #00db84;
  text-shadow: 0 0 6px rgba(0, 219, 132, 0.6), 0 0 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  /* translateY(-50%) keeps the flash vertically centered on the row
     given that we set `top` to the anchor's vertical midpoint. */
  transform-origin: left center;
  animation: tc-points-slide 1.5s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
@keyframes tc-points-slide {
  0%   { opacity: 0;   transform: translate(-8px, -50%)  scale(0.85); }
  15%  { opacity: 1;   transform: translate(0,    -50%)  scale(1.08); }
  70%  { opacity: 1;   transform: translate(22px, -50%)  scale(1); }
  100% { opacity: 0;   transform: translate(40px, -50%)  scale(0.95); }
}

/* ---- Input Area ---- */

#input-area {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  flex-shrink: 0;
  /* Odpověď (#reply-indicator) je první dítě na celý řádek nad polem — v toku, ne přes řádek s tlačítky nad polem. */
  flex-wrap: wrap;
}
:where(#input-area) { background: var(--bg-secondary); border-top: 1px solid var(--border); }

#active-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
#active-badge.tw, #active-badge.yt, #active-badge.ki, #active-badge.uco {
  width: 22px;
  height: 22px;
  padding: 0;
  background: center / contain no-repeat;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}
/* Badge u inputu = já jako UnityChat uživatel → rovnou zlaté logo + glow
   (user 2026-09-20), stejné jako .msg .pi.uc u vlastních zpráv. */
#active-badge.tw, #active-badge.yt, #active-badge.ki { filter: drop-shadow(0 0 3px rgba(255, 140, 0, 0.65)); }
#active-badge.tw { background-image: url(icons/platform/twitch-gold.svg); }
#active-badge.yt { background-image: url(icons/platform/youtube-gold.svg); }
#active-badge.ki { background-image: url(icons/platform/kick-gold.svg); }
#active-badge.uco { background-image: url(icons/icon48.png); filter: drop-shadow(0 0 3px rgba(255, 140, 0, 0.65)); }

/* #msg-input-ed = editor se značkami u `!tts` (core/tag-chip-editor.js) na místě textarey — stejný box. */
#msg-input, #msg-input-ed {
  flex: 1;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  min-width: 0;
  resize: none;
  overflow-y: auto;
  max-height: 250px;
  line-height: 1.4;
}

:where(#msg-input, #msg-input-ed) { border: 1px solid var(--border); }
#msg-input:focus, #msg-input-ed:focus { border-color: var(--accent); }
#msg-input:disabled { opacity: 0.4; }

#btn-send {
  background: var(--accent-gradient);
  color: #000;
  border: none;
  width: 32px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--accent-glow);
  /* Šipka (znak ➤) není text k výběru — ani při tažení přes pole, ani dvojklikem (pokyn usera 2026-10-08). */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#btn-send * { -webkit-user-select: none; user-select: none; }

#btn-send:hover { filter: brightness(1.1); }
#btn-send:disabled { opacity: 0.4; cursor: default; }

/* ---- Emote Autocomplete Preview ---- */

/* ---- Reply Indicator ---- */

#reply-indicator {
  position: static;
  flex: 0 0 100%;
  order: -1;
  margin: -6px 0 6px;   /* přilepený k hornímu okraji panelu pole (záložka nad polem) */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: none;
  font-size: 12px;
}

#reply-indicator.hidden { display: none; }

.ri-label {
  color: var(--text-muted);
}

.ri-user {
  color: var(--text-primary);
  font-weight: 600;
}

.ri-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.ri-close:hover {
  color: var(--text-primary);
}

/* ---- Emote Suggest List ---- */

#emote-suggest, .emote-suggest {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.45);
  z-index: 20;
  overflow: hidden;
}

#emote-suggest.hidden, .emote-suggest.hidden { display: none; }
/* Plovoucí seznam u jiných polí (zpráva výročí, core/emote-autocomplete.js): position fixed nad polem (pod ním,
   když nahoře není místo), aby ho neuřízl kontejner s overflow: hidden. left / width / top|bottom nastaví JS. */
.emote-suggest--float {
  position: fixed;
  right: auto;
  border-bottom: 1px solid var(--border);
  border-radius: 6px;
  z-index: 1000;
}
.emote-suggest--float.emote-suggest--below { bottom: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }

/* Fulltext toggle row at the top of the suggest panel — opt-in switch
   from "starts with" matching to "contains" matching. */
.es-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  user-select: none;
}
.es-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.es-toggle:hover { color: var(--text-primary); }

/* ---- Emote preview card (hover/click) ---- */
.emote-preview {
  position: fixed;
  z-index: 1000;
  min-width: 140px;
  max-width: 220px;
  padding: 10px 10px 8px;
  background: linear-gradient(180deg, rgba(22, 22, 28, 0.98), rgba(14, 14, 18, 0.98));
  border: 1px solid rgba(255, 140, 0, 0.35);
  border-radius: 8px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(255, 140, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  /* Subtle entrance — JS doesn't toggle, but matches overall polish */
  animation: ep-pop 0.16s ease-out;
}
.emote-preview.hidden { display: none; }
@keyframes ep-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.emote-preview .ep-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 4px;
}
.emote-preview .ep-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

.emote-preview .ep-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  word-break: break-word;
  max-width: 100%;
}
.emote-preview .ep-source {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 140, 0, 0.18);
  color: var(--accent);
  white-space: nowrap;
}
.emote-preview .ep-src-7tv     { background: rgba(45, 175, 250, 0.18); color: #58c1ff; }
.emote-preview .ep-src-bttv    { background: rgba(216, 27, 96, 0.18); color: #ff6f9b; }
.emote-preview .ep-src-ffz     { background: rgba(38, 132, 255, 0.18); color: #6aa8ff; }
.emote-preview .ep-src-twitch  { background: rgba(145, 70, 255, 0.18); color: #b18cff; }
.emote-preview .ep-src-kick    { background: rgba(83, 252, 24, 0.18); color: #87f04a; }

.emote-preview .ep-detail {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.emote-preview .ep-hint,
.emote-preview .ep-loading {
  font-style: italic;
  opacity: 0.65;
}
.emote-preview .ep-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.4;
}
.emote-preview .ep-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.6;
}
.emote-preview .ep-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}
.emote-preview .ep-avatar-blank {
  background: rgba(255, 255, 255, 0.08);
}
.emote-preview .ep-owner {
  color: var(--text-primary);
  font-weight: 600;
}
.emote-preview .ep-extlink {
  color: var(--accent);
  font-size: 10px;
  text-decoration: none;
  padding-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2px;
  transition: color 0.12s;
}
.emote-preview .ep-extlink:hover {
  color: #ffe28a;
  text-shadow: 0 0 6px rgba(255, 200, 0, 0.35);
}

/* Click-pinned mode is visually slightly stronger: thicker accent border */
.emote-preview.pinned {
  border-color: rgba(255, 140, 0, 0.65);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.75),
    0 0 22px rgba(255, 140, 0, 0.28);
}

.es-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  min-width: 0;
}

.es-item:last-of-type { border-bottom: none; }

.es-item:hover { background: var(--bg-hover); }

.es-item.selected {
  background: rgba(255, 140, 0, 0.15);
}

.es-item img {
  height: 28px;
  width: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Logo zdroje commandu (Židolišta / StreamElements) v seznamu návrhů */
/* Stejný box 28 px pro všechna loga, ať jsou zarovnaná na střed; menší logo (SE) má vnitřní okraj. */
.es-item img.es-logo { width: 28px; height: 28px; padding: 3px; box-sizing: border-box; border-radius: 5px; object-fit: contain; }
.es-item img.es-logo-zidolista { padding: 0; filter: drop-shadow(0px 2px 1px black); }
.es-item .es-logos { display: inline-flex; align-items: center; flex-shrink: 0; }
.es-item .es-logos img { margin-right: 4px; }
.es-item .es-logos img:last-child { margin-right: 0; }
/* Změna zdrojů za běhu: nové logo si udělá místo (šířka od nuly) a prolne se, odebrané vybledne a místo se zavře. */
.es-item .es-logos img.es-logo-in { animation: es-logo-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.es-item .es-logos img.es-logo-out { animation: es-logo-out 320ms ease both; pointer-events: none; }
@keyframes es-logo-in { from { width: 0; margin-right: 0; opacity: 0; transform: scale(0.6); } 55% { width: 28px; margin-right: 4px; opacity: 0; transform: scale(0.85); } to { width: 28px; margin-right: 4px; opacity: 1; transform: scale(1); } }
@keyframes es-logo-out { from { width: 28px; margin-right: 4px; opacity: 1; } 45% { opacity: 0; } to { width: 0; margin-right: 0; opacity: 0; } }

.es-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

.es-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

.es-name-inner {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  vertical-align: bottom;
}

/* Animace scroll - jen když je položka SELECTED a text overflowuje */
.es-item.selected.overflowing .es-name-inner {
  max-width: none;
  overflow: visible;
  animation: es-scroll 6s linear 0.4s infinite;
}

@keyframes es-scroll {
  0%, 12% { transform: translateX(0); }
  50%, 62% { transform: translateX(var(--scroll-dist, 0)); }
  100% { transform: translateX(0); }
}

.es-item.selected .es-name {
  font-weight: 700;
  color: var(--accent);
}

/* Další spouštěče téhož commandu (core bangSuggest): malé a šedé za jménem — „!svetlo · !světlo“. */
.es-aliases {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.8;
}

.es-src {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.6;
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
  /* Osoba UnityChatu = usernamy všech platforem (core userSuggestSource) — dlouhý seznam se ořízne, jméno má přednost. */
  max-width: 55%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Stav TTS u commandu !tts (core/tts-state.js): zdarma / cena za stash + zůstatek / neaktivní. */
.es-note {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; max-width: 62%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 10.5px; font-weight: 700; color: var(--accent-light, #ffb347);
}
.es-note + .es-src { margin-left: 6px; }
.es-note .uc-stash-ico { width: 22px; height: 22px; object-fit: contain; margin: -4px 0; }
.es-note-free { color: #6fdc8c; }
.es-note-poor { color: #ff8a8a; }
.es-note-inactive, .es-note-paused, .es-note-locked { color: var(--text-muted); font-weight: 400; }
/* Command v cooldownu (!počasí): zašedlý řádek s odpočtem, jako skupina v limitu (group-mention.css .es-grp-cd). */
.es-item.es-cd { opacity: .5; }
.es-note-queued { color: #ffb300; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.es-note-queued::before { content: '⚠ '; }
.es-note-poor .uc-stash-ico { filter: grayscale(1); opacity: 0.6; }

/* `/user` našeptávač (mod): logo platformy vedle tečky, login šedě za přezdívkou, stav hledání */
.es-item img.es-plat { width: 16px; height: 16px; margin-left: -2px; }
.es-item.es-user .es-dot { width: 12px; height: 12px; }
.es-login { color: var(--text-muted); font-weight: 400; font-size: 11px; }
.es-status {
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.es-counter {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  padding: 3px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- Reakce „Peepo poop" (core/reaction.js; mod/broadcaster spustí, vidí všichni) ---- */
/* Tlačítko jen pro mody (body.uc-can-poop) a jen když žádná reakce neběží (body.uc-poop-busy). */
.msg-action-btn[data-act="poop"] { display: none; font-size: 13px; }
body.uc-can-poop:not(.uc-poop-busy) .msg-action-btn[data-act="poop"] { display: flex; }
.uc-poop-overlay { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.2s ease; }
.uc-poop-overlay.on { opacity: 1; }
.uc-poop-overlay.no-motion { transition: none; }
/* Reflektor: tmavá plocha s měkce vykrojeným světlem kolem cílové zprávy (maska, ne ostrý okraj). */
.uc-poop-spot {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82);
  --spot-y: 50%; --spot-h: 60px;
  -webkit-mask-image: radial-gradient(ellipse 62% calc(var(--spot-h) * 2.6) at 50% var(--spot-y), rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0.88) 72%, #000 100%);
  mask-image: radial-gradient(ellipse 62% calc(var(--spot-h) * 2.6) at 50% var(--spot-y), rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0.88) 72%, #000 100%);
}
.uc-poop-video { position: absolute; display: block; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
/* Hnědé jméno + logo platformy u cílové zprávy: 15 s natvrdo, pak 15 s přechod zpět.
   Text zprávy taky, ale o dost světlejší odstín, ať zůstane čitelný. */
.msg.uc-poop-brown .un { color: #6b4423 !important; }
.msg.uc-poop-brown .tx,
.msg.uc-poop-brown .tx a { color: #b5835a !important; }
.msg.uc-poop-brown .pi { filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-12deg) brightness(0.55); }
.msg.uc-poop-fade .un,
.msg.uc-poop-fade .tx,
.msg.uc-poop-fade .tx a { transition: color 15s linear; }
.msg.uc-poop-fade .pi { transition: filter 15s linear; }

/* Odpověď bota (StreamElements…) skrytá kvůli UnityChat Announcementu (core/announcement.js hideRecentBotReplies). */
.msg.uc-annc-hidden { display: none !important; }

/* ---- Výběr emotů (core/emote-picker.js) — tlačítko uvnitř pole pro psaní + panel nad ním ---- */
.msg-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.msg-input-wrap #msg-input, .msg-input-wrap #msg-input-ed { flex: 1; padding-right: 34px; }
.msg-input-wrap:has(#msg-input.hidden) { display: none; }
/* Počítadlo délky pro YouTube (core/send-limit.js): malá pilulka na horním okraji pole vpravo, nad limitem červená. */
.uc-send-limit {
  position: absolute; top: -8px; right: 8px; z-index: 2;
  padding: 0 6px; border-radius: 8px; line-height: 15px;
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #9a9aa6); background: #1b1b22; border: 1px solid #34343f;
  pointer-events: auto; cursor: default; user-select: none;
}
.uc-send-limit.uc-send-limit--over { color: #ffd5d5; background: #4a1717; border-color: #e5484d; }
/* Svisle vždy přesně na středu pole (pokyn usera 2026-10-31: v Opeře / Bravu dřív `bottom: 3px` nesedělo — výška pole se
   liší podle velikosti rozvržení i prohlížeče); top + bottom + margin auto nepotřebuje transform (ten má sbalení ikony). */
.emote-btn {
  position: absolute; right: 4px; top: 0; bottom: 0; margin: auto 0;
  width: 26px; height: 26px; padding: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  color: var(--text-secondary, #9a9aa6); cursor: pointer;
}
/* Jednotný hover ikonových tlačítek (emoty, soundboard, QR dono): tmavé pozadí, UnityChat gradient
   v rámečku, zlatá ikona — stejně jako „Změnit email". */
.emote-btn:hover, .emote-btn.active, .uc-tool-btn:hover, .uc-tool-btn.active {
  color: var(--accent-light);
  border-color: transparent;
  background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, var(--accent-gradient) border-box;
}
#msg-input:disabled ~ .uc-sb-btn { opacity: 0.4; pointer-events: none; }
/* Multi-ikona hubu (core/hub-button.js): tahy kreslí core/icon-morph.js jako čáry. */
.uc-hub-morph { overflow: visible; flex: none; }
.uc-hub-morph path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Admin panel (.uc-adm, core/admin-panel.js) má stejný rámeček, rozměry a boční záložky jako panel emotů (pokyn usera
   2026-10-08) — proto sdílí tahle pravidla, v giveaway.css jen z-index a obsah. */
.uc-ep, .uc-adm {
  position: absolute; bottom: 100%; right: 10px; z-index: 30;
  width: min(340px, calc(100% - 20px)); height: min(360px, 60vh, var(--uc-room, 100vh));
  display: flex; flex-direction: column;
  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5);
  margin-bottom: 6px; overflow: hidden;
}
/* Panel emotů / GIFů / SFX nad řádkem s pilulkou měny (core trackPanelLift → --uc-panel-lift na #input-area). */
.uc-ep { margin-bottom: calc(6px + var(--uc-panel-lift, 0px)); }
.uc-ep.hidden, .uc-adm.hidden { display: none; }
/* Úzká obrazovka (telefon, úzký panel): přes celou šířku. */
@media (max-width: 480px) { .uc-ep, .uc-adm { left: 8px; right: 8px; width: auto; } }
.uc-ep-search { padding: 8px; border-bottom: 1px solid var(--border); }
.uc-ep-search input, .uc-sab-search input {
  width: 100%; box-sizing: border-box; padding: 6px 9px;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text-primary); font: inherit; font-size: 13px; outline: none;
}
.uc-ep-search input:focus, .uc-sab-search input:focus { border-color: var(--accent); }
/* Bez horního paddingu: sticky nadpis se lepí na horní hranu, jinak nad ním prosvítá pruh scrollovaných emotů. */
.uc-ep-body { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.uc-ep-sec + .uc-ep-sec { margin-top: 6px; }
.uc-ep-h {
  position: sticky; top: 0; z-index: 1; padding: 9px 0 4px;
  background: var(--bg-tertiary); color: var(--text-secondary, #9a9aa6);
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
.uc-ep-h span { font-weight: 400; opacity: 0.7; margin-left: 4px; }
/* Řádky místo čtvercové mřížky: každý emote má výšku 28 px, šířku podle poměru stran — široký emote se nezmenší
   (dřív se vtěsnal do čtverce), 1:1 zůstává v buňce 36 × 36 (pokyn usera 2026-09-28). */
.uc-ep-grid { display: flex; flex-wrap: wrap; gap: 2px; }
.uc-ep-e {
  flex: 0 0 auto; min-width: 36px; height: 36px; padding: 3px; box-sizing: border-box; border: none; border-radius: 5px; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.uc-ep-e:hover { background: var(--bg-hover); }
.uc-ep-e img { height: 28px; width: auto; max-width: 220px; object-fit: contain; }
.uc-ep-e.zw img { opacity: 0.85; }
.uc-ep-empty { padding: 20px 8px; text-align: center; color: var(--text-secondary, #9a9aa6); font-size: 12px; }
.uc-ep-foot {
  padding: 5px 10px; border-top: 1px solid var(--border);
  color: var(--text-primary); font-size: 12px; min-height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Náhled zero-width stacku (core/emote-preview.js): vrstvy přes sebe, seznam všech emotů. */
.emote-preview .ep-img-wrap.stack { display: grid; place-items: center; }
.emote-preview .ep-img-wrap.stack .ep-img { grid-area: 1 / 1; }
.emote-preview .ep-names { display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 100%; }
.emote-preview .ep-names .ep-name { opacity: 0.75; }
.emote-preview .ep-names .ep-name.active, .emote-preview .ep-names .ep-name:only-child { opacity: 1; }
.emote-preview .ep-plus { color: var(--text-secondary, #9a9aa6); font-weight: 400; }


/* ---- Příjezd nové zprávy zespodu (core/slide-in.js) — OBS chat, web i addon ---- */
@property --uc-slide { syntax: '<length>'; inherits: true; initial-value: 0px; }
#chat.uc-sliding { transition: --uc-slide var(--uc-slide-ms, 160ms) var(--uc-slide-ease, cubic-bezier(0.2, 0.7, 0.2, 1)); }
#chat.uc-sliding.uc-slide-jump { transition: none; }
#chat.uc-sliding > * { transform: translateY(var(--uc-slide)); }

/* Odpověď napříč platformami: malé logo platformy citované zprávy v ↩ řádku (core/uc-reply.js). */
.reply-ctx .rctx-pi { width: 12px; height: 12px; vertical-align: -2px; margin-right: 1px; }

/* Autor citované zprávy je uživatel UnityChatu → zlaté logo (jako .pi.uc). */
.reply-ctx .rctx-pi.uc.tw { background-image: url(icons/platform/twitch-gold.svg); }
.reply-ctx .rctx-pi.uc.ki { background-image: url(icons/platform/kick-gold.svg); }
.reply-ctx .rctx-pi.uc.yt { background-image: url(icons/platform/youtube-gold.svg); }
/* Citovaná zpráva jen v UnityChatu (core isUcOnlyMessageId): logo UnityChatu jako .uc-only-msg u zprávy samé. */
.reply-ctx .rctx-pi.rctx-uco, .reply-ctx .rctx-pi.rctx-uco.uc { background-image: url(icons/icon48.png); filter: drop-shadow(0 0 2px rgba(255, 140, 0, 0.6)); }

/* ---- Nová verze UnityChatu (core/update-notice.js): tlačítko obnovení v hlavičce svítí, výrazný pulzující glow ---- */
.uc-update-ready {
  position: relative;
  color: #ffb347 !important;
  border-color: rgba(255, 170, 60, 0.85) !important;
  background: rgba(255, 140, 0, 0.16) !important;
  border-radius: 6px;
  animation: uc-update-glow 1.4s ease-in-out infinite;
}
.uc-update-ready svg { filter: drop-shadow(0 0 4px rgba(255, 180, 60, 0.95)); }
@keyframes uc-update-glow {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(255, 140, 0, 0.55), 0 0 10px 2px rgba(255, 200, 0, 0.25); text-shadow: 0 0 6px rgba(255, 180, 60, 0.8); }
  50% { box-shadow: 0 0 10px 3px rgba(255, 140, 0, 0.95), 0 0 22px 7px rgba(255, 200, 0, 0.45); text-shadow: 0 0 12px rgba(255, 200, 80, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .uc-update-ready { animation: none; box-shadow: 0 0 8px 2px rgba(255, 140, 0, 0.8); }
}

/* Hlas u `!tts <hlas>` (core/tts-state.js ttsVoiceRowHtml, 2026-10-09): ikona mikrofonu + celý název šedě za aliasem. */
#emote-suggest .es-voice, .es-voice { display: inline-flex; align-items: center; justify-content: center; width: 28px; flex-shrink: 0; color: var(--accent, #ff8c00); }
.es-voice-name { margin-left: 6px; color: #8a8a8a; font-size: 0.9em; }
/* Znovu skrýt spoiler (core/image.js hideImageSpoilers) — jen u zprávy s odkrytým spoilerem. */
.msg-action-btn[data-act="respoiler"] { display: none; }
.msg.uc-spoiler-open .msg-action-btn[data-act="respoiler"] { display: flex; }

/* Emoji jako na Discordu (core/emoji.js, pokyn usera 2026-10-16): ve zprávách <img class="emote uc-emoji"> ve velikosti
   emotu; v ostatních textech (jména, announcementy, našeptávač…) span s obrázkem Twemoji v pozadí a původním znakem
   uvnitř (průhledný — kopírování a textContent zůstanou). */
.uc-emoji-t {
  display: inline-block; width: 1.25em; height: 1.25em; line-height: 1.25em; vertical-align: -0.25em;
  overflow: hidden; white-space: nowrap; text-align: center;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  background: no-repeat center / contain;
}
/* Emoji ve zprávě menší než emote (pokyn usera 2026-10-17: 22 px v layoutu Střední = 22/31,5 výšky emotu). Čtvercové:
   min-width = výška (emote má rezervu 2em na šířku → kolem emoji zbyl prázdný okraj), obal bez bočního okraje. */
.msg .tx img.emote.uc-emoji { height: 1.397em; min-width: 1.397em; }
body.layout-medium .msg .tx img.emote.uc-emoji { height: 1.571em; min-width: 1.571em; }
body.layout-large .msg .tx img.emote.uc-emoji { height: 1.746em; min-width: 1.746em; }
body.layout-xlarge .msg .tx img.emote.uc-emoji,
body.layout-humongous .msg .tx img.emote.uc-emoji { height: 1.816em; min-width: 1.816em; }
.msg .tx .emote-stack:has(> img.uc-emoji:only-child) { margin: -3px 0; }
/* Ikona stashe ve zprávě bota kanálu („+1 {ikona} Plíseň“, core/stash.js stashIconizeHtml, 2026-10-23). */
/* Velikost jako emoty v textu (img.emote 2em, větší rozložení víc) — dřív 22 px působilo vedle emotů malé (pokyn usera 2026-10-23). */
.msg .tx .uc-stash-inline { display: inline-block; width: 2em; height: 2em; object-fit: contain; vertical-align: middle; margin: -3px 1px; }
body.layout-medium .msg .tx .uc-stash-inline { width: 2.25em; height: 2.25em; }
body.layout-large .msg .tx .uc-stash-inline { width: 2.5em; height: 2.5em; }
body.layout-xlarge .msg .tx .uc-stash-inline, body.layout-humongous .msg .tx .uc-stash-inline { width: 2.6em; height: 2.6em; }

/* ---- Reakce na zprávy (core/msg-reactions.js, varianta E z makety 2026-10-23) ----
   Vpravo na posledním řádku zprávy (float uvnitř .tx; .msg má contain: layout = obsahuje float), když se nevejdou,
   tenký řádek pod zprávou. Tlumeně, plně při najetí na zprávu; obrys čipu jen při najetí na něj. */
.uc-rx { float: right; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; align-items: center;
  max-width: 100%; line-height: 16px; margin: 0 0 -4px 10px; position: relative; top: -1px; }
.uc-rx-c { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 5px; border-radius: 10px;
  border: 1px solid transparent; background: none; color: var(--text-secondary, #a7a7b0); font: inherit; font-size: 11px;
  line-height: 1; opacity: .6; cursor: pointer; transition: background .12s, border-color .12s, opacity .12s, color .12s; }
.uc-rx-c b { font-weight: 600; font-variant-numeric: tabular-nums; }
.msg:hover .uc-rx-c { opacity: 1; }
.uc-rx-c:hover { background: #26262c; border-color: rgba(255, 255, 255, .1); color: var(--text-primary, #efeff1); }
.uc-rx-c.mine b { color: #ff8c00; }
.uc-rx-c.mine:hover { border-color: rgba(255, 140, 0, .55); background: rgba(255, 140, 0, .1); }
.uc-rx-c:focus-visible, .uc-rx-p:focus-visible { outline: 2px solid #ff8c00; outline-offset: 1px; }
.uc-rx-emo { height: 16px; width: auto; max-width: none; flex: none; object-fit: contain; }
.uc-rx-emoji { font-size: 13px; line-height: 1; }
/* Ikona stashe nikde menší než 22 px (pravidlo usera) — v čipu přesahuje okraj. */
.uc-rx .uc-stash-ico, .uc-rx-pick .uc-stash-ico { width: 22px; height: 22px; object-fit: contain; margin: -3px -2px; flex: none; }
/* Výběr reakce pod akcemi zprávy */
.uc-rx-pick { position: absolute; top: 12px; right: 6px; z-index: 6; display: flex; gap: 2px; padding: 4px;
  background: #1f1f23; border: 1px solid #2f2f35; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
/* Swipe doleva na mobilu (core/msg-reactions.js): celá zpráva odjede o --rx-dx (jeden prvek = plynulé, i text bez obalu),
   řada emotů široká --rx-tw je přilepená hned za ní (left: 100 %) a jede s ní; #chat má overflow-x: hidden, takže je
   za pravým okrajem schovaná. Vidět zůstane SWIPE_PEEK = 56 px zprávy. Během tažení bez přechodu. */
.msg.uc-rx-swipe { transform: translateX(var(--rx-dx, 0px)); transition: transform .32s cubic-bezier(.22, .9, .3, 1); z-index: 2; }
.msg.uc-rx-swipe > .msg-actions { display: none !important; }
.uc-rx-pick.tray { top: 0; bottom: 0; left: 100%; right: auto; width: var(--rx-tw, 0px); box-sizing: border-box; padding: 0 6px; gap: 0;
  align-items: center; justify-content: space-evenly; border-radius: 0; border: 0; border-left: 1px solid #2f2f35; box-shadow: none;
  background: #1f1f23; overflow: hidden; }
/* Všechny emoty se vejdou (bez vodorovného posouvání řady — tah po řadě vrací zprávu). */
.uc-rx-pick.tray .uc-rx-p { flex: 0 1 40px; min-width: 0; height: 36px; padding: 0; border-radius: 18px; }
.msg.uc-rx-dragging { transition: none; will-change: transform; }
.uc-rx-pick.tray .uc-rx-reply { font-size: 20px; color: var(--text-secondary, #adadb8); margin-right: 6px; background: #26262c; }
/* Dotyk (web na mobilu, pokyn usera 2026-10-25): klepnutí na zprávu ukáže akce NAD zprávou a větší, ať se na ně dá trefit;
   výběr reakce (tlačítko Reagovat) nad nimi. */
/* Jen čistý dotyk: notebook / tablet s dotykovou obrazovkou A myší hlásí pointer: coarse, ale myš hover umí — tam akce
   při najetí jako na počítači (R26 Barruchqa: v addonu akce zprávy vůbec nebyly vidět, addon klepání nemá). */
@media (any-hover: none) and (pointer: coarse) {
  /* Panel akcí řídí klepnutí (core/touch-actions.js, třída .uc-acts), ne „lepivý“ :hover — druhé klepnutí zavře. */
  .msg:hover:not(.uc-acts):not(.uc-rx-picking) .msg-actions { display: none; }
  .msg.uc-acts .msg-actions { display: flex; }
  /* Svislý posun chatu dál dělá prohlížeč, vodorovný tah je swipe reakcí (bez rozjetého posunu, který nejde zrušit). */
  .msg { touch-action: pan-y pinch-zoom; }
  .msg-actions { top: auto; bottom: calc(100% - 4px); border-radius: 10px; padding: 2px; }
  .msg-action-btn { width: 40px; height: 36px; font-size: 18px; border-radius: 8px; }
  .msg-action-btn svg { width: 18px; height: 18px; }
  .msg-action-btn[data-act="poop"] { font-size: 20px; }
  .uc-rx-pick:not(.tray), .uc-rx-pick.up:not(.tray) { top: auto; bottom: calc(100% + 40px); }
  .uc-rx-pick:not(.tray) .uc-rx-p { min-width: 40px; height: 40px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .msg.uc-rx-swipe { transition: none; } }
/* Poslední zpráva u spodního okraje chatu → nad akcemi (core/msg-reactions.js PICK_UP_GAP = 16 px). */
.uc-rx-pick.up { top: auto; bottom: calc(100% + 16px); }
.uc-rx-p { min-width: 30px; height: 30px; padding: 0 3px; border: 0; border-radius: 15px; background: none; cursor: pointer;
  display: grid; place-items: center; transition: transform .12s, background .12s; }
.uc-rx-p:hover { background: #26262c; transform: scale(1.15); }
.uc-rx-p .uc-rx-emo { height: 24px; }
.uc-rx-p .uc-rx-emoji { font-size: 18px; }
.msg.uc-rx-picking .msg-actions { display: flex; }
/* .msg má contain: layout → vlastní vrstva; výběr přečnívá do další zprávy, ta by se kreslila přes něj. */
.msg.uc-rx-picking { z-index: 7; }
/* Režim „jen odpověď v chatu“ (ZL msgReactions.mode message): souhrny reakcí se neukazují, výběr pošle odpověď. */
body.uc-rx-msgonly .uc-rx { display: none !important; }
/* Hláška u zprávy po odeslání odpovědi (core reactionReplyNote). */
.uc-rx-note { position: absolute; right: 8px; bottom: 2px; z-index: 6; padding: 3px 8px; border-radius: 6px; background: #26262c;
  border: 1px solid rgba(255, 255, 255, .1); color: var(--text-secondary, #a7a7b0); font-size: 11px; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45); animation: uc-rx-note 2.8s ease both; }
.uc-rx-note.ok { color: #7fd18b; border-color: rgba(80, 200, 100, .35); }
@keyframes uc-rx-note { 0% { opacity: 0; transform: translateY(3px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .uc-rx-note { animation: none; } }
/* Streamer reakce vypnul v ZL (msgReactions.enabled false): stávající reakce, tlačítko i výběr pryč. */
body.uc-rx-disabled .uc-rx, body.uc-rx-disabled .uc-rx-pick, body.uc-rx-disabled .msg-action-btn[data-act="react"] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .uc-rx-p, .uc-rx-c { transition: none; } .uc-rx-p:hover { transform: none; } }

/* Zvuk při zmínce / nabití stashe s vypnutým „Přehrávat zvuky“ (core notify-sounds.js markSoundOff): zašedlé jako Hlasitost. */
.uc-snd-off { opacity: .45; cursor: help; }
.uc-snd-off input { cursor: help; }