/* ======================================================
   JL FLIX SPA - DESIGN SYSTEM (PLAYER FIXO E SEM TRAVAMENTOS)
====================================================== */
:root {
    --yt-bg: #0f0f0f;
    --yt-surface: #272727;
    --yt-hover: #3f3f3f;
    --yt-text: #f1f1f1;
    --yt-text-dim: #aaaaaa;
    --yt-red: #ff0000;
    --header-h: 56px;
    --chip-h: 56px;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
}

body {
    font-family: 'Roboto', -apple-system, sans-serif;
    background-color: var(--yt-bg);
    color: var(--yt-text);
    overflow-x: hidden;
    padding-top: calc(var(--header-h) + var(--chip-h));
}

a { text-decoration: none; color: inherit; }

/* ================= HEADER ================= */
.yt-header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
    background-color: rgba(15, 15, 15, 0.98); 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 16px; z-index: 4000;
    border-bottom: 1px solid #222; gap: 12px;
}

.header-left { display: flex; align-items: center; flex-shrink: 0; }
.yt-logo { font-size: 20px; font-weight: bold; letter-spacing: -1px; display: flex; align-items: center; gap: 4px; }
.yt-logo span { color: var(--yt-red); }

/* Barra de Busca */
.search-wrapper { flex: 1; display: flex; justify-content: center; max-width: 600px; }
.search-box { display: flex; width: 100%; border: 1px solid var(--yt-surface); border-radius: 40px; background-color: #121212; overflow: hidden; }
.search-box input { flex: 1; background: transparent; border: none; color: var(--yt-text); padding: 8px 16px; outline: none; font-size: 15px;}
.search-box button { background: var(--yt-surface); border: none; border-left: 1px solid #303030; padding: 0 20px; color: var(--yt-text-dim); cursor: pointer; transition: 0.2s; }
.search-box button:hover { background: var(--yt-hover); color: var(--yt-text); }

.header-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.btn-create { background: var(--yt-surface); padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500; display:flex; align-items:center; transition: background 0.2s; }
.btn-create:hover { background: var(--yt-hover); }
.btn-create .btn-icon { display: none; }
.avatar-profile { width: 32px; height: 32px; background: #60a5fa; border-radius: 50%; display: grid; place-items: center; font-weight: bold; color: #000; }

/* ================= CHIPS (CATEGORIAS) ================= */
.categories-bar {
    position: fixed; top: var(--header-h); left: 0; right: 0; height: var(--chip-h);
    background-color: rgba(15, 15, 15, 0.98); z-index: 1999; display: flex; align-items: center;
    padding: 0 16px; overflow-x: auto; scrollbar-width: none; gap: 12px; border-bottom: 1px solid #222;
    -webkit-overflow-scrolling: touch;
}
.categories-bar::-webkit-scrollbar { display: none; }
.yt-chip { background-color: var(--yt-surface); color: var(--yt-text); padding: 6px 14px; border-radius: 8px; font-size: 14px; white-space: nowrap; cursor: pointer; transition: 0.2s;}
.yt-chip:hover { background-color: var(--yt-hover); }
.yt-chip.active { background-color: var(--yt-text); color: var(--yt-bg); font-weight: 500; }

/* ================= MAIN GRID & CARDS ================= */
.main-layout { padding: 24px; max-width: 2200px; margin: 0 auto; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 16px; }

/* Efeito profissional no card (animação suave) */
.video-card { cursor: pointer; display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s ease; }
@media (hover: hover) {
    .video-card:hover { transform: translateY(-4px); }
}

.thumbnail-container { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000 url('../thumbnails/loading.gif') center no-repeat; background-size: 30px; }
.thumb-image { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.video-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.video-card.is-playing .thumb-image { opacity: 0; }
.video-card.is-playing .video-preview { opacity: 1; }

.badge-time, .badge-status { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 3px 6px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.badge-status { left: 8px; right: auto; background: var(--yt-red); }

.card-info { display: flex; gap: 12px; }
.channel-avatar { width: 36px; height: 36px; border-radius: 50%; background: #555; display: grid; place-items: center; font-size: 12px; font-weight: bold; flex-shrink: 0; }
.card-text { display: flex; flex-direction: column; gap: 4px; width: 100%; padding-right: 12px; }
.card-title { font-size: 16px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.card-meta { font-size: 14px; color: var(--yt-text-dim); }
.admin-delete-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); border: none; width: 32px; height: 32px; border-radius: 50%; color: white; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; }

/* ================= O NOVO PLAYER (SPA & PIP FLUTUANTE) ================= */
#player-view {
    position: fixed; z-index: 3000; 
    display: none; background: var(--yt-bg);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#player-view.full {
    top: var(--header-h); left: 0; width: 100%; 
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h)); /* Ajuste para iOS */
    overflow-y: auto; display: block; 
}

/* LAYOUT BASE (MOBILE) */
.watch-layout {
    display: flex; flex-direction: column; gap: 24px;
    max-width: 1600px; margin: 0 auto; padding: 24px;
}

/* LAYOUT GRID AVANÇADO (PC) */
@media (min-width: 1024px) {
    .watch-layout { 
        display: grid;
        grid-template-columns: 1fr 400px;
        grid-template-rows: auto 1fr;
        align-items: start;
    }
    #playerWrapper { grid-column: 1; grid-row: 1; }
    #videoInfoArea { grid-column: 1; grid-row: 2; margin-top: 0 !important; }
    #sidebarArea { grid-column: 2; grid-row: 1 / span 2; }
}

/* TRAVA A PROPORÇÃO DO VÍDEO (16:9) */
#playerWrapper {
    width: 100%; aspect-ratio: 16/9; background: #000;
    border-radius: 12px; overflow: hidden; position: relative;
    max-height: 80vh; flex-shrink: 0;
}

#playerContainer, #main-video {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; 
    outline: none; object-fit: contain;
}

#btn-minimize {
    position: absolute; top: 16px; left: 16px; background: rgba(0,0,0,0.6); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
#btn-minimize:hover { background: rgba(0,0,0,0.9); }

/* ESTADO 2: MINIPLAYER FLUTUANTE (PIP) */
#player-view.mini {
    display: block; position: fixed;
    bottom: 20px; right: 20px;
    width: 380px; height: auto; aspect-ratio: 16/9;
    background: #000; border-radius: 12px;
    border: 2px solid var(--yt-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.9);
    overflow: hidden; cursor: pointer;
    z-index: 5000;
}

#player-view.mini .watch-layout { display: block; padding: 0; }
#player-view.mini #videoInfoArea, #player-view.mini #sidebarArea, #player-view.mini #btn-minimize { display: none !important; }
#player-view.mini #playerWrapper { border-radius: 0; position: static !important; max-height: none; }
#player-view.mini #main-video { object-fit: cover; pointer-events: none; } 

#mini-controls { display: none; } 
#player-view.mini #mini-controls {
    display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    align-items: center; justify-content: center; gap: 15px;
    background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s;
}
#player-view.mini:hover #mini-controls { opacity: 1; }
.mini-btn { background: rgba(0,0,0,0.7); color: white; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.mini-btn:hover { background: rgba(0,0,0,0.9); }

/* INFORMAÇÕES DO VÍDEO E BOTÕES */
.play-title { font-size: 20px; margin-bottom: 12px; font-weight: bold; line-height: 1.4; }
.player-channel-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.channel-info { display: flex; align-items: center; gap: 12px; }
.btn-subscribe { background: var(--yt-text); color: var(--yt-bg); padding: 10px 16px; border-radius: 20px; font-weight: 600; border: none; cursor: pointer; }

.action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-group { display: flex; background: var(--yt-surface); border-radius: 20px; overflow: hidden; }
.btn-pill { background: var(--yt-surface); color: var(--yt-text); border: none; padding: 8px 16px; font-weight: 500; font-size: 14px; border-radius: 20px; white-space: nowrap; cursor: pointer; transition: background 0.2s;}
.btn-pill:hover { background: var(--yt-hover); }
.btn-group .btn-pill { border-radius: 0; }
.btn-group .border-l { border-left: 1px solid #444; }
.video-description { background: var(--yt-surface); padding: 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; }

/* RECOMENDADOS (SIDEBAR) */
.related-card { display: flex; gap: 12px; cursor: pointer; margin-bottom: 16px; transition: transform 0.2s;}
.related-card:hover { transform: translateY(-2px); }
.related-card .thumbnail-container { width: 168px; flex-shrink: 0; border-radius: 8px; }
.related-card .card-info { padding: 0; }
.related-card .channel-avatar { display: none; }
.related-card .card-title { font-size: 14px; -webkit-line-clamp: 2; }

/* MODO TEATRO */
#player-view.theater-mode-active .watch-layout { 
    display: flex !important; /* Quebra o Grid e força uma coluna */
    flex-direction: column !important; 
    padding: 0 !important; max-width: 100% !important; 
}
#player-view.theater-mode-active #playerWrapper { max-width: 100% !important; width: 100% !important; height: 85vh !important; max-height: none !important; border-radius: 0 !important; }
#player-view.theater-mode-active #videoInfoArea { max-width: 1400px !important; margin: 24px auto 0 auto !important; padding: 0 24px !important; }
#player-view.theater-mode-active #sidebarArea { max-width: 1400px !important; width: 100% !important; margin: 0 auto !important; padding: 0 24px !important; }
#player-view.theater-mode-active .related-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 16px !important; }

/* ================= MOBILE AJUSTES FINAIS ================= */
@media (max-width: 1023px) {
    .btn-pill[onclick="toggleTheaterMode()"] { display: none; }
}

@media (max-width: 768px) {
    /* Header compacto */
    .yt-header { padding: 0 8px; gap: 8px; }
    .yt-logo { font-size: 18px; }
    
    /* Barra de pesquisa otimizada para parecer App */
    .search-wrapper { max-width: 45px; justify-content: flex-end; }
    .search-box { background: transparent; border: none; }
    .search-box input { display: none; } /* Esconde o input para não estourar o layout */
    .search-box button { padding: 5px; font-size: 22px; background: transparent; border: none; color: var(--yt-text); }
    .search-box button:hover { background: transparent; }

    .header-right { gap: 8px; }
    .btn-create .btn-text { display: none; }
    .btn-create .btn-icon { display: block; }
    .btn-create { width: 32px; height: 32px; padding: 0; border-radius: 50%; justify-content: center;}

    /* Feed principal (1 vídeo por linha esticado) */
    .main-layout { padding: 16px 0 40px; }
    .video-grid { grid-template-columns: 1fr; gap: 24px; padding: 0; }
    .thumbnail-container { border-radius: 0; } /* Tira borda para colar na tela */
    .card-info { padding: 0 16px; }
    
    .watch-layout { padding: 0; }
    #videoInfoArea, #sidebarArea { padding: 0 16px; }
    
    /* MÁGICA: Fixa o player no celular garantido pelo novo HTML limpo */
    #player-view.full #playerWrapper { 
        border-radius: 0; 
        position: sticky; 
        top: 0; 
        z-index: 5000; /* Z-index elevado para ficar acima de tudo */
    }
    
    .player-channel-row { flex-direction: column; align-items: flex-start; }
    .action-buttons { overflow-x: auto; padding-bottom: 8px; width: 100%; flex-wrap: nowrap; scrollbar-width: none; }
    .action-buttons::-webkit-scrollbar { display: none; } /* Oculta scrollbar */
    
    .related-card .thumbnail-container { width: 140px; }

    /* Miniplayer Mobile Ajustado */
    #player-view.mini { width: 260px; bottom: 20px; right: 10px; }
    #player-view.mini #mini-controls { opacity: 1; background: transparent; } 
    .mini-btn { width: 32px; height: 32px; font-size: 14px; background: rgba(0,0,0,0.6);}
    #mini-close { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.8); width: 24px; height: 24px; font-size: 12px; }
    #mini-play { display: none; } 
}

/* PAGINAÇÃO & ESTADOS VAZIOS */
.pagination-wrapper { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 40px 16px; }
.page-btn { background: var(--yt-surface); padding: 8px 16px; border-radius: 4px; font-size: 14px; transition: 0.2s; }
.page-btn:hover { background: var(--yt-hover); }
.page-btn.active { background: var(--yt-text); color: var(--yt-bg); font-weight: 500; }
.empty-state { text-align: center; padding: 40px; color: var(--yt-text-dim); grid-column: 1/-1; }