.SideTagList {
    /* Fill the sidebar slot; the toolbar stays fixed at the top while only
       the tag list scrolls (SideSpecialCharacterView-style panel). */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.SideTagList_toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px;
    flex-shrink: 0;
}

/* Apple liquid-glass treatment shared with SearchBox: frosted backdrop blur,
   the shared --glassSurfaceBackground fill, and a layered shadow + inset top
   highlight. Bootstrap's .form-control / .btn-light backgrounds and borders
   are overridden so the glass shows through. */
.SideTagList_pinnedToggle,
.SideTagList_searchInput {
    border: none !important;
    border-radius: var(--badgeBorderRadius);
    background: var(--glassSurfaceBackground) !important;

    -webkit-backdrop-filter: blur(10px) saturate(180%);
    backdrop-filter: blur(10px) saturate(180%);

    @media (prefers-color-scheme: light) {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.04),
            0 4px 12px rgba(0, 0, 0, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    @media (prefers-color-scheme: dark) {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.3),
            0 4px 12px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

.SideTagList_pinnedToggle {
    flex-shrink: 0;
}

.SideTagList_searchInput {
    flex: 1;
    min-width: 0;
    /* Fully rounded pill, matching the app's pill controls. !important is
       needed to beat the global `input[type=text] { border-radius: 0 }` rule
       in main.css, whose element+attribute selector outranks this class. */
    border-radius: 1000px !important;
    padding-left: 12px;
    padding-right: 12px;
}

/* Keep the glass surface on focus instead of Bootstrap's white fill + blue
   focus ring. */
.SideTagList_searchInput:focus {
    background: var(--glassSurfaceBackground) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    outline: none;
}

@media (prefers-color-scheme: dark) {
    .SideTagList_searchInput:focus {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.3),
            0 4px 12px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

.SideTagList_list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0 6px 6px;
}