/* Scrollbar, Spinner, Keyframes, Responsive */

::-webkit-scrollbar { width: var(--space-8); height: var(--space-8); }
::-webkit-scrollbar-track { background: var(--color-bg-tertiary); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

.spinner {
    display: inline-block; width: var(--space-16); height: var(--space-16);
    border: 2px solid var(--color-text-muted); border-top-color: transparent;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes modalIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes typingDot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
    .header-left .project-name { display: none; }
    .btn-label { display: none; }
    .tab-label { display: none; }
    .main-tab { padding: var(--space-6) var(--space-10); }
}