/* Chat search: stable second row in the fixed chat header. */
#chatView #chatHeader.chat-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    flex: 0 0 102px !important;
    height: 102px !important;
    min-height: 102px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    isolation: isolate;
}

#chatView #chatHeader .header-left-group {
    position: relative !important;
    z-index: 2 !important;
}

/* Keep the control visible in both a new chat and an existing conversation. */
#chatView #chatHeader #chatSearchWrapper,
#chatView .chat-main-area.is-empty #chatHeader #chatSearchWrapper {
    display: flex !important;
    position: absolute !important;
    left: 102px !important;
    right: auto !important;
    top: 62px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    translate: none !important;
    border: 0 !important;
    border-radius: 9px !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    transition: width 170ms cubic-bezier(0.2, 0.75, 0.25, 1),
        background-color 170ms ease !important;
}

#chatView #chatHeader #chatSearchWrapper.collapsed:hover,
#chatView #chatHeader #chatSearchWrapper.collapsed:focus-within,
#chatView #chatHeader #chatSearchWrapper.is-open {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

body.light-mode #chatView #chatHeader #chatSearchWrapper.collapsed:hover,
body.light-mode #chatView #chatHeader #chatSearchWrapper.collapsed:focus-within,
body.light-mode #chatView #chatHeader #chatSearchWrapper.is-open {
    background: rgba(20, 25, 32, 0.07) !important;
}

#chatView #chatHeader #chatSearchWrapper::before,
#chatView #chatHeader #chatSearchWrapper::after,
#chatView #chatHeader #chatSearchWrapper .search-trigger::before,
#chatView #chatHeader #chatSearchWrapper .search-trigger::after {
    content: none !important;
    display: none !important;
}

#chatView #chatHeader #chatSearchWrapper .search-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 32px !important;
    gap: 0 !important;
    padding: 0 !important;
    color: var(--text-secondary) !important;
    cursor: text !important;
    pointer-events: auto !important;
}

#chatView #chatHeader #chatSearchWrapper.collapsed:hover .search-trigger,
#chatView #chatHeader #chatSearchWrapper.collapsed:focus-within .search-trigger,
#chatView #chatHeader #chatSearchWrapper.is-open .search-trigger {
    display: none !important;
}

#chatView #chatHeader #chatSearchWrapper .search-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    flex: 0 0 16px !important;
}

#chatView #chatHeader #chatSearchWrapper .search-trigger-text {
    display: none !important;
}

#chatView #chatHeader #chatSearchWrapper .search-input-container {
    display: none !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    height: 32px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 8px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#chatView #chatHeader #chatSearchWrapper.collapsed:hover .search-input-container,
#chatView #chatHeader #chatSearchWrapper.collapsed:focus-within .search-input-container,
#chatView #chatHeader #chatSearchWrapper.is-open .search-input-container {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#chatView #chatHeader #chatSearchWrapper .header-search-input {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    line-height: 32px !important;
    cursor: text !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#chatView #chatHeader #chatSearchWrapper .header-search-input::-webkit-search-cancel-button,
#chatView #chatHeader #chatSearchWrapper .header-search-input::-webkit-search-decoration {
    display: none !important;
    -webkit-appearance: none !important;
}

#chatView #chatHeader #chatSearchWrapper .header-search-input:focus,
#chatView #chatHeader #chatSearchWrapper .header-search-input:hover,
#chatView #chatHeader #chatSearchWrapper:focus,
#chatView #chatHeader #chatSearchWrapper:focus-within {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#chatView #chatHeader #chatSearchWrapper .header-search-input::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.82 !important;
}

#chatView #chatHeader #chatSearchWrapper .search-result-count,
#chatView #chatHeader #chatSearchWrapper .close-search-btn {
    display: none !important;
}

/* The empty-chat header uses the same geometry and never adds a separator. */
#chatView .chat-main-area.is-empty #chatHeader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 102px !important;
    min-height: 102px !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    #chatView #chatHeader.chat-header,
    #chatView .chat-main-area.is-empty #chatHeader {
        flex-basis: 94px !important;
        height: 94px !important;
        min-height: 94px !important;
    }

    #chatView #chatHeader #chatSearchWrapper,
    #chatView .chat-main-area.is-empty #chatHeader #chatSearchWrapper {
        left: 20px !important;
        top: 56px !important;
    }

    #chatView #chatHeader #chatSearchWrapper.collapsed:hover,
    #chatView #chatHeader #chatSearchWrapper.collapsed:focus-within,
    #chatView #chatHeader #chatSearchWrapper.is-open {
        width: min(224px, calc(100vw - 40px)) !important;
        min-width: min(224px, calc(100vw - 40px)) !important;
        max-width: min(224px, calc(100vw - 40px)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #chatView #chatHeader #chatSearchWrapper {
        transition: none !important;
    }
}

/* Keep the expanded search as one surface: global input rules must not create
   a lighter pill inside the header wrapper. */
#chatView #chatHeader #chatSearchWrapper.collapsed:hover,
#chatView #chatHeader #chatSearchWrapper.collapsed:focus-within,
#chatView #chatHeader #chatSearchWrapper.is-open {
    background: var(--input-bg) !important;
    background-image: none !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

#chatView #chatHeader #chatSearchWrapper .search-input-container,
#chatView #chatHeader #chatSearchWrapper .header-search-input,
#chatView #chatHeader #chatSearchWrapper .header-search-input:hover,
#chatView #chatHeader #chatSearchWrapper .header-search-input:focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

/* Final focus lock: opening the field must never collapse its content. */
#chatView #chatHeader #chatSearchWrapper.collapsed:hover,
#chatView #chatHeader #chatSearchWrapper.collapsed:focus-within,
#chatView #chatHeader #chatSearchWrapper.is-open {
    flex: 0 0 238px !important;
    width: 238px !important;
    min-width: 238px !important;
    max-width: 238px !important;
    overflow: hidden !important;
}

#chatView #chatHeader #chatSearchWrapper.collapsed:hover .search-input-container,
#chatView #chatHeader #chatSearchWrapper.collapsed:focus-within .search-input-container,
#chatView #chatHeader #chatSearchWrapper.is-open .search-input-container {
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#chatView #chatHeader #chatSearchWrapper.collapsed:hover .header-search-input,
#chatView #chatHeader #chatSearchWrapper.collapsed:focus-within .header-search-input,
#chatView #chatHeader #chatSearchWrapper.is-open .header-search-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}