/* Transmute Playground – style.css v3 */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --primary:       #2563eb;
    --primary-hover: #1d4ed8;
    --error:         #dc2626;
    --success:       #16a34a;
    --border:        #e2e8f0;
    --bg:            #f8fafc;
    --surface:       #ffffff;
    --surface2:      #f1f5f9;
    --text:          #1e293b;
    --text-muted:    #64748b;
    --dark-bg:       #0f172a;
    --dark-bg2:      #1e293b;
    --dark-border:   #334155;
    --dark-text:     #e2e8f0;
    --mono:          'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Courier New', monospace;
    --header-h:      48px;
    --log-h:         28px;
    --left-w:        280px;
    --right-w:       360px;
}

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

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    overflow: hidden;
}

/* ── App shell: full-viewport column ────────────────────────── */
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────── */
.header {
    height: var(--header-h);
    background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 60%, #1d4ed8 100%);
    color: white;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 10;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 1rem;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.header-logo  { font-size: 1.1rem; }
.header-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.header-badge {
    font-size: 0.58rem;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: 0.12em;
    font-weight: 700;
}
.header-sep {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.2);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Workspace: 3 panels side-by-side ──────────────────────── */
/*  Using flexbox row – more reliable than CSS Grid across browsers */
.workspace {
    flex: 1;           /* fills space between header and log-viewer */
    display: flex;
    flex-direction: row;
    min-height: 0;     /* critical: allows flex child to shrink below content size */
    overflow: hidden;
}

/* ── Panel base ─────────────────────────────────────────────── */
.panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--surface);
}

/* LEFT – fixed width, scrollable */
.panel-left {
    width: var(--left-w);
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
}

/* MIDDLE – fills remaining space */
.panel-middle {
    flex: 1;
    min-width: 0;
    border-right: 1px solid var(--border);
    background: var(--surface);
}

/* RIGHT – fixed width */
.panel-right {
    width: var(--right-w);
    flex-shrink: 0;
}

/* ── Panel header ────────────────────────────────────────────── */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.8rem;
    min-height: 32px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.dark-header {
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.panel-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.panel-title.light { color: var(--text-muted); }

.panel-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.panel-header-right {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* ── Left panel inner sections ───────────────────────────────── */
.section {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.8rem;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 2;
}

.section-label {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
}

.section-hint {
    font-size: 0.62rem;
    color: #94a3b8;
}

.section-hint code {
    font-family: var(--mono);
    font-size: 0.62rem;
    background: #dde3ec;
    padding: 0 3px;
    border-radius: 3px;
    color: var(--primary);
}

/* ── Shared code textarea ────────────────────────────────────── */
.code-textarea {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text);
    background: var(--surface);
    border: none;
    resize: none;
    outline: none;
    padding: 0.6rem 0.75rem;
    tab-size: 2;
    display: block;
}

.code-textarea::placeholder { color: #c0cad8; }
.code-textarea:focus         { background: #fafcff; outline: none; }

/* Payload textarea – fixed height, user can resize vertically */
.payload-textarea {
    height: 190px;
    min-height: 60px;
    resize: vertical;
    width: 100%;
}

/* ── Variables ───────────────────────────────────────────────── */
.section-vars { flex-shrink: 0; }

.variables-list {
    display: flex;
    flex-direction: column;
}

.variable-item {
    border-bottom: 1px solid var(--border);
}

.variable-item-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.variable-name-input {
    flex: 1;
    font-family: var(--mono);
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    background: white;
    color: var(--text);
    outline: none;
    min-width: 0;
}

.variable-name-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}

.variable-type-select {
    font-size: 10.5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 4px;
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
}

.variable-remove-btn {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 3px;
    flex-shrink: 0;
    padding: 0;
}

.variable-remove-btn:hover {
    background: #fee2e2;
    color: var(--error);
}

.variable-content-area {
    display: block;
    width: 100%;
    height: 68px;
    min-height: 40px;
    resize: vertical;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.5;
    padding: 0.35rem 0.6rem;
    background: white;
    color: var(--text);
    border: none;
    outline: none;
    tab-size: 2;
}

.variable-content-area::placeholder { color: #c0cad8; }

/* ── Middle panel – script editor ────────────────────────────── */
.script-textarea {
    flex: 1;
    width: 100%;
    font-size: 13px;
    line-height: 1.65;
    padding: 0.9rem 1rem;
    background: var(--dark-bg);
    color: var(--dark-text);
    border: none;
    resize: none;
    outline: none;
    min-height: 0;
    /* fill remaining space in the flex column */
    flex-grow: 1;
}

.script-textarea::placeholder { color: #2d4157; }
.script-textarea:focus         { outline: none; background: var(--dark-bg); }

.script-footer {
    padding: 0.28rem 1rem;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.script-hint {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: var(--mono);
}

kbd {
    display: inline-block;
    font-size: 0.6rem;
    font-family: var(--mono);
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 3px;
}

/* ── Status dot ─────────────────────────────────────────────── */
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: background 0.2s;
}

.status-dot.running { background: #f59e0b; animation: blink 0.7s ease-in-out infinite; }
.status-dot.success { background: var(--success); }
.status-dot.error   { background: var(--error); }

.status-text {
    font-size: 0.63rem;
    color: var(--text-muted);
    font-family: var(--mono);
    min-width: 52px;
    text-align: right;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

/* ── Right panel – output ────────────────────────────────────── */
.output-area {
    flex: 1;
    overflow: auto;
    min-height: 0;
    position: relative;
}

.output-content {
    padding: 0.85rem;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.65;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 100%;
}

.error-content {
    padding: 0.85rem;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.65;
    color: var(--error);
    white-space: pre-wrap;
    word-break: break-word;
    background: #fff5f5;
    min-height: 100%;
}

.metrics-bar {
    padding: 0.35rem 0.85rem;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    font-size: 0.68rem;
    color: var(--text-muted);
    font-family: var(--mono);
    flex-shrink: 0;
}

/* ── Log viewer ─────────────────────────────────────────────── */
.log-viewer {
    flex-shrink: 0;
    background: #080f1a;
    border-top: 1px solid #1a2a3a;
    color: #94a3b8;
    font-family: var(--mono);
    font-size: 11.5px;
}

.log-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.85rem;
    height: var(--log-h);
    cursor: pointer;
    user-select: none;
}

.log-header:hover { background: #0f1c2a; }

.log-arrow {
    font-size: 8px;
    color: #3d5168;
    flex-shrink: 0;
    display: inline-block;
    transition: transform 0.15s;
}

.log-arrow.open { transform: rotate(90deg); }

.log-title {
    font-weight: 700;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3d5168;
}

.log-count {
    font-size: 9.5px;
    background: #0f1c2a;
    color: #4a6080;
    border-radius: 8px;
    padding: 0 5px;
    min-width: 16px;
    text-align: center;
}

.log-hint {
    font-size: 0.6rem;
    color: #1e3040;
}

.ml-auto { margin-left: auto; }

.log-body {
    max-height: 130px;
    overflow-y: auto;
    border-top: 1px solid #1a2a3a;
}

.log-entries {
    padding: 0.3rem 0.85rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.log-entry {
    line-height: 1.5;
    padding: 1px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-entry.log-type   { color: #7dd3fc; }
.log-entry.trace-type { color: #86efac; }

.log-empty {
    color: #1e3040;
    font-style: italic;
    padding: 0.2rem 0;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: none;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
    outline: none;
    padding: 0.32rem 0.65rem;
    line-height: 1.4;
}

.btn:active { transform: translateY(1px); }

.btn-sm  { font-size: 0.72rem; padding: 0.26rem 0.55rem; }
.btn-xs  { font-size: 0.65rem; padding: 0.16rem 0.44rem; border-radius: 4px; }

/* Run button (green accent) */
.btn-run {
    background: #16a34a;
    color: white;
    font-weight: 600;
    padding: 0.28rem 0.8rem;
    font-size: 0.8rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.btn-run:hover { background: #15803d; }

/* Ghost on dark (header) */
.btn-ghost {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(255,255,255,0.18);
}
.btn-ghost:hover { background: rgba(255,255,255,0.2); }

/* Ghost dark (log viewer) */
.btn-ghost-dark {
    background: rgba(255,255,255,0.04);
    color: #3d5168;
    border: 1px solid #1a2a3a;
}
.btn-ghost-dark:hover { background: #0f1c2a; color: #64748b; }

/* Primary (left panel) */
.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover { background: var(--primary-hover); }

/* Outline (right panel header) */
.btn-outline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--surface2); color: var(--text); }

/* ── Toggle ─────────────────────────────────────────────────── */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.82);
    user-select: none;
}
.toggle-label input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: white;
    cursor: pointer;
}

/* ── Scrollbars ─────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #c8d0dc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0aab8; }

.script-textarea::-webkit-scrollbar-thumb,
.log-body::-webkit-scrollbar-thumb { background: #263344; }
.output-area::-webkit-scrollbar-thumb { background: #c8d0dc; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    :root { --left-w: 250px; --right-w: 300px; }
}

@media (max-width: 860px) {
    /* Stack panels vertically on narrow screens */
    .workspace {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .panel-left, .panel-right {
        width: 100%;
        flex-shrink: 1;
    }
    .panel-left {
        height: 320px;
        overflow-y: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .panel-middle {
        height: 320px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .panel-right { height: 280px; }
    .payload-textarea { height: 110px; }
    /* Ensure code-editor fills full height in responsive */
    .code-editor-wrap   { min-height: 0; }
    .code-content-area  { min-height: 0; }
}

/* ── Input validation ─────────────────────────────────────────── */
.valid-badge {
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    padding: 0 4px;
    line-height: 1.4;
    flex-shrink: 0;
}
.valid-ok  { color: #16a34a; }
.valid-err { color: #dc2626; }

.input-valid-msg {
    font-size: 10.5px;
    color: #dc2626;
    font-family: var(--mono);
    padding: 2px 0.8rem 3px;
    background: #fff5f5;
    border-bottom: 1px solid #fecaca;
    min-height: 0;
    line-height: 1.4;
    display: none;
}
.input-valid-msg:not(:empty) { display: block; }

.input-invalid {
    background: #fff5f5 !important;
    outline: 1px solid #fca5a5 !important;
}

/* ── Autocomplete dropdown ────────────────────────────────────── */
.ac-dropdown {
    position: fixed;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 9999;
    min-width: 300px;
    max-width: 480px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--mono);
    font-size: 12px;
    pointer-events: all;
}

.ac-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.32rem 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.08s;
    user-select: none;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.selected { background: #eff6ff; }

.ac-kind {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    padding: 1px 4px;
    flex-shrink: 0;
    min-width: 22px;
    text-align: center;
}
.ac-kind-fn    { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.ac-kind-infix { background: #faf5ff; color: #7c3aed; border: 1px solid #e9d5ff; }
.ac-kind-kw    { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.ac-kind-field { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.ac-kind-var   { background: #fdf4ff; color: #9333ea; border: 1px solid #f3e8ff; }

.ac-label {
    color: #111827;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 12.5px;
}

.ac-detail {
    color: #9ca3af;
    font-size: 11px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-item:hover .ac-detail,
.ac-item.selected .ac-detail { color: #6b7280; }

/* ── Code editor (DataWeave-style) ───────────────────────────── */
.code-editor-wrap {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    position: relative;
}

.line-nums {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.9rem 0.6rem 0.9rem 0.5rem;
    background: #f8fafc;
    color: #94a3b8;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.65;
    min-width: 40px;
    flex-shrink: 0;
    overflow: hidden;
    border-right: 1px solid #e2e8f0;
    user-select: none;
    pointer-events: none;
}
.line-nums span { display: block; }

.code-content-area {
    position: relative;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    /* Ensure absolute children fill this container */
    height: 100%;
}

.code-highlight {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0.9rem 1rem;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-wrap: break-word;
    tab-size: 2;
    color: #1e293b;
    background: transparent;
    border: none;
    pointer-events: none;
    z-index: 1;
    overflow: auto;
}

.code-editor-ta {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 0.9rem 1rem;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.65;
    tab-size: 2;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: transparent !important;
    color: transparent !important;
    caret-color: var(--primary) !important;
    z-index: 2;
    resize: none;
    outline: none;
    border: none;
    overflow: auto;
}
.code-editor-ta::selection      { background: rgba(37,99,235,0.15); }
.code-editor-ta::-moz-selection { background: rgba(37,99,235,0.15); }
.code-editor-ta::placeholder    { color: #cbd5e1; }

/* ── Syntax token colours — light theme ──────────────────────── */
.sh-dw      { color: #7c3aed; font-weight: 600; }
.sh-sep     { color: #64748b; font-weight: 700; letter-spacing: 0.08em; }
.sh-comment { color: #6b7280; font-style: italic; }
.sh-str     { color: #a31515; }
.sh-mime    { color: #0369a1; }
.sh-bool    { color: #0070c1; font-weight: 600; }
.sh-kw      { color: #af00db; font-weight: 600; }
.sh-op      { color: #001080; font-weight: 500; }
.sh-payload { color: #c05c00; }
.sh-fn      { color: #795e26; }
.sh-num     { color: #098658; }
.sh-sym     { color: #334155; }

/* ── Output type badge in script panel header ─────────────────── */
.output-type-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #eff6ff;
    color: var(--primary);
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 2px 7px;
    flex-shrink: 0;
    user-select: none;
}

.type-select {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 5px;
    background: white;
    color: var(--primary);
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    line-height: 1.4;
    transition: border-color 0.15s;
}
.type-select:hover  { border-color: var(--primary); }
.type-select:focus  { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,0.12); }

/* Dark variant — for inside the script editor */
.type-select-dark {
    background: #1a2640;
    color: #f0883e;
    border-color: #2d4060;
    font-size: 11px;
}
.type-select-dark:hover { border-color: #f0883e; }
.type-select-dark:focus { border-color: #f0883e; box-shadow: none; }
.type-select-dark option { background: #1a2640; color: #e2e8f0; }

/* ── Section label group (label + type dropdown) ─────────────── */
.section-label-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Script header section (output type + header textarea) ────── */
.script-header-section {
    background: var(--dark-bg2);
    border-bottom: none;
    flex-shrink: 0;
}

.script-output-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    background: #131d2e;
}

.script-kw {
    font-family: var(--mono);
    font-size: 11.5px;
    color: #c084fc;   /* purple keyword colour */
    font-weight: 600;
    flex-shrink: 0;
    user-select: none;
}

.script-header-hint {
    font-size: 0.6rem;
    color: #2a3f57;
    margin-left: auto;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Header textarea (var / function definitions area) */
.header-textarea {
    width: 100%;
    height: 62px;
    min-height: 26px;
    max-height: 160px;
    resize: vertical;
    font-size: 12px;
    line-height: 1.55;
    background: var(--dark-bg2);
    color: #7a9ab8;
    padding: 0.45rem 1rem;
    border: none;
    outline: none;
    font-family: var(--mono);
    tab-size: 2;
    display: block;
}
.header-textarea::placeholder { color: #1e3040; font-style: italic; }
.header-textarea:focus         { background: #1a2a3d; outline: none; }

/* ── Script separator (---) ──────────────────────────────────── */
.script-separator {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background: #070d18;
    border-top: 1px solid #1a2640;
    border-bottom: 1px solid #1a2640;
    height: 22px;
    flex-shrink: 0;
    user-select: none;
    gap: 0.5rem;
}

.separator-text {
    font-family: var(--mono);
    font-size: 12px;
    color: #2a4060;
    font-weight: 700;
    letter-spacing: 0.15em;
}

/* ── Output panel title group (title + type dropdown) ─────────── */
.panel-title-group {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}