.tester-variable-drawer.studio-variable-detail>.drawer-header{height:56px;min-height:56px;padding:8px 24px;gap:8px}
.studio-variable-detail>.drawer-header>div:first-of-type{flex:1;min-width:0}
.studio-variable-detail .drawer-kicker{font:500 10px/14px 'DM Sans',sans-serif;letter-spacing:.05em;color:#66746d}
.studio-variable-detail #tester-variable-title{display:inline;font:600 16px/20px 'Space Grotesk',sans-serif}
.studio-variable-active{margin-left:8px;white-space:nowrap;font:500 12px 'DM Sans',sans-serif;color:#3f7f55}
.studio-variable-detail :is(.drawer-context,.tester-variable-admin-values,.tester-variable-personal){display:none}
.studio-variable-detail .studio-drawer-scroll{padding:0;display:flex;flex-direction:column;overflow:hidden}
.studio-variable-panel{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;padding:0 24px;background:white}
.studio-variable-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;flex:none;padding:20px 0 12px;border-bottom:1px solid #cfe0d4}
:is(.studio-variable-back,.studio-variable-add,.studio-variable-toolbar button){display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;min-height:32px;margin:0;padding:0 10px;border:1px solid #cfe0d4;border-radius:6px;background:white;color:#1f2a24;font:500 12px 'DM Sans',sans-serif;box-shadow:none;transition:background-color .15s,border-color .15s}
:is(.studio-variable-back,.studio-variable-add){width:32px;padding:0;flex:none}
:is(.studio-variable-toolbar,.studio-variable-back,.studio-variable-add,.studio-variant-popup) svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.studio-variable-toolbar button:is(:hover,:focus-visible),:is(.studio-variable-back,.studio-variable-add):hover{background:#eaf4ed;border-color:#3f7f55;color:#3f7f55}
.studio-variable-toolbar button:disabled{opacity:.3;pointer-events:none}
.studio-variable-toolbar .studio-variable-ai{margin-left:auto}
.studio-variant-picker{display:inline-flex;align-items:center;overflow:hidden;height:32px;border:1px solid #cfe0d4;border-radius:6px}
.studio-variant-picker>button{border:0;border-radius:0;height:30px;min-height:30px}
.studio-variant-picker>button:first-child{width:28px;padding:0;border-right:1px solid #cfe0d4}
.studio-variant-picker>button:last-child{width:28px;padding:0;border-left:1px solid #cfe0d4}
.studio-variant-picker .studio-variant-trigger{gap:8px;padding:0 8px 0 4px;color:#66746d}
.studio-entry-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:52px;height:24px;padding:0 8px;border:1px solid #3f7f5533;border-radius:6px;background:#eaf4ed;color:#3f7f55;font:600 10px 'DM Sans',sans-serif;text-transform:uppercase;white-space:nowrap}
.studio-entry-badge.is-variant{border-color:#d4855a4d;background:#fbf4ee;color:#d4855a}
.studio-entry-badge.is-active{background:#3f7f55;border-color:#3f7f55;color:white}
.studio-entry-badge.is-variant.is-active{background:#d4855a;border-color:#d4855a;color:white}
.studio-entry-badge.is-inactive{background:#f2f4f2;border-color:#cfe0d4;color:#66746d;text-decoration:line-through;opacity:.6}
.studio-variant-popup{position:fixed;z-index:110;min-width:288px;width:346px;max-width:calc(100vw - 16px);max-height:min(320px,calc(100dvh - 16px));padding:6px;border:1px solid #cfe0d4;border-radius:6px;background:white;box-shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);overflow-y:auto}
.studio-variant-popup button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 8px;margin:0;border:0;border-radius:6px;background:white;text-align:left;color:#1f2a24;box-shadow:none}
.studio-variant-popup button:is(:hover,[aria-selected="true"]){background:#eaf4ed}
.studio-variant-popup button:focus-visible{outline:2px solid #3f7f55;outline-offset:-2px}
.studio-variant-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 14px 'DM Sans',sans-serif}
.studio-variant-popup .is-inactive .studio-variant-name{text-decoration:line-through;color:#66746d}
.studio-variant-popup time{font:400 11px 'JetBrains Mono',monospace;white-space:nowrap;color:#66746d}
.studio-variable-content{flex:1;min-height:0;overflow:auto;padding:32px 0 16px}
.studio-variable-content>small{display:block;margin-bottom:8px;font:400 11px 'DM Sans',sans-serif;color:#66746d;letter-spacing:.03em}
.studio-variable-title{padding:0 0 12px;border-bottom:1px solid #cfe0d4;font:500 16px/24px 'Space Grotesk',sans-serif;cursor:text}
.studio-variable-prompt{white-space:pre-wrap;overflow-wrap:anywhere;margin:16px 0 0;padding:0;border:0;background:white;box-shadow:none;font:400 13.5px/1.75 'JetBrains Mono',monospace;cursor:text}
.studio-variable-panel.is-editing .studio-variable-content>:is(small,.studio-variable-title,.studio-variable-prompt){display:none}
.studio-variable-form-host #tester-variable-form{margin:0;padding:0;border:0;background:white;max-height:none;overflow:visible}
.studio-variable-form-host #tester-variable-value{min-height:360px;resize:vertical;font:400 13.5px/1.75 'JetBrains Mono',monospace}
.studio-variable-footer{position:relative;flex:none;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px solid #cfe0d4;color:#66746d;font:400 11px 'DM Sans',sans-serif}
.studio-variable-extras{position:relative;font-size:11px}
.studio-variable-extras[open]{display:flex;flex-wrap:wrap;gap:6px}
.studio-variable-extras summary{cursor:pointer;color:#3f7f55}
.studio-variable-extras>button{padding:4px 8px;border:1px solid #cfe0d4;border-radius:6px;background:white;font:500 11px 'DM Sans',sans-serif}
.studio-variable-extras>button svg{width:14px;height:14px}
@media(max-width:760px){.studio-variable-panel{padding-inline:16px}.tester-variable-drawer.studio-variable-detail>.drawer-header{padding-inline:16px}.studio-variable-toolbar{gap:8px}.studio-variant-popup{min-width:0}.studio-variable-active{font-size:10px}}


/* Compact root overview in Studio and Classic, retaining the original action handlers. */
.tester-variable-drawer.studio-variable-managed{display:flex;flex-direction:column;overflow:hidden;background:#fff}.studio-variable-managed .drawer-header{flex-shrink:0}.studio-variable-managed :is(.drawer-context,.tester-variable-admin-values,.tester-variable-personal){display:none!important}.studio-variable-managed .studio-drawer-scroll{display:flex;flex:1;flex-direction:column;min-height:0;padding:0;overflow:auto}.studio-variable-overview{padding:20px 24px;overflow:auto;min-height:0;flex:1}.studio-variable-overview-row{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;padding:10px 12px;margin:0;border:0;border-bottom:1px solid #cfe0d4;border-radius:0;background:#fff;color:#1f2a24;text-align:left;cursor:pointer;box-shadow:none}.studio-variable-overview-row:is(:hover,.is-selected){background:#eaf4ed}.studio-variable-overview-row:focus-visible{outline:2px solid #3f7f55;outline-offset:-2px}.studio-variable-overview-name{flex:1;min-width:0;font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-variable-overview-count{font-size:10px;color:#3f7f55;white-space:nowrap}.studio-variable-overview-row .studio-entry-badge{min-width:0;height:18px;padding:0 5px;font-size:9px;border-radius:3px}.studio-variable-overview-row>svg{width:14px;height:14px;flex:none;color:#66746d}.studio-variable-managed:not(.studio-variable-detail) .drawer-kicker{display:none}.studio-variable-managed:not(.studio-variable-detail) .studio-variable-add{background:#3f7f55;color:white}.studio-variable-primary-actions{display:flex;flex-wrap:wrap;gap:8px;flex:none;padding:12px 0;border-top:1px solid #cfe0d4}.studio-variable-primary-actions button{padding:8px 14px;border:1px solid #cfe0d4;border-radius:6px;background:white;color:#3f7f55;cursor:pointer}.studio-variable-primary-actions button:disabled{opacity:.45;cursor:default}.studio-variable-managed .studio-variable-panel{margin:0;border:0;border-radius:0;padding:0 24px;min-height:0;overflow:hidden;flex:1;height:auto}.studio-variable-managed .studio-variable-content{padding-top:24px;flex:1;min-height:0;overflow:auto}.studio-variable-managed .drawer-header .drawer-kicker:empty{display:none}.studio-variable-managed>.tester-variable-form:not([hidden]){flex:1;min-height:0;overflow:auto}.studio-variable-managed .studio-variable-toolbar{flex-wrap:wrap}.studio-variable-managed .tester-variable-header-actions{display:flex;gap:8px}.studio-variable-managed .studio-variable-overview{box-sizing:border-box}.studio-variable-managed .studio-variable-toolbar button:focus-visible{outline:2px solid #3f7f55;outline-offset:2px}@media(max-width:760px){.studio-variable-overview{padding:14px 16px}.studio-variable-managed .studio-variable-panel{padding-inline:16px}}

.tester-variable-drawer.studio-variable-managed{padding:0}.studio-variable-managed>.drawer-header{padding:12px 24px;min-height:56px;align-items:center}.studio-variable-managed>.drawer-header>div:first-of-type{min-width:0;flex:1}.studio-variable-managed #tester-variable-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}.studio-variable-managed .drawer-header .close{margin:0}.studio-variable-managed>.tester-variable-form:not([hidden]){margin:16px 24px}.studio-variable-managed .studio-variable-primary-actions{box-sizing:border-box}.studio-variable-managed .studio-variable-toolbar{box-sizing:border-box}@media(max-width:760px){.studio-variable-managed>.drawer-header{padding-inline:16px}.studio-variable-managed>.tester-variable-form:not([hidden]){margin-inline:16px}}

/* Existing variable AI chat in both themes. */
.studio-ai-chat{position:absolute;z-index:6;inset:56px 0 0 auto;display:flex;flex-direction:column;width:min(360px,100%);border-left:1px solid #cfe0d4;background:#fff;box-shadow:-6px 0 20px #1f2a240a;color:#1f2a24}
.studio-ai-chat>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid #cfe0d4;min-height:56px}
.studio-ai-chat>header>div{display:grid;gap:2px;min-width:0}
.studio-ai-chat header strong{font:600 16px 'Space Grotesk',sans-serif}
.studio-ai-chat header small{font-size:11px;color:#66746d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-ai-chat button{height:32px;min-height:32px;padding:0 10px;border:1px solid #cfe0d4;border-radius:6px;background:#fff;color:#1f2a24;font:500 12px 'DM Sans',sans-serif;box-shadow:none}
.studio-ai-chat button:hover{background:#eaf4ed;border-color:#3f7f55;color:#3f7f55}
.studio-ai-chat button:disabled{opacity:.45;cursor:default}
.studio-ai-chat button[title]:has(svg){width:32px;padding:0;flex:none}
.studio-ai-chat svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.studio-ai-messages{flex:1;min-height:0;overflow-y:scroll;padding:16px;display:flex;flex-direction:column;gap:16px;scrollbar-gutter:stable;scrollbar-color:#cadccf #fff;scrollbar-width:thin}
.studio-ai-quick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.studio-ai-quick button{height:auto;min-height:40px;white-space:normal;text-align:left;padding:8px}
.studio-ai-user{background:#eaf4ed;border:1px solid #cfe0d4;border-radius:10px;padding:10px 12px;align-self:flex-end;max-width:95%;white-space:pre-wrap;overflow-wrap:anywhere}
.studio-ai-answer{white-space:pre-wrap;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.studio-ai-suggestion{display:flex;flex-direction:column;gap:12px;border-top:1px solid #cfe0d4;padding-top:12px}
.studio-ai-suggestion-tools{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.studio-ai-delta{margin-right:auto;padding:3px 6px;border-radius:999px;background:#eaf4ed;color:#3f7f55;font-size:10px}
.studio-ai-suggestion-tools button{height:24px;min-height:24px;padding:0 6px;font-size:10px;border:0}
.studio-ai-suggestion-tools .is-active{background:#eaf4ed;color:#3f7f55}
.studio-ai-chat .studio-ai-proposal{margin:0;padding:0;white-space:pre-wrap;overflow-wrap:anywhere;background:white;border:0;box-shadow:none;font:400 13.5px/1.75 'JetBrains Mono',monospace}
.studio-ai-proposal mark{background:transparent;color:inherit;font:inherit}
.studio-ai-proposal mark.is-added{background:#eaf4ed}
.studio-ai-proposal mark.is-removed{background:#fff1ed;color:#c9372d;text-decoration:line-through}
.studio-ai-proposal-actions{display:flex;flex-wrap:wrap;gap:8px}
.studio-ai-chat .is-primary,.studio-ai-input button{background:#3f7f55;color:#f8f9f8;border-color:#3f7f55}
.studio-ai-chat .is-primary:hover,.studio-ai-input button:hover{background:#2f6042;color:white}
.studio-ai-input{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid #cfe0d4;margin:0}
.studio-ai-input textarea{min-height:64px;max-height:140px;min-width:0;flex:1;border:1px solid #cfe0d4;border-radius:8px;padding:8px 10px;font:400 13px/20px 'DM Sans',sans-serif;resize:vertical}
@media(max-width:600px){.studio-ai-chat{width:100%}}
@media(min-width:1100px){#tester-variable-drawer:has(.studio-ai-chat) .studio-variable-panel{margin-right:376px}#tester-variable-drawer:has(.studio-ai-chat) .studio-variable-toolbar{flex-wrap:wrap}}
@media(max-width:1100px){body:has(.studio-ai-chat) .studio-quick-nav{display:none}}
.studio-ai-chat button:has(>svg){display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;line-height:1;transform:none}
.studio-ai-chat button>svg{display:block;flex:0 0 16px;margin:0}
.studio-ai-chat button.studio-ai-copy[title]:has(svg){width:24px;height:24px;min-height:24px;padding:0}
.studio-ai-chat .studio-ai-regenerate{width:32px;height:32px;min-height:32px;padding:0}
.studio-ai-copy.is-copied{color:#3f7f55;background:#eaf4ed}
.studio-ai-regenerate.is-loading svg{animation:studio-chat-spin 1s linear infinite}
@keyframes studio-chat-spin{to{transform:rotate(360deg)}}
.studio-ai-input{position:relative;display:block}
.studio-ai-input textarea{display:block;box-sizing:border-box;width:100%;padding:10px 48px 10px 12px}
.studio-ai-input button[type="submit"]{position:absolute;right:20px;bottom:20px;border-radius:999px;width:32px;height:32px;min-height:32px;padding:0}
@media(prefers-reduced-motion:reduce){.studio-ai-regenerate.is-loading svg{animation:none}}
.studio-ai-chat{top:0;width:var(--studio-chat-width,360px);box-shadow:none;container-type:inline-size}
.studio-ai-chat>header{height:56px;min-height:56px;flex:none;padding:0 16px;box-sizing:border-box}
.studio-ai-chat>header>div:first-child{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.studio-ai-chat header strong{font:600 15px 'Space Grotesk',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-ai-bot{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:6px;background:#eaf4ed;color:#3f7f55}
.studio-ai-version{flex:none;padding:2px 8px;border:1px solid #3f7f5533;border-radius:999px;background:#eaf4ed;color:#3f7f55;font:500 12px/16px 'DM Sans',sans-serif}
.studio-ai-chat>header>.studio-ai-header-actions{display:flex;gap:8px;flex:none}
.studio-ai-intro{margin:0;font:400 15px/24px 'DM Sans',sans-serif}
.studio-ai-messages{gap:24px}
.studio-ai-quick button{border-radius:12px;background:#f8f9f8;padding:10px 12px;font-size:14px;line-height:20px;min-height:42px}
.studio-ai-input{padding:12px 16px;flex:none}
.studio-ai-input textarea{min-height:44px;max-height:192px;resize:none;border-radius:12px;font:400 15px/22px 'DM Sans',sans-serif}
.studio-ai-input button[type="submit"]{right:24px;bottom:20px}
.studio-ai-input button:disabled{background:#9fbaa8;border-color:#9fbaa8;color:white;opacity:1}
.studio-ai-resize{position:absolute;left:-6px;top:0;bottom:0;width:12px;z-index:20;cursor:col-resize;touch-action:none}
.studio-ai-resize::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:transparent}
.studio-ai-resize::after{content:"";position:absolute;left:4px;top:calc(50% - 20px);height:40px;width:4px;border-radius:999px;background:#66746d59}
.studio-ai-resize:is(:hover,:focus-visible)::before,.studio-ai-chat.is-resizing .studio-ai-resize::before{background:#3f7f55;width:2px}
.studio-ai-resize:is(:hover,:focus-visible)::after,.studio-ai-chat.is-resizing .studio-ai-resize::after{background:#3f7f55}
@media(min-width:760px){#tester-variable-drawer:has(.studio-ai-chat) .studio-variable-panel{margin-right:calc(var(--studio-chat-width,360px) + 16px)}#tester-variable-drawer:has(.studio-ai-chat)>.drawer-header{padding-right:calc(var(--studio-chat-width,360px) + 16px)}}
@media(max-width:759px){.studio-ai-chat{width:100%}.studio-ai-resize{display:none}}
@container(max-width:330px){.studio-ai-quick{grid-template-columns:1fr}.studio-ai-chat header strong{font-size:13px}}
.studio-ai-resize:focus-visible{outline:none}
#tester-variable-drawer:has(.studio-ai-chat) .studio-variable-panel{border:0;border-radius:0;margin:0 var(--studio-chat-width,360px) 0 0;box-shadow:none;padding:0;overflow:hidden}
#tester-variable-drawer:has(.studio-ai-chat) .studio-variable-toolbar{margin:0 24px;padding:20px 0 12px;min-height:64px;gap:12px;border-bottom:1px solid #cfe0d4;box-sizing:border-box}
#tester-variable-drawer:has(.studio-ai-chat) .studio-variable-content{margin-top:24px}
#tester-variable-drawer.studio-variable-managed .studio-variable-panel{margin:0;border:0;border-radius:0;box-shadow:none;padding:0 24px;min-height:0;overflow:hidden;flex:1;height:auto}#tester-variable-drawer.studio-variable-managed .studio-variable-content{padding-top:24px;min-height:0;flex:1;overflow:auto}#tester-variable-drawer.studio-variable-managed>.drawer-header{padding:12px 24px;align-items:center;height:auto;min-height:56px}#tester-variable-drawer.studio-variable-managed .studio-drawer-scroll{padding:0;flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}#tester-variable-drawer.studio-variable-managed:has(.studio-ai-chat) .studio-variable-panel{margin-right:var(--studio-chat-width,360px)}@media(max-width:760px){#tester-variable-drawer.studio-variable-managed .studio-variable-panel{padding-inline:16px}#tester-variable-drawer.studio-variable-managed>.drawer-header{padding-inline:16px}#tester-variable-drawer.studio-variable-managed:has(.studio-ai-chat) .studio-variable-panel{margin-right:0}}

/* Variable detail actions: preview hover and persisted negative state. */
#tester-variable-drawer .studio-variable-actions-left button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:32px;height:32px;min-height:32px;padding:0;border:1px solid #cfe0d4;border-radius:6px;background:#fff;color:#66746d;box-shadow:none;transition:background-color .15s,color .15s,border-color .15s}
#tester-variable-drawer .studio-variable-actions-left button svg{width:16px;height:16px;flex:none}
#tester-variable-drawer .studio-variable-actions-left :is(.studio-variable-visibility,.studio-variable-delete):not(:disabled):is(:hover,:focus-visible){border-color:#c9372d;background:rgb(201 55 45 / 10%);color:#c9372d;filter:none}
#tester-variable-drawer .studio-variable-actions-left .studio-variable-visibility[aria-pressed="true"],#tester-variable-drawer .studio-variable-actions-left .studio-variable-visibility[aria-pressed="true"]:not(:disabled):is(:hover,:focus-visible){border-color:#c9372d;background:#c9372d;color:#fff;filter:none}
#tester-variable-drawer .studio-variable-actions-left button:focus-visible{outline:2px solid #3f7f55;outline-offset:2px}

/* Settings are available in the chat header; retain the original dialog trigger. */
#tester-variable-ai-settings{display:none}

#tester-variable-drawer .studio-variable-primary-actions .is-select:disabled,
#tester-variable-drawer .studio-variable-primary-actions .is-select:disabled *{cursor:default}

.section-variant-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:16px 24px 0;padding-bottom:12px;border-bottom:1px solid #cfe0d4}.section-variant-toolbar select{max-width:100%;min-width:150px;padding:6px 10px;border:1px solid #cfe0d4;border-radius:6px;background:white;color:#3f7f55}.section-variant-status{margin:8px 24px;color:#66746d;font-size:12px}.section-variant-badge{display:inline-flex;margin-left:8px;padding:2px 6px;border-radius:4px;background:#d4855a;color:white;font:600 10px/16px sans-serif}.section-variant-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 24px}.section-variant-comparison pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.workbench-editor:not(.section-variant-editing) .protected-editor{cursor:text;background:white}.workbench-editor.section-variant-editing .protected-editor{outline:1px solid #3f7f55}.section-variant-toolbar button:disabled{cursor:default;opacity:.45;pointer-events:auto}@media(max-width:600px){.section-variant-comparison{grid-template-columns:1fr}}