/* This font file needs to be placed in a 'res' folder inside your plugin directory */
/* Default font is now loaded via inline style from PHP */

@keyframes marquee {
    0%, 20% {
        transform: translateX(0);
    }
    50%, 70% {
        transform: translateX(var(--scroll-amount));
    }
    100% {
        transform: translateX(0);
    }
}

.llama-player-instance { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    font-family: var(--llama-player-font, 'Silkscreen', 'MS Sans Serif', sans-serif); 
    font-size: 13px;
    color: #c0c0c0; 
    margin: 20px auto; 
    width: 95%; 
    max-width: 400px; 
    text-transform: uppercase;
}
.llama-player-instance *, .llama-player-instance *::before, .llama-player-instance *::after {
    box-sizing: border-box;
}

.llama-player-instance .main-window,
.llama-player-instance .playlist-window {
    width: 100%; 
    background: linear-gradient(to bottom, #404040, #202020); 
    border: 2px outset #808080; 
    position: relative; 
    display: flex; 
    flex-direction: column;
}

.llama-player-instance .title-bar { 
    height: 21px; 
    line-height: 21px; 
    background: linear-gradient(to bottom, #606060, #404040); 
    border-bottom: 1px solid #202020; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 4px; 
    font-size: 11px;
    color: #c0c0c0; 
    user-select: none; 
    flex-shrink: 0; 
}
.llama-player-instance .window-controls { display: flex; gap: 2px; align-items: center; }

.llama-player-instance .control-btn { 
    width: 14px; 
    height: 14px; 
    background: linear-gradient(to bottom, #808080, #404040); 
    border: 1px outset #808080; 
    cursor: pointer; 
    color: #c0c0c0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.llama-player-instance .control-btn:active { border: 1px inset #808080; }

.llama-player-instance .display-area { 
    margin: 4px; 
    height: 26px; 
    background: #000; 
    border: 1px inset #808080; 
    display: flex; 
    align-items: center; 
    padding: 2px 5px; 
    flex-shrink: 0; 
}

.llama-player-instance .track-info, 
.llama-player-instance .time-display { 
    color: #00ff00; 
    font-family: var(--llama-player-font, 'Silkscreen', monospace); 
    font-size: 15px;
}

.llama-player-instance .time-display-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 10px;
}

.llama-player-instance .time-display {
    font-variant-numeric: tabular-nums;
    width: 20px;
}
.llama-player-instance .llama-time-elapsed { text-align: right; }
.llama-player-instance .llama-time-total { text-align: left; }

.llama-player-instance .time-separator { 
    margin: 0 2px; 
    padding-left: 2px;
}


.llama-player-instance .llama-song-title { 
    flex-grow: 1; 
    overflow: hidden; 
    white-space: nowrap; 
    text-align: left; 
    min-width: 0;
}

.llama-player-instance .llama-song-title.is-scrolling span {
    display: inline-block;
    position: relative;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.llama-player-instance .media-display-container { 
    width: calc(100% - 8px); 
    margin: 4px; 
    position: relative; 
    aspect-ratio: 1 / 1; 
    height: auto; 
    min-height: 0;
}
.llama-player-instance .visualizer, 
.llama-player-instance .llama-video-player { 
    width: 100%; 
    height: 100%; 
    background: #000; 
    border: 1px inset #808080; 
    overflow: hidden; 
}
.llama-player-instance .llama-video-player { object-fit: cover; }
.llama-player-instance .player-canvas { width: 100%; height: 100%; }
.llama-player-instance .controls-row { display: flex; align-items: center; padding: 4px; gap: 2px; flex-shrink: 0; }
.llama-player-instance .sliders-row { margin-top: 4px; padding: 0 4px 4px; }
.llama-player-instance .player-buttons { display: flex; gap: 2px; }
.llama-player-instance .control-button { 
    width: 23px; 
    height: 18px; 
    background: linear-gradient(to bottom, #606060, #404040); 
    border: 1px outset #808080; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #c0c0c0; 
    padding: 3px;
    text-transform: none;
}
.llama-player-instance .control-button:active { border-style: inset; }
.llama-player-instance .volume-control { flex: 1; margin: 0 10px; }
.llama-player-instance input[type=range] { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 100%; 
    height: 10px; 
    background: #202020; 
    border: 1px inset #808080; 
    padding: 0; 
    margin: 0; 
}
.llama-player-instance input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 6px; 
    height: 10px; 
    background: linear-gradient(to bottom, #808080, #404040); 
    border: 1px outset #808080; 
    cursor: pointer; 
}
.llama-player-instance .playlist-window { 
    height: 116px; 
    margin-top: 0; 
    transition: height 0.3s ease;
}
.llama-player-instance .playlist-content { 
    flex-grow: 1; 
    min-height: 0; 
    background: #000; 
    border: 1px inset #808080; 
    margin: 4px; 
    overflow-y: auto; 
    font-family: var(--llama-player-font, 'Silkscreen', sans-serif); 
    font-size: 15px;
    list-style: none; 
    padding: 0; 
}
.llama-player-instance .playlist-content li { 
    padding: 2px 4px; 
    color: #00ff00;
    cursor: pointer; 
    display: flex;
    align-items: baseline;
    gap: 0.1em;
}
.llama-player-instance .playlist-content li:hover,
.llama-player-instance .playlist-content li.active { 
    background: #00ff00;
    color: #000;
}
.llama-player-instance .playlist-content .track-number {
    flex: 0 0 1.8em; 
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.llama-player-instance .playlist-content .track-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.2em;
}
.llama-player-instance .toggle-vis-btn { text-transform: none; }
.llama-player-instance .vis-toggle-btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(0,0,0,0.4); 
    color: #fff; 
    border: 1px solid #888; 
    border-radius: 50%; 
    width: 26px;
    height: 26px;
    cursor: pointer; 
    opacity: 0; 
    transition: opacity 0.3s; 
    z-index: 10; 
    padding: 5px;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.llama-player-instance .media-display-container:hover .vis-toggle-btn { opacity: 1; }
.llama-player-instance .vis-prev { left: 5px; }
.llama-player-instance .vis-next { right: 5px; }

.llama-player-instance.visualizer-minimized-at-start .media-display-container { display: none; }
.llama-player-error { border: 2px solid #c00; padding: 10px 15px; margin: 10px 0; background: #fff0f0; color: #333; border-radius: 4px; }

.llama-player-instance svg {
    fill: currentColor;
    width: 100%;
    height: 100%;
}

.llama-player-instance .control-button svg,
.llama-player-instance .vis-toggle-btn svg {
    width: 100%;
    height: 100%;
}

.llama-player-instance .control-btn svg {
    width: 11px;
    height: 11px;
}

.toggle-vis-btn .icon-show,
.toggle-vis-btn .icon-hide {
    display: none;
    align-items: center;
    justify-content: center;
}
.toggle-vis-btn .icon-hide {
    display: flex;
}
.visualizer-is-hidden .toggle-vis-btn .icon-show {
    display: flex;
}
.visualizer-is-hidden .toggle-vis-btn .icon-hide {
    display: none;
}

/* Styles for collapsible playlist */
.playlist-is-hidden .playlist-content {
    display: none;
}

.playlist-is-hidden .playlist-window {
    height: 21px;
}

@media (min-width: 500px) {
    .llama-player-instance { max-width: 275px; }
}

/* --- New Styles for Sizes --- */
.llama-player-instance.is-large {
    transform: scale(1.5);
    transform-origin: top center;
    margin-bottom: 120px; 
    margin-top: 40px;
}
.llama-player-instance.is-large.playlist-is-hidden {
    margin-bottom: 40px;
}

.llama-player-instance.is-medium {
    transform: scale(1.25);
    transform-origin: top center;
    margin-bottom: 60px;
    margin-top: 20px;
}
.llama-player-instance.is-medium.playlist-is-hidden {
    margin-bottom: 20px;
}