/* One workshop, one real form. Only the surrounding agent panel scrolls. */
#v-home.agent-workspace #cgchatpanel.vw-host.vw-panel:has(.vaia-workshop){max-width:1120px}
.ag .ag-pn.vaia-workshop{container-type:inline-size;container-name:vaia-customizer;display:flex;flex-direction:column;gap:24px;min-width:0}
.vaia-workshop .vwk-heading{display:flex;flex-direction:column;gap:7px;min-width:0}
.vaia-workshop .vwk-heading p{font-size:13px;color:#aeb9ce;max-width:68ch}
.vwk-body{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:26px;align-items:start;min-width:0}
.vwk-preview{position:sticky;top:0;min-width:0;padding:0 14px 12px;text-align:center}
.vwk-scene{height:340px;position:relative;isolation:isolate}
.vwk-scene::before{content:'';position:absolute;inset:18% 12%;z-index:-1;opacity:.22;background:radial-gradient(circle at 15% 20%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 83% 66%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 66% 15%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 24% 82%,#fff 0 1px,transparent 1.5px)}
.vwk-avatar{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);z-index:1}
.vwk-avatar>.vorb{--s:230px!important}
.vwk-avatar.is-receiving .vo-in{scale:1.04}
.vwk-caption{display:flex;flex-direction:column;gap:7px;margin:0 0 22px;min-width:0}
.vwk-caption>b{font-size:25px;line-height:1.2;color:#f4f0fb;overflow-wrap:anywhere;font-weight:650;letter-spacing:-.6px}
.vwk-caption>span{font-size:12px;color:#a7b3cd}
.vwk-preview>.ag-f{max-width:320px;margin:0 auto;text-align:left}
.vwk-preview>.ag-f input{border:0!important;background:#ffffff08!important;box-shadow:none!important}
.vwk-controls{min-width:0}
.vwk-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:5px;margin-bottom:20px;background:#171923ed;border-radius:17px;position:sticky;top:0;z-index:3}
.vwk-tabs button{min-height:42px;border:0!important;border-radius:12px;padding:10px;background:transparent;color:#aeb8d2;font:600 13px var(--sans,system-ui);cursor:pointer;transition:background .2s,color .2s}
.vwk-tabs button[aria-selected=true]{background:linear-gradient(130deg,#c7b5ff23,#b6d6ff14);color:#fbf8ff}
.vwk-tabs button:focus-visible{outline:2px solid #bed0ff;outline-offset:2px}
.vwk-tabpanel{min-width:0;overflow:visible;display:flex;flex-direction:column;gap:12px}
.vwk-tabpanel[hidden],.vwk-rig[hidden],.vwk-vessel[hidden]{display:none!important}
.vaia-workshop .ag-shapes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 5px;max-height:none!important;overflow:visible!important;margin:0;padding:0;border:0}
.vaia-workshop .ag-shapes legend{margin:0 0 14px;padding:0;background:none;position:static;font-size:12px;color:#aab6ce}
.vaia-workshop .ag-shapes label{gap:4px;min-width:0}
.vaia-workshop .ag-shapes label>span{min-height:48px;padding:4px 0;background:transparent!important;border:0!important;box-shadow:none!important}
.vaia-workshop .ag-shapes label>input:checked+span{background:transparent!important;box-shadow:none!important}
.vaia-workshop .ag-shapes label>b{font-size:10px;line-height:1.25;overflow-wrap:anywhere;color:#9eabc4;min-height:25px}
.vaia-workshop .ag-shapes label:has(input:checked)>b{color:#fff}
.vaia-workshop .ag-shapes label:has(input:checked)>b::after{content:'';display:block;width:4px;height:4px;border-radius:50%;margin:4px auto 0;background:#d1bfff}
.vaia-workshop .ag-shapes label>input:focus-visible+span{outline:2px solid #bccbff;outline-offset:2px;border-radius:12px}
.vaia-workshop .vaia-alchemy{margin:0;border:0;border-radius:0;background:transparent;overflow:visible}
.vaia-workshop .vx-alchemy-stage{display:none}
.vaia-workshop .vx-alchemy-tabs{margin:0 0 14px}
.vaia-workshop .vx-alchemy-swatches{padding:0;gap:8px 3px}
.vaia-workshop .vx-alchemy-custom{padding:0}
.vaia-workshop .vx-alchemy-bottom{padding:16px 0 0;margin-top:14px}
.vaia-workshop .vx-alchemy-picker{padding:14px}
.vaia-workshop .vx-alchemy-picker-result>.vorb{display:none}
.vaia-workshop .vx-alchemy-well{padding:10px 12px;gap:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--pigment) 15%,#202331),#ffffff05)}
.vaia-workshop .vx-alchemy-well[aria-expanded=true]{background:linear-gradient(135deg,color-mix(in srgb,var(--pigment) 26%,#252837),#ffffff09);box-shadow:0 4px 18px #0002}
.vaia-workshop .vx-alchemy-sv{height:150px}
.vaia-workshop .ag-brain-intro{margin:0}
.vaia-workshop .ag-specialties{margin:0;gap:7px}
.vaia-workshop .ag-specialties button{font-size:12px;background:#ffffff08;border:0;min-height:38px;white-space:normal}
.vaia-workshop .ag-specialties button[aria-pressed=true]{background:#a68ad42c;color:#fff}
.vaia-workshop .ag-pl-note{font-size:12px;line-height:1.55}
.vaia-workshop .vwk-footer{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:1px solid #ffffff0b}
.vaia-workshop .vwk-footer>.ag-pn-go{justify-content:flex-end}
.vaia-workshop .vwk-footer>.ag-err{margin:0}

/* The same pigments used by the color controls pour directly into the preview. */
.vwk-rig{position:absolute;inset:0;pointer-events:none;z-index:2}
.vwk-vessel{position:absolute;top:3%;left:12%;width:16%;max-width:72px;min-width:44px}
.vwk-vessel[data-vwk-vessel="1"]{left:auto;right:12%;transform:scaleX(-1)}
.vwk-vessel[data-vwk-vessel="2"]{left:1%;top:35%;width:14%;max-width:62px;min-width:38px}
.vwk-vessel[data-vwk-vessel="3"]{left:auto;right:1%;top:35%;width:14%;max-width:62px;min-width:38px;transform:scaleX(-1)}
.vwk-flask{display:block;transform:rotate(0deg);transform-origin:70% 70%;transition:transform .5s cubic-bezier(.2,1.3,.35,1)}
.vwk-vessel .vx-alchemy-beaker{width:100%;height:auto}
.vwk-vessel.is-pouring .vwk-flask{transform:rotate(32deg)}
.vwk-vessel.is-pouring .vx-beaker-liquid{animation:vwk-liquid .7s ease-in-out infinite alternate;transform-origin:50% 75%}
.vwk-vessel.is-pouring .vx-beaker-bubble{animation:vwk-bubble 1s ease-out infinite}
.vwk-streams{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vwk-streams path{stroke:var(--pigment,#d650ff);stroke-width:5;stroke-linecap:round;stroke-dasharray:12 7;opacity:0;transition:opacity .18s}
.vwk-streams path.is-pouring{opacity:.88;animation:vwk-stream .32s linear infinite}
@keyframes vwk-stream{to{stroke-dashoffset:-19}}
@keyframes vwk-liquid{to{transform:translateY(2px) rotate(-8deg)}}
@keyframes vwk-bubble{to{transform:translateY(-12px);opacity:0}}
@container vaia-customizer (max-width:720px){
  .vwk-body{grid-template-columns:minmax(0,1fr);gap:20px}
  .vwk-preview{position:relative;padding:0 10px}
  .vwk-scene{height:210px;max-width:400px;margin:0 auto}
  .vwk-avatar>.vorb{--s:142px!important}
  .vwk-caption{margin-bottom:15px;gap:5px}.vwk-caption>b{font-size:22px}
  .vwk-preview>.ag-f{max-width:none}
  .vaia-workshop .ag-shapes{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 5px}
  .vwk-tabs{margin-bottom:16px}
  .vaia-workshop .vx-alchemy-beaker{width:36px;height:44px}
  .vwk-vessel .vx-alchemy-beaker{width:100%;height:auto}
  .vaia-workshop .vx-alchemy-well{padding:10px 9px;gap:8px}
  .vaia-workshop .vwk-footer>.ag-pn-go{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .vwk-tabs button,.vwk-flask,.vwk-streams path{transition:none}
  .vwk-vessel.is-pouring .vwk-flask{transform:none}
  .vwk-vessel.is-pouring :is(.vx-beaker-liquid,.vx-beaker-bubble),.vwk-streams path.is-pouring{animation:none}
  .vwk-streams{display:none}.vwk-avatar.is-receiving .vo-in{scale:1}
}
@media(max-width:600px){
  .ag .ag-pn.vaia-workshop{gap:12px}
  .vaia-workshop .vwk-heading h3,.vaia-workshop .vwk-heading>p{display:none}
  .vwk-body{gap:8px}
  .vwk-preview{display:grid;grid-template-columns:124px minmax(0,1fr);gap:0 12px;align-items:center;padding:0}
  .vwk-scene{grid-column:1;grid-row:1 / span 2;width:124px;height:110px;margin:0}
  .vwk-avatar>.vorb{--s:98px!important}
  .vwk-preview>.ag-f{grid-column:2;grid-row:1;width:100%;align-self:end}
  .vwk-preview>.ag-f input{min-height:44px;padding:10px;font-size:14px}
  .vwk-caption{grid-column:2;grid-row:2;margin:7px 0 0;align-self:start;text-align:left}
  .vwk-caption>b{display:none}.vwk-caption>span{font-size:11px;line-height:1.45}
  .vwk-tabs{padding:4px;margin-bottom:10px}
  .vwk-tabs button{min-height:38px;padding:8px}
  .vaia-workshop .ag-shapes{gap:4px 3px}
  .vaia-workshop .ag-shapes legend{display:none}
  .vaia-workshop .ag-shapes label>span{min-height:40px;padding:2px 0}
  .vaia-workshop .ag-shapes label>b{min-height:18px;font-size:9px}
  .vaia-workshop .ag-shapes label:has(input:checked)>b::after{margin-top:2px}
  .vaia-workshop .vwk-footer{padding-top:8px}
  .vaia-workshop .vwk-footer>.ag-pn-go{gap:7px}
  .vaia-workshop .vwk-footer button{font-size:12px;min-height:40px;padding:9px 12px}
  .vwk-vessel{min-width:22px}.vwk-vessel[data-vwk-vessel="2"],.vwk-vessel[data-vwk-vessel="3"]{min-width:20px}
}

.ag-quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin:16px 0}.ag-quick-shape{display:grid;justify-items:center;gap:9px;padding:16px 8px;border:1px solid #a99bff25;border-radius:18px;background:#201e3244;color:inherit;cursor:pointer}.ag-quick-shape:hover{background:#8f6cff24;border-color:#aa8dff88}.ag-quick-shape b{font-size:12px}.ag-quick-create{max-width:850px;margin:auto}.ag-quick-create summary{cursor:pointer;padding:12px 0}.vwk-preview label.ag-f{width:100%}.vwk-preview #agmn{font-size:clamp(22px,3vw,34px);font-weight:750;text-align:center;background:transparent;border:1px solid transparent}.vwk-preview #agmn:hover,.vwk-preview #agmn:focus{border-color:#a88bff77}.ag-save-status{color:#bfb8ce;font-size:12px}
.ag-quick-shape[aria-pressed=true]{border-color:#aa8bff;background:#7b53df2b;box-shadow:0 0 0 2px #aa8bff55}
/* Keep the preview and color controls together within a laptop-height view. */
.ag .ag-pn.vaia-workshop{gap:10px;padding-top:10px;padding-bottom:10px}.vaia-workshop .vwk-body{gap:16px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.vaia-workshop .vwk-scene{height:220px}.vaia-workshop .vwk-avatar>.vorb{--s:150px!important}.vaia-workshop .vwk-caption{margin-bottom:10px}.vaia-workshop .vwk-tabs{margin-bottom:8px;padding:3px}.vaia-workshop .vwk-tabs button{min-height:36px;padding:7px}.vaia-workshop .vwk-heading p{margin:0}.vaia-workshop .vwk-preview{padding:0 6px}.vaia-workshop .vwk-rig{display:none}
@media(max-width:600px){.vaia-workshop .vwk-body{grid-template-columns:1fr;gap:7px}.vaia-workshop .vwk-preview{position:static;display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;text-align:left}.vaia-workshop .vwk-scene{height:64px;grid-row:span 2}.vaia-workshop .vwk-avatar>.vorb{--s:55px!important}.vaia-workshop .vwk-avatar{top:50%}.vaia-workshop .vwk-caption{margin:0;font-size:10px}.vaia-workshop .vwk-preview>.ag-f{margin:0;width:100%;max-width:none}.vaia-workshop .vwk-preview input{padding:6px!important;font-size:17px!important}.vaia-workshop .vwk-heading p{display:none}}
.ag-quick-create #agnstep{margin:0 0 12px;font-size:12px;color:#b4a7d2}.ag-quick-create #agnappearance .vaia-alchemy{margin:10px 0}.ag-quick-create .agn-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}.ag-quick-create .agn-details small{font-weight:400;color:#9991ac}.ag-quick-create #agncolors .vx-alchemy-stage{min-height:100px;padding:12px}.ag-quick-create #agncolors .vx-alchemy-stage .vorb{--s:76px!important}.ag-quick-create #agncolors .vx-alchemy-orbit{display:none}.ag-quick-create #agncreate{width:100%;min-height:44px}@media(max-width:550px){.ag-quick-create .agn-details{gap:8px}.ag-quick-create .agn-details input,.ag-quick-create .agn-details select{min-width:0;width:100%;font-size:13px;padding:9px}.ag-quick-create #agncolors .vx-alchemy-stage{min-height:75px;padding:8px}.ag-quick-create #agncolors .vx-alchemy-stage .vorb{--s:55px!important}}
/* Existing-agent customization is a compact overlay, with no page-length grid. */
#agent #agpanel:has(#agmemf.vaia-workshop){position:fixed!important;inset:0!important;z-index:120!important;padding:20px!important;background:#040611b8;backdrop-filter:blur(10px);display:grid;place-items:center;overflow:visible!important}
#agent #agpanel #agmemf.vaia-workshop{width:min(100%,920px);max-height:calc(100dvh - 40px);margin:0!important;padding:18px!important;border:1px solid #ffffff24;border-radius:22px;background:#141522;box-shadow:0 22px 90px #0008;gap:10px}
#agmemf.vaia-workshop .vwk-body{grid-template-columns:170px minmax(0,1fr);gap:16px}#agmemf.vaia-workshop .vwk-scene{height:150px}#agmemf.vaia-workshop .vwk-avatar>.vorb{--s:105px!important}#agmemf.vaia-workshop .ag-shapes{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:5px!important;margin:0!important;padding:0!important;border:0}#agmemf.vaia-workshop .ag-shapes{grid-template-columns:repeat(8,minmax(0,1fr))!important}#agmemf .ag-shapes legend{display:none}#agmemf .ag-shapes label{gap:3px!important;font-size:9px!important}#agmemf .ag-shapes label>span{padding:4px!important;min-height:43px!important;border-radius:9px!important}#agmemf .ag-shapes .vorb{--s:34px!important}#agmemf .ag-shapes label>b{font-size:9px;line-height:11px}#agmemf .vwk-caption>span{font-size:10px}#agmemf .ag-pn-go{margin:0;gap:8px}#agmemf .ag-pn-go button{min-height:36px;padding:7px 10px;font-size:11px}.vwk-shape-pages{display:flex;justify-content:space-between;align-items:center;gap:10px}.vwk-shape-pages button{min-height:40px;padding:7px 12px;background:#ffffff0a;border:1px solid #ffffff18;border-radius:10px;color:inherit}.vwk-shape-pages span{font-size:12px;color:#beb2d8}
@media(max-width:600px){#agent #agpanel:has(#agmemf.vaia-workshop){padding:10px!important}#agent #agpanel #agmemf.vaia-workshop{padding:12px!important;max-height:calc(100dvh - 20px);gap:7px}#agmemf.vaia-workshop .vwk-body{grid-template-columns:1fr;gap:7px}#agmemf.vaia-workshop .vwk-scene{height:56px}#agmemf.vaia-workshop .vwk-avatar>.vorb{--s:49px!important}#agmemf.vaia-workshop .ag-shapes{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}#agmemf .ag-shapes label>span{min-height:48px!important}#agmemf .ag-shapes .vorb{--s:38px!important}#agmemf .ag-pn-go{flex-wrap:wrap}#agmemf .ag-pn-go button{min-height:40px}#agmemf .ag-edit-top h3{font-size:17px;margin:0}#agmemf .ag-edit-top button{font-size:11px;padding:6px}}
/* Creation step two shares the compact color workspace, not the full catalog cards. */
#agent .ag-quick-create:has(#agnappearance:not([hidden])){max-width:900px;margin:0 auto;padding:10px 14px;gap:6px}
#agent .ag-quick-create:has(#agnappearance:not([hidden]))>h3{margin:0;font-size:20px}
#agent #agnappearance #agncolors.vaia-alchemy{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px;margin:6px 0;padding:8px;border-radius:14px}
#agent #agnappearance #agncolors .vx-alchemy-stage{grid-column:1;grid-row:1/span 4;min-height:80px;max-height:140px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px}
#agent #agnappearance #agncolors .vx-alchemy-caption{gap:3px;text-align:center}#agent #agnappearance #agncolors .vx-alchemy-caption small,#agent #agnappearance #agncolors .vx-alchemy-caption>span{display:none}#agent #agnappearance #agncolors .vx-alchemy-caption b{font-size:14px}
#agent #agnappearance #agncolors .vx-alchemy-tabs,#agent #agnappearance #agncolors .vx-alchemy-swatches,#agent #agnappearance #agncolors .vx-alchemy-custom{grid-column:2;margin:0;padding:0}
#agent #agnappearance #agncolors .vx-alchemy-swatches{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
#agent #agnappearance #agncolors .vx-alchemy-swatches button{padding:3px 2px;gap:2px;border-radius:8px;min-height:47px}
#agent #agnappearance #agncolors .vx-alchemy-swatches .vorb{--s:28px!important}#agent #agnappearance #agncolors .vx-alchemy-option{margin:0}#agent #agnappearance #agncolors .vx-alchemy-label{font-size:8px;line-height:10px}
#agent #agnappearance #agncolors .vx-alchemy-bottom{grid-column:1/-1;padding:4px 0;border-top:0}#agent #agnappearance #agncolors .vx-alchemy-bottom>span{font-size:10px}#agent #agnappearance #agncolors .vx-alchemy-surprise{padding:6px 9px;font-size:11px}
#agent #agnappearance .agn-details{margin:6px 0;gap:8px}#agent #agnappearance .agn-details label{font-size:11px;gap:3px}#agent #agnappearance .agn-details input,#agent #agnappearance .agn-details select{padding:7px 9px;min-height:35px;font-size:13px}
#agent #agnappearance #agncolors .vx-alchemy-sv{height:95px}#agent #agnappearance #agncolors .vx-alchemy-picker-head{display:none}
@media(max-width:600px){#agent .ag-quick-create:has(#agnappearance:not([hidden])){padding:8px}#agent #agnappearance #agncolors.vaia-alchemy{grid-template-columns:1fr;padding:7px;gap:6px}#agent #agnappearance #agncolors .vx-alchemy-stage{grid-column:1;grid-row:auto;flex-direction:row;min-height:42px;height:42px;padding:0;max-height:42px}#agent #agnappearance #agncolors .vx-alchemy-stage .vorb{--s:38px!important}#agent #agnappearance #agncolors .vx-alchemy-tabs,#agent #agnappearance #agncolors .vx-alchemy-swatches,#agent #agnappearance #agncolors .vx-alchemy-custom{grid-column:1}#agent #agnappearance #agncolors .vx-alchemy-swatches{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}#agent #agnappearance #agncolors .vx-alchemy-swatches button{min-height:44px;padding:2px}#agent #agnappearance #agncolors .vx-alchemy-swatches .vorb{--s:24px!important}#agent #agnappearance #agncolors .vx-alchemy-label{font-size:7px}#agent #agnappearance #agncolors .vx-alchemy-sv{height:80px}#agent #agnappearance .agn-details{grid-template-columns:1fr 1fr}}
/* Keep the guided color step compact, including signature gradients. */
#agent .ag-quick-create:has(#agnappearance:not([hidden])){padding:6px 10px!important;margin-top:0!important}
#agent .ag-quick-create:has(#agnappearance:not([hidden])) #agnstep{margin:0 0 4px}
#agent #agnappearance #agncolors.vaia-alchemy{margin:4px 0!important;padding:6px!important;gap:4px!important}
#agent #agnappearance #agncolors .vx-alchemy-stage{min-height:70px!important;height:70px!important;max-height:70px!important;grid-row:1/span 3;padding:2px!important}
#agent #agnappearance #agncolors .vx-alchemy-stage .vorb{--s:48px!important}
#agent #agnappearance #agncolors .vx-signatures{grid-column:2;margin:0!important;gap:4px}
#agent #agnappearance #agncolors .vx-signatures button{min-height:48px;height:48px;padding:2px;gap:2px;font-size:9px}
#agent #agnappearance #agncolors .vx-signatures .vorb{--s:28px!important}
#agent #agnappearance #agncolors .vx-alchemy-tabs button{min-height:32px;padding:5px 8px}
@media(max-width:600px){#agent #agnappearance #agncolors .vx-alchemy-stage{height:38px!important;min-height:38px!important;max-height:38px!important;grid-row:auto}#agent #agnappearance #agncolors .vx-signatures{grid-column:1}#agent #agnappearance #agncolors .vx-alchemy-stage .vorb{--s:32px!important}}
/* Reserve the whole mascot box so its SVG cannot overlap the editable name. */
#agmemf.vaia-workshop .vwk-scene{display:grid;place-items:center;height:140px;min-height:140px;margin-bottom:10px}
#agmemf.vaia-workshop .vwk-avatar{position:relative;left:auto;top:auto;transform:none;width:105px;height:105px;display:grid;place-items:center}
#agmemf.vaia-workshop .vwk-avatar>.vorb{width:105px!important;height:105px!important;--s:105px!important;flex:none}
@media(max-width:600px){#agmemf.vaia-workshop .vwk-scene{width:64px;height:64px;min-height:64px;margin:0}#agmemf.vaia-workshop .vwk-avatar,#agmemf.vaia-workshop .vwk-avatar>.vorb{width:49px!important;height:49px!important;--s:49px!important}}