| :root { |
| --chat-bg: #faf9f7; |
| --chat-surface: #ffffff; |
| --chat-ink: #111111; |
| --chat-muted: #f1f0ed; |
| --chat-border: #e7e5e4; |
| --chat-soft: rgba(17, 17, 17, 0.06); |
| } |
|
|
| body { |
| background-color: var(--chat-bg); |
| background-image: radial-gradient(circle at 20% 10%, rgba(17, 17, 17, 0.04), transparent 50%), |
| radial-gradient(circle at 85% 0%, rgba(17, 17, 17, 0.03), transparent 50%); |
| } |
|
|
| .chat-main { |
| padding-bottom: 16px; |
| } |
|
|
| .chat-shell { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| min-height: calc(100vh - 56px - 64px); |
| } |
|
|
| .chat-title { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| } |
|
|
| .chat-title-text { |
| font-size: 24px; |
| font-weight: 600; |
| color: var(--chat-ink); |
| } |
|
|
| .chat-subtitle { |
| font-size: 12px; |
| color: var(--accents-4); |
| margin-top: 4px; |
| } |
|
|
| .status-text { |
| font-size: 12px; |
| color: var(--accents-4); |
| padding: 6px 10px; |
| border-radius: 999px; |
| background: var(--chat-muted); |
| } |
|
|
| .status-text.connected { |
| color: #0f766e; |
| background: rgba(15, 118, 110, 0.12); |
| } |
|
|
| .status-text.connecting { |
| color: #b45309; |
| background: rgba(217, 119, 6, 0.14); |
| } |
|
|
| .status-text.error { |
| color: #b91c1c; |
| background: rgba(185, 28, 28, 0.12); |
| } |
|
|
| .chat-thread { |
| display: flex; |
| flex-direction: column; |
| gap: 18px; |
| min-height: 320px; |
| padding-bottom: 12px; |
| flex: 1; |
| } |
|
|
| .chat-empty { |
| text-align: center; |
| color: var(--accents-4); |
| font-size: 13px; |
| padding: 48px 0; |
| } |
|
|
| .message-row { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .message-row.user { |
| align-items: flex-end; |
| } |
|
|
| .message-row.assistant { |
| align-items: flex-start; |
| width: 100%; |
| } |
|
|
| .message-actions { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| color: var(--accents-4); |
| font-size: 12px; |
| margin-left: 2px; |
| } |
|
|
| .action-btn { |
| border: none; |
| background: transparent; |
| color: var(--accents-4); |
| font-size: 12px; |
| padding: 4px 6px; |
| border-radius: 999px; |
| cursor: pointer; |
| transition: color 0.2s ease, background 0.2s ease; |
| } |
|
|
| .action-btn:hover { |
| color: var(--chat-ink); |
| background: rgba(17, 17, 17, 0.06); |
| } |
|
|
| .message-bubble { |
| max-width: 100%; |
| font-size: 14px; |
| line-height: 1.6; |
| color: var(--chat-ink); |
| width: 100%; |
| } |
|
|
| .message-row.user .message-bubble { |
| max-width: none; |
| width: fit-content; |
| } |
|
|
| .message-row.assistant .message-content { |
| width: 100%; |
| } |
|
|
| .message-row.user .message-bubble { |
| background: #efeeea; |
| padding: 12px 16px; |
| border-radius: 999px; |
| border: 1px solid var(--chat-border); |
| } |
|
|
| .message-row.assistant .message-bubble { |
| background: transparent; |
| padding: 0; |
| } |
|
|
| .message-content.rendered img { |
| max-width: 60%; |
| max-height: 320px; |
| border-radius: 12px; |
| margin-top: 12px; |
| border: 1px solid var(--chat-border); |
| } |
|
|
| .message-content.rendered a { |
| color: inherit; |
| text-decoration: underline; |
| } |
|
|
| .message-content.rendered .inline-code { |
| background: #f3f2ef; |
| border: 1px solid var(--chat-border); |
| border-radius: 6px; |
| padding: 2px 6px; |
| font-size: 12px; |
| font-family: 'Geist Mono', monospace; |
| } |
|
|
| .message-content.rendered .code-block { |
| background: #f7f6f3; |
| border: 1px solid var(--chat-border); |
| border-radius: 12px; |
| padding: 12px 14px; |
| overflow-x: auto; |
| margin-top: 12px; |
| font-size: 12px; |
| font-family: 'Geist Mono', monospace; |
| } |
|
|
| .message-content.rendered .code-block code { |
| font-family: 'Geist Mono', monospace; |
| white-space: pre-wrap; |
| } |
|
|
| .message-content.rendered h1, |
| .message-content.rendered h2, |
| .message-content.rendered h3, |
| .message-content.rendered h4, |
| .message-content.rendered h5, |
| .message-content.rendered h6 { |
| font-weight: 600; |
| margin: 10px 0 6px; |
| line-height: 1.3; |
| } |
|
|
| .message-content.rendered h1 { font-size: 20px; } |
| .message-content.rendered h2 { font-size: 18px; } |
| .message-content.rendered h3 { font-size: 16px; } |
| .message-content.rendered h4 { font-size: 15px; } |
| .message-content.rendered h5 { font-size: 14px; } |
| .message-content.rendered h6 { font-size: 13px; } |
|
|
| .message-content.rendered p { |
| margin: 6px 0; |
| } |
|
|
| .message-content.rendered ul, |
| .message-content.rendered ol { |
| margin: 6px 0 10px; |
| padding-left: 20px; |
| } |
|
|
| .message-content.rendered li { |
| margin: 4px 0; |
| } |
|
|
| .message-content.rendered .table-wrap { |
| overflow-x: auto; |
| margin: 10px 0; |
| } |
|
|
| .message-content.rendered table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 12px; |
| } |
|
|
| .message-content.rendered th, |
| .message-content.rendered td { |
| border: 1px solid var(--chat-border); |
| padding: 6px 8px; |
| text-align: left; |
| } |
|
|
| .message-content.rendered th { |
| background: #f5f4f1; |
| font-weight: 600; |
| } |
|
|
| .think-block { |
| margin-top: 10px; |
| margin-bottom: 16px; |
| border: none; |
| padding: 0; |
| background: transparent; |
| width: 100%; |
| } |
|
|
| .think-summary { |
| cursor: pointer; |
| font-size: 12px; |
| color: var(--accents-4); |
| list-style: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .think-summary::before { |
| content: ""; |
| width: 18px; |
| height: 18px; |
| border-radius: 50%; |
| background: conic-gradient(from 180deg, #f59e0b, #f97316, #22c55e, #0ea5e9, #f59e0b); |
| border: 1px solid #fff; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 2px 8px rgba(17, 17, 17, 0.15); |
| } |
|
|
| .think-summary::after { |
| content: ""; |
| width: 6px; |
| height: 6px; |
| border-right: 2px solid var(--accents-4); |
| border-bottom: 2px solid var(--accents-4); |
| transform: rotate(45deg); |
| margin-left: 2px; |
| } |
|
|
| .think-block[open] .think-summary::after { |
| transform: rotate(225deg); |
| } |
|
|
| .think-summary::-webkit-details-marker { |
| display: none; |
| } |
|
|
| .think-content { |
| margin-top: 8px; |
| margin-left: 0; |
| padding-left: 0; |
| border-left: none; |
| font-size: 12px; |
| color: var(--accents-5); |
| line-height: 1.6; |
| max-height: 0; |
| opacity: 0; |
| overflow: hidden; |
| transition: max-height 0.25s ease, opacity 0.25s ease; |
| } |
|
|
| .think-block[open] .think-content { |
| max-height: 60vh; |
| opacity: 1; |
| overflow: auto; |
| padding-right: 4px; |
| } |
|
|
| .img-grid { |
| display: grid; |
| gap: 2px; |
| margin: 12px 0; |
| grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); |
| width: 100%; |
| max-width: 100%; |
| justify-items: stretch; |
| } |
|
|
| .img-grid > * { |
| display: block; |
| width: 100%; |
| } |
|
|
| .message-content.rendered .img-grid img { |
| width: 100%; |
| height: auto; |
| display: block; |
| max-width: 100%; |
| max-height: none; |
| margin: 0; |
| border-radius: 12px; |
| border: 1px solid var(--chat-border); |
| background: transparent; |
| } |
|
|
| .img-retry { |
| width: 100%; |
| min-height: 120px; |
| border: 1px dashed var(--chat-border); |
| border-radius: 12px; |
| background: #fafafa; |
| color: var(--accents-4); |
| font-size: 12px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: color 0.2s ease, border-color 0.2s ease; |
| } |
|
|
| .img-retry:hover { |
| color: var(--chat-ink); |
| border-color: #111; |
| } |
|
|
| .think-agents { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| width: 100%; |
| } |
|
|
| .think-agent { |
| border-radius: 12px; |
| width: 100%; |
| } |
|
|
| .think-agent summary { |
| cursor: pointer; |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--chat-ink); |
| list-style: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 4px 8px; |
| border-radius: 999px; |
| } |
|
|
| .think-agent summary::before { |
| content: ""; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: conic-gradient(from 180deg, #f59e0b, #f97316, #22c55e, #0ea5e9, #f59e0b); |
| border: 1px solid #fff; |
| box-shadow: 0 2px 8px rgba(17, 17, 17, 0.15); |
| } |
|
|
| .think-agent summary::after { |
| content: ""; |
| width: 6px; |
| height: 6px; |
| border-right: 2px solid var(--accents-4); |
| border-bottom: 2px solid var(--accents-4); |
| transform: rotate(45deg); |
| margin-left: 4px; |
| } |
|
|
| .think-agent[open] summary::after { |
| transform: rotate(225deg); |
| } |
|
|
| .think-agent summary::-webkit-details-marker { |
| display: none; |
| } |
|
|
| @keyframes thinkGlow { |
| 0% { |
| box-shadow: 0 0 0 rgba(255, 255, 255, 0); |
| background: transparent; |
| } |
| 50% { |
| box-shadow: 0 0 12px rgba(255, 255, 255, 0.9); |
| background: rgba(255, 255, 255, 0.8); |
| } |
| 100% { |
| box-shadow: 0 0 0 rgba(255, 255, 255, 0); |
| background: transparent; |
| } |
| } |
|
|
| .think-block[data-thinking="true"] .think-agent summary { |
| animation: thinkGlow 1.4s ease-in-out infinite; |
| } |
|
|
| .think-agent-items { |
| margin-top: 10px; |
| margin-left: 0; |
| padding-left: 0; |
| border-left: none; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| width: 100%; |
| } |
|
|
| .think-rollout-group { |
| border: 1px solid var(--chat-border); |
| border-radius: 14px; |
| padding: 8px 12px; |
| background: #fff; |
| width: 100%; |
| } |
|
|
| .think-rollout-group summary { |
| cursor: pointer; |
| font-size: 12px; |
| color: var(--chat-ink); |
| list-style: none; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| width: 100%; |
| } |
|
|
| .think-rollout-group summary::-webkit-details-marker { |
| display: none; |
| } |
|
|
| .think-rollout-group summary::after { |
| content: ""; |
| width: 6px; |
| height: 6px; |
| border-right: 2px solid var(--accents-4); |
| border-bottom: 2px solid var(--accents-4); |
| transform: rotate(45deg); |
| transition: transform 0.2s ease; |
| } |
|
|
| .think-rollout-group[open] summary::after { |
| transform: rotate(225deg); |
| } |
|
|
| .think-rollout-title { |
| font-weight: 600; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .think-rollout-title::before { |
| content: ""; |
| width: 18px; |
| height: 18px; |
| border-radius: 50%; |
| background: conic-gradient(from 180deg, #f59e0b, #f97316, #22c55e, #0ea5e9, #f59e0b); |
| border: 1px solid #fff; |
| box-shadow: 0 2px 8px rgba(17, 17, 17, 0.15); |
| } |
|
|
| .think-rollout-body { |
| margin-top: 8px; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .think-item-row { |
| border-left: none; |
| padding-left: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .think-item-type { |
| font-size: 12px; |
| color: var(--accents-4); |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .think-item-type::before { |
| content: ""; |
| width: 14px; |
| height: 14px; |
| background-color: var(--accents-4); |
| mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nYmxhY2snPjxwYXRoIGQ9J005IDIxaDZ2LTFIOXYxem0zLTIwYTcgNyAwIDAwLTQgMTIuNzRWMTdhMSAxIDAgMDAxIDFoNmExIDEgMCAwMDEtMXYtMy4yNkE3IDcgMCAwMDEyIDF6Jy8+PC9zdmc+"); |
| mask-size: contain; |
| mask-repeat: no-repeat; |
| mask-position: center; |
| -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nYmxhY2snPjxwYXRoIGQ9J005IDIxaDZ2LTFIOXYxem0zLTIwYTcgNyAwIDAwLTQgMTIuNzRWMTdhMSAxIDAgMDAxIDFoNmExIDEgMCAwMDEtMXYtMy4yNkE3IDcgMCAwMDEyIDF6Jy8+PC9zdmc+"); |
| -webkit-mask-size: contain; |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-position: center; |
| } |
|
|
| .think-item-type[data-type="websearch"]::before { |
| mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nYmxhY2snPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgZD0nTTkgM2E2IDYgMCAxMDQuNDcyIDEwLjAxNmwzLjI1NiAzLjI1NmExIDEgMCAwMDEuNDE2LTEuNDE2bC0zLjI1Ni0zLjI1NkE2IDYgMCAwMDkgM3ptMCAyYTQgNCAwIDEwMCA4IDQgNCAwIDAwMC04eicgY2xpcC1ydWxlPSdldmVub2RkJy8+PC9zdmc+"); |
| -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nYmxhY2snPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgZD0nTTkgM2E2IDYgMCAxMDQuNDcyIDEwLjAxNmwzLjI1NiAzLjI1NmExIDEgMCAwMDEuNDE2LTEuNDE2bC0zLjI1Ni0zLjI1NkE2IDYgMCAwMDkgM3ptMCAyYTQgNCAwIDEwMCA4IDQgNCAwIDAwMC04eicgY2xpcC1ydWxlPSdldmVub2RkJy8+PC9zdmc+"); |
| } |
|
|
| .think-item-type[data-type="agentthink"]::before { |
| mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nYmxhY2snPjxwYXRoIGQ9J00xMSAyaDJ2MmgtMnonLz48cGF0aCBkPSdNNyA2aDEwYTMgMyAwIDAxMyAzdjhhMyAzIDAgMDEtMyAzSDdhMyAzIDAgMDEtMy0zVjlhMyAzIDAgMDEzLTN6bTIgNWExLjUgMS41IDAgMTAwIDMgMS41IDEuNSAwIDAwMC0zem02IDBhMS41IDEuNSAwIDEwMCAzIDEuNSAxLjUgMCAwMDAtM3onLz48cGF0aCBkPSdNNCAxMGgydjRINHonLz48cGF0aCBkPSdNMTggMTBoMnY0aC0yeicvPjwvc3ZnPg=="); |
| -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nYmxhY2snPjxwYXRoIGQ9J00xMSAyaDJ2MmgtMnonLz48cGF0aCBkPSdNNyA2aDEwYTMgMyAwIDAxMyAzdjhhMyAzIDAgMDEtMyAzSDdhMyAzIDAgMDEtMy0zVjlhMyAzIDAgMDEzLTN6bTIgNWExLjUgMS41IDAgMTAwIDMgMS41IDEuNSAwIDAwMC0zem02IDBhMS41IDEuNSAwIDEwMCAzIDEuNSAxLjUgMCAwMDAtM3onLz48cGF0aCBkPSdNNCAxMGgydjRINHonLz48cGF0aCBkPSdNMTggMTBoMnY0aC0yeicvPjwvc3ZnPg=="); |
| } |
|
|
| .think-item-body { |
| font-size: 12px; |
| color: var(--accents-5); |
| line-height: 1.6; |
| } |
|
|
| .composer-shell { |
| position: sticky; |
| bottom: 8px; |
| background: transparent; |
| backdrop-filter: none; |
| padding: 0; |
| border-radius: 0; |
| border: none; |
| box-shadow: none; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| margin-top: auto; |
| } |
|
|
| .composer-input { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| background: var(--chat-surface); |
| border: 1px solid var(--chat-border); |
| border-radius: 999px; |
| padding: 10px 14px; |
| box-shadow: 0 18px 32px rgba(17, 17, 17, 0.08); |
| } |
|
|
| .icon-btn { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| border: 1px solid var(--chat-border); |
| background: #fff; |
| color: var(--chat-ink); |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| transition: background 0.2s ease, border 0.2s ease; |
| } |
|
|
| .icon-btn:hover { |
| border-color: #111; |
| } |
|
|
| .file-input { |
| display: none; |
| } |
|
|
| .composer-textarea { |
| flex: 1; |
| min-height: 40px; |
| height: 40px; |
| max-height: 160px; |
| border: none; |
| outline: none; |
| resize: none; |
| font-size: 14px; |
| line-height: 1.4; |
| padding: 10px 0; |
| background: transparent; |
| color: var(--chat-ink); |
| overflow-y: auto; |
| } |
|
|
| .composer-actions { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .model-chip { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 10px; |
| border-radius: 999px; |
| border: 1px solid var(--chat-border); |
| background: var(--chat-surface); |
| font-size: 12px; |
| height: 36px; |
| } |
|
|
| .model-select { |
| border: none; |
| background: transparent; |
| font-size: 12px; |
| color: var(--chat-ink); |
| outline: none; |
| padding: 0; |
| appearance: none; |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| } |
|
|
| .send-btn { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| border: 1px solid #111; |
| background: #111; |
| color: #fff; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| transition: opacity 0.2s ease; |
| } |
|
|
| .send-btn:disabled { |
| opacity: 0.5; |
| } |
|
|
| .popover { |
| position: relative; |
| } |
|
|
| .settings-panel { |
| position: absolute; |
| right: 0; |
| bottom: calc(100% + 12px); |
| min-width: 260px; |
| max-width: 320px; |
| background: #fff; |
| border: 1px solid var(--chat-border); |
| border-radius: 14px; |
| padding: 14px; |
| box-shadow: 0 20px 40px rgba(17, 17, 17, 0.12); |
| z-index: 20; |
| } |
|
|
| .settings-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .settings-block { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .settings-block-full { |
| grid-column: span 2; |
| } |
|
|
| .field-label { |
| font-size: 11px; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--accents-4); |
| } |
|
|
| .range-row { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .range-value { |
| font-size: 12px; |
| color: var(--accents-5); |
| min-width: 40px; |
| text-align: right; |
| } |
|
|
| .chat-input { |
| min-height: 80px; |
| } |
|
|
| .file-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 4px 10px; |
| border-radius: 999px; |
| border: 1px solid var(--chat-border); |
| background: #fff; |
| font-size: 12px; |
| color: var(--chat-ink); |
| max-width: 160px; |
| height: 28px; |
| flex-shrink: 0; |
| } |
|
|
| .file-name { |
| max-width: 220px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .file-remove { |
| border: none; |
| background: transparent; |
| font-size: 14px; |
| line-height: 1; |
| color: var(--accents-4); |
| } |
|
|
| .meta-btn { |
| border: 1px solid var(--chat-border); |
| background: var(--chat-surface); |
| color: var(--chat-ink); |
| font-size: 12px; |
| padding: 6px 12px; |
| border-radius: 999px; |
| transition: border 0.2s ease; |
| } |
|
|
| .meta-btn:hover { |
| border-color: #111; |
| } |
|
|
| @media (max-width: 720px) { |
| .message-bubble { |
| max-width: 100%; |
| } |
|
|
| .composer-input { |
| align-items: flex-start; |
| } |
|
|
| .settings-panel { |
| right: auto; |
| left: 0; |
| width: 92vw; |
| } |
| } |
|
|
