/* Shared UI components: available on every page through layout/page.php. */
/* Opaque fallback keeps text readable when backdrop filtering is unavailable. */
.ui-glass {
    border: 0;
    border-radius: var(--radius-panel);
    background: var(--color-surface);
    box-shadow: var(--shadow-glass);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ui-glass {
        background: var(--color-surface-glass);
        -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturation-glass));
        backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturation-glass));
    }
}
@media (prefers-reduced-transparency: reduce) {
    .ui-glass { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.ui-icon {
    display: inline-block;
    width: var(--icon-size, var(--icon-size-default));
    height: var(--icon-size, var(--icon-size-default));
    flex-shrink: 0;
    vertical-align: middle;
}
.ui-check-draw path {
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
    animation: ui-check-draw 700ms ease-out both;
}
/* Lucide's check path starts on the right: reveal it from the left endpoint. */
@keyframes ui-check-draw {
    from { stroke-dashoffset: -24; }
    to { stroke-dashoffset: 0; }
}
.ui-choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.ui-choice {
    --icon-size: var(--icon-size-large);
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.ui-choice__checked { display: none; }
.ui-choice-input:checked + .ui-choice { color: var(--color-text-accent); }
.ui-choice-input:checked + .ui-choice .ui-choice__unchecked { display: none; }
.ui-choice-input:checked + .ui-choice .ui-choice__checked { display: inline-block; }
.ui-choice-input:focus-visible + .ui-choice {
    outline: 2px solid var(--color-focus);
    outline-offset: 4px;
    border-radius: 50%;
}
.ui-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--icon-target-size);
    width: fit-content;
    color: var(--color-text-secondary);
    font-size: var(--font-size-label);
    cursor: pointer;
}
.ui-checkbox__mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--color-border-input);
    border-radius: 4px;
    color: var(--color-text-inverse);
    background: var(--color-surface);
}
.ui-checkbox__mark .ui-icon { --icon-size: 16px; visibility: hidden; }
.ui-choice-input:checked + .ui-checkbox__mark { border-color: var(--color-primary); background: var(--color-primary); }
.ui-choice-input:checked + .ui-checkbox__mark .ui-icon { visibility: visible; }
.ui-choice-input:focus-visible + .ui-checkbox__mark { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ui-text--primary { color: var(--color-text-primary); }
.ui-text--secondary { color: var(--color-text-secondary); }
.ui-text--muted { color: var(--color-text-muted); }
.ui-text--accent { color: var(--color-text-accent); }
.ui-text--error { color: var(--color-text-error); }
.ui-text--inverse { color: var(--color-text-inverse); }

/* Navigation state comes from the current route/tab, never from a transient click. */
.ui-menu-link {
    color: var(--color-text-primary);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-ui);
}
.ui-menu-link:is(:hover, :focus-visible, :active, .is-active, [aria-current]:not([aria-current=false]), [aria-selected=true]) {
    color: var(--color-primary);
    background: transparent;
}
.ui-menu-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ui-tabs {
    --ui-tabs-count: 2;
    --ui-tabs-index: 0;
    --ui-tabs-gap: 16px;
    position: relative;
    display: flex;
    gap: var(--ui-tabs-gap);
    border-bottom: 1px solid var(--color-border);
}
.ui-tabs > .ui-menu-link {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
    font-size: var(--font-size-label);
    text-align: center;
}
.ui-tabs::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: calc((100% - (var(--ui-tabs-count) - 1) * var(--ui-tabs-gap)) / var(--ui-tabs-count));
    height: 2px;
    background: var(--color-primary);
    transform: translateX(calc(var(--ui-tabs-index) * (100% + var(--ui-tabs-gap))));
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: var(--control-height);
    padding: 12px 24px;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--color-text-primary);
    background: transparent;
    font: inherit;
    font-family: var(--font-manrope);
    font-size: var(--font-size-button);
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-ui), background-color var(--transition-ui);
}
.ui-button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}
.ui-button--primary, .ui-button--fade {
    border: var(--stroke-emphasis) solid var(--color-primary);
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    transition: background-color var(--transition-color), color var(--transition-color), border-color var(--transition-ui);
}
.ui-button--primary:is(:hover, :focus-visible, :active):not(:disabled),
.ui-button--fade:is(:hover, :focus-visible, :active):not(:disabled) {
    color: var(--color-primary);
    background-color: var(--color-surface);
}
.ui-button--pill { border-radius: 999px; }
.ui-button--capsule {
    border: var(--stroke-emphasis) solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    background-color: transparent;
    transition: background-color var(--transition-color), color var(--transition-color), border-color var(--transition-ui);
}
.ui-button--capsule:is(:hover, :focus-visible, :active):not(:disabled) {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
}
.ui-button--large {
    min-height: var(--control-height-large);
    font-size: var(--font-size-button-large);
    font-weight: 700;
}
.ui-button--outline-inverse {
    border: var(--stroke-emphasis) solid var(--color-text-inverse);
    color: var(--color-text-inverse);
    background-color: transparent;
    transition: background-color var(--transition-color), color var(--transition-color);
}
.ui-button--outline-inverse:is(:hover, :focus-visible, :active):not(:disabled) {
    color: var(--color-primary);
    background-color: var(--color-surface);
}
.ui-button--outline-inverse:focus-visible { outline-color: var(--color-text-inverse); }
/* Hero links that scroll to a section, shared by Home and Lens Preview. */
.ui-scroll-link {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-top: 28px; color: var(--scroll-link-color, var(--color-text-inverse));
    text-decoration: none; pointer-events: auto;
    font: 600 13px/1.4 var(--font-manrope); letter-spacing: .04em;
}
.ui-scroll-link__icon {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--scroll-link-stroke, rgb(255 255 255 / 80%)); border-radius: 50%;
    transition: background 200ms ease, transform 200ms ease;
}
.ui-scroll-link:is(:hover, :focus-visible) .ui-scroll-link__icon {
    background: var(--scroll-link-hover-bg, rgb(255 255 255 / 20%)); transform: translateY(3px);
}
.ui-scroll-link:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 24px; }
.ui-back-icon, .ui-forward-icon, .ui-down-icon {
    display: inline-block;
    flex-shrink: 0;
    transition: transform var(--transition-ui);
}
.ui-button:hover .ui-back-icon,
.ui-button:focus-visible .ui-back-icon { transform: translateX(-4px); }
.ui-button:hover .ui-forward-icon,
.ui-button:focus-visible .ui-forward-icon { transform: translateX(4px); }
.ui-down-icon { transform: rotate(90deg); transition: transform 280ms cubic-bezier(.22, 1, .36, 1); }
.ui-button:focus-visible .ui-down-icon { transform: translateY(4px) rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
    .ui-button:hover .ui-down-icon { transform: translateY(4px) rotate(90deg); }
}
.ui-button--secondary {
    border: var(--stroke-emphasis) solid var(--color-primary);
    color: var(--color-primary);
    background: var(--color-surface);
}
.ui-button--secondary:is(:hover, :focus-visible, :active):not(:disabled) { background: var(--color-surface-brand); }
.ui-button--text { color: var(--color-text-secondary); font-family: var(--font-inter); }
.ui-button--text:is(:hover, :focus-visible, :active):not(:disabled) {
    color: var(--color-primary);
    background: transparent;
}
.ui-button--link {
    color: var(--color-primary);
    background: transparent;
    font-family: var(--font-inter);
}
.ui-button--link:is(:hover, :focus-visible, :active):not(:disabled) { color: var(--color-primary); background: transparent; }
.ui-link, .ui-button--link { position: relative; text-decoration: none; }
.ui-link { display: inline-block; color: var(--color-primary); transition: color var(--transition-ui); }
.ui-link--muted { color: var(--color-text-secondary); font-weight: 400; }
.ui-link:is(:hover, :focus-visible, :active) { color: var(--color-primary); }
.ui-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ui-link::after, .ui-button--link::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 300ms ease;
}
.ui-link:is(:hover, :focus-visible, :active)::after,
.ui-button--link:is(:hover, :focus-visible, :active):not(:disabled)::after { transform: scaleX(1); }
.ui-button--small {
    min-height: 36px;
    padding: 6px 10px;
    gap: 8px;
    font-size: var(--font-size-label);
}
.ui-button:disabled {
    color: var(--color-text-muted);
    background: var(--color-border);
    cursor: not-allowed;
}
.ui-button--fade:disabled { border-color: var(--color-border); }
.ui-button--primary:disabled, .ui-button--secondary:disabled { border-color: var(--color-border); }
.ui-button--text:disabled, .ui-button--link:disabled { background: transparent; }
.ui-icon-button {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--icon-target-size);
    height: var(--icon-target-size);
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--icon-color, var(--color-text-secondary));
    background: transparent;
    cursor: pointer;
    transition: color var(--transition-ui);
}
.ui-icon-button:is(:hover, :focus-visible, :active, .is-active, [aria-current]:not([aria-current=false])):not(:disabled) { color: var(--color-primary); background: transparent; }
.ui-icon-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.ui-icon-button:disabled { color: var(--color-text-muted); cursor: not-allowed; }
/* Icon control labels: shared accessible name and visible hover/focus tooltip. */
.ui-tooltip { position: relative; }
.ui-tooltip::after {
    content: attr(aria-label); position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%;
    width: max-content; max-width: min(220px, calc(100vw - 48px)); padding: 7px 10px;
    border-radius: 8px; background: var(--color-text-primary); color: var(--color-text-inverse);
    font: 400 12px/1.5 var(--font-inter); white-space: normal; text-align: center;
    pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}
.ui-tooltip[data-tooltip-align=start]::after { left: 0; transform: translateY(4px); }
.ui-tooltip[data-tooltip-align=end]::after { left: auto; right: 0; transform: translateY(4px); }
.ui-tooltip:focus-visible:not(.is-tooltip-dismissed)::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ui-tooltip[data-tooltip-align]:focus-visible:not(.is-tooltip-dismissed)::after { transform: translateY(0); }
@media (hover: hover) {
    .ui-tooltip:hover:not(.is-tooltip-dismissed)::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    .ui-tooltip[data-tooltip-align]:hover:not(.is-tooltip-dismissed)::after { transform: translateY(0); }
}
@media (hover: none) {
    .ui-tooltip:focus:not(.is-tooltip-dismissed)::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    .ui-tooltip[data-tooltip-align]:focus:not(.is-tooltip-dismissed)::after { transform: translateY(0); }
}

/* Small, wrapping page hierarchy; the current page is text, not another link. */
.ui-breadcrumb { max-width: 100%; color: var(--color-text-secondary); font: 400 12px/1.7 var(--font-inter); }
.ui-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.ui-breadcrumb li { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; max-width: 100%; }
.ui-breadcrumb li > a, .ui-breadcrumb [aria-current=page] { min-width: 0; overflow-wrap: anywhere; }
.ui-breadcrumb a { color: inherit; text-decoration: none; transition: color var(--transition-ui); }
.ui-breadcrumb a:is(:hover, :focus-visible) { color: var(--color-primary); }
.ui-breadcrumb a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ui-breadcrumb [aria-current=page] { color: var(--color-text-primary); }
.ui-breadcrumb__separator { flex-shrink: 0; color: var(--color-text-muted); }

/* Shared Lens Preview/Custom workspace headings, help and informational copy. */
.ui-studio-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.ui-studio-heading > div { flex: 1; min-width: 0; }
.ui-studio-help { flex-shrink: 0; }
.ui-studio-guidance { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-control); background: var(--color-surface); text-align: left; }
.ui-studio-guidance > p { margin: 0; color: var(--color-text-secondary); font: 400 12px/1.8 var(--font-inter); }
.ui-studio-guidance > p + p { margin-top: 8px; }
.ui-studio-guidance > .ui-studio-guidance__muted { color: var(--color-text-muted); }
.ui-studio-reveal { opacity: 0; translate: 0 24px; transition: none; }
.ui-studio-reveal.is-revealed { opacity: 1; translate: none; transition: opacity 800ms cubic-bezier(.22, 1, .36, 1) var(--studio-reveal-delay, 0ms), translate 800ms cubic-bezier(.22, 1, .36, 1) var(--studio-reveal-delay, 0ms); }
@media (prefers-reduced-motion: reduce) {
    .ui-studio-reveal, .ui-studio-reveal.is-revealed { opacity: 1; translate: none; transition: none; }
}
@media print {
    .ui-studio-reveal, .ui-studio-reveal.is-revealed { opacity: 1; translate: none; transition: none; }
}

/* Native details works without JavaScript; ui-accordion.js adds reversible height motion. */
.ui-accordion { border-bottom: 1px solid var(--color-border); padding-bottom: 18px; }
.ui-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--icon-target-size);
    list-style: none;
    color: var(--color-text-primary);
    font-family: var(--font-manrope);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-ui);
}
.ui-accordion > summary::-webkit-details-marker { display: none; }
.ui-accordion > summary:is(:hover, :focus-visible, :active),
.ui-accordion[data-expanded=true] > summary,
.ui-accordion:not([data-expanded])[open] > summary { color: var(--color-primary); }
.ui-accordion > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.ui-accordion[open] > summary { margin-bottom: 18px; }
.ui-accordion__content { display: flow-root; }
.ui-accordion__chevron { transition: transform var(--transition-ui); }
.ui-accordion[data-expanded=true] > summary .ui-accordion__chevron,
.ui-accordion:not([data-expanded])[open] > summary .ui-accordion__chevron { transform: rotate(180deg); }

.ui-step {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: var(--color-text-secondary);
    font-family: var(--font-manrope);
    font-size: var(--font-size-step);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.ui-step__current { color: var(--color-primary); font-size: 1.2em; }
.ui-step__total { color: var(--color-text-muted); font-size: var(--font-size-body); }

.ui-label, .ui-field legend {
    display: block;
    margin-bottom: 8px;
    font-size: var(--font-size-label);
    font-weight: 600;
}
.ui-field__tag {
    margin-left: 5px;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    font-weight: 400;
}
.ui-input {
    width: 100%;
    min-height: 46px;
    padding: calc(12px - var(--stroke-default)) calc(13px - var(--stroke-default));
    border: var(--stroke-default) solid var(--color-border-input);
    border-radius: var(--radius-control);
    color: var(--color-text-primary);
    background: var(--color-surface);
    font: inherit;
    font-size: var(--font-size-label);
    transition: border-color var(--transition-ui);
}
.ui-input::placeholder { color: var(--color-text-placeholder); }
.ui-input:is(:focus, [aria-invalid=true]) {
    border-width: var(--stroke-emphasis);
    padding: calc(12px - var(--stroke-emphasis)) calc(13px - var(--stroke-emphasis));
}
.ui-input[aria-invalid=true] { border-color: var(--color-border-error); }
.ui-input:focus {
    border-color: var(--color-primary);
    outline: none;
}
.ui-search { position: relative; display: flex; min-width: 0; }
.ui-search .ui-input { padding-inline-end: calc(52px - var(--stroke-default)); }
.ui-search .ui-input:is(:focus, [aria-invalid=true]) { padding-inline-end: calc(52px - var(--stroke-emphasis)); }
.ui-search .ui-input::-webkit-search-cancel-button,
.ui-search .ui-input::-webkit-search-decoration { display: none; -webkit-appearance: none; appearance: none; }
.ui-search__clear { position: absolute; top: 50%; inset-inline-end: 2px; transform: translateY(-50%); }
.ui-search__clear[hidden] { display: none; }
.ui-password { position: relative; }
.ui-password .ui-input { padding-inline-end: calc(52px - var(--stroke-default)); }
.ui-password .ui-input:is(:focus, [aria-invalid=true]) { padding-inline-end: calc(52px - var(--stroke-emphasis)); }
.ui-password__toggle { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); }
.ui-password__toggle > span { display: inline-flex; }
.ui-password__toggle[hidden], .ui-password__toggle > span[hidden] { display: none; }
.ui-password .ui-input::-ms-reveal, .ui-password .ui-input::-ms-clear { display: none; }
.ui-phone { position: relative; }
.ui-phone__prefix {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: var(--font-size-label);
    line-height: 1.6;
    pointer-events: none;
}
.ui-phone:has(.ui-phone__prefix:not([hidden])) .ui-input {
    padding-inline-start: calc(52px - var(--stroke-default));
}
.ui-phone:has(.ui-phone__prefix:not([hidden])) .ui-input:is(:focus, [aria-invalid=true]) {
    padding-inline-start: calc(52px - var(--stroke-emphasis));
}
.ui-phone:has(.ui-phone__prefix[data-code-in-value]:not([hidden])) .ui-input {
    padding-inline-start: calc(26px - var(--stroke-default));
}
.ui-phone:has(.ui-phone__prefix[data-code-in-value]:not([hidden])) .ui-input:is(:focus, [aria-invalid=true]) {
    padding-inline-start: calc(26px - var(--stroke-emphasis));
}
.ui-field__error {
    margin: 6px 0 0;
    color: var(--color-text-error);
    font-size: var(--font-size-small);
}
.ui-help {
    margin: 0 0 24px;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    line-height: 1.8;
}
.ui-notice {
    margin-bottom: 24px;
    padding: 16px;
    border-radius: var(--radius-control);
    color: var(--color-text-secondary);
    background: var(--color-surface-brand);
    font-size: var(--font-size-small);
}
.ui-notice strong { color: var(--color-text-primary); }
.ui-notice p { margin: 6px 0 0; line-height: 1.8; }
.ui-eyebrow {
    margin: 0 0 16px;
    color: var(--color-primary);
    font-family: var(--font-manrope);
    font-size: var(--font-size-small);
    font-weight: 700;
    letter-spacing: .16em;
}
/* Shared confirmation and status popup. */
.ui-dialog-open { overflow: hidden; }
.ui-dialog { box-sizing: border-box; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); color: var(--color-text-primary); background: var(--color-surface); font-family: var(--font-inter); overflow-y: auto; }
.ui-dialog::backdrop { background: var(--color-overlay); }
.ui-dialog[open] { animation: ui-dialog-appear 180ms ease-out; }
.ui-dialog__close { position: absolute; top: 8px; right: 8px; }
.ui-dialog > .ui-eyebrow { margin-top: 12px; padding-right: 20px; }
.ui-dialog__title { margin: 0 0 20px; font-family: var(--font-manrope); font-size: 24px; line-height: 1.4; letter-spacing: -.03em; }
.ui-dialog__description { color: var(--color-text-secondary); font-size: 14px; line-height: 1.8; margin: 0 0 20px; }
.ui-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ui-dialog__actions .ui-button { flex: 1 1 140px; margin-top: 0; }
.ui-dialog__actions [data-dialog-close][hidden] { display: none; }
.ui-dialog--center { text-align: center; }
.ui-dialog--center > .ui-eyebrow { padding: 0; }
.ui-dialog--center > .ui-button { width: 100%; margin-top: 8px; }
.ui-dialog__mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 16px auto 24px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-inverse); }
.ui-dialog__mark .ui-icon { --icon-size: 32px; }
@keyframes ui-dialog-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (width < 768px) {
    .ui-button { font-size: var(--font-size-button-mobile); padding-inline: 16px; }
    .ui-button--large { font-size: var(--font-size-button-large-mobile); }
    .ui-button--small { font-size: var(--font-size-button-small-mobile); padding-inline: 8px; }
    .ui-dialog { padding: 28px 20px; }
    .ui-dialog__title { font-size: 22px; }
    .ui-dialog__actions .ui-button { font-size: var(--font-size-button-mobile); padding-inline: 10px; }
    .ui-dialog__actions .ui-button--large { font-size: var(--font-size-button); }
}
/* Floating lens-shaped actions share one lower-right resting position. */
.site-floating {
    --floating-width: 64px;
    --floating-height: 56px;
    --floating-gap: 12px;
    --floating-edge: 24px;
    --floating-stack-height: var(--floating-height);
    --floating-bottom: max(var(--floating-edge), env(safe-area-inset-bottom));
    position: fixed; z-index: 20;
    right: max(var(--floating-edge), env(safe-area-inset-right));
    bottom: var(--floating-bottom);
    width: var(--floating-width); height: var(--floating-height);
}
.site-floating__button {
    position: absolute; inset: 0; display: grid; place-items: center;
    width: 100%; height: 100%; padding: 0; border: 0;
    border-radius: 50% 50% 48% 48% / 44% 44% 56% 56%;
    background: var(--color-surface); color: var(--color-primary);
    box-shadow: inset 0 -2px 4px rgb(234 147 156 / 12%), 0 6px 24px rgb(22 22 22 / 12%);
    cursor: pointer; transition: transform 280ms ease, opacity 200ms ease, box-shadow var(--transition-ui);
}
.site-floating__button::after {
    content: ''; position: absolute; inset: 7px; border-radius: 50%;
    border-bottom: 1px solid rgb(234 147 156 / 18%); pointer-events: none;
}
.site-floating__button .ui-icon { width: 24px; height: 24px; }
.site-floating__chat-icon { position: absolute; display: grid; place-items: center; transition: opacity 240ms ease, transform 320ms cubic-bezier(.22, .68, .2, 1); }
.site-floating__chat-icon--message { opacity: 1; transform: rotate(0) scale(1); }
.site-floating__chat-icon--close { opacity: 0; transform: rotate(-90deg) scale(.55); }
.site-floating__chat[aria-expanded="true"] .site-floating__chat-icon--message { opacity: 0; transform: rotate(90deg) scale(.55); }
.site-floating__chat[aria-expanded="true"] .site-floating__chat-icon--close { opacity: 1; transform: rotate(0) scale(1); }
.site-floating__button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.site-floating__button:not(:disabled):hover { box-shadow: inset 0 -2px 4px rgb(234 147 156 / 12%), 0 8px 28px rgb(22 22 22 / 18%); }
.site-floating__button:disabled { cursor: default; }
.site-floating__top { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
.site-floating.is-scrolled .site-floating__top { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.site-floating.is-scrolled .site-floating__chat { transform: translateY(calc(-100% - var(--floating-gap))); }
.site-floating.is-scrolled { --floating-stack-height: calc(var(--floating-height) * 2 + var(--floating-gap)); }
.site-floating:has(> .site-chat[open]) { z-index: 40; }
/* Nonmodal chat stays above its launcher while the page remains usable. */
.site-chat {
    position: absolute; inset: auto 0 calc(var(--floating-stack-height) + var(--floating-gap)) auto;
    box-sizing: border-box; margin: 0; padding: 0; border: 0;
    width: min(400px, calc(100vw - max(var(--floating-edge), env(safe-area-inset-right)) - 16px));
    height: min(580px, calc(100dvh - var(--floating-bottom) - var(--floating-stack-height) - var(--floating-gap) - 16px));
    max-width: none; max-height: none; border-radius: 20px; overflow: hidden;
    background: var(--color-surface-brand); color: var(--color-text-primary);
    box-shadow: var(--shadow-popover); font-family: var(--font-inter);
    transition: bottom 280ms ease;
}
.site-chat[open] { display: flex; flex-direction: column; animation: site-chat-appear 200ms ease-out; }
.site-chat__header { display: flex; align-items: center; flex-shrink: 0; gap: 12px; padding: 16px; background: var(--color-surface); }
.site-chat__avatar { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-inverse); }
.site-chat__title { display: flex; flex-direction: column; gap: 2px; margin: 0; font-family: var(--font-manrope); font-size: 15px; line-height: 1.5; }
.site-chat__title > span:first-child { color: var(--color-primary); }
.site-chat__title > span:last-child { color: var(--color-text-secondary); font-size: 12px; font-weight: 500; }
.site-chat__close { flex-shrink: 0; margin-left: auto; }
.site-chat__body { min-height: 0; flex: 1; padding: 24px 20px; overflow-y: auto; overscroll-behavior: contain; }
.site-chat__message { padding: 18px; border-radius: 4px 16px 16px; background: var(--color-surface); overflow-wrap: anywhere; }
.site-chat__message h3 { margin: 0 0 10px; font-family: var(--font-manrope); font-size: 17px; line-height: 1.5; }
.site-chat__message p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.site-chat__reset { margin-left: auto; }
.site-chat__close { margin-left: 0; }
.site-chat__body { display: flex; flex-direction: column; gap: 14px; padding: 20px 16px; }
.site-chat__message { flex: none; }
.site-chat__message--arriving { animation: site-chat-reply-appear 650ms cubic-bezier(.22, 1, .36, 1) both; }
.site-chat__message--user { align-self: flex-end; max-width: 88%; border-radius: 16px 4px 16px 16px; background: var(--color-primary); }
.site-chat__message--user p { color: var(--color-text-inverse); white-space: pre-wrap; }
.site-chat__product { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; color: inherit; text-decoration: none; }
.site-chat__product img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; flex: none; }
.site-chat__product > span { display: grid; gap: 5px; min-width: 0; }
.site-chat__product strong { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.site-chat__product small { font-size: 11px; line-height: 1.7; color: var(--color-text-secondary); }
.site-chat__price { color: var(--color-text-accent); font-size: 13px; font-weight: 700; }
.site-chat__link { display: inline-flex; align-items: center; gap: 6px; margin: 12px 12px 0 0; padding-block: 4px; color: var(--color-text-accent); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.site-chat__link-icon { --icon-size: 15px; flex-shrink: 0; }
.site-chat__link:is(:hover, :focus-visible) { color: var(--color-text-primary); text-decoration-thickness: 2px; }
.site-chat__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
.site-chat__product:is(:hover, :focus-visible) { border-color: var(--color-primary); background: var(--color-surface-brand); }
.site-chat__suggestions { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; flex-shrink: 0; }
.site-chat__suggestions button { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer; }
.site-chat__status { margin: 0; padding: 0 16px 10px; color: var(--color-text-secondary); font-size: 12px; }
.site-chat__loading { display: grid; place-items: center; flex: none; align-self: stretch; min-height: 80px; }
.site-chat__loading::before { content: ''; width: 32px; height: 32px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: site-chat-spin 800ms linear infinite; }
.site-chat__form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--color-surface); flex-shrink: 0; border-top: 1px solid var(--color-border); }
.site-chat__input-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-chat__input { flex: 1; min-width: 0; min-height: 44px; max-height: 104px; resize: none; padding: 10px 12px; font-size: 13px; line-height: 1.6; }
.site-chat__send { width: 44px; min-height: 44px; padding: 10px; border-radius: 50%; flex: none; }
.site-chat__send:disabled, .site-chat__suggestions button:disabled { opacity: .55; cursor: wait; }
.site-chat__product:focus-visible, .site-chat__suggestions button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@keyframes site-chat-appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes site-chat-reply-appear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes site-chat-spin { to { transform: rotate(360deg); } }
@media (width < 768px) {
    .site-floating { --floating-width: 56px; --floating-height: 48px; --floating-edge: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-tooltip::after { transition: none; }
    .ui-scroll-link__icon { transition: none; }
    .ui-scroll-link:is(:hover, :focus-visible) .ui-scroll-link__icon { transform: none; }
    .site-floating__button { transition: none; }
    .site-floating__chat-icon { transition: none; }
    .site-chat { transition: none; }
    .site-chat[open] { animation: none; }
    .site-chat__message--arriving, .site-chat__loading::before { animation: none; }
    .ui-dialog[open] { animation: none; }
    .ui-button, .ui-input, .ui-menu-link, .ui-icon-button, .ui-link,
    .ui-link::after, .ui-button--link::after, .ui-tabs::after,
    .ui-accordion > summary, .ui-accordion__chevron { transition: none; }
    .ui-back-icon, .ui-forward-icon, .ui-down-icon { transition: none; }
    .ui-button:hover .ui-back-icon,
    .ui-button:focus-visible .ui-back-icon,
    .ui-button:hover .ui-forward-icon,
    .ui-button:focus-visible .ui-forward-icon { transform: none; }
    .ui-button:hover .ui-down-icon,
    .ui-button:focus-visible .ui-down-icon { transform: rotate(90deg); }
    .ui-check-draw path { animation: none; stroke-dashoffset: 0; }
}