/* Compact feature previews share the existing hero window dimensions. */
#product-demo .feature-preview{padding:0;transform:none;isolation:isolate}
.feature-preview button{font:inherit;cursor:pointer}
.ask-preview{display:flex;flex-direction:column;height:100%;background:#0c1223;color:#dfe7f7}
.ask-preview-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #ffffff12;font-size:11px}
.ask-preview-header strong{font-size:12px}.preview-status{display:flex;align-items:center;gap:5px;color:#8fa1bc;font-size:9px}.preview-status i{width:5px;height:5px;border-radius:50%;background:#62d6b0}
.ask-reading{flex:1;min-height:0;overflow:auto;padding:18px 19px 110px;scrollbar-width:thin;scrollbar-color:#33415e transparent}
.ask-reading .reading-label{font-size:9px;color:#7e91b0;letter-spacing:.1em}.ask-reading h3{font-size:18px;line-height:1.5;margin:10px 0 14px;color:#eef2ff}.ask-reading h4{font-size:12px;margin:20px 0 8px}.ask-reading p{font-size:12px;line-height:1.9;color:#a9b8ce;margin:0 0 12px}.ask-reading blockquote{border-left:2px solid #9e8afa;margin:16px 0;padding:4px 12px;color:#d1c6ff;font-size:12px;line-height:1.8}.reading-time{color:#60b9ee;font-size:9px}.reading-image{width:100%;height:90px;object-fit:cover;border-radius:9px;margin:2px 0 12px;opacity:.8}
.ask-answer{position:absolute;z-index:3;bottom:104px;left:16px;right:16px;max-height:52%;overflow:auto;padding:13px 14px;border:1px solid #a88bfa55;border-radius:15px 15px 4px 15px;background:#1b2037f5;box-shadow:0 14px 35px #0007;backdrop-filter:blur(16px);animation:answer-appear .25s ease-out}
.ask-answer[hidden]{display:none}.answer-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;color:#c1acff;font-size:10px;font-weight:700}.answer-top button{border:0;background:transparent;color:#a8b3c9;padding:2px 5px;font-size:16px}.answer-question{margin:0 0 8px;font-size:11px;font-weight:650;color:#edf0ff}.answer-copy{margin:0;font-size:12px;line-height:1.75;color:#b9c6dc}.answer-source{display:inline-flex;gap:5px;margin-top:11px;padding:5px 8px;border:1px solid #70b7f630;border-radius:6px;color:#8ccdf4;background:#56aaf50b;font-size:9px}.answer-round{color:#7c8cac;font-size:9px;margin-left:auto}
.ask-controls{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:12px 14px;background:linear-gradient(0deg,#0c1223 75%,#0c122300)}
.ask-suggestions{display:flex;gap:6px;overflow:auto;margin-bottom:8px;scrollbar-width:none}.ask-suggestions button{white-space:nowrap;padding:6px 9px;border:1px solid #53608066;border-radius:999px;background:#192137;color:#b6c5dd;font-size:10px}.ask-suggestions button[aria-pressed=true]{color:#dbcfff;border-color:#a38cec77;background:#322d50}
.ask-launcher{display:flex;align-items:center;gap:9px;width:100%;padding:11px 12px;border:1px solid #a38bed55;border-radius:12px;background:linear-gradient(110deg,#29233f,#1c2940);color:#d6c8ff;text-align:left;font-size:11px}.ask-launcher>span:first-child{font-size:16px}.ask-launcher small{margin-left:auto;color:#9baac4;font-size:9px}.ask-answer:focus-visible{outline:2px solid #a38bed}
.mcp-preview{display:flex;flex-direction:column;height:100%;padding:16px;background:radial-gradient(ellipse at 100% 0,#143c4533,transparent 60%),#0c1423;color:#dfe7f7;gap:12px}.mcp-preview-head{display:flex;gap:9px;align-items:center}.mcp-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid #69d2c73a;border-radius:10px;background:#55c9bf10;color:#7de0cc;font-size:18px}.mcp-preview-head strong{font-size:12px}.mcp-preview-head small{display:block;margin-top:2px;color:#8fa4b9;font-size:9px}.mcp-preview-head .preview-status{margin-left:auto}
.mcp-scenes{display:flex;gap:5px;padding:4px;border:1px solid #ffffff10;border-radius:10px;background:#080f1c}.mcp-scenes button{flex:1;min-width:0;padding:7px 3px;border:0;border-radius:7px;background:transparent;color:#8ea3bd;font-size:10px}.mcp-scenes button[aria-pressed=true]{background:#1d3443;color:#a1e9dc;box-shadow:0 2px 8px #0002}
.mcp-story{overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#33415e transparent}.mcp-prompt{margin:0 0 15px 24px;padding:11px 13px;border:1px solid #56678f45;border-radius:12px 12px 3px 12px;background:#1e2941;font-size:12px;line-height:1.65;color:#dbe5f7}.mcp-prompt-label{display:block;color:#8fa3c3;font-size:9px;margin-bottom:4px}.mcp-trace{position:relative;margin:0 0 14px 9px;padding-left:20px;border-left:1px solid #44676d77}.mcp-step{position:relative;margin-bottom:12px}.mcp-step:before{content:'✓';position:absolute;left:-28px;top:1px;width:15px;height:15px;border-radius:50%;background:#15332e;border:1px solid #458778;color:#9ae6ca;text-align:center;font-size:9px;line-height:15px}.mcp-step strong{display:block;color:#b9d4de;font-size:10px;font-weight:600}.mcp-step code{display:block;margin-top:3px;color:#7d93ad;font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.mcp-result{padding:13px 14px;border:1px solid #63c4b52d;border-radius:12px;background:linear-gradient(120deg,#17302d66,#17233a);animation:answer-appear .25s ease-out}.mcp-result-label{font-size:9px;color:#7fd7be}.mcp-result h3{font-size:13px;line-height:1.5;margin:7px 0}.mcp-result p{font-size:12px;line-height:1.75;color:#aabfd1;margin:0}.mcp-result small{display:block;color:#7b9fbb;font-size:9px;margin-top:10px}.mcp-preview-foot{flex:none;display:flex;justify-content:space-between;gap:8px;border-top:1px solid #ffffff10;padding-top:10px;color:#7388a3;font-size:9px}.mcp-preview-foot span:last-child{color:#80c9bd}
@keyframes answer-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:680px){.ask-reading{padding:16px 15px 110px}.ask-answer{left:11px;right:11px}.mcp-preview{padding:13px;gap:10px}.ask-preview-header{padding:12px 14px}}
@media(prefers-reduced-motion:reduce){.ask-answer,.mcp-result{animation:none}}

/* Top previews never capture vertical scrolling from the website. */
#product-demo .ask-reading,#product-demo .ask-answer,#product-demo .mcp-story{overflow:hidden;overscroll-behavior:auto;touch-action:pan-y}
#product-demo .ask-suggestions{overflow:visible;flex-wrap:wrap}
#product-demo .ask-suggestions button{font-size:9px;padding:5px 7px}
#product-demo .ask-answer{bottom:120px;max-height:none}
#product-demo .mcp-story{flex:1}
#product-demo .mcp-prompt{padding:9px 11px;margin-bottom:12px}
#product-demo .mcp-result p{font-size:11px;line-height:1.65}

#product-demo .ask-reading h3{width:100%;max-width:none;text-wrap:wrap;word-break:normal;overflow-wrap:anywhere;line-break:anywhere}

/* Adapt both feature scenes to the shorter, content-sized hero window. */
#product-demo .ask-preview-header{padding:11px 14px}
#product-demo .ask-reading{padding:13px 15px 106px}
#product-demo .ask-reading h3{font-size:16px;margin:7px 0 10px}
#product-demo .reading-image{height:64px}
#product-demo .ask-controls{padding:10px 12px}
#product-demo .ask-launcher{padding:9px 10px}
#product-demo .ask-answer{bottom:104px;max-height:calc(100% - 156px);padding:10px 12px}
#product-demo .answer-copy{font-size:11px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
#product-demo .answer-source{margin-top:7px}
#product-demo .mcp-preview{padding:12px;gap:9px}
#product-demo .mcp-mark{width:27px;height:27px;font-size:16px}
#product-demo .mcp-scenes{padding:3px}
#product-demo .mcp-scenes button{padding:6px 2px}
#product-demo .mcp-prompt{padding:8px 10px;margin:0 0 10px 15px;font-size:11px;line-height:1.55}
#product-demo .mcp-trace{margin-bottom:9px;padding-left:16px}
#product-demo .mcp-step{margin-bottom:8px}
#product-demo .mcp-step:before{left:-24px}
#product-demo .mcp-step code{font-size:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#product-demo .mcp-result{padding:10px 11px}
#product-demo .mcp-result h3{margin:5px 0;font-size:12px}
#product-demo .mcp-result p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
#product-demo .mcp-result small{margin-top:7px}
#product-demo .mcp-preview-foot{padding-top:7px;font-size:8px}
@media(max-width:380px){#product-demo .ask-answer{bottom:117px;max-height:calc(100% - 162px)}#product-demo .mcp-preview-head .preview-status{display:none}}

/* Night theme tokens copied from the real client; scoped to Q&A only. */
#product-demo .ask-preview {
  /* DeepVid website night palette: indigo space, soft violet surfaces, cyan signals. */
  --bg-primary: #080a16;
  --bg-secondary: #111526;
  --text-primary: #f6f7ff;
  --text-secondary: #cbd2ee;
  --text-muted: #a7b0cc;
  --card-bg: rgba(17, 21, 38, 0.84);
  --card-border: rgba(255, 255, 255, 0.11);
  --card-hover-border: rgba(132, 103, 255, 0.52);
  --subcard-bg: rgba(22, 27, 49, 0.9);
  --input-bg: rgba(10, 13, 27, 0.88);
  --input-border: rgba(137, 147, 205, 0.26);
  --accent-color: #8467ff;
  --accent-light: rgba(132, 103, 255, 0.14);
  --glow-shadow: 0 22px 60px -30px rgba(92, 82, 210, 0.62);
  --empty-box-bg: rgba(17, 21, 38, 0.58);
  --md-h1: #f6f7ff;
  --md-h2: #a99aff;
  --md-h3: #e8eaff;
  --md-p: #cbd2ee;
  --md-code-bg: rgba(36, 42, 76, 0.78);
  --md-code-color: #a9eaf8;
  --md-pre-bg: rgba(8, 10, 22, 0.94);
  --md-pre-border: rgba(161, 170, 230, 0.22);
  --app-background:
    radial-gradient(ellipse 68% 48% at 74% -10%, rgba(57, 77, 177, 0.42) 0%, transparent 69%),
    radial-gradient(ellipse 42% 34% at -6% 42%, rgba(91, 55, 177, 0.22) 0%, transparent 77%),
    #080a16;
  --surface-gradient: linear-gradient(145deg, rgba(28, 34, 65, 0.92), rgba(14, 18, 34, 0.94));
  --surface-glow-gradient:
    radial-gradient(circle at 88% 0%, rgba(132, 103, 255, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(31, 37, 73, 0.95), rgba(13, 17, 33, 0.96));
  --brand-primary: #9b8cff;
  --brand-secondary: #6e7fff;
  --brand-signal: #3ed9f5;
  --brand-gradient: linear-gradient(110deg, #b7b7ff 0%, #8467ff 48%, #3ed9f5 100%);
  --brand-shadow: 0 18px 40px -17px rgba(119, 105, 255, 0.72);
  --brand-hover-shadow: 0 20px 45px -17px rgba(119, 105, 255, 0.82);
}

#product-demo .ask-preview{background:var(--app-background);color:var(--text-primary)}
#product-demo .ask-preview-header{border-color:var(--card-border);background:var(--card-bg)}
#product-demo .ask-preview .preview-status,#product-demo .reading-label{color:var(--text-muted)}
#product-demo .ask-reading{background:var(--surface-gradient)}
#product-demo .ask-reading h3{color:var(--md-h1)}
#product-demo .ask-reading h4{color:var(--md-h2)}
#product-demo .ask-reading p{color:var(--md-p)}
#product-demo .ask-reading blockquote{border-color:var(--accent-color);color:var(--text-secondary)}
#product-demo .reading-time{color:var(--brand-signal)}
#product-demo .ask-answer{padding:0;border:1px solid rgb(139 92 246 / .3);border-radius:16px;background:var(--bg-secondary);box-shadow:0 25px 50px -12px rgb(0 0 0 / .25);backdrop-filter:none;-webkit-backdrop-filter:none;bottom:104px;max-height:calc(100% - 154px)}
#product-demo .answer-top{padding:10px 14px;margin:0;border-bottom:1px solid var(--card-border);color:var(--text-primary);font-size:12px;font-weight:600}
#product-demo .answer-top button{display:grid;place-items:center;padding:4px;color:var(--text-muted);border-radius:6px}
#product-demo .answer-top button:hover{background:var(--subcard-bg);color:var(--text-primary)}
#product-demo .answer-round{color:var(--text-muted);font-size:9px;font-weight:400}
#product-demo .answer-messages{padding:12px;overflow:hidden}
#product-demo .answer-question{margin:0 0 12px 32px;padding:9px 12px;border-radius:12px;background:rgb(139 92 246 / .15);color:var(--text-primary);font-size:11px;font-weight:400;line-height:1.6}
#product-demo .answer-response{margin-right:8px;padding:9px 12px;border:1px solid var(--card-border);border-radius:12px;background:var(--subcard-bg)}
#product-demo .answer-copy{color:var(--md-p);font-size:11px;line-height:1.65;-webkit-line-clamp:4}
#product-demo .answer-source{padding:0;border:0;border-radius:0;background:none;color:var(--text-muted);font-size:9px;margin-top:7px}
#product-demo .ask-controls{background:linear-gradient(0deg,var(--bg-secondary) 76%,transparent)}
#product-demo .ask-suggestions button{border-color:var(--card-border);border-radius:8px;background:var(--subcard-bg);color:var(--text-secondary)}
#product-demo .ask-suggestions button[aria-pressed=true]{background:var(--accent-light);border-color:rgb(139 92 246 / .3);color:var(--text-primary)}
#product-demo .ask-chat-dock{display:flex;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--card-border)}
#product-demo .ask-chat-shell{display:flex;align-items:center;min-width:0;padding:6px;border:1px solid rgb(139 92 246 / .3);border-radius:12px;background:var(--subcard-bg)}
#product-demo .ask-launcher{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;min-height:36px;padding:8px 12px;border:0;border-radius:8px;background:var(--brand-gradient);box-shadow:var(--brand-shadow);color:white;font-size:12px;font-weight:600}
#product-demo .ask-launcher:hover{filter:brightness(1.08) saturate(1.04);box-shadow:var(--brand-hover-shadow)}
#product-demo .ask-launcher[aria-expanded=true]{box-shadow:var(--brand-hover-shadow)}
#product-demo .ask-launcher svg{flex:none}
@media(max-width:680px){#product-demo .ask-chat-dock{border:0;padding-top:0}#product-demo .ask-chat-shell{background:var(--bg-secondary);box-shadow:0 8px 28px rgb(0 0 0 / .18)}#product-demo .ask-launcher{min-height:40px}#product-demo .ask-answer{bottom:116px;max-height:calc(100% - 158px)}}

/* MCP uses the same night materials and blue-violet accents as the client. */
#product-demo .mcp-preview{--text-primary:#f6f7ff;--text-secondary:#cbd2ee;--text-muted:#a7b0cc;--card-border:rgba(255,255,255,.11);--subcard-bg:rgba(22,27,49,.9);--accent-color:#8467ff;--brand-signal:#3ed9f5;background:linear-gradient(145deg,rgba(28,34,65,.92),rgba(14,18,34,.94));color:var(--text-primary);padding:14px;gap:12px}
#product-demo .mcp-mark{width:30px;height:30px;border:1px solid #8467ff44;border-radius:9px;background:#8467ff14;color:#b7b7ff}
#product-demo .mcp-preview-head strong{color:var(--text-primary);font-weight:600}
#product-demo .mcp-preview-head small,#product-demo .mcp-preview .preview-status{color:var(--text-muted)}
#product-demo .mcp-preview .preview-status i{background:var(--brand-signal)}
#product-demo .mcp-scenes{border-color:var(--card-border);border-radius:12px;background:var(--subcard-bg);padding:4px;gap:4px}
#product-demo .mcp-scenes button{color:var(--text-muted);border-radius:8px}
#product-demo .mcp-scenes button[aria-pressed=true]{background:linear-gradient(110deg,#8467ff,#6e7fff);color:#fff;box-shadow:0 3px 12px #8467ff25}
#product-demo .mcp-prompt{margin-left:24px;border:1px solid #8467ff28;border-radius:12px;background:#8467ff18;color:var(--text-primary)}
#product-demo .mcp-prompt-label{color:var(--text-muted)}
#product-demo .mcp-trace{border-color:#8467ff44}
#product-demo .mcp-step:before{border-color:#9b8cff55;background:#211d3e;color:#b7b7ff}
#product-demo .mcp-step strong{color:var(--text-secondary)}
#product-demo .mcp-step code{color:#99a7c8}
#product-demo .mcp-result{border:1px solid var(--card-border);border-radius:14px;background:var(--subcard-bg);box-shadow:0 4px 20px -2px #0000000d}
#product-demo .mcp-result-label{color:#a99aff;letter-spacing:.02em}
#product-demo .mcp-result h3{color:var(--text-primary);font-weight:600}
#product-demo .mcp-result p{color:var(--text-secondary)}
#product-demo .mcp-result small{color:var(--text-muted)}
#product-demo .mcp-preview-foot{border-color:var(--card-border);color:var(--text-muted)}
#product-demo .mcp-preview-foot span:last-child{color:#a99aff}

#product-demo .ask-suggestions[hidden]{display:none}
#product-demo .ask-controls:not(.is-open) .ask-chat-dock{margin-top:0;border-top:0;padding-top:0}

/* Match the real Q&A dock: expand horizontally, then choose a clear question bubble. */
#product-demo .ask-controls .ask-chat-shell{width:178px;max-width:100%;transition:width .26s ease;overflow:hidden}
#product-demo .ask-controls.is-open .ask-chat-shell{width:100%}
#product-demo .ask-controls .ask-chat-dock{border:0;padding-top:0;margin-top:0}
#product-demo .ask-controls.is-open .ask-launcher{flex:none;padding:10px;min-height:38px}
#product-demo .ask-controls.is-open .ask-launcher span{display:none}
#product-demo .ask-expanded-input{display:flex;align-items:center;gap:5px;flex:1;min-width:0;padding-left:5px}
#product-demo .ask-expanded-input[hidden]{display:none}
#product-demo .ask-expanded-input input{width:100%;min-width:0;padding:8px 0;border:0;outline:none;background:transparent;font-family:inherit;font-size:12px;line-height:1.5;color:var(--text-primary);text-overflow:ellipsis}
#product-demo .ask-expanded-input input::placeholder{color:var(--text-muted)}
#product-demo .ask-expanded-input button{display:grid;place-items:center;flex:none;padding:7px;border:0;border-radius:7px;background:transparent;color:var(--text-muted)}
#product-demo .ask-expanded-input button:hover{color:var(--text-primary);background:var(--accent-light)}
#product-demo .ask-controls .ask-suggestions{display:grid;gap:8px;margin:0 0 12px}
#product-demo .ask-controls .ask-suggestions[hidden]{display:none}
#product-demo .ask-controls .ask-suggestions button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:55px;padding:10px 13px;border:1px solid #a99aff55;border-radius:13px;background:linear-gradient(135deg,#292746f5,#1a2137f5);box-shadow:0 5px 18px #0003;text-align:left;white-space:normal;color:var(--text-primary)}
#product-demo .ask-suggestions button>span{color:#b5a7f1;font-size:10px;line-height:1.3}
#product-demo .ask-suggestions button>strong{font-size:12px;line-height:1.5;font-weight:500}
#product-demo .ask-controls .ask-suggestions button:hover{border-color:#b7b7ffbb;background:#343052}
#product-demo .ask-answer{bottom:84px;max-height:calc(100% - 138px)}
@media(max-width:380px){#product-demo .ask-controls .ask-suggestions button{padding:9px 11px}#product-demo .ask-suggestions button>strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){#product-demo .ask-controls .ask-chat-shell{transition:none}}

/* A guided MCP setup → question → thesis flow, with real copy actions. */
/* Two-step MCP preview shares the reading preview's title bar. */
#product-demo .mcp-preview{padding:0;gap:0}
#product-demo .mcp-preview .ask-preview-header{background:rgba(17,21,38,.92)}
#product-demo .mcp-flow-body{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow:hidden;padding:16px}
#product-demo .mcp-flow-card{padding:13px 14px;border:1px solid var(--card-border);border-radius:14px;background:var(--subcard-bg)}
#product-demo .mcp-flow-card.prompt{border-color:#8467ff44;background:#8467ff14}
#product-demo .mcp-flow-card-label{font-size:10px;color:#b3a5f4}
#product-demo .mcp-flow-card p{margin:7px 0 0;color:var(--text-secondary);font-size:12px;line-height:1.75}
#product-demo .mcp-flow-card h3{margin:7px 0 0;font-size:15px;color:var(--text-primary);line-height:1.5}
#product-demo .mcp-flow-card .mcp-question{color:var(--text-primary);font-size:13px;line-height:1.8}
#product-demo .mcp-flow-url{display:block;margin-top:8px;color:var(--text-muted);font-size:9px;overflow-wrap:anywhere}
#product-demo .mcp-flow-action{display:flex;align-items:center;justify-content:center;width:100%;min-height:38px;padding:8px 12px;border:1px solid #a99aff44;border-radius:10px;background:linear-gradient(110deg,#7664c6,#6273c4);color:#fff;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
#product-demo .mcp-flow-action.secondary{min-height:28px;padding:5px 0;background:none;border:0;color:#b9b1e2;font-size:11px}
#product-demo .mcp-flow-body>.mcp-flow-action{margin-top:auto;flex:none}
#product-demo .mcp-flow-card .mcp-flow-action{justify-content:flex-start;width:auto;margin-top:8px}
#product-demo .mcp-flow-status{margin:4px 0 0;color:var(--text-muted);font-size:10px;line-height:1.4}
#product-demo .mcp-watch-title{margin:16px 0 0;color:var(--text-primary);font-size:12px;font-weight:600}
#product-demo .mcp-flow-card .mcp-watch-point{font-size:11px;line-height:1.7}
@media(max-width:380px){#product-demo .mcp-flow-body{gap:10px;padding:12px}#product-demo .mcp-flow-card{padding:10px 12px}#product-demo .mcp-flow-card .mcp-question{font-size:12px}}