#sidebar-contact-slot {
    flex: 0 0 350px; /* Force it to stay exactly this width */
    max-height: 100vh;
}

.btn{
    font-size: 1.45rem !important;
}
.recording-dot {
    width: 10px;
    height: 10px;
    background-color: #ff0000;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

#visualizer {
    filter: drop-shadow(0 0 2px rgba(211, 47, 47, 0.2));
}
/* Review Pill Design */
.review-pill-modern {
    background: var(--color-white);
    border: 2px solid var(--color-border-2);
    border-radius: 50px;
    box-shadow: var(--shadow-small);
    height: 50px;
}

/* Frequency Waveform Styling */
.frequency-waveform {
    position: relative;
    height: 30px;
    overflow: hidden;
}

.f-bar {
    width: 3px;
    background: #e0e0e0; /* Neutral gray base */
    border-radius: 50px;
    transition: background 0.3s;
}

/* Gold Progress Overlay for Waveform */
.wave-progress-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--color-secondary); /* Gold color */
    mix-blend-mode: source-atop; /* Colors the bars as it passes */
    pointer-events: none;
    opacity: 0.8;
}

/* Recording Live Visualizer */
.bar-live {
    width: 3px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50px;
    animation: bar-grow 0.8s infinite ease-in-out;
}

.bar-live:nth-child(even) { animation-delay: 0.2s; }
.bar-live:nth-child(3n) { animation-delay: 0.4s; }

@keyframes bar-grow {
    0%, 100% { height: 8px; }
    50% { height: 20px; }
}

/* Red Play Button */
.btn-play-gold {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-primary); /* Deep Red */
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.btn-play-gold:hover { transform: scale(1.1); }

/* Blinking Recording Dot */
.recording-dot {
    width: 10px;
    height: 10px;
    background: #ff0000;
    border-radius: 50%;
    animation: blink-red 1s infinite;
}

@keyframes blink-red {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}