| /* Maka product compositions shared across desktop renderer surfaces. Astryx |
| owns generic component chrome; these selectors own only product semantics. */ |
| |
| .maka-quote-chip-remove { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border: 0; color: var(--muted-foreground); background: transparent; transition: color var(--duration-quick), background var(--duration-quick); } |
| .maka-quote-chip-remove:hover { color: var(--foreground); background: var(--foreground-alpha-10); } |
| |
| .maka-page-header-title, |
| .maka-page-header-eyebrow, |
| .maka-page-header-subtitle { margin: 0; } |
| .maka-page-header-content { min-width: 0; } |
| .maka-page-header-heading-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } |
| |
| .maka-section-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; } |
| .maka-section-header-content { min-width: 0; } |
| .maka-section-header-title { |
| font: var(--maka-text-heading-4); |
| display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--foreground); } |
| .maka-section-header-title-accent::before { display: inline-block; width: 3px; height: 12px; border-radius: var(--radius-pill); background: oklch(from var(--status-running) l c h / 0.85); content: ""; } |
| .maka-section-header-count { |
| font: var(--maka-text-supporting); |
| color: var(--muted-foreground); font-variant-numeric: tabular-nums; } |
| .maka-section-header-subtitle { |
| font: var(--maka-text-supporting); |
| display: block; margin-top: 2px; color: var(--foreground-secondary); } |
| .maka-section-header-action { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; } |
| |
| .maka-stat-tile { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; } |
| .maka-stat-tile-outline { border: 1px solid var(--card-border-color, var(--border)); border-radius: var(--radius-surface); background: var(--card-bg, var(--background)); box-shadow: var(--card-shadow, none); } |
| .maka-stat-tile-filled { border-radius: var(--radius-control); background: var(--foreground-5); } |
| .maka-stat-tile-border-info { border-color: oklch(from var(--info) l c h / 0.24); } |
| .maka-stat-tile-border-success { border-color: oklch(from var(--success) l c h / 0.24); } |
| .maka-stat-tile-border-warning { border-color: oklch(from var(--warning) l c h / 0.28); } |
| .maka-stat-tile-border-destructive { border-color: oklch(from var(--destructive) l c h / 0.3); } |
| .maka-stat-tile-empty { opacity: var(--opacity-disabled); } |
| .maka-stat-tile-value-outline { font: var(--maka-text-heading-1); } |
| .maka-stat-tile-value-filled { font: var(--maka-text-heading-4); } |
| /* After the two role rules, not before them. The `font:` shorthand resets |
| `font-variant-numeric` along with the four axes the role names, and both |
| modifiers land on this same element — so declared first, the tabular figures |
| these tiles exist to align were being reset away by the role. Ordering is |
| the fix rather than repeating the declaration on each modifier: it is one |
| authority, and it is the general rule for any sub-property the roles do not |
| carry. */ |
| .maka-stat-tile-value { display: block; min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--foreground); font-variant-numeric: tabular-nums; white-space: normal; } |
| .maka-stat-tile-value-info { color: var(--info-text); } |
| .maka-stat-tile-value-success { color: var(--success-text); } |
| .maka-stat-tile-value-warning { color: var(--warning-text); } |
| .maka-stat-tile-value-destructive { color: var(--destructive-text); } |
| .maka-stat-tile-label { |
| font: var(--maka-text-supporting); |
| color: var(--foreground-secondary); letter-spacing: 0.025em; } |
| .maka-stat-tile-detail { |
| font: var(--maka-text-supporting); |
| color: var(--muted-foreground); } |
| |
| .maka-quote-chip { display: inline-flex; gap: 4px; padding-left: 8px; background: var(--foreground-alpha-6); box-shadow: inset 0 0 0 1px var(--foreground-alpha-12); } |
| .maka-quote-chip-expanded { width: 100%; max-width: 100%; align-items: flex-start; padding-block: 4px; border-radius: var(--radius-surface); } |
| /* #1879: measured 24px natural — a 20px line box plus 2 x 2px padding — and |
| `--h-control-sm` IS 24, so the pin is pixel-neutral today and load-bearing |
| the next time a leading moves. This is the collapsed state only; the |
| expanded twin above wraps to many lines and must keep growing. The chip's |
| type lives on `.maka-quote-chip-text`, which is why the derived scan needed |
| two arms rather than three to see it at all. */ |
| .maka-quote-chip-collapsed { height: var(--h-control-sm); max-width: 240px; align-items: center; padding-block: 2px; border-radius: var(--radius-pill); } |
| .maka-quote-chip-removable { padding-right: 2px; } |
| .maka-quote-chip-readonly { padding-right: 8px; } |
| .maka-quote-chip-icon { width: 12px; height: 12px; flex: 0 0 auto; color: var(--muted-foreground); } |
| .maka-quote-chip-icon-expanded { margin-top: 2px; } |
| .maka-quote-chip-text { |
| font: var(--maka-text-supporting); |
| min-width: 0; flex: 1; border: 0; padding: 0; color: var(--foreground-secondary); background: transparent; text-align: left; } |
| .maka-quote-chip-text-expanded { max-height: 128px; overflow-y: auto; overflow-wrap: break-word; white-space: pre-wrap; } |
| .maka-quote-chip-text-clipped { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| .maka-quote-chip-label { color: var(--muted-foreground); } |
| .maka-quote-chip-remove { width: 16px; height: 16px; border-radius: 50%; } |
| .maka-quote-chip-remove > svg { width: 12px; height: 12px; } |
| |
| .maka-task-ledger-empty { |
| font: var(--maka-text-body); |
| margin: 0; color: var(--muted-foreground); } |
| |
| .maka-message-meta { opacity: 0; transition: opacity var(--duration-quick) var(--ease-out-strong); } |
| .maka-user-message:hover .maka-message-meta, |
| .maka-user-message:focus-within .maka-message-meta { opacity: 1; } |
| .maka-user-quotes { display: flex; max-width: 100%; flex-wrap: wrap; align-items: flex-start; gap: 4px; } |
| .maka-assistant-answer-content { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 8px; } |
| .maka-live-turn-footer-placeholder { height: 32px; margin-top: 2px; } |
| .maka-turn-processing, |
| .maka-turn-status, |
| .maka-turn-continuing { |
| font: var(--maka-text-body); |
| display: flex; align-items: center; padding-block: 2px; color: var(--muted-foreground); } |
| .maka-turn-processing, |
| .maka-turn-status { gap: 8px; } |
| .maka-turn-processing-spinner { flex: 0 0 auto; animation: maka-spin 1s linear infinite; } |
| .maka-turn-indicator-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| .maka-turn-continuing { opacity: 0.7; animation: maka-stream-fade-in var(--duration-emphasized) var(--ease-out-strong) both; } |
| /* #1879: an Astryx `Badge variant="yellow"` now — the warning tone it used to |
| draw by hand (hairline + 5% wash) is a variant, and the box comes with it. |
| Product CSS keeps only what is layout: it is a block-level note under the |
| bubble, so it needs its own line and the gap above it. */ |
| .maka-turn-truncation-badge { display: flex; width: fit-content; margin-top: 6px; cursor: help; } |
| .maka-deep-thinking { min-width: 0; } |
| /* The reasoning body inside the Astryx ChatReasoning disclosure. The official |
| atoms own no white-space (the shell assumes children are pre-rendered), so |
| the inherited `white-space: normal` collapses every newline in thinking |
| text. Restore the pre-wrap reading contract the pre-Astryx disclosure had |
| (dropped in the #1748 migration). `word-break` keeps long tokens from |
| overflowing the box, as the old body did. */ |
| .maka-chat-reasoning-content { white-space: pre-wrap; word-break: break-word; } |
| |
| @keyframes maka-spin { to { transform: rotate(360deg); } } |
| .maka-spin { animation: maka-spin 1s linear infinite; } |
| |
| /* Markdown code renderers are custom components so Mermaid can be loaded only |
| for settled Mermaid fences. Preserve Astryx's document/compact rhythm here. */ |
| .maka-markdown-code { min-width: 0; } |
| .maka-markdown-code-default { margin-block: var(--space-3) var(--space-4); } |
| .maka-markdown-code-compact { margin-block: var(--space-1) var(--space-2); } |
| [role="document"] > .maka-markdown-code:first-child { margin-block-start: 0; } |
| [role="document"] > .maka-markdown-code:last-child { margin-block-end: 0; } |
| .maka-mermaid-diagram { |
| display: flex; |
| max-width: 100%; |
| min-height: 0; |
| flex-direction: column; |
| overflow: hidden; |
| container-type: inline-size; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-surface); |
| background: var(--background); |
| } |
| .maka-mermaid-toolbar { |
| min-height: 40px; |
| flex: 0 0 auto; |
| border-bottom: 1px solid var(--border); |
| background: var(--foreground-3); |
| } |
| .maka-mermaid-title { font: var(--maka-text-supporting); color: var(--muted-foreground); } |
| .maka-mermaid-actions { display: flex; align-items: center; gap: 2px; } |
| .maka-mermaid-zoom-actions { display: flex; align-items: center; gap: 2px; } |
| .maka-mermaid-zoom-level { |
| font: var(--maka-text-code); |
| min-width: 4.5ch; |
| color: var(--muted-foreground); |
| text-align: center; |
| font-variant-numeric: tabular-nums; |
| } |
| .maka-mermaid-viewport { |
| position: relative; |
| display: grid; |
| min-width: 0; |
| align-items: center; |
| overflow: auto; |
| padding: var(--space-3); |
| cursor: default; |
| outline: none; |
| overscroll-behavior: auto; |
| touch-action: pan-y; |
| } |
| .maka-mermaid-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); } |
| .maka-mermaid-viewport[data-maka-mermaid-pannable="horizontal"] { cursor: grab; overscroll-behavior-x: contain; } |
| .maka-mermaid-viewport[data-maka-mermaid-pannable="vertical"], |
| .maka-mermaid-viewport[data-maka-mermaid-pannable="both"] { |
| cursor: grab; |
| overscroll-behavior: contain; |
| touch-action: none; |
| } |
| .maka-mermaid-viewport[data-maka-mermaid-panning="true"] { cursor: grabbing; user-select: none; } |
| .maka-mermaid-canvas { min-width: 0; margin-inline: auto; } |
| .maka-mermaid-svg { display: flex; width: 100%; height: 100%; min-width: 0; justify-content: center; } |
| .maka-mermaid-svg > svg { |
| display: block; |
| width: 100%; |
| max-width: none !important; |
| height: 100%; |
| overflow: visible; |
| } |
| .maka-mermaid-diagram-expanded { |
| width: 100%; |
| height: 100%; |
| max-width: none; |
| margin: 0 !important; |
| border: 0; |
| border-radius: 0; |
| } |
| .maka-mermaid-diagram-expanded .maka-mermaid-toolbar { |
| padding-left: max(var(--space-3), var(--maka-titlebar-area-x, 0px)); |
| padding-right: calc(var(--space-1) + var(--maka-titlebar-overlay-right-width, 0px)); |
| } |
| .maka-mermaid-diagram-expanded .maka-mermaid-actions { -webkit-app-region: no-drag; } |
| .maka-mermaid-diagram-expanded .maka-mermaid-viewport { min-height: 0; flex: 1 1 auto; } |
| .maka-mermaid-dialog { -webkit-app-region: no-drag; } |
| .maka-mermaid-source { |
| max-height: min(40%, 320px); |
| flex: 0 1 auto; |
| overflow: auto; |
| padding: var(--space-1) var(--space-3) var(--space-2); |
| border-top: 1px solid var(--border); |
| } |
| .maka-mermaid-fallback { display: grid; gap: var(--space-1-5); } |
| .maka-mermaid-fallback-actions { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: var(--space-2); |
| } |
| .maka-mermaid-status { |
| font: var(--maka-text-supporting); |
| color: var(--muted-foreground); |
| } |
| |
| @container (max-width: 520px) { |
| .maka-mermaid-title { display: none; } |
| } |
| |
| @container (max-width: 360px) { |
| .maka-mermaid-diagram:not(.maka-mermaid-diagram-expanded) .maka-mermaid-zoom-actions { display: none; } |
| } |
| |
| .maka-tool-output-panel { display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-surface); background: var(--foreground-3); } |
| .maka-tool-output-command { |
| font: var(--maka-text-code); |
| display: block; min-width: 0; color: var(--foreground); font-variant-ligatures: none; white-space: pre-wrap; word-break: break-word; } |
| /* The command reads as the surface's header, not as the first line of the |
| output: it keeps the foreground colour the body gives up, and a hairline |
| separates the two. The rule is on the row rather than the panel so a |
| command with nothing under it (a failed launch) does not end in a stray |
| line — the panel's own 8px gap supplies the space below. */ |
| .maka-tool-output-command-row { display: flex; min-width: 0; align-items: flex-start; gap: 8px; } |
| .maka-tool-output-command-row:not(:last-child) { padding-bottom: 8px; border-bottom: 1px solid var(--border); } |
| .maka-tool-output-command-row .maka-tool-output-command { flex: 1 1 auto; } |
| .maka-tool-output-command-copy { flex: 0 0 auto; } |
| .maka-tool-output-command-copy[data-copy-feedback="pending"] { cursor: progress; } |
| .maka-tool-output-command-copy[data-copy-feedback="copied"] { color: var(--link); } |
| .maka-tool-output-command-copy[data-copy-feedback="failed"] { color: var(--destructive); } |
| .maka-tool-output-body { |
| font: var(--maka-text-code); |
| max-height: 256px; margin: 0; overflow-y: auto; color: var(--muted-foreground); font-variant-ligatures: none; scroll-behavior: auto; white-space: pre-wrap; word-break: break-word; } |
| .maka-tool-output-note { |
| font: var(--maka-text-body); |
| margin: 0; color: var(--muted-foreground); } |
| .maka-tool-output-wrap { min-width: 0; overflow-wrap: anywhere; } |
| .maka-tool-output-destructive { color: var(--destructive); } |
| .maka-tool-output-warning { color: var(--warning-text, var(--info-text)); } |
| .maka-tool-output-warning-border { border-color: oklch(from var(--warning) l c h / 0.32); } |
| .maka-tool-output-destructive-border { border-color: oklch(from var(--destructive) l c h / 0.28); } |
| .maka-tool-output-stack { display: flex; min-width: 0; flex-direction: column; gap: 6px; margin-top: 4px; } |
| .maka-pty-shell { gap: 0; overflow: hidden; padding: 0; } |
| .maka-pty-shell-header { display: flex; min-width: 0; align-items: center; padding: 10px 12px 4px; } |
| .maka-pty-shell-title { |
| font: var(--maka-text-label); |
| color: var(--foreground-secondary); } |
| .maka-pty-shell-body { display: grid; min-width: 0; gap: 8px; padding: 6px 12px; } |
| .maka-pty-shell-footer { |
| font: var(--maka-text-body); |
| display: flex; min-height: 32px; align-items: center; justify-content: flex-end; gap: 6px; padding: 4px 12px 10px; color: var(--muted-foreground); } |
| .maka-pty-terminal-body { overflow: auto; white-space: pre; word-break: normal; } |
| |
| .maka-web-result { display: grid; gap: 8px; } |
| .maka-web-result-header { display: grid; gap: 2px; } |
| .maka-web-result-header strong { |
| font: var(--maka-text-heading-4); |
| color: var(--foreground); } |
| .maka-web-result-header small, |
| .maka-web-result-list small { |
| font: var(--maka-text-body); |
| color: var(--muted-foreground); } |
| .maka-web-result-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } |
| .maka-web-result-list li { display: grid; gap: 2px; } |
| .maka-web-result-list a { |
| font: var(--maka-text-label); |
| color: var(--link); } |
| .maka-web-result-list p { |
| font: var(--maka-text-body); |
| margin: 0; color: var(--foreground-secondary); } |
| .maka-web-result-error { gap: 6px; } |
| .maka-web-result-error-message, |
| .maka-web-result-repair { |
| font: var(--maka-text-body); |
| margin: 0; } |
| .maka-web-result-error-message { color: var(--destructive); } |
| .maka-web-result-repair { color: var(--muted-foreground); } |
| .maka-tool-call-detail { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } |
| /* A CodeBlock title (a file path, a result headline) sits at the same tier as |
| the command header beside it. Astryx hard-codes that title to the supporting |
| tier, which is 12px against the block's own 14px code — rebinding the role |
| token reaches it through inheritance, the same move chat-message.css makes |
| on the tool and reasoning rows. Only the size: `medium` on a header is |
| Astryx's intent and the surface command's foreground colour carries the same |
| weight of emphasis without it. */ |
| .maka-tool-call-detail .astryx-codeblock { |
| /* Geist Mono ligates `--`, `!==` and friends into single glyphs that sit |
| outside the cell they started in, so a `---` line looked like it had |
| escaped the block's left edge — measured, its box starts on the same x as |
| every other line. The product's own wells all disable this; Astryx's |
| CodeBlock does not, and tool output is transcript text where the literal |
| characters are the point. */ |
| font-variant-ligatures: none; |
| --text-supporting-size: var(--text-code-size); |
| /* Unitless, so it has to move with the size: left at the supporting leading |
| it would multiply the larger size into a 23px line box and give the header |
| a rhythm no other row in the panel has. */ |
| --text-supporting-leading: var(--text-code-leading); |
| } |
| .maka-tool-output-chunk { display: contents; } |
| .maka-tool-output-chunk-stderr { color: var(--destructive); } |
| .maka-tool-output-chunk-redacted { opacity: 0.65; } |
| .maka-tool-output-redacted { display: inline; margin-left: 2px; color: var(--warning-text, var(--info-text)); } |
| .maka-sandbox-blocked-banner { margin-bottom: 10px; } |
| .maka-sandbox-blocked-description { |
| font: var(--maka-text-supporting); |
| display: flex; flex-direction: column; gap: 4px; white-space: pre-wrap; word-break: break-word; } |
| .maka-sandbox-blocked-error { |
| font: var(--maka-text-supporting); |
| } |
| .maka-sandbox-blocked-copy { align-self: start; } |
| .maka-sandbox-blocked-copy[data-pending="true"] { cursor: progress; } |
| .maka-sandbox-blocked-copy[data-copy-feedback="copied"] { border-color: oklch(from var(--link) l c h / 0.35); color: var(--link); } |
| .maka-sandbox-blocked-copy[data-copy-feedback="failed"] { border-color: oklch(from var(--destructive) l c h / 0.35); color: var(--destructive); } |
| .maka-agent-preview-failure { color: var(--destructive); } |
| .maka-automation-result-icon { display: inline; margin-right: 4px; vertical-align: text-bottom; } |
| .maka-turn-status-icon { flex: 0 0 auto; } |
| |
| .maka-turn-aborted-marker, |
| .maka-turn-automation-origin, |
| .maka-turn-failed-banner { |
| font: var(--maka-text-supporting); |
| display: inline-flex; |
| width: fit-content; |
| align-items: center; |
| margin-inline: 0; |
| border-radius: var(--radius-control); |
| } |
| |
| .maka-turn-aborted-marker { |
| gap: var(--space-1); |
| margin-block: var(--space-0-5) var(--space-1); |
| padding: var(--space-0-5) var(--space-1-5); |
| background: var(--foreground-5); |
| color: var(--foreground-secondary); |
| font-style: italic; |
| } |
| |
| .maka-turn-aborted-marker em { font-style: italic; } |
| |
| .maka-turn-automation-origin { |
| align-self: flex-end; |
| gap: var(--space-1); |
| margin-bottom: var(--space-1); |
| padding: var(--space-0-5) var(--space-1-5); |
| background: var(--foreground-5); |
| color: var(--muted-foreground); |
| } |
| |
| .maka-turn-failed-banner { |
| flex-wrap: wrap; |
| gap: var(--space-1-5); |
| margin-block: var(--space-0-5) var(--space-1-5); |
| padding: var(--space-1) var(--space-2); |
| border: 1px solid oklch(from var(--destructive) l c h / 0.28); |
| background: oklch(from var(--destructive) l c h / 0.1); |
| color: var(--destructive); |
| } |
| |
| .maka-turn-failed-icon { display: inline-flex; align-items: center; } |
| .maka-turn-failed-recovery { color: var(--text-muted); } |
| .maka-turn-failed-recovery::before { |
| margin-right: var(--space-1-5); |
| color: var(--border-strong); |
| content: "·"; |
| } |
| |
| .maka-turn-lineage-row, |
| .maka-turn-footer { |
| display: flex; |
| width: 100%; |
| max-width: var(--maka-chat-measure, 680px); |
| flex-wrap: wrap; |
| align-items: center; |
| justify-content: flex-start; |
| gap: var(--space-0-5); |
| margin-left: 0; |
| margin-right: auto; |
| } |
| |
| .maka-turn-lineage-row { |
| margin-top: var(--space-0-5); |
| margin-bottom: var(--space-1); |
| opacity: 0.82; |
| } |
| |
| .maka-turn-lineage-row-reverse { margin-top: var(--space-1); } |
| |
| .maka-turn-lineage-badge { |
| border: 0; |
| border-radius: var(--radius-pill); |
| background: oklch(from var(--foreground) l c h / 0.05); |
| color: var(--muted-foreground); |
| } |
| |
| .maka-turn-lineage-badge[data-direction="forward"] { |
| background: oklch(from var(--info) l c h / 0.06); |
| color: oklch(from var(--info-text) calc(l - 0.06) c h); |
| } |
| |
| .maka-turn-lineage-badge[data-direction="reverse"] { |
| background: oklch(from var(--brand-deep) l c h / 0.06); |
| color: oklch(from var(--brand-deep) calc(l - 0.04) c h); |
| } |
| |
| .maka-turn-footer { |
| margin-top: var(--space-0-5); |
| padding: 0; |
| opacity: 0; |
| transition: opacity var(--duration-quick) var(--ease-out-strong); |
| } |
| |
| .maka-assistant-answer:hover .maka-turn-footer, |
| .maka-turn-footer:focus-within { opacity: 1; } |
| |
| .maka-turn-footer-action { |
| border: 0; |
| border-radius: var(--radius-surface); |
| color: var(--muted-foreground); |
| } |
| |
| .maka-turn-footer-action[data-pending="true"] { |
| cursor: progress; |
| opacity: 0.78; |
| } |
| |
| .maka-turn-footer-action[aria-disabled="true"][data-pending="true"] { opacity: 0.78; } |
| .maka-turn-footer-action[data-copy-feedback="copied"] { color: var(--link); } |
| .maka-turn-footer-action[data-copy-feedback="failed"] { color: var(--destructive); } |
| |
| .maka-text-shimmer-static { display: inline-block; } |
| .maka-text-shimmer { position: relative; display: inline-grid; } |
| .maka-text-shimmer-base, |
| .maka-text-shimmer-sweep { grid-area: 1 / 1; } |
| .maka-text-shimmer-base { color: var(--muted-foreground); } |
| .maka-text-shimmer-sweep { |
| background: linear-gradient(100deg, transparent 30%, oklch(from var(--foreground) l c h / 0.95) 50%, transparent 70%); |
| background-clip: text; |
| background-position: 150% 0; |
| background-size: 200% 100%; |
| color: transparent; |
| -webkit-text-fill-color: transparent; |
| animation: maka-text-shimmer 1.8s linear infinite; |
| } |
| @media (prefers-reduced-motion: reduce) { |
| .maka-text-shimmer-sweep { opacity: 0; animation: none; } |
| } |
| |
| |
| .maka-overlay-preview { |
| font: var(--maka-text-supporting); |
| max-height: 180px; |
| margin: var(--space-1) 0 0; |
| overflow: auto; |
| font-variant-ligatures: none; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
| .maka-overlay-close { justify-self: end; } |
| .maka-tool-diff, |
| .maka-tool-terminal { |
| display: grid; |
| gap: 0; |
| padding: 0; |
| border-radius: var(--radius-surface); |
| background: var(--background); |
| box-shadow: var(--shadow-minimal-flat); |
| white-space: normal; |
| } |
| .maka-tool-diff-paths, |
| .maka-tool-terminal-head { |
| font: var(--maka-text-supporting); |
| display: flex; |
| flex-wrap: wrap; |
| gap: var(--space-1-5); |
| padding: var(--space-1) var(--space-2); |
| border-bottom: 1px solid var(--border); |
| background: var(--foreground-2); |
| } |
| .maka-tool-terminal-head { align-items: center; font-variant-ligatures: none; } |
| .maka-tool-diff-paths code { color: var(--foreground-secondary); background: transparent; } |
| .maka-tool-diff-body { |
| font: var(--maka-text-supporting); |
| max-height: 320px; |
| margin: 0; |
| padding-block: var(--space-1); |
| overflow: auto; |
| font-variant-ligatures: none; |
| white-space: pre; |
| word-break: normal; |
| } |
| /* Only the chat consumer moved into `.maka-tool-output-panel`, where the diff |
| sits beside a command on the code tier and a 12px body next to 14px reads as |
| a different kind of text. `apps/desktop`'s artifact pane still draws this as |
| a standalone card at the supporting tier its container asks for, so the tier |
| belongs to the panel, not to the shared class. */ |
| .maka-tool-output-panel .maka-tool-diff-body { |
| font: var(--maka-text-code); |
| padding-block: 0; |
| } |
| .maka-tool-diff-line { display: block; padding-inline: var(--space-2); white-space: pre; } |
| .maka-tool-diff-gutter { |
| display: inline-block; |
| box-sizing: content-box; |
| text-align: right; |
| padding-right: var(--space-2); |
| margin-right: var(--space-1); |
| border-right: 1px solid var(--border); |
| color: var(--muted-foreground); |
| user-select: none; |
| } |
| .maka-tool-diff-line[data-line="add"] { background: oklch(from var(--success) l c h / 0.1); color: var(--success-text); } |
| .maka-tool-diff-line[data-line="del"] { background: oklch(from var(--destructive) l c h / 0.1); color: var(--destructive); } |
| .maka-tool-diff-line[data-line="hunk"] { |
| font: var(--maka-text-heading-5); |
| background: oklch(from var(--link) l c h / 0.08); color: var(--foreground-secondary); } |
| .maka-tool-diff-line[data-line="meta"] { color: var(--muted-foreground); } |
| .maka-tool-diff-line[data-line="ctx"] { color: var(--foreground-secondary); } |
| .maka-tool-terminal-cwd { color: var(--muted-foreground); background: transparent; } |
| .maka-tool-terminal-cmd { |
| font: var(--maka-text-heading-5); |
| min-width: 0; flex: 1 1 auto; overflow: hidden; background: transparent; color: var(--foreground); text-overflow: ellipsis; white-space: nowrap; } |
| /* Pinned like every other pill in the scan, even though the whole |
| `.maka-tool-terminal-*` family is currently unreachable: |
| `previewVariants({part: 'terminal-*'})` has no call site — `TerminalPreview` |
| renders `maka-tool-output-stack` / `ShellOutputBody` / `ToolCodeBlock` |
| instead — and `check-dead-css` cannot see that because the literals still |
| exist in `previewVariants`. The alternative is an exemption whose reason is |
| "nothing renders this", which is a fact about call sites recorded in a |
| stylesheet and would outlive the day someone wires the family back up. |
| Deleting the family is its own change. */ |
| .maka-tool-terminal-exit { |
| font: var(--maka-text-heading-5); |
| height: var(--h-control-sm); display: inline-flex; align-items: center; white-space: nowrap; padding: 1px var(--space-1-5); border-radius: var(--radius-pill); background: var(--foreground-5); color: var(--foreground-secondary); letter-spacing: 0.04em; } |
| .maka-tool-terminal-exit[data-ok="true"] { background: oklch(from var(--success) l c h / 0.14); color: var(--success); } |
| .maka-tool-terminal-exit[data-ok="false"] { background: oklch(from var(--destructive) l c h / 0.14); color: var(--destructive); } |
| .maka-tool-terminal-empty { |
| font: var(--maka-text-supporting); |
| margin: 0; padding: var(--space-2); color: var(--muted-foreground); font-style: italic; } |
| .maka-tool-terminal-stream { |
| font: var(--maka-text-supporting); |
| max-height: 180px; margin: 0; padding: var(--space-1-5) var(--space-2); overflow: auto; font-variant-ligatures: none; white-space: pre-wrap; word-break: break-word; } |
| .maka-tool-terminal-stream[data-stream="stdout"] { color: var(--foreground); } |
| .maka-tool-terminal-stream[data-stream="stderr"] { border-top: 1px solid var(--border); background: oklch(from var(--destructive) l c h / 0.04); color: var(--destructive); } |
| .maka-tool-terminal-truncated-note { |
| font: var(--maka-text-supporting); |
| display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1-5) var(--space-2); border-top: 1px solid var(--border); background: oklch(from var(--warning) l c h / 0.06); color: var(--foreground-secondary); } |
| .maka-tool-terminal-truncated-note > span { min-width: 0; } |
| .maka-tool-terminal-copy, |
| .maka-agent-preview-copy { flex: 0 0 auto; } |
| .maka-tool-terminal-copy[data-pending="true"], |
| .maka-agent-preview-copy[data-pending="true"] { cursor: progress; } |
| .maka-tool-terminal-copy[data-copy-error="true"], |
| .maka-agent-preview-copy[data-copy-error="true"] { border-color: oklch(from var(--destructive) l c h / 0.35); color: var(--destructive); } |
| |
| .maka-agent-preview { |
| font: var(--maka-text-supporting); |
| display: grid; gap: var(--space-2-5); padding: var(--space-2-5) var(--space-3); border: 1px solid var(--foreground-10); border-radius: var(--radius-surface); background: var(--foreground-3); white-space: normal; } |
| .maka-agent-preview[data-ok="false"], |
| .maka-agent-preview[data-status="failed"], |
| .maka-agent-preview[data-status="cancelled"] { border-color: oklch(from var(--destructive) l c h / 0.22); } |
| .maka-agent-preview-head { display: grid; gap: var(--space-0-5); padding-bottom: var(--space-1-5); border-bottom: 1px solid var(--foreground-10); } |
| .maka-agent-preview-head strong { |
| font: var(--maka-text-heading-4); |
| min-width: 0; overflow: hidden; color: var(--foreground); text-overflow: ellipsis; white-space: nowrap; } |
| .maka-agent-preview-head small, |
| .maka-agent-preview-section small, |
| .maka-agent-preview-meta dt { |
| font: var(--maka-text-supporting); |
| color: var(--muted-foreground); letter-spacing: 0.04em; text-transform: uppercase; } |
| .maka-agent-preview-summary-line, |
| .maka-agent-preview-section-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-2); } |
| .maka-agent-preview-summary-line small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| .maka-agent-preview-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1-5); margin-top: var(--space-1); } |
| .maka-agent-preview-message { |
| font: var(--maka-text-supporting); |
| padding: var(--space-2) var(--space-2-5); border-radius: var(--radius-control); background: oklch(from var(--destructive) l c h / 0.07); color: var(--destructive); } |
| .maka-agent-preview-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; } |
| .maka-agent-preview-meta > div { display: grid; min-width: 0; gap: var(--space-0-5); } |
| .maka-agent-preview-meta dd { |
| font: var(--maka-text-supporting); |
| min-width: 0; margin: 0; overflow: hidden; color: var(--foreground-secondary); text-overflow: ellipsis; white-space: nowrap; } |
| .maka-agent-preview-section { display: grid; gap: var(--space-1-5); } |
| .maka-agent-preview-section > strong, |
| .maka-agent-preview-section-head > strong { |
| font: var(--maka-text-heading-5); |
| min-width: 0; color: var(--foreground); } |
| .maka-agent-preview-section ul { display: grid; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; } |
| .maka-agent-preview-section li { display: grid; min-width: 0; gap: var(--space-0-5); padding-block: var(--space-1-5); border-top: 1px solid var(--foreground-5); } |
| .maka-agent-preview-section li:first-child { padding-top: 0; border-top: 0; } |
| .maka-agent-preview-section code { |
| font: var(--maka-text-supporting); |
| min-width: 0; overflow: hidden; background: transparent; color: var(--foreground); text-overflow: ellipsis; white-space: nowrap; } |
| .maka-agent-preview-section p, |
| .maka-agent-preview-section span { |
| font: var(--maka-text-supporting); |
| margin: 0; color: var(--foreground-secondary); white-space: pre-wrap; word-break: break-word; } |
| .maka-agent-preview-copy[data-copied="true"] { border-color: oklch(from var(--link) l c h / 0.35); color: var(--link); } |
| |
| .maka-web-search-preview { display: grid; gap: var(--space-2); padding: var(--space-2-5) var(--space-3); border: 1px solid var(--foreground-10); border-radius: var(--radius-surface); background: var(--foreground-3); } |
| .maka-web-search-preview > header { display: flex; flex-direction: column; gap: var(--space-0-5); padding-bottom: var(--space-1-5); border-bottom: 1px solid var(--foreground-10); } |
| .maka-web-search-preview > header strong { |
| font: var(--maka-text-heading-4); |
| color: var(--foreground); } |
| .maka-web-search-preview > header small, |
| .maka-web-search-preview li small { |
| font: var(--maka-text-supporting); |
| color: var(--muted-foreground); letter-spacing: 0.04em; text-transform: uppercase; } |
| .maka-web-search-preview ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } |
| .maka-web-search-preview li { display: grid; gap: var(--space-0-5); padding-block: var(--space-2); border-top: 1px solid var(--foreground-5); } |
| .maka-web-search-preview li:first-child { padding-top: 0; border-top: 0; } |
| .maka-web-search-preview a { |
| font: var(--maka-text-heading-4); |
| color: var(--foreground); text-decoration: none; } |
| .maka-web-search-preview a:hover { text-decoration: underline; } |
| .maka-web-search-preview li p { |
| font: var(--maka-text-supporting); |
| margin: 0; color: var(--foreground-secondary); white-space: pre-wrap; word-break: break-word; } |
| .maka-web-search-error { border-color: color-mix(in oklab, var(--destructive-text) 32%, var(--foreground-10)); background: color-mix(in oklab, var(--destructive-text) 8%, var(--foreground-3)); } |
| .maka-web-search-error-message, |
| .maka-web-search-error-repair { |
| font: var(--maka-text-supporting); |
| margin: 0; white-space: pre-wrap; word-break: break-word; } |
| .maka-web-search-error-message { color: var(--destructive-text); } |
| .maka-web-search-error-repair { color: var(--foreground-secondary); } |
| |
| .maka-load-tool-preview { |
| font: var(--maka-text-supporting); |
| display: grid; gap: var(--space-0-5); margin: var(--space-1) 0 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: var(--background); box-shadow: var(--shadow-minimal-flat); } |
| .maka-load-tool-preview p { margin: 0; } |
| .maka-load-tool-title { |
| font: var(--maka-text-heading-5); |
| } |
| .maka-load-tool-count, |
| .maka-load-tool-footer { color: var(--muted-foreground); } |
| .maka-load-tool-tools { |
| font: var(--maka-text-supporting); |
| word-break: break-word; } |
| .maka-load-tool-footer { |
| font: var(--maka-text-supporting); |
| } |
