/* ==========================================================================
   SILICON OS 95 — os-apps.css
   In-window content styles: audio player, playlist, frame theming
   ========================================================================== */

/* ── WaveSurfer Audio Player ──────────────────────────────────────────── */
.os-player {
    display: flex; flex-direction: column; height: 100%;
    background: var(--os-deep);
    color: var(--os-text);
    font-family: var(--os-font-body);
    overflow: hidden;
}

#os-waveform {
    padding: 20px 20px 0;
    background: var(--os-deep-2);
    cursor: pointer;
    border-bottom: 1px solid rgba(0,188,212,0.1);
}
#os-waveform wave { overflow: hidden !important; }

.os-player__info {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.os-player__track {
    font-family: var(--os-font-system);
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--os-cyan);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 65%;
}
.os-player__times {
    display: flex; gap: 6px;
    font-family: var(--os-font-system);
    font-size: 0.62rem; letter-spacing: 0.06em;
    color: var(--os-text-dim);
}

.os-player__controls {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.os-player__btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: var(--os-text-muted);
    cursor: pointer;
    transition: var(--os-transition);
}
.os-player__btn:hover {
    background: rgba(0,188,212,0.12);
    border-color: rgba(0,188,212,0.35);
    color: var(--os-cyan);
}
.os-player__btn--play {
    width: 44px; height: 44px; font-size: 1.1rem;
    background: rgba(0,188,212,0.08);
    border-color: rgba(0,188,212,0.3);
    color: var(--os-cyan);
}
.os-player__btn--play:hover {
    background: var(--os-cyan);
    color: var(--os-void);
    box-shadow: 0 0 16px var(--os-cyan-glow);
}

.os-player__volume {
    flex: 1; max-width: 120px;
    accent-color: var(--os-cyan);
    cursor: pointer;
    margin-left: auto;
}

/* Playlist */
.os-player__playlist {
    flex: 1; overflow-y: auto; padding: 8px;
}
.os-playlist-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--os-text-dim);
    font-family: var(--os-font-body);
    font-size: 0.78rem;
    text-align: left; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.os-playlist-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--os-text);
}
.os-playlist-item--active {
    background: rgba(0,188,212,0.08) !important;
    color: var(--os-cyan) !important;
    border-left: 2px solid var(--os-cyan);
}
.os-playlist-item__num {
    font-family: var(--os-font-system);
    font-size: 0.62rem; color: var(--os-text-dim);
    min-width: 24px;
}
.os-playlist-item--active .os-playlist-item__num { color: var(--os-cyan); }
.os-playlist-item__title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── OS App Widget Content ────────────────────────────────────────────── */
.os-widget-content {
    padding: 0;
    background: var(--os-deep);
}

/* ── Iframe Scrollbar Inside Windows ──────────────────────────────────── */
.os-window__iframe::-webkit-scrollbar { width: 6px; }
.os-window__iframe::-webkit-scrollbar-thumb { background: var(--os-cyan); border-radius: 3px; }