/* Teams: one shared Axis workspace. The window is the real Docs editor from the UI kit (team.js); around it,
   who is here now, who can do what, and a live activity feed. */
.nxt{max-width:660px;margin-inline:auto}
.nxt-stage{position:relative;padding:22px 0 4px}
.nxt-win{position:relative;width:100%;aspect-ratio:1280/820;border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 40px 70px -24px rgba(0,0,0,.95),0 0 80px -30px rgba(55,205,188,.35)}
.nxt-screen{position:absolute;inset:0;overflow:hidden;border-radius:14px;background:#07090a;container-type:inline-size}
.nxt-screen>.nxd-fit,.nxt-screen>.nxt-fit{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column;background:#07090a}
.nxt-fit .nxd-pane{flex:1;min-height:0;height:100%}
.nxt-row{display:flex;height:100%}
.nxt-row>.nxd-pane{flex:none}
.nxt-row>.nxd-pane+.nxd-pane{border-left:1px solid rgba(255,255,255,.07)}

/* presence: who is in the Space right now */
.nxt-here{position:absolute;right:16px;top:-20px;display:flex;align-items:center;gap:10px;padding:7px 12px 7px 8px;border-radius:999px;z-index:3}
.nxt-faces{display:flex}
.nxt-faces>*{margin-left:-7px}
.nxt-faces>*:first-child{margin-left:0}
.nxt-faces .nx-person{--s:30px;padding:2px;background:var(--c)}
.nxt-faces .nx-person img{border-width:2px}
.nxt-agent{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0e1213;border:2px solid var(--nx-teal);color:#e9eeec;flex:none}
.nxt-agent img{width:15px;height:15px}
.nxt-here-t b{display:block;font:600 12.5px/1.15 'DM Sans',sans-serif;color:#eef2f0}
.nxt-here-t small{display:block;font:500 11px/1.2 'DM Sans',sans-serif;color:#97a19e}

/* who can do what */
.nxt-members{position:relative;z-index:2;width:50%;margin:-14% 0 0 auto;padding:12px 14px 6px;border-radius:16px}
.nxt-members .nx-cap{font-size:10px;margin-bottom:6px}
.nxt-members ul{margin:0;padding:0;list-style:none}
.nxt-members li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06)}
.nxt-members li:first-child{border-top:0}
.nxt-dept{flex:1;font:600 13px/1.2 'DM Sans',sans-serif;color:#e4e9e7}
.nxt-av{display:flex}
.nxt-av .nx-person{--s:26px;padding:1.5px;margin-left:-6px}
.nxt-av .nx-person:first-child{margin-left:0}
.nxt-perm{display:inline-flex;align-items:center;gap:5px;min-width:84px;justify-content:center;padding:4px 8px 4px 6px;border-radius:999px;background:rgba(55,205,188,.1);border:1px solid rgba(55,205,188,.28);font:600 10.5px/1 'DM Sans',sans-serif;color:#bff3ec;white-space:nowrap}
.nxt-perm svg{width:11px;height:11px}
.nxt-perm.is-admin{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#eef2f0}
.nxt-perm.is-view{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12);color:#a5aeab}

/* live activity */
.nxt-feed{position:absolute;left:-12px;bottom:10%;z-index:2;width:max-content;min-width:250px;padding:8px 10px;border-radius:14px;display:grid}
.nxt-ev{grid-area:1/1;display:flex;align-items:center;gap:9px;margin:0;font:500 12px/1.3 'DM Sans',sans-serif;color:#c9d0cd}
.nxt-ev b{color:#eef2f0;font-weight:600}
.nxt-ev>span:nth-child(2){flex:1;min-width:0;white-space:nowrap}
.nxt-ev time{font-size:10.5px;color:var(--nx-teal)}
.nxt-ev .nx-person{--s:24px;padding:1.5px;flex:none}
.nxt-ev .nxt-agent{width:24px;height:24px}
.nxt-ev .nxt-agent img{width:12px;height:12px}
.nxt-ev2,.nxt-ev3{opacity:0}

/* one 9.6 s loop: Priya joins, the agent adds its chart, Theo starts editing */
.nx.is-live{--nx-cycle:9.6s}
@keyframes nxt-ev1{0%,4%{opacity:0;translate:0 6px}8%,30%{opacity:1;translate:none}34%,100%{opacity:0;translate:0 -6px}}
@keyframes nxt-ev2{0%,34%{opacity:0;translate:0 6px}38%,62%{opacity:1;translate:none}66%,100%{opacity:0;translate:0 -6px}}
@keyframes nxt-ev3{0%,66%{opacity:0;translate:0 6px}70%,94%{opacity:1;translate:none}98%,100%{opacity:0;translate:0 -6px}}
@keyframes nxt-join{0%,3%{opacity:0;scale:.6}8%,100%{opacity:1;scale:1}}
.nx.is-live .nxt-ev1{animation:nxt-ev1 var(--nx-cycle) var(--pp-ease,ease) infinite}
.nx.is-live .nxt-ev2{animation:nxt-ev2 var(--nx-cycle) ease infinite}
.nx.is-live .nxt-ev3{animation:nxt-ev3 var(--nx-cycle) ease infinite}
.nx.is-live .nxt-join{animation:nxt-join var(--nx-cycle) cubic-bezier(.2,.8,.2,1) infinite}

@media (max-width:560px){
  .nxt-win{aspect-ratio:760/700}
  .nxt-here{right:10px;top:-18px;padding:5px 10px 5px 6px}
  .nxt-faces .nx-person,.nxt-agent{--s:24px;width:24px;height:24px}
  .nxt-here-t small{display:none}
  .nxt-members{width:100%;margin:14px 0 0;padding:10px 12px 4px}
  .nxt-dept{font-size:12.5px}
  .nxt-members li{padding:6px 0}
  .nxt-feed{position:relative;left:0;bottom:auto;width:100%;min-width:0;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){.nxt-ev1{opacity:0}.nxt-ev3{opacity:1}}