.support-page { height: 100%; background: #f2f4f7; color: #253347; font-family: Arial, "Microsoft JhengHei", "PingFang TC", sans-serif; }
.support-shell { display: flex; flex-direction: column; width: min(820px, 100%); height: 100%; min-height: 0; margin: auto; background: #f7f8fa; border-inline: 1px solid #e6e9ef; }
.support-header, .support-notice, .support-connection, .support-composer { flex-shrink: 0; }
.support-header { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #e7eaf0; background: #fff; }
.support-back { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #e1e5eb; border-radius: 50%; background: #fff; color: #435167; font-size: 20px; }
.support-title { flex: 1; }
.support-title h1 { margin: 0 0 5px; font-size: 19px; font-weight: 600; line-height: 1.4; }
.support-title p { color: #7e8796; font-size: 12px; }
.support-tag { padding: 5px 9px; border: 1px solid #dbe4f0; border-radius: 5px; background: #f3f7fd; color: #577294; font-size: 11px; white-space: nowrap; }
.support-notice { padding: 10px 22px; background: #fff7e9; color: #826b45; font-size: 12px; line-height: 1.6; }
.support-connection { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 22px; border-bottom: 1px solid #e9edf2; background: #fff; color: #798393; font-size: 12px; }
.support-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #a3aab5; }
.support-connection[data-state="connected"] .support-dot { background: #4e9d79; }
.support-connection[data-state="error"] .support-dot, .support-connection[data-state="offline"] .support-dot { background: #c88462; }
.support-status { flex: 1; }
.support-reconnect { padding: 0; border: 0; background: transparent; color: #9a6c30; font-size: 12px; }
.support-log { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px 22px; scroll-behavior: auto; }
.support-empty { max-width: 340px; margin: 42px auto; padding: 25px 22px; border: 1px solid #e3e8ef; border-radius: 12px; background: #fff; text-align: center; }
.support-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 15px; border-radius: 14px; background: #f5ead9; color: #b78c52; font-size: 25px; }
.support-empty h2 { margin-bottom: 10px; color: #465368; font-size: 15px; }
.support-empty p { color: #8b93a0; font-size: 12px; line-height: 1.8; }
.support-message { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-bottom: 20px; }
.support-message[data-role="visitor"] { align-items: flex-end; }
.support-message-meta { color: #929aa6; font-size: 11px; }
.support-bubble { max-width: min(82%, 580px); padding: 11px 15px; border: 1px solid #e5e9ef; border-radius: 3px 13px 13px; background: #fff; color: #344055; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-message[data-role="visitor"] .support-bubble { border-color: #e9d5b5; border-radius: 13px 3px 13px 13px; background: #f9e5c7; color: #6c522e; }
.support-delivery { padding: 0 3px; color: #a5acb5; font-size: 10px; }
.support-composer { padding: 14px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid #e2e7ee; background: #fff; }
.support-sharing { margin-bottom: 11px; padding: 9px 11px; border: 1px solid #e2e7ee; border-radius: 7px; background: #f8fafc; }
.support-sharing-label { display: flex; align-items: center; gap: 7px; width: fit-content; color: #647286; font-size: 12px; line-height: 1.6; cursor: pointer; }
.support-sharing-label input { width: 14px; height: 14px; margin: 0; accent-color: #b47b30; }
.support-sharing p { margin: 4px 0 0; color: #8a94a2; font-size: 10px; line-height: 1.6; }
.support-sync { display: block; margin-top: 5px; color: #8a94a2; font-size: 10px; line-height: 1.5; }
.support-sync[data-state="synced"] { color: #29836b; }
.support-sync[data-state="error"] { color: #ab5146; }
.support-composer[data-sharing="true"] .support-sharing { border-color: #e7c994; background: #fff8eb; }
.support-composer[data-sharing="true"] .support-sharing-label { color: #946628; }
.support-input-row { display: flex; align-items: flex-end; gap: 10px; }
.support-input { flex: 1; width: 0; min-height: 48px; max-height: 140px; padding: 12px 13px; resize: vertical; border: 1px solid #dce2ea; border-radius: 8px; background: #fbfcfd; color: #344055; font-size: 14px; line-height: 1.55; }
.support-send { min-width: 78px; height: 48px; padding: 0 15px; border: 0; border-radius: 8px; background: #eab15f; color: #fff; font-size: 14px; }
.support-send:disabled { background: #e0d4c2; cursor: default; }
.support-composer-bottom { display: flex; justify-content: space-between; gap: 10px; padding-top: 9px; color: #a4aab4; font-size: 10px; }
.support-error { margin-top: 9px; color: #ab5146; font-size: 12px; line-height: 1.5; }
.support-error:empty { display: none; }
@media (max-width: 600px) {
  .support-header { gap: 10px; padding: 14px; }
  .support-title h1 { font-size: 17px; }
  .support-title p { font-size: 10px; }
  .support-tag { font-size: 10px; padding: 4px 6px; }
  .support-notice { padding: 10px 14px; font-size: 11px; }
  .support-connection { padding-inline: 14px; font-size: 11px; }
  .support-log { padding: 20px 14px; }
  .support-composer { padding-inline: 12px; }
  .support-send { min-width: 66px; padding: 0 10px; }
  .support-bubble { max-width: 88%; }
}

/* 客服头像与灰色气泡、图片消息、发图按钮 */
.support-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.support-message[data-role="visitor"] .support-row { justify-content: flex-end; }
.support-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; }
.support-message[data-role="agent"] .support-bubble { border: 0; border-radius: 12px; background: #e9eeee; color: #1f2d2d; }
.support-message[data-role="agent"] .support-row .support-bubble { max-width: calc(100% - 50px); }
.support-bubble-image { padding: 4px; }
.support-picture { display: block; max-width: min(240px, 100%); max-height: 320px; border-radius: 8px; object-fit: contain; background: #f3f5f5; }
.support-bubble a { display: block; line-height: 0; }
.support-input-row { align-items: center; }
.support-attach { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid #dce2ea; border-radius: 8px; background: #fbfcfd; color: #5b6b7d; cursor: pointer; }
.support-attach:disabled { opacity: .45; cursor: default; }
.support-attach:not(:disabled):hover { background: #f0f5f5; color: #13a8a8; }