/* Line 31947: the agent container's ONE controls block (shop/concierge/partials/container-controls.blade.php,
   public/js/shop-concierge/container-controls.js), worn by the store agent's sheet (#sc-sheet, data-sc-cc-root="sheet") and by
   the agentic business template's container (#ab-agent, data-sc-cc-root="v2"). The July template pane's Minimize, Max and hide
   rail, the factory bar's Set free. Flat (Google path): small icon buttons on her foot, hairlines, one soft shadow on the tab.
   The module sets data-sc-cc-state="max|min|hidden" on the container and <html data-sc-cc-sheet|data-sc-cc-v2>; nothing here touches
   her voice: folded, her element stays in the page (never display:none, never moved), so she keeps talking and listening. */

/* ---- the row: minimize, maximize, hide to the edge, set free (the rocket) -------------------------------------------- */
.sc-cc { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.sc-cc__btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--sc-sh-meta, var(--ns-text-2, #5f6368)); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sc-cc__btn:hover { background: var(--sc-chip, var(--ns-elevated, rgba(60, 64, 67, .08))); color: var(--sc-ink, var(--ns-text, #202124)); }
.sc-cc__btn[aria-pressed="true"] { background: var(--sc-chip, var(--ns-elevated, rgba(60, 64, 67, .08))); color: var(--sc-ink, var(--ns-text, #202124)); }
.sc-cc__btn:focus-visible { outline: 2px solid var(--sc-ink-strong, var(--ns-text, #202124)); outline-offset: 1px; }
.sc-cc__btn[hidden] { display: none !important; }
.sc-cc__btn svg { flex: none; }

/* "AI" beside her name: her AI line's words gave their place to the row; its title keeps them */
.sc-cc-ai {
    display: inline-flex; align-items: center; height: 18px; margin-left: 8px; padding: 0 6px;
    border: 1px solid currentColor; border-radius: 6px; vertical-align: 0.25em;
    font: 600 11px/1 var(--sc-sans, var(--ns-font, system-ui, sans-serif)); letter-spacing: .04em;
    color: var(--sc-sh-meta, var(--ns-text-2, #5f6368));
}

/* ---- the store sheet's foot: the row where her AI line's words were, Live Human and the gear at its end ---------------- */
.sc-sheet .sc-ai-line.sc-ai-line--cc { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; }
.sc-sheet .sc-ai-line.sc-ai-line--cc > .sc-ai-line__end { margin-left: auto; }
.sc-page--frame .sc-sheet .sc-ai-line.sc-ai-line--cc > span.sc-cc { flex: 0 0 auto; min-width: 0; }
.sc-page--frame .sc-sheet .sc-ai-line.sc-ai-line--cc { flex-wrap: nowrap; padding-left: 2px; }

/* ---- minimized: her conversation and typing box step aside; her Talk bar, her camera, microphone, speaker and volume and
   this row stay, at the bottom of her container, so the page keeps its room ------------------------------------------- */
#sc-sheet[data-sc-cc-state="min"] .sc-sheet__body,
#sc-sheet[data-sc-cc-state="min"] [data-sc-composer],
#sc-sheet[data-sc-cc-state="min"] [data-sc-chip],
#sc-sheet[data-sc-cc-state="min"] [data-sc-hold-slot],
#sc-sheet[data-sc-cc-state="min"] [data-sc-eyes-slot],
#sc-sheet[data-sc-cc-state="min"] [data-sc-unpeek],
#sc-sheet[data-sc-cc-state="min"] .sc-peek-said,
#sc-sheet[data-sc-cc-state="min"] .sc-clear,
#sc-sheet[data-sc-cc-state="min"] .sc-tx { display: none !important; }
#sc-sheet.sc-sheet--open[data-sc-cc-state="min"] { top: auto !important; height: auto !important; max-height: 100%; }
/* a template site's frame is her whole container: her face keeps its place on top and her small panel sits right under it,
   her stage's backdrop below (the site's page holds the column; on a phone the frame is the whole screen, so there she is
   whole or folded to the page's own door: the module keeps minimize and maximize aside) */
.sc-page--frame #sc-sheet.sc-sheet--open[data-sc-cc-state="min"] { top: var(--sc-panel-top, 0px) !important; bottom: auto !important; border-bottom: 1px solid var(--sc-hairline) !important; }
html[data-sc-frame-box="panel"][data-sc-cc-sheet="min"],
html[data-sc-frame-box="panel"][data-sc-cc-sheet="min"] body.sc-page--frame { background: var(--sc-bg); }
/* one Minimize per container: where she wears the row, her bar's own call-time Minimize (line 31069, voice.js) steps aside */
#sc-sheet[data-sc-cc-root] .sc-voicebar__min { display: none !important; }
/* the page has its width back beside her small panel (the store's own minimize does the same, container.css) */
html[data-sc-cc-sheet="min"] body.sc-open:not(.sc-page--frame) { padding-left: 0 !important; }

/* ---- line 32029 (K01 round 2; Michael: "Somehow, you have to minimize it down to maybe two lines ... The Sunny agent with the
   trash can and all those menu options could just be a small little arrow to pop up and pop back down ... If you do need to get to
   the volume control, you could probably have the speaker icon there"): condensed and minimized, her face stays on top with its
   window (he likes it) and her bottom is TWO lines: her Talk bar, then one bar (the arrow, Hide, Restore, the rocket, the speaker
   and Talk to a person). Her header (her name, bag, Clear chat, her settings, Live Human, close), her levels and her chat gear sit
   behind the arrow, which pops them up and back down; the speaker pops up her levels (volume, mute, camera) alone. Every menu item
   stays reachable. The arrow and the speaker are drawn by container-controls.js, only on her condensed sheet. */
#sc-sheet .sc-cc__btn--more, #sc-sheet .sc-cc__btn--sound { display: none; }
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] .sc-cc__btn--more,
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] .sc-cc__btn--sound { display: inline-flex; }
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"]:not([data-sc-cc-more]) .sc-sheet__head,
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"]:not([data-sc-cc-more]) .sc-ai-line__gear,
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"]:not([data-sc-cc-more]):not([data-sc-cc-sound]) [data-sc-levels] { display: none !important; }
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] .sc-sheet__foot { padding-top: 6px; padding-bottom: 6px; }
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] .sc-voicebar { margin-bottom: 4px; }
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] .sc-ai-line--cc { flex-wrap: nowrap; margin: 0; }
/* the arrow turns over while her menu is up; Restore and the rocket stand out (his words: "you can have it be more notable") */
.sc-cc__btn--more svg { transition: transform 160ms ease; }
#sc-sheet[data-sc-cc-more] .sc-cc__btn--more svg { transform: rotate(180deg); }
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] .sc-cc__btn--max,
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] .sc-cc__btn--free {
    background: var(--sc-talk-soft, var(--ns-elevated, rgba(21, 128, 61, .14))); color: var(--sc-talk, var(--v2-accent-text, #15803d));
}
#sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] .sc-cc__btn--max[aria-pressed="true"] { background: var(--sc-chip, rgba(60, 64, 67, .08)); }
#sc-sheet[data-sc-cc-sound] .sc-cc__btn--sound, #sc-sheet[data-sc-cc-more] .sc-cc__btn--more { background: var(--sc-chip, var(--ns-elevated, rgba(60, 64, 67, .08))); color: var(--sc-ink, var(--ns-text, #202124)); }
/* minimized she never moves by her header (it is folded): her Talk bar's own words and its empty room are her grab then */
html[data-sc-cc-move] #sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] .sc-voicebar,
html[data-sc-cc-move] #sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] .sc-ai-line--cc { cursor: grab; }
@media (prefers-reduced-motion: reduce) { .sc-cc__btn--more svg { transition: none; } }
/* on a phone her head is folded with the rest, so her face rides her Talk bar's left end (avatar-dock.js barFaceBox): the bar's wave
   glyph widens to her seat, and its bars step aside while she sits there (CHANGES c: never over the store's promo line) */
@media (max-width: 767.98px) {
    #sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"]:not([data-sc-cc-more]) .sc-voicebar[data-sc-panel] .sc-voicebar__wave {
        flex: 0 0 36px; width: 36px; height: 36px; padding: 0 7px; box-sizing: border-box;
    }
    html:has(.sc-avatar-dock[data-sc-place="head"]:not([hidden])) #sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"]:not([data-sc-cc-more]) .sc-voicebar__wave i { visibility: hidden; }
}

/* ---- line 32029 (conductor CHANGES a: "volume and mute FIRST, then Looks and the rest"): her one menu (avatar-dock.js buildSound)
   opens on her sound, Mute beside her volume, the same level her bar's row keeps ---- */
.sc-settings__sound-row { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.sc-settings__sound-row .sc-levels__vol { flex: 1 1 auto; min-width: 0; }
.sc-settings__mute {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 999px; background: var(--sc-chip, var(--ns-elevated, rgba(60, 64, 67, .08)));
    color: var(--sc-ink, var(--ns-text, #202124)); cursor: pointer;
}
.sc-settings__mute[aria-pressed="true"] { background: var(--sc-talk-soft, rgba(21, 128, 61, .14)); color: var(--sc-talk, #15803d); }
.sc-settings__mute:focus-visible { outline: 2px solid var(--sc-talk, #15803d); outline-offset: 2px; }

/* ---- line 32029: set free, her face is grabbed with a mouse or a finger and dropped anywhere on the page (avatar-dock.js keeps
   the drop for the visit); a tap on her stays her Talk ---- */
.sc-avatar-dock[data-sc-free] { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.sc-avatar-dock[data-sc-free][data-sc-dragging] { cursor: grabbing; transition: none !important; }
html:has(.sc-avatar-dock[data-sc-dragging]), html:has(.sc-avatar-dock[data-sc-dragging]) * { -webkit-user-select: none !important; user-select: none !important; }

/* ---- hidden: she folds to a thin tab (48 px, half an inch) on her edge; the page has its whole width ------------------ */
#sc-sheet[data-sc-cc-state="hidden"] { visibility: hidden; pointer-events: none; transform: translateX(-100%) !important; }
/* line 32029 (K01 round 2, Michael's first picture: "the agent's top rim container doesn't hide and go in. It sticks out still"):
   Hide folds EVERYTHING of her container at once: her face's window, its drag bar, the band behind her face (the store's top was
   covered by it right after Hide), her width edge and a tablet's scrim. Set free (the rocket folds her container in the same
   move), her face stays out on the page: it is hers, not her container's. */
html[data-sc-cc-sheet="hidden"] .sc-avatar-dock:not([data-sc-free]),
html[data-sc-cc-sheet="hidden"] .sc-settings:not([data-sc-from-free]),
html[data-sc-cc-sheet="hidden"] .sc-stage-grip,
html[data-sc-cc-sheet="hidden"] .sc-panel-edge { visibility: hidden !important; pointer-events: none !important; transition: none !important; }
html[data-sc-cc-sheet="hidden"] body.sc-alive-stage::after,
html[data-sc-cc-sheet="hidden"] body.sc-open::before { content: none !important; display: none !important; }
/* line 32042 (K01 round 3, the test station at 1440: "after Hide a 48-px dark band stays down the left side"): Hide leaves
   nothing; the page has its whole width and only her small tab floats on its edge */
html[data-sc-cc-sheet="hidden"] body.sc-open:not(.sc-page--frame) { padding-left: 0 !important; }
/* line 32042 (K01 round 3, the test station at 1440 minimized: "her face block covers the store's menu button and 'Kits'; she
   must never cover the header"): minimized on a tablet or computer her face sits on her small container (avatar-dock.js), so the
   band that backed her face at the panel's top (body.sc-alive-stage::after, over the header's left) and its grip fold with it */
@media (min-width: 768px) {
    html[data-sc-cc-sheet="min"] body.sc-alive-stage::after { content: none !important; display: none !important; }
    html[data-sc-cc-sheet="min"] .sc-stage-grip { visibility: hidden !important; pointer-events: none !important; }
}

.sc-cc-tab {
    position: fixed; z-index: 62; left: 0; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    width: 48px; height: 152px; margin: 0; padding: 0;
    border: 1px solid var(--sc-hairline, var(--ns-border, rgba(60, 64, 67, .2))); border-left: 0; border-radius: 0 14px 14px 0;
    background: var(--sc-bg, var(--ns-surface, #fff)); color: var(--sc-ink, var(--ns-text, #202124));
    box-shadow: 0 6px 18px rgba(15, 23, 42, .14); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sc-cc-tab[hidden] { display: none !important; }
.sc-cc-tab:hover { background: var(--sc-chip, var(--ns-elevated, #f1f3f4)); }
.sc-cc-tab:focus-visible { outline: 2px solid var(--sc-ink-strong, var(--ns-text, #202124)); outline-offset: 2px; }
.sc-cc-tab__mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--sc-talk-soft, var(--ns-elevated, rgba(21, 128, 61, .14))); color: var(--sc-talk, var(--v2-accent-text, #15803d)); }
.sc-cc-tab__wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.sc-cc-tab__wave i { display: block; width: 3px; height: 8px; border-radius: 2px; background: currentColor; opacity: .55; }
.sc-cc-tab__wave i:nth-child(2) { height: 14px; }
/* she keeps talking while folded: her wave moves on the tab as it does on her Talk bar (host.css sc-vb-wave) */
body:has(.sc-voicebar[data-sc-wave="on"]) .sc-cc-tab__wave i { animation: sc-cc-wave 920ms ease-in-out infinite; opacity: .9; }
body:has(.sc-voicebar[data-sc-wave="on"]) .sc-cc-tab__wave i:nth-child(2) { animation-delay: -140ms; }
body:has(.sc-voicebar[data-sc-wave="on"]) .sc-cc-tab__wave i:nth-child(3) { animation-delay: -320ms; }
@keyframes sc-cc-wave { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1.35); } }
.sc-cc-tab__go { display: inline-flex; opacity: .7; }

/* a phone: the tab is a small smudge on the right edge, above the page's own bottom door */
@media (max-width: 767.98px) {
    .sc-cc-tab {
        left: auto; right: 0; top: auto; bottom: calc(112px + env(safe-area-inset-bottom, 0px)); transform: none;
        height: 128px; border-left: 1px solid var(--sc-hairline, var(--ns-border, rgba(60, 64, 67, .2))); border-right: 0;
        border-radius: 14px 0 0 14px;
    }
    .sc-cc-tab__go { transform: scaleX(-1); }
    .sc-cc { gap: 0; }
    .sc-cc__btn { width: 34px; }
}

/* ---- the agentic business template's container (agentic-business/v2): the same row in its foot beside Transcript, the same
   three states. Line 32117 (Michael's Texas notes: "They can minimize the agent container and all its components ... they're
   going to want to use their camera and talk to the agent"): minimized, she is her face in the corner, one tap back to her whole
   panel (v2.js data-v2-face-open), with her camera chip beside it (data-v2-cam); her element stays in the page, so her call goes
   on. Her foot (Transcript and this row) stays in sight at the bottom of her panel, so Minimize is always one tap. ---------- */
.abv2-agent__links.abv2-agent__links--cc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; position: sticky; bottom: -16px; z-index: 3;
    margin: 0 -16px -16px; padding: 4px 16px 8px; background: var(--ns-surface, #fff); border-top: 1px solid var(--ns-border, rgba(60, 64, 67, .2)); }
.abv2-agent__links.abv2-agent__links--cc > .sc-cc { margin-left: auto; }
.abv2-agent[data-sc-cc-state="min"] {
    position: fixed !important; top: auto !important; left: auto !important; right: max(16px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; z-index: 60; display: block !important; width: 84px; height: 84px;
    max-height: none !important; padding: 0 !important; overflow: hidden !important; border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .32), 0 0 0 1px var(--ns-border-strong, rgba(60, 64, 67, .3));
}
.abv2-agent[data-sc-cc-state="min"] > :not(.abv2-agent__face) { display: none !important; }
.abv2-agent[data-sc-cc-state="min"] .abv2-agent__face { width: 100%; height: 100% !important; border-radius: 999px; --alive-agent-size: 84px; }
/* her face only, the whole circle: her caption, her menu button and her back button wait for her whole panel */
.abv2-agent[data-sc-cc-state="min"] alive-agent > :is(.ak-caption, .ak-menu-btn, .ak-back) { display: none !important; }
.abv2-agent[data-sc-cc-state="min"] alive-agent > .ak-face { inset: 0 !important; }
.abv2-face-open { display: none; }
.abv2-agent[data-sc-cc-state="min"] .abv2-face-open { display: block; position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; padding: 0;
    border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.abv2-face-open:focus-visible { outline: 3px solid var(--ns-focus, #1a73e8); outline-offset: -3px; }
.abv2-cam { display: none; }
html[data-sc-cc-v2="min"] .abv2-cam { display: inline-grid; place-items: center; position: fixed; z-index: 60; right: calc(max(16px, env(safe-area-inset-right, 0px)) + 96px);
    bottom: calc(36px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; padding: 0; border: 1px solid var(--ns-border-strong, rgba(60, 64, 67, .3));
    border-radius: 999px; background: var(--ns-elevated, #fff); color: var(--ns-text, #202124); box-shadow: 0 6px 18px rgba(15, 23, 42, .24); cursor: pointer; }
.abv2-cam:focus-visible { outline: 3px solid var(--ns-focus, #1a73e8); outline-offset: 3px; }
@media (min-width: 1024px) {
    /* minimized on a computer, the page takes her column: only her face in the corner stays */
    .abv2-layout:has(> .abv2-agent[data-sc-cc-state="min"]) { grid-template-columns: minmax(0, 1fr); }
    .abv2-layout:has(> .abv2-agent[data-sc-cc-state="min"]) > .abv2-content { grid-column: 1; }
}
@media (max-width: 767.98px) {
    /* on a phone, whole, she opens as a sheet under the header (v2.js --abv2-top) over the page, never pushing the offer away */
    .abv2-agent[data-sc-cc-state="max"] { position: fixed; z-index: 29; top: var(--abv2-top, 56px); left: 0; right: 0; bottom: 0; max-height: none;
        overflow: auto; overscroll-behavior: contain; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 28px rgba(15, 23, 42, .28); }
}
.abv2-agent[data-sc-cc-state="hidden"] {
    position: absolute !important; left: -200vw !important; top: 0 !important; width: 360px; visibility: hidden; pointer-events: none;
}
@media (min-width: 1024px) {
    .abv2-layout:has(> .abv2-agent[data-sc-cc-state="hidden"]) { grid-template-columns: 48px minmax(0, 1fr); }
    .abv2-layout > .sc-cc-tab { position: sticky; top: 72px; left: auto; grid-column: 1; grid-row: 1; transform: none; align-self: start;
        border-left: 1px solid var(--ns-border, rgba(60, 64, 67, .2)); border-radius: 14px; box-shadow: none; }
}

/* ---- line 32006 (condense U1): her name line says "AI agent"; her container moves and sizes freely ---------------------
   container-controls.js mountContainerBox paints <html data-sc-cc-box> with --sc-cc-dx, --sc-cc-dy (her offset from her home
   place) and --sc-cc-cut (how much shorter than whole); avatar-dock.js gives her width as --sc-panel-w (data-sc-cc-sized).
   Her face's window, its drag bar and its backdrop ride with her container. Never inside a template site's frame (its page
   owns the box). Max (the row) brings her home. */
.sc-sheet__as--ai .sc-cc-as__who::before { content: "\00b7"; margin: 0 6px; }
html[data-sc-cc-move] #sc-sheet[data-sc-cc-condense] [data-sc-cc-grab] { cursor: grab; touch-action: none; }
/* line 32029 (tester, 390 px: dragging her top bar selected its words instead of moving her): her grab never selects text */
html[data-sc-cc-move] #sc-sheet[data-sc-cc-condense] [data-sc-cc-grab],
html[data-sc-cc-move] #sc-sheet[data-sc-cc-condense][data-sc-cc-state="min"] :is(.sc-voicebar, .sc-ai-line--cc) { -webkit-user-select: none; user-select: none; }
html[data-sc-cc-move] #sc-sheet[data-sc-cc-condense] [data-sc-cc-grab]:focus-visible { outline: 2px solid var(--sc-ink-strong, var(--ns-text, #202124)); outline-offset: -3px; }
html[data-sc-cc-moving], html[data-sc-cc-moving] * { user-select: none !important; -webkit-user-select: none !important; }
html[data-sc-cc-moving="move"], html[data-sc-cc-moving="move"] * { cursor: grabbing !important; }
html[data-sc-cc-moving="w"], html[data-sc-cc-moving="w"] * { cursor: ew-resize !important; }
html[data-sc-cc-moving="h"], html[data-sc-cc-moving="h"] * { cursor: ns-resize !important; }
html[data-sc-cc-moving] #sc-sheet, html[data-sc-cc-moving] .sc-avatar-dock, html[data-sc-cc-moving] body.sc-page { transition: none !important; }

/* her edges: a hairline in her accent shows on hover and while dragged */
.sc-cc-edge { position: absolute; z-index: 4; margin: 0; padding: 0; background: transparent; touch-action: none; outline: none; }
.sc-cc-edge[hidden] { display: none !important; }
.sc-cc-edge--w { top: 0; right: 0; width: 8px; height: 100%; cursor: ew-resize; }
.sc-cc-edge--h { left: 0; bottom: 0; width: 100%; height: 6px; cursor: ns-resize; }
.sc-cc-edge::after { content: ""; position: absolute; border-radius: 2px; background: var(--sc-accent, #15803d); opacity: 0; transition: opacity 120ms ease; }
.sc-cc-edge--w::after { top: 0; bottom: 0; right: 1px; width: 3px; }
.sc-cc-edge--h::after { left: 0; right: 0; bottom: 1px; height: 3px; }
.sc-cc-edge:hover::after, .sc-cc-edge:focus-visible::after,
html[data-sc-cc-moving="w"] .sc-cc-edge--w::after, html[data-sc-cc-moving="h"] .sc-cc-edge--h::after { opacity: .75; }
#sc-sheet[data-sc-cc-state="min"] .sc-cc-edge--h { display: none !important; }

@media (min-width: 768px) {
    html[data-sc-cc-sized] #sc-sheet[data-sc-cc-condense] { width: var(--sc-panel-w, 440px); }
    html[data-sc-cc-sized] body.sc-alive-stage::after { width: var(--sc-panel-w, 440px); }
    html[data-sc-cc-box] #sc-sheet[data-sc-cc-condense].sc-sheet--open {
        bottom: var(--sc-cc-cut, 0px) !important; translate: var(--sc-cc-dx, 0px) var(--sc-cc-dy, 0px);
    }
    html[data-sc-cc-box] .sc-avatar-dock[data-sc-place="top"],
    html[data-sc-cc-box] body.sc-avatar-top .sc-stage-grip,
    html[data-sc-cc-box] body.sc-alive-stage::after { translate: var(--sc-cc-dx, 0px) var(--sc-cc-dy, 0px); }
    /* moved off her home place she stands over the page like a window: one soft shadow, her edges drawn */
    html[data-sc-cc-moved] #sc-sheet[data-sc-cc-condense].sc-sheet--open {
        border: 1px solid var(--sc-hairline, var(--ns-border, rgba(60, 64, 67, .2))); box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    }
}
@media (min-width: 1024px) {
    /* sized at home, the page makes room for her new width; moved, the page has its whole width back */
    html[data-sc-cc-sized] body.sc-open:not(.sc-page--frame) { padding-left: var(--sc-panel-w, 440px); }
    html[data-sc-cc-moved] body.sc-open:not(.sc-page--frame) { padding-left: 0 !important; }
}
@media (max-width: 767.98px) {
    /* a phone: her top bar drags her down (the page shows above her) and back up; her foot stays at the bottom */
    html[data-sc-cc-box] #sc-sheet[data-sc-cc-condense].sc-sheet--open:not([data-sc-cc-state="min"]) {
        top: calc(var(--sc-panel-top, 0px) + var(--sc-cc-dy, 0px)) !important; bottom: 0 !important; height: auto !important;
        border-top: 1px solid var(--sc-hairline, var(--ns-border, rgba(60, 64, 67, .2))); border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .14);
    }
    html[data-sc-cc-box] .sc-avatar-dock[data-sc-place="top"],
    html[data-sc-cc-box] body.sc-avatar-top .sc-stage-grip,
    html[data-sc-cc-box] body.sc-alive-stage::after { translate: 0 var(--sc-cc-dy, 0px); }
    /* her menu (the gear) is drawn on a phone too: one tap opens it (tester A, 29 Oct 8:05 AM, item d) */
    #sc-sheet[data-sc-cc-condense] .sc-icon-btn.sc-wide-only[data-sc-action="settings"] { display: inline-flex !important; }
}

@media (prefers-reduced-motion: reduce) {
    body:has(.sc-voicebar[data-sc-wave="on"]) .sc-cc-tab__wave i { animation: none; }
    #sc-sheet[data-sc-cc-state] { transition: none; }
}

/* ---- line 32042 (K01 round 3; the house rule: hover on a computer, a tap on touch): set free, her face carries one small menu
   button at its top right (her one menu: Talk, then her volume and mute first); a mouse over her shows it, on touch a tap on her
   face reveals it (avatar-dock.js data-sc-reveal), its focus and its open menu keep it shown -------------------------------- */
.sc-avatar-dock .sc-free-menu { display: none; }
.sc-avatar-dock[data-sc-free] .sc-free-menu {
    position: absolute; z-index: 3; top: 4%; right: 4%; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid var(--sc-hairline, rgba(60, 64, 67, .2)); border-radius: 50%;
    background: var(--sc-bg, var(--ns-surface, #fff)); color: var(--sc-ink, var(--ns-text, #202124)); box-shadow: 0 2px 10px rgba(15, 23, 42, .22);
    cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 140ms ease; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .sc-avatar-dock[data-sc-free]:hover .sc-free-menu { opacity: 1; pointer-events: auto; }
}
.sc-avatar-dock[data-sc-free][data-sc-reveal] .sc-free-menu,
.sc-avatar-dock[data-sc-free] .sc-free-menu:focus-visible,
.sc-avatar-dock[data-sc-free] .sc-free-menu[aria-expanded="true"] { opacity: 1; pointer-events: auto; }
.sc-avatar-dock[data-sc-free] .sc-free-menu:focus-visible { outline: 2px solid var(--sc-ink-strong, var(--ns-text, #202124)); outline-offset: 2px; }
.sc-free-menu__bars { display: grid; gap: 3px; }
.sc-free-menu__bars i { display: block; width: 14px; height: 2px; border-radius: 1px; background: currentColor; }
.sc-settings__talk {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 0 16px; border: 0;
    border-radius: 999px; background: var(--sc-talk, #15803d); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.sc-settings__talk[hidden] { display: none !important; }
.sc-settings__talk:focus-visible { outline: 2px solid var(--sc-ink-strong, var(--ns-text, #202124)); outline-offset: 2px; }
/* Line 32100 (K01 5a and 5b): condensed, her one menu is Luma's house menu: her sound row (Mute, Volume), then Language, Camera,
   Come on out, Own the stage, Hide, End and Bring me back (avatar-dock.js houseRows). Her Show switch, Size, Place, the voice
   picker and the Sprocket's Room, Hold to talk, Captions and Motion are not drawn on it (the rows stay in the page for its own
   code; the house rows press them). */
.sc-settings--house > .sc-settings__row,
.sc-settings--house > .sc-settings__group:not(.sc-settings__sound),
.sc-settings--house > .sc-settings__where,
.sc-settings--house > .sc-settings__more { display: none !important; }
.sc-settings__house { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; }
.sc-settings__house[hidden], .sc-settings__house-row[hidden] { display: none !important; }
.sc-settings__house-row {
    display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
    background: transparent; color: var(--sc-ink-strong, var(--ns-text, #202124)); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.sc-settings__house-row:hover { background: var(--sc-hover, rgba(32, 33, 36, .06)); }
.sc-settings__house-row:focus-visible { outline: 2px solid var(--sc-ink-strong, var(--ns-text, #202124)); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .sc-avatar-dock[data-sc-free] .sc-free-menu { transition: none; } }