.connected-scene{max-width:1180px;width:calc(100% - 64px);margin:52px auto 0;scroll-margin-top:24px}.scene-intro{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px}.scene-intro>span{font-size:10px;font-weight:800;letter-spacing:.1em}.scene-intro small{font-size:10px;color:#687f90}.scene-stage{display:grid;grid-template-columns:250px minmax(50px,1fr) 242px minmax(65px,1fr) 280px;align-items:center;position:relative;min-height:450px}.lane-title{font-size:10px;color:#48657c;font-weight:650;margin:0 0 9px}.customer-lane>.lane-title{text-align:center}.chat-phone{border:1px solid #aac1d2;outline:4px solid #f8fbfd;border-radius:25px;padding:0 8px 9px;background:#fff;box-shadow:0 15px 35px #25516b12;overflow:hidden}.phone-top{display:flex;justify-content:space-between;padding:8px 11px;font-size:8px;font-weight:800;color:#567089}.chat-heading{display:flex;align-items:center;gap:9px;background:#f8fbfd;padding:10px 7px;border-top:1px solid #edf2f6;border-bottom:1px solid #dce9e9}.chat-heading b{font-size:11px;display:block}.chat-heading span{display:block;font-size:8px;color:#5b7a79}.chat-heading>svg{width:17px;height:17px;fill:none;stroke:#40726c;stroke-width:1.5;margin-left:auto}.chat-thread{background:#f3f8f6;padding:15px 9px;min-height:249px;display:flex;flex-direction:column;gap:10px}.chat-bubble{font-size:10px;line-height:1.6;padding:9px 11px;border-radius:7px;max-width:94%;box-shadow:0 1px 2px #103c2910}.from-customer,.followup{align-self:flex-end;background:#daf1df;border-bottom-right-radius:1px}.from-customer small{display:block;font-size:8px;color:#52735e;margin-top:3px}.from-agent{background:white;border-bottom-left-radius:1px;align-self:flex-start}.chat-compose{display:flex;align-items:center;justify-content:space-between;color:#83958e;font-size:9px;padding:8px 10px 1px}.chat-compose svg{width:16px;height:16px;fill:none;stroke:#358269;stroke-width:1.3}.lane-caption{text-align:center;font-size:9px;color:#5d7487;margin:13px 0 0}.conversation-wire{align-self:center;margin-top:-28px;color:#0aa4c5}.conversation-wire>span{display:block;text-align:center;font-size:8px;color:#5d7487}.conversation-wire svg{width:100%;height:50px;fill:none;stroke:#19acca;stroke-width:1.4}.agent-engine{position:relative;background:white;border:1px solid #b9d9e9;border-top:3px solid #1672e8;border-radius:11px;box-shadow:0 14px 35px #205b8420;padding:24px 19px 0}.engine-logo{width:180px;height:auto;margin:auto}.engine-subtitle{font-size:10px;text-align:center;color:#617d92;margin:3px 0 22px}.agent-action{background:#eaf5ff;color:#1359a4;display:flex;gap:9px;align-items:center;padding:13px 10px;border-left:0;border-radius:6px;min-height:63px}.agent-action svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;flex-shrink:0}.agent-action strong{font-size:11px;font-weight:750;line-height:1.5}.agent-checklist{padding:17px 0 20px;display:grid;gap:12px}.agent-checklist>div{display:flex;gap:10px;align-items:center;font-size:10px;color:#7b8b98}.agent-checklist>div span{color:#c0d0dc}.agent-checklist>div.done{color:#244c6b}.agent-checklist>div.done span{color:#007d9c;font-weight:800}.engine-footer{border-top:1px solid #e2edf4;text-align:center;padding:12px 0;color:#627d90;font-size:9px}.system-wires{height:420px;position:relative;color:#0ca1c6}.system-wires svg{width:100%;height:100%;fill:none;stroke:#9ccada;stroke-width:1.3}.system-wires span{position:absolute;font-size:8px;line-height:1.3;background:#f4fbfe;padding:5px 2px;color:#4c7993;left:43%;text-align:center}.read-label{top:145px}.handover-label{top:266px}.operations-lane{display:grid;gap:30px}.device-record,.team-record{border:1px solid #cbdde8;border-radius:9px;padding:19px 19px 0;background:#ffffffc9;transition:border-color .2s,box-shadow .2s}.record-top{display:flex;align-items:center;gap:12px}.record-top .lane-title{font-size:9px;margin-bottom:3px}.record-top b{font-size:12px}.record-top svg{width:37px;height:37px;fill:none;stroke:#5c849f;stroke-width:1.2;flex-shrink:0}.record-top svg.tracker-drawing{width:52px}.device-values{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 0 14px}.device-values span{display:block;font-size:9px;color:#6c8293}.device-values strong{font-size:21px;color:#153e62;line-height:1.7;letter-spacing:-.04em}.record-source{margin:0 -19px;padding:9px 13px;border-top:1px solid #e2edf4;font-size:8px;color:#5b788d;background:#f6fafc;border-radius:0 0 9px 9px}.handover-content{display:flex;flex-wrap:wrap;gap:6px;padding:18px 0;color:#6f8596}.handover-content span{padding:3px 6px;background:#f1f6fa;font-size:8px;border-radius:3px}.scene-stage[data-step="1"] .device-record,.scene-stage[data-step="2"] .device-record{border-color:#1fa5cc;box-shadow:0 5px 24px #1679be13}.scene-stage[data-step="1"] .device-wire,.scene-stage[data-step="2"] .device-wire,.scene-stage[data-step="3"] .team-wire{stroke:#079eca;stroke-width:2}.scene-stage[data-step="3"] .team-record{border-color:#1260df;box-shadow:0 5px 24px #1679be13}.scene-stage[data-step="3"] .handover-content span{background:#eaf4ff;color:#1d5b96}.story-controls{display:flex;align-items:stretch;border-top:1px solid #cddfea;border-bottom:1px solid #cddfea;margin-top:30px}.story-controls button{flex:1;cursor:pointer;border:0;border-bottom:2px solid transparent;background:transparent;padding:16px 7px;color:#647d90;font-size:10px;white-space:nowrap}.story-controls button>span{font-size:9px;margin-right:7px;color:#8196a5}.story-controls button[aria-pressed=true]{color:#1260df;border-bottom-color:#1260df;font-weight:800}.story-controls .flow-next{flex:0 0 auto;color:#1260df;font-weight:750;padding-left:20px;padding-right:20px}.flow-summary{font-size:11px;text-align:center;color:#4e6e85;margin:16px auto 0;min-height:36px;max-width:700px}.connected-scene [hidden]{display:none}
@media(max-width:1050px) and (min-width:741px){.connected-scene{width:calc(100% - 42px)}.scene-stage{grid-template-columns:210px minmax(30px,1fr) 210px minmax(40px,1fr) 240px}.agent-engine{padding:20px 14px 0}.agent-action{padding:10px 7px}.record-top{gap:6px}.device-record,.team-record{padding:15px 14px 0}.record-source{margin-left:-14px;margin-right:-14px}.system-wires span{font-size:7px}.chat-bubble{font-size:9px}.agent-checklist>div{font-size:9px}.story-controls button{font-size:9px}}
@media(max-width:740px){.connected-scene{width:calc(100% - 36px);margin-top:36px}.scene-intro{display:block;text-align:center;padding-bottom:25px}.scene-intro>span{font-size:9px}.scene-intro small{display:block;font-size:8px;margin-top:5px}.scene-stage{grid-template-columns:1fr 1fr;gap:28px 23px;align-items:start;max-width:560px;margin:auto}.customer-lane{grid-column:1;grid-row:1}.customer-lane>.lane-title{display:none}.agent-lane{grid-column:2;grid-row:1;margin-top:25px}.conversation-wire{grid-column:1 / -1;grid-row:2;margin:0;display:flex;align-items:center;gap:15px;justify-content:center;height:20px}.conversation-wire>span{font-size:9px}.conversation-wire svg{width:100px;height:35px}.system-wires{display:none}.operations-lane{grid-row:3;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:14px;position:relative}.operations-lane:before{content:'↓ Remote data checks + team handover';position:absolute;top:-21px;left:0;right:0;text-align:center;color:#3783a9;font-size:8px}.chat-phone{border-radius:17px;padding:0 5px 6px}.phone-top{font-size:7px;padding:7px}.chat-heading{padding:8px 4px;gap:6px}.chat-heading img{width:18px;height:18px}.chat-heading b{font-size:10px}.chat-heading span{font-size:7px}.chat-heading>svg{display:none}.chat-thread{padding:10px 5px;min-height:269px;gap:8px}.chat-bubble{font-size:9px;padding:8px;max-width:98%}.agent-engine{padding:16px 11px 0;border-radius:8px}.engine-logo{width:140px}.engine-subtitle{font-size:8px;margin-bottom:16px}.agent-action{padding:9px 7px;gap:6px;min-height:57px}.agent-action strong{font-size:9px}.agent-action svg{width:16px;height:16px}.agent-checklist{padding:15px 0;gap:13px}.agent-checklist>div{font-size:8px;gap:5px}.engine-footer{font-size:7px}.lane-caption{font-size:7px}.record-top{gap:7px;align-items:start}.record-top svg{display:none}.record-top .lane-title{font-size:8px}.record-top b{font-size:10px}.device-record,.team-record{padding:13px 11px 0}.device-values{gap:8px;padding:12px 0}.device-values span{font-size:7px}.device-values strong{font-size:16px}.record-source{font-size:7px;margin:0 -11px;padding:8px}.handover-content{padding:12px 0;gap:4px}.handover-content span{font-size:7px;padding:3px}.story-controls{flex-wrap:wrap;margin-top:24px}.story-controls button{flex:1 1 45%;font-size:9px;padding:12px 5px}.story-controls .flow-next{flex:1 1 100%;border-top:1px solid #d6e4ec;padding:11px}.flow-summary{font-size:10px;min-height:48px}}

@media(min-width:741px){.chat-bubble{font-size:11px}.agent-checklist>div{font-size:11px}.lane-title{font-size:11px}.record-top .lane-title{font-size:10px}.record-source{font-size:9px}.handover-content span{font-size:9px}.story-controls button{font-size:11px}.lane-caption{font-size:10px}.engine-footer{font-size:10px}.conversation-wire>span,.system-wires span{font-size:9px}}

.system-wires .device-wire{stroke-dasharray:5 4}.record-top svg.tracking-platform{width:42px;height:37px}.agent-checklist>div{line-height:1.4}.agent-action{background:#eef6fb}.system-wires .read-label{left:30%;min-width:54px}

/* Keep the complete conversation -> assistant -> systems flow on small screens.
   The desktop grid needs more space than a phone or narrow tablet can provide. */
@media (max-width: 980px) {
  .connected-scene { width:calc(100% - 36px); }
  .connected-scene .scene-stage {
    grid-template-columns:minmax(0, 1fr);
    gap:0;
    max-width:420px;
    min-height:0;
    margin-inline:auto;
  }
  .connected-scene .scene-stage > * { min-width:0; }
  .connected-scene .customer-lane { grid-area:1 / 1; }
  .connected-scene .customer-lane > .lane-title { display:block; font-size:12px; }
  .connected-scene .conversation-wire {
    grid-area:2 / 1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    height:96px;
    margin:0;
  }
  .connected-scene .conversation-wire > span { font-size:11px; }
  .connected-scene .conversation-wire svg {
    width:72px;
    height:36px;
    transform:rotate(90deg);
    flex-shrink:0;
  }
  .connected-scene .agent-lane { grid-area:3 / 1; margin:0; }
  .connected-scene .system-wires {
    grid-area:4 / 1;
    display:block;
    height:70px;
    width:100%;
  }
  .connected-scene .system-wires svg,
  .connected-scene .system-wires span { display:none; }
  .connected-scene .system-wires::before {
    content:'';
    position:absolute;
    top:12px;
    bottom:12px;
    left:50%;
    border-left:2px solid #19acca;
  }
  .connected-scene .system-wires::after {
    content:'';
    position:absolute;
    bottom:12px;
    left:calc(50% - 4px);
    width:8px;
    height:8px;
    border-right:2px solid #19acca;
    border-bottom:2px solid #19acca;
    transform:rotate(45deg);
  }
  .connected-scene .operations-lane {
    grid-area:5 / 1;
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:18px;
  }
  .connected-scene .scene-stage .operations-lane::before { content:none; }
  .connected-scene .chat-phone { border-radius:22px; padding:0 8px 9px; }
  .connected-scene .phone-top { font-size:10px; padding:9px 11px; }
  .connected-scene .chat-heading { padding:12px 8px; gap:10px; }
  .connected-scene .chat-heading img { width:25px; height:25px; }
  .connected-scene .chat-heading b { font-size:14px; }
  .connected-scene .chat-heading span { font-size:11px; }
  .connected-scene .chat-heading > svg { display:block; }
  .connected-scene .chat-thread { min-height:0; padding:16px 12px; gap:12px; }
  .connected-scene .chat-bubble { font-size:12px; padding:11px 13px; line-height:1.75; }
  .connected-scene .chat-bubble small { font-size:10px; }
  .connected-scene .chat-compose { font-size:11px; padding:10px 11px 2px; }
  .connected-scene .overview-requests p { font-size:13px; padding:12px; }
  .connected-scene .overview-requests small { font-size:10px; }
  .connected-scene .agent-engine { padding:24px 22px 0; }
  .connected-scene .engine-logo { width:190px; }
  .connected-scene .engine-subtitle { font-size:12px; margin:7px 0 20px; }
  .connected-scene .agent-action { padding:14px; gap:10px; }
  .connected-scene .agent-action strong { font-size:13px; }
  .connected-scene .agent-action svg { width:23px; height:23px; }
  .connected-scene .agent-checklist { padding:22px 0; gap:15px; }
  .connected-scene .agent-checklist > div { font-size:12px; gap:10px; }
  .connected-scene .engine-footer,
  .connected-scene .lane-caption { font-size:11px; }
  .connected-scene .lane-caption { margin-top:12px; }
  .connected-scene .device-record,
  .connected-scene .team-record { padding:20px 20px 0; }
  .connected-scene .record-top { gap:12px; align-items:center; }
  .connected-scene .record-top svg { display:block; }
  .connected-scene .record-top .lane-title { font-size:11px; }
  .connected-scene .record-top b { font-size:14px; }
  .connected-scene .device-values { padding:18px 0; gap:14px; }
  .connected-scene .device-values span { font-size:11px; }
  .connected-scene .device-values strong { font-size:24px; }
  .connected-scene .record-source { font-size:11px; margin:0 -20px; padding:12px 16px; }
  .connected-scene .handover-content { gap:8px; padding:18px 0; }
  .connected-scene .handover-content span { font-size:11px; padding:5px 8px; }
  .connected-scene .system-overview { padding:18px 0; gap:12px; }
  .connected-scene .system-overview > div { display:flex; flex-wrap:wrap; gap:2px 12px; }
  .connected-scene .system-overview span { font-size:12px; }
  .connected-scene .system-overview small { font-size:11px; }
  .connected-scene .story-controls { flex-wrap:wrap; }
  .connected-scene .story-controls button { flex:1 1 45%; white-space:normal; font-size:12px; padding:14px 8px; }
  .connected-scene .story-controls .flow-next { flex-basis:100%; border-top:1px solid #d6e4ec; }
  .connected-scene .flow-summary { font-size:12px; min-height:0; }
}