/* One specimen, followed through a team's work. */
.arrival-collaboration{min-width:0;container-type:inline-size}
.hero-scene{position:relative;aspect-ratio:1;isolation:isolate}
.hero-plate{position:absolute;inset:0 0 auto 4%;width:96%}
.arrival-figure .hero-plate img{display:block;width:100%;height:auto;aspect-ratio:1}
.hero-marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-mark{opacity:0;transition:opacity .35s ease}
.hero-mark.is-visible{opacity:1}
.hero-mark circle{fill:none;stroke:#77568b;stroke-width:4;paint-order:stroke;filter:drop-shadow(0 0 2px #fff)}
.hero-mark .hero-mark-halo{stroke:#fff;stroke-width:9;opacity:.85;filter:none}
.hero-mark text{fill:#fff;font:600 21px Arial,sans-serif;text-anchor:middle}
.hero-mark rect{fill:#77568b}
.hero-chat{position:absolute;z-index:2;left:0;bottom:5%;width:74%;max-width:444px;border:1px solid #291a2c24;background:#fff;border-radius:9px;box-shadow:0 8px 28px #291a2c0a;overflow:hidden;color:#322c34;font-family:Arial,sans-serif}
.hero-app-heading{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid #291a2c12;font-size:11px;letter-spacing:0;color:#5d5361;background:#fff}
.hero-app-heading strong{font-weight:600;color:#34283b}
.hero-app-name{display:flex;align-items:center;gap:6px}
.hero-app-name svg{width:15px;height:15px;color:#291a2c}
.hero-app-name i{font-style:normal;font-size:10px;padding:2px 5px;border-radius:3px;background:var(--lime)}
.hero-chat-body{height:170px;padding:13px 13px 4px;overflow:hidden}
.hero-chat-message{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4;letter-spacing:0}
.hero-chat-message + .hero-chat-message{margin-top:10px}
.hero-chat-message strong{display:block;font-size:11px;line-height:1.3;margin-bottom:3px}
.hero-avatar{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:5px;background:#eee9f3;color:#604b70;font-size:9px;line-height:1}
.hero-chat-message[data-message="sofia"] .hero-avatar{background:#ebf0dc;color:#53603a}
.hero-chat-message[data-message="sofia"],.hero-chat-message[data-message="jonas"]{opacity:0;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease}
.hero-chat-message.is-visible{opacity:1;transform:none}
.hero-attachment{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:3px 6px;border:1px solid #dfd9e4;border-radius:4px;background:#faf8fb;font-size:10px;color:#76607f}
.hero-chat-message[data-message="jonas"]{margin-top:9px}
.hero-composer{height:38px;margin:0 10px 10px;border:1px solid #e6e0e8;border-radius:5px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 6px 0 9px;font-size:11px;color:#969099}
.hero-composer-text.is-typing{color:#45334e}
.hero-send{flex:0 0 25px;width:25px;height:25px;border-radius:4px;background:#ede8f1;display:grid;place-items:center;transition:background .25s ease}
.hero-send svg{width:13px;height:13px;fill:none;stroke:#7c6a87;stroke-width:1.8}
.hero-send.is-ready{background:#77568b}.hero-send.is-ready svg{stroke:#fff}
.hero-canvas{position:absolute;z-index:3;left:3%;top:auto;bottom:4%;width:87%;height:49%;border:1px solid #291a2c28;border-radius:9px;box-shadow:0 8px 28px #291a2c0a;overflow:hidden;background:#faf9f7;opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity .65s ease,transform .65s ease,visibility .65s}
.hero-canvas.is-visible{opacity:1;transform:none;visibility:visible}
.hero-canvas .hero-app-name i{background:var(--lilac)}
.hero-canvas-body{position:relative;height:calc(100% - 38px)}
.hero-canvas iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.hero-canvas-fallback{position:absolute;inset:0;padding:17px;background:#faf9f7;display:flex;flex-direction:column;gap:8px;font-size:12px;color:#45334e}
.hero-canvas-fallback span{font-size:10px;color:#807087}
.hero-canvas-fallback code{font-size:11px;line-height:1.8}
.hero-canvas-fallback a{font-size:11px;margin-top:auto}
.hero-canvas.is-ready .hero-canvas-fallback{display:none}
.hero-cursor{position:absolute;left:0;top:0;z-index:4;pointer-events:none;will-change:transform;opacity:0}
.hero-cursor>svg{display:block;width:22px;height:28px;overflow:visible}
.hero-cursor>span{position:absolute;left:15px;top:25px;padding:3px 7px;background:#77568b;color:#fff;border-radius:4px;font:11px/1.25 Arial,sans-serif;white-space:nowrap}
.hero-cursor.is-down>svg{transform:scale(.91);transform-origin:3px 2px}
.hero-collaboration-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 0 0;color:#7b6d80;font-size:10px;line-height:1.4;letter-spacing:0}
.hero-scenes{display:flex;align-items:center;gap:4px}
.hero-collaboration-controls button{appearance:none;border:0;border-radius:3px;background:transparent;color:inherit;cursor:pointer;font:inherit;line-height:1.4;padding:8px 6px;min-height:32px}
.hero-scenes button[aria-current="step"]{color:#291a2c;background:#eae4ee}
.hero-collaboration-controls button:hover{color:#291a2c;background:#eae4ee}
.hero-collaboration-controls button:focus-visible{outline:2px solid #77568b;outline-offset:2px}
.hero-pause{display:grid;place-items:center;width:32px;flex-shrink:0}
.hero-pause svg{width:12px;height:12px;fill:currentColor}
.hero-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:801px) and (max-width:1100px){.hero-chat{width:88%;bottom:1%}.hero-chat-message{font-size:12px}.hero-chat-body{height:173px}.hero-scene{aspect-ratio:.84}.hero-canvas{width:90%;height:38%;top:0}.hero-plate{top:8%}.hero-collaboration-controls>span{max-width:65px}}
@media(max-width:800px){.arrival-collaboration{width:100%}.hero-chat{width:77%}.hero-scene{min-height:500px}.hero-canvas{height:44%}.hero-chat{bottom:3%}}
@media(max-width:500px){.hero-scene{min-height:505px;aspect-ratio:auto}.hero-plate{top:9%;left:0;width:100%}.hero-chat{width:94%;bottom:3%;max-width:none}.hero-canvas{top:2%;left:0;width:96%;height:43%}.hero-chat-message{font-size:12px}.hero-chat-body{height:172px}.hero-collaboration-controls{gap:2px;font-size:10px}.hero-scenes{gap:0}.hero-collaboration-controls button{padding-inline:5px}.hero-collaboration-controls>span{max-width:66px}.hero-composer{font-size:10px}}
@media(prefers-reduced-motion:reduce){.arrival-collaboration *{transition:none!important;animation:none!important}}
.arrival-collaboration:not(.is-animated) .hero-mark,.arrival-collaboration:not(.is-animated) .hero-chat-message{opacity:1;transform:none}
.arrival-collaboration:not(.is-animated) .hero-scenes,.arrival-collaboration:not(.is-animated) .hero-pause{display:none}
/* Let the conversation grow as messages arrive; retain the specimen on small screens. */
.hero-chat-body{height:62px;transition:height .5s ease}
.arrival-collaboration[data-posted="true"] .hero-chat-body{height:131px}
.arrival-collaboration[data-replied="true"] .hero-chat-body,.arrival-collaboration:not(.is-animated) .hero-chat-body{height:174px}
/* Flow briefly overlaps the conversation, then takes its place at every width. */
.hero-chat{transition:opacity .55s ease,transform .55s ease,visibility .55s ease}
.arrival-collaboration[data-thread="builder"] .hero-chat{opacity:0;visibility:hidden;transform:translate(-6px,8px);pointer-events:none;transition-delay:.12s}
@media(max-width:1100px){
 .hero-canvas{top:auto;bottom:3%;left:0;width:94%;height:48%}
}
@media(max-width:500px){.hero-plate{top:0}.hero-canvas{height:50%}}
@media(max-width:360px){.hero-scene{min-height:495px}.hero-chat{width:100%}.hero-canvas{width:100%}.arrival-collaboration[data-replied="true"] .hero-chat-body{height:196px}}

.hero-cursor.is-near-edge>span{left:auto;right:6px}
.hero-canvas iframe{opacity:0}
.hero-canvas.is-ready iframe{opacity:1}
/* A second Lab conversation opens the actual molecular viewer. */
.hero-model{position:absolute;left:4%;top:3%;width:77%;height:44%;border:1px solid #291a2c28;border-radius:9px;box-shadow:0 8px 28px #291a2c0a;overflow:hidden;background:#faf9f7;opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity .65s ease,transform .65s ease,visibility .65s}
.hero-model.is-visible{opacity:1;transform:none;visibility:visible}
.hero-model-body{height:calc(100% - 70px);position:relative}
.hero-model iframe,.hero-model-fallback{position:absolute;inset:0;width:100%;height:100%;border:0}
.hero-model iframe{opacity:0;pointer-events:none}
.hero-model.is-ready iframe{opacity:1}
.hero-model.is-ready .hero-model-fallback{visibility:hidden}
.hero-model.is-manual iframe{pointer-events:auto}
.hero-chain-key{position:absolute;bottom:8px;left:12px;display:flex;gap:8px;color:#76657c;font:9px/1 Arial,sans-serif;pointer-events:none}
.hero-chain-key span{display:flex;align-items:center;gap:3px}
.hero-chain-key span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--chain)}
.hero-model-footer{height:32px;border-top:1px solid #291a2c12;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;font:10px/1.3 Arial,sans-serif;color:#7c6a85;background:#fff}
.hero-model-footer button{appearance:none;background:none;border:0;padding:6px 0;font:inherit;color:#604373;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hero-model-footer button:disabled{opacity:.35;cursor:default}
.hero-model-footer button:focus-visible{outline:2px solid #77568b;outline-offset:2px}
.hero-avatar-sofia{background:#ebf0dc;color:#53603a}
[data-structure-message],[data-builder-reply]{opacity:0;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease}
.hero-pdb-attachment{gap:7px;min-height:24px}
.hero-pdb-attachment b{font-weight:500;font-size:9px;padding:2px 3px;border:1px solid #d5c8df;border-radius:2px}
.hero-pdb-attachment>span{font-size:9px;color:#937ca0}
.arrival-collaboration[data-thread="structure"] .hero-chat-body{height:70px}
.arrival-collaboration[data-thread="structure"][data-posted="true"] .hero-chat-body{height:143px}
.arrival-collaboration[data-thread="structure"][data-replied="true"] .hero-chat-body{height:191px}
.arrival-collaboration[data-thread="builder"] .hero-chat-body{height:134px}
.arrival-collaboration[data-thread="builder"][data-replied="true"] .hero-chat-body{height:187px}
.hero-cursor.is-jonas>span{background:#45334e}
.hero-cursor.is-jonas path{fill:#45334e}
@media(max-width:1100px){
 .arrival-collaboration[data-scene="2"] .hero-chat{opacity:1;transform:none;pointer-events:auto}
 .hero-model{top:auto;bottom:3%;left:0;width:94%;height:48%}
 .arrival-collaboration[data-model-visible="true"] .hero-chat,.arrival-collaboration[data-thread="builder"] .hero-chat{opacity:0;transform:translateY(6px);pointer-events:none}
}
@media(max-width:500px){
 .hero-model{height:50%;width:94%}
 .hero-collaboration-controls{display:grid;grid-template-columns:1fr auto;row-gap:0}
 .hero-collaboration-controls>span{max-width:none}
 .hero-pause{grid-column:2;grid-row:1}
 .hero-scenes{grid-column:1 / -1;grid-row:2;justify-content:space-between}
 .hero-scenes button{padding:9px 8px}
 .arrival-collaboration[data-thread="structure"] .hero-chat-body{height:79px}
 .arrival-collaboration[data-thread="structure"][data-posted="true"] .hero-chat-body{height:158px}
 .arrival-collaboration[data-thread="structure"][data-replied="true"] .hero-chat-body{height:213px}
}
@media(max-width:360px){.hero-model{width:100%}.hero-model-footer{font-size:9px}}
