/* --- KONCO DESIGN SYSTEM (V8 FINAL: STUDIO + CINEMA LAYOUT + AUTO GRID) --- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Nunito:wght@600;700;800&display=swap');

:root {
    --bg-body: #FDF6E3;
    --yellow: #FFD54F;
    --purple: #D291BC;
    --green: #A3CB38;
    --blue: #4FC3F7;
    --orange: #FFAB91;
    --dark: #2d3436;
    --border: 3px solid var(--dark);
    --shadow: 4px 4px 0px var(--dark);
    --radius-xl: 35px;
    --radius-m: 20px;
    --radius-pill: 50px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-body);
    background-image: radial-gradient(#dcdde1 2px, transparent 2px);
    background-size: 30px 30px;
    margin: 0; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    color: var(--dark); overflow: hidden;
}

/* APP FRAME */
.app-frame {
    width: 100%; max-width: 1200px; height: 90vh;
    background: white; border: var(--border); border-radius: var(--radius-xl);
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1);
    display: flex; overflow: hidden; position: relative;
}

/* =========================================
   BAGIAN 1: SIDEBAR & DASHBOARD
   ========================================= */
.sidebar {
    width: 85px; border-right: var(--border);
    display: flex; flex-direction: column; align-items: center;
    padding: 25px 15px; gap: 15px; background: #fff; z-index: 20;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden; flex-shrink: 0;
}
.sidebar.expanded { width: 240px; align-items: flex-start; }

.sidebar-header {
    width: 100%; height: 60px; display: flex; align-items: center;
    justify-content: center; margin-bottom: 10px;
}
.sidebar.expanded .sidebar-header { justify-content: flex-start; padding-left: 10px; }

.brand-icon {
    font-family: 'Fredoka', sans-serif; font-size: 24px; background: var(--yellow);
    width: 50px; height: 50px; display: grid; place-items: center;
    border: 2px solid var(--dark); border-radius: 15px;
    box-shadow: 2px 2px 0 var(--dark); flex-shrink: 0;
}
.brand-text {
    font-family: 'Fredoka', sans-serif; font-size: 26px; margin-left: 15px;
    opacity: 0; white-space: nowrap; transition: 0.2s; display: none;
}
.sidebar.expanded .brand-text { display: block; opacity: 1; }

.nav-item { width: 100%; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: 0.2s; }
.nav-icon { 
    width: 50px; height: 50px; min-width: 50px; border-radius: 50%; 
    border: 2px solid transparent; display: grid; place-items: center; 
    font-size: 20px; color: #b2bec3; transition: 0.2s; 
}
.nav-label { font-weight: 800; font-size: 16px; opacity: 0; transition: 0.3s; white-space: nowrap; }
.sidebar.expanded .nav-label { opacity: 1; }

.nav-item:hover .nav-icon { background: #f1f2f6; color: var(--dark); }
.nav-item.active .nav-icon { 
    background: var(--blue); color: var(--dark); 
    border: 2px solid var(--dark); box-shadow: 2px 2px 0 var(--dark); 
}
.nav-item.active .nav-label { color: var(--blue); }

.sidebar-footer { margin-top: auto; width: 100%; display: flex; justify-content: center; }
.sidebar.expanded .sidebar-footer { justify-content: flex-start; }

/* Dashboard Content Area */
.content-area { flex: 1; position: relative; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.header-section { padding: 30px 30px 10px 30px; display: flex; gap: 15px; align-items: stretch; flex-shrink: 0; }
.scroll-content { padding: 10px 30px 30px 30px; overflow-y: auto; flex: 1; }
.section-label { font-weight: 800; font-size: 20px; display: flex; align-items: center; gap: 10px; margin: 20px 0 15px 0; }

.toggle-btn-compact {
    width: 50px; height: 50px; min-width: 50px;
    background: white; border: var(--border); border-radius: 50%;
    box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center;
    font-size: 20px; transition: 0.3s;
}
.toggle-btn-compact:hover { background: var(--yellow); transform: scale(1.1); box-shadow: 5px 5px 0 var(--dark); color: var(--dark); }

.hero-banner {
    flex: 1; background: var(--yellow); border: var(--border); border-radius: 25px;
    padding: 0 30px; display: flex; justify-content: space-between; align-items: center;
    box-shadow: var(--shadow); position: relative; overflow: hidden; height: 120px;
}
.hero-text h1 { font-family: 'Fredoka', sans-serif; font-size: 28px; margin: 0 0 5px 0; }

.input-pill { width: 100%; padding: 10px 20px; border: var(--border); border-radius: var(--radius-pill); font-family: 'Nunito', sans-serif; font-weight: 700; outline: none; box-shadow: 3px 3px 0 #eee; }
.btn-pill { background: var(--dark); color: var(--yellow); border: none; border-radius: var(--radius-pill); padding: 8px 20px; font-weight: 800; cursor: pointer; }

.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.room-card {
    border: var(--border); border-radius: var(--radius-m); background: white; 
    box-shadow: 3px 3px 0 var(--dark); cursor: pointer; overflow: hidden; 
    display: flex; flex-direction: column; transition: 0.2s;
}
.room-card:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--dark); }
.card-header { height: 70px; border-bottom: var(--border); display: flex; align-items: center; justify-content: center; font-size: 30px; position: relative; }
.card-body { padding: 12px; flex: 1; }
.live-pill { position: absolute; top: 8px; right: 8px; background: #ff4757; color: white; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 10px; border: 2px solid var(--dark); }

/* =========================================
   BAGIAN 2: ROOM UI (PERBAIKAN LAYOUT UTAMA)
   ========================================= */
.room-layout { display: flex; width: 100%; height: 100%; position: relative; }
.stage-section { flex: 1; display: flex; flex-direction: column; position: relative; background: #fff; }

.stage-header { padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; z-index: 10; }
.header-badge { 
    background: var(--yellow); border: var(--border); padding: 8px 20px; 
    border-radius: var(--radius-pill); font-family: 'Fredoka'; font-size: 18px; 
    display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow);
}
.live-dot { width: 10px; height: 10px; background: #ff4757; border-radius: 50%; border: 2px solid var(--dark); animation: pulse 1.5s infinite; }

/* --- VIDEO GRID (FIX: PAKE FLEXBOX CENTER) --- */
.video-grid {
    flex: 1; padding: 20px; overflow-y: auto;
    /* Ganti Grid jadi Flex biar posisi otomatis rata tengah */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Kunci: Rata Tengah Horizontal */
    align-content: center;   /* Kunci: Rata Tengah Vertikal */
    align-items: center;
    gap: 20px;
    margin-bottom: 80px; transition: 0.3s;
}

/* LAYOUT: CINEMA MODE (Saat ada Screen Share) - lebih rapi */
.video-grid.cinema-mode {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    padding: 20px 24px 24px;
    gap: 20px;
}
.video-grid.cinema-mode .screen-card {
    width: 100%;
    max-width: 960px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* --- KARTU VIDEO & LAYAR (FIX: UKURAN ADAPTIF) --- */

/* 1. Video Biasa (Kamera) */
.video-card {
    background: var(--dark); border: var(--border); border-radius: 25px;
    overflow: hidden; position: relative; 
    
    /* GANTI UKURAN FIXED JADI FLEKSIBEL */
    /* Agar kalau 1 orang dia di tengah, kalau 2 orang dia bagi dua */
    width: 100%;
    max-width: 640px; /* Batas maksimal biar ga kegedean */
    min-width: 300px; /* Batas minimal biar ga kekecilan */
    aspect-ratio: 16/9; 
    flex: 1 1 auto; /* Bisa membesar/mengecil */
    
    box-shadow: var(--shadow); transition: 0.3s; margin: 0;
}

/* 2. Audio Avatar */
.audio-card {
    width: 140px; height: 140px; border-radius: 50%;
    background: white; border: var(--border);
    display: flex; justify-content: center; align-items: center;
    position: relative; flex-shrink: 0; box-shadow: var(--shadow);
    transition: 0.3s;
}
.stage-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* 3. Screen Share (Layar Lebar) */
.screen-card {
    width: 100%; max-width: 100%; height: 70vh; /* Dominan */
    background: #000; border: var(--border); border-radius: 25px;
    overflow: hidden; position: relative; order: -1; /* Selalu paling atas */
    display: flex; justify-content: center; align-items: center;
}
.screen-card video { width: 100%; height: 100%; object-fit: contain; }

/* Tombol Fullscreen Overlay */
.fullscreen-btn {
    position: absolute; top: 15px; right: 15px;
    background: rgba(0,0,0,0.6); color: white; border: 2px solid white;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; transition: 0.2s; z-index: 20;
}
.screen-card:hover .fullscreen-btn { opacity: 1; }

/* Tombol Berhenti menonton layar (untuk user yang join) */
.leave-screen-btn {
    position: absolute; bottom: 16px; left: 16px;
    background: rgba(255, 71, 87, 0.95); color: white; border: 2px solid var(--dark);
    padding: 10px 18px; border-radius: 14px; font-size: 13px; font-weight: 800;
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    z-index: 20; box-shadow: 3px 3px 0 var(--dark);
    font-family: 'Nunito', sans-serif; transition: transform 0.2s;
}
.leave-screen-btn:hover { transform: scale(1.03); background: #ff4757; }

/* 4. Preview Card (Undangan Nonton) */
.preview-card {
    width: 600px; max-width: 90%; height: 340px;
    background: var(--dark); border: var(--border); border-radius: 25px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: white; padding: 30px;
    box-shadow: var(--shadow);
}
.btn-watch {
    margin-top: 20px; padding: 12px 30px; background: var(--blue); color: var(--dark);
    border: 3px solid white; border-radius: 50px; font-weight: 800; font-size: 16px;
    cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 10px;
}
.btn-watch:hover { transform: scale(1.05); background: white; }

/* --- FILMSTRIP (Baris Peserta di Cinema Mode) - layout rapi --- */
.member-strip {
    width: 100%;
    max-width: 960px;
    overflow-x: auto;
    padding: 12px 0;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
}
/* Ukuran kartu di cinema strip: seragam dan rapi */
.video-grid.cinema-mode .member-strip .video-card {
    width: 180px; height: 102px;
    border-radius: 14px; border-width: 2px;
    flex: 0 0 auto;
    min-width: 180px;
}
.video-grid.cinema-mode .member-strip .audio-card {
    width: 180px; height: 102px;
    border-radius: 14px; border-width: 2px;
    flex: 0 0 auto;
    min-width: 180px;
}
.video-grid.cinema-mode .member-strip {
    min-height: 130px;
    margin-top: 4px;
}

/* --- SPOTLIGHT MODE - layout rapi (satu besar + strip bawah) --- */
.video-grid.spotlight-mode {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    padding: 20px 24px 24px;
    gap: 20px;
}
.video-grid.spotlight-mode .spotlight-main {
    width: 100%;
    max-width: 960px;
    flex: 1;
    min-height: 260px;
    max-height: 55vh;
    border-radius: 20px;
    flex-shrink: 0;
}
.video-grid.spotlight-mode .member-strip.spotlight-strip {
    width: 100%;
    max-width: 960px;
    min-height: 118px;
    flex-shrink: 0;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
}
.strip-thumb {
    position: relative;
    width: 170px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--dark);
    border: 2px solid rgba(0,0,0,0.2);
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.strip-thumb:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.strip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.strip-thumb-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #fff;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
}
.strip-thumb-label i { font-size: 10px; }
.strip-thumb-label .fa-video-slash,
.strip-thumb-label .fa-microphone-slash { color: #ef4444; }
.strip-thumb-label .fa-video,
.strip-thumb-label .fa-microphone { color: #22c55e; }
.strip-thumb-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.video-card.clickable-spotlight { cursor: pointer; }
.video-card.clickable-spotlight:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.2); transform: scale(1.02); }

/* Tombol Toggle Member - posisi rapi di bawah strip */
.toggle-strip-btn {
    position: relative;
    align-self: center;
    margin-top: 8px;
    background: var(--dark); color: white; padding: 10px 18px;
    border: 2px solid var(--dark); border-radius: 20px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    z-index: 40; display: none; /* Muncul via JS */
    box-shadow: 3px 3px 0 rgba(0,0,0,0.15);
}
.toggle-strip-btn:hover { background: #1e272e; transform: translateY(-1px); }
.video-grid.cinema-mode { display: flex; }
.video-grid.cinema-mode .toggle-strip-btn { display: block; }

/* Aura Bicara */
@keyframes pulse-speak {
    0% { box-shadow: 0 0 0 0px rgba(163, 203, 56, 0.7); }
    100% { box-shadow: 0 0 0 10px rgba(163, 203, 56, 0); }
}
.speaking-active { border-color: var(--green) !important; animation: pulse-speak 1s infinite; z-index: 10; }

/* User Label */
.user-label {
    position: absolute; bottom: 10px; left: 10px;
    background: white; border: 2px solid var(--dark);
    padding: 4px 10px; border-radius: 10px; font-weight: 800; font-size: 12px;
    display: flex; align-items: center; gap: 5px; box-shadow: 2px 2px 0 rgba(0,0,0,0.1); z-index: 5;
}
.audio-card .user-label { bottom: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* Dock Controls */
.dock-wrapper { position: absolute; bottom: 30px; width: 100%; display: flex; justify-content: center; pointer-events: none; z-index: 50; }
.dock-container { 
    background: white; border: var(--border); border-radius: var(--radius-pill);
    padding: 10px 25px; display: flex; gap: 15px; pointer-events: auto;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.1);
}
.dock-btn { 
    width: 50px; height: 50px; border-radius: 50%; border: 2px solid #eee;
    background: white; color: var(--dark); font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.dock-btn:hover { border-color: var(--dark); background: #f1f2f6; transform: translateY(-3px); }
.dock-btn.active { background: var(--green); border-color: var(--dark); }
.dock-btn.danger { background: #ff7675; color: white; border-color: var(--dark); }
/* Tombol Berhenti bagikan layar (muncul di dock saat user sedang share screen) */
.dock-btn-leave-share {
    background: #ff4757 !important;
    color: white !important;
    border-color: var(--dark) !important;
    padding: 0 14px;
    gap: 6px;
}
.dock-btn-leave-share:hover { background: #ee3f4f !important; filter: brightness(1.05); }
.dock-btn-label { font-size: 12px; font-weight: 800; white-space: nowrap; }
.dock-divider { width: 2px; height: 30px; background: #eee; align-self: center; }

/* Chat Sidebar */
.chat-section {
    width: 320px; background: white; border-left: var(--border);
    display: flex; flex-direction: column; transition: 0.3s;
    position: relative; z-index: 20;
}
.room-layout.chat-collapsed .chat-section { width: 0; overflow: hidden; border: none; }
.chat-header { height: 70px; display: flex; align-items: center; justify-content: center; font-family: 'Fredoka'; font-size: 20px; border-bottom: 2px dashed #eee; }
.chat-messages { flex: 1; padding: 20px; overflow-y: auto; background: #fafafa; }
.chat-msg { margin-bottom: 10px; background: white; padding: 10px; border: 2px solid #eee; border-radius: 15px 15px 15px 0; font-size: 14px; width: fit-content; max-width: 90%; }
.chat-sender { font-weight: 800; color: var(--blue); display: block; margin-bottom: 3px; font-size: 12px; }
.chat-input-area { padding: 15px; border-top: var(--border); background: white; }
.input-wrapper { display: flex; gap: 10px; }
.chat-input { flex: 1; padding: 10px 15px; border: 2px solid var(--dark); border-radius: 20px; font-family: 'Nunito'; outline: none; }
.btn-send { background: var(--dark); color: var(--yellow); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }

/* Modals */
.auth-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; display: flex; justify-content: center; align-items: center; }
.auth-box { background: white; border: var(--border); border-radius: 30px; padding: 30px; width: 400px; box-shadow: 10px 10px 0 var(--dark); }
.settings-select { width: 100%; padding: 10px; border: 2px solid var(--dark); border-radius: 10px; margin-bottom: 15px; }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* Saat screen-card masuk mode fullscreen, hilangkan border & radius */
.screen-card:fullscreen {
    border: none;
    border-radius: 0;
    width: 100vw;
    height: 100vh;
}

/* Support untuk Safari/Chrome lama */
.screen-card:-webkit-full-screen {
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
}