/* 1. Main Container - Z-index & Position */
.wcfs-wrapper {
    position: relative !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 999999 !important; 
}

/* 2. The Input Box (Modern Corner) - Force Flex Layout */
.wcfs-input-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 8px !important;
    height: 48px !important;
    box-shadow: 0!important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease;
    margin: 0 !important;
    padding: 0 !important;
}

.wcfs-input-wrap:focus-within {
    border-color: #222 !important; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 3. Common Icon Styling */
.wcfs-icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-width: 0 !important; 
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    transition: opacity 0.2s, background 0.2s, transform 0.2s, width 0.2s;
}
.wcfs-icon-box svg { width: 18px !important; height: 18px !important; fill: #9aa0a6 !important; }
.wcfs-search-icon { width: 40px !important; min-width: 40px !important; }
.wcfs-search-icon svg { fill: #70757a !important; }

/* 4. Input Field */
input.wcfs-input {
    flex-grow: 1 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 12px 0 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    color: #202124 !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: normal !important;
    min-height: auto !important;
}

/* 5. Right Icons Wrapper (Mic, Clear, Send) */
.wcfs-right-icons {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* 6. Mic Wrapper (Default State) */
.wcfs-mic-wrap {
    position: relative !important;
    width: 48px !important; 
    height: 100% !important;
    cursor: pointer;
    overflow: hidden;
    opacity: 1; 
    transition: opacity 0.2s, width 0.2s;
}

/* Mic Icon: The Circular Element - Perfect right alignment */
.wcfs-mic-icon { 
    position: absolute !important; 
    opacity: 1;
    z-index: 10;
    width: 32px !important; 
    height: 32px !important; 
    border-radius: 50% !important; 
    background: #e8f0fe !important; 
    top: 50%;
    right: 8px; /* 8px padding from the very edge */
    transform: translateY(-50%);
    transition: opacity 0.2s;
}
.wcfs-mic-icon svg { width: 16px !important; height: 16px !important; }
.wcfs-mic-icon svg path { fill: #4285F4 !important; }


/* 7. Sound Wave Animation */
.wcfs-sound-wave {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important; 
    transform: translate(0, -50%) !important;
    width: 24px !important;
    height: 16px !important;
    display: none; 
    justify-content: space-between;
    align-items: flex-end;
}
.wcfs-bar {
    width: 4px;
    height: 2px;
    background: #4285F4;
    border-radius: 2px;
    display: block;
    animation: wave-rise 1.2s infinite ease-in-out;
}
.wcfs-bar:nth-child(2) { animation-delay: 0.1s; }
.wcfs-bar:nth-child(3) { animation-delay: 0.2s; }

@keyframes wave-rise {
    0%, 100% { height: 2px; transform: translateY(0); }
    50% { height: 14px; transform: translateY(-7px); }
}

/* --- STATE LOGIC --- */

/* A. LISTENING STATE: Mic hides, Wave shows, Input Wrap border changes */
.wcfs-input-wrap.is-listening { border-color: #4285F4 !important; }
.wcfs-input-wrap.is-listening .wcfs-mic-icon { opacity: 0 !important; }
.wcfs-input-wrap.is-listening .wcfs-sound-wave { display: flex !important; }


/* B. TYPING/HAS-CONTENT STATE: Mic hides, Clear & Send shows */
.wcfs-clear-icon {
    opacity: 0;
    pointer-events: none;
    background: transparent !important;
}

/* 1. Hide Mic Container */
.wcfs-input-wrap.has-content .wcfs-mic-wrap {
    opacity: 0;
    pointer-events: none;
    width: 0 !important; 
    margin-right: -48px; /* Collapse the 48px space */
}

/* 2. Show Clear icon (takes up 48px space, replacing mic) */
/* NOTE: The Clear icon is now the rightmost element in the right-icons wrapper, 
         so it doesn't need to account for the Send icon's space. */
.wcfs-input-wrap.has-content .wcfs-clear-icon {
    opacity: 0.7 !important;
    pointer-events: auto;
    cursor: pointer;
    width: 48px !important; 
    min-width: 48px !important;
}


/* 8. The Dropdown (FIXED: Ensure it is completely hidden by default) */
.wcfs-suggestions {
    display: none !important; /* This is the key fix for default visibility */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    margin-top: 6px !important;
    border-radius: 8px !important; 
    padding: 8px 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    border: 1px solid #e8eaed !important;
    z-index: 99999999 !important; 
    overflow: hidden !important;
}
.wcfs-suggestions.is-active {
    display: block !important;
}
.wcfs-item {
    display: flex !important; align-items: center !important;
    padding: 8px 18px !important; cursor: pointer !important;
    font-size: 15px !important; color: #222 !important;
    transition: background 0.1s !important; text-decoration: none !important;
    border: none !important; background: none !important;
}
.wcfs-item:hover { background-color: #f4f4f4 !important; }
.wcfs-i-wrap { width: 24px !important; margin-right: 14px !important; opacity: 0.5 !important; }
.wcfs-text { flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-weight: 500 !important; text-align: left !important; }
.wcfs-badge { font-size: 10px !important; font-weight: bold !important; text-transform: uppercase !important; color: #666 !important; background: #f1f3f4 !important; padding: 2px 6px !important; border-radius: 4px !important; }
.wcfs-no-res { padding: 10px 18px !important; color: #70757a !important; font-style: italic !important; }