/**
 * 客服服务前端浮层 — Classic chrome 对齐（--weline-chrome-*）+ Weline 控件契约
 */
@layer page {
    .customer-service-widget,
    .customer-service-widget--classic {
        --cs-accent: var(--weline-chrome-primary);
        --cs-accent-hover: var(--weline-chrome-primary-dark);
        --cs-on-accent: var(--color-bg-dark-secondary);
        --cs-header-bg: var(--weline-chrome-bg-dark);
        --cs-header-text: var(--weline-chrome-text-light);
        --cs-header-text-muted: var(--weline-chrome-text-light-secondary);
        --cs-surface: var(--weline-chrome-bg-primary);
        --cs-surface-muted: var(--weline-chrome-bg-secondary);
        --cs-canvas: var(--weline-chrome-body-bg);
        --cs-text: var(--weline-chrome-body-text);
        --cs-text-muted: var(--weline-chrome-body-text-secondary);
        --cs-text-subtle: var(--weline-chrome-text-muted);
        --cs-border: var(--weline-chrome-border-default);
        --cs-border-strong: var(--color-border-emphasis);
        --cs-focus: var(--weline-chrome-border-focus, var(--cs-accent));
        --cs-success: var(--color-success);
        --cs-info: var(--color-info);
        --cs-radius-window: 8px;
        --cs-radius-control: 4px;
        --cs-shadow: 0 4px 16px var(--color-overlay-medium);
        --cs-shadow-lg: 0 8px 28px var(--color-overlay-dark);
    }

    .cs-icon {
        display: inline-block;
        vertical-align: middle;
        flex-shrink: 0;
    }

    /* Outside float-layer (legacy). Inside #w-storefront-float-layer Theme CSS
     * forces relative; sticky clearance is owned by the layer padding. */
    .customer-service-widget {
        position: fixed;
        bottom: calc(
            var(--weline-space-5)
            + var(--weline-safe-area-bottom)
        );
        right: calc(var(--weline-space-5) + var(--weline-safe-area-right));
        z-index: var(--weline-z-overlay);
        font-family: var(--weline-font-sans);
        color: var(--cs-text);
        /* Slot-anchored chat panel must paint outside the FAB box. */
        overflow: visible;
        transition: opacity var(--weline-motion-normal) ease, visibility var(--weline-motion-normal) ease, transform var(--weline-motion-normal) ease, bottom var(--weline-motion-normal) ease;
    }

    /* Legacy viewport-fixed path. Inside float-layer, Theme end-slot CSS lifts instead. */
    body:has(.weline-social-quick-bar:not([hidden])) .customer-service-widget:not(.is-open) {
        bottom: calc(
            var(--weline-space-5)
            + var(--weline-safe-area-bottom)
            + 10.5rem
        );
    }

    /* 未读或会话打开时盖过社交登录条（其 z-index 为 2147483000） */
    .customer-service-widget.has-unread,
    .customer-service-widget:has(.cs-chat-button.has-unread),
    .customer-service-widget.is-open {
        z-index: 2147483001;
    }

    .customer-service-widget.customer-service-widget--mini-cart-open {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(var(--weline-space-2));
    }

    /* 有未读时即使迷你购物车打开也保持可见提示 */
    .customer-service-widget.customer-service-widget--mini-cart-open.has-unread {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .cs-chat-button {
        width: 3.75rem;
        height: 3.75rem;
        background: var(--cs-header-bg);
        border: var(--border-width-thin) solid color-mix(in srgb, var(--cs-header-text) 12%, transparent);
        border-radius: var(--weline-radius-round);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        /* 勿把 transform 放进 transition，否则会冲掉 has-unread 呼吸动画 */
        transition: box-shadow var(--weline-motion-normal) ease, background-color var(--weline-motion-fast) ease;
        position: relative;
        color: var(--cs-header-text);
        transform-origin: center center;
        will-change: transform;
    }

    .cs-chat-button .cs-icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .cs-chat-button:hover {
        transform: scale(1.06);
        background: var(--weline-chrome-bg-dark-secondary);
        box-shadow: var(--cs-shadow-lg);
    }

    /* 有未读消息：明确呼吸 + 光晕，必须看得见「有动作」 */
    .cs-chat-button.has-unread {
        animation: cs-chat-button-breathe 1.15s ease-in-out infinite;
        transition: box-shadow var(--weline-motion-normal) ease, background-color var(--weline-motion-fast) ease;
    }

    .cs-chat-button.has-unread:hover {
        animation-play-state: running;
    }

    @keyframes cs-chat-button-breathe {
        0%,
        100% {
            transform: scale(1);
            box-shadow: var(--cs-shadow), 0 0 0 0 color-mix(in srgb, var(--weline-theme-danger) 45%, transparent);
        }
        50% {
            transform: scale(1.18);
            box-shadow: var(--weline-shadow-lg);
        }
    }

    .cs-presence-dot {
        position: absolute;
        top: 0.15rem;
        inset-inline-end: 0.15rem;
        width: 0.7rem;
        height: 0.7rem;
        border-radius: var(--weline-radius-round);
        background: var(--cs-success);
        border: var(--border-width-medium) solid var(--cs-header-bg);
        box-shadow: var(--focus-ring);
        pointer-events: none;
        z-index: 2;
    }.cs-presence-dot[hidden]{
        display: none;
    }

    .cs-badge {
        position: absolute;
        top: -0.3rem;
        right: -0.3rem;
        background: var(--weline-theme-danger);
        color: var(--weline-theme-on-danger);
        border-radius: var(--weline-radius-round);
        min-width: 1.25rem;
        height: 1.25rem;
        padding-inline: var(--spacing-0_2);
        display: none;
        align-items: center;
        justify-content: center;
        font-size: var(--weline-font-size-xs);
        font-weight: 700;
        line-height: 1;
        z-index: 3;
    }.cs-badge.is-visible.is-visible{
        display: flex;
    }

    @media (prefers-reduced-motion: reduce) {
        .cs-chat-button.has-unread {
            animation: cs-chat-button-breathe-reduced 1.6s ease-in-out infinite;
        }
        @keyframes cs-chat-button-breathe-reduced {
            0%,
            100% {
                box-shadow: var(--cs-shadow), 0 0 0 0 color-mix(in srgb, var(--weline-theme-danger) 50%, transparent);
            }
            50% {
                box-shadow: var(--weline-shadow-lg);
            }
        }
    }

    .cs-status-label {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        font-size: var(--weline-font-size-xs);
        padding: var(--spacing-0_5) var(--weline-space-2);
        border-radius: var(--cs-radius-control);
        margin: 0;
        font-weight: 550;
        line-height: 1.35;
        background-color: color-mix(in srgb, var(--cs-text-subtle) 18%, transparent);
        color: var(--cs-text-subtle);
        transition: background-color var(--weline-motion-normal) ease, color var(--weline-motion-normal) ease;
        white-space: nowrap;
    }

    .cs-status-label.cs-status-online {
        background-color: color-mix(in srgb, var(--cs-success) 18%, transparent);
        color: var(--cs-success);
    }

    .cs-status-label.cs-status-ai {
        background-color: color-mix(in srgb, var(--cs-info) 18%, transparent);
        color: var(--cs-info);
    }

    .cs-status-label.cs-status-offline {
        background-color: color-mix(in srgb, var(--cs-text-subtle) 18%, transparent);
        color: var(--cs-text-subtle);
    }

    .cs-chat-window {
        position: absolute;
        bottom: 5rem;
        right: 0;
        left: auto;
        width: min(23.75rem, calc(100vw - 2.5rem));
        height: min(37.5rem, calc(100dvh - 6.5rem));
        max-width: calc(100vw - 2.5rem);
        max-height: min(80vh, calc(100dvh - 6.5rem));
        background: var(--cs-surface);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border);
        border-radius: var(--cs-radius-window);
        box-shadow: var(--cs-shadow-lg);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .cs-chat-header {
        background: var(--cs-header-bg);
        color: var(--cs-header-text);
        padding: var(--weline-space-3) var(--weline-space-4);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--weline-space-3);
    }

    .cs-chat-title {
        display: flex;
        align-items: flex-start;
        gap: var(--weline-space-3);
        font-weight: 650;
        font-size: var(--weline-font-size-md);
        min-width: 0;
        flex: 1;
    }

    .cs-chat-title > .cs-icon {
        margin-top: var(--spacing-0_5);
    }

    .cs-chat-title-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--weline-space-1);
        min-width: 0;
    }

    #cs-title-text {
        display: block;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .cs-chat-header .cs-status-label {
        background-color: color-mix(in srgb, var(--cs-header-text) 14%, transparent);
        color: var(--cs-header-text-muted);
    }

    .cs-chat-header .cs-status-label.cs-status-online {
        background-color: color-mix(in srgb, var(--cs-success) 24%, transparent);
        color: var(--color-success-bg-subtle);
    }

    .cs-chat-header .cs-status-label.cs-status-ai {
        background-color: color-mix(in srgb, var(--cs-info) 24%, transparent);
        color: var(--color-info-bg-subtle);
    }

    .cs-chat-header .cs-status-label.cs-status-offline {
        background-color: color-mix(in srgb, var(--cs-header-text) 12%, transparent);
        color: var(--cs-header-text-muted);
    }

    .cs-chat-actions {
        display: flex;
        gap: var(--weline-space-2);
        flex-shrink: 0;
        align-self: flex-start;
    }

    .cs-chat-header .cs-btn-icon,
    .cs-chat-header .w-button.cs-btn-icon {
        background: color-mix(in srgb, var(--cs-header-text) 12%, transparent);
        border-color: transparent;
        color: var(--cs-header-text);
        width: 2rem;
        height: 2rem;
        min-height: var(--control-height-sm);
        min-inline-size: 2rem;
        inline-size: 2rem;
        padding: 0;
        border-radius: var(--cs-radius-control);
    }

    .cs-chat-header .cs-btn-icon:hover,
    .cs-chat-header .w-button.cs-btn-icon:hover {
        background: color-mix(in srgb, var(--cs-header-text) 20%, transparent);
        color: var(--cs-header-text);
    }

    .cs-btn-icon {
        background: color-mix(in srgb, var(--cs-header-text) 12%, transparent);
        border: var(--border-width-thin) solid transparent;
        color: var(--cs-header-text);
        width: 2rem;
        height: 2rem;
        min-height: var(--control-height-sm);
        border-radius: var(--cs-radius-control);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background-color var(--weline-motion-fast) ease;
    }

    .cs-btn-icon:hover {
        background: color-mix(in srgb, var(--cs-header-text) 20%, transparent);
    }

    .cs-settings-panel {
        background: var(--cs-surface-muted);
        border-bottom: var(--border-width-thin) solid var(--cs-border);
        padding: var(--weline-space-3) var(--weline-space-4);
    }

    .cs-settings-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--weline-space-3);
        margin-bottom: var(--weline-space-3);
    }

    .cs-settings-item:last-child {
        margin-bottom: 0;
    }

    .cs-settings-item label {
        display: flex;
        align-items: center;
        gap: var(--weline-space-2);
        font-size: var(--weline-font-size-sm);
        color: var(--cs-text-muted);
        font-weight: 550;
    }

    .cs-settings-item .w-select,
    .cs-settings-item select {
        min-width: 7.5rem;
        width: auto;
        max-width: 55%;
        min-height: var(--weline-control-height-sm);
        padding-block: var(--weline-space-1);
        font-size: var(--weline-font-size-sm);
        background: var(--cs-surface);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border-strong);
        border-radius: var(--cs-radius-control);
    }

    .cs-chat-body {
        flex: 1;
        overflow-y: auto;
        padding: var(--weline-space-5);
        background: var(--cs-canvas);
    }

    .cs-welcome-message {
        text-align: center;
        color: var(--cs-text-muted);
        padding: var(--weline-space-5);
    }

    .cs-welcome-message p {
        margin-block: 0 var(--weline-space-2);
    }

    .cs-welcome-message p:last-child {
        margin-block-end: 0;
    }

    .cs-chat-title-copy {
        display: flex;
        flex-direction: column;
        gap: var(--weline-space-1);
        min-width: 0;
    }

    .cs-identity-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--weline-space-2);
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--cs-text-muted);
        font: inherit;
        font-size: var(--weline-font-size-xs);
        line-height: 1.2;
        text-align: left;
        cursor: default;
    }

    .cs-identity-chip.is-editable {
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
        color: var(--cs-text);
    }

    .cs-identity-avatar {
        width: 1.125rem;
        height: 1.125rem;
        border-radius: var(--radius-full);
        object-fit: cover;
        flex: 0 0 auto;
    }

    .cs-identity-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cs-day-separator {
        align-self: center;
        margin: var(--weline-space-3) 0;
        padding: var(--weline-space-1) var(--weline-space-3);
        border-radius: var(--radius-full);
        background: var(--cs-surface-muted);
        color: var(--cs-text-muted);
        font-size: var(--weline-font-size-xs);
    }

    .cs-message.system {
        align-items: center;
    }

    .cs-message.system .cs-message-bubble {
        max-width: 90%;
        background: transparent;
        color: var(--cs-text-muted);
        border: var(--border-width-thin) dashed var(--weline-theme-border);
        text-align: center;
        font-size: var(--font-size-13);
    }

    .cs-message-meta {
        display: inline-flex;
        align-items: center;
        gap: var(--weline-space-2);
        margin-bottom: var(--weline-space-1);
        max-width: 75%;
    }

    .cs-message.customer .cs-message-meta {
        flex-direction: row-reverse;
    }

    .cs-message-avatar {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: var(--radius-full);
        object-fit: cover;
    }

    .cs-message-sender {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--cs-text-muted);
        font: inherit;
        font-size: var(--weline-font-size-xs);
        cursor: default;
    }

    button.cs-message-sender {
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
        color: var(--cs-text);
    }

    .cs-message {
        margin-bottom: var(--weline-space-4);
        display: flex;
        flex-direction: column;
    }

    .cs-message.customer {
        align-items: flex-end;
    }

    .cs-message.agent {
        align-items: flex-start;
    }

    .cs-message-bubble {
        max-width: 75%;
        padding: var(--weline-space-3) var(--weline-space-4);
        border-radius: var(--cs-radius-window);
        word-wrap: break-word;
        position: relative;
    }

    .cs-message.customer .cs-message-bubble {
        background: var(--cs-surface-muted);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border);
        border-bottom-right-radius: var(--cs-radius-control);
    }

    .cs-message.agent .cs-message-bubble {
        background: var(--cs-surface);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border);
        border-bottom-left-radius: var(--cs-radius-control);
    }

    .cs-message-image {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: var(--cs-radius-control);
        background: var(--cs-surface-muted);
    }

    .cs-message-image.is-broken {
        min-width: 8rem;
        min-height: 5rem;
        border: var(--border-width-thin) dashed var(--cs-border);
    }

    .cs-message-time {
        font-size: var(--weline-font-size-xs);
        color: var(--cs-text-subtle);
        margin-top: var(--weline-space-1);
        padding: 0 var(--weline-space-1);
    }

    .cs-message-original {
        font-size: var(--weline-font-size-sm);
        opacity: 0.9;
        margin-bottom: var(--weline-space-2);
        padding-bottom: var(--weline-space-2);
        border-bottom: var(--border-width-thin) dashed color-mix(in srgb, var(--weline-theme-border-strong) 70%, transparent);
    }

    .cs-message-translated {
        font-size: var(--weline-font-size-md);
    }

    .cs-message-label {
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        opacity: 0.65;
        margin-bottom: var(--spacing-0_5);
        display: block;
    }

    .cs-message.customer .cs-message-original {
        border-bottom-color: color-mix(in srgb, var(--cs-border-strong) 70%, transparent);
    }

    .cs-lang-tag {
        display: inline-block;
        font-size: var(--font-size-xs);
        padding: var(--spacing-0_5) var(--spacing-1_5);
        border-radius: var(--cs-radius-control);
        margin-left: var(--weline-space-2);
        background: color-mix(in srgb, var(--cs-text) 8%, transparent);
    }

    .cs-message.customer .cs-lang-tag {
        background: color-mix(in srgb, var(--cs-text) 10%, transparent);
    }

    .cs-chat-footer {
        border-top: var(--border-width-thin) solid var(--cs-border);
        padding: var(--weline-space-4);
        background: var(--cs-surface);
    }

    .cs-language-selector {
        margin-bottom: var(--weline-space-3);
    }

    .cs-language-selector .w-select,
    .cs-language-selector select {
        width: 100%;
        background: var(--cs-surface);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border-strong);
        border-radius: var(--cs-radius-control);
    }

    .cs-input-area {
        display: flex;
        gap: var(--weline-space-3);
        align-items: flex-end;
    }

    .cs-composer-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: var(--weline-space-2);
        margin-bottom: var(--weline-space-2);
    }

    .cs-composer-panel {
        margin-bottom: var(--weline-space-2);
        padding: var(--weline-space-2);
        border: var(--border-width-thin) solid var(--cs-border);
        border-radius: var(--cs-radius-control, var(--weline-radius-md));
        background: var(--cs-surface-muted);
        max-height: 8rem;
        overflow: auto;
    }.cs-composer-panel[hidden]{
        display: none;
    }

    /* WeChat-style: select on live page first */
    body.cs-shot-crop-open {
        overflow: hidden;
    }

    .cs-shot-crop {
        position: fixed;
        inset: 0;
        z-index: 10060;
        display: flex;
        flex-direction: column;
        background: transparent;
        color: var(--weline-theme-color-on-inverse);
    }

    .cs-shot-crop--live .cs-shot-crop__stage {
        background: var(--color-bg-dark);
    }

    .cs-shot-crop__stage {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        cursor: crosshair;
        touch-action: none;
        user-select: none;
    }

    .cs-shot-crop__rect {
        position: absolute;
        box-sizing: border-box;
        border: var(--border-width-thin) solid var(--color-border-soft);
        box-shadow: var(--weline-shadow-md);
        pointer-events: none;
    }

    .cs-shot-crop__hint {
        margin: 0;
        padding: var(--weline-theme-space-2) var(--weline-theme-space-4);
        text-align: center;
        font-size: var(--weline-theme-font-size-sm);
        color: var(--color-on-dark-92);
        background: var(--color-bg-dark);
    }

    .cs-shot-crop__bar {
        display: flex;
        justify-content: center;
        gap: var(--weline-theme-space-3);
        padding: var(--weline-theme-space-3) var(--weline-theme-space-4)
            calc(var(--weline-theme-space-4) + env(safe-area-inset-bottom, 0px));
        background: var(--color-bg-dark);
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .cs-shot-crop__bar .w-button,
    .cs-shot-crop__btn {
        min-width: 4.5rem;
        opacity: 0.55;
        transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .cs-shot-crop__confirm:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .cs-shot-crop--ready .cs-shot-crop__bar {
        background: var(--color-bg-dark);
        box-shadow: var(--weline-shadow-md);
    }

    .cs-shot-crop--ready .cs-shot-crop__btn {
        opacity: 1;
    }

    .cs-shot-crop--ready [data-cs-shot-cancel],
    .cs-shot-crop--ready [data-cs-shot-reset] {
        color: var(--color-text-light);
        border: var(--border-width-thin) solid var(--color-on-dark-55);
        background: var(--color-on-dark-15);
    }

    .cs-shot-crop--ready .cs-shot-crop__confirm:not(:disabled),
    .cs-shot-crop--ready [data-cs-shot-confirm]:not(:disabled) {
        opacity: 1;
        transform: scale(1.06);
        color: var(--color-text-light);
        background: var(--weline-theme-color-brand, var(--w-color-brand));
        border: var(--border-width-thin) solid var(--color-on-dark-92);
        box-shadow: var(--weline-shadow-lg);
        animation: cs-shot-confirm-pulse 1.4s ease-in-out infinite;
    }

    .cs-shot-crop--busy .cs-shot-crop__stage {
        cursor: wait;
    }

    .cs-shot-crop--busy .cs-shot-crop__confirm,
    .cs-shot-crop--busy [data-cs-shot-confirm] {
        animation: none;
        transform: none;
        opacity: 1;
    }

    @keyframes cs-shot-confirm-pulse {
        0%, 100% { box-shadow: var(--weline-shadow-lg); }
        50% { box-shadow: var(--weline-shadow-lg); }
    }

    .cs-emoji-item {
        border: 0;
        background: transparent;
        font-size: var(--weline-font-size-xl);
        line-height: 1.4;
        cursor: pointer;
        padding: var(--spacing-0_5);
    }

    .cs-guest-send-gate {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--weline-space-2) var(--weline-space-3);
        margin: 0 0 var(--weline-space-2);
        padding: var(--weline-space-2) var(--weline-space-3);
        border: var(--border-width-thin) solid var(--cs-border);
        border-radius: var(--cs-radius-control);
        background: var(--cs-surface-muted);
        color: var(--cs-text-muted);
    }.cs-guest-send-gate[hidden]{
        display: none;
    }

    .cs-guest-send-gate__text {
        flex: 1 1 12rem;
        margin: 0;
        font-size: var(--weline-font-size-sm);
        line-height: var(--weline-line-height);
        color: var(--cs-text);
    }

    .cs-guest-send-gate__action {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* 显式 background/color：避免 color-scheme:dark 下原生控件黑底白字 */
    .cs-message-input,
    .cs-chat-footer .w-textarea,
    textarea.cs-message-input {
        flex: 1;
        width: auto;
        min-height: var(--control-height-lg);
        max-height: 7.5rem;
        height: auto;
        padding: var(--weline-space-2) var(--weline-space-3);
        border: var(--border-width-thin) solid var(--cs-border-strong);
        border-radius: var(--cs-radius-control);
        font-size: var(--weline-font-size-sm);
        line-height: var(--weline-line-height);
        resize: none;
        font-family: inherit;
        background: var(--cs-surface);
        color: var(--cs-text);
        color-scheme: inherit;
        box-shadow: none;
    }

    .cs-message-input::placeholder,
    .cs-chat-footer .w-textarea::placeholder {
        color: var(--cs-text-subtle);
    }

    .cs-message-input:hover,
    .cs-chat-footer .w-textarea:hover {
        border-color: var(--cs-border-strong);
    }

    .cs-message-input:focus,
    .cs-chat-footer .w-textarea:focus {
        outline: 0;
        border-color: var(--cs-focus);
        box-shadow: var(--focus-ring);
    }

    .cs-message-input:disabled,
    .cs-chat-footer .w-textarea:disabled {
        background: var(--cs-surface-muted);
        color: var(--cs-text-muted);
        cursor: not-allowed;
    }

    .cs-send-button {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: var(--control-height-md);
        padding: 0;
        background: var(--cs-accent);
        color: var(--cs-on-accent);
        border: var(--border-width-thin) solid var(--cs-accent);
        border-radius: var(--cs-radius-control);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color var(--weline-motion-fast) ease, border-color var(--weline-motion-fast) ease;
        flex-shrink: 0;
    }

    .cs-send-button:hover:not(:disabled) {
        background: var(--cs-accent-hover);
        border-color: var(--cs-accent-hover);
    }

    .cs-send-button:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .cs-modal {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: var(--weline-theme-overlay);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: calc(var(--weline-z-overlay) + 350);
        padding: var(--weline-space-4);
        pointer-events: auto;
    }

    #cs-bind-modal.cs-modal,
    #cs-bind-modal.cs-modal.w-modal {
        z-index: calc(var(--weline-z-overlay) + 350);
    }

    body.cs-bind-modal-open #customer-service-widget {
        pointer-events: none;
    }

    body.cs-bind-modal-open #customer-service-widget .cs-chat-window {
        visibility: hidden;
    }

    body.cs-bind-modal-open #cs-bind-modal {
        pointer-events: auto;
    }

    .cs-modal .w-modal-dialog {
        position: relative;
        z-index: 1;
        pointer-events: auto;
    }

    .cs-modal-content {
        background: var(--cs-surface);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border);
        border-radius: var(--cs-radius-window);
        width: min(31.25rem, 100%);
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: var(--cs-shadow-lg);
    }

    .cs-modal-header {
        padding: var(--weline-space-5);
        border-bottom: var(--border-width-thin) solid var(--cs-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--weline-space-3);
    }

    .cs-modal-header h3 {
        margin: 0;
        font-size: var(--weline-font-size-lg);
        font-weight: 650;
        color: var(--cs-text);
    }

    .cs-modal-close {
        background: transparent;
        border: var(--border-width-thin) solid transparent;
        font-size: var(--weline-font-size-lg);
        cursor: pointer;
        color: var(--cs-text-muted);
        padding: 0;
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--cs-radius-control);
        transition: background-color var(--weline-motion-fast) ease, color var(--weline-motion-fast) ease;
    }

    .cs-modal-close.w-button[data-tone="quiet"] {
        background: transparent;
        border-color: transparent;
        color: var(--cs-text-muted);
    }

    .cs-modal-close.w-button[data-tone="quiet"]:hover,
    .cs-modal-close.w-modal-close:hover {
        background: var(--cs-surface-muted);
        border-color: transparent;
        color: var(--cs-text);
    }

    .cs-modal-body {
        padding: var(--weline-space-5);
        flex: 1;
        overflow-y: auto;
    }

    .cs-modal-copy {
        margin: 0 0 var(--weline-space-3);
        color: var(--cs-text);
        line-height: var(--weline-line-height);
    }

    .cs-captcha-degrade-hint {
        margin: 0 0 var(--weline-theme-space-2);
        color: var(--weline-theme-color-warning, var(--w-color-warning));
        font-size: var(--weline-theme-font-size-sm);
        line-height: 1.45;
    }

    .cs-modal-note {
        margin: 0 0 var(--weline-space-4);
        padding: var(--weline-space-3);
        border-radius: var(--cs-radius-control);
        background: color-mix(in srgb, var(--cs-accent) 10%, var(--cs-surface));
        color: var(--cs-text-muted);
        font-size: var(--weline-font-size-sm);
        line-height: var(--weline-line-height);
    }

    .cs-bind-form {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .cs-bind-form .cs-modal-footer {
        margin-top: var(--weline-space-4);
        padding: 0;
        border-top: 0;
        background: transparent;
    }

    .cs-bind-form .weline-captcha {
        margin-block: var(--weline-space-4);
    }

    .cs-bind-form .weline-captcha-row {
        flex-wrap: wrap;
    }

    .cs-w-field label {
        display: block;
        margin-bottom: var(--weline-space-2);
        font-weight: 550;
        color: var(--cs-text);
        font-size: var(--weline-font-size-sm);
    }

    .cs-form-input,
    .cs-modal .w-input,
    input.cs-form-input {
        width: 100%;
        min-height: var(--weline-control-height);
        padding: var(--weline-space-2) var(--weline-space-3);
        border: var(--border-width-thin) solid var(--cs-border-strong);
        border-radius: var(--cs-radius-control);
        font-size: var(--weline-font-size-sm);
        background: var(--cs-surface);
        color: var(--cs-text);
        color-scheme: inherit;
    }

    .cs-form-input::placeholder,
    .cs-modal .w-input::placeholder {
        color: var(--cs-text-subtle);
    }

    .cs-form-input:focus,
    .cs-modal .w-input:focus {
        outline: 0;
        border-color: var(--cs-focus);
        box-shadow: var(--focus-ring);
    }

    .cs-modal-footer {
        padding: var(--weline-space-5);
        border-top: var(--border-width-thin) solid var(--cs-border);
        display: flex;
        gap: var(--weline-space-3);
        justify-content: flex-end;
    }

    .cs-btn {
        padding: 0 var(--weline-space-5);
        min-height: var(--weline-control-height);
        border: var(--border-width-thin) solid transparent;
        border-radius: var(--cs-radius-control);
        font-size: var(--weline-font-size-sm);
        font-weight: 650;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color var(--weline-motion-fast) ease, border-color var(--weline-motion-fast) ease, color var(--weline-motion-fast) ease;
    }

    .cs-btn-primary {
        background: var(--cs-accent);
        border-color: var(--cs-accent);
        color: var(--cs-on-accent);
    }

    .cs-btn-primary:hover {
        background: var(--cs-accent-hover);
        border-color: var(--cs-accent-hover);
    }

    .cs-btn-secondary {
        background: var(--cs-surface);
        border-color: var(--cs-border-strong);
        color: var(--cs-text);
    }

    .cs-btn-secondary:hover {
        background: var(--cs-surface-muted);
    }

    .cs-loading {
        text-align: center;
        padding: var(--weline-space-5);
        color: var(--cs-text-subtle);
    }

    .cs-loading i {
        animation: cs-spin 1s linear infinite;
    }

    @keyframes cs-spin {
        to { transform: rotate(360deg); }
    }

    .cs-chat-header.w-panel-header {
        padding: var(--weline-space-4) var(--weline-space-5);
        background: var(--cs-header-bg);
        color: var(--cs-header-text);
    }

    .cs-chat-body.w-panel-body {
        padding: var(--weline-space-5);
    }

    .cs-chat-footer.w-panel-footer {
        padding: var(--weline-space-4) var(--weline-space-5);
    }

    .cs-settings-panel.w-panel-body {
        padding: var(--spacing-3_5) var(--weline-space-5);
    }

    .cs-modal.w-modal {
        padding: clamp(var(--weline-space-4), 4vw, var(--weline-space-10));
        box-sizing: border-box;
    }

    .cs-modal.w-modal .w-modal-dialog {
        width: min(100%, 26.25rem);
        margin: auto;
    }

    .cs-modal-content.w-modal-content {
        width: 100%;
    }

    .cs-modal-header.w-modal-header,
    .cs-modal-footer.w-modal-footer {
        padding: var(--weline-space-4) var(--weline-space-5);
    }

    .cs-modal-body.w-modal-body {
        padding: var(--weline-space-5);
    }.customer-service-widget.is-open .cs-chat-button.cs-chat-button{
        display: none;
    }

    .cs-notice-alert {
        position: fixed;
        inset: 0;
        z-index: calc(var(--weline-z-overlay) + 500);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: max(var(--weline-space-4), env(safe-area-inset-top, 0px))
            max(var(--weline-space-4), env(safe-area-inset-right, 0px))
            max(var(--weline-space-4), env(safe-area-inset-bottom, 0px))
            max(var(--weline-space-4), env(safe-area-inset-left, 0px));
        box-sizing: border-box;
        background: color-mix(in srgb, var(--weline-theme-text) 48%, transparent);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--weline-motion-fast, 160ms) ease, visibility var(--weline-motion-fast, 160ms) ease;
    }

    .cs-notice-alert.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .cs-notice-alert__dialog {
        width: min(100%, 24rem);
        max-height: min(90vh, 28rem);
        overflow: auto;
        border: var(--border-width-thin) solid var(--weline-theme-border);
        border-radius: var(--weline-radius-lg);
        background: var(--weline-theme-surface);
        color: var(--weline-theme-text);
        box-shadow: var(--weline-shadow-md);
        display: flex;
        flex-direction: column;
    }

    .cs-notice-alert__header {
        padding: var(--weline-space-4) var(--weline-space-5);
        border-bottom: var(--border-width-thin) solid var(--weline-theme-border);
    }

    .cs-notice-alert__title {
        margin: 0;
        font-size: var(--weline-font-size-lg);
        font-weight: 650;
    }

    .cs-notice-alert--error .cs-notice-alert__title {
        color: var(--weline-theme-danger);
    }

    .cs-notice-alert--success .cs-notice-alert__title {
        color: var(--weline-theme-success);
    }

    .cs-notice-alert--warning .cs-notice-alert__title {
        color: var(--weline-theme-warning);
    }

    .cs-notice-alert__body {
        padding: var(--weline-space-5);
        line-height: 1.55;
        color: var(--weline-theme-text);
        white-space: pre-wrap;
        word-break: break-word;
        display: flex;
        flex-direction: column;
        gap: var(--weline-space-3);
    }

    .cs-notice-alert__copy {
        margin: 0;
    }

    .cs-notice-alert__link {
        align-self: flex-start;
        display: inline-flex;
        text-decoration: none;
        word-break: normal;
    }

    .cs-notice-alert__inline-link {
        color: var(--weline-theme-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
        word-break: break-all;
    }

    .cs-notice-alert__actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--weline-space-3);
        padding: var(--weline-space-4) var(--weline-space-5);
        border-top: var(--border-width-thin) solid var(--weline-theme-border);
    }

    .cs-notice-alert__confirm {
        min-width: 6.5rem;
    }

    @media (max-width: 720px) {
        .customer-service-widget {
            bottom: calc(
                var(--weline-space-3)
                + var(--weline-safe-area-bottom, env(safe-area-inset-bottom, 0px))
            );
            right: calc(var(--weline-space-3) + var(--weline-safe-area-right, env(safe-area-inset-right, 0px)));
        }

        /* In-slot absolute (same model as StoreMusic): never viewport-fixed —
         * edge-dock transform would otherwise create a fixed containing-block trap. */
        .cs-chat-window,
        .cs-chat-window.w-panel {
            position: absolute;
            top: auto;
            left: auto;
            right: 0;
            bottom: calc(100% + 0.5rem);
            width: min(calc(100vw - 1.5rem), 23.75rem);
            height: min(calc(100dvh - 5.5rem), 37.5rem);
            max-width: calc(100vw - 1.5rem);
            max-height: min(calc(100dvh - 5.5rem), 80vh);
        }

        .cs-chat-header.w-panel-header,
        .cs-chat-footer.w-panel-footer {
            padding: var(--weline-space-3) var(--weline-space-4);
        }

        .cs-chat-body.w-panel-body,
        .cs-settings-panel.w-panel-body {
            padding: var(--weline-space-4);
        }

        .cs-chat-title {
            min-width: 0;
        }

        .cs-settings-item {
            flex-wrap: wrap;
            align-items: stretch;
        }

        .cs-settings-item .w-select,
        .cs-settings-item select {
            max-width: 100%;
            width: 100%;
            min-width: 0;
        }

        .cs-chat-button {
            width: 2.5rem;
            height: 2.5rem;
        }

        .cs-chat-button .cs-icon {
            width: 1.15rem;
            height: 1.15rem;
        }

        .cs-modal.w-modal {
            padding: max(var(--weline-space-3), env(safe-area-inset-top, 0px))
                max(var(--weline-space-3), env(safe-area-inset-right, 0px))
                max(var(--weline-space-3), env(safe-area-inset-bottom, 0px))
                max(var(--weline-space-3), env(safe-area-inset-left, 0px));
            align-items: stretch;
        }

        .cs-modal.w-modal .w-modal-dialog {
            width: 100%;
            max-width: none;
        }

        .cs-modal-footer,
        .cs-modal-footer.w-modal-footer {
            flex-wrap: wrap;
            justify-content: stretch;
        }

        .cs-modal-footer .cs-btn {
            flex: 1 1 8rem;
        }

        #cs-bind-modal.cs-modal,
        #cs-bind-modal.cs-modal.w-modal {
            z-index: calc(var(--weline-z-overlay) + 400);
        }

        body.cs-bind-modal-open #customer-service-widget .cs-chat-window,
        body.cs-bind-modal-open #customer-service-widget .cs-chat-window.w-panel {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
    }
}

/*
 * Unlayered: Theme .w-panel-header/.w-panel-footer are unlayered and beat @layer page.
 * Keep Classic/chrome header readable (dark bg + light text) against ink/panel light surfaces.
 */
.customer-service-widget .cs-chat-header.w-panel-header {
    background: var(--cs-header-bg);
    color: var(--cs-header-text);
    border-bottom-color: color-mix(in srgb, var(--cs-header-text) 14%, transparent);
}

.customer-service-widget .cs-chat-header.w-panel-header .cs-chat-title,
.customer-service-widget .cs-chat-header.w-panel-header #cs-title-text {
    color: var(--cs-header-text);
}

.customer-service-widget .cs-chat-header.w-panel-header .cs-status-label {
    background-color: color-mix(in srgb, var(--cs-header-text) 14%, transparent);
    color: var(--cs-header-text-muted);
}

.customer-service-widget .cs-chat-header.w-panel-header .cs-status-label.cs-status-offline {
    background-color: color-mix(in srgb, var(--cs-header-text) 12%, transparent);
    color: var(--cs-header-text-muted);
}

.customer-service-widget .cs-chat-header.w-panel-header .cs-btn-icon,
.customer-service-widget .cs-chat-header.w-panel-header .w-button.cs-btn-icon {
    background: color-mix(in srgb, var(--cs-header-text) 12%, transparent);
    border-color: transparent;
    color: var(--cs-header-text);
}

.customer-service-widget .cs-chat-header.w-panel-header .cs-btn-icon:hover,
.customer-service-widget .cs-chat-header.w-panel-header .w-button.cs-btn-icon:hover {
    background: color-mix(in srgb, var(--cs-header-text) 20%, transparent);
    color: var(--cs-header-text);
}