/* ============================================================
   Base — Reset, body, typography, scrollbar, focus styles
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    height: 100dvh;
    height: var(--visual-viewport-height, 100dvh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Scrollbar ─────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

body.no-scrollbars ::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body.no-scrollbars {
    scrollbar-width: none;
}

/* ── Utility classes ──────────────────────────────────────── */

.hidden { display: none; }

.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.loading-indicator::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: loading-spin 0.6s linear infinite;
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

/* Placeholders at AA (#4851): the browser's own #757575 is 4.1-4.2:1 on the panels and 3.8-3.9:1 on the board's post box, in either theme; the muted text token is 4.5:1 or more on every panel in both. */
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }

/* ── Focus-visible outlines for accessibility ──────────────── */

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Consistent transition on interactive elements ─────────── */

button,
.btn,
.btn-nav,
.agentic-tab,
.sidebar-subtab {
    transition: all 0.15s ease;
}

/* Motion is optional for workspace controls and status indicators. */
@media (prefers-reduced-motion: reduce) {
    button, .btn, .btn-nav, .agentic-tab, .sidebar-subtab,
    .wf-status-dot.running, .loading-indicator::before {
        animation: none !important;
        transition: none !important;
    }
}