.floating-chat {
    --chat-safe-top: env(safe-area-inset-top, 0px);
    --chat-safe-bottom: env(safe-area-inset-bottom, 0px);
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--storefront-bottom-offset, 0px) + var(--chat-privacy-offset, 0px));
    z-index: 1060;
    max-width: calc(100vw - 32px);
    color: var(--text-color);
}
.floating-chat[data-chat-positioned] { top:var(--chat-drag-top); bottom:auto; }
.floating-chat--right { right: max(16px, env(safe-area-inset-right, 0px)); }
.floating-chat--left { left: max(16px, env(safe-area-inset-left, 0px)); }
.floating-chat[hidden], .floating-chat [hidden] { display: none !important; }
.floating-chat-toggle {
    cursor:grab;
    touch-action:none;
    user-select:none;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 28px;
    padding: 14px 20px;
    background: var(--customer-btn-color);
    color: var(--on-button-color);
    font-weight: 600;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--text-color) 18%, transparent);
}
.floating-chat--dragging .floating-chat-toggle { cursor:grabbing; }
.floating-chat-toggle:hover { background: var(--customer-btn-hover-color); color: var(--on-button-hover-color); }
.floating-chat-panel {
    position: absolute;
    bottom: calc(100% + 12px);
    width: 320px;
    max-width: calc(100vw - 32px);
    max-height: var(--chat-panel-max-height, calc(100dvh - 160px - var(--storefront-bottom-offset, 0px) - var(--chat-privacy-offset, 0px)));
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--customer-bg-color);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--text-color) 15%, transparent);
    overflow-wrap: anywhere;
}
.floating-chat[data-chat-panel-side=below] .floating-chat-panel { top:calc(100% + 12px); bottom:auto; }
.floating-chat--right .floating-chat-panel { right: 0; }
.floating-chat--left .floating-chat-panel { left: 0; }
.floating-chat-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.floating-chat-heading h2 { font-size: 18px; font-weight: 600; margin: 4px 0 12px; }
.floating-chat-panel p { font-size: 14px; margin-bottom: 16px; }
.floating-chat-close { background: transparent; border: 0; padding: 4px; color: var(--text-color); display: flex; border-radius: 6px; }
.floating-chat-channels { display: grid; gap: 10px; }
.floating-chat-channel {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border: 1px solid var(--border-color); border-radius: 10px;
    color: var(--customer-link-color); text-decoration: none;
    background: var(--customer-bg-color); text-align: left; font: inherit; width: 100%;
}
.floating-chat-channel[aria-busy="true"] { cursor: wait; opacity: .7; }
.floating-chat--live-open .floating-chat-toggle { visibility: hidden; }
.floating-chat-panel .floating-chat-status { margin: 12px 0 0; font-size: 12px; }
.floating-chat-status:empty { display: none; }
.floating-chat-channel:hover { color: var(--customer-link-hover-color); border-color: var(--primary-color); }
.floating-chat-channel > span:nth-child(2) { flex: 1; font-weight: 600; }
.floating-chat-channel small { display: block; font-size: 11px; font-weight: 400; color: var(--text-color); }
.floating-chat button:focus-visible, .floating-chat a:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
@media (max-width: 767.98px) { .floating-chat--desktop-only { display: none; } }
@media (min-width: 768px) { .floating-chat--mobile-only { display: none; } }