/* Maintained Custom Animations for AgentErica - Gravity */

/* Fade In (used for messages) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* Slide Up (used for login prompt modal) */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out forwards;
}


/* Pulse for active mic (Breathing Glow) */
@keyframes micBreath {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.2);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.1);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.2);
        transform: scale(1);
    }
}

.mic-active {
    animation: micBreath 2s infinite ease-in-out !important;
    background: #ef4444 !important;
    /* Red-500 for stop state (since clicking it stops it) */
    border-color: #ef4444 !important;
}

/* Speaker icon animation (driven by remote audio level) */
#callSpeakerBtn {
    --speaker-scale: 1;
    --speaker-glow: 0px;
}

#callSpeakerBtn .speaker-anim {
    transform: scale(var(--speaker-scale));
    transform-origin: center;
    transition: transform 80ms linear;
}

#callSpeakerBtn.speaker-active {
    box-shadow: 0 0 var(--speaker-glow) rgba(13, 148, 136, 0.45);
}

/* Microphone icon animation (driven by user's voice level) */
#callMicMuteBtn,
#micToggleBtn {
    --mic-scale: 1;
    --mic-glow: 0px;
}

#callMicMuteBtn svg,
#micToggleBtn svg {
    transform: scale(var(--mic-scale));
    transform-origin: center;
    transition: transform 50ms linear;
}

#callMicMuteBtn.mic-speaking,
#micToggleBtn.mic-speaking {
    box-shadow: 0 0 var(--mic-glow) rgba(239, 68, 68, 0.5);
}

/* Coach list preview speaker animation */
.audio-preview-btn {
    --speaker-scale: 1;
    --speaker-glow: 0px;
    --preview-opacity: 1;
    --preview-glow: 0px;
}

.audio-preview-btn .speaker-anim {
    opacity: var(--preview-opacity);
    filter: drop-shadow(0 0 var(--preview-glow) rgba(13, 148, 136, 0.45));
    transition: opacity 80ms linear, filter 80ms linear;
    shape-rendering: geometricPrecision;
    vector-effect: non-scaling-stroke;
    color: var(--preview-color, #9ca3af);
}

.audio-preview-btn.speaker-active {
    filter: none;
}

/* Slight zoom to hide black matte in circular coach videos */
.coach-media {
    transform: scale(1.04);
    transform-origin: center;
}

/* Call mode avatar video - scale to hide black border */
#callModeAvatarVideo,
#callModeSpeakingVideo {
    transform: scale(1.04);
    transform-origin: center;
}

/* Typing Indicator Dots */
.typing-dot {
    width: 6px;
    height: 6px;
    background-color: #9ca3af;
    /* Gray-400 */
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typingBounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

.typing-dot {
    width: 8px;
    height: 8px;
    background-color: #6b7280;
    /* gray-500 */
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

/* Scrollbar hiding for clean UI */
#chatContainer::-webkit-scrollbar {
    width: 6px;
}

#chatContainer::-webkit-scrollbar-track {
    background: transparent;
    opacity: .5;
}

.text-input-container:focus-within .send-text-button {
    opacity: 1;
}

.send-text-button:hover {
    background: rgb(121, 203, 212, 0.1);
}

#chatContainer::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

/* Ensure focus outline is clean */
textarea:focus {
    outline: none;
}

/* Force long URLs / unbreakable strings to wrap inside chat bubbles */
#chatContainer p,
#chatContainer a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* When the in-call control panel is open, give the chat extra bottom space so the last message isn't hidden */
#chatContainer.call-panel-open {
    padding-bottom: 13rem !important;
}

/* Coach picker scrollbar: keep it visually inside rounded corners */
#voiceMenuScroll {
    /* Inset the entire scroll container so native scrollbar arrows/thumb never touch rounded edges */
    margin: 0 0 12px;
    /* Outer modal max-height is 85vh; subtract vertical inset */
    max-height: calc(100vh - 12px) !important;
    /* Helps avoid layout shift when scrollbar appears/disappears (supported in modern browsers) */
    scrollbar-gutter: stable;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 118, 110, 0.45) transparent;
}

#voiceMenuScroll::-webkit-scrollbar {
    width: 10px;
}

/* Hide native scrollbar buttons (top/bottom arrows) where supported */
#voiceMenuScroll::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

/* Create top/bottom breathing room so the thumb doesn't look clipped by rounded corners */
#voiceMenuScroll::-webkit-scrollbar-track {
    background: transparent;
    /* `margin` here is not reliably supported; use transparent borders to inset the track */
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    background-clip: content-box;
}

#voiceMenuScroll::-webkit-scrollbar-thumb {
    background-color: rgba(15, 118, 110, 0.45);
    /* teal-ish */
    border-radius: 999px;
    /* Makes the thumb look slimmer and inset */
    border: 3px solid transparent;
    background-clip: content-box;
}

#voiceMenuScroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(15, 118, 110, 0.6);
}

.coachListItem {
    cursor: pointer;
}

/* Ensure no pulse on the main mic button even if JS adds the class */
#micToggleBtn.speaking-pulse {
    animation: none !important;
    box-shadow: none !important;
}



#callSpeakerBtn[aria-label="Mute speaker"]:hover {
    background-color: #EEC42B;
}

#callSpeakerBtn[aria-label="Unmute speaker"] {
    background-color: rgb(121, 201, 210, 1);
    color: #ffffff
}

#callSpeakerBtn[aria-label="Unmute speaker"]:hover {
    background-color: rgb(121, 201, 210, 0.9);
}

#callModeAvatarImg {
    border-radius: 50%;
}

.coach-speaking {
    animation: pulse2-animation 1.5s infinite;
}

@keyframes pulse2-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(121, 203, 212, 0.8);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(121, 203, 212, 0.2);
    }

    100% {
        box-shadow: 0 0 0 30px rgba(121, 203, 212, 0);
    }
}

/*.coach-speaking::after,
.coach-speaking::before {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    width: 76px;
    height: 76px;
    background: rgba(121, 201, 210, 1);
    border-radius: 50%;
    z-index: -1;
    animation: grow 1s ease-in-out infinite;
}

.coach-speaking::after {
    background: rgba(121, 201, 210, 0.4);
}

.coach-speaking::before {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    width: 76px;
    height: 76px;
    background: rgb(121, 201, 210);
    border-radius: 50%;
    z-index: -1;
    animation: grow 1s ease-in-out infinite;
}

.coach-speaking::before {
    background: rgba(121, 201, 210, .6);
    animation-delay: -0.5s;
}
@keyframes grow {
    0% {
        transform: scale(1, 1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5, 1.5);
        opacity: 0;
    }
}*/

#voiceBars {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 9px;
}

.bar {
    background: #a7a7a7;
    bottom: 1px;
    height: 2px;
    width: 2px;
    margin: 0px 1px;
    border-radius: 5px;
    animation: sound 0ms -600ms linear infinite alternate;
}

@keyframes sound {
    0% {
        opacity: .35;
        height: 1px;
    }

    100% {
        opacity: 1;
        height: 9px;
    }
}

.bar:nth-child(1) {
    left: 1px;
    animation-duration: 474ms;
}

.bar:nth-child(2) {
    left: 15px;
    animation-duration: 433ms;
}

.bar:nth-child(3) {
    left: 29px;
    animation-duration: 407ms;
}

.bar:nth-child(4) {
    left: 43px;
    animation-duration: 458ms;
}

.bar:nth-child(5) {
    left: 57px;
    animation-duration: 400ms;
}

.bar:nth-child(6) {
    left: 71px;
    animation-duration: 427ms;
}

.bar:nth-child(7) {
    left: 85px;
    animation-duration: 441ms;
}

.bar:nth-child(8) {
    left: 99px;
    animation-duration: 419ms;
}

.bar:nth-child(9) {
    left: 113px;
    animation-duration: 487ms;
}

.bar:nth-child(10) {
    left: 127px;
    animation-duration: 442ms;
}


.active-coach .connect-action-btn {
    background-color: rgba(242, 242, 242, 0.5);
    color: #374151 !important;
}

.active-coach.directiveColor,
.active-coach.directiveColor .connect-action-btn {
    border-color: #55be8d;
}

.active-coach.exploratoryColor,
.active-coach.exploratoryColor .connect-action-btn {
    border-color: #eec42b;
}

.active-coach.supportiveColor,
.active-coach.supportiveColor .connect-action-btn {
    border-color: #79c9d2;
}

.active-coach.guidanceColor,
.active-coach.guidanceColor .connect-action-btn {
    border-color: #64c4ae;
}

.active-coach.discoveryColor,
.active-coach.discoveryColor .connect-action-btn {
    border-color: #66c2cc;
}

.active-coach.empoweringColor,
.active-coach.empoweringColor .connect-action-btn {
    border-color: #46b983;
}

.active-coach.strengthsColor,
.active-coach.strengthsColor .connect-action-btn {
    border-color: #6bbd9c;
}

.active-coach.nurturingColor,
.active-coach.nurturingColor .connect-action-btn {
    border-color: #81bb9e;
}

.active-coach.observationalColor .connect-action-btn {
    border-color: #59b6c0;
}

/* Disabled Mic State */
.mic-disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* Speaking Pulse for Mic Button (Bot Speaking) */
@keyframes speakingPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.4);
        /* Teal-500 represented in rgba */
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(20, 184, 166, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(20, 184, 166, 0);
        transform: scale(1);
    }
}

.speaking-pulse {
    animation: speakingPulse 1.5s infinite ease-in-out !important;
    border-color: #14b8a6 !important;
    /* Teal-500 border */
}