.cmdk-overlay {
    background-color: rgba(0, 0, 0, .4);
    backdrop-filter: blur(4px);
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    animation: overlayHide .2s ease forwards
}

.cmdk-overlay.open {
    animation: overlayShow .2s ease forwards;
    pointer-events: all
}

.cmdk-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%) scale(.96);
    width: min(90vw, 640px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--bs-white);
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 16px 70px -12px rgb(0 0 0/50%), 0 0 16px -4px rgb(0 0 0/30%);
    opacity: 0;
    pointer-events: none;
    z-index: 1001;
    animation: contentHide .2s ease forwards
}

.cmdk-dialog.open {
    animation: contentShow .2s cubic-bezier(.16, 1, .3, 1.1) forwards;
    pointer-events: all
}

.cmdk-input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    outline: none;
    border-radius: 8px;
    background: transparent;
    color: var(--bs-gray-900);
    border: 1px solid transparent;
    transition: all .2s ease;
    flex-shrink: 0
}

.cmdk-input:focus {
    background: var(--bs-gray-50);
    border-color: var(--bs-gray-200)
}

.cmdk-list {
    margin: 0 -8px;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    flex: 1;
    transition: .1s ease;
    transition-property: height
}

.cmdk-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin: 2px 0;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: all .15s ease;
    color: var(--bs-gray-700);
    min-height: 44px;
    position: relative;
    will-change: background, color
}

.cmdk-item:hover {
    background: var(--bs-gray-100);
    color: var(--bs-gray-900)
}

.cmdk-item:active {
    background: var(--bs-gray-200);
    transform: scale(.98)
}

.cmdk-item.selected {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary)
}

.cmdk-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border-radius: 8px;
    background: var(--bs-gray-100);
    color: var(--bs-gray-600);
    flex-shrink: 0;
    transition: all .15s ease
}

.cmdk-item.selected .cmdk-item-icon {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary)
}

.cmdk-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden
}

.cmdk-item-title {
    font-size: 14px;
    font-weight: 500
}

.cmdk-item-subtitle,
.cmdk-item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.cmdk-item-subtitle {
    font-size: 12px;
    color: var(--bs-gray-600)
}

@media (max-width:640px) {
    .cmdk-dialog {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: translateY(100%);
        border-radius: 12px 12px 0 0;
        animation: sheetHide .25s ease forwards
    }
    .cmdk-dialog.open {
        animation: sheetShow .25s cubic-bezier(.16, 1, .3, 1.1) forwards
    }
    .cmdk-list {
        max-height: calc(80vh - 90px);
        padding: 8px 12px
    }
}

@keyframes overlayShow {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes overlayHide {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes contentShow {
    0% {
        opacity: 0;
        transform: translate(-50%, -48%) scale(.96)
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }
}

@keyframes contentHide {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }
    to {
        opacity: 0;
        transform: translate(-50%, -48%) scale(.96)
    }
}

@keyframes sheetShow {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes sheetHide {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(100%)
    }
}

.cmdk-list::-webkit-scrollbar {
    width: 6px;
    background: transparent
}

.cmdk-list::-webkit-scrollbar-thumb {
    background: var(--bs-gray-300);
    border-radius: 999px
}

.cmdk-list::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-400)
}

@media (hover:none) {
    .cmdk-list::-webkit-scrollbar {
        width: 4px
    }
}

@media (prefers-reduced-motion:reduce) {
    .cmdk-dialog,
    .cmdk-item,
    .cmdk-overlay {
        animation: none;
        transition: none
    }
}

.cmdk-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    color: var(--bs-gray-500);
    font-size: 14px;
    white-space: pre-wrap;
    text-align: center;
    padding: 0 24px
}