@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
    --card-bg: rgba(40, 42, 54, 0.85);
    --text-color: #f8f8f2;
    --accent-color: #bd93f9;
    --neon-glow: #a0f; /* Für Profilbild */
    --icon-color: #e0e0e0;
    --progress-bar-color: #bd93f9; /* Wird auch für Volume-Fortschritt genutzt */
    --player-bg: rgba(50, 52, 64, 0.9);
    --glow-color: rgba(189, 147, 249, 0.7); /* Für Player-Glow */
}

/* Keyframes für Animationen */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px var(--neon-glow), 0 0 20px var(--neon-glow); }
    50% { box-shadow: 0 0 15px var(--neon-glow), 0 0 30px var(--neon-glow); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bg-pan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Basis Body-Styling */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-image: url('back.png'); /* Dein Hintergrundbild */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    animation: bg-pan 180s linear infinite alternate; /* Hintergrund-Animation */
}

/* Klasse für FadeIn Animation (wird auf Elemente angewendet) */
.animate-fadeIn {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

/* --- Start: Lautstärkeregler Stile (Version: Hover Ausfahren) --- */
.volume-control-container {
    position: fixed; /* Position oben links */
    top: 20px;
    left: 20px;
    z-index: 100;
    display: flex; /* Elemente nebeneinander */
    align-items: center; /* Vertikal zentrieren */
    background-color: var(--card-bg); /* Hintergrundfarbe */
    border-radius: 12px; /* Abrundung wie im Bild */
    padding: 5px; /* Kleiner Innenabstand */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Versteckt den Slider außerhalb der Breite */

    /* --- Initialer Zustand (klein, nur Button sichtbar) --- */
    width: 44px;  /* Breite = Button-Breite + 2 * horizontales Padding (ca. 34px + 2*5px) */
    height: 44px; /* Höhe = Button-Höhe + 2 * vertikales Padding (ca. 34px + 2*5px) */
    box-sizing: border-box; /* Padding ist in Breite/Höhe enthalten */

    /* --- Animation beim Hover --- */
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Sanfter Übergang für die Breite */
}

/* --- Zustand, wenn die Maus über dem Container ist --- */
.volume-control-container:hover {
    /* Zielbreite = Initiale Breite + Abstand + Sliderbreite (ca. 44px + 10px + 90px = 144px, plus etwas Toleranz) */
    width: 155px; /* Feinjustieren bis es passt! */
}

/* --- Der Button selbst --- */
#volume-button {
    background-color: transparent;
    border: none;
    color: var(--icon-color);
    font-size: 1.4em; /* Icon-Größe */
    cursor: pointer;
    padding: 0; /* Kein Button-internes Padding */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Button soll nicht schrumpfen */
    width: 34px; /* Feste Breite des Icons/Buttons */
    height: 34px; /* Feste Höhe des Icons/Buttons */
    transition: color 0.3s ease;
}
#volume-button:hover { /* Optionaler Effekt auf das Icon beim Hover */
    color: var(--accent-color);
}

/* --- Der Slider --- */
#volume-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px; /* Höhe des Slider-Balkens */
    background: rgba(120, 120, 140, 0.5); /* Dunkleres Grau für den Hintergrund */
    border-radius: 3px;
    cursor: pointer;
    outline: none;

    /* Positionierung & Sichtbarkeit */
    width: 90px; /* Breite des Sliders selbst (anpassen) */
    margin-left: 10px; /* Abstand zwischen Button und Slider */
    opacity: 0; /* Initial unsichtbar */

    /* Übergang für das Einblenden (verzögert) */
    transition: opacity 0.3s ease-in-out 0.1s; /* Blendet ein, *nachdem* der Container breiter wird */
}

/* Slider wird sichtbar, wenn der Container gehovert wird */
.volume-control-container:hover #volume-slider {
    opacity: 1;
}

/* --- Styling des Slider-Griffs (Thumb) --- */
#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; /* Größe des Griffs */
    height: 16px; /* Größe des Griffs */
    background: #f0f0f0; /* Helle Farbe für den Griff wie im Bild */
    border-radius: 50%; /* Rund */
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Optional: leichter Rand */
    margin-top: -5px; /* Vertikal zentrieren (Hälfte von Thumb-Höhe minus Hälfte von Track-Höhe) */
}
#volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Optional: Fortschritt des Sliders einfärben (WebKit - Chrome/Safari) */
#volume-slider {
    /* Der leere Teil des Tracks */
    background: rgba(120, 120, 140, 0.5);
}
#volume-slider::-webkit-slider-runnable-track {
    height: 6px;
    /* Farbverlauf für den gefüllten Teil */
    background: linear-gradient(to right, var(--progress-bar-color) 0%, var(--progress-bar-color) var(--value-percent, 0%), rgba(120, 120, 140, 0.5) var(--value-percent, 0%), rgba(120, 120, 140, 0.5) 100%);
    border-radius: 3px;
}
/* --- Ende: Lautstärkeregler Stile --- */


/* Profilkarte und Audioplayer Basis */
.profile-card,
.audio-player {
    background-color: var(--card-bg);
    border-radius: 25px;
    padding: 30px;
    max-width: 550px;
    width: 90%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    text-align: center;
    margin-bottom: 20px;
    transition: box-shadow 0.4s ease; /* Für Glow-Effekt */
}

/* Glow-Effekt für den Player wenn aktiv */
.audio-player.playing-glow {
    box-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--glow-color);
}

/* Profilbild */
.profile-pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 3px solid var(--neon-glow);
    animation: pulse-glow 3s infinite ease-in-out; /* Pulsierender Effekt */
}

/* Text-Elemente */
h1 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.8em;
    font-weight: 700;
}
.bio {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1em;
    color: #ccc;
}
.location {
    font-size: 0.9em;
    color: #bbb;
    margin-bottom: 25px;
}
.location i {
    margin-right: 5px;
    color: var(--icon-color);
}

/* Status Sektion */
.status-section {
    display: flex;
    align-items: center;
    background-color: rgba(68, 71, 90, 0.6);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
}
.status-icon,
.status-badge {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0; /* Verhindert Schrumpfen */
}
.status-icon { margin-right: 15px; }
.status-badge { margin-left: 15px; }
.status-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Wichtig für Textumbruch in Flexbox */
}
.status-username {
    font-weight: 600;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap; /* Verhindert Umbruch im Benutzernamen */
}
.status-username .status-verified { color: #50fa7b; } /* Grün */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    transition: background-color 0.5s ease;
}
.status-online { background-color: #43b581; }
.status-idle { background-color: #faa61a; }
.status-dnd { background-color: #f04747; }
.status-offline { background-color: #747f8d; }
.status-streaming { background-color: #593695; }

.status-description,
.status-subtext {
    font-size: 0.9em;
    margin-top: 2px;
    white-space: nowrap; /* Verhindert Umbruch */
    overflow: hidden; /* Versteckt überlaufenden Text */
    text-overflow: ellipsis; /* Fügt "..." hinzu */
}
.status-subtext {
    font-size: 0.8em;
    color: #aaa;
}
.status-update-animation { /* Wird von JS zum Neuladen getriggert */
    animation: fadeIn 0.5s ease;
}

/* Zuschauer */
.viewers {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: #ccc;
    background-color: rgba(68, 71, 90, 0.5);
    padding: 5px 10px;
    border-radius: 10px;
    margin-bottom: 25px;
}
.viewers i { color: var(--icon-color); }

/* Soziale Links */
.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}
.social-links a {
    color: var(--icon-color);
    font-size: 1.6em;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    padding: 5px;
}
.social-links a:hover {
    color: var(--accent-color);
    transform: scale(1.15) translateY(-2px);
    filter: brightness(1.2);
}
.social-img-icon {
    width: 26px;
    height: 26px;
    border-radius: 5px;
}

/* Audio Player Internals */
.audio-player {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
}
.song-icon {
    font-size: 1.5em;
    color: var(--icon-color);
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.song-info {
    flex-grow: 1;
    text-align: left;
    min-width: 0; /* Wichtig für Textumbruch */
}
.song-title {
    margin: 0 0 8px 0;
    font-size: 0.95em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.current-time,
.total-duration {
    font-size: 0.8em;
    color: #bbb;
    min-width: 30px;
    text-align: center;
}
.progress-bar {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}
.progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--progress-bar-color);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -3.5px; /* Vertikal zentrieren */
}
.progress-bar::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--progress-bar-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}
.controls {
    display: flex;
    gap: 10px;
}
.control-button { /* Basis für alle Player-Buttons (wird auch für Volume Button genutzt) */
    background: none;
    border: none;
    color: var(--icon-color);
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex; /* Stellt sicher, dass Icons in Buttons gut aussehen */
    align-items: center;
    justify-content: center;
}
.control-button:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

/* Responsiveness */
@media (max-width: 600px) {
    .volume-control-container { top: 10px; left: 10px; }
    .profile-card, .audio-player { padding: 20px; max-width: 95%; }
    h1 { font-size: 1.5em; }
    .profile-pic { width: 80px; height: 80px; }
    .social-links a { font-size: 1.4em; }
    .social-img-icon { width: 22px; height: 22px; }

    .status-section { flex-direction: column; align-items: stretch; }
    .status-icon { margin-right: 0; margin-bottom: 10px; align-self: center;}
    .status-badge { margin-left: 0; margin-top: 10px; align-self: center;}
    .status-text { text-align: center;}
    .status-username { justify-content: center;}

    .audio-player { flex-direction: column; align-items: stretch; }
    .song-info { width: 100%; margin-bottom: 10px; }
    .song-title { text-align: center; }
    .controls { justify-content: center; width: 100%; }
}