/* Shared design tokens */
:root {
    --stage-radius-xs: 2px;
    --stage-radius-sm: 8px;
    --stage-radius-md: 14px;
    --stage-radius-lg: 22px;
    --stage-radius-xl: 32px;
    --stage-radius-full: 9999px;
    --stage-surface-white: #ffffff;
    --stage-surface-soft: #fafbfc;
    --stage-ink: #111318;
    --stage-ink-soft: #6b7280;
    --stage-border-soft: rgba(11, 19, 34, 0.08);
    --stage-border-strong: rgba(11, 19, 34, 0.14);
    --stage-shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.10);
    --stage-shadow-panel: 0 24px 80px rgba(15, 23, 42, 0.14);
    --stage-shadow-atmosphere: 0 28px 90px rgba(10, 24, 52, 0.20);
    --stage-amber-300: #ffcc3d;
    --stage-amber-400: #f5b800;
    --stage-amber-500: #d9a000;
    --stage-amber-600: #b38300;
    --stage-amber-700: #8a6600;
    --stage-steel-500: #6b7d99;
    --stage-steel-600: #536380;
    --stage-surface-dark: #0c0e12;
    --stage-surface-panel: #151820;
    --stage-surface-card: #1e2230;
    --stage-surface-overlay: #252a36;
    --stage-border-dark: rgba(255, 255, 255, 0.08);
    --stage-border-dark-strong: rgba(255, 255, 255, 0.14);
    --stage-ink-inverted: #f0f2f5;
    --stage-ink-inverted-soft: #a0a8b4;
    --stage-duration-fast: 180ms;
    --stage-duration-normal: 220ms;
    --stage-focus-ring: rgba(217, 160, 0, 0.28);
}

.stage-surface {
    background: var(--stage-surface-white);
    border: 1px solid var(--stage-border-soft);
    border-radius: var(--stage-radius-md);
    box-shadow: var(--stage-shadow-soft);
}

.stage-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 252, 0.94));
    border: 1px solid var(--stage-border-soft);
    border-radius: var(--stage-radius-lg);
    box-shadow: var(--stage-shadow-panel);
}

.stage-card {
    background: var(--stage-surface-white);
    border: 1px solid var(--stage-border-soft);
    border-radius: var(--stage-radius-md);
    box-shadow: var(--stage-shadow-soft);
    transition:
        transform var(--stage-duration-fast) ease,
        box-shadow var(--stage-duration-fast) ease,
        border-color var(--stage-duration-fast) ease;
}

.stage-card:hover {
    transform: translateY(-2px);
    border-color: rgba(217, 160, 0, 0.24);
    box-shadow: var(--stage-shadow-panel);
}

.stage-atmosphere {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--stage-radius-lg);
    box-shadow: var(--stage-shadow-atmosphere);
}

.stage-eyebrow {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
}

.stage-control {
    border-radius: var(--stage-radius-sm);
}

.stage-chip {
    border-radius: 999px;
    border: 1px solid var(--stage-border-soft);
    background: rgba(11, 19, 34, 0.04);
}

.stage-button-primary {
    border-radius: var(--stage-radius-sm);
    background: linear-gradient(145deg, var(--stage-amber-700) 0%, var(--stage-amber-600) 48%, var(--stage-amber-500) 100%);
    color: #1a1200;
    box-shadow: 0 18px 40px rgba(217, 160, 0, 0.20);
    transition:
        transform var(--stage-duration-fast) ease,
        box-shadow var(--stage-duration-fast) ease,
        filter var(--stage-duration-fast) ease;
}

.stage-button-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 22px 46px rgba(217, 160, 0, 0.24);
}

.stage-button-secondary {
    border-radius: var(--stage-radius-sm);
    border: 1px solid var(--stage-border-strong);
    background: rgba(255, 255, 255, 0.88);
    color: var(--stage-ink);
    transition:
        transform var(--stage-duration-fast) ease,
        background-color var(--stage-duration-fast) ease,
        border-color var(--stage-duration-fast) ease;
}

.stage-button-secondary:hover {
    transform: translateY(-1px);
    background: #ffffff;
    border-color: rgba(107, 125, 153, 0.28);
}

.stage-link-quiet {
    color: var(--stage-ink-soft);
    transition: color var(--stage-duration-fast) ease;
}

.stage-link-quiet:hover {
    color: var(--stage-amber-600);
}

.stage-brand-badge {
    border-radius: var(--stage-radius-sm);
    background: #09111f;
    color: #ffffff;
    box-shadow: 0 12px 32px rgba(9, 17, 31, 0.18);
}

.cekh-icon {
    display: inline-block;
    flex: none;
    color: currentColor;
    vertical-align: middle;
}

.cekh-icon path,
.cekh-icon circle,
.cekh-icon rect {
    vector-effect: non-scaling-stroke;
}

.stage-icon-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--stage-radius-md);
    border: 1px solid rgba(11, 19, 34, 0.08);
    background: rgba(11, 19, 34, 0.03);
}

.stage-icon-frame-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--stage-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
}

/* Custom scrollbar for dark panels */
.panel::-webkit-scrollbar,
#chat-messages::-webkit-scrollbar,
#terminal-output::-webkit-scrollbar {
    width: 6px;
}
.panel::-webkit-scrollbar-track,
#chat-messages::-webkit-scrollbar-track,
#terminal-output::-webkit-scrollbar-track {
    background: transparent;
}
.panel::-webkit-scrollbar-thumb,
#chat-messages::-webkit-scrollbar-thumb,
#terminal-output::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
}

/* Smooth transitions */
[x-cloak] { display: none !important; }

.stage-focusable:focus-visible {
    outline: 2px solid var(--stage-focus-ring);
    outline-offset: 3px;
}

/* Chat markdown styles */
.chat-bubble-ai pre {
    background: rgba(0,0,0,0.3);
    border-radius: 0;
    padding: 0.75rem;
    overflow-x: auto;
    margin: 0.5rem 0;
    font-size: 0.8rem;
}
.chat-bubble-ai code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}
.chat-bubble-ai p { margin: 0.25rem 0; }
.chat-bubble-ai ul, .chat-bubble-ai ol {
    padding-left: 1.25rem;
    margin: 0.25rem 0;
}

/* Animate bouncing dots */
@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}