/* 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 Talk to a person, the
   same three states; minimized, her face, her name, her AI line and this row stay ------------------------------------------ */
.abv2-agent__links.abv2-agent__links--cc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.abv2-agent__links.abv2-agent__links--cc > .sc-cc { margin-left: auto; }
.abv2-agent[data-sc-cc-state="min"] :is(.abv2-abilities, .abv2-address, .abv2-starters, .abv2-type, .abv2-agent__status, .abv2-sprocket, .sc-tx, [data-sc-transcript-open]) { display: none !important; }
.abv2-agent[data-sc-cc-state="min"] .abv2-agent__face { height: 140px; --alive-agent-size: 128px; }
.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; }
@media (prefers-reduced-motion: reduce) { .sc-avatar-dock[data-sc-free] .sc-free-menu { transition: none; } }