body {
            margin: 0;
            font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
            background: var(--background, #faf9f7);
            color: var(--foreground, #1c1917);
        }

        .page-wrap {
            max-width: 1400px;
            margin: 0 auto;
            padding: 16px 20px;
        }

        /* Header */
        .page-header {
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-header h1 {
            font-size: 20px;
            font-weight: 700;
            margin: 0;
        }

        .page-header p {
            font-size: 12px;
            color: var(--muted-fg, #78716c);
            margin: 2px 0 0;
        }

        .header-badge {
            padding: 3px 10px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 12px;
            background: #f0efec;
            color: #78716c;
        }

        /* ═══════ 2-Column Layout ═══════ */
        .split-layout {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 12px;
            height: calc(100vh - 100px);
            min-height: 450px;
        }

        /* Left: Chat */
        .chat-panel {
            display: flex;
            flex-direction: column;
            background: var(--card, #fff);
            border: 1px solid var(--border, #e7e5e2);
            border-radius: 12px;
            overflow: hidden;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .chat-messages::-webkit-scrollbar {
            width: 3px;
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, .08);
            border-radius: 4px;
        }

        .msg {
            max-width: 88%;
            padding: 9px 13px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.5;
            word-break: break-word;
        }

        .msg.user {
            align-self: flex-end;
            background: var(--primary, #1c1917);
            color: #fff;
            border-bottom-right-radius: 4px;
        }

        .msg.ai {
            align-self: flex-start;
            background: var(--muted, #f0efec);
            color: var(--foreground);
            border-bottom-left-radius: 4px;
        }

        .msg.ai .meta {
            margin-top: 5px;
            font-size: 10px;
            color: var(--muted-fg, #78716c);
            display: flex;
            gap: 6px;
        }

        .msg.system {
            align-self: center;
            font-size: 11px;
            color: var(--muted-fg);
            font-style: italic;
            background: none;
            padding: 4px 0;
        }

        .msg.error {
            align-self: center;
            font-size: 11px;
            color: #dc2626;
            background: rgba(220, 38, 38, .05);
            padding: 6px 12px;
        }

        /* Markdown rendered content */
        .msg.ai table { width:100%; border-collapse:collapse; margin:8px 0; font-size:12px; }
        .msg.ai th { background:rgba(0,0,0,.06); font-weight:600; text-align:left; padding:6px 8px; border:1px solid var(--border,#e7e5e2); }
        .msg.ai td { padding:5px 8px; border:1px solid var(--border,#e7e5e2); }
        .msg.ai tr:nth-child(even) { background:rgba(0,0,0,.02); }
        .msg.ai ul, .msg.ai ol { margin:4px 0; padding-left:18px; }
        .msg.ai li { margin:2px 0; }
        .msg.ai p { margin:4px 0; }
        .msg.ai h1,.msg.ai h2,.msg.ai h3 { margin:6px 0 4px; font-size:13px; }
        .msg.ai hr { border:none; border-top:1px solid var(--border); margin:8px 0; }
        .msg.ai blockquote { border-left:3px solid var(--border); margin:4px 0; padding:2px 8px; color:var(--muted-fg); }

        /* Quick actions */
        .quick-actions {
            padding: 6px 12px;
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            border-top: 1px solid var(--border);
            background: var(--card);
        }

        .quick-btn {
            padding: 4px 10px;
            font-size: 11px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--background);
            cursor: pointer;
            color: var(--foreground);
            transition: all .15s;
        }

        .quick-btn:hover {
            background: var(--muted);
            border-color: var(--muted-fg);
        }

        /* Input */
        .chat-input {
            border-top: 1px solid var(--border);
            padding: 10px 12px;
            display: flex;
            gap: 6px;
            background: var(--card);
        }

        .chat-input input {
            flex: 1;
            padding: 9px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            outline: none;
            background: var(--background);
            transition: border-color .2s;
        }

        .chat-input input:focus {
            border-color: var(--primary);
        }

        .chat-input button {
            padding: 9px 16px;
            background: var(--primary, #1c1917);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity .2s;
            white-space: nowrap;
        }

        .chat-input button:hover {
            opacity: .85;
        }

        .chat-input button:disabled {
            opacity: .5;
            cursor: not-allowed;
        }

        /* Thinking */
        .thinking {
            display: flex;
            gap: 4px;
            padding: 8px 13px;
        }

        .thinking span {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--muted-fg);
            animation: bounce 1.4s ease-in-out infinite;
        }

        .thinking span:nth-child(2) {
            animation-delay: .2s;
        }

        .thinking span:nth-child(3) {
            animation-delay: .4s;
        }

        @keyframes bounce {

            0%,
            80%,
            100% {
                transform: translateY(0)
            }

            40% {
                transform: translateY(-7px)
            }
        }

        /* Markdown */
        .msg.ai a {
            color: var(--primary);
            text-decoration: underline;
        }

        .msg.ai strong {
            font-weight: 600;
        }

        .msg.ai code {
            background: var(--muted);
            padding: 1px 4px;
            border-radius: 3px;
            font-size: 11.5px;
        }

        /* ═══════ Right: Pipeline ═══════ */
        .pipeline-panel {
            display: flex;
            flex-direction: column;
            background: var(--card, #fff);
            border: 1px solid var(--border, #e7e5e2);
            border-radius: 12px;
            overflow: hidden;
        }

        .pipeline-header {
            padding: 10px 14px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .pipeline-header h3 {
            font-size: 13px;
            font-weight: 700;
            margin: 0;
        }

        .pipeline-header .path-badge {
            font-size: 10px;
            padding: 2px 8px;
            background: var(--muted);
            border-radius: 10px;
            color: var(--muted-fg);
            font-weight: 500;
        }

        .pipeline-steps {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .pipeline-steps::-webkit-scrollbar {
            width: 3px;
        }

        .pipeline-steps::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, .08);
            border-radius: 4px;
        }

        .pipeline-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            color: var(--muted-fg);
            font-size: 12px;
            font-style: italic;
        }

        /* Pipeline Step Card */
        .p-step {
            position: relative;
            padding: 10px 12px 10px 28px;
            margin: 0;
        }

        .p-step:not(:last-child) {
            border-left: 2px solid var(--border);
            margin-left: 7px;
            padding-bottom: 14px;
        }

        .p-step:last-child {
            border-left: 2px solid transparent;
            margin-left: 7px;
        }

        /* Dot on the line */
        .p-step::before {
            content: '';
            position: absolute;
            left: -1px;
            top: 13px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid var(--border);
            background: var(--card);
            z-index: 1;
            margin-left: -4px;
        }

        .p-step.s-user::before {
            background: #6366f1;
            border-color: #6366f1;
        }

        .p-step.s-planner::before {
            background: #f59e0b;
            border-color: #f59e0b;
        }

        .p-step.s-tool_result::before {
            background: #10b981;
            border-color: #10b981;
        }

        .p-step.s-responder::before {
            background: #3b82f6;
            border-color: #3b82f6;
        }

        .p-step .step-label {
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 3px;
        }

        .p-step.s-user .step-label {
            color: #6366f1;
        }

        .p-step.s-planner .step-label {
            color: #f59e0b;
        }

        .p-step.s-tool_result .step-label {
            color: #10b981;
        }

        .p-step.s-responder .step-label {
            color: #3b82f6;
        }

        .p-step .step-content {
            font-size: 11.5px;
            line-height: 1.45;
            color: var(--foreground);
            white-space: pre-wrap;
            word-break: break-word;
        }

        .p-step .step-content.truncated {
            max-height: 120px;
            overflow: hidden;
            position: relative;
        }

        .p-step .step-content.truncated::after {
            content: '...';
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 0 4px;
            background: var(--card);
            color: var(--muted-fg);
            font-weight: 600;
        }

        /* Tool call args */
        .tool-args {
            margin-top: 5px;
            padding: 6px 8px;
            background: rgba(0, 0, 0, .03);
            border-radius: 6px;
            font-size: 11px;
            font-family: 'Consolas', 'Monaco', monospace;
        }

        .tool-args .arg-row {
            display: flex;
            gap: 4px;
            margin: 1px 0;
        }

        .tool-args .arg-key {
            color: #9333ea;
            font-weight: 600;
            min-width: 90px;
        }

        .tool-args .arg-val {
            color: var(--foreground);
        }

        /* Pipeline separator for each request */
        .pipeline-sep {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 0;
            margin: 4px 0;
        }

        .pipeline-sep::before,
        .pipeline-sep::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        .pipeline-sep span {
            font-size: 10px;
            color: var(--muted-fg);
            white-space: nowrap;
        }

        /* Animation: new step slides in */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

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

        .p-step.new {
            animation: slideIn .3s ease-out;
        }

        /* Raw JSON toggle */
        .raw-json-toggle { margin-top:6px; }
        .raw-json-toggle summary { cursor:pointer; font-size:10px; font-weight:600; color:var(--muted-fg,#78716c); user-select:none; padding:2px 0; }
        .raw-json-toggle summary:hover { color:var(--foreground); }
        .raw-json-toggle pre { margin:4px 0 0; padding:8px; background:rgba(0,0,0,.04); border-radius:6px; font-size:10px; line-height:1.4; font-family:'Consolas','Monaco',monospace; overflow-x:auto; max-height:400px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; color:var(--foreground); border:1px solid var(--border,#e7e5e2); }
        .raw-json-toggle pre::-webkit-scrollbar { width:3px; height:3px; }
        .raw-json-toggle pre::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:4px; }