/**
 * 客服聊天窗口与客服工作台共用样式。
 * 创建时间：2026-08-07
 * 创建人：Codex（GPT-5）
 */
:root {
    --support-primary: #146c94;
    --support-primary-dark: #0d4f70;
    --support-text: #182230;
    --support-muted: #667085;
    --support-border: #dfe5ec;
    --support-surface: #ffffff;
    --support-background: #f4f7fa;
    --support-success: #159455;
    --support-radius: 14px;
    --support-shadow: 0 18px 48px rgba(16, 43, 68, .18);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--support-text);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--support-background); color: var(--support-text); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
label { display: grid; gap: 6px; color: #344054; font-size: 14px; font-weight: 600; }
input, textarea { width: 100%; border: 1px solid var(--support-border); border-radius: 9px; padding: 10px 12px; color: var(--support-text); background: #fff; outline: none; }
input:focus, textarea:focus { border-color: var(--support-primary); box-shadow: 0 0 0 3px rgba(20, 108, 148, .12); }

.support-button { border: 0; border-radius: 9px; padding: 10px 15px; font-weight: 700; transition: background .15s ease, transform .15s ease; }
.support-button:active { transform: translateY(1px); }
.support-button--primary { background: var(--support-primary); color: #fff; }
.support-button--primary:hover { background: var(--support-primary-dark); }
.support-button--secondary { background: #e9f3f8; color: var(--support-primary-dark); }
.support-button--wide { width: 100%; margin-top: 8px; }
.support-icon-button { border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; }
.support-count { display: inline-grid; min-width: 24px; height: 24px; padding: 0 7px; place-items: center; border-radius: 999px; background: #e8eef4; color: #344054; font-size: 12px; }

.support-widget-page { min-height: 100vh; background: transparent; overflow: hidden; }
.support-launcher { position: fixed; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 8px; min-height: 54px; border: 0; border-radius: 999px; padding: 0 20px; background: var(--support-primary); color: #fff; box-shadow: var(--support-shadow); font-weight: 800; }
.support-launcher span:first-child { font-size: 22px; }
.support-unread-badge { position: absolute; top: -5px; right: -3px; display: grid; min-width: 24px; height: 24px; place-items: center; border: 2px solid #fff; border-radius: 999px; padding: 0 5px; background: #d92d20; color: #fff; font-size: 11px; line-height: 1; }
.support-widget { position: fixed; inset: 8px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--support-radius); overflow: hidden; background: var(--support-surface); box-shadow: var(--support-shadow); }
.support-widget__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: linear-gradient(135deg, var(--support-primary-dark), var(--support-primary)); color: #fff; }
.support-widget__header > div:first-child { display: grid; gap: 3px; }
.support-widget__header span { font-size: 12px; opacity: .82; }
.support-widget__header .support-wait-timer { color: #fff; font-variant-numeric: tabular-nums; font-weight: 700; opacity: 1; }
.support-widget__header-actions { display: flex; align-items: center; gap: 6px; }
.support-notification-icon { font-size: 17px; opacity: .9; }
.support-notification-icon:disabled { cursor: default; filter: grayscale(1); opacity: .5; }
.support-messages { overflow-y: auto; padding: 16px; background: #f8fafc; }
.support-message { display: grid; gap: 4px; max-width: 84%; margin-bottom: 12px; }
.support-message p { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(16, 43, 68, .07); white-space: pre-wrap; overflow-wrap: anywhere; }
.support-message small { color: var(--support-muted); font-size: 11px; }
.support-message--customer { margin-left: auto; justify-items: end; }
.support-message--customer p { background: var(--support-primary); color: #fff; }
.support-message--pending { opacity: .72; }
.support-message--failed p { outline: 2px solid #d92d20; outline-offset: 1px; }
.support-message-retry { border: 0; padding: 0; background: transparent; color: #b42318; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.support-message-retry:hover { color: #7a271a; }
.support-message-retry:focus-visible { border-radius: 3px; outline: 2px solid #d92d20; outline-offset: 2px; }
.support-message--system p { background: #fff7e5; color: #7a4a00; }
.support-message-action { border: 0; padding: 0; background: transparent; color: var(--support-primary-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.support-message-action:focus-visible { border-radius: 3px; outline: 2px solid var(--support-primary); outline-offset: 2px; }
.support-message-action:disabled { color: inherit; cursor: default; text-decoration: none; }
.support-product-options { display: grid; gap: 8px; width: 100%; margin-top: 8px; white-space: normal; }
.support-product-option { display: grid; gap: 4px; width: 100%; border: 1px solid var(--support-border); border-radius: 9px; padding: 10px 12px; background: #fff; color: var(--support-text); text-align: left; }
.support-product-option:hover { border-color: #9bc4d7; background: #f7fbfd; }
.support-product-option:focus-visible { outline: 2px solid var(--support-primary); outline-offset: 2px; }
.support-product-option strong { font-size: 13px; line-height: 1.4; }
.support-product-option span { color: var(--support-muted); font-size: 12px; overflow-wrap: anywhere; }
.support-product-option:disabled { cursor: default; opacity: .62; }
.support-product-option--selected, .support-product-option--selected:hover { border-color: var(--support-primary); background: #e9f3f8; opacity: 1; }
.support-composer { display: grid; gap: 10px; padding: 12px; border-top: 1px solid var(--support-border); background: #fff; }
.support-composer textarea { resize: none; }
.support-composer__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.support-offline { overflow-y: auto; padding: 18px; background: #fff; }
.support-offline h2 { margin: 0 0 6px; font-size: 18px; }
.support-offline p { margin: 0 0 14px; color: var(--support-muted); font-size: 13px; line-height: 1.5; }
.support-offline__contact-link { color: var(--support-primary-dark); font-weight: 800; text-underline-offset: 2px; }
.support-offline__contact-link:hover { color: var(--support-primary); }
.support-offline__contact-link:focus-visible { border-radius: 3px; outline: 2px solid var(--support-primary); outline-offset: 2px; }
.support-offline__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.support-login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(140deg, #edf4f8, #f8fafc 55%, #edf2f7); }
.support-login-card { width: min(420px, 100%); padding: 32px; border: 1px solid var(--support-border); border-radius: 18px; background: #fff; box-shadow: var(--support-shadow); }
.support-login-card h1 { margin: 18px 0 8px; font-size: 26px; }
.support-login-card > p { margin: 0 0 24px; color: var(--support-muted); line-height: 1.6; }
.support-login-card form { display: grid; gap: 16px; }
.support-brand-mark { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; background: var(--support-primary); color: #fff; font-size: 24px; font-weight: 900; }
.support-brand-mark--small { display: inline-grid; width: 32px; height: 32px; margin-right: 10px; border-radius: 8px; font-size: 16px; vertical-align: middle; }
.support-checkbox { display: flex; align-items: center; gap: 8px; }
.support-checkbox input { width: auto; }
.support-error { margin: 0; color: #b42318; font-size: 13px; }

.support-dashboard-page { min-height: 100vh; overflow: hidden; }
.support-topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--support-border); background: #fff; }
.support-topbar__actions { display: flex; align-items: center; gap: 10px; color: var(--support-muted); font-size: 14px; }
.support-topbar__actions form, .support-topbar__actions button { margin: 0; }
.support-topbar__actions button { border: 0; background: transparent; color: var(--support-primary); font-weight: 700; }
.support-topbar__actions .support-notification-button { border-radius: 8px; padding: 7px 10px; background: #e9f3f8; }
.support-topbar__actions .support-notification-button:disabled { color: var(--support-muted); cursor: default; }
.support-topbar__link { color: var(--support-primary-dark); font-weight: 700; text-decoration: none; }
.support-topbar__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.support-online-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--support-success); box-shadow: 0 0 0 4px rgba(21, 148, 85, .12); }
/* 限制工作台网格高度，确保长消息只在消息区滚动且底部输入框始终可见。 */
.support-dashboard { height: calc(100vh - 64px); display: grid; grid-template-columns: 280px minmax(380px, 1fr) 340px; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.support-sidebar, .support-offline-panel { overflow-y: auto; padding: 18px; background: #fff; }
.support-sidebar { border-right: 1px solid var(--support-border); }
.support-offline-panel { border-left: 1px solid var(--support-border); }
.support-sidebar section + section { margin-top: 28px; }
.support-sidebar h2, .support-offline-panel h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 15px; }
.support-sidebar__hint { margin: -5px 0 10px; color: var(--support-muted); font-size: 11px; line-height: 1.45; }
.support-offline-panel > p { margin: -4px 0 16px; color: var(--support-muted); font-size: 12px; line-height: 1.5; }
.support-list { display: grid; gap: 8px; }
.support-list-card { display: grid; gap: 6px; width: 100%; padding: 12px; border: 1px solid var(--support-border); border-radius: 10px; background: #fff; color: inherit; text-align: left; }
.support-list-card:hover { border-color: #9bc4d7; background: #f7fbfd; }
.support-list-card--closed { background: #f8fafc; }
.support-list-card strong { font-size: 14px; }
.support-list-card span, .support-list-card small { color: var(--support-muted); font-size: 12px; overflow-wrap: anywhere; }
.support-list-card .support-list-card__unread { justify-self: start; border-radius: 999px; padding: 3px 7px; background: #fee4e2; color: #b42318; font-weight: 800; }
.support-list-card__actions { display: flex; gap: 6px; margin-top: 4px; }
.support-list-card__actions button, .support-list-card__actions a { border: 0; border-radius: 7px; padding: 6px 8px; background: #e9f3f8; color: var(--support-primary-dark); font-size: 11px; font-weight: 700; text-decoration: none; }
.support-chat-workspace { min-width: 0; min-height: 0; overflow: hidden; background: var(--support-background); }
.support-empty-state { height: 100%; display: grid; align-content: center; justify-items: center; padding: 32px; color: var(--support-muted); text-align: center; }
.support-empty-state div { font-size: 38px; }
.support-empty-state h1 { margin: 12px 0 4px; color: var(--support-text); font-size: 20px; }
.support-empty-state p { margin: 0; }
.support-staff-chat { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.support-staff-chat:not([hidden]) { display: grid; }
.support-staff-chat > header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 18px; border-bottom: 1px solid var(--support-border); background: #fff; }
.support-staff-chat > header div { display: grid; gap: 3px; }
.support-staff-chat > header span { color: var(--support-muted); font-size: 12px; }
.support-staff-chat > header .support-conversation-status { color: #b54708; font-weight: 700; }
.support-messages--staff { min-height: 0; padding: 22px; }
/* 工作台以客服为当前用户，客户消息靠左、人工客服消息靠右。 */
.support-messages--staff .support-message--customer { margin-left: 0; justify-items: start; }
.support-messages--staff .support-message--customer p { background: #fff; color: var(--support-text); }
.support-messages--staff .support-message--agent { margin-left: auto; justify-items: end; }
.support-messages--staff .support-message--agent p { background: var(--support-primary); color: #fff; }
.support-composer--staff { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 16px 18px; }
.support-alert-region { position: fixed; z-index: 1000; top: 76px; right: 18px; display: grid; width: min(380px, calc(100vw - 36px)); gap: 8px; pointer-events: none; }
.support-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 14px; border: 1px solid #f2c94c; border-radius: 12px; background: #fff8dc; box-shadow: var(--support-shadow); color: #6b4500; pointer-events: auto; }
.support-alert strong { display: block; margin-bottom: 3px; color: #4f3500; }
.support-alert p { margin: 0; font-size: 13px; line-height: 1.45; }
.support-alert button { border: 0; padding: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; }

@media (max-width: 980px) {
    .support-dashboard { grid-template-columns: 240px minmax(360px, 1fr); }
    .support-offline-panel { display: none; }
}