/* Line 18672 (netshow_ai_factory_pane_host, App\Support\Stage\NetshowAiFactoryPane): the factory site's agent pane host on
   netshow.ai and app.netshow.ai. ONE <alive-agent> in her container, her caption under her face, the template's easy
   controls (factory-core.js julyAgentBar) at the bottom of the container. ONE size rule: her face is a fixed box per pane
   size (Compact, Half, Max), anchored at the top of her stage, so speaking, listening and resting never move or resize it
   (the speaking state animates her mouth, rim and brows inside that box). From 900 px she is the left rail and the page sits
   right of her; under 900 px she is the dock along the bottom. Set free: the kit's hamburger, a "Back to my spot" pill.
   Minimize: a bubble that keeps talking. Light and dark follow the page tokens (public/css/ns-tokens.css). */

/* every other house mount stays hidden while she is the page's agent (the content host's own rule, carried here) */
html[data-ns-factory-pane] :is(.alive-dock, .alive-dock-greeting-layer, #ns-chat-root, .ns-aie-host, .vd-agent-face, .vd-host-actions, .ns-public-avatar-menu, netshow-stage, .ab-host-greeting, #ns-host-plane, [data-ns-stage-splitter], #ns-stage-dock) { display: none !important; }

:root[data-ns-factory-pane] {
    --nsfp-w: 300px; --nsfp-face: 220px; --nsfp-dock: 214px; --nsfp-face-dock: 96px;
    --nsfp-accent: var(--ns-focus, #1a73e8);
}
:root[data-ns-factory-pane][data-nsb-size="half"] { --nsfp-w: max(480px, 50vw); --nsfp-face: 300px; --nsfp-dock: 64svh; --nsfp-face-dock: 200px; }
:root[data-ns-factory-pane][data-nsb-size="max"] { --nsfp-w: max(560px, 72vw); --nsfp-face: 380px; --nsfp-dock: 90svh; --nsfp-face-dock: 260px; }

aside.ns-fp {
    position: fixed; z-index: 1040; box-sizing: border-box; margin: 0; display: flex; flex-direction: column; gap: 8px;
    background: var(--ns-surface, #fff); color: var(--ns-text, #202124); font-family: var(--ns-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --alive-menu-accent: var(--nsfp-accent);
}
aside.ns-fp[hidden] { display: none !important; }
.ns-fp-name { margin: 0; font: 600 15px/1.4 var(--ns-font, system-ui, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.ns-fp-name span { font-weight: 400; color: var(--ns-text-2, #5f6368); }
.ns-fp-stage { position: relative; flex: 1 1 auto; min-height: 0; }

/* her one element in its container: a fixed face box at the top of the stage, her live caption under it */
#ns-house-pane-host[data-mode="container"], #ns-house-pane-host:not([data-mode]) {
    position: absolute; inset: 0; width: auto; height: auto; max-width: none; aspect-ratio: auto; --alive-agent-size: var(--nsfp-face);
}
#ns-house-pane-host[data-mode="container"] > .ak-face {
    inset: auto; top: 4px; left: calc(50% - var(--nsfp-face) / 2); width: var(--nsfp-face); height: var(--nsfp-face);
}
/* the one size rule: in her container nothing else may scale, move or resize her face box (her mouth, rim and brows move inside it) */
html[data-ns-factory-pane] #ns-house-pane-host[data-mode="container"] > .ak-face { transform: none !important; scale: none !important; translate: none !important; rotate: none !important; zoom: 1 !important; transition: none !important; animation: none !important; }
#ns-house-pane-host[data-mode="container"] > .ak-caption {
    top: calc(var(--nsfp-face) + 16px); bottom: 0; left: 0; right: 0; min-height: 0; max-height: none; height: auto;
    font-size: 15px; line-height: 1.45; text-align: center; -webkit-line-clamp: 7; color: inherit;
}
/* in the container the controls are the bar below; the kit's hamburger is only for her free self (it still opens from Agent) */
#ns-house-pane-host[data-mode="container"] > .ak-menu-btn { top: auto; bottom: 0; right: 0; opacity: 0 !important; pointer-events: none !important; }
#ns-house-pane-host[data-mode="container"] > .ak-show { display: none; }

/* the template's easy controls (factory-core.js JULY_BAR_CSS, in the page tokens) */
.nsb { display: flex; flex-direction: column; gap: 8px; flex: none; }
:where(.nsb) button { font-family: inherit; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nsb button:focus-visible, .nsb-pop button:focus-visible, .nsb-pop input:focus-visible { outline: 2px solid var(--nsfp-accent); outline-offset: 2px; }
.nsb-i { width: 18px; height: 18px; flex: none; }
.nsb-talk { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px; border-radius: 13px; border: 0; background: var(--nsfp-accent); color: var(--ns-on-accent, #fff); font-weight: 600; font-size: 15px; }
.nsb-talk[data-state="live"] { background: #188038; color: #fff; }
.nsb-talk[data-state="muted"] { background: #5f6368; color: #fff; }
.nsb-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.nsb-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 52px; padding: 6px 2px; border-radius: 12px; border: 1px solid var(--ns-border, #dadce0); background: transparent; color: var(--ns-text-2, #5f6368); font-size: 11px; white-space: nowrap; }
.nsb-b:hover { border-color: var(--ns-border-strong, #9aa0a6); color: var(--ns-text, #202124); }
.nsb-b[aria-pressed="true"], .nsb-b[aria-expanded="true"] { border-color: var(--nsfp-accent); color: var(--ns-text, #202124); background: color-mix(in srgb, var(--nsfp-accent) 14%, transparent); }
.nsb-l { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nsb-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.nsb-s { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ns-border, #dadce0); background: transparent; color: var(--ns-text-2, #5f6368); font-size: 12px; white-space: nowrap; }
.nsb-s .nsb-i { width: 15px; height: 15px; }
.nsb-s:hover { color: var(--ns-text, #202124); border-color: var(--ns-border-strong, #9aa0a6); }
.nsb[data-pane-size="compact"] [data-nsb-size="compact"], .nsb[data-pane-size="half"] [data-nsb-size="half"], .nsb[data-pane-size="max"] [data-nsb-size="max"] { background: var(--ns-text, #202124); color: var(--ns-surface, #fff); border-color: var(--ns-text, #202124); }
.nsb-consent { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ns-text-2, #5f6368); }
.nsb-back { display: none; }
html[data-nsb-free] .nsb > :not(.nsb-back) { display: none !important; }
html[data-nsb-free] .nsb-back { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ns-border, #dadce0); background: var(--ns-card, #fff); color: var(--ns-text, #202124); font-size: 13px; box-shadow: 0 4px 16px rgba(0, 0, 0, .16); }
.nsb-pop { position: fixed; z-index: 2147483000; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: min(70vh, 440px); overflow: auto; padding: 8px; border-radius: 14px; background: var(--ns-card, #fff); color: var(--ns-text, #202124); border: 1px solid var(--ns-border, #dadce0); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35); font: 14px/1.4 var(--ns-font, system-ui, sans-serif); box-sizing: border-box; }
.nsb-pop button { display: block; width: 100%; text-align: left; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.nsb-pop button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.nsb-pop-h { margin: 4px 12px 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-text-2, #5f6368); }
.nsb-pop-note { margin: 6px 12px 4px; font-size: 12px; line-height: 1.45; color: var(--ns-text-2, #5f6368); }
.nsb-pop form { display: flex; gap: 6px; padding: 4px; }
.nsb-pop input[type="text"] { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ns-border, #dadce0); background: transparent; color: inherit; font: inherit; box-sizing: border-box; }
.nsb-pop form button { width: auto; flex: none; background: var(--nsfp-accent); color: var(--ns-on-accent, #fff); text-align: center; font-weight: 600; padding: 10px 16px; }
.nsb-pop label { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; font-size: 12px; color: var(--ns-text-2, #5f6368); }
.nsb-pop input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--nsfp-accent); }

/* the left rail from 900 px; the page sits right of her */
@media (min-width: 900px) {
    aside.ns-fp { top: 0; bottom: 0; left: 0; width: var(--nsfp-w); padding: 72px 16px 16px; border-right: 1px solid var(--ns-border, #dadce0); overflow: hidden; }
    :root[data-ns-factory-pane]:has(aside.ns-fp:not([hidden])):not([data-nsb-free]):not([data-nsb-min]) body { padding-left: var(--nsfp-w) !important; box-sizing: border-box; }
    :root[data-ns-factory-pane] :is(#main-content, #ns-content-plane) { margin-right: 0 !important; }
    :root[data-ns-factory-pane] :is(.landing-footer, body > footer) { padding-right: 0 !important; }
}
/* the dock along the bottom under 900 px: her face at the left, her caption beside it, the controls under them */
@media (max-width: 899.98px) {
    aside.ns-fp { left: 0; right: 0; bottom: 0; height: calc(var(--nsfp-dock) + env(safe-area-inset-bottom, 0px)); padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px; border-top: 1px solid var(--ns-border, #dadce0); box-shadow: 0 -2px 12px rgba(0, 0, 0, .08); }
    :root[data-ns-factory-pane] { scroll-padding-bottom: var(--nsfp-dock); }
    :root[data-ns-factory-pane]:has(aside.ns-fp:not([hidden])):not([data-nsb-free]):not([data-nsb-min]) body { padding-bottom: calc(var(--nsfp-dock) + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box; }
    :root[data-ns-factory-pane] :is(#main-content, #ns-content-plane) { margin-right: 0 !important; }
    .ns-fp-name { display: none; }
    :root[data-ns-factory-pane]:not([data-nsb-size="half"]):not([data-nsb-size="max"]) #ns-house-pane-host[data-mode="container"] > .ak-face { top: 0; left: 0; width: var(--nsfp-face-dock); height: var(--nsfp-face-dock); }
    :root[data-ns-factory-pane]:not([data-nsb-size="half"]):not([data-nsb-size="max"]) #ns-house-pane-host[data-mode="container"] > .ak-caption { top: 0; left: calc(var(--nsfp-face-dock) + 10px); bottom: 0; font-size: 14px; line-height: 1.38; text-align: left; -webkit-line-clamp: 5; }
    :root[data-ns-factory-pane]:is([data-nsb-size="half"], [data-nsb-size="max"]) #ns-house-pane-host[data-mode="container"] > .ak-face { top: 0; left: calc(50% - var(--nsfp-face-dock) / 2); width: var(--nsfp-face-dock); height: var(--nsfp-face-dock); }
    :root[data-ns-factory-pane]:is([data-nsb-size="half"], [data-nsb-size="max"]) #ns-house-pane-host[data-mode="container"] > .ak-caption { top: calc(var(--nsfp-face-dock) + 10px); }
    .nsb { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: 4px; }
    .nsb-row { display: contents; }
    .nsb-talk { flex-direction: column; gap: 2px; min-height: 48px; padding: 4px 2px; font-size: 11px; border-radius: 11px; }
    .nsb-b { min-height: 48px; padding: 4px 1px; font-size: 10px; gap: 2px; border-radius: 10px; }
    .nsb-i { width: 17px; height: 17px; }
    .nsb-sizes { grid-column: 1 / -1; flex-wrap: nowrap; gap: 4px; }
    .nsb-s { min-height: 32px; padding: 2px 6px; font-size: 11px; min-width: 0; }
    .nsb-consent { display: none; }
    html[data-nsb-free] .nsb { display: flex; }
}

/* set free: she walks the page with the kit's one hamburger; her container folds to a "Back to my spot" pill */
html[data-nsb-free] aside.ns-fp { top: auto; right: auto; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
html[data-nsb-free] .ns-fp-name { display: none; }
html[data-nsb-free] .ns-fp-stage { flex: none; height: 0; }

/* minimized: a bubble in the bottom-right corner that keeps talking, her live line in a chip beside it; a tap brings her back */
html[data-nsb-min] aside.ns-fp { top: auto; left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 84px; height: 84px; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
html[data-nsb-min] aside.ns-fp > :not(.ns-fp-stage) { display: none !important; }
html[data-nsb-min] #ns-house-pane-host[data-mode="container"] > .ak-face { inset: 0 !important; width: auto !important; height: auto !important; border-radius: 50%; background: #fff; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .5), 0 0 0 3px rgba(255, 255, 255, .92); }
html[data-nsb-min] #ns-house-pane-host[data-mode="container"] > .ak-face > .ak-smiley { inset: 4%; }
html[data-nsb-min] #ns-house-pane-host[data-mode="container"] > .ak-caption { top: auto !important; left: auto !important; right: calc(100% + 10px); bottom: 6px !important; width: max-content; max-width: min(300px, calc(100vw - 132px)); padding: 8px 12px; border-radius: 14px; background: rgba(32, 33, 36, .92); color: #fff; font-size: 14px; line-height: 20px; text-align: left; -webkit-line-clamp: 3; }
html[data-nsb-min] #ns-house-pane-host[data-mode="container"] > .ak-caption:empty { display: none; }
@media (max-width: 899.98px) {
    html[data-nsb-min] aside.ns-fp { width: 68px; height: 68px; }
    html[data-nsb-min] #ns-house-pane-host[data-mode="container"] > .ak-caption { right: 0; bottom: calc(100% + 10px) !important; max-width: calc(100vw - 28px); }
}
#ns-house-pane-host[data-mode="free"] { --alive-agent-free-size: 112px; }
@media (max-width: 899.98px) { #ns-house-pane-host[data-mode="free"] { --alive-agent-free-size: 88px; } }
@media (prefers-reduced-motion: no-preference) { .nsb button { transition: background-color .15s ease, border-color .15s ease, color .15s ease; } }
@media print { aside.ns-fp { display: none !important; } }