/* TOOL STUDIO: the Tool Studio button and Special tools in the Toolbox, the Studio screen and the run screen
   (tool-studio.js). On the app's :root tokens and components; dark only, no colours of its own. */

/* The Toolbox: the Tool Studio button is a one-row .glist card above Basic tools; Special tools is a second panel
   under Basic tools, in the same .basic-tools look. */
#studioToolsPanel{margin-top:12px}
#studioToolsList:empty{display:none}

/* The Studio screen: the description box, then the tabs and the cards. */
.studio-prompt{display:grid;gap:10px;margin-top:12px}
.studio-prompt .field-label{margin:0 2px}
.studio-prompt textarea{min-height:84px;resize:vertical}
.studio-prompt .btn.primary{justify-self:end}
.task-card.studio-card{grid-template-columns:minmax(0,1fr) auto;gap:6px}
.task-card.studio-card.has-icon{grid-template-columns:40px minmax(0,1fr) auto;padding-left:10px}
.studio-card-icon{width:40px;height:40px}
.studio-card-icon .icon{width:20px;height:20px}
.studio-card .task-title{display:block;overflow-wrap:anywhere}
.studio-meta{display:block;margin-top:4px;overflow-wrap:anywhere}
.studio-meta .tag{margin:3px 6px 3px 0;vertical-align:1px}
.studio-card-actions{display:flex;align-items:center;gap:8px;padding-right:2px}
.studio-card-actions .btn:not(.trash-btn){min-height:40px;padding:0 14px}
.studio-list-head{margin:14px 2px 2px}
.studio-list-head:first-child{margin-top:4px}
.studio-step-list{display:grid;gap:8px;margin:12px 0;padding-left:22px}
.studio-step-list small{display:block;color:var(--text-2)}

/* The run: the step strip, what the step asks for, the results. */
.studio-run{display:grid;gap:12px;margin-top:12px}
.studio-run-steps{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.studio-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:32px;padding:4px 12px 4px 6px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--chip-fill);color:var(--text-2);font-size:12.5px;font-weight:600;line-height:1.3}
.studio-chip>span[dir]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-chip .icon{flex:none;width:18px;height:18px;stroke-width:2.25}
.studio-chip-n{display:grid;flex:none;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--fill-1);font-size:11px}
.studio-chip.is-done{border-color:color-mix(in srgb,var(--green) 45%,transparent);color:var(--green)}
.studio-chip.is-current{border-color:var(--primary);color:var(--text)}
.studio-chip.is-current .studio-chip-n{background:var(--primary);color:var(--on-primary)}
.studio-chip.is-skipped{opacity:.6;text-decoration:line-through}
.studio-chip.is-stopped{border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)}
.studio-run-input:empty,.studio-run-result:empty{display:none}
.studio-run-input{display:grid;gap:4px}
.studio-ask,.studio-confirm{margin:0;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.studio-field{display:grid}
.studio-field .field-label small{color:var(--text-2);font-weight:400}
.studio-help{margin:-2px 2px 6px;color:var(--text-2);font-size:12.5px;line-height:1.4}
.studio-field .seg{margin-top:0}
.studio-field .checks{margin:0}
.studio-field.is-missing .field{border-color:color-mix(in srgb,var(--warn) 60%,transparent)}
.studio-review-tag{margin:-2px 2px 6px}
.studio-run-actions{justify-content:flex-end;gap:8px;margin-top:8px}
.studio-pick{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.studio-pick .icon{width:20px;height:20px}
.studio-people .tool-row input{flex:none;width:22px;height:22px}
.studio-run-result{display:grid;gap:10px}
.studio-result{display:grid;gap:8px;margin:0}
.studio-result>.tag{justify-self:start}
.studio-summary{margin:0;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.studio-values{display:grid;gap:6px;margin:0}
.studio-values>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:10px;padding:6px 0;border-top:1px solid var(--hairline)}
.studio-values>div:first-child{border-top:0}
.studio-values dt{color:var(--text-2);font-size:13px}
.studio-values dd{margin:0;font-weight:600;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.studio-checks{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.studio-checks li{display:flex;gap:8px;line-height:1.4}
.studio-checks .is-ok{color:var(--green)}
.studio-checks .is-failed{color:var(--bad)}
.studio-table-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-inner)}
.studio-table-wrap:focus-visible{outline:var(--ring-width) solid var(--ring);outline-offset:var(--ring-offset)}
.studio-grid{width:max-content;min-width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.studio-grid th,.studio-grid td{padding:7px 10px;border-bottom:1px solid var(--hairline);text-align:start;white-space:nowrap}
.studio-grid thead th{color:var(--text-2);font-weight:600}
.studio-grid tbody tr:last-child>*{border-bottom:0}
.studio-run-again{justify-content:flex-end;margin-top:12px}
.studio-history-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:4px}
.studio-history-row .task-body small{display:block;margin-top:2px;color:var(--text-2)}
.studio-confirm-details{margin:4px 0 0}

/* The button under the agent's reply that opens the tool it named (index.html attachStudioLink). */
.tool-confirm .tool-open-studio{max-width:100%;overflow-wrap:anywhere}

/* Files the agent brought from the chat (studio_open): listed before Start with ✕, and named on the step that uses one. */
.studio-chat-files{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.studio-chat-files .note{flex-basis:100%;margin:0}
.studio-chat-used{margin:0}
.studio-swap{align-self:flex-start}