/* Shared customer chat presentation. Business logic stays in the page widget. */
body #chat-root {
  --brand: #3478f6;
  --brand-dark: #2463da;
  --accent: #3478f6;
  --accent-soft: #edf4ff;
  --border: #e4eaf3;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #23334c;
  -webkit-font-smoothing: antialiased;
}
#chat-root #chat-trigger {
  background: #3478f6;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 6px 22px rgba(39, 94, 191, .24);
}
#chat-root #chat-panel {
  width: 400px;
  height: 640px;
  max-height: calc(100vh - 128px);
  border: 1px solid #e0e7f1;
  border-radius: 22px;
  background: #f4f7fc;
  box-shadow: 0 16px 54px rgba(34, 58, 100, .17), 0 2px 8px rgba(34, 58, 100, .05);
}
#chat-root #chat-header {
  padding: 17px 18px;
  gap: 0;
  background: #fff;
  border-bottom: 1px solid #e8edf5;
}
#chat-root #header-avatar {
  width: 42px;
  height: 42px;
  margin-right: 11px;
  border-radius: 14px;
  background: #3478f6;
  background: linear-gradient(145deg, #4b8dff, #2d6fe9);
  box-shadow: 0 4px 10px rgba(52, 120, 246, .16);
}
#chat-root #header-avatar svg { width: 20px; height: 20px; }
#chat-root #header-name { font-size: 16px; line-height: 1.4; font-weight: 650; color: #1c2c45; }
#chat-root #header-status { margin-top: 4px; gap: 5px; font-size: 11px; line-height: 1.5; color: #7b899d; }
#chat-root .status-dot { width: 6px; height: 6px; background: #31bd85; box-shadow: 0 0 0 3px #edf9f3; }
#chat-root #new-chat-btn {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #dfe7f2;
  border-radius: 11px;
  background: #fff;
  color: #59718e;
  font-size: 12px;
  font-weight: 500;
}
#chat-root #new-chat-btn:hover { border-color: #b7cff4; background: #f3f7ff; color: #2463da; }
#chat-root #new-chat-btn:focus-visible { outline: 2px solid #3478f6; outline-offset: 2px; }
#chat-root #messages {
  min-height: 0;
  padding: 20px 16px 18px;
  gap: 0;
  background: #f4f7fc;
  scrollbar-color: #d1dced transparent;
  scrollbar-width: thin;
}
#chat-root #messages::-webkit-scrollbar { width: 4px; }
#chat-root #messages::-webkit-scrollbar-thumb { background: #d1dced; border-radius: 4px; }
#chat-root .msg-row { align-items: flex-start; gap: 0; flex-shrink: 0; }
#chat-root .msg-row + .msg-row { margin-top: 16px; }
#chat-root .msg-avatar {
  width: 26px;
  height: 26px;
  margin-right: 8px;
  margin-top: 9px;
  margin-bottom: 0;
  background: #e6efff;
  border: 1px solid #dce8fd;
}
#chat-root .msg-avatar svg { stroke: #4c80d7; }
#chat-root .bubble {
  max-width: calc(100% - 34px);
  padding: 11px 13px;
  border-radius: 4px 16px 16px 16px;
  border: 1px solid #e8edf4;
  background: #fff;
  color: #34445b;
  font-size: 14px;
  line-height: 1.75;
  box-shadow: 0 2px 4px rgba(34, 58, 100, .025);
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: left;
}
#chat-root .msg-row.user .bubble {
  max-width: 84%;
  padding: 10px 14px;
  border: 1px solid #3478f6;
  border-radius: 16px 4px 16px 16px;
  background: #3478f6;
  color: #fff;
  text-align: left;
  white-space: pre-wrap;
  box-shadow: 0 3px 8px rgba(52, 120, 246, .12);
}
#chat-root .msg-row.ai .bubble a { color: #2b70e9; text-decoration: underline; text-underline-offset: 3px; }
#chat-root .bubble strong { font-weight: 650; color: #213550; }
#chat-root .bubble br { line-height: 1.6; }
#chat-root .bubble br + br { display: none; }
#chat-root .bubble a[href*="work.weixin.qq.com/"],
#chat-root .bubble .human-service-btn {
  display: inline-flex !important;
  vertical-align: middle !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 40px !important;
  margin: 10px 0 6px !important;
  padding: 0 10px !important;
  border: 1px solid #3478f6 !important;
  border-radius: 9px !important;
  background: #3478f6 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transform: none !important;
}
#chat-root .bubble a[data-support-scan="1"] {
  display: inline-flex !important;
  vertical-align: middle !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  margin: 10px 0 6px 6px !important;
  padding: 0 8px !important;
  border: 1px solid #d8e4f7 !important;
  border-radius: 9px !important;
  background: #f3f7ff !important;
  color: #3971bd !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
#chat-root .bubble a[href*="work.weixin.qq.com/"]:hover { background: #2463da !important; }
#chat-root .bubble a[data-support-scan="1"]:hover { background: #e8f0ff !important; }
#chat-root .typing-bubble { padding: 15px 16px; min-height: 43px; border-radius: 4px 16px 16px 16px; border: 1px solid #e8edf4; background: #fff; gap: 5px; }
#chat-root .dot { width: 5px; height: 5px; background: #7b9bc6; }
#chat-root #suggestions {
  padding: 9px 12px;
  gap: 0;
  background: #fff;
  border-top: 1px solid #e6edf7;
}
#chat-root .suggestion-chip {
  min-height: 38px;
  padding: 10px 3px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f2f6fc;
  color: #60738d;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration: none;
}
#chat-root .suggestion-chip:hover { border-color: #d8e5fb; background: #eaf2ff; color: #2463da; }
#chat-root .suggestion-chip + .suggestion-chip { margin-left: 4px; }
#chat-root #input-area { padding: 4px 12px 8px; gap: 0; border-top: none; background: #fff; }
#chat-root #user-input {
  min-width: 0;
  min-height: 46px;
  max-height: 100px;
  padding: 11px 13px;
  border: 1px solid #e2e9f3;
  border-radius: 13px;
  background: #f6f8fc;
  color: #24364e;
  font-family: inherit;
  font-size: 16px;
  line-height: 22px;
  box-shadow: none;
}
#chat-root #user-input::placeholder { color: #95a2b5; font-size: 14px; }
#chat-root #user-input:focus { border-color: #a5c3f7; background: #fff; box-shadow: 0 0 0 3px rgba(52, 120, 246, .07); }
#chat-root #send-btn { width: 44px; height: 44px; margin-bottom: 1px; margin-left: 8px; border-radius: 13px; background: #3478f6; box-shadow: 0 3px 8px rgba(52, 120, 246, .13); }
#chat-root #send-btn svg { width: 19px; height: 19px; }
#chat-root #send-btn:hover { background: #2463da; }
#chat-root #send-btn:disabled { opacity: .4; box-shadow: none; }
#chat-root #powered-by { padding: 0 0 10px; background: #fff; color: #a4afbf; font-size: 10px; line-height: 16px; }
#chat-root a:focus-visible, #chat-root button:focus-visible { outline: 2px solid #3478f6; outline-offset: 2px; }
@media (max-width: 480px) {
  #chat-root #chat-panel { left: 8px; right: 8px; width: auto; height: 75vh; max-height: 75vh; border-radius: 18px; }
  #chat-root #chat-header { padding: 14px 14px; }
  #chat-root #header-avatar { margin-right: 10px; }
  #chat-root #messages { padding: 16px 12px; }
  #chat-root .msg-row + .msg-row { margin-top: 14px; }
  #chat-root .bubble { padding: 10px 12px; }
  #chat-root #suggestions { padding: 8px 10px; }
  #chat-root #input-area { padding: 3px 10px 8px; }
}
@media (max-width: 350px) {
  #chat-root #chat-header { padding: 12px; }
  #chat-root #header-avatar { width: 36px; height: 38px; margin-right: 8px; border-radius: 12px; }
  #chat-root #header-name { font-size: 15px; }
  #chat-root #header-status { font-size: 10px; }
  #chat-root #new-chat-btn { padding: 0 9px; }
  #chat-root #messages { padding: 14px 10px; }
  #chat-root .bubble { padding: 10px; font-size: 13px; }
  #chat-root .bubble a[href*="work.weixin.qq.com/"] { padding: 0 8px !important; font-size: 11px !important; }
  #chat-root .bubble a[data-support-scan="1"] { padding: 0 7px !important; font-size: 11px !important; margin-left: 5px !important; }
  #chat-root .suggestion-chip { font-size: 11px; }
}
/* updatePanel sets this presentation-only state from the visible panel height.
   The keyboard can shrink visualViewport while the layout viewport stays tall. */
#chat-root.chat-compact #chat-header { padding: 8px 12px; }
#chat-root.chat-compact #header-avatar { width: 36px; height: 36px; margin-right: 8px; border-radius: 12px; }
#chat-root.chat-compact #header-name { font-size: 15px; }
#chat-root.chat-compact #header-status { margin-top: 2px; font-size: 10px; }
#chat-root.chat-compact #messages { padding: 8px 10px; }
#chat-root.chat-compact .msg-row + .msg-row { margin-top: 10px; }
#chat-root.chat-compact #suggestions { padding: 5px 10px; }
#chat-root.chat-compact .suggestion-chip { min-height: 32px; padding: 7px 3px; font-size: 11px; }
#chat-root.chat-compact #input-area { padding: 3px 10px 8px; }
#chat-root.chat-compact #user-input { max-height: 60px !important; }
#chat-root.chat-compact #powered-by { display: none; }
@media (prefers-reduced-motion: reduce) {
  #chat-root *, #chat-root *::before, #chat-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}