:root {
     --player-height: 95px;
     --player-width: 550px;
     --player-gap: 10px;
     --background-color: #1a1a1a;
     --primary-text-color: #f0f0f0;
     --secondary-text-color: #a0a0a0;
     --accent-color: #e50914;
     --controls-background: #282828;
     --progress-bar-bg: #4d4d4d;
     --progress-bar-fg: #f0f0f0;
     --border-radius: 12px;
     --shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
     --transition-speed: 0.2s;
 }


 .youtube-player-container {
     position: fixed;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     width: var(--player-width);
     max-width: 95%;
     z-index: 1000;
     background-color: var(--controls-background);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
     transition: width var(--transition-speed) ease-in-out;
 }

 .youtube-player-container.maximized {
     width: 560px;
     max-width: 90%;
 }

 .video-wrapper {
     position: absolute;
     bottom: calc(var(--player-height) + var(--player-gap));
     left: 0;
     width: 100%;
     max-height: 0;
     opacity: 0;
     visibility: hidden;
     background-color: #000;
     overflow: hidden;
     transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, bottom 0.4s ease-in-out;
     border-radius: var(--border-radius) var(--border-radius) 0 0;
 }

 .youtube-player-container.maximized .video-wrapper {
     max-height: 315px;
     opacity: 1;
     visibility: visible;
     height: 190px;
     border-radius: 5px;
 }

 #youtube-player {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
 }

 .controls-wrapper {
     position: relative;
     z-index: 2;
     padding: 10px 20px;
     height: var(--player-height);
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .main-controls {
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
     gap: 15px;
     height: 40px;
     width: 100%;
 }

 .player-info {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 0;
 }

 .album-art {
     width: 45px;
     height: 45px;
     border-radius: 6px;
     overflow: hidden;
     flex-shrink: 0;
     background-color: #111;
 }

 .album-art img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .track-info {
     display: flex;
     flex-direction: column;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .track-title {
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--primary-text-color);
 }

 .track-artist {
     font-size: 0.8rem;
     color: var(--secondary-text-color);
 }

 .player-actions {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 .player-options {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .control-btn {
     position: relative;
     background: none;
     border: none;
     color: var(--primary-text-color);
     font-size: 1.5rem;
     cursor: pointer;
     transition: color 0.2s ease, transform 0.2s ease;
     padding: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .play-pause-btn {
     font-size: 2.2rem;
 }

 .prev-next-btn {
     font-size: 1.8rem;
 }

 .playlist-controls-hidden .prev-next-btn {
     display: none;
 }

 .spinner {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 30px;
     height: 30px;
     border: 3px solid rgba(255, 255, 255, 0.3);
     border-top-color: var(--primary-text-color);
     border-radius: 50%;
     animation: spin 1s linear infinite;
     display: none;
 }

 .play-pause-btn.loading .spinner {
     display: block;
 }

 .play-pause-btn.loading i {
     opacity: 0;
 }

 @keyframes spin {
     to {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 .volume-control {
     position: relative;
     display: flex;
     align-items: center;
 }

 .volume-panel {
     position: absolute;
     bottom: calc(100% + 10px);
     left: 50%;
     transform: translate(-50%, 10px);
     background-color: hsl(0, 0%, 20%);
     padding: 8px 12px;
     border-radius: 8px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     visibility: hidden;
     opacity: 0;
     transition: opacity var(--transition-speed), visibility var(--transition-speed), transform var(--transition-speed);
 }

 .volume-panel.active {
     visibility: visible;
     opacity: 1;
     transform: translate(-50%, 0);
 }

 .volume-slider {
     -webkit-appearance: none;
     appearance: none;
     width: 100px;
     height: 5px;
     background: #555;
     border-radius: 5px;
     outline: none;
     cursor: pointer;
 }

 .volume-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 15px;
     height: 15px;
     background: var(--primary-text-color);
     border-radius: 50%;
     cursor: pointer;
 }

 .maximize-btn i {
     font-size: 2rem;
 }

 .maximize-btn .ri-youtube-fill {
     color: var(--accent-color);
 }

 .progress-container {
     width: 100%;
     display: flex;
     align-items: center;
     gap: 10px;
     margin-top: 20px;
 }

 .timestamp {
     font-size: 0.75rem;
     color: var(--secondary-text-color);
 }

 .progress-bar-wrapper {
     flex-grow: 1;
     height: 12px;
     display: flex;
     align-items: center;
     cursor: pointer;
 }

 .progress-bar {
     width: 100%;
     height: 4px;
     background-color: var(--progress-bar-bg);
     border-radius: 2px;
     position: relative;
 }

 .progress-bar-filled {
     width: 0%;
     height: 100%;
     background-color: var(--progress-bar-fg);
     border-radius: 2px;
     position: absolute;
 }

 .player-branding {
     text-align: center;
     margin-top: -8px;
     width: 100%;
 }

 .player-branding small {
     font-size: 0.7rem;
     color: var(--secondary-text-color);
     opacity: 0.7;
 }

 .player-branding a {
     color: inherit;
     text-decoration: none;
 }

 .player-branding a:hover {
     text-decoration: underline;
 }