.feedback-voice {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feedback-voice[hidden],
.feedback-screen[hidden],
.feedback-rating-only[hidden] {
    display: none !important;
}

.feedback-screen {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
}

.feedback-screen > .feedback-submit-btn {
    margin-top: 0.9rem;
}

.feedback-panel {
    width: 100%;
    padding: 28px 22px 24px;
    border-radius: 0;
    background: #fff;
    text-align: center;
}

.feedback-panel--type {
    text-align: left;
}

.feedback-mic,
.feedback-play {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.feedback-mic {
    width: 104px;
    height: 104px;
    margin: 4px auto 10px;
    padding: 0;
}

.feedback-mic svg {
    width: 104px;
    height: 104px;
}

.feedback-mic.feedback-mic--blocked {
    width: 76px;
    height: 76px;
    margin-bottom: 0.9rem;
    background: transparent;
}

.feedback-mic.feedback-mic--blocked svg {
    width: 76px;
    height: 76px;
}

.feedback-mic--round {
    width: 72px;
    height: 72px;
    margin-bottom: 0.85rem;
    border-radius: 0;
    background: #d7e7f6;
}

.feedback-mic--round svg {
    width: 28px;
    height: 28px;
}

.feedback-mic:focus-visible,
.feedback-play:focus-visible,
.feedback-stop:focus-visible {
    outline: 2px solid #561023;
    outline-offset: 3px;
}

.feedback-voice-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.feedback-play svg,
.feedback-stop svg {
    display: block;
    width: 100%;
    height: 100%;
}

.feedback-play .feedback-pause-icon,
.feedback-play.is-playing .feedback-play-icon {
    display: none;
}

.feedback-play.is-playing .feedback-pause-icon {
    display: block;
}

.feedback-verb-click {
    display: none;
}

.feedback-stop {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 10px auto 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.feedback-stop i {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: #f6f1ea;
}

.feedback-stop-label {
    margin: 0.45rem 0 0;
    color: #561023;
    font: 700 0.95rem/1.2 'DM Sans', sans-serif;
}

.feedback-timer i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 0.4rem;
    border-radius: 0;
    background: #561023;
    vertical-align: middle;
}

.feedback-voice-title {
    margin: 0 0 0.35rem;
    color: #561023;
    font: 700 1.05rem/1.3 'DM Sans', sans-serif;
}

.feedback-voice-help {
    margin: 0 0 0.35rem;
    color: #8d8080;
    font: 400 0.92rem/1.45 'DM Sans', sans-serif;
}

.feedback-voice-help--error {
    margin-bottom: 0.5rem;
    color: #561023;
}

.feedback-text-link {
    display: block;
    width: 100%;
    margin-top: 1.15rem;
    padding: 0;
    border: 0;
    background: none;
    color: #561023;
    cursor: pointer;
    font: 600 0.92rem/1.3 'DM Sans', sans-serif;
    text-align: center;
    text-decoration: none;
}

.feedback-stop-label,
.feedback-text-link--in {
    margin-top: 0.35rem;
}

.feedback-wave {
    display: flex;
    width: max-content;
    max-width: 100%;
    height: 42px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0.85rem auto 0.55rem;
}

.feedback-wave span {
    display: block;
    width: 2px;
    height: calc(var(--h, 8) * 1.4px);
    flex: none;
    border-radius: 0;
    background: #194234;
    transform-origin: center;
}

.feedback-wave span.is-coral {
    background: #e45558;
}

.feedback-voice[data-state="recording"] .feedback-wave:not(.is-still) span {
    animation: feedbackWave 0.9s ease-in-out infinite;
}

.feedback-wave span:nth-child(3n) { animation-delay: 0.08s; }
.feedback-wave span:nth-child(4n) { animation-delay: 0.16s; }
.feedback-wave span:nth-child(5n) { animation-delay: 0.22s; }

.feedback-wave.is-still span {
    animation: none;
    background: #194234;
}

/* KAN-520: with Web Audio the recording bars follow the mic level (feedback-voice.js) instead of looping */
.feedback-voice[data-state="recording"] .feedback-wave.is-metered span {
    animation: none;
    transition: height 90ms linear;
}

.feedback-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0 0 0.15rem;
    color: #8d8080;
    font: 600 0.85rem/1 'DM Mono', ui-monospace, monospace;
}

.feedback-timer svg {
    width: 7px;
    height: 7px;
    flex: none;
}

.feedback-player {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 1.35rem;
    margin: 1.15rem 0 0.85rem;
}

.feedback-player .feedback-wave {
    height: 72px;
    gap: 5px;
    margin: 0;
}

.feedback-player .feedback-wave span {
    width: 3px;
    height: calc(var(--h, 8) * 2.45px);
}

.feedback-play {
    width: 64px;
    height: 64px;
    flex: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #f6f1ea;
}

.feedback-screen[data-feedback-screen="review"] .feedback-text-link--in,
.feedback-screen[data-feedback-screen="failed"] .feedback-text-link--in {
    margin-top: 1.25rem;
}

.feedback-audio {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.feedback-voice-status {
    margin: 0.75rem 0 0;
    color: #561023;
    font: 500 0.85rem/1.4 'DM Sans', sans-serif;
}

.feedback-voice-status:empty {
    display: none;
}

.feedback-voice-status.is-error {
    color: #5c2436;
}

.feedback-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

@keyframes feedbackWave {
    0%, 100% { transform: scaleY(0.6); }
    50% { transform: scaleY(1); }
}

@media (min-width: 800px) {
    .feedback-verb-touch { display: none; }
    .feedback-verb-click { display: inline; }

    .feedback-play {
        width: 76px;
        height: 76px;
    }

    .feedback-player {
        gap: 3.25rem;
    }

    .feedback-player .feedback-wave {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feedback-voice[data-state="recording"] .feedback-wave:not(.is-still) span {
        animation: none;
    }
}