/* Optional visitor window themes. The default window intentionally remains in chat-window-v2.css. */
.support-message { max-width: 94%; }
.support-message-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(39, 62, 94, .12);
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
}
.support-message-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.support-message-avatar-agent { color: #2371ca; background: #e9f3ff; }
.support-message-avatar-visitor { color: #7689a3; background: linear-gradient(145deg,#f4f7fb,#e8eef5); }
.support-message-avatar-visitor svg { width: 18px; height: 18px; overflow: visible; fill: currentColor; }
.support-welcome-row {
    align-self: flex-start;
    width: 100%;
    max-width: 94%;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}
.support-welcome-row .support-welcome {
    align-self: auto;
    min-width: 0;
    max-width: calc(100% - 39px);
    margin: 0;
    padding-left: 14px;
}
.support-welcome-row .support-welcome:before { display: none; }

/* 客服回复与欢迎消息使用同一视觉节奏：头像左上、气泡右侧、时间在下方。 */
.support-message.agent {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
        "avatar bubble"
        ". time";
    align-items: start;
    column-gap: 7px;
    row-gap: 3px;
}
.support-message.agent .support-message-avatar { grid-area: avatar; }
.support-message.agent .support-bubble { grid-area: bubble; min-width: 0; }
.support-message.agent .support-time {
    grid-area: time;
    justify-self: start;
    margin: 0 2px;
}

.support-page.window-style-slim-blue,
.support-page.window-style-clean-white,
.support-page.window-style-soft-violet {
    --window-ink: #15243a;
    --window-muted: #8b9bb2;
    background: #f5f8fc;
}

.window-style-slim-blue .support-window,
.window-style-clean-white .support-window,
.window-style-soft-violet .support-window {
    border-color: rgba(69, 103, 151, .12);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(35, 63, 105, .18), 0 2px 10px rgba(35, 63, 105, .05);
}

.window-style-slim-blue .support-head,
.window-style-clean-white .support-head,
.window-style-soft-violet .support-head {
    color: var(--window-ink);
}

.window-style-slim-blue .support-avatar,
.window-style-clean-white .support-avatar,
.window-style-soft-violet .support-avatar {
    width: 46px;
    height: 46px;
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    color: #2463ba;
    background-color: #e8f2ff;
    box-shadow: 0 6px 18px rgba(42, 98, 171, .16);
}

.window-style-slim-blue .support-head-copy,
.window-style-clean-white .support-head-copy,
.window-style-soft-violet .support-head-copy {
    gap: 3px;
}

.window-style-slim-blue .support-eyebrow,
.window-style-clean-white .support-eyebrow,
.window-style-soft-violet .support-eyebrow {
    display: none;
}

.window-style-slim-blue .support-head strong,
.window-style-clean-white .support-head strong,
.window-style-soft-violet .support-head strong {
    color: var(--window-ink);
    font-size: 16px;
    font-weight: 820;
    letter-spacing: -.2px;
}

.window-style-slim-blue .support-head small,
.window-style-clean-white .support-head small,
.window-style-soft-violet .support-head small {
    position: relative;
    padding-left: 13px;
    color: #44566f;
    font-size: 10px;
    font-weight: 650;
    opacity: 1;
}

.window-style-slim-blue .support-head small:before,
.window-style-clean-white .support-head small:before,
.window-style-soft-violet .support-head small:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #20ca6a;
    box-shadow: 0 0 0 3px rgba(32, 202, 106, .12);
    transform: translateY(-50%);
}

.window-style-slim-blue .support-safe,
.window-style-clean-white .support-safe,
.window-style-soft-violet .support-safe {
    display: none;
}

.window-style-slim-blue .support-icon,
.window-style-clean-white .support-icon,
.window-style-soft-violet .support-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #172238;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 4px 14px rgba(41, 62, 97, .08);
}

.window-style-slim-blue .support-icon:hover,
.window-style-clean-white .support-icon:hover,
.window-style-soft-violet .support-icon:hover {
    color: #0e6ee6;
    background: #fff;
}

.window-style-slim-blue .support-messages,
.window-style-clean-white .support-messages,
.window-style-soft-violet .support-messages {
    padding: 22px 17px;
    gap: 14px;
    background: radial-gradient(circle at 88% 4%, rgba(211, 229, 255, .35), transparent 34%), #fbfcff;
}

.window-style-slim-blue .support-loading,
.window-style-clean-white .support-loading,
.window-style-soft-violet .support-loading {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 auto auto;
    padding: 10px 15px;
    border: 1px solid rgba(73, 105, 155, .07);
    border-radius: 999px;
    color: #687b97;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 9px 24px rgba(43, 70, 110, .08);
    font-size: 11px;
}

.window-style-slim-blue .support-loading:before,
.window-style-clean-white .support-loading:before,
.window-style-soft-violet .support-loading:before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid #dbe7ff;
    border-top-color: #5f7dff;
    border-radius: 50%;
    animation: supportWindowThemeSpin .8s linear infinite;
}

@keyframes supportWindowThemeSpin { to { transform: rotate(360deg); } }

.window-style-slim-blue .support-welcome-row .support-welcome,
.window-style-clean-white .support-welcome-row .support-welcome,
.window-style-soft-violet .support-welcome-row .support-welcome {
    align-self: flex-start;
    max-width: calc(100% - 39px);
    margin: 4px 0 0;
    padding: 12px 14px;
    overflow: visible;
    border: 1px solid rgba(73, 105, 155, .07);
    border-radius: 18px 18px 18px 6px;
    color: #1b2638;
    background: #fff;
    box-shadow: 0 7px 22px rgba(42, 64, 97, .07);
    font-size: 12px;
    line-height: 1.6;
}

.window-style-slim-blue .support-welcome-row .support-welcome:before,
.window-style-clean-white .support-welcome-row .support-welcome:before,
.window-style-soft-violet .support-welcome-row .support-welcome:before {
    content: none;
    display: none;
}

.window-style-slim-blue .support-bubble,
.window-style-clean-white .support-bubble,
.window-style-soft-violet .support-bubble {
    border-color: rgba(61, 91, 137, .07);
    box-shadow: 0 5px 17px rgba(42, 63, 95, .055);
}

.window-style-slim-blue .support-composer,
.window-style-clean-white .support-composer,
.window-style-soft-violet .support-composer {
    padding: 9px 61px 9px 9px;
    border-top-color: rgba(66, 97, 143, .08);
    background: rgba(255, 255, 255, .98);
}

.window-style-slim-blue .support-tool-toggle,
.window-style-clean-white .support-tool-toggle,
.window-style-soft-violet .support-tool-toggle {
    color: #5e75fa;
    background: #f2f5ff;
}

.window-style-slim-blue .support-composer textarea,
.window-style-clean-white .support-composer textarea,
.window-style-soft-violet .support-composer textarea {
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid #e2e9f4;
    border-radius: 999px;
    color: #20304a;
    background: #f8faff;
}

.window-style-slim-blue .support-send,
.window-style-clean-white .support-send,
.window-style-soft-violet .support-send {
    right: 9px;
    top: 9px;
    width: 64px;
    min-width: 64px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    background: linear-gradient(145deg, #7591ff, #5d72f5);
    box-shadow: 0 7px 16px rgba(87, 110, 238, .24);
}

.window-style-slim-blue .support-send span,
.window-style-clean-white .support-send span,
.window-style-soft-violet .support-send span {
    display: inline;
}

.window-style-slim-blue .support-send i,
.window-style-clean-white .support-send i,
.window-style-soft-violet .support-send i {
    display: none;
}

/* 方案一：薄渐变头部。 */
.window-style-slim-blue .support-window { grid-template-rows: 78px minmax(0, 1fr) auto auto auto; }
.window-style-slim-blue .support-head {
    padding: 8px 17px 0;
    overflow: visible;
    background: linear-gradient(135deg, #dce9ff 0%, #eaf3ff 58%, #f8fbff 100%);
}
.window-style-slim-blue .support-head:before {
    right: -15px;
    top: -52px;
    width: 160px;
    height: 110px;
    background: rgba(255, 255, 255, .35);
}
.window-style-slim-blue .support-head:after { display: none; }

/* 方案二：极简白信息栏。 */
.window-style-clean-white .support-window { grid-template-rows: 72px minmax(0, 1fr) auto auto auto; }
.window-style-clean-white .support-head {
    padding: 0 17px;
    overflow: visible;
    border-bottom: 1px solid #edf1f6;
    background: rgba(255, 255, 255, .98);
}
.window-style-clean-white .support-head:before,
.window-style-clean-white .support-head:after { display: none; }
.window-style-clean-white .support-icon { background: #fff; box-shadow: none; }
.window-style-clean-white .support-messages { background: linear-gradient(180deg, #fafcff, #fff 42%); }
.window-style-clean-white .support-tool-toggle { color: #172238; background: #f4f5f7; }
.window-style-clean-white .support-send { background: linear-gradient(145deg, #58a7ff, #387df5); box-shadow: 0 7px 16px rgba(48, 126, 235, .24); }

/* 方案三：柔光蓝紫品牌头部。 */
.window-style-soft-violet .support-window { grid-template-rows: 84px minmax(0, 1fr) auto auto auto; }
.window-style-soft-violet .support-head {
    padding: 7px 17px 0;
    overflow: hidden;
    background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .62), transparent 24%), linear-gradient(135deg, #c5d6ff 0%, #cfd5ff 48%, #ece9ff 100%);
}
.window-style-soft-violet .support-head:before {
    right: -36px;
    top: -62px;
    width: 210px;
    height: 145px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .42));
    transform: rotate(-12deg);
}
.window-style-soft-violet .support-head:after {
    left: 36%;
    bottom: -56px;
    width: 190px;
    height: 100px;
    background: rgba(255, 255, 255, .18);
}
.window-style-soft-violet .support-messages { background: radial-gradient(circle at 76% 6%, rgba(211, 210, 255, .28), transparent 34%), #fbfcff; }

@media (max-width: 520px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    .support-composer textarea,
    .support-rating textarea { font-size: 16px !important; }
    .window-style-slim-blue .support-window,
    .window-style-clean-white .support-window,
    .window-style-soft-violet .support-window,
    .window-style-slim-blue.is-embed .support-window,
    .window-style-clean-white.is-embed .support-window,
    .window-style-soft-violet.is-embed .support-window {
        border-radius: 0;
    }
    .window-style-slim-blue .support-window { grid-template-rows: 76px minmax(0, 1fr) auto auto auto; }
    .window-style-clean-white .support-window { grid-template-rows: 68px minmax(0, 1fr) auto auto auto; }
    .window-style-soft-violet .support-window { grid-template-rows: 78px minmax(0, 1fr) auto auto auto; }
    .window-style-slim-blue .support-head,
    .window-style-clean-white .support-head,
    .window-style-soft-violet .support-head { min-height: 0; padding-left: 13px; padding-right: 12px; }
    .window-style-slim-blue .support-avatar,
    .window-style-clean-white .support-avatar,
    .window-style-soft-violet .support-avatar { width: 42px; height: 42px; }
    .window-style-slim-blue .support-head strong,
    .window-style-clean-white .support-head strong,
    .window-style-soft-violet .support-head strong { font-size: 15px; }
    .window-style-slim-blue .support-icon,
    .window-style-clean-white .support-icon,
    .window-style-soft-violet .support-icon { width: 42px; height: 42px; }
    .window-style-slim-blue .support-messages,
    .window-style-clean-white .support-messages,
    .window-style-soft-violet .support-messages { padding: 17px 12px; }
    .window-style-slim-blue .support-composer,
    .window-style-clean-white .support-composer,
    .window-style-soft-violet .support-composer { padding: 7px 77px 7px 7px; }
    .window-style-slim-blue .support-tool-toggle,
    .window-style-clean-white .support-tool-toggle,
    .window-style-soft-violet .support-tool-toggle { width: 42px; min-width: 42px; height: 42px; }
    .window-style-slim-blue .support-send,
    .window-style-clean-white .support-send,
    .window-style-soft-violet .support-send { width: 64px; min-width: 64px; height: 42px; }
    .window-style-slim-blue .support-send,
    .window-style-clean-white .support-send,
    .window-style-soft-violet .support-send { top: 7px; right: 7px; }
    .window-style-slim-blue .support-composer textarea,
    .window-style-clean-white .support-composer textarea,
    .window-style-soft-violet .support-composer textarea { min-height: 42px; }
    .window-style-slim-blue .support-new-messages,
    .window-style-clean-white .support-new-messages,
    .window-style-soft-violet .support-new-messages { bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .window-style-slim-blue .support-loading:before,
    .window-style-clean-white .support-loading:before,
    .window-style-soft-violet .support-loading:before { animation: none; }
}

body.support-panel-dragging,
body.support-panel-dragging * {
    cursor: grabbing !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}