/* ==========================================================================
   components.css — peças da interface
   ========================================================================== */

/* --- Aviso "Copied to clipboard!" na navbar ------------------------------ */

.alertVisible {
    opacity: 1;
}

.alertInvisible {
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

/* --- Arte ASCII ---------------------------------------------------------- */

.ascii-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border: none;
}

/* O font-size final é calculado em src/js/ascii.js: a arte tem 150 colunas
   fixas e a coluna que a contém é fluida, então qualquer valor estático
   (5px, 1.2vw...) corta a borda direita em alguma largura de tela. O JS mede
   a largura real de um caractere e reduz a fonte até caber inteira.
   O valor abaixo é só o teto/fallback caso o JS não rode. */
.ascii-art {
    font-family: monospace;
    font-size: 5px;
    font-weight: bold;
    line-height: 1;
    white-space: pre;
    overflow: hidden;
    /* Sem isto o <pre> nunca encolhe abaixo da linha mais longa da arte e
       transborda a coluna, mesmo com o corpo de letra reduzido. */
    min-width: 0;
    text-align: center;
    color: #000000;
    background: transparent;
    border: none;
}

/* --- Player ------------------------------------------------------------- */

.player-video-panel {
    height: 200px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#songVideo {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: fill;
}

.player-panel {
    padding-top: 5px;
}

/* Trilho branco por cima do dither cinza que .progress traz do tema. */
.player-progress {
    background-color: #fff;
}

.player-progress__bar {
    width: 10%;
    height: auto;
    background-color: #8b0000;
}

/* Mesma história dos botões da tela de boot: precisa cobrir os estados
   :hover/:focus/:active, senão o tema pinta de #00aaaa. */
.player-btn,
.player-btn:hover,
.player-btn:focus,
.player-btn:active,
.player-btn.active {
    background-color: #747474;
}

/* --- Badges e avisos ---------------------------------------------------- */

.badge--system {
    background-color: #747474;
}

.badge--spaced {
    margin-bottom: 5px;
}

.system-announcement {
    height: fit-content;
}

/* --- Painel "About You" (montado por src/js/sysinfo.js) -----------------
   .info-item / .info-label existem como ganchos no HTML gerado, mas de
   propósito não têm estilo: hoje o painel herda a tipografia do tema e
   qualquer regra aqui mudaria o visual. Estilize a partir daqui se quiser. */