:root {
    --bg-base: #080808;
    --bg-surface: #111111;
    --bg-elevated: #171717;
    --accent: #00E5FF;
    --accent-glow: rgba(0, 229, 255, 0.15);
    --text-primary: #F0F0F0;
    --text-secondary: #A0A0A0;
    --text-muted: #555555;
    --border: rgba(255, 255, 255, 0.06);
    --border-accent: rgba(0, 229, 255, 0.12);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes thinking-orb {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

@keyframes thinking-dot {
    0%, 100% {
        opacity: 0.45;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.4);
    }
}

@keyframes status-fade {
    0%, 100% {
        opacity: 0;
        transform: translateY(3px);
    }
    14%, 82% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes message-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}