/* --- GLOBAL & RESET --- */
        * { 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; height: 100dvh; overflow: hidden; }

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

        @media (min-width: 500px) {
            .app-container { width: 420px; height: 92vh; border-radius: 20px; border: 6px solid #222; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
        }

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

        /* UI LAYER */
        .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; 
        }
        /* Container Profil */
		.host { 
			display: flex; 
			align-items: center; 
			gap: 8px; 
			background: rgba(0,0,0,0.5); 
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
			padding: 3px 12px 3px 3px; /* Padding kanan lebih besar untuk tombol */
			border-radius: 999px; 
			color: white; 
			border: 1px solid rgba(255,255,255,0.2);
		}

		.host img { 
			width: 36px; 
			height: 36px; 
			border-radius: 50%; 
			border: 1.5px solid #fff; 
			object-fit: cover; 
		}

		.host-info {
			display: flex;
			flex-direction: column;
			margin-right: 5px;
		}

		.host-info b { 
			font-size: 11px; 
			line-height: 1.2;
		}

		.host-info span { 
			font-size: 9px; 
			color: #ffd166;
		}

		/* Tombol Follow Cantik */
		.btn-follow {
			background: #ff2d55;
			color: white;
			border: none;
			border-radius: 999px;
			padding: 4px 10px;
			font-size: 10px;
			font-weight: bold;
			cursor: pointer;
			box-shadow: 0 2px 8px rgba(255, 45, 85, 0.4);
			/* Membuat klik menembus tombol ke kontainer profil di belakangnya */
			pointer-events: none; 
		}

		.btn-follow:active {
			transform: scale(0.9);
		}
        .badge { background: rgba(0,0,0,0.5); padding: 6px 12px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: bold; }

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

        /* CHAT */
        .chat-container { 
            position: absolute; left: 12px; bottom: 85px; 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 85%, transparent 100%); 
            pointer-events: none;
        }
        .chat-msg { background: rgba(0,0,0,0.5); padding: 5px 12px; border-radius: 12px; color: #fff; font-size: 12px; width: fit-content; line-height: 1.4; border: 1px solid rgba(255,255,255,0.1); }
        .chat-msg b { color: #ffd166; margin-right: 5px; }

        /* BOTTOM BAR & BUTTONS */
        .bottom { 
            position: absolute; bottom: env(safe-area-inset-bottom, 12px); 
            left: 0; right: 0; padding: 0 12px 8px 12px; 
            display: flex; align-items: center; gap: 8px; z-index: 100; 
        }
        .bottom input { 
            flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 999px; 
            padding: 0 15px; color: #fff; font-size: 14px; height: 46px; outline: none;
        }
        .icon { 
            width: 46px; height: 46px; border-radius: 50%; display: flex; justify-content: center; align-items: center; 
            cursor: pointer; position: relative; background: rgba(0, 0, 0, 0.6); 
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 2px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); font-size: 22px; flex-shrink: 0; transition: transform 0.1s;
        }
        .icon:active { transform: scale(0.85); }
        .btn-whale { box-shadow: 0 0 12px rgba(52, 152, 219, 0.5); }
        .btn-rocket { box-shadow: 0 0 12px rgba(155, 89, 182, 0.5); }
        .btn-gift { box-shadow: 0 0 12px rgba(255, 159, 10, 0.5); }
        .btn-love { box-shadow: 0 0 15px rgba(255, 45, 85, 0.7); }

        /* ANIMATIONS */
        @keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-40px); } 15% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(40px); } }
        @keyframes floatUpLike { 
            0% { opacity: 0; transform: translateY(0) scale(0.6) rotate(0deg); } 
            15% { opacity: 1; }
            100% { opacity: 0; transform: translateY(-400px) scale(2) rotate(35deg); } 
        }
        #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: 85%; opacity: 0; animation: giftAnim 4s ease-in-out forwards; filter: drop-shadow(0 0 20px gold); }
        @keyframes giftAnim { 0% { opacity: 0; transform: scale(0.4); } 20% { opacity: 1; transform: scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(0.7); } }
    
		/* Animasi Angka Combo */
		.combo-text {
			position: absolute;
			right: -45px; /* Muncul di sebelah kanan notif box */
			font-style: italic;
			font-weight: 900;
			font-size: 24px;
			color: #ffd166; /* Warna kuning emas */
			text-shadow: 2px 2px 0 #ff2d55, 4px 4px 10px rgba(0,0,0,0.5);
			animation: comboPop 0.2s ease-out;
			pointer-events: none;
		}

		@keyframes comboPop {
			0% { transform: scale(0.5); }
			50% { transform: scale(1.5); }
			100% { transform: scale(1); }
		}