/* StreamHub player, watch party and live TV pages.
   Mobile-first; colours come from the app.css tokens so themes apply. */

/* ── Watch layout tweaks (base rules live in app.css) ── */
.sh-watch__body { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.sh-watch__body > * { min-width: 0; }
.sh-btn--compact { font-size: .8rem; }
@media (min-width: 901px) {
  .sh-watch__body { grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; }
  .sh-watch__body--movie { grid-template-columns: minmax(0, 1fr); }
}

/* ── Pre-roll ad overlay ── */
.sh-ad-overlay { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.sh-ad-video { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.sh-ad-ui { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1rem; pointer-events: none; }
.sh-ad-label { background: var(--accent); color: #000; font-size: .65rem; font-weight: 800; padding: .2rem .5rem; border-radius: 3px; letter-spacing: .06em; align-self: flex-start; text-transform: uppercase; }
.sh-ad-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; pointer-events: auto; }
.sh-ad-countdown { font-size: .8rem; color: rgba(255,255,255,.55); }
.sh-ad-countdown:empty { display: none; }
.sh-ad-skip { background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: .45rem 1rem; border-radius: var(--r); font-size: .85rem; cursor: pointer; }
.sh-ad-skip:hover { background: rgba(255,255,255,.25); }
.sh-ad-visit { font-size: .75rem; color: rgba(255,255,255,.6); text-decoration: none; }
.sh-ad-visit:hover { color: #fff; }
@media (min-width: 640px) { .sh-ad-ui { padding: 1.25rem; } }

/* ── Live TV: index ── */
.sh-live-page { padding-top: 1.25rem; }
.sh-live-page__head { margin-bottom: 1.25rem; }
.sh-live-hero { position: relative; margin-bottom: 2rem; }
.sh-live-hero__card { display: block; border-radius: var(--r-lg); overflow: hidden; height: 240px; position: relative; text-decoration: none; color: var(--text); background: var(--bg-card); }
.sh-live-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-live-hero__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 55%, transparent 100%); }
.sh-live-hero__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; max-width: 520px; }
.sh-live-hero__title { font-size: 1.3rem; font-weight: 900; margin: .4rem 0; letter-spacing: -.02em; }
.sh-live-hero__desc { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.sh-live-badge { display: inline-block; background: var(--accent); color: #000; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 3px; }
@media (min-width: 768px) {
  .sh-live-page { padding-top: 2rem; }
  .sh-live-page__head { margin-bottom: 2rem; }
  .sh-live-hero { margin-bottom: 2.5rem; }
  .sh-live-hero__card { height: 320px; border-radius: 16px; }
  .sh-live-hero__overlay { background: linear-gradient(105deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 40%, transparent 70%); }
  .sh-live-hero__content { right: auto; padding: 2rem 2.5rem; }
  .sh-live-hero__title { font-size: 1.8rem; }
}

/* LIVE pill (inline variant on channel page; corner variant on hero) */
.sh-live-pulse { display: inline-flex; align-items: center; gap: .35rem; background: color-mix(in srgb, var(--red) 15%, transparent); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); padding: .25rem .65rem; border-radius: 2rem; font-size: .7rem; font-weight: 800; color: var(--red); letter-spacing: .04em; }
.sh-live-pulse span,
.sh-live-card__pulse span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: shLivePulse 1.2s ease-in-out infinite; }
.sh-live-pulse--corner { position: absolute; top: 1rem; right: 1rem; background: rgba(0,0,0,.6); border-color: transparent; backdrop-filter: blur(8px); color: #fff; }
@keyframes shLivePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }
@media (prefers-reduced-motion: reduce) {
  .sh-live-pulse span, .sh-live-card__pulse span { animation: none; }
}

.sh-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .sh-live-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } }
.sh-live-card { display: block; min-width: 0; background: var(--bg-card); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--text); transition: transform .2s, box-shadow .2s; }
.sh-live-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.sh-live-card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg); }
.sh-live-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.sh-live-card:hover .sh-live-card__thumb img { transform: scale(1.05); }
.sh-live-card__pulse { position: absolute; top: .4rem; left: .4rem; display: flex; align-items: center; gap: .3rem; background: rgba(0,0,0,.7); padding: .18rem .5rem; border-radius: 2rem; font-size: .6rem; font-weight: 800; color: #fff; }
.sh-live-card__pulse span { width: 6px; height: 6px; }
.sh-live-card__body { padding: .6rem .75rem; }
.sh-live-card__name { display: block; font-size: .82rem; font-weight: 700; margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-live-card__cat { font-size: .68rem; color: var(--muted); }

/* ── Live TV: channel ── */
.sh-live-tags { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.sh-tag--free { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.sh-live-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; background: rgba(0,0,0,.8); color: var(--muted); font-size: .9rem; }

/* ── Watch party: create ── */
.sh-party-create { max-width: 460px; }
.sh-party-create__help { margin-top: 1.5rem; padding: 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); font-size: .8rem; color: var(--muted); line-height: 1.7; }
.sh-party-create__help-title { color: var(--text); }
.sh-party-create__steps { margin: .25rem 0 0; padding-left: 1.2rem; }
.sh-party-create__url { color: var(--accent); word-break: break-all; }

/* ── Watch party: room (mobile first: video on top, chat below) ── */
.sh-party { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--bg); }
.sh-party__left { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sh-party__topbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; padding: .6rem 1rem; background: var(--bg-card); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sh-party__topbar form { margin: 0; }
.sh-party__code-badge { background: var(--accent); color: #000; border: 0; font: inherit; font-size: .7rem; font-weight: 900; padding: .25rem .65rem; border-radius: 4px; letter-spacing: .06em; cursor: pointer; flex-shrink: 0; }
.sh-party__title { font-weight: 700; font-size: .9rem; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sh-party__members { font-size: .75rem; color: var(--muted); flex-shrink: 0; }
.sh-party__video { background: #000; aspect-ratio: 16/9; min-height: 0; }
.sh-party__video video,
.sh-party__video iframe { width: 100%; height: 100%; display: block; object-fit: contain; border: 0; }
.sh-party__controls { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .6rem 1rem; background: var(--bg-card); border-top: 1px solid var(--border); flex-shrink: 0; font-size: .78rem; color: var(--muted); }
.sh-party__controls-note { margin-left: auto; }
.sh-party__sync-status { color: var(--accent); }
.sh-party__ctrl-btn { background: var(--bg-hover); border: 1px solid var(--border); color: var(--text); padding: .35rem .8rem; border-radius: var(--r); cursor: pointer; font-size: .8rem; transition: background .18s, border-color .18s, color .18s; }
.sh-party__ctrl-btn:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.sh-party__end-btn { background: color-mix(in srgb, var(--red) 10%, transparent); border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.sh-party__end-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

.sh-party__chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 420px; border-top: 1px solid var(--border); background: var(--bg); }
.sh-party__chat-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.sh-party__chat-sync { margin-left: auto; font-size: .68rem; color: var(--accent); font-weight: 600; }
.sh-party__member-list { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: .5rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; max-height: 5.5rem; overflow-y: auto; }
.sh-party__member { font-size: .7rem; color: var(--muted); background: var(--bg-card); border: 1px solid var(--border); padding: .1rem .5rem; border-radius: 2rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-party__member.is-host { color: var(--accent); border-color: var(--accent); }
.sh-party__member.is-host::after { content: ' ★'; }
.sh-party__messages { flex: 1; min-height: 0; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .6rem; }
.sh-party__msg { display: flex; flex-direction: column; align-items: flex-start; }
.sh-party__msg--mine { align-items: flex-end; }
.sh-party__msg-user { font-size: .68rem; color: var(--accent); font-weight: 700; margin-bottom: .18rem; }
.sh-party__msg--mine .sh-party__msg-user { color: var(--muted); }
.sh-party__msg-time { font-weight: 400; opacity: .5; }
.sh-party__msg-text { font-size: .82rem; color: var(--text); background: var(--bg-card); padding: .4rem .7rem; border-radius: 0 8px 8px 8px; max-width: 100%; overflow-wrap: anywhere; }
.sh-party__msg--mine .sh-party__msg-text { background: var(--bg-hover); border-radius: 8px 0 8px 8px; }
.sh-party__chat-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--border); flex-shrink: 0; margin: 0; }
.sh-party__chat-input { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: .5rem .75rem; border-radius: var(--r); font-size: 1rem; }
.sh-party__chat-input:focus { outline: none; border-color: var(--accent); }
.sh-party__chat-send { background: var(--accent); color: #000; border: none; padding: .45rem .9rem; border-radius: var(--r); font-weight: 700; cursor: pointer; font-size: .9rem; }

@media (min-width: 900px) {
  .sh-party-body { overflow: hidden; }
  .sh-party { grid-template-columns: minmax(0, 1fr) 340px; height: calc(100vh - 64px); }
  .sh-party__video { flex: 1; aspect-ratio: auto; }
  .sh-party__chat { height: auto; border-top: 0; border-left: 1px solid var(--border); }
  .sh-party__chat-input { font-size: .83rem; }
}