/* Live room additions: the omb.live/@username footer and the viewer's clear display. Unlayered like the rest
   of the live styles. */

/* Footer under the composer, on every live (viewer and creator). Everything that sits above the composer
   moves up by the footer's height. */
.pf\:live-watermark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
  z-index: 31;
  text-align: center;
  font: 600 11px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 1rem;
}
.pf\:live-watermark-brand { color: rgba(255, 255, 255, 0.9); font-weight: 800; }
.pf\:live-room:not(.pf\:live-go) .pf\:live-compose-bar {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.pf\:live-room:not(.pf\:live-go) > :is(.pf\:live-chat-stack, .pf\:live-rail, .pf\:live-chat-peek, .pf\:live-gifts, .pf\:live-highlight, .pf\:live-toolbar) {
  translate: 0 -0.85rem;
}

/* Clear display (viewers): only the picture, the creator chip and the footer stay. */
.pf\:live-room > :is(.pf\:live-chat-stack, .pf\:live-gifts, .pf\:live-joins, .pf\:live-rail, .pf\:live-compose-bar, .pf\:live-goal, .pf\:live-highlight, .pf\:live-chat-peek, .pf\:live-gift-stage, .pf\:live-toolbar),
.pf\:live-room .pf\:live-top-gifters {
  transition: opacity 0.22s ease, visibility 0s linear 0s;
}
.pf\:live-room.is-clear > :is(.pf\:live-chat-stack, .pf\:live-gifts, .pf\:live-joins, .pf\:live-rail, .pf\:live-compose-bar, .pf\:live-goal, .pf\:live-highlight, .pf\:live-chat-peek, .pf\:live-gift-stage, .pf\:live-toolbar),
.pf\:live-room.is-clear .pf\:live-top-gifters {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.pf\:live-room.is-clear .pf\:live-watermark { bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)); }

.pf\:live-clear-restore {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 32;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 3.5rem;
  margin-top: -1.75rem;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pf\:live-room.is-clear .pf\:live-clear-restore { display: inline-flex; }

/* Pinned comment: just above the composer; the chat moves up while one is pinned. */
.pf\:live-pinned {
  position: absolute;
  left: 0.75rem;
  right: 4.25rem;
  bottom: calc(5.15rem + env(safe-area-inset-bottom, 0px));
  z-index: 21;
  display: none;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.85rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(245, 158, 11, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
.pf\:live-pinned.is-active { display: flex; }
.pf\:live-room:not(.pf\:live-go):has(.pf\:live-pinned.is-active) > .pf\:live-chat-stack {
  translate: 0 -4.1rem;
}
.pf\:live-pinned-icon { flex: none; width: 1rem; height: 1rem; color: #f59e0b; margin-top: 0.1rem; }
.pf\:live-pinned-icon svg { width: 100%; height: 100%; }
.pf\:live-pinned-body { flex: 1; }
.pf\:live-pinned-name { margin: 0; font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.pf\:live-pinned-text {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf\:live-pinned-unpin {
  display: none;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pf\:live-pinned-unpin svg { width: 0.85rem; height: 0.85rem; }
/* Only the creator and moderators see the unpin button. */
.pf\:live-room[data-live-role="publisher"] .pf\:live-pinned-unpin,
.pf\:live-room:has(#live_moderator_tools.is-moderator) .pf\:live-pinned-unpin { display: inline-flex; }
.pf\:live-room.is-clear > .pf\:live-pinned { opacity: 0; visibility: hidden; pointer-events: none; }

/* The creator's own comment can only be pinned. */
.pf\:live-comment-context[data-own="true"] .pf\:live-comment-context-actions > :not([data-pin]) { display: none; }

.pf\:live-rail-btn[hidden], .pf\:live-chat-jump[hidden] { display: none; }

/* Double-tap hearts. */
.pf\:live-heart {
  position: absolute;
  z-index: 33;
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  color: #e11d48;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  animation: live-heart-rise 1.35s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.pf\:live-heart svg { width: 100%; height: 100%; }
@keyframes live-heart-rise {
  0% { transform: translate(0, 0) scale(calc(var(--heart-scale, 1) * 0.4)); opacity: 0; }
  15% { transform: translate(0, -0.6rem) scale(var(--heart-scale, 1)); opacity: 1; }
  100% { transform: translate(var(--heart-drift, 0), -9rem) scale(calc(var(--heart-scale, 1) * 0.8)); opacity: 0; }
}

/* "N new comments" while scrolled up in the chat. */
.pf\:live-chat-jump {
  position: absolute;
  left: 0.75rem;
  bottom: calc(5.3rem + env(safe-area-inset-bottom, 0px));
  z-index: 24;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font: 700 0.75rem/1 Inter, system-ui, sans-serif;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.pf\:live-room:has(.pf\:live-pinned.is-active) .pf\:live-chat-jump { bottom: calc(8.6rem + env(safe-area-inset-bottom, 0px)); }
.pf\:live-room.is-clear > .pf\:live-chat-jump { display: none; }

/* Swiping to the next live. */
.pf\:live-room.is-leaving-up > .pf\:live-video { transition: transform 0.3s ease, opacity 0.3s ease; transform: translateY(-12%); opacity: 0; }
.pf\:live-room.is-leaving-down > .pf\:live-video { transition: transform 0.3s ease, opacity 0.3s ease; transform: translateY(12%); opacity: 0; }
.pf\:live-room.is-nudged > .pf\:live-video { animation: live-nudge 0.35s ease; }
@keyframes live-nudge { 0%, 100% { transform: none; } 40% { transform: translateY(-3%); } }

/* Creator: live timer in the pill, and the stats panel slid in from the right. */
.pf\:live-timer { margin-left: 0.3rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.pf\:live-stats {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 46;
  width: min(20rem, 82vw);
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translate3d(105%, 0, 0);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.pf\:live-room.is-stats-open .pf\:live-stats { transform: translate3d(0, 0, 0); }
.pf\:live-stats-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.pf\:live-stats-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.pf\:live-stats-close {
  width: 2rem; height: 2rem; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pf\:live-stats-close svg { width: 0.9rem; height: 0.9rem; }
.pf\:live-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; }
.pf\:live-stats-cell { padding: 0.6rem 0.7rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.06); }
.pf\:live-stats-cell dt { margin: 0; font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); }
.pf\:live-stats-cell dd { margin: 0.15rem 0 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pf\:live-stats-sub { margin: 1rem 0 0.4rem; font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.pf\:live-stats-gifters { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pf\:live-stats-gifter { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.4rem; font-size: 0.85rem; }
.pf\:live-stats-gifter > :first-child { color: #f59e0b; font-weight: 800; }
.pf\:live-stats-gifter > :last-child { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); }
.pf\:live-stats-hint { margin: 1rem 0 0; font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); text-align: center; }

/* Go Live: 3, 2, 1 before the live starts (tap to cancel). */
.pf\:live-countdown {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: 900 7rem/1 Inter, system-ui, sans-serif;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.pf\:live-countdown.is-active { display: flex; }
.pf\:live-countdown span { animation: live-count 1s ease forwards; }
@keyframes live-count { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(0.85); opacity: 0; } }
.pf\:live-countdown small { position: absolute; bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); }
.pf\:live-stats-sub:has(+ .pf\:live-stats-gifters[hidden]) { display: none; }

/* Viewer bottom bar: comment field, then gift, share and like (thumb reach, TikTok-style). On a phone the
   buttons step aside while typing and one-tap reactions sit above the field; send shows once there is text. */
.pf\:live-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.pf\:live-bar-btn {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.12s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pf\:live-bar-btn:active { transform: scale(0.92); }
.pf\:live-bar-btn svg { width: 1.25rem; height: 1.25rem; }
.pf\:live-bar-btn.is-gift { color: #fcd34d; }
.pf\:live-bar-btn.is-like { color: #ff3b6b; }
.pf\:live-bar-btn.is-like.is-pop svg { animation: pf-live-like-pop 0.32s ease-out; }
@keyframes pf-live-like-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (hover: hover) {
  .pf\:live-bar-btn:hover { background: rgba(0, 0, 0, 0.62); }
}
.pf\:live-compose-bar.has-actions .pf\:live-compose { gap: 0.45rem; }
.pf\:live-compose-bar.has-actions .pf\:live-compose:has(.pf\:live-input:placeholder-shown) .pf\:live-send { display: none; }

.pf\:live-reactions {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(100% - 0.25rem);
  display: none;
  justify-content: space-between;
  padding: 0.2rem 0.35rem;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pf\:live-reaction {
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.pf\:live-reaction:active { transform: scale(1.25); }
.pf\:live-compose-bar.has-actions:has(.pf\:live-input:focus) .pf\:live-reactions { display: flex; }
@media (pointer: coarse) {
  .pf\:live-compose-bar.has-actions:has(.pf\:live-input:focus) :is(.pf\:live-bar-actions, .pf\:live-quick-gift) { display: none; }
}
@media (min-width: 640px) {
  .pf\:live-reactions { left: 50%; right: auto; width: 22rem; translate: -50% 0; }
}