| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| body { |
| font-family: system-ui, sans-serif; |
| background: #0b0d12; |
| color: #e6e8f2; |
| height: 100vh; |
| } |
|
|
| .app { |
| height: 100vh; |
| padding: 12px; |
| } |
|
|
| .app-shell { |
| height: calc(100vh - 24px); |
| display: flex; |
| flex-direction: row; |
| gap: 12px; |
| } |
|
|
| .app-sidebar { |
| width: 220px; |
| min-width: 220px; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-start; |
| gap: 12px; |
| padding: 12px 16px; |
| border: 1px solid #d9e1ec; |
| border-radius: 14px; |
| background: #f7f9fc; |
| } |
|
|
| .sidebar-brand { |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| } |
|
|
| .nav-title { |
| font-size: 14px; |
| font-weight: 700; |
| color: #111827; |
| } |
|
|
| .nav-subtitle { |
| margin-top: 2px; |
| font-size: 12px; |
| color: #6b7280; |
| } |
|
|
| .nav-actions { |
| display: flex; |
| flex-direction: column; |
| align-items: stretch; |
| gap: 8px; |
| } |
|
|
| .nav-btn { |
| border: 1px solid #c7d5e8; |
| background: #ffffff; |
| color: #1f2937; |
| border-radius: 10px; |
| padding: 10px 14px; |
| font-size: 12px; |
| cursor: pointer; |
| text-align: left; |
| } |
|
|
| .nav-btn-active { |
| background: #2563eb; |
| border-color: #2563eb; |
| color: #ffffff; |
| } |
|
|
| .page-shell { |
| flex: 1; |
| min-height: 0; |
| } |
|
|
| |
| .chat-workspace { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| background: #10131b; |
| border: 1px solid #232a3b; |
| border-radius: 14px; |
| overflow: hidden; |
| } |
|
|
| .workspace-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| padding: 12px 16px; |
| background: #0d1017; |
| border-bottom: 1px solid #232a3b; |
| } |
|
|
| .header-title { |
| font-size: 14px; |
| font-weight: 600; |
| color: #dde3ff; |
| } |
|
|
| .header-subtitle { |
| margin-top: 2px; |
| font-size: 12px; |
| color: #7f89a8; |
| } |
|
|
| .session-badge { |
| font-size: 11px; |
| color: #8f96af; |
| font-family: monospace; |
| border: 1px solid #2f3850; |
| border-radius: 999px; |
| padding: 4px 8px; |
| } |
|
|
| .workspace-body { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 0; |
| flex: 1; |
| min-height: 0; |
| } |
|
|
| .conversation-pane, |
| .reasoning-pane { |
| min-width: 0; |
| min-height: 0; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .conversation-pane { |
| border-right: 1px solid #232a3b; |
| } |
|
|
| .pane-title { |
| font-size: 12px; |
| font-weight: 600; |
| color: #98a3c7; |
| letter-spacing: 0.02em; |
| padding: 10px 14px; |
| border-bottom: 1px solid #232a3b; |
| background: #0f131d; |
| } |
|
|
| .conversation-list, |
| .reasoning-list { |
| flex: 1; |
| min-height: 0; |
| overflow-y: auto; |
| padding: 14px; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .conversation-item { |
| border-radius: 10px; |
| padding: 10px 12px; |
| border: 1px solid #273047; |
| background: #131827; |
| color: #dbe1f5; |
| } |
|
|
| .assistant-item { |
| text-align: left; |
| cursor: pointer; |
| transition: border-color 0.15s, background 0.15s; |
| } |
|
|
| .assistant-item:hover { |
| border-color: #4e5f8d; |
| background: #161d30; |
| } |
|
|
| .active-item { |
| border-color: #7288c9; |
| background: #1a2238; |
| } |
|
|
| .user-item { |
| border-color: #34466f; |
| background: #18213a; |
| } |
|
|
| .item-top { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| margin-bottom: 6px; |
| } |
|
|
| .item-label { |
| font-size: 11px; |
| font-weight: 600; |
| color: #9eb2f7; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .item-meta { |
| font-size: 11px; |
| color: #8f96af; |
| font-family: monospace; |
| } |
|
|
| .item-content { |
| font-size: 13px; |
| color: #e2e7fb; |
| white-space: pre-wrap; |
| line-height: 1.45; |
| word-break: break-word; |
| } |
|
|
| .final-render { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .artifact-panel { |
| border: 1px solid #d8e3f2; |
| border-radius: 10px; |
| background: #f8fbff; |
| padding: 10px; |
| } |
|
|
| .artifact-title { |
| font-size: 12px; |
| font-weight: 700; |
| color: #1e3a5f; |
| margin-bottom: 8px; |
| } |
|
|
| .artifact-list { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .artifact-link { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| border: 1px solid #c9d9ee; |
| border-radius: 8px; |
| background: #ffffff; |
| padding: 8px 10px; |
| color: #1d4ed8; |
| text-decoration: none; |
| } |
|
|
| .artifact-link:hover { |
| border-color: #93b2db; |
| background: #f4f8ff; |
| } |
|
|
| .artifact-name { |
| font-size: 13px; |
| font-weight: 600; |
| color: #0f172a; |
| word-break: break-word; |
| } |
|
|
| .artifact-size { |
| font-size: 12px; |
| color: #475569; |
| white-space: nowrap; |
| } |
|
|
| .result-rich { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .result-heading { |
| font-weight: 700; |
| color: #eaf0ff; |
| letter-spacing: 0.01em; |
| } |
|
|
| .result-heading.h1 { font-size: 18px; } |
| .result-heading.h2 { font-size: 16px; } |
| .result-heading.h3 { font-size: 14px; color: #cbd8ff; } |
| .result-heading.h4 { font-size: 13px; color: #b8c7ef; } |
|
|
| .result-text { |
| margin: 0; |
| white-space: pre-wrap; |
| word-break: break-word; |
| font-size: 12px; |
| line-height: 1.5; |
| color: #dbe5ff; |
| } |
|
|
| .result-inline-bold { |
| font-weight: 700; |
| } |
|
|
| .result-inline-code { |
| display: inline-block; |
| padding: 1px 5px; |
| border-radius: 6px; |
| background: #e8eef8; |
| color: #1e3a5f; |
| font-size: 0.95em; |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| } |
|
|
| .result-list { |
| margin: 0; |
| padding-left: 18px; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| color: #d6e0ff; |
| font-size: 12px; |
| line-height: 1.5; |
| } |
|
|
| .result-quote { |
| margin: 0; |
| border-left: 3px solid #5674bc; |
| background: #121c33; |
| color: #c9d9ff; |
| padding: 8px 10px; |
| border-radius: 6px; |
| font-size: 12px; |
| line-height: 1.5; |
| } |
|
|
| .result-code-wrap { |
| border: 1px solid #2d6248; |
| border-radius: 8px; |
| background: #0d1813; |
| overflow: hidden; |
| } |
|
|
| .result-code-lang { |
| padding: 6px 10px; |
| font-size: 11px; |
| color: #8fe5b1; |
| border-bottom: 1px solid #2d6248; |
| font-family: monospace; |
| text-transform: uppercase; |
| } |
|
|
| .result-code { |
| margin: 0; |
| padding: 10px; |
| font-size: 12px; |
| line-height: 1.55; |
| white-space: pre-wrap; |
| overflow-x: auto; |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| color: #b4f2ce; |
| } |
|
|
| .result-seq-wrap { |
| border: 1px solid #3f6f5a; |
| border-radius: 8px; |
| background: #0f1c18; |
| overflow: hidden; |
| } |
|
|
| .result-seq { |
| margin: 0; |
| padding: 10px; |
| color: #8ef3b8; |
| font-size: 12px; |
| line-height: 1.45; |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| white-space: pre-wrap; |
| word-break: break-all; |
| } |
|
|
| .result-table-wrap { |
| overflow-x: auto; |
| } |
|
|
| .result-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 12px; |
| color: #dce4ff; |
| border: 1px solid #3a4b72; |
| border-radius: 8px; |
| overflow: hidden; |
| } |
|
|
| .result-table th, |
| .result-table td { |
| padding: 8px 10px; |
| border: 1px solid #2f3d5f; |
| text-align: left; |
| vertical-align: top; |
| white-space: normal; |
| word-break: break-word; |
| } |
|
|
| .result-table th { |
| background: #1b2742; |
| color: #c9d8ff; |
| font-weight: 600; |
| } |
|
|
| .result-table tr:nth-child(even) td { |
| background: #121b2f; |
| } |
|
|
| .reasoning-card { |
| position: relative; |
| border: 1px solid #273047; |
| border-radius: 10px; |
| background: #121927; |
| padding: 10px 12px; |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 20px rgba(0, 0, 0, 0.15); |
| } |
|
|
| .reasoning-shell { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .reasoning-summary { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| } |
|
|
| .summary-chip { |
| font-size: 11px; |
| color: #bfc9ef; |
| background: #182037; |
| border: 1px solid #324267; |
| border-radius: 999px; |
| padding: 2px 8px; |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| } |
|
|
| .reasoning-progress { |
| width: 100%; |
| height: 6px; |
| border-radius: 999px; |
| background: #111b2f; |
| border: 1px solid #273a62; |
| overflow: hidden; |
| } |
|
|
| .reasoning-progress-bar { |
| height: 100%; |
| background: linear-gradient(90deg, #5e78c9, #6dd4a2); |
| box-shadow: 0 0 10px rgba(109, 212, 162, 0.5); |
| } |
|
|
| .reasoning-timeline { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .timeline-item { |
| position: relative; |
| padding-left: 20px; |
| } |
|
|
| .timeline-item::before { |
| content: ""; |
| position: absolute; |
| left: 7px; |
| top: 0; |
| bottom: -10px; |
| width: 2px; |
| background: linear-gradient(180deg, #3a4f82, #243252); |
| } |
|
|
| .timeline-item:last-child::before { |
| bottom: 22px; |
| } |
|
|
| .timeline-node { |
| position: absolute; |
| left: 2px; |
| top: 14px; |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| border: 2px solid #7d90c9; |
| background: #0f1422; |
| box-shadow: 0 0 0 3px rgba(125, 144, 201, 0.15); |
| } |
|
|
| .live-step .timeline-node { |
| border-color: #63d9a5; |
| box-shadow: 0 0 0 3px rgba(99, 217, 165, 0.2), 0 0 10px rgba(99, 217, 165, 0.45); |
| } |
|
|
| .card-subtitle { |
| font-size: 11px; |
| color: #95a3cc; |
| margin-bottom: 8px; |
| } |
|
|
| .card-icon { |
| position: absolute; |
| right: 12px; |
| top: 38px; |
| font-size: 16px; |
| opacity: 0.9; |
| } |
|
|
| .state-pill { |
| font-size: 10px; |
| color: #c5d2fc; |
| border: 1px solid #425486; |
| background: #17233f; |
| border-radius: 999px; |
| padding: 2px 7px; |
| letter-spacing: 0.04em; |
| } |
|
|
| .live-pill { |
| color: #bcffe1; |
| border-color: #328a66; |
| background: #133425; |
| } |
|
|
| .tool-preview { |
| font-size: 11px; |
| line-height: 1.4; |
| color: #ffe4b7; |
| border: 1px dashed #7f5d2b; |
| border-radius: 7px; |
| padding: 6px 8px; |
| margin-bottom: 8px; |
| background: rgba(127, 93, 43, 0.12); |
| } |
|
|
| .card-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| margin-bottom: 8px; |
| } |
|
|
| .card-tag { |
| font-size: 11px; |
| font-weight: 600; |
| color: #b7c6f8; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .thinking-card { border-color: #33405f; background: #121b2c; } |
| .code-card { border-color: #234035; background: #101c18; } |
| .observation-card { border-color: #27445a; background: #0f1a23; } |
| .tool-card { border-color: #4f3b1e; background: #1e1811; } |
| .result-card { border-color: #275238; background: #111f17; } |
| .error-card { border-color: #5b2a2a; background: #231313; } |
|
|
| .thinking-card .card-tag, |
| .thinking-card .card-subtitle { |
| color: #9c87ff; |
| } |
|
|
| .observation-card .card-tag, |
| .observation-card .card-subtitle { |
| color: #3fa7d6; |
| } |
|
|
| .tool-card .card-tag, |
| .tool-card .card-subtitle { |
| color: #c7893c; |
| } |
|
|
| .thinking-content { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .task-block { |
| border: 1px solid #3a4d78; |
| border-radius: 8px; |
| background: #16233f; |
| padding: 8px 10px; |
| } |
|
|
| .task-title { |
| font-size: 11px; |
| font-weight: 600; |
| color: #b5c8ff; |
| margin-bottom: 6px; |
| text-transform: uppercase; |
| } |
|
|
| .task-block ul { |
| margin-left: 16px; |
| color: #dbe4ff; |
| font-size: 13px; |
| line-height: 1.45; |
| } |
|
|
| .task-list { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .task-row { |
| display: flex; |
| align-items: flex-start; |
| gap: 8px; |
| color: #dbe4ff; |
| font-size: 13px; |
| line-height: 1.45; |
| } |
|
|
| .task-check { |
| display: inline-flex; |
| width: 16px; |
| color: #9eddb8; |
| font-weight: 700; |
| } |
|
|
| .plain-block { |
| border: 1px solid #2b3550; |
| border-radius: 8px; |
| background: #0e1422; |
| padding: 10px; |
| color: #cfd7f2; |
| white-space: pre-wrap; |
| word-break: break-word; |
| font-size: 12px; |
| line-height: 1.55; |
| } |
|
|
| .planning-block { |
| border-color: #5c46c9; |
| background: linear-gradient(180deg, rgba(92, 70, 201, 0.14), rgba(14, 20, 34, 0.94)); |
| } |
|
|
| .planning-text { |
| color: #d4c7ff; |
| font-weight: 600; |
| } |
|
|
| .reasoning-rich { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .observation-block { |
| border-color: #31516a; |
| background: #0c1520; |
| } |
|
|
| .observation-heading { |
| font-weight: 700; |
| letter-spacing: 0.01em; |
| } |
|
|
| .observation-heading.level-1 { |
| font-size: 15px; |
| color: #8ed7ff; |
| } |
|
|
| .observation-heading.level-2 { |
| font-size: 13px; |
| color: #6fc6f3; |
| } |
|
|
| .observation-heading.level-3, |
| .observation-heading.level-4 { |
| font-size: 12px; |
| color: #8bcfbc; |
| } |
|
|
| .observation-note { |
| border: 1px solid #315a45; |
| border-radius: 8px; |
| background: rgba(37, 89, 62, 0.18); |
| color: #b8f2cc; |
| padding: 8px 10px; |
| font-size: 12px; |
| line-height: 1.5; |
| } |
|
|
| .observation-list { |
| margin-top: -2px; |
| } |
|
|
| .visualization-card { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .visualization-caption { |
| font-size: 12px; |
| font-weight: 600; |
| color: #93c5fd; |
| } |
|
|
| .visualization-link { |
| display: block; |
| border: 1px solid #31516a; |
| border-radius: 10px; |
| overflow: hidden; |
| background: #0c1520; |
| } |
|
|
| .visualization-image { |
| display: block; |
| width: 100%; |
| max-height: 360px; |
| object-fit: contain; |
| background: #0b1220; |
| } |
|
|
| .tool-activity-card { |
| border: 1px solid #7f5d2b; |
| border-radius: 10px; |
| background: linear-gradient(180deg, rgba(127, 93, 43, 0.2), rgba(30, 24, 17, 0.96)); |
| padding: 10px; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .tool-activity-top { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| } |
|
|
| .tool-activity-label { |
| font-size: 11px; |
| font-weight: 700; |
| color: #ffd892; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .tool-activity-state { |
| border-radius: 999px; |
| padding: 3px 8px; |
| font-size: 10px; |
| font-weight: 700; |
| letter-spacing: 0.04em; |
| } |
|
|
| .tool-activity-state.running { |
| color: #fff4d6; |
| background: rgba(255, 193, 7, 0.18); |
| border: 1px solid rgba(255, 208, 99, 0.55); |
| } |
|
|
| .tool-activity-state.finished { |
| color: #d9ffe7; |
| background: rgba(34, 197, 94, 0.16); |
| border: 1px solid rgba(99, 217, 165, 0.35); |
| } |
|
|
| .tool-activity-name-row { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .tool-activity-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| background: #ffd064; |
| box-shadow: 0 0 0 0 rgba(255, 208, 100, 0.6); |
| } |
|
|
| .tool-activity-live .tool-activity-dot { |
| animation: toolPulse 1.4s infinite ease-out; |
| } |
|
|
| .tool-activity-name { |
| color: #fff1ca; |
| font-size: 14px; |
| font-weight: 700; |
| } |
|
|
| .tool-activity-track { |
| position: relative; |
| height: 8px; |
| border-radius: 999px; |
| overflow: hidden; |
| background: rgba(255, 214, 153, 0.08); |
| border: 1px solid rgba(255, 214, 153, 0.15); |
| } |
|
|
| .tool-activity-wave { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| width: 28%; |
| border-radius: 999px; |
| background: linear-gradient(90deg, rgba(255, 214, 153, 0), rgba(255, 214, 153, 0.9), rgba(255, 214, 153, 0)); |
| opacity: 0.85; |
| } |
|
|
| .tool-activity-live .tool-activity-wave { |
| animation: toolWave 1.8s linear infinite; |
| } |
|
|
| .tool-activity-live .wave-2 { |
| animation-delay: 0.45s; |
| } |
|
|
| .tool-activity-live .wave-3 { |
| animation-delay: 0.9s; |
| } |
|
|
| .tool-activity-card:not(.tool-activity-live) .tool-activity-wave { |
| left: 36%; |
| opacity: 0.5; |
| } |
|
|
| .tool-activity-desc { |
| color: #f7e7c0; |
| font-size: 12px; |
| line-height: 1.55; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
|
|
| @keyframes toolPulse { |
| 0% { |
| transform: scale(0.9); |
| box-shadow: 0 0 0 0 rgba(255, 208, 100, 0.55); |
| } |
| 70% { |
| transform: scale(1); |
| box-shadow: 0 0 0 10px rgba(255, 208, 100, 0); |
| } |
| 100% { |
| transform: scale(0.95); |
| box-shadow: 0 0 0 0 rgba(255, 208, 100, 0); |
| } |
| } |
|
|
| @keyframes toolWave { |
| 0% { |
| left: -30%; |
| } |
| 100% { |
| left: 102%; |
| } |
| } |
|
|
| .code-lang { |
| color: #7be0a0; |
| font-family: monospace; |
| font-size: 11px; |
| border: 1px solid #2d6248; |
| border-radius: 999px; |
| padding: 2px 8px; |
| } |
|
|
| .copy-btn { |
| position: absolute; |
| top: 10px; |
| right: 12px; |
| font-size: 11px; |
| border: 1px solid #2d6248; |
| border-radius: 6px; |
| background: transparent; |
| color: #7be0a0; |
| padding: 3px 8px; |
| cursor: pointer; |
| } |
|
|
| .code-block { |
| border: 1px solid #2d6248; |
| border-radius: 8px; |
| background: #0b1411; |
| padding: 10px; |
| color: #a8efc5; |
| font-family: monospace; |
| font-size: 12px; |
| line-height: 1.6; |
| overflow-x: auto; |
| } |
|
|
| .code-grid { |
| display: grid; |
| grid-template-columns: 40px 1fr; |
| border: 1px solid #2d6248; |
| border-radius: 8px; |
| overflow: hidden; |
| } |
|
|
| .code-grid .code-block { |
| border: 0; |
| border-radius: 0; |
| margin: 0; |
| min-width: 0; |
| } |
|
|
| .code-line-numbers { |
| margin: 0; |
| padding: 10px 8px; |
| background: #0d1c15; |
| border-right: 1px solid #2d6248; |
| color: #5ca07a; |
| font-size: 11px; |
| line-height: 1.6; |
| text-align: right; |
| user-select: none; |
| } |
|
|
| .code-line-numbers span { |
| display: block; |
| } |
|
|
| .result-content { |
| color: #cbf8dc; |
| font-size: 14px; |
| white-space: pre-wrap; |
| line-height: 1.55; |
| } |
|
|
| .tool-title { |
| font-size: 13px; |
| color: #ffd285; |
| margin-bottom: 8px; |
| font-weight: 600; |
| } |
|
|
| .empty-hint, |
| .running-hint { |
| border: 1px dashed #354060; |
| border-radius: 10px; |
| padding: 10px; |
| color: #91a0ca; |
| font-size: 13px; |
| } |
|
|
| .streaming-indicator { |
| display: flex; |
| gap: 4px; |
| padding: 6px 0; |
| } |
| .dot { |
| width: 6px; height: 6px; |
| background: #a78bfa; |
| border-radius: 50%; |
| animation: bounce 1.2s infinite ease-in-out; |
| } |
| .dot:nth-child(2) { animation-delay: 0.2s; } |
| .dot:nth-child(3) { animation-delay: 0.4s; } |
| @keyframes bounce { |
| 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } |
| 40% { transform: scale(1); opacity: 1; } |
| } |
|
|
| .input-dock { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| padding: 14px 16px; |
| border-top: 1px solid #232a3b; |
| background: #0e121b; |
| } |
|
|
| .file-row { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| flex-wrap: wrap; |
| } |
|
|
| .file-row input[type="file"] { |
| color: #cfd8f6; |
| font-size: 12px; |
| } |
|
|
| .upload-hidden { |
| display: none; |
| } |
|
|
| .upload-actions { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .upload-btn { |
| border: 1px solid #cfd8e5; |
| background: #ffffff; |
| color: #111827; |
| border-radius: 8px; |
| padding: 6px 10px; |
| font-size: 12px; |
| font-weight: 600; |
| cursor: pointer; |
| } |
|
|
| .upload-btn:hover:not(:disabled) { |
| border-color: #93a7c4; |
| background: #f3f7ff; |
| } |
|
|
| .upload-btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| .file-hint { |
| font-size: 12px; |
| color: #8e98bc; |
| } |
|
|
| .composer-row { |
| display: flex; |
| gap: 10px; |
| align-items: stretch; |
| } |
|
|
| .composer-row textarea { |
| flex: 1; |
| background: #12192a; |
| border: 1px solid #2b3550; |
| border-radius: 8px; |
| color: #e6ebff; |
| font-size: 13px; |
| padding: 10px 12px; |
| resize: none; |
| outline: none; |
| font-family: inherit; |
| line-height: 1.5; |
| min-height: 120px; |
| } |
| .composer-row textarea:focus { border-color: #7f93cf; } |
| .composer-row textarea:disabled { opacity: 0.5; cursor: not-allowed; } |
|
|
| .composer-row button { |
| background: #6d5dfc; |
| color: #fff; |
| border: none; |
| border-radius: 8px; |
| padding: 0 20px; |
| min-width: 120px; |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: background 0.15s; |
| white-space: nowrap; |
| } |
| .composer-row button:hover:not(:disabled) { background: #5a4ce0; } |
| .composer-row button:disabled { opacity: 0.4; cursor: not-allowed; } |
|
|
| @media (max-width: 1080px) { |
| .workspace-body { |
| grid-template-columns: 1fr; |
| } |
|
|
| .conversation-pane { |
| border-right: 0; |
| border-bottom: 1px solid #232a3b; |
| max-height: 38%; |
| } |
| } |
|
|
| |
| body { |
| background: #ffffff; |
| color: #1f2937; |
| } |
|
|
| .chat-workspace { |
| background: #ffffff; |
| border: 1px solid #d9e1ec; |
| } |
|
|
| .workspace-header, |
| .pane-title, |
| .input-dock { |
| background: #f7f9fc; |
| border-color: #d9e1ec; |
| } |
|
|
| .header-title, |
| .item-content, |
| .result-heading, |
| .result-text, |
| .plain-block, |
| .code-block, |
| .result-content { |
| color: #1f2937; |
| } |
|
|
| .header-subtitle, |
| .session-badge, |
| .item-meta, |
| .card-subtitle, |
| .running-hint, |
| .empty-hint, |
| .file-hint { |
| color: #6b7280; |
| } |
|
|
| .session-badge, |
| .summary-chip, |
| .state-pill, |
| .code-lang { |
| border-color: #cdd6e3; |
| background: #eef3f9; |
| } |
|
|
| .conversation-pane { |
| border-right: 1px solid #d9e1ec; |
| } |
|
|
| .conversation-item { |
| background: #ffffff; |
| border-color: #d9e1ec; |
| } |
|
|
| .assistant-item { |
| background: #fbfcff; |
| } |
|
|
| .assistant-item:hover { |
| border-color: #88a2c4; |
| background: #f4f8ff; |
| } |
|
|
| .active-item { |
| border-color: #5d7fae; |
| background: #e8f1ff; |
| } |
|
|
| .user-item { |
| border-color: #bfd2ea; |
| background: #f4f8ff; |
| } |
|
|
| .item-label { |
| color: #365ea8; |
| } |
|
|
| .assistant-item .item-content, |
| .assistant-item .result-rich, |
| .assistant-item .result-text, |
| .assistant-item .result-list, |
| .assistant-item .result-quote, |
| .assistant-item .result-table, |
| .assistant-item .result-table th, |
| .assistant-item .result-table td { |
| color: #0f172a; |
| } |
|
|
| .assistant-item .result-heading { |
| color: #0f172a; |
| } |
|
|
| .assistant-item .result-heading.h3, |
| .assistant-item .result-heading.h4 { |
| color: #334155; |
| } |
|
|
| .assistant-item .result-list { |
| color: #1e293b; |
| } |
|
|
| .assistant-item .result-quote { |
| background: #eef4ff; |
| border-left-color: #7c9ed6; |
| color: #1e3a5f; |
| } |
|
|
| .assistant-item .result-table { |
| background: #ffffff; |
| } |
|
|
| .assistant-item .result-table th { |
| background: #dbe8f8; |
| color: #0f172a; |
| } |
|
|
| .assistant-item .result-table tr:nth-child(even) td { |
| background: #f6f9fc; |
| } |
|
|
| .reasoning-card { |
| background: #ffffff; |
| border-color: #d9e1ec; |
| box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); |
| } |
|
|
| .thinking-card, |
| .code-card, |
| .observation-card, |
| .tool-card, |
| .result-card, |
| .error-card { |
| background: #ffffff; |
| border-color: #d9e1ec; |
| } |
|
|
| .thinking-card .card-tag, |
| .thinking-card .card-subtitle { |
| color: #6d28d9; |
| } |
|
|
| .observation-card .card-tag, |
| .observation-card .card-subtitle { |
| color: #0369a1; |
| } |
|
|
| .tool-card .card-tag, |
| .tool-card .card-subtitle { |
| color: #b45309; |
| } |
|
|
| .timeline-item::before { |
| background: #d5deeb; |
| } |
|
|
| .timeline-node { |
| background: #ffffff; |
| border-color: #8da7c7; |
| box-shadow: 0 0 0 3px rgba(141, 167, 199, 0.18); |
| } |
|
|
| .tool-preview, |
| .plain-block, |
| .result-quote, |
| .task-block, |
| .result-code-wrap, |
| .result-seq-wrap, |
| .code-grid { |
| background: #f8fafc; |
| border-color: #d4deeb; |
| color: #1f2937; |
| } |
|
|
| .planning-block { |
| border-color: #c4b5fd; |
| background: linear-gradient(180deg, #f5f3ff, #ffffff); |
| } |
|
|
| .planning-text { |
| color: #6d28d9; |
| } |
|
|
| .observation-block { |
| border-color: #cfe3f0; |
| background: #f8fbfd; |
| } |
|
|
| .observation-heading.level-1 { |
| color: #075985; |
| } |
|
|
| .observation-heading.level-2 { |
| color: #0f766e; |
| } |
|
|
| .observation-heading.level-3, |
| .observation-heading.level-4 { |
| color: #4d7c0f; |
| } |
|
|
| .observation-note { |
| border-color: #b7d7c2; |
| background: #f2fbf5; |
| color: #166534; |
| } |
|
|
| .visualization-caption { |
| color: #075985; |
| } |
|
|
| .visualization-link { |
| border-color: #cfe3f0; |
| background: #f8fbfd; |
| } |
|
|
| .visualization-image { |
| background: #f8fbfd; |
| } |
|
|
| .tool-activity-card { |
| border-color: #f3d7a2; |
| background: linear-gradient(180deg, #fffaf0, #ffffff); |
| } |
|
|
| .tool-activity-label { |
| color: #b45309; |
| } |
|
|
| .tool-activity-state.running { |
| color: #92400e; |
| background: #fff7e6; |
| border-color: #f3c778; |
| } |
|
|
| .tool-activity-state.finished { |
| color: #166534; |
| background: #effcf3; |
| border-color: #b7e4c7; |
| } |
|
|
| .tool-activity-dot { |
| background: #f59e0b; |
| } |
|
|
| .tool-activity-name { |
| color: #7c2d12; |
| } |
|
|
| .tool-activity-track { |
| background: #fff7e8; |
| border-color: #f4d7a1; |
| } |
|
|
| .tool-activity-wave { |
| background: linear-gradient(90deg, rgba(245, 158, 11, 0), rgba(245, 158, 11, 0.65), rgba(245, 158, 11, 0)); |
| } |
|
|
| .tool-activity-desc { |
| color: #5b3a10; |
| } |
|
|
| .result-table, |
| .result-table th, |
| .result-table td { |
| border-color: #d4deeb; |
| color: #1f2937; |
| } |
|
|
| .result-table th { |
| background: #eef3f9; |
| } |
|
|
| .result-table tr:nth-child(even) td { |
| background: #f9fbfd; |
| } |
|
|
| .composer-row textarea { |
| background: #ffffff; |
| border-color: #cfd8e5; |
| color: #111827; |
| } |
|
|
| .composer-row textarea:focus { |
| border-color: #6d8bb7; |
| } |
|
|
| .composer-row button { |
| background: #2563eb; |
| } |
|
|
| .composer-row button:hover:not(:disabled) { |
| background: #1d4ed8; |
| } |
|
|
| .converter-panel { |
| border: 1px solid #d4deeb; |
| border-radius: 10px; |
| background: #f8fafc; |
| padding: 10px; |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .converter-title { |
| color: #111827; |
| font-size: 13px; |
| font-weight: 600; |
| } |
|
|
| .converter-row { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .converter-input, |
| .converter-select { |
| height: 32px; |
| border-radius: 8px; |
| border: 1px solid #cfd8e5; |
| background: #ffffff; |
| color: #111827; |
| padding: 0 10px; |
| font-size: 12px; |
| } |
|
|
| .converter-input { |
| min-width: 220px; |
| } |
|
|
| .converter-select { |
| min-width: 120px; |
| } |
|
|
| .converter-file { |
| font-size: 12px; |
| color: #1f2937; |
| } |
|
|
| .secondary-btn { |
| border: 1px solid #c7d5e8; |
| background: #ffffff; |
| color: #1f2937; |
| border-radius: 8px; |
| padding: 6px 10px; |
| font-size: 12px; |
| cursor: pointer; |
| } |
|
|
| .secondary-btn:disabled { |
| opacity: 0.55; |
| cursor: not-allowed; |
| } |
|
|
| .tool-chip { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| border: 1px solid #d4deeb; |
| border-radius: 999px; |
| padding: 4px 10px; |
| font-size: 12px; |
| background: #ffffff; |
| } |
|
|
| .tool-ready { |
| border-color: #a8d0b8; |
| background: #f3fcf5; |
| } |
|
|
| .tool-missing { |
| border-color: #e5c6c6; |
| background: #fff7f7; |
| } |
|
|
| .tool-status { |
| color: #6b7280; |
| font-size: 11px; |
| } |
|
|
| .panel-notice { |
| font-size: 12px; |
| color: #374151; |
| border: 1px dashed #cfd8e5; |
| border-radius: 8px; |
| background: #ffffff; |
| padding: 6px 8px; |
| } |
|
|
| .warning-banner { |
| border: 1px solid #f5c56a; |
| background: #fffaf0; |
| color: #92400e; |
| border-radius: 12px; |
| padding: 10px 12px; |
| font-size: 12px; |
| line-height: 1.5; |
| } |
|
|
| .primary-ghost-btn { |
| border: 1px solid #2563eb; |
| background: #eff6ff; |
| color: #1d4ed8; |
| border-radius: 8px; |
| padding: 6px 10px; |
| font-size: 12px; |
| cursor: pointer; |
| } |
|
|
| .page-actions { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .section-title { |
| color: #111827; |
| font-size: 14px; |
| font-weight: 700; |
| } |
|
|
| .feature-caption { |
| color: #475569; |
| font-size: 12px; |
| line-height: 1.5; |
| } |
|
|
| .studio-page { |
| height: 100%; |
| display: flex; |
| flex-direction: column; |
| border: 1px solid #d9e1ec; |
| border-radius: 14px; |
| background: #ffffff; |
| overflow: hidden; |
| } |
|
|
| .studio-scroll { |
| flex: 1; |
| min-height: 0; |
| overflow-y: auto; |
| padding: 16px; |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| background: #f8fafc; |
| } |
|
|
| .studio-summary-grid, |
| .studio-action-grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .studio-action-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .studio-summary-card, |
| .studio-card, |
| .catalog-card { |
| border: 1px solid #d4deeb; |
| border-radius: 12px; |
| background: #ffffff; |
| padding: 14px; |
| } |
|
|
| .featured-summary, |
| .featured-card { |
| background: linear-gradient(180deg, #fffaf0, #ffffff); |
| border-color: #f1cf8a; |
| } |
|
|
| .summary-label { |
| font-size: 12px; |
| color: #64748b; |
| } |
|
|
| .summary-value { |
| margin-top: 8px; |
| font-size: 28px; |
| font-weight: 700; |
| color: #0f172a; |
| } |
|
|
| .summary-note { |
| margin-top: 8px; |
| color: #475569; |
| font-size: 12px; |
| line-height: 1.5; |
| } |
|
|
| .catalog-toolbar { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
|
|
| .catalog-search { |
| width: 100%; |
| height: 38px; |
| border-radius: 10px; |
| border: 1px solid #cfd8e5; |
| background: #ffffff; |
| color: #111827; |
| padding: 0 12px; |
| font-size: 13px; |
| } |
|
|
| .category-chip-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .category-chip { |
| border: 1px solid #d4deeb; |
| background: #ffffff; |
| color: #334155; |
| border-radius: 999px; |
| padding: 6px 10px; |
| font-size: 12px; |
| cursor: pointer; |
| } |
|
|
| .active-category-chip { |
| background: #eff6ff; |
| border-color: #93c5fd; |
| color: #1d4ed8; |
| } |
|
|
| .featured-chip { |
| border-color: #f1cf8a; |
| background: #fffaf0; |
| } |
|
|
| .catalog-groups { |
| display: flex; |
| flex-direction: column; |
| gap: 18px; |
| } |
|
|
| .catalog-group { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
|
|
| .catalog-group-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .catalog-group-title { |
| font-size: 14px; |
| font-weight: 700; |
| color: #0f172a; |
| } |
|
|
| .catalog-group-subtitle { |
| margin-top: 2px; |
| font-size: 12px; |
| color: #64748b; |
| } |
|
|
| .catalog-card-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .catalog-card { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .catalog-card-top { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 10px; |
| } |
|
|
| .catalog-card-title { |
| font-size: 15px; |
| font-weight: 700; |
| color: #111827; |
| } |
|
|
| .catalog-card-subtitle, |
| .catalog-card-desc { |
| font-size: 12px; |
| color: #64748b; |
| line-height: 1.5; |
| } |
|
|
| .catalog-badges { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| justify-content: flex-end; |
| } |
|
|
| .status-badge, |
| .source-badge, |
| .asset-pill { |
| display: inline-flex; |
| align-items: center; |
| border-radius: 999px; |
| padding: 4px 8px; |
| font-size: 11px; |
| border: 1px solid #d4deeb; |
| background: #f8fafc; |
| color: #334155; |
| } |
|
|
| .status-ready { |
| border-color: #a7f3d0; |
| background: #ecfdf5; |
| color: #047857; |
| } |
|
|
| .status-incomplete { |
| border-color: #fecaca; |
| background: #fef2f2; |
| color: #b91c1c; |
| } |
|
|
| .catalog-meta-list { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .catalog-meta-row { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| font-size: 11px; |
| color: #64748b; |
| } |
|
|
| .catalog-meta-body, |
| .catalog-meta-row code { |
| display: block; |
| border: 1px solid #e2e8f0; |
| border-radius: 8px; |
| background: #f8fafc; |
| padding: 8px 10px; |
| color: #0f172a; |
| font-size: 11px; |
| line-height: 1.5; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
|
|
| .catalog-asset-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .asset-on { |
| background: #eefbf4; |
| border-color: #b7e4c7; |
| color: #166534; |
| } |
|
|
| @media (max-width: 1280px) { |
| .studio-summary-grid, |
| .studio-action-grid, |
| .catalog-card-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| @media (max-width: 960px) { |
| .app-shell { |
| flex-direction: column; |
| } |
|
|
| .app-sidebar { |
| width: auto; |
| min-width: 0; |
| } |
|
|
| .nav-actions { |
| flex-direction: row; |
| flex-wrap: wrap; |
| } |
| } |
|
|
