body {
    background-color: #121212;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0; padding: 0;
    display: flex; justify-content: center;
}

.live-container {
    width: 100%; max-width: 450px;
    background-color: #000;
    height: 100vh;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}

/* Header & Status */
.room-header { padding: 10px; background: #1a1a1a; display: flex; justify-content: space-between; }
.badge-status { background: #00a86b; padding: 2px 6px; font-size: 11px; border-radius: 4px; }

/* Selector Media */
.media-selectors { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; padding: 5px; }
.media-selectors select { background: #222; color: #fff; border: 1px solid #444; border-radius: 4px; padding: 5px; font-size: 12px;}

/* Grid View (1 Besar, 9 Kecil) */
.stream-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px;
    flex-grow: 1; overflow-y: auto;
}
.slot {
    background: #1e1e1e; border: 1px solid #333; border-radius: 8px;
    aspect-ratio: 1/1; display: flex; flex-direction: column;
    justify-content: center; align-items: center; font-size: 11px; color: #aaa;
    position: relative;
}
.slot.host-slot {
    grid-column: span 3; aspect-ratio: 16/10; background: #2a1111; border: 1px solid #ff4757;
}

/* Tombol */
.btn { width: 100%; border: none; padding: 10px; font-weight: bold; color: #fff; cursor: pointer; border-radius: 5px; margin-bottom: 4px;}
.btn-blue { background: #007bff; }
.btn-cyan { background: #17a2b8; }
.btn-green { background: #28a745; }
.btn-orange { background: #fd7e14; }
.btn-red { background: #dc3545; }
.btn-grey { background: #444; }
.action-buttons, .control-buttons { display: flex; gap: 5px; padding: 0 10px; }

/* Chat Box */
.chat-box {
    height: 150px; overflow-y: auto; padding: 10px;
    background: rgba(0,0,0,0.4); display: flex; flex-direction: column; gap: 5px;
}
.chat-footer { display: flex; padding: 10px; background: #111; gap: 5px;}
.chat-footer input { flex: 1; padding: 8px; background: #222; color: #fff; border: none; border-radius: 4px;}

/* ANIMASI 1: Mobil Mewah Waky Pro (Masuk dari Kiri ke Kanan) */
@keyframes carEntrance {
    0% { transform: translateX(-100%) scale(0.5); opacity: 0; }
    50% { transform: translateX(10%) scale(1.1); opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}
.car-animation {
    position: absolute; top: 30%; left: 0; width: 80%;
    background: linear-gradient(90deg, #ff007f, #7f00ff);
    padding: 10px; border-radius: 20px; display: flex; align-items: center;
    animation: carEntrance 4s ease-in-out forwards; z-index: 99;
}

/* ANIMASI 2: Balon Profil Terbang */
@keyframes bubbleFloat {
    0% { transform: translateY(100px) translateX(0); opacity: 1; }
    100% { transform: translateY(-300px) translateX(50px); opacity: 0; }
}
.bubble-user {
    position: absolute; bottom: 80px; left: 20px;
    background: rgba(255,255,255,0.2); border-radius: 20px;
    padding: 5px 10px; display: flex; align-items: center; gap: 5px;
    animation: bubbleFloat 3s linear forwards;
}

/* ANIMASI 3: Gift Melayang Terbang */
@keyframes giftFly {
    0% { bottom: 50px; opacity: 0; transform: scale(0.5); }
    20% { opacity: 1; transform: scale(1.2); }
    80% { opacity: 1; transform: scale(1); }
    100% { bottom: 250px; opacity: 0; }
}
.gift-fly-effect {
    position: absolute; left: 40%; font-size: 40px;
    animation: giftFly 2.5s ease-out forwards; z-index: 100;
}

/* Modal PIN */
.modal { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); display:none; justify-content:center; align-items:center; z-index:1000;}
.modal-content { background:#222; padding:20px; border-radius:10px; text-align:center; }