/* Chat list keeps its existing open search field. */
#chatsListView .chats-list-content > .library-search-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 238px !important;
    width: 238px !important;
    min-width: 238px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 0 12px !important;
    padding: 0 8px 0 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    background: var(--input-bg) !important;
    box-shadow: none !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
}

#chatsListView .chats-list-content > .library-search-bar .chats-list-search-toggle {
    display: inline-flex !important;
    flex: 0 0 36px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}

#chatsListView .chats-list-content > .library-search-bar .chats-list-search-toggle:hover,
#chatsListView .chats-list-content > .library-search-bar .chats-list-search-toggle:focus-visible {
    background: transparent !important;
    color: var(--text-secondary) !important;
    outline: none !important;
    box-shadow: none !important;
}

#chatsListView .chats-list-content > .library-search-bar input,
#chatsListView .chats-list-content > .library-search-bar:focus-within input {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 10px 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    opacity: 1 !important;
    outline: none !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 13px !important;
}

#chatsListView .chats-list-content > .library-search-bar:focus-within {
    border-color: var(--border-color) !important;
    background: var(--input-bg) !important;
    box-shadow: none !important;
}

@media (max-width: 560px) {
    #chatsListView .chats-list-content > .library-search-bar {
        flex-basis: min(238px, 100%) !important;
        width: min(238px, 100%) !important;
        min-width: 0 !important;
    }
}

/* Library search starts as a small icon and expands only after activation. */
#libraryView .library-content > .library-search-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    background: var(--input-bg) !important;
    box-shadow: none !important;
    transition: width 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

#libraryView .library-search-toggle {
    display: inline-flex !important;
    flex: 0 0 38px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
}

#libraryView .library-search-toggle:hover,
#libraryView .library-search-toggle:focus-visible {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    outline: none !important;
}

#libraryView .library-search-bar > #librarySearchInput {
    display: block !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    opacity: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: flex-basis 160ms ease, width 160ms ease, opacity 120ms ease, padding 160ms ease;
}

#libraryView .library-search-bar.is-open {
    flex-basis: min(238px, calc(100vw - 64px)) !important;
    width: min(238px, calc(100vw - 64px)) !important;
    min-width: 0 !important;
}

#libraryView .library-search-bar.is-open > #librarySearchInput {
    flex: 1 1 auto !important;
    width: auto !important;
    padding: 0 10px 0 4px !important;
    opacity: 1 !important;
}