/* Library document search mirrors the compact, expandable Chat search. */
#libraryView .library-content > #librarySearchBar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 9px !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    translate: none !important;
    pointer-events: auto !important;
    transition: width 170ms cubic-bezier(0.2, 0.75, 0.25, 1),
        background-color 170ms ease !important;
}

#libraryView .library-content > #librarySearchBar:hover,
#libraryView .library-content > #librarySearchBar:focus-within,
#libraryView .library-content > #librarySearchBar.is-open {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

body.light-mode #libraryView .library-content > #librarySearchBar:hover,
body.light-mode #libraryView .library-content > #librarySearchBar:focus-within,
body.light-mode #libraryView .library-content > #librarySearchBar.is-open {
    background: rgba(20, 25, 32, 0.07) !important;
}

#libraryView .library-content > #librarySearchBar .library-search-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 32px !important;
    min-width: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    cursor: text !important;
    pointer-events: auto !important;
}

#libraryView .library-content > #librarySearchBar:hover .library-search-toggle,
#libraryView .library-content > #librarySearchBar:focus-within .library-search-toggle,
#libraryView .library-content > #librarySearchBar.is-open .library-search-toggle {
    display: none !important;
}

#libraryView .library-content > #librarySearchBar .library-search-toggle:hover,
#libraryView .library-content > #librarySearchBar .library-search-toggle:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#libraryView .library-content > #librarySearchBar .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;
    pointer-events: none !important;
}

#libraryView .library-content > #librarySearchBar > #librarySearchInput {
    display: block !important;
    flex: 0 0 0 !important;
    width: 0 !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: inherit !important;
    font-size: 13px !important;
    line-height: 32px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    cursor: text !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: flex-basis 170ms ease, width 170ms ease, opacity 120ms ease, padding 170ms ease !important;
}

#libraryView .library-content > #librarySearchBar:hover > #librarySearchInput,
#libraryView .library-content > #librarySearchBar:focus-within > #librarySearchInput,
#libraryView .library-content > #librarySearchBar.is-open > #librarySearchInput {
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 0 10px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#libraryView .library-content > #librarySearchBar > #librarySearchInput:focus,
#libraryView .library-content > #librarySearchBar > #librarySearchInput:hover {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#libraryView .library-content > #librarySearchBar > #librarySearchInput::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.82 !important;
}

#libraryView .library-content > #librarySearchBar > #librarySearchInput::-webkit-search-cancel-button,
#libraryView .library-content > #librarySearchBar > #librarySearchInput::-webkit-search-decoration {
    display: none !important;
    -webkit-appearance: none !important;
}

@media (max-width: 768px) {
    #libraryView .library-content > #librarySearchBar:hover,
    #libraryView .library-content > #librarySearchBar:focus-within,
    #libraryView .library-content > #librarySearchBar.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) {
    #libraryView .library-content > #librarySearchBar,
    #libraryView .library-content > #librarySearchBar > #librarySearchInput {
        transition: none !important;
    }
}