/* Ask Studio: co-editor sheet, pins and viewport markers. Uses Studio tokens. */
.co-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.co-fab{position:absolute;right:14px;bottom:14px;z-index:6;display:inline-flex;align-items:center;gap:var(--space-8);min-height:44px;padding:0 var(--space-16);border:1px solid rgba(179,160,239,.55);border-radius:var(--ws-radius-pill);background:rgba(16,19,25,.88);color:var(--ws-text);font:600 13px var(--ws-font);letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.co-fab span{color:var(--ws-accent);font-size:var(--text-16)}
.co-fab:hover,.co-fab:focus-visible,.co-fab[aria-expanded="true"]{background:var(--ws-accent);border-color:var(--ws-accent);color:var(--ws-on-accent)}
.co-fab:hover span,.co-fab:focus-visible span,.co-fab[aria-expanded="true"] span{color:inherit}
.co-fab:focus-visible{outline:2px solid var(--ws-text);outline-offset:2px}
body[data-co-open] .co-fab{display:none}

.co-markers{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.co-mark{position:absolute;left:0;top:0;display:grid;place-items:center;min-width:22px;height:22px;padding:0 var(--space-8);border-radius:var(--ws-radius-pill);font:700 11px/1 var(--ws-mono);box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 2px rgba(16,19,25,.85)}
.co-mark[hidden]{display:none}
.co-mark.pin{background:var(--ws-accent);color:var(--ws-on-accent)}
.co-mark.change{background:var(--ws-gold);color:var(--ws-on-gold)}
.co-mark.warn{background:var(--ws-coral);color:var(--ws-on-coral)}
.co-mark.info{background:var(--ws-cyan);color:var(--ws-on-cyan)}

body[data-preview] .ws-stage{box-shadow:inset 0 0 0 2px var(--ws-gold)}
body[data-preview] .ws-stage::before{content:'PREVIEW · NOT APPLIED';position:absolute;top:42px;left:22px;z-index:3;padding:var(--space-4) var(--space-8);border-radius:var(--ws-radius-pill);background:var(--ws-gold);color:var(--ws-on-gold);font:700 10px var(--ws-mono);letter-spacing:.08em;pointer-events:none}
body[data-co-locked] :is(.ws-header,.ws-mobile-tabs,.ws-left,.ws-right,.ws-toolbar,.ws-timeline,.journey-actions){opacity:.55}

.co-sheet{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;flex-direction:column;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 32px);background:var(--ws-panel);color:var(--ws-text);border:1px solid var(--ws-line);border-radius:var(--ws-radius-m);box-shadow:0 22px 60px rgba(0,0,0,.55);font:14px/1.4 var(--ws-font)}
.co-sheet[hidden]{display:none}
.co-sheet button{font:inherit;color:inherit;cursor:pointer}
.co-sheet button:focus-visible,.co-sheet textarea:focus-visible{outline:2px solid var(--ws-accent);outline-offset:2px}
.co-head{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-8) var(--space-8) var(--space-16);border-bottom:1px solid var(--ws-line)}
.co-head h2{margin:0;font-size:var(--text-16);font-weight:700;letter-spacing:.01em}
.co-head h2 span{color:var(--ws-accent)}
.co-engine{padding:var(--space-4) var(--space-8);border:1px solid var(--ws-line);border-radius:var(--ws-radius-pill);font:10px var(--ws-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ws-muted)}
.co-close{margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:var(--ws-radius-s);background:transparent;color:var(--ws-muted)}
.co-close:hover{background:var(--ws-raised);color:var(--ws-text)}

.co-pointing{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-16);border-bottom:1px solid var(--ws-line)}
.co-label{width:100%;font:10px var(--ws-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ws-muted)}
.co-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;flex:1 1 200px;min-width:0}
.co-chip{display:inline-flex;align-items:center;gap:var(--space-8);max-width:100%;min-height:30px;padding:var(--space-2) var(--space-4) var(--space-2) var(--space-8);border:1px solid var(--ws-line);border-radius:var(--ws-radius-pill);background:var(--ws-raised);font-size:12px}
.co-chip b{display:grid;place-items:center;min-width:20px;height:20px;border-radius:var(--ws-radius-pill);background:var(--ws-accent);color:var(--ws-on-accent);font:700 11px var(--ws-mono)}
.co-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-chip-tag{font:10px var(--ws-mono);color:var(--ws-muted)}
.co-chip-selected{border-color:rgba(179,160,239,.7)}
.co-chip-selected:not(:has(b)){padding-right:var(--space-8)}
.co-dot{width:8px;height:8px;border-radius:50%;background:var(--ws-accent);box-shadow:0 0 0 3px rgba(179,160,239,.25)}
.co-unpin{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ws-muted);font-size:var(--text-16)!important}
.co-unpin:hover{background:var(--ws-panel);color:var(--ws-text)}
.co-empty{color:var(--ws-muted);font-size:var(--text-12)}
.co-pin{min-height:32px;padding:0 var(--space-12);border:1px solid var(--ws-line);border-radius:var(--ws-radius-pill);background:transparent;font-size:var(--text-12)!important}
.co-pin:hover:not(:disabled){border-color:var(--ws-accent)}
.co-pin:disabled{opacity:.45;cursor:default}

.co-thread{flex:1 1 auto;min-height:0;overflow:auto;display:grid;align-content:start;gap:var(--space-8);padding:var(--space-12) var(--space-16)}
.co-thread:empty{display:none}
.co-card{display:grid;gap:var(--space-8);padding:var(--space-12);border:1px solid var(--ws-line);border-radius:var(--ws-radius-m);background:var(--ws-ground)}
.co-card[data-state="preview"]{border-color:rgba(213,171,121,.7)}
.co-card[data-state="discarded"],.co-card[data-state="unknown"]{opacity:.78}
.co-card p,.co-card ul{margin:0}
.co-you{color:var(--ws-muted);font-size:var(--text-12)}
.co-you::before{content:'You · ';font:10px var(--ws-mono);letter-spacing:.06em;text-transform:uppercase}
.co-summary{font-weight:600}
.co-card[data-state="unknown"] .co-summary{font-weight:400}
.co-diff,.co-changes,.co-notes,.co-findings{display:grid;gap:var(--space-8);padding:0;list-style:none}
.co-row{display:grid;gap:var(--space-4);padding:var(--space-8);border-radius:var(--ws-radius-s);background:var(--ws-panel)}
.co-row-head{display:flex;gap:var(--space-4);align-items:baseline;font-size:var(--text-13)}
.co-row-head b{color:var(--ws-gold)}
.co-added .co-row-head b{color:var(--ws-cyan)}
.co-removed .co-row-head b{color:var(--ws-coral)}
.co-kind{color:var(--ws-muted);font:11px var(--ws-mono)}
.co-changes li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);font:12px/1.35 var(--ws-mono);color:var(--ws-muted)}
.co-field{color:var(--ws-text);font-family:var(--ws-font)}
.co-to{color:var(--ws-text)}
.co-from,.co-to{display:inline-flex;align-items:center;gap:var(--space-4)}
.co-swatch{display:inline-block;width:12px;height:12px;border-radius:var(--ws-radius-xs);border:1px solid rgba(255,255,255,.25)}
.co-motion,.co-tip,.co-notes li{color:var(--ws-muted);font-size:var(--text-12)}
.co-findings li{display:flex;gap:var(--space-8);align-items:flex-start;font-size:var(--text-13)}
.co-findings b{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font:700 11px var(--ws-mono)}
.co-warn b{background:var(--ws-coral);color:var(--ws-on-coral)}
.co-info b{background:var(--ws-cyan);color:var(--ws-on-cyan)}
.co-bar{display:grid;gap:var(--space-8);padding:var(--space-8) var(--space-16);border-top:1px solid var(--ws-line);background:linear-gradient(rgba(213,171,121,.08),transparent)}
.co-bar[hidden]{display:none}
.co-bar p{margin:0}
.co-bar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8)}
.co-sheet[data-pending] .co-suggest{display:none}
.co-compare{display:inline-flex;margin-right:auto;border:1px solid var(--ws-line);border-radius:var(--ws-radius-s);overflow:hidden}
.co-sheet .co-compare button{min-height:38px;padding:0 var(--space-12);border:0;border-radius:0;background:transparent;font-size:12px;color:var(--ws-muted)}
.co-sheet .co-compare button[aria-pressed="true"]{background:var(--ws-raised);color:var(--ws-text)}
/* Scoped under .co-sheet: Studio's global button:hover would otherwise win. */
.co-sheet :is(.co-discard,.co-apply,.co-undo,.co-send){min-height:40px;padding:0 var(--space-16);border-radius:var(--ws-radius-s);font-weight:600}
.co-sheet :is(.co-discard,.co-undo){border:1px solid var(--ws-line);background:transparent}
.co-sheet :is(.co-discard,.co-undo):hover:not(:disabled){border-color:var(--ws-text);background:var(--ws-raised)}
.co-sheet :is(.co-apply,.co-send){border:1px solid var(--ws-gold);background:var(--ws-gold);color:var(--ws-on-gold)}
.co-sheet :is(.co-apply,.co-send):hover{border-color:var(--ws-gold-hi);background:var(--ws-gold-hi);color:var(--ws-on-gold)}
.co-result{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);color:var(--ws-muted);font-size:var(--text-12)}
.co-card[data-state="applied"] .co-result{color:var(--ws-cyan)}
.co-sheet .co-undo{min-height:32px;padding:0 var(--space-12);color:var(--ws-text)}
.co-undo:disabled{opacity:.5;cursor:default}

.co-form{display:flex;gap:var(--space-8);align-items:flex-end;padding:var(--space-12) var(--space-16) var(--space-8);border-top:1px solid var(--ws-line)}
.co-thread:empty+.co-form{border-top:0}
.co-form textarea{flex:1;min-width:0;min-height:44px;max-height:120px;padding:var(--space-8) var(--space-12);border:1px solid var(--ws-line);border-radius:var(--ws-radius-m);background:var(--ws-ground);color:var(--ws-text);font:14px/1.35 var(--ws-font);resize:vertical}
.co-form textarea::placeholder{color:var(--ws-muted)}
.co-suggest{display:flex;gap:var(--space-8);overflow-x:auto;padding:0 var(--space-16) var(--space-8);scrollbar-width:thin}
.co-suggest button{flex:none;min-height:32px;padding:0 var(--space-12);border:1px solid var(--ws-line);border-radius:var(--ws-radius-pill);background:var(--ws-raised);font-size:var(--text-12)!important;white-space:nowrap}
.co-suggest button:hover{border-color:var(--ws-accent)}
.co-foot{margin:0;padding:0 var(--space-16) var(--space-12);color:var(--ws-muted);font-size:var(--text-11);line-height:1.4}

@media(max-width:850px){
 .co-sheet{left:0;right:0;bottom:0;width:auto;max-height:58vh;max-height:58dvh;border-width:1px 0 0;border-radius:var(--ws-radius-l) var(--ws-radius-l) 0 0}
 .co-head{padding-left:16px}
 .co-foot{padding-bottom:max(var(--space-12),env(safe-area-inset-bottom))}
 /* Phones: the stage starts below the first screen, so the way to the co-editor floats. */
 .co-fab{position:fixed;z-index:39;right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));min-height:48px;padding:0 var(--space-16);font-size:var(--text-14)}
 .co-unpin{width:32px;height:32px}
 .co-chip{min-height:36px}
 /* Room to scroll the viewport above the sheet, even on a short page. */
 body[data-co-open]{padding-bottom:60vh;padding-bottom:60dvh}
}
@media(prefers-reduced-motion:no-preference){.co-fab,.co-chip,.co-suggest button{transition:background-color .15s,border-color .15s,color .15s}}
/* Only the thread shrinks when the sheet is height-capped; controls keep their size. */
.co-sheet>:not(.co-thread){flex:none}