| .app-shell { |
| display: grid; |
| grid-template-rows: auto 1fr auto; |
| width: var(--ui-canvas-width); |
| height: var(--ui-canvas-height); |
| min-height: 0; |
| transform: scale(var(--ui-scale)); |
| transform-origin: top left; |
| } |
|
|
| .topbar { |
| position: relative; |
| z-index: 2; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| padding: 13px 22px; |
| border-bottom: 1px solid var(--line); |
| background: rgba(8, 12, 20, 0.86); |
| backdrop-filter: blur(22px) saturate(1.16); |
| } |
|
|
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 0; |
| min-width: 0; |
| } |
|
|
| .brand h1 { |
| margin: 0; |
| color: var(--accent-strong); |
| font-size: var(--brand-font-size); |
| line-height: 1.2; |
| font-weight: 720; |
| } |
|
|
| .topbar-status { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| flex-wrap: wrap; |
| gap: 8px; |
| min-width: 0; |
| } |
|
|
| .status-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 7px; |
| min-width: 0; |
| min-height: 28px; |
| padding: 0 10px; |
| border: 1px solid var(--line); |
| border-radius: 999px; |
| color: var(--text-soft); |
| background: rgba(148, 163, 184, 0.07); |
| font-size: 12px; |
| white-space: nowrap; |
| } |
|
|
| .scale-toggle { |
| justify-content: center; |
| cursor: pointer; |
| transition: |
| border-color 180ms ease, |
| background 180ms ease, |
| color 180ms ease, |
| transform 180ms ease; |
| } |
|
|
| .scale-toggle:hover { |
| border-color: var(--line-strong); |
| color: var(--accent-strong); |
| background: rgba(var(--accent-rgb), 0.11); |
| transform: translateY(-1px); |
| } |
|
|
| .server-dot { |
| width: 7px; |
| height: 7px; |
| border-radius: 50%; |
| background: var(--accent); |
| box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.56); |
| } |
|
|
| #active-model-label { |
| max-width: var(--model-label-width); |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .chat-scroll { |
| min-height: 0; |
| overflow-y: auto; |
| scroll-behavior: smooth; |
| } |
|
|
| .message-list { |
| width: min(var(--chat-width), 100%); |
| min-height: 100%; |
| margin: 0 auto; |
| padding: |
| var(--message-list-pad-top) |
| var(--message-list-pad-x) |
| var(--message-list-pad-bottom); |
| } |
|
|
| .welcome-panel { |
| width: min(var(--welcome-width), 100%); |
| max-width: var(--welcome-width); |
| margin: var(--welcome-offset-top) auto var(--welcome-offset-bottom); |
| padding: 0; |
| color: var(--muted-strong); |
| text-align: center; |
| animation: panel-rise 320ms cubic-bezier(0.2, 0.8, 0.2, 1); |
| } |
|
|
| .welcome-kicker { |
| width: max-content; |
| margin: 0 auto 12px; |
| color: var(--accent-strong); |
| font-size: 12px; |
| font-weight: 740; |
| letter-spacing: 0; |
| text-transform: uppercase; |
| } |
|
|
| .welcome-panel h2 { |
| margin: 0; |
| color: var(--accent-strong); |
| font-size: var(--welcome-heading-size); |
| line-height: 1.12; |
| font-weight: 720; |
| } |
|
|
| .model-picker-panel { |
| margin-top: 24px; |
| padding: 14px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(148, 163, 184, 0.035)), |
| rgba(13, 20, 32, 0.9); |
| box-shadow: var(--shadow); |
| text-align: left; |
| } |
|
|
| .start-select-control { |
| position: relative; |
| display: grid; |
| grid-template-columns: auto 1fr; |
| align-items: center; |
| gap: 12px; |
| min-height: 42px; |
| padding: 4px 4px 4px 12px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: rgba(148, 163, 184, 0.07); |
| } |
|
|
| .start-select-control > span { |
| color: var(--accent-strong); |
| font-size: 12px; |
| font-weight: 700; |
| text-transform: uppercase; |
| } |
|
|
| .native-select { |
| display: none !important; |
| } |
|
|
| .custom-select { |
| position: relative; |
| min-width: 0; |
| width: 100%; |
| } |
|
|
| .custom-select-trigger { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| align-items: center; |
| gap: 10px; |
| width: 100%; |
| min-height: 34px; |
| padding: 0 10px 0 12px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| color: var(--text); |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(148, 163, 184, 0.04)), |
| rgba(13, 20, 32, 0.94); |
| cursor: pointer; |
| text-align: left; |
| transition: |
| border-color 180ms ease, |
| background 180ms ease, |
| color 180ms ease, |
| box-shadow 180ms ease; |
| } |
|
|
| .custom-select-trigger:hover, |
| .custom-select.is-open .custom-select-trigger { |
| border-color: rgba(var(--accent-rgb), 0.46); |
| color: var(--accent-strong); |
| background: |
| linear-gradient(180deg, rgba(var(--accent-rgb), 0.13), rgba(255, 255, 255, 0.04)), |
| rgba(13, 20, 32, 0.98); |
| box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); |
| } |
|
|
| .custom-select-trigger:disabled { |
| cursor: not-allowed; |
| opacity: 0.55; |
| box-shadow: none; |
| } |
|
|
| .custom-select-trigger > span:first-child { |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .custom-select-chevron { |
| display: grid; |
| place-items: center; |
| width: 16px; |
| height: 16px; |
| color: var(--accent-strong); |
| font-size: 11px; |
| transition: transform 180ms ease; |
| } |
|
|
| .custom-select.is-open .custom-select-chevron { |
| transform: rotate(180deg); |
| } |
|
|
| .custom-select-menu { |
| position: absolute; |
| top: calc(100% + 6px); |
| left: 0; |
| right: 0; |
| z-index: 30; |
| display: grid; |
| gap: 2px; |
| max-height: var(--select-menu-max-height); |
| overflow: auto; |
| padding: 5px; |
| border: 1px solid var(--line-strong); |
| border-radius: var(--radius-lg); |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(148, 163, 184, 0.035)), |
| rgba(8, 13, 22, 0.98); |
| box-shadow: |
| 0 22px 54px rgba(0, 0, 0, 0.42), |
| inset 0 1px 0 rgba(255, 255, 255, 0.06); |
| } |
|
|
| .custom-select-menu[hidden] { |
| display: none; |
| } |
|
|
| .composer-toolbar .custom-select-menu { |
| top: auto; |
| bottom: calc(100% + 6px); |
| } |
|
|
| .custom-select-option { |
| display: grid; |
| gap: 3px; |
| width: 100%; |
| min-height: 36px; |
| padding: 9px 10px; |
| border: 1px solid transparent; |
| border-radius: var(--radius-md); |
| color: var(--text-soft); |
| background: transparent; |
| cursor: pointer; |
| text-align: left; |
| } |
|
|
| .custom-select-option:hover, |
| .custom-select-option:focus-visible { |
| outline: 0; |
| border-color: rgba(var(--accent-rgb), 0.3); |
| color: var(--text); |
| background: rgba(var(--accent-rgb), 0.11); |
| } |
|
|
| .custom-select-option.is-selected { |
| border-color: rgba(var(--accent-rgb), 0.42); |
| color: var(--accent-strong); |
| background: rgba(var(--accent-rgb), 0.15); |
| } |
|
|
| .custom-select-option-label { |
| min-width: 0; |
| overflow: hidden; |
| font-size: 13px; |
| font-weight: 700; |
| line-height: 1.25; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .custom-select-option-meta { |
| min-width: 0; |
| overflow: hidden; |
| color: var(--muted); |
| font-family: var(--mono); |
| font-size: 11px; |
| line-height: 1.35; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .start-model-info { |
| margin: 10px 2px 12px; |
| color: var(--muted); |
| font-family: var(--mono); |
| font-size: 12px; |
| line-height: 1.45; |
| overflow-wrap: anywhere; |
| } |
|
|
| .start-model-list { |
| display: grid; |
| gap: 2px; |
| max-height: 244px; |
| overflow: auto; |
| padding: 4px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: rgba(2, 6, 13, 0.28); |
| } |
|
|
| .start-model-row { |
| display: grid; |
| gap: 4px; |
| width: 100%; |
| padding: 11px 12px; |
| border: 1px solid transparent; |
| border-radius: var(--radius-md); |
| color: var(--text-soft); |
| background: transparent; |
| cursor: pointer; |
| text-align: left; |
| transition: |
| background 180ms ease, |
| border-color 180ms ease, |
| color 180ms ease, |
| transform 180ms ease; |
| } |
|
|
| .start-model-row:hover { |
| transform: translateY(-1px); |
| border-color: var(--line); |
| background: rgba(148, 163, 184, 0.08); |
| } |
|
|
| .start-model-row.is-active { |
| border-color: rgba(var(--accent-rgb), 0.44); |
| color: var(--text); |
| background: rgba(var(--accent-rgb), 0.13); |
| } |
|
|
| .start-model-row:disabled { |
| cursor: not-allowed; |
| opacity: 0.55; |
| transform: none; |
| } |
|
|
| .start-model-name { |
| font-size: 14px; |
| font-weight: 700; |
| line-height: 1.25; |
| } |
|
|
| .start-model-path { |
| color: var(--muted); |
| font-family: var(--mono); |
| font-size: 11px; |
| line-height: 1.35; |
| overflow-wrap: anywhere; |
| } |
|
|
| .message { |
| display: flex; |
| margin: 18px 0; |
| animation: message-in 210ms cubic-bezier(0.2, 0.8, 0.2, 1); |
| } |
|
|
| .message-user { |
| justify-content: flex-end; |
| } |
|
|
| .message-assistant { |
| justify-content: flex-start; |
| } |
|
|
| .message-inner { |
| width: min(var(--message-width), 100%); |
| } |
|
|
| .message-user .message-inner { |
| width: min(var(--user-message-width), 86%); |
| } |
|
|
| .message-meta { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| min-height: 18px; |
| margin: 0 2px 6px; |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .message-user .message-meta { |
| justify-content: flex-end; |
| } |
|
|
| .message-actions { |
| position: relative; |
| display: flex; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 7px; |
| min-height: 24px; |
| margin: 7px 2px 0; |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .message-user .message-actions { |
| justify-content: flex-end; |
| } |
|
|
| .message-action-button { |
| min-height: 24px; |
| padding: 3px 0; |
| color: var(--muted-strong); |
| background: transparent; |
| cursor: pointer; |
| transition: |
| color 160ms ease, |
| opacity 160ms ease; |
| } |
|
|
| .message-action-button:hover:not(:disabled) { |
| color: var(--accent-strong); |
| } |
|
|
| .message-action-button:disabled { |
| cursor: not-allowed; |
| opacity: 0.45; |
| } |
|
|
| .message-action-separator { |
| width: 5px; |
| height: 5px; |
| margin: 0 2px; |
| border-radius: 999px; |
| background: rgba(var(--accent-rgb), 0.48); |
| } |
|
|
| .message-action-tokens { |
| color: var(--muted); |
| font-variant-numeric: tabular-nums; |
| white-space: nowrap; |
| } |
|
|
| .message-action-speed { |
| color: var(--accent-strong); |
| font-family: var(--mono); |
| font-variant-numeric: tabular-nums; |
| white-space: nowrap; |
| } |
|
|
| .message-action-speed[hidden] { |
| display: none; |
| } |
|
|
| .message-action-status { |
| color: var(--accent-strong); |
| min-width: 0; |
| } |
|
|
| .json-save-panel { |
| display: grid; |
| flex-basis: 100%; |
| gap: 8px; |
| width: min(560px, 100%); |
| margin-top: 2px; |
| padding: 8px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: rgba(8, 13, 22, 0.96); |
| } |
|
|
| .json-save-panel[hidden] { |
| display: none; |
| } |
|
|
| .json-save-file-row { |
| display: grid; |
| grid-template-columns: minmax(126px, 1fr) minmax(118px, 1fr) auto auto; |
| gap: 6px; |
| align-items: center; |
| } |
|
|
| .json-save-select, |
| .json-save-input, |
| .json-pair-textarea { |
| min-width: 0; |
| min-height: 30px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-md); |
| padding: 4px 8px; |
| color: var(--text-soft); |
| background: rgba(148, 163, 184, 0.07); |
| } |
|
|
| .json-pair-panel { |
| display: grid; |
| gap: 7px; |
| } |
|
|
| .json-pair-panel[hidden] { |
| display: none; |
| } |
|
|
| .json-pair-textarea { |
| width: 100%; |
| min-height: 112px; |
| padding: 8px 10px; |
| line-height: 1.45; |
| resize: vertical; |
| } |
|
|
| .json-pair-actions { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| gap: 9px; |
| } |
|
|
| .json-pair-hint { |
| min-width: 0; |
| margin-right: auto; |
| color: var(--muted); |
| } |
|
|
| .json-save-confirm { |
| padding: 4px 8px; |
| } |
|
|
| @media (max-width: 720px) { |
| .json-save-file-row { |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); |
| } |
|
|
| .json-save-confirm, |
| .json-save-pair-toggle { |
| justify-self: start; |
| } |
| } |
|
|
| .message-role { |
| color: var(--accent-strong); |
| font-weight: 720; |
| } |
|
|
| .message-status { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| color: var(--text-soft); |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .bubble { |
| position: relative; |
| border: 0; |
| border-radius: 0; |
| padding: 2px 0; |
| line-height: 1.62; |
| overflow-wrap: anywhere; |
| } |
|
|
| .user-bubble { |
| margin-left: auto; |
| padding: 12px 16px; |
| border: 1px solid var(--line); |
| border-radius: 18px; |
| color: #eef6ff; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(148, 163, 184, 0.025)), |
| rgba(15, 23, 42, 0.92); |
| box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); |
| animation: bubble-float-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); |
| } |
|
|
| .assistant-content { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .solution-panel { |
| position: relative; |
| overflow: hidden; |
| border: 0; |
| border-radius: 0; |
| color: var(--text-soft); |
| background: transparent; |
| box-shadow: none; |
| animation: content-fade-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); |
| } |
|
|
| .solution-panel[hidden] { |
| display: none; |
| } |
|
|
| .solution-header { |
| display: flex; |
| align-items: center; |
| min-height: 20px; |
| padding: 0 0 5px; |
| border-bottom: 0; |
| color: var(--accent-strong); |
| font-size: 12px; |
| font-weight: 760; |
| letter-spacing: 0; |
| text-transform: uppercase; |
| } |
|
|
| .solution-text { |
| padding: 2px 0 0; |
| color: #edf6ff; |
| font-size: var(--solution-font-size); |
| line-height: 1.65; |
| overflow-wrap: anywhere; |
| } |
|
|
| .rich-text { |
| white-space: normal; |
| } |
|
|
| .rich-text > :first-child { |
| margin-top: 0; |
| } |
|
|
| .rich-text > :last-child { |
| margin-bottom: 0; |
| } |
|
|
| .rich-text p { |
| margin: 0 0 12px; |
| } |
|
|
| .rich-text h1, |
| .rich-text h2, |
| .rich-text h3, |
| .rich-text h4 { |
| margin: 18px 0 10px; |
| color: var(--accent-strong); |
| line-height: 1.25; |
| font-weight: 720; |
| } |
|
|
| .rich-text h1 { |
| font-size: var(--rich-h1-size); |
| } |
|
|
| .rich-text h2 { |
| font-size: var(--rich-h2-size); |
| } |
|
|
| .rich-text h3 { |
| font-size: var(--rich-h3-size); |
| } |
|
|
| .rich-text h4 { |
| font-size: var(--rich-h4-size); |
| color: var(--text-soft); |
| } |
|
|
| .rich-text strong { |
| color: #f7fbff; |
| font-weight: 760; |
| } |
|
|
| .rich-text em { |
| color: #d9ecff; |
| } |
|
|
| .rich-text ul, |
| .rich-text ol { |
| margin: 8px 0 12px; |
| padding-left: 22px; |
| } |
|
|
| .rich-text li { |
| margin: 5px 0; |
| } |
|
|
| .rich-text code { |
| padding: 2px 5px; |
| border: 1px solid var(--line); |
| border-radius: 5px; |
| color: #dbeafe; |
| background: rgba(var(--accent-rgb), 0.11); |
| font-family: var(--mono); |
| font-size: 13px; |
| } |
|
|
| .rich-text pre { |
| position: relative; |
| margin: 12px 0 14px; |
| padding: 12px 14px; |
| overflow-x: auto; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: rgba(0, 0, 0, 0.26); |
| } |
|
|
| .rich-text pre[data-language]::before { |
| content: attr(data-language); |
| display: block; |
| margin-bottom: 8px; |
| color: var(--muted); |
| font-family: var(--font); |
| font-size: 11px; |
| text-transform: uppercase; |
| } |
|
|
| .rich-text pre code { |
| display: block; |
| padding: 0; |
| border: 0; |
| border-radius: 0; |
| color: #dbeafe; |
| background: transparent; |
| white-space: pre; |
| } |
|
|
| .message-assistant.is-streaming .solution-text > :last-child::after, |
| .message-assistant.is-streaming .reasoning-text > :last-child::after { |
| content: ""; |
| display: inline-block; |
| width: 14px; |
| height: 0.9em; |
| margin-left: 4px; |
| vertical-align: -0.12em; |
| border-radius: 999px; |
| background: linear-gradient( |
| 90deg, |
| transparent, |
| rgba(244, 244, 245, 0.24), |
| rgba(var(--accent-rgb), 0.42), |
| transparent |
| ); |
| background-size: 220% 100%; |
| animation: text-shine 1.25s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; |
| } |
|
|
| .solution-text .katex-display { |
| margin: 0.52em 0; |
| } |
|
|
| .solution-text .katex .fbox { |
| border-color: rgba(var(--accent-rgb), 0.5); |
| border-radius: 5px; |
| box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.11); |
| } |
|
|
| .error-bubble { |
| color: #ffd7dc; |
| border-color: rgba(255, 125, 146, 0.34); |
| background: rgba(255, 125, 146, 0.09); |
| } |
|
|
| .spinner { |
| width: 12px; |
| height: 12px; |
| border: 2px solid rgba(255, 255, 255, 0.14); |
| border-top-color: var(--accent); |
| border-radius: 50%; |
| transform-origin: 50% 50%; |
| will-change: transform; |
| animation: spin 760ms linear infinite; |
| } |
|
|
| .message-status .spinner[hidden] { |
| display: none; |
| } |
|
|
| .composer-wrap { |
| position: relative; |
| z-index: 2; |
| padding: |
| 8px max(var(--composer-side-pad), env(safe-area-inset-left)) |
| calc(var(--composer-bottom-pad) + env(safe-area-inset-bottom)) |
| max(var(--composer-side-pad), env(safe-area-inset-right)); |
| border-top: 0; |
| background: |
| linear-gradient(180deg, rgba(5, 7, 13, 0), rgba(8, 12, 20, 0.74) 24%, rgba(5, 7, 13, 0.98)); |
| backdrop-filter: none; |
| } |
|
|
| .composer-panel { |
| width: min(var(--chat-width), 100%); |
| margin: 0 auto; |
| } |
|
|
| .settings-drawer { |
| width: 100%; |
| max-width: 100%; |
| margin: 0 0 10px 0; |
| position: relative; |
| } |
|
|
| .settings-drawer[open] { |
| width: 100%; |
| } |
|
|
| .settings-tab { |
| display: inline-flex; |
| align-items: center; |
| gap: 7px; |
| min-height: 30px; |
| padding: 0 11px; |
| border: 1px solid var(--line); |
| border-radius: 999px; |
| color: var(--text-soft); |
| background: rgba(148, 163, 184, 0.07); |
| cursor: pointer; |
| font-size: 12px; |
| list-style: none; |
| transition: |
| background 240ms cubic-bezier(0.2, 0.8, 0.2, 1), |
| border-color 240ms cubic-bezier(0.2, 0.8, 0.2, 1), |
| color 240ms cubic-bezier(0.2, 0.8, 0.2, 1), |
| transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); |
| } |
|
|
| .settings-tab::-webkit-details-marker { |
| display: none; |
| } |
|
|
| .settings-tab svg { |
| width: 14px; |
| height: 14px; |
| fill: none; |
| stroke: currentColor; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| stroke-width: 1.8; |
| } |
|
|
| .settings-tab:hover, |
| .settings-drawer[open] .settings-tab { |
| border-color: var(--line-strong); |
| color: var(--accent-strong); |
| background: rgba(var(--accent-rgb), 0.11); |
| transform: translateY(-1px); |
| } |
|
|
| .composer-toolbar { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) 300px 158px 124px; |
| align-items: center; |
| justify-content: flex-start; |
| gap: 8px; |
| margin-top: 8px; |
| padding: 10px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(148, 163, 184, 0.035)), |
| rgba(10, 16, 27, 0.95); |
| box-shadow: var(--shadow); |
| } |
|
|
| .setting-model { |
| grid-column: 1 / -1; |
| } |
|
|
| .setting-control { |
| position: relative; |
| display: inline-flex; |
| align-items: center; |
| gap: 9px; |
| min-width: 0; |
| width: 100%; |
| min-height: 36px; |
| padding: 6px 10px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| color: var(--text-soft); |
| background: rgba(148, 163, 184, 0.06); |
| font-size: 12px; |
| white-space: nowrap; |
| } |
|
|
| .setting-control > span { |
| color: var(--accent-strong); |
| font-weight: 700; |
| text-transform: uppercase; |
| } |
|
|
| .setting-control input, |
| .setting-control select { |
| min-width: 0; |
| border: 0; |
| outline: 0; |
| color: var(--text-soft); |
| background: transparent; |
| font: inherit; |
| } |
|
|
| .setting-model .custom-select { |
| min-width: 0; |
| } |
|
|
| .setting-temperature input { |
| width: 72px; |
| accent-color: var(--accent); |
| } |
|
|
| .setting-temperature output { |
| min-width: 34px; |
| color: var(--accent-strong); |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .setting-fast { |
| justify-content: space-between; |
| } |
|
|
| .setting-fast input { |
| width: 16px; |
| height: 16px; |
| accent-color: var(--accent); |
| cursor: pointer; |
| } |
|
|
| .modern-select { |
| flex: 1; |
| width: 100%; |
| height: 34px; |
| padding: 0 8px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| color: var(--text); |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(148, 163, 184, 0.035)), |
| rgba(13, 20, 32, 0.94); |
| color-scheme: dark; |
| cursor: pointer; |
| } |
|
|
| .setting-tokens input { |
| width: 58px; |
| color: var(--text); |
| text-align: right; |
| } |
|
|
| .setting-control input:disabled, |
| .setting-control select:disabled { |
| opacity: 0.6; |
| } |
|
|
| .composer { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 10px; |
| min-height: 56px; |
| padding: 8px 9px 8px 18px; |
| border: 1px solid var(--line-strong); |
| border-radius: 28px; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(148, 163, 184, 0.04)), |
| rgba(10, 16, 27, 0.97); |
| box-shadow: |
| 0 18px 48px rgba(0, 0, 0, 0.34), |
| inset 0 1px 0 rgba(255, 255, 255, 0.04); |
| animation: composer-float-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); |
| } |
|
|
| .composer:focus-within { |
| border-color: rgba(var(--accent-rgb), 0.5); |
| box-shadow: |
| 0 18px 48px rgba(0, 0, 0, 0.36), |
| 0 0 0 4px rgba(var(--accent-rgb), 0.13), |
| inset 0 1px 0 rgba(255, 255, 255, 0.05); |
| } |
|
|
| #prompt-input { |
| width: 100%; |
| max-height: 160px; |
| min-height: 38px; |
| resize: none; |
| border: 0; |
| outline: 0; |
| padding: 9px 4px 7px 0; |
| background: transparent; |
| color: #f6fbff; |
| line-height: 1.48; |
| font-size: var(--prompt-font-size); |
| } |
|
|
| #prompt-input::placeholder { |
| color: #7f8da3; |
| } |
|
|
| .composer-actions { |
| display: grid; |
| place-items: end; |
| align-self: end; |
| width: 38px; |
| grid-template-areas: "action"; |
| } |
|
|
| .send-button, |
| .stop-button { |
| grid-area: action; |
| display: grid; |
| place-items: center; |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| color: var(--button-text); |
| background: var(--button-gradient); |
| cursor: pointer; |
| box-shadow: |
| 0 9px 24px rgba(0, 0, 0, 0.26), |
| inset 0 1px 0 rgba(255, 255, 255, 0.88); |
| transition: |
| transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), |
| background 220ms cubic-bezier(0.2, 0.8, 0.2, 1), |
| opacity 160ms ease; |
| } |
|
|
| .composer-actions > [hidden] { |
| display: none !important; |
| } |
|
|
| .stop-button { |
| color: #31131a; |
| background: linear-gradient(135deg, #ffffff 0%, #fff1f3 46%, #ffd1da 100%); |
| } |
|
|
| .send-button svg, |
| .stop-button svg { |
| width: 17px; |
| height: 17px; |
| fill: none; |
| stroke: currentColor; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| stroke-width: 2.35; |
| } |
|
|
| .send-button:hover, |
| .stop-button:hover { |
| transform: translateY(-1px); |
| } |
|
|
| .send-button:hover { |
| background: linear-gradient(135deg, #ffffff 0%, #f7fbff 42%, #d8eaff 100%); |
| } |
|
|
| .stop-button:hover { |
| background: linear-gradient(135deg, #ffffff 0%, #fff7f8 42%, #ffdce4 100%); |
| } |
|
|
| .send-button:disabled, |
| .stop-button:disabled { |
| cursor: not-allowed; |
| opacity: 0.48; |
| transform: none; |
| } |
|
|
| @keyframes spin { |
| from { |
| transform: rotate(0deg); |
| } |
| to { |
| transform: rotate(360deg); |
| } |
| } |
|
|
| @keyframes panel-rise { |
| from { |
| transform: translateY(8px); |
| opacity: 0; |
| } |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
|
|
| @keyframes message-in { |
| from { |
| transform: translateY(4px); |
| opacity: 0; |
| } |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
|
|
| @keyframes bubble-float-in { |
| from { |
| transform: translateY(3px); |
| opacity: 0; |
| } |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
|
|
| @keyframes content-fade-in { |
| from { |
| transform: translateY(2px); |
| opacity: 0; |
| } |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
|
|
| @keyframes text-shine { |
| from { |
| background-position: 180% 0; |
| opacity: 0.25; |
| } |
| 50% { |
| opacity: 0.85; |
| } |
| to { |
| background-position: -80% 0; |
| opacity: 0.25; |
| } |
| } |
|
|
| @keyframes composer-float-in { |
| from { |
| transform: translateY(5px); |
| opacity: 0; |
| } |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
|
|
| @media (max-width: 900px) { |
| .composer-toolbar { |
| grid-template-columns: 1fr 1fr; |
| } |
|
|
| .setting-model { |
| grid-column: 1 / -1; |
| } |
| } |
|
|
| @media (max-width: 680px) { |
| :root { |
| --message-list-pad-top: 26px; |
| --message-list-pad-x: 12px; |
| --message-list-pad-bottom: 24px; |
| --welcome-offset-top: 32px; |
| --welcome-heading-size: 27px; |
| --composer-side-pad: 10px; |
| --composer-bottom-pad: 12px; |
| } |
|
|
| body { |
| overflow: hidden; |
| } |
|
|
| .topbar { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 10px; |
| padding: 12px; |
| } |
|
|
| .topbar-status { |
| width: 100%; |
| justify-content: flex-start; |
| } |
|
|
| .status-pill { |
| max-width: 100%; |
| } |
|
|
| #active-model-label { |
| max-width: 100%; |
| } |
|
|
| .model-picker-panel { |
| padding: 11px; |
| } |
|
|
| .start-select-control { |
| grid-template-columns: 1fr; |
| gap: 6px; |
| padding: 10px; |
| } |
|
|
| .start-model-list { |
| max-height: 212px; |
| } |
|
|
| .message-user .message-inner { |
| width: min(100%, 92%); |
| } |
|
|
| .composer-toolbar { |
| grid-template-columns: 1fr; |
| } |
|
|
| .setting-control { |
| width: 100%; |
| } |
|
|
| .setting-temperature input { |
| flex: 1; |
| width: auto; |
| } |
|
|
| .solution-text { |
| padding: 3px 0 0; |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| scroll-behavior: auto !important; |
| transition-duration: 1ms !important; |
| animation-duration: 1ms !important; |
| animation-iteration-count: 1 !important; |
| } |
| } |
|
|
