:root {
    --app-bg: #f8fafc;
    --app-bg-2: #eef2ff;
    --surface: rgba(255, 255, 255, 0.78);
    --surface-strong: rgba(255, 255, 255, 0.9);
    --surface-soft: rgba(255, 255, 255, 0.65);
    --border: rgba(226, 232, 240, 0.92);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --accent: #0284c7;
    --accent-strong: #0369a1;
    --danger: #dc2626;
    --active-glow-color: 96, 165, 250;
    --active-inset-shadow: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] {
    --app-bg: #07101d;
    --app-bg-2: #0a1627;
    --surface: #0a1322;
    --surface-strong: #0b1728;
    --surface-soft: #0d1627;
    --border: rgba(30, 41, 59, 0.78);
    --text-main: #e5eefc;
    --text-muted: #94a3b8;
    --accent: #38bdf8;
    --accent-strong: #7dd3fc;
    --danger: #f87171;
    --active-glow-color: 45, 212, 191;
    --active-inset-shadow: rgba(255, 255, 255, 0.04);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
}

.app-shell {
    background: var(--app-bg);
    background-image:
        radial-gradient(circle at top left, color-mix(in srgb, var(--app-bg) 95%, white 5%), color-mix(in srgb, var(--app-bg) 84%, white 16%) 26%, color-mix(in srgb, var(--app-bg-2) 76%, var(--app-bg) 24%) 58%, color-mix(in srgb, var(--app-bg-2) 54%, var(--app-bg) 46%) 100%),
        linear-gradient(180deg, var(--app-bg) 0%, color-mix(in srgb, var(--app-bg) 78%, var(--app-bg-2) 22%) 100%);
    color: var(--text-main);
}

.glass-panel {
    background: color-mix(in srgb, var(--surface) 92%, white 8%);
    color: var(--text-main);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
}

html[data-theme="dark"] .glass-panel {
    background: color-mix(in srgb, var(--surface) 88%, black 12%);
}

.text-muted-themed {
    color: var(--text-muted);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 50;
    border-radius: 0.75rem;
    background: var(--accent);
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    transition: left 0.15s ease;
}

.skip-link:focus {
    left: 0.75rem;
    top: 0.75rem;
}

/* Mic status ring (chat page, used from M1) */
@keyframes mic-pulse {
    0% {
        box-shadow: inset 0 1px 0 var(--active-inset-shadow), 0 0 0 0 rgba(var(--active-glow-color), 0.35);
    }
    100% {
        box-shadow: inset 0 1px 0 var(--active-inset-shadow), 0 0 0 14px rgba(var(--active-glow-color), 0);
    }
}

.mic-live {
    animation: mic-pulse 1.4s ease-out infinite;
    border-color: rgba(var(--active-glow-color), 0.5) !important;
}