/* Design mode keeps the Asyncly aqua and gold, with an iris midpoint that sets
   Studio apart from ordinary thread chrome. */
.studio, .studio-connected-overlay, .studio-thread-summary, .studio-window {
  --studio-aqua: #6be7df; --studio-iris: #a99bff; --studio-gold: #f6b529;
  --studio-aurora: linear-gradient(115deg, var(--studio-aqua), var(--studio-iris) 55%, var(--studio-gold));
}
.studio-window { margin: 0; background: #0b0e12; color: #e8ebf1; font: 13px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color-scheme: dark; }
.studio-window #studio-root { height: 100dvh; }
.studio-preview-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--studio-line); }
.studio-preview-controls select { flex: 1; min-width: 0; max-width: 180px; }
.studio-preview-controls button { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; }
.studio-preview-expanded { position: fixed; inset: 12px; width: calc(100vw - 24px); height: calc(100dvh - 24px); max-width: none; max-height: none; margin: 0; padding: 0; border: 1px solid #ffffff22; border-radius: 12px; background: #0f1217; color: #e8ebf1; overflow: hidden; }
.studio-preview-expanded::backdrop { background: #05070bc9; }
@media (max-width: 600px) { .studio-preview-expanded { inset: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; } }
.studio { --studio-ink-0: #090b0f; --studio-ink-1: #0f1217; --studio-ink-2: #141820; --studio-line: #ffffff12; --studio-line-strong: #ffffff22; --studio-muted: #959fb0; --studio-accent: #bdb3ff; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; color: #e8ebf1; background: var(--studio-ink-1); font: 13px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: hidden; color-scheme: dark; -webkit-font-smoothing: antialiased; }
.studio *, .studio-connected-overlay * { box-sizing: border-box; }
.studio [hidden], .studio-connected-overlay [hidden] { display: none !important; }
.studio button, .studio select, .studio input, .studio textarea { font: inherit; color: inherit; background: #ffffff07; border: 1px solid var(--studio-line); border-radius: 9px; }
.studio button, .studio select { min-height: 34px; padding: 6px 12px; cursor: pointer; touch-action: manipulation; transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .2s ease, transform .16s ease; }
.studio button:hover { background: #ffffff10; }
.studio button:disabled { opacity: .45; cursor: default; }
.studio button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: middle; }
.studio :focus-visible, .studio-conversation-head button:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 2px; }
.studio .primary { position: relative; color: #0a0f1c; font-weight: 600; letter-spacing: .005em; border-color: transparent; background: linear-gradient(115deg, #8ef0e8, #bcb1ff 70%, #d9c8ff); box-shadow: inset 0 1px 0 #ffffff80, 0 6px 18px -12px #a99bffcc; }
.studio .primary:hover { background: linear-gradient(115deg, oklch(from rgb(164 245 239) l calc(c * var(--tint-chroma)) calc(h + var(--tint-hue-shift))), #cac1ff 70%, #e4d6ff); box-shadow: inset 0 1px 0 #ffffff90, 0 10px 26px -10px #a99bffee; }
.studio .primary:active { transform: translateY(1px); }
.studio .primary[aria-pressed='true']:disabled { opacity: 1; color: oklch(from rgb(166 242 235) l calc(c * var(--tint-chroma)) calc(h + var(--tint-hue-shift))); background: #6be7df14; border-color: #6be7df55; box-shadow: none; }

/* Header */
/* 44px matches the masthead, so header content shares the macOS window buttons' centreline. */
.studio-head { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 44px; padding: 5px 10px 5px 14px; border-bottom: 1px solid var(--studio-line); background: linear-gradient(180deg, #13171d, var(--studio-ink-1)); }
.studio-brand { padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--studio-line-strong); font-size: 11px; font-weight: 600; letter-spacing: .12em; line-height: 16px; text-transform: uppercase; background: var(--studio-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.studio-head > strong { font-size: 13px; font-weight: 600; flex: 1; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f1f3f7; }
.studio-primary-actions { display: flex; align-items: center; gap: 8px; }
.studio-head button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; white-space: nowrap; background: transparent; border-color: transparent; color: #c9cfda; }
.studio-head button:hover { color: #fff; }
.studio-head .primary { color: #0a0f1c; padding-inline: 14px; }
.studio-head .primary:hover { color: #0a0f1c; }
.studio-head button > svg { width: 16px; height: 16px; stroke-width: 1.7; opacity: .9; }
.studio-segment { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--studio-line); border-radius: 11px; background: #ffffff05; }
.studio-segment button { min-height: 28px; padding: 3px 11px; border-radius: 8px; }
.studio-head .studio-conversation-toggle { border-color: var(--studio-line); background: #ffffff05; }
.studio-head .studio-conversation-toggle:hover { background: #ffffff10; }
.studio-head button:not(.primary)[aria-pressed='true'], .studio-head button[aria-expanded='true'] { color: #fff; background: linear-gradient(115deg, #6be7df1f, #a99bff2e); border-color: #a99bff66; box-shadow: inset 0 0 0 .5px #a99bff40; }
.studio-head .studio-icon-button { width: 32px; padding: 0; border-color: transparent; }
.studio-head .studio-icon-button > svg { width: 18px; height: 18px; }
.studio-question-dot { display: inline-block; margin-left: 2px; color: #f6d38a; font-size: 11px; }
.studio-revision-status { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; min-height: 35px; padding: 4px 12px; border-bottom: 1px solid var(--studio-line); color: var(--studio-muted); font-size: 12px; }
.studio-revision-status button { min-height: 28px; padding: 3px 8px; color: #e8ebf1; white-space: nowrap; }

/* Canvas */
.studio-workspace { display: flex; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.studio-stage { display: flex; flex: 1; gap: 14px; min-width: 0; min-height: 0; padding: 14px; overflow: hidden; background: radial-gradient(circle at 1px 1px, #ffffff0c 1px, transparent 1.5px) 0 0 / 22px 22px, radial-gradient(130% 90% at 50% -10%, #171c26 0%, var(--studio-ink-0) 62%); }
.studio-pane { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; border: 1px solid #ffffff14; border-radius: 12px; background: #0d1015; overflow: hidden; box-shadow: 0 1px 0 #ffffff0a inset, 0 28px 70px -34px #000000f0; }
.studio-pane-head { display: flex; align-items: center; flex: 0 0 auto; padding: 6px 8px; gap: 8px; border-bottom: 1px solid var(--studio-line); background: var(--studio-ink-2); }
.studio-pane-head select { min-width: 0; flex: 1; max-width: 100%; border-color: transparent; }
.studio-pane-head button { margin-left: auto; }
.studio-live { position: relative; min-height: 0; flex: 1; overflow: hidden; background: radial-gradient(circle at 1px 1px, #ffffff08 1px, transparent 1.5px) 0 0 / 18px 18px, #0b0e13; display: grid; place-items: center; }
.studio-live-placeholder { max-width: 280px; padding: 30px 18px; text-align: center; color: var(--studio-muted); line-height: 1.6; }
.studio-live[data-preview-state='opening'] .studio-live-placeholder span::before { content: ''; display: block; width: 26px; height: 26px; margin: 0 auto 12px; border-radius: 50%; border: 1.5px solid #ffffff14; border-top-color: var(--studio-aqua); border-right-color: var(--studio-iris); animation: studio-spin .9s linear infinite; }
.studio-live-placeholder button { margin-top: 12px; }
.studio-live[data-live='true'] .studio-live-placeholder { visibility: hidden; }
.studio-live.commenting { cursor: crosshair; box-shadow: inset 0 0 0 2px #a99bff99; }
.studio-live img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.studio-live:has(img) .studio-live-placeholder { position: absolute; bottom: 8px; padding: 4px; background: #11151ded; font-size: 0; border-radius: 10px; }
/* Class subjects keep Chromium's shared :has() invalidation targeted; tag subjects make every anchor restyle all spans and buttons. */
.studio-live:has(img) .studio-live-placeholder-label::before { display: none; }
.studio-live:has(img) .studio-live-placeholder-action { font-size: 12px; }
.studio-live[data-preview-state='failed']:has(img) .studio-live-placeholder,
.studio-live[data-preview-state='delayed']:has(img) .studio-live-placeholder,
.studio-live[data-preview-state='disabled']:has(img) .studio-live-placeholder,
.studio-live[data-preview-state='elsewhere']:has(img) .studio-live-placeholder { font-size: 12px; max-width: calc(100% - 16px); padding: 8px 12px; }
.studio-live.commenting .studio-live-placeholder { display: none; }
@keyframes studio-spin { to { transform: rotate(1turn); } }
.studio-compare-switch { display: flex; gap: 8px; flex: 0 0 auto; }
.studio-compare-switch button { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-compare-switch button[aria-pressed='true'] { background: #a99bff1c; border-color: #a99bff88; }

/* Direction dock */
.studio-toolbar { flex: 0 0 auto; padding: 10px 16px 12px; border-top: 1px solid var(--studio-line); background: var(--studio-ink-1); }
.studio-toolbar:empty { display: none; }
/* The dock itself is centered; overflowing choices start at a reachable edge. */
.studio-directions { display: flex; justify-content: flex-start; gap: 4px; width: max-content; max-width: 100%; margin-inline: auto; padding: 4px; overflow-x: auto; border: 1px solid var(--studio-line); border-radius: 14px; background: #ffffff05; box-shadow: 0 16px 36px -24px #000; }
.studio .studio-direction { display: flex; flex: 0 0 auto; max-width: 260px; min-width: 100px; align-items: center; gap: 10px; text-align: left; padding: 4px 12px 4px 4px; border-radius: 10px; border-color: transparent; background: transparent; }
.studio .studio-direction:hover { background: #ffffff0a; }
.studio .studio-direction[aria-pressed='true'] { background: linear-gradient(115deg, #6be7df14, #a99bff22); border-color: #a99bff5c; box-shadow: 0 10px 26px -18px #a99bffcc; }
.studio-direction-preview { position: relative; display: grid; place-items: center; flex: 0 0 64px; height: 40px; border-radius: 7px; overflow: hidden; background: radial-gradient(circle at 1px 1px, #ffffff12 1px, transparent 1.5px) 0 0 / 7px 7px, #ffffff08; box-shadow: inset 0 0 0 1px #ffffff12; }
.studio-direction[aria-pressed='true'] .studio-direction-preview { box-shadow: inset 0 0 0 1px #ffffff26, 0 0 0 1.5px #a99bffcc; }
.studio-direction-letter { z-index: 1; font-size: 15px; font-weight: 600; background: var(--studio-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.studio-direction-preview:has(img:not([hidden])) .studio-direction-letter { position: absolute; left: 3px; bottom: 3px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; background: #0b0e13e0; color: #e8ebf1; font-size: 10px; -webkit-background-clip: border-box; background-clip: border-box; }
.studio-direction-preview img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.studio-direction-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; color: #dfe3ea; }
.studio-direction[aria-pressed='true'] .studio-direction-name { color: #fff; }
.studio-direction small { display: block; margin-top: 2px; color: var(--studio-muted); font-size: 10px; font-weight: 450; letter-spacing: .01em; }

/* Details */
.studio-bottom { width: 320px; flex: 0 0 320px; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--studio-line); overflow: hidden; background: var(--studio-ink-1); box-shadow: -20px 0 40px -30px #000; }
.studio-inspector-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 8px; padding: 12px 10px 6px 16px; }
.studio-inspector-head strong { font-size: 13px; font-weight: 600; }
.studio-inspector-head button { display: grid; place-items: center; width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; color: #aeb6c4; }
.studio-inspector-head button:hover { color: #fff; }
.studio-inspector { padding: 10px 16px 18px; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; }
.studio-inspector p { margin: 7px 0; line-height: 1.5; }
.studio-inspector textarea { width: 100%; min-height: 100px; padding: 10px; resize: vertical; }
.studio-inspector textarea:focus { border-color: #a99bff80; outline: none; box-shadow: 0 0 0 3px #a99bff26; }
.studio-inspector .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.studio-inspector > button { margin: 4px 4px 4px 0; }
.studio-options { display: flex; flex-direction: column; gap: 8px; }
.studio-options label { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 4px; color: var(--studio-muted); font-size: 11px; }
.studio-options select { width: 100%; min-width: 0; font-size: 12px; }
.studio-options button { text-align: left; }
.studio-menu-links { display: flex; flex-direction: column; gap: 5px; padding-block: 10px; border-block: 1px solid var(--studio-line); margin-block: 4px; }
.studio-subtle { color: var(--studio-muted); font-size: 11px; }
.studio-status:empty { display: none; }
.studio-status { flex: 0 0 auto; padding: 6px 16px; color: var(--studio-muted); font-size: 11px; background: var(--studio-ink-1); }
.studio-status[data-error='true'] { color: #ffbdaf; }

/* Empty and generating */
.studio-empty { display: grid; align-content: center; justify-items: start; gap: 14px; padding: clamp(20px, 6vw, 80px); min-height: 0; flex: 1; overflow: auto; }
.studio-empty h2 { margin: 0; font-size: 26px; font-weight: 550; letter-spacing: -.01em; }
.studio-empty p { color: var(--studio-muted); line-height: 1.6; max-width: 370px; margin: 0; }
.studio-empty-actions { display: flex; gap: 8px; }
.studio-progress-directions { display: flex; gap: 10px; width: min(100%, 380px); }
.studio-progress-directions span { display: grid; place-items: center; flex: 1; height: 74px; border: 1px solid var(--studio-line); border-radius: 10px; color: var(--studio-muted); font-weight: 600; background: linear-gradient(100deg, #ffffff04 30%, #a99bff1a 50%, #ffffff04 70%) 0 0 / 300% 100%; animation: studio-shimmer 1.8s ease-in-out infinite; }
.studio-progress-directions span:nth-child(2) { animation-delay: .2s; }
.studio-progress-directions span:nth-child(3) { animation-delay: .4s; }
@keyframes studio-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.studio-comment { padding: 10px 0; border-bottom: 1px solid var(--studio-line); }
.studio-comment small { color: var(--studio-muted); }
.studio-assertion { padding: 9px 0; border-top: 1px solid var(--studio-line); }
.studio-assertion img { display: block; max-width: 100%; margin-top: 8px; }
.studio-coverage { border-collapse: collapse; width: 100%; font-size: 11px; }
.studio-coverage th, .studio-coverage td { text-align: left; border-bottom: 1px solid var(--studio-line); padding: 8px; }
.studio-coverage th { color: var(--studio-muted); font-weight: 500; }
.studio-coverage button { border: 0; background: transparent; font-size: 11px; }
.studio-details { margin-block: 8px; border: 1px solid var(--studio-line); border-radius: 8px; padding: 10px; }
.studio-details summary { cursor: pointer; }
.studio-criteria { padding-left: 18px; line-height: 1.6; color: #b7bfce; }
.studio-canvas-slot[hidden] { display: none; }
.studio-entry-button { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border: 1px solid #a99bff40; border-radius: 7px; color: inherit; background: linear-gradient(115deg, #6be7df12, #a99bff1c); cursor: pointer; padding: 4px 9px 4px 7px; font: inherit; font-weight: 550; }
.studio-entry-button:hover { border-color: #a99bff80; }

/* In-thread Design card */
.studio-thread-summary { position: relative; flex: 0 0 auto; isolation: isolate; border-radius: 12px; background: linear-gradient(115deg, #6be7df12, #a99bff14 52%, #f6b5290d), #0a111680; box-shadow: 0 14px 34px -26px #a99bff; }
.studio-thread-summary[hidden] { display: none; }
.studio-thread-summary::before { content: ''; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; background: linear-gradient(115deg, #6be7df80, #a99bff70 52%, #f6b52966); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: opacity .2s ease; opacity: .7; }
.studio-thread-summary:hover::before { opacity: 1; }
.studio-thread-summary > button { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 9px 12px 9px 9px; text-align: left; color: inherit; font: inherit; background: transparent; border: 0; border-radius: inherit; cursor: pointer; }
.studio-thread-summary > button:focus-visible, .studio-summary-toggle:focus-visible { outline: 2px solid #a99bff; outline-offset: 2px; }
.studio-summary-poster { position: relative; flex: 0 0 auto; width: 104px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: radial-gradient(circle at 1px 1px, #ffffff14 1px, transparent 1.5px) 0 0 / 8px 8px, #0b1016; box-shadow: inset 0 0 0 1px #ffffff17; }
.studio-summary-poster img { width: 100%; height: 100%; object-fit: cover; }
.studio-summary-frames { position: relative; width: 100%; height: 100%; }
.studio-summary-frames i { position: absolute; top: 15px; left: 50%; display: grid; place-items: end start; width: 42px; height: 30px; margin-left: -21px; padding: 3px 4px; border-radius: 5px; font: 600 8px/1 -apple-system, BlinkMacSystemFont, sans-serif; font-style: normal; color: #0b1016; background: linear-gradient(#ffffff 0 5px, #e9edf5 5px); box-shadow: 0 6px 14px -6px #000, inset 0 0 0 1px #ffffff40; transition: transform .35s cubic-bezier(.3, .7, .2, 1); }
.studio-summary-frames i::before { content: ''; position: absolute; top: 9px; left: 5px; right: 12px; height: 3px; border-radius: 2px; background: currentColor; opacity: .18; }
.studio-summary-frames i:nth-child(2) { place-items: end center; }
.studio-summary-frames i:nth-child(3) { place-items: end end; }
.studio-summary-frames i:nth-child(1) { transform: translateX(-24px) rotate(-9deg); background: linear-gradient(var(--studio-aqua) 0 5px, oklch(from rgb(230 251 249) l calc(c * var(--tint-chroma)) calc(h + var(--tint-hue-shift))) 5px); }
.studio-summary-frames i:nth-child(2) { z-index: 1; transform: translateY(-3px); background: linear-gradient(var(--studio-iris) 0 5px, #f0edff 5px); }
.studio-summary-frames i:nth-child(3) { transform: translateX(24px) rotate(9deg); background: linear-gradient(var(--studio-gold) 0 5px, #fff6e2 5px); }
.studio-thread-summary:hover .studio-summary-frames i:nth-child(1) { transform: translateX(-29px) rotate(-13deg); }
.studio-thread-summary:hover .studio-summary-frames i:nth-child(2) { transform: translateY(-6px); }
.studio-thread-summary:hover .studio-summary-frames i:nth-child(3) { transform: translateX(29px) rotate(13deg); }
.studio-summary-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 3px; flex: 1; min-width: 0; padding-right: 30px; }
.studio-summary-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: var(--studio-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.studio-summary-copy strong { grid-column: 1 / -1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.studio-summary-copy small { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; opacity: .66; }
.studio-summary-copy small b { margin-inline: 6px; font-weight: 400; opacity: .6; }
.studio-summary-cta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; align-self: flex-end; padding: 5px 8px 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; color: #dcd6ff; background: #a99bff1f; box-shadow: inset 0 0 0 1px #a99bff4d; transition: background-color .18s ease, box-shadow .18s ease; }
.studio-summary-cta svg, .studio-summary-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.studio-thread-summary > button:hover .studio-summary-cta { background: #a99bff38; box-shadow: inset 0 0 0 1px #a99bff90, 0 6px 18px -10px #a99bff; }
.studio-summary-controls { position: absolute; top: 6px; right: 6px; }
.studio-summary-toggle { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: inherit; border: 0; border-radius: 7px; background: transparent; opacity: .6; cursor: pointer; transition: opacity .16s ease, background-color .16s ease; }
.studio-summary-toggle:hover { opacity: 1; background: #ffffff12; }
.studio-summary-toggle svg { transform: rotate(180deg); transition: transform .22s cubic-bezier(.3, .7, .2, 1); }
.studio-thread-summary[data-collapsed='true'] .studio-summary-toggle svg { transform: none; }
.studio-thread-summary[data-collapsed='true'] { border-radius: 10px; }
.studio-thread-summary[data-collapsed='true'] > button { gap: 8px; min-height: 36px; padding: 6px 40px 6px 10px; }
.studio-thread-summary[data-collapsed='true'] .studio-summary-poster, .studio-thread-summary[data-collapsed='true'] .studio-summary-copy small, .studio-thread-summary[data-collapsed='true'] .studio-summary-cta > span { display: none; }
.studio-thread-summary[data-collapsed='true'] .studio-summary-copy { display: flex; align-items: center; gap: 9px; padding-right: 0; }
.studio-thread-summary[data-collapsed='true'] .studio-summary-copy strong { flex: 0 1 auto; min-width: 0; font-size: 12px; }
.studio-thread-summary[data-collapsed='true'] .studio-summary-cta { align-self: center; margin-left: auto; padding: 4px; }
.studio-thread-summary[data-collapsed='true'] .studio-summary-controls { top: 50%; transform: translateY(-50%); }
:root[data-app-appearance-resolved='light'] .studio-thread-summary { background: linear-gradient(115deg, #087e7812, #6a55e012 52%, #f6b52914), #ffffffa6; box-shadow: 0 12px 30px -24px #5a47c8; }
:root[data-app-appearance-resolved='light'] .studio-thread-summary::before { background: linear-gradient(115deg, #087e7870, #6a55e060 52%, #d99a1470); }
:root[data-app-appearance-resolved='light'] .studio-summary-poster { background: radial-gradient(circle at 1px 1px, #0a1a2a1c 1px, transparent 1.5px) 0 0 / 8px 8px, #eef2f5; box-shadow: inset 0 0 0 1px #0a1a2a14; }
:root[data-app-appearance-resolved='light'] .studio-summary-frames i { box-shadow: 0 6px 12px -7px #1a2a4a99, inset 0 0 0 1px #0a1a2a1f; }
:root[data-app-appearance-resolved='light'] .studio-summary-eyebrow { background: linear-gradient(115deg, #087e78, #6a55e0 60%, #c2830c); -webkit-background-clip: text; background-clip: text; }
:root[data-app-appearance-resolved='light'] .studio-summary-cta { color: #4a38b8; background: #6a55e014; box-shadow: inset 0 0 0 1px #6a55e040; }
:root[data-app-appearance-resolved='light'] .studio-thread-summary > button:hover .studio-summary-cta { background: #6a55e024; box-shadow: inset 0 0 0 1px #6a55e080, 0 6px 16px -10px #6a55e0; }
:root[data-app-appearance-resolved='light'] .studio-summary-toggle:hover { background: #0a1a2a0f; }
:root[data-app-appearance-resolved='light'] .studio-entry-button { border-color: #6a55e040; background: linear-gradient(115deg, #087e7810, #6a55e014); }

/* Header action: only threads with a saved design carry it, in every Project view. */
.studio-header-action { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 7px; color: #dcd6ff; font: 600 11px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; white-space: nowrap; border: 1px solid #a99bff4d; border-radius: 999px; background: #a99bff1a; cursor: pointer; transition: background-color .16s ease, border-color .16s ease; }
.studio-header-action:hover { border-color: #a99bff90; background: #a99bff33; }
.studio-header-action:focus-visible { outline: 2px solid #a99bff; outline-offset: 2px; }
.studio-header-action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root[data-app-appearance-resolved='light'] .studio-header-action { color: #4a38b8; border-color: #6a55e040; background: #6a55e014; }
:root[data-app-appearance-resolved='light'] .studio-header-action:hover { border-color: #6a55e080; background: #6a55e024; }
/* A peek card is outside the Project view that owns Studio; open the thread there. */
.thread-peek :is(.studio-thread-summary, .studio-header-action) { display: none; }

/* Immersive overlay */
#company-modal.studio-immersive-host { inset: 0; height: 100dvh; z-index: 80; }
/* Attention's perspective and isolation would contain the fixed overlay inside the
   field, beneath its front cards, Command and toolbar. The overlay covers every card
   while open, so the field may flatten and join the Project panel's stacking. */
.modal-thread-list[data-thread-layout-mode="attention"][data-studio-connected-open="true"] { perspective: none; isolation: auto; }
.modal-thread-list[data-thread-layout-mode="attention"] > .studio-connected-overlay { z-index: 300; }
.studio-connected-overlay { position: fixed; inset: 0; z-index: 80; display: flex; color: #e8ebf1; background: #0b0e12; }
.studio-connected-panel { display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; overflow: hidden; }
.studio-connected-body { position: relative; display: flex; flex: 1; min-height: 0; }
.studio-connected-canvas { flex: 1; min-width: 0; min-height: 0; }
.studio-conversation { display: flex; flex-direction: column; flex: 0 0 clamp(320px, 26vw, 400px); min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid #ffffff14; background: #11171b; }
.studio-conversation-head { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 16px; min-height: 44px; border-bottom: 1px solid #ffffff12; background: linear-gradient(180deg, #151b20, #11171b); }
.studio-conversation-head strong { flex: 1; font: 600 13px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.studio-conversation-head button { display: grid; place-items: center; width: 34px; height: 34px; color: #aeb6c4; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.studio-conversation-head button:hover { color: #fff; background: #ffffff10; }
.studio-conversation-head button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
/* Reserve the hidden-inset window buttons in the header that owns the top-left corner,
   and keep the window draggable while Studio covers the masthead. */
.studio-connected-overlay[data-window-controls='inset'].conversation-hidden .studio-head,
.studio-connected-overlay[data-window-controls='inset']:not(.conversation-hidden) .studio-conversation-head { padding-left: 84px; }
.studio-connected-overlay .studio-head, .studio-connected-overlay .studio-conversation-head { -webkit-app-region: drag; }
.studio-connected-overlay .studio-head :is(button, select, input, a), .studio-connected-overlay .studio-conversation-head button { -webkit-app-region: no-drag; }
.studio-conversation-card { flex: 1; min-height: 0; overflow: hidden; }
.studio-conversation-card > .modal-thread-card { width: 100% !important; height: 100% !important; min-height: 0; max-height: none; border: 0; border-radius: 0; content-visibility: visible !important; contain: none; background: #11171b; color: #e8ebf1; padding: 14px; }
.studio-conversation .thread-chat-frame { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.studio-conversation .thread-chat { display: block !important; flex: 1; min-height: 0; max-height: none !important; overflow: auto; }
.studio-conversation .modal-thread-composer { flex: 0 0 auto; }
.studio-conversation .modal-thread-drag-handle, .studio-conversation .modal-thread-resize-grip, .studio-conversation .modal-thread-width-grip, .studio-conversation .studio-thread-summary, .studio-conversation .studio-header-action, .studio-conversation [data-work-board-thread-card-remove] { display: none; }
.studio-conversation .modal-thread-head { cursor: default; flex-wrap: wrap; }
@media (max-width: 1100px) { .studio-direction-name { max-width: 110px; } .studio-bottom { width: 280px; flex-basis: 280px; } }
@media (max-width: 900px) {
  .studio-head { gap: 6px; padding: 8px 10px; }
  .studio button, .studio select { min-height: 44px; }
  .studio-segment button { min-height: 40px; }
  .studio-head .studio-icon-button, .studio-conversation-head button { width: 44px; height: 44px; }
  .studio-head > strong { font-size: 12px; }
  .studio-workspace { flex-direction: column; }
  .studio-bottom { width: 100%; flex: 0 1 40%; border-left: 0; border-top: 1px solid var(--studio-line); }
  .studio-conversation { position: absolute; inset: 0; z-index: 3; width: 100%; }
  .studio-connected-overlay:not(.conversation-hidden) .studio-connected-canvas { visibility: hidden; }
  .studio-conversation-card { width: min(100%, 620px); margin-inline: auto; }
  .studio-question-dot { font-size: 0; width: 6px; height: 6px; border-radius: 50%; background: #f6d38a; margin-left: 5px; }
}
@media (max-width: 900px) and (orientation: portrait), (max-width: 620px) {
  .studio-stage.compare { flex-direction: column; }
}
@media (max-width: 640px) {
  .studio-head { flex-wrap: wrap; }
  .studio-head > strong { flex-basis: 25%; }
  .studio-primary-actions { order: 1; width: 100%; }
  .studio-primary-actions > button, .studio-segment { flex: 1; }
  .studio-segment button { flex: 1; }
  .studio-head [data-action='conversation'] { font-size: 12px; }
  .studio-direction-name { display: none; }
  .studio .studio-direction { min-width: 72px; flex-basis: 86px; justify-content: center; padding-right: 4px; }
  .studio-direction-preview { flex-basis: 70px; }
  .studio-toolbar { padding: 6px 10px; }
  .studio-stage { padding: 6px; gap: 6px; }
}
@media (pointer: coarse) {
  .studio button, .studio select { min-height: 44px; }
  .studio-head .studio-icon-button, .studio-conversation-head button { min-width: 44px; min-height: 44px; }
}
.studio-sidecar-artifact-status { display: grid; place-content: center; min-height: 160px; padding: 24px; color: var(--text-secondary, #a5a6ad); font-size: 13px; line-height: 1.5; text-align: center; }
@media (prefers-reduced-motion: reduce) { .studio *, .studio *::before, .studio *::after, .studio-thread-summary *, .studio-thread-summary *::before { transition: none !important; animation: none !important; } }

/* One revision stays visible across interaction, evidence and publishing. */
.studio { container: studio-preview / inline-size; }
.studio-preview-toolbar { flex:0 0 auto; min-width:0; }
.studio-preview-workflow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; flex:0 0 auto; padding:8px; border-bottom:1px solid var(--studio-line); }
.studio-preview-workflow button[aria-pressed='true'] { background:#a99bff22; border-color:#a99bff66; }
.studio-version-picker { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 160px; }
.studio-selected-direction { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.studio-version-picker select { margin-left:auto; max-width:130px; }
.studio-showing-captures .studio-bottom { width:100%; flex:1; border-left:0; }
.studio-capture { padding:12px 0; border-bottom:1px solid var(--studio-line); display:grid; gap:10px; }
.studio-capture img { display:block; max-width:100%; max-height:420px; object-fit:contain; object-position:left top; border-radius:8px; }
.studio-capture button { justify-self:start; }
@media (max-width:640px) {
  .studio .studio-primary-actions { min-width:0; gap:4px; }
  .studio .studio-primary-actions .studio-segment { min-width:0; flex:1 1 auto; }
  .studio .studio-primary-actions button { padding-inline:8px; }
  .studio .studio-primary-actions > .primary { flex:0 0 auto; }
  .studio-preview-workflow .studio-version-picker { order:1; flex-basis:100%; }
}

.studio-preview-workflow button { padding-inline:8px; }
.studio-sidecar-preview .studio-version-picker { order:1; flex-basis:100%; }
.studio-preview-workflow > [data-action='share-preview'] { margin-left:auto; }
@media (max-width:640px) {
  .studio-head .studio-segment .studio-button-label { display:none; }
  .studio-head .studio-segment button { min-width:44px; }
}
/* Short, wide previews keep room for the website without dropping an action. */
@media (max-height:500px) {
  /* Share the heading row with sizing in short panels. Keep 44px actions and
     enough live height for a complete website control, even in a narrow dock. */
  .studio-sidecar-preview:has(> .studio-preview-controls:not([hidden])) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); grid-template-rows:auto auto minmax(0,1fr) auto auto; }
  .studio-sidecar-preview > .studio-head { grid-area:1 / 1; min-width:0; }
  .studio-sidecar-preview > .studio-head > strong { min-width:0; }
  .studio-sidecar-preview > .studio-preview-controls { grid-area:1 / 2; min-width:0; }
  .studio-sidecar-preview > .studio-preview-toolbar { grid-area:2 / 1 / auto / -1; }
  .studio-sidecar-preview > .studio-workspace { grid-area:3 / 1 / auto / -1; }
  .studio-sidecar-preview > .studio-toolbar { grid-area:4 / 1 / auto / -1; }
  .studio-sidecar-preview > .studio-status { grid-area:5 / 1 / auto / -1; }
  .studio-preview-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px; padding:4px; border-bottom:1px solid var(--studio-line); }
  .studio-preview-workflow { display:contents; }
  .studio-preview-workflow > .studio-segment { grid-column:1; grid-row:1; }
  .studio-preview-workflow > [data-action='capture'] { grid-column:2; grid-row:1; }
  .studio-preview-workflow > [data-action='share-preview'] { grid-column:3; grid-row:1; }
  .studio-preview-workflow .studio-version-picker { grid-column:1 / 3; grid-row:2; order:0; }
  .studio-preview-toolbar .studio-revision-status { grid-column:3; grid-row:2; padding:0; border:0; }
  .studio-preview-toolbar .studio-revision-status:has(button) > span { display:none; }
  .studio-preview-toolbar .studio-revision-status > span { max-width:80px; }
  @container studio-preview (min-width:620px) {
    .studio-preview-toolbar { grid-template-columns:auto minmax(0,1fr) auto auto auto; }
    .studio-preview-workflow .studio-version-picker { grid-column:2; grid-row:1; }
    .studio-preview-workflow > [data-action='capture'] { grid-column:3; }
    .studio-preview-workflow > [data-action='share-preview'] { grid-column:4; }
    .studio-preview-toolbar .studio-revision-status { grid-column:5; grid-row:1; }
  }
}