Spaces:
Configuration error
Configuration error
| :root { | |
| color-scheme: dark; | |
| --bg: #0f0f10; | |
| --panel: #171719; | |
| --panel-2: #1d1d20; | |
| --panel-3: #242428; | |
| --text: #f2f2f3; | |
| --muted: #a7a7ac; | |
| --subtle: #73737a; | |
| --line: #303036; | |
| --line-strong: #4a4a52; | |
| --shadow: 0 24px 80px rgba(0, 0, 0, 0.45); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body, | |
| #root { | |
| height: 100%; | |
| min-height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| color: var(--text); | |
| background: var(--bg); | |
| font-family: | |
| ui-sans-serif, | |
| -apple-system, | |
| BlinkMacSystemFont, | |
| "Segoe UI", | |
| sans-serif; | |
| } | |
| button, | |
| input, | |
| select { | |
| font: inherit; | |
| } | |
| button { | |
| cursor: pointer; | |
| } | |
| .app-shell { | |
| display: grid; | |
| grid-template-columns: 300px minmax(0, 1fr); | |
| height: 100vh; | |
| min-height: 100vh; | |
| overflow: hidden; | |
| } | |
| .rail { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 22px; | |
| border-right: 1px solid var(--line); | |
| background: #121214; | |
| } | |
| .brand { | |
| display: grid; | |
| gap: 10px; | |
| padding-bottom: 8px; | |
| } | |
| .label { | |
| color: var(--muted); | |
| font-size: 0.74rem; | |
| font-weight: 700; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| } | |
| h1, | |
| h2, | |
| p { | |
| margin: 0; | |
| } | |
| h1 { | |
| max-width: 14rem; | |
| font-size: 1.55rem; | |
| line-height: 1.08; | |
| letter-spacing: 0; | |
| } | |
| h2 { | |
| font-size: 1.45rem; | |
| line-height: 1.18; | |
| letter-spacing: 0; | |
| } | |
| p { | |
| color: var(--muted); | |
| line-height: 1.55; | |
| } | |
| .control { | |
| display: grid; | |
| gap: 8px; | |
| color: var(--muted); | |
| font-size: 0.86rem; | |
| font-weight: 650; | |
| } | |
| .mode-block { | |
| display: grid; | |
| gap: 9px; | |
| } | |
| .mode-block > span { | |
| color: var(--muted); | |
| font-size: 0.86rem; | |
| font-weight: 650; | |
| } | |
| .mode-grid { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .mode-card { | |
| display: grid; | |
| gap: 4px; | |
| width: 100%; | |
| padding: 11px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| color: var(--muted); | |
| background: var(--panel); | |
| text-align: left; | |
| } | |
| .mode-card strong { | |
| color: var(--text); | |
| font-size: 0.95rem; | |
| } | |
| .mode-card small { | |
| color: var(--muted); | |
| line-height: 1.35; | |
| } | |
| .mode-card:hover, | |
| .mode-card.active { | |
| border-color: var(--line-strong); | |
| background: var(--panel-2); | |
| } | |
| input, | |
| select { | |
| width: 100%; | |
| min-height: 42px; | |
| padding: 10px 12px; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| color: var(--text); | |
| background: var(--panel); | |
| outline: none; | |
| } | |
| input:focus, | |
| select:focus { | |
| border-color: var(--line-strong); | |
| } | |
| input:disabled, | |
| select:disabled { | |
| color: var(--subtle); | |
| background: #141416; | |
| } | |
| .quick-list { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .quick-list span { | |
| color: var(--muted); | |
| font-size: 0.86rem; | |
| font-weight: 650; | |
| } | |
| .quick-list button, | |
| .ghost, | |
| .empty-actions button { | |
| min-height: 40px; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| color: var(--text); | |
| background: var(--panel); | |
| text-align: left; | |
| } | |
| .quick-list button, | |
| .ghost { | |
| padding: 9px 11px; | |
| } | |
| .quick-list button:hover, | |
| .ghost:hover, | |
| .empty-actions button:hover, | |
| .search-form button:hover { | |
| border-color: var(--line-strong); | |
| background: var(--panel-2); | |
| } | |
| button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.48; | |
| } | |
| .ghost { | |
| text-align: center; | |
| } | |
| .chat-pane { | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr) auto; | |
| height: 100vh; | |
| min-width: 0; | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| .search-pane { | |
| grid-template-rows: auto minmax(0, 1fr); | |
| } | |
| .top-stack { | |
| min-width: 0; | |
| } | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 22px 26px; | |
| border-bottom: 1px solid var(--line); | |
| background: rgba(15, 15, 16, 0.92); | |
| } | |
| .topbar p { | |
| max-width: 620px; | |
| margin-top: 5px; | |
| font-size: 0.92rem; | |
| } | |
| .mode-strip { | |
| padding: 10px 26px; | |
| border-bottom: 1px solid var(--line); | |
| color: var(--muted); | |
| background: #101012; | |
| font-size: 0.9rem; | |
| } | |
| .conversation-strip { | |
| border-bottom-style: dashed; | |
| background: #141416; | |
| } | |
| .api-pill { | |
| flex: 0 0 auto; | |
| padding: 8px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| color: var(--muted); | |
| background: var(--panel); | |
| font-size: 0.84rem; | |
| } | |
| .thread { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 24px 26px; | |
| } | |
| .mode-conversation .topbar { | |
| background: #121214; | |
| } | |
| .conversation-thread { | |
| background: | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px, | |
| var(--bg); | |
| } | |
| .conversation-empty { | |
| border-style: dashed; | |
| } | |
| .empty { | |
| display: grid; | |
| gap: 16px; | |
| max-width: 780px; | |
| padding: 24px; | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| background: var(--panel); | |
| box-shadow: var(--shadow); | |
| } | |
| .empty-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .empty-actions button { | |
| padding: 9px 12px; | |
| } | |
| .search-workspace { | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 26px; | |
| } | |
| .search-form { | |
| display: grid; | |
| gap: 10px; | |
| max-width: 1040px; | |
| padding: 18px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: var(--panel); | |
| box-shadow: var(--shadow); | |
| } | |
| .search-input-row { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| gap: 10px; | |
| } | |
| .search-input-row input { | |
| min-height: 58px; | |
| border-radius: 14px; | |
| font-size: 1.02rem; | |
| } | |
| .search-form button { | |
| min-width: 112px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 14px; | |
| color: var(--bg); | |
| background: var(--text); | |
| font-weight: 750; | |
| } | |
| .search-hints { | |
| color: var(--muted); | |
| font-size: 0.9rem; | |
| } | |
| .search-hints span { | |
| color: var(--text); | |
| } | |
| .search-stage, | |
| .search-error, | |
| .search-empty, | |
| .search-summary, | |
| .search-result-group { | |
| max-width: 1040px; | |
| } | |
| .search-stage { | |
| margin-top: 16px; | |
| } | |
| .search-error { | |
| margin-top: 16px; | |
| padding: 12px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 12px; | |
| color: var(--text); | |
| background: var(--panel-2); | |
| } | |
| .search-empty { | |
| display: grid; | |
| gap: 8px; | |
| margin-top: 18px; | |
| padding: 20px; | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| background: #141416; | |
| } | |
| .search-summary { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| gap: 8px; | |
| margin-top: 18px; | |
| padding: 12px 0; | |
| color: var(--muted); | |
| } | |
| .search-summary strong { | |
| color: var(--text); | |
| font-size: 1.4rem; | |
| } | |
| .search-summary small { | |
| flex-basis: 100%; | |
| color: var(--subtle); | |
| } | |
| .search-results { | |
| display: grid; | |
| gap: 18px; | |
| margin-top: 6px; | |
| padding-bottom: 28px; | |
| } | |
| .search-result-group { | |
| display: grid; | |
| gap: 10px; | |
| padding: 14px; | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| background: var(--panel); | |
| } | |
| .result-group-heading { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .result-group-heading h3 { | |
| margin: 0; | |
| color: var(--text); | |
| font-size: 1rem; | |
| line-height: 1.35; | |
| } | |
| .result-group-heading span { | |
| flex: 0 0 auto; | |
| color: var(--muted); | |
| font-size: 0.84rem; | |
| } | |
| .result-list { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .result-card { | |
| display: grid; | |
| gap: 8px; | |
| padding: 14px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: var(--panel-2); | |
| } | |
| .result-card a { | |
| width: fit-content; | |
| color: var(--text); | |
| font-weight: 750; | |
| text-decoration: none; | |
| } | |
| .result-card a:hover { | |
| text-decoration: underline; | |
| } | |
| .result-card p { | |
| color: var(--muted); | |
| font-size: 0.95rem; | |
| line-height: 1.65; | |
| white-space: pre-wrap; | |
| } | |
| .message { | |
| display: grid; | |
| grid-template-columns: 48px minmax(0, 1fr); | |
| gap: 12px; | |
| align-items: start; | |
| } | |
| .avatar { | |
| display: grid; | |
| place-items: center; | |
| width: 48px; | |
| height: 36px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| color: var(--muted); | |
| background: var(--panel); | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| } | |
| .bubble { | |
| max-width: 960px; | |
| padding: 16px; | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| background: var(--panel); | |
| } | |
| .message.user .bubble { | |
| background: #141416; | |
| } | |
| .message-content { | |
| color: var(--text); | |
| line-height: 1.62; | |
| } | |
| .stage-line { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: fit-content; | |
| margin-bottom: 10px; | |
| padding: 7px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| color: var(--muted); | |
| background: #141416; | |
| font-size: 0.84rem; | |
| font-weight: 650; | |
| } | |
| .stage-line span { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 999px; | |
| background: var(--muted); | |
| animation: stage-pulse 1s ease-in-out infinite; | |
| } | |
| @keyframes stage-pulse { | |
| 0%, | |
| 100% { | |
| opacity: 0.4; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| } | |
| .message-content p, | |
| .message-content li { | |
| color: var(--text); | |
| } | |
| .message-content h1, | |
| .message-content h2, | |
| .message-content h3 { | |
| margin: 12px 0 8px; | |
| font-size: 1.06rem; | |
| line-height: 1.3; | |
| } | |
| .message-content ul, | |
| .message-content ol { | |
| padding-left: 20px; | |
| } | |
| .muted { | |
| color: var(--muted); | |
| } | |
| .block { | |
| display: block; | |
| padding: 12px; | |
| } | |
| .evidence { | |
| display: grid; | |
| gap: 10px; | |
| margin-top: 16px; | |
| } | |
| .rewrite-card { | |
| display: grid; | |
| gap: 6px; | |
| padding: 12px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: #141416; | |
| } | |
| .rewrite-card span { | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| font-weight: 750; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .rewrite-card p { | |
| color: var(--text); | |
| font-size: 0.95rem; | |
| } | |
| .metrics { | |
| display: grid; | |
| grid-template-columns: repeat(5, minmax(0, 1fr)); | |
| gap: 8px; | |
| } | |
| .metric { | |
| min-width: 0; | |
| padding: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| background: var(--panel-2); | |
| } | |
| .metric span, | |
| .source-item span { | |
| display: block; | |
| color: var(--muted); | |
| font-size: 0.76rem; | |
| } | |
| .metric strong { | |
| display: block; | |
| margin-top: 4px; | |
| overflow: hidden; | |
| color: var(--text); | |
| font-size: 0.9rem; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| details { | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: #141416; | |
| } | |
| summary { | |
| padding: 11px 12px; | |
| color: var(--text); | |
| cursor: pointer; | |
| font-size: 0.92rem; | |
| font-weight: 700; | |
| } | |
| .source-groups { | |
| display: grid; | |
| gap: 8px; | |
| padding: 0 10px 10px; | |
| } | |
| .source-group { | |
| background: var(--panel); | |
| } | |
| .source-group summary { | |
| color: var(--muted); | |
| } | |
| .source-group summary span { | |
| color: var(--subtle); | |
| font-weight: 500; | |
| } | |
| .source-list { | |
| display: grid; | |
| gap: 12px; | |
| padding: 0 10px 10px; | |
| } | |
| .source-item { | |
| display: grid; | |
| gap: 8px; | |
| padding: 14px; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| background: var(--panel-2); | |
| } | |
| .source-item a { | |
| color: var(--text); | |
| font-weight: 700; | |
| text-decoration: none; | |
| } | |
| .source-item a:hover { | |
| text-decoration: underline; | |
| } | |
| .source-item p { | |
| color: var(--muted); | |
| font-size: 0.95rem; | |
| line-height: 1.65; | |
| white-space: pre-wrap; | |
| } | |
| pre { | |
| max-height: 360px; | |
| margin: 0; | |
| overflow: auto; | |
| padding: 12px; | |
| border-top: 1px solid var(--line); | |
| color: var(--muted); | |
| background: #0d0d0e; | |
| font-size: 0.82rem; | |
| } | |
| .composer { | |
| position: sticky; | |
| bottom: 0; | |
| z-index: 5; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| gap: 10px; | |
| padding: 18px 26px 22px; | |
| border-top: 1px solid var(--line); | |
| background: rgba(15, 15, 16, 0.94); | |
| } | |
| .composer input { | |
| min-height: 50px; | |
| border-radius: 14px; | |
| } | |
| .composer button, | |
| .gate-panel button { | |
| min-width: 108px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 14px; | |
| color: var(--bg); | |
| background: var(--text); | |
| font-weight: 750; | |
| } | |
| .composer button:disabled { | |
| cursor: wait; | |
| opacity: 0.45; | |
| } | |
| .conversation-composer { | |
| background: #121214; | |
| } | |
| .gate { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 20; | |
| display: grid; | |
| place-items: center; | |
| padding: 20px; | |
| background: rgba(5, 5, 6, 0.82); | |
| backdrop-filter: blur(18px); | |
| } | |
| .gate-panel { | |
| display: grid; | |
| gap: 14px; | |
| width: min(440px, 100%); | |
| padding: 24px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 18px; | |
| background: var(--panel); | |
| box-shadow: var(--shadow); | |
| } | |
| .gate-panel button { | |
| min-height: 46px; | |
| } | |
| .form-error { | |
| color: var(--text); | |
| padding: 10px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 10px; | |
| background: var(--panel-3); | |
| } | |
| @media (max-width: 900px) { | |
| body { | |
| overflow: auto; | |
| } | |
| .app-shell { | |
| grid-template-columns: 1fr; | |
| height: auto; | |
| overflow: visible; | |
| } | |
| .rail { | |
| max-height: none; | |
| border-right: 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .chat-pane { | |
| height: calc(100vh - 1px); | |
| } | |
| .metrics { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .search-workspace { | |
| padding: 18px; | |
| } | |
| } | |
| @media (max-width: 620px) { | |
| .topbar, | |
| .thread, | |
| .composer { | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| } | |
| .message { | |
| grid-template-columns: 1fr; | |
| } | |
| .avatar { | |
| width: fit-content; | |
| padding: 0 12px; | |
| } | |
| .composer { | |
| grid-template-columns: 1fr; | |
| } | |
| .search-input-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .search-form button { | |
| min-height: 46px; | |
| } | |
| .composer button { | |
| min-height: 46px; | |
| } | |
| } | |