/* Suffah — Phase 56: video (feed card, full-screen viewer, mini player) */

/* ---- feed / post-page card ---- */
.xvid { position: relative; margin-top: 12px; border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; max-height: 75vh; }
.xvid__v { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.xvid__mute, .xvid__time, .xvid__play { position: absolute; color: #fff; background: rgba(15, 20, 25, .75); border: 0; }
.xvid__mute { right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.xvid__time { left: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; font-size: .95rem; font-weight: 700; line-height: 1.3; pointer-events: none; }
.xvid__play { top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: none; align-items: center; justify-content: center; pointer-events: none; }
.xvid.is-paused .xvid__play { display: inline-flex; }
.xvid__mute svg, .xvid__play svg { display: block; }
.quote-embed__video { display: inline-flex; align-items: center; justify-content: center; background: #0f1419; color: #fff; }

/* compose preview card */
.xc__mvideo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; padding: 20px; color: #fff; text-align: center; background: #16181c; }
.xc__mvideo-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 1.1rem; }
.xc__mvideo-size { font-size: .95rem; opacity: .75; }

/* ---- full-screen viewer ---- */
.xv { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; background: #000; color: #e7e9ea; font-family: inherit; }
.xv[hidden] { display: none; }
.xv__top { display: flex; justify-content: space-between; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); flex: none; }
.xv__circle { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #16181c; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; text-decoration: none; }
.xv__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.xv__video { width: 100%; max-height: 100%; background: #000; display: block; }
.xv__bottom { flex: none; padding: 12px 14px calc(8px + env(safe-area-inset-bottom)); }
.xv__author { display: flex; align-items: center; gap: 12px; }
.xv__avatar { width: 40px; height: 40px; border-radius: 50%; background: #2f3336; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #e7e9ea; flex: none; text-decoration: none; }
.xv__avatar img { width: 100%; height: 100%; object-fit: cover; }
.xv__who { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.xv__name { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 1.25rem; overflow: hidden; white-space: nowrap; }
.xv__handle { color: #71767b; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xv__follow { border: 0; border-radius: 999px; background: #16181c; color: #fff; font-weight: 800; font-size: 1.1rem; padding: 0 18px; min-height: 38px; cursor: pointer; flex: none; }
.xv__follow[hidden] { display: none; }
.xv__text { margin: 12px 0 10px; font-size: 1.2rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.xv__pills { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.xv__pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #16181c; color: #e7e9ea; font-size: 1.1rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.xv__pill.is-on { color: #1d9bf0; }
.xv__pill[data-act="like"].is-on { color: #f91880; }
.xv__pill[data-act="repost"].is-on { color: #00ba7c; }
.xv__pill--icon { padding: 0; width: 40px; justify-content: center; }
.xv__pill--end { margin-left: auto; }
.xv__bar { position: relative; height: 22px; margin: 6px -14px 0; cursor: pointer; touch-action: none; }
.xv__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; background: #536471; }
.xv__fill { position: absolute; left: 0; top: 10px; height: 3px; background: #fff; width: 0; }
.xv__ctrl { display: flex; align-items: center; gap: 14px; padding: 4px 6px 0; }
.xv__ctrl button { border: 0; background: none; color: #e7e9ea; display: inline-flex; align-items: center; padding: 6px; cursor: pointer; font-size: 1.4rem; font-weight: 800; }
.xv__time { color: #71767b; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.xv__sp { flex: 1; }

/* ⋮ sheet rows */
.xv-rows { display: flex; flex-direction: column; padding-bottom: 6px; }
.xv-row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 6px; border: 0; background: none; color: inherit; text-align: left; font: inherit; font-size: 1.25rem; cursor: pointer; text-decoration: none; }
.xv-row svg { flex: none; color: var(--text-secondary, #71767b); }
.xv-row__tx { display: flex; flex-direction: column; }
.xv-row__sub { font-size: 1rem; color: var(--text-tertiary, #71767b); }

/* ---- mini player ---- */
.xmini { position: fixed; z-index: 1000; top: 70px; right: 12px; width: 260px; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 6px 28px rgba(0, 0, 0, .45); touch-action: none; user-select: none; -webkit-user-select: none; }
.xmini__v { display: block; width: 100%; height: auto; max-height: 60vh; background: #000; }
.xmini__btn { position: absolute; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.xmini__expand { top: 8px; left: 8px; }
.xmini__close { top: 8px; right: 8px; }
.xmini__size { right: 6px; bottom: 6px; background: none; cursor: nwse-resize; touch-action: none; }
.xmini__mid { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; gap: 26px; pointer-events: none; }
.xmini__mid .xmini__btn { position: static; pointer-events: auto; width: 44px; height: 44px; background: none; }
.xmini__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .3); }
.xmini__fill { height: 100%; width: 0; background: #fff; }

/* Phase 57: text overlays, AI label, viewer wrapper, draft thumb */
.xvid__txt { position: absolute; transform: translate(-50%, -50%); max-width: 90%; font-weight: 800; font-size: 1.5rem; line-height: 1.15; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); pointer-events: none; word-break: break-word; }
.xvid__ai { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(15, 20, 25, .75); color: #fff; font-size: .9rem; font-weight: 700; pointer-events: none; }
.xv__wrap { position: relative; width: 100%; }
.xv__wrap .xvid__txt { font-size: 2rem; }
.xc__thumbvideo { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 80px; background: #0f1419; color: #fff; }

/* Phase 57 fix: the video must never cover the viewer's top bar */
.xv__top { position: relative; z-index: 3; }
.xv__stage { overflow: hidden; z-index: 1; }
.xv__wrap { height: 100%; display: flex; align-items: center; justify-content: center; }
.xv__wrap .xv__video { width: 100%; height: auto; max-height: 100%; object-fit: contain; }

/* Phase 70/71: like X — info sits on top of the picture, tap hides everything, swipe pages */
.xv__stage { touch-action: none; }
.xv__bottom { position: relative; padding-top: 0; }
.xv__meta { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 3; padding: 56px 14px 6px; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0)); touch-action: none; }
.xv__text { -webkit-line-clamp: 2; cursor: pointer; margin: 8px 0 10px; }
.xv__ago { color: #a0a6ab; font-size: 1.05rem; margin: -2px 0 10px; }
.xv__ago[hidden] { display: none; }
.xv__pills { margin-bottom: 4px; }
.xv--expanded .xv__text { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: pre-line; max-height: 46vh; overflow-y: auto; }
.xv--expanded .xv__meta { background: rgba(0,0,0,.78); padding-top: 14px; }
.xv--expanded .xv__stage::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 2; }
.xv__top, .xv__meta, .xv__bottom > .xv__bar, .xv__ctrl > * { transition: opacity .18s; }
.xv--bare .xv__top, .xv--bare .xv__meta, .xv--bare .xv__ctrl, .xv--bare .xv__bar { opacity: 0; pointer-events: none; }
.xv--scrub .xv__top, .xv--scrub .xv__meta { opacity: 0; pointer-events: none; }
.xv--scrub .xv__ctrl > :not([data-pp]) { opacity: 0; }
.xv--scrub .xv__bar::before, .xv--scrub .xv__fill { top: 8px; height: 6px; }
.xv--scrub .xv__bar::before { background: #3a4249; }
.xv__scrubtx { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4; text-align: center; font-size: 1.9rem; font-weight: 500; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); pointer-events: none; font-variant-numeric: tabular-nums; }
.xv__scrubtx[hidden] { display: none; }
.xv__ctrl button[hidden] { display: none; }
.xv__stage, .xv__meta { will-change: transform; }