/* AIBar Speech-to-Text Component Styles */

.ai-bar {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 22px 0px;
    position: relative;
}

.textbox {
    border-radius: 28px;
    border: 1px solid #D2D2D2;
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.textbox.expanded {
    flex-wrap: wrap;
    align-items: flex-start;
}

.textbox.expanded .button-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.text-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    padding: 0px 2px;
    margin: 12px 0px;
    font-family: "Circular Std";
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: .2px;
    min-height: 24px;
    overflow: hidden;
}

.text-input::placeholder {
    color: #999;
}

.textbox.expanded .text-input {
    flex: 1 0 100%;
    order: -1;
    padding: 0px 24px;
    margin: 20px 0px;
}

.navigation-button {
    background: none;
    border: none;
    width: 76px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
}

.navigation-icon {
    width: 29px;
    height: 12px;
    fill: #000;
}

.microphone-button {
    background: none;
    border: none;
    width: 62px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.microphone-icon {
    width: 20px;
    height: 25px;
    flex-shrink: 0;
}

.microphone-icon path {
    fill: #000;
}

.send-button {
    display: flex;
    width: 46px;
    height: 46px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 100px;
    border: 1px solid #000;
    background: #000;
    cursor: pointer;
}

.send-icon {
    width: 26px;
    height: 19px;
    flex-shrink: 0;
    fill: #FFF;
}

.send-button {
    display: flex;
    width: 46px;
    height: 46px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 100px;
    border: 1px solid #000;
    background: #000;
    cursor: pointer;
}

.send-icon {
    width: 26px;
    height: 19px;
    flex-shrink: 0;
    fill: #FFF;
}

/* Send button visibility - CSS class-based approach */
.send-button { display: none; }
.textbox.has-text:not(.hearing) .send-button { display: flex; }

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 0px 4px;
}

/* Hearing State Styles */
.textbox.hearing {
    background: #54474F;
    border: 1px solid #D2D2D2;
}

.textbox.hearing .navigation-button::before {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    border: 1px solid white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.textbox.hearing .navigation-icon {
    display: none;
}

.x-icon {
    width: 14px;
    height: 14px;
    fill: white;
}

.textbox.hearing .text-input {
    color: white;
}

.textbox.hearing .text-input::placeholder {
    color: white;
}

.textbox.hearing .microphone-icon path {
    fill: white;
}

/* Animated Hearing Text */
.hearing-text-container {
    flex: 1;
    padding: 6px 12px;
    font-family: "Circular Std";
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: .2px;
    color: white;
    display: flex;
    align-items: center;
}

.animated-dots {
    display: inline-block;
}

.animated-dots span {
    opacity: 0.3;
    animation: dotPulse 2.5s infinite;
}

.animated-dots .dot-1 {
    animation-delay: 0s;
}

.animated-dots .dot-2 {
    animation-delay: 0.83s;
}

.animated-dots .dot-3 {
    animation-delay: 1.67s;
}

@keyframes dotPulse {
    0%, 20% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    80%, 100% {
        opacity: 0.3;
    }
}

/* AI Navigation Menu Styles */
.ai-nav-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: none;
    z-index: 1000;
    margin-bottom: 10px;
}

.ai-nav-menu.show {
    display: block;
}

.ai-nav-menu-container {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 300px;
}

.ai-nav-button {
    display: flex;
    height: 96px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border: 0.22px solid #FFF;
    border-bottom: none;
    background: #54474F;
    color: #FFF;
    font-family: "Circular Std";
    font-size: 21px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ai-nav-button:last-child {
    border-bottom: 0.22px solid #FFF;
}

.ai-nav-button:hover {
    background: #635661;
}

.ai-nav-button:active {
    background: #4a3d44;
}