/* --- BASE & MOBILE FIX --- */
*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;-webkit-tap-highlight-color:transparent}

body { 
    margin: 0; 
    background: #000; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    /* Menggunakan dvh agar pas dengan browser mobile yang punya address bar */
    height: 100vh; 
    height: 100dvh; 
    overflow: hidden; 
}

.app-container {
    position: relative; 
    width: 100%; 
    height: 100%; 
    height: 100dvh; 
    background: #000; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column;
}

/* Desktop Mode Container */
@media (min-width: 500px) {
    .app-container { 
        width: 420px; 
        height: 92vh; 
        border-radius: 15px; 
        border: 6px solid #222; 
    }
}

/* VIDEO BACKGROUND */
.live-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover; }
.video-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 40%, rgba(0,0,0,0.4) 100%); z-index: 2; pointer-events: none; }

.ui-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.ui-layer * { pointer-events: auto; }

/* TOP BAR */
.top-bar { position: absolute; top: env(safe-area-inset-top, 20px); left: 15px; right: 15px; display: flex; justify-content: space-between; align-items: center; z-index: 100; }
.host { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.5); padding: 4px 12px 4px 4px; border-radius: 999px; color: white; }
.host img { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #ff2d55; object-fit: cover; }
.badge { background: rgba(0,0,0,0.5); padding: 6px 12px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: bold; }

/* NOTIFICATION BOX */
#gift-container { position: absolute; left: 12px; bottom: 280px; z-index: 20; display: flex; flex-direction: column; gap: 6px; }
.notif-box { 
    display: flex; align-items: center; gap: 10px; padding: 5px 15px 5px 5px; 
    border-radius: 999px; color: #fff; background: rgba(0,0,0,0.6);
    width: fit-content; min-width: 190px; 
    animation: slideInLeft 3s ease-out forwards;
}
.gift-notif { background: linear-gradient(90deg, #ff2d55, #ff9f0a); }
.side-like { background: linear-gradient(90deg, #0a84ff, #30d158); }
.notif-box img { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #fff; flex-shrink: 0; }
.notif-info b { font-size: 13px; display: block; }
.notif-info span { font-size: 11px; opacity: 0.9; }

/* CHAT - Adjusted for Mobile */
.chat-container { 
    position: absolute; left: 12px; 
    bottom: 80px; /* Jarak aman dari button bar */
    width: 75%; max-height: 160px; 
    display: flex; flex-direction: column; gap: 4px; 
    overflow-y: auto; scrollbar-width: none; 
    mask-image: linear-gradient(to top, black 80%, transparent 100%); 
}
.chat-msg { background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: 10px; color: #fff; font-size: 12px; width: fit-content; line-height: 1.3; }
.chat-msg b { color: #ffd166; margin-right: 4px; }

/* BOTTOM BAR - FIXED FOR CHROME MOBILE */
.bottom { 
    position: absolute; 
    bottom: env(safe-area-inset-bottom, 15px); 
    left: 0; 
    right: 0; 
    padding: 0 12px 10px 12px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    z-index: 100;
    width: 100%;
}
.bottom input { 
    flex: 1; 
    min-width: 0; 
    background: rgba(255, 255, 255, 0.15); /* Lebih transparan */
    backdrop-filter: blur(10px); /* Efek kaca */
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 999px; 
    padding: 0 15px; 
    color: #fff; 
    font-size: 14px; 
    height: 44px;
    outline: none;
}
.icon { 
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border: 1.5px solid rgba(255, 255, 255, 0.8); /* Garis tepi putih tegas */
    font-size: 22px; 
    flex-shrink: 0; 
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s;
    /* Memberikan efek kaca berwarna agar emoji terlihat menonjol */
    backdrop-filter: blur(5px);
}

.icon:active { transform: scale(0.9); }
/* Warna Latar Belakang Tombol dengan Transparansi (Agar Ikon Lebih Kontras) */
.btn-whale { background: rgba(52, 152, 219, 0.5); }  /* Biru Transparan */
.btn-rocket { background: rgba(155, 89, 182, 0.5); } /* Ungu Transparan */
.btn-gift { background: rgba(255, 159, 10, 0.5); }   /* Oranye Transparan */
.btn-love { background: rgba(235, 177, 188, 0.5); }    /* Merah Transparan */

/* Memberikan sedikit bayangan hitam pada emoji agar tidak menyatu dengan warna tombol */
.icon::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
/* ANIMATIONS */
@keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-30px); } 15% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(30px); } }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-350px) scale(1.8) rotate(20deg); } }

#big-gift-overlay { position: absolute; inset: 0; z-index: 500; pointer-events: none; display: flex; justify-content: center; align-items: center; }
.big-gift-img { position: absolute; width: 80%; opacity: 0; animation: giftAnim 4s ease-in-out forwards; }
@keyframes giftAnim { 0% { opacity: 0; transform: scale(0.5); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(0.8); } }