@import "styles.css";

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
    }

    html::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, 0.3);
        border-radius: 999px;
    }

    html:hover::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, 0.6);
    }
}



/* Global card polish */
::deep .bb-card {
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Content area depth */
.content-depth {
    background-image: radial-gradient(ellipse at top left, color-mix(in srgb, var(--color-sidebar-accent) 35%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--color-secondary) 25%, transparent) 0%, transparent 45%);
}

/* Empty state polish */
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto;
    border-radius: 9999px;
    background: var(--color-secondary);
}

.empty-state-icon svg {
    color: var(--color-muted-foreground);
    opacity: 0.7;
}