| 1 | /* Expanded-body scroll wrapper for the run_code CodeBlock; the IN/OUT card |
| 2 | and the terminal card scroll INSIDE their own surface instead, so the |
| 3 | scrollbar sits within the rounded card. */ |
| 4 | .dsh-ToolRow-bodyScroll { |
| 5 | max-height: 260px; |
| 6 | overflow-y: auto; |
| 7 | } |
| 8 | |
| 9 | /* Expanded input/output card (figma 1249:35657): the code-block surface and |
| 10 | radius from the TerminalBlock/CodeBlock family. The card itself is a plain |
| 11 | column — the padding and the IN/OUT gutter-label grid live on each section |
| 12 | so the divider spans the full card width and each section scrolls alone. */ |
| 13 | .dsh-ToolRow-ioCard { |
| 14 | display: flex; |
| 15 | flex-direction: column; |
| 16 | margin: 4px 0 4px 4px; |
| 17 | border: 0.5px solid var(--dsw-alias-border-l1); |
| 18 | border-radius: 12px; |
| 19 | background: var(--dsw-alias-markdown-code-block); |
| 20 | font: var(--dsw-font-markdown-code-block-small); |
| 21 | } |
| 22 | |
| 23 | /* One card section (IN or OUT): the gutter-label grid, capped and scrolling |
| 24 | independently so a long input never buries a short output (and vice versa). */ |
| 25 | .dsh-ToolRow-ioSection { |
| 26 | display: grid; |
| 27 | grid-template-columns: max-content 1fr; |
| 28 | column-gap: 14px; |
| 29 | align-items: baseline; |
| 30 | padding: 12px 16px; |
| 31 | max-height: 150px; |
| 32 | overflow-y: auto; |
| 33 | } |
| 34 | |
| 35 | /* Card-internal scrollbar: a 2px transparent border clips the thumb inward so |
| 36 | it floats off the rounded card edge instead of hugging it (the terminal |
| 37 | card's own output scroller carries the same treatment in TerminalBlock). */ |
| 38 | .dsh-ToolRow-ioSection::-webkit-scrollbar-thumb { |
| 39 | border: 2px solid transparent; |
| 40 | background-clip: padding-box; |
| 41 | border-radius: 6px; |
| 42 | } |
| 43 | |
| 44 | /* Track end-margins keep the thumb's travel out of the rounded corners. */ |
| 45 | .dsh-ToolRow-ioSection::-webkit-scrollbar-track { |
| 46 | margin: 6px 0; |
| 47 | } |
| 48 | |
| 49 | /* Caption (not tertiary): one step dimmer than the payload text so the |
| 50 | gutter labels read as labels, not as part of the content. Sticky against |
| 51 | the section's own scroll so the label stays readable while its payload |
| 52 | scrolls underneath (top 0 = the section's padding edge inside the |
| 53 | scrollport; start-aligned because sticky needs a block-start anchor). */ |
| 54 | .dsh-ToolRow-ioLabel { |
| 55 | position: sticky; |
| 56 | top: 0; |
| 57 | align-self: start; |
| 58 | color: var(--dsw-alias-label-caption); |
| 59 | } |
| 60 | |
| 61 | /* l2 hairline between the IN and OUT sections, spanning the full card width |
| 62 | (it sits between the padded sections, not inside their grid). */ |
| 63 | .dsh-ToolRow-ioDivider { |
| 64 | flex: none; |
| 65 | height: 0.5px; |
| 66 | background: var(--dsw-alias-border-l2); |
| 67 | } |
| 68 | |
| 69 | .dsh-ToolRow-ioText { |
| 70 | min-width: 0; |
| 71 | white-space: pre-wrap; |
| 72 | word-break: break-word; |
| 73 | color: var(--dsw-alias-label-secondary); |
| 74 | } |
| 75 | |
| 76 | /* A failed call's OUT text shares the collapsed summary's error color. */ |
| 77 | .dsh-ToolRow-ioText[data-error] { |
| 78 | color: var(--dsw-alias-state-error-primary); |
| 79 | } |
| 80 | |
| 81 | /* The block-shaped expanded bodies: the code variant's run_code program |
| 82 | through CodeBlock (shiki-highlighted TypeScript), a terminal card's command |
| 83 | output through TerminalBlock, a diff card through DiffBlock, a read card's |
| 84 | line-numbered window through ReadBlock, a search card's grouped matches or |
| 85 | path list through SearchBlock, and a web card's citation/source list through |
| 86 | WebBlock. All are drawn by the shared primitive, so only the row's |
| 87 | indentation is this file's concern — the margin also replaces each |
| 88 | primitive's own standalone vertical spacing with the flow's row rhythm. */ |
| 89 | .dsh-ToolRow-codeBody, |
| 90 | .dsh-ToolRow-terminalBody, |
| 91 | .dsh-ToolRow-diffBody, |
| 92 | .dsh-ToolRow-readBody, |
| 93 | .dsh-ToolRow-imageBody, |
| 94 | .dsh-ToolRow-searchBody, |
| 95 | .dsh-ToolRow-webBody { |
| 96 | margin: 4px 0 4px 4px; |
| 97 | } |
| 98 | |
| 99 | /* The recovery footer for a capped search: the result text (its `Full … stored |
| 100 | at …` locator) below the card in the muted tone, since the card holds only the |
| 101 | retained rows. Same column indent as the card body. */ |
| 102 | .dsh-ToolRow-searchRecovery { |
| 103 | margin: 4px 0 4px 4px; |
| 104 | white-space: pre-wrap; |
| 105 | overflow-wrap: anywhere; |
| 106 | font: var(--dsw-font-xs-13); |
| 107 | color: var(--dsw-alias-label-tertiary); |
| 108 | } |
| 109 | |
| 110 | /* The image card's in-card label: the view's replacement title, else the |
| 111 | shortened path — the same role ReadBlock's own label plays, so the presentation |
| 112 | contract's replacement-title rule is honoured here too. */ |
| 113 | .dsh-ToolRow-imageLabel { |
| 114 | margin-bottom: 4px; |
| 115 | overflow-wrap: anywhere; |
| 116 | font: var(--dsw-font-sm-13); |
| 117 | color: var(--dsw-alias-label-secondary); |
| 118 | } |
| 119 | |
| 120 | /* The image card's own result text (media type, dimensions, byte size) under the |
| 121 | gallery, in the same muted tone the search recovery footer uses. Always |
| 122 | rendered: the attachment presentation slot is optional, so when nothing |
| 123 | occupies it the gallery is empty and this line is the only evidence an image |
| 124 | was returned. The enclosing .dsh-ToolRow-imageBody already carries the row indent. */ |
| 125 | .dsh-ToolRow-imageMeta { |
| 126 | white-space: pre-wrap; |
| 127 | overflow-wrap: anywhere; |
| 128 | font: var(--dsw-font-xs-13); |
| 129 | color: var(--dsw-alias-label-tertiary); |
| 130 | } |
| 131 | |
| 132 | /* In-row code renders at the smaller code size (12/18) via each primitive's |
| 133 | rebindable content-font seam; standalone markdown code blocks keep 13/22. */ |
| 134 | .dsh-ToolRow-codeBody { |
| 135 | --dsl-code-block-content-font: var(--dsw-font-markdown-code-block-small); |
| 136 | } |
| 137 | |
| 138 | /* The terminal card scrolls its OUTPUT inside its own surface (same l1 |
| 139 | hairline as the IN/OUT card): the banner stays pinned and the scrollbar |
| 140 | never rides over it. 224px = the 260px card cap minus the ~36px banner. */ |
| 141 | .dsh-ToolRow-terminalBody { |
| 142 | --dsl-terminal-font: var(--dsw-font-markdown-code-block-small); |
| 143 | --dsl-terminal-line-height: 18px; |
| 144 | --dsl-terminal-output-max-height: 224px; |
| 145 | border: 0.5px solid var(--dsw-alias-border-l1); |
| 146 | } |
| 147 |