/* Customer service front styles split from style.css. */

/* Customer service */
html:has(body.customer-service-body) {
    background: #f3f4f6;
    color-scheme: light;
}

body.customer-service-body {
    width: 100%;
    background: #f3f4f6 !important;
}

body.customer-service-body.customer-service-embed-body {
    height: 100vh;
    overflow: hidden;
}

body.customer-service-body.customer-service-embed-body .page-frame {
    box-sizing: border-box;
    display: flex;
    height: 100vh;
    min-height: 100vh;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
    background: #f3f4f6;
}

body.customer-service-body:not(.customer-service-embed-body) .page-frame {
    background: #f3f4f6;
}

body.customer-service-body .top-bar-spacer {
    flex: 0 0 auto;
}

.customer-service-page {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.customer-service-page .section-title {
    flex: 0 0 auto;
}

.customer-service-phone {
    display: flex;
    width: min(100%, 760px);
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
    flex: 1 1 auto;
    flex-direction: column;
    border: 1px solid #dbe5ef;
    border-radius: 18px;
    background: #eef1f5;
    box-shadow: none;
}

.customer-service-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(13, 148, 136, 0.32);
    background: linear-gradient(90deg, #10b981, #14b8a6);
}

.customer-service-head-main {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.customer-service-avatar {
    display: inline-flex;
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 100%);
    color: #1d4ed8;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.customer-service-avatar-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.customer-service-avatar-text i {
    position: relative;
    z-index: 1;
    font-size: 16px;
    line-height: 1;
}

.customer-service-avatar-state {
    position: absolute;
    left: 50%;
    bottom: -6px;
    z-index: 2;
    display: inline-flex;
    min-width: 30px;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    background: #16a34a;
    color: #ffffff;
    font-size: 7px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow: none;
}

.customer-service-head-copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.customer-service-avatar-state[data-status-type="typing"] {
    background: #f59e0b;
}

.customer-service-avatar-state[data-status-type="online"] {
    background: #16a34a;
}

.customer-service-avatar-state[data-status-type="offline"] {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.customer-service-avatar-state[data-status-type="image"] {
    background: #0ea5e9;
}

.customer-service-avatar-state[data-status-type="voice"] {
    background: #8b5cf6;
}

.customer-service-title {
    flex: 0 0 auto;
    overflow: hidden;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(15, 23, 42, 0.16);
}

.customer-service-subtitle {
    min-width: 0;
    overflow: hidden;
    margin-top: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-service-subtitle.is-typing {
    color: #fef3c7;
    font-weight: 800;
}

.customer-service-subtitle[data-status-type="image"] {
    color: #dbeafe;
    font-weight: 800;
}

.customer-service-subtitle[data-status-type="voice"] {
    color: #ede9fe;
    font-weight: 800;
}

.customer-service-icon-btn,
.customer-service-tool-btn,
.customer-service-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
}

.customer-service-icon-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
}

.customer-service-activity-notice {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin: 6px 10px 0;
    padding: 4px 10px;
    max-width: calc(100% - 20px);
    overflow: hidden;
    border: 1px solid rgba(251, 146, 60, 0.28);
    border-radius: 999px;
    background: linear-gradient(180deg, #fff7ed 0%, #fffbeb 100%);
    color: #7c2d12;
    box-shadow: none;
}

.customer-service-activity-notice[hidden] {
    display: none !important;
}

.customer-service-activity-notice strong {
    display: inline-flex;
    height: 20px;
    align-items: center;
    flex: 0 0 auto;
    color: #c2410c;
    font-size: 12.5px;
    font-weight: 950;
    line-height: 20px;
    white-space: nowrap;
}

.customer-service-activity-notice span {
    display: block;
    height: 20px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #7c2d12;
    font-size: 14px;
    font-weight: 820;
    line-height: 20px;
    white-space: nowrap;
}

.customer-service-activity-notice em {
    display: inline-block;
    min-width: 100%;
    max-width: none;
    padding-left: 100%;
    overflow: hidden;
    animation: customer-service-notice-marquee var(--customer-service-notice-duration, 30s) linear infinite;
    font-style: normal;
    line-height: 20px;
    vertical-align: top;
    white-space: nowrap;
    will-change: transform;
}

.customer-service-chat {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
    padding: 16px;
    background: #eef1f5;
}

.customer-service-date {
    align-self: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.16);
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.customer-service-system-message {
    display: flex;
    justify-content: center;
    width: 100%;
}

.customer-service-system-pill {
    max-width: min(86%, 520px);
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.16);
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: pre-line;
}

.customer-service-message {
    display: flex;
    width: 100%;
}

.customer-service-message.is-self {
    justify-content: flex-end;
}

.customer-service-message.is-pending,
.service-thread-message.is-pending {
    opacity: 0.72;
}

.customer-service-message.is-peer {
    justify-content: flex-start;
}

.customer-service-bubble-wrap {
    display: grid;
    max-width: min(78%, 440px);
    gap: 5px;
}

.customer-service-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.2;
}

.customer-service-message.is-self .customer-service-meta {
    justify-content: flex-end;
}

.customer-service-bubble {
    overflow-wrap: anywhere;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.55;
    box-shadow: none;
}

.customer-service-message.is-self .customer-service-bubble {
    background: #95ec69;
    border-radius: 8px;
}

.customer-service-bubble.is-emoji {
    padding: 7px 10px;
    font-size: 28px;
    line-height: 1.1;
}

.customer-service-bubble.is-image {
    padding: 4px;
    background: transparent;
    box-shadow: none;
}

.customer-service-image-preview-open {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.customer-service-bubble img {
    display: block;
    max-width: min(260px, 62vw);
    max-height: 360px;
    border-radius: 10px;
    object-fit: cover;
}

body.customer-service-image-preview-modal-open,
body.service-agent-payment-preview-modal-open {
    overflow: hidden;
}

.customer-service-image-preview-modal,
.service-agent-payment-preview-modal {
    position: fixed;
    inset: 0;
    display: grid;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    align-items: center;
    justify-items: center;
    padding: 18px;
    overflow: auto;
    overscroll-behavior: contain;
}

.customer-service-image-preview-modal {
    z-index: 10030;
}

.customer-service-image-preview-modal[hidden] {
    display: none !important;
}

.customer-service-image-preview-backdrop,
.service-agent-payment-preview-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.58);
}

.customer-service-image-preview-dialog,
.service-agent-payment-preview-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    box-sizing: border-box;
    gap: 10px;
    border: 1px solid #dbe5ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.28);
}

.customer-service-image-preview-dialog {
    width: min(calc(100vw - 56px), 380px);
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 28px);
    align-content: center;
    justify-items: center;
    justify-self: center;
    margin: 0 auto;
    padding: 42px 18px 16px;
    overflow: hidden;
}

.customer-service-image-preview-dialog img,
.service-agent-payment-preview-dialog img {
    display: block;
    object-fit: contain;
}

.customer-service-image-preview-dialog img {
    justify-self: center;
    width: auto;
    height: auto;
    max-width: min(100%, 300px);
    max-height: min(58dvh, calc(100dvh - 132px), 420px);
    border-radius: 12px;
}

.customer-service-image-preview-dialog strong,
.service-agent-payment-preview-dialog strong {
    max-width: 100%;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-service-image-preview-dialog strong {
    justify-self: center;
    text-align: center;
}

.customer-service-image-preview-close,
.service-agent-payment-preview-close {
    position: absolute;
}

.customer-service-image-preview-close {
    top: 10px;
    right: 10px;
    z-index: 2;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    .customer-service-image-preview-modal {
        padding: 14px;
    }

    .customer-service-image-preview-dialog {
        width: min(calc(100vw - 24px), 340px);
        max-height: calc(100dvh - 24px);
        padding: 40px 14px 14px;
    }

    .customer-service-image-preview-dialog img {
        max-width: min(100%, 280px);
        max-height: min(54dvh, calc(100dvh - 126px), 380px);
    }
}

.service-agent-payment-preview-modal {
    z-index: 10020;
}

.service-agent-payment-preview-modal[hidden] {
    display: none !important;
}

.service-agent-payment-preview-dialog {
    width: min(420px, calc(100vw - 36px));
    max-height: min(82vh, 520px);
    place-items: center;
    padding: 18px;
}

.service-agent-payment-preview-dialog img {
    width: min(100%, 360px);
    max-height: 68vh;
}

.service-agent-payment-preview-close {
    top: -12px;
    right: -12px;
}

.customer-service-voice {
    display: inline-flex;
    min-width: 132px;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.customer-service-bubble audio {
    display: block;
    width: min(240px, 60vw);
    margin-top: 8px;
}

.customer-service-bubble audio::-webkit-media-controls-overflow-button,
.customer-service-bubble audio::-webkit-media-controls-download-button,
.customer-service-bubble audio::-internal-media-controls-download-button {
    display: none !important;
}

.customer-service-empty {
    margin: auto;
    max-width: 320px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    color: #64748b;
    padding: 14px 16px;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
}

.customer-service-compose {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    z-index: 2;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #d7dee8;
    background: #f8fafc;
}

.customer-service-tools {
    display: flex;
    gap: 6px;
    align-items: center;
    padding-bottom: 2px;
}

.customer-service-tool-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #334155;
    font-size: 15px;
}

.customer-service-tool-btn.is-recording,
.customer-service-tool-btn.is-recording:hover {
    background: #ef4444;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.customer-service-tool-btn[data-service-agent-score-open] {
    background: #fff7ed;
    color: #c2410c;
}

.customer-service-tool-btn[data-customer-service-voice] {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.customer-service-pending {
    grid-column: 1 / -1;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #dbe5ef;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
}

.customer-service-pending[hidden] {
    display: none;
}

.customer-service-pending img {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 9px;
    object-fit: cover;
}

.customer-service-pending span {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-service-pending button {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: #e2e8f0;
    color: #334155;
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.customer-service-input {
    min-height: 38px;
    max-height: 104px;
    resize: none;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1.45;
    outline: none;
}

.customer-service-input:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.customer-service-send {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #22c55e;
    color: #ffffff;
    font-size: 15px;
}

.customer-service-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.customer-service-emoji-panel {
    position: absolute;
    z-index: 30;
    box-sizing: border-box;
    right: 12px;
    bottom: calc(100% + 8px);
    display: grid;
    width: min(320px, calc(100vw - 32px));
    max-height: min(52vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid #dbe5ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.customer-service-emoji-panel[hidden] {
    display: none;
}

.customer-service-emoji-panel button {
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 22px;
}

.customer-service-placeholder {
    display: grid;
    min-height: 420px;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 28px 18px;
    text-align: center;
}

.customer-service-placeholder-icon {
    display: inline-flex;
    width: 62px;
    height: 62px;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #22c55e;
    color: #ffffff;
    font-size: 24px;
}

.customer-service-placeholder h2 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    font-weight: 900;
}

.customer-service-placeholder p {
    max-width: 360px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.8;
}

.customer-service-placeholder-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.customer-service-placeholder-actions a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #22c55e;
    color: #ffffff;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.customer-service-placeholder-actions a + a {
    background: #0ea5e9;
}

@supports (height: 100dvh) {
    body.customer-service-body {
        height: 100dvh;
    }

    body.customer-service-body .page-frame {
        height: 100dvh;
        min-height: 100dvh;
    }

    .customer-service-page {
        min-height: 0;
    }

    .customer-service-phone {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    body.customer-service-body .page-frame {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .customer-service-page {
        min-height: 0;
        padding-top: 8px;
    }

    .customer-service-phone {
        width: 100%;
        min-height: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .customer-service-head {
        min-height: 44px;
        padding: 5px 10px;
    }

    .customer-service-title {
        font-size: 17px;
    }

    .customer-service-chat {
        padding: 12px 10px;
    }

    .customer-service-bubble-wrap {
        max-width: 84%;
    }

    .customer-service-bubble {
        font-size: 14px;
    }

    .customer-service-compose {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    }

    .customer-service-emoji-panel {
        max-height: min(42vh, 360px);
    }

    .customer-service-tools {
        grid-column: auto;
        flex: 0 0 auto;
        gap: 4px;
        justify-content: flex-start;
        padding-bottom: 0;
    }

    .customer-service-tool-btn {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 14px;
    }

    .customer-service-pending {
        padding: 7px;
    }

    .customer-service-pending img {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .customer-service-input {
        min-height: 36px;
        padding: 7px 8px;
        font-size: 14px;
    }

    .customer-service-send {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 9px;
    }
}

/* Public floating card geometry is owned by front-floating.css. This file only
   overrides service-specific states such as keyboard and modal overlays. */

@media (min-width: 721px) {
    body.customer-service-agent-body.customer-service-body {
        --service-agent-desktop-bottom-reserve: calc(
            var(--front-bottom-nav-height, 70px) +
            var(--front-bottom-nav-bottom, 2px) +
            env(safe-area-inset-bottom)
        );
    }

    body.customer-service-agent-body.customer-service-body .page-frame {
        box-sizing: border-box !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding-bottom: var(--service-agent-desktop-bottom-reserve) !important;
    }

    @supports (height: 100dvh) {
        body.customer-service-agent-body.customer-service-body .page-frame {
            height: 100dvh !important;
            min-height: 100dvh !important;
        }
    }

    body.customer-service-agent-body.customer-service-body .customer-service-agent-shell {
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body .customer-service-agent-shell .customer-service-agent-console,
    body.customer-service-agent-body.customer-service-body .service-agent-grid,
    body.customer-service-agent-body.customer-service-body .service-agent-chat {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

}

body.customer-service-body.service-agent-settings-open:not(.customer-service-compose-keyboard-active) .bottom-float-nav {
    z-index: 10041 !important;
    pointer-events: none !important;
}

body.customer-service-body.service-agent-score-modal-open .bottom-float-nav,
body.customer-service-body.service-agent-level-modal-open .bottom-float-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.customer-service-agent-body.customer-service-body:is(.service-agent-score-modal-open, .service-agent-level-modal-open) .service-thread-composer--agent {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.customer-service-body:has(.service-agent-settings-modal.is-keyboard-active) .page-frame {
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
}

body.customer-service-body:has(.service-agent-settings-modal.is-keyboard-active) .bottom-float-nav {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.customer-service-body.customer-service-compose-keyboard-active .page-frame,
body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body) .page-frame {
    padding-bottom: 0 !important;
}

@media (min-width: 721px) {
    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) {
        --front-unified-bottom-gap: var(--front-bottom-nav-gap, 8px);
        --customer-service-member-compose-clearance: calc(
            var(--front-bottom-nav-height, 64px) +
            var(--front-bottom-nav-bottom, 2px) +
            12px +
            env(safe-area-inset-bottom)
        );
    }

    body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body):not(.customer-service-compose-keyboard-active) .page-frame {
        padding-bottom: var(--front-unified-bottom-reserve) !important;
    }

    body.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .page-frame,
    body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body) .page-frame {
        padding-bottom: var(--front-unified-bottom-reserve) !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone:has(> .customer-service-compose:not(.service-agent-compose)) {
        box-sizing: border-box !important;
        padding-bottom: var(--customer-service-member-compose-clearance) !important;
    }

    body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body) .front-unified-page.customer-service-page {
        padding-bottom: 0 !important;
    }

    body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body) .customer-service-phone {
        box-sizing: border-box !important;
        padding-bottom: var(--customer-service-member-compose-clearance) !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose) {
        margin-bottom: 0 !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose):focus-within {
        margin-bottom: 0 !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body) .customer-service-chat,
    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone:has(> .customer-service-compose:not(.service-agent-compose):focus-within) > .customer-service-chat {
        padding-bottom: var(--customer-service-member-compose-clearance) !important;
    }

    body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose),
    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose):focus-within {
        transform: translate3d(0, calc(-1 * var(--customer-service-member-compose-clearance)), 0) !important;
    }

    body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body) .bottom-float-nav {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .bottom-float-nav {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-frame {
        padding-bottom: calc(
            var(--front-bottom-nav-height, 64px) +
            var(--front-bottom-nav-bottom, 2px) +
            10px +
            env(safe-area-inset-bottom)
        ) !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-phone {
        padding-bottom: 0 !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-chat {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone:has(> .customer-service-compose:not(.service-agent-compose)) {
        padding-bottom: var(--customer-service-member-compose-clearance) !important;
    }

    body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose),
    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose):focus-within {
        transform: none !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose) {
        flex: 0 0 auto !important;
        margin-bottom: var(--customer-service-member-compose-clearance) !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose):focus-within {
        margin-bottom: var(--customer-service-member-compose-clearance) !important;
    }
}

body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active:has(.customer-service-agent-console) .page-frame {
    padding-bottom: 0 !important;
}

body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active:has(.customer-service-agent-console) .customer-service-agent-console {
    padding-bottom: 0 !important;
}

body.customer-service-body.customer-service-compose-keyboard-active .bottom-float-nav {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (min-width: 721px) {
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active:has(.customer-service-agent-console) .page-frame {
        box-sizing: border-box !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding-bottom: var(--service-agent-desktop-bottom-reserve) !important;
    }

    @supports (height: 100dvh) {
        body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active:has(.customer-service-agent-console) .page-frame {
            height: 100dvh !important;
            min-height: 100dvh !important;
        }
    }

    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .bottom-float-nav {
        display: grid !important;
        border: 1px solid rgba(130, 190, 255, 0.72) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.customer-service-agent-body.customer-service-body:has(.customer-service-agent-console) {
        --service-agent-desktop-compose-clearance: calc(
            var(--front-bottom-nav-height, 70px) +
            var(--front-bottom-nav-bottom, 2px) +
            10px +
            env(safe-area-inset-bottom)
        );
    }

}

@media (min-width: 721px) {
    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) {
        --customer-service-member-compose-clearance: calc(
            var(--front-bottom-nav-height, 64px) +
            var(--front-bottom-nav-bottom, 2px) +
            14px +
            env(safe-area-inset-bottom)
        );
        --customer-service-member-compose-reserve: calc(
            var(--customer-service-member-compose-clearance) +
            64px
        );
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-phone {
        position: relative !important;
        padding-bottom: var(--customer-service-member-compose-reserve) !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-chat {
        padding-bottom: calc(var(--customer-service-member-compose-reserve) + 16px) !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose) {
        position: absolute !important;
        right: 0 !important;
        bottom: var(--customer-service-member-compose-clearance) !important;
        left: 0 !important;
        z-index: 5 !important;
        margin-bottom: 0 !important;
        transform: none !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose):focus-within {
        bottom: var(--customer-service-member-compose-clearance) !important;
        margin-bottom: 0 !important;
        transform: none !important;
    }
}

@media (min-width: 721px) {
    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) {
        --customer-service-member-compose-fixed-bottom: calc(
            var(--front-bottom-nav-height, 64px) +
            var(--front-bottom-nav-bottom, 2px) +
            12px +
            env(safe-area-inset-bottom)
        );
        --customer-service-member-compose-fixed-reserve: calc(
            var(--customer-service-member-compose-fixed-bottom) +
            72px
        );
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-phone {
        padding-bottom: var(--customer-service-member-compose-fixed-reserve) !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-chat {
        padding-bottom: calc(var(--customer-service-member-compose-fixed-reserve) + 14px) !important;
    }

    body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body) .bottom-float-nav,
    body.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .bottom-float-nav {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose),
    body.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose),
    body.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose),
    body.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > .customer-service-compose:not(.service-agent-compose):focus-within {
        position: fixed !important;
        right: auto !important;
        bottom: var(--customer-service-member-compose-fixed-bottom) !important;
        left: var(--front-fixed-center, 50%) !important;
        z-index: 80 !important;
        box-sizing: border-box !important;
        width: min(736px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        transform: translate3d(-50%, 0, 0) !important;
        border: 1px solid rgba(203, 213, 225, 0.96) !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
    }

    body.standalone-panel.customer-service-body:not(.customer-service-agent-body) {
        --customer-service-member-compose-fixed-bottom: calc(
            var(--front-bottom-nav-height, 64px) +
            var(--front-bottom-nav-bottom, 2px) +
            18px +
            env(safe-area-inset-bottom)
        );
        --customer-service-member-compose-fixed-reserve: calc(
            var(--customer-service-member-compose-fixed-bottom) +
            88px
        );
    }

    body.standalone-panel.customer-service-body:not(.customer-service-agent-body) .customer-service-phone {
        padding-bottom: var(--customer-service-member-compose-fixed-reserve) !important;
    }

    body.standalone-panel.customer-service-body:not(.customer-service-agent-body) .customer-service-chat {
        padding-bottom: calc(var(--customer-service-member-compose-fixed-reserve) + 18px) !important;
    }

    body.standalone-panel.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.standalone-panel.customer-service-body.front-input-focus-active:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.standalone-panel.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.standalone-panel.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose):focus-within {
        position: fixed !important;
        right: auto !important;
        bottom: var(--customer-service-member-compose-fixed-bottom) !important;
        left: var(--front-fixed-center, 50%) !important;
        z-index: 10005 !important;
        box-sizing: border-box !important;
        width: min(700px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        transform: translate3d(-50%, 0, 0) !important;
    }
}

body.front-unified-panel-page.customer-service-body .customer-service-title-state {
    right: -6px !important;
    bottom: -4px !important;
    min-width: 26px !important;
    height: 12px !important;
    padding: 0 3px !important;
    border-width: 0.5px !important;
    font-size: 7px !important;
    line-height: 10px !important;
}

@media (min-width: 721px) {
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) {
        --customer-service-member-compose-safe-bottom: calc(
            var(--front-bottom-nav-height, 64px) +
            var(--front-bottom-nav-bottom, 2px) +
            58px +
            env(safe-area-inset-bottom)
        );
        --customer-service-member-compose-safe-reserve: calc(
            var(--customer-service-member-compose-safe-bottom) +
            96px
        );
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-phone {
        padding-bottom: var(--customer-service-member-compose-safe-reserve) !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-chat {
        padding-bottom: calc(var(--customer-service-member-compose-safe-reserve) + 18px) !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.standalone-panel.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose):focus-within {
        position: fixed !important;
        right: auto !important;
        bottom: var(--customer-service-member-compose-safe-bottom) !important;
        left: var(--front-fixed-center, 50%) !important;
        z-index: 10020 !important;
        box-sizing: border-box !important;
        width: min(700px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        transform: translate3d(-50%, 0, 0) !important;
    }
}

/* Embedded customer service inside post recharge modal. */
body.customer-service-embed-body {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden !important;
    background: #eef2f7;
}

body.customer-service-embed-body .top-bar,
body.customer-service-embed-body .top-bar-spacer,
body.customer-service-embed-body .bottom-float-nav {
    display: none !important;
}

body.customer-service-embed-body .page-frame {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #eef2f7;
}

body.customer-service-embed-body .page-frame > section,
body.customer-service-embed-body .page-frame > .marquee {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.customer-service-embed-body .front-page-shell.customer-service-page {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.customer-service-embed-body .customer-service-section-title {
    display: none !important;
}

body.customer-service-embed-body .customer-service-frame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

body.customer-service-embed-body .customer-service-phone {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.customer-service-embed-body .customer-service-chat,
body.customer-service-embed-body .customer-service-placeholder {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

body.customer-service-embed-body .customer-service-phone > .customer-service-compose:not(.service-agent-compose) {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}

body.customer-service-embed-body.customer-service-compose-keyboard-active,
body.customer-service-embed-body.customer-service-compose-keyboard-active .page-frame,
body.customer-service-embed-body.customer-service-compose-keyboard-active .front-page-shell.customer-service-page {
    height: var(--customer-service-viewport-height, 100vh) !important;
    min-height: var(--customer-service-viewport-height, 100vh) !important;
}

body.customer-service-embed-body.customer-service-compose-keyboard-active .customer-service-frame,
body.customer-service-embed-body.customer-service-compose-keyboard-active .customer-service-phone {
    min-height: 0 !important;
}

body.customer-service-embed-body.customer-service-compose-keyboard-active .customer-service-chat {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding-bottom: 8px !important;
}

body.customer-service-embed-body.customer-service-compose-keyboard-active
.customer-service-phone > .customer-service-compose:not(.service-agent-compose) {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    align-items: end !important;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)) !important;
}

body.customer-service-embed-body.customer-service-compose-keyboard-active
.customer-service-phone > .customer-service-compose:not(.service-agent-compose) .customer-service-tools {
    grid-column: 1 / -1 !important;
    display: none !important;
}

body.customer-service-embed-body.customer-service-compose-keyboard-active
.customer-service-phone > .customer-service-compose:not(.service-agent-compose) .customer-service-input {
    min-height: 42px !important;
    max-height: 86px !important;
    overflow-y: auto !important;
}

body.customer-service-embed-body.customer-service-compose-keyboard-active
.customer-service-phone > .customer-service-compose:not(.service-agent-compose) .customer-service-send {
    width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
    flex-basis: 44px !important;
}

@supports (height: 100dvh) {
    body.customer-service-embed-body,
    body.customer-service-embed-body .page-frame,
    body.customer-service-embed-body .front-page-shell.customer-service-page {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
}

/* Customer service settings modal visual balance. */
body.customer-service-agent-body .service-agent-settings-card {
    width: min(520px, calc(100vw - 24px)) !important;
    border-radius: 16px !important;
}

body.customer-service-agent-body .service-agent-settings-head {
    --app-modal-title-close-size: 32px;
    --app-modal-title-close-mark-width: 14px;
    box-sizing: border-box;
    display: grid !important;
    min-height: 42px !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 5px 12px !important;
}

body.customer-service-agent-body .service-agent-settings-head h2 {
    min-width: 0;
    overflow: hidden;
    font-size: 18px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.customer-service-agent-body .service-agent-settings-head-actions {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

body.customer-service-agent-body .service-agent-settings-save {
    box-sizing: border-box;
    min-width: 78px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #2563eb;
    border-radius: 9px;
    background: #2563eb;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

body.customer-service-agent-body .service-agent-settings-save:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
}

body.customer-service-agent-body .service-agent-settings-save:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 2px;
}

body.customer-service-agent-body .service-agent-settings-save:disabled {
    cursor: wait;
    opacity: 0.62;
}

body.customer-service-agent-body .service-agent-settings-form {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px 16px 14px !important;
}

body.customer-service-agent-body .service-agent-settings-form .service-agent-settings-duo {
    grid-template-columns: minmax(0, 1fr) 142px !important;
    gap: 8px 12px !important;
    padding: 0 !important;
    align-items: end !important;
    justify-content: stretch !important;
}

body.customer-service-agent-body .service-agent-settings-form .service-agent-settings-field > label,
body.customer-service-agent-body .service-agent-settings-form label,
body.customer-service-agent-body .service-agent-settings-notice {
    gap: 5px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

body.customer-service-agent-body .service-agent-settings-form .service-agent-settings-field.is-hours input {
    font-size: 13px !important;
}

body.customer-service-agent-body .service-agent-settings-notice-head {
    min-height: 26px !important;
}

body.customer-service-agent-body .service-agent-settings-form input:not([type="checkbox"]) {
    min-height: 38px !important;
    border-radius: 11px !important;
    font-weight: 500 !important;
}

body.customer-service-agent-body .service-agent-settings-form textarea {
    min-height: 76px !important;
    border-radius: 11px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

body.customer-service-agent-body .service-agent-settings-notice textarea {
    min-height: 86px !important;
}

body.customer-service-agent-body .service-agent-settings-notice-speed {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 10px !important;
}

body.customer-service-agent-body .service-agent-settings-notice-speed-control {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

body.customer-service-agent-body .service-agent-settings-notice-speed-control input {
    width: 86px !important;
    flex: 0 0 86px;
}

body.customer-service-agent-body .service-agent-settings-notice-speed-control em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

body.customer-service-agent-body .service-agent-settings-guide {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
}

body.customer-service-agent-body .service-agent-settings-guide-head {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}

body.customer-service-agent-body .service-agent-settings-guide label {
    gap: 5px !important;
}

body.customer-service-agent-body .service-agent-settings-guide textarea {
    min-height: 64px !important;
}

body.customer-service-agent-body .service-agent-settings-form label.is-wide:last-of-type textarea {
    min-height: 92px !important;
}

body.customer-service-agent-body .service-agent-settings-form .service-agent-settings-actions {
    padding-top: 2px !important;
}

body.customer-service-agent-body .service-agent-settings-form .service-agent-settings-actions button[type="submit"] {
    height: 38px !important;
    min-height: 38px !important;
}

@media (max-width: 480px) {
    body.customer-service-agent-body .service-agent-settings-card {
        width: min(486px, calc(100vw - 18px)) !important;
    }

    body.customer-service-agent-body .service-agent-settings-form {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    body.customer-service-agent-body .service-agent-settings-form .service-agent-settings-duo {
        grid-template-columns: minmax(0, 1fr) 128px !important;
        gap: 8px !important;
    }
}

@media (min-width: 721px), (hover: hover) and (pointer: fine) {
    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body) {
        --customer-service-member-compose-desktop-bottom: calc(
            var(--front-bottom-nav-height, 64px) +
            var(--front-bottom-nav-bottom, 2px) +
            58px +
            env(safe-area-inset-bottom)
        );
        --customer-service-member-compose-desktop-reserve: calc(
            var(--customer-service-member-compose-desktop-bottom) +
            118px
        );
    }

    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body) .customer-service-frame,
    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body) .customer-service-phone {
        padding-bottom: var(--customer-service-member-compose-desktop-reserve) !important;
    }

    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body) .customer-service-chat {
        padding-bottom: calc(var(--customer-service-member-compose-desktop-reserve) + 18px) !important;
    }

    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.customer-service-body.front-unified-panel-page.front-input-focus-active:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.customer-service-body.front-unified-panel-page.customer-service-compose-keyboard-active:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose):focus-within {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: var(--customer-service-member-compose-desktop-bottom) !important;
        left: var(--front-fixed-center, 50%) !important;
        z-index: 10080 !important;
        box-sizing: border-box !important;
        width: min(var(--front-inner-width, 700px), calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    body.customer-service-body.front-unified-panel-page.front-input-focus-active:not(.customer-service-agent-body) .bottom-float-nav,
    body.customer-service-body.front-unified-panel-page.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .bottom-float-nav {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Desktop member customer service final clearance: keep input tools outside the floating nav hit area. */
@media (min-width: 721px), (hover: hover) and (pointer: fine) {
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) {
        --customer-service-member-compose-final-bottom: calc(
            var(--front-bottom-nav-height, 64px) +
            var(--front-bottom-nav-bottom, 2px) +
            58px +
            env(safe-area-inset-bottom)
        );
        --customer-service-member-compose-final-reserve: calc(
            var(--customer-service-member-compose-final-bottom) +
            144px
        );
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-frame,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-phone {
        padding-bottom: var(--customer-service-member-compose-final-reserve) !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body) .customer-service-chat {
        padding-bottom: calc(var(--customer-service-member-compose-final-reserve) + 18px) !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.standalone-panel.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose):focus-within {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: var(--customer-service-member-compose-final-bottom) !important;
        left: var(--front-fixed-center, 50%) !important;
        z-index: 10090 !important;
        box-sizing: border-box !important;
        width: min(var(--front-inner-width, 700px), calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        transform: translate3d(-50%, 0, 0) !important;
    }
}

/* Desktop member customer service hard clearance: keep the input scene above the floating nav. */
@media (min-width: 721px), (hover: hover) and (pointer: fine) {
    body.customer-service-body.standalone-panel:not(.customer-service-agent-body) {
        --customer-service-member-compose-hard-bottom: calc(
            var(--front-bottom-nav-height, 64px) +
            var(--front-bottom-nav-bottom, 2px) +
            92px +
            env(safe-area-inset-bottom)
        );
        --customer-service-member-compose-hard-reserve: calc(
            var(--customer-service-member-compose-hard-bottom) +
            152px
        );
    }

    body.customer-service-body.standalone-panel:not(.customer-service-agent-body) .customer-service-frame,
    body.customer-service-body.standalone-panel:not(.customer-service-agent-body) .customer-service-phone {
        padding-bottom: var(--customer-service-member-compose-hard-reserve) !important;
    }

    body.customer-service-body.standalone-panel:not(.customer-service-agent-body) .customer-service-chat {
        padding-bottom: calc(var(--customer-service-member-compose-hard-reserve) + 18px) !important;
    }

    body.customer-service-body.standalone-panel:not(.customer-service-agent-body)
    form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.customer-service-body.standalone-panel.front-input-focus-active:not(.customer-service-agent-body)
    form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.customer-service-body.standalone-panel.customer-service-compose-keyboard-active:not(.customer-service-agent-body)
    form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose),
    body.customer-service-body.standalone-panel:not(.customer-service-agent-body)
    form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose):focus-within {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: var(--customer-service-member-compose-hard-bottom) !important;
        left: var(--front-fixed-center, 50%) !important;
        z-index: 10120 !important;
        box-sizing: border-box !important;
        width: min(var(--front-inner-width, 700px), calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    body.customer-service-body.standalone-panel.front-input-focus-active:not(.customer-service-agent-body) .bottom-float-nav,
    body.customer-service-body.standalone-panel.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .bottom-float-nav {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Desktop member customer service guard: keep the input bar fully above the shared floating nav. */
@media (min-width: 721px), (hover: hover) and (pointer: fine) {
    body.customer-service-body.standalone-panel.front-unified-panel-page:not(.customer-service-agent-body) {
        --customer-service-member-compose-nav-clearance: calc(78px + env(safe-area-inset-bottom));
        --customer-service-member-compose-content-reserve: calc(
            var(--customer-service-member-compose-nav-clearance) +
            96px
        );
    }

    body.customer-service-body.standalone-panel.front-unified-panel-page:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-frame,
    body.customer-service-body.standalone-panel.front-unified-panel-page:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-phone {
        padding-bottom: var(--customer-service-member-compose-content-reserve) !important;
    }

    body.customer-service-body.standalone-panel.front-unified-panel-page:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-chat {
        padding-bottom: calc(var(--customer-service-member-compose-content-reserve) + 18px) !important;
    }

    body.customer-service-body.standalone-panel.front-unified-panel-page:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-phone > form.customer-service-compose[data-customer-service-form]:not(.service-agent-compose) {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: var(--customer-service-member-compose-nav-clearance) !important;
        left: var(--front-fixed-center, 50%) !important;
        z-index: 10150 !important;
        box-sizing: border-box !important;
        width: min(var(--front-inner-width, 700px), calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        transform: translate3d(-50%, 0, 0) !important;
        border: 1px solid rgba(203, 213, 225, 0.96) !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
    }

    body.customer-service-body.standalone-panel.front-unified-panel-page.front-input-focus-active:not(.customer-service-agent-body) .bottom-float-nav,
    body.customer-service-body.standalone-panel.front-unified-panel-page.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .bottom-float-nav {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Desktop member customer service final pin: the member composer must never sit under the shared floating nav. */
@media (min-width: 721px) {
    body.customer-service-body:not(.customer-service-agent-body) {
        --customer-service-member-compose-visible-bottom: calc(
            var(--front-bottom-nav-height, 64px) +
            var(--front-bottom-nav-bottom, 2px) +
            64px +
            env(safe-area-inset-bottom)
        );
        --customer-service-member-compose-visible-reserve: calc(
            var(--customer-service-member-compose-visible-bottom) +
            148px
        );
    }

    body.customer-service-body:not(.customer-service-agent-body) .customer-service-frame,
    body.customer-service-body:not(.customer-service-agent-body) .customer-service-phone {
        padding-bottom: var(--customer-service-member-compose-visible-reserve) !important;
    }

    body.customer-service-body:not(.customer-service-agent-body) .customer-service-chat {
        padding-bottom: calc(var(--customer-service-member-compose-visible-reserve) + 18px) !important;
    }

    body.customer-service-body:not(.customer-service-agent-body) form.customer-service-member-compose[data-customer-service-form] {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: var(--customer-service-member-compose-visible-bottom) !important;
        left: var(--front-fixed-center, 50%) !important;
        z-index: 10180 !important;
        box-sizing: border-box !important;
        width: min(var(--front-inner-width, 700px), calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        transform: translate3d(-50%, 0, 0) !important;
        border: 1px solid rgba(203, 213, 225, 0.96) !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
    }
}

/* Desktop member service final layout: keep the input scene above the shared floating nav. */
@media (min-width: 721px) {
    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body) {
        --customer-service-member-compose-desktop-final-reserve: 78px;
    }

    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body) .page-frame {
        padding-bottom: var(--front-unified-bottom-reserve) !important;
    }

    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body) .customer-service-frame {
        padding-bottom: 10px !important;
    }

    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body) .customer-service-phone {
        position: relative !important;
        display: flex !important;
        height: 100% !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body) .customer-service-chat {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding-bottom: 14px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
    body.standalone-panel.customer-service-body.front-unified-panel-page.front-input-focus-active:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
    body.standalone-panel.customer-service-body.front-unified-panel-page.customer-service-compose-keyboard-active:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body)
    .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form]:focus-within {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 12020 !important;
        box-sizing: border-box !important;
        min-height: 64px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: none !important;
        border: 1px solid rgba(203, 213, 225, 0.96) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 14px !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
    }

    body.standalone-panel.customer-service-body.front-unified-panel-page.front-input-focus-active:not(.customer-service-agent-body) .bottom-float-nav,
    body.standalone-panel.customer-service-body.front-unified-panel-page.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .bottom-float-nav {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Desktop member service structure reset: the chat log and input bar stay in one normal card flow. */
@media (min-width: 721px) {
    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-frame {
        display: flex !important;
        min-height: 0 !important;
        padding: 10px !important;
        padding-bottom: 10px !important;
        overflow: hidden !important;
    }

    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-phone {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        width: min(100%, 760px) !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-activity-notice {
        grid-row: 1 !important;
        margin: 8px 12px 0 !important;
    }

    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-chat {
        grid-row: 2 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        flex: none !important;
        padding: 14px !important;
        padding-bottom: 14px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
    body.standalone-panel.customer-service-body.front-unified-panel-page.front-input-focus-active:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
    body.standalone-panel.customer-service-body.front-unified-panel-page.customer-service-compose-keyboard-active:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
    body.standalone-panel.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body)
    .page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form]:focus-within {
        position: relative !important;
        grid-row: 3 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 12030 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 64px !important;
        margin: 0 !important;
        transform: none !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: none !important;
    }
}

body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
.page-frame .customer-service-page .customer-service-frame {
    display: flex !important;
    min-height: 0 !important;
    padding: 10px !important;
    padding-bottom: 10px !important;
    overflow: hidden !important;
}

body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
.page-frame .customer-service-page .customer-service-phone {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: min(100%, 760px) !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
.page-frame .customer-service-page .customer-service-activity-notice {
    grid-row: 1 !important;
}

body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
.page-frame .customer-service-page .customer-service-chat,
body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
.page-frame .customer-service-page .customer-service-placeholder {
    grid-row: 2 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
.page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
body.standalone-panel.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body):not(.customer-service-embed-body)
.page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body)
.page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
.page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form]:focus-within {
    position: relative !important;
    grid-row: 3 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 12040 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    transform: none !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: none !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body),
    body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body) .page-frame,
    body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body) .front-page-shell.customer-service-page {
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body) .page-frame {
        padding-bottom: 0 !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body) .bottom-float-nav {
        display: none !important;
        pointer-events: none !important;
    }
}

/* Service chat final standardization: member and agent input scenes share one stable control geometry. */
body.customer-service-body .customer-service-compose {
    box-sizing: border-box !important;
    grid-template-columns: max-content minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    align-items: end !important;
    min-height: 62px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
}

body.customer-service-body .customer-service-tools {
    display: inline-grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 36px !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: start !important;
    min-width: 0 !important;
    padding-bottom: 2px !important;
}

body.customer-service-body .customer-service-tool-btn,
body.customer-service-body .customer-service-send {
    box-sizing: border-box !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    line-height: 1 !important;
}

body.customer-service-body .customer-service-tool-btn i,
body.customer-service-body .customer-service-send i {
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

body.customer-service-body .customer-service-tool-btn svg,
body.customer-service-body .customer-service-send svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}

body.customer-service-body .customer-service-input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    max-height: 96px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    resize: none !important;
}

body.customer-service-body .customer-service-pending {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.customer-service-agent-body .customer-service-agent-shell {
    box-sizing: border-box !important;
    display: flex !important;
    width: var(--front-inner-width, min(100%, 760px)) !important;
    max-width: var(--page-inner-width, 760px) !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

body.customer-service-agent-body .customer-service-agent-console {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.customer-service-agent-body .service-agent-top {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 54px !important;
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
}

body.customer-service-agent-body .service-agent-top-main {
    display: grid !important;
    grid-template-columns: minmax(72px, 0.82fr) auto minmax(88px, 1fr) !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
}

body.customer-service-agent-body .service-agent-title-name {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.customer-service-agent-body .service-agent-view-switch {
    display: inline-grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(116px, auto) !important;
    gap: 6px !important;
    min-width: 0 !important;
}

body.customer-service-agent-body .service-agent-view-switch button,
body.customer-service-agent-body .service-agent-presence-pill,
body.customer-service-agent-body .service-agent-settings-toggle {
    box-sizing: border-box !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

body.customer-service-agent-body .service-agent-presence-pill {
    min-width: 68px !important;
    padding-right: 9px !important;
    padding-left: 9px !important;
    font-size: 12px !important;
}

body.customer-service-agent-body .service-agent-settings-toggle {
    width: 100% !important;
    min-width: 88px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    text-overflow: ellipsis !important;
}

body.customer-service-agent-body .service-agent-grid {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding: 0 10px 10px !important;
    overflow: hidden !important;
}

body.customer-service-agent-body .service-agent-pane {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.customer-service-agent-body .service-agent-queue {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
}

body.customer-service-agent-body .service-agent-session-list {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.customer-service-agent-body .service-agent-chat {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body .customer-service-compose {
        grid-template-columns: max-content minmax(0, 1fr) 40px !important;
        gap: 6px !important;
        min-height: 58px !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    }

    body.customer-service-body .customer-service-tool-btn,
    body.customer-service-body .customer-service-send {
        width: 32px !important;
        height: 34px !important;
        min-width: 32px !important;
        min-height: 34px !important;
        flex-basis: 32px !important;
    }

    body.customer-service-body .customer-service-send {
        width: 40px !important;
        min-width: 40px !important;
        flex-basis: 40px !important;
    }

    body.customer-service-body .customer-service-input {
        min-height: 36px !important;
        max-height: 86px !important;
        padding: 7px 8px !important;
        font-size: 16px !important;
    }

    body.customer-service-agent-body .customer-service-agent-shell {
        width: 100% !important;
        max-width: none !important;
    }

    body.customer-service-agent-body .service-agent-top {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 7px 8px !important;
    }

    body.customer-service-agent-body .service-agent-top-main {
        justify-content: space-between !important;
    }

    body.customer-service-agent-body .service-agent-view-switch {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    body.customer-service-agent-body .service-agent-grid {
        display: block !important;
        padding: 0 8px 8px !important;
    }

    body.customer-service-agent-body .service-agent-pane {
        height: 100% !important;
    }

    body.customer-service-agent-body .customer-service-agent-console.is-queue-view .service-agent-chat,
    body.customer-service-agent-body .customer-service-agent-console.is-chat-view .service-agent-queue {
        display: none !important;
    }

    body.customer-service-agent-body .customer-service-agent-console.is-queue-view .service-agent-queue {
        display: grid !important;
    }

    body.customer-service-agent-body .customer-service-agent-console.is-chat-view .service-agent-chat {
        display: grid !important;
    }

    body.customer-service-agent-body.customer-service-compose-keyboard-active .service-agent-top {
        display: none !important;
    }

    body.customer-service-agent-body.customer-service-compose-keyboard-active .service-agent-grid {
        padding-top: 8px !important;
    }
}

/* Mobile service hard pass: keep the keyboard scene inside the visible viewport. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body,
    body.customer-service-body .page-frame,
    body.customer-service-body .customer-service-page,
    body.customer-service-body .customer-service-agent-shell,
    body.customer-service-body .customer-service-agent-console {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active,
    body.customer-service-body.customer-service-compose-keyboard-active .page-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-page,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-shell,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-console {
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .top-bar,
    body.customer-service-body.customer-service-compose-keyboard-active .top-bar-spacer,
    body.customer-service-body.customer-service-compose-keyboard-active .bottom-float-nav,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-section-title,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-activity-notice {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .page-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-page,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-phone {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
    .page-frame .customer-service-page .customer-service-frame {
        padding: 8px !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body)
    .page-frame .customer-service-page .customer-service-frame {
        padding: 0 !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
    .page-frame .customer-service-page .customer-service-phone {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body)
    .page-frame .customer-service-page .customer-service-phone {
        border: 0 !important;
        box-shadow: none !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
    .page-frame .customer-service-page .customer-service-chat,
    body.customer-service-agent-body .service-agent-session-list {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
    .page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
    body.standalone-panel.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body):not(.customer-service-embed-body)
    .page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
    body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body)
    .page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form],
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
    .page-frame .customer-service-page .customer-service-phone > form.customer-service-compose.customer-service-member-compose[data-customer-service-form]:focus-within {
        position: relative !important;
        grid-row: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 0 14px 14px !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-compose {
        grid-template-columns: 1fr 42px !important;
        gap: 6px !important;
        min-height: 54px !important;
        padding: 7px 8px max(7px, env(safe-area-inset-bottom)) !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-tools {
        grid-column: 1 / -1 !important;
        display: none !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-input {
        min-height: 40px !important;
        max-height: 82px !important;
        font-size: 16px !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-send {
        width: 42px !important;
        height: 40px !important;
        min-width: 42px !important;
        min-height: 40px !important;
        flex-basis: 42px !important;
    }

    body.customer-service-agent-body .service-agent-grid {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.customer-service-agent-body .service-agent-chat {
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    body.customer-service-agent-body.customer-service-compose-keyboard-active .customer-service-agent-shell,
    body.customer-service-agent-body.customer-service-compose-keyboard-active .customer-service-agent-console,
    body.customer-service-agent-body.customer-service-compose-keyboard-active .service-agent-grid {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    body.customer-service-agent-body.customer-service-compose-keyboard-active .service-agent-chat {
        grid-template-rows: minmax(0, 1fr) auto auto !important;
        border-radius: 0 !important;
    }
}


/* Mobile keyboard anchoring: pin the composer to the soft keyboard edge. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    html.customer-service-compose-keyboard-active-root,
    html.customer-service-compose-keyboard-active-root body.customer-service-body {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active,
    body.customer-service-body.customer-service-compose-keyboard-active .page-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-page,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-shell,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-console {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: none !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-compose[data-customer-service-form] {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 50% !important;
        z-index: 2147483000 !important;
        box-sizing: border-box !important;
        width: min(100vw, var(--front-inner-width, 100vw)) !important;
        max-width: 100vw !important;
        margin: 0 !important;
        transform: translate3d(-50%, 0, 0) !important;
        border-radius: 0 !important;
        box-shadow: 0 -1px 0 rgba(203, 213, 225, .92) !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-chat {
        padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-phone,
    body.customer-service-agent-body.customer-service-compose-keyboard-active .service-agent-chat {
        padding-bottom: 0 !important;
    }
}


/* Agent console alignment: use the shared front width system. */
body.customer-service-agent-body.customer-service-body {
    --service-agent-public-width: var(--front-inner-width, min(var(--page-inner-width, 708px), calc(100vw - 12px)));
}

body.customer-service-agent-body.customer-service-body .page-frame {
    box-sizing: border-box !important;
    display: flex !important;
    width: var(--service-agent-public-width) !important;
    max-width: var(--page-inner-width, 708px) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    padding: 8px 0 calc(var(--front-bottom-nav-height, 64px) + var(--front-bottom-nav-bottom, 2px) + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
}

@supports (height: 100dvh) {
    body.customer-service-agent-body.customer-service-body .page-frame {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
}

body.customer-service-agent-body.customer-service-body .customer-service-agent-shell,
body.customer-service-agent-body.customer-service-body .customer-service-agent-console {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.customer-service-agent-body.customer-service-body .customer-service-agent-console {
    border: 1px solid rgba(148, 163, 184, .55) !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .12) !important;
}

body.customer-service-agent-body.customer-service-body .service-agent-top {
    min-height: 48px !important;
    padding: 7px 9px !important;
}

body.customer-service-agent-body.customer-service-body .service-agent-grid {
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px 8px !important;
}

body.customer-service-agent-body.customer-service-body .service-agent-panel-head {
    min-height: 40px !important;
    padding: 7px 8px !important;
}

body.customer-service-agent-body.customer-service-body .service-agent-session {
    min-height: 66px !important;
    padding: 8px !important;
    border-radius: 10px !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-agent-body.customer-service-body {
        --service-agent-mobile-edge: 0px;
    }

    body.customer-service-agent-body.customer-service-body .page-frame {
        width: var(--service-agent-public-width) !important;
        max-width: var(--page-inner-width, 708px) !important;
        padding: 0 0 calc(var(--front-bottom-nav-height, 64px) + var(--front-bottom-nav-bottom, 2px) + env(safe-area-inset-bottom)) !important;
    }

    body.customer-service-agent-body.customer-service-body .customer-service-agent-console {
        border: 0 !important;
        border-radius: 12px !important;
        box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .55) !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-top {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        min-height: 68px !important;
        padding: 4px 0 0 !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-top-main {
        grid-template-columns: minmax(0, 1fr) 82px 96px !important;
        width: 100% !important;
        min-height: 30px !important;
        gap: 4px !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-title-name {
        display: flex !important;
        min-height: 30px !important;
        align-items: center !important;
        padding: 0 6px !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-presence-pill,
    body.customer-service-agent-body.customer-service-body .service-agent-settings-toggle {
        min-height: 30px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-presence-pill {
        min-width: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-settings-toggle {
        min-width: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-view-switch {
        min-height: 34px !important;
        gap: 0 !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-view-switch button {
        min-height: 34px !important;
        padding: 4px 8px !important;
        border-radius: 0 !important;
        font-size: 13px !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-grid {
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        padding: 4px 0 6px !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-panel-head {
        min-height: 38px !important;
        padding: 6px 7px !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-session-list {
        padding: 4px 0 !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-session {
        min-height: 70px !important;
        padding: 8px !important;
        border-radius: 9px !important;
    }

}


/* Mobile input overflow guard. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body .customer-service-compose[data-customer-service-form] {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-compose[data-customer-service-form] {
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }

    body.customer-service-body .customer-service-input,
    body.customer-service-body .customer-service-send {
        min-width: 0 !important;
    }
}

/* Customer service input scene standardization. */
body.customer-service-body .customer-service-compose[data-customer-service-form] {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    align-items: end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
}

body.customer-service-body .customer-service-tools {
    box-sizing: border-box !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 34px !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: start !important;
    min-width: 0 !important;
    padding: 0 0 2px !important;
}

body.customer-service-body .customer-service-tool-btn,
body.customer-service-body .customer-service-send {
    box-sizing: border-box !important;
    display: inline-flex !important;
    width: 34px !important;
    height: 38px !important;
    min-width: 34px !important;
    min-height: 38px !important;
    flex: 0 0 34px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 10px !important;
    line-height: 1 !important;
}

body.customer-service-body .customer-service-send {
    width: 42px !important;
    min-width: 42px !important;
    flex-basis: 42px !important;
}

body.customer-service-body .customer-service-input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    max-height: 92px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body .customer-service-compose[data-customer-service-form] {
        grid-template-columns: max-content minmax(0, 1fr) 42px !important;
        gap: 6px !important;
        min-height: 56px !important;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    }

    body.customer-service-body .customer-service-tools {
        grid-auto-columns: 32px !important;
        gap: 4px !important;
    }

    body.customer-service-body .customer-service-tool-btn {
        width: 32px !important;
        min-width: 32px !important;
        flex-basis: 32px !important;
    }

    body.customer-service-body .customer-service-input {
        min-height: 38px !important;
        max-height: 82px !important;
        padding: 8px 9px !important;
        font-size: 16px !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-compose[data-customer-service-form] {
        grid-template-columns: minmax(0, 1fr) 42px !important;
        min-height: 54px !important;
    }

}

/* Desktop agent console stability: no mobile tabs, no input/nav reflow. */
@media (min-width: 721px) {
    body.customer-service-agent-body.customer-service-body .service-agent-view-switch {
        display: none !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-top {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 7px 9px !important;
    }

    body.customer-service-agent-body.customer-service-body .customer-service-agent-console.is-queue-view .service-agent-queue,
    body.customer-service-agent-body.customer-service-body .customer-service-agent-console.is-queue-view .service-agent-chat,
    body.customer-service-agent-body.customer-service-body .customer-service-agent-console.is-chat-view .service-agent-queue,
    body.customer-service-agent-body.customer-service-body .customer-service-agent-console.is-chat-view .service-agent-chat {
        display: grid !important;
    }

}
@media (min-width: 721px) {
    body.customer-service-body .customer-service-compose[data-customer-service-form],
    body.customer-service-body.front-input-focus-active .customer-service-compose[data-customer-service-form],
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-compose[data-customer-service-form],
    body.customer-service-body .customer-service-compose[data-customer-service-form]:focus-within {
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 9px 10px !important;
        transform: none !important;
        transition: none !important;
    }

}

/* Member desktop input state: the composer is outside the message stream,
   so the stream must not reserve the floating-nav clearance as scrollable blank space. */
@media (min-width: 721px), (hover: hover) and (pointer: fine) {
    body.customer-service-body.front-unified-panel-page.front-input-focus-active:not(.customer-service-agent-body) .customer-service-phone,
    body.customer-service-body.front-unified-panel-page.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .customer-service-phone,
    body.customer-service-body.standalone-panel.front-input-focus-active:not(.customer-service-agent-body) .customer-service-phone,
    body.customer-service-body.standalone-panel.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .customer-service-phone {
        padding-bottom: 0 !important;
    }

    body.customer-service-body.front-unified-panel-page.front-input-focus-active:not(.customer-service-agent-body) .customer-service-chat,
    body.customer-service-body.front-unified-panel-page.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .customer-service-chat,
    body.customer-service-body.standalone-panel.front-input-focus-active:not(.customer-service-agent-body) .customer-service-chat,
    body.customer-service-body.standalone-panel.customer-service-compose-keyboard-active:not(.customer-service-agent-body) .customer-service-chat {
        padding-bottom: 16px !important;
        scroll-padding-bottom: 16px !important;
    }
}

/* Final service input contract: member and agent compose bars share one geometry. */
body.customer-service-body {
    --service-compose-columns: max-content minmax(0, 1fr) 42px;
    --service-compose-gap: 8px;
    --service-compose-padding-x: 10px;
    --service-compose-padding-y: 9px;
    --service-compose-min-height: 60px;
    --service-compose-max-height: none;
    --service-input-min-height: 38px;
    --service-input-max-height: none;
    --service-input-font-size: 16px;
    --service-input-line-height: 1.42;
    --service-tool-size: 36px;
    --service-send-size: 38px;
}

body.customer-service-body.customer-service-compose-keyboard-active {
    --service-compose-columns: minmax(0, 1fr) 42px;
    --service-compose-gap: 6px;
    --service-compose-padding-x: 8px;
    --service-compose-padding-y: 7px;
    --service-compose-min-height: 56px;
    --service-compose-max-height: none;
    --service-input-min-height: 40px;
    --service-input-max-height: none;
    --service-send-size: 42px;
}

body.customer-service-body .customer-service-compose[data-customer-service-form],
body.customer-service-body.front-input-focus-active .customer-service-compose[data-customer-service-form],
body.customer-service-body.customer-service-compose-keyboard-active .customer-service-compose[data-customer-service-form],
body.customer-service-body .customer-service-compose[data-customer-service-form]:focus-within {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: var(--service-compose-columns) !important;
    gap: var(--service-compose-gap) !important;
    align-items: end !important;
    min-height: var(--service-compose-min-height) !important;
    max-height: var(--service-compose-max-height) !important;
    padding: var(--service-compose-padding-y) var(--service-compose-padding-x) calc(var(--service-compose-padding-y) + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
}

body.customer-service-body .customer-service-compose[data-customer-service-form]:has(.customer-service-pending:not([hidden])) {
    max-height: none !important;
}

body.customer-service-body .customer-service-tools {
    display: inline-grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--service-tool-size) !important;
    gap: 6px !important;
    align-items: end !important;
    justify-content: start !important;
    min-width: 0 !important;
    padding-bottom: 1px !important;
}

body.customer-service-body.customer-service-compose-keyboard-active .customer-service-tools {
    display: none !important;
}

body.customer-service-body .customer-service-tool-btn,
body.customer-service-body .customer-service-send {
    box-sizing: border-box !important;
    width: var(--service-send-size) !important;
    height: var(--service-send-size) !important;
    min-width: var(--service-send-size) !important;
    min-height: var(--service-send-size) !important;
    flex: 0 0 var(--service-send-size) !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

body.customer-service-body .customer-service-tool-btn {
    width: var(--service-tool-size) !important;
    height: var(--service-tool-size) !important;
    min-width: var(--service-tool-size) !important;
    min-height: var(--service-tool-size) !important;
    flex-basis: var(--service-tool-size) !important;
}

body.customer-service-body .customer-service-input,
body.customer-service-body.front-input-focus-active .customer-service-input,
body.customer-service-body.customer-service-compose-keyboard-active .customer-service-input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--service-input-min-height) !important;
    max-height: var(--service-input-max-height) !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    resize: none !important;
    border-radius: 10px !important;
    font-size: var(--service-input-font-size) !important;
    line-height: var(--service-input-line-height) !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body.customer-service-compose-keyboard-active,
    body.customer-service-body.customer-service-compose-keyboard-active .page-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-page,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-phone,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-shell,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-console {
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-chat {
        padding-bottom: 10px !important;
        scroll-padding-bottom: 10px !important;
    }
}

/* Agent desktop focus keeps the full three-column composer; the two-column keyboard
   layout is only valid when the tool buttons are hidden on mobile. */
@media (min-width: 721px), (hover: hover) and (pointer: fine) {
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active {
        --service-compose-columns: max-content minmax(0, 1fr) 42px;
        --service-compose-gap: 8px;
        --service-compose-padding-x: 10px;
        --service-compose-padding-y: 9px;
        --service-compose-min-height: 60px;
        --service-compose-max-height: none;
        --service-input-min-height: 38px;
        --service-input-max-height: none;
        --service-send-size: 38px;
    }

}

/* Final member chat tail: do not expose reserved scroll padding as an empty block
   after the latest message. */
body.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body) .customer-service-chat,
body.customer-service-body.front-input-focus-active:not(.customer-service-agent-body):not(.customer-service-embed-body) .customer-service-chat,
body.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body) .customer-service-chat,
body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body) .page-frame .customer-service-page .customer-service-chat,
body.standalone-panel.front-unified-panel-page.customer-service-body.front-input-focus-active:not(.customer-service-agent-body):not(.customer-service-embed-body) .page-frame .customer-service-page .customer-service-chat,
body.standalone-panel.front-unified-panel-page.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-agent-body):not(.customer-service-embed-body) .page-frame .customer-service-page .customer-service-chat {
    padding-bottom: 4px !important;
    scroll-padding-bottom: 4px !important;
}

body.customer-service-body .bottom-nav-unread[hidden],
body.customer-service-body.front-input-focus-active .bottom-nav-unread[hidden],
body.customer-service-body.customer-service-compose-keyboard-active .bottom-nav-unread[hidden] {
    display: none !important;
}

/* Service compose final standard: let the textarea grow without internal scroll. */
body.customer-service-body {
    --service-compose-columns: max-content minmax(0, 1fr) 42px;
    --service-compose-gap: 8px;
    --service-compose-padding-x: 10px;
    --service-compose-padding-y: 9px;
    --service-compose-min-height: 60px;
    --service-compose-max-height: none;
    --service-input-min-height: 38px;
    --service-input-max-height: none;
    --service-input-font-size: 16px;
    --service-input-line-height: 1.45;
    --service-tool-size: 36px;
    --service-send-size: 42px;
}

body.customer-service-body .customer-service-compose[data-customer-service-form],
body.customer-service-body.front-input-focus-active .customer-service-compose[data-customer-service-form],
body.customer-service-body.customer-service-compose-keyboard-active .customer-service-compose[data-customer-service-form] {
    grid-template-columns: var(--service-compose-columns) !important;
    gap: var(--service-compose-gap) !important;
    align-items: end !important;
    min-height: var(--service-compose-min-height) !important;
    max-height: none !important;
    padding: var(--service-compose-padding-y) var(--service-compose-padding-x) calc(var(--service-compose-padding-y) + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
}

body.customer-service-body .customer-service-input,
body.customer-service-body.front-input-focus-active .customer-service-input,
body.customer-service-body.customer-service-compose-keyboard-active .customer-service-input {
    min-height: var(--service-input-min-height) !important;
    max-height: none !important;
    overflow: hidden !important;
    resize: none !important;
    font-size: var(--service-input-font-size) !important;
    line-height: var(--service-input-line-height) !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body {
        --service-compose-columns: max-content minmax(0, 1fr) 42px;
        --service-compose-gap: 6px;
        --service-compose-padding-x: 8px;
        --service-compose-padding-y: 7px;
        --service-compose-min-height: 56px;
        --service-tool-size: 32px;
    }

    body.customer-service-body.customer-service-compose-keyboard-active {
        --service-compose-columns: minmax(0, 1fr) 42px;
    }

    body.customer-service-body.front-input-focus-active .bottom-float-nav,
    body.customer-service-body.customer-service-compose-keyboard-active .bottom-float-nav {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-tools {
        display: none !important;
    }
}

/* Final mobile agent layout contract: adjust the inner agent card only. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-agent-body.customer-service-body .service-agent-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 2px !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 4px 0 0 !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-top-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 88px 96px !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 32px !important;
        overflow: hidden !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-title-name {
        display: flex !important;
        min-width: 0 !important;
        min-height: 32px !important;
        align-items: center !important;
        padding: 0 7px !important;
        overflow: hidden !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-presence-pill,
    body.customer-service-agent-body.customer-service-body .service-agent-settings-toggle {
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 8px !important;
        overflow: hidden !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-settings-toggle {
        gap: 4px !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-view-switch {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;
        gap: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-view-switch button {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 8px !important;
        border-radius: 0 !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-view-switch span {
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    body.customer-service-agent-body.customer-service-body .service-agent-view-switch strong,
    body.customer-service-agent-body.customer-service-body .service-agent-view-switch button.is-active strong {
        max-width: 86px !important;
        padding: 4px 8px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    body.customer-service-body.front-input-focus-active .bottom-float-nav,
    body.customer-service-body.customer-service-compose-keyboard-active .bottom-float-nav,
    body.customer-service-body:has(.customer-service-compose[data-customer-service-form]:focus-within) .bottom-float-nav {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Final mobile input scene contract: member and agent share one structure. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body {
        --customer-service-input-scene-height: var(--customer-service-viewport-height, 100dvh);
    }

    body.customer-service-body .customer-service-input-scene {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.customer-service-agent-body.customer-service-body .customer-service-input-scene {
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    }

    body.customer-service-body .customer-service-input-scene-log {
        box-sizing: border-box !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding-bottom: 4px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    body.customer-service-body .customer-service-input-scene-compose {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    body.customer-service-body.front-input-focus-active,
    body.customer-service-body.customer-service-compose-keyboard-active,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within),
    body.customer-service-body.front-input-focus-active .page-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .page-frame,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .page-frame,
    body.customer-service-body.front-input-focus-active .customer-service-page,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-page,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-page,
    body.customer-service-body.front-input-focus-active .customer-service-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-frame,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-frame,
    body.customer-service-body.front-input-focus-active .customer-service-agent-shell,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-shell,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-agent-shell,
    body.customer-service-body.front-input-focus-active .customer-service-agent-console,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-console,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-agent-console,
    body.customer-service-body.front-input-focus-active .service-agent-grid,
    body.customer-service-body.customer-service-compose-keyboard-active .service-agent-grid,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .service-agent-grid,
    body.customer-service-body.front-input-focus-active .customer-service-input-scene,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-input-scene,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-input-scene {
        box-sizing: border-box !important;
        height: var(--customer-service-input-scene-height) !important;
        min-height: var(--customer-service-input-scene-height) !important;
        max-height: var(--customer-service-input-scene-height) !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    body.customer-service-body.front-input-focus-active .customer-service-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-frame,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-frame {
        display: flex !important;
        align-items: stretch !important;
        padding: 0 !important;
    }

    body.customer-service-body.front-input-focus-active .customer-service-input-scene,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-input-scene,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-input-scene {
        grid-template-rows: minmax(0, 1fr) auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-agent-top,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-agent-top,
    body.customer-service-agent-body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .service-agent-top,
    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-agent-queue,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-agent-queue,
    body.customer-service-agent-body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .service-agent-queue {
        display: none !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-agent-grid,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-agent-grid,
    body.customer-service-agent-body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .service-agent-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-agent-chat,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-agent-chat,
    body.customer-service-agent-body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .service-agent-chat {
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    body.customer-service-body.front-input-focus-active .customer-service-input-scene-head,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-input-scene-head,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-input-scene-head,
    body.customer-service-body.front-input-focus-active .customer-service-activity-notice,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-activity-notice,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-activity-notice {
        display: none !important;
    }

    body.customer-service-body.front-input-focus-active .customer-service-input-scene-log,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-input-scene-log,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-input-scene-log {
        grid-row: 1 !important;
        min-height: 0 !important;
        padding-bottom: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-padding-bottom: 8px !important;
    }

    body.customer-service-body.front-input-focus-active .customer-service-input-scene-compose,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-input-scene-compose,
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-input-scene-compose {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: var(--service-compose-min-height, 56px) !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        box-shadow: 0 -1px 0 rgba(203, 213, 225, .92) !important;
    }

    body.customer-service-body.front-input-focus-active .customer-service-input-scene-compose:not([hidden]),
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-input-scene-compose:not([hidden]),
    body.customer-service-body:has(.customer-service-input-scene-compose:focus-within) .customer-service-input-scene-compose:not([hidden]) {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Rebuilt customer service conversation window. */
body.customer-service-body {
    --service-thread-font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
    --service-thread-body-font-size: 14px;
    --service-thread-body-font-weight: 500;
    --service-thread-body-line-height: 1.6;
    --service-thread-meta-font-size: 12px;
    --service-thread-meta-font-weight: 600;
    --service-thread-meta-line-height: 1.35;
    --service-thread-system-font-size: 12px;
    --service-thread-system-font-weight: 700;
    --service-thread-system-line-height: 1.5;
    --service-thread-input-font-size: 16px;
    --service-thread-input-font-weight: 500;
    --service-thread-input-line-height: 1.42;
    --service-thread-control-font-size: 15px;
    --service-thread-control-font-weight: 700;
    --service-thread-head-bg: #ffffff;
    --service-thread-line: #dbe5ef;
    --service-thread-surface: #f8fafc;
    --service-thread-log-bg: #eef1f5;
    --service-thread-text: #0f172a;
    --service-thread-muted: #64748b;
    --service-thread-green: #22c55e;
    --service-thread-send-size: 42px;
    --service-thread-tool-size: 36px;
    --service-thread-compose-gap: 8px;
    --service-thread-compose-y: 9px;
    --service-thread-compose-x: 10px;
    --service-member-head-height: 52px;
    --service-member-avatar-size: 40px;
    --service-member-action-size: 38px;
    --service-member-title-size: 16px;
    --service-member-hours-size: 11.5px;
}

.service-thread,
.service-thread * {
    box-sizing: border-box;
}

.service-thread {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    overflow: hidden;
    border: 1px solid var(--service-thread-line);
    border-radius: 14px;
    background: var(--service-thread-surface);
    color: var(--service-thread-text);
    font-family: var(--service-thread-font-family);
    box-shadow: none;
}

body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body)
.page-frame .customer-service-page > .customer-service-frame,
body.customer-service-body:not(.customer-service-agent-body) .customer-service-page > .customer-service-frame {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.customer-service-body:not(.customer-service-agent-body) .service-thread--member {
    overflow: hidden;
    border: 1px solid #cbd8e6;
    border-radius: 13px;
    background: var(--service-thread-surface);
    box-shadow: none;
}

.service-thread[hidden] {
    display: none !important;
}

.service-thread--agent {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.service-thread-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    padding: 7px 8px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.service-thread--member .service-thread-head {
    position: relative;
    height: var(--service-member-head-height);
    min-height: var(--service-member-head-height);
    max-height: var(--service-member-head-height);
    gap: 8px;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid rgba(15, 23, 42, .18);
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, #10b981, #14b8a6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(255, 255, 255, .16),
        0 1px 0 rgba(15, 23, 42, .08);
}

.service-thread-peer {
    display: grid;
    min-width: 0;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.service-thread--member .service-thread-peer {
    grid-template-columns: var(--service-member-avatar-size) minmax(0, 1fr);
    gap: 10px;
    align-self: center;
}

.service-thread-avatar {
    position: relative;
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 100%);
    color: #1d4ed8;
    font-size: 17px;
    font-weight: 950;
    box-shadow: 0 8px 16px rgba(37, 99, 235, .18), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.service-thread-avatar--level {
    box-sizing: border-box;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.service-thread-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.service-thread-avatar--level:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

.service-thread-avatar--level:disabled {
    cursor: default;
}

.service-thread--member .service-thread-avatar {
    width: var(--service-member-avatar-size);
    height: var(--service-member-avatar-size);
    flex-basis: var(--service-member-avatar-size);
    border-color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .94);
    color: #0f766e;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .96);
}

.service-thread-avatar svg,
.service-thread-action svg,
.service-thread-tool svg,
.service-thread-send svg,
.service-thread-voice svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.service-thread-avatar-state {
    position: absolute;
    left: 50%;
    bottom: -6px;
    z-index: 2;
    display: inline-flex;
    min-width: 30px;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    font-size: 7px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    transform: translateX(-50%);
}

.service-thread-avatar-state[data-status-type="offline"] {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.service-thread--member .service-thread-avatar-state {
    bottom: -3px;
    min-width: 36px;
    padding: 1px 4px;
    font-size: 7.5px;
}

.service-thread-peer-copy {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 3px;
    overflow: hidden;
}

.service-thread-title {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-thread--member .service-thread-title,
.service-thread--member .service-thread-hours,
.service-thread--member .service-thread-status {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(15, 23, 42, .16);
}

.service-thread--member .service-thread-peer-copy {
    display: grid;
    align-content: center;
    align-items: start;
    gap: 3px;
}

.service-thread--member .service-thread-title {
    font-size: var(--service-member-title-size);
    line-height: 1.05;
}

.service-thread--member .service-thread-hours {
    font-size: var(--service-member-hours-size);
    line-height: 1.1;
}

.service-thread-hours,
.service-thread-status {
    min-width: 0;
    overflow: hidden;
    color: var(--service-thread-muted);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-thread-status {
    display: inline-flex;
    width: max-content;
    max-width: 74px;
    min-height: 18px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    line-height: 18px;
}

.service-thread-status[data-status-type="online"] {
    background: #dcfce7;
    color: #15803d;
}

.service-thread-status[data-status-type="offline"] {
    background: #e2e8f0;
    color: #475569;
}

.service-thread-status[data-status-type="typing"],
.service-thread-status.is-typing {
    background: #fef3c7;
    color: #92400e;
}

.service-thread-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
}

.service-thread-action,
.service-thread-tool,
.service-thread-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    line-height: 1;
}

.service-thread-action {
    min-width: 34px;
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.service-thread-action--score {
    gap: 5px;
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.service-thread-action--danger {
    width: 34px;
    min-width: 34px;
    padding: 0;
    border-color: #fecaca;
    background: #fff1f2;
    color: #dc2626;
}

.service-thread--member .service-thread-action--danger {
    width: var(--service-member-action-size);
    min-width: var(--service-member-action-size);
    height: var(--service-member-action-size);
    min-height: var(--service-member-action-size);
    border-color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .94);
}

.service-thread--member .service-thread-action--danger svg {
    width: 18px;
    height: 18px;
}

.service-thread-block-controls[hidden] {
    display: none !important;
}

.service-thread-block-controls select {
    width: 100px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    padding: 0 24px 0 10px;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
}

.service-thread-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin: 6px 10px 0;
    padding: 4px 10px;
    max-width: calc(100% - 20px);
    overflow: hidden;
    border: 1px solid rgba(251, 146, 60, .28);
    border-radius: 999px;
    background: linear-gradient(180deg, #fff7ed 0%, #fffbeb 100%);
    color: #7c2d12;
}

.service-thread-notice[hidden] {
    display: none !important;
}

.service-thread-notice strong {
    display: inline-flex;
    height: 20px;
    align-items: center;
    flex: 0 0 auto;
    color: #c2410c;
    font-size: 12.5px;
    font-weight: 950;
    line-height: 20px;
    white-space: nowrap;
}

.service-thread-notice span {
    display: block;
    height: 20px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #7c2d12;
    font-size: 14px;
    font-weight: 820;
    line-height: 20px;
    white-space: nowrap;
}

.service-thread-notice em {
    display: inline-block;
    min-width: 100%;
    max-width: none;
    padding-left: 100%;
    overflow: hidden;
    animation: customer-service-notice-marquee var(--customer-service-notice-duration, 30s) linear infinite;
    font-style: normal;
    line-height: 20px;
    vertical-align: top;
    white-space: nowrap;
    will-change: transform;
}

@keyframes customer-service-notice-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.service-thread-log {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px;
    background: var(--service-thread-log-bg);
    overscroll-behavior: contain;
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch;
}

.service-thread-log > * {
    overflow-anchor: none;
}

.service-thread-date {
    align-self: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(100, 116, 139, .16);
    color: #64748b;
    font-size: var(--service-thread-system-font-size);
    font-weight: var(--service-thread-system-font-weight);
    line-height: var(--service-thread-system-line-height);
}

.service-thread-system {
    display: flex;
    justify-content: center;
    width: 100%;
}

.service-thread-system-pill {
    max-width: min(86%, 520px);
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(100, 116, 139, .16);
    color: #64748b;
    font-size: var(--service-thread-system-font-size);
    font-weight: var(--service-thread-system-font-weight);
    line-height: var(--service-thread-system-line-height);
    text-align: center;
}

.service-thread-message {
    display: flex;
    width: 100%;
}

.service-thread-message.is-self {
    justify-content: flex-end;
}

.service-thread-message.is-peer {
    justify-content: flex-start;
}

.service-thread-message-wrap {
    display: grid;
    gap: 5px;
}

.service-thread-meta {
    display: flex;
    gap: 8px;
    color: #94a3b8;
    font-size: var(--service-thread-meta-font-size);
    font-weight: var(--service-thread-meta-font-weight);
    line-height: var(--service-thread-meta-line-height);
}

.service-thread-message.is-self .service-thread-meta {
    justify-content: flex-end;
}

.service-thread-recall {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.service-thread-recall:hover,
.service-thread-recall:focus-visible {
    color: #dc2626;
    outline: none;
}

.service-thread-recall:disabled {
    cursor: default;
    opacity: 0.55;
}

.service-thread-bubble {
    width: fit-content;
    padding: 9px 12px;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: none;
    font-size: var(--service-thread-body-font-size);
    font-weight: var(--service-thread-body-font-weight);
    line-height: var(--service-thread-body-line-height);
    overflow-wrap: anywhere;
}

.service-thread-message.is-self .service-thread-bubble {
    justify-self: end;
    background: #8ee95b;
}

.service-thread-bubble.is-emoji {
    background: transparent;
    box-shadow: none;
    font-size: 32px;
    line-height: 1.1;
}

.service-thread-image-open {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.service-thread-bubble img {
    display: block;
    max-height: 360px;
    border-radius: 10px;
    object-fit: cover;
}

.service-thread-voice {
    display: inline-flex;
    min-width: 132px;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.service-thread-bubble audio {
    display: block;
    width: min(240px, 60vw);
    margin-top: 8px;
}

.service-thread-empty {
    margin: auto;
    max-width: 320px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    color: #64748b;
    padding: 14px 16px;
    text-align: center;
    font-size: var(--service-thread-body-font-size);
    font-weight: var(--service-thread-body-font-weight);
    line-height: var(--service-thread-body-line-height);
}

.service-thread-composer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) var(--service-thread-send-size);
    gap: var(--service-thread-compose-gap);
    align-items: end;
    min-width: 0;
    min-height: 60px;
    padding: var(--service-thread-compose-y) var(--service-thread-compose-x) calc(var(--service-thread-compose-y) + env(safe-area-inset-bottom));
    border-top: 1px solid #d7dee8;
    background: #f8fafc;
}

.service-thread-composer[hidden] {
    display: none !important;
}

.service-thread-tools {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--service-thread-tool-size);
    gap: 6px;
    align-items: end;
    justify-content: start;
    min-width: 0;
    padding-bottom: 1px;
}

.service-thread-tool,
.service-thread-send {
    box-sizing: border-box;
    width: var(--service-thread-tool-size);
    height: var(--service-thread-tool-size);
    min-width: var(--service-thread-tool-size);
    min-height: var(--service-thread-tool-size);
    border-radius: 10px;
    background: #e2e8f0;
    color: #334155;
    font-size: 15px;
}

.service-thread-send {
    width: var(--service-thread-send-size);
    height: var(--service-thread-send-size);
    min-width: var(--service-thread-send-size);
    min-height: var(--service-thread-send-size);
    background: #22c55e;
    color: #ffffff;
}

.service-thread-send:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.service-thread-input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    max-height: none;
    margin: 0;
    padding: 8px 10px;
    overflow: hidden;
    resize: none;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.42;
    outline: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.service-thread-input:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}

.service-thread-emoji-panel {
    position: absolute;
    overflow-y: auto;
}

.service-thread-emoji-panel[hidden] {
    display: none !important;
}

.service-thread-locked {
    box-sizing: border-box;
    min-height: 42px;
    padding: 10px 12px;
    border-top: 1px solid #d7dee8;
    background: #fff7ed;
    color: #9a3412;
    font-size: 13px;
    font-weight: 850;
    text-align: center;
}

.service-thread-locked[hidden] {
    display: none !important;
}

.service-thread-placeholder {
    display: grid;
    min-height: 420px;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 28px 18px;
    text-align: center;
}

.service-thread-placeholder-icon {
    display: inline-flex;
    width: 62px;
    height: 62px;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #22c55e;
    color: #ffffff;
    font-size: 24px;
}

.service-thread-placeholder h2 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    font-weight: 900;
}

.service-thread-placeholder p {
    max-width: 360px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.8;
}

.service-thread-placeholder-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.service-thread-placeholder-actions a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #22c55e;
    color: #ffffff;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.service-thread-placeholder-actions a + a {
    background: #0ea5e9;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body {
        --service-thread-send-size: 42px;
        --service-thread-tool-size: 34px;
        --service-thread-compose-gap: 6px;
        --service-thread-compose-y: 8px;
        --service-thread-compose-x: 10px;
        --service-thread-keyboard-height: var(--customer-service-viewport-height, 100dvh);
    }

    .service-thread {
        border: 1px solid #cbd8e6;
        border-radius: 12px;
        box-shadow: none;
    }

    body.customer-service-agent-body .service-thread--agent {
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body .customer-service-agent-console.is-chat-view .service-agent-grid {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body .customer-service-agent-console.is-chat-view #service-agent-chat.service-thread--agent,
    body.customer-service-agent-body.customer-service-body .customer-service-agent-console.is-queue-view #service-agent-queue.service-agent-queue {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .service-thread-head {
        min-height: 44px;
        padding: 6px;
    }

    .service-thread-peer {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 6px;
    }

    .service-thread-avatar {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        border-radius: 9px;
        font-size: 16px;
    }

    .service-thread-title {
        font-size: 13px;
    }

    .service-thread-status {
        max-width: 64px;
        min-height: 16px;
        padding: 0 5px;
        font-size: 10px;
        line-height: 16px;
    }

    .service-thread--member .service-thread-head {
        height: var(--service-member-head-height);
        min-height: var(--service-member-head-height);
        max-height: var(--service-member-head-height);
        gap: 8px;
        padding: 6px 8px;
    }

    .service-thread--member .service-thread-peer {
        grid-template-columns: var(--service-member-avatar-size) minmax(0, 1fr);
        gap: 8px;
    }

    .service-thread--member .service-thread-avatar {
        width: var(--service-member-avatar-size);
        height: var(--service-member-avatar-size);
        flex-basis: var(--service-member-avatar-size);
        font-size: 17px;
    }

    .service-thread--member .service-thread-title {
        font-size: var(--service-member-title-size);
    }

    .service-thread--member .service-thread-hours {
        font-size: var(--service-member-hours-size);
    }

    .service-thread--member .service-thread-action--danger {
        width: var(--service-member-action-size);
        min-width: var(--service-member-action-size);
        height: var(--service-member-action-size);
        min-height: var(--service-member-action-size);
    }

    .service-thread--agent .service-thread-head {
        grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
        gap: 5px;
    }

    .service-thread-actions--agent {
        gap: 5px;
    }

    .service-thread-log {
        gap: 10px;
        padding: 12px 10px;
    }

    .service-thread-message-wrap {
        max-width: 84%;
    }

    .service-thread-bubble {
        font-size: var(--service-thread-body-font-size);
    }

    .service-thread-composer {
        min-height: 58px;
        grid-template-columns: max-content minmax(0, 1fr) var(--service-thread-send-size);
    }

    .service-thread-tool,
    .service-thread-send {
        border-radius: 10px;
        font-size: var(--service-thread-control-font-size);
    }

    .service-thread-input {
        min-height: 40px;
        font-size: var(--service-thread-input-font-size);
    }

    body.customer-service-body.front-input-focus-active .bottom-float-nav,
    body.customer-service-body.customer-service-compose-keyboard-active .bottom-float-nav,
    body.customer-service-body:has(.service-thread-composer:focus-within) .bottom-float-nav {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.customer-service-body.front-input-focus-active,
    body.customer-service-body.customer-service-compose-keyboard-active,
    body.customer-service-body:has(.service-thread-composer:focus-within),
    body.customer-service-body.front-input-focus-active .page-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .page-frame,
    body.customer-service-body:has(.service-thread-composer:focus-within) .page-frame,
    body.customer-service-body.front-input-focus-active .customer-service-page,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-page,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-page,
    body.customer-service-body.front-input-focus-active .customer-service-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-frame,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-frame,
    body.customer-service-body.front-input-focus-active .customer-service-agent-shell,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-shell,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-agent-shell,
    body.customer-service-body.front-input-focus-active .customer-service-agent-console,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-console,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-agent-console,
    body.customer-service-body.front-input-focus-active .service-agent-grid,
    body.customer-service-body.customer-service-compose-keyboard-active .service-agent-grid,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-agent-grid,
    body.customer-service-body.front-input-focus-active .service-thread,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread {
        box-sizing: border-box !important;
        height: var(--service-thread-keyboard-height) !important;
        min-height: var(--service-thread-keyboard-height) !important;
        max-height: var(--service-thread-keyboard-height) !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    body.customer-service-body.front-input-focus-active .customer-service-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-frame,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-frame {
        display: flex !important;
        align-items: stretch !important;
        padding: 0 !important;
    }

    body.customer-service-body.front-input-focus-active .service-thread,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread {
        grid-template-rows: minmax(0, 1fr) auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
    }

    body.customer-service-body.front-input-focus-active .service-thread-head,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread-head,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-head,
    body.customer-service-body.front-input-focus-active .service-thread-notice,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread-notice,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-notice {
        display: none !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-agent-top,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-agent-top,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .service-agent-top,
    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-agent-queue,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-agent-queue,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .service-agent-queue {
        display: none !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-agent-grid,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-agent-grid,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .service-agent-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    body.customer-service-body.front-input-focus-active .service-thread-log,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread-log,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-log {
        grid-row: 1 !important;
        min-height: 0 !important;
        padding-bottom: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-padding-bottom: 8px !important;
    }

    body.customer-service-body.front-input-focus-active .service-thread-composer,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread-composer,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-composer {
        grid-row: 2 !important;
        grid-template-columns: minmax(0, 1fr) var(--service-thread-send-size) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 -1px 0 rgba(203, 213, 225, .92) !important;
    }

    body.customer-service-body.front-input-focus-active .service-thread-tools,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread-tools,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-tools {
        display: none !important;
    }
}

/* Final member service title contract: keep title, status and action proportional. */
body.customer-service-body:not(.customer-service-agent-body) .service-thread--member > .service-thread-head {
    box-sizing: border-box !important;
    height: var(--service-member-head-height) !important;
    min-height: var(--service-member-head-height) !important;
    max-height: var(--service-member-head-height) !important;
    padding: 6px 8px !important;
}

body.customer-service-body.front-input-focus-active .service-thread-composer--unified,
body.customer-service-body.customer-service-compose-keyboard-active .service-thread-composer--unified,
body.customer-service-body:has(.service-thread-composer--unified:focus-within) .service-thread-composer--unified {
    grid-template-columns: max-content minmax(0, 1fr) var(--service-thread-send-size) !important;
}

body.customer-service-body.front-input-focus-active .service-thread-composer--unified .service-thread-tools,
body.customer-service-body.customer-service-compose-keyboard-active .service-thread-composer--unified .service-thread-tools,
body.customer-service-body:has(.service-thread-composer--unified:focus-within) .service-thread-composer--unified .service-thread-tools {
    display: inline-grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.customer-service-body .service-thread-composer--unified .service-thread-tool,
body.customer-service-body .service-thread-composer--unified .service-thread-tool * {
    pointer-events: auto !important;
}

/* Keep the rebuilt member service scene centered inside the shared front shell. */
body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .front-unified-page.customer-service-page {
    align-self: center !important;
    width: var(--front-inner-width, min(100%, 708px)) !important;
    max-width: var(--page-inner-width, 708px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .customer-service-frame,
body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .service-thread--member {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .customer-service-frame {
    display: flex !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .service-thread--member {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .service-thread--member > .service-thread-log {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .service-thread--member > .service-thread-composer--member {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body {
        --service-member-head-height: 50px;
        --service-member-avatar-size: 38px;
        --service-member-action-size: 36px;
        --service-member-title-size: 15px;
        --service-member-hours-size: 11px;
    }

    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .front-unified-page.customer-service-page {
        align-self: center !important;
    }

    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .customer-service-frame,
    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .service-thread--member,
    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .service-thread-log,
    body.customer-service-body.front-unified-panel-page:not(.customer-service-agent-body):not(.customer-service-embed-body) .service-thread-composer--member {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}


@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-agent-body.customer-service-body.front-input-focus-active .page-frame,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .page-frame,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .page-frame,
    body.customer-service-agent-body.customer-service-body.front-input-focus-active .customer-service-page,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .customer-service-page,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-page,
    body.customer-service-agent-body.customer-service-body.front-input-focus-active .customer-service-agent-shell,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-shell,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-agent-shell,
    body.customer-service-agent-body.customer-service-body.front-input-focus-active .customer-service-agent-console,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-console,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-agent-console,
    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-agent-grid,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-agent-grid,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .service-agent-grid,
    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-thread--agent,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-thread--agent,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread--agent {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-thread-log,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-thread-log,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-log {
        padding-right: 0 !important;
        padding-left: 0 !important;
        scroll-padding-right: 0 !important;
        scroll-padding-left: 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-thread-composer--agent,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-thread-composer--agent,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within) .service-thread-composer--agent {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-thread-log::-webkit-scrollbar,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-thread-log::-webkit-scrollbar,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-log::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* Mobile service-thread keyboard contract: keep the composer inside the visible viewport. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body.front-input-focus-active .top-bar,
    body.customer-service-body.front-input-focus-active .top-bar-spacer,
    body.customer-service-body.customer-service-compose-keyboard-active .top-bar,
    body.customer-service-body.customer-service-compose-keyboard-active .top-bar-spacer,
    body.customer-service-body:has(.service-thread-composer:focus-within) .top-bar,
    body.customer-service-body:has(.service-thread-composer:focus-within) .top-bar-spacer,
    body.customer-service-body.front-input-focus-active .bottom-float-nav,
    body.customer-service-body.customer-service-compose-keyboard-active .bottom-float-nav,
    body.customer-service-body:has(.service-thread-composer:focus-within) .bottom-float-nav {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.customer-service-body.front-input-focus-active .page-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .page-frame,
    body.customer-service-body:has(.service-thread-composer:focus-within) .page-frame {
        position: fixed !important;
        top: var(--customer-service-viewport-top, 0) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        box-sizing: border-box !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body.customer-service-body.front-input-focus-active .customer-service-page,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-page,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-page,
    body.customer-service-body.front-input-focus-active .customer-service-frame,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-frame,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-frame,
    body.customer-service-body.front-input-focus-active .customer-service-agent-shell,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-shell,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-agent-shell,
    body.customer-service-body.front-input-focus-active .customer-service-agent-console,
    body.customer-service-body.customer-service-compose-keyboard-active .customer-service-agent-console,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-agent-console,
    body.customer-service-body.front-input-focus-active .service-agent-grid,
    body.customer-service-body.customer-service-compose-keyboard-active .service-agent-grid,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-agent-grid,
    body.customer-service-body.front-input-focus-active .service-thread,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread {
        box-sizing: border-box !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.customer-service-body.front-input-focus-active .service-thread,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread {
        grid-template-rows: minmax(0, 1fr) auto !important;
        border-radius: 0 !important;
    }

    body.customer-service-body.front-input-focus-active .service-thread-composer,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread-composer,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-composer {
        grid-row: 2 !important;
        position: relative !important;
        z-index: 12070 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        overflow: visible !important;
        border-radius: 0 !important;
        box-shadow: 0 -1px 0 rgba(203, 213, 225, .92) !important;
    }

    body.customer-service-body.front-input-focus-active .service-thread-emoji-panel,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread-emoji-panel,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-emoji-panel {
        z-index: 12080 !important;
        right: 8px !important;
        bottom: calc(100% + 8px) !important;
        max-height: min(44vh, 320px) !important;
    }
}

/* Standardize the rebuilt service composer across member and agent views. */
body.customer-service-body .service-thread-composer {
    --service-thread-compose-pad-x: 10px;
    --service-thread-compose-pad-y: 8px;
    --service-thread-input-min-height: 40px;
    box-sizing: border-box !important;
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: max-content minmax(0, 1fr) var(--service-thread-send-size) !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    gap: var(--service-thread-compose-gap, 6px) !important;
    min-width: 0 !important;
    min-height: calc(var(--service-thread-input-min-height) + (var(--service-thread-compose-pad-y) * 2)) !important;
    margin: 0 !important;
    padding: var(--service-thread-compose-pad-y) var(--service-thread-compose-pad-x) calc(var(--service-thread-compose-pad-y) + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    border-top: 1px solid #d7dee8 !important;
    background: #f8fafc !important;
    font-family: var(--service-thread-font-family) !important;
}

body.customer-service-body > .service-thread-native-image-input[data-customer-service-image][data-customer-service-image-detached="1"] {
    position: fixed !important;
    top: 0 !important;
    left: -10000px !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

body.customer-service-body [data-customer-service-image-trigger] {
    position: relative !important;
    overflow: hidden !important;
}

body.customer-service-body .service-thread-tools {
    display: inline-grid !important;
    grid-template-columns: repeat(3, var(--service-thread-tool-size)) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--service-thread-tool-size) !important;
    justify-self: start !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 6px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: max-content !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.customer-service-body .service-thread-tool,
body.customer-service-body .service-thread-send {
    display: inline-flex !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    font-size: var(--service-thread-control-font-size) !important;
    font-weight: var(--service-thread-control-font-weight) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.customer-service-body .service-thread-tool {
    width: var(--service-thread-tool-size) !important;
    min-width: var(--service-thread-tool-size) !important;
    max-width: var(--service-thread-tool-size) !important;
    height: var(--service-thread-tool-size) !important;
    min-height: var(--service-thread-tool-size) !important;
    max-height: var(--service-thread-tool-size) !important;
    background: #e8eef6 !important;
    color: #334155 !important;
}

body.customer-service-body .service-thread-send {
    width: var(--service-thread-send-size) !important;
    min-width: var(--service-thread-send-size) !important;
    max-width: var(--service-thread-send-size) !important;
    height: var(--service-thread-send-size) !important;
    min-height: var(--service-thread-send-size) !important;
    max-height: var(--service-thread-send-size) !important;
    background: #22c55e !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(34, 197, 94, .22) !important;
}

body.customer-service-body .service-thread-tool:hover,
body.customer-service-body .service-thread-tool:focus-visible {
    border-color: #b9c8da !important;
    background: #dbe7f4 !important;
    color: #0f172a !important;
}

body.customer-service-body .service-thread-tool:active,
body.customer-service-body .service-thread-tool[data-customer-service-voice][aria-pressed="true"],
body.customer-service-body .service-thread-tool[data-customer-service-emoji-toggle][aria-expanded="true"] {
    border-color: #86efac !important;
    background: #dcfce7 !important;
    color: #15803d !important;
}

body.customer-service-body .service-thread-tool.is-recording,
body.customer-service-body .service-thread-tool[data-customer-service-voice].is-recording {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

body.customer-service-body .service-thread-send:hover,
body.customer-service-body .service-thread-send:focus-visible {
    background: #16a34a !important;
}

body.customer-service-body .service-thread-send:disabled {
    cursor: not-allowed !important;
    opacity: .55 !important;
    box-shadow: none !important;
}

body.customer-service-body .service-thread-tool svg,
body.customer-service-body .service-thread-send svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    pointer-events: none !important;
}

body.customer-service-body .service-thread-input {
    box-sizing: border-box !important;
    display: block !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--service-thread-input-min-height) !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    resize: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -ms-overflow-style: none;
    scrollbar-gutter: auto;
    scrollbar-width: none;
    border: 1px solid #dbe5ef !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-family: var(--service-thread-font-family) !important;
    font-size: var(--service-thread-input-font-size) !important;
    font-weight: var(--service-thread-input-font-weight) !important;
    line-height: var(--service-thread-input-line-height) !important;
    outline: none !important;
    box-shadow: none !important;
}

body.customer-service-body .service-thread-input::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

body.customer-service-body .service-thread-input::placeholder {
    color: #94a3b8 !important;
    font: inherit !important;
    opacity: 1 !important;
}

body.customer-service-body .service-thread-input:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14) !important;
}

body.customer-service-body .service-thread-voice-hold {
    box-sizing: border-box !important;
    display: none !important;
    grid-column: 2 / -1 !important;
    align-self: center !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--service-thread-input-min-height) !important;
    min-height: var(--service-thread-input-min-height) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #dbe5ef !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #334155 !important;
    cursor: pointer !important;
    font-family: var(--service-thread-font-family) !important;
    font-size: var(--service-thread-control-font-size) !important;
    font-weight: var(--service-thread-control-font-weight) !important;
    line-height: 1 !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.customer-service-body .service-thread-voice-hold[hidden] {
    display: none !important;
}

body.customer-service-body .service-thread-composer[data-customer-service-voice-mode="1"] .service-thread-input,
body.customer-service-body .service-thread-composer[data-customer-service-voice-mode="1"] .service-thread-send {
    display: none !important;
}

body.customer-service-body .service-thread-composer[data-customer-service-voice-mode="1"] .service-thread-voice-hold:not([hidden]) {
    display: inline-flex !important;
}

body.customer-service-body .service-thread-voice-hold:focus-visible {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14) !important;
    outline: none !important;
}

body.customer-service-body .service-thread-voice-hold.is-recording {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #ffffff !important;
}

body.customer-service-body .service-thread-emoji-panel {
    right: var(--service-thread-compose-pad-x, 10px) !important;
    bottom: calc(100% + 8px) !important;
    left: auto !important;
    z-index: 12080 !important;
    box-sizing: border-box !important;
    display: grid !important;
    width: min(336px, calc(100% - (var(--service-thread-compose-pad-x, 10px) * 2))) !important;
    max-width: calc(100% - 16px) !important;
    max-height: min(48vh, 360px) !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    gap: 6px !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 1px solid #dbe5ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .16) !important;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

body.customer-service-body .service-thread-emoji-panel[hidden] {
    display: none !important;
}

body.customer-service-body .service-thread-emoji-panel button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #f1f5f9 !important;
    cursor: pointer !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.customer-service-body .service-thread-emoji-panel button:hover,
body.customer-service-body .service-thread-emoji-panel button:focus-visible {
    background: #dcfce7 !important;
}

body.customer-service-body .service-thread-bubble.is-emoji {
    display: inline-flex !important;
    box-sizing: border-box !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    overflow: hidden !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body {
        --service-thread-tool-size: 34px;
        --service-thread-send-size: 42px;
        --service-thread-compose-gap: 6px;
    }

    body.customer-service-body .service-thread-composer {
        --service-thread-compose-pad-x: 8px;
        --service-thread-compose-pad-y: 8px;
        grid-template-columns: max-content minmax(0, 1fr) var(--service-thread-send-size) !important;
        min-height: 58px !important;
        padding-right: var(--service-thread-compose-pad-x) !important;
        padding-left: var(--service-thread-compose-pad-x) !important;
        border-radius: 0 !important;
    }

    body.customer-service-body .service-thread-tools {
        grid-template-columns: repeat(3, var(--service-thread-tool-size)) !important;
        grid-auto-columns: var(--service-thread-tool-size) !important;
        gap: 4px !important;
    }

    body.customer-service-body .service-thread-tool,
    body.customer-service-body .service-thread-send,
    body.customer-service-body .service-thread-input,
    body.customer-service-body .service-thread-voice-hold {
        border-radius: 9px !important;
    }

    body.customer-service-body .service-thread-emoji-panel {
        right: 8px !important;
        width: calc(100% - 16px) !important;
        max-width: 336px !important;
        max-height: min(44vh, 320px) !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-auto-rows: 42px !important;
        gap: 6px !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    body.customer-service-body .service-thread-bubble.is-emoji {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        font-size: 29px !important;
    }

    body.customer-service-body.front-input-focus-active .service-thread-composer,
    body.customer-service-body.customer-service-compose-keyboard-active .service-thread-composer,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-composer {
        grid-row: 4 !important;
        grid-template-columns: max-content minmax(0, 1fr) var(--service-thread-send-size) !important;
        z-index: 12070 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;
        overflow: visible !important;
    }
}

/* Service entrances inherit root shell geometry from front-floating.css.
   Keep this file scoped to the service content surface. */
body.customer-service-body:not(.customer-service-embed-body) {
    background: #f3f4f6 !important;
    color-scheme: light !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-page,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-frame,
body.front-unified-panel-page.customer-service-agent-login-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-login-page,
body.front-unified-panel-page.customer-service-agent-login-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-login-frame {
    box-sizing: border-box !important;
    width: var(--front-inner-width, min(var(--page-inner-width, 708px), calc(100vw - (var(--page-side-gap, 6px) * 2)))) !important;
    max-width: var(--page-inner-width, 708px) !important;
    min-height: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-frame {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-page,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-frame,
    body.front-unified-panel-page.customer-service-agent-login-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-login-page,
    body.front-unified-panel-page.customer-service-agent-login-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-login-frame {
        width: var(--front-inner-width, calc(100vw - (var(--page-side-gap, 6px) * 2))) !important;
    }
}

/* Rebuilt service-thread input contract: do not switch the conversation to fullscreen while typing. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within),
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within),
    body.customer-service-body:has(.service-thread-composer:focus-within) {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .page-frame,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .page-frame,
    body.customer-service-body:has(.service-thread-composer:focus-within) .page-frame {
        position: static !important;
        inset: auto !important;
        box-sizing: border-box !important;
        width: var(--service-agent-public-width, var(--front-inner-width, min(100%, 708px))) !important;
        max-width: var(--page-inner-width, 708px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
        overflow: visible !important;
        transform: none !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .page-frame,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .page-frame,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .page-frame {
        display: flex !important;
        padding: 8px 0 calc(var(--front-bottom-nav-height, 64px) + var(--front-bottom-nav-bottom, 2px) + env(safe-area-inset-bottom)) !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .customer-service-page,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .customer-service-page,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-page,
    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .customer-service-frame,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .customer-service-frame,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-frame,
    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .customer-service-agent-shell,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .customer-service-agent-shell,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-agent-shell,
    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .customer-service-agent-console,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .customer-service-agent-console,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-agent-console,
    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-agent-grid,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-agent-grid,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-agent-grid,
    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
        overflow: visible !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .customer-service-frame,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .customer-service-frame,
    body.customer-service-body:has(.service-thread-composer:focus-within) .customer-service-frame {
        display: flex !important;
        align-items: stretch !important;
        padding: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-agent-top,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-agent-top,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .service-agent-top {
        display: flex !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread-head,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread-head,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-head {
        display: grid !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread-notice:not([hidden]),
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread-notice:not([hidden]),
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-notice:not([hidden]) {
        display: flex !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread {
        grid-template-rows: auto auto minmax(180px, 1fr) auto auto !important;
        border-radius: 13px !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread-head,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread-head,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-head {
        grid-row: 1 !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread-notice,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread-notice,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-notice {
        grid-row: 2 !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread-log,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread-log,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-log {
        grid-row: 3 !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread-composer,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread-composer,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-composer {
        grid-row: 4 !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread--agent,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread--agent,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread--agent {
        grid-template-rows: auto minmax(180px, 1fr) auto !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread--agent .service-thread-log,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread--agent .service-thread-log,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread--agent .service-thread-log {
        grid-row: 2 !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread--agent .service-thread-composer,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread--agent .service-thread-composer,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread--agent .service-thread-composer {
        grid-row: 3 !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread-log,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread-log,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-log {
        min-height: 180px !important;
        padding-bottom: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-padding-bottom: 78px !important;
    }

    body.customer-service-body.front-input-focus-active:has(.service-thread-composer:focus-within) .service-thread-composer,
    body.customer-service-body.customer-service-compose-keyboard-active:has(.service-thread-composer:focus-within) .service-thread-composer,
    body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread-composer {
        position: sticky !important;
        top: auto !important;
        right: auto !important;
        bottom: max(0px, env(safe-area-inset-bottom)) !important;
        left: auto !important;
        z-index: 12 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 0 13px 13px !important;
        box-shadow: 0 -1px 0 rgba(203, 213, 225, .92) !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .page-frame {
        height: var(--customer-service-viewport-height, auto) !important;
        min-height: var(--customer-service-viewport-height, 0) !important;
        max-height: var(--customer-service-viewport-height, none) !important;
        overflow: hidden !important;
    }

    body.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .customer-service-page,
    body.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .customer-service-frame,
    body.customer-service-body.customer-service-compose-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .service-thread {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    html.customer-service-ios-keyboard-active-root,
    html.customer-service-ios-keyboard-active-root body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) {
        height: var(--customer-service-layout-height, 100dvh) !important;
        min-height: var(--customer-service-layout-height, 100dvh) !important;
        max-height: var(--customer-service-layout-height, 100dvh) !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .page-frame {
        position: fixed !important;
        top: var(--customer-service-viewport-top, 0px) !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: var(--service-agent-public-width, var(--front-inner-width, min(100vw, 708px))) !important;
        max-width: min(100vw, var(--page-inner-width, 708px)) !important;
        height: var(--customer-service-layout-height, 100dvh) !important;
        min-height: var(--customer-service-layout-height, 100dvh) !important;
        max-height: var(--customer-service-layout-height, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .customer-service-page,
    body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .customer-service-frame,
    body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .service-thread {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .service-thread {
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    }

    body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .service-thread-log {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body):has(.service-thread-composer:focus-within) .service-thread-composer {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-thread--agent,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-thread--agent,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread--agent {
        height: min(680px, calc(100dvh - 104px)) !important;
        max-height: calc(100dvh - 104px) !important;
        overflow: hidden !important;
    }

    body.customer-service-agent-body.customer-service-body.front-input-focus-active .service-thread--agent > .service-thread-log,
    body.customer-service-agent-body.customer-service-body.customer-service-compose-keyboard-active .service-thread--agent > .service-thread-log,
    body.customer-service-agent-body.customer-service-body:has(.service-thread-composer:focus-within) .service-thread--agent > .service-thread-log {
        min-height: 0 !important;
    }
}

/* Rebuilt service-thread base order contract. */
body.customer-service-body .service-thread > .service-thread-head {
    grid-row: 1 !important;
}

body.customer-service-body .service-thread > .service-thread-notice {
    grid-row: 2 !important;
}

body.customer-service-body .service-thread > .service-thread-log {
    grid-row: 3 !important;
}

body.customer-service-body .service-thread > .service-thread-composer {
    grid-row: 4 !important;
}

body.customer-service-body .service-thread--agent > .service-thread-log {
    grid-row: 2 !important;
}

body.customer-service-body .service-thread--agent > .service-thread-composer {
    grid-row: 3 !important;
}

/* Embedded post-service modal keeps the outer modal title as the single header. */
html:has(body.customer-service-embed-body) {
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
    scrollbar-gutter: auto !important;
}

body.customer-service-body.customer-service-embed-body {
    --service-embed-notice-height: 34px;
    --service-embed-composer-height: 60px;
    --service-embed-log-gap: 12px;
    --service-embed-log-pad-x: 14px;
    --service-embed-log-pad-y: 12px;
}

@media (min-width: 601px) {
    body.customer-service-body.customer-service-embed-body {
        --service-thread-body-font-size: 15px;
        --service-thread-meta-font-size: 13px;
        --service-thread-system-font-size: 12.5px;
        --service-thread-control-font-size: 16px;
        --service-thread-tool-size: 38px;
        --service-thread-send-size: 44px;
        --service-thread-compose-gap: 8px;
        --service-embed-notice-height: 38px;
        --service-embed-composer-height: 64px;
        --service-embed-log-gap: 14px;
        --service-embed-log-pad-x: 16px;
        --service-embed-log-pad-y: 14px;
    }

    body.customer-service-embed-body .service-thread--member > .service-thread-notice {
        margin: 7px 12px 0 !important;
        padding: 5px 12px !important;
    }

    body.customer-service-embed-body .service-thread--member > .service-thread-notice strong {
        height: 22px;
        font-size: 13.5px;
        line-height: 22px;
    }

    body.customer-service-embed-body .service-thread--member > .service-thread-notice span,
    body.customer-service-embed-body .service-thread--member > .service-thread-notice em {
        height: 22px;
        font-size: 15px;
        line-height: 22px;
    }

    body.customer-service-embed-body .service-thread--member .service-thread-bubble {
        padding: 10px 14px;
        border-radius: 15px;
    }

    body.customer-service-embed-body .service-thread--member > .service-thread-composer {
        --service-thread-compose-pad-x: 12px;
        --service-thread-compose-pad-y: 10px;
        --service-thread-input-min-height: 44px;
    }

    body.customer-service-embed-body .service-thread--member .service-thread-input {
        padding: 9px 12px !important;
    }
}

body.customer-service-embed-body .service-thread--member {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-self: stretch !important;
    overflow: hidden !important;
}

body.customer-service-embed-body .service-thread--member > .service-thread-head {
    display: none !important;
}

body.customer-service-embed-body .service-thread--member > .service-thread-notice {
    grid-row: 1 !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    min-height: var(--service-embed-notice-height) !important;
    margin: 6px 10px 0 !important;
    padding: 4px 10px !important;
}

body.customer-service-embed-body .service-thread--member > .service-thread-log,
body.customer-service-embed-body .service-thread--member > .service-thread-placeholder {
    grid-row: 2 !important;
    order: 2 !important;
    flex: 1 1 0 !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    gap: var(--service-embed-log-gap) !important;
    padding: var(--service-embed-log-pad-y) var(--service-embed-log-pad-x) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: auto !important;
    -ms-overflow-style: none;
    scrollbar-gutter: auto;
    scrollbar-width: none;
    touch-action: pan-y;
}

body.customer-service-embed-body .service-thread--member > .service-thread-log::-webkit-scrollbar,
body.customer-service-embed-body .service-thread--member > .service-thread-placeholder::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body.customer-service-embed-body .service-thread--member > .service-thread-composer {
    grid-row: 3 !important;
    order: 3 !important;
    position: relative !important;
    inset: auto !important;
    align-self: stretch !important;
    align-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--service-embed-composer-height) !important;
    flex: 0 0 auto !important;
    grid-auto-rows: max-content !important;
    margin: 0 !important;
    transform: none !important;
}

/*
 * The embedded conversation owns one fixed iframe viewport. Generic mobile
 * focus rules must not turn that viewport into a document-scrolling layout:
 * only the message log may scroll while the notice and composer stay fixed.
 */
body.customer-service-body.customer-service-embed-body,
body.customer-service-body.customer-service-embed-body .page-frame,
body.customer-service-body.customer-service-embed-body .customer-service-page,
body.customer-service-body.customer-service-embed-body .customer-service-frame {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: hidden !important;
}

body.customer-service-body.customer-service-embed-body .customer-service-frame {
    position: relative !important;
    display: block !important;
    flex: 1 1 0 !important;
}

body.customer-service-body.customer-service-embed-body
.page-frame > section.front-page-shell.customer-service-page {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body.customer-service-embed-body {
        --service-embed-notice-height: 32px;
        --service-embed-composer-height: 58px;
        --service-embed-log-gap: 10px;
        --service-embed-log-pad-x: 10px;
        --service-embed-log-pad-y: 10px;
    }

    body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) {
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        overflow: hidden !important;
    }

    body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) .page-frame {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: 0 !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) .customer-service-page,
    body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) .customer-service-frame,
    body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) .service-thread--member {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) .service-thread--member {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) .service-thread--member > .service-thread-head {
        display: none !important;
    }

    body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) .service-thread--member > .service-thread-notice {
        grid-row: 1 !important;
    }

    body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) .service-thread--member > .service-thread-log {
        grid-row: 2 !important;
        min-height: 0 !important;
        scroll-padding-bottom: 8px !important;
    }

    body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) .service-thread--member > .service-thread-composer {
        position: relative !important;
        inset: auto !important;
        grid-row: 3 !important;
        align-self: stretch !important;
        height: auto !important;
        min-height: var(--service-embed-composer-height) !important;
        margin: 0 !important;
        transform: none !important;
    }
}

body.customer-service-embed-body .service-thread-bubble.is-image {
    padding: 6px !important;
}

body.customer-service-embed-body .service-thread-bubble.is-image .service-thread-image-open {
    width: max-content !important;
    max-width: min(420px, 72vw) !important;
}

body.customer-service-embed-body .service-thread-bubble.is-image img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(44dvh, 360px) !important;
    object-fit: contain !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-embed-body .service-thread-bubble.is-image .service-thread-image-open {
        max-width: min(76vw, 300px) !important;
    }

    body.customer-service-embed-body .service-thread-bubble.is-image img {
        max-height: min(34dvh, 280px) !important;
    }
}

@media (min-width: 601px) {
    body.customer-service-body.customer-service-embed-body {
        --service-embed-notice-height: 38px;
        --service-embed-composer-height: 64px;
        --service-embed-log-gap: 14px;
        --service-embed-log-pad-x: 16px;
        --service-embed-log-pad-y: 14px;
    }
}

@supports (height: 100dvh) {
    body.customer-service-body.customer-service-embed-body,
    body.customer-service-body.customer-service-embed-body .page-frame,
    body.customer-service-body.customer-service-embed-body .customer-service-page {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    @media (max-width: 720px), (hover: none) and (pointer: coarse) {
        body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within),
        body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) .page-frame {
            height: var(--customer-service-viewport-height, 100dvh) !important;
            max-height: var(--customer-service-viewport-height, 100dvh) !important;
        }

        body.customer-service-body.customer-service-embed-body:has(.service-thread-composer:focus-within) {
            min-height: var(--customer-service-viewport-height, 100dvh) !important;
        }
    }
}

/* Agent console final contract: one shell, one state switch, one active panel. */
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) {
    --service-agent-public-width: var(--front-inner-width, min(var(--page-inner-width, 708px), calc(100vw - (var(--page-side-gap, 6px) * 2))));
    --service-agent-console-gap: 8px;
    --service-agent-console-line: #cbd8e6;
    --service-agent-console-surface: #f8fafc;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body),
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .page-frame,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-page,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-frame,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-shell,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-grid,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) [data-service-agent-panel] {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .page-frame {
    display: flex !important;
    width: var(--service-agent-public-width) !important;
    max-width: var(--service-agent-public-width) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    padding: calc(var(--front-top-spacer, 70px) + 8px) 0 calc(var(--front-bottom-nav-height, 64px) + var(--front-bottom-nav-bottom, 2px) + env(safe-area-inset-bottom)) !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

@supports (height: 100dvh) {
    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .page-frame {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-page,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-frame,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-shell {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-frame {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    border: 1px solid var(--service-agent-console-line) !important;
    border-radius: 14px !important;
    background: var(--service-agent-console-surface) !important;
    box-shadow: none !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-top {
    display: grid !important;
    grid-template-rows: minmax(38px, auto) minmax(42px, auto) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 98px !important;
    padding: 8px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid #dbe5ef !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-top-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto) minmax(96px, auto) !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 38px !important;
    overflow: hidden !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-title-name {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-presence-pill,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-settings-toggle {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: unset !important;
    grid-auto-columns: unset !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid #cbd8e6 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch button {
    display: grid !important;
    min-width: 0 !important;
    min-height: 42px !important;
    grid-template-columns: minmax(0, auto) auto auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch button + button {
    border-left: 1px solid #dbe5ef !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch button.is-active {
    background: #dff0ff !important;
    color: #075985 !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch button > span,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch button > strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-active-account-pill {
    max-width: 180px !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: var(--service-agent-console-gap) !important;
    overflow: hidden !important;
    background: #eef1f5 !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console.is-queue-view #service-agent-chat,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console[data-agent-active-view="queue"] #service-agent-chat,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console.is-chat-view #service-agent-queue,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console[data-agent-active-view="chat"] #service-agent-queue {
    display: none !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console.is-queue-view #service-agent-queue,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console[data-agent-active-view="queue"] #service-agent-queue,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console.is-chat-view #service-agent-chat,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console[data-agent-active-view="chat"] #service-agent-chat {
    display: grid !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) [data-service-agent-panel][hidden] {
    display: none !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue:not([hidden]),
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent:not([hidden]) {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--service-agent-console-line) !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue:not([hidden]) {
    grid-template-rows: auto minmax(0, 1fr) !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent:not([hidden]) {
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-panel-head,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-head {
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid #dbe5ef !important;
    background: #ffffff !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-panel-head > div:first-child,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue-actions {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 8px !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue-title {
    margin: 0 !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-list,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-log {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-list {
    display: grid !important;
    align-content: start !important;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
    background: #f8fafc !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session {
    display: block !important;
    min-width: 0 !important;
    min-height: 74px !important;
    padding: 9px !important;
    overflow: hidden !important;
    border: 1px solid #dbe5ef !important;
    border-radius: 11px !important;
    background: #ffffff !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session.is-active {
    border-color: #60a5fa !important;
    background: #eff6ff !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-main,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-top,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-preview-row {
    min-width: 0 !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-top,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-preview-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-preview,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-meta strong,
body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-actions--agent {
    display: flex !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-actions--agent .service-thread-action--score {
    min-width: 98px !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-block-controls select {
    max-width: 128px !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-log {
    grid-row: 2 !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-composer {
    grid-row: 3 !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-locked {
    grid-row: 4 !important;
}

body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-composer--agent {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 0 13px 13px !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) {
        --service-agent-public-width: var(--front-inner-width, min(100vw, var(--page-inner-width, 708px)));
        --service-agent-console-gap: 0px;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .page-frame {
        width: var(--service-agent-public-width) !important;
        max-width: min(100vw, var(--page-inner-width, 708px)) !important;
        padding-top: var(--front-top-spacer, 70px) !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console {
        border-radius: 12px !important;
        box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .42) !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-top {
        gap: 5px !important;
        min-height: 73px !important;
        padding: 5px 4px 0 !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-top-main {
        grid-template-columns: minmax(0, 1fr) minmax(76px, .42fr) minmax(86px, .46fr) !important;
        gap: 4px !important;
        min-height: 32px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-title-name {
        padding: 0 2px !important;
        font-size: 16px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-presence-pill,
    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-settings-toggle {
        min-height: 32px !important;
        padding: 0 7px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch {
        border-right: 0 !important;
        border-left: 0 !important;
        border-radius: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch button {
        min-height: 36px !important;
        gap: 5px !important;
        padding: 5px 6px !important;
        font-size: 14px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-active-account-pill {
        max-width: 74px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-grid {
        padding: 0 !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue:not([hidden]),
    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent:not([hidden]) {
        border-right: 0 !important;
        border-left: 0 !important;
        border-radius: 0 0 12px 12px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-list {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 6px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session {
        min-height: 68px !important;
        padding: 8px !important;
        border-radius: 9px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-panel-head,
    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-head {
        min-height: 44px !important;
        padding: 6px 7px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-peer {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-avatar {
        width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-actions--agent .service-thread-action--score {
        padding: 0 7px !important;
        font-size: 12px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-block-controls select {
        padding-right: 22px !important;
        padding-left: 8px !important;
        font-size: 12px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-log {
        padding: 12px 10px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-composer--agent {
        min-height: 58px !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body).front-input-focus-active .service-agent-top,
    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body).customer-service-compose-keyboard-active .service-agent-top,
    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):has(.service-thread-composer--agent:focus-within) .service-agent-top {
        display: none !important;
    }

    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body).front-input-focus-active .page-frame,
    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body).customer-service-compose-keyboard-active .page-frame,
    body.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):has(.service-thread-composer--agent:focus-within) .page-frame {
        padding-top: 0 !important;
    }
}

/* Final service input-state contract for the rebuilt thread DOM. */
body.customer-service-body textarea.service-thread-input,
body.customer-service-body .service-thread-composer textarea.service-thread-input {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    resize: none !important;
    -ms-overflow-style: none;
    scrollbar-gutter: auto;
    scrollbar-width: none;
}

body.customer-service-body textarea.service-thread-input::-webkit-scrollbar,
body.customer-service-body .service-thread-composer textarea.service-thread-input::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

body.customer-service-body textarea.service-thread-input::-webkit-resizer {
    display: none !important;
}

/* Fine-pointer desktop keeps one stable thread shell before, during and after input. */

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .bottom-float-nav,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .bottom-float-nav,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .bottom-float-nav {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .page-frame,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .page-frame,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .page-frame {
        position: fixed !important;
        top: var(--customer-service-viewport-top, 0px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        display: flex !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .customer-service-page,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .customer-service-page,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .customer-service-page,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .customer-service-frame,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .customer-service-frame,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .customer-service-frame,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .service-thread--member,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .service-thread--member,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .service-thread--member {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .service-thread--member,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .service-thread--member,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .service-thread--member {
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        border-radius: 0 !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .service-thread--member > .service-thread-head,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .service-thread--member > .service-thread-head,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .service-thread--member > .service-thread-head {
        display: grid !important;
        grid-row: 1 !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .service-thread--member > .service-thread-notice,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .service-thread--member > .service-thread-notice,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .service-thread--member > .service-thread-notice {
        grid-row: 2 !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .service-thread--member > .service-thread-notice:not([hidden]),
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .service-thread--member > .service-thread-notice:not([hidden]),
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .service-thread--member > .service-thread-notice:not([hidden]) {
        display: flex !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .service-thread--member > .service-thread-log,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .service-thread--member > .service-thread-log,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .service-thread--member > .service-thread-log {
        grid-row: 3 !important;
        min-height: 0 !important;
        padding-bottom: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .service-thread--member > .service-thread-composer--member,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .service-thread--member > .service-thread-composer--member,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .service-thread--member > .service-thread-composer--member {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        grid-row: 4 !important;
        grid-template-columns: max-content minmax(0, 1fr) var(--service-thread-send-size) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        box-shadow: 0 -1px 0 rgba(203, 213, 225, .92) !important;
    }

    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).front-input-focus-active .service-thread-composer--member .service-thread-tools,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body).customer-service-compose-keyboard-active .service-thread-composer--member .service-thread-tools,
    body.standalone-panel.front-unified-panel-page.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body):has(.service-thread-composer--member:focus-within) .service-thread-composer--member .service-thread-tools {
        display: inline-grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Final mobile agent console contract: no duplicate top reserve and no side clipping. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) {
        --service-agent-public-width: min(var(--page-inner-width, 708px), calc(100vw - (var(--page-side-gap, 6px) * 2)));
        --service-thread-tool-size: 34px;
        --service-thread-send-size: 42px;
        overflow-x: hidden !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .page-frame {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        width: var(--service-agent-public-width) !important;
        max-width: var(--service-agent-public-width) !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 auto !important;
        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    @supports (height: 100dvh) {
        body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .page-frame {
            height: 100dvh !important;
            min-height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-page,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-frame,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-shell,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-grid,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) #service-agent-chat {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: auto !important;
        margin-left: auto !important;
        overflow-x: hidden !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-page {
        padding-top: var(--front-switch-top-gap, 10px) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-frame,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-shell {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-top,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-top-main,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch button,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-head,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-peer,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-actions--agent,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-composer--agent {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
        gap: 5px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-actions--agent {
        flex: 0 1 auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: 5px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-actions--agent .service-thread-action--score {
        width: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-block-controls select {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-composer--agent {
        grid-template-columns: max-content minmax(0, 1fr) var(--service-thread-send-size) !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
        overflow: visible !important;
    }

}

/* Final agent titlebar contract: no wrapper card, one shared size system. */
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) {
    --service-agent-top-row-height: 30px;
    --service-agent-title-control-height: 26px;
    --service-agent-switch-height: 32px;
    --service-agent-titlebar-gap: 2px;
    --service-agent-titlebar-pad-y: 2px;
    --service-agent-titlebar-pad-x: 7px;
    --service-agent-panel-head-height: 40px;
    --service-agent-chat-head-height: 40px;
    --service-agent-chat-head-pad-y: 2px;
    --service-agent-peer-avatar-size: 36px;
    --service-agent-panel-control-height: 28px;
    --service-agent-block-control-width: 92px;
    --service-agent-block-control-pad-left: 8px;
    --service-agent-block-control-pad-right: 24px;
    --service-agent-block-control-font-size: 11.5px;
    --service-agent-panel-head-pad-y: 4px;
    --service-agent-panel-head-pad-x: 8px;
    --service-agent-session-card-min-height: 70px;
    --service-agent-session-card-pad-y: 7px;
    --service-agent-session-card-pad-x: 9px;
    --service-agent-session-card-gap: 5px;
    --service-agent-session-top-height: 22px;
    --service-agent-session-preview-height: 30px;
    --service-agent-session-check-size: 16px;
    --service-agent-session-delete-size: 30px;
    --service-agent-session-presence-height: 18px;
    --service-agent-session-unread-height: 16px;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-top {
    width: 100% !important;
    margin: 0 !important;
    padding: var(--service-agent-titlebar-pad-y) var(--service-agent-titlebar-pad-x) !important;
    grid-template-rows: var(--service-agent-top-row-height) var(--service-agent-switch-height) !important;
    gap: var(--service-agent-titlebar-gap) !important;
    min-height: calc((var(--service-agent-titlebar-pad-y) * 2) + var(--service-agent-top-row-height) + var(--service-agent-titlebar-gap) + var(--service-agent-switch-height)) !important;
    border: 0 !important;
    border-bottom: 1px solid #dbe5ef !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-top-main {
    grid-template-columns: minmax(0, 1fr) 90px 96px !important;
    align-items: center !important;
    gap: 4px !important;
    height: var(--service-agent-top-row-height) !important;
    min-height: var(--service-agent-top-row-height) !important;
    max-height: var(--service-agent-top-row-height) !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-title-name {
    display: flex !important;
    height: var(--service-agent-top-row-height) !important;
    align-items: center !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-presence-pill,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-settings-toggle {
    align-self: center !important;
    height: var(--service-agent-title-control-height) !important;
    min-height: var(--service-agent-title-control-height) !important;
    max-height: var(--service-agent-title-control-height) !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-view-switch {
    box-sizing: border-box !important;
    height: var(--service-agent-switch-height) !important;
    min-height: var(--service-agent-switch-height) !important;
    max-height: var(--service-agent-switch-height) !important;
    gap: 2px !important;
    padding: 1px !important;
    border-color: #cbd8e6 !important;
    border-radius: 11px !important;
    background: #edf4fb !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-view-switch button {
    height: calc(var(--service-agent-switch-height) - 4px) !important;
    min-height: calc(var(--service-agent-switch-height) - 4px) !important;
    max-height: calc(var(--service-agent-switch-height) - 4px) !important;
    gap: 4px !important;
    padding: 0 6px !important;
    border-radius: 7px !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-view-switch button + button {
    border-left: 0 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-view-switch button.is-active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgb(30 64 175 / 24%) !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-view-switch button:focus-visible {
    outline: 2px solid #60a5fa !important;
    outline-offset: -2px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-view-switch button > span {
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-active-account-pill {
    display: inline-flex !important;
    max-width: 150px !important;
    height: 18px !important;
    min-height: 18px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 7px !important;
    border: 1px solid #93c5fd !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    color: #075985 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-view-switch button.is-active .service-agent-active-account-pill {
    border-color: rgb(255 255 255 / 58%) !important;
    background: rgb(255 255 255 / 18%) !important;
    color: #ffffff !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-panel-head,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-head {
    box-sizing: border-box !important;
    height: var(--service-agent-panel-head-height) !important;
    min-height: var(--service-agent-panel-head-height) !important;
    max-height: var(--service-agent-panel-head-height) !important;
    padding: var(--service-agent-panel-head-pad-y) var(--service-agent-panel-head-pad-x) !important;
    overflow: hidden !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-panel-head {
    gap: 6px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-head {
    grid-template-areas: "peer actions" !important;
    grid-template-rows: calc(var(--service-agent-chat-head-height) - (var(--service-agent-chat-head-pad-y) * 2)) !important;
    row-gap: 0 !important;
    height: var(--service-agent-chat-head-height) !important;
    min-height: var(--service-agent-chat-head-height) !important;
    max-height: var(--service-agent-chat-head-height) !important;
    padding-top: var(--service-agent-chat-head-pad-y) !important;
    padding-bottom: var(--service-agent-chat-head-pad-y) !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-panel-head > div:first-child,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue-actions,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-peer,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-actions--agent {
    min-height: 0 !important;
    max-height: calc(var(--service-agent-panel-head-height) - (var(--service-agent-panel-head-pad-y) * 2)) !important;
    overflow: hidden !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-panel-head > div:first-child,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue-actions {
    gap: 5px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue-title {
    font-size: 15px !important;
    line-height: 1 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-head .service-thread-peer,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-head .service-thread-actions--agent {
    max-height: calc(var(--service-agent-chat-head-height) - (var(--service-agent-chat-head-pad-y) * 2)) !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-peer {
    grid-area: peer;
    grid-template-columns: var(--service-agent-peer-avatar-size) minmax(0, 1fr) !important;
    gap: 5px !important;
    overflow: visible !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-actions--agent {
    grid-area: actions;
    gap: 3px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-peer-copy {
    grid-template-rows: 18px 15px !important;
    align-content: center !important;
    gap: 1px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-title-row {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    overflow: hidden !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-title-row .service-thread-title {
    flex: 1 1 auto !important;
    max-width: none !important;
    font-size: 15px !important;
    line-height: 18px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-level {
    position: absolute;
    right: auto;
    bottom: -2px;
    left: 50%;
    z-index: 3;
    display: inline-flex;
    box-sizing: border-box;
    min-width: 38px;
    max-width: 58px;
    min-height: 14px;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .96);
    border-radius: 999px;
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 950;
    line-height: 12px;
    box-shadow: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-level[hidden] {
    display: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-peer-status {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 88px !important;
    min-height: 15px !important;
    height: 15px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    overflow: hidden;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    line-height: 15px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-peer-status[data-status-type="image"] {
    background: #dbeafe;
    color: #1d4ed8;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-peer-status[data-status-type="voice"] {
    background: #ede9fe;
    color: #7c3aed;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-panel-head [data-service-agent-queue-count] {
    display: inline-flex !important;
    min-height: 0 !important;
    align-items: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue-select,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue-delete,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-action,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-block-controls select {
    height: var(--service-agent-panel-control-height) !important;
    min-height: var(--service-agent-panel-control-height) !important;
    max-height: var(--service-agent-panel-control-height) !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-block-controls:not([hidden]) {
    position: relative !important;
    display: inline-flex !important;
    box-sizing: border-box !important;
    width: var(--service-agent-block-control-width) !important;
    min-width: var(--service-agent-block-control-width) !important;
    max-width: var(--service-agent-block-control-width) !important;
    height: var(--service-agent-panel-control-height) !important;
    min-height: var(--service-agent-panel-control-height) !important;
    max-height: var(--service-agent-panel-control-height) !important;
    flex: 0 0 var(--service-agent-block-control-width) !important;
    align-items: center !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-block-controls:not([hidden])::after {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    border-right: 2px solid #475569;
    border-bottom: 2px solid #475569;
    content: "";
    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent .service-thread-avatar {
    width: var(--service-agent-peer-avatar-size) !important;
    height: var(--service-agent-peer-avatar-size) !important;
    flex-basis: var(--service-agent-peer-avatar-size) !important;
    border-radius: 10px !important;
    font-size: 20px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-actions--agent .service-thread-action--score {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    gap: 3px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-block-controls select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding-right: var(--service-agent-block-control-pad-right) !important;
    padding-left: var(--service-agent-block-control-pad-left) !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-size: var(--service-agent-block-control-font-size) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue-delete,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-action--danger {
    width: var(--service-agent-panel-control-height) !important;
    min-width: var(--service-agent-panel-control-height) !important;
    max-width: var(--service-agent-panel-control-height) !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-list {
    gap: 7px !important;
    padding: 7px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session {
    display: grid !important;
    box-sizing: border-box !important;
    min-height: var(--service-agent-session-card-min-height) !important;
    padding: var(--service-agent-session-card-pad-y) var(--service-agent-session-card-pad-x) !important;
    align-items: center !important;
    border-radius: 10px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-main {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-rows: var(--service-agent-session-top-height) var(--service-agent-session-preview-height) !important;
    gap: var(--service-agent-session-card-gap) !important;
    align-items: center !important;
    padding: 0 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-top {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--service-agent-session-top-height) !important;
    grid-template-columns: minmax(0, 1fr) minmax(94px, auto) !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-meta {
    display: grid !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: var(--service-agent-session-check-size) minmax(0, 1fr) auto !important;
    align-items: center !important;
    align-self: center !important;
    gap: 6px !important;
    overflow: hidden !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-check {
    display: inline-flex !important;
    width: var(--service-agent-session-check-size) !important;
    min-width: var(--service-agent-session-check-size) !important;
    max-width: var(--service-agent-session-check-size) !important;
    height: var(--service-agent-session-check-size) !important;
    min-height: var(--service-agent-session-check-size) !important;
    max-height: var(--service-agent-session-check-size) !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-check input,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-check span {
    width: var(--service-agent-session-check-size) !important;
    height: var(--service-agent-session-check-size) !important;
    margin: 0 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-meta strong {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    line-height: var(--service-agent-session-top-height) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-meta .customer-service-session-presence {
    display: inline-flex !important;
    height: var(--service-agent-session-presence-height) !important;
    min-height: var(--service-agent-session-presence-height) !important;
    max-height: var(--service-agent-session-presence-height) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-side {
    display: inline-flex !important;
    min-width: 0 !important;
    max-width: 122px !important;
    height: var(--service-agent-session-top-height) !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: center !important;
    align-self: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-top .service-agent-session-side .service-agent-session-time {
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 104px !important;
    height: var(--service-agent-session-top-height) !important;
    overflow: hidden !important;
    color: #94a3b8 !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    line-height: var(--service-agent-session-top-height) !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-unread {
    display: inline-flex !important;
    height: var(--service-agent-session-unread-height) !important;
    min-width: var(--service-agent-session-unread-height) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-unread[hidden] {
    display: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-preview-row {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--service-agent-session-preview-height) !important;
    grid-template-columns: auto minmax(0, 1fr) var(--service-agent-session-delete-size) !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-region {
    display: inline-flex !important;
    min-width: 32px !important;
    height: 20px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
    border: 1px solid #93c5fd !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-region.is-hongkong {
    border-color: #fda4af !important;
    background: #fff1f2 !important;
    color: #be123c !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-preview {
    display: block !important;
    min-width: 0 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: var(--service-agent-session-preview-height) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-delete {
    display: inline-flex !important;
    width: var(--service-agent-session-delete-size) !important;
    min-width: var(--service-agent-session-delete-size) !important;
    max-width: var(--service-agent-session-delete-size) !important;
    height: var(--service-agent-session-delete-size) !important;
    min-height: var(--service-agent-session-delete-size) !important;
    max-height: var(--service-agent-session-delete-size) !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-items: center !important;
    align-self: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Desktop agent split contract: queue and chat share one page at 4:6. */
@media (min-width: 721px) {
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body).customer-service-compose-keyboard-active .page-frame,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body).customer-service-agent-compose-active .page-frame,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body).service-agent-settings-open .page-frame {
        padding-top: 0 !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-view-switch {
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        gap: var(--service-agent-console-gap) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console.is-queue-view #service-agent-chat:not([hidden]),
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console[data-agent-active-view="queue"] #service-agent-chat:not([hidden]),
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console.is-chat-view #service-agent-queue:not([hidden]),
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console[data-agent-active-view="chat"] #service-agent-queue:not([hidden]),
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue:not([hidden]),
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent:not([hidden]) {
        display: grid !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-queue:not([hidden]) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent:not([hidden]) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console {
        position: relative !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.service-agent-settings-open:not(.customer-service-embed-body) .bottom-float-nav {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-settings-modal {
        position: absolute !important;
        inset: 0 !important;
        z-index: 2147483000 !important;
        display: grid !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        place-items: center !important;
        padding: 14px !important;
        overflow: hidden !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-settings-modal[hidden] {
        display: none !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-settings-backdrop {
        z-index: 0 !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-settings-card {
        display: grid !important;
        width: min(520px, calc(100% - 28px)) !important;
        max-width: min(520px, calc(100% - 28px)) !important;
        max-height: min(640px, calc(100% - 28px)) !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-settings-head {
        min-height: 42px !important;
        flex: 0 0 auto !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-settings-form {
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) {
        --service-agent-top-row-height: 30px;
        --service-agent-switch-height: 32px;
        --service-agent-titlebar-gap: 2px;
        --service-agent-titlebar-pad-y: 2px;
        --service-agent-titlebar-pad-x: 3px;
        --service-agent-panel-head-height: 40px;
        --service-agent-chat-head-height: 40px;
        --service-agent-chat-head-pad-y: 2px;
        --service-agent-peer-avatar-size: 36px;
        --service-agent-panel-control-height: 30px;
        --service-agent-block-control-width: 90px;
        --service-agent-block-control-pad-left: 7px;
        --service-agent-block-control-pad-right: 22px;
        --service-agent-block-control-font-size: 11.5px;
        --service-agent-panel-head-pad-y: 4px;
        --service-agent-panel-head-pad-x: 8px;
        --service-agent-session-card-min-height: 76px;
        --service-agent-session-card-pad-y: 9px;
        --service-agent-session-card-pad-x: 10px;
        --service-agent-session-card-gap: 5px;
        --service-agent-session-top-height: 24px;
        --service-agent-session-preview-height: 32px;
        --service-agent-session-check-size: 18px;
        --service-agent-session-delete-size: 32px;
        --service-agent-session-presence-height: 20px;
        --service-agent-session-unread-height: 17px;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-top {
        width: 100% !important;
        margin: 0 !important;
        padding: var(--service-agent-titlebar-pad-y) var(--service-agent-titlebar-pad-x) !important;
        grid-template-rows: var(--service-agent-top-row-height) var(--service-agent-switch-height) !important;
        gap: var(--service-agent-titlebar-gap) !important;
        min-height: calc((var(--service-agent-titlebar-pad-y) * 2) + var(--service-agent-top-row-height) + var(--service-agent-titlebar-gap) + var(--service-agent-switch-height)) !important;
        border-radius: 0 !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-top-main {
        grid-template-columns: minmax(0, 1fr) 76px 82px !important;
        gap: 3px !important;
        height: var(--service-agent-top-row-height) !important;
        min-height: var(--service-agent-top-row-height) !important;
        max-height: var(--service-agent-top-row-height) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-title-name {
        font-size: 15px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-presence-pill,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-settings-toggle {
        padding: 0 4px !important;
        font-size: 12px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-view-switch {
        min-height: var(--service-agent-switch-height) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-view-switch button {
        height: calc(var(--service-agent-switch-height) - 4px) !important;
        min-height: calc(var(--service-agent-switch-height) - 4px) !important;
        max-height: calc(var(--service-agent-switch-height) - 4px) !important;
        padding: 0 4px !important;
        font-size: 13px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-view-switch button > span {
        font-size: 13px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .service-agent-active-account-pill {
        max-width: 78px !important;
        height: 17px !important;
        min-height: 17px !important;
        padding: 0 5px !important;
        font-size: 11px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-list {
        gap: 6px !important;
        padding: 6px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread-actions--agent .service-thread-action--score {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        padding: 0 4px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-thread--agent > .service-thread-head {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session {
        border-radius: 10px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-top {
        grid-template-columns: minmax(0, 1fr) minmax(112px, auto) !important;
        gap: 6px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-meta {
        gap: 6px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-meta strong {
        font-size: 14px !important;
        line-height: var(--service-agent-session-top-height) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-meta .customer-service-session-presence {
        font-size: 11.5px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-side {
        max-width: 136px !important;
        gap: 4px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-top .service-agent-session-side .service-agent-session-time {
        max-width: 116px !important;
        font-size: 11px !important;
        line-height: var(--service-agent-session-top-height) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-preview-row {
        gap: 8px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .service-agent-session-preview {
        font-size: 12.5px !important;
        line-height: var(--service-agent-session-preview-height) !important;
    }
}

/* Final iOS agent keyboard contract: crop the console to visualViewport height. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    html.customer-service-ios-keyboard-active-root {
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html.customer-service-ios-keyboard-active-root body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body),
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) {
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .page-frame {
        position: fixed !important;
        top: var(--customer-service-viewport-top, 0px) !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: var(--service-agent-public-width, min(var(--page-inner-width, 708px), calc(100vw - (var(--page-side-gap, 6px) * 2)))) !important;
        max-width: var(--service-agent-public-width, min(var(--page-inner-width, 708px), calc(100vw - (var(--page-side-gap, 6px) * 2)))) !important;
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .bottom-float-nav,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .service-agent-top {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .customer-service-agent-page,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .customer-service-agent-frame,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .customer-service-agent-shell,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .customer-service-agent-console,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .service-agent-grid,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .customer-service-agent-page,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .customer-service-agent-frame,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .customer-service-agent-shell,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .customer-service-agent-console {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) .service-agent-grid {
        display: grid !important;
        flex: 1 1 auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent:not([hidden]) {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        border-radius: 12px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-head {
        grid-row: 1 !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-log {
        grid-row: 2 !important;
        min-height: 0 !important;
        padding-bottom: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-composer--agent {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        grid-row: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
        transform: none !important;
        border-radius: 0 0 12px 12px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body.customer-service-ios-keyboard-active:not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-locked[hidden] {
        display: none !important;
    }
}

/* Agent compose active fallback for mobile Safari when the iOS class is delayed. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) {
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .page-frame {
        position: fixed !important;
        top: var(--customer-service-viewport-top, 0px) !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: var(--service-agent-public-width, min(var(--page-inner-width, 708px), calc(100vw - (var(--page-side-gap, 6px) * 2)))) !important;
        max-width: var(--service-agent-public-width, min(var(--page-inner-width, 708px), calc(100vw - (var(--page-side-gap, 6px) * 2)))) !important;
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .bottom-float-nav,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .service-agent-top {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .customer-service-agent-page,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .customer-service-agent-frame,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .customer-service-agent-shell,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .customer-service-agent-console,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .service-agent-grid,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .customer-service-agent-page,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .customer-service-agent-frame,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .customer-service-agent-shell,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .customer-service-agent-console {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) .service-agent-grid {
        display: grid !important;
        flex: 1 1 auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent:not([hidden]) {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        border-radius: 12px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-head {
        grid-row: 1 !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-log {
        grid-row: 2 !important;
        min-height: 0 !important;
        padding-bottom: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-composer--agent {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        grid-row: 3 !important;
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
        transform: none !important;
        border-radius: 0 0 12px 12px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:is(.customer-service-agent-compose-active, .customer-service-ios-keyboard-active):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-locked[hidden] {
        display: none !important;
    }
}

/* Agent focus-within fallback: keep the real composer above the mobile keyboard. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) {
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .page-frame {
        position: fixed !important;
        top: var(--customer-service-viewport-top, 0px) !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: var(--service-agent-public-width, min(var(--page-inner-width, 708px), calc(100vw - (var(--page-side-gap, 6px) * 2)))) !important;
        max-width: var(--service-agent-public-width, min(var(--page-inner-width, 708px), calc(100vw - (var(--page-side-gap, 6px) * 2)))) !important;
        height: var(--customer-service-viewport-height, 100dvh) !important;
        min-height: var(--customer-service-viewport-height, 100dvh) !important;
        max-height: var(--customer-service-viewport-height, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .bottom-float-nav,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .service-agent-top {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .customer-service-agent-page,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .customer-service-agent-frame,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .customer-service-agent-shell,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .customer-service-agent-console,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .service-agent-grid,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .customer-service-agent-page,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .customer-service-agent-frame,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .customer-service-agent-shell,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .customer-service-agent-console {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) .service-agent-grid {
        display: grid !important;
        flex: 1 1 auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent:not([hidden]) {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        border-radius: 12px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-head {
        grid-row: 1 !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-log {
        grid-row: 2 !important;
        min-height: 0 !important;
        padding-bottom: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-composer--agent {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        grid-row: 3 !important;
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
        transform: none !important;
        border-radius: 0 0 12px 12px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:has(.service-thread-composer--agent:focus-within):not(.customer-service-embed-body) #service-agent-chat.service-thread--agent > .service-thread-locked[hidden] {
        display: none !important;
    }
}

/* Agent payment management contract: mirror the member recharge method layout. */
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) {
    --service-agent-payment-dialog-width: var(--service-agent-public-width, min(var(--page-inner-width, 708px), calc(100vw - (var(--page-side-gap, 6px) * 2))));
    --service-agent-payment-method-height: var(--service-management-nav-item-height);
    --service-management-shell-gutter: 2px;
    --service-management-shell-bottom-gutter: 8px;
    --service-management-section-gap: 8px;
    --service-management-title-panel-gap: 0px;
    --service-management-content-gutter: 12px;
    --service-management-card-radius: 12px;
    --service-management-nav-frame-gap: 4px;
    --service-management-nav-frame-padding: 3px;
    --service-management-nav-frame-radius: var(--service-management-card-radius);
    --service-management-nav-item-height: 36px;
    --service-management-nav-item-radius: 9px;
    --service-management-nav-font-size: 13px;
    --service-agent-payment-shell-gap: var(--service-management-section-gap);
    --service-agent-payment-shell-pad: 0 var(--service-management-shell-gutter) var(--service-management-shell-bottom-gutter);
    --service-management-titlebar-height: 40px;
    --service-management-titlebar-pad-y: 5px;
    --service-management-titlebar-pad-x: var(--service-management-content-gutter);
    --service-management-title-content-height: 30px;
    --service-management-title-gap: 8px;
    --service-management-title-font-size: 18px;
    --service-management-title-line-height: 1;
    --service-management-switch-height: var(--service-management-title-content-height);
    --service-management-switch-min-width: 112px;
    --service-management-switch-pad-x: 12px;
    --service-management-switch-gap: 6px;
    --service-management-switch-font-size: 13px;
    --service-management-switch-radius: 10px;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console.customer-service-agent-management {
    width: min(var(--service-agent-payment-dialog-width), 100%) !important;
    max-width: min(var(--service-agent-payment-dialog-width), 100%) !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: var(--service-management-title-panel-gap) !important;
    align-self: stretch !important;
    justify-self: center !important;
    margin: 0 auto !important;
    padding: var(--service-agent-payment-shell-pad) !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%),
        radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0) 38%) !important;
    box-shadow: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-top {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-height: var(--service-management-titlebar-height) !important;
    height: var(--service-management-titlebar-height) !important;
    max-height: var(--service-management-titlebar-height) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: var(--service-management-titlebar-pad-y) var(--service-management-titlebar-pad-x) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-top-main {
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--service-management-title-content-height) !important;
    min-height: var(--service-management-title-content-height) !important;
    max-height: var(--service-management-title-content-height) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: var(--service-management-title-gap) !important;
    overflow: hidden !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-title-name {
    display: flex !important;
    height: var(--service-management-title-content-height) !important;
    min-height: var(--service-management-title-content-height) !important;
    max-height: var(--service-management-title-content-height) !important;
    align-items: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: var(--service-management-title-font-size) !important;
    font-weight: 900 !important;
    line-height: var(--service-management-title-line-height) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-management-page-link {
    display: inline-flex !important;
    box-sizing: border-box !important;
    min-width: var(--service-management-switch-min-width) !important;
    height: var(--service-management-switch-height) !important;
    min-height: var(--service-management-switch-height) !important;
    max-height: var(--service-management-switch-height) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--service-management-switch-gap) !important;
    padding: 0 var(--service-management-switch-pad-x) !important;
    overflow: hidden !important;
    border: 1px solid rgba(37, 99, 235, 0.32) !important;
    border-radius: var(--service-management-switch-radius) !important;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
    box-shadow: none !important;
    color: #1d4ed8 !important;
    font-size: var(--service-management-switch-font-size) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-management-page-link:hover,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-management-page-link:focus-visible {
    border-color: #2563eb !important;
    background: #2563eb !important;
    color: #ffffff !important;
    outline: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-management-page-link i {
    flex: 0 0 auto !important;
    font-size: 12px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-management-page-link span {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

body.service-member-management-body {
    --admin-ui-bg: #f5f7fb;
    --admin-ui-surface: #ffffff;
    --admin-ui-soft: #f8fafc;
    --admin-ui-soft-blue: #eff6ff;
    --admin-ui-border: #dbe5ef;
    --admin-ui-border-strong: #c8d6e6;
    --admin-ui-text: #0f172a;
    --admin-ui-muted: #55708e;
    --admin-ui-blue: #2563eb;
    --admin-ui-green: #059669;
    --admin-ui-red: #dc2626;
    --admin-ui-radius: 8px;
    --admin-ui-gap: 10px;
    --admin-ui-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
    --admin-ui-focus: 0 0 0 3px rgba(37, 99, 235, 0.16);
    --admin-panel-radius: 8px;
    --admin-panel-border: #dbe5ef;
    --admin-panel-border-strong: #c9d7e8;
    --admin-panel-bg: #ffffff;
    --admin-panel-soft-bg: #f8fbff;
    --admin-panel-head-bg: #f3f7fc;
    --admin-panel-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
    --admin-text-main: #0f172a;
    --admin-text-body: #1e293b;
    --admin-text-muted: #64748b;
    --admin-text-label: #334155;
    --admin-head-font-weight: 600;
    --admin-body-text-size: 13px;
    --admin-body-text-weight: 500;
    --admin-label-text-size: 12px;
    --admin-control-height: 36px;
    --admin-control-radius: 8px;
    --admin-control-font-size: 13px;
    --admin-control-font-weight: 500;
    --admin-button-font-weight: 700;
    --admin-table-head-height: 36px;
    --admin-table-cell-y: 8px;
    --admin-table-cell-x: 10px;
    --admin-table-head-font-size: 12px;
    --admin-table-head-font-weight: var(--admin-head-font-weight);
}

body.service-member-management-body .customer-service-agent-management .service-agent-member-panel {
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: none !important;
    scrollbar-gutter: auto !important;
    scrollbar-width: none !important;
}

body.service-member-management-body .customer-service-agent-management .service-agent-member-panel::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.service-member-management-body .service-agent-member-panel .member-console {
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: start !important;
    gap: var(--service-management-section-gap) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
}

/* Customer-service member pages use one balanced card rhythm inside the 720px console. */
body.service-member-management-body .service-agent-member-panel .member-console {
    --member-service-gutter: var(--service-management-content-gutter);
    --member-service-section-gap: var(--service-management-section-gap);
    --member-list-toolbar-gap: 8px;
    --member-list-toolbar-padding-x: 8px;
    --member-list-toolbar-padding-y: 10px;
    --member-list-delete-width: 108px;
    --member-list-label-width: 42px;
    --member-list-search-width: 72px;
    --member-list-control-height: 36px;
    --member-list-control-radius: 10px;
}

body.service-member-management-body .service-agent-member-panel .member-console-tabs {
    box-sizing: border-box !important;
    width: 100% !important;
    gap: var(--service-management-nav-frame-gap) !important;
    margin: 0 !important;
    padding: var(--service-management-nav-frame-padding) !important;
    border-radius: var(--service-management-nav-frame-radius) !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-tabs a {
    height: var(--service-management-nav-item-height) !important;
    min-height: var(--service-management-nav-item-height) !important;
    max-height: var(--service-management-nav-item-height) !important;
    padding: 0 8px !important;
    border-radius: var(--service-management-nav-item-radius) !important;
    font-size: var(--service-management-nav-font-size) !important;
    line-height: 1.2 !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: none !important;
    scrollbar-gutter: auto !important;
    scrollbar-width: none !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-grid > article {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-card {
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--admin-panel-border) !important;
    border-radius: var(--service-management-card-radius) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045) !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-card > .member-console-head {
    box-sizing: border-box !important;
    display: flex !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 8px var(--member-service-gutter) !important;
    border-bottom: 1px solid var(--admin-panel-border) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%) !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-head .member-console-pill {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    align-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--admin-card-head-title, #0f172a) !important;
    box-shadow: none !important;
    font-size: var(--admin-card-head-title-size, 16px) !important;
    font-weight: var(--admin-card-head-title-weight, var(--admin-head-font-weight, 600)) !important;
    line-height: 1.25 !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-head > strong {
    min-width: 0 !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: right !important;
}

body.service-member-management-body .service-agent-member-panel .member-list-toolbar {
    display: grid !important;
    grid-template-columns: var(--member-list-delete-width) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: var(--member-list-toolbar-gap) !important;
    margin: 0 !important;
    padding: var(--member-list-toolbar-padding-y) var(--member-list-toolbar-padding-x) !important;
}

body.service-member-management-body .service-agent-member-panel .member-list-toolbar .member-batch-delete-form,
body.service-member-management-body .service-agent-member-panel .member-list-toolbar .member-filter-bar {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.service-member-management-body .service-agent-member-panel .member-list-toolbar > .member-filter-bar:only-child {
    grid-column: 1 / -1 !important;
}

body.service-member-management-body .service-agent-member-panel .member-list-toolbar .member-batch-delete-form button {
    box-sizing: border-box !important;
    width: var(--member-list-delete-width) !important;
    min-width: var(--member-list-delete-width) !important;
    min-height: var(--member-list-control-height) !important;
    padding: 0 10px !important;
    border-radius: var(--member-list-control-radius) !important;
}

body.service-member-management-body .service-agent-member-panel .member-list-toolbar .member-filter-bar {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.service-member-management-body .service-agent-member-panel .member-list-toolbar .member-filter-bar label {
    grid-template-columns: var(--member-list-label-width) minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.service-member-management-body .service-agent-member-panel .member-list-toolbar .member-search-field {
    grid-template-columns: minmax(0, 1fr) var(--member-list-search-width) !important;
    gap: 6px !important;
}

body.service-member-management-body .service-agent-member-panel .member-list-toolbar .member-search-field input {
    min-height: var(--member-list-control-height) !important;
    border-radius: var(--member-list-control-radius) !important;
}

body.service-member-management-body .service-agent-member-panel .member-list-toolbar .member-search-field button {
    width: var(--member-list-search-width) !important;
    min-width: var(--member-list-search-width) !important;
    min-height: var(--member-list-control-height) !important;
    padding: 0 10px !important;
    border-radius: var(--member-list-control-radius) !important;
}

body.service-member-management-body .service-agent-member-panel .member-table-wrap,
body.service-member-management-body .service-agent-member-panel .member-consumption-wrap,
body.service-member-management-body .service-agent-member-panel .member-business-consumption-wrap {
    box-sizing: border-box !important;
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    margin: 0 4px var(--member-service-gutter) !important;
    padding: 0 !important;
    overflow: auto !important;
    border-radius: 10px !important;
    scrollbar-gutter: auto !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-card.is-consumption > .member-consumption-wrap {
    margin-top: var(--member-service-section-gap) !important;
}

body.service-member-management-body .service-agent-member-panel .admin-tip {
    box-sizing: border-box !important;
    width: calc(100% - (var(--member-service-gutter) * 2)) !important;
    margin: var(--member-service-section-gap) var(--member-service-gutter) 0 !important;
    padding: 9px 11px !important;
    border: 1px solid #dbe7f3 !important;
    border-radius: 9px !important;
    background: #f8fbff !important;
    color: #38516f !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

body.service-member-management-body .service-agent-member-panel .member-business-note,
body.service-member-management-body .service-agent-member-panel .member-ledger-note {
    margin: 0 var(--member-service-gutter) var(--member-service-gutter) !important;
}

body.service-member-management-body .service-agent-member-panel .member-register-bonus-form {
    box-sizing: border-box !important;
    gap: 6px !important;
    padding: var(--member-service-gutter) !important;
}

body.service-member-management-body .service-agent-member-panel .member-register-bonus-form label {
    gap: 3px !important;
    min-width: 0 !important;
}

body.service-member-management-body .service-agent-member-panel .member-register-bonus-form label span {
    font-size: 12.5px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

body.service-member-management-body .service-agent-member-panel .member-register-bonus-form input,
body.service-member-management-body .service-agent-member-panel .member-register-bonus-form button {
    min-height: 34px !important;
}

body.service-member-management-body .service-agent-member-panel .member-business-filter {
    box-sizing: border-box !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: calc(100% - (var(--member-service-gutter) * 2)) !important;
    margin: 4px var(--member-service-gutter) !important;
    padding: 4px !important;
}

body.service-member-management-body .service-agent-member-panel .member-business-filter .is-region,
body.service-member-management-body .service-agent-member-panel .member-business-filter .is-type,
body.service-member-management-body .service-agent-member-panel .member-business-filter .is-keyword {
    grid-column: auto !important;
}

body.service-member-management-body .service-agent-member-panel .member-business-filter-actions {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-self: center !important;
}

body.service-member-management-body .service-agent-member-panel .member-business-filter-actions .ui-admin-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding-inline: 5px !important;
}

body.service-member-management-body .service-agent-member-panel .admin-pagination,
body.service-member-management-body .service-agent-member-panel .member-console-empty {
    box-sizing: border-box !important;
    width: calc(100% - (var(--member-service-gutter) * 2)) !important;
    margin: 0 var(--member-service-gutter) var(--member-service-gutter) !important;
}

body.service-member-management-body .service-agent-member-panel .member-console-empty {
    min-height: 96px !important;
    padding: 24px 16px !important;
}

body.service-member-management-body .service-agent-member-panel .member-register-bonus-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.service-member-management-body .service-agent-member-panel .member-register-bonus-form > button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

body.service-member-management-body .service-agent-member-panel .admin-modal {
    z-index: 1200 !important;
}

@media (max-width: 520px) {
    body.service-member-management-body .service-agent-member-panel .member-console {
        --member-list-toolbar-gap: 6px;
        --member-list-toolbar-padding-x: 6px;
        --member-list-toolbar-padding-y: 8px;
        --member-list-delete-width: 92px;
        --member-list-label-width: 38px;
        --member-list-search-width: 64px;
    }

    body.service-member-management-body .service-agent-member-panel .member-console-card > .member-console-head {
        min-height: 42px !important;
        padding: 7px var(--member-service-gutter) !important;
    }

    body.service-member-management-body .service-agent-member-panel .member-console-head > strong {
        font-size: 12px !important;
    }

    body.service-member-management-body .service-agent-member-panel .member-list-toolbar {
        grid-template-columns: var(--member-list-delete-width) minmax(0, 1fr) !important;
        gap: var(--member-list-toolbar-gap) !important;
    }

    body.service-member-management-body .service-agent-member-panel .member-list-toolbar .member-filter-bar label {
        grid-template-columns: var(--member-list-label-width) minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    body.service-member-management-body .service-agent-member-panel .member-register-bonus-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.service-member-management-body .service-agent-member-panel .member-register-bonus-form label > span {
        display: flex !important;
        min-height: 30px !important;
        align-items: flex-end !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
    }
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .customer-service-agent-console.customer-service-agent-management .service-agent-top {
    box-sizing: border-box !important;
    min-height: var(--service-management-titlebar-height) !important;
    height: var(--service-management-titlebar-height) !important;
    max-height: var(--service-management-titlebar-height) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-content: center !important;
    gap: 0 !important;
    padding: var(--service-management-titlebar-pad-y) var(--service-management-titlebar-pad-x) !important;
    border: 0 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .customer-service-agent-console.customer-service-agent-management .service-agent-top-main {
    width: 100% !important;
    min-height: var(--service-management-title-content-height) !important;
    height: var(--service-management-title-content-height) !important;
    max-height: var(--service-management-title-content-height) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: var(--service-management-title-gap) !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body):not(.customer-service-compose-keyboard-active):not(.customer-service-agent-compose-active):not(.customer-service-ios-keyboard-active) .customer-service-agent-console.customer-service-agent-management .service-agent-title-name {
    display: flex !important;
    height: var(--service-management-title-content-height) !important;
    min-height: var(--service-management-title-content-height) !important;
    max-height: var(--service-management-title-content-height) !important;
    align-items: center !important;
    align-self: center !important;
    font-size: var(--service-management-title-font-size) !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-panel {
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-form {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: var(--service-agent-payment-shell-gap) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-head,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-actions {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-switches {
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: var(--service-agent-payment-method-height) !important;
    gap: var(--service-management-nav-frame-gap) !important;
    padding: var(--service-management-nav-frame-padding) !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: var(--service-management-nav-frame-radius) !important;
    background: rgba(241, 245, 249, 0.82) !important;
    box-shadow: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-switch {
    display: grid !important;
    box-sizing: border-box !important;
    height: var(--service-agent-payment-method-height) !important;
    min-height: var(--service-agent-payment-method-height) !important;
    max-height: var(--service-agent-payment-method-height) !important;
    min-width: 0 !important;
    grid-template-rows: 20px 13px !important;
    align-content: center !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 1px !important;
    padding: 1px 3px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: var(--service-management-nav-item-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    text-align: center !important;
    text-decoration: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-switch.is-active {
    border-color: rgba(37, 99, 235, 0.5) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-switch i {
    display: inline-flex !important;
    width: 20px !important;
    height: 20px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-switch.is-alipay i {
    background: #1677ff !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-switch.is-wechat i {
    background: #16a34a !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-switch.is-usdt i {
    background: #0f766e !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-switch span {
    display: block !important;
    max-width: 100% !important;
    height: 13px !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: var(--service-management-nav-font-size) !important;
    font-weight: 900 !important;
    line-height: 13px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-grid {
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    background: transparent !important;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: none !important;
    scrollbar-gutter: auto !important;
    scrollbar-width: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-card {
    display: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow: visible !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
    border-radius: var(--service-management-card-radius) !important;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%) !important;
    box-shadow: none !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-card.is-active {
    display: grid !important;
    grid-template-rows: max-content max-content max-content !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-card-head {
    display: flex !important;
    min-width: 0 !important;
    min-height: 30px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 38px 0 0 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-card-head > i {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 10px !important;
    background: var(--service-payment-accent, #1677ff) !important;
    color: #ffffff !important;
    font-size: 15px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-card-head strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-upload-row {
    position: relative !important;
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: stretch !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-file-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-submit,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-usdt-save {
    min-height: 42px !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-submit {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-preview {
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 126px !important;
    grid-template-columns: repeat(auto-fill, minmax(88px, 100px)) !important;
    align-content: start !important;
    justify-content: start !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow: visible !important;
    border: 1px dashed rgba(37, 99, 235, 0.22) !important;
    border-radius: 13px !important;
    background: rgba(248, 250, 252, 0.76) !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-preview-item,
body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-empty {
    width: 100px !important;
    height: 100px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-delete {
    top: -8px !important;
    right: -8px !important;
    width: 28px !important;
    height: 28px !important;
    border-width: 2px !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-card .service-agent-usdt-address {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(112px, 140px) !important;
    grid-template-areas:
        "title save"
        "input input" !important;
    gap: 7px !important;
    padding: 7px !important;
    border: 1px dashed rgba(249, 115, 22, 0.48) !important;
    border-radius: 13px !important;
    background: #fff7ed !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-usdt-address-title {
    height: 34px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #9a3412 !important;
    font-size: 13px !important;
}

body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-usdt-address input {
    height: 38px !important;
    min-height: 38px !important;
    border-color: rgba(249, 115, 22, 0.28) !important;
    font-size: 12px !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) {
        --service-management-content-gutter: 8px;
        --service-management-title-font-size: 17px;
        --service-management-title-gap: 6px;
        --service-management-switch-min-width: 100px;
        --service-management-switch-pad-x: 10px;
        --service-management-switch-font-size: 12.5px;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-console.customer-service-agent-management {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: var(--service-agent-payment-shell-pad, 8px) !important;
        border-radius: 14px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-submit {
        min-height: 40px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-preview {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
        min-height: 116px !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-preview-item,
    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-empty {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    body.front-unified-panel-page.customer-service-agent-body.customer-service-body:not(.customer-service-embed-body) .customer-service-agent-management .service-agent-payment-card .service-agent-usdt-address {
        grid-template-columns: minmax(0, 1fr) 104px !important;
    }
}

/* Online support visible-state closure. */
body.customer-service-body .service-thread,
body.customer-service-body .service-thread-log,
body.customer-service-body .service-thread-composer,
body.customer-service-body .service-thread-placeholder,
body.customer-service-body .service-agent-session-list {
    min-width: 0 !important;
}

body.customer-service-body .service-thread-log > .service-thread-empty,
body.customer-service-agent-body .service-agent-session-list > .customer-service-empty {
    width: min(100%, 340px) !important;
    max-width: calc(100vw - 32px) !important;
    margin: auto !important;
    overflow-wrap: anywhere !important;
    border: 1px dashed #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: none !important;
}

body.customer-service-agent-body .service-agent-session-list > .customer-service-empty {
    grid-column: 1 / -1 !important;
    align-self: center !important;
    justify-self: center !important;
}

body.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body) .service-thread--member > .service-thread-placeholder {
    grid-row: 3 / -1 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.customer-service-body .service-thread-placeholder p,
body.customer-service-body .service-thread-system-pill,
body.customer-service-body .service-thread-bubble,
body.customer-service-body .service-thread-empty,
body.customer-service-body .customer-service-empty {
    overflow-wrap: anywhere !important;
}

body.customer-service-body .service-thread-message-wrap,
body.customer-service-body .service-thread-bubble,
body.customer-service-body .service-thread-voice,
body.customer-service-body .service-thread-bubble audio,
body.customer-service-body .service-thread-image-open,
body.customer-service-body .service-thread-bubble img {
    max-width: 100% !important;
}

body.customer-service-body .service-thread-bubble audio {
    min-width: 0 !important;
}

body.customer-service-body .service-thread-image-open {
    overflow: hidden !important;
    border-radius: 10px !important;
}

body.customer-service-body:not(.customer-service-agent-body) .service-thread--member .service-thread-peer-copy {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.customer-service-body:not(.customer-service-agent-body) .service-thread--member .service-thread-title,
body.customer-service-body:not(.customer-service-agent-body) .service-thread--member .service-thread-hours {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.customer-service-body .service-thread-placeholder-actions {
    width: 100% !important;
    max-width: 360px !important;
}

body.customer-service-body .service-thread-placeholder-actions a {
    min-width: 108px !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    body.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body) .customer-service-page {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.customer-service-body:not(.customer-service-agent-body):not(.customer-service-embed-body) .service-thread--member {
        border-right: 0 !important;
        border-left: 0 !important;
        border-radius: 0 0 12px 12px !important;
    }

    body.customer-service-body:not(.customer-service-agent-body) .service-thread--member .service-thread-head {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body.customer-service-body:not(.customer-service-agent-body) .service-thread--member .service-thread-peer {
        min-width: 0 !important;
    }

    body.customer-service-body:not(.customer-service-agent-body) .service-thread--member .service-thread-peer-copy {
        display: grid !important;
        gap: 2px !important;
        align-items: center !important;
        white-space: normal !important;
    }

    body.customer-service-body:not(.customer-service-agent-body) .service-thread--member .service-thread-title {
        font-size: var(--service-member-title-size) !important;
        line-height: 1.05 !important;
    }

    body.customer-service-body:not(.customer-service-agent-body) .service-thread--member .service-thread-hours {
        font-size: var(--service-member-hours-size) !important;
        line-height: 1.1 !important;
    }

    body.customer-service-body .service-thread-log {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    body.customer-service-body .service-thread-message-wrap {
        max-width: 88% !important;
    }

    body.customer-service-body .service-thread-system-pill {
        max-width: 92% !important;
        border-radius: 14px !important;
    }

    body.customer-service-body .service-thread-bubble img {
        max-width: min(240px, 70vw) !important;
        max-height: 300px !important;
    }

    body.customer-service-body .service-thread-bubble audio {
        width: min(220px, 70vw) !important;
    }

    body.customer-service-body .service-thread-placeholder {
        min-height: 0 !important;
        padding: 22px 14px !important;
    }

    body.customer-service-body .service-thread-placeholder-icon {
        width: 54px !important;
        height: 54px !important;
        border-radius: 16px !important;
        font-size: 22px !important;
    }

    body.customer-service-body .service-thread-placeholder h2 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    body.customer-service-body .service-thread-placeholder p {
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    body.customer-service-body .service-thread-placeholder-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.customer-service-body .service-thread-placeholder-actions a {
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
    }

    body.customer-service-body .service-thread-log > .service-thread-empty,
    body.customer-service-agent-body .service-agent-session-list > .customer-service-empty {
        max-width: calc(100vw - 28px) !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 360px) {
    body.customer-service-body .service-thread-tools {
        gap: 3px !important;
    }

    body.customer-service-body {
        --service-thread-tool-size: 32px;
        --service-thread-send-size: 40px;
        --service-member-head-height: 48px;
        --service-member-avatar-size: 36px;
        --service-member-action-size: 34px;
        --service-member-title-size: 14px;
        --service-member-hours-size: 10.5px;
    }

    body.customer-service-body .service-thread-composer {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    body.customer-service-body:not(.customer-service-agent-body) .service-thread--member .service-thread-title {
        font-size: var(--service-member-title-size) !important;
    }

    body.customer-service-body:not(.customer-service-agent-body) .service-thread--member .service-thread-hours {
        font-size: var(--service-member-hours-size) !important;
    }
}