/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* File row hover */
.file-row {
    transition: background-color 0.1s;
}
.file-row:hover {
    background-color: rgba(59, 130, 246, 0.08);
}

/* Grid item hover */
.grid-item {
    transition: all 0.15s;
}
.grid-item:hover {
    background-color: rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

/* Breadcrumb separator */
.breadcrumb-sep {
    color: #4b5563;
    user-select: none;
}

/* Preview modal transitions */
#preview-modal {
    transition: opacity 0.2s;
}

/* Code preview */
.preview-code pre {
    margin: 0;
    border-radius: 0.5rem;
    max-height: 70vh;
    overflow: auto;
}

/* Image preview */
.preview-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 0.25rem;
}

/* Video/audio preview */
.preview-video, .preview-audio {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 0.25rem;
}

/* PDF preview */
.preview-pdf {
    width: 100%;
    height: 70vh;
    border: none;
    border-radius: 0.25rem;
}

/* Thumbnail in grid */
.grid-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.375rem;
}

/* Mobile breadcrumb scroll */
#breadcrumb-bar {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#breadcrumb-bar::-webkit-scrollbar {
    display: none;
}