/* B5b: keep the real site and the independently hosted chat visibly separate. */
.demo-panels { display:grid; grid-template-columns:minmax(0,2fr) minmax(18rem,1fr); gap:1.5rem; margin-block:1.5rem; }
.demo-panels iframe { border:1px solid var(--ob-edge); border-radius:.5rem; background:var(--ob-surface); }
@media(max-width:800px) { .demo-panels { grid-template-columns:minmax(0,1fr); } }
/* S8 (D105): the drawn chat preview (preview.v1.js) beside setup's drafts and the Widget › Design tab. Theme tokens only;
   the customer's colour arrives as --cp-accent. Text on it is white, as on the real chat button (widget.v2.js). */
.cp-layout { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.cp-layout > :first-child { flex:1 1 380px; min-width:0; }
.chat-preview { --cp-accent:var(--ob-accent); --cp-on-accent:var(--ob-qr-paper); min-width:0; margin:0; display:grid; gap:12px; }
.cp-layout > .chat-preview, .cp-side { flex:0 1 340px; min-width:0; position:sticky; top:16px; }
.cp-side { display:grid; gap:12px; }
.chat-preview figcaption { display:grid; gap:4px; justify-items:start; }
.chat-preview > p, .cp-side > p { margin:0; }
.cp-window { background:var(--ob-surface); border:1px solid var(--ob-line-2); border-radius:14px; overflow:hidden; box-shadow:0 8px 30px var(--ob-shadow); font-size:15px; line-height:1.45; }
.cp-head { display:flex; align-items:center; gap:8px; padding:12px 14px; background:var(--cp-accent); color:var(--cp-on-accent); font-weight:600; }
.cp-avatar { flex:none; width:28px; height:28px; border-radius:50%; border:1px solid currentColor; display:grid; place-items:center; font-size:13px; }
.cp-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* one line, as frame.v1.css */
.cp-close { font-size:22px; line-height:1; font-weight:400; }
.cp-log { display:flex; flex-direction:column; gap:8px; padding:14px; }
.cp-msg { margin:0; padding:8px 12px; border-radius:12px; background:var(--ob-neutral-bg); color:var(--ob-ink); max-width:85%; align-self:flex-start; overflow-wrap:anywhere; }
.cp-msg p { margin:0; }
.cp-msg .cp-source { margin-top:4px; font-size:12px; color:var(--ob-muted); }
.cp-visitor { align-self:flex-end; background:var(--cp-accent); color:var(--cp-on-accent); }
.cp-starters { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.cp-chip { border:1px solid var(--cp-accent); border-radius:var(--ob-radius-pill); padding:4px 10px; font-size:13px; color:var(--ob-ink); }
.cp-compose { display:flex; gap:8px; margin:0 14px; }
.cp-input { flex:1; min-width:0; padding:8px 10px; border:1px solid var(--ob-line-2); border-radius:10px; color:var(--ob-muted); }
.cp-send { background:var(--cp-accent); color:var(--cp-on-accent); border-radius:10px; padding:8px 14px; font-weight:600; }
.cp-foot { margin:8px 14px 12px; font-size:12px; color:var(--ob-muted); display:grid; gap:2px; }
.cp-foot p { margin:0; overflow-wrap:anywhere; }
.cp-link { text-decoration:underline; }
.cp-launch { display:flex; justify-content:flex-end; }
.chat-preview[data-position="left"] .cp-launch { justify-content:flex-start; }
.cp-button { background:var(--cp-accent); color:var(--cp-on-accent); border-radius:var(--ob-radius-pill); padding:12px 18px; font-weight:600; font-size:15px; }
/* QF-3: a quality-check reply keeps its line breaks */
.marked-reply { white-space:pre-wrap; margin:.25rem 0 .5rem; }

/* UI1: stable transcript/composer, separate status; stack in reading order on phones. */
.setup-test-layout { display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:2rem; align-items:start; }
.setup-test-layout > * { min-width:0; }
.test-suggestions { margin-block:1rem; }
.test-chat .transcript { max-height:34rem; overflow:auto; }
.test-chat textarea { width:100%; }
.test-feedback { margin-block:.75rem; }
.checked-answers { margin-block:1.5rem; }
@media(max-width:800px) { .setup-test-layout { grid-template-columns:minmax(0,1fr); } }

.setup-step-picker,.setup-check-summary { display:none; }
@media(max-width:800px) {
  .setup-steps > button { display:none; }
  .setup-step-picker { display:grid; width:100%; gap:.35rem; }
  .setup-step-picker select { width:100%; min-width:0; }
  .setup-check-summary { display:block; position:sticky; top:0; z-index:1; padding:.5rem; background:var(--ob-surface); border:1px solid var(--ob-line-2); border-radius:.5rem; }
}

/* D204: the real widget owns its iframe styles; keep setup controls outside it. */
.setup-widget-preview { display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; min-width:0; }
.setup-widget-preview > p { margin:0; }
.setup-widget-preview > div:empty { display:none; }
.setup-widget-window { width:380px; max-width:100%; }
.setup-widget-frame { display:block; width:100%; height:min(640px,80dvh); min-height:420px; border:0; border-radius:14px; box-shadow:0 8px 30px var(--ob-shadow); }
.setup-widget-quality { margin-block:1rem; }
.setup-widget-quality > summary { cursor:pointer; }
.setup-widget-quality .setup-check { padding-block:1rem; }
.widget-answer-details { width:100%; }

.setup-widget-frame[hidden] { display:none; }

/* D207: one customer conversation; clear staff tasks beside it. */
.setup-admin-panel { display:grid; gap:1rem; }
.setup-widget-controls { display:grid; gap:.5rem; margin-block:0 1.25rem; }
.setup-widget-controls > p { margin:0; }
.setup-admin-panel > h3,.setup-admin-panel > p { margin:0; }
.setup-task { border:1px solid var(--ob-line-2); border-radius:12px; background:var(--ob-surface); padding:1rem; margin:0; }
.setup-task > summary { cursor:pointer; list-style:none; display:grid; gap:.3rem; padding-right:1.5rem; position:relative; }
.setup-task > summary::-webkit-details-marker { display:none; }
.setup-task > summary::after { content:'+'; position:absolute; right:0; top:0; font-size:1.25rem; }
.setup-task[open] > summary::after { content:'−'; }
.setup-task[open] > summary { margin-bottom:1rem; }
.setup-task > h3 { margin:0 0 .75rem; }
.setup-widget-quality .setup-check { padding:0; }
.setup-state { display:inline-block; margin:0; padding:.25rem .6rem; border-radius:var(--ob-radius-pill); background:var(--ob-neutral-bg); font-weight:600; }
.setup-check > button { margin:0 .4rem .4rem 0; }
.setup-continue { justify-self:start; }
.setup-selected-answer { border-top:1px solid var(--ob-line-2); padding-top:.5rem; }
.setup-selected-answer h4 { margin:.5rem 0; }
.setup-selected-answer .marked-reply { background:var(--ob-neutral-bg); border-radius:.5rem; padding:.75rem; }
.setup-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin-block:1.25rem; align-items:start; }
.setup-inputs > p { grid-column:1/-1; }
.setup-edit { margin:0; }
.setup-edit h3 { margin-top:0; }
.setup-edit input:not([type=color]),.setup-edit textarea,.setup-edit select,.setup-case-edit input,.setup-case-edit textarea,.setup-case-edit select { max-width:100%; width:100%; }
.setup-edit input[type=color] { width:5rem; min-height:2.75rem; }
.setup-edit [hidden] { display:none; }
.setup-saved-question { padding-block:1rem; border-top:1px solid var(--ob-line-2); }
.setup-saved-question h3 { font-size:1rem; margin:0; }
.setup-saved-question .row { margin-top:.75rem; }
.setup-saved-question summary,.setup-add-question > summary,.setup-approved-tests > summary { cursor:pointer; font-weight:600; padding-block:.5rem; }
.setup-saved-question .row button { padding:.4rem .75rem; }
.setup-case-edit { margin-top:1rem; }
.setup-saved-tests .advanced-questions { max-height:34rem; overflow:auto; padding-right:.35rem; }
.checked-answers { max-height:30rem; overflow:auto; padding-right:.35rem; }
.setup-check-result { border-top:1px solid var(--ob-line-2); padding-block:.75rem; }
.setup-check-result > summary { cursor:pointer; display:grid; gap:.3rem; }
.setup-check-result article { padding-block:.5rem; }
@media(max-width:800px) { .setup-inputs { grid-template-columns:minmax(0,1fr); } .setup-widget-window { margin-inline:auto; } }