/* ============================================================================
   vbox · Variant C "Studio"
   Light, airy, minimal SaaS. White and soft-grey surfaces, almost no borders,
   hierarchy from space and type. Solid near-black user bubbles, soft grey
   agent bubbles, colourful blob mascots, floating pill composer, and a
   three-pane chat (list | chat | details). Coral is the restrained accent.
   Matching dark theme via prefers-color-scheme. Restyle only.
   ========================================================================== */

/* ── base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--vb-bg);color:var(--vb-ink);
  font-family:var(--vb-font);font-size:var(--vb-type-px-14-5);line-height:1.55;
  color-scheme:light dark;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{color:var(--vb-ink);letter-spacing:-.025em;text-transform:none}
nav,th,button,legend,summary,label{text-transform:none}
summary{list-style:none}
summary::marker,summary::-webkit-details-marker{content:'';display:none}
a{color:var(--vb-accent-text);text-decoration:none;text-underline-offset:2px}
a:hover{color:var(--vb-accent-hover)}
code{background:var(--vb-surface-2);border-radius:var(--r-control);padding:.05em .38em;font-family:var(--vb-mono)}
pre{color:var(--vb-ink-soft)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--vb-ink) 55%,transparent);outline-offset:2px;border-radius:var(--r-control)}

/* brand lockup */
.brand{display:inline-flex;align-items:center;gap:.5rem;text-transform:none;font-weight:700;color:var(--vb-ink)}
.brand .brand-logo{display:block;height:1.45rem;width:auto}
.brand .brand-suffix{color:var(--vb-ink-faint);font-weight:500;font-size:.84em;letter-spacing:0}
.brand span{color:var(--vb-ink-faint);font-weight:500}
.brand .brand-logo.brand-logo-on-dark{display:none}
form#login .login-logo.brand-logo-on-dark{display:none}
@media (prefers-color-scheme: dark){
  .brand .brand-logo.brand-logo-on-light{display:none}
  form#login .login-logo.brand-logo-on-light{display:none}
  .brand .brand-logo.brand-logo-on-dark{display:block}
  form#login .login-logo.brand-logo-on-dark{display:block}
}

/* ── shared controls ────────────────────────────────────────────────────── */
input,select,textarea,button{
  font:inherit;color:var(--vb-ink);background:var(--vb-surface);
  border:1px solid var(--vb-line-strong);border-radius:var(--r-control);
  padding:.5rem .7rem;
}
input::placeholder,textarea::placeholder{color:var(--vb-ink-faint)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--vb-ink) 55%,transparent);outline-offset:1px;border-color:color-mix(in srgb,var(--vb-ink) 55%,transparent)
}
button{cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
button.primary{
  background:var(--vb-ink);border-color:var(--vb-ink);color:var(--vb-bg);
  font-weight:600;padding:.6rem 1.05rem;border-radius:var(--r-control)
}
button.primary:hover{background:var(--vb-swatch-000);border-color:var(--vb-swatch-000)}
.linkbtn{
  display:inline-flex;align-items:center;margin:0 .25rem .25rem 0;padding:.36rem .7rem;
  border:1px solid var(--vb-line-strong);border-radius:var(--r-control);
  background:var(--vb-surface);color:var(--vb-ink);font-weight:600;text-decoration:none
}
.linkbtn:hover{background:var(--vb-surface-2);border-color:var(--vb-ink-faint);color:var(--vb-ink)}
.linkbtn.danger{color:var(--vb-danger-text)}
label{color:var(--vb-ink-soft)}
#error{color:var(--vb-danger-text)}
.flash{background:var(--vb-ok-soft);border-left:3px solid var(--vb-ok);color:var(--vb-ink);border-radius:var(--r-control)}
.flash.error{background:var(--vb-danger-soft);border-color:var(--vb-danger);color:var(--vb-danger-text)}

/* ── top bar / workspace nav ────────────────────────────────────────────── */
.topbar.manage-top,.topbar.grid-top,.topbar.workspace-top,
#chat-top.workspace-top,.topbar.grid-top.workspace-top,.topbar.manage-top.workspace-top{
  background:color-mix(in srgb,var(--vb-bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--vb-line);color:var(--vb-ink);
}
.manage-top .brand span,.grid-top .brand span,.workspace-top .brand span{color:var(--vb-ink-faint)}
.workspace-top .brand,#chat-top.workspace-top .brand{width:auto;min-width:0;font-weight:700;letter-spacing:-.02em}
.manage-top .workspace-links a,.grid-top .workspace-links a,.workspace-top .workspace-links a,
#chat-top.workspace-top .workspace-links a,.topbar.manage-top.workspace-top .workspace-links a{
  color:var(--vb-ink-soft);font-weight:560;border-radius:var(--r-control)
}
.manage-top .workspace-links a:hover,.grid-top .workspace-links a:hover,.workspace-top .workspace-links a:hover,
.manage-top .workspace-links a[aria-current="page"],.grid-top .workspace-links a[aria-current="page"],
.workspace-top .workspace-links a[aria-current="page"],#chat-top.workspace-top .workspace-links a:hover,
#chat-top.workspace-top .workspace-links a[aria-current="page"]{
  background:var(--vb-surface-2);color:var(--vb-ink)
}
.manage-top .linkbtn,.grid-top #logout,.workspace-top #logout,.topbar.workspace-top #logout,
.workspace-top button.workspace-nav-menu,.workspace-top button.workspace-nav-usage,.workspace-top button.workspace-nav-providers,.workspace-top button.workspace-nav-refresh,
#chat-top.workspace-top button.workspace-nav-menu,#chat-top.workspace-top button.workspace-nav-usage,#chat-top.workspace-top button.workspace-nav-providers,#chat-top.workspace-top button.workspace-nav-refresh{
  border:1px solid var(--vb-line-strong);background:var(--vb-surface);
  color:var(--vb-ink);border-radius:var(--r-control)
}
.workspace-top button.workspace-nav-menu:hover,.workspace-top button.workspace-nav-usage:hover,.workspace-top button.workspace-nav-providers:hover,.workspace-top button.workspace-nav-refresh:hover,
#chat-top.workspace-top button:hover{background:var(--vb-surface-2);border-color:var(--vb-ink-faint);color:var(--vb-ink)}
.workspace-nav-panel{border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-elevated);box-shadow:var(--vb-shadow-lg)}
.workspace-nav-panel a,.workspace-nav-panel button{color:var(--vb-ink);border-radius:var(--r-control)}
.workspace-nav-panel a:hover,.workspace-nav-panel button:hover{background:var(--vb-surface-2)}
.manage-subnav a{border:0;background:var(--vb-bg-soft);color:var(--vb-ink-soft);border-radius:var(--r-control);font-weight:560;padding:.4rem .8rem}
.manage-subnav a:hover,.manage-subnav a[aria-current="page"]{background:var(--vb-ink);color:var(--vb-bg)}

/* ── manage page: cards + clean list rows ───────────────────────────────── */
body{max-width:none;min-height:100vh}
.manage-heading h1{font-size:var(--vb-type-rem-1-7);font-weight:760;letter-spacing:-.035em}
.manage-heading .sub{color:var(--vb-ink-soft)}
#app>section,.manage-content>section{
  border:0;border-radius:var(--r-surface);background:var(--vb-surface);
  box-shadow:var(--vb-shadow);padding:1.6rem;margin:0 0 1.1rem
}
.manage-content>section>h2,.section-heading h2{font-weight:700}
.sub,.hint,.hint.tiny,.table-text.muted,.state-note{color:var(--vb-ink-soft)}
label,.field>label,.row-fields label,.tools legend,.group>legend{color:var(--vb-ink-soft)}
.field>label,.row-fields label,.tools legend{font-weight:600;color:var(--vb-ink)}
input,select,textarea,.model-picker-open{border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-bg-soft);color:var(--vb-ink)}
.group,.role-capabilities,.role-capability,.role-scope{border:0;background:var(--vb-bg-soft);border-radius:var(--r-surface)}
.group>legend{background:var(--vb-surface);border:1px solid var(--vb-line);border-radius:var(--r-control);padding:.15rem .7rem;font-weight:600;color:var(--vb-ink)}
.kpi{border:0;border-radius:var(--r-surface);background:var(--vb-bg-soft)}
.kpi span{color:var(--vb-ink-soft)}.kpi b{color:var(--vb-ink)}

/* list rows replace the dense bordered table */
.table-wrap{border:0;border-radius:0;background:transparent;overflow-x:auto}
table.markets{border-collapse:collapse;width:100%}
table.markets th,table.markets td{border:0;border-bottom:1px solid var(--vb-line);padding:.85rem 1rem}
table.markets th+th,table.markets td+td{border-left:0}
table.markets th{background:transparent;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-68);letter-spacing:.07em;text-transform:uppercase;font-weight:600;padding-top:0}
table.markets tbody tr.row,table.markets tr.row{transition:background .12s}
table.markets tr.row:hover{background:var(--vb-bg-soft)}
table.markets tr.row:last-child td{border-bottom:0}
#box-list .box-details-action{background:var(--vb-ink);border-color:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-control)}
.model-picker-dialog,.modal .card{background:var(--vb-elevated);border:1px solid var(--vb-line);color:var(--vb-ink);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg)}
.modal .backdrop,#box-detail-backdrop:not([hidden]){background:rgba(17,17,20,.4)}
.model-picker-option{background:var(--vb-surface);border-color:var(--vb-line);color:var(--vb-ink)}
.model-picker-option:hover,.model-picker-option[aria-selected=true]{background:var(--vb-bg-soft);color:var(--vb-ink)}
.model-picker-option-id,.model-picker-source,.model-picker-effort-note{color:var(--vb-ink-soft)}
.provider-card,.profile-app{border:0;background:var(--vb-bg-soft);border-radius:var(--r-surface)}
.provider-card-heading small{color:var(--vb-ink-faint)}
.provider-capacity{background:var(--vb-surface);border-color:var(--vb-line)}
.profile-app-head{border-color:var(--vb-line)}
.profile-app-mark,.role-box-mark{background:var(--vb-accent-soft);border-color:transparent;color:var(--vb-accent-text)}
.profile-row{border-color:var(--vb-line)}
#box-detail{background:var(--vb-elevated);border-left:1px solid var(--vb-line)}
#box-detail>header{background:var(--vb-elevated);border-color:var(--vb-line)}
.box-detail-facts{border:0;border-radius:var(--r-surface);overflow:hidden;background:var(--vb-bg-soft)}
.box-detail-facts,.box-detail-facts>div{border-color:var(--vb-line)}
.box-detail-facts dt{color:var(--vb-ink-soft)}
.box-detail-actions a,.box-detail-actions button{border-color:var(--vb-line-strong);background:var(--vb-surface);color:var(--vb-ink);border-radius:var(--r-control)}
.box-detail-actions a:hover,.box-detail-actions button:hover{background:var(--vb-surface-2);border-color:var(--vb-ink-faint)}
.box-detail-state{background:var(--vb-ok-soft);color:var(--vb-ok-text)}
.box-detail-state[data-state="failed"]{background:var(--vb-danger-soft);color:var(--vb-danger-text)}
.provider-default-badge{border-color:transparent;color:var(--vb-ok-text);background:var(--vb-ok-soft)}
.md-preview,.instruction-effective{background:var(--vb-bg-soft);border:1px solid var(--vb-line);border-radius:var(--r-control)}
.md-preview .md-pre{background:var(--vb-surface-2);border-radius:var(--r-control)}
#profiles code,.instruction-effective code{background:var(--vb-surface-2);color:var(--vb-accent-text)}
.role-heading,.role-pill,.role-assignment-toggle{background:var(--vb-bg-soft);border-color:transparent;color:var(--vb-ink)}
.role-assignment-card,.role-assignment-editor label{background:var(--vb-surface);border-color:var(--vb-line)}
.role-assignment-editor{background:var(--vb-bg-soft);border-color:var(--vb-line)}
.ai-settings-card{border:0;background:var(--vb-bg-soft);border-radius:var(--r-surface)}
.ai-settings-mark{background:var(--vb-accent-soft);color:var(--vb-accent-text)}

/* ── grid page: clean cards ─────────────────────────────────────────────── */
.grid-heading h1{font-weight:760;letter-spacing:-.035em}
.grid-heading p{color:var(--vb-ink-soft)}
#grid-count{padding:.3rem .7rem;border:0;border-radius:var(--r-pill);color:var(--vb-ok-text);background:var(--vb-ok-soft);font-weight:600}
#layout select,.tile select,#layout button,.tile button{border:1px solid var(--vb-line-strong);background:var(--vb-surface);color:var(--vb-ink);border-radius:var(--r-control)}
#layout button:hover,.tile button:hover{background:var(--vb-surface-2);border-color:var(--vb-ink-faint)}
#layout{border:0;border-radius:var(--r-surface);background:var(--vb-bg-soft);box-shadow:none;padding:.75rem .9rem}
#layout label{color:var(--vb-ink-soft)}
#tiles{border-top:1px solid var(--vb-line)}
#grid-app{padding:0 1.25rem 2rem}
.grid-heading{padding-left:1.25rem;padding-right:1.25rem}
#layout{margin-left:1.25rem;margin-right:1.25rem}
.tile{border:0;border-right:1px solid var(--vb-line);border-bottom:1px solid var(--vb-line);background:var(--vb-surface)}
.tile:focus-within{box-shadow:inset 0 0 0 2px var(--vb-accent)}
.tile-controls{border-bottom:1px solid var(--vb-line-faint);background:var(--vb-bg-soft)}
.tile-controls details{border:1px solid var(--vb-line);background:var(--vb-surface);color:var(--vb-ink-soft);border-radius:var(--r-control)}
.tile label{color:var(--vb-ink-soft)}
.tile p{color:var(--vb-ink-soft)}
.viewer-panel{border-top:1px solid var(--vb-line)}
.tile .screen{background:var(--vb-swatch-0b0b0d)}
.tile .desktop-controls textarea{border:1px solid var(--vb-line-strong);background:var(--vb-surface);color:var(--vb-ink)}
.connection-badge{border:1px solid var(--vb-line);background:color-mix(in srgb,var(--vb-surface) 90%,transparent);color:var(--vb-ink);box-shadow:var(--vb-shadow-md)}
.viewer-overlay{background:color-mix(in srgb,var(--vb-bg) 84%,transparent);color:var(--vb-ink-soft)}

/* ── login: airy card with floating blob mascots ────────────────────────── */
form#login{
  background:
    radial-gradient(640px 420px at 12% 8%,var(--vb-swatch-7c5cff22),transparent 60%),
    radial-gradient(560px 420px at 88% 18%,var(--vb-swatch-ff6f5922),transparent 60%),
    radial-gradient(620px 460px at 78% 92%,var(--vb-swatch-22c55e1f),transparent 60%),
    radial-gradient(520px 420px at 18% 88%,var(--vb-swatch-f59e0b1f),transparent 60%),
    var(--vb-bg);
  color:var(--vb-ink);font-family:var(--vb-font);color-scheme:light dark
}
form#login .login-card{
  position:relative;z-index:1;
  width:min(100%,26rem);gap:1rem;padding:clamp(1.9rem,5vw,2.7rem);
  border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-surface);
  box-shadow:var(--vb-shadow-lg);text-align:center;align-items:center
}
form#login .login-brand{display:flex;align-items:center;justify-content:center;margin-bottom:.1rem;color:var(--vb-ink);font-weight:750}
form#login .login-logo{display:block;height:2.2rem;width:auto}
form#login .login-mark{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--r-control);background:var(--vb-accent-soft);color:var(--vb-accent-text);font-weight:850}
form#login .login-title{margin:.2rem 0 0;color:var(--vb-ink);font-size:var(--vb-type-rem-1-9);font-weight:760;line-height:1.1;letter-spacing:-.04em;text-transform:none}
form#login .login-copy{color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-95);max-width:22rem}
form#login label{display:block;width:100%;margin:.2rem 0 0;color:var(--vb-ink);font-size:var(--vb-type-rem-0-8);font-weight:600;text-align:left}
form#login input{display:block;width:100%;min-height:3rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-bg-soft);color:var(--vb-ink);text-align:left}
form#login input:focus-visible{outline:none;border-color:var(--vb-focus-border);box-shadow:var(--vb-ring)}
form#login .login-error{color:var(--vb-danger-text);width:100%;text-align:left}
form#login button{width:100%;min-height:3rem;margin:.35rem 0 0;border:1px solid var(--vb-ink);border-radius:var(--r-control);background:var(--vb-ink);color:var(--vb-bg);font-weight:650}
form#login button:hover{background:var(--vb-swatch-000);border-color:var(--vb-swatch-000)}

/* ── chat: three panes ──────────────────────────────────────────────────── */

#chat-app{background:var(--vb-bg)}
#chat-top{background:color-mix(in srgb,var(--vb-bg) 88%,transparent);border-bottom:1px solid var(--vb-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
#chat-top .brand{color:var(--vb-ink)}#chat-top .brand span{color:var(--vb-ink-faint)}
#chat-list{background:var(--vb-bg-soft);border-right:1px solid var(--vb-line)}
#chat-list-head h1{color:var(--vb-ink);font-weight:760;letter-spacing:-.035em}
#chat-list-head p{color:var(--vb-ink-soft)}
#new-box{background:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-pill)}
#chat-filter{background:var(--vb-surface);border:1px solid var(--vb-line);border-radius:var(--r-control);color:var(--vb-ink)}
#chat-entries li{border:0;border-radius:var(--r-surface);margin-bottom:.14rem;padding:.62rem .6rem}
#chat-entries li:hover{background:color-mix(in srgb,var(--vb-ink) 5%,transparent)}
#chat-entries li.active{background:var(--vb-surface-2);box-shadow:none}
.chat-meta .name{font-weight:650}
.chat-meta time{color:var(--vb-ink-faint);font-weight:500}
.chat-meta .preview{color:var(--vb-ink-soft)}
/* avatars: the blob mascot, not a framed screenshot */
.avatar{border-radius:0;overflow:visible;background:transparent}
.avatar .avatar-mascot{position:absolute;inset:0}
.avatar .dot{right:.05rem;bottom:.05rem;width:.8rem;height:.8rem;border:2px solid var(--vb-bg);border-radius:var(--r-pill)}
#chat-entries .avatar{width:2.7rem;height:2.7rem}
.avatar .initials{color:var(--vb-ink)}
#chat-header-avatar .avatar{border-radius:0}

#chat-main{background:var(--vb-bg)}
#chat-header{background:transparent;border-bottom:0;box-shadow:none}
#chat-header-text strong{font-weight:700}
#chat-header-state{color:var(--vb-ink-soft)}
#chat-header button{background:var(--vb-surface);border-color:var(--vb-line);border-radius:var(--r-control)}
#chat-header button:hover{background:var(--vb-surface-2);border-color:var(--vb-ink-faint)}
#chat-header #chat-info[aria-expanded="true"]{background:var(--vb-ink);border-color:var(--vb-ink);color:var(--vb-bg)}

/* transcript */
#chat-messages{padding:1.4rem clamp(.8rem,2vw,1.8rem) 1rem;gap:.7rem}
.day-sep{background:none;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-66);letter-spacing:.09em}
.msg{
  max-width:min(78%,36rem);padding:.72rem 1.05rem .55rem;
  border:0;box-shadow:none;border-radius:var(--r-bubble);
  font-size:var(--vb-type-rem-0-9);line-height:1.55
}
.msg.agent{background:var(--vb-bubble-in);color:var(--vb-ink);border-bottom-left-radius:var(--r-control)}
.msg.user{background:var(--vb-bubble-out);color:var(--vb-bubble-out-ink);border-bottom-right-radius:var(--r-control)}
.msg.note{background:var(--vb-accent-soft);color:var(--vb-ink);border:0}
.msg.system{background:var(--vb-surface-2);color:var(--vb-ink-soft);border:0;border-radius:var(--r-pill)}
.msg .meta{color:currentColor;opacity:.5;font-size:var(--vb-type-rem-0-62)}
.msg .meta .ticks{color:currentColor}
.msg .fwd{background:var(--vb-surface);border-radius:var(--r-control)}
.msg .fwd:hover{background:var(--vb-surface-2)}
.msg .choice{background:var(--vb-surface);border:1px solid var(--vb-line);border-radius:var(--r-control)}
.msg .choice:hover{background:var(--vb-surface-2)}
.msg .choice.on{background:var(--vb-bg);border-color:var(--vb-ink)}
.msg .question{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.msg .question .send{background:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-control)}

/* floating pill composer */
#chat-composer{
  align-items:center;gap:.45rem;
  margin:.3rem auto 1.1rem;width:min(52rem,calc(100% - 2rem));
  padding:.42rem .5rem .42rem .5rem;
  background:var(--vb-surface);border:1px solid var(--vb-line);
  border-radius:var(--r-composer);box-shadow:var(--vb-shadow-md)
}
#chat-composer button{background:transparent;border:0;width:2.5rem;height:2.5rem;border-radius:var(--r-pill);color:var(--vb-ink-soft)}
#chat-composer button:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
#attach{font-size:1.5rem;font-weight:400}
#chat-input{background:transparent;border:0;border-radius:0;font-size:var(--vb-type-rem-0-92);min-height:2.5rem;padding:.5rem .3rem;box-shadow:none}
#chat-input:focus{box-shadow:none}
#chat-composer button#send{background:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-pill)}
#chat-composer button#send:disabled{background:var(--vb-surface-2);color:var(--vb-ink-faint)}
#chat-composer button#chat-interrupt{color:var(--vb-danger-text);border:1px solid var(--vb-line)}
#chat-status{padding:0 .8rem .5rem;background:transparent}
#chat-image-drafts,#reply-preview{background:var(--vb-surface-2);border-color:var(--vb-line)}
#composer-picker{background:var(--vb-elevated);border:1px solid var(--vb-line);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg)}
#composer-picker button{border-radius:var(--r-control)}
#composer-picker button:hover,#composer-picker button[aria-selected="true"]{background:var(--vb-surface-2)}

/* details rail */
#inspect{background:var(--vb-bg-soft);border-left:1px solid var(--vb-line);box-shadow:none}
#inspect-header{background:transparent;border-bottom:1px solid var(--vb-line)}
#inspect-header-text strong{font-weight:700}
#inspect-close{border:1px solid var(--vb-line);background:var(--vb-surface);color:var(--vb-ink);border-radius:var(--r-control)}
.inspect-block h3{color:var(--vb-ink-faint);letter-spacing:.08em}
.inspect-rows>div{border-bottom:1px solid var(--vb-line)}
.inspect-rows dt{color:var(--vb-ink-soft)}
.inspect-actions button{border:1px solid var(--vb-line);background:var(--vb-surface);color:var(--vb-ink);border-radius:var(--r-control)}
.inspect-actions button:hover{background:var(--vb-surface-2);border-color:var(--vb-ink-faint)}

/* desktop preview / empty state at the top of the rail */
.inspect-screen{padding:.9rem 1rem 0}
.inspect-screen-frame{
  position:relative;aspect-ratio:16/10;width:100%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid var(--vb-line);border-radius:var(--r-surface);
  background:
    linear-gradient(0deg,color-mix(in srgb,var(--vb-ink) 3%,transparent),color-mix(in srgb,var(--vb-ink) 3%,transparent)),
    var(--vb-surface-2);
  color:var(--vb-ink-faint);text-align:center
}
.inspect-screen-frame svg{width:2rem;height:2rem;opacity:.7}
.inspect-screen-frame span{font-size:var(--vb-type-rem-0-74);font-weight:600;letter-spacing:.02em}
.inspect-screen-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inspect-screen-frame.has-shot{background:var(--vb-swatch-0b0b0d);color:var(--vb-swatch-fff);border-color:transparent}
@media (min-width:1100px){.inspect-screen{padding:1rem 1rem 0}}

/* ── workspace / terminal ───────────────────────────────────────────────── */
.workspace-body{color:var(--vb-ink)}
.workspace-tabs{border-bottom:1px solid var(--vb-line)}
.workspace-tabs button{border:1px solid var(--vb-line);border-bottom:0;background:var(--vb-bg-soft);color:var(--vb-ink-soft);border-radius:var(--r-control) var(--r-control) 0 0}
.workspace-tabs button[aria-selected="true"]{background:var(--vb-surface);color:var(--vb-ink);border-bottom-color:var(--vb-surface)}
.connection-stats{color:var(--vb-ink-soft)}

/* usage dialog */
.workspace-usage-dialog{border:1px solid var(--vb-line);background:var(--vb-elevated);color:var(--vb-ink);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg)}
.workspace-usage-dialog::backdrop{background:var(--vb-modal-backdrop)}
.workspace-usage-dialog h2{color:var(--vb-ink)}
.workspace-usage-dialog p{color:var(--vb-ink-soft)}
.workspace-usage-profile{background:var(--vb-bg-soft);border-color:var(--vb-line)}
.workspace-usage-window{border-color:var(--vb-line)}
.workspace-usage-window strong{color:var(--vb-ok-text)}
.sheet-card,#new-box-card,#delete-box-card{border:1px solid var(--vb-line);background:var(--vb-surface);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg)}

/* ── mobile: floating name pill + pill composer ─────────────────────────── */
.mobile-tabs{display:none}
.chat-pins{display:none}
@media (max-width:899px){
  #chat-header{position:relative;padding-top:.2rem}
  #chat-header-text{flex:1;background:var(--vb-surface);border:1px solid var(--vb-line);border-radius:var(--r-pill);padding:.3rem .85rem;box-shadow:var(--vb-shadow-md);align-items:flex-start}
  #chat-header-text strong{font-size:var(--vb-type-rem-0-9)}
  #chat-list{background:var(--vb-bg)}
  #chat-entries .avatar{width:3rem;height:3rem}
  #chat-top.workspace-top .workspace-links{display:none}
  #chat-app{padding-bottom:3.7rem}
  #chat-composer{margin-bottom:3.5rem}
  #chat-pins{
    display:flex;gap:.85rem;align-items:flex-start;overflow-x:auto;
    padding:.2rem .85rem .55rem;scrollbar-width:none
  }
  #chat-pins[hidden]{display:none}
  #chat-pins::-webkit-scrollbar{display:none}
  .chat-pin{
    flex:none;display:flex;flex-direction:column;align-items:center;gap:.3rem;
    width:4.4rem;border:0;background:none;color:var(--vb-ink-soft);padding:0;font:600 var(--vb-type-rem-0-68) var(--vb-font)
  }
  .chat-pin .avatar{width:3.6rem;height:3.6rem;position:relative}
  .chat-pin-name{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
  .mobile-tabs{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:color-mix(in srgb,var(--vb-bg) 92%,transparent);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-top:1px solid var(--vb-line);
    padding:.25rem .4rem calc(env(safe-area-inset-bottom) + .25rem)
  }
  .mobile-tabs a,.mobile-tabs button{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:.16rem;
    border:0;background:none;color:var(--vb-ink-faint);
    font:600 var(--vb-type-rem-0-62)/1 var(--vb-font);text-decoration:none;padding:.4rem .2rem;border-radius:var(--r-control)
  }
  .mobile-tabs a[aria-current="page"]{color:var(--vb-ink)}
  .mobile-tabs svg{width:1.35rem;height:1.35rem}
}
@media (max-width:640px){
  #chat-messages{padding:.8rem .6rem 1rem}
  .msg{max-width:88%}
  #chat-composer{width:calc(100% - 1.2rem);margin-bottom:3.5rem}
  #chat-top{background:var(--vb-bg)}
}

/* ============================================================================
   Studio review pass: reference-alignment fixes
   ========================================================================== */

/* 1 · type: the chat shell sets its own system stack; point it at Inter */
#chat-shell{font-family:var(--vb-font)}

/* 3/4 · composer ends at the chat column and has a single black action */
#chat-composer{
  align-items:center;gap:.3rem;
  margin:.3rem .9rem 1.1rem;width:auto;max-width:none;
  padding:.4rem .5rem
}
#chat-composer button{background:transparent;border:0;color:var(--vb-ink-soft)}
#chat-composer button:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
#chat-composer button#send{background:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-pill)}
#chat-composer button#send:hover{background:var(--vb-ink)}
#chat-composer button#send:disabled{background:var(--vb-surface-2);color:var(--vb-ink-faint)}
#chat-composer button#chat-interrupt{
  background:transparent;border:0;color:var(--vb-danger-text);border-radius:var(--r-pill)
}
#chat-composer .ai-wand{background:transparent;border:1px solid transparent;color:var(--vb-ink-soft);border-radius:var(--r-pill)}
#chat-composer .ai-wand:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
#chat-composer{position:relative}

/* 5 · quieter sidebar rows */
.row-state{display:none}
.agent-badge{background:none;border:0;padding:0;color:var(--vb-ink-faint);font-weight:500;font-size:var(--vb-type-rem-0-72)}
#chat-entries .unread{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--vb-ink);color:var(--vb-bg);font-size:var(--vb-type-px-12);line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
#chat-entries li[data-pair-key] .unread{background:var(--vb-surface-2);color:var(--vb-ink-soft)}
#chat-entries .unread[hidden]{display:none}
.chat-meta time{color:var(--vb-ink-faint);font-weight:500}
.chat-meta time.recent{color:var(--vb-ink);font-weight:650}

/* 6 · user row at the foot of the sidebar */
.chat-user{display:flex;align-items:center;gap:.6rem;flex:none;margin-top:auto;padding:.65rem .7rem;border-top:1px solid var(--vb-line);background:var(--vb-bg-soft)}
.chat-user[hidden]{display:none}
.chat-user-avatar{display:grid;place-items:center;width:2rem;height:2rem;flex:none;border-radius:var(--r-pill);background:var(--vb-surface-2);color:var(--vb-ink);font-weight:650;font-size:var(--vb-type-rem-0-78)}
.chat-user-name{flex:1;min-width:0;font-weight:600;font-size:var(--vb-type-rem-0-85);color:var(--vb-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-user-menu{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-1)}

/* 7 · one quiet header action style */
#chat-header button,#chat-header #chat-workspace{
  border:1px solid var(--vb-line);background:transparent;color:var(--vb-ink-soft);
  border-radius:var(--r-control);font-weight:560;font-size:var(--vb-type-rem-0-74);padding:.42rem .8rem;text-decoration:none
}
#chat-header button:hover,#chat-header #chat-workspace:hover{background:var(--vb-surface-2);color:var(--vb-ink);border-color:var(--vb-ink-faint)}
#chat-header #chat-info[aria-expanded="true"]{background:var(--vb-surface-2);border-color:var(--vb-line-strong);color:var(--vb-ink)}
#chat-header #chat-control{min-width:2.35rem;padding:0;display:inline-flex;align-items:center;justify-content:center}

/* 8 · persistent rail: no duplicated header */
@media (min-width:1100px){#inspect-header{display:none}}

/* 9 · manage: list rows instead of a bordered table */
#box-list{border:0}
#box-list .table-wrap{border:0;border-radius:0;background:transparent;overflow:visible}
#box-list table.markets{border-collapse:separate;border-spacing:0;width:100%;min-width:0;table-layout:auto}
#box-list thead{display:none}
#box-list tbody{display:flex;flex-direction:column}
#box-list tr.row{display:flex;align-items:center;gap:1rem;padding:.9rem .2rem;border-bottom:1px solid var(--vb-line);background:none}
#box-list tr.row:last-child{border-bottom:0}
#box-list tr.row:hover{background:var(--vb-bg-soft)}
#box-list td{display:block;border:0;padding:0;min-width:0;overflow-wrap:anywhere}
#box-list td:nth-child(1){flex:0 0 10rem;font-weight:650;color:var(--vb-ink)}
#box-list td:nth-child(2){flex:0 0 5rem;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-8)}
#box-list td:nth-child(2)::before{content:'';display:inline-block;width:.5rem;height:.5rem;margin-right:.4rem;border-radius:var(--r-pill);background:var(--vb-ok);vertical-align:middle}
#box-list td:nth-child(3){flex:1 1 8rem;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-8)}
#box-list td:nth-child(4){flex:0 0 7rem}
#box-list td:nth-child(5){flex:0 0 6rem}
#box-list td:nth-child(6){display:none}
#box-list td:nth-child(7){flex:0 0 auto;margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem}
#box-list td:nth-child(1) .table-text,#box-list a{color:var(--vb-ink)}
#box-list td select{width:auto;min-width:6.5rem;background:transparent;border-color:transparent;padding:.25rem .15rem;color:var(--vb-ink)}
#box-list td select:hover{border-color:var(--vb-line-strong)}
#box-list .linkbtn{margin:0;padding:.3rem .62rem;background:transparent;border:1px solid var(--vb-line);border-radius:var(--r-control);font-weight:560;font-size:var(--vb-type-rem-0-72);color:var(--vb-ink-soft)}
#box-list .linkbtn:hover{background:var(--vb-surface-2);color:var(--vb-ink);border-color:var(--vb-ink-faint)}
#box-list .box-details-action{background:transparent;border:1px solid var(--vb-ink);color:var(--vb-ink);border-radius:var(--r-control)}
#box-list .box-details-action:hover{background:var(--vb-ink);color:var(--vb-bg)}
#box-list .restart-action{border:1px solid var(--vb-line);border-radius:var(--r-pill);width:1.7rem;height:1.7rem;display:inline-grid;place-items:center;color:var(--vb-ink-soft)}

/* 11 · grid: rounded cards */
#grid-app{display:block;padding:0}
.grid-heading{padding:1.1rem 1.25rem .35rem}
#layout{display:inline-flex;align-self:flex-start;align-items:center;gap:.5rem;flex-wrap:wrap;width:auto;margin:0 1.25rem .9rem;padding:.35rem .55rem;border:1px solid var(--vb-line);border-radius:var(--r-control);background:var(--vb-surface);box-shadow:none}
#layout label{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--vb-type-rem-0-72)}
#layout select{border-color:transparent;background:var(--vb-surface-2)}
#tiles{display:grid;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));gap:1rem;padding:0 1.25rem 1.5rem;border-top:0;background:transparent;align-content:start}
.tile{border:1px solid var(--vb-line);border-radius:var(--r-surface);overflow:hidden;background:var(--vb-surface);box-shadow:var(--vb-shadow)}
.tile-controls{border-bottom:1px solid var(--vb-line-faint);background:var(--vb-surface);padding:.3rem .6rem}
.tile-controls details{border:0;background:none;box-shadow:none;padding:.1rem .3rem;color:var(--vb-ink-soft)}
.tile-controls details summary{font-size:0;display:grid;place-items:center;width:1.8rem;height:1.8rem;border:1px solid var(--vb-line);border-radius:var(--r-pill)}
.tile-controls details summary::before{content:'⌨';font-size:.9rem;line-height:1}
.tile-controls details[open]{flex:1 1 100%;padding:.35rem .5rem}
.tile-controls details[open] summary{width:auto;height:auto;grid-auto-flow:column;gap:.4rem;padding:0 .6rem;font-size:var(--vb-type-rem-0-72)}
.tile-controls details[open] summary::before{content:'⌨'}
.tile header{padding:.6rem .75rem .2rem}
.tile .screen,.tile .desktop-screen{background:var(--vb-swatch-0b0b0d)}
.viewer-overlay{background:var(--vb-swatch-0b0b0d);color:var(--vb-swatch-8a8a92)}
.viewer-panel{border-top:1px solid var(--vb-line)}

/* 12 · mobile header: logo only, centred blurred pill */
@media (max-width:899px){
  #chat-top .brand .brand-suffix{display:none}
  #chat-header{justify-content:flex-start;min-height:3.5rem;padding:.35rem .5rem}
  #chat-header-text{flex:0 1 auto;max-width:100%;min-width:0;background:none;border:0;box-shadow:none;padding:0}
  #chat-header-text strong{font-size:var(--vb-type-rem-0-95)}
  #chat-composer{width:auto}
}

/* dark-theme affordances surfaced in review */
.msg.user .meta{color:var(--vb-bubble-out-ink);opacity:.5}
.msg.agent .meta{color:var(--vb-ink-soft);opacity:.7}
.msg .text pre{background:var(--vb-code-surface);color:var(--vb-code-ink);border-radius:var(--r-control)}
.msg .text pre code{color:inherit}

/* 9b · list-row mascot dot (no data on this page; deterministic palette) */
#box-list tr.row td:nth-child(1){display:flex;align-items:center;gap:.6rem}
#box-list tr.row td:nth-child(1)::before{content:'';flex:none;width:1.9rem;height:1.9rem;border-radius:var(--r-pill);background:var(--vb-swatch-7c5cff)}
#box-list tr.row:nth-child(4n+2) td:nth-child(1)::before{background:var(--vb-swatch-3b82f6)}
#box-list tr.row:nth-child(4n+3) td:nth-child(1)::before{background:var(--vb-swatch-22c55e)}
#box-list tr.row:nth-child(4n) td:nth-child(1)::before{background:var(--vb-swatch-f59e0b)}

/* 9c · the header row is a bare table tr, not a thead */
#box-list tr:not(.row){display:none}
/* 4b · stop is a thin red outline icon, not a filled square */
#chat-composer button#chat-interrupt{font-size:0}
#chat-composer button#chat-interrupt::before{content:'';width:.72rem;height:.72rem;border:1.5px solid currentColor;border-radius:var(--r-control)}

/* 12b · keep the composer clear of the bottom tab bar */
@media (max-width:899px){
  #chat-app{padding-bottom:4.6rem}
  #chat-composer{margin-bottom:4rem}
}

/* ============================================================================
   Avatar = a little screen with the mascot peeking in front (owner request)
   ========================================================================== */
.avatar{
  position:relative;flex:none;
  width:3.6rem;height:2.25rem;
  border-radius:var(--r-control);overflow:visible;
  background:color-mix(in srgb,var(--vb-ink) 12%,var(--vb-surface-2));
  border:1px solid var(--vb-line);
}
.avatar.small{width:2.9rem;height:1.85rem;border-radius:var(--r-control)}
.avatar img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:inherit;z-index:0;display:block
}
.avatar .avatar-mascot{
  position:absolute;left:auto;top:auto;right:-20%;bottom:-20%;inset:auto -20% -20% auto;
  width:50%;height:auto;aspect-ratio:1/1;z-index:2;display:block;overflow:visible;
  border-radius:0;background:transparent;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))
}
.avatar .avatar-mascot svg{width:100%;height:100%;display:block;border-radius:0}
.avatar .dot{
  position:absolute;left:auto;bottom:auto;right:-.16rem;top:-.16rem;z-index:3;
  width:.72rem;height:.72rem;border-radius:var(--r-pill);border:2px solid var(--vb-bg);
  background:var(--vb-ink-faint)
}
.avatar .dot.running{background:var(--vb-ok)}
.avatar[data-state="hibernated"],.avatar[data-state="stopped"]{filter:saturate(.45) brightness(.82)}
/* context sizes */
#chat-entries .avatar{width:3.6rem;height:2.25rem}
.avatar.small{width:2.9rem;height:1.85rem}
#chat-header-avatar .avatar{width:4rem;height:2.5rem;border-radius:var(--r-control)}
#inspect-avatar .avatar{width:5.4rem;height:3.4rem;border-radius:var(--r-control)}
#inspect-contact-list li .avatar,#inspect-contact-options li .avatar{width:2.4rem;height:1.5rem}

/* Owner: no bottom tab bar on mobile — top-left menu sheet instead */
.mobile-tabs{display:none}
@media (max-width:899px){
  #chat-app{padding-bottom:0}
  #chat-composer{margin-bottom:1rem}
}

/* pinned row lives on the list screen only */
#chat-app.in-chat #chat-pins{display:none}




/* avoid a headless repaint ghost of the header avatar thumbnail */
@media (max-width:899px){
  #chat-header-text{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--vb-bg) 94%,transparent)}
}


/* mobile header: the same screen + mascot composition, centred above the pill */
@media (max-width:899px){
  #chat-header{flex-direction:column;gap:.05rem;padding:.5rem 3rem .6rem}
  #chat-header-avatar .avatar{width:6rem;height:3.75rem;border-radius:var(--r-control)}
  #chat-header-avatar .avatar .dot{width:.85rem;height:.85rem}
}









/* ============================================================================
   Rail / user row / send — review follow-ups
   ========================================================================== */
.inspect-screen-frame.has-shot{background:var(--vb-swatch-0b0b0d);border-color:transparent}
.inspect-screen-frame.has-shot>svg,.inspect-screen-frame.has-shot>span{display:none}
#inspect-avatar,#inspect-badges,#inspect-quick-actions{display:none}
.chat-user{text-align:left}
.chat-user-name{text-align:left}
.chat-user-menu{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;color:var(--vb-ink-faint)}
.chat-user-menu svg{width:1.05rem;height:1.05rem}
#chat-composer button#send:disabled{background:var(--vb-ink);color:var(--vb-bg);opacity:.3}

/* ============================================================================
   Form-control system + interaction polish (owner quality bar)
   ========================================================================== */

::selection{background:var(--vb-accent-soft);color:var(--vb-ink)}
*{scrollbar-width:thin;scrollbar-color:var(--vb-line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--vb-line-strong);border:3px solid transparent;background-clip:content-box;border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--vb-ink-faint);background-clip:content-box}

input,select,textarea{
  min-height:var(--vb-control-h);
  transition:border-color var(--vb-t) var(--vb-ease),box-shadow var(--vb-t) var(--vb-ease),background var(--vb-t) var(--vb-ease);
  caret-color:var(--vb-accent)
}
input:hover:not(:disabled):not([type=checkbox]):not([type=radio]),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--vb-ink-faint)}
input:disabled,select:disabled,textarea:disabled{background:var(--vb-bg-soft);color:var(--vb-ink-faint);cursor:not-allowed}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--vb-focus-border);outline:none;box-shadow:var(--vb-ring)}
select{
  appearance:none;-webkit-appearance:none;padding-right:2.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:1rem
}
input[type=search]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:.65rem center;background-size:1.05rem;padding-left:2.2rem
}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=file]{border:1px dashed var(--vb-line-strong);background:var(--vb-bg-soft);padding:.45rem .6rem}
input[type=checkbox],input[type=radio]{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;width:20px;height:20px;min-width:20px;min-height:20px;flex:none;padding:0;
  border:1.5px solid var(--vb-line-strong);background:var(--vb-surface);
  display:inline-grid;place-items:center;vertical-align:middle;
  transition:background var(--vb-t),border-color var(--vb-t),box-shadow var(--vb-t)
}
input[type=checkbox]{border-radius:6px}
input[type=radio]{border-radius:var(--r-pill)}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--vb-ink-faint)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--vb-ink);border-color:var(--vb-ink)}
input[type=checkbox]:checked::after{content:'';width:.5rem;height:.27rem;border-left:2px solid var(--vb-bg);border-bottom:2px solid var(--vb-bg);transform:rotate(-45deg);margin-top:-2px}
input[type=radio]:checked::after{content:'';width:.4rem;height:.4rem;border-radius:var(--r-pill);background:var(--vb-bg)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none;border-color:var(--vb-focus-border);box-shadow:var(--vb-ring)}
/* switch */
input[type=checkbox].vb-switch,.role-capability-toggle input[type=checkbox]{
  width:2.6rem;height:1.5rem;min-height:0;border-radius:var(--r-pill);position:relative;
  background:var(--vb-surface-2);border:1px solid var(--vb-line-strong);display:inline-block;padding:0
}
input[type=checkbox].vb-switch::after,.role-capability-toggle input[type=checkbox]::after{
  content:'';position:absolute;top:2px;left:2px;width:1.15rem;height:1.15rem;border-radius:var(--r-pill);
  background:var(--vb-surface);box-shadow:var(--vb-shadow);transition:transform var(--vb-t) var(--vb-ease)
}
input[type=checkbox].vb-switch:checked,.role-capability-toggle input[type=checkbox]:checked{background:var(--vb-accent);border-color:var(--vb-accent)}
input[type=checkbox].vb-switch:checked::after,.role-capability-toggle input[type=checkbox]:checked::after{transform:translateX(1.1rem);background:var(--vb-swatch-fff)}

button{transition:background var(--vb-t),border-color var(--vb-t),color var(--vb-t),box-shadow var(--vb-t),transform var(--vb-t) var(--vb-ease)}
button:active:not(:disabled){transform:scale(.97)}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible{outline:none;box-shadow:var(--vb-ring)}
.vb-secondary{background:var(--vb-surface);border:1px solid var(--vb-line-strong);color:var(--vb-ink);border-radius:var(--r-control);padding:.5rem .9rem;font-weight:600}
.vb-secondary:hover{background:var(--vb-surface-2)}
.vb-ghost{background:transparent;border:1px solid transparent;color:var(--vb-ink-soft);border-radius:var(--r-control);padding:.5rem .9rem;font-weight:600}
.vb-ghost:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
.vb-danger{background:var(--vb-danger-soft);border:1px solid var(--vb-danger);color:var(--vb-danger-text);border-radius:var(--r-control);padding:.5rem .9rem;font-weight:600}
.vb-danger:hover{background:var(--vb-danger);color:var(--vb-swatch-fff)}
.vb-icon{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;padding:0;border-radius:var(--r-pill);border:1px solid var(--vb-line);background:var(--vb-surface);color:var(--vb-ink)}
.vb-icon svg,.vb-btn svg,button svg{width:1.05rem;height:1.05rem}
.vb-icon:hover{background:var(--vb-surface-2)}
.is-loading{position:relative;pointer-events:none}
.is-loading::after{content:'';position:absolute;top:50%;left:50%;width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:var(--vb-ink);border-radius:var(--r-pill);animation:vb-spin .7s linear infinite}
@keyframes vb-spin{to{transform:rotate(360deg)}}
.is-error ,[aria-invalid="true"]{border-color:var(--vb-danger);box-shadow:0 0 0 3px var(--vb-danger-soft)}
.vb-error{display:flex;align-items:center;gap:.35rem;color:var(--vb-danger-text);font-size:var(--vb-type-rem-0-78)}

/* details / summary custom chevron */
summary{list-style:none}
summary::-webkit-details-marker{display:none}
details>summary::marker{content:''}
details>summary::before{content:'';flex:none;width:.9rem;height:.9rem;background:currentColor;opacity:.6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--vb-t) var(--vb-ease)}
details[open]>summary::before{transform:rotate(90deg)}

/* dialogs, menus, toasts, tooltips */
dialog::backdrop,.model-picker-dialog::backdrop{background:var(--vb-modal-backdrop);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet-backdrop,.modal .backdrop,#new-box-backdrop,#delete-box-backdrop,#takeover-backdrop{background:color-mix(in srgb,var(--vb-ink) 45%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#inspect-backdrop:not([hidden]){background:color-mix(in srgb,var(--vb-ink) 35%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet-card,#new-box-card,#delete-box-card,#takeover-card{border-radius:var(--r-surface)}
#row-menu,#forward-menu,.workspace-nav-panel,.tv-preview{box-shadow:var(--vb-shadow-lg);border-radius:var(--r-surface)}
.workspace-nav-panel{display:flex;flex-direction:column;gap:.15rem;min-width:12rem;padding:.35rem;border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-elevated)}
.workspace-nav-panel a,.workspace-nav-panel button{display:flex;align-items:center;width:100%;padding:.55rem .7rem;border:0;border-radius:var(--r-control);background:none;color:var(--vb-ink);text-align:left;text-decoration:none;text-transform:none;font:500 var(--vb-type-rem-0-85)/1.35 var(--vb-font)}
.workspace-nav-panel a:hover,.workspace-nav-panel button:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
#row-menu button,#forward-menu button{width:100%;text-align:left;border:0;background:none;color:var(--vb-ink);padding:.55rem .65rem;border-radius:var(--r-control);font:inherit}
#row-menu button:hover,#forward-menu button:hover{background:var(--vb-surface-2)}
.toast{background:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-pill);box-shadow:var(--vb-shadow-lg)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms;animation-duration:.01ms;animation-iteration-count:1}}

/* 6 · grid: one header row per tile */
.tile-mark{flex:none;width:1.75rem;height:1.75rem;display:block}
.tile-mark svg{width:100%;height:100%;display:block}
.tile header{display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap;padding:.55rem .7rem}
.tile-title-select{flex:1 1 auto;min-width:7rem;min-height:2rem;font-weight:650;border-color:transparent;background:transparent;padding:.2rem .45rem}
.tile-title-select:hover{border-color:var(--vb-line-strong);background:var(--vb-surface)}
.tile-session-select{flex:0 1 auto;max-width:11rem;min-width:5rem;min-height:2rem;padding:.2rem 1.9rem .2rem .5rem;font-size:var(--vb-type-rem-0-78)}
.tile-icon-btn{flex:none;width:2rem;height:2rem;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--vb-line);background:var(--vb-surface);color:var(--vb-ink-soft);border-radius:var(--r-pill)}
.tile-icon-btn svg{width:1.05rem;height:1.05rem}
.tile-icon-btn:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
.tile header .tile-controls{margin-left:auto;display:flex;gap:.35rem;border:0;background:none;padding:0}
.tile-controls details{border:1px solid var(--vb-line);background:var(--vb-surface);color:var(--vb-ink-soft);border-radius:var(--r-control)}
.tile-controls details:not([open]) summary{width:2rem;height:2rem}
@media (max-width:640px){.tile header{flex-wrap:wrap}.tile-session-select{max-width:none}}

/* 5 · manage: fixed column grid, inline state dot, compact select, overflow */
#box-list tr.row{display:grid;grid-template-columns:minmax(10rem,1.5fr) 6.5rem minmax(8rem,1.3fr) 7.5rem 6.5rem auto;align-items:center;gap:1rem}
#box-list td{display:block}
#box-list td:nth-child(2){display:inline-flex;align-items:center;gap:.45rem}
#box-list td:nth-child(2) .table-text{display:inline;white-space:nowrap}
#box-list td:nth-child(4) select{width:auto;min-width:0}
#box-list td:nth-child(7){position:relative;display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:.35rem}
.row-overflow{position:relative;display:inline-flex}
.row-overflow-trigger{width:2.1rem;height:2.1rem;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--vb-line);background:transparent;border-radius:var(--r-pill);color:var(--vb-ink-soft)}
.row-overflow-trigger:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
.row-overflow-menu{position:absolute;top:calc(100% + 5px);right:0;z-index:20;display:none;flex-direction:column;min-width:12rem;padding:.3rem;background:var(--vb-elevated);border:1px solid var(--vb-line);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg)}
.row-overflow.open .row-overflow-menu{display:flex}
.row-overflow-menu .linkbtn{margin:0;width:100%;justify-content:flex-start;border:0;background:none;border-radius:var(--r-control);color:var(--vb-ink);padding:.5rem .6rem;font-weight:500;font-size:var(--vb-type-rem-0-8)}
.row-overflow-menu .linkbtn:hover{background:var(--vb-surface-2)}
.row-overflow-menu .linkbtn.danger{color:var(--vb-danger-text)}

/* entry forms adopt the flat section system */
#create .group{border:0;background:transparent;padding:0;margin:0 0 1.5rem}
#create .group>legend{background:none;border:0;padding:0;margin-bottom:.55rem;font-size:var(--vb-type-rem-0-7);letter-spacing:.09em;text-transform:uppercase;color:var(--vb-ink-faint);font-weight:700}
#create .row-fields{gap:.9rem 1.1rem;margin-top:0}
#create input,#create select,#create textarea{background-color:var(--vb-surface)}
#create .form-actions{margin-top:.4rem}

/* segmented control + tooltip */
.vb-segmented{display:inline-flex;padding:3px;gap:2px;background:var(--vb-surface-2);border:1px solid var(--vb-line);border-radius:var(--r-control)}
.vb-segmented button{border:0;background:transparent;color:var(--vb-ink-soft);border-radius:var(--r-control);padding:.35rem .8rem;font-weight:600;font-size:var(--vb-type-rem-0-8)}
.vb-segmented button[aria-pressed="true"]{background:var(--vb-surface);color:var(--vb-ink);box-shadow:var(--vb-shadow)}
.vb-segmented button:hover{color:var(--vb-ink)}
.vb-tooltip{display:inline-flex;padding:.35rem .6rem;background:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-control);font-size:var(--vb-type-rem-0-75);font-weight:600;box-shadow:var(--vb-shadow-md)}

/* ============================================================================
   Chat-focused review round
   ========================================================================== */

/* 1 · neutral focus (never red), distinct from error */
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--vb-focus-border);outline:none;box-shadow:var(--vb-ring)}
button:focus-visible{outline:none;box-shadow:var(--vb-ring)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none;border-color:var(--vb-focus-border);box-shadow:var(--vb-ring)}
.is-focus{border-color:var(--vb-focus-border);box-shadow:var(--vb-ring)}
.vb-secondary.is-focus{border-color:var(--vb-focus-border);box-shadow:var(--vb-ring)}

/* 2 · loading keeps its label and shows a spinner */
.is-loading{pointer-events:none}
.is-loading::before{content:'';display:inline-block;width:1rem;height:1rem;margin-right:.5rem;border:2px solid color-mix(in srgb,currentColor 35%,transparent);border-top-color:currentColor;border-radius:var(--r-pill);animation:vb-spin .7s linear infinite;vertical-align:-2px}
.is-loading::after{display:none}

/* 3 · summary chevrons render (inline-block) and never double up */
details>summary::before{display:inline-block}
.inspect-fold summary::before{display:none}

/* 10 · mobile Usage icon (beat the higher-specificity top-bar rule) */
@media (max-width:899px){
  #chat-top.workspace-top #usage-toggle,#chat-top.workspace-top .workspace-nav-usage{
    font-size:0;width:2.4rem;min-width:2.4rem;height:2.4rem;padding:0;line-height:0;
    display:inline-flex;align-items:center;justify-content:center
  }
}

/* mobile chat header: compact single row, translucent */
@media (max-width:899px){
  #chat-header{flex-direction:row;align-items:center;justify-content:flex-start;gap:.55rem;min-height:3.5rem;padding:.3rem 2.9rem;
    background:color-mix(in srgb,var(--vb-bg) 76%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--vb-line)}
  #chat-header-avatar .avatar{width:3rem;height:1.875rem;border-radius:var(--r-control)}
  #chat-header-avatar .avatar .dot{width:.7rem;height:.7rem}
  #chat-header-text{flex-direction:column;align-items:flex-start;gap:0;background:none;border:0;box-shadow:none;padding:0;max-width:none}
  #chat-header-text strong{font-size:var(--vb-type-rem-0-9);font-weight:700}
  #chat-header-state{display:block;font-size:var(--vb-type-rem-0-68);color:var(--vb-ink-soft)}
}

/* grid tiles: clean controls, merged status, rounded terminals */
.tile-controls details>summary::before{display:none}
.tile-controls details:not([open]) summary{
  border-color:var(--vb-line);background:var(--vb-surface);color:var(--vb-ink-soft)
}
.tile-controls details:not([open]) summary::after{
  content:'';width:1.1rem;height:1.1rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Cpath d='M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Cpath d='M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10'/%3E%3C/svg%3E") center/contain no-repeat
}
.tile-session-select:empty{display:none}
.tile .screen{border-radius:0 0 calc(var(--r-surface) - 1px) calc(var(--r-surface) - 1px);padding:6px}
.tile .screen .xterm{padding:6px 8px}
.tile>p[role="status"]{padding:.15rem .75rem .4rem;font-size:var(--vb-type-rem-0-72)}

/* manage rows: chat-like list rows */
#box-list tr.row{grid-template-columns:minmax(9rem,1fr) auto minmax(9rem,1.2fr) auto auto;gap:1.25rem}
#box-list td:nth-child(5),#box-list td:nth-child(6){display:none}
#box-list td:nth-child(1)::before{display:none}
#box-list .row-avatar{width:3.5rem;height:2.25rem;border-radius:var(--r-control);flex:none;background:linear-gradient(135deg,var(--vb-swatch-26303f) 0%,var(--vb-swatch-0d1119) 100%);border-color:rgba(255,255,255,.09)}
#box-list .row-avatar .avatar-mascot{width:50%}
#box-list tr.row td:nth-child(1){display:flex;align-items:center;gap:1.6rem}

/* 6 · state dot colour by state (gray default/amber transitional) */
#box-list td:nth-child(2)::before{background:var(--vb-ink-faint)}
#box-list td:nth-child(2)[data-state="running"]::before{background:var(--vb-ok)}
#box-list td:nth-child(2)[data-state="starting"]::before,
#box-list td:nth-child(2)[data-state="creating"]::before,
#box-list td:nth-child(2)[data-state="attaching"]::before,
#box-list td:nth-child(2)[data-state="reserved"]::before,
#box-list td:nth-child(2)[data-state="allocating"]::before,
#box-list td:nth-child(2)[data-state="restoring"]::before,
#box-list td:nth-child(2)[data-state="pending"]::before{background:var(--vb-warn)}
#box-list td:nth-child(2)[data-state="failed"]::before{background:var(--vb-danger)}

/* ============================================================================
   Chat detail polish: sheets, empty/loading, composer states
   ========================================================================== */
.sheet-card,.commands-card,.roles-card,.role-editor-card{border:1px solid var(--vb-line);background:var(--vb-elevated);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg)}
.sheet-card header,.commands-header,.roles-card>header{display:flex;align-items:center;gap:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--vb-line)}
.sheet-card header strong{font-size:var(--vb-type-rem-1-05);font-weight:700}
.sheet-card>label{margin:.75rem 0 0}
#chat-empty .empty-copy h2{font-weight:760;letter-spacing:-.03em}
#chat-empty .empty-copy p{color:var(--vb-ink-soft)}
#chat-loading{background:color-mix(in srgb,var(--vb-bg) 72%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--vb-ink-soft)}
#chat-banner{background:var(--vb-warn-soft);color:var(--vb-warn-text);border:0;border-radius:var(--r-pill);padding:.45rem .85rem;margin:.35rem auto;font-size:var(--vb-type-rem-0-78)}
#reply-preview{background:var(--vb-surface-2);border:1px solid var(--vb-line);border-left:3px solid var(--vb-accent);border-radius:var(--r-md);margin:.3rem .9rem 0}
#chat-conversation:has(#reply-preview:not([hidden])) #reply-preview{border-bottom-left-radius:0;border-bottom-right-radius:0}
#chat-conversation:has(#reply-preview:not([hidden])) #chat-composer{margin-top:0;border-top:0;border-top-left-radius:0;border-top-right-radius:0}
#reply-preview strong{color:var(--vb-accent-text)}
#chat-image-drafts{background:transparent;border:0;padding:.4rem .9rem}
#chat-image-drafts .draft img,#chat-image-drafts .draft-open video{border-radius:var(--r-control)}
.draft-remove{background:var(--vb-ink);color:var(--vb-bg);border:0;border-radius:var(--r-control)}
#composer-picker{border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-elevated);box-shadow:var(--vb-shadow-lg);margin:0 .9rem}
#composer-picker button{border-radius:var(--r-control);color:var(--vb-ink)}
#composer-picker button:hover,#composer-picker button[aria-selected="true"]{background:var(--vb-surface-2)}
#composer-picker button strong{color:var(--vb-ink);font-weight:650}
#composer-picker button span{color:var(--vb-ink-soft)}
#chat-new-messages{border:1px solid var(--vb-ink);background:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-control);font-weight:600}
#chat-new-messages:hover{background:var(--vb-swatch-000);color:var(--vb-bg)}
#takeover-card,#media-viewer-card{border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-elevated);box-shadow:var(--vb-shadow-lg)}
#takeover-card header,#media-viewer-card{border-color:var(--vb-line)}
#takeover-tabs button{border-radius:var(--r-control);border:1px solid var(--vb-line);background:var(--vb-surface);color:var(--vb-ink-soft)}
#takeover-tabs button[aria-pressed="true"],#takeover-tabs button.on{background:var(--vb-ink);border-color:var(--vb-ink);color:var(--vb-bg)}
.msg .choice{border-radius:var(--r-control)}
.msg .choice.on{background:var(--vb-surface-2);border-color:var(--vb-ink)}
.msg .question .send{background:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-control);border:0}
.msg .question .send[disabled]{background:var(--vb-surface-2);color:var(--vb-ink-faint)}
.msg .fwd{background:var(--vb-surface);border:1px solid var(--vb-line);border-radius:var(--r-control)}
.msg .fwd:hover{background:var(--vb-surface-2)}
.day-sep{color:var(--vb-ink-faint)}
.agent-origin{color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-72)}
.msg .note-label{color:var(--vb-accent-text)}
#chat-status{color:var(--vb-ink-soft)}
#chat-toasts .toast{background:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-pill);padding:.5rem .9rem;box-shadow:var(--vb-shadow-lg)}
.tv-preview{border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-elevated);box-shadow:var(--vb-shadow-lg)}

/* disclosure chevron: same 16px glyph as the selects, centred and on the right */
details>summary{display:flex;align-items:center;gap:.5rem}
details>summary::before{
  content:'';order:1;flex:none;margin-left:auto;width:1rem;height:1rem;
  background:currentColor;opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(-90deg);transition:transform var(--vb-t) var(--vb-ease)
}
details[open]>summary::before{transform:rotate(0)}

/* ============================================================================
   Personality pass: mascot in the thread, one-window chrome, human details,
   quieter meta, coral warmth, gentle motion.
   ========================================================================== */

/* sidebar: starts with search + a new-chat button, no admin header */
#chat-filter-row{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem .7rem}
#chat-filter-row #chat-filter{flex:1;min-width:0}
#chat-filter-row #new-box{margin-left:0;flex:none}
#chat-list-head{display:none}

/* agent message groups show the mascot avatar in the left gutter */
#chat-messages .msg.agent:not(.note){margin-left:2.15rem}
#chat-messages .msg.agent.group-start{position:relative}
.msg-avatar{
  position:absolute;left:-2.15rem;top:.1rem;
  width:1.75rem;height:1.75rem;display:block;line-height:0;
}
.msg-avatar svg{width:100%;height:100%;display:block}

/* processing row: the mascot's "• • •" in the box's own colour */
.msg.processing .typing-dots span{background:var(--mascot,var(--vb-ink-soft))}
.msg.processing .processing-mascot{width:1.75rem;height:1.75rem}

/* quieter meta: absolute on pointer devices so a hidden meta never reserves
   height (bubbles hug their text); inline and always visible on touch */
#chat-messages .msg{position:relative}
#chat-messages .msg .meta{position:absolute;right:.85rem;bottom:.26rem;margin:0;opacity:0;pointer-events:none;transition:opacity .15s var(--vb-ease)}
#chat-messages .msg:hover .meta,#chat-messages .msg:focus-within .meta{opacity:1;pointer-events:auto}
@media (pointer:coarse){
  #chat-messages .msg .meta{position:static;opacity:1;pointer-events:auto;margin-top:.32rem}
}

/* tighter groups, clearer breaks between them */
#chat-messages{gap:.9rem}
#chat-messages .msg.agent:not(.note) + .msg.agent:not(.note){margin-top:-.32rem}
#chat-messages .msg.user + .msg.user{margin-top:-.32rem}
#chat-messages .day-sep{margin:.55rem 0 .05rem}

/* selected conversation: soft coral tint + 3px coral bar */
#chat-entries li.active{background:var(--vb-accent-soft);box-shadow:inset 3px 0 0 var(--vb-accent)}

/* warmth: coral only on the send button's hover */
#chat-composer button#send:not(:disabled):hover{background:var(--vb-ink);color:var(--vb-bg)}

/* gentle motion */
@keyframes vb-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#chat-messages .msg-enter{animation:vb-rise .18s var(--vb-ease) both}
#chat-entries li{transition:background .15s var(--vb-ease),box-shadow .15s var(--vb-ease)}

/* details rail: titled screen, friendly facts, then technical detail */
#inspect-screen{padding-bottom:.35rem}
.inspect-screen-title{display:block;margin:.55rem .1rem 0;font-size:var(--vb-type-rem-0-72);font-weight:600;color:var(--vb-ink-soft);text-align:center}
.inspect-fact{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;min-width:0;padding:.55rem .7rem;border-radius:var(--r-surface);background:var(--vb-bg-soft)}
.inspect-fact-label{flex:none;font-size:var(--vb-type-rem-0-68);font-weight:650;color:var(--vb-ink-faint)}
.inspect-fact-value{font-size:var(--vb-type-rem-0-86);font-weight:650;color:var(--vb-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}

@media (max-width:640px){
  #chat-messages .msg.agent:not(.note){margin-left:1.95rem}
  .msg-avatar{left:-1.95rem}
}

/* contacts: same disclosure system as the rest of the rail */
#inspect-contacts{background:transparent;border-left:0}
#inspect-contacts>summary{cursor:pointer}
#inspect-contacts>summary h3{margin:0}
.inspect-contact-body{padding-top:.55rem}
.contact-access{background:transparent;border:1px solid var(--vb-line);color:var(--vb-ink-soft);border-radius:var(--r-control);font-weight:600;font-size:var(--vb-type-rem-0-72);padding:.3rem .62rem}
#inspect-contact-list li .contact-access,#inspect-contact-options li .contact-access{background:transparent;border:1px solid var(--vb-line);color:var(--vb-ink-soft);border-radius:var(--r-control);font-weight:600;font-size:var(--vb-type-rem-0-72);padding:.3rem .62rem}
#inspect-contact-list li .contact-access:hover,#inspect-contact-options li .contact-access:hover{background:var(--vb-surface-2);color:var(--vb-ink);border-color:var(--vb-line-strong)}
#inspect-contact-list li .contact-access[data-action="remove"]:hover{color:var(--vb-danger-text);border-color:var(--vb-danger);background:var(--vb-danger-soft)}
#inspect-contact-list li .contact-access[data-action="add"]:hover,#inspect-contact-options li .contact-access[data-action="add"]:hover{color:var(--vb-brand-ink,var(--vb-bg));border-color:var(--vb-brand,var(--vb-ink));background:var(--vb-brand,var(--vb-ink))}

/* ══ manage shell: sidebar + content pane ═══════════════════════════════ */
#app:not([hidden]){display:grid;grid-template-columns:15.5rem minmax(0,1fr);align-items:start}
.manage-sidebar{
  position:sticky;top:3.6rem;display:flex;flex-direction:column;
  height:calc(100dvh - 3.6rem);padding:1rem .8rem 1.1rem;
  background:var(--vb-bg-soft);border-right:1px solid var(--vb-line);overflow:auto
}
.manage-sidebar a{text-decoration:none;text-align:left}
.manage-sidebar-chat,.manage-sidebar a[href^="#"]{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:.7rem;padding:.6rem .7rem;border-radius:var(--r-control);color:var(--vb-ink-soft);font-weight:560;font-size:var(--vb-type-rem-0-88);text-align:left}
.manage-sidebar-chat{color:var(--vb-ink);font-weight:640;margin-bottom:.7rem;padding-bottom:.85rem;border-bottom:1px solid var(--vb-line)}
.manage-sidebar-chat:hover,.manage-sidebar a[href^="#"]:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
.manage-nav-icon{width:1.15rem;height:1.15rem;flex:none;color:currentColor;opacity:.7}
.manage-nav-group{display:flex;flex-direction:column;gap:.1rem}
.manage-nav-label{margin:.35rem .7rem .35rem;font-size:var(--vb-type-rem-0-64);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--vb-ink-faint)}
.manage-sidebar a[href^="#"][aria-current="page"]{background:var(--vb-accent-soft);color:var(--vb-accent-text);font-weight:640}
.manage-sidebar a[href^="#"][aria-current="page"]::before{content:'';position:absolute;left:-.8rem;top:.35rem;bottom:.35rem;width:3px;border-radius:var(--r-pill);background:var(--vb-accent)}
.manage-sidebar a[href^="#"][aria-current="page"] .manage-nav-icon{opacity:1}
.manage-user{display:flex;align-items:center;gap:.55rem;margin-top:auto;padding:.85rem .7rem .1rem;border-top:1px solid var(--vb-line)}
.manage-user-avatar{display:grid;place-items:center;width:2.1rem;height:2.1rem;flex:none;border-radius:var(--r-pill);background:var(--vb-accent-soft);color:var(--vb-accent-text);font-weight:750;font-size:var(--vb-type-rem-0-8)}
.manage-user-text{display:flex;flex-direction:column;min-width:0;line-height:1.25;flex:1}
.manage-user-text strong{font-size:var(--vb-type-rem-0-82);color:var(--vb-ink)}
.manage-user-text small{font-size:var(--vb-type-rem-0-7);color:var(--vb-ink-faint)}
.manage-user-action{margin:0;padding:.35rem .55rem;border:1px solid var(--vb-line-strong);background:var(--vb-surface);color:var(--vb-ink-soft);border-radius:var(--r-control);font-weight:600;font-size:var(--vb-type-rem-0-72);cursor:pointer}
.manage-user-action:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
.manage-content{min-width:0;padding:1.4rem 2rem 3.5rem;max-width:76rem}
body:has(.manage-content),body:has(.workspace-body){background:var(--vb-bg-soft)}

/* section headers + new-box card */
.section-heading{align-items:center}
.section-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:nowrap;justify-content:flex-end}
.section-actions .field{display:flex;align-items:center;gap:.55rem;margin:0;min-width:0}
.section-actions .field input{min-width:12rem}
.section-new{display:inline-flex;align-items:center;padding:.5rem .9rem;border:1px solid var(--vb-ink);border-radius:var(--r-control);background:var(--vb-ink);color:var(--vb-bg);font-weight:650;font-size:var(--vb-type-rem-0-82);white-space:nowrap}
.section-new:hover{color:var(--vb-bg);opacity:.9}
.manage-card{background:var(--vb-bg-soft);border:1px solid var(--vb-line);border-radius:var(--r-surface);margin:1.3rem 0 0;padding:0 1.1rem 1.15rem}
.create-card>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:.65rem;padding:1rem .1rem}
.create-card>summary::-webkit-details-marker{display:none}
.create-card>summary::before{content:'+';display:grid;place-items:center;width:1.5rem;height:1.5rem;flex:none;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);color:var(--vb-ink-soft);font-weight:700;background:none;-webkit-mask:none;mask:none}
.create-card[open]>summary::before{content:'–'}
.create-card-title{font-size:var(--vb-type-rem-1-02);font-weight:720}
.create-card-hint{color:var(--vb-ink-faint);font-weight:500;font-size:var(--vb-type-rem-0-8)}
.create-card .group{margin-top:.2rem}
.create-card .form-actions{margin-top:1rem}

/* capacity slot cards + notification rows + harness icons */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.6rem;margin:.7rem 0 1.2rem}
.disk-warning{padding:.8rem 1rem;border:1px solid var(--vb-danger-text);border-radius:var(--r-control);background:var(--vb-danger-soft);color:var(--vb-danger-text);font-weight:700}
#workspace-resources-context.resource-danger,#inspect-resources-context.resource-danger{color:var(--vb-danger-text);font-weight:700}
.slot-card{position:relative;display:grid;gap:.1rem;padding:.75rem .8rem;border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-bg-soft)}
.slot-card strong{font-size:var(--vb-type-rem-0-9);color:var(--vb-ink)}
.slot-card small{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-7)}
.slot-card .slot-box{font-size:var(--vb-type-rem-0-82);font-weight:600;color:var(--vb-ink)}
.slot-card em{font-style:normal;font-size:var(--vb-type-rem-0-7);color:var(--vb-ink-soft)}
.slot-dot{position:absolute;top:.8rem;right:.8rem;width:.55rem;height:.55rem;border-radius:var(--r-pill);background:var(--vb-ink-faint)}
.slot-card[data-state="occupied"] .slot-dot{background:var(--vb-ok)}
.slot-card[data-state="free"] .slot-dot{background:var(--vb-line-strong)}
.slot-card[data-state="unhealthy"] .slot-dot{background:var(--vb-danger)}
.notice-list{display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0}
.notice-row{position:relative;display:flex;align-items:center;gap:.7rem;padding:.8rem .9rem;border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-bg-soft)}
.notice-text{display:grid;gap:.1rem;min-width:0;flex:1}
.notice-text strong{font-size:var(--vb-type-rem-0-88);color:var(--vb-ink)}
.notice-text small{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-72)}
.notice-badge{padding:.18rem .5rem;border-radius:var(--r-pill);font-size:var(--vb-type-rem-0-68);font-weight:700;background:var(--vb-surface-2);color:var(--vb-ink-soft)}
.notice-row[data-enabled="true"] .notice-badge{background:var(--vb-ok-soft);color:var(--vb-ok-text)}
.profile-app-mark img{width:1.3rem;height:1.3rem;display:block}
@media(prefers-color-scheme:dark){.profile-app[data-application="opencode"] .profile-app-mark img{content:url("/harness-opencode-dark.svg")}}

@media(max-width:1080px){
  #app:not([hidden]){grid-template-columns:13.5rem minmax(0,1fr)}
  .manage-content{padding:1.2rem 1.2rem 3rem}
}
@media(max-width:900px){
  #app:not([hidden]){display:block}
  .manage-sidebar{display:none}
  .manage-content{padding:1rem .5rem 3rem;max-width:none}
  .manage-content>section{padding:1.1rem}
  .section-heading{align-items:flex-start}
  .section-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .section-actions .field{flex:1 1 100%}
  .section-actions .field input{min-width:0;width:100%}
  #box-list .table-wrap{overflow:visible;border:0}
  #box-list table.markets{min-width:0;width:100%;display:block}
  #box-list table.markets tr:first-child{display:none}
  #box-list tr.row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name state actions" "worker agent actions";gap:.2rem .7rem;align-items:center;padding:.8rem .15rem;border-bottom:1px solid var(--vb-line);background:none}
  #box-list tr.row td{display:block;border:0;padding:0;min-width:0}
  #box-list tr.row td:nth-child(1){grid-area:name;display:flex;align-items:center;gap:.65rem;font-weight:600}
  #box-list tr.row td:nth-child(2){grid-area:state;justify-self:end;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-76)}
  #box-list tr.row td:nth-child(3){grid-area:worker;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-74);overflow-wrap:anywhere}
  #box-list tr.row td:nth-child(4){grid-area:agent;justify-self:end;font-size:var(--vb-type-rem-0-74)}
  #box-list tr.row td:nth-child(4) select{max-width:8rem}
  #box-list tr.row td:nth-child(5),#box-list tr.row td:nth-child(6){display:none}
  #box-list tr.row td:nth-child(7){grid-area:actions;justify-self:end;align-self:center}
  #box-list tr.row td:first-child a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ══ workspace page: chat-like header + segmented viewer ═══════════════ */
.workspace-body{max-width:76rem}
.workspace-head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;
  margin:1.2rem 0 1.4rem;padding:1rem 1.2rem;background:var(--vb-surface);
  border:1px solid var(--vb-line);border-radius:var(--r-surface);box-shadow:var(--vb-shadow)
}
.workspace-avatar{position:relative;width:3rem;height:3rem;flex:none}
.workspace-avatar svg{width:100%;height:100%;display:block}
.workspace-avatar .dot{position:absolute;right:-.12rem;bottom:-.12rem;width:.95rem;height:.95rem;border:2px solid var(--vb-surface);border-radius:var(--r-pill);background:var(--vb-ink-faint)}
.workspace-avatar .dot.running{background:var(--vb-ok)}
.workspace-head-text{min-width:0}
.workspace-head-text h1{margin:0;font-size:var(--vb-type-rem-1-32);letter-spacing:-.03em;overflow-wrap:anywhere}
.workspace-status{margin:.12rem 0 0;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-82)}
.workspace-actions{margin:0;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.workspace-actions button{border:1px solid var(--vb-line-strong);background:var(--vb-surface);color:var(--vb-ink);border-radius:var(--r-control);padding:.45rem .8rem;font-weight:600}
.workspace-actions button:hover{background:var(--vb-surface-2)}
.workspace-actions #connect{background:var(--vb-ink);border-color:var(--vb-ink);color:var(--vb-bg)}
.workspace-head .workspace-tabs{grid-column:1/-1;justify-self:start;margin:.2rem 0 0}
.workspace-tabs{display:inline-flex;gap:.2rem;border:0;padding:.25rem;background:var(--vb-bg-soft);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--vb-line)}
.workspace-tabs[hidden]{display:none}
.workspace-tabs button{border:0;background:transparent;color:var(--vb-ink-soft);border-radius:var(--r-pill);padding:.42rem 1.05rem;font-weight:600;font-size:var(--vb-type-rem-0-82)}
.workspace-tabs button[aria-selected="true"]{background:var(--vb-ink);color:var(--vb-bg);font-weight:650}
#terminal,#desktop{border:0;padding:0;margin:1.2rem 0}
#terminal>h2,#desktop>h2{font-size:var(--vb-type-rem-1);margin:0 0 .4rem}
#terminal-screen,#desktop-screen{max-width:100%;overflow:hidden;border-radius:var(--r-surface);border:1px solid var(--vb-line);background:var(--vb-swatch-0b0b0d);box-shadow:var(--vb-shadow)}
#terminal-screen{padding:6px}
.terminal-keys{margin:.6rem 0}
@media(max-width:760px){
  .workspace-head{grid-template-columns:auto minmax(0,1fr);gap:.75rem;order:0}
  .workspace-actions{grid-column:1/-1;justify-content:flex-start}
  .workspace-head .workspace-tabs{grid-column:1/-1}
}

/* workspace topbar icon actions + control system */
.workspace-top-chat,#logout{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;padding:0;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink)}
.workspace-top-chat svg,#logout svg{width:1.15rem;height:1.15rem}
.workspace-top-chat:hover,#logout:hover{background:var(--vb-surface-2)}
.manage-user-action svg{width:1.02rem;height:1.02rem;display:block}
#lifecycle-note{color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-82);margin:1rem 0 .2rem}
#workspace-idle-policy{margin:1rem 0 0}
#workspace-run-budget-policy{margin:1rem 0 0}
.idle-policy{background:var(--vb-bg-soft);border-color:var(--vb-line);color:var(--vb-ink)}
.idle-policy .idle-policy-note,.idle-policy .idle-policy-status{color:var(--vb-ink-soft)}
.idle-policy .idle-policy-switch input:checked+span{background:var(--vb-accent);border-color:var(--vb-accent)}
.idle-policy .idle-policy-switch span{background:var(--vb-line-strong);border-color:var(--vb-line-strong)}
.idle-policy .idle-policy-controls input,.idle-policy input[type=number]{background:var(--vb-surface);border:1px solid var(--vb-line-strong);color:var(--vb-ink)}
.idle-policy .idle-policy-controls button{background:var(--vb-ink);border-color:var(--vb-ink);color:var(--vb-bg)}
.idle-policy .idle-policy-controls button:disabled{opacity:.5}
.idle-policy .idle-policy-badge[data-enabled="true"]{color:var(--vb-ink)}
.idle-policy .idle-policy-badge[data-enabled="false"]{color:var(--vb-ink-soft)}
#workspace-run-budget-policy .run-budget-elapsed{color:var(--vb-ink)}
.run-budget-policy,.run-budget-elapsed,.run-budget-status{color:var(--vb-ink)}
.run-budget-policy input[type=number]{background:var(--vb-surface);border:1px solid var(--vb-line-strong);color:var(--vb-ink)}

/* compact terminal key toolbar */
.workspace-body .terminal-keys{display:inline-flex;flex-wrap:wrap;gap:2px;margin:.6rem 0;padding:3px;background:var(--vb-bg-soft);border:1px solid var(--vb-line);border-radius:var(--r-control)}
.workspace-body .terminal-keys button{min-width:2.1rem;min-height:2.1rem;padding:0 .5rem;border:0;border-radius:calc(var(--r-control) - 3px);background:transparent;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-74);font-weight:600;cursor:pointer}
.workspace-body .terminal-keys button:hover{background:var(--vb-surface);color:var(--vb-ink)}

@media(prefers-color-scheme:dark){
  body:has(.workspace-body) .idle-policy{--idle-bg:var(--vb-bg-soft);--idle-border:var(--vb-line);--idle-ink:var(--vb-ink);--idle-muted:var(--vb-ink-soft)}
  body:has(.workspace-body) .idle-policy .idle-policy-controls input{background:var(--vb-surface);color:var(--vb-ink)}
  body:has(.workspace-body) .idle-policy .idle-policy-controls button{background:var(--vb-ink);color:var(--vb-bg)}
}

/* ══ remaining sections: notifications, instructions, permissions ══════ */
.notice-empty{display:grid;place-items:center;gap:.5rem;padding:1.8rem 1rem;text-align:center}
.notice-empty-mascot{width:3.2rem;height:3.2rem}
.notice-empty p{margin:0;color:var(--vb-ink-soft)}
#instruction-editor{background:var(--vb-bg-soft);border:1px solid var(--vb-line);border-radius:var(--r-surface);padding:.35rem 1rem 1rem;margin-top:1.1rem}
#instruction-editor>summary{cursor:pointer;font-weight:650;padding:.75rem .1rem}
#instruction-editor textarea,#box-instructions-markdown,#create-instructions-custom{font-family:var(--vb-mono);background:var(--vb-surface);border:1px solid var(--vb-line-strong);border-radius:var(--r-control);color:var(--vb-ink);width:100%;padding:.6rem .7rem}
#instruction-list{margin-top:.4rem}
#instruction-list table.markets{width:100%}
.role-toolbar{margin:.8rem 0}
.role-assignment-summary{grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr) auto;gap:.6rem .8rem}
.role-assignment-current{min-width:0}
.role-assignment-current>span{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-72);line-height:1.4}
.role-assignment-identity>small{color:var(--vb-ink-faint)}
#capacity .kpi{border-radius:var(--r-control)}
.provider-capacity{border-radius:var(--r-control)}

/* ══ workspace: two-column viewer + sticky side cards ══════════════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.workspace-body{max-width:none;padding:0 1.4rem 3rem}
.workspace-grid{display:grid;grid-template-columns:minmax(0,68fr) minmax(19rem,32fr);gap:1.3rem;align-items:start;max-width:118rem;margin:0 auto}
.workspace-viewer-col{min-width:0}
.workspace-side{position:sticky;top:4.6rem;display:flex;flex-direction:column;gap:1rem;max-height:calc(100dvh - 5.4rem);overflow:auto;padding-right:.15rem}
.side-card{background:var(--vb-surface);border:1px solid var(--vb-line);border-radius:var(--r-surface);padding:1.05rem 1.15rem;box-shadow:var(--vb-shadow)}
.side-card>h2{margin:0 0 .75rem;font-size:var(--vb-type-rem-0-92);font-weight:720}
.side-card>h2+.connection-stats,.side-card>h2+#lifecycle-note{margin-top:0}

/* header */
.workspace-head{grid-template-columns:auto minmax(0,1fr) auto;gap:1.15rem;margin:1.2rem 0 1rem;padding:1.1rem 1.3rem}
.workspace-avatar{width:5.5rem;height:5.5rem;border-radius:var(--r-control);overflow:hidden;background:linear-gradient(135deg,var(--vb-accent-soft),var(--vb-bg-soft));display:grid;place-items:center}
.workspace-avatar svg{width:70%;height:70%}
.workspace-avatar .dot{right:.25rem;bottom:.25rem;width:1rem;height:1rem}
.workspace-head-text h1{font-size:var(--vb-type-rem-1-7);font-weight:760}
.workspace-status{display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem;padding:.22rem .6rem;border-radius:var(--r-pill);background:var(--vb-ok-soft);color:var(--vb-ok-text);font-size:var(--vb-type-rem-0-74);font-weight:650}
.workspace-actions{display:flex;align-items:center;gap:.5rem}
.workspace-actions #hibernate{border:1px solid var(--vb-line-strong);background:var(--vb-surface);color:var(--vb-ink)}
.workspace-actions #connect{border:1px solid transparent;background:transparent;color:var(--vb-ink)}
.workspace-actions #connect:hover{background:var(--vb-surface-2)}
.workspace-overflow{position:relative}
.workspace-overflow>summary{list-style:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);cursor:pointer}
.workspace-overflow>summary::-webkit-details-marker{display:none}
.workspace-overflow>summary::marker{content:''}
.workspace-overflow>summary::before{display:none}
.workspace-overflow>summary svg{width:1.1rem;height:1.1rem}
.workspace-overflow[open]>summary{background:var(--vb-surface-2)}
.workspace-overflow #delete-box{display:inline-flex;align-items:center;margin-top:.4rem;padding:.45rem .7rem;border:1px solid var(--vb-danger);border-radius:var(--r-control);background:var(--vb-danger-soft);color:var(--vb-danger-text);font-weight:650;cursor:pointer}
.workspace-overflow[open]{z-index:5}
.workspace-overflow #delete-box{position:absolute;top:calc(100% + 6px);right:0;white-space:nowrap}

/* viewer card */
.viewer-card{background:var(--vb-surface);border:1px solid var(--vb-line);border-radius:var(--r-surface);padding:.85rem;box-shadow:var(--vb-shadow)}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.1rem .15rem .75rem}
.viewer-toolbar:has(#workspace-tabs[hidden]){justify-content:flex-end}
.viewer-chips{display:inline-flex;gap:.4rem;flex-wrap:wrap}
.viewer-chip{padding:.28rem .65rem;border-radius:var(--r-pill);background:var(--vb-bg-soft);border:1px solid var(--vb-line);color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-72);font-weight:650}
#terminal,#desktop{border:0;padding:0;margin:0}
#terminal-screen,#desktop-screen{max-width:100%;overflow:hidden;border-radius:calc(var(--r-surface) - 4px);border:1px solid var(--vb-line);background:var(--vb-swatch-0b0b0d);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 22px 45px rgba(0,0,0,.4)}
#terminal-screen{padding:6px;height:min(70vh,44rem)}
#desktop-screen:not(:empty){height:min(70vh,44rem)}
#session{margin:.1rem .15rem .5rem;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78)}
.desktop-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}

/* status card */
.connection-stats{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;margin:0}
.connection-stats span{display:block;padding:.5rem .65rem;border-radius:var(--r-control);background:var(--vb-bg-soft);font-size:var(--vb-type-rem-0-78);color:var(--vb-ink-soft)}
#lifecycle-note{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-76);margin:.75rem 0 0;line-height:1.5}
#workspace-idle-policy,#workspace-run-budget-policy{margin:0}
#workspace-power-card,.side-card[aria-label="Power"] #workspace-run-budget-policy{margin-top:.85rem}
.workspace-resources-heading{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem;padding-bottom:.55rem;border-bottom:1px solid var(--vb-line)}
.workspace-resources-heading h2{margin:0;padding:0;border:0;font-size:var(--vb-type-rem-0-92);font-weight:720}
#workspace-resources-adjust{min-height:2rem;padding:.25rem .7rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);font:600 var(--vb-type-px-12)/1 var(--vb-font);cursor:pointer}
#workspace-resources-adjust[hidden],#workspace-resources-context[hidden]{display:none}
.workspace-resources .inspect-resource-row:last-child{margin-bottom:.35rem}
#workspace-resources-context,#workspace-resources-updated{margin:.45rem 0 0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);line-height:1.35}

/* more card: settings rows in place */
.more-card{padding:.55rem .7rem}
.more-card>h2{padding:.4rem .45rem .3rem;margin:0}
.more-card details{border-top:1px solid var(--vb-line)}
.more-card details:first-of-type{border-top:0}
.more-card summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.75rem .45rem;cursor:pointer}
.more-card summary::before{display:none}
.more-card summary::-webkit-details-marker{display:none}
.more-card .row-icon{width:1.15rem;height:1.15rem;color:var(--vb-ink-soft)}
.more-card .row-title{font-weight:620;font-size:var(--vb-type-rem-0-86);color:var(--vb-ink)}
.more-card .row-desc{grid-column:2;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-72);margin-top:-.1rem}
.more-card .row-chevron{width:1rem;height:1rem;color:var(--vb-ink-faint);transition:transform .15s}
.more-card details[open] .row-chevron{transform:rotate(90deg)}
.more-card details[open] summary{padding-bottom:.3rem}
.more-card details>p,.more-card details>ul,.more-card details>form,.more-card details>button,.more-card details>pre,.more-card details>div{padding-left:.45rem;padding-right:.45rem}
.more-card details>p{font-size:var(--vb-type-rem-0-78);color:var(--vb-ink-soft)}

@media(max-width:1080px){
  .workspace-grid{grid-template-columns:minmax(0,1fr)}
  .workspace-side{position:static;max-height:none;overflow:visible}
}
@media(min-width:901px){
  .workspace-grid{grid-template-columns:minmax(0,1fr) minmax(18rem,22rem)}
  .workspace-side{position:sticky}
}
@media(min-width:901px) and (max-width:1100px){
  .workspace-head{grid-template-columns:auto minmax(0,1fr)}
  .workspace-actions{grid-column:1/-1;justify-content:flex-end}
}
@media(max-width:760px){
  .workspace-body{padding:0 .6rem 3rem}
  .workspace-grid{gap:.9rem}
  .workspace-head{grid-template-columns:auto minmax(0,1fr);gap:.9rem}
  .workspace-avatar{width:4rem;height:4rem}
  .workspace-head-text h1{font-size:var(--vb-type-rem-1-4)}
  .workspace-actions{grid-column:1/-1;justify-content:flex-start}
  .viewer-card{padding:.6rem}
  #terminal-screen,#desktop-screen:not(:empty){height:52vh}
}

/* workspace polish: secondary save buttons, key/value status, avatar, composer */
.idle-policy .idle-policy-controls button{background:var(--vb-surface);border:1px solid var(--vb-line-strong);color:var(--vb-ink)}
.idle-policy .idle-policy-controls button:hover:not(:disabled){background:var(--vb-surface-2)}
.idle-policy .idle-policy-controls button:disabled{opacity:.5}
.run-budget-policy button,[id$="-run-budget-policy"] button{background:var(--vb-surface);border:1px solid var(--vb-line-strong);color:var(--vb-ink)}
[id$="-run-budget-policy"] button:hover:not(:disabled){background:var(--vb-surface-2)}
#workspace-run-budget-policy .run-budget-policy button{background:var(--vb-surface);color:var(--vb-ink)}

.connection-stats span{display:flex;align-items:center;gap:.5rem;padding:.55rem .15rem;border-bottom:1px solid var(--vb-line);background:none;border-radius:0;font-size:var(--vb-type-rem-0-82)}
.connection-stats span:last-child{border-bottom:0}
.connection-stats small{flex:1;color:var(--vb-ink-soft);font-weight:560}
.connection-stats b{margin-left:auto;color:var(--vb-ink);font-weight:650;text-align:right;overflow-wrap:anywhere}
.connection-stats b.muted{color:var(--vb-ink-faint);font-weight:500}
.stat-dot{width:.55rem;height:.55rem;flex:none;border-radius:var(--r-pill);background:var(--vb-ink-faint)}
.stat-dot[data-state="running"]{background:var(--vb-ok)}
.stat-dot[data-state="hibernated"],.stat-dot[data-state="stopped"]{background:var(--vb-ink-faint)}
.stat-dot[data-state="failed"]{background:var(--vb-danger)}

.workspace-avatar{position:relative;background:none;overflow:visible;display:block;padding:0}
.workspace-avatar-screen{position:absolute;inset:0;border-radius:var(--r-control);background:linear-gradient(135deg,var(--vb-swatch-26313f),var(--vb-swatch-0e1116));border:1px solid var(--vb-line);box-shadow:var(--vb-shadow)}
.workspace-avatar-mascot{position:absolute;right:-.35rem;bottom:-.35rem;width:55%;height:55%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.workspace-avatar-mascot svg{width:100%;height:100%;display:block}
.workspace-avatar .dot{right:-.3rem;top:-.3rem;bottom:auto;border-color:var(--vb-surface)}

@media(max-width:1080px){
  #terminal-screen{height:min(60vh,520px)}
  #desktop-screen:not(:empty){height:min(60vh,520px)}
}
@media(max-width:760px){
  #terminal-screen,#desktop-screen:not(:empty){height:min(60vh,520px)}
  .workspace-body .terminal-keys{flex-wrap:nowrap;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .workspace-body .terminal-keys button{flex:none}
}

/* ══ final consistency pass over the sections ══════════════════════════ */
.manage-sidebar{align-items:stretch}

/* permissions rows: screen+mascot avatar, one secondary action + ⋯ */
.role-assignment-card{border:0;box-shadow:none;background:var(--vb-bg-soft)}
.role-assignment-summary{grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.1fr) auto;align-items:center;gap:.6rem .9rem}
.role-assignment-identity>strong{color:var(--vb-ink);font-size:var(--vb-type-rem-0-95);font-weight:650}
.role-box-mark{position:relative;width:2.7rem;height:2.7rem;flex:none;border:0;background:none;border-radius:0;overflow:visible}
.role-box-screen{position:absolute;inset:0;border-radius:var(--r-control);background:linear-gradient(135deg,var(--vb-swatch-26313f),var(--vb-swatch-0e1116));border:1px solid var(--vb-line);box-shadow:var(--vb-shadow)}
.role-box-mascot{position:absolute;right:-.25rem;bottom:-.25rem;width:56%;height:56%;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
.role-box-mascot svg{width:100%;height:100%;display:block}
.role-assignment-actions{display:flex;align-items:center;gap:.4rem;justify-content:flex-end}
.role-assignment-actions .role-assignment-toggle{background:var(--vb-surface);border:1px solid var(--vb-line-strong);color:var(--vb-ink);font-weight:600;padding:.42rem .8rem;border-radius:var(--r-control)}
.role-assignment-actions .role-assignment-toggle:hover{background:var(--vb-surface-2)}
.role-box-more{position:relative}
.role-box-more>summary{list-style:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);cursor:pointer}
.role-box-more>summary::-webkit-details-marker,.role-box-more>summary::marker{display:none;content:''}
.role-box-more>summary::before{display:none}
.role-box-more>summary svg{width:1.05rem;height:1.05rem}
.role-box-more>a{display:none}
.role-box-more[open]>a{display:block;position:absolute;top:calc(100% + 5px);right:0;z-index:20;white-space:nowrap;padding:.5rem .75rem;border:1px solid var(--vb-line);border-radius:var(--r-control);background:var(--vb-elevated);color:var(--vb-ink);box-shadow:var(--vb-shadow-lg)}

/* instructions: preset list rows */
#instruction-list .preset-list{display:flex;flex-direction:column;gap:.4rem}
.preset-row{display:flex;align-items:center;gap:1rem;padding:.8rem .9rem;border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-bg-soft)}
.preset-main{min-width:0;flex:1;display:grid;gap:.15rem}
.preset-title{display:flex;align-items:center;gap:.5rem}
.preset-title strong{font-size:var(--vb-type-rem-0-92);color:var(--vb-ink);font-weight:650}
.preset-meta{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-74)}
.pill{display:inline-flex;padding:.1rem .45rem;border-radius:var(--r-pill);background:var(--vb-accent-soft);color:var(--vb-accent-text);font-size:var(--vb-type-rem-0-66);font-weight:700}
.preset-actions{display:flex;align-items:center;gap:.4rem;flex:none}
#instruction-list .row-overflow{position:relative}
#instruction-list .row-overflow summary{list-style:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);cursor:pointer}
#instruction-list .row-overflow summary::marker,#instruction-list .row-overflow summary::-webkit-details-marker{display:none;content:''}
#instruction-list .row-overflow summary::before{display:none}
#instruction-list .row-overflow summary svg{width:1.05rem;height:1.05rem}
#instruction-list .row-overflow-menu{position:absolute;top:calc(100% + 5px);right:0;z-index:20;display:none;flex-direction:column;min-width:11rem;padding:.3rem;background:var(--vb-elevated);border:1px solid var(--vb-line);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg)}
#instruction-list .row-overflow[open] .row-overflow-menu{display:flex}
#instruction-list .row-overflow-menu .linkbtn{justify-content:flex-start;width:100%;margin:0;border:0;background:none}
#instruction-editor>summary{display:flex;align-items:baseline;gap:.6rem}

/* profiles: CLI versions card, inline notice, count pill */
#agent-cli-versions{background:var(--vb-bg-soft);border:1px solid var(--vb-line);border-radius:var(--r-surface);padding:1rem 1.1rem;display:grid;gap:.7rem;margin-top:1rem}
#agent-cli-versions>div{display:grid;gap:.1rem}
#agent-cli-versions strong{font-size:var(--vb-type-rem-0-92);color:var(--vb-ink)}
.profile-app-count{background:var(--vb-ink);color:var(--vb-bg);border:0;font-weight:700}
#agent-cli-versions-status{margin:0;font-size:var(--vb-type-rem-0-76);color:var(--vb-ink-soft);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
#agent-cli-versions-status:empty{display:none}
.notice-icon{color:var(--vb-warn)}
.notice-retry{margin:0;padding:.2rem .55rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);font-weight:600;font-size:var(--vb-type-rem-0-74);cursor:pointer}

/* providers / capacity / notifications disclosures */
#provider-editor,#fleet-location,#notifications details{border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-bg-soft);padding:.3rem .9rem .9rem;margin-top:1rem}
#provider-editor>summary,#fleet-location>summary,#notifications details>summary{cursor:pointer;font-weight:650;color:var(--vb-ink);padding:.72rem .1rem}
.provider-card details>summary{color:var(--vb-ink)}
.provider-card details{border-top:1px solid var(--vb-line)}
#provider-default{margin:.4rem 0 0}

/* ══ chat: Messenger-style header, Details hub, composer, motion ════════ */
#chat-header{gap:.55rem}
.chat-header-identity{display:flex;align-items:center;gap:.65rem;min-width:0;flex:1 1 auto;padding:.2rem .35rem;border:0;background:none;color:var(--vb-ink);text-align:left;cursor:pointer;border-radius:var(--r-control);font:inherit}
.chat-header-identity:hover{background:var(--vb-surface-2)}
.chat-header-identity #chat-header-avatar{position:relative;width:2.6rem;height:2.6rem;flex:none}
.chat-header-identity #chat-header-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.chat-header-identity #chat-header-name{font-size:var(--vb-type-rem-0-98);font-weight:680;color:var(--vb-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-header-identity #chat-header-state{display:inline-flex;align-items:center;gap:.35rem;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-74)}
.chat-header-identity #chat-header-state::before{content:'';width:.45rem;height:.45rem;border-radius:var(--r-pill);background:var(--vb-ink-faint)}
.chat-header-identity #chat-header-state.running::before{background:var(--vb-ok)}
#chat-info{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;padding:0;border:1px solid var(--vb-line);border-radius:var(--r-pill);background:var(--vb-surface);color:var(--vb-ink)}
#chat-conversation:not(.pair-view) #chat-header #chat-info{display:grid}
#chat-more.chat-action{display:grid;font:inherit;padding:.35rem .2rem;min-width:0;position:static}
#chat-info:hover{background:var(--vb-surface-2);border-color:var(--vb-line-strong)}
#chat-info svg{width:1.15rem;height:1.15rem}
#chat-wake{flex:none}

/* Details hub */
.inspect-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;padding:.85rem 1rem .1rem}
.chat-action{display:grid;justify-items:center;gap:.4rem;padding:.35rem .2rem;border:0;background:none;color:var(--vb-ink-soft);font:inherit;font-size:var(--vb-type-rem-0-7);font-weight:600;text-decoration:none;cursor:pointer;border-radius:var(--r-control)}
.chat-action:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
.chat-action-icon{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--r-pill);background:var(--vb-bg-soft);border:1px solid var(--vb-line);color:var(--vb-ink)}
.chat-action:hover .chat-action-icon{border-color:var(--vb-line-strong);background:var(--vb-surface)}
.chat-action-icon svg{width:1.2rem;height:1.2rem}
.chat-action-wrap{position:relative;display:block}
#chat-more-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;display:none;flex-direction:column;min-width:12rem;padding:.3rem;background:var(--vb-elevated);border:1px solid var(--vb-line);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg)}
#chat-more-menu:not([hidden]){display:flex}
#chat-more-menu [role=menuitem]{display:flex;align-items:center;gap:.5rem;width:100%;padding:.55rem .65rem;border:0;background:none;border-radius:var(--r-control);color:var(--vb-ink);font:inherit;font-size:var(--vb-type-rem-0-82);text-align:left;text-decoration:none;cursor:pointer}
#chat-more-menu [role=menuitem]:hover{background:var(--vb-surface-2)}
#chat-usage{display:flex;align-items:center;justify-content:space-between;gap:.7rem;width:100%;padding:.6rem .75rem;border:1px solid var(--vb-line);border-radius:var(--r-control);background:var(--vb-bg-soft);color:var(--vb-ink);font:inherit;font-size:var(--vb-type-rem-0-8);font-weight:600;cursor:pointer}
#chat-usage[hidden]{display:none}
#chat-usage:hover{background:var(--vb-surface-2)}
#chat-usage .chat-usage-label{color:var(--vb-ink-soft);font-weight:560}
#chat-usage.usage-low{color:var(--vb-danger-text);border-color:var(--vb-danger)}
#chat-clear-context{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.62rem;border:1px solid transparent;border-radius:var(--r-control);background:var(--vb-danger-soft);color:var(--vb-danger-text);font:inherit;font-weight:650;font-size:var(--vb-type-rem-0-84);cursor:pointer}
#chat-clear-context:hover{background:color-mix(in srgb,var(--vb-danger) 18%,transparent)}
#chat-clear-context:disabled{opacity:.5;cursor:default}
#chat-clear-context svg{width:1.05rem;height:1.05rem}

/* Keep stop beside Send while the selected agent is active. */
#chat-composer #chat-interrupt{display:none}
#chat-composer.is-processing #chat-interrupt{display:grid;place-items:center;background:var(--vb-ink);color:var(--vb-bg);border:0}

/* fluid motion (presentational) */
@media(prefers-reduced-motion:no-preference){
 button,.chat-action,.chat-header-identity,#chat-entries li,.msg{transition:background .15s var(--vb-ease),border-color .15s var(--vb-ease),transform .12s var(--vb-ease)}
 button:active:not(:disabled),.chat-action:active,.chat-header-identity:active{transform:scale(.97)}
 #chat-entries li:active{background:var(--vb-surface-2)}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}

/* mobile: chat header replaces the app top bar */
@media(max-width:900px){
 #chat-shell:has(#chat-app.in-chat) #chat-top{display:none}
 #chat-header{padding-top:calc(env(safe-area-inset-top) + .4rem)}
}

/* ══ refinement: borderless header, list groups, sheet, composer ═══════ */
/* header */
#chat-back{width:2.75rem;height:2.75rem;min-width:2.75rem;padding:0;border:0;background:none;border-radius:var(--r-pill);font-size:var(--vb-type-rem-1-5);line-height:1;color:var(--vb-ink)}
#chat-back:hover{background:var(--vb-surface-2)}
.chat-header-identity{border:0;background:none;padding:.25rem .4rem;gap:.8rem;border-radius:var(--r-control)}
.chat-header-identity:hover,.chat-header-identity:active{background:var(--vb-surface-2)}
.chat-header-identity #chat-header-avatar{min-width:2.6rem}
#chat-info{border:0;background:none;width:2.75rem;height:2.75rem;border-radius:var(--r-pill)}
#chat-info:hover{background:var(--vb-surface-2)}
#chat-info[aria-expanded="true"]{background:var(--vb-surface-2)}

/* composer stop icon + typing row */
#chat-composer.is-processing #chat-interrupt{color:var(--vb-bg)}
#chat-composer.is-processing #chat-interrupt svg{width:1rem;height:1rem;fill:currentColor}
#chat-composer #chat-interrupt svg{width:1rem;height:1rem}
.msg.processing .tv-button{display:grid;place-items:center;flex:none;width:28px;height:28px;padding:0;margin-left:2px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--vb-ink-soft)}
.msg.processing .tv-button svg{width:16px;height:16px}
.msg.processing .tv-button:hover,.msg.processing .tv-button:focus-visible{background:var(--vb-surface-2);color:var(--vb-ink)}
.msg.processing .tv-button[hidden]{display:none}

/* list section labels + pin glyph + unread without text line */
#chat-entries .conversation-group,#chat-entries .conversation-divider{display:block;padding:.75rem .55rem .25rem;margin:0;background:none;border:0;text-transform:uppercase;font-size:var(--vb-type-rem-0-63);font-weight:750;letter-spacing:.1em;color:var(--vb-ink-faint);text-align:left;cursor:default}
#chat-entries .conversation-divider::before,#chat-entries .conversation-divider::after{display:none}
#chat-entries li .row1{display:flex;align-items:center;gap:.4rem}
#chat-entries .pin-mark{display:inline-flex;flex:none;width:.82rem;height:.82rem;color:var(--vb-accent-text)}
#chat-entries .pin-mark[hidden]{display:none}
#chat-entries .pin-mark svg{width:100%;height:100%}
.pair-avatar-stack{position:relative;width:2.7rem;height:2.7rem;flex:none;display:block;background:none}
.pair-avatar-stack .avatar{position:absolute;width:1.85rem;height:1.85rem;border-radius:var(--r-control);background:var(--vb-bg-soft);overflow:visible}
.pair-avatar-stack .avatar:first-child{left:0;top:0;z-index:1}
.pair-avatar-stack .avatar:nth-child(2){right:0;bottom:0;z-index:2}

/* Message actions stay discreet on touch; timestamps remain visible. */
@media(pointer:coarse){
 #chat-messages .msg .meta{opacity:1;display:flex}
 #chat-messages .msg .msg-more{display:none}
}

/* details sheet: grab handle, round close, one identity, uniform actions */
#inspect-header{border-bottom:0;background:transparent;position:relative;padding:.7rem 1rem .3rem;justify-content:flex-end;min-height:0}
.inspect-grab{position:absolute;left:50%;top:.45rem;transform:translateX(-50%);width:2.4rem;height:.28rem;border-radius:var(--r-pill);background:var(--vb-line-strong);display:none}
@media(max-width:1099px){.inspect-grab{display:block}}
#inspect-close{width:2.3rem;height:2.3rem;padding:0;display:grid;place-items:center;border:0;border-radius:var(--r-pill);background:var(--vb-surface-2);color:var(--vb-ink)}
#inspect-close:hover{background:var(--vb-line)}
#inspect-close svg{width:1.15rem;height:1.15rem}
#inspect-avatar{width:4.6rem;height:4.6rem}
#inspect-avatar .avatar{width:100%;height:100%;border-radius:var(--r-control)}
#inspect-hero{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center}
#inspect-name{font-size:var(--vb-type-rem-1-35)}
#inspect-badges{justify-content:center}
#inspect-actions{width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;padding:.9rem .2rem .3rem}
.chat-action,.chat-action:visited{color:var(--vb-ink-soft);display:grid;justify-items:center;gap:.4rem;border:0;background:none;text-decoration:none;font:inherit;font-size:var(--vb-type-rem-0-68);font-weight:600;cursor:pointer;padding:.35rem .2rem;border-radius:var(--r-control)}
.chat-action:hover{color:var(--vb-ink)}
.chat-action-icon{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:var(--r-pill);background:var(--vb-bg-soft);border:1px solid var(--vb-line);color:var(--vb-ink)}
.chat-action:hover .chat-action-icon{background:var(--vb-surface);border-color:var(--vb-line-strong)}
.chat-action-icon svg{width:1.35rem;height:1.35rem}
.chat-action-wrap{display:grid;justify-items:center}

/* facts as one grouped card */
.inspect-fact{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem .9rem;border-radius:0;background:none;border-bottom:1px solid var(--vb-line)}
.inspect-fact:last-child{border-bottom:0}
.inspect-fact-label{color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-76);font-weight:560}
.inspect-fact-value{color:var(--vb-ink);font-size:var(--vb-type-rem-0-82);font-weight:650;text-align:right}

/* technical/contacts as grouped rows with icon + chevron */
.inspect-block.inspect-fold{background:var(--vb-bg-soft);border:1px solid var(--vb-line);border-radius:var(--r-surface);margin:.75rem 0 0;padding:0}
.inspect-block.inspect-fold>summary{list-style:none;display:flex;align-items:center;gap:.6rem;padding:.85rem .9rem;cursor:pointer;font-weight:620;font-size:var(--vb-type-rem-0-85);color:var(--vb-ink)}
.inspect-block.inspect-fold>summary::-webkit-details-marker,.inspect-block.inspect-fold>summary::marker{display:none;content:''}
.inspect-block.inspect-fold>summary h3{margin:0;font-size:var(--vb-type-rem-0-85);font-weight:620}
.inspect-block.inspect-fold>summary::after{content:'';margin-left:auto;flex:none;width:.9rem;height:.9rem;background:currentColor;opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s var(--vb-ease)}
.inspect-block.inspect-fold[open]>summary::after{transform:rotate(90deg)}

/* clear context: lighter full-width red row */
#chat-clear-context{justify-content:flex-start;gap:.6rem;padding:.8rem .9rem;background:var(--vb-bg-soft);border:1px solid var(--vb-line);border-radius:var(--r-surface);color:var(--vb-danger-text);font-weight:620}
#chat-clear-context:hover{background:var(--vb-danger-soft);border-color:var(--vb-danger)}
#chat-clear-context:disabled{opacity:.5;cursor:default}

/* inline system banner */
#chat-banner:not([hidden]){display:flex;align-items:center;gap:.5rem;margin:.45rem .85rem 0;padding:.5rem .75rem;border:1px solid var(--vb-line);border-left:3px solid var(--vb-warn);border-radius:var(--r-control);background:var(--vb-bg-soft);color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78);line-height:1.4}
#chat-banner:empty{display:none}

/* borderless header (override base borders) */
#chat-header #chat-back,#chat-header #chat-info{border:0;background:none;box-shadow:none}
#chat-header .chat-header-identity{border:0;background:none;box-shadow:none}

/* details sheet final touch-ups */
#inspect-screen-title{display:none}
.inspect-block.inspect-fold>summary h3{text-transform:none;letter-spacing:0;font-size:var(--vb-type-rem-0-86)}
.inspect-block.inspect-fold>summary::after{opacity:.45}
#chat-banner:not([hidden]){text-align:left;justify-content:flex-start}

/* refinement batch 3 */
#chat-composer button#chat-interrupt::before{content:none}
#chat-composer.is-processing #chat-interrupt{display:grid;place-items:center}
#chat-composer.is-processing #chat-interrupt svg{fill:var(--vb-bg);stroke:none}

/* grouped technical + contacts card */
.inspect-block.inspect-fold>summary::after{content:none}
.inspect-block.inspect-fold>summary{color:var(--vb-ink)}
.inspect-block.inspect-fold>summary h3{color:var(--vb-ink)}
.inspect-block.inspect-fold .row-icon{width:1.1rem;height:1.1rem;flex:none;color:var(--vb-ink-soft)}
.inspect-block.inspect-fold .row-chevron{width:1rem;height:1rem;flex:none;margin-left:auto;color:var(--vb-ink-faint);transition:transform .15s var(--vb-ease)}
.inspect-block.inspect-fold[open]>summary .row-chevron{transform:rotate(90deg)}
.inspect-technical:not(:has(+#inspect-contacts:not([hidden]))){border-radius:var(--r-surface);border-bottom:1px solid var(--vb-line)}
#inspect-contacts{border-radius:0 0 var(--r-surface) var(--r-surface);margin-top:-1px}

/* stalled banner never overlaps the transcript */
#chat-banner:not([hidden]){position:sticky;top:0;z-index:5}

/* header identity spacing, no redundant state dot */
.chat-header-identity{gap:.95rem}
.chat-header-identity #chat-header-text{padding-left:.15rem}
.chat-header-identity #chat-header-state::before{display:none}

/* first-run empty state */
#chat-empty h2{text-decoration:none;border:0;font-size:var(--vb-type-rem-1-35);font-weight:740;color:var(--vb-ink)}
.empty-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.9rem}
#empty-new-box{padding:.55rem 1.1rem;border:1px solid var(--vb-ink);border-radius:var(--r-pill);background:var(--vb-ink);color:var(--vb-bg);font-weight:650;cursor:pointer}
#empty-search{padding:.55rem 1.1rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-pill);background:var(--vb-surface);color:var(--vb-ink);font-weight:600;cursor:pointer}
#empty-search:hover{background:var(--vb-surface-2)}

/* box ↔ box read-only chat */
#chat-conversation.pair-view #chat-header-avatar .avatar{width:1.95rem;height:1.95rem}
#chat-conversation.pair-view #chat-header-state{color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-74)}
#chat-conversation.pair-view #chat-status{display:block;margin:.4rem .85rem .9rem;padding:.6rem .8rem;border:1px solid var(--vb-line);border-radius:var(--r-control);background:var(--vb-bg-soft);color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78);text-align:center}
.msg .agent-origin{display:inline-flex;align-items:center;gap:.4rem;text-transform:none;letter-spacing:0;font-size:var(--vb-type-rem-0-7);font-weight:650;color:var(--vb-ink-soft)}

/* row context menu popover */
#row-menu{background:var(--vb-elevated);border:1px solid var(--vb-line);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg);padding:.3rem;min-width:12.5rem}
#row-menu button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .65rem;border:0;background:none;border-radius:var(--r-control);color:var(--vb-ink);font-size:var(--vb-type-rem-0-82);font-weight:560;text-align:left;cursor:pointer}
#row-menu button:hover{background:var(--vb-surface-2)}
#row-menu button.danger{color:var(--vb-danger-text)}
#row-menu button.danger:hover{background:var(--vb-danger-soft)}
#row-menu .menu-sep,#row-menu hr{border:0;border-top:1px solid var(--vb-line);margin:.3rem .4rem}

/* menu sheet sections */
#chat-menu-sheet .menu-links{display:flex;flex-direction:column;gap:.1rem;padding:.5rem .7rem 1rem}
#chat-menu-sheet .menu-group-label{margin:.8rem .5rem .3rem;font-size:var(--vb-type-rem-0-63);font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--vb-ink-faint)}
#chat-menu-sheet .menu-group-label:first-child{margin-top:.3rem}
#chat-menu-sheet .menu-links a,#chat-menu-sheet .menu-links button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .7rem;border:0;border-radius:var(--r-control);background:none;color:var(--vb-ink);font:inherit;font-size:var(--vb-type-rem-0-86);font-weight:560;text-align:left;text-decoration:none;cursor:pointer}
#chat-menu-sheet .menu-links a:hover,#chat-menu-sheet .menu-links button:hover{background:var(--vb-surface-2)}
#chat-menu-sheet .menu-logout{color:var(--vb-danger-text);margin-top:.2rem}
#chat-menu-sheet .menu-logout:hover{background:var(--vb-danger-soft)}
#chat-menu-sheet .menu-status{margin:.2rem .7rem;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-74)}

/* refinement batch 4 */
/* pair chat bubbles: sender mascot + ink name; larger header pair */
#chat-conversation.pair-view #chat-header-avatar .avatar{width:2.35rem;height:2.35rem}
.msg .agent-origin{color:var(--vb-ink);font-weight:680}
.msg.has-avatar{display:flex;align-items:flex-end;gap:.45rem}
.msg.has-avatar .bubble{flex:1 1 auto;min-width:0}
.msg.user.has-avatar .msg-avatar{order:2}
.msg .msg-avatar{width:1.75rem;height:1.75rem;flex:none;border-radius:var(--r-pill);background:transparent}
.msg .msg-avatar svg{width:100%;height:100%}

/* menu sheet: one left edge, leading icons, notification row, pill */
#chat-menu-sheet .menu-links{padding:.45rem .6rem 1.1rem}
#chat-menu-sheet .menu-group-label{margin:.8rem .55rem .25rem}
#chat-menu-sheet .menu-links a,#chat-menu-sheet .menu-links button{padding:.6rem .55rem}
#chat-menu-sheet .menu-icon{width:1.15rem;height:1.15rem;flex:none;color:var(--vb-ink-soft)}
#chat-menu-sheet .menu-row{display:flex;align-items:center;gap:.6rem;padding:.6rem .55rem}
#chat-menu-sheet .menu-row-text{display:grid;gap:.05rem;min-width:0;flex:1}
#chat-menu-sheet .menu-row-title{font-size:var(--vb-type-rem-0-86);font-weight:560;color:var(--vb-ink)}
#chat-menu-sheet .menu-row-sub{font-size:var(--vb-type-rem-0-72);color:var(--vb-ink-faint);line-height:1.35}
#chat-menu-sheet .menu-pill{flex:none;min-width:3.4rem;padding:.32rem .6rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-pill);background:var(--vb-surface);color:var(--vb-ink-soft);font:inherit;font-size:var(--vb-type-rem-0-74);font-weight:700;text-align:center;cursor:pointer}
#chat-menu-sheet .menu-pill.on{background:var(--vb-ok-soft);border-color:transparent;color:var(--vb-ok-text)}
#chat-menu-sheet .menu-pill:disabled{opacity:.6;cursor:default}
#chat-menu-sheet .menu-row-check{flex:none;width:2rem;height:2rem;display:grid;place-items:center;border:1px solid var(--vb-line);border-radius:var(--r-pill);background:var(--vb-surface);color:var(--vb-ink-soft);cursor:pointer}
#chat-menu-sheet .menu-row-check svg{width:1rem;height:1rem}
#chat-menu-sheet .menu-logout{margin-top:.3rem}

/* row menu icons/divider/trash */
#row-menu button .menu-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;color:var(--vb-ink-soft)}
#row-menu button .menu-icon svg{width:18px;height:18px}
#row-menu button.danger .menu-icon{color:var(--vb-danger-text)}
#row-menu .menu-sep{height:1px;margin:.3rem .5rem;background:var(--vb-line)}
#row-menu .row-menu-heading{display:none}

/* ══ density pass: Messenger/iMessage grid ═════════════════════════════ */
#chat-messages{padding:12px 12px 8px;gap:2px;align-items:stretch}
#chat-messages .msg{max-width:78%;padding:8px 12px;font-size:var(--vb-type-px-16);line-height:1.35;border-radius:18px;margin-left:0;box-shadow:none}
#chat-messages .msg.user{align-self:flex-end}
#chat-messages .msg.agent{margin-left:28px}
#chat-messages .msg.agent .msg-avatar{left:-28px;top:auto;bottom:0;width:24px;height:24px}
#chat-messages .msg.group-start{margin-top:12px}
#chat-messages .msg.tail{border-bottom-left-radius:6px}
#chat-messages .msg.agent:not(.tail){border-bottom-left-radius:18px}
#chat-messages .msg.user.tail{border-bottom-right-radius:6px}
#chat-messages .msg.user:not(.tail){border-bottom-right-radius:18px}
#chat-messages .day-sep{margin:16px 0;text-align:center;font-size:var(--vb-type-px-11);letter-spacing:.06em;text-transform:uppercase;color:var(--vb-ink-faint)}
#chat-messages .msg .meta{float:right;display:inline-flex;align-items:center;gap:.25rem;margin:.2em 0 0 .55em;font-size:var(--vb-type-px-11);line-height:1;color:var(--vb-ink-faint);opacity:1}
#chat-messages .msg.user .meta{color:color-mix(in srgb,var(--vb-bubble-out-ink) 72%,transparent)}
#chat-messages .msg::after{content:'';display:table;clear:both}
#chat-messages .msg .msg-actions{float:right;clear:none;margin:0 0 0 .25rem}
#chat-messages .text pre{padding:8px 10px;font-size:var(--vb-type-px-13);line-height:1.45;white-space:pre;overflow-x:auto;border-radius:var(--r-control)}
#chat-messages .text code{white-space:pre}
#chat-messages .text{overflow-wrap:anywhere}
#chat-messages .msg .text img,#chat-messages .msg .media-preview{border-radius:var(--r-control)}
/* typing row: compact, aligned with agent bubbles */
#chat-messages .msg.processing{margin-left:28px;height:32px;padding:0 10px;gap:.45rem;font-size:var(--vb-type-px-13);border-radius:16px}
#chat-messages .msg.processing .processing-mascot{width:20px;height:20px}
#chat-messages .msg.processing .typing-label{color:var(--vb-ink-soft)}
/* composer: tight to the bottom */
#chat-composer{padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);gap:.4rem;margin:0}
#chat-composer #chat-input{min-height:2.75rem}
#chat-status{margin:0 12px .2rem}
/* stalled notice: centred system pill, no accent stripe */
#chat-banner:not([hidden]){display:flex;align-items:center;justify-content:center;gap:.35rem;margin:8px 12px 0;padding:.32rem .7rem;border:0;border-radius:var(--r-pill);background:var(--vb-bg-soft);color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);line-height:1.3;position:static}
#chat-banner:not([hidden])::before{content:'⏱';font-size:.9em;opacity:.7}
#chat-banner:empty{display:none}
/* no accent stripes on notices */
#reply-preview{border-left:0}
@media(max-width:600px){#reply-preview{margin:0}}
#chat-shell .flash,.flash.error{border-left:0}

@media(min-width:601px){
 #chat-messages{padding:16px}
 #chat-messages .msg{max-width:62ch;font-size:var(--vb-type-px-15-5)}
 #chat-messages .msg.agent{margin-left:32px}
 #chat-messages .msg.agent .msg-avatar{left:-32px;width:26px;height:26px}
 #chat-messages .msg.processing{margin-left:32px}
}

.flash,.flash.error{border-left:0;border-radius:var(--r-control)}

/* ══ surfaces: new-box modal, takeover, thread, popovers, states, usage ══ */
#new-box-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(15rem,.85fr);gap:0;max-width:58rem;width:calc(100% - 2rem);padding:0;overflow:hidden}
#new-box-card>header{grid-column:1/-1;padding:1rem 1.2rem;border-bottom:1px solid var(--vb-line)}
#create-box{display:grid;gap:.75rem;align-content:start;padding:1.1rem 1.2rem 1.4rem}
#create-box>label,#create-box .field{display:grid;gap:.3rem;font-weight:600;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78)}
#create-box input,#create-box select,#create-box textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-bg-soft);color:var(--vb-ink);font:inherit}
#create-box .tools{border:0;padding:0;margin:0}
#create-box-submit{justify-self:start;margin-top:.3rem;padding:.6rem 1.1rem;border:1px solid var(--vb-ink);border-radius:var(--r-control);background:var(--vb-ink);color:var(--vb-bg);font-weight:650;cursor:pointer}
#create-preview{border-left:1px solid var(--vb-line);background:var(--vb-bg-soft);padding:1.1rem}
#create-preview h3{margin:0 0 .6rem;font-size:var(--vb-type-rem-0-7);font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--vb-ink-faint)}
#create-preview .preview-card{border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-surface);padding:.9rem}
.preview-note{color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-74)}
#new-box-status{margin:.4rem 1.2rem .9rem;font-size:var(--vb-type-rem-0-78);color:var(--vb-ink-soft)}

#takeover-card{background:var(--vb-elevated);border:1px solid var(--vb-line);border-radius:var(--r-surface);overflow:hidden;box-shadow:var(--vb-shadow-lg)}
#takeover-header{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-bottom:1px solid var(--vb-line)}
#takeover-title{font-weight:680}
#takeover-tabs{display:inline-flex;gap:.2rem;padding:.2rem;background:var(--vb-bg-soft);border-radius:var(--r-pill)}
#takeover-tabs button{border:0;border-radius:var(--r-pill);padding:.38rem 1rem;background:transparent;color:var(--vb-ink-soft);font:inherit;font-size:var(--vb-type-rem-0-8);font-weight:600;cursor:pointer}
#takeover-tabs button.on{background:var(--vb-ink);color:var(--vb-bg)}
#takeover-status{color:var(--vb-ok-text);font-size:var(--vb-type-rem-0-76);font-weight:600}
#takeover-controls{display:inline-flex;flex-wrap:wrap;gap:2px;margin:.7rem .9rem 0;padding:3px;background:var(--vb-bg-soft);border:1px solid var(--vb-line);border-radius:var(--r-control)}
#takeover-controls button{border:0;border-radius:calc(var(--r-control) - 3px);background:transparent;color:var(--vb-ink-soft);padding:.4rem .6rem;font-size:var(--vb-type-rem-0-74);font-weight:600;cursor:pointer}
#takeover-controls button:hover{background:var(--vb-surface);color:var(--vb-ink)}
#takeover-screen{margin:.7rem .9rem .9rem;border:1px solid var(--vb-line);border-radius:var(--r-surface);overflow:hidden;background:var(--vb-swatch-0b0b0d);box-shadow:inset 0 22px 45px rgba(0,0,0,.4)}
#takeover-close{border:1px solid var(--vb-line);background:var(--vb-surface);border-radius:var(--r-pill);width:2.1rem;height:2.1rem;display:grid;place-items:center;color:var(--vb-ink);cursor:pointer}

#thread-panel{background:var(--vb-bg-soft);border-left:1px solid var(--vb-line)}
#thread-panel header{background:transparent;border-bottom:1px solid var(--vb-line)}
#thread-composer{background:var(--vb-surface);border-top:1px solid var(--vb-line)}
#thread-composer textarea{border-radius:var(--r-md)}
#forward-menu{background:var(--vb-elevated);border:1px solid var(--vb-line);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg);padding:.3rem}
#chat-loading{color:var(--vb-ink-soft)}
#chat-loading p{font-size:var(--vb-type-rem-0-8)}
#chat-wake{border:1px solid var(--vb-line-strong);background:var(--vb-surface);color:var(--vb-ink);border-radius:var(--r-pill);padding:.4rem .9rem;font-weight:600;cursor:pointer}

/* usage cards */
#usage-list{display:grid;gap:.7rem}
.usage-profile{background:var(--vb-bg-soft);border:1px solid var(--vb-line);border-radius:var(--r-surface);padding:1rem 1.05rem}
.usage-profile h3{margin:0 0 .15rem;font-size:var(--vb-type-rem-0-95)}
.usage-profile>p{margin:0 0 .7rem;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-74)}
.usage-window{margin-top:.7rem}
.usage-window-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.usage-window-head span{color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78)}
.usage-window-head strong{color:var(--vb-ink);font-size:var(--vb-type-rem-0-86)}
.usage-window small{display:block;margin-top:.25rem;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-72)}
.usage-track{height:.5rem;margin:.3rem 0 0;border-radius:var(--r-pill);background:var(--vb-line);overflow:hidden}
.usage-track span{display:block;height:100%;border-radius:var(--r-pill);background:var(--vb-ok)}

@media(max-width:760px){
 #new-box-card{grid-template-columns:minmax(0,1fr)}
 #create-preview{border-left:0;border-top:1px solid var(--vb-line)}
}

/* ══ desktop/mobile regression fixes ════════════════════════════════════ */
/* 1. inline meta reserves its own space; never overlaps text */
#chat-messages .msg{position:relative}
#chat-messages .msg .meta{position:absolute;right:11px;bottom:5px;float:none;margin:0;display:inline-flex;align-items:center;gap:.28rem}
#chat-messages .msg.tail .text::after{content:'';display:inline-block;width:4.7rem;height:1px;vertical-align:baseline}
#chat-messages .msg,.msg::after{clear:none}

/* 2. header identity borderless on every width, with a real gap */
#chat-header-text{background:none;border:0;box-shadow:none;padding:0;align-items:flex-start}
.chat-header-identity{gap:1rem}
.chat-header-identity #chat-header-avatar{margin-right:.15rem}

/* 3. chat notices sit directly beneath the header, across the full chat width. */
#chat-banner:not([hidden]){display:flex;align-items:center;justify-content:flex-start;gap:.45rem;position:static;flex:none;min-width:0;min-height:40px;margin:0;padding:0 1rem;border:0;border-bottom:1px solid var(--vb-line);border-radius:0;background:var(--vb-bg-soft);color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);line-height:1.3;text-align:left}
#chat-banner:not([hidden])::before{content:'';width:.85rem;height:.85rem;flex:none;background:currentColor;opacity:.6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
#chat-banner .chat-banner-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-banner[data-kind="stalled"]{color:var(--vb-ink)}
#chat-banner[data-kind="stalled"]::before{color:var(--vb-warn);opacity:1;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20L12 3Z'/%3E%3Cpath d='M12 9v5M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20L12 3Z'/%3E%3Cpath d='M12 9v5M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat}
#chat-banner .chat-banner-actions{display:flex;align-items:center;flex:none;gap:.15rem;margin-left:auto;white-space:nowrap}
#chat-banner .chat-banner-actions button{min-height:40px;padding:.3rem .45rem;border:0;border-radius:0;background:transparent;color:var(--vb-ink-soft);font:inherit;font-weight:650;cursor:pointer}
#chat-banner .chat-banner-actions button+button::before{content:'·';display:inline-block;margin-right:.7rem;color:var(--vb-ink-faint);font-weight:400}
#chat-banner .chat-banner-actions button:hover,#chat-banner .chat-banner-actions button:focus-visible{color:var(--vb-ink);text-decoration:underline}
@media(max-width:600px){
 #chat-banner:not([hidden]){flex-wrap:wrap;column-gap:.4rem;padding:0 .55rem .1rem}
 #chat-banner .chat-banner-actions{flex-basis:100%;justify-content:flex-start;gap:.2rem;width:100%;margin:0}
 #chat-banner .chat-banner-actions button{padding:.25rem .35rem}
}

/* 4. rail action row: 4 equal columns, no label collisions */
.inspect-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.2rem;padding:.9rem .5rem .4rem}
.chat-action{min-width:0;font-size:var(--vb-type-rem-0-62);letter-spacing:.01em;padding:.3rem .1rem;overflow-wrap:anywhere}
.chat-action-icon{width:3.1rem;height:3.1rem}
.chat-action-icon svg{width:1.25rem;height:1.25rem}
.chat-action-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 5. one grouped card for technical + contacts, same inset */
#inspect-contacts{border-radius:0 0 var(--r-surface) var(--r-surface);border-top:0;margin:0}

/* regression fixes v2 */
#chat-header-avatar .avatar{width:2.6rem;height:2.6rem;border-radius:var(--r-control)}
#chat-messages .msg .meta{position:static;float:none;display:flex;justify-content:flex-end;width:100%;margin:.18rem 0 0;gap:.28rem}
#chat-messages .msg.tail .text::after{content:none}
.inspect-actions .chat-action-label{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;text-align:center}
.inspect-actions .chat-action{font-size:var(--vb-type-rem-0-63)}
#inspect-summary>#inspect-contacts{margin-top:0}

.inspect-actions .chat-action-label{overflow-wrap:normal;word-break:keep-all;hyphens:none;font-size:var(--vb-type-rem-0-6)}
.inspect-actions .chat-action-icon{width:2.9rem;height:2.9rem}

/* ══ new-box modal pass ═════════════════════════════════════════════════ */
#new-box-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:min(88vh,48rem);width:min(62rem,calc(100% - 2rem));padding:0;overflow:hidden;background:var(--vb-elevated)}
#new-box-card>header{display:flex;align-items:center;gap:.6rem;padding:1rem 1.2rem;border-bottom:1px solid var(--vb-line);grid-column:auto}
#new-box-card>header strong{font-size:var(--vb-type-rem-1);font-weight:720}
.new-box-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(15rem,1fr);min-height:0;overflow:hidden}
#create-box{overflow:auto;padding:1.1rem 1.2rem;display:block}
.nb-step{border:0;padding:0;margin:0 0 1.1rem;min-width:0}
.nb-step>legend{float:left;width:100%;margin:0 0 .6rem;padding:0;border:0;font-size:var(--vb-type-rem-0-72);font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--vb-ink-faint)}
.nb-step>label,.nb-step .field{display:grid;gap:.3rem;margin:.55rem 0 0;font-weight:600;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78)}
#create-box input,#create-box textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background-color:var(--vb-bg-soft);color:var(--vb-ink);font:inherit}
#create-box select{width:100%;padding:.55rem 2.1rem .55rem .7rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background-color:var(--vb-bg-soft);color:var(--vb-ink);font:inherit;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;background-size:1rem}
#create-box .tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.45rem;border:0;padding:0;margin:.5rem 0 0;overflow:visible}
#create-box .tools[hidden]{display:none}
#create-box .tools legend{display:none}
#create-box .tools label{display:flex;align-items:center;gap:.5rem;margin:0;padding:.5rem .6rem;border:1px solid var(--vb-line);border-radius:var(--r-control);background:var(--vb-bg-soft);font-weight:560;color:var(--vb-ink)}
#create-box .tools input{width:auto;margin:0}
#create-box .custom-tools{margin-top:.7rem;background:var(--vb-bg-soft);border:1px solid var(--vb-line);border-radius:var(--r-surface);padding:.3rem .9rem .9rem}
#create-box .custom-tools>summary{cursor:pointer;font-weight:650;padding:.6rem .1rem}
#create-preview{border-left:1px solid var(--vb-line);background:var(--vb-bg-soft);padding:1.2rem;overflow:auto;position:sticky;top:0;align-self:start}
.preview-card{background:var(--vb-surface);border:1px solid var(--vb-line);border-radius:var(--r-surface);padding:1rem;display:grid;gap:.5rem}
.preview-avatar{position:relative;display:block;width:4.5rem;height:4.5rem;margin:0 auto}
.preview-screen{position:absolute;inset:0;border-radius:var(--r-control);background:linear-gradient(135deg,var(--vb-swatch-26313f),var(--vb-swatch-0e1116));border:1px solid var(--vb-line)}
.preview-mascot{position:absolute;right:-.3rem;bottom:-.3rem;width:56%;height:56%}
.preview-mascot svg{width:100%;height:100%;display:block}
.preview-name{text-align:center;font-size:var(--vb-type-rem-1);font-weight:700;color:var(--vb-ink);overflow-wrap:anywhere}
.preview-row{display:flex;justify-content:space-between;gap:.8rem;padding:.35rem 0;border-bottom:1px solid var(--vb-line);font-size:var(--vb-type-rem-0-78)}
.preview-row:last-child{border-bottom:0}
.preview-row .k{color:var(--vb-ink-soft)}
.preview-row .v{color:var(--vb-ink);font-weight:600;text-align:right}
.preview-note{margin:.7rem 0 0;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-72);line-height:1.45}
.new-box-footer{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.2rem;border-top:1px solid var(--vb-line)}
.new-box-footer-text{flex:1;min-width:0}
#new-box-target{display:flex;align-items:center;gap:6px;min-width:0;margin:0 0 4px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-13)}
#new-box-target[hidden]{display:none}
#new-box-target .new-box-target-icon{display:inline-flex;flex:none;width:15px;height:15px}
#new-box-target .new-box-target-icon svg{width:15px;height:15px}
#new-box-target-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#new-box-target-remove{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;padding:0;border:0;border-radius:var(--r-control);background:transparent;color:var(--vb-ink-soft);font:inherit;font-size:18px;line-height:1;cursor:pointer}
#new-box-target-remove:hover{background:var(--vb-surface-2);color:var(--vb-ink)}
.new-box-footer #new-box-summary{display:none}
.new-box-footer #new-box-status{margin:0;font-size:var(--vb-type-rem-0-78);color:var(--vb-danger-text)}
#create-pool-status{margin:.55rem 0 0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-13)}
#create-provider-status,#profile-choices-status,#create-tools-status,#create-instructions-status{margin:.55rem 0 0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-13)}
#create-provider-status:empty,#profile-choices-status:empty,#create-tools-status:empty,#create-instructions-status:empty{display:none}
#create-provider-status a{color:var(--vb-ink);text-decoration:underline}
#create-pool-status summary{cursor:pointer;list-style:none}
#create-pool-status summary::-webkit-details-marker{display:none}
#create-pool-status summary::after{content:' · Details';color:var(--vb-ink-faint)}
#create-pool-status[open] summary::after{content:' · Hide details'}
#create-pool-status p{margin:.35rem 0 0;color:var(--vb-ink-faint);line-height:1.4}
#new-box-cancel{margin-left:auto;padding:.55rem 1rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);font-weight:600;cursor:pointer}
#create-box-submit{padding:.6rem 1.2rem;border:1px solid var(--vb-ink);border-radius:var(--r-control);background:var(--vb-ink);color:var(--vb-bg);font-weight:650;cursor:pointer}
#create-box-submit:disabled{opacity:.6}
/* Permission tool choices share the app checkbox, with the full row as target. */
.mcp-tool-group .role-inline-checks{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.mcp-tool-group .role-inline-checks label{box-sizing:border-box;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:12px;min-height:44px;width:100%;min-width:0;margin:0;padding:9px 0;border-bottom:1px solid var(--vb-line);color:var(--vb-ink);font-size:var(--vb-type-px-14);overflow-wrap:anywhere;cursor:pointer}
.mcp-tool-group .role-inline-checks label:last-child{border-bottom:0}
.mcp-tool-group .role-inline-checks input[type=checkbox]{width:20px;height:20px;min-width:20px;min-height:20px;margin:0}
#create-box input[type=checkbox]{width:20px;height:20px;min-width:20px;min-height:20px}
.sheet-card .role-inline-checks input[type=checkbox],#create-box input[type=checkbox]{padding:0;border-radius:6px;background:var(--vb-surface)}
.sheet-card .role-inline-checks input[type=checkbox]:checked,#create-box input[type=checkbox]:checked{background:var(--vb-ink);border-color:var(--vb-ink)}
.role-capability-options[open]>summary::after{transform:rotate(90deg)}
.media-button,.media-button img,.media-button video,.media-button .media-preview,.media-button .media-chip{touch-action:pan-y;-webkit-user-drag:none}

/* neutral focus ring everywhere (never coral/red) */
#chat-shell :focus-visible{outline-color:color-mix(in srgb,var(--vb-ink) 55%,transparent)}

/* neutral selected login-profile card */
.create-profile-option[aria-pressed="true"],.create-profile-option.on{border-color:var(--vb-ink);background:var(--vb-bg-soft);box-shadow:inset 0 0 0 1px var(--vb-ink)}
.create-profile-option[aria-pressed="true"] .create-profile-remaining{color:var(--vb-ink-soft)}

/* takeover error as an inline viewer notice */
#takeover-screen{position:relative}
#takeover-status.is-error{color:var(--vb-danger-text);font-weight:650}
.viewer-error{position:absolute;inset:0;display:grid;place-items:center;justify-items:center;gap:.5rem;padding:1.4rem;text-align:center;background:var(--vb-bg-soft);color:var(--vb-ink-soft);z-index:2}
.viewer-error-icon{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--r-pill);background:var(--vb-danger-soft);color:var(--vb-danger-text)}
.viewer-error-icon svg{width:1.3rem;height:1.3rem}
.viewer-error strong{color:var(--vb-ink);font-size:var(--vb-type-rem-0-95)}
.viewer-error-detail{max-width:32ch;font-size:var(--vb-type-rem-0-8)}
.viewer-error button{margin-top:.3rem;padding:.5rem .95rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);font-weight:650;cursor:pointer}
.viewer-error button:hover{background:var(--vb-surface-2)}

@media(max-width:760px){
 #new-box-card{grid-template-rows:auto minmax(0,1fr) auto;width:calc(100% - 1rem)}
 .new-box-body{grid-template-columns:minmax(0,1fr)}
 #create-preview{border-left:0;border-top:1px solid var(--vb-line);position:static}
}

#new-box-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
#new-box-card>header{grid-column:1/-1}
.new-box-body{grid-column:1/-1;grid-row:2}
.new-box-footer{grid-column:1/-1;grid-row:3}
#new-box-card>header{grid-row:1}

#create-box{display:block}
#create-box .profiles{display:block;width:100%;flex:none;min-width:0}
#create-box .create-profile-list{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:.3rem 0}
#create-box .profile-field{margin-top:.5rem}

#profile-choices>*{width:100%;max-width:none;float:none;position:static}
#profile-choices .profile-field{display:grid;width:100%;grid-template-columns:minmax(0,1fr)}
#profile-choices .profile-field>input,#profile-choices .profile-field>select{width:100%}

.viewer-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem}
#new-box-card .profile-field input,#new-box-card .profile-field select,#new-box-card .model-picker-open{background-color:var(--vb-bg-soft);border-color:var(--vb-line-strong);color:var(--vb-ink)}
#new-box-card [class*="model-picker"]{background-color:var(--vb-bg-soft)}
#new-box-card .ai-field{background:transparent}

/* first-run list empty state */
#chat-list-empty{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:2rem 1rem;text-align:center}
#chat-list-empty[hidden]{display:none}
.empty-list-mascot{width:3rem;height:3rem}
.empty-list-mascot svg{width:100%;height:100%}
#chat-list-empty strong{color:var(--vb-ink);font-size:var(--vb-type-rem-0-92)}
#chat-list-empty .hint{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-78)}
#empty-list-new-box{margin-top:.4rem;padding:.5rem 1rem;border:1px solid var(--vb-ink);border-radius:var(--r-pill);background:var(--vb-ink);color:var(--vb-bg);font-weight:650;cursor:pointer}

/* loading skeleton */
#chat-loading:not([hidden]){background:var(--vb-bg)}
#chat-loading img{opacity:.6}
#chat-loading p{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-78)}
#chat-messages:empty::before{content:'';display:block;height:5.5rem;border-radius:var(--r-surface);background:linear-gradient(90deg,var(--vb-bg-soft),var(--vb-surface-2),var(--vb-bg-soft));background-size:200% 100%;animation:vb-skel 1.4s linear infinite}
@keyframes vb-skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ══ WhatsApp-style bubble shape, tails, gaps, list rows, typing ═══════ */
/* list rows: square, full-width band, no coral accent */
#chat-entries{padding:0}
#chat-entries li{border-radius:0;margin:0;padding:.62rem .8rem}
#chat-entries li:hover{background:color-mix(in srgb,var(--vb-ink) 5%,transparent)}
#chat-entries li.active{background:color-mix(in srgb,var(--vb-ink) 9%,transparent);box-shadow:none}
#chat-entries li.active:hover{background:color-mix(in srgb,var(--vb-ink) 12%,transparent)}

/* gaps: 4px within a group, 12px between senders */
#chat-messages{gap:4px}
#chat-messages .msg{position:relative;border-radius:8px;padding:7px 11px;font-size:var(--vb-type-px-15-5);line-height:1.36}
#chat-messages .msg.group-start{margin-top:12px}
#chat-messages .msg.tail{border-bottom-left-radius:8px;border-bottom-right-radius:8px}
#chat-messages .msg.agent:not(.group-start){border-top-left-radius:8px}
#chat-messages .msg.user:not(.group-start){border-top-right-radius:8px}

/* WhatsApp tail: first bubble of each group, square corner + curved notch */
#chat-messages .msg.agent{--tail-color:var(--vb-bubble-in)}
#chat-messages .msg.user{--tail-color:var(--vb-bubble-out)}
#chat-messages .msg.group-start.agent{border-top-left-radius:0}
#chat-messages .msg.group-start.user{border-top-right-radius:0}
#chat-messages .msg.group-start.agent::before,
#chat-messages .msg.group-start.user::before{content:'';position:absolute;top:0;width:8px;height:13px;background:var(--tail-color);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath fill='white' d='M8 0H0c0 5.2 1.7 8.4 8 13V0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath fill='white' d='M8 0H0c0 5.2 1.7 8.4 8 13V0z'/%3E%3C/svg%3E") center/contain no-repeat}
#chat-messages .msg.group-start.agent::before{left:-8px}
#chat-messages .msg.group-start.user::before{right:-8px;transform:scaleX(-1)}

/* time + ticks inside the bubble, bottom-right, reserved by an inline spacer */
#chat-messages .msg .meta{position:absolute;right:9px;bottom:5px;float:none;display:inline-flex;align-items:center;gap:.25rem;margin:0;width:auto;font-size:var(--vb-type-px-11);line-height:1;justify-content:flex-end}
.meta-spacer{display:inline-block;width:4.9rem;height:1px;vertical-align:baseline}
#chat-messages .msg.user .meta-spacer{width:4.9rem}

/* typing: tiny incoming bubble with the avatar in the gutter */
#chat-messages .msg.processing{margin-left:28px;min-height:34px;height:34px;padding:0 8px;border-radius:8px;border-top-left-radius:0;display:flex;align-items:center;gap:8px;background:var(--vb-bubble-in)}
#chat-messages .msg.processing .typing-dots{display:flex;align-items:center;height:28px;line-height:0}
#chat-messages .msg.processing .tv-button{align-self:center;display:grid;place-items:center;flex:none;width:28px;height:28px;min-width:28px;min-height:28px;margin:0;padding:0;line-height:0;vertical-align:middle}
#chat-messages .msg.processing .tv-button svg{display:block;width:16px;height:16px;margin:0}
#chat-messages .msg.processing .processing-mascot{display:none}
#chat-messages .msg.processing .msg-avatar{left:-28px;bottom:0;width:24px;height:24px}
#chat-messages .msg.processing::before{content:'';position:absolute;top:0;left:-8px;width:8px;height:13px;background:var(--vb-bubble-in);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath fill='white' d='M8 0H0c0 5.2 1.7 8.4 8 13V0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath fill='white' d='M8 0H0c0 5.2 1.7 8.4 8 13V0z'/%3E%3C/svg%3E") center/contain no-repeat}
#chat-messages .msg.processing .typing-dots span{width:.5rem;height:.5rem}
#chat-messages .msg .meta .ticks svg{width:13px;height:13px}
@media(min-width:601px){
 #chat-messages .msg{padding:7px 12px}
}

#chat-messages .msg.tail,#chat-messages .msg.tail.agent,#chat-messages .msg.tail.user{border-bottom-left-radius:8px;border-bottom-right-radius:8px}
#chat-messages .msg.agent:not(.group-start){border-top-left-radius:8px}
#chat-messages .msg.user:not(.group-start){border-top-right-radius:8px}
#chat-messages .msg.agent.group-start{border-top-left-radius:0}
#chat-messages .msg.user.group-start{border-top-right-radius:0}

.meta-spacer{width:6rem}
#chat-messages .msg .meta{right:10px;bottom:5px}

/* meta drops to its own line when it cannot share the last line: never overlaps */
.meta-spacer{display:none}
#chat-messages .msg .meta{position:static;display:flex;justify-content:flex-end;width:100%;margin:.18rem 0 0;float:none;right:auto;bottom:auto}

/* outgoing tail: user group-start already handled; typing dots muted; gaps */
#chat-messages .msg.processing .typing-dots span{background:var(--vb-ink-faint);opacity:.85}
#chat-messages .msg.agent:not(.note)+.msg.agent:not(.note),
#chat-messages .msg.user+.msg.user{margin-top:0}
#chat-messages{gap:4px}
#chat-messages .msg.group-start{margin-top:12px}
#chat-messages .msg.group-start.agent::before{left:-8px;right:auto;transform:none}
#chat-messages .msg.group-start.user::before{right:-8px;left:auto;transform:scaleX(-1)}

/* takeover: header copy becomes screen-reader-only while the inline notice shows */
#takeover-status.is-error{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;color:inherit}

/* search empty state sits under the filter */
#chat-list-empty{margin-top:.6rem}

/* ══ compact usage rows ═════════════════════════════════════════════════ */
#usage-list{display:flex;flex-direction:column;gap:0;padding:0}
.usage-profile{background:none;border:0;border-radius:0;padding:0}
.usage-profile+.usage-profile{border-top:1px solid var(--vb-line)}
.usage-profile-head{display:flex;align-items:center;gap:.55rem;padding:.55rem .1rem .3rem}
.usage-logo{width:1rem;height:1rem;flex:none;display:grid;place-items:center}
.usage-logo img{width:1rem;height:1rem;display:block}
.usage-logo-letter{font-weight:800;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78)}
.usage-profile-head strong{font-size:var(--vb-type-rem-0-9);font-weight:700;color:var(--vb-ink)}
.usage-checked{margin-left:auto;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-72);white-space:nowrap}
.usage-row{display:flex;align-items:center;gap:.7rem;min-height:28px;padding:.12rem .1rem}
.usage-row-label{flex:0 0 38%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78)}
.usage-bar{flex:1 1 auto;height:4px;border-radius:var(--r-pill);background:var(--vb-line);overflow:hidden}
.usage-bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--vb-ok)}
.usage-row[data-level="warn"] .usage-bar i{background:var(--vb-warn)}
.usage-row[data-level="low"] .usage-bar i{background:var(--vb-danger)}
.usage-row-value{flex:0 0 auto;min-width:4.4rem;text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:var(--vb-ink);font-size:var(--vb-type-rem-0-8)}
.usage-row-value.low{color:var(--vb-danger-text)}
.usage-profile>p{margin:.25rem .1rem;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-74)}
.usage-notice{color:var(--vb-danger-text);font-size:var(--vb-type-rem-0-76);margin:.3rem .1rem}
#usage-modal .usage-card{padding:.95rem 1.05rem 1.1rem}
#usage-modal header{padding:0 0 .5rem}
#usage-add-profile{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:0 .6rem;border:1px solid var(--vb-line);border-radius:var(--r-control);background:var(--vb-surface-2);color:var(--vb-ink);font-size:var(--vb-type-rem-0-78);font-weight:600;text-decoration:none;white-space:nowrap}
#usage-add-profile:hover{background:var(--vb-line)}
#usage-modal .hint{margin:.15rem 0 .5rem;font-size:var(--vb-type-rem-0-76)}
#usage-modal #usage-list{max-height:min(64vh,34rem);overflow:auto}

/* manage usage dialog: same compact rows */
.workspace-usage-profile{border:0;border-radius:0;background:none;padding:0;margin:0}
.workspace-usage-profile+.workspace-usage-profile{border-top:1px solid var(--vb-line)}
.workspace-usage-profile h3{margin:.55rem 0 .25rem;font-size:var(--vb-type-rem-0-9)}
.workspace-usage-window{display:flex;align-items:center;gap:.7rem;min-height:28px}
.workspace-usage-window .usage-bar{flex:1 1 auto}
.workspace-usage-window>span{flex:0 0 38%;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-usage-window>strong{flex:0 0 auto;min-width:4.4rem;text-align:right;font-variant-numeric:tabular-nums;font-weight:650;font-size:var(--vb-type-rem-0-8)}
.workspace-usage-window>p{margin:.2rem .1rem;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-74)}

/* tighter gap between the intro and the first usage profile */
#usage-status:empty{display:none}
#usage-list{margin-top:0}
.usage-profile:first-child .usage-profile-head{padding-top:.15rem}
#usage-modal .hint{margin:.1rem 0 .35rem}

/* ══ unified modal pattern ══════════════════════════════════════════════ */
.modal .card,.sheet-card,.commands-card,.roles-card,.role-editor-card,.menu-card,#new-box-card,#delete-box-card,#takeover-card,#media-viewer-card,.model-picker-dialog{
  background:var(--vb-elevated);border:1px solid var(--vb-line);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg);padding:1rem;overflow:hidden
}
@media(min-width:641px){
 :is(.sheet-card,.modal .card,#delete-box-card){display:flex;flex-direction:column;max-height:min(90dvh,48rem)}
 :is(.sheet-card,.modal .card,#delete-box-card)>.sheet-scroll-frame{min-height:0;flex:1 1 auto}
 :is(.sheet-card,.modal .card,#delete-box-card)>.sheet-scroll-frame>.sheet-scroll-body{min-height:0;overflow-y:auto}
 .model-picker-dialog[open]{display:flex;flex-direction:column;max-height:min(86dvh,46rem);overflow:hidden}
 .model-picker-dialog>.sheet-scroll-frame,.model-picker-dialog>.sheet-scroll-frame>.sheet-scroll-body{display:contents}
 .model-picker-dialog .model-picker-header,.model-picker-dialog .model-picker-source,.model-picker-dialog .model-picker-effort-label,.model-picker-dialog .model-picker-effort-note,.model-picker-dialog .model-picker-apply{flex:none}
 .model-picker-dialog .model-picker-body{display:grid;grid-template-columns:minmax(9rem,11.5rem) minmax(0,1fr);gap:.9rem;flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
 .model-picker-dialog .model-picker-rail{min-height:0;overflow-y:auto}
 .model-picker-dialog .model-picker-results{display:flex;flex-direction:column;min-height:0;overflow:hidden}
 .model-picker-dialog .model-picker-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
}
.modal .card>header,.sheet-card>header,.commands-card>header,.roles-card>header,.role-editor-card>header,#new-box-card>header,#takeover-card>header,#media-viewer-card>header,.model-picker-dialog>header{
  display:flex;align-items:center;gap:.6rem;padding:0 0 .7rem;margin:0 0 .2rem;border-bottom:1px solid var(--vb-line)
}
.modal .card>header strong,.sheet-card>header strong,.commands-card>header strong,.roles-card>header strong,.role-editor-card>header strong,#new-box-card>header strong,#takeover-card>header strong,#media-viewer-card>header strong,.model-picker-dialog>header strong,#usage-title,#box-instructions-title,#box-credentials-title,#role-editor-title{
  font-size:var(--vb-type-rem-1-06);font-weight:660;color:var(--vb-ink);letter-spacing:-.01em
}
.modal .card>header button,.sheet-card>header button,.commands-card>header button{width:2rem;height:2rem;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-pill);background:var(--vb-surface-2);color:var(--vb-ink);cursor:pointer}
.modal .card>header button:hover,.sheet-card>header button:hover{background:var(--vb-line)}
.modal .card .form-actions,.sheet-card .form-actions,.commands-card .form-actions,.role-editor-card .form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin:1rem 0 0;padding:0}
.modal .card .form-actions .primary,.sheet-card .form-actions .primary,.role-editor-card .form-actions .primary{padding:.55rem 1rem;border:1px solid var(--vb-ink);border-radius:var(--r-control);background:var(--vb-ink);color:var(--vb-bg);font-weight:650;cursor:pointer}
.modal .card .form-actions .linkbtn,.sheet-card .form-actions .linkbtn,.role-editor-card .form-actions .linkbtn{order:-1;padding:.55rem 1rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);font-weight:600;cursor:pointer}
/* flat sections: no nested grey cards inside modals */
.sheet-card .group,.sheet-card .role-capabilities,.sheet-card .role-capability,.sheet-card .provider-capacity,.modal .card .group,.modal .card .role-capability,.role-editor-card .role-capability,.ai-settings-dialog .ai-settings-card{
  background:transparent;border:0;border-radius:0;box-shadow:none;padding:0
}
.sheet-card .group>legend,.modal .card fieldset>legend,.role-editor-card legend{position:static;background:none;border:0;padding:0;margin:0 0 .5rem;font-size:var(--vb-type-rem-0-72);font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--vb-ink-faint);width:auto;float:none}
.sheet-card label,.modal .card label,.role-editor-card label{font-size:var(--vb-type-rem-0-8);color:var(--vb-ink-soft)}
.sheet-card input:not([type=checkbox]):not([type=radio]),.sheet-card select,.sheet-card textarea,.modal .card input:not([type=checkbox]):not([type=radio]),.modal .card select,.modal .card textarea{background:var(--vb-bg-soft);border:1px solid var(--vb-line-strong);border-radius:var(--r-control);color:var(--vb-ink);padding:.55rem .7rem}
.modal .card details,.sheet-card details{border-top:1px solid var(--vb-line);padding-top:.5rem}
.modal .card details:first-of-type,.sheet-card details:first-of-type{border-top:0}
/* mobile bottom sheet with grab handle */
@media(max-width:640px){
 .sheet .sheet-card{border-radius:var(--r-surface) var(--r-surface) 0 0}
 .sheet-card::before,.roles-card::before,.commands-card::before{content:'';display:block;width:2.4rem;height:.28rem;margin:.1rem auto .2rem;border-radius:var(--r-pill);background:var(--vb-line-strong)}
}

/* commands sheet: light tokens */
.commands-card{background:var(--vb-elevated);border:1px solid var(--vb-line);border-radius:var(--r-surface)}
.commands-card .commands-header{border-bottom:1px solid var(--vb-line);padding:.9rem 1.05rem}
.commands-card .commands-header p{color:var(--vb-ink-faint)}
.commands-card .commands-list-pane{border-right:1px solid var(--vb-line);padding:.9rem}
.commands-card .commands-list{padding:0}
.commands-card .command-row,.commands-card .commands-list button{background:var(--vb-bg-soft);border:1px solid transparent;border-radius:var(--r-control);color:var(--vb-ink)}
.commands-card .command-row:hover,.commands-card .commands-list button:hover{background:var(--vb-surface-2)}
.commands-card .command-row.on{background:var(--vb-surface-2);border-color:var(--vb-line-strong)}
.commands-card .command-row strong{color:var(--vb-accent-text)}
.commands-card .command-row small,.commands-card .commands-list-heading span{color:var(--vb-ink-faint)}
.commands-card .command-editor-pane{padding:1rem}
.commands-card #command-form textarea{background:var(--vb-bg-soft);border:1px solid var(--vb-line-strong);color:var(--vb-ink);border-radius:var(--r-control)}
.commands-card #command-form .command-name-field{border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-bg-soft)}
.commands-card #command-form .command-name-field input{color:var(--vb-ink)}
.commands-card #command-form .primary{background:var(--vb-ink);border-color:var(--vb-ink);color:var(--vb-bg);border-radius:var(--r-control);padding:.5rem .9rem}
.commands-card #command-form .linkbtn{background:var(--vb-surface);border:1px solid var(--vb-line-strong);color:var(--vb-ink);border-radius:var(--r-control)}
.commands-card .command-help{background:var(--vb-bg-soft);color:var(--vb-ink-soft);border:1px solid var(--vb-line)}

/* primary is black, never coral (modal scope) */
.modal .card .primary,.sheet-card .primary,.commands-card .primary,.roles-card .primary,.role-editor-card .primary{background:var(--vb-ink);border-color:var(--vb-ink);color:var(--vb-bg)}
.vb-secondary{padding:.5rem .85rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);font-weight:600;cursor:pointer}
.vb-secondary:hover{background:var(--vb-surface-2)}
.linkbtn{background:var(--vb-surface);border:1px solid var(--vb-line-strong);color:var(--vb-ink);border-radius:var(--r-control)}

/* instruction presets */
#presets-modal .preset-list{display:flex;flex-direction:column;gap:0;margin:.2rem 0 .8rem}
#presets-modal .preset-row{display:flex;align-items:center;gap:1rem;padding:.7rem .1rem;border-bottom:1px solid var(--vb-line)}
#presets-modal .preset-row:first-child{border-top:1px solid var(--vb-line)}
#presets-modal .preset-main{flex:1;min-width:0}
#presets-modal .preset-title{display:flex;align-items:center;gap:.5rem}
#presets-modal .preset-title strong{font-size:var(--vb-type-rem-0-9);color:var(--vb-ink)}
#presets-modal .preset-title small{margin-left:.2rem;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-72)}
#presets-modal .pill{display:inline-flex;padding:.08rem .42rem;border-radius:var(--r-pill);background:var(--vb-bg-soft);border:1px solid var(--vb-line);color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-64);font-weight:700}
#presets-modal .preset-actions{display:flex;align-items:center;gap:.4rem;flex:none}
#presets-modal .row-overflow{position:relative}
#presets-modal .row-overflow summary{list-style:none;display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);cursor:pointer}
#presets-modal .row-overflow summary::-webkit-details-marker,#presets-modal .row-overflow summary::marker{display:none;content:''}
#presets-modal .row-overflow summary svg{width:1rem;height:1rem}
#presets-modal .row-overflow-menu{position:absolute;top:calc(100% + 5px);right:0;z-index:30;display:none;flex-direction:column;min-width:11rem;padding:.3rem;background:var(--vb-elevated);border:1px solid var(--vb-line);border-radius:var(--r-surface);box-shadow:var(--vb-shadow-lg)}
#presets-modal .row-overflow[open] .row-overflow-menu{display:flex}
#presets-modal .row-overflow-menu button{display:flex;width:100%;padding:.5rem .6rem;border:0;background:none;border-radius:var(--r-control);color:var(--vb-ink);font:inherit;font-size:var(--vb-type-rem-0-8);text-align:left;cursor:pointer}
#presets-modal .row-overflow-menu button:hover{background:var(--vb-surface-2)}
#presets-modal .row-overflow-menu button.danger{color:var(--vb-danger-text)}
#presets-modal .preset-editor{border:0;border-top:1px solid var(--vb-line);margin:.6rem 0 0;padding:.7rem 0 0}
#presets-modal .preset-editor>summary{cursor:pointer;font-weight:650;color:var(--vb-ink);font-size:var(--vb-type-rem-0-88);padding:.2rem 0}
#presets-modal .preset-field{display:grid;gap:.3rem;width:100%;margin:.6rem 0 0;font-weight:600;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78)}
#presets-modal .preset-field input,#presets-modal .preset-field textarea{width:100%;background:var(--vb-bg-soft);border:1px solid var(--vb-line-strong);border-radius:var(--r-control);color:var(--vb-ink);padding:.55rem .7rem}
#presets-modal .preset-field textarea{font-family:var(--vb-mono);min-height:9rem;resize:vertical}

/* agent permissions list */
#roles-modal .role-toolbar{margin:.3rem 0 .6rem}
#roles-modal .role-perm-list{display:flex;flex-direction:column}
#roles-modal .role-perm-row{padding:.75rem .1rem;border-bottom:1px solid var(--vb-line)}
#roles-modal .role-perm-head{display:flex;align-items:center;gap:.75rem}
#roles-modal .role-box-identity{display:flex;align-items:center;gap:.65rem;flex:1;min-width:0}
#roles-modal .role-box-mark{position:relative;width:2.4rem;height:2.4rem;flex:none}
#roles-modal .role-box-mascot{position:absolute;inset:0}
#roles-modal .role-box-mascot svg{width:100%;height:100%;display:block}
#roles-modal .role-assignment-identity strong{font-size:var(--vb-type-rem-0-92);color:var(--vb-ink)}
#roles-modal .role-box-meta span{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-76)}
#roles-modal .role-perm-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.55rem 0 0 3rem}
#roles-modal .role-perm-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;border:1px solid var(--vb-line);border-radius:var(--r-pill);background:var(--vb-bg-soft);color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-72);font-weight:600}
#roles-modal .role-perm-chip b{font-weight:800}
#roles-modal .role-perm-chip[data-state="on"] b{color:var(--vb-ok-text)}
#roles-modal .role-perm-chip[data-state="partial"] b{color:var(--vb-warn-text)}
#roles-modal .role-perm-chip[data-state="off"] b{color:var(--vb-ink-faint)}
#roles-modal .role-perm-chip[data-state="unknown"]{opacity:.7}
#role-status{display:flex;align-items:center;gap:.5rem}
.role-status-note{color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-78)}

/* commands nits */
.commands-card .command-editor-heading span{display:none}
.commands-card #command-filter{background:var(--vb-bg-soft);border:1px solid var(--vb-line-strong);color:var(--vb-ink);border-radius:var(--r-control)}
.commands-card #command-filter:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--vb-ink) 35%,transparent)}
.commands-card #command-list .command-row,.commands-card #command-list button{background:none;border:0;border-bottom:1px solid var(--vb-line);border-radius:0;color:var(--vb-ink)}
.commands-card #command-list .command-row.on,.commands-card #command-list button.on{background:var(--vb-bg-soft)}
.commands-card .command-row strong{font-family:var(--vb-mono);color:var(--vb-ink)}
.commands-card .command-row small{color:var(--vb-ink-faint)}
.commands-card .command-tip,.commands-card #command-editor-help{background:none;border:0;padding:0;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-76)}
.commands-card #command-use{background:var(--vb-surface);border:1px solid var(--vb-line-strong);color:var(--vb-ink);border-radius:var(--r-control);padding:.5rem .85rem;font-weight:600}
.commands-card #command-delete{background:none;border:0;color:var(--vb-danger-text);font-weight:600}
.commands-card #command-actions,.commands-card .command-actions{display:flex;align-items:center;gap:.5rem;justify-content:flex-end}
.commands-card #command-delete{margin-right:auto}

/* new box header padding + drop empty preview rows */
#new-box-card>header{padding:.95rem 1.2rem}
#new-box-card .preview-row:first-child{border-top:0}

#presets-modal .row-overflow summary::before{display:none}
#new-box-card #create-box input[name="agentModel"],#new-box-card .model-picker-open{background:var(--vb-bg-soft);background-image:none;box-shadow:none;border:1px solid var(--vb-line-strong);color:var(--vb-ink)}

/* batch-2 nits */
#presets-modal .preset-row{padding:.5rem .1rem;min-height:44px}
#presets-modal .form-actions{display:flex;align-items:center;justify-content:flex-end;gap:.45rem;margin-top:.8rem}
#presets-modal .form-actions .linkbtn,#presets-modal .form-actions .primary{padding:.45rem .8rem;font-size:var(--vb-type-rem-0-8);white-space:nowrap;line-height:1.1}
#roles-modal .role-box-mark::before{content:'';position:absolute;inset:0;border-radius:var(--r-control);background:linear-gradient(135deg,var(--vb-swatch-26313f),var(--vb-swatch-0e1116));border:1px solid var(--vb-line)}
#roles-modal .role-box-mascot{inset:auto -.22rem -.22rem auto;width:56%;height:56%}
#roles-modal .role-perm-unavailable{margin:.4rem 0 0 3rem;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-76)}
#roles-modal #role-box-search{background-color:var(--vb-bg-soft);border:1px solid var(--vb-line-strong);border-radius:var(--r-control);padding-left:2.2rem}
.commands-card .commands-header{padding:.8rem 1rem}
.commands-card .commands-header strong{font-size:var(--vb-type-rem-1-06);font-weight:660}
#command-new{padding:.5rem .85rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);font-weight:600;cursor:pointer}
.commands-card .command-actions{display:flex;align-items:center;gap:.5rem;justify-content:flex-end}
.commands-card #command-delete{order:-1;margin-right:auto}
.modal .card>header button,.sheet-card>header button,.commands-card>header button,.roles-card>header button,.role-editor-card>header button,#new-box-card>header button,#takeover-card>header button,#media-viewer-card>header button,.model-picker-dialog>header button{background:none;border:0;color:var(--vb-ink-soft);width:2rem;height:2rem;border-radius:var(--r-control)}
.modal .card>header button:hover,.sheet-card>header button:hover,.commands-card>header button:hover,.roles-card>header button:hover,#new-box-card>header button:hover,#takeover-card>header button:hover{background:var(--vb-surface-2);color:var(--vb-ink)}

/* two-column instruction presets */
.presets-card{width:min(60rem,calc(100% - 2rem));height:min(38rem,calc(100dvh - 2rem));display:flex;flex-direction:column;padding:1rem}
.presets-layout{display:grid;grid-template-columns:minmax(15rem,36%) minmax(0,1fr);flex:1;min-height:0;margin-top:.6rem;border-top:1px solid var(--vb-line)}
.presets-layout .commands-list-pane{border-right:1px solid var(--vb-line);display:flex;flex-direction:column;min-height:0;padding:.85rem .85rem .85rem 0}
#preset-list{flex:1;overflow:auto;margin:.4rem 0}
#preset-count{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-71)}
#preset-filter{background:var(--vb-bg-soft);border:1px solid var(--vb-line-strong);border-radius:var(--r-control);color:var(--vb-ink);padding:.5rem .6rem .5rem 2.2rem}
.preset-row{display:flex;align-items:center;width:100%;padding:.5rem .55rem;border:0;border-radius:var(--r-control);background:none;color:var(--vb-ink);text-align:left;cursor:pointer}
.preset-row:hover{background:var(--vb-surface-2)}
.preset-row.on{background:var(--vb-surface-2)}
.preset-row .preset-main{display:grid;gap:.1rem}
.preset-row strong{font-family:var(--vb-mono);font-weight:650;font-size:var(--vb-type-rem-0-86)}
.preset-row small{color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-72)}
.preset-row .pill{margin-left:.4rem}
.preset-editor{display:flex;flex-direction:column;min-height:0;padding:.85rem 0 .2rem .95rem;gap:.5rem}
.preset-editor .command-editor-heading h3{font-size:var(--vb-type-rem-1-06);font-weight:660;margin:0}
.preset-markdown-field{flex:1;min-height:0;display:flex;flex-direction:column}
.preset-markdown-field textarea{flex:1;min-height:11rem}
#preset-preview{flex:1;overflow:auto;margin:0}
#preset-new-bottom{margin-top:.5rem;width:100%}
.preset-back{display:none}
@media(max-width:760px){
 .presets-card{width:100%;height:100dvh;max-height:none;border-radius:0}
 .presets-layout{grid-template-columns:minmax(0,1fr)}
 .presets-card .preset-editor{display:none}
 .presets-card.show-editor .commands-list-pane{display:none}
 .presets-card.show-editor .preset-editor{display:flex}
 .preset-back{display:inline-flex;align-self:flex-start;background:none;border:0;color:var(--vb-ink-soft);font-weight:600;cursor:pointer;padding:.2rem 0}
}
.presets-card .command-editor-heading{display:block;text-align:left;justify-content:flex-start}
.presets-card .command-editor-heading h3{text-align:left}

/* presets nits */
.presets-layout{border-top:0}
.presets-card .command-editor-heading{display:block;text-align:left}
#preset-filter{background-color:var(--vb-bg-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23686872' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:.6rem center;background-size:1.05rem}
#roles-modal #role-box-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23686872' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:.6rem center;background-size:1.05rem}

/* box↔box: agent-style bubbles, left/right by sender */
#chat-messages .msg.pair-left{align-self:flex-start}
#chat-messages .msg.pair-right{align-self:flex-end}
#chat-messages .msg.pair-left .msg-avatar{margin-right:.45rem}
#chat-messages .msg.pair-right .msg-avatar{order:2;margin-left:.45rem}

/* ══ merge-regression fixes (rebased) ══════════════════════════════════ */

/* 1 · sidebar names ink */
#chat-entries .chat-meta .name,#chat-entries .name{color:var(--vb-ink)}
#chat-entries .chat-meta .preview{color:var(--vb-ink-soft)}
#chat-entries .chat-meta time{color:var(--vb-ink-faint)}
/* 2 · group header like a section label */
#chat-entries li.chat-folder{display:flex;align-items:center;gap:4px;min-height:34px;background:none;border:0;border-bottom:1px solid var(--vb-line);border-radius:0;margin:0;padding:0 8px}
#chat-entries li.chat-folder:hover{background:none}
.chat-folder-toggle{padding:6px 0;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-63);font-weight:750;letter-spacing:.09em;text-transform:uppercase;gap:.45rem}
.chat-folder-arrow{color:var(--vb-ink-faint);width:.75rem}
.chat-folder-menu{color:var(--vb-ink-faint)}

/* Sidebar mute and section controls share the same quiet badge treatment. */
#chat-entries .mute-bell{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--vb-ink-soft)}
#chat-entries .mute-bell[hidden]{display:none}
#chat-entries .mute-bell svg{width:14px;height:14px}
#chat-entries .row1 .mute-bell{margin-left:4px}
#chat-entries .row1 .name{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-entries .row1 time{margin-left:auto}
#chat-entries .unread.muted{background:var(--vb-ink-faint);color:var(--vb-bg)}
#chat-entries .conversation-group,#chat-entries .conversation-divider{display:flex;align-items:center;gap:4px;padding:0 8px;margin:0;min-height:34px;border-bottom:1px solid var(--vb-line)}
#chat-entries .section-toggle{display:flex;align-items:center;gap:6px;min-width:0;flex:1;padding:6px 0;background:none;border:0;color:var(--vb-ink-faint);font:inherit;font-weight:750;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer}
#chat-entries .section-toggle .unread,#chat-entries .chat-folder-toggle .unread{margin-left:auto}
#chat-entries .header-menu-button{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-control);background:none;color:var(--vb-ink-soft);font:600 var(--vb-type-px-18)/1 Arial,sans-serif;cursor:pointer}
#chat-entries .header-menu-button:hover{background:var(--vb-surface-2)}
@media(max-width:600px){#chat-entries .header-menu-button{width:44px;height:44px}}
#chat-entries .chat-folder-toggle{min-width:0;flex:1}
#chat-entries .chat-folder .mute-bell{margin-left:2px}
#chat-entries li.chat-folder,#chat-entries li.conversation-group,#chat-entries li.conversation-divider{user-select:none;-webkit-user-select:none;touch-action:pan-y;transition:transform .15s var(--vb-ease)}
#chat-entries .chat-pin-drop{display:none;min-height:42px;margin:4px 8px 8px;padding:8px 12px;border:1px dashed var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface-2);color:var(--vb-ink-soft);font-size:var(--vb-type-px-13);font-weight:650}
#chat-entries.chat-drag-active .chat-pin-drop{display:flex}
#chat-entries .chat-pin-drop.drop-target{border-color:var(--vb-ink);background:var(--vb-surface-2)}
#chat-entries li.drop-target{position:relative;z-index:9;outline-color:var(--vb-ink)}
#chat-entries .chat-row-pin{display:inline-flex;flex:none;color:var(--vb-ink-soft)}
#chat-entries .chat-row-pin[hidden]{display:none}
#chat-entries .chat-row-pin svg{width:14px;height:14px}
#chat-entries li.drag-armed{background:var(--vb-surface-2)}
#chat-entries li.touch-chat-dragging{position:relative;z-index:8;background:var(--vb-surface);pointer-events:none;transition:none;box-shadow:var(--vb-shadow-md)}
#chat-entries li.pressing{transform:scale(.985)}
#row-menu button:disabled{opacity:.55;cursor:default}
@media(max-width:600px){
 #row-menu.touch-mode{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-height:min(70dvh,540px);overflow-y:auto;border-radius:var(--r-bubble);padding:10px;background:var(--vb-elevated)}
 #row-menu.touch-mode .row-menu-heading{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:43px;padding:0 8px 8px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-13);font-weight:600}
#row-menu.touch-mode .row-menu-handle{display:block;width:36px;height:4px;border-radius:var(--r-pill);background:var(--vb-line-strong)}
 #row-menu.touch-mode button{min-height:44px;font-size:var(--vb-type-px-14)}
 #row-menu.touch-mode .row-submenu{margin:0 0 6px 12px;padding-left:8px;border-left:1px solid var(--vb-line)}
}
/* 3 · pair rows: two overlapping tiles (screen look) */
#chat-entries .pair-avatar{position:relative;width:2.7rem;height:2.7rem;background:none;color:transparent;font-size:0;line-height:0}
#chat-entries .pair-avatar::before,#chat-entries .pair-avatar::after{content:'';position:absolute;width:1.85rem;height:1.85rem;border-radius:var(--r-control);border:1px solid var(--vb-line);box-shadow:var(--vb-shadow)}
#chat-entries .pair-avatar::before{left:0;top:0;background:linear-gradient(135deg,var(--vb-swatch-26313f),var(--vb-swatch-0e1116))}
#chat-entries .pair-avatar::after{right:0;bottom:0;background:linear-gradient(135deg,var(--vb-accent),var(--vb-accent-hover))}
/* The details hero keeps the live desktop thumbnail and its mascot. */
#chat-header-avatar .pair-avatar-stack{width:3.5rem;height:2.7rem}
#chat-header-avatar .pair-avatar-stack .avatar{width:2.3rem;height:1.45rem}
.chat-header-identity #chat-header-avatar:has(.pair-avatar-stack){width:4rem;min-width:4rem;height:2.7rem}
#chat-messages .msg.processing .processing-avatar{display:block}
/* 4 · MCP activity quiet pill */
.mcp-call-toggle{color:var(--vb-ink-faint);font-weight:650}
.mcp-call-toggle::before,.mcp-call-toggle::after{background:var(--vb-line)}
.mcp-call-toggle:hover,.mcp-call-toggle:focus-visible{color:var(--vb-ink)}
.mcp-call-count{background:var(--vb-bg-soft);border:1px solid var(--vb-line);color:var(--vb-ink-soft)}
.mcp-call-failures{color:var(--vb-warn-text)}
/* 5 · reserved corner for the action chevron so it never overlaps text/tail */
#chat-messages .msg{position:relative}
#chat-messages .msg:has(.msg-actions){padding-top:1.05rem}
#chat-messages .msg .msg-actions{position:absolute;top:.2rem;right:.45rem;margin:0;z-index:2}
#chat-messages .msg.user .msg-actions{right:.5rem}
/* 6 · header subline muted; dot carries colour */
.chat-header-identity #chat-header-state{color:var(--vb-ink-soft)}
.chat-header-identity #chat-header-state::before{display:inline-block;content:'';width:.45rem;height:.45rem;border-radius:var(--r-pill);background:var(--vb-ink-faint);flex:none}
.chat-header-identity #chat-header-state.running::before{background:var(--vb-ok)}
/* 7 · + Group is a quiet secondary */
#new-chat-group{background:var(--vb-surface);border:1px solid var(--vb-line-strong);color:var(--vb-ink);border-radius:var(--r-control);font-weight:600}
#new-chat-group:hover{background:var(--vb-surface-2)}
.chat-header-identity #chat-header-state,.chat-header-identity #chat-header-state *{color:var(--vb-ink-soft)}
.chat-header-identity #chat-header-state .running::after{content:none}

/* critic batch: contrast, pair labels, code blocks, usage, commands */

@media(prefers-color-scheme:dark){}
/* pair sender label + time contrast */
.msg.pair-msg .agent-origin{color:var(--vb-ink);font-weight:680}
.msg.pair-msg .meta,.msg.readonly .meta{color:var(--vb-ink-faint)}
/* code blocks never overflow the bubble; edge fade when scrollable */
#chat-messages .text pre{overflow-x:auto;max-width:100%;position:relative}
#chat-messages .msg{overflow-wrap:anywhere}
#chat-messages .text pre{background-image:linear-gradient(90deg,transparent,var(--vb-swatch-1e1f2200) 0),linear-gradient(270deg,color-mix(in srgb,var(--vb-ink) 12%,transparent),transparent);background-repeat:no-repeat;background-position:right center;background-size:2rem 100%}
/* usage: missing data is muted text, no empty track */
.usage-bar[hidden]{display:none}
.usage-row-value.muted{color:var(--vb-ink-faint);font-weight:500}
/* commands selected row fill + mono */
#command-list .command-row[aria-selected="true"]{background:var(--vb-bg-soft)}

/* user-flagged: resizer hairline + topbar surface */
#chat-top{background:var(--vb-bg);border-bottom:1px solid var(--vb-line)}
#chat-resizer{background:transparent;border:0}
#chat-resizer::before{opacity:0;transition:opacity .15s var(--vb-ease)}
#chat-resizer:hover::before,#chat-resizer:focus-visible::before{opacity:1}
#chat-list{border-right:1px solid var(--vb-line)}

/* pair real avatars + code copy/fade */
#chat-entries .pair-avatar.pair-avatar-stack{position:relative;width:2.7rem;height:2.7rem;flex:none;display:block;background:none}
#chat-entries .pair-avatar.pair-avatar-stack::before,#chat-entries .pair-avatar.pair-avatar-stack::after{content:none}
#chat-entries .pair-avatar-stack .avatar{position:absolute;width:1.85rem;height:1.85rem;border-radius:var(--r-control);background:var(--vb-bg-soft);border:1px solid var(--vb-line);overflow:visible}
#chat-entries .pair-avatar-stack .avatar:first-child{left:0;top:0;z-index:1}
#chat-entries .pair-avatar-stack .avatar:nth-child(2){right:0;bottom:0;z-index:2}
#chat-entries .pair-avatar-stack .avatar .dot{width:.5rem;height:.5rem;border-width:1px}
#chat-messages .text pre,#thread-messages .text pre{position:relative;background:var(--vb-code-surface);overflow-x:auto;max-width:100%}
#chat-messages .text pre::after,#thread-messages .text pre::after{content:"";position:absolute;top:0;right:0;width:1.4rem;height:100%;pointer-events:none;background:linear-gradient(90deg,transparent,var(--vb-code-surface))}
#chat-messages .text pre .code-copy{position:absolute;top:.3rem;right:.3rem;width:1.6rem;height:1.6rem;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--vb-swatch-fff) 22%,transparent);border-radius:var(--r-control);background:color-mix(in srgb,var(--vb-swatch-000) 30%,transparent);color:var(--vb-swatch-dbdee1);cursor:pointer;opacity:0;transition:opacity .15s var(--vb-ease)}
#chat-messages .text pre:hover .code-copy,#chat-messages .text pre .code-copy:focus-visible{opacity:1}
#chat-messages .text pre .code-copy svg{width:.95rem;height:.95rem}
#chat-messages .text pre .code-copy.copied{color:var(--vb-ok-text);border-color:var(--vb-ok)}

/* ══ item 1 · bubble meta inline (WhatsApp invisible-spacer) ═════════════ */
/* The spacer reserves exactly the meta width on the last text line; the meta
   is absolutely placed bottom-right. When the spacer cannot fit it wraps to a
   new line, so the meta drops below without ever overlapping the text. */
#chat-messages .msg .meta-spacer{display:inline-block;width:0;height:1px;vertical-align:baseline;max-width:100%}
#chat-messages .msg:not(.meta-block) .meta{position:absolute;right:9px;bottom:5px;left:auto;top:auto;float:none;display:inline-flex;align-items:center;gap:.25rem;width:auto;margin:0;justify-content:flex-end}
#chat-messages .msg.meta-block .meta{position:static;display:flex;justify-content:flex-end;width:100%;margin:.18rem 0 0;float:none;right:auto;bottom:auto;left:auto;top:auto}

/* ══ item 2 · mobile terminal toolbar: scrollable strip + pinned keys ════ */
@media(max-width:760px){
 .workspace-body .terminal-keys{display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;gap:2px;padding:3px;padding-right:0;scrollbar-width:none}
 .workspace-body .terminal-keys::-webkit-scrollbar{display:none}
 .workspace-body .terminal-keys button{flex:0 0 auto}
 .workspace-body .terminal-keys .term-key-pinned{position:sticky;z-index:3;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;background:var(--vb-bg-soft);color:var(--vb-ink)}
 .workspace-body .terminal-keys .term-key-pinned svg{width:1.15rem;height:1.15rem}
 .workspace-body .terminal-keys .term-key-pinned:not(:last-child){right:44px}
 .workspace-body .terminal-keys .term-key-pinned:last-child{right:0}
 .workspace-body .terminal-keys .term-key-pinned:not(:last-child)::before{content:'';position:absolute;top:0;bottom:0;left:-10px;width:10px;background:linear-gradient(90deg,transparent,var(--vb-bg-soft));pointer-events:none}
 .workspace-body .terminal-keys .term-key-pinned:not(:last-child)::after{content:'';position:absolute;top:25%;bottom:25%;right:-1px;width:1px;background:var(--vb-line);pointer-events:none}
}

/* ══ item 3 · menu sheet ════════════════════════════════════════════════ */
/* Notifications: three columns — icon / label + wrapping description / pill */
#chat-menu-sheet .menu-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.65rem}
#chat-menu-sheet .menu-row .menu-icon{align-self:start;margin-top:.15rem}
#chat-menu-sheet .menu-row-sub{white-space:normal;overflow-wrap:anywhere;display:block}
#chat-menu-sheet .menu-row-slot{display:inline-flex;align-items:center;justify-content:flex-end;gap:.35rem;flex:none;min-width:5.6rem}
#chat-menu-sheet .menu-pill{width:auto;min-width:3.6rem;white-space:nowrap}
#chat-menu-sheet .menu-pill.loading{color:transparent;position:relative}
#chat-menu-sheet .menu-pill.loading::after{content:'';position:absolute;top:50%;left:50%;width:.8rem;height:.8rem;margin:-.4rem 0 0 -.4rem;border:2px solid var(--vb-line-strong);border-top-color:var(--vb-ink-soft);border-radius:var(--r-pill);animation:vb-spin .7s linear infinite}
@keyframes vb-spin{to{transform:rotate(360deg)}}
/* Usage + Log out: ordinary left-aligned rows with an icon column */
#chat-menu-sheet .menu-links>a,#chat-menu-sheet .menu-links>button{display:flex;align-items:center;gap:.6rem;justify-content:flex-start;text-align:left;width:100%}
#chat-menu-sheet .menu-links>.menu-usage{color:var(--vb-ink)}
#chat-menu-sheet .menu-links>.menu-logout{color:var(--vb-danger-text)}
#chat-menu-sheet .menu-links>.menu-logout .menu-icon{color:var(--vb-danger-text)}
/* current destination marked */
#chat-menu-sheet .menu-links a[aria-current="page"]{background:color-mix(in srgb,var(--vb-ink) 8%,transparent);border-color:transparent;color:var(--vb-ink);font-weight:650}
#chat-menu-sheet .menu-links a[aria-current="page"] .menu-icon{color:var(--vb-ink)}

/* ══ item 4 · grid ══════════════════════════════════════════════════════ */
/* box picker: chevron via an overlay so it themes with the tokens */
.tile-title-field{position:relative;display:flex;flex:1 1 auto;min-width:7rem}
.tile-title-field .tile-title-select{flex:1 1 auto;min-width:0;padding-right:1.9rem}
.tile-title-field::after{content:'';position:absolute;right:.55rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;background:var(--vb-ink-faint);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
/* session field: labelled, hidden while the inventory is empty */
#tiles .tile label.tile-session-field{display:inline-flex;align-items:center;gap:.35rem;flex:0 1 auto;min-width:0;margin:0;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-68);font-weight:650}
.tile-session-label{white-space:nowrap;color:var(--vb-ink-faint)}
.tile-session-field:has(.tile-session-select:empty){display:none}
.tile .tile-session-select{max-width:10rem}
/* empty tile: an "Add a box" placeholder, no idle badge */
.tile.tile-empty{border-style:dashed;border-color:var(--vb-line-strong);background:transparent;box-shadow:none}
.tile.tile-empty .tile-icon-btn,.tile.tile-empty .tile-controls,.tile.tile-empty .tile-session-field,.tile.tile-empty .connection-badge{display:none}
.tile.tile-empty .tile-mark{opacity:.45}
.tile.tile-empty>p[role="status"]{min-height:9rem;display:flex;align-items:center;justify-content:center;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-82)}

/* ══ item 5 · run-time limit copy ═══════════════════════════════════════ */
.run-budget-remaining{margin:.15rem 0 0;color:var(--vb-ink);font-size:var(--vb-type-rem-0-82);font-weight:650;font-variant-numeric:tabular-nums}
.run-budget-remaining[hidden]{display:none}

/* ══ item 6 · manage boxes: collapsed New box ═══════════════════════════ */
#create-card:not([open]){padding-bottom:0}
#create-card:not([open])>.create-card-summary{padding-bottom:1rem}
#create-card[open]>.create-card-summary{border-bottom:1px solid var(--vb-line);margin-bottom:.9rem}
#create-card>.create-card-summary:focus-visible{outline:2px solid color-mix(in srgb,var(--vb-ink) 55%,transparent);outline-offset:2px;border-radius:var(--r-control)}

/* ══ chat sidebar header: Messenger/WhatsApp-style ══════════════════════ */
#chat-list #chat-sidebar-head{display:flex;align-items:center;gap:.5rem;flex:none;padding:.9rem .75rem .35rem}
.chat-sidebar-title{margin:0;padding:0;border:0;font-size:var(--vb-type-px-20);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--vb-ink);flex:1;min-width:0}
.chat-sidebar-actions{display:inline-flex;align-items:center;gap:.2rem;flex:none}
#chat-list #new-box,#chat-list #new-chat-group{
  width:32px;height:32px;min-height:32px;min-width:32px;
  padding:0;flex:none;display:grid;place-items:center;
  background:transparent;border:0;border-radius:var(--r-control);
  color:var(--vb-ink-soft);font-size:0;font-weight:400;cursor:pointer
}
#chat-list #new-box svg,#chat-list #new-chat-group svg{width:1.05rem;height:1.05rem;display:block}
#chat-list #new-box:hover,#chat-list #new-chat-group:hover{background:color-mix(in srgb,var(--vb-ink) 7%,transparent);color:var(--vb-ink)}
#chat-list #new-box:active,#chat-list #new-chat-group:active{transform:scale(.94)}
/* groups are created from the row context menu; keep the trigger in the DOM
   for tests/handlers but visually hidden */
#chat-list #new-chat-group.sr-only{position:absolute;width:1px;height:1px;min-width:1px;min-height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;background:none;color:transparent}
#chat-list #chat-filter-row{
  position:relative;display:flex;align-items:center;gap:.5rem;flex:none;
  margin:0 .75rem .4rem;padding:0 .75rem;height:36px;min-height:36px;
  background:color-mix(in srgb,var(--vb-ink) 6%,transparent);border:1px solid transparent;border-radius:var(--r-pill)
}
#chat-list #chat-filter-row:focus-within{background:var(--vb-surface);border-color:var(--vb-line-strong)}
.chat-search-icon{width:1rem;height:1rem;flex:none;color:var(--vb-ink-faint)}
#chat-list #chat-filter{
  flex:1;min-width:0;height:100%;margin:0;padding:0;
  border:0;background:transparent;border-radius:0;box-shadow:none;
  color:var(--vb-ink);font-size:var(--vb-type-rem-0-86);outline:none
}
#chat-list #chat-filter::placeholder{color:var(--vb-ink-faint)}
#chat-list #chat-filter::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
@media (max-width:899px){
  #chat-list #chat-sidebar-head{padding:.7rem .75rem .25rem}
  #chat-list #chat-filter-row{margin:0 .75rem .35rem}
}

/* ══ item 7 · new box (modal + embedded) ════════════════════════════════ */
/* keep the last field clear of the footer while the body scrolls */
#new-box-card #create-box{padding-bottom:2.4rem}
#create-card #create{padding-bottom:1rem}
.login-none-note{margin:.15rem 0 0;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-74)}
/* chevrons on every new-box select (modal + embedded) */
#new-box-card #create-box select,#create-card #create select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:1rem;
  padding-right:2.1rem
}
.usage-row-value.muted{min-width:0;max-width:11rem;white-space:normal;line-height:1.2}

/* ══ item 8 · dark mode contrast, outgoing chevron, subtle dividers ═════ */
/* secondary text ≥4.5:1, secondary icons ≥3:1 on the theme surfaces */

@media(prefers-color-scheme:dark){}
/* chevron on the (white) outgoing bubble needs a dark icon in dark mode */

@media(prefers-color-scheme:dark){

}
.msg.user .msg-more{color:var(--vb-bubble-out-icon)}
.msg.user .msg-more:hover,.msg.user .msg-more[aria-expanded="true"]{background:var(--vb-bubble-out-icon-bg);color:var(--vb-bubble-out-icon-hover)}
/* workspace card headings: subtle 1px divider instead of the default bright h2 rule */
.workspace-body .side-card>h2{border-bottom:1px solid var(--vb-line);padding-bottom:.55rem}
/* Integration: one desktop hero with the mascot contained in its corner. */
#inspect-screen .inspect-screen-frame{isolation:isolate}
#inspect-screen #inspect-avatar{position:absolute;right:.25rem;bottom:.15rem;z-index:2;display:block;width:6.25rem;height:6.25rem;overflow:hidden;pointer-events:auto}
#inspect-screen #inspect-avatar .inspect-hero-mascot,#inspect-screen #inspect-avatar .inspect-hero-mascot svg{display:block;width:100%;height:100%}
#inspect-screen #inspect-avatar .inspect-hero-mascot{position:relative}

/* The animated body can briefly fade during a transition; retain its face. */
#chat-messages .msg-avatar{isolation:isolate}
#chat-messages .msg-avatar .msg-avatar-static{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
#chat-messages .msg-avatar>svg{position:relative;z-index:1}

/* Manage rows use the desktop image when available and a screen-off card otherwise. */
#box-list .row-avatar{position:relative;width:3.5rem;height:2.25rem;background:none;border:0;overflow:visible}
#box-list .row-avatar .row-screen{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border:1px solid var(--vb-line);border-radius:var(--r-control);background:linear-gradient(145deg,var(--vb-surface-2),var(--vb-bg-soft));color:var(--vb-ink-faint)}
#box-list .row-avatar .row-screen svg{width:1rem;height:1rem}
#box-list .row-avatar .row-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#box-list .row-avatar .avatar-mascot{position:absolute;right:-.25rem;bottom:-.25rem;left:auto;top:auto;width:1.45rem;height:1.45rem;filter:drop-shadow(0 2px 3px var(--vb-swatch-0005))}
#box-list .row-avatar .avatar-mascot svg{width:100%;height:100%;display:block}

/* Message controls float beside the bubble; touch uses swipe and long press. */
#chat-messages .msg:has(.msg-actions),#thread-messages .msg:has(.msg-actions){padding-top:7px}
#chat-messages .msg .msg-actions,#thread-messages .msg .msg-actions{top:0;right:auto;left:calc(100% - .2rem);display:inline-flex;gap:.1rem;padding:.18rem;border:1px solid var(--vb-line);border-radius:var(--r-pill);background:var(--vb-surface);box-shadow:0 3px 14px var(--vb-swatch-0002);opacity:0;pointer-events:none;transform:translateY(2px);transition:opacity .15s,transform .15s;z-index:5}
#chat-messages .msg.user .msg-actions,#thread-messages .msg.user .msg-actions{left:auto;right:calc(100% - .2rem)}
@media(hover:hover){
 #chat-messages .msg:hover .msg-actions,#thread-messages .msg:hover .msg-actions,#chat-messages .msg:focus-within .msg-actions,#thread-messages .msg:focus-within .msg-actions{opacity:1;pointer-events:auto;transform:none}
}
@media(hover:none){
 #chat-messages .msg .msg-more,#thread-messages .msg .msg-more{display:inline-flex}
 #chat-messages .msg:focus-within .msg-actions,#thread-messages .msg:focus-within .msg-actions,#chat-messages .msg:has(.msg-actions-menu:not([hidden])) .msg-actions,#thread-messages .msg:has(.msg-actions-menu:not([hidden])) .msg-actions{opacity:1;pointer-events:auto;transform:none}
}
#chat-messages .msg .msg-reply,#chat-messages .msg .msg-more,#thread-messages .msg .msg-reply,#thread-messages .msg .msg-more{color:var(--vb-ink-soft)}
#chat-messages .msg .msg-actions-menu,#thread-messages .msg .msg-actions-menu{opacity:1;pointer-events:auto}

/* The reply glyph stays in the space uncovered while the bubble follows a finger. */
#chat-messages .msg:has(.swipe-reply-hint),#thread-messages .msg:has(.swipe-reply-hint){touch-action:pan-y;transform:translate3d(0,0,0)}
#chat-messages .msg.swiping,#thread-messages .msg.swiping{animation:none;transition:none;will-change:transform}
#chat-messages .msg.swiping .swipe-reply-hint,#thread-messages .msg.swiping .swipe-reply-hint{transition:none;will-change:transform,opacity}
#chat-messages .msg.swipe-returning,#thread-messages .msg.swipe-returning{animation:none;transition:transform .22s var(--vb-ease)}
#chat-messages .msg .swipe-reply-hint,#thread-messages .msg .swipe-reply-hint{position:absolute;right:.45rem;top:50%;width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;background:var(--vb-surface);border:1px solid var(--vb-line);box-shadow:0 2px 9px var(--vb-swatch-0002);color:var(--vb-ink-soft);opacity:0;pointer-events:none;z-index:-1;transform:translate3d(0,-50%,0) scale(.65);transition:opacity .22s var(--vb-ease),transform .22s var(--vb-ease)}
#chat-messages .msg .swipe-reply-hint svg,#thread-messages .msg .swipe-reply-hint svg{width:1rem;height:1rem}
#chat-messages .msg.swiping .swipe-reply-hint,#thread-messages .msg.swiping .swipe-reply-hint{color:var(--vb-accent)}
#chat-messages .msg pre,#thread-messages .msg pre{touch-action:auto}
@media(prefers-reduced-motion:reduce){#chat-messages .msg.swipe-returning,#thread-messages .msg.swipe-returning,#chat-messages .msg .swipe-reply-hint,#thread-messages .msg .swipe-reply-hint{transition:none}}

@media(max-width:600px){
 #chat-app.nav-forward{z-index:30;overflow:visible}
 #chat-app.nav-forward #chat-main{position:fixed;inset:0;width:100vw;height:100dvh;z-index:30}
 #chat-app.nav-swiping #chat-main,#chat-app.nav-swiping #chat-list{transition:none;will-change:transform}
 #chat-app.nav-returning #chat-main,#chat-app.nav-returning #chat-list,#chat-app.nav-completing #chat-main,#chat-app.nav-completing #chat-list{transition:transform .22s var(--vb-ease)}
}
@media(max-width:600px) and (prefers-reduced-motion:reduce){#chat-main,#chat-app.nav-returning #chat-main,#chat-app.nav-returning #chat-list,#chat-app.nav-completing #chat-main,#chat-app.nav-completing #chat-list{transition:none}}

/* Details hero: one contained live screen with a full-strength mascot. */
#inspect-screen .inspect-screen-frame{cursor:pointer}
#inspect-screen #inspect-screen-live{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;background:var(--vb-swatch-0b0b0d)}
#inspect-screen .inspect-screen-frame.is-live #inspect-screen-live{opacity:1}
#inspect-screen .inspect-screen-frame.is-live #inspect-screen-image{opacity:0}
#inspect-screen #inspect-screen-live>div,#inspect-screen #inspect-screen-live canvas{width:100%;height:100%;object-fit:contain}
#inspect-screen #inspect-screen-live-chip{position:absolute;right:.55rem;top:.55rem;z-index:3;padding:.18rem .45rem;border:1px solid var(--vb-swatch-ffffff35);border-radius:var(--r-pill);background:var(--vb-swatch-0b111bf2);color:var(--vb-swatch-ecfff4);font-size:var(--vb-type-rem-0-65);font-weight:750;letter-spacing:.03em;box-shadow:0 2px 6px var(--vb-swatch-0007)}
#inspect-screen #inspect-screen-live-chip::before{content:'';display:inline-block;width:.38rem;height:.38rem;margin-right:.32rem;vertical-align:middle;border-radius:50%;background:var(--vb-swatch-35d58a)}
#inspect-screen #inspect-screen-hint{position:absolute;left:.45rem;bottom:.45rem;z-index:3;max-width:calc(100% - 9rem);padding:.2rem .4rem;border-radius:.3rem;background:var(--vb-swatch-101714ee);color:var(--vb-swatch-f0f3f6);font-size:var(--vb-type-rem-0-62);line-height:1.25;text-align:left}
#inspect-screen #inspect-avatar{right:-.35rem;bottom:-.4rem;width:8rem;height:8rem;overflow:visible;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
#inspect-screen #inspect-avatar::before{content:none}
#inspect-screen #inspect-avatar .inspect-hero-mascot,#inspect-screen #inspect-avatar .inspect-hero-mascot svg{opacity:1}
@media(max-width:1099px){#inspect-screen #inspect-avatar{width:6.25rem;height:6.25rem}#inspect-screen #inspect-screen-hint{max-width:calc(100% - 7.5rem)}}

/* ══ polish batch: menu slot, grid picker, workspace side ═══════════════ */
/* menu sheet: logo title + status pill pinned far right, refresh left of it */
#chat-menu-sheet .menu-card>header .brand .brand-logo{display:block;height:1.3rem;width:auto}
#chat-menu-sheet .menu-card>header .brand .brand-logo-on-dark{display:none}
@media(prefers-color-scheme:dark){
  #chat-menu-sheet .menu-card>header .brand .brand-logo-on-light{display:none}
  #chat-menu-sheet .menu-card>header .brand .brand-logo-on-dark{display:block}
}
#chat-menu-sheet .menu-row{grid-template-columns:auto minmax(0,1fr) auto}
#chat-menu-sheet .menu-row-slot{justify-content:flex-end;min-width:5.6rem;gap:.35rem}
#chat-menu-sheet .menu-row-slot .menu-row-check{order:1}
#chat-menu-sheet .menu-row-slot .menu-pill{order:2;min-width:3.6rem}
/* grid: chevron hugs the picker's right edge; picker fits its content */
#tiles .tile-title-field{flex:0 1 auto;min-width:0;max-width:100%}
#tiles .tile-title-field .tile-title-select{flex:0 1 auto;width:auto;min-width:6rem;max-width:100%}
#tiles .tile-title-field::after{right:.55rem}
/* workspace: side panel grows/scrolls instead of clipping the Power card */
.workspace-body .workspace-side{max-height:none;overflow:visible;padding-bottom:.5rem}
/* menu slot: chat.css `.menu-links button{width:100%}` was collapsing the slot */
#chat-menu-sheet .menu-row-slot{display:inline-flex;flex:none;align-items:center}
#chat-menu-sheet .menu-row-slot .menu-pill{width:auto;flex:none}
#chat-menu-sheet .menu-row-slot .menu-row-check{width:2rem;height:2rem;flex:none}

/* final integration: one neutral, aligned Details card */
#inspect-summary>.inspect-technical:not(:has(+#inspect-contacts:not([hidden]))){border-bottom:1px solid var(--vb-line);border-radius:var(--r-surface)}
#inspect-summary>#inspect-contacts{padding:0;margin:-1px 0 0;border:1px solid var(--vb-line);border-radius:0 0 var(--r-surface) var(--r-surface);background:var(--vb-bg-soft)}
#inspect-summary>.inspect-technical>summary,#inspect-summary>#inspect-contacts>summary{display:grid;grid-template-columns:1.1rem minmax(0,1fr) 1rem;align-items:center;gap:.6rem;min-height:3.1rem;padding:.85rem .9rem}
#inspect-summary>.inspect-technical>summary h3,#inspect-summary>#inspect-contacts>summary h3{justify-self:start;text-align:left}
#inspect-summary>#inspect-contacts>summary{border-top:1px solid var(--vb-line)}
#inspect-summary>#inspect-contacts .inspect-contact-body{padding:.55rem .9rem .9rem}

/* neutral selection matches the chat list */
.manage-sidebar a[href^="#"][aria-current="page"]{background:var(--vb-surface-2);color:var(--vb-ink)}
.manage-sidebar a[href^="#"][aria-current="page"]::before{content:none}

/* explicit Grid field labels and a secondary Apply action */
#layout{gap:.7rem;padding:.65rem .75rem}
#layout label{display:grid;gap:.3rem;color:var(--vb-ink-soft);font-size:var(--vb-type-rem-0-7);font-weight:650}
#layout select{min-width:5.5rem;min-height:2.25rem;padding:.35rem 1.8rem .35rem .65rem;border:1px solid var(--vb-line-strong);background:var(--vb-surface);color:var(--vb-ink);font-size:var(--vb-type-rem-0-82)}
#layout button{align-self:end;min-height:2.25rem;padding:.35rem .85rem;border:1px solid var(--vb-line-strong);background:var(--vb-surface);color:var(--vb-ink);font-size:var(--vb-type-rem-0-8);font-weight:650}
#layout button:hover{background:var(--vb-surface-2)}
#tiles .tile-mark svg{border-radius:50%}

/* the Workspace actions share the same secondary treatment */
.workspace-actions #connect{border:1px solid var(--vb-line-strong);background:var(--vb-surface);color:var(--vb-ink)}
.workspace-actions #connect:hover{background:var(--vb-surface-2)}
#session:empty{display:none}

/* the main robot loader uses Studio surfaces in both themes */
#chat-loading:not([hidden]){background:var(--vb-bg);color:var(--vb-ink-soft)}
#chat-loading img{opacity:1}
#chat-loading p{color:var(--vb-ink-soft)}

/* A thread link belongs to the transcript, directly below its bubble. */
#chat-messages .msg-thread-line{align-self:flex-start;display:block;max-width:88%;margin:-2px 0 4px;padding:2px 4px;border:0;background:none;color:var(--vb-accent-text);font:600 var(--vb-type-px-12)/1.35 var(--vb-font);text-align:left;cursor:pointer}
#chat-messages .msg-thread-line.user{align-self:flex-end;text-align:right}
#chat-messages .msg-thread-line:hover{text-decoration:underline}
#chat-messages .msg-thread-line:focus-visible{outline:2px solid var(--vb-accent-text);outline-offset:2px;border-radius:var(--r-control)}
#chat-messages .msg-thread-line+.msg.group-start{margin-top:2px}
#chat-messages .msg .meta{position:static;display:flex;justify-content:flex-end;width:100%;margin:.18rem 0 0;opacity:1;pointer-events:auto}
#chat-messages .msg:not(.meta-block) .meta{position:static;display:flex;justify-content:flex-end;width:100%;margin:.18rem 0 0;right:auto;bottom:auto}
#chat-messages .msg .meta-spacer{display:none}

/* Live limits belong with the box facts, below the viewer shortcuts. */
#inspect-resources{margin:10px 12px 12px;padding:14px 16px;border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-surface);color:var(--vb-ink);text-align:left}
#inspect-resources[hidden],#inspect-resource-editor[hidden]{display:none}
.inspect-resources-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.inspect-resources-heading h3{margin:0;font-size:var(--vb-type-px-15);font-weight:700}
.inspect-resource-name{display:flex;align-items:center;gap:8px}
#inspect-resources-adjust{min-height:32px;padding:4px 11px;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);font:600 var(--vb-type-px-12)/1 var(--vb-font);cursor:pointer}
#inspect-resources-adjust[hidden]{display:none}
.inspect-resource-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;margin:0 0 13px;font-size:var(--vb-type-px-13)}
.inspect-resource-row>span:first-child{color:var(--vb-ink-soft)}
.inspect-resource-row strong{font-weight:650;font-variant-numeric:tabular-nums}
.inspect-resource-row strong{text-align:right}
.inspect-resource-track{grid-column:1/-1;height:5px;overflow:hidden;border-radius:var(--r-pill);background:var(--vb-surface-2)}
.inspect-resource-track span{display:block;height:100%;border-radius:inherit;background:var(--vb-ok)}
.inspect-resource-row.resource-warning .inspect-resource-track span{background:var(--vb-warn)}
.inspect-resource-row.resource-danger .inspect-resource-track span{background:var(--vb-danger)}
.inspect-resource-note{grid-column:1/-1;color:var(--vb-ink-soft);font-size:var(--vb-type-px-11)}
#inspect-resources-context,#inspect-resources-updated{margin:5px 0 0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);line-height:1.35}
#inspect-resource-editor{margin:12px -16px -14px;border-top:1px solid var(--vb-line)}
#inspect-resource-editor #inspect-memory-settings{margin:0;border:0;border-radius:0}

@media(max-width:899px){
 #chat-header{padding-left:12px;gap:8px}
 #chat-header #chat-back{display:inline-flex;align-items:center;justify-content:flex-start;gap:2px;flex:none;width:auto;min-width:44px;height:44px;min-height:44px;padding:0;border:0;color:var(--vb-ink);font:650 var(--vb-type-px-12)/1 var(--vb-font)}
 #chat-header #chat-back svg{display:block;width:24px;height:24px;flex:none}
 #chat-back-count:not([hidden]){display:inline-block;min-width:8px;font-size:var(--vb-type-px-12)}
 #chat-header .chat-header-identity{gap:6px;padding:0;min-width:0}
 #chat-header .chat-header-identity #chat-header-text{flex:1 1 0;width:0;max-width:100%;overflow:hidden;padding-left:4px;box-sizing:border-box}
 #chat-header .chat-header-identity #chat-header-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #chat-header .chat-header-identity #chat-header-avatar{width:36px;min-width:36px;height:36px;margin:0}
 #chat-header-avatar .avatar{width:36px;height:36px}
 #chat-header-avatar .avatar-mascot{right:-4%;bottom:-13%;width:46%;filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--vb-ink) 32%,transparent))}
 #chat-header #chat-info{margin-left:auto}
}

@media(max-width:640px){
 /* The sheet header and preview are solid layers above its own scroll area. */
 #inspect{display:flex;flex-direction:column;overflow:hidden;background:var(--vb-bg-soft)}
 #inspect[hidden]{display:none}
 #inspect-header{position:relative;z-index:2;flex:none;background:var(--vb-bg-soft)}
 #inspect-screen{position:relative;z-index:2;flex:none;background:var(--vb-bg-soft);padding:8px 12px 12px}
 #inspect-attachment-storage .inspect-rows>div{display:block}
 #inspect-attachment-storage .inspect-rows dt,#inspect-attachment-storage .inspect-rows dd{display:block;text-align:left}
 #inspect-attachment-storage .inspect-rows dd{margin-top:3px;white-space:normal;overflow-wrap:break-word}
 #inspect-attachment-storage .inspect-attachment-help{margin:0;padding:10px 14px 4px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);line-height:1.4;text-align:left}
 #inspect-attachment-storage .inspect-actions{display:block;width:100%;padding:8px 12px 12px}
 #inspect-attachment-storage #inspect-clear-attachments{display:block;width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--vb-line);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-danger-text);font-size:var(--vb-type-px-14);font-weight:600;text-align:left;white-space:normal}
 #inspect-attachment-storage #inspect-clear-attachments:hover{background:var(--vb-danger-soft)}
 #inspect-memory-settings{margin:12px;border:1px solid var(--vb-line);border-radius:var(--r-control);background:var(--vb-surface);padding:0;overflow:hidden}
 #inspect-memory-settings h4{margin:0;padding:12px 14px;border-bottom:1px solid var(--vb-line);font-size:var(--vb-type-px-15);font-weight:650;text-align:left}
 #inspect-memory-settings .memory-availability{margin:0;padding:12px 14px;border:0;border-bottom:1px solid var(--vb-line);border-radius:0;background:transparent;color:var(--vb-ink-soft);font-size:var(--vb-type-px-13);line-height:1.4;text-align:left}
 #inspect-memory-settings form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;padding:12px 14px;gap:10px}
 #inspect-memory-settings form[hidden]{display:none}
 #inspect-memory-settings p{padding:0 14px 12px;margin:0;text-align:left}
}

/* Conversation header: usage and direct actions keep a compact, fixed slot. */
#chat-header{gap:8px}
#chat-header>.spacer{display:none}
#chat-header .chat-header-identity{flex:1 1 0;min-width:0;overflow:hidden}
#chat-header .chat-header-identity #chat-header-text{flex:1 1 0;width:0;min-width:0;overflow:hidden}
#chat-header .chat-header-identity #chat-header-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-header .chat-header-identity #chat-header-state{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-header .chat-header-identity #chat-header-state>span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-header #chat-usage{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none;width:auto;min-width:0;height:32px;min-height:32px;padding:0 10px;border:0;border-radius:var(--r-pill);background:var(--vb-surface-2);color:var(--vb-ink);font:600 var(--vb-type-px-12)/1 var(--vb-font);font-variant-numeric:tabular-nums;white-space:nowrap}
#chat-header #chat-usage[hidden]{display:none}
#chat-header #chat-usage.usage-none{color:var(--vb-ink-soft);cursor:default}
#chat-header #chat-usage.usage-none:hover{background:transparent}
#chat-header #chat-usage.usage-none .chat-usage-ring,#chat-header #chat-usage.usage-none .chat-usage-left{display:none}
#chat-header #chat-usage.usage-low{color:var(--vb-ink)}
#chat-header #chat-usage:hover{background:var(--vb-line)}
#chat-header .chat-usage-ring{width:16px;height:16px;flex:none;color:var(--vb-ok);transform:rotate(-90deg)}
#chat-header #chat-usage.usage-low .chat-usage-ring{color:var(--vb-warn)}
#chat-header .chat-usage-left{color:var(--vb-ink-soft);font-weight:500}
#chat-header-metrics{display:flex;align-items:center;gap:5px;flex:none;min-width:0}
#chat-header-metrics:not(:has(button:not([hidden]))),#chat-conversation.pair-view #chat-header-metrics{display:none}
#inspect-memory-settings .memory-usage-warning{color:var(--vb-danger-text)}
#chat-header #chat-header-desktop,#chat-header #chat-header-terminal,#chat-header #chat-info{display:grid;place-items:center;flex:none;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:0;border-radius:var(--r-pill);background:none;color:var(--vb-ink);box-shadow:none}
#chat-header #chat-header-desktop:hover,#chat-header #chat-header-terminal:hover,#chat-header #chat-info:hover{background:var(--vb-surface-2)}
#chat-header #chat-header-desktop svg,#chat-header #chat-header-terminal svg,#chat-header #chat-info svg{display:block;width:20px;height:20px}
#chat-conversation.pair-view #chat-header-desktop,#chat-conversation.pair-view #chat-header-terminal{display:none}
#chat-conversation.pair-view #chat-header-avatar:has(.pair-avatar-stack){width:4rem;min-width:4rem}
#inspect-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:600px){
 #chat-header{gap:4px;padding-left:12px;padding-right:8px;flex-wrap:wrap}
 #chat-header #chat-header-terminal{display:none}
 #chat-header #chat-usage{padding:0 7px;gap:3px}
 #chat-header #chat-header-metrics{order:0;width:auto;justify-content:flex-end;overflow:visible}
 #chat-header .chat-usage-left{display:none}
 #chat-header .chat-header-identity{gap:6px}
}

/* Keep submit actions on the primary ink surface; coral remains an accent. */
#thread-composer button,.model-picker-use-exact,.model-picker-apply,#media-annotate,#image-annotation-add,.chat-group-form-actions button[type=submit],.commands-card #command-form:has(#command-use[hidden]) .primary{background:var(--vb-ink);border-color:var(--vb-ink);color:var(--vb-bg)}
.command-actions #command-use{background:var(--vb-surface);border-color:var(--vb-line-strong);color:var(--vb-ink)}
#inspect-memory-settings input,#inspect-memory-settings button{box-sizing:border-box;height:44px;min-height:44px;border-radius:var(--r-control)}
#inspect-memory-settings button{border-color:var(--vb-ink);background:var(--vb-ink);color:var(--vb-bg)}

/* Full-height desktop and TMUX viewer. The bottom controls never wrap. */
#takeover[hidden]{display:none}
#takeover-card{box-sizing:border-box;width:min(1200px,calc(100vw - 32px));height:min(820px,calc(100dvh - 48px));max-height:none;padding:0;overflow:hidden;border:1px solid var(--vb-line);border-radius:var(--r-bubble);background:var(--vb-surface)}
#takeover-header{box-sizing:border-box;display:flex;align-items:center;gap:8px;flex:none;height:56px;min-height:56px;padding:0 12px;background:var(--vb-surface);border-bottom:1px solid var(--vb-line)}
#takeover-header #takeover-close{order:0;display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:var(--r-control);background:none;color:var(--vb-ink);font:400 var(--vb-type-px-28)/1 var(--vb-font)}
#takeover-heading{order:1;display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1 1 0;min-width:0;overflow:hidden}
#takeover-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--vb-ink);font:600 var(--vb-type-px-16)/1.2 var(--vb-font)}
#takeover-status,#takeover-status.is-error{position:static;display:block;width:auto;height:auto;margin:0;overflow:hidden;clip:auto;white-space:nowrap;text-overflow:ellipsis;color:var(--vb-ink-soft);font:400 var(--vb-type-px-12)/1.2 var(--vb-font)}
#takeover-status::before{content:'●';margin-right:5px;color:var(--vb-ink-faint)}
#takeover-status[data-state="connected"]::before{color:var(--vb-ok)}
#takeover-status[data-state="error"]::before{color:var(--vb-danger)}
#takeover-tabs{order:2;box-sizing:border-box;display:flex;align-items:center;gap:2px;flex:none;height:32px;margin-left:auto;padding:3px;border-radius:var(--r-pill);background:var(--vb-surface-2)}
#takeover-tabs button,#takeover-tabs button.on{box-sizing:border-box;min-width:62px;height:26px;margin:0;padding:0 8px;border:0;border-radius:var(--r-pill);background:none;color:var(--vb-ink-soft);font:600 var(--vb-type-px-12)/1 var(--vb-font);white-space:nowrap}
#takeover-tabs button.on{background:var(--vb-surface);color:var(--vb-ink);box-shadow:var(--vb-shadow)}
#takeover-screen{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:0;min-width:0;margin:0;border:0;border-radius:0;overflow:hidden;background:var(--vb-code);box-shadow:none}
#takeover-screen>div{width:100%;height:100%;min-width:0;min-height:0}
#takeover-screen .xterm{box-sizing:border-box;width:100%;height:100%;padding:8px 12px;background:var(--vb-terminal-bg)}
#takeover-type{box-sizing:border-box;display:flex;align-items:center;gap:8px;flex:none;padding:8px 12px 0;background:var(--vb-surface)}
#takeover-type[hidden]{display:none}
#takeover-type input{box-sizing:border-box;flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid var(--vb-line-strong);border-radius:var(--r-surface);background:var(--vb-bg-soft);color:var(--vb-ink);font:inherit}
#takeover-type button{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:var(--r-pill);background:var(--vb-ink);color:var(--vb-bg);font:600 var(--vb-type-px-18)/1 var(--vb-font)}
#takeover-controls{box-sizing:border-box;display:flex;flex-wrap:nowrap;align-items:center;gap:0;flex:none;width:100%;min-width:0;min-height:60px;margin:0;padding:0 8px;border:0;border-top:1px solid var(--vb-line);border-radius:0;background:var(--vb-surface)}
#takeover-scroll{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;touch-action:pan-x;mask-image:linear-gradient(to right,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
#takeover-scroll::-webkit-scrollbar{display:none}
#takeover-controls button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:44px;margin:0;padding:0 12px;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface-2);color:var(--vb-ink);font:600 var(--vb-type-px-12)/1 var(--vb-font);white-space:nowrap}
#takeover-controls button:hover{background:var(--vb-bg-soft);color:var(--vb-ink)}
#takeover-controls button svg{width:17px;height:17px;flex:none}
#takeover-pinned{display:flex;align-items:center;gap:6px;flex:none;margin-left:6px;padding-left:8px;border-left:1px solid var(--vb-line)}
#takeover-pinned:empty{display:none}
#takeover-pinned button{width:44px;min-width:44px;padding:0}
@media(max-width:600px){
 #takeover{align-items:stretch;justify-content:stretch}
 #takeover-backdrop{display:none}
 #takeover-card{width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0}
 #takeover-header{height:calc(56px + env(safe-area-inset-top));min-height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0 4px}
 #takeover-tabs button,#takeover-tabs button.on{min-width:56px;padding:0 5px}
 #takeover-controls{padding-bottom:env(safe-area-inset-bottom)}
 #takeover-screen .xterm{padding:8px}
 /* noVNC sets canvas margin inline; this override anchors portrait viewing to the header. */
 #takeover-screen:not(.is-terminal) canvas{margin:0 auto !important}
}

/* Details: direct contacts and access settings have separate, clear homes. */
#inspect-summary>#inspect-access{box-sizing:border-box;margin-top:12px;padding:0;border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-bg-soft);text-align:left}
#inspect-access[hidden]{display:none}
#inspect-summary>#inspect-access>summary{display:grid;grid-template-columns:1.1rem minmax(0,1fr) 1rem;align-items:center;gap:.6rem;min-height:3.1rem;padding:.85rem .9rem}
#inspect-summary>#inspect-access>summary h3{justify-self:start;text-align:left}
#inspect-access .inspect-access-rows{padding:0 12px 8px;border-top:1px solid var(--vb-line)}
#inspect-access .inspect-access-row{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin:0;padding:10px 4px;border:0;border-bottom:1px solid var(--vb-line);border-radius:0;background:transparent;color:var(--vb-ink);text-align:left;font:inherit}
#inspect-access .inspect-access-row:last-child{border-bottom:0}
#inspect-access button.inspect-access-row{cursor:pointer}
#inspect-access button.inspect-access-row:hover{background:var(--vb-surface-2)}
#inspect-access .inspect-access-row>svg{width:20px;height:20px;flex:none;color:var(--vb-ink-soft)}
#inspect-access .inspect-access-row>svg.inspect-access-chevron{width:16px;height:16px;margin-left:auto;color:var(--vb-ink-faint)}
#inspect-access .inspect-access-copy{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
#inspect-access .inspect-access-copy strong{color:var(--vb-ink);font-size:var(--vb-type-px-14);font-weight:650}
#inspect-access .inspect-access-copy small{color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);line-height:1.3;white-space:normal}
#inspect-toggle-protection{box-sizing:border-box;position:relative;flex:none;width:40px;height:24px;margin-left:auto;padding:0;border:0;border-radius:var(--r-pill);background:var(--vb-line-strong);cursor:pointer}
#inspect-toggle-protection[aria-checked="true"]{background:var(--vb-ink)}
#inspect-toggle-protection span{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--vb-surface);box-shadow:var(--vb-shadow);transition:transform var(--vb-motion-fast) var(--vb-motion-ease)}
#inspect-toggle-protection[aria-checked="true"] span{transform:translateX(16px)}
#inspect-contacts .inspect-lede button{display:inline;margin:0;padding:0;border:0;background:none;color:var(--vb-accent-text);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}

/* Details scrolls as one sheet, with a mascot sized for the desktop rail. */
#inspect-screen{position:relative;z-index:auto;flex:none}
#inspect-screen #inspect-avatar{right:10px;bottom:10px;width:34%;height:auto;aspect-ratio:1;overflow:hidden}
#inspect-screen .inspect-screen-frame:not(.has-shot)>svg,#inspect-screen .inspect-screen-frame:not(.has-shot)>#inspect-screen-off{transform:translate(-12px,-8px)}
@media(max-width:600px){
 #inspect-screen{position:relative;z-index:auto;padding:8px 12px 12px}
 #inspect-screen #inspect-avatar{right:10px;bottom:10px;width:34%;height:auto}
}

/* One Technical details card: section headings and flat, aligned rows. */
#inspect-attachment-storage .inspect-attachment-help{margin:0;padding:8px 16px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);line-height:1.4;text-align:left}
#inspect-attachment-storage .inspect-actions{display:block;width:100%;padding:8px 16px 14px}
#inspect-attachment-storage #inspect-clear-attachments{display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--vb-line);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-danger-text);font-size:var(--vb-type-px-13);font-weight:600;line-height:1.35;text-align:left;white-space:normal}
#inspect-attachment-storage #inspect-clear-attachments:hover{background:var(--vb-danger-soft)}
#inspect-memory-settings{margin:0;padding:0;border:0;border-top:1px solid var(--vb-line);border-radius:0;background:transparent}
#inspect-memory-settings h4{padding:14px 16px 6px;border:0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
#inspect-memory-settings .memory-availability{padding:10px 16px;border-bottom:1px solid var(--vb-line)}
#inspect-memory-settings form{padding:12px 16px}
#inspect-memory-settings p{padding:0 16px 12px}
#inspect-summary .inspect-technical-inner #inspect-idle-policy,#inspect-summary .inspect-technical-inner #inspect-run-budget-policy,#inspect-summary .inspect-technical-inner #inspect-create-limit{margin:0;border-top:1px solid var(--vb-line)}
#inspect-summary .inspect-technical-inner #inspect-idle-policy>.idle-policy,#inspect-summary .inspect-technical-inner #inspect-run-budget-policy>.idle-policy,#inspect-summary .inspect-technical-inner #inspect-create-limit>.idle-policy{margin:0;padding:14px 16px;border:0;border-radius:0;background:transparent;box-shadow:none}

/* Three equal quick actions, without individual card slabs or accent labels. */
#inspect-actions{box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:12px 0 16px;background:transparent}
#inspect-actions .chat-action,#inspect-actions .chat-action:visited{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--vb-ink);text-align:center}
#inspect-actions .chat-action-icon{box-sizing:border-box;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--vb-line);border-radius:50%;background:var(--vb-surface-2);color:var(--vb-ink)}
#inspect-actions .chat-action:hover .chat-action-icon{background:var(--vb-surface);border-color:var(--vb-line-strong)}
#inspect-actions .chat-action-label{color:var(--vb-ink);font-size:var(--vb-type-px-12);font-weight:600;line-height:1.2}
@media(max-width:600px){
 #inspect-attachment-storage .inspect-actions{display:block;width:100%;padding:8px 16px 14px}
}

/* Appearance: scale type without scaling controls, icons or spacing. */
#chat-messages .msg:not(.processing){font-size:var(--vb-type-chat-body)}
#chat-menu-sheet .text-size-row{grid-template-columns:20px minmax(0,1fr) auto}
#chat-menu-sheet .text-size-icon{color:var(--vb-ink-soft);font:700 var(--vb-type-icon)/1 var(--vb-font)} /* Fixed-size icon. */
#text-size-controls{display:grid;grid-template-columns:repeat(4,44px);gap:0;padding:2px;border-radius:var(--r-control);background:var(--vb-surface-2)}
#text-size-controls button{box-sizing:border-box;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:calc(var(--r-control) - 2px);background:transparent;color:var(--vb-ink-soft);font-size:var(--vb-type-sm);font-weight:700;cursor:pointer}
#text-size-controls button[aria-pressed="true"]{background:var(--vb-surface);color:var(--vb-ink);box-shadow:var(--vb-shadow)}
#text-size-controls button:hover{color:var(--vb-ink)}
@media(max-width:380px){#chat-menu-sheet .text-size-row{grid-template-columns:20px minmax(0,1fr);row-gap:8px}#text-size-controls{grid-column:2;justify-self:start}}

/* All-profile usage lives beside Refresh on every workspace top bar. */
.workspace-top button.workspace-nav-usage,#chat-top.workspace-top button.workspace-nav-usage{
 display:inline-flex;align-items:center;justify-content:center;
 box-sizing:border-box;min-width:0;min-height:36px;height:36px;margin:0;padding:0 10px;
 border:1px solid var(--vb-line-strong);border-radius:var(--r-control);
 background:var(--vb-surface);color:var(--vb-ink);font:500 var(--vb-type-px-13)/1 var(--vb-font)
}
.workspace-top button.workspace-nav-usage[hidden],#chat-top.workspace-top button.workspace-nav-usage[hidden]{display:none}
#chat-top.workspace-top #usage-toggle[hidden]{display:none}
@media(max-width:600px){
 .workspace-top button.workspace-nav-usage,#chat-top.workspace-top button.workspace-nav-usage{font-size:var(--vb-type-px-13);width:auto;min-width:0;height:36px;min-height:36px;padding:0 9px;line-height:1}
 #chat-top.workspace-top #usage-toggle{font-size:var(--vb-type-px-13);width:auto;min-width:0;height:36px;min-height:36px;padding:0 9px;line-height:1}
}
/* Reply quote sits flush across the top of its bubble. */
#chat-messages .msg:has(> .msg-parent){padding-top:39px}
#chat-messages .msg > .msg-parent{position:absolute;inset:0 0 auto;width:100%;height:32px;margin:0;padding:7px 11px;border-radius:8px 8px 0 0}

/* Pair conversations: the two view-only screens stay pinned above the transcript while it scrolls.
   The hero spans the transcript's padding box so its opaque strip hides messages beside and above it. */
#chat-messages .pair-hero{--pair-pad:12px;position:sticky;top:calc(-1 * var(--pair-pad));z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-self:stretch;width:auto;margin:calc(-1 * var(--pair-pad)) calc(-1 * var(--pair-pad)) 0;padding:var(--pair-pad) max(var(--pair-pad),calc((100% - 776px) / 2)) 8px;flex:none;background:var(--vb-bg)}
#chat-conversation.pair-view #chat-messages{scroll-padding-top:calc(var(--pair-hero-h, 0px) + 8px)}
@media(min-width:601px){#chat-messages .pair-hero{--pair-pad:16px}}
#chat-conversation.pair-view #chat-messages::before{display:none}
#chat-messages .pair-tile{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 24px;min-width:0;width:100%;aspect-ratio:16/10;max-height:240px;overflow:hidden;padding:0;border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-swatch-0b0b0d);color:var(--vb-swatch-fff);text-align:left;cursor:pointer}
#chat-messages .pair-tile:hover{border-color:var(--vb-line-strong)}
#chat-messages .pair-tile-screen{position:relative;min-width:0;min-height:0;overflow:hidden;pointer-events:none}
#chat-messages .pair-tile[data-mode="tmux"] .pair-tile-screen{padding:8px}
#chat-messages .pair-tile-screen>div,#chat-messages .pair-tile-screen .xterm{width:100%;height:100%}
#chat-messages .pair-tile[data-mode="tmux"] .pair-tile-screen .xterm{position:absolute;bottom:8px;left:8px;width:max-content;height:384px}
#chat-messages .pair-tile-placeholder{position:absolute;inset:0 0 24px;display:grid;place-items:center;padding:8px;background:var(--vb-surface-2);color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);font-weight:650;text-align:center}
#chat-messages .pair-tile-placeholder[hidden]{display:none}
#chat-messages .pair-tile-mascot{display:block;flex:none;width:22px;height:22px;filter:drop-shadow(0 2px 2px var(--vb-swatch-0005))}
#chat-messages .pair-hero-mascot,#chat-messages .pair-hero-mascot svg{display:block;width:100%;height:100%}
#chat-messages .pair-tile-label{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;padding:0 4px 0 6px;border-top:1px solid var(--vb-line);background:var(--vb-surface);color:var(--vb-ink);font-size:var(--vb-type-px-12);font-weight:650;line-height:1}
#chat-messages .pair-tile-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-messages .pair-tile-dot{width:6px;height:6px;flex:none;border-radius:var(--r-pill);background:var(--vb-ink-faint)}
#chat-messages .pair-tile[data-mode="desktop"] .pair-tile-dot{background:var(--vb-ok)}
#chat-messages .pair-tile[data-mode="tmux"] .pair-tile-dot{background:var(--vb-warn)}
#chat-messages .pair-tile-status{flex:none;white-space:nowrap;color:var(--vb-ink-soft)}
#chat-entries .pair-avatar.pair-avatar-stack,#chat-header-avatar .pair-avatar-stack{position:relative;display:block;flex:none;width:44px;height:42px;background:none}
#chat-entries li[data-pair-key]{--pair-avatar-bg:var(--vb-bg-soft)}
#chat-entries li[data-pair-key]:hover{--pair-avatar-bg:color-mix(in srgb,var(--vb-ink) 5%,var(--vb-bg-soft))}
#chat-entries li[data-pair-key].active{--pair-avatar-bg:color-mix(in srgb,var(--vb-ink) 9%,var(--vb-bg-soft))}
#chat-entries li[data-pair-key].active:hover{--pair-avatar-bg:color-mix(in srgb,var(--vb-ink) 12%,var(--vb-bg-soft))}
#chat-header-avatar{--pair-avatar-bg:var(--vb-bg)}
#chat-entries .pair-avatar-stack .pair-avatar-mascot,#chat-header-avatar .pair-avatar-stack .pair-avatar-mascot{position:absolute;display:block;width:28px;height:28px;left:0;top:0;z-index:1;overflow:visible;border:0;border-radius:0;background:transparent;filter:drop-shadow(0 2px 2px var(--vb-swatch-0005))}
#chat-entries .pair-avatar-stack .pair-avatar-mascot:nth-child(2),#chat-header-avatar .pair-avatar-stack .pair-avatar-mascot:nth-child(2){width:22px;height:22px;left:auto;right:0;top:auto;bottom:0;z-index:2;filter:drop-shadow(2px 0 0 var(--pair-avatar-bg)) drop-shadow(-2px 0 0 var(--pair-avatar-bg)) drop-shadow(0 2px 0 var(--pair-avatar-bg)) drop-shadow(0 -2px 0 var(--pair-avatar-bg)) drop-shadow(0 2px 2px var(--vb-swatch-0005))}
#chat-entries .pair-avatar-stack .pair-avatar-mascot svg,#chat-header-avatar .pair-avatar-stack .pair-avatar-mascot svg{display:block;width:100%;height:100%}
#chat-conversation.pair-view .chat-header-identity #chat-header-avatar:has(.pair-avatar-stack){width:44px;min-width:44px;height:42px;margin:0}
#chat-conversation.pair-view #chat-messages .pair-hero+.day-sep{margin:12px 0;padding:0 .7rem;line-height:12px}
#chat-conversation.pair-view #chat-messages .pair-msg.group-start{margin-top:8px}
#chat-conversation.pair-view #chat-messages .pair-hero+.day-sep+.pair-msg.group-start{margin-top:0}
@media(max-width:600px){#chat-entries li[data-pair-key]{--pair-avatar-bg:var(--vb-bg)}#chat-entries li[data-pair-key]:hover{--pair-avatar-bg:color-mix(in srgb,var(--vb-ink) 5%,var(--vb-bg))}#chat-entries li[data-pair-key].active{--pair-avatar-bg:color-mix(in srgb,var(--vb-ink) 9%,var(--vb-bg))}#chat-entries li[data-pair-key].active:hover{--pair-avatar-bg:color-mix(in srgb,var(--vb-ink) 12%,var(--vb-bg))}}

/* Audit follow-up: reserve the thread's width in the desktop chat layout. */
@media(min-width:900px){
 #chat-app:has(#thread-panel:not([hidden])) #chat-main{margin-right:var(--chat-thread-width,26rem)}
}

/* Keep the full takeover failure visible when the viewer cannot connect. */
#takeover-error:not([hidden]){position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(28rem,calc(100% - 2rem));margin:0;padding:1rem 1.2rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-surface);background:var(--vb-surface);color:var(--vb-ink);text-align:center;line-height:1.45;box-shadow:var(--vb-shadow-lg)}

/* Mobile key strips retain their final key and indicate horizontal scrolling. */
@media(max-width:760px){
 .workspace-body .terminal-keys{padding-right:10px}
 .workspace-body .terminal-keys .term-key-scroll-cue{position:sticky;right:88px;z-index:4;min-width:32px;width:32px;height:44px;padding:0;background:var(--vb-surface);color:var(--vb-ink);font-size:var(--vb-type-px-20);box-shadow:var(--vb-shadow)}
 #takeover-scroll{padding-right:10px}
 #takeover-scroll .term-key-scroll-cue{position:sticky;right:0;z-index:4;width:32px;min-width:32px;padding:0;background:var(--vb-surface);color:var(--vb-ink);font-size:var(--vb-type-px-20);box-shadow:var(--vb-shadow)}
}
.term-key-scroll-cue[hidden]{display:none!important}

/* Give mobile permission identities the card width before actions. */
@media(max-width:600px){
 #roles .role-assignment-summary{grid-template-columns:auto minmax(0,1fr);align-items:center}
 #roles .role-box-mark{grid-column:1;grid-row:1}
 #roles .role-assignment-identity{grid-column:2;grid-row:1}
 #roles .role-assignment-current{grid-column:1/-1;grid-row:2}
 #roles .role-assignment-actions{grid-column:1/-1;grid-row:3;justify-content:flex-start}
}

/* Use shared ink and accent text in the Manage permission editor. */

/* Native selectors size to their content on wide screens. */
#agent-cli-versions select{width:max-content;min-width:min(100%,25rem);max-width:100%}

/* Provider cards keep common actions visible and move extras to one menu. */
#provider-list .provider-actions{flex-wrap:nowrap;align-items:stretch;min-width:0}
#provider-list .provider-actions-more{position:relative;flex:none;margin:0;padding:0;border:0}
#provider-list .provider-actions-more>summary{box-sizing:border-box;list-style:none;display:inline-flex;align-items:center;height:100%;min-height:34px;padding:.35rem .7rem;border:1px solid var(--vb-line-strong);border-radius:var(--r-control);background:var(--vb-surface);color:var(--vb-ink);font:600 var(--vb-type-px-14)/1 var(--vb-font);cursor:pointer}
#provider-list .provider-actions-more>summary::marker,#provider-list .provider-actions-more>summary::-webkit-details-marker{display:none;content:''}
#provider-list .provider-actions-more>summary::before,#provider-list .provider-actions-more>summary::after{display:none}
#provider-list .provider-actions-extra{position:absolute;z-index:10;top:calc(100% + 5px);right:0;display:grid;gap:3px;min-width:max-content;padding:5px;border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-elevated);box-shadow:var(--vb-shadow-lg)}
#provider-list .provider-actions-more:not([open]) .provider-actions-extra{display:none}
#provider-list .provider-actions-extra button{width:100%;text-align:left;justify-content:flex-start}

/* A closed <dialog> must never render, even where a sheet rule gives it display:flex. */
dialog:not([open]){display:none}
/* Touch screens keep :hover after a tap; only true hover devices get hover fills in the top bar. */
@media(hover:none){
 .workspace-top button.workspace-nav-menu:hover,.workspace-top button.workspace-nav-usage:hover,.workspace-top button.workspace-nav-providers:hover,.workspace-top button.workspace-nav-refresh:hover,#chat-top.workspace-top button:hover{background:var(--vb-surface);border-color:var(--vb-line-strong)}
}

/* Phone touch extensions preserve the visible control sizes and desktop layout. */
@media(max-width:600px){
 .workspace-top button:is(.workspace-nav-menu,.workspace-nav-usage,.workspace-nav-providers,.workspace-nav-refresh),
 #chat-top.workspace-top button:is(.workspace-nav-menu,.workspace-nav-usage,.workspace-nav-providers,.workspace-nav-refresh),
 #box-list .box-details-action,#box-list .row-overflow-trigger,
 #provider-list .provider-actions>button,#provider-list .provider-actions-more>summary,
 #media-viewer-zoom button{position:relative}
 .workspace-top button:is(.workspace-nav-menu,.workspace-nav-usage,.workspace-nav-providers,.workspace-nav-refresh)::after,
 #chat-top.workspace-top button:is(.workspace-nav-menu,.workspace-nav-usage,.workspace-nav-providers,.workspace-nav-refresh)::after,
 #box-list .row-overflow-trigger::after,#media-viewer-zoom button::after,
 #chat-composer .ai-wand::after{content:'';position:absolute;inset:-4px;pointer-events:auto}
 #box-list .box-details-action::after{content:'';position:absolute;inset:-7px 0;pointer-events:auto}
 #provider-list .provider-actions>button::after,#provider-list .provider-actions-more>summary::after{content:'';display:block;position:absolute;inset:-4px 0;pointer-events:auto}
 #media-viewer-close::after{content:'';position:absolute;inset:-2px;pointer-events:auto}
}

/* Provider form and worker settings: typed fields instead of JSON. */
#provider{display:block;margin:0}
.provider-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.7rem 1rem;margin-bottom:.7rem}
.provider-form-grid .field{display:grid;gap:.3rem;align-content:start}
.provider-form-grid .field input:disabled{opacity:.65;cursor:not-allowed}
.provider-form-grid .provider-check{grid-template-columns:auto 1fr;align-items:center;gap:.5rem}
.provider-form-grid .provider-check input{order:-1}
.provider-form-grid .provider-check .hint{grid-column:1/-1}
.provider-form-grid .hint,.worker-settings .hint{margin:0;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-72);font-weight:400;line-height:1.35}
#provider-form-status:empty{display:none}
.worker-specs{margin:.55rem 0 .7rem;color:var(--vb-ink-soft,var(--vb-ink));font-size:var(--vb-type-rem-0-78);line-height:1.45;overflow-wrap:anywhere}
.worker-settings-form{display:grid;gap:.7rem}
.worker-settings-form .field{display:grid;gap:.3rem}
.worker-settings-form input[type=number]{max-width:9rem}
.worker-box-size{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.6rem;margin:0;padding:.65rem .75rem .75rem;border:1px solid var(--vb-line);border-radius:var(--r-control)}
.worker-box-size legend{padding:0 .3rem;font-weight:650;font-size:var(--vb-type-rem-0-78)}
.worker-box-size input[type=number]{max-width:100%}
.worker-overcommit{margin:0;padding:.55rem .7rem;border-radius:var(--r-control);background:var(--vb-warn-soft);color:var(--vb-warn-text);font-size:var(--vb-type-rem-0-75);line-height:1.4}
.worker-settings-form .form-actions{margin:0}
.worker-settings-form [role=status]:empty{display:none}
.worker-settings-note{margin:.5rem 0;color:var(--vb-ink-faint);font-size:var(--vb-type-rem-0-75);line-height:1.4;overflow-wrap:anywhere}

/* Providers page: a pool's slots, box size, connection and actions open inline under its row. */
#providers .section-heading{display:flex;justify-content:space-between;gap:12px}
#providers .section-heading #provider-add{flex:none}
#provider-list .provider-row.is-open>td{border-bottom-color:transparent}
#provider-list .provider-detail-row>td{padding:0 0 16px;border-bottom:1px solid var(--vb-line)}
.provider-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:18px 22px;padding:16px;border:1px solid var(--vb-line);border-radius:var(--r-surface);background:var(--vb-surface)}
.provider-panel-section{display:grid;align-content:start;gap:.55rem;min-width:0}
.provider-panel-section:first-child{grid-column:1/-1}
.provider-panel-section h3{margin:0;font-size:var(--vb-type-px-14);font-weight:700}
.provider-panel-section>.hint{margin:0}
.provider-panel .slot-grid{margin:.2rem 0 0}
.provider-panel .worker-specs{margin:0}
.provider-panel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.provider-panel-actions .provider-menu-delete{color:var(--vb-danger-text)}
.provider-default-note{padding:.3rem .6rem;border-radius:var(--r-pill);background:var(--vb-accent-soft,var(--vb-bg-soft));color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);font-weight:600}
.provider-panel-status{margin:0;font-size:var(--vb-type-rem-0-75);line-height:1.4;overflow-wrap:anywhere}
.provider-panel-status:empty{display:none}
#provider-editor.in-panel{margin:0;padding:0;border:0;background:none}
#provider-editor.in-panel>summary{display:none}
#provider-editor.in-panel #provider-type-help{margin-top:0}
@media(max-width:600px){
 #provider-list .providers-table tr.provider-detail-row{display:block;margin-top:-6px;padding:0;border:0;background:none}
 #provider-list .provider-detail-row>td{display:block;padding:0;border:0}
 #provider-list .provider-detail-row>td::before{content:none}
.provider-panel{padding:13px}
}

/* Chat Details drawer. */
#inspect.details-prototype{width:min(26rem,100%);background:var(--vb-bg-soft);border-left:1px solid var(--vb-line);box-shadow:var(--vb-shadow-lg)}
#inspect.details-prototype #inspect-header{display:flex;min-height:48px;box-sizing:border-box;padding:6px 12px;background:var(--vb-surface);border-bottom:1px solid var(--vb-line);justify-content:flex-start}
#inspect.details-prototype .inspect-grab{display:none}
#inspect.details-prototype #inspect-header .spacer{flex:1}
#inspect.details-prototype #inspect-header-text{display:block;min-width:0}
#inspect.details-prototype #inspect-header-text strong{font-size:var(--vb-type-px-15);font-weight:700;color:var(--vb-ink)}
#inspect.details-prototype #inspect-header-state{display:none}
#inspect.details-prototype #inspect-close,#inspect.details-prototype #inspect-prototype-back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--vb-radius-pill);background:var(--vb-surface-2);color:var(--vb-ink)}
#inspect.details-prototype #inspect-prototype-back[hidden]{display:none}
#inspect.details-prototype #inspect-header button svg{width:18px;height:18px}
#inspect.details-prototype #inspect-prototype{display:flex;flex:1;min-height:0;flex-direction:column;background:var(--vb-bg-soft)}
#inspect.details-prototype #inspect-prototype[hidden],#inspect.details-prototype #inspect-prototype-main[hidden],#inspect.details-prototype #inspect-prototype-page[hidden],#inspect.details-prototype .ip-page[hidden]{display:none}
#inspect.details-prototype #inspect-prototype-main,#inspect.details-prototype #inspect-prototype-page{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 28px;box-sizing:border-box}
#inspect.details-prototype #inspect-prototype-page{animation:ip-enter var(--vb-motion-fast) ease-out}
@keyframes ip-enter{from{opacity:.5;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){#inspect.details-prototype #inspect-prototype-page{animation:none}}
#inspect.details-prototype #inspect-prototype-identity{display:grid;gap:10px;margin-bottom:19px}
#inspect.details-prototype #inspect-screen{padding:0}
#inspect.details-prototype #inspect-screen .inspect-screen-frame{aspect-ratio:16/9;max-height:180px;border-radius:var(--vb-radius-16);border:1px solid var(--vb-line-strong)}
#inspect.details-prototype #inspect-screen-hint{display:none}
#inspect.details-prototype #inspect-screen-title{display:none}
#inspect.details-prototype #inspect-hero{display:block;padding:0 3px}
#inspect.details-prototype #inspect-name{font-size:var(--vb-type-px-20);line-height:1.2;font-weight:750;color:var(--vb-ink)}
#inspect.details-prototype #inspect-subtitle{margin-top:3px;font-size:var(--vb-type-px-13);color:var(--vb-ink-soft)}
#inspect.details-prototype #inspect-badges,#inspect.details-prototype #inspect-quick-actions{display:none}
#inspect.details-prototype #inspect-actions{display:flex;justify-content:center;gap:9px;padding:0 2px}
#inspect.details-prototype #inspect-actions .chat-action{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid var(--vb-line);border-radius:var(--vb-radius-pill);background:var(--vb-surface);color:var(--vb-ink);box-shadow:none}
#inspect.details-prototype #inspect-actions .chat-action:hover{background:var(--vb-surface-2);border-color:var(--vb-line-strong)}
#inspect.details-prototype #inspect-actions .chat-action-icon{display:flex;align-items:center;justify-content:center}
#inspect.details-prototype #inspect-actions .chat-action-icon svg{width:19px;height:19px}
#inspect.details-prototype #inspect-actions .chat-action-label{display:none}
#inspect.details-prototype .ip-group{margin:0 0 18px}
#inspect.details-prototype .ip-heading{margin:0 2px 7px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-11);font-weight:800;letter-spacing:.11em;text-transform:uppercase}
#inspect.details-prototype .ip-card{border:1px solid var(--vb-line);border-radius:var(--vb-radius-16);background:var(--vb-surface);overflow:hidden;box-shadow:var(--vb-shadow)}
#inspect.details-prototype .ip-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:3px 12px}
#inspect.details-prototype .ip-overview-cell{min-width:0;min-height:61px;padding:9px 4px 8px;box-sizing:border-box}
#inspect.details-prototype .ip-overview-cell:nth-child(odd){padding-right:9px}
#inspect.details-prototype .ip-overview-cell:nth-child(even){padding-left:10px;border-left:1px solid var(--vb-line)}
#inspect.details-prototype .ip-overview-cell:nth-child(n+3){border-top:1px solid var(--vb-line)}
#inspect.details-prototype .ip-cell-label{display:block;margin-bottom:3px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-11);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#inspect.details-prototype .ip-cell-value{display:block;color:var(--vb-ink);font-size:var(--vb-type-px-13);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#inspect.details-prototype #inspect-resources{margin:0 0 18px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#inspect.details-prototype #inspect-resources .inspect-resources-heading{display:flex;align-items:center;justify-content:space-between;margin:0 2px 7px}
#inspect.details-prototype #inspect-resources h3{margin:0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-11);font-weight:800;letter-spacing:.11em;text-transform:uppercase}
#inspect.details-prototype #inspect-resource-rows{padding:12px 13px 1px;border:1px solid var(--vb-line);border-radius:var(--vb-radius-16);background:var(--vb-surface);box-shadow:var(--vb-shadow)}
#inspect.details-prototype .inspect-resource-row{margin-bottom:11px}
#inspect.details-prototype .inspect-resource-row>span:first-child{color:var(--vb-ink);font-weight:650}
#inspect.details-prototype #inspect-resources-adjust{min-height:30px;padding:5px 11px;border:1px solid var(--vb-line);border-radius:var(--vb-radius-pill);background:var(--vb-surface);color:var(--vb-ink);font-size:var(--vb-type-px-12);font-weight:700}
#inspect.details-prototype #inspect-resources-context,#inspect.details-prototype #inspect-resources-updated{margin:6px 2px 0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-11)}
#inspect.details-prototype .ip-row{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(0,auto) 14px;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 13px;border:0;border-bottom:1px solid var(--vb-line);border-radius:0;box-shadow:none;background:transparent;color:var(--vb-ink);font:inherit;text-align:left;cursor:pointer}
#inspect.details-prototype .ip-row:last-child{border-bottom:0}
#inspect.details-prototype .ip-row:hover{background:var(--vb-surface-2)}
#inspect.details-prototype .ip-row:focus-visible{outline:2px solid var(--vb-ink);outline-offset:-3px}
#inspect.details-prototype .ip-row[hidden]{display:none}
#inspect.details-prototype .ip-row:disabled{opacity:.5;cursor:default}
#inspect.details-prototype .ip-row-icon{width:18px;height:18px;color:var(--vb-ink-soft)}
#inspect.details-prototype .ip-row-title{min-width:0;font-size:var(--vb-type-px-13);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#inspect.details-prototype .ip-row-value{max-width:112px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
#inspect.details-prototype .ip-row-chevron{width:14px;height:14px;color:var(--vb-ink-faint)}
#inspect.details-prototype .ip-danger-group{margin-top:22px}
#inspect.details-prototype .ip-row-danger .ip-row-title,#inspect.details-prototype .ip-row-danger .ip-row-icon{color:var(--vb-danger-text)}
#inspect.details-prototype .ip-row-danger{grid-template-columns:20px minmax(0,1fr)}
#inspect.details-prototype .ip-row-danger .ip-row-value{display:none}
#inspect.details-prototype .ip-row-danger:hover{background:var(--vb-danger-soft)}
#inspect.details-prototype #compact-confirm{display:grid;gap:10px;padding:12px 13px;border-bottom:1px solid var(--vb-line);background:var(--vb-surface-2)}
#inspect.details-prototype #compact-confirm[hidden]{display:none}
#inspect.details-prototype #compact-confirm .ip-compact-confirm-text{margin:0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);line-height:1.5}
#inspect.details-prototype #compact-confirm .ip-compact-confirm-actions{display:flex;gap:8px;flex-wrap:wrap}
#inspect.details-prototype #compact-confirm button{min-height:32px;padding:6px 12px;border:1px solid var(--vb-line-strong);border-radius:var(--vb-radius-pill);background:var(--vb-surface);color:var(--vb-ink);font:inherit;font-size:var(--vb-type-px-12);font-weight:700;cursor:pointer}
#inspect.details-prototype #compact-confirm #compact-confirm-yes{background:var(--vb-accent);border-color:var(--vb-accent);color:var(--vb-accent-ink)}
#inspect.details-prototype #compact-confirm #compact-confirm-no:hover{background:var(--vb-line)}
#inspect.details-prototype .ip-page{display:grid;align-content:start;gap:12px}
#inspect.details-prototype .ip-page-intro{margin:2px 3px 6px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-13);line-height:1.45}
#inspect.details-prototype .ip-page-card{padding:16px;color:var(--vb-ink);font-size:var(--vb-type-px-13);line-height:1.45}
#inspect.details-prototype .ip-page-action{width:100%;min-height:44px;border:0;border-radius:var(--vb-radius-10);background:var(--vb-ink);color:var(--vb-bg);font:700 var(--vb-type-px-13) var(--vb-font);cursor:pointer}
#inspect.details-prototype .ip-page-secondary{width:100%;min-height:42px;border:1px solid var(--vb-line-strong);border-radius:var(--vb-radius-10);background:var(--vb-surface);color:var(--vb-ink);font:650 var(--vb-type-px-13) var(--vb-font);cursor:pointer}
#inspect.details-prototype .ip-page-secondary[hidden]{display:none}
#inspect.details-prototype .ip-page>[id="inspect-idle-policy"],#inspect.details-prototype .ip-page>[id="inspect-run-budget-policy"],#inspect.details-prototype .ip-page>[id="inspect-memory-settings"]{border:1px solid var(--vb-line);border-radius:var(--vb-radius-16);background:var(--vb-surface);overflow:hidden}
#inspect.details-prototype .ip-page .idle-policy{margin:0;padding:16px;border:0;border-radius:0;background:transparent;color:var(--vb-ink)}
#inspect.details-prototype .ip-page .idle-policy-top{gap:8px}
#inspect.details-prototype .ip-page .idle-policy-top strong{color:var(--vb-ink);font-size:var(--vb-type-px-14)}
#inspect.details-prototype .ip-page .idle-policy-note{color:var(--vb-ink-soft)}
#inspect.details-prototype .ip-page .idle-policy-controls label,#inspect.details-prototype .ip-page .idle-policy-controls label span{color:var(--vb-ink-soft)}
#inspect.details-prototype .ip-page .idle-policy-note{display:none}
#inspect.details-prototype .ip-page .idle-policy-controls input,#inspect.details-prototype .ip-page #inspect-memory-settings input{background:var(--vb-surface-2);color:var(--vb-ink);border-color:var(--vb-line-strong)}
#inspect.details-prototype .ip-page .idle-policy-controls button,#inspect.details-prototype .ip-page #inspect-memory-settings button{background:var(--vb-ink);color:var(--vb-bg);border-color:var(--vb-ink)}
#inspect.details-prototype .ip-page .ip-policy-compact{display:grid;gap:12px;padding:16px}
#inspect.details-prototype .ip-page .ip-policy-compact .idle-policy-top{gap:10px}
#inspect.details-prototype .ip-page .ip-policy-compact .idle-policy-badge{margin-right:1px;color:var(--vb-ink-soft)}
#inspect.details-prototype .ip-page .ip-policy-compact .idle-policy-badge[data-enabled="true"]{color:var(--vb-ink)}
#inspect.details-prototype .ip-page .ip-policy-compact .idle-policy-controls:not(.run-budget-actions){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;flex-wrap:nowrap}
#inspect.details-prototype .ip-page .ip-policy-compact .idle-policy-controls label{display:grid;gap:5px;min-width:0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);font-weight:600}
#inspect.details-prototype .ip-page .ip-policy-compact .ip-unit-field{display:inline-flex;align-items:center;justify-self:start;min-height:38px;overflow:hidden;border:1px solid var(--vb-line-strong);border-radius:var(--vb-radius-10);background:var(--vb-surface-2)}
#inspect.details-prototype .ip-page .ip-policy-compact .ip-unit-field input{width:56px;min-height:36px;margin:0;padding:6px 8px;border:0;border-radius:0;background:transparent;color:var(--vb-ink);font-size:var(--vb-type-px-14);font-weight:650;text-align:right}
#inspect.details-prototype .ip-page .ip-policy-compact .ip-unit-field span{padding:0 11px 0 2px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12)}
#inspect.details-prototype .ip-page .ip-policy-compact .idle-policy-controls:not(.run-budget-actions)>button{min-height:38px;padding:7px 15px;border:1px solid var(--vb-line-strong);border-radius:var(--vb-radius-10);background:var(--vb-surface-2);color:var(--vb-ink);font-size:var(--vb-type-px-12)}
#inspect.details-prototype .ip-page .ip-policy-compact .idle-policy-controls:not(.run-budget-actions)>button:hover{background:var(--vb-line)}
#inspect.details-prototype .ip-page .ip-policy-compact .run-budget-elapsed{color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);font-weight:500}
#inspect.details-prototype .ip-page .ip-policy-compact .run-budget-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#inspect.details-prototype .ip-page .ip-policy-compact .run-budget-actions button{min-height:30px;padding:5px 9px;border:1px solid var(--vb-line-strong);border-radius:var(--vb-radius-pill);background:transparent;color:var(--vb-ink);font-size:var(--vb-type-px-11);font-weight:650}
#inspect.details-prototype .ip-page .ip-policy-compact .run-budget-actions button:first-child{margin-right:4px;border-color:transparent;color:var(--vb-ink-soft);text-decoration:underline;text-underline-offset:2px}
#inspect.details-prototype .ip-page .ip-policy-compact .idle-policy-status:empty{display:none}
#inspect.details-prototype .ip-page #inspect-memory-settings{margin:0;padding:15px}
#inspect.details-prototype .ip-page #inspect-memory-settings h4{margin:0 0 10px;padding:0;color:var(--vb-ink);font-size:var(--vb-type-px-14);letter-spacing:0;text-transform:none}
#inspect.details-prototype .ip-page #inspect-memory-settings .memory-availability{margin:0 0 10px;padding:0;border:0;background:transparent;color:var(--vb-ink-soft)}
#inspect.details-prototype .ip-page #inspect-memory-settings form{padding:0}
#inspect.details-prototype .ip-page #inspect-memory-settings p{padding:0}
#inspect.details-prototype .ip-technical-table{display:block}
#inspect.details-prototype .ip-technical-row{display:grid;grid-template-columns:minmax(0,122px) minmax(0,1fr);align-items:center;gap:8px;width:100%;min-height:43px;padding:0 13px;border:0;border-bottom:1px solid var(--vb-line);border-radius:0;box-shadow:none;background:transparent;color:var(--vb-ink);font:inherit;text-align:left}
#inspect.details-prototype .ip-technical-copy{grid-template-columns:minmax(0,122px) minmax(0,1fr) 15px;cursor:copy}
#inspect.details-prototype .ip-technical-row:last-child{border-bottom:0}
#inspect.details-prototype .ip-technical-row:hover{background:var(--vb-surface-2)}
#inspect.details-prototype .ip-technical-row span:first-child{color:var(--vb-ink-soft);font-size:var(--vb-type-px-11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#inspect.details-prototype .ip-technical-row span:nth-child(2){font-size:var(--vb-type-px-12);font-weight:650;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#inspect.details-prototype .ip-technical-activity{min-height:53px}
#inspect.details-prototype .ip-technical-activity span:nth-child(2){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;text-overflow:clip;overflow:hidden;line-height:1.35}
#inspect.details-prototype .ip-technical-row svg{width:14px;height:14px;color:var(--vb-ink-faint)}
.remote-control-link{text-decoration:none}
#inspect.details-prototype .ip-page #inspect-contacts,#inspect.details-prototype .ip-page #inspect-access,#inspect.details-prototype .ip-page #inspect-attachment-storage{display:block;margin:0;padding:0;border:1px solid var(--vb-line);border-radius:var(--vb-radius-16);background:var(--vb-surface);overflow:hidden}
#inspect.details-prototype .ip-page #inspect-contacts[hidden],#inspect.details-prototype .ip-page #inspect-access[hidden],#inspect.details-prototype .ip-page #inspect-attachment-storage[hidden]{display:none}
#inspect.details-prototype .ip-page #inspect-contacts>summary,#inspect.details-prototype .ip-page #inspect-access>summary{display:none}
#inspect.details-prototype .ip-page .inspect-contact-body,#inspect.details-prototype .ip-page .inspect-access-rows{padding:12px}
#inspect.details-prototype .ip-page #inspect-clear-attachments{display:none}
@media(min-width:1100px){
 #chat-conversation:has(#inspect.details-prototype:not([hidden])) #chat-messages,#chat-conversation:has(#inspect.details-prototype:not([hidden])) #chat-composer,#chat-conversation:has(#inspect.details-prototype:not([hidden])) #chat-status,#chat-conversation:has(#inspect.details-prototype:not([hidden])) #chat-image-drafts,#chat-conversation:has(#inspect.details-prototype:not([hidden])) #reply-preview{margin-right:26rem}
}
@media(max-width:600px){
 #inspect.details-prototype{top:0;right:0;bottom:0;width:100%;border:0}
 #inspect.details-prototype #inspect-prototype-main,#inspect.details-prototype #inspect-prototype-page{padding:12px 13px calc(env(safe-area-inset-bottom) + 24px)}
 #inspect.details-prototype #inspect-screen .inspect-screen-frame{max-height:180px}
 #inspect.details-prototype #inspect-close,#inspect.details-prototype #inspect-prototype-back{width:40px;height:40px}
 #inspect.details-prototype #inspect-resources-adjust{min-height:40px;padding:7px 12px}
 #inspect.details-prototype .ip-page[data-ip-page="power"] .idle-policy-switch{display:flex;align-items:center;height:40px}
 #inspect.details-prototype .ip-page[data-ip-page="power"] .idle-policy-switch span{height:1.45rem}
 #inspect.details-prototype .ip-page[data-ip-page="power"] .ip-unit-field{min-height:40px}
 #inspect.details-prototype .ip-page[data-ip-page="power"] .ip-unit-field input{min-height:40px;box-sizing:border-box}
 #inspect.details-prototype .ip-page[data-ip-page="power"] .idle-policy-controls:not(.run-budget-actions)>button,
 #inspect.details-prototype .ip-page[data-ip-page="power"] .run-budget-actions button,
 #inspect.details-prototype .ip-page[data-ip-page="power"] .idle-policy-retry{min-height:40px}
}

/* Details subpages share the main page's quiet cards and divided rows. */
#inspect.details-prototype .ip-page #inspect-contacts,
#inspect.details-prototype .ip-page #inspect-access,
#inspect.details-prototype .ip-page #inspect-attachment-storage{box-shadow:var(--vb-shadow)}

/* Both Credentials views edit each imported account independently. */
#box-credentials-modal :is(.sheet-card,.card){width:min(30rem,100%)}
#box-credentials-modal :is(.sheet-card,.card)>header button{min-width:40px;min-height:40px}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slots{margin-top:15px;border:1px solid var(--vb-line);border-radius:var(--vb-radius-16);overflow:hidden;background:var(--vb-surface)}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot{padding:14px 15px;border-bottom:1px solid var(--vb-line)}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot:last-child{border-bottom:0}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot-heading{display:flex;align-items:center;justify-content:space-between;color:var(--vb-ink);font-size:var(--vb-type-px-14)}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot-account{margin-top:5px;color:var(--vb-ink);font-size:var(--vb-type-px-13);overflow-wrap:anywhere}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot-note{margin:5px 0 0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12)}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot-actions,:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-picker-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot button,:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-retry{min-height:40px;padding:8px 15px;border:1px solid var(--vb-line-strong);border-radius:var(--vb-radius-10);background:var(--vb-surface);color:var(--vb-ink);font:650 var(--vb-type-px-13) var(--vb-font);cursor:pointer}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot button:disabled{opacity:.5;cursor:default}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot .credential-slot-save{background:var(--vb-ink);border-color:var(--vb-ink);color:var(--vb-bg)}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot .credential-slot-remove{color:var(--vb-danger-text)}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot-picker{margin-top:12px;padding-top:12px;border-top:1px solid var(--vb-line)}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot-picker[hidden]{display:none}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot-picker label{margin:0}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-slot-picker select{min-height:40px}
:is(#box-credentials-modal,#inspect.details-prototype .ip-page[data-ip-page="credentials"]) .credential-retry[hidden]{display:none}
#inspect.details-prototype .ip-page[data-ip-page="credentials"] .credential-slots:empty{display:none}
#inspect.details-prototype .ip-page[data-ip-page="credentials"] #box-credentials-status{margin:0 2px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12)}
#inspect.details-prototype .ip-page[data-ip-page="credentials"] #box-credentials-status:empty{display:none}
#inspect.details-prototype .ip-page .inspect-contact-body,
#inspect.details-prototype .ip-page .inspect-access-rows{padding:0}
#inspect.details-prototype .ip-page .inspect-contact-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:12px 14px;border-bottom:1px solid var(--vb-line)}
#inspect.details-prototype .ip-page .inspect-contact-heading h3,
#inspect.details-prototype .ip-page #inspect-attachment-storage h3{margin:0;color:var(--vb-ink);font-size:var(--vb-type-px-13);font-weight:700;letter-spacing:0;text-transform:none}
#inspect.details-prototype .ip-page #inspect-add-contact{min-height:40px;padding:5px 12px;border:1px solid var(--vb-line);border-radius:var(--vb-radius-pill);background:var(--vb-surface-2);color:var(--vb-ink);font-size:var(--vb-type-px-12);font-weight:700}
#inspect.details-prototype .ip-page #inspect-add-contact:hover{border-color:var(--vb-line-strong)}
#inspect.details-prototype .ip-page #inspect-contact-list,
#inspect.details-prototype .ip-page #inspect-contact-options{margin:0;padding:0;list-style:none}
#inspect.details-prototype .ip-page #inspect-contact-list li,
#inspect.details-prototype .ip-page #inspect-contact-options li{display:flex;align-items:center;gap:10px;min-height:58px;margin:0;padding:8px 14px;border-bottom:1px solid var(--vb-line);border-radius:0;background:transparent}
#inspect.details-prototype .ip-page #inspect-contact-list li:last-child,
#inspect.details-prototype .ip-page #inspect-contact-options li:last-child{border-bottom:0}
#inspect.details-prototype .ip-page .contact-info{min-width:0;flex:1}
#inspect.details-prototype .ip-page .contact-name{color:var(--vb-ink);font-size:var(--vb-type-px-13);font-weight:700}
#inspect.details-prototype .ip-page .contact-meta{color:var(--vb-ink-soft);font-size:var(--vb-type-px-11)}
#inspect.details-prototype .ip-page .contact-access{min-height:40px;padding:4px 10px;border:1px solid var(--vb-line);border-radius:var(--vb-radius-pill);background:var(--vb-surface-2);color:var(--vb-ink);font-size:var(--vb-type-px-11);font-weight:700}
#inspect.details-prototype .ip-page #inspect-contact-picker{padding:8px 0 0;border-top:1px solid var(--vb-line);background:var(--vb-surface-2)}
#inspect.details-prototype .ip-page #inspect-contact-picker[hidden]{display:none}
#inspect.details-prototype .ip-page #inspect-contact-search{display:block;width:calc(100% - 28px);margin:0 14px 8px;padding:9px 11px;border:1px solid var(--vb-line-strong);border-radius:var(--vb-radius-10);background:var(--vb-surface);color:var(--vb-ink)}
#inspect.details-prototype .ip-page .inspect-lede{margin:0;padding:12px 14px;border-top:1px solid var(--vb-line);color:var(--vb-ink-soft);font-size:var(--vb-type-px-12);line-height:1.4}
#inspect.details-prototype .ip-page .inspect-lede button{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:none;color:var(--vb-ink);text-decoration:underline;text-underline-offset:2px}
#inspect.details-prototype .ip-page #inspect-contact-status:empty,
#inspect.details-prototype .ip-page #inspect-attachment-status:empty{display:none}
#inspect.details-prototype .ip-page #inspect-contact-status,
#inspect.details-prototype .ip-page #inspect-attachment-status{margin:0;padding:10px 14px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12)}
#inspect.details-prototype .ip-page .inspect-access-row{display:flex;align-items:center;gap:11px;min-height:58px;margin:0;padding:9px 14px;border:0;border-bottom:1px solid var(--vb-line);border-radius:0;background:transparent;color:var(--vb-ink);box-shadow:none;text-align:left}
#inspect.details-prototype .ip-page .inspect-access-row:last-child{border-bottom:0}
#inspect.details-prototype .ip-page button.inspect-access-row:hover{background:var(--vb-surface-2)}
#inspect.details-prototype .ip-page .inspect-access-row>svg:first-child{width:18px;height:18px;color:var(--vb-ink-soft)}
#inspect.details-prototype .ip-page .inspect-access-copy{min-width:0;flex:1}
#inspect.details-prototype .ip-page .inspect-access-copy strong{color:var(--vb-ink);font-size:var(--vb-type-px-13)}
#inspect.details-prototype .ip-page .inspect-access-copy small{color:var(--vb-ink-soft);font-size:var(--vb-type-px-11)}
#inspect.details-prototype .ip-page #inspect-toggle-protection{width:44px;height:40px;background:transparent}
#inspect.details-prototype .ip-page #inspect-toggle-protection[aria-checked="true"]{background:transparent}
#inspect.details-prototype .ip-page #inspect-toggle-protection::before{content:"";position:absolute;top:8px;left:2px;width:40px;height:24px;border-radius:var(--vb-radius-pill);background:var(--vb-line-strong)}
#inspect.details-prototype .ip-page #inspect-toggle-protection[aria-checked="true"]::before{background:var(--vb-ink)}
#inspect.details-prototype .ip-page #inspect-toggle-protection span{top:11px;left:5px}
#inspect.details-prototype .ip-page #inspect-toggle-protection:focus-visible{outline:2px solid var(--vb-ink);outline-offset:2px}
#inspect.details-prototype .ip-page #inspect-create-limit{display:block;margin:0;border:1px solid var(--vb-line);border-radius:var(--vb-radius-16);background:var(--vb-surface);box-shadow:var(--vb-shadow);overflow:hidden}
#inspect.details-prototype .ip-page #inspect-create-limit[hidden]{display:none}
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy{margin:0;padding:15px;border:0;background:transparent;box-shadow:none}
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy-top strong{color:var(--vb-ink);font-size:var(--vb-type-px-13)}
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy-badge{display:none}
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy-switch{display:flex;align-items:center;justify-content:center;width:44px;height:40px;margin-left:auto}
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy-switch input{inset:0;width:44px;min-height:40px}
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy-switch input:disabled+span{opacity:.55;cursor:not-allowed}
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy-controls label{display:flex;align-items:center;gap:6px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-12)}
#inspect.details-prototype .ip-page #inspect-create-limit input[type="number"]{width:62px;min-height:40px;border:1px solid var(--vb-line-strong);border-radius:var(--vb-radius-10);background:var(--vb-surface-2);color:var(--vb-ink);text-align:center}
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy-controls button{min-height:40px;padding:6px 12px;border:1px solid var(--vb-line-strong);border-radius:var(--vb-radius-10);background:var(--vb-surface-2);color:var(--vb-ink);font-size:var(--vb-type-px-12);font-weight:700}
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy-note,
#inspect.details-prototype .ip-page #inspect-create-limit .idle-policy-status{margin:7px 0 0;color:var(--vb-ink-soft);font-size:var(--vb-type-px-11)}
#inspect.details-prototype .ip-page #inspect-attachment-storage{padding:0}
#inspect.details-prototype .ip-page #inspect-attachment-storage h3{padding:13px 14px;border-bottom:1px solid var(--vb-line)}
#inspect.details-prototype .ip-page #inspect-attachment-rows{margin:0;padding:0}
#inspect.details-prototype .ip-page #inspect-attachment-rows>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:47px;margin:0;padding:9px 14px;border-bottom:1px solid var(--vb-line)}
#inspect.details-prototype .ip-page #inspect-attachment-rows dt{color:var(--vb-ink-soft);font-size:var(--vb-type-px-12)}
#inspect.details-prototype .ip-page #inspect-attachment-rows dd{margin:0;color:var(--vb-ink);font-size:var(--vb-type-px-12);font-weight:700;text-align:right}
#inspect.details-prototype .ip-page #inspect-attachment-empty,
#inspect.details-prototype .ip-page .inspect-attachment-help{margin:0;padding:10px 14px;color:var(--vb-ink-soft);font-size:var(--vb-type-px-11);line-height:1.4}
#inspect.details-prototype .ip-page #inspect-attachment-empty[hidden]{display:none}
#role-editor-form [data-mail-feature][hidden]{display:none}

/* The same inline policy rows are used in Details and Manage. */
.inline-permission-editor{width:100%;min-width:0}
.inline-permission-editor[hidden],.inline-permission-group[hidden],.inline-permission-card[hidden]{display:none!important}
.inline-permission-editor form,#role-editor-form{display:grid;gap:12px;margin:0}
.inline-permission-group{display:grid;gap:6px;min-width:0;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.inline-permission-group .ip-heading{margin:0;padding:0 2px;color:var(--vb-ink-soft);font-size:11px;font-weight:750;letter-spacing:.09em;line-height:1.5;text-transform:uppercase}
.inline-permission-group-heading{display:flex;align-items:center;gap:8px;min-height:38px}
.inline-permission-group-heading .ip-heading{flex:1}
.inline-permission-group-count{color:var(--vb-ink-soft);font-size:12px;font-weight:500;white-space:nowrap}
.inline-permission-master-switch{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:40px;cursor:pointer}
.inline-permission-master-switch input{position:absolute;inset:0;width:100%!important;height:100%!important;margin:0;opacity:0;cursor:pointer}
.inline-permission-master-switch span{position:relative;width:42px;height:25px;border-radius:99px;background:color-mix(in srgb,var(--vb-ink) 30%,var(--vb-surface));transition:background .18s}
.inline-permission-master-switch span::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--vb-surface);box-shadow:0 1px 3px #0003;transition:transform .18s}
.inline-permission-master-switch input:checked+span{background:var(--vb-ink)}
.inline-permission-master-switch input:checked+span::after{transform:translateX(17px)}
.inline-permission-master-switch input:indeterminate+span{background:var(--vb-ink-soft)}
.inline-permission-master-switch input:indeterminate+span::before{content:"";position:absolute;z-index:1;top:11.5px;left:16.5px;width:9px;height:2px;border-radius:2px;background:var(--vb-ink-soft)}
.inline-permission-master-switch input:indeterminate+span::after{transform:translateX(8.5px)}
.inline-permission-master-switch input:focus-visible+span{outline:2px solid var(--vb-ink);outline-offset:3px}
.inline-permission-master-switch input:disabled+span{opacity:.55}
.inline-permission-card{min-width:0;margin:0!important;padding:0!important;border:1px solid var(--vb-line)!important;border-radius:12px!important;background:var(--vb-surface)!important;box-shadow:none!important;overflow:hidden}
.inline-permission-card>.role-capability{display:block!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.inline-permission-card>.role-capability[hidden]{display:none!important}
.inline-permission-card .role-capability-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin:0;padding:9px 15px;border-bottom:1px solid var(--vb-line)}
.inline-permission-card .inline-permission-quick-row{min-height:44px;padding:5px 14px}
.inline-permission-card .inline-permission-quick-row>span{gap:0}
.inline-permission-card .inline-permission-quick-row small{font-size:10px;line-height:1.25}
.inline-permission-card>.role-capability[data-mail-feature] .role-capability-toggle{min-height:44px;padding:5px 14px}
.inline-permission-card>.role-capability[data-mail-feature] .role-capability-toggle small{font-size:10px;line-height:1.25}
.inline-permission-card .role-capability-toggle>span{min-width:0;display:grid;gap:2px}
.inline-permission-card .role-capability-toggle strong{color:var(--vb-ink);font-size:13px}
.inline-permission-card .role-capability-toggle small{color:var(--vb-ink-soft);line-height:1.4}
.inline-permission-card .role-capability-toggle input[type=checkbox]{appearance:none!important;position:relative;width:42px!important;height:25px!important;min-width:42px;min-height:25px;margin:0;flex:none;border:0!important;border-radius:99px!important;background:color-mix(in srgb,var(--vb-ink) 30%,var(--vb-surface))!important;opacity:1!important;cursor:pointer}
.inline-permission-card .role-capability-toggle input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--vb-surface);box-shadow:0 1px 3px #0003;transition:transform .18s}
.inline-permission-card .role-capability-toggle input[type=checkbox]:checked{background:var(--vb-ink)!important}
.inline-permission-card .role-capability-toggle input[type=checkbox]:checked::after{transform:translateX(17px)}
.inline-permission-card .role-capability-toggle input[type=checkbox]:indeterminate{background:var(--vb-ink-soft)!important}
.inline-permission-card .role-capability-toggle input[type=checkbox]:indeterminate::before{content:"";position:absolute;z-index:1;top:11.5px;left:16.5px;width:9px;height:2px;border-radius:2px;background:var(--vb-ink-soft)}
.inline-permission-card .role-capability-toggle input[type=checkbox]:indeterminate::after{transform:translateX(8.5px)}
.inline-permission-card .role-capability-toggle input[type=checkbox]:disabled{opacity:.55!important;cursor:default}
.inline-permission-card .role-capability-toggle input[type=checkbox]:focus-visible{outline:2px solid var(--vb-ink);outline-offset:3px}
.inline-permission-card .inline-permission-tool-list input[type=checkbox]{width:18px!important;height:18px!important;min-width:18px;flex:none;accent-color:var(--vb-ink)}
.inline-permission-card .role-capability-options{margin:0;padding:0;border:0;border-bottom:1px solid var(--vb-line);background:transparent}
.inline-permission-card .role-capability-options>summary{min-height:44px;display:flex;align-items:center;padding:0 15px;color:var(--vb-ink);font-size:13px;font-weight:600;text-transform:none;cursor:pointer}
.inline-permission-card .role-capability-options>summary::after{color:var(--vb-ink-soft)}
.inline-permission-card .role-capability-fields{padding:0 15px 12px}
.inline-permission-card .role-capability-fields input[type=number]{max-width:100%;min-height:38px}
.inline-permission-tools{border-bottom:1px solid var(--vb-line)}
.inline-permission-tools:last-child{border-bottom:0}
.inline-permission-tools>summary{min-height:48px;display:flex;align-items:center;gap:8px;padding:0 15px;color:var(--vb-ink);font-size:13px;font-weight:600;cursor:pointer;list-style:none}
.inline-permission-tools>summary::-webkit-details-marker{display:none}
.inline-permission-tools>summary::marker{content:''}
.inline-permission-tools>summary::before{display:none!important}
.inline-permission-tools>summary::after{content:none!important}
.inline-permission-tools-label{flex:1}
.inline-permission-count{color:var(--vb-ink-soft);font-size:12px;font-weight:500;white-space:nowrap}
.inline-permission-chevron{width:7px;height:7px;flex:none;margin-left:4px;border-right:1.5px solid var(--vb-ink-soft);border-bottom:1.5px solid var(--vb-ink-soft);transform:rotate(45deg);transition:transform .15s}
.inline-permission-tools[open] .inline-permission-chevron{transform:rotate(225deg)}
.inline-permission-tool-list{display:block;min-width:0;padding:0}
.inline-permission-tool-list>.inline-permission-tool-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 14px;border-bottom:1px solid var(--vb-line);overflow-wrap:anywhere;color:var(--vb-ink)}
.inline-permission-tool-list>.inline-permission-tool-row:last-child{border-bottom:0}
.inline-permission-tool-row>span{display:grid;gap:2px;min-width:0}
.inline-permission-tool-row strong{font-size:12px;font-weight:700;line-height:1.3}
.inline-permission-tool-row small{color:var(--vb-ink-soft);font-size:11px;line-height:1.3}
.inline-permission-editor #role-editor-status{margin:0;padding:8px 12px;border:1px solid var(--vb-line);border-radius:9px;background:var(--vb-surface);color:var(--vb-ink-soft);font-size:12px}
.inline-permission-editor #role-editor-status:empty{display:none}
.inline-permission-editor #role-editor-status[data-state=error]{color:var(--vb-danger-text);border-color:currentColor}
.inline-permission-retry{justify-self:start;min-height:36px;padding:0 12px;border:1px solid var(--vb-line);border-radius:8px;background:var(--vb-surface);color:var(--vb-ink);font-weight:700}
.inline-permission-retry[hidden]{display:none}
#inspect.details-prototype #inspect-inline-permissions{display:block}
#inspect.details-prototype .ip-page #inspect-access{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
#inspect.details-prototype .ip-page #inspect-access .inspect-access-rows{display:grid;gap:12px;padding:0;border:0}
#inspect.details-prototype .ip-page #inspect-access .inspect-access-meta-card{border:1px solid var(--vb-line);border-radius:12px;background:var(--vb-surface);overflow:hidden}
#role-assignments .inline-permission-editor{padding:12px;box-sizing:border-box}
@media(max-width:600px){.inline-permission-tool-list>.inline-permission-tool-row{padding:6px 13px}}
/* Created-box limit is three ordinary rows inside Manage boxes. */
.inline-permission-card #inspect-create-limit,.inline-permission-card #role-create-limit{display:block;margin:0!important;padding:0!important;border:0!important;border-top:1px solid var(--vb-line)!important;border-bottom:1px solid var(--vb-line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.inline-permission-tool-list>#inspect-create-limit,.inline-permission-tool-list>#role-create-limit{border-top:0!important}
.inline-permission-card #inspect-create-limit[hidden],.inline-permission-card #role-create-limit[hidden]{display:none!important}
.inline-permission-card .box-create-limit{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.inline-permission-card .box-create-limit .idle-policy-top{min-height:48px;margin:0;padding:4px 15px;border-bottom:1px solid var(--vb-line)}
.inline-permission-card .box-create-limit .idle-policy-top strong{color:var(--vb-ink);font-size:13px}
.inline-permission-card .box-create-limit .idle-policy-badge{display:none}
.inline-permission-card .box-create-limit .idle-policy-controls{display:flex;align-items:center;gap:8px;min-height:54px;margin:0;padding:5px 15px;border-bottom:1px solid var(--vb-line)}
.inline-permission-card .box-create-limit .idle-policy-controls label{display:flex;align-items:center;gap:6px;min-width:0;color:var(--vb-ink);font-size:12px;white-space:nowrap}
.inline-permission-card .box-create-limit .idle-policy-controls input{width:56px;min-height:36px;background:var(--vb-surface-2);color:var(--vb-ink)}
.inline-permission-card .box-create-limit .idle-policy-controls button{min-height:36px;margin-left:auto;padding:5px 10px;border:1px solid var(--vb-line-strong);border-radius:8px;background:var(--vb-surface-2);color:var(--vb-ink);font-size:12px;font-weight:700}
.inline-permission-card .box-create-limit .idle-policy-note{margin:0;padding:9px 15px 0;color:var(--vb-ink-soft);font-size:11px}
.inline-permission-card .box-create-limit .idle-policy-status{margin:0;padding:3px 15px 10px;color:var(--vb-ink-soft);font-size:11px}
.inline-permission-card .box-create-limit .idle-policy-retry{margin:0 15px 10px}
.inline-permission-card .box-create-limit .mail-switch{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:44px;margin-left:auto;cursor:pointer}
.inline-permission-card .box-create-limit .mail-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.inline-permission-card .box-create-limit .mail-switch span{position:relative;width:42px;height:25px;border-radius:99px;background:color-mix(in srgb,var(--vb-ink) 30%,var(--vb-surface))}
.inline-permission-card .box-create-limit .mail-switch span::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--vb-surface);box-shadow:0 1px 3px #0003}
.inline-permission-card .box-create-limit .mail-switch input:checked+span{background:var(--vb-ink)}
.inline-permission-card .box-create-limit .mail-switch input:checked+span::after{transform:translateX(17px)}
.inline-permission-card .box-create-limit .mail-switch input:focus-visible+span{outline:2px solid var(--vb-ink);outline-offset:3px}
.inline-permission-card .box-create-limit .mail-switch input:disabled+span{opacity:.55}

@media(max-width:600px){#inspect.details-prototype .ip-page .ip-policy-compact .run-budget-actions button{min-width:40px;flex-shrink:0}}