/* Controller index only; linked after app.css by index.html and by nothing
   else. These rules used to sit in an inline <style> block, where the page's
   own CSP (style-src 'self') blocked every one of them. They must not live in
   the shared app.css: grid, chat and workspace load that file too, and page
   geometry there is load-bearing for the terminal viewers. */
h3{font-size:var(--vb-type-px-13);margin:16px 0 4px}
#error:empty,p:empty{display:none}

/* prose */
.sub{color:var(--vb-swatch-52514e);margin:0 0 10px}
.hint{font-size:var(--vb-type-px-12);color:var(--vb-swatch-52514e);max-width:78ch;margin:4px 0}
.hint.tiny{color:var(--vb-swatch-6b6864)}
.flash{background:var(--vb-swatch-f4faf4);border-left:3px solid var(--vb-swatch-0a7a0a);padding:5px 8px;margin:8px 0}
.flash.error{background:var(--vb-swatch-fdf4f4);border-color:var(--vb-swatch-b00);color:var(--vb-swatch-b00)}

/* controls */
/* Field labels are the text that says what each control is, so they have to be
   legible. The old shared default at 11px had about 3.4:1 contrast on white, which
   fails WCAG AA for normal text and reads as washed out at that size. These are
   scoped to this page so other pages keep their tested layout. */
label{font-size:var(--vb-type-px-12);color:var(--vb-swatch-52514e)}
.field>label,.row-fields label{color:var(--vb-swatch-3f3d3a);font-weight:600;letter-spacing:.01em}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--vb-swatch-03c);outline-offset:0}
button.primary{padding:4px 12px}
.field{display:inline-block}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;flex-basis:100%}

/* grouped form sections (create box) */
#create{display:block;margin:12px 0}
.group{border:1px solid var(--vb-swatch-e2e2e2);margin:0 0 10px;padding:4px 12px 12px;min-width:0}
.group>legend{font-size:var(--vb-type-px-12);color:var(--vb-swatch-0b0b0b);font-weight:700;padding:0 5px;letter-spacing:.02em}
.group .hint{margin:6px 0 0}
.group>details{margin:8px 0 0}
#create-instructions-editor summary{font-size:var(--vb-type-px-12);color:var(--vb-swatch-52514e)}
#create-instructions-editor .field{display:block;max-width:64rem}
#create-instructions-editor textarea{box-sizing:border-box}
.row-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:10px 16px;align-items:end;margin-top:6px;max-width:64rem}
.model-picker{display:block}
.model-picker-open{width:100%;text-align:left;background:var(--vb-surface);border:1px solid var(--vb-line-strong);padding:6px 9px;cursor:pointer;overflow-wrap:anywhere}
.model-picker-open:disabled{cursor:default;opacity:.55}
.model-picker-dialog{box-sizing:border-box;width:min(36rem,calc(100vw - 2rem));max-height:min(80vh,42rem);padding:16px;border:1px solid var(--vb-line);background:var(--vb-elevated);color:var(--vb-ink);box-shadow:var(--vb-shadow-lg)}
.model-picker-dialog::backdrop{background:var(--vb-modal-backdrop)}
.model-picker-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.model-picker-title{margin:0;font-size:var(--vb-type-px-18)}
.model-picker-close{border:0;background:transparent;font-size:var(--vb-type-px-24);cursor:pointer}
.model-picker-source{font-size:var(--vb-type-px-12);color:var(--vb-ink-soft);margin:8px 0}
.model-picker-search{box-sizing:border-box;width:100%;padding:8px;margin-bottom:8px}
.model-picker-list{max-height:min(45vh,23rem);overflow:auto}
.model-picker-option{display:block;width:100%;border:0;border-bottom:1px solid var(--vb-line);background:var(--vb-surface);color:var(--vb-ink);text-align:left;padding:9px;cursor:pointer;overflow-wrap:anywhere}
.model-picker-option:hover,.model-picker-option[aria-selected=true]{background:var(--vb-surface-2);color:var(--vb-ink)}
.model-picker-option-label{display:block;font-weight:600}
.model-picker-option-id{display:block;font-size:var(--vb-type-px-11);color:var(--vb-ink-soft)}
.model-picker-empty{font-size:var(--vb-type-px-13);color:var(--vb-ink-soft)}
.model-picker-custom{display:flex;gap:8px;margin-top:12px;border-top:1px solid var(--vb-line);padding-top:12px}
.model-picker-exact{flex:1;min-width:0;padding:7px}
.model-picker-use-exact{white-space:nowrap}
.model-picker-effort-label{display:block;margin-top:14px;font-weight:600}
.model-picker-effort{display:block;width:100%;margin-top:5px;padding:7px}
.model-picker-effort-note{font-size:var(--vb-type-px-12);color:var(--vb-ink-soft);margin:6px 0 12px}
.model-picker-apply{width:100%;padding:9px}
#create .field{display:block;min-width:0}
#create .field>input,#create .field>select,#create .field>textarea{width:100%;margin-top:3px}
#create .form-actions{margin-top:2px}
#create .form-actions .hint{margin:0}

/* optional tool presets */
.tools{border:0;padding:0;margin:6px 0 0;min-width:0;display:block}
.tools legend{font-size:var(--vb-type-px-12);color:var(--vb-swatch-3f3d3a);font-weight:600;padding:0;letter-spacing:.01em}
.tools label{display:inline-flex;align-items:center;gap:6px;margin:4px 18px 0 0;font-size:var(--vb-type-px-13);color:var(--vb-swatch-0b0b0b)}
#create-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;row-gap:2px}
#create-tools label{margin:2px 0 0}
.tools input[type=checkbox]{display:inline-block;flex:none;width:auto;margin:0;padding:0}
.custom-tools{max-width:100%;margin:10px 0 0}

/* tables */
.kpi{display:flex;flex-wrap:wrap;gap:2px 20px;background:var(--vb-swatch-fafafa);border:1px solid var(--vb-swatch-eee);padding:5px 8px;margin:8px 0}
.kpi span{white-space:nowrap;color:var(--vb-swatch-52514e)}
.kpi b{color:var(--vb-swatch-0b0b0b);font-weight:700}
.table-wrap{overflow-x:auto}
table.markets{border-collapse:collapse;width:100%;min-width:44rem;table-layout:fixed}
table.markets th,table.markets td{text-align:left;padding:7px 12px;border-bottom:1px solid var(--vb-swatch-eee);vertical-align:top;overflow-wrap:anywhere}
table.markets th{font-weight:700;white-space:nowrap;overflow-wrap:normal;color:var(--vb-swatch-3f3d3a)}
table.markets th+th,table.markets td+td{border-left:1px solid var(--vb-swatch-f0f0f0)}
table.markets tr.row:hover{background:var(--vb-swatch-fafafa)}
.table-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-text.muted,.state-note{color:var(--vb-swatch-6b6864)}
.state-note{font-size:var(--vb-type-px-12);margin-top:1px}
#box-list table.markets{min-width:58rem}
#box-list th:nth-child(1){width:15%}
#box-list th:nth-child(2){width:12%}
#box-list th:nth-child(3){width:18%}
#box-list th:nth-child(4){width:10%}
#box-list th:nth-child(5){width:14%}
#box-list th:nth-child(6){width:15%}
#box-list th:nth-child(7){width:16%}
#box-list td select{width:100%}
#box-list td .linkbtn{display:inline-block;margin:0 8px 2px 0}
#box-list td:last-child{min-width:9rem}
#box-list .restart-action{vertical-align:middle;padding:2px 4px;text-decoration:none}
#box-list .restart-action svg{display:block}

/* native roles */
.role-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:10px 0}
.role-checklist{display:flex;flex-wrap:wrap;gap:8px 18px;margin:8px 0}
.role-checklist label{display:inline-flex;align-items:center;gap:6px;color:var(--vb-swatch-111);font-size:var(--vb-type-px-13)}
.role-checklist input{width:auto;margin:0}
.role-catalog{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;padding:10px 12px;border:1px solid var(--vb-swatch-e2e2e2);background:var(--vb-swatch-fafafa)}
.role-catalog-head{display:grid;gap:2px}.role-catalog-head span{color:var(--vb-swatch-666);font-size:var(--vb-type-px-12)}
.role-catalog-items{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.role-heading{width:auto;margin:0;padding:5px 9px;border:1px solid var(--vb-swatch-cfd5dc);border-radius:var(--r-control);background:var(--vb-swatch-fff);color:var(--vb-swatch-243b68);font-weight:700;text-decoration:none;cursor:pointer}
.role-heading:hover{border-color:var(--vb-swatch-6781ba);background:var(--vb-swatch-f4f7ff)}
.role-assignment-heading{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:14px 2px 8px}.role-assignment-heading strong{font-size:var(--vb-type-px-15)}.role-assignment-heading span{color:var(--vb-swatch-666);font-size:var(--vb-type-px-12)}
.role-assignment-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.role-assignment-card{overflow:hidden;border:1px solid var(--vb-swatch-d6dbe4);border-left:3px solid var(--vb-swatch-647fba);background:var(--vb-swatch-fff);box-shadow:0 2px 7px rgba(24,37,60,.08)}
.role-assignment-card.is-open{border-color:var(--vb-swatch-758ab8);border-left-color:var(--vb-swatch-294f9c)}
.role-assignment-summary{display:grid;grid-template-columns:auto minmax(9rem,.8fr) minmax(9rem,1fr) auto;align-items:center;gap:10px;padding:12px}
.role-box-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--vb-swatch-c3d0eb);border-radius:var(--r-control);background:var(--vb-swatch-f1f5fd);color:var(--vb-swatch-29457d);font-size:var(--vb-type-px-14);font-weight:800}
.role-assignment-identity{display:grid;gap:2px;min-width:0}.role-assignment-identity>small,.role-current-label{color:var(--vb-swatch-717782);font-size:var(--vb-type-px-10);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.role-assignment-identity>strong{overflow:hidden;font-size:var(--vb-type-px-15);text-overflow:ellipsis;white-space:nowrap}
.role-box-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.role-agent-badge,.role-state-badge{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:2px 6px;color:var(--vb-swatch-666);font-size:var(--vb-type-px-11)}.role-agent-badge{background:var(--vb-swatch-f2f2f2)}.role-state-badge:before{content:'';width:6px;height:6px;margin-right:4px;border-radius:var(--r-pill);background:var(--vb-swatch-34a853)}.role-assignment-card[data-state="hibernated"] .role-state-badge:before,.role-assignment-card[data-state="stopped"] .role-state-badge:before{background:var(--vb-swatch-888)}
.role-assignment-current{display:grid;gap:4px;min-width:0}.role-current-pills{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.role-pill{display:inline-flex;align-items:center;padding:3px 7px;border:1px solid var(--vb-swatch-ccd7ef);border-radius:var(--r-pill);background:var(--vb-swatch-f3f6fd);color:var(--vb-swatch-29457d);font-size:var(--vb-type-px-12);font-weight:700}
.role-pill.empty{border-color:var(--vb-swatch-ddd);background:var(--vb-swatch-f7f7f7);color:var(--vb-swatch-777);font-weight:500}
.role-assignment-toggle{width:auto;margin:0;padding:6px 10px;border:1px solid var(--vb-swatch-8ea3d0);background:var(--vb-swatch-f4f7ff);color:var(--vb-swatch-243b68);font-weight:700;white-space:nowrap;cursor:pointer}
.role-assignment-toggle:hover{border-color:var(--vb-swatch-6781ba);background:var(--vb-swatch-f4f7ff)}
.role-assignment-editor{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:6px;padding:10px;border-top:1px solid var(--vb-swatch-e2e2e2);background:var(--vb-swatch-fafafa)}
.role-assignment-editor[hidden]{display:none}
.role-assignment-editor-head{display:grid;grid-column:1/-1;gap:2px;margin:1px 2px 4px}.role-assignment-editor-head strong{font-size:var(--vb-type-px-13)}.role-assignment-editor-head span{color:var(--vb-swatch-666);font-size:var(--vb-type-px-12)}
.role-assignment-editor label{display:flex!important;align-items:flex-start;gap:8px;margin:0;padding:8px;border:1px solid var(--vb-swatch-e0e0e0);background:var(--vb-swatch-fff);color:var(--vb-swatch-111);cursor:pointer}
.role-assignment-editor label>span{display:grid;gap:2px}.role-assignment-editor label strong{font-size:var(--vb-type-px-13)}.role-assignment-editor label small{color:var(--vb-swatch-666);font-size:var(--vb-type-px-12);font-weight:400;line-height:1.3}
.role-assignment-editor input{width:auto;margin:2px 0 0}
.role-scope{display:grid;gap:8px;border:1px solid var(--vb-swatch-e2e2e2);margin:12px 0;padding:10px}
.role-scope label{display:flex!important;align-items:center;gap:7px;color:var(--vb-swatch-111)}
.role-scope input{width:auto!important;margin:0}
.role-editor form{display:block}
.role-editor .field{display:block}
.role-editor .field input,.role-editor .field textarea{box-sizing:border-box;width:100%}
.role-capabilities{margin:12px 0;border:1px solid var(--vb-swatch-e2e2e2);padding:10px}
.role-capabilities>h3{margin:2px 0}
.role-capability{border:1px solid var(--vb-swatch-e2e2e2);margin:9px 0;padding:9px;background:var(--vb-swatch-fafafa)}
.role-capability:has(> .role-capability-toggle input[name=requestMoreTimeEnabled]),.role-capability:has(> .role-capability-toggle input[name=queueFollowupEnabled]),.role-capability:has(> .role-capability-toggle input[name=createAgentBoxEnabled]),.role-capability:has(> .role-capability-toggle input[name=createEmailAddressEnabled]),.role-capability:has(> .role-capability-toggle input[name=sharedChatsEnabled]){display:none}
.role-capability-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin:0!important}.role-capability-toggle>span{display:grid}.role-capability-toggle small{font-size:var(--vb-type-px-12);font-weight:400;color:var(--vb-swatch-6b6864)}
.role-capability input[type=checkbox],.role-inline input[type=checkbox],.role-shared input[type=checkbox]{margin:0}
.role-capability-options{margin:7px 0 0;border-top:1px solid var(--vb-swatch-e2e2e2);padding-top:7px}
.role-capability-options[hidden]{display:none}
.role-capability-options>summary{cursor:pointer;color:var(--vb-swatch-315da8);font-size:var(--vb-type-px-12);font-weight:700}.role-capability-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}.role-capability-options label{margin:0!important}
.role-capability-options input{box-sizing:border-box;width:100%}
.role-inline{grid-column:1/-1;border:0;margin:0;padding:0}.role-inline label,.role-shared label{display:inline-flex!important;align-items:center;gap:5px;margin:4px 12px 4px 0!important}.role-inline legend{font-size:var(--vb-type-px-12);color:var(--vb-swatch-6b6864)}

/* dialogs */
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center}
.modal .backdrop{position:absolute;inset:0;background:rgba(11,20,26,.55)}
.modal .card{position:relative;width:min(46rem,94vw);max-height:88vh;overflow:auto;background:var(--vb-swatch-fff);border:1px solid var(--vb-swatch-0b0b0b);box-shadow:0 .6rem 2rem rgba(11,20,26,.5);padding:12px 14px}
.modal .card header{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.modal .card header strong{flex:1}
.modal .card label{display:block;margin:8px 0}
.modal .card select,.modal .card textarea,.modal .card input[type=text]{width:100%;font:inherit;padding:3px 5px;border:1px solid var(--vb-swatch-e2e2e2)}
.modal .card textarea{min-height:9rem}

/* markdown previews */
.md-preview{margin:8px 0;padding:6px 10px;border:1px solid var(--vb-swatch-e2e2e2);background:var(--vb-swatch-fafafa);max-height:20rem;overflow:auto}
.md-preview .md-h1,.md-preview .md-h2,.md-preview .md-h3{margin:4px 0 3px}
.md-preview .md-pre{background:var(--vb-swatch-f2f4f5);padding:6px 8px;overflow:auto;font-size:var(--vb-type-px-12)}
.md-preview .md-quote{border-left:3px solid var(--vb-swatch-d5d9dc);margin:4px 0;padding:1px 10px;color:var(--vb-swatch-52514e)}
.md-preview .md-hr{border:0;border-top:1px solid var(--vb-swatch-e2e2e2)}
.md-preview .md-empty{color:var(--vb-swatch-6b6864);font-style:italic}

@media(max-width:600px){
 label{display:block}input,textarea{width:100%}
 table.markets{font-size:var(--vb-type-rem-0-85)}
 .group{padding:4px 8px 10px}
 .role-catalog{align-items:flex-start;flex-direction:column}.role-catalog-items{justify-content:flex-start}
 .role-assignment-heading{display:grid;gap:2px}.role-assignment-summary{grid-template-columns:auto minmax(0,1fr) auto;align-items:start}.role-assignment-current{grid-column:1/-1}.role-assignment-toggle{align-self:center}
 .role-capability-fields{grid-template-columns:1fr}
}
.instruction-effective{white-space:pre-wrap;overflow-wrap:anywhere;max-height:22rem;overflow:auto;padding:.75rem;background:var(--vb-swatch-f7f7f7);border:1px solid var(--vb-swatch-ddd);border-radius:var(--r-control);font-size:var(--vb-type-rem-0-78);text-transform:none}
#agent-cli-versions select{width:14rem}
#agent-cli-versions-status{margin:0;align-self:center}