/**
 * Sales Assistant AI — Home Audio Control
 *
 * Visual rules:
 * - fully transparent container
 * - white standalone playback icon
 * - white standalone speaker icon
 * - white translucent volume slider
 * - no coloured button backgrounds
 * - no visible outer panel
 */

.home-audio-control {
    position: fixed;
    top: 82px;
    right: 22px;
    z-index: 1200;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    width: 42px;

    padding:
        6px
        3px
        8px;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms ease;
}

.home-audio-control--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.home-audio-control__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
}

.home-audio-control__playback,
.home-audio-control__mute {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    color:
        rgba(255, 255, 255, 0.96);

    cursor: pointer;

    transition:
        opacity 140ms ease,
        transform 140ms ease;
}

.home-audio-control__playback:hover,
.home-audio-control__mute:hover {
    opacity: 0.78;

    transform:
        scale(1.06);
}

.home-audio-control__playback:active,
.home-audio-control__mute:active {
    transform:
        scale(0.96);
}

.home-audio-control__playback:focus-visible,
.home-audio-control__mute:focus-visible {
    outline:
        2px solid
        rgba(255, 255, 255, 0.7);

    outline-offset:
        3px;

    border-radius: 6px;
}

.home-audio-control__playback svg,
.home-audio-control__mute svg {
    display: block;

    width: 22px;
    height: 22px;

    pointer-events: none;
}

.home-audio-control--paused
.home-audio-control__playback,
.home-audio-control--muted
.home-audio-control__mute {
    opacity: 0.62;
}

.home-audio-control__slider-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 82px;

    overflow: visible;
}

.home-audio-control__slider {
    width: 72px;
    height: 18px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    cursor: pointer;

    transform:
        rotate(-90deg);
}

/* Chromium / Edge / Safari */

.home-audio-control__slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.48);
}

.home-audio-control__slider::-webkit-slider-thumb {
    width: 15px;
    height: 15px;

    margin-top: -5px;

    border: 0;
    border-radius: 50%;

    appearance: none;
    -webkit-appearance: none;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 0 7px
        rgba(255, 255, 255, 0.22);
}

/* Firefox */

.home-audio-control__slider::-moz-range-track {
    height: 5px;

    border: 0;
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.48);
}

.home-audio-control__slider::-moz-range-progress {
    height: 5px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.82);
}

.home-audio-control__slider::-moz-range-thumb {
    width: 15px;
    height: 15px;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 0 7px
        rgba(255, 255, 255, 0.22);
}

.home-audio-control__slider:focus-visible {
    outline: none;
}

@media (
    max-width: 760px
) {
    .home-audio-control {
        top: 72px;
        right: 10px;

        width: 40px;
    }

    .home-audio-control__playback,
    .home-audio-control__mute {
        width: 30px;
        height: 30px;
    }

    .home-audio-control__playback svg,
    .home-audio-control__mute svg {
        width: 20px;
        height: 20px;
    }

    .home-audio-control__slider-wrap {
        height: 74px;
    }

    .home-audio-control__slider {
        width: 64px;
    }
}

@media (
    max-width: 420px
) {
    .home-audio-control {
        top: 66px;
        right: 7px;

        width: 38px;
    }

    .home-audio-control__slider-wrap {
        height: 68px;
    }

    .home-audio-control__slider {
        width: 58px;
    }
}

@media (
    prefers-reduced-motion:
        reduce
) {
    .home-audio-control,
    .home-audio-control__playback,
    .home-audio-control__mute {
        transition: none;
    }
}