/* Styles for calls / live additions (kept out of the Tailwind build on purpose) */
.vg-sr-only { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }

/* incoming call screen */
.vg-incoming-bd { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(8, 8, 12, .88); backdrop-filter: blur(10px); }
.vg-incoming { width: 100%; max-width: 22rem; margin: 0 auto; text-align: center; color: #fff; padding: 2rem 1.5rem; border-radius: 1.75rem; background: #171717; border: 1px solid #262626; box-shadow: 0 25px 60px rgba(0, 0, 0, .5); }
.vg-in-av { width: 6.5rem; height: 6.5rem; margin: 0 auto 1.1rem; padding: 3px; border-radius: 9999px; animation: vg-pulse 1.4s ease-in-out infinite; }
.vg-in-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }
.vg-incoming h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 .25rem; overflow-wrap: anywhere; }
.vg-incoming p { font-size: .8rem; color: #a3a3a3; margin: 0 0 1.6rem; }
.vg-in-btns { display: flex; justify-content: center; gap: 3rem; }
.vg-in-btns button { width: 3.6rem; height: 3.6rem; border-radius: 9999px; border: 0; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s; }
.vg-in-btns button:active { transform: scale(.92); }
.vg-in-no { background: #dc2626; }
.vg-in-yes { background: #16a34a; }
@keyframes vg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* host "rejoin" pill */
#vg-live-banner { position: fixed; z-index: 55; left: 50%; transform: translateX(-50%); bottom: calc(4.5rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border: 0; border-radius: 9999px; font-size: .8rem; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(90deg, #dc2626, #db2777); box-shadow: 0 10px 30px rgba(220, 38, 38, .45); }
@media (min-width: 768px) { #vg-live-banner { bottom: 1.5rem; left: auto; right: 1.5rem; transform: none; } }
#vg-live-banner .vg-dot { width: .55rem; height: .55rem; border-radius: 9999px; background: #fff; animation: vg-blink 1s infinite; }
@keyframes vg-blink { 50% { opacity: .25; } }

/* live viewer overlays */
.vg-live-state { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); z-index: 15; padding: .45rem .9rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; }
.vg-live-away { position: absolute; inset: 0; z-index: 14; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); font-size: .85rem; font-weight: 600; text-align: center; padding: 1rem; }
.vg-live-away.hidden { display: none; }
.vg-spin { width: 1.8rem; height: 1.8rem; border-radius: 9999px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: vg-rot .9s linear infinite; }
@keyframes vg-rot { to { transform: rotate(360deg); } }
#lv-unmute { position: absolute; z-index: 16; right: .75rem; bottom: .75rem; padding: .4rem .8rem; border-radius: 9999px; border: 0; font-size: .72rem; font-weight: 700; background: #fff; color: #000; cursor: pointer; }
#lv-unmute.hidden, .vg-live-state.hidden { display: none; }

/* live top bar: on narrow phones the right-hand controls (LIVE, viewers, timer, Leave, End) drop to a second row instead of overlapping the host name */
@media (max-width: 460px) {
  #lv-top { flex-wrap: wrap; row-gap: .4rem; }
  #lv-top > div:first-child { flex: 1 1 100%; }
  #lv-top > div:last-child { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
}

/* ===== upload progress overlay ===== */
.vg-up { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }
.vg-up-fixed { position: fixed; z-index: 9999; }
.vg-up-card { width: 100%; max-width: 20rem; padding: 1.5rem 1.25rem; border-radius: 1.25rem; text-align: center; background: #fff; color: #171717; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.dark .vg-up-card { background: #171717; color: #f5f5f5; border: 1px solid #262626; }
.vg-up-spin { width: 2rem; height: 2rem; margin: 0 auto .8rem; border-radius: 9999px; border: 3px solid rgba(236, 72, 153, .25); border-top-color: #ec4899; animation: vg-rot .8s linear infinite; }
.vg-up-title { font-size: .95rem; font-weight: 800; margin-bottom: .75rem; }
.vg-up-bar { height: .6rem; border-radius: 9999px; background: #e5e5e5; overflow: hidden; }
.dark .vg-up-bar { background: #333; }
.vg-up-bar > div { height: 100%; width: 0; border-radius: 9999px; background: linear-gradient(90deg, #f59e0b, #ec4899, #8b5cf6); transition: width .2s ease; }
.vg-up-proc .vg-up-bar > div { background-size: 200% 100%; animation: vg-stripe 1.1s linear infinite; }
@keyframes vg-stripe { from { background-position: 0 0; } to { background-position: -200% 0; } }
.vg-up-sub { margin-top: .6rem; font-size: .75rem; color: #737373; }
.vg-up-warn { margin-top: .35rem; font-size: .68rem; color: #a3a3a3; }

/* ===== Google sign-in ===== */
.vg-gwrap { padding: 0 1.25rem 1.25rem; }
.vg-or { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 .9rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #a3a3a3; }
.vg-or::before, .vg-or::after { content: ""; flex: 1; height: 1px; background: #e5e5e5; }
.dark .vg-or::before, .dark .vg-or::after { background: #333; }
.vg-gbtn { display: flex; justify-content: center; min-height: 44px; transition: opacity .2s; }
.vg-gload { align-self: center; font-size: .75rem; color: #737373; }
.vg-gerr { margin-top: .6rem; font-size: .75rem; color: #ef4444; text-align: center; }
.vg-gterms { margin: .75rem 0 0; font-size: .68rem; line-height: 1.4; color: #737373; text-align: center; }
.vg-gterms a { color: #3b82f6; }