/* style.css */
        body {
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        *, *::before, *::after {
            transition-property: background-color, border-color, color, fill, stroke;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 300ms;
        }
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
        }
        .video-container iframe,
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .tag:hover {
            background-color: #f0f0f0;
        }
        .comment-input {
            transition: all 0.3s ease;
        }
        .comment-input:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 1px #2563eb;
        }
        .suggestion-item:hover {
            background-color: #f8fafc;
        }
.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sidebar-enter {
    transform: translateX(-100%);
}
.sidebar-enter-active {
    transform: translateX(0);
    transition: transform 300ms ease-in-out;
}
.sidebar-exit {
    transform: translateX(0);
}
.sidebar-exit-active {
    transform: translateX(-100%);
    transition: transform 300ms ease-in-out;
}