/* Obrázky v chatu (core/image.js, image-viewer.js, image-attach.js). Karta fronty a štítky stavu mají třídy GIFů
   (gif.css: .uc-gif-card*, .uc-gif-st*) — stejný vzhled, tady jen to, co je jen u obrázků. */

/* Obrázek ve zprávě — velikost jako GIF (gifFitSize, max 400 × 250). */
.uc-img { display: block; width: fit-content; max-width: min(100%, 400px); margin: 4px 0 2px; border-radius: 6px; overflow: hidden; cursor: zoom-in; line-height: 0; background: rgba(255, 255, 255, 0.04); }
/* V chatu karta jako GIF (gif.css .uc-gif--card, pokyn usera 2026-10-10): uprostřed, rámeček, stín; na výšku rám 4:3
   s ambientem (sdílené .uc-gif-stage / .uc-gif-amb). */
.msg .uc-img.uc-img--card {
  max-width: min(100%, 412px); margin: 6px auto 3px; padding: 5px; overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38); box-sizing: border-box;
}
.msg .uc-img--card > .uc-img-media { border-radius: 8px; margin: 0 auto; }
.uc-img-stage .uc-img-media { position: relative; height: 100% !important; width: auto !important; max-width: 100%; border-radius: 0; box-shadow: 0 0 18px rgba(0, 0, 0, 0.55); }
.msg .uc-img--card.uc-img--removed { padding: 6px 10px; }
body:not(.uc-raw) .msg .uc-img--card .uc-img-media { transition: filter 120ms ease; }
body:not(.uc-raw) .msg .uc-img--card:hover .uc-img-media { filter: brightness(1.08); }
.uc-img:focus-visible { outline: 2px solid var(--accent, #ff8c00); outline-offset: 2px; }
.uc-img-media { display: block; max-width: 100%; height: auto; object-fit: contain; }
.uc-img--removed { cursor: default; line-height: 1.4; background: none; color: var(--text-secondary, #adadb8); font-style: italic; }
.uc-img-card .uc-img { max-width: 100%; }
body.uc-no-gifs .uc-img { display: none !important; }
/* Smazaná zpráva („Zpráva smazána“) obrázek neukazuje — divák ani OBS (mod s dotaženým obsahem jinou třídu nemá). */
.msg.uc-deleted--label > .uc-img { display: none; }

/* Prohlížeč (překryv přes celý panel / stránku). */
.uc-imgv { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0, 0, 0, 0.88); display: flex; outline: none; }
.uc-imgv-stage { position: absolute; inset: 0; overflow: hidden; cursor: zoom-in; touch-action: none; user-select: none; }
.uc-imgv--zoomed .uc-imgv-stage { cursor: grab; }
.uc-imgv--dragging .uc-imgv-stage { cursor: grabbing; }
.uc-imgv-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; max-height: none; image-rendering: auto; -webkit-user-drag: none; }
.uc-imgv-bar { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 1; }
.uc-imgv-btn { border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(20, 20, 24, 0.85); color: #efeff1; border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.uc-imgv-btn:hover { background: rgba(50, 50, 58, 0.95); }
.uc-imgv-close { min-width: 32px; font-weight: 700; }

/* Příloha nad polem pro psaní. */
.uc-attach-host[hidden] { display: none; }
.uc-attach { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 0 6px; border-radius: 8px; background: var(--bg-elevated, #1f1f23); border: 1px solid rgba(255, 255, 255, 0.08); }
.uc-attach-thumb { position: relative; flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.05); cursor: zoom-in; display: grid; place-items: center; }
.uc-attach[data-phase="uploading"] .uc-attach-thumb, .uc-attach[data-phase="error"] .uc-attach-thumb { cursor: default; }
.uc-attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uc-attach[data-phase="uploading"] .uc-attach-thumb img { opacity: .45; }
.uc-attach-ring { position: absolute; width: 24px; height: 24px; }
.uc-attach-ring[hidden] { display: none; }
.uc-attach-info { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-secondary, #adadb8); font-variant-numeric: tabular-nums; }
.uc-attach[data-phase="error"] .uc-attach-info { color: #ff8a8e; }
.uc-attach-x { flex: 0 0 auto; border: 0; background: none; color: var(--text-secondary, #adadb8); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.uc-attach-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.uc-drop-target { outline: 2px dashed var(--accent, #ff8c00); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) { .uc-imgv-img { transition: none !important; } }

/* Spoiler (pokyn usera 2026-10-12, jako Discord): rozmazaný se štítkem SPOILER, první klik odkryje (core/image.js),
   zpět zamaže tlačítko v hover nabídce (.msg.uc-spoiler-open). Rozmazání i u ambientu po stranách. */
.uc-img--spoiler { position: relative; cursor: pointer; }
/* Neodkrytý: silné rozmazání JEN uvnitř obrázku — zvětšení 1.2 a ořez clip-path na původní rozměr (rozmazané okraje
   by jinak přetékaly do rámečku karty). Specifičtější než hover zesvětlení karty (body:not(.uc-raw) .msg …:hover),
   jinak by najetí myší spoiler odkrylo (hlášení usera 2026-10-12). */
.uc-img--spoiler:not(.uc-img--revealed) .uc-img-media,
body:not(.uc-raw) .msg .uc-img--card.uc-img--spoiler:not(.uc-img--revealed) .uc-img-media { filter: blur(48px) brightness(.6) saturate(1.2); transform: scale(1.2); clip-path: inset(8.33% round 5px); }
.uc-img--spoiler:not(.uc-img--revealed) .uc-gif-amb { filter: blur(48px) brightness(.35); }
.uc-img--spoiler .uc-img-media, .uc-img--spoiler .uc-gif-amb { transition: filter .2s ease, transform .2s ease, clip-path .2s ease; }
.uc-img--spoiler.uc-img--revealed { cursor: zoom-in; }
.uc-img-spoiler-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font: 800 12px/1 var(--font, sans-serif); letter-spacing: .12em; pointer-events: none; }
.uc-img--spoiler.uc-img--revealed .uc-img-spoiler-tag { display: none; }
@media (prefers-reduced-motion: reduce) { .uc-img--spoiler .uc-img-media, .uc-img--spoiler .uc-gif-amb { transition: none; } }
/* Příloha v poli: přepínač Spoiler a rozmazaná miniatura. */
.uc-attach-spoiler { flex: 0 0 auto; margin-left: auto; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: none; color: var(--text-secondary, #adadb8); font: 700 11px/1.4 var(--font, sans-serif); cursor: pointer; }
.uc-attach-spoiler:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.uc-attach-spoiler[aria-pressed="true"] { color: #1a1100; background: linear-gradient(135deg, #ffb347, #ff8a00); border-color: transparent; }
.uc-attach-spoiler[hidden] { display: none; }
.uc-attach--spoiler .uc-attach-thumb img { filter: blur(6px) brightness(.8); }

/* Fronta obrázků ke schválení (core ImageRequests): streamer vidí jen záložku ⌃⌃ (styl .uc-gif-toggle z gif.css),
   kartu až po rozbalení a obrázek rozmazaný do kliknutí (.uc-gif-card--blur jako u GIFů). */
.uc-img-stack { display: flex; flex-direction: column; }
.uc-img-stack[hidden] { display: none; }
.uc-img-stack--collapsed > :not(.uc-gif-toggle) { display: none; }
.uc-img-card.uc-gif-card--blur .uc-gif-card-media { cursor: pointer; }