html, body {
    /* Desativa o pull-to-refresh em navegadores como Chrome e Firefox
       e o efeito de "bounce" para rolagens que atingem o limite */
    overscroll-behavior-y: contain; 
    
    /* Alternativamente, para desativar completamente qualquer efeito de limite: */
    /* overscroll-behavior: none !important; */
}

body {
  font-family: "Inter", sans-serif;
  background: #0f172a; /* Fundo principal escuro */
  color: #f1f5f9;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  background: #1e293b; /* Cor escura do cabeçalho */
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#path {
  font-size: 0.8rem;
  color: #94a3b8;
}

main {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

/* ----------------------------------- */
/* BARRA DE ARMAZENAMENTO */
/* ----------------------------------- */
#storage-bar-container {
    margin-bottom: 1rem;
    padding: 10px;
    background: #0f172a;
    border-radius: 6px;
    border: 1px solid #334155;
}

#storage-bar-text {
    font-size: 0.8em;
    color: #94a3b8;
    margin-bottom: 5px;
}

#storage-bar-wrapper {
    width: 100%;
    background-color: #334155;
    border-radius: 4px;
    height: 10px;
}

#storage-bar-fill {
    height: 100%;
    border-radius: 4px;
    background-color: #38bdf8; /* Cor de preenchimento (Azul) */
    transition: width 0.5s ease-in-out;
}


/* ----------------------------------- */
/* MODAL STYLES */
/* ----------------------------------- */
#youtube-modal {
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); 
    display: flex;
    justify-content: center;
    align-items: center;
}

#modal-content {
    background-color: #1e293b; 
    padding: 20px;
    border-radius: 12px;
    width: 90%; 
    max-width: 700px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative;
}

.close-btn {
    color: #f1f5f9;
    float: right;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
}

#modal-footer {
    padding-top: 15px;
    text-align: center;
}

#modal-download-btn {
    background: #10b981; /* Verde */
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
}

/* ----------------------------------- */
/* SEÇÃO DE BUSCA YOUTUBE */
/* ----------------------------------- */
#youtube-search-section {
    background: #1e293b;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
}

#youtube-search-section h2 {
    color: #f87171; /* Vermelho/rosa para YouTube */
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #334155;
    padding-bottom: 0.5rem;
    font-size: 1.25rem;
}

#youtube-query {
    padding: 0.75rem;
    width: 70%;
    background: #0f172a;
    color: #f1f5f9;
    border: 1px solid #334155;
    border-radius: 6px;
    margin-right: 10px;
}

#search-btn {
    padding: 0.75rem 1.25rem;
    background-color: #f87171;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

#search-results {
    margin-top: 1rem;
}

.search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid #334155;
    font-size: 0.9rem;
}

.search-result-item span {
    flex-grow: 1; 
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 10px;
}

.play-btn {
    background-color: #f87171;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    margin-right: 10px;
    display: flex; 
    align-items: center;
    justify-content: center;
    font-size: 1em;
    line-height: 1;
}

.download-btn {
    background-color: #10b981;
    color: white;
    padding: 0.4rem 0.8rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 5px;
}

/* ----------------------------------- */
/* SEÇÃO DE PASTAS/ARQUIVOS */
/* ----------------------------------- */
#file-list-section {
    flex: 1;
    background: #1e293b;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
}

#file-list-section h2 {
    color: #38bdf8;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #334155;
    padding-bottom: 0.5rem;
    font-size: 1.25rem;
}

.item {
  background: #0f172a; /* Fundo do item levemente mais escuro */
  margin: 0.5rem 0;
  padding: 0.8rem;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item span {
  flex: 1;
}

.item button {
  background: #ef4444; /* Vermelho para Excluir */
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  margin-left: 0.5rem;
}

/* ----------------------------------- */
/* FOOTER */
/* ----------------------------------- */
footer {
  background: #1e293b;
  padding: 0.6rem;
  text-align: center;
}

footer button {
  margin: 0 0.3rem;
  background: #38bdf8; /* Azul para botões de ação do Footer */
  border: none;
  color: #0f172a;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

.search-input-group {
    display: flex; /* Coloca os filhos lado a lado */
    gap: 10px; /* Espaço entre o input e o botão */
}
#youtube-query {
    flex-grow: 1; /* Faz o input preencher o espaço restante */
}

/* Alinha o botão de assistir e o texto do nome do arquivo */
.file-info {
    display: flex;
    align-items: center; /* Alinha verticalmente o botão e o texto */
    gap: 5px; /* Adiciona um pequeno espaço entre o botão e o texto */
}

/* Garante que o item principal separe as informações das ações */
.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ... outros estilos de borda/padding/cor do item ... */
}

/* style.css */

/*
=====================================================
ESTILOS GLOBAIS DO MODAL (Fixar e Centralizar)
=====================================================
*/
/* Alvo: Os divs que contêm o modal (o fundo escuro) */
#youtube-modal, 
#download-selection-modal {
    /* Garante que o modal cubra a tela inteira */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Coloca o modal acima de todo o conteúdo */
    z-index: 1000; 
    
    /* Fundo escuro semi-transparente */
    background-color: rgba(0, 0, 0, 0.8);
    
    /* Centralização perfeita usando Flexbox */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;   /* Centraliza verticalmente */
    
    /* Garante que o fundo não role */
    overflow-y: auto;
}

/* =====================================================
ESTILOS DO CONTEÚDO INTERNO DO MODAL (A caixa branca/escura)
=====================================================
*/
/* Alvo: Os divs de conteúdo dentro do fundo (#modal-content) */
#youtube-modal #modal-content,
#download-selection-modal #download-selection-content {
    /* Define a largura máxima do modal */
    max-width: 90%; 
    max-height: 90vh; /* Limita a altura para que caiba na tela */
    overflow-y: auto; /* Permite rolar o CONTEÚDO se for muito grande */
    
    /* Ajusta a margem para evitar que o conteúdo toque nas bordas */
    margin: 20px; 
    
    /* Estilos de Aparência (Cor, Sombra, etc.) - Ajuste conforme seu style.css */
    background-color: #1e293b; /* Cor de fundo do modal */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    position: relative; /* Necessário se houver elementos posicionados absolutamente dentro */
}

/* Estilos de fechamento (para evitar que o botão de fechar saia do lugar) */
.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #fff; /* Cor do X de fechar */
    cursor: pointer;
    transition: color 0.2s;
}
.close-btn:hover {
    color: #f00;
}

/* Estilos para o Carrossel de Categorias */
.category-roll-container {
    display: flex; /* Alinha os itens lado a lado */
    overflow-x: scroll; /* Permite a rolagem horizontal */
    overflow-y: hidden; /* Esconde a barra de rolagem vertical */
    padding-bottom: 10px; /* Espaço para "puxar" a rolagem em alguns navegadores */
    white-space: nowrap; /* Impede quebras de linha */
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em iOS */
    /* Estilo da barra de rolagem (opcional, mas recomendado para design) */
    scrollbar-width: none; /* Firefox */
}

.category-roll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari e Opera */
}

.category-item {
    display: inline-block;
    padding: 8px 15px;
    margin-right: 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s ease;
    user-select: none;
    
    /* Estado Padrão (Apagado) */
    background-color: #333;
    color: #888;
    border: 1px solid #555;
    box-shadow: none;
}

/* Estado Ativo (Iluminado) */
.category-item.active {
    background-color: #ff0000; /* Vermelho do YouTube ou sua cor de destaque */
    color: white;
    border: 1px solid #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); /* Efeito iluminado (glow) */
}

.category-item:hover:not(.active) {
    background-color: #555;
    color: #eee;
}

/* Estilo para a grade do feed (apenas para garantir o layout) */
.feed-grid {
    display: grid;
    /* Ajuste as colunas conforme o seu layout desejado (ex: mobile) */
    grid-template-columns: 1fr; 
    gap: 20px;
}