.atlas-story { background:#f5f4f0; color:#232622; border:1px solid #586050; border-radius:14px; overflow:hidden; }
.atlas-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); }
.atlas-product { min-width:0; }
.atlas-window { background:white; border:1px solid #d4ddd0; border-radius:10px; overflow:hidden; box-shadow:0 12px 32px #23312210; }
.atlas-window>header { padding:20px 24px; background:#082a3d; color:white; }
.atlas-window>header>span { font-size:12px; letter-spacing:.1em; color:#c1d0d8; }.atlas-window h4 { font-size:25px; line-height:1.3; font-weight:500; margin:8px 0; }.atlas-window header small { color:#c1d0d8; font-size:12px; }
.atlas-window-body { padding:24px; }
.atlas-message { padding:18px; background:#f1f3ee; border-radius:8px; font-size:16px; line-height:1.6; margin:0 0 18px; }.atlas-message p { margin-bottom:0; }.atlas-request { background:#082a3d; color:white; margin-left:22px; }
.atlas-fields { margin:0; }.atlas-fields>div { padding:12px 0; border-bottom:1px solid #e2e7dd; }.atlas-fields dt { font-size:13px; color:#64705c; display:flex; justify-content:space-between; gap:12px; }.atlas-fields dt small { color:#857549; }.atlas-fields dd { margin:7px 0 0; font-size:17px; overflow-wrap:anywhere; white-space:pre-wrap; }
.atlas-note { font-size:14px; line-height:1.5; color:#67725f; margin:0 0 16px; }.atlas-status { padding:14px; background:#eaf2e5; color:#35552c; font-size:14px; line-height:1.5; border-radius:5px; margin:20px 0 0; }
.atlas-pending { display:grid; gap:12px; margin-top:18px; }.atlas-pending span { padding:13px; border:1px dashed #c9cebf; font-size:14px; display:flex; justify-content:space-between; gap:12px; }.atlas-pending b { font-weight:400; color:#85683f; }
.atlas-edit { display:grid; gap:17px; }.atlas-edit label { display:grid; gap:8px; font-size:14px; }.atlas-edit input,.atlas-edit textarea { width:100%; box-sizing:border-box; border:1px solid #abb9a2; border-radius:5px; padding:12px; font:inherit; font-size:16px; color:#232622; background:white; }.atlas-edit textarea { resize:vertical; }.atlas-edit .compass-action { margin-top:0; }
#af-video { display:block; width:100%; max-height:75vh; }
@media(max-width:700px) { .atlas-window-body { padding:18px; }.atlas-window>header { padding:18px; }.atlas-fields dt { flex-wrap:wrap; gap:5px; }.atlas-story .compass-navigation { padding-bottom:75px; }.atlas-tabs button { font-size:12px; }.atlas-message { padding:14px; } }
.atlas-device-tabs { display:flex; gap:8px; margin-bottom:16px; }.atlas-device-tabs button,.atlas-animation-controls button { border:1px solid #b9c4b0; border-radius:5px; background:white; color:#273424; padding:10px 16px; font-size:14px; }.atlas-device-tabs button[aria-pressed=true] { background:#082a3d; color:white; border-color:#082a3d; }
.atlas-live-demo { max-width:100%; margin:auto; }.atlas-live-demo[data-device=mobile] { max-width:320px; border:5px solid #23342c; border-radius:24px; padding:14px; background:#f7f8f4; }
.atlas-live-chat { background:#082a3d; color:white; border-radius:8px; padding:16px; }.atlas-demo-label { font-size:11px; letter-spacing:.12em; color:#bad1dc; }#atlas-typed-request { min-height:80px; font-size:15px; line-height:1.6; margin:10px 0 0; }
.atlas-flow-status { padding:14px 0; min-height:58px; font-size:14px; line-height:1.5; color:#566b4d; }.atlas-live-form h5 { font-size:18px; margin:0 0 12px; font-weight:500; }
.atlas-auto-field { padding:10px 12px; margin-bottom:8px; border:1px solid #dce1d6; border-radius:5px; transition:background .8s,border-color .8s; }.atlas-auto-field>span { display:block; font-size:12px; color:#697361; }.atlas-auto-field strong { display:block; font-size:15px; font-weight:500; margin-top:4px; }.atlas-auto-field small { display:block; font-size:11px; color:#66745c; margin-top:4px; visibility:hidden; }.atlas-auto-field.is-filled { background:#edf5e7; border-color:#80a56c; }.atlas-auto-field.is-filled small { visibility:visible; }
.atlas-human-fields { display:flex; flex-wrap:wrap; gap:6px; opacity:.45; transition:opacity .8s; margin-top:14px; }.atlas-human-fields>span { border:1px dashed #ab9a72; border-radius:4px; padding:7px; font-size:12px; }.atlas-human-fields small { flex-basis:100%; font-size:12px; margin-top:5px; }.atlas-human-fields.is-ready { opacity:1; }.atlas-animation-controls { display:flex; gap:8px; margin-top:18px; }.atlas-animation-controls button:disabled { opacity:.4; }
@media(prefers-reduced-motion:reduce) { .atlas-auto-field,.atlas-human-fields { transition:none; } }
/* Keep the request and filling form visible together on desktop. */
@media(min-width:1001px) {
  .atlas-live-demo[data-device=desktop] { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:12px; align-items:start; }
  .atlas-live-demo[data-device=desktop] .atlas-live-chat { grid-column:1; grid-row:1; }
  .atlas-live-demo[data-device=desktop] .atlas-flow-status { grid-column:1; grid-row:2; padding:8px 0; }
  .atlas-live-demo[data-device=desktop] .atlas-live-form { grid-column:2; grid-row:1 / 3; }
  .atlas-story .atlas-window>header { padding:12px 20px; }
  .atlas-story .atlas-window h4 { font-size:21px; margin:4px 0; }
  .atlas-story .atlas-window-body { padding:16px; }
  .atlas-auto-field { padding:8px; }
}