/* One transparent host; the page keeps a reading band clear of her captions. */
html:is([data-ns-content-live-host],[data-ns-content-live-host-ended]) :is(.alive-dock,.alive-dock-greeting-layer,#ns-chat-root,.ns-aie-host,.vd-agent-face,.vd-host-actions,.ns-public-avatar-menu:not(.ns-content-host-menu),netshow-stage:not([data-ns-content-host-stage]):not([data-ns-own="content_host"]),.ab-host-greeting) { display: none !important; }
html[data-ns-content-live-host] #main-content { padding-bottom: 230px; }
.ns-content-live-host { position: fixed; z-index: 1040; right: 20px; bottom: 16px; width: 210px; color: #202124; font: 500 14px/1.4 var(--ns-font,system-ui,sans-serif); }
.ns-content-live-host .ns-face { display: block; position: relative; background: transparent; }
.ns-content-live-host [data-ns-stage-face], .ns-content-live-host .ns-face-live { display: block; width: 140px; height: 140px; margin-left: auto; }
.ns-content-live-host [data-face="live"] [data-ns-stage-face] { display: none; }
.ns-content-live-host [hidden] { display: none !important; }
.ns-content-live-host .ns-captions { position: static; width: 100%; max-width: 100%; box-sizing: border-box; max-height: none; transform: none; opacity: 1; color: #202124; font: inherit; margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff; box-shadow: 0 1px 6px #0002; }
.ns-content-host-menu { position: absolute; right: 0; top: 0; }
.ns-content-host-menu > button { opacity: 0; }
.ns-content-live-host:is(:hover,:focus-within,[data-menu-revealed]) .ns-content-host-menu > button { opacity: 1; }
.ns-content-host-menu button, .ns-content-host-menu label { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 6px; background: #fff; color: #202124; font: inherit; text-align: left; }
.ns-content-host-menu > button { width: 44px; text-align: center; box-shadow: 0 1px 6px #0002; }
.ns-content-host-menu [data-ns-own-one-menu-panel] { position: absolute; right: 0; bottom: 48px; width: 220px; max-height: 65svh; overflow: auto; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 3px 20px #0003; }
.ns-content-host-menu select, .ns-content-host-menu input { max-width: 100%; }
.ns-content-host-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Reading pages keep one compact, stationary host: one readable caption, one persistent menu target, and no card-sized tile. */
.ns-content-live-host[data-ns-reading-host] { width: 180px; }
.ns-content-live-host[data-ns-reading-host] :is([data-ns-stage-face],.ns-face-live) { width: 112px; height: 112px; }
.ns-content-live-host[data-ns-reading-host] .ns-captions { max-height: 5.2em; overflow-y: auto; }
.ns-content-live-host[data-ns-reading-host] .ns-content-host-menu > button { opacity: 1; }
@media (min-width: 768px) { html[data-ns-content-live-host] #main-content { margin-right: 240px; } }
/* Line 16873: the footer keeps her gutter too, so at the end of a page (/compare/intercom at 768 and 1440) she never lies on its links or its copyright line. */
@media (min-width: 768px) { html[data-ns-content-live-host] :is(.landing-footer, body > footer) { padding-right: 240px; box-sizing: border-box; } }
@media (max-width: 767.98px) {
    html[data-ns-content-live-host] { --ns-content-host-safe-height: 180px; scroll-padding-bottom: var(--ns-content-host-safe-height); }
    html[data-ns-content-live-host] body { padding-bottom: var(--ns-content-host-safe-height); }
    html[data-ns-content-live-host] .landing-footer { margin-top: 170px; }
    html[data-ns-content-live-host] #main-content { min-height: var(--ns-content-host-safe-height); }
    .ns-content-live-host { right: 12px; bottom: 12px; width: calc(100% - 24px); display: flex; align-items: end; pointer-events: none; }
    .ns-content-live-host > [data-ns-own-plane] { width: 100%; }
    .ns-content-live-host :is([data-ns-own-plane],.ns-content-host-menu) { pointer-events: auto; }
    .ns-content-live-host .ns-face { display: flex; align-items: end; gap: 8px; }
    .ns-content-live-host [data-ns-stage-face], .ns-content-live-host .ns-face-live { width: 96px; height: 112px; flex: 0 0 96px; margin: 0; }
    .ns-content-live-host .ns-captions { width: auto; flex: 1; margin: 0; }
    /* Line 16975: on a phone her one menu button sits on the caption's corner, so while it shows (the same hover, focus or tap
       that reveals it) the caption keeps the button's 44 px clear and no word of her first line lies under it. */
    .ns-content-live-host:is(:hover,:focus-within,[data-menu-revealed]) .ns-captions { padding-right: 52px; }
    html[data-ns-content-live-host] #main-content { max-height: calc(100svh - 220px); overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: var(--ns-content-host-safe-height); box-sizing: border-box; }
    /* Line 16927 (finish_netshow_stage_engine): folded at the visitor's first scroll she is her face alone in the corner, clear of
       the words and links they read; a tap on her brings her words back */
    .ns-content-live-host[data-ns-host-fold][data-folded] { left: auto; width: auto; }
    .ns-content-live-host[data-ns-host-fold][data-folded] .ns-captions { display: none; }
    .ns-content-live-host[data-ns-reading-host] { right: 12px; bottom: 12px; width: min(196px, calc(100% - 24px)); display: block; }
    .ns-content-live-host[data-ns-reading-host] > [data-ns-own-plane] { width: 100%; }
    .ns-content-live-host[data-ns-reading-host] .ns-face { display: block; }
    .ns-content-live-host[data-ns-reading-host] :is([data-ns-stage-face],.ns-face-live) { width: 80px; height: 80px; margin-left: auto; }
    .ns-content-live-host[data-ns-reading-host] .ns-captions { width: 100%; max-height: 4.2em; margin-top: 4px; overflow-y: auto; }
}
/* Plans' single-line arrival hello tucks into the same live face, with no second launcher. */
@media (max-width: 480px) {
    .ns-content-live-host[data-ns-plans-greet-yields]:not([data-ns-plans-active]):not([data-ns-own-out]):not([data-folded]) .ns-captions {
        min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ns-content-live-host[data-ns-plans-greet-yields]:not([data-ns-own-out]):not([data-folded]) :is([data-ns-stage-face], .ns-face-live) {
        width: 56px; height: 56px; flex-basis: 56px;
    }
}
@media (prefers-color-scheme: dark) {
    .ns-content-live-host { color: #e8eaed; }
    .ns-content-live-host .ns-captions, .ns-content-host-menu button, .ns-content-host-menu label, .ns-content-host-menu [data-ns-own-one-menu-panel] { background: #202124; color: #e8eaed; }
}

.ns-content-live-host .ns-face-live { position: relative; overflow: hidden; }
.ns-content-live-host[data-host-size="large"] :is([data-ns-stage-face],.ns-face-live) { width: 180px; height: 180px; }
.ns-content-live-host[hidden] { display: none !important; }

/* A free sketch has no paper plate; ink follows the page theme. */
.ns-content-live-host [data-traced-paper] { display: none; }
.ns-content-live-host [data-look="sketch-line"] svg { stroke: currentColor; }
.ns-content-live-host[data-page-ink="light"] { color: #e8eaed; }
.ns-content-live-host[data-page-ink="dark"] { color: #202124; }

/* The same partial replaces the shell's retired host pane without replacing its page/navigation plane. */
html:is([data-ns-content-live-host],[data-ns-content-live-host-ended]) :is(#ns-host-plane,[data-ns-stage-splitter]) { display: none !important; }
html[data-ns-content-live-host] #ns-content-plane .ns-main { padding-bottom: 230px; }
@media (min-width: 768px) { html[data-ns-content-live-host] #ns-content-plane { margin-right: 240px; } }
@media (max-width: 767.98px) {
    html[data-ns-content-live-host] .ns-stage-body { padding-bottom: 180px; box-sizing: border-box; }
    html[data-ns-content-live-host] #ns-planes { flex-direction: row !important; }
}

/* Line 16705 (content_host_face_plate): a page body or band can be dark whatever the scheme (/plans), so the face keeps the caption's card colour under its ink. */
/* The plate carries its card's own ink too, so line 16721's page ink (light over a dark band) never lands light on white. */
.ns-content-live-host[data-ns-face-plate] :is([data-ns-stage-face],.ns-face-live) { background: #fff; border-radius: 12px; box-shadow: 0 1px 6px #0002; color: #202124; }
@media (prefers-color-scheme: dark) {
    .ns-content-live-host[data-ns-face-plate] :is([data-ns-stage-face],.ns-face-live) { background: #202124; color: #e8eaed; }
}

html[data-ns-content-live-host] body.ns-looks-page > main { padding-bottom: 260px; }
html[data-ns-content-live-host]:not([data-lo-offline]) [data-live-offline] :is(.lo-face, .lo-caption) { display: none; }
html[data-lo-offline] .ns-content-live-host { display: none; }

/* Line 16970 (finish_netshow_stage_engine_r3, DOORS-0064): her face on the one stage after "Own the stage" in her menu. The
   stage the engine builds for this host (data-ns-own="content_host") is the page's one stage, so the rule above spares it;
   she is transparent (no card), her words under her; her corner keeps no second menu while she is out. */
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] { display: block; position: relative; margin: 0; background: transparent; border: 0; box-shadow: none; color: #202124; font: 500 14px/1.4 var(--ns-font,system-ui,sans-serif); }
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] :is([data-ns-stage-face],.ns-face-live):not([hidden]) { display: block; width: 100%; max-width: 220px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] .ns-face-live { position: relative; overflow: hidden; }
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face][data-face="live"] [data-ns-stage-face] { display: none; }
/* Line 16990 (fix-forward-live-check-09301638-1-r1): the voice writes data-face on her plane, and the plane stays in her
   corner when her face steps onto the stage, so the still follows that plane there too: one look, never her still over it. */
html:has([data-ns-content-host-plane][data-face="live"]) netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] [data-ns-stage-face] { display: none; }
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] [hidden] { display: none !important; }
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] .ns-captions { position: static; margin: 4px 0 0; padding: 6px 10px; border-radius: 8px; background: #fff; color: #202124; box-shadow: 0 1px 6px #0002; transform: none; opacity: 1; }
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] .ns-content-host-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ns-content-live-host[data-ns-own-out] { visibility: hidden; pointer-events: none; }
/* Line 16983 (fix-forward-live-check-09301608-1-r1): netshow-stage-voice.js marks data-face="live" on her corner plane, which
   stays behind when the face node steps out, so the [data-face] rule above never matched on the stage: the still portrait
   and her live face both painted (two faces), the traced look kept its cream paper and her words fell below the phone's
   foot. Owned, the still hides as soon as her live face shows, the paper is clear, and face and words share her box: the
   face gives way so her caption stays under her and inside the viewport. */
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] { display: flex; flex-direction: column; align-items: center; height: 100%; box-sizing: border-box; }
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face]:has(> .ns-face-live:not([hidden])) > [data-ns-stage-face] { display: none !important; }
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] :is([data-ns-stage-face],.ns-face-live):not([hidden]) { flex: 1 1 auto; min-height: 0; width: auto; max-width: 100%; }
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] [data-traced-paper] { fill: transparent; }
netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] .ns-captions { flex: 0 0 auto; align-self: stretch; max-height: 45%; overflow-y: auto; }
/* Line 16994 (fix-forward-live-check-09301708-1-r1): on a phone perch her box is about 140 px wide and her greeting was cut
   off inside it. Her words step out of her box's width (content-page-live-host.js writes the width and offset, 12 px
   inside the screen), still under her; centred and on a desktop her box is wide enough and nothing changes. */
netshow-stage[data-ns-own="content_host"][data-stage-device="phone"]:not([data-stage-state="CENTRE"]):not([data-stage-state="ENTER"]) > [data-ns-own-face][data-ns-words-placed] { overflow: visible; }
netshow-stage[data-ns-own="content_host"][data-stage-device="phone"]:not([data-stage-state="CENTRE"]):not([data-stage-state="ENTER"]) > [data-ns-own-face][data-ns-words-placed] .ns-captions { align-self: flex-start; box-sizing: border-box; width: var(--ns-words-w); max-width: none; margin-left: var(--ns-words-x); }
/* Line 17000 (fix-forward-live-check-09301738-1-r1): with no room between a page's landmarks (the trade pages at 375) the
   stage folds her to its 65 px corner chip and hides its own caption; hers lives on her face node, so it kept half the chip
   and hung cut off beside it while her look shrank to 32 px. Folded, the chip is her face: her words leave the flow
   (still read out) and her look fills the chip. Unfolded, line 16994's words under her come back.
   Line 17005 (fix-forward-live-check-09301838-1-r1): on the trade pages at 375 she stays folded while she talks, so the
   clipped words meant a stranger never saw a word of hers (her resting line included, when her voice is down). Folded,
   her words step out above the chip instead: line 16994's width and offset (12 px inside the screen), three lines that
   follow her newest words (line 17001), in the band the page already keeps clear for her. The look still fills the chip. */
netshow-stage[data-ns-own="content_host"][data-stage-folded] > [data-ns-own-face] .ns-captions { position: absolute; top: auto; right: 0; left: auto; bottom: calc(100% + 6px); box-sizing: border-box; width: min(20rem, calc(100vw - 24px)); max-width: none; max-height: calc(4.2em + 12px); margin: 0; overflow-y: auto; }
netshow-stage[data-ns-own="content_host"][data-stage-folded="left"] > [data-ns-own-face] .ns-captions { right: auto; left: 0; }
netshow-stage[data-ns-own="content_host"][data-stage-folded]:not([data-stage-state="CENTRE"]):not([data-stage-state="ENTER"]) > [data-ns-own-face][data-ns-words-placed] > .ns-captions { right: auto; left: var(--ns-words-x); width: var(--ns-words-w); margin: 0; }
netshow-stage[data-ns-own="content_host"][data-stage-folded] > [data-ns-own-face] .ns-captions:empty { clip-path: inset(50%); pointer-events: none; }
/* Line 17005 (fix-forward-live-check-09301838-1-r1, SEED-0441 on the host the trade doors serve): finish-netshow-doors-2-r2
   anchored the wide caption in alive-dock.css, but /talking-websites/{trade} replaced the Alive dock with this corner host
   and never loads that sheet, so here her caption still sat under her face and lifted it 118 px as her words grew (1440).
   On the hold-still trade door at 768 px and wider her words grow upward from a fixed anchor above her face, clear of the
   page's 240 px gutter edge, and follow her newest words past 40 % of the screen; her face stays on its coordinate. The
   shell clips .ns-face (netshow-stage.css), so her face box lets the words show above it. */
@media (min-width: 768px) {
    body:has(.ns-trade[data-trade-dock-holds-still]) .ns-content-live-host > [data-ns-own-plane] > .ns-face { overflow: visible; }
    body:has(.ns-trade[data-trade-dock-holds-still]) .ns-content-live-host > [data-ns-own-plane] > .ns-face > .ns-captions { position: absolute; right: 0; left: auto; bottom: calc(100% + 8px); width: 100%; max-height: 40vh; overflow-y: auto; margin: 0; }
}
@media (prefers-color-scheme: dark) {
    netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] { color: #e8eaed; }
    netshow-stage[data-ns-own="content_host"] > [data-ns-own-face] .ns-captions { background: #202124; color: #e8eaed; }
}