/* Vyral V7.0.5 — live feed mobile polish
   - removes legacy fake online/activity strip
   - replaces floating emoji stack with clean social controls
   - transparent live chat overlay
   - avatar fallback / safe positioning above mobile nav
*/

/* The old global "128k users online / typing / EU xxms" strip is not part of the live feed UI anymore. */
.alive-pill{display:none!important}

/* V7.0.1 injected emoji buttons conflicted with the real live actions. */
.v7x-live-reaction-bar{display:none!important}

.v631-live-card{isolation:isolate}
.v631-live-info{
  left:16px!important;
  right:76px!important;
  bottom:max(72px,calc(env(safe-area-inset-bottom) + 68px))!important;
  gap:10px!important;
  align-items:center!important;
}
.v631-live-copy h2{font-size:16px!important;max-width:min(70vw,430px)}
.v631-live-copy>span{font-size:10px!important;color:rgba(255,255,255,.78)!important}

/* Avatar never shows Chrome's broken-image glyph. */
.v631-live-avatar{
  position:relative!important;
  flex:0 0 48px;
  width:48px!important;
  height:48px!important;
  border-radius:50%!important;
  border:2px solid rgba(255,255,255,.92)!important;
  background:linear-gradient(135deg,#ff2d67,#9d5cff 48%,#18d9ff)!important;
  box-shadow:0 7px 24px rgba(0,0,0,.32)!important;
}
.v631-live-avatar .v705-avatar-fallback{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  font-size:17px;font-weight:1000;color:#fff;text-transform:uppercase;
}
.v631-live-avatar img{
  position:absolute!important;inset:0!important;z-index:2!important;
  width:100%!important;height:100%!important;object-fit:cover!important;
  border-radius:inherit!important;background:#11141b!important;
}
.v631-live-avatar img.v705-avatar-broken{display:none!important}

/* Clean right action rail. Five social actions; sound is moved to the top. */
.v631-live-actions{
  right:12px!important;
  bottom:max(80px,calc(env(safe-area-inset-bottom) + 74px))!important;
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  z-index:12!important;
}
.v631-live-actions button.v705-live-action{
  width:50px!important;height:50px!important;
  padding:0!important;border:0!important;border-radius:50%!important;
  background:rgba(0,0,0,.16)!important;
  backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;
  box-shadow:0 4px 20px rgba(0,0,0,.18)!important;
  color:#fff!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:1px!important;
  text-shadow:0 2px 8px #000!important;
}
.v631-live-actions button.v705-live-action svg{width:21px!important;height:21px!important;stroke-width:2.25!important}
.v631-live-actions button.v705-live-action .v705-action-meta{font-size:8px!important;line-height:1!important;font-weight:900!important;max-width:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v631-live-actions button.v705-live-action.active{color:#ff416f!important}
.v631-live-actions button.v705-live-action.active[data-v705-action="favorite"]{color:#ffe082!important}
.v631-live-actions button.v705-live-action.active[data-v705-action="repost"]{color:#56e7bd!important}
.v631-live-actions button.v705-live-action.active svg{filter:drop-shadow(0 3px 8px currentColor)}
.v631-live-actions button.v705-live-action.active[data-v705-action="like"] svg{fill:currentColor}
.v631-live-actions button.v705-live-action.active[data-v705-action="favorite"] svg{fill:currentColor}

.v705-sound-control{
  margin-left:auto;width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.22);backdrop-filter:blur(5px);color:#fff;
  display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.2)
}
.v705-sound-control svg{width:17px;height:17px}

/* Like feedback. */
.v705-heart-pop{position:absolute;right:26px;bottom:360px;z-index:30;font-size:32px;pointer-events:none;animation:v705HeartPop 1.1s ease-out forwards;filter:drop-shadow(0 5px 15px rgba(0,0,0,.35))}
@keyframes v705HeartPop{0%{opacity:0;transform:translateY(8px) scale(.5)}20%{opacity:1;transform:translateY(0) scale(1.12)}100%{opacity:0;transform:translateY(-120px) scale(1.35)}}

/* Transparent chat: messages float over the live instead of opening an opaque panel. */
.v631-chat-drawer{
  position:fixed!important;
  z-index:10010!important;
  right:0!important;
  bottom:max(58px,env(safe-area-inset-bottom))!important;
  width:min(520px,100vw)!important;
  height:min(58dvh,610px)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
  display:grid!important;
  grid-template-rows:auto 1fr auto!important;
  pointer-events:none!important;
}
.v631-chat-drawer:before{display:none!important}
.v631-chat-drawer header{
  pointer-events:auto!important;
  padding:8px 14px!important;
  border:0!important;
  background:transparent!important;
  text-shadow:0 2px 10px #000,0 0 5px #000!important;
}
.v631-chat-drawer header .v7-kicker{display:none!important}
.v631-chat-drawer header h3{font-size:13px!important;margin:0!important}
.v631-chat-drawer header button{
  width:36px;height:36px;border:0!important;border-radius:50%!important;
  background:rgba(0,0,0,.18)!important;display:grid!important;place-items:center!important;
  text-shadow:0 2px 8px #000!important;
}
.v631-chat-messages{
  padding:8px 14px 4px!important;
  overflow:auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  gap:2px!important;
  background:transparent!important;
  pointer-events:none!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%);
}
.v631-chat-messages div{
  padding:2px 0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;
  display:block!important;
  font-size:12px!important;
  line-height:1.38!important;
  text-shadow:0 2px 7px #000,0 0 4px #000!important;
}
.v631-chat-messages b{color:#fff!important;margin-right:6px!important;font-weight:1000!important}
.v631-chat-messages span{color:#fff!important}
.v631-chat-drawer form{
  pointer-events:auto!important;
  padding:7px 14px 10px!important;
  border:0!important;
  background:transparent!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:7px!important;
}
.v631-chat-drawer form input{
  min-width:0!important;min-height:44px!important;
  border:0!important;outline:0!important;box-shadow:none!important;
  border-radius:0!important;background:transparent!important;
  color:#fff!important;padding:0 4px!important;
  font-weight:750!important;text-shadow:0 2px 8px #000!important;
}
.v631-chat-drawer form input::placeholder{color:rgba(255,255,255,.72)!important}
.v631-chat-drawer form button{
  border:0!important;outline:0!important;box-shadow:none!important;
  background:transparent!important;color:#fff!important;
  min-width:58px!important;padding:0 4px!important;
  text-shadow:0 2px 8px #000!important;font-weight:1000!important;
}

@media(max-width:760px){
  .v631-live-topbar{top:10px!important;left:10px!important;right:10px!important;gap:6px!important}
  .v631-live-badge,.v631-viewer-pill,.v631-featured{padding:6px 8px!important;border-radius:9px!important}
  .v631-live-info{left:12px!important;right:68px!important;bottom:max(66px,calc(env(safe-area-inset-bottom) + 62px))!important}
  .v631-live-actions{right:8px!important;bottom:max(74px,calc(env(safe-area-inset-bottom) + 68px))!important;gap:5px!important}
  .v631-live-actions button.v705-live-action{width:46px!important;height:46px!important}
  .v631-live-actions button.v705-live-action svg{width:20px!important;height:20px!important}
  .v631-live-copy h2{font-size:15px!important}
  .v631-live-copy>span{font-size:9px!important}
  .v631-chat-drawer{left:0!important;right:0!important;width:100vw!important;height:56dvh!important}
  .v7x-viewer-poll{left:10px!important;right:64px!important;bottom:122px!important}
}

@media(max-height:690px) and (max-width:760px){
  .v631-live-actions{gap:3px!important}
  .v631-live-actions button.v705-live-action{width:42px!important;height:42px!important}
  .v631-live-actions button.v705-live-action .v705-action-meta{font-size:7px!important}
  .v631-live-info{bottom:58px!important}
}

/* Vyral V7.0.6 — live creator identity + Owner crown */
.v631-chat-messages .v706-chat-host b,
.v632-host-chat-row.v706-chat-host b{
  color:#ffd54a!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
}
.v706-chat-crown{
  width:13px!important;
  height:13px!important;
  color:#ffd54a!important;
  stroke-width:2.5!important;
  flex:0 0 auto!important;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.55));
}
.v706-owner-crown{
  display:inline-grid!important;
  place-items:center!important;
  width:21px!important;
  height:21px!important;
  flex:0 0 21px!important;
  margin:0!important;
  color:#ffd54a!important;
  line-height:1!important;
  filter:drop-shadow(0 2px 7px rgba(255,213,74,.26));
}
.v706-owner-crown svg{
  width:19px!important;
  height:19px!important;
  stroke-width:2.45!important;
}