/* ==========================================================================
   Fokus-Musik (focus-music.js)
   Ein runder Knopf, überall gleich:
     aus     Noten-Symbol
     an      tanzende Pegelbalken, beim Überfahren der durchgestrichene
             Lautsprecher (= ausschalten), aber nicht direkt nach dem
             Einschalt-Klick und nicht auf Touch-Geräten
     wartet  nach einem Seitenwechsel, bis der Browser Ton erlaubt: Balken
             ruhen, ein Klick setzt die Musik an der alten Stelle fort
   Position: neben "Optionen" (Mindmap) bzw. "Farbschema" (Übersichten), die
   Werte setzt focus-music.js (.is-anchored). Ohne Anker frei unten rechts.
   Der Knopf liegt bewusst NICHT im Dock der Mindmap, sonst würde das
   Optionen-Menü schon beim Überfahren aufklappen.
   ========================================================================== */

.focus-music-quick {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2000;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: #64748b;
    cursor: pointer;
    animation: focus-music-in 0.35s cubic-bezier(0.22, 1.3, 0.36, 1) both;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Neben "Optionen" bzw. "Farbschema": gleiche Höhe wie die Pillen */
.focus-music-quick.is-anchored {
    width: 44px;
    height: 44px;
}

@keyframes focus-music-in {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: none; }
}

.focus-music-quick:hover,
.focus-music-quick:focus-visible {
    color: #5c24ff;
    box-shadow: 0 6px 18px rgba(92, 36, 255, 0.25);
    transform: translateY(-2px);
}

.focus-music-quick.is-on {
    color: #5c24ff;
    border-color: rgba(92, 36, 255, 0.35);
}

body.glass-theme .focus-music-quick {
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.glass-theme .focus-music-quick.is-on,
body.glass-theme .focus-music-quick:hover {
    color: #d9ccff;
}

/* ---------- Symbole ---------- */
.focus-music-bars {
    display: none;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
}

.focus-music-bars i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: currentColor;
    transform-origin: bottom;
    animation: focus-music-bar 1.1s ease-in-out infinite;
}

.focus-music-bars i:nth-child(2) { animation-delay: -0.35s; animation-duration: 0.9s; }
.focus-music-bars i:nth-child(3) { animation-delay: -0.7s; animation-duration: 1.25s; }

@keyframes focus-music-bar {
    0%, 100% { transform: scaleY(0.3); }
    50%      { transform: scaleY(1); }
}

.focus-music-on,
.focus-music-off {
    display: none;
    width: 19px;
    height: 19px;
    background: currentColor;
}

.focus-music-on {
    -webkit-mask: url('images/icons/music.svg') center / contain no-repeat;
    mask: url('images/icons/music.svg') center / contain no-repeat;
}

.focus-music-off {
    -webkit-mask: url('images/icons/volume-xmark.svg') center / contain no-repeat;
    mask: url('images/icons/volume-xmark.svg') center / contain no-repeat;
}

/* aus: Noten */
.focus-music-quick:not(.is-on) .focus-music-on {
    display: block;
}

/* an: Balken, beim Überfahren der durchgestrichene Lautsprecher */
.focus-music-quick.is-on .focus-music-bars {
    display: flex;
}

/* Nicht direkt nach dem Klick (.is-just-toggled, bis die Maus den Knopf
   verlässt) und nur auf Geräten mit echter Maus: Auf dem Handy bleibt
   :hover nach dem Tippen hängen */
@media (hover: hover) {
    .focus-music-quick.is-on:not(.is-pending):not(.is-just-toggled):hover .focus-music-bars {
        display: none;
    }

    .focus-music-quick.is-on:not(.is-pending):not(.is-just-toggled):hover .focus-music-off {
        display: block;
    }
}

.focus-music-quick.is-on:not(.is-pending):not(.is-just-toggled):focus-visible .focus-music-bars {
    display: none;
}

.focus-music-quick.is-on:not(.is-pending):not(.is-just-toggled):focus-visible .focus-music-off {
    display: block;
}

/* wartet auf die erste Nutzeraktion: Balken ruhen */
.focus-music-quick.is-pending .focus-music-bars i {
    animation-play-state: paused;
    opacity: 0.55;
}

/* Gedämpft, während Lexi im Crashkurs spricht: Die Balken tanzen weiter,
   nur etwas blasser, denn die Musik läuft ja leise mit */
.focus-music-quick.is-ducked .focus-music-bars i {
    opacity: 0.6;
}

@media (max-width: 640px) {
    .focus-music-quick:not(.is-anchored) {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .focus-music-bars i { animation: none; transform: scaleY(0.7); }
    .focus-music-quick { animation: none; transition: color 0.2s ease; }
}