.dropdown-active-option {
    box-shadow: inset 0 0 0 2px #06b6d4;
}

.dark .file-icon-img {
    filter: invert(1);
}

#language-dropdown-list,
#model-dropdown-list,
#reasoning-dropdown-list {
    max-width: min(24rem, calc(100vw - 1.5rem));
}

/* Sleek minimal thin scrollbars across the entire workspace (canvas, sidebars, modals,
   textareas, dropdowns, panels). Gated because from Chrome 121 these standard properties
   take precedence over the ::-webkit-scrollbar rules below and hand the element back to the
   browser's own scrollbar - which on Windows carries stepper arrows at both ends that
   ::-webkit-scrollbar-button then can no longer hide. Firefox honours nothing but these
   two, so it is the only engine that should see them.

   None of this reaches Firefox's overlay scrollbars, which follow the OS "automatically hide
   scroll bars" setting: they occupy no layout width at all and paint over whatever is beneath
   them. scrollbar-gutter is specified as a no-op for those, so the gutter is reserved by hand
   below. */
@supports not selector(::-webkit-scrollbar) {
    /* auto, not thin: Firefox cannot inset a thumb the way background-clip does for the
       webkit path, so thin left the bar hugging the content with no gutter at all. */
    *, *::before, *::after {
        scrollbar-width: auto;
        scrollbar-color: #d4d4d4 transparent;
    }

    html.dark *, html.dark *::before, html.dark *::after,
    .dark *, .dark *::before, .dark *::after {
        scrollbar-color: #525252 transparent;
    }
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* 10px track carrying a 6px thumb: the 2px transparent border plus background-clip keeps the
   thumb off the track edges. Every other thumb rule sets background-color, not the background
   shorthand - the shorthand resets background-clip and the padding would vanish on hover. */
::-webkit-scrollbar-thumb {
    background-color: #d4d4d4;
    border-radius: 100vh;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a3a3a3;
}

html.dark ::-webkit-scrollbar-thumb,
.dark ::-webkit-scrollbar-thumb {
    background-color: #525252;
}

html.dark ::-webkit-scrollbar-thumb:hover,
.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #737373;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox's overlay scrollbar takes no width (measured: clientWidth === offsetWidth), so it
   lands on top of whatever sits at the panel's right edge. Reserved by hand, since
   scrollbar-gutter cannot. */
@supports not selector(::-webkit-scrollbar) {
    #byok-keys-list {
        padding-right: 1rem;
    }
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}