/* Line 5060 (own-the-stage-shared-kit-r1): the one left-side container, . The host LEFT in a plane with a border the visitor drags (--ns-own-host, 26% by default), the page RIGHT; at 767 px and under the page is on top and the host is a living strip at the bottom. Colours and timings are the stage tokens of public/css/stage-tokens.css, read with their own values as fallbacks (the tokens are scoped to .game-stage; this file never redefines a house token). */ .ns-own { position: relative; display: flex; flex-direction: row; align-items: stretch; width: 100%; min-height: 70vh; background: var(--ns-stage-void, #060610); color: var(--ns-stage-ink, #f0f0f5); isolation: isolate; } .ns-own[data-ns-own-side="right"] { flex-direction: row-reverse; } .ns-own-host { position: relative; flex: 0 0 var(--ns-own-host, 26%); min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--ns-stage-set, #0e1322); border-right: 1px solid var(--ns-stage-border, #1f2940); overflow: hidden; } .ns-own[data-ns-own-side="right"] .ns-own-host { border-right: 0; border-left: 1px solid var(--ns-stage-border, #1f2940); } .ns-own-face { position: relative; flex: 1 1 auto; min-height: 160px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 12px; overflow: hidden; background: var(--ns-stage-spot, radial-gradient(ellipse at center, rgba(242,181,68,.10), transparent 72%)); } .ns-own-face img, .ns-own-face video, .ns-own-face canvas { display: block; width: 100%; height: 100%; object-fit: cover; } .ns-own-tag { margin: 0; padding: 6px 10px; font-size: 13px; font-weight: 700; color: var(--ns-stage-ink, #f0f0f5); background: var(--ns-stage-glass, rgba(16,27,48,.92)); } .ns-own-line { margin: 0; padding: 8px 10px; font-size: 14px; color: var(--ns-stage-ink, #f0f0f5); background: var(--ns-stage-set-2, #141b30); border-left: 3px solid var(--ns-stage-accent, #f2b544); border-radius: 6px; } .ns-own-bar { display: flex; gap: 8px; } .ns-own-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--ns-stage-accent, #f2b544); border-radius: 999px; background: transparent; color: var(--ns-stage-ink, #f0f0f5); font: inherit; font-weight: 800; cursor: pointer; } .ns-own-btn:hover, .ns-own-btn:focus-visible { background: var(--ns-stage-accent, #f2b544); color: var(--ns-stage-void, #060610); outline: none; box-shadow: var(--ns-stage-elev-2, 0 8px 30px rgba(0,0,0,.5)); } .ns-own-btn[aria-pressed="true"] { background: var(--ns-stage-accent, #f2b544); color: var(--ns-stage-void, #060610); } .ns-own-splitter { flex: 0 0 10px; cursor: col-resize; touch-action: none; user-select: none; display: flex; align-items: center; justify-content: center; background: var(--ns-stage-set-2, #141b30); } .ns-own-splitter:hover, .ns-own-splitter:focus-visible { background: var(--ns-stage-accent, #f2b544); outline: none; } .ns-own-nub { width: 4px; height: 40px; border-radius: 2px; background: var(--ns-stage-ink-2, #b8c5db); } .ns-own-content { position: relative; flex: 1 1 auto; min-width: 0; overflow: auto; } .ns-own-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; } /* she owns the stage: her corner folds away and the page takes the full width */ .ns-own[data-ns-own-state="owned"] .ns-own-host, .ns-own[data-ns-own-state="owned"] .ns-own-splitter { display: none; } .ns-own.ns-own-anim .ns-own-content { transition: opacity var(--ns-stage-dur-scene, 420ms) ease; } .ns-own.ns-own-fade .ns-own-content { transition: opacity 200ms linear; } /* the way back: always visible, above the stage (the engine lifts it into the top layer) */ .ns-own-pill { position: fixed; top: 12px; right: 12px; left: auto; bottom: auto; margin: 0; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--ns-stage-border, #1f2940); border-radius: 999px; background: var(--ns-stage-glass, rgba(16,27,48,.92)); color: var(--ns-stage-ink, #f0f0f5); box-shadow: var(--ns-stage-elev-1, 0 8px 30px rgba(0,0,0,.5)); z-index: 2147483001; } .ns-own-pill[hidden] { display: none; } .ns-own-pill[data-stage-suspended] { visibility: hidden; } .ns-own-pill-text { font-size: 14px; font-weight: 700; } .ns-own-pill-back { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ns-stage-accent, #f2b544); color: var(--ns-stage-void, #060610); font: inherit; font-weight: 800; cursor: pointer; } .ns-own-pill-back:focus-visible { outline: 2px solid var(--ns-stage-ink, #f0f0f5); outline-offset: 2px; } /* the stage's shoulder menu (slotted into ) */ netshow-stage[data-ns-own] .ns-own-badge { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ns-stage-glass, rgba(16,27,48,.92)); color: var(--ns-stage-ink, #f0f0f5); cursor: pointer; } netshow-stage[data-ns-own] .ns-own-menu { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; background: var(--ns-stage-glass, rgba(16,27,48,.92)); } netshow-stage[data-ns-own] .ns-own-menu[hidden] { display: none; } netshow-stage[data-ns-own] .ns-own-menu button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ns-stage-ink, #f0f0f5); font: inherit; text-align: left; cursor: pointer; } netshow-stage[data-ns-own] .ns-own-menu button:hover, netshow-stage[data-ns-own] .ns-own-menu button:focus-visible { background: var(--ns-stage-set-2, #141b30); outline: none; } netshow-stage[data-ns-own] .ns-own-tag { font-size: 12px; } /* Line 10137 (own-stage-roam-menu-sheet-opaque-phone-r1): on a phone her open menu is one solid sheet. While she roams (public/js/ns-own-the-stage-roam.js marks her stage data-ns-own-roam, only with own_the_stage_presets on) the glass above let the page words show through the rows at 375 px; under 768 px that sheet takes the same hue opaque, a 1 px border and a shadow, and its words stay #f0f0f5 (15.1:1). Every other menu is unchanged. */ @media (max-width: 767px) { netshow-stage[data-ns-own-roam] .ns-own-menu { background: #101b30; color: #f0f0f5; border: 1px solid var(--ns-stage-border, #1f2940); box-shadow: var(--ns-stage-elev-1, 0 8px 30px rgba(0,0,0,.5)); } } /* a phone: the page on top, the host a living strip at the bottom */ @media (max-width: 767px) { .ns-own, .ns-own[data-ns-own-side="right"] { flex-direction: column; min-height: 0; } .ns-own-content { order: 1; overflow: visible; } .ns-own-splitter { display: none; } .ns-own-host { order: 2; position: sticky; bottom: 0; z-index: 2; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--ns-stage-border, #1f2940); } .ns-own-face { flex: 0 0 72px; width: 72px; height: 96px; min-height: 0; } .ns-own-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ns-own-line { position: absolute; left: 12px; right: 12px; bottom: 100%; } .ns-own-bar { flex: 1 1 auto; } .ns-own-pill { left: 12px; right: 12px; justify-content: space-between; padding: 5px 5px 5px 12px; } /* F-0819 (fix-voice-11-20260929-r1): the engine lifts the bar into the top layer (popover), whose UA width is fit-content; a one-row bar's min-content is the whole name plus the whole button, so it ran past the screen on every surface. width:auto lets left/right 12 px hold it; the name then shortens with line 10095's ellipsis. */ .ns-own-pill { width: auto; } /* Line 10095 (own-stage-phone-pill-one-row-r1): the pill stays one row at 320-414 px; a long name shortens with an ellipsis (the full words stay in the DOM for the screen reader) and 'Back to my corner' stays whole */ .ns-own-pill-text { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ns-own-pill-back { flex: none; white-space: nowrap; } /* Line 8350 (own-the-stage-bar-one-row-phone-r1): Own the stage, Look and Voice share one slim row beside her face as words (the decorative icons rest so the words fit); a long label clips with an ellipsis, never wraps into a round blob. Every button keeps the base 44 px min-width and min-height (the tap target); Look and Voice (flex: 0 0 auto in the component) may shrink on a phone so the row still fits under 340 px */ .ns-own-bar { flex-wrap: nowrap; min-width: 0; gap: 6px; } .ns-own-btn { flex: 1 1 0; padding: 0 10px; font-size: 13px; white-space: nowrap; border-radius: 22px; } .ns-own-bar > .ns-own-btn { flex-shrink: 1; } .ns-own-bar > .ns-own-btn > svg { display: none; } .ns-own-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } } /* Line 12211 (agent-phone-parked-card-corner-choice-stays-clear-r1): at 375 the engine's turn chip (.ns-own-pill .ns-own-turn, flex 0 0 auto) beside ' owns the stage' pushed the pill's button to 'Back to my corn'. On the lit agent page (data-ns-own-park-clear-bubble="1") at 400 px and under the name and the chip shorten with an ellipsis (line 10095's rule) and 'Back to my corner' stays whole; the full words stay in the DOM for the screen reader. */ @media (max-width: 400px) { .ns-own[data-ns-own-park-clear-bubble="1"] .ns-own-pill[data-ns-own-pill] { gap: 6px; } .ns-own[data-ns-own-park-clear-bubble="1"] .ns-own-pill[data-ns-own-pill] .ns-own-pill-text { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ns-own[data-ns-own-park-clear-bubble="1"] .ns-own-pill[data-ns-own-pill] .ns-own-turn { flex: 0 1 auto; min-width: 0; } .ns-own[data-ns-own-park-clear-bubble="1"] .ns-own-pill[data-ns-own-pill] .ns-own-pill-back { flex: 0 0 auto; padding: 0 12px; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .ns-own.ns-own-anim .ns-own-content { transition: opacity 200ms linear; } } /* Line 8350 r2 (own-the-stage-bar-one-row-phone-r2): tablet portrait (768-1023 px) puts the agent page's left rail near 280 px, where 'Own the stage' wrapped beside its icon and the three buttons became tall ovals. On that rail only, Own the stage, Look and Voice share one row as words the way they do on a phone: the icons rest, a long label clips with an ellipsis, the 44 px tap target stays. The phone-scan button keeps its own full-width row (flex: 1 1 100% in the component), so it is left out; the phone block and 1024 px and up are untouched. Line 8350 r3: widths follow the labels (flex: 1 1 auto, 8 px side padding) and Own the stage takes twice the spare room, so on the ~282 px rail 'Own the stage' reads in full beside Look and Voice instead of 'Own the ...'. */ @media (min-width: 768px) and (max-width: 1023.98px) { .ns-own[data-ns-own="agent_page"] .ns-own-bar > .ns-own-btn:not(.ns-own-phone-btn) { flex: 1 1 auto; min-height: 44px; padding: 0 8px; font-size: 13px; white-space: nowrap; } .ns-own[data-ns-own="agent_page"] .ns-own-bar > .ns-own-btn[data-ns-own-btn]:not(.ns-own-phone-btn) { flex: 2 1 auto; } .ns-own[data-ns-own="agent_page"] .ns-own-bar > .ns-own-btn:not(.ns-own-phone-btn) > svg { display: none; } .ns-own[data-ns-own="agent_page"] .ns-own-bar > .ns-own-btn:not(.ns-own-phone-btn) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } } /* 10823:whole-tablet:start */ @media (min-width: 768px) and (max-width: 1023.98px) { .ns-own[data-ns-own="agent_page"][data-ns-own-labels-whole-tablet] .ns-own-bar { flex-wrap: wrap; } .ns-own[data-ns-own="agent_page"][data-ns-own-labels-whole-tablet] .ns-own-bar > .ns-own-btn:not(.ns-own-phone-btn) { flex: 1 0 auto; min-height: 44px; } .ns-own[data-ns-own="agent_page"][data-ns-own-labels-whole-tablet] .ns-own-bar > .ns-own-btn:not(.ns-own-phone-btn) > span { min-width: max-content; overflow: visible; text-overflow: clip; } } /* 10823:whole-tablet:end */ /* Line 10135 (own-stage-popout-no-page-reflow-r1): a pop-out nobody tapped (the after_greeting preset, or the session's owned choice) never reflows the page. public/js/ns-own-the-stage-roam.js marks the container data-ns-own-roam-hold before she steps out and reserves the plane's height in --ns-own-hold-h; the host plane and the splitter then keep their box (the flex basis the visitor dragged, the 10 px splitter) while the plane's contents cross-fade to an empty set, so the page's columns never change width and she leaves by transform. Only under the roam attribute (own_the_stage_presets on) and at 768 px and up: the phone strip, the 'own' preset and the Own the stage button keep the collapse above. */ @media (min-width: 768px) { .ns-own[data-ns-own-roam][data-ns-own-roam-hold][data-ns-own-state="owned"] .ns-own-host { display: flex; visibility: hidden; opacity: 0; min-height: var(--ns-own-hold-h, 0px); pointer-events: none; transition: opacity var(--ns-stage-dur-scene, 420ms) ease, visibility 0s linear var(--ns-stage-dur-scene, 420ms); } .ns-own[data-ns-own-roam][data-ns-own-roam-hold][data-ns-own-state="owned"] .ns-own-splitter { display: flex; visibility: hidden; pointer-events: none; } } @media (min-width: 768px) and (prefers-reduced-motion: reduce) { .ns-own[data-ns-own-roam][data-ns-own-roam-hold][data-ns-own-state="owned"] .ns-own-host { transition: opacity 200ms linear, visibility 0s linear 200ms; } } /* Line 11236 (agent-alive-step-out-holds-still-wide-r1): while the container carries data-ns-own-step-still (ai.features.own_stage_step_out_holds_still), public/js/ns-own-the-stage.js marks her face data-ns-own-veil="out" as she leaves the plane and whenever her stage state changes into or out of CENTRE, whose agent-page rules re-lay her card out: she is hidden at once (a node at opacity 0 is never a layout shift), the stage moves her by transform, then "in" fades her back in 200 ms, under reduced motion too. Without the attribute nothing here matches. */ [data-ns-own-face][data-ns-own-veil="out"] { opacity: 0 !important; transition: none !important; } [data-ns-own-face][data-ns-own-veil="in"] { opacity: 1; transition: opacity 200ms linear; } /* Line 11236: the held plane's reserved height (line 10135's --ns-own-hold-h, measured as its border box) is a border-box height here, so a page without a border-box reset never grows the plane by its padding as she leaves. */ @media (min-width: 768px) { .ns-own[data-ns-own-step-still][data-ns-own-roam][data-ns-own-roam-hold][data-ns-own-state="owned"] .ns-own-host { box-sizing: border-box; } } /* Line 10136 (own-stage-phone-face-parks-in-corner-with-ai-line-r1): on a phone, once the roam owns the stage (public/js/ns-own-the-stage-roam.js marks only while own_the_stage_presets is on), her face fills her card instead of keeping the container's 72 x 96 px strip size inside it, so the card the roam parks in a corner and the hamburger it anchors on the card's top-right corner are her. Her one-line 'AI agent' caption ('Agente de IA' on a Spanish page) is drawn inside the card at 11 px, never a control; it ships hidden. Line 10631: the roam takes the caption's hidden attribute off while she owns the stage (and puts it back when she returns), so the class shows it here; Bootstrap 5's [hidden]{display:none!important} no longer decides. */ @media (max-width: 767px) { netshow-stage[data-ns-own-roam] > [data-ns-own-face] { flex: none; width: 100%; height: 100%; min-height: 0; max-height: none; } netshow-stage[data-ns-own-roam] .ns-own-ai-line { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 3px 6px; font-size: 11px; line-height: 1.3; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ns-stage-ink, #f0f0f5); background: var(--ns-stage-glass, rgba(16,27,48,.92)); pointer-events: none; } } /* Line 10631 (own-stage-phone-card-shows-face-and-ai-line-r1): walk-288 FF-2 measured her parked phone card on /agent/dylan-insight at 137 x 183 px with img.ns-stage__still a 122 x 62 px strip at its foot: the agent page's owned slot keeps the centre view's 84 px band clearance (--ns-own-pill-clear, agents/partials/own-the-stage-profile.blade.php) and the still stays inside its .ns-stage__viewport. Once the roam parks her (any stage state but CENTRE) on a phone, the card drops that clearance and clips, the wrappers between the card and her still stop being a containing block, and her still, the living canvas or video over it, cover the whole card, face high. Her CENTRE entrance, with its Talk door and rows, keeps the agent page's rules. */ @media (max-width: 767px) { netshow-stage[data-ns-own-roam]:not([data-stage-state="CENTRE"]) > [data-ns-own-face] { padding: 0; overflow: hidden; } netshow-stage[data-ns-own-roam]:not([data-stage-state="CENTRE"]) > [data-ns-own-face] :has(:is(.ns-stage__still, .ns-stage__viewport canvas, .ns-stage__viewport video)) { position: static; contain: none; transform: none; } netshow-stage[data-ns-own-roam]:not([data-stage-state="CENTRE"]) > [data-ns-own-face] :is(.ns-stage__still, .ns-stage__viewport canvas, .ns-stage__viewport video) { position: absolute; inset: 0; z-index: 0; display: block; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: none; max-height: none; max-inline-size: none; max-block-size: none; margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; object-fit: cover; object-position: 50% 22%; } } /* Line 11235 (agent-alive-parked-card-talk-bar-whole-or-hidden-tablet-r1): live check OS-WB (91754a184c5) at 768 on /agent/alive found her parked corner card cutting its purple 'Talk to NetShow Alive' bar to a sliver at its foot. From 768 px her parked card (the roam's PERCH, ASIDE or REST tile: any stage state but ENTER and CENTRE) is the agent page's owned slot, capped at the stage box and scrolling inside it, so whichever row follows her face falls across its clip edge: the bar at 768 x 1024 to 834 x 1194, with the bar alone hidden the language select, with the talk row hidden the name rail. While she is parked on the agent page the rows under her face (the talk row, the name rail, the composer; never a menu) are not drawn, since her face is the talk target (a tap on her starts talk from 768 px, public/js/ns-own-the-stage.js); the card fills its box and clips, and her face gives up its 60% floor so the kit's 'alive AI agent' line sits whole at its foot. The card's box does not move. Her CENTRE entrance, Esc and Back to my corner keep every row; the phone keeps line 10631. */ @media (min-width: 768px) { netshow-stage[data-ns-own="agent_page"][data-ns-own-roam]:not([data-stage-state="ENTER"]):not([data-stage-state="CENTRE"]) > [data-ns-own-face]:has(.ns-stage__viewport) { height: 100%; overflow: hidden; } netshow-stage[data-ns-own="agent_page"][data-ns-own-roam]:not([data-stage-state="ENTER"]):not([data-stage-state="CENTRE"]) > [data-ns-own-face] .ns-stage__viewport { min-height: 0; } netshow-stage[data-ns-own="agent_page"][data-ns-own-roam]:not([data-stage-state="ENTER"]):not([data-stage-state="CENTRE"]) > [data-ns-own-face] .ns-stage__viewport ~ :is(.ns-stage__talk-slot, .ns-stage__talk-first, .ns-stage__rail, .ns-stage__composer) { display: none; } } .ns-own-ai-line { display: none; } /* Line 10821: fill the demo's reserved column without changing its box or the page's columns. */ .ns-demo-column-home { display: none; } @media (min-width: 768px) { .ns-own[data-ns-own][data-ns-demo-popout-column][data-ns-demo-column-filled][data-ns-own-state="owned"] .ns-own-host { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 200ms ease; } /* Line 11683 (stage-demo-popped-host-parks-on-screen-one-card-r1): walk OT-GA saw 768 keep only her caption, the bar and the consent line (the absolute home and bar laid over each other in a 200 px column) and OT-HF saw 1440's consent line print over 'Continue on your phone'. The column is now one normal-flow stack from its top at every width from 768: her small still, her name, Back to my corner, then the bar (Own the stage and the rest, wrapping), then her caption and the consent line as plain blocks below the controls, so no line ever lies on a button. */ .ns-own[data-ns-demo-column-filled][data-ns-own-state="owned"] .ns-own-host { justify-content: flex-start; align-items: stretch; } .ns-own[data-ns-demo-column-filled][data-ns-own-state="owned"] .ns-demo-column-home { display: flex; order: -1; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; } .ns-own[data-ns-demo-column-filled][data-ns-own-state="owned"] .ns-demo-column-home > .ns-own-btn { flex: 0 0 auto; max-width: 100%; white-space: normal; } .ns-own[data-ns-demo-column-filled][data-ns-own-state="owned"] .ns-demo-column-home p { margin: 0; font-weight: 700; overflow-wrap: anywhere; } .ns-own[data-ns-demo-column-filled][data-ns-own-state="owned"] .ns-demo-column-still { display: block; width: min(96px, 60%); height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%; border-radius: 12px; } .ns-own[data-ns-demo-column-filled][data-ns-own-state="owned"] .ns-own-bar { position: static; order: 0; flex: 0 0 auto; justify-content: center; flex-wrap: wrap; } .ns-own[data-ns-demo-column-filled][data-ns-own-state="owned"] :is(.ns-own-voice-caption, .ns-media-consent-line) { position: static; order: 1; flex: 0 0 auto; } } /* Studio door only: the existing Talk travels inside her face card, never a second control rail. */ netshow-stage[data-door-roam-talk][data-ns-own] [data-m13-talk] .m13-talk__btn { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; overflow-wrap: anywhere; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--ns-stage-accent, #f2b544); color: var(--ns-stage-void, #060610); font: 700 16px/1.4 system-ui, sans-serif; cursor: pointer; } netshow-stage[data-door-roam-talk][data-ns-own] [data-m13-talk] .m13-talk__btn:focus-visible { outline: 2px solid var(--ns-stage-ink, #f0f0f5); outline-offset: 3px; } netshow-stage[data-door-roam-talk] [data-door-talk-obscured] { visibility: hidden !important; pointer-events: none !important; } netshow-stage[data-door-roam-talk][data-ns-own] [data-m13-talk] .m13-talk__btn:disabled { background: var(--ns-stage-set-2, #141b30); color: var(--ns-stage-ink-2, #b8c5db); cursor: not-allowed; } /* Line 8294 (agent-page-phone-stage-full-width-r1): the agent page on a phone, behind ai.features.agent_page_phone_stage_full_width (the partial adds .ns-own-page--phone-full). The host plane stacks as a full-width column: her face first at about 45vh, the owned-avatar rail with its Talk door and composer full width under it, the Own the stage / Look / Voice bar one row of 44 px pills. Every rule is scoped to that class and the agent_page container: every other surface keeps its 72 px strip. */ @media (max-width: 767px) { .ns-own-page--phone-full .ns-own[data-ns-own="agent_page"] .ns-own-host { order: 0; position: relative; bottom: auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 12px; } .ns-own-page--phone-full .ns-own[data-ns-own="agent_page"] .ns-own-content { order: 1; } .ns-own-page--phone-full .ns-own[data-ns-own="agent_page"] .ns-own-face { flex: none; width: 100%; height: auto; min-height: 0; max-height: none; overflow: visible; } .ns-own-page--phone-full .ns-own[data-ns-own="agent_page"] [data-ns-own-page-face] { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; width: 100%; } .ns-own-page--phone-full .ns-own[data-ns-own="agent_page"] [data-ns-own-page-face] .agent-hero__avatar { align-self: center; width: min(45vh, 100%); } .ns-own-page--phone-full .ns-own[data-ns-own="agent_page"] .ns-stage__viewport { min-height: 45svh; min-height: 45dvh; } .ns-own-page--phone-full .ns-own[data-ns-own="agent_page"] .ns-own-bar { flex: none; flex-wrap: nowrap; width: 100%; } .ns-own-page--phone-full .ns-own[data-ns-own="agent_page"] .ns-own-btn { flex: 1 1 auto; gap: 6px; min-width: 0; min-height: 44px; padding: 0 10px; } } /* Line 11436: the portrait settles inside the stationary card, away from its menu. */ @media (min-width: 768px) { netshow-stage[data-ns-own="agent_page"] > [data-ns-own-face] .ns-stage__viewport { animation: ns-own-portrait-settle 640ms ease-out; } netshow-stage[data-ns-own="agent_page"] .ns-avatar-menu { z-index: 6; } } @keyframes ns-own-portrait-settle { from { transform: translateY(8px); } to { transform: translateY(0); } } @media (min-width: 768px) and (prefers-reduced-motion: reduce) { netshow-stage[data-ns-own="agent_page"] > [data-ns-own-face] .ns-stage__viewport { animation: none; } } /* Line 10570 (own-the-stage-one-menu-r1): while the container carries data-ns-own-one-menu (ai.features.own_the_stage_one_menu) its bar is ONE hamburger. Opening it lays the same controls (Own the stage, Look, Continue on your phone, Voice, Camera, the language choice) out in flow under it as menu rows, so the host plane's clip never cuts them; the free agent's own hamburger hides until hover, focus or a tap (public/js/ns-own-the-stage.js, the roam's rule). Without the attribute nothing here matches. */ .ns-own[data-ns-own-one-menu] .ns-own-bar { flex-wrap: wrap; justify-content: flex-end; align-items: center; min-width: 0; } .ns-own[data-ns-own-one-menu] .ns-own-menu-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--ns-stage-border, #1f2940); border-radius: 50%; background: var(--ns-stage-glass, rgba(16,27,48,.92)); color: var(--ns-stage-ink, #f0f0f5); cursor: pointer; } .ns-own[data-ns-own-one-menu] .ns-own-menu-toggle:hover, .ns-own[data-ns-own-one-menu] .ns-own-menu-toggle:focus-visible, .ns-own[data-ns-own-one-menu] .ns-own-menu-toggle[aria-expanded="true"] { border-color: var(--ns-stage-accent, #f2b544); outline: none; box-shadow: var(--ns-stage-elev-2, 0 8px 30px rgba(0,0,0,.5)); } .ns-own[data-ns-own-one-menu] .ns-own-one-menu { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border: 1px solid var(--ns-stage-border, #1f2940); border-radius: 12px; background: #101b30; color: #f0f0f5; } .ns-own[data-ns-own-one-menu] .ns-own-one-menu[hidden] { display: none; } .ns-own[data-ns-own-one-menu] .ns-own-one-menu .ns-own-btn { flex: 0 0 auto; justify-content: flex-start; width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #f0f0f5; font-size: 14px; font-weight: 700; white-space: normal; text-align: left; } .ns-own[data-ns-own-one-menu] .ns-own-one-menu .ns-own-btn:hover, .ns-own[data-ns-own-one-menu] .ns-own-one-menu .ns-own-btn:focus-visible { background: var(--ns-stage-set-2, #141b30); color: #f0f0f5; box-shadow: inset 3px 0 0 var(--ns-stage-accent, #f2b544); } .ns-own[data-ns-own-one-menu] .ns-own-one-menu .ns-own-btn[aria-pressed="true"] { background: transparent; color: #f0f0f5; box-shadow: inset 3px 0 0 var(--ns-stage-accent, #f2b544); } .ns-own[data-ns-own-one-menu] .ns-own-one-menu .ns-own-btn > svg { display: block; flex: 0 0 auto; } .ns-own[data-ns-own-one-menu] .ns-own-one-menu .ns-own-btn > span { min-width: 0; overflow: visible; text-overflow: clip; } .ns-own[data-ns-own-one-menu] .ns-own-one-menu .ns-greet-lang { justify-content: flex-start; padding: 0 12px; } @media (max-width: 767px) { .ns-own[data-ns-own-one-menu] .ns-own-host { flex-wrap: wrap; } .ns-own[data-ns-own-one-menu] .ns-own-bar { flex: 1 1 0; } .ns-own[data-ns-own-one-menu] .ns-own-bar:has(> .ns-own-one-menu:not([hidden])) { flex: 1 1 100%; } } netshow-stage[data-ns-own-one-menu] .ns-own-menu .ns-greet-lang { justify-content: flex-start; padding: 4px 14px; } /* Wide agent profiles keep the retained portrait visible when roam holds the column. */ @media (min-width: 1200px) { .ns-own[data-ns-own="agent_page"][data-ns-own-state="owned"] .ns-own-host:has(> [data-ns-own-keeper] > img) { opacity: 1; } } /* Line 11661 (agent-avatar-menu-opens-whole-wide-r2): live check eb163fb4d4e at 1440 on /agent/binary-power and /agent/wcis. Parked (any stage state but ENTER and CENTRE), her card is moved by transform, so the card and not the window is her own Avatar menu's containing block: the panel opened as a ~200 px strip inside the card, 'Look' under the button, Voice out of reach. From 1024 px, while the roam parks her on the agent page, the open panel spans the card and 16 px either side (the roam keeps every parked card 24 px inside the window, so it stays 8 px inside it sideways) and opens upward from the card's foot into the column above her, up to the window's height less 100 px (a card parked at a bottom corner keeps it 16 px under the window's top); it scrolls inside only past that. While it is open its toggle stands at the card's foot-right, under the panel and clear of it, so it closes it where it is. The roam's round menu glyph is not drawn beside the card's own Avatar menu (keyboard focus still shows it: Back to my corner, Mute and End stay reachable). Reduced motion (the card placed by left and top, the window its menu's containing block), 768 to 1023 px and phones are unchanged. */ @media (min-width: 1024px) { netshow-stage[data-ns-own="agent_page"][data-ns-own-roam]:not([data-stage-state="ENTER"]):not([data-stage-state="CENTRE"]):not([data-stage-motion="reduced"]) > [data-ns-own-face] .ns-avatar-menu-panel { position: fixed; inset: auto -16px 60px -16px; box-sizing: border-box; width: auto; max-width: none; max-height: calc(100vh - 100px); margin: 0; overflow: auto; position-area: none; position-try-fallbacks: none; } netshow-stage[data-ns-own="agent_page"][data-ns-own-roam]:not([data-stage-state="ENTER"]):not([data-stage-state="CENTRE"]):not([data-stage-motion="reduced"]) > [data-ns-own-face] .ns-avatar-menu-button[aria-expanded="true"] { position: fixed; inset: auto 8px 8px auto; box-sizing: border-box; height: 44px; min-height: 44px; margin: 0; } netshow-stage[data-ns-own="agent_page"][data-ns-own-roam]:not([data-ns-own-one-menu]):not([data-stage-state="ENTER"]):not([data-stage-state="CENTRE"]):has(> [data-ns-own-face] .ns-avatar-menu-button) .ns-own-shoulder:not(:focus-within):not(:has([aria-expanded="true"])), netshow-stage[data-ns-own="agent_page"][data-ns-own-roam]:not([data-ns-own-one-menu]):has(> [data-ns-own-face] .ns-avatar-menu-button):not(:has(> [data-ns-own-face] .ns-public-avatar-menu--anchored)) .ns-own-shoulder:not(:focus-within):not(:has([aria-expanded="true"])) { opacity: 0 !important; pointer-events: none; } } /* Line 12212 (agent-owned-centre-card-menu-reachable-wide-r1): live check e1f93fa925e OT-PP at 1024 and 1440 on /agent/binary-power and /agent/wcis. After 'Own the stage' she holds the centre, and there the glyph rule above hid her one menu too (a mouse could not reach Move me, Mute or End), so behind ai.features.profile_avatar_menu_anchored (the card's .ns-public-avatar-menu--anchored) it now holds only once she is parked; in ENTER and CENTRE her round menu shows on hover, focus or a tap as the roam draws it. Her Avatar menu opened there as a ~30 px strip: the centred-rows sheet (agent-profile/own-stage-desktop-rows-fit.css) centres the menu's wrapper with a transform, which makes that 44 px wrapper the fixed panel's containing block. In CENTRE the wrapper is centred by its margins instead, so her card (moved by transform) holds the panel: it hangs 8 px under its button, centred on it, 20rem wide at most, down to 8 px above the card's foot and no taller than the window less 100 px, and scrolls inside past that. At rest in her container the agent page's anchored panel kept line 8178's 32rem cap (public/css/avatar-menu.css), which cut the Voice heading at its foot at 1440 x 900: from 1024 px it may use the window's height less 100 px, still inside the room beside its button (the one-menu bar keeps line 11955's panel). Reduced motion (the card placed by left and top) and the key off keep main's bytes. */ @media (min-width: 1024px) { @supports (anchor-name: --a) and (position-area: top) { .ns-own[data-ns-own="agent_page"]:not([data-ns-own-one-menu]) .ns-public-avatar-menu--anchored div.ns-avatar-menu-panel[data-avatar-menu-profile] { max-height: min(calc(100vh - 100px), calc(100% - 16px)); position-try-fallbacks: --ns-own-rest-menu-above-its-button; } @position-try --ns-own-rest-menu-above-its-button { position-area: top span-left; inset: 8px 0 8px auto; max-height: min(calc(100vh - 100px), calc(100% - 16px)); } } /* Line 12726 (avatar-menu-resting-voice-whole-stand-in-wide-r1): live check be0bf58fa9c OT-ZU (c). On the one-menu agent page (/agent/binary-power, a stand-in agent, and /agent/wcis) the resting panel is the card menu with the bar on top, capped by line 11955 at the window less its top, and the Voice group sat 20-110 px under its foot at 1440 x 900. Each row once: the card menu's Camera group (its own toggle, painted by ns-agent-eyes.js like the bar's) stands for the bar's camera button; the turn chip sits in the Close row's empty left; the Look group's two 16 px gaps are 4 px. Voice then shows whole without scrolling; the panel still scrolls past it. */ .ns-own[data-ns-own="agent_page"][data-ns-own-one-menu] .ns-avatar-menu-panel[data-ns-own-one-menu-panel][data-avatar-menu-profile]:has(> [data-agent-eyes-menu] [data-agent-eyes-toggle]) > .ns-own-bar [data-agent-eyes-toggle] { display: none; } .ns-own[data-ns-own="agent_page"][data-ns-own-one-menu] .ns-avatar-menu-panel[data-ns-own-one-menu-panel][data-avatar-menu-profile]:has(> [data-avatar-menu-close-wide]) > .ns-own-bar > .ns-own-turn { position: absolute; top: 9px; left: 14px; z-index: 2; max-width: calc(100% - 120px); margin: 0; } .ns-own[data-ns-own="agent_page"][data-ns-own-one-menu] .ns-avatar-menu-panel[data-ns-own-one-menu-panel][data-avatar-menu-profile] > fieldset > :is([data-avatar-menu-automatic], .ns-avatar-menu-note) { margin-bottom: 4px; } netshow-stage[data-ns-own="agent_page"][data-ns-own-roam][data-stage-state="CENTRE"]:not([data-stage-motion="reduced"]) > [data-ns-own-face] .ns-public-avatar-menu.ns-public-avatar-menu--anchored { left: 0; right: 0; width: fit-content; margin-inline: auto; transform: none; } netshow-stage[data-ns-own="agent_page"][data-ns-own-roam][data-stage-state="CENTRE"]:not([data-stage-motion="reduced"]) > [data-ns-own-face] .ns-public-avatar-menu--anchored div.ns-avatar-menu-panel { position: fixed; inset: 60px 0 auto 0; box-sizing: border-box; width: min(20rem, calc(100% - 16px)); max-width: none; max-height: min(calc(100vh - 100px), calc(100% - 68px)); margin: 0 auto; overflow: auto; position-area: none; position-try-fallbacks: none; } } /* Line 11793 extends 11661 for the gated PERCH path, including panels in the stage menu slot. The slot is outside the transformed puppet; coordinates come from the settled card and its toggle. */ @media (min-width: 1024px) { netshow-stage[data-ns-own="agent_page"][data-ns-own-perch-menu][data-ns-own-one-menu] > .ns-own-menu, netshow-stage[data-ns-own="agent_page"][data-ns-own-perch-menu] > .ns-avatar-menu-panel { position: fixed; inset: var(--ns-perch-menu-top, auto) auto var(--ns-perch-menu-bottom, 12px) var(--ns-perch-menu-left, 12px); width: min(360px, calc(100vw - 24px)); max-width: none; max-height: var(--ns-perch-menu-height, calc(100dvh - 24px)); box-sizing: border-box; margin: 0; overflow: auto; pointer-events: auto; position-area: none; position-try-fallbacks: none; } netshow-stage[data-ns-own="agent_page"][data-ns-own-perch-menu]:not([data-ns-own-one-menu]) .ns-own-badge { display: none; } } /* Line 11955: the card menu is the contained door; only the shoulder menu travels free. */ .ns-own[data-ns-own="agent_page"][data-ns-own-one-menu] .ns-avatar-menu { position: absolute; top: 8px; right: 8px; bottom: auto; z-index: 20; } .ns-own[data-ns-own="agent_page"][data-ns-own-one-menu] .ns-avatar-menu-panel { position: fixed; right: auto; bottom: auto; width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 24px); } .ns-own[data-ns-own-one-menu] .ns-avatar-menu-panel .ns-own-bar { margin: 0; padding: 0; } .ns-own[data-ns-own-one-menu] .ns-avatar-menu-panel .ns-own-one-menu { border: 0; padding: 0; } netshow-stage[data-ns-own-one-menu] .ns-avatar-menu, netshow-stage[data-ns-own-one-menu] [data-ns-own-roam-back] { display: none !important; } .ns-own[data-ns-own="agent_page"][data-ns-own-one-menu] .ns-avatar-menu-button { width: 44px; height: 44px; min-width: 44px; padding: 0; gap: 0; } .ns-own[data-ns-own="agent_page"][data-ns-own-one-menu] .ns-avatar-menu-button > span:not([aria-hidden]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Line 12192: the integrated profile menu keeps the bar's working stage row. The Talk picker returns when the menu closes; the same bar picker travels with the free agent. */ .ns-own[data-ns-own="agent_page"][data-ns-own-one-menu] .ns-avatar-menu-panel[data-ns-own-one-menu-panel] > [data-avatar-menu-own], .ns-own[data-ns-own="agent_page"][data-ns-own-one-menu]:has(.ns-avatar-menu-panel[data-ns-own-one-menu-panel]:not([hidden]) [data-greet-lang-select]) .agent-talk-door .ns-greet-lang, netshow-stage[data-ns-own="agent_page"][data-ns-own-one-menu]:has([slot="menu"] [data-greet-lang-select]) .agent-talk-door .ns-greet-lang { display: none !important; }