| 1 | @import "./harness-chat/DisclosureRow.css"; |
| 2 | @import "./harness-chat/ReasoningRow.css"; |
| 3 | @import "./harness-chat/TurnProcessNodeView.css"; |
| 4 | @import "./harness-chat/ContextInjectionRow.css"; |
| 5 | @import "./harness-chat/ToolRow.css"; |
| 6 | @import "./harness-chat/StateDot.css"; |
| 7 | .chat-transcript { |
| 8 | --dsw-alias-label-primary: var(--fg); |
| 9 | --dsw-alias-label-secondary: var(--fg-dim); |
| 10 | --dsw-alias-label-tertiary: var(--fg-faint); |
| 11 | --dsw-alias-label-caption: var(--fg-faint); |
| 12 | --dsw-alias-bg-base: var(--chat-bg, var(--bg)); |
| 13 | --dsw-alias-markdown-code-block: var(--bg-soft); |
| 14 | --dsw-alias-border-l1: var(--border-soft); |
| 15 | --dsw-alias-border-l2: var(--border-soft); |
| 16 | --dsw-alias-border-l3: var(--border); |
| 17 | --dsw-alias-interactive-bg-hover: var(--bg-soft); |
| 18 | --dsw-alias-interactive-bg-hover-solid: var(--bg-elev); |
| 19 | --dsw-alias-state-error-primary: var(--danger, #e5484d); |
| 20 | --dsw-alias-state-business-primary: var(--accent); |
| 21 | --dsw-alias-state-success-primary: var(--success, #30a46c); |
| 22 | --dsw-alias-state-warn-primary: var(--warning, #bd8c3c); |
| 23 | --dsw-static-deepseek-450: var(--accent); |
| 24 | --dsw-alias-bg-layer-2: var(--bg-elev); |
| 25 | --dsw-alias-button-ghost-active-border: var(--border); |
| 26 | --dsw-alias-button-ghost-active-fill: var(--bg-soft); |
| 27 | --dsw-alias-link: var(--link, #4b78ff); |
| 28 | --dsw-alias-markdown-inline-code: var(--bg-soft); |
| 29 | --ds-transition-duration: 100ms; |
| 30 | --ds-ease-in-out: ease-in-out; |
| 31 | --dsw-font-markdown-base: 400 var(--dsh-content-font-size)/calc(24px + var(--dsh-content-font-delta)) var(--dsh-content-font-family); |
| 32 | --dsw-font-markdown-base-strong: 600 var(--dsh-content-font-size)/calc(24px + var(--dsh-content-font-delta)) var(--dsh-content-font-family); |
| 33 | --dsw-font-markdown-h1: 600 calc(var(--dsh-content-font-size) + 10px)/1.4 var(--dsh-content-font-family); |
| 34 | --dsw-font-markdown-h2: 600 calc(var(--dsh-content-font-size) + 6px)/1.4 var(--dsh-content-font-family); |
| 35 | --dsw-font-markdown-h3: 600 calc(var(--dsh-content-font-size) + 3px)/1.5 var(--dsh-content-font-family); |
| 36 | --dsw-font-markdown-h4: var(--dsw-font-markdown-base-strong); |
| 37 | --dsw-font-markdown-code: 400 0.875em/1.5 var(--font-mono); |
| 38 | --dsw-font-markdown-table: var(--dsw-font-markdown-base); |
| 39 | --dsw-font-markdown-table-head: var(--dsw-font-markdown-base-strong); |
| 40 | --ds-font-family-code: var(--font-mono); |
| 41 | --dsw-font-markdown-code-block-small: 400 12px/18px var(--font-mono); |
| 42 | --dsw-font-markdown-code-block: 400 12px/18px var(--font-mono); |
| 43 | --dsw-font-xs-13: 400 13px/20px var(--dsh-content-font-family); |
| 44 | --dsw-font-sm-13: 400 13px/20px var(--dsh-content-font-family); |
| 45 | --dsh-content-font-family: var(--typography-conversation-font, var(--font-ui)); |
| 46 | --dsh-content-font-size: var(--typography-conversation-size, var(--text-base)); |
| 47 | --dsh-content-font-size-secondary: calc(var(--dsh-content-font-size) - 1px); |
| 48 | --dsh-content-font-delta: calc(var(--dsh-content-font-size) - 14px); |
| 49 | --dsh-content-font-delta-secondary: calc(var(--dsh-content-font-size-secondary) - 13px); |
| 50 | position: relative; flex: 1; min-width: 0; min-height: 0; height: 100%; container-type: inline-size; color: var(--fg); |
| 51 | } |
| 52 | .chat-surface { position: relative; isolation: isolate; height: 100%; display: flex; flex-direction: column; min-height: 0; } |
| 53 | .chat-transcript .chat-surface > .chat-flow-scroll.transcript { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; scrollbar-width: auto; padding: 24px; display: block; } |
| 54 | .chat-transcript .chat-column { width: 100%; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; padding-bottom: 24px; } |
| 55 | /* Harness ChatView: only nonempty seats contribute the 16px flow rhythm. */ |
| 56 | .chat-column > :not(.chat-node:empty) ~ :not(.chat-node:empty) { margin-top: var(--dsh-chat-flow-gap, 16px); } |
| 57 | .chat-node[data-turn-process-answer] { --dsh-chat-flow-gap: 8px; } |
| 58 | .chat-node { min-width: 0; overflow-anchor: none; contain: layout style; } |
| 59 | .chat-transcript .msg, .chat-transcript .md > * { content-visibility: visible; contain-intrinsic-size: none; } |
| 60 | .chat-node:empty { display: none; } |
| 61 | .chat-transcript .chat-node > .msg { width: 100%; max-width: none; margin: 0; animation: none; } |
| 62 | .chat-node[data-chat-kind="assistant"] { color: var(--fg); } |
| 63 | .chat-node .msg-meta { opacity: 1; } |
| 64 | .chat-node .msg--user { gap: 6px; } |
| 65 | .chat-node .msg--user .msg__body { border: 0; border-radius: 22px; box-shadow: none; padding: 10px 16px; } |
| 66 | .chat-node .msg--user .msg-meta { margin-top: 0; } |
| 67 | .chat-tool { width: 100%; min-width: 0; border: 0; padding: 0; background: none; text-align: left; } |
| 68 | .chat-notice[data-level="warn"] { color: var(--danger, #d46b54); } |
| 69 | .chat-reasoning__body { color: var(--fg-faint); white-space: pre-wrap; } |
| 70 | .chat-reasoning__body .copybtn { margin-left: 8px; } |
| 71 | .dsh-row-duration { flex: none; margin-left: 8px; font-size: var(--dsh-content-font-size-secondary); color: var(--fg-faint); } |
| 72 | .dsh-ToolRow-ioText { margin: 0; } |
| 73 | .dsh-ToolRow-ioSection, .dsh-ContextInjectionRow-body { overscroll-behavior: contain; } |
| 74 | .dsh-ContextInjectionRow-body pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; } |
| 75 | .dsh-DisclosureRow-row:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } |
| 76 | .dsh-DisclosureRow-row:focus-visible .dsh-DisclosureRow-iconIdle { opacity: 0; } |
| 77 | .dsh-DisclosureRow-row:focus-visible .dsh-DisclosureRow-chevronHover { opacity: 1; } |
| 78 | .chat-notice { margin: 0; color: var(--fg-dim); font-size: 13px; } |
| 79 | .chat-notice pre, .chat-details pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; } |
| 80 | .chat-actions { display: flex; gap: 8px; align-items: center; height: 28px; margin-left: -6px; } |
| 81 | .chat-actions > .tooltip-trigger { display: inline-flex; } |
| 82 | .chat-action-icon, |
| 83 | .copybtn.chat-action-icon { |
| 84 | display: inline-flex; |
| 85 | align-items: center; |
| 86 | justify-content: center; |
| 87 | width: 28px; |
| 88 | height: 28px; |
| 89 | padding: 6px; |
| 90 | border: 0; |
| 91 | border-radius: 28px; |
| 92 | background: transparent; |
| 93 | color: var(--fg-faint); |
| 94 | cursor: pointer; |
| 95 | appearance: none; |
| 96 | font: inherit; |
| 97 | transition: color 80ms ease, background-color 80ms ease, opacity 80ms ease; |
| 98 | } |
| 99 | .chat-action-icon svg, |
| 100 | .copybtn.chat-action-icon svg { width: 15px; height: 15px; flex: none; } |
| 101 | .chat-action-icon:hover, |
| 102 | .chat-action-icon:focus-visible, |
| 103 | .copybtn.chat-action-icon:hover, |
| 104 | .copybtn.chat-action-icon:focus-visible { background: var(--bg-soft); color: var(--fg-dim); } |
| 105 | .chat-action-icon:focus-visible, |
| 106 | .copybtn.chat-action-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); } |
| 107 | .chat-action-icon[data-unavailable] { cursor: default; opacity: 0.4; } |
| 108 | .chat-action-icon[data-unavailable]:hover, |
| 109 | .chat-action-icon[data-unavailable]:focus-visible { background: transparent; color: var(--fg-faint); } |
| 110 | .chat-stat-root { display: inline-flex; min-width: 0; } |
| 111 | .chat-stat-root + .chat-stat-root { margin-left: -6px; } |
| 112 | .chat-stat-trigger { |
| 113 | display: inline-flex; |
| 114 | align-items: center; |
| 115 | gap: 4px; |
| 116 | min-width: 0; |
| 117 | height: 28px; |
| 118 | padding: 6px 8px; |
| 119 | border: 0; |
| 120 | border-radius: 28px; |
| 121 | background: transparent; |
| 122 | color: var(--fg-faint); |
| 123 | font: inherit; |
| 124 | font-size: 13px; |
| 125 | font-variant-numeric: tabular-nums; |
| 126 | line-height: 24px; |
| 127 | white-space: nowrap; |
| 128 | cursor: pointer; |
| 129 | } |
| 130 | .chat-stat-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } |
| 131 | .chat-stat-trigger svg { width: 15px; height: 15px; flex: none; } |
| 132 | .chat-stat-trigger:hover, |
| 133 | .chat-stat-trigger:focus-visible, |
| 134 | .chat-stat-trigger[aria-expanded="true"] { background: var(--bg-soft); color: var(--fg-dim); } |
| 135 | .chat-stat-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); } |
| 136 | .chat-actions__time { |
| 137 | color: var(--fg-faint); |
| 138 | font-size: 13px; |
| 139 | font-variant-numeric: tabular-nums; |
| 140 | line-height: 24px; |
| 141 | white-space: nowrap; |
| 142 | } |
| 143 | .chat-stat-dialog { |
| 144 | --reasonix-draggable: no-drag; |
| 145 | position: fixed; |
| 146 | z-index: var(--z-popover); |
| 147 | box-sizing: border-box; |
| 148 | width: max-content; |
| 149 | min-width: min(300px, calc(100vw - 24px)); |
| 150 | max-width: min(440px, calc(100vw - 24px)); |
| 151 | padding: 16px; |
| 152 | border: 1px solid var(--border-soft); |
| 153 | border-radius: 12px; |
| 154 | background: var(--bg-elev); |
| 155 | box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 2px 10px rgba(0, 0, 0, 0.08); |
| 156 | color: var(--fg-dim); |
| 157 | cursor: default; |
| 158 | font: 13px/1.5 var(--font-ui); |
| 159 | } |
| 160 | .chat-stat-dialog__title { |
| 161 | display: flex; |
| 162 | justify-content: space-between; |
| 163 | gap: 16px; |
| 164 | margin-bottom: 8px; |
| 165 | color: var(--fg); |
| 166 | } |
| 167 | .chat-stat-dialog__title strong, |
| 168 | .chat-stat-dialog__title b { font-weight: 600; } |
| 169 | .chat-stat-dialog__title strong { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } |
| 170 | .chat-stat-dialog__title svg { width: 16px; height: 16px; flex: none; } |
| 171 | .chat-stat-dialog__title b { font-variant-numeric: tabular-nums; white-space: nowrap; } |
| 172 | .chat-stat-dialog__rule { margin-bottom: 10px; border-top: 1px solid var(--border-soft); } |
| 173 | .chat-stat-dialog__details { |
| 174 | display: grid; |
| 175 | grid-template-columns: minmax(76px, auto) minmax(0, 1fr); |
| 176 | gap: 7px 16px; |
| 177 | margin: 0; |
| 178 | color: var(--fg-faint); |
| 179 | } |
| 180 | .chat-stat-dialog__details dt, |
| 181 | .chat-stat-dialog__details dd { min-width: 0; margin: 0; } |
| 182 | .chat-stat-dialog__details dd { color: var(--fg-dim); font-variant-numeric: tabular-nums; text-align: right; } |
| 183 | .chat-stat-dialog__route { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 184 | .chat-stat-dialog__reasoning { margin-left: 8px; color: var(--fg-faint); white-space: nowrap; } |
| 185 | @media (hover: hover) { |
| 186 | .chat-actions[data-actions-reveal="hover"] { opacity: 0; transition: opacity 80ms ease; } |
| 187 | .chat-node:hover > .chat-actions[data-actions-reveal="hover"], |
| 188 | .chat-node:focus-within > .chat-actions[data-actions-reveal="hover"], |
| 189 | .chat-node:hover .chat-turn-tail > .chat-actions[data-actions-reveal="hover"], |
| 190 | .chat-node:focus-within .chat-turn-tail > .chat-actions[data-actions-reveal="hover"] { opacity: 1; } |
| 191 | } |
| 192 | .chat-running { color: var(--fg-dim); font-size: 13px; } |
| 193 | .chat-transcript .chat-to-bottom { position: absolute; bottom: 16px; right: max(24px, calc((100% - 800px) / 2)); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0.5px solid var(--border-soft); border-radius: 100px; background: var(--bg-elev); box-shadow: 0 2px 8px #0001; } |
| 194 | .chat-transcript .chat-to-bottom[hidden] { display: none; } |
| 195 | .chat-details { position: absolute; inset: 0 0 0 auto; width: min(560px, 60%); background: var(--bg); border-left: 1px solid var(--border); box-shadow: -8px 0 24px #0002; display: flex; flex-direction: column; z-index: 3; } |
| 196 | .chat-details header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); } |
| 197 | .chat-details__tabs { display: flex; gap: 2px; padding: 8px 12px 0; overflow-x: auto; border-bottom: 1px solid var(--border-soft); } |
| 198 | .chat-details__tabs button { padding: 7px 9px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--fg-faint); font-size: 12px; white-space: nowrap; cursor: pointer; } |
| 199 | .chat-details__tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--fg); } |
| 200 | .chat-details__body { padding: 16px; min-height: 0; overflow: auto; overscroll-behavior: contain; } |
| 201 | .chat-details__body > .btn { margin: 8px 8px 8px 0; } |
| 202 | .chat-details__relations { display: grid; gap: 8px; } |
| 203 | .chat-older { align-self: center; } |
| 204 | .chat-transcript .md-table-scroll { max-height: none; overflow-x: auto; overflow-y: hidden; } |
| 205 | .chat-transcript .md-table-scroll table { display: table; table-layout: auto; border: 0; border-radius: 0; background: none; margin: 0; } |
| 206 | .chat-transcript .md-table-scroll th, .chat-transcript .md-table-scroll td { border-left: 0; border-right: 0; background: none; } |
| 207 | .chat-transcript .md-table-scroll tr:nth-child(even) { background: none; } |
| 208 | .chat-code-fold { display: flex; gap: 8px; margin: 4px 0; } |
| 209 | .chat-turn-tail { display: grid; gap: 10px; } |
| 210 | @container (max-width: 900px) { .chat-details { width: 100%; } } |
| 211 | @container (max-width: 600px) { .chat-transcript .chat-surface > .chat-flow-scroll.transcript { padding: 24px 16px 16px; } } |
| 212 | @media (max-width: 480px) { |
| 213 | .chat-stat-trigger { justify-content: center; width: 28px; padding: 6px; } |
| 214 | .chat-stat-trigger > span { display: none; } |
| 215 | .chat-stat-root + .chat-stat-root { margin-left: 0; } |
| 216 | } |
| 217 | .md-code--presented-file { |
| 218 | cursor: pointer; |
| 219 | color: var(--accent, currentColor); |
| 220 | border: 0; |
| 221 | font: inherit; |
| 222 | } |
| 223 | |
| 224 | .md-code--presented-file:hover { |
| 225 | text-decoration: underline; |
| 226 | } |
| 227 |