/* /live/player.css — overlay layout for the simulated livestream player.
   Mobile-first; portrait video background, chat rail bottom-left, product
   card bottom-right, floating heart animation. */

:root {
  --accent: #ff6b35;
  --shopee: #ee4d2d;
  --tiktok: #fe2c55;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #000; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* SSR fallback */
.ssr-fallback {
  max-width: 800px; margin: 0 auto; padding: 16px;
  background: #fff; color: #222; min-height: 100vh;
}
.ssr-fallback h1 { font-size: 22px; margin: 0 0 8px; }
.ssr-fallback h2 { font-size: 18px; margin: 18px 0 8px; }
.ssr-products { padding: 0; list-style: decimal inside; }
.ssr-products li {
  display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee;
}
.ssr-products img { border-radius: 6px; flex-shrink: 0; }
.ssr-products a { color: var(--shopee); }

body.live-active .ssr-fallback { display: none; }
body.live-active #startGate { display: none !important; }
body.live-active { overflow: hidden; }
body.live-ended .ssr-fallback { display: none; }
body.live-ended { overflow: hidden; background: #000; }

/* Stage */
#liveStage {
  position: fixed; inset: 0; overflow: hidden;
  background: #111;
}
#liveStage[hidden] { display: none !important; }

/* Video — pointer-events:none prevents right-click/hold save on mobile */
.bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 600ms ease-in-out;
  background: #000;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.bg-video.show { opacity: 1; }

/* Overlay UI */
.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.overlay > * { pointer-events: auto; }

.top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), transparent);
}
.host { display: flex; align-items: center; gap: 8px; font-weight: 600; }
/* Avatar: object-fit cover + drop-shadow instead of border */
.host img {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.75));
}
.live-dot {
  background: var(--accent); padding: 2px 8px; border-radius: 4px;
  font-size: 11px; letter-spacing: .5px; animation: pulse 1.6s infinite;
}
@keyframes pulse { 50% { opacity: .55; } }
.viewer-count {
  background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 12px;
  font-size: 12px;
}

/* Host subtitle — full-width ticker below the top-bar */
.host-subtitle {
  width: 100%; padding: 3px 14px;
  font-size: 12px; color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  margin-top: -6px;
}

/* Caption — sits above product card when both are visible */
.caption-bar {
  position: absolute;
  bottom: 152px; left: 12px; right: 12px;
  text-align: center; pointer-events: none;
  padding: 5px 14px; background: rgba(0,0,0,.65); border-radius: 12px;
  font-size: 13px; font-weight: 500; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.caption-bar:empty { display: none; }

/* Product card — full-width at bottom */
.product-card {
  position: absolute; bottom: 58px; left: 12px; right: 12px;
  display: flex; gap: 10px; padding: 8px;
  background: rgba(255,255,255,.95); color: #222;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: slideIn .3s ease;
  z-index: 20;
}
.product-card[hidden] { display: none; }
@keyframes slideIn { from { transform: translateY(80px); opacity: 0; } }
.product-card img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
}
.pc-body { flex: 1; min-width: 0; }
.pc-name {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-price { color: var(--shopee); font-weight: 700; font-size: 14px; margin: 2px 0 4px; }
.pc-cta { display: flex; gap: 4px; flex-wrap: wrap; }
.cta {
  flex: 1; text-align: center; padding: 5px; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-decoration: none; color: #fff;
}
.cta-shopee { background: var(--shopee); }
/* TikTok button: black with white text */
.cta-tiktok { background: #111; color: #fff; }

/* Flash sale banner — top-right corner, compact */
.flashsale {
  position: absolute; top: 86px; right: 10px; bottom: auto; left: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 5px 9px; border-radius: 8px;
  background: linear-gradient(135deg, #ff6b35, #ff2c55);
  font-weight: 700; min-width: 80px; max-width: 110px; text-align: center;
  animation: flashPop .4s cubic-bezier(.36,.07,.19,.97) both,
             flashGlow 1.8s ease-in-out .4s infinite;
  z-index: 25;
}
.flashsale[hidden] { display: none; }
/* Inner link — no browser link colours */
.flashsale-inner {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: inherit; width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.flashsale > span { font-size: 8px; letter-spacing: .4px; opacity: .85; white-space: nowrap; }
.flashsale strong { font-size: 11px; letter-spacing: .4px; line-height: 1.2; display: block; }
.flashsale small  { font-size: 9px; opacity: .8; line-height: 1.3; display: block; }

@keyframes flashPop {
  0%   { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  55%  { transform: scale(1.15) rotate(3deg);  opacity: 1; }
  75%  { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1)    rotate(0);     opacity: 1; }
}
@keyframes flashGlow {
  0%, 100% { box-shadow: 0 2px 10px rgba(255,107,53,.55); }
  50%  { box-shadow: 0 2px 20px rgba(255,44,85,.9), 0 0 0 3px rgba(255,44,85,.25); }
}

/* Min-height for product card only */
.product-card { min-height: 82px; }

/* Chat rail — bottom-left, z-index below product card */
.chat-rail {
  position: absolute; bottom: 170px; left: 12px;
  width: min(60vw, 320px); height: 40vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px; overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.8) 50%, #000 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.8) 50%, #000 70%);
  z-index: 10;
}
.chat-row {
  font-size: 13px; line-height: 1.3;
  background: rgba(0,0,0,.2); padding: 4px 10px; border-radius: 12px;
  align-self: flex-start; max-width: 100%; word-wrap: break-word;
  animation: chatIn .25s ease;
}
.chat-row b { color: #ffd86b; margin-right: 6px; }
.chat-row.match { background: rgba(255,107,53,.4); }
@keyframes chatIn { from { transform: translateY(8px); opacity: 0; } }

/* Chat input + darker bottom overlay */
.chat-input {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: 6px; padding: 10px 12px;
  padding-top: 55px;
  background: linear-gradient(0deg, rgba(0,0,0,.92) 55%, transparent 100%);
}
.chat-input input {
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3);
  padding: 8px 12px; border-radius: 18px; font-size: 13px; outline: none;
}
.chat-input input::placeholder { color: rgba(255,255,255,.6); }
#chatName { width: 65px; }
#chatMsg  { flex: 1; min-width: 0; }
.chat-input button {
  border: 0; padding: 0 14px; border-radius: 18px;
  background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
}
#cartBtn  {
  background: linear-gradient(135deg, #ff6b35, #f7c548);
  font-size: 15px; padding: 0 16px;
  box-shadow: 0 0 10px rgba(255,107,53,0.5);
  animation: cartPulse 1.5s infinite alternate;
}
@keyframes cartPulse {
  from { box-shadow: 0 0 6px rgba(255,107,53,0.3); transform: scale(1); }
  to { box-shadow: 0 0 14px rgba(255,107,53,0.8); transform: scale(1.06); }
}
#heartBtn { background: rgba(255,255,255,.15); font-size: 18px; }
#shareBtn { background: rgba(255,255,255,.15); font-size: 16px; }

/* Heart animation — container (fixed bottom-right) */
.hearts {
  position: absolute; bottom: 60px; right: 14px;
  width: 60px; height: 60vh; pointer-events: none;
}
.heart {
  position: absolute; bottom: 0; left: 50%;
  font-size: 22px; color: var(--tiktok);
  animation: floatUp 2.4s ease-out forwards;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  pointer-events: none;
}
@keyframes floatUp {
  0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), -60vh) scale(1.2); opacity: 0; }
}

/* ── 50-heart burst ────────────────────────────────────────────────────── */
.heart-burst-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 80;
}
.heart-burst-center {
  font-size: 0; animation: burstCenter .9s cubic-bezier(.22,1.3,.36,1) forwards;
  pointer-events: none; line-height: 1;
}
@keyframes burstCenter {
  0%   { font-size: 0px;  opacity: 1; }
  60%  { font-size: 120px; opacity: 1; }
  100% { font-size: 140px; opacity: 0; }
}
.heart-burst-particle {
  position: absolute; top: 50%; left: 50%;
  font-size: 28px; pointer-events: none;
  animation: burstParticle var(--dur,.7s) ease-out forwards;
}
@keyframes burstParticle {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) scale(.3); opacity: 0; }
}

/* Positional hearts — spawned at tap location on stage */
.heart-positional {
  position: absolute;
  font-size: 26px; color: var(--tiktok);
  animation: floatUpAbs 2.4s ease-out forwards;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
  pointer-events: none;
  z-index: 50;
  transform-origin: center bottom;
}
@keyframes floatUpAbs {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 120px)) scale(1.3); opacity: 0; }
}

/* ── Waiting room / start gate ─────────────────────────────────────────── */
.start-gate {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  background: linear-gradient(160deg, #0d0221 0%, #1a0533 35%, #0d1b4b 70%, #071435 100%);
  color: #fff; cursor: pointer; z-index: 100;
  overflow: hidden; border: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.start-gate[hidden],
body.live-active .start-gate { display: none !important; }

/* Radial glow burst at top */
.gate-glow {
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 140%; aspect-ratio: 1;
  background: radial-gradient(ellipse, rgba(255,107,53,.3) 0%, transparent 65%);
  pointer-events: none;
}

/* Text content block — sits above the character */
.gate-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 52px 28px 32px;
  gap: 10px;
}

.gate-live-badge {
  display: inline-block;
  background: #ff2c55; padding: 5px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 700; letter-spacing: .8px;
  animation: pulse 1.6s infinite;
  box-shadow: 0 0 16px rgba(255,44,85,.6);
}

.gate-title {
  font-size: clamp(18px, 5vw, 26px); font-weight: 800;
  margin: 0; line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.gate-host {
  font-size: 14px; margin: 0; opacity: .85;
  font-weight: 400;
}
.gate-host strong { color: #ffd86b; }

.gate-promo {
  font-size: 15px; margin: 0; color: #ffd86b; font-weight: 600;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.gate-cta-btn {
  margin-top: 6px;
  background: linear-gradient(135deg, #ff6b35, #ff2c55);
  padding: 14px 36px; border-radius: 32px;
  font-size: 17px; font-weight: 700; letter-spacing: .3px;
  box-shadow: 0 6px 28px rgba(255,44,85,.55);
  animation: ctaPulse 2s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 28px rgba(255,44,85,.55); }
  50%       { transform: scale(1.05); box-shadow: 0 8px 36px rgba(255,44,85,.75); }
}

/* Character image anchored to the bottom */
.gate-character {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 1; pointer-events: none;
  /* Fade top edge so it blends with the background */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}
.gate-character img {
  display: block;
  height: min(58vh, 400px); width: auto; object-fit: contain;
  filter: drop-shadow(0 -4px 32px rgba(255,107,53,.45))
          drop-shadow(0 0 60px rgba(100,80,255,.25));
}

/* ── Loading state on the start gate ────────────────────────────────────── */
/* Visible only when .start-gate has .is-loading class. Replaces gate-content
   with a spinner + "Đang vào LIVE..." text. Character image stays visible. */
.gate-loading {
  position: relative; z-index: 3;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 60px 24px 0; text-align: center;
}
.start-gate.is-loading .gate-content { display: none; }
.start-gate.is-loading .gate-loading { display: flex; }
.start-gate.is-loading {
  /* prevent re-triggering during the loading phase */
  cursor: wait;
}

.loading-spinner {
  width: 56px; height: 56px;
  border: 4px solid rgba(255,255,255,.18);
  border-top-color: #ff6b35;
  border-right-color: #ff2c55;
  border-radius: 50%;
  animation: liveSpin 0.9s linear infinite;
  box-shadow: 0 0 22px rgba(255,107,53,.35);
}
@keyframes liveSpin { to { transform: rotate(360deg); } }

.loading-text {
  font-size: 18px; font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  letter-spacing: .3px;
  /* gentle pulse for liveliness */
  animation: liveTextPulse 1.6s ease-in-out infinite;
}
@keyframes liveTextPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .65; }
}

.loading-sub {
  font-size: 13px; color: rgba(255,255,255,.65);
  margin-top: -6px;
  max-width: 240px; line-height: 1.4;
}

/* ── Live ended screen ──────────────────────────────────────────────────── */
.live-ended-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 32px; text-align: center;
  background: linear-gradient(160deg, #12082a 0%, #0d1b2a 50%, #1a0a10 100%);
  z-index: 200;
}
.ended-avatar-wrap {
  position: relative; width: 110px; height: 110px;
}
.ended-avatar {
  width: 110px; height: 110px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: 0 0 0 8px rgba(255,107,53,.12), 0 0 40px rgba(255,107,53,.3);
}
.ended-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1); padding: 4px 14px; border-radius: 20px;
  font-size: 12px; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.15);
}
.ended-badge::before { content: '⚫'; font-size: 8px; }
.ended-title {
  font-size: 18px; font-weight: 700; color: #fff;
  margin: 0; max-width: 300px; line-height: 1.3;
}
.ended-sub {
  font-size: 13px; color: rgba(255,255,255,.55);
  margin: 0; max-width: 260px; line-height: 1.5;
}
.ended-cta {
  display: inline-block; padding: 13px 32px;
  background: var(--accent); color: #fff;
  border-radius: 28px; font-weight: 700; font-size: 15px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(255,107,53,.45);
  transition: transform .15s, box-shadow .15s;
}
.ended-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,53,.55); }



/* ── Cart Bottomsheet ──────────────────────────────────────────────────── */
.cart-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.cart-backdrop.show {
  opacity: 1; pointer-events: auto;
}

.cart-bottomsheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-height: 75vh; background: #fff; color: #222;
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.4);
  z-index: 310; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}
.cart-bottomsheet.show {
  transform: translateY(0);
}

.cart-bs-header {
  padding: 12px 16px; border-bottom: 1px solid #f0f0f0;
  text-align: center; position: relative; flex-shrink: 0;
}
.cart-bs-handle {
  width: 36px; height: 4px; background: #ddd;
  border-radius: 2px; margin: 0 auto 8px;
}
.cart-bs-title {
  font-size: 15px; font-weight: 700; margin: 0; color: #111;
}

.cart-bs-list {
  overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 12px;
  -webkit-overflow-scrolling: touch;
}

.cart-bs-item {
  display: flex; gap: 10px; padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}
.cart-bs-item:last-child { border-bottom: none; padding-bottom: 0; }
.cart-bs-item img {
  width: 60px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
  border: 1px solid #eee;
}
.cart-bs-item-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between;
}
.cart-bs-item-name {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: #222;
}
.cart-bs-item-price {
  color: var(--shopee); font-weight: 700; font-size: 13px; margin: 2px 0;
}
.cart-bs-item-actions {
  display: flex; gap: 6px;
}
.cart-bs-item-actions .cta {
  padding: 4px 10px; font-size: 11px; flex: 0 1 auto; min-width: 80px;
}
.cart-bs-item-idx {
  position: absolute; top: -4px; left: -4px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  z-index: 10;
}
.cart-bs-item-actions .cta.cta-tuvan {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: #fff; font-weight: 700; border: 0;
  box-shadow: 0 2px 8px rgba(108,92,231,0.3);
}

/* Tablet/desktop tweaks */
@media (min-width: 720px) {
  #liveStage { max-width: 480px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,.5); }
  .chat-rail { width: 260px; }
  .live-ended-screen { max-width: 480px; margin: 0 auto; }
  .cart-bottomsheet { max-width: 480px; margin: 0 auto; }
}