/* ── CxAI Studio — Base / Reset / Variables ── */

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

html,
body {
    height: 100%;
}

:root {
    /* ── Core palette ── */
    --bg: #0f1117;
    --bg-raised: #151821;
    --surface: #1a1d28;
    --surface2: #222636;
    --surface3: #2b3044;
    --border: #2e3348;
    --border-dim: #252a3a;

    /* ── Accent spectrum ── */
    --accent: #6c8cff;
    --accent-rgb: 108, 140, 255;
    --accent-dim: rgba(108, 140, 255, .08);
    --accent-mid: rgba(108, 140, 255, .18);
    --accent-glow: rgba(108, 140, 255, .25);
    --accent2: #3ddfa0;
    --accent2-rgb: 61, 223, 160;
    --warn: #ffa656;
    --warn-rgb: 255, 166, 86;
    --danger: #ff5f5f;
    --danger-rgb: 255, 95, 95;
    --purple: #b18cff;
    --purple-rgb: 177, 140, 255;

    /* ── Text hierarchy ── */
    --text: #e8eaf0;
    --text-dim: #a3a8be;
    --muted: #636a85;

    /* ── Sizing ── */
    --nav-w: 220px;
    --settings-w: 320px;
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    /* ── Motion ── */
    --trans: .18s cubic-bezier(.4, 0, .2, 1);
    --trans-slow: .3s cubic-bezier(.4, 0, .2, 1);

    /* ── Depth ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow: 0 4px 24px rgba(0, 0, 0, .50);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, .60);
    --shadow-glow: 0 0 30px rgba(108, 140, 255, .12);

    /* ── Glass ── */
    --glass-bg: rgba(26, 29, 40, .65);
    --glass-border: rgba(255, 255, 255, .06);
    --glass-blur: 16px;

    /* ── Fonts ── */
    --mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Cascadia Code', monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    display: flex;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Subtle background grain ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(108, 140, 255, .06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(61, 223, 160, .03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

body>* {
    position: relative;
    z-index: 1;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

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

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

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

/* ── Selection ── */
::selection {
    background: rgba(108, 140, 255, .3);
    color: #fff;
}

/* ── JSON syntax colours ── */
.json-key {
    color: var(--accent);
}

.json-str {
    color: var(--accent2);
}

.json-num {
    color: var(--warn);
}

.json-bool {
    color: var(--purple);
}

.json-null {
    color: var(--muted);
}

/* ── Animations ── */
@keyframes bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-5px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(var(--accent-rgb), .15);
    }

    50% {
        box-shadow: 0 0 20px rgba(var(--accent-rgb), .30);
    }
}

@keyframes dotPulse {

    0%,
    100% {
        opacity: .4;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Focus ring ── */
:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), .5);
    outline-offset: 2px;
}

/* ── Skeleton loading ── */
.skeleton {
    background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
    background-size: 400% 100%;
    animation: shimmer 1.8s infinite;
    border-radius: var(--radius-sm);
}

/* ── Glass panel ── */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}