:root {
    /* Crisp dark palette — kept in sync with the tailwind.config override in base.html. */
    --bg-primary: #0F131A;   /* app background — lifted off near-black to soften the contrast with panels */
    --bg-surface: #12161F;   /* header / panels */
    --bg-card: #1A202B;      /* cards / inputs */
    --border-color: #2A313D;
    --text-primary: #E7EBF2;
    --text-secondary: #7E8AA0;
    --accent-blue: #5D74B4;
    --accent-green: #459579;
    --accent-red: #BB5D59;
    --accent-amber: #BC8A44;
    --accent-purple: #7d6bbf;
}

html, body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Engage Inter's optical-size axis so small UI text and larger headings are each tuned. */
    font-optical-sizing: auto;
}

/* Align digits in dense data (tables, run IDs, DAG labels) and disambiguate glyphs. */
table, .font-mono, [class*="font-mono"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'calt' 0;
}
.font-mono, [class*="font-mono"] { font-variant-ligatures: none; }

::selection { background: rgba(93, 116, 180, 0.32); }

/* Consistent focus ring for interactive elements */
a:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible {
    outline: 2px solid rgba(93, 116, 180, 0.60);
    outline-offset: 1px;
    border-radius: 0.375rem;
}

/* Disable scroll anchoring so user can scroll up freely */
#chat-messages { overflow-anchor: none; }

/* Custom scrollbar for chat/sidebar/panel */
.custom-scroll { scrollbar-width: thin; scrollbar-color: #2A313D transparent; }
.custom-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: #2A313D; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #3E4756; background-clip: content-box; }

/* Right context panel — subtle left edge + smooth collapse */
#context-panel {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.02);
}

/* Empty state inside the execution-plan section */
.dag-empty {
    color: #5B6676;
}
.dag-empty svg { color: #3E4756; }

/* Fade-in for newly arriving chat bubbles */
@keyframes chat-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
#chat-messages-inner > div { animation: chat-msg-in 0.28s ease-out; }

/* Markdown rendered in chat messages */
.chat-markdown p { margin: 0.25rem 0; }
.chat-markdown p:first-child { margin-top: 0; }
.chat-markdown p:last-child { margin-bottom: 0; }
.chat-markdown strong { font-weight: 600; }
.chat-markdown em { font-style: italic; }
.chat-markdown code { background: rgba(0,0,0,0.3); padding: 0.1em 0.35em; border-radius: 0.25rem; font-size: 0.8em; font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; }
.chat-markdown pre { background: rgba(0,0,0,0.3); padding: 0.5rem 0.75rem; border-radius: 0.375rem; overflow-x: auto; margin: 0.5rem 0; }
.chat-markdown pre code { background: none; padding: 0; font-size: 0.8em; }
.chat-markdown ul, .chat-markdown ol { margin: 0.25rem 0; padding-left: 1.25rem; }
.chat-markdown ul { list-style: disc; }
.chat-markdown ol { list-style: decimal; }
.chat-markdown li { margin: 0.15rem 0; }
.chat-markdown h1, .chat-markdown h2, .chat-markdown h3 { font-weight: 600; margin: 0.5rem 0 0.25rem; }
.chat-markdown h1 { font-size: 1.1em; }
.chat-markdown h2 { font-size: 1.05em; }
.chat-markdown h3 { font-size: 1em; }
.chat-markdown table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.85em; }
.chat-markdown th, .chat-markdown td { border: 1px solid rgba(148,163,184,0.2); padding: 0.35rem 0.5rem; text-align: left; }
.chat-markdown th { background: rgba(0,0,0,0.2); font-weight: 600; }
.chat-markdown hr { border: none; border-top: 1px solid rgba(148,163,184,0.2); margin: 0.5rem 0; }
.chat-markdown a { color: #93A6D6; text-decoration: underline; text-underline-offset: 2px; }
.chat-markdown blockquote { border-left: 3px solid rgba(148,163,184,0.3); padding-left: 0.75rem; margin: 0.25rem 0; color: #94a3b8; }

/* Opt-in syntax highlighted code blocks (e.g. protocol draft proposals) */
.chat-code-block {
    margin: 0;
    tab-size: 4;
    background: rgba(15, 23, 42, 0.7) !important;
}
.chat-code-block > code.chat-syntax-highlight {
    display: block;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre;
    background: transparent !important;
    text-shadow: none;
    /* Contextual ligatures are pleasant in code, off everywhere else. */
    font-variant-ligatures: contextual;
}

/* Bouncing dots animation for executing indicator */
@keyframes bounce-dot {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}
.bounce-dot-1 { animation: bounce-dot 1.4s infinite ease-in-out both; animation-delay: -0.32s; }
.bounce-dot-2 { animation: bounce-dot 1.4s infinite ease-in-out both; animation-delay: -0.16s; }
.bounce-dot-3 { animation: bounce-dot 1.4s infinite ease-in-out both; }

/* DAG node running pulse animation */
@keyframes dag-pulse {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 transparent); }
    50% { opacity: 0.85; filter: drop-shadow(0 0 7px rgba(93, 116, 180, 0.45)); }
}
.dag-node-running {
    animation: dag-pulse 2s infinite ease-in-out;
}