/* Pochlubit se odznakem — vylepšený chat (core/chat-upgrade.js). Předloha 1:1: docs/mockups/src/2026-10-21-pochlubit-se/template.html
   ř. 330–374. Selektory makety uzavřené pod jádro: .stage → .ucfx-shell, .heaven → .ucfx-heaven, .lday → .ucfx-lday,
   .top / .composer / .composer .in → háčky .ucfx-top / .ucfx-composer / .ucfx-in (třídy přidá hostitel na své prvky).
   Animace s prefixem ucfx-. Jen tmavé téma. */

/* Vrstva jde do hostitele jako první dítě; isolation + z-index −1 = vždy pod zprávami (i nepozicovanými), nic nepřekrývá. */
.ucfx-hvhost { isolation: isolate; }
/* ── Hologram: nebeský chat (pod zprávami): záře shora, paprsky, poletující chmýří ── */
.ucfx-heaven { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; animation: ucfx-hvIn 2.8s ease-out forwards; }
.ucfx-heaven.ucfx-out { animation: ucfx-hvOut 1.2s ease-out forwards; }
@keyframes ucfx-hvIn { to { opacity: 1 } }
@keyframes ucfx-hvOut { from { opacity: 1 } to { opacity: 0 } }
.ucfx-heaven .hv-glow { position: absolute; left: -20%; right: -20%; top: -30%; height: 70%; background: radial-gradient(50% 55% at 50% 30%, rgba(255, 236, 190, .3), rgba(255, 200, 110, .12) 45%, transparent 75%); animation: ucfx-hvBreath 9s ease-in-out infinite; }
@keyframes ucfx-hvBreath { 0%, 100% { opacity: .7; transform: scale(1) } 50% { opacity: 1; transform: scale(1.06) } }
.ucfx-heaven .hv-rays { position: absolute; left: 50%; top: -12%; width: 160%; height: 110%; margin-left: -80%; transform-origin: 50% 0; mix-blend-mode: plus-lighter; opacity: .85;
  background: repeating-conic-gradient(from 160deg at 50% 0, transparent 0 7deg, rgba(255, 230, 170, .07) 9deg, transparent 12deg 17deg);
  -webkit-mask: radial-gradient(70% 85% at 50% 0, #000 20%, transparent 80%); mask: radial-gradient(70% 85% at 50% 0, #000 20%, transparent 80%); animation: ucfx-hvSway 18s ease-in-out infinite; }
@keyframes ucfx-hvSway { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
.ucfx-heaven .hv-motes i { position: absolute; bottom: -10px; left: var(--x); width: var(--w); height: var(--w); border-radius: 50%; background: radial-gradient(circle, #fff, var(--c) 45%, transparent 72%); box-shadow: 0 0 calc(var(--w) * 2.5) var(--c), 0 0 calc(var(--w) * .8) rgba(255, 255, 255, .6); filter: blur(.4px);
  opacity: 0; animation: ucfx-hvRise var(--d) linear var(--dl) infinite, ucfx-hvTw var(--t) ease-in-out infinite; }
@keyframes ucfx-hvRise { 0% { transform: translate(0, 0) } 25% { transform: translate(var(--s), -27vh) } 50% { transform: translate(calc(var(--s) * -.6), -55vh) } 75% { transform: translate(var(--s), -82vh) } 100% { transform: translate(0, -110vh) } }
@keyframes ucfx-hvTw { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
/* Vylepšený chat po Hologramu: dýchající záře v pozadí, zlatý rám panelu, hlavička a pole se zlatým nádechem. */
.ucfx-heaven .hv-bg { position: absolute; inset: 0; background: radial-gradient(80% 45% at 50% 100%, rgba(255, 190, 90, .16), transparent 70%), radial-gradient(70% 50% at 50% 45%, rgba(255, 225, 160, .07), transparent 75%); animation: ucfx-hvBg 7s ease-in-out infinite; }
@keyframes ucfx-hvBg { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
.ucfx-shell { transition: border-color 2.5s, box-shadow 2.5s; }
.ucfx-shell.heavenly { border-color: rgba(255, 210, 120, .45); animation: ucfx-hvFrame 7s ease-in-out 2.5s infinite; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 215, 130, .25), 0 0 28px rgba(255, 190, 80, .22); }
@keyframes ucfx-hvFrame { 0%, 100% { box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 215, 130, .2), 0 0 22px rgba(255, 190, 80, .14) } 50% { box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 220, 140, .4), 0 0 40px rgba(255, 190, 80, .3) } }
.ucfx-shell .ucfx-top, .ucfx-shell .ucfx-composer, .ucfx-shell .ucfx-in { transition: background 2.5s, border-color 2.5s, box-shadow 2.5s; }
.ucfx-shell.heavenly .ucfx-top { background: linear-gradient(180deg, #1d1810, #15130f); border-bottom-color: rgba(255, 210, 120, .3); box-shadow: 0 1px 12px rgba(255, 190, 80, .12); }
.ucfx-shell.heavenly .ucfx-composer { background: linear-gradient(0deg, #1b170f, #15130f); border-top-color: rgba(255, 210, 120, .3); box-shadow: 0 -1px 12px rgba(255, 190, 80, .12); }
.ucfx-shell.heavenly .ucfx-in { border-color: rgba(255, 210, 120, .35); box-shadow: inset 0 0 12px rgba(255, 200, 100, .06); }
/* Štítek v hlavičce „Legendární den“ / „Epický den“ (skrytý přes atribut hidden). */
.ucfx-lday { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px 9px 3px 7px; border-radius: 99px; font: 900 9.5px 'Inter', 'Segoe UI', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #2a1600; cursor: help; white-space: nowrap;
  background: linear-gradient(90deg, #ffe8a8, #ffc65a, #fff1c9, #ffc65a, #ffe8a8); background-size: 300% 100%; box-shadow: 0 0 12px rgba(255, 200, 90, .45); animation: ucfx-flow 4s linear infinite, ucfx-fadeIn 1.2s ease-out both; }
.ucfx-lday[hidden] { display: none; }
.ucfx-lday::before { content: '✦'; font-size: 10px; }
@keyframes ucfx-flow { to { background-position: -200% 0 } }
@keyframes ucfx-fadeIn { to { opacity: 1 } }
/* Ostatní P4: totéž slaběji v barvě materiálu (--hv). */
.ucfx-heaven.p4 .hv-bg { background: radial-gradient(80% 45% at 50% 100%, color-mix(in srgb, var(--hv) 12%, transparent), transparent 70%), radial-gradient(70% 50% at 50% 45%, color-mix(in srgb, var(--hv) 5%, transparent), transparent 75%); }
.ucfx-heaven.p4 .hv-glow { background: radial-gradient(50% 55% at 50% 30%, color-mix(in srgb, var(--hv) 14%, transparent), color-mix(in srgb, var(--hv) 5%, transparent) 45%, transparent 75%); }
.ucfx-heaven.p4 .hv-motes i { animation-name: ucfx-hvRise, ucfx-hvTw4; }
@keyframes ucfx-hvTw4 { 0%, 100% { opacity: .2 } 50% { opacity: .75 } }
.ucfx-shell.heavenly.p4h { border-color: color-mix(in srgb, var(--hv) 35%, transparent); animation-name: ucfx-hvFrame4; }
@keyframes ucfx-hvFrame4 { 0%, 100% { box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--hv) 14%, transparent), 0 0 16px color-mix(in srgb, var(--hv) 10%, transparent) } 50% { box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--hv) 28%, transparent), 0 0 28px color-mix(in srgb, var(--hv) 20%, transparent) } }
.ucfx-shell.heavenly.p4h .ucfx-top { background: linear-gradient(180deg, color-mix(in srgb, var(--hv) 7%, #141417), #141417); border-bottom-color: color-mix(in srgb, var(--hv) 22%, transparent); box-shadow: 0 1px 10px color-mix(in srgb, var(--hv) 8%, transparent); }
.ucfx-shell.heavenly.p4h .ucfx-composer { background: linear-gradient(0deg, color-mix(in srgb, var(--hv) 6%, #141417), #141417); border-top-color: color-mix(in srgb, var(--hv) 22%, transparent); box-shadow: 0 -1px 10px color-mix(in srgb, var(--hv) 8%, transparent); }
.ucfx-shell.heavenly.p4h .ucfx-in { border-color: color-mix(in srgb, var(--hv) 28%, transparent); box-shadow: none; }
.ucfx-lday.p4 { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); background: linear-gradient(90deg, color-mix(in srgb, var(--hv) 70%, #000), var(--hv), color-mix(in srgb, var(--hv) 55%, #fff), var(--hv), color-mix(in srgb, var(--hv) 70%, #000)); background-size: 300% 100%; box-shadow: 0 0 10px color-mix(in srgb, var(--hv) 40%, transparent); }
/* reduced-motion (přepínač hostitele ucfx-reduced i systémová volba): jen klidná záře. */
.ucfx-heaven.ucfx-reduced { animation: none; opacity: 1; }
.ucfx-heaven.ucfx-reduced.ucfx-out { animation: ucfx-hvOut 1.2s ease-out forwards; }
.ucfx-heaven.ucfx-reduced .hv-glow, .ucfx-heaven.ucfx-reduced .hv-bg { animation: none; }
/* Bez dýchajícího rámu a lesku štítku (specificita 4 > .ucfx-shell.heavenly.p4h). */
.ucfx-shell.ucfx-reduced.heavenly.heavenly, .ucfx-lday.ucfx-reduced { animation: none; }
/* Systémové „omezit animace“ jen mimo OBS (body.uc-raw — v OBS animace vždy, web v OBS předává reduced=false).
   Shell = body (addon i web) i vnořený prvek. */
@media (prefers-reduced-motion: reduce) {
  body:not(.uc-raw) .ucfx-heaven .hv-motes, body:not(.uc-raw) .ucfx-heaven .hv-rays { display: none; }
  body:not(.uc-raw) .ucfx-heaven .hv-glow, body:not(.uc-raw) .ucfx-heaven .hv-bg { animation: none; }
  body:not(.uc-raw) .ucfx-heaven { animation: none; opacity: 1; }
  body:not(.uc-raw) .ucfx-heaven.ucfx-out { animation: ucfx-hvOut 1.2s ease-out forwards; }
  body:not(.uc-raw).ucfx-shell.heavenly, body:not(.uc-raw) .ucfx-shell.heavenly, body:not(.uc-raw) .ucfx-lday { animation: none; }
}