/* Agent OS — minimal custom CSS. Most styling comes from Tailwind via CDN. */

/* Smooth theme crossfade. Only on colour-bearing properties so we don't
   animate everything (would feel sluggish on theme change). */
html {
    transition: background-color 0.15s ease, color 0.15s ease;
}
body, header, nav, aside, main, footer {
    transition-property: background-color, border-color, color;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
    html, body, header, nav, aside, main, footer,
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

#messages {
    scroll-behavior: smooth;
}

#messages > div {
    animation: fade-in 0.15s ease-out;
}

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

/* Hide Alpine x-cloak elements until Alpine has initialised */
[x-cloak] { display: none !important; }

/* Streaming cursor blink */
.animate-pulse {
    animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Dark-mode scrollbars so the white default doesn't blow out the theme.
   Applies whenever [data-theme="dark"] is set, regardless of system pref. */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgb(15 23 42);  /* slate-900 */
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgb(51 65 85);  /* slate-700 */
    border-radius: 6px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgb(71 85 105);  /* slate-600 */
}

/* Indigo selection in both themes for visual consistency. */
::selection {
    background: rgba(99, 102, 241, 0.35);  /* indigo-500 at 35% */
}