/* ============================================================
   WhatsApp 真实化主题层 (theme.css)
   叠加在 styles.css 之上：只覆盖视觉，不改结构、不删原有规则
   调色板取自 WhatsApp 客户端实际取值
   ============================================================ */

:root {
  --wa-green: #25d366;
  --wa-accent: #00a884;
  --wa-accent-press: #008f72;
  --wa-header: #008069;
  --wa-header-2: #075e54;
  --wa-teal: #008069;
  --wa-deep: #075e54;
  --wa-panel: #f0f2f5;
  --wa-ink: #111b21;
  --wa-sub: #667781;
  --wa-line: #e9edef;
  --wa-line-2: #d1d7db;
  --wa-chat: #efeae2;
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;
  --wa-tick: #53bdeb;
  --wa-warn-bg: #fff3c7;
  --wa-shadow: 0 17px 50px rgba(11, 20, 26, 0.19);
  --wa-shadow-sm: 0 1px 1px rgba(11, 20, 26, 0.06), 0 1px 2px rgba(11, 20, 26, 0.08);
  --wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23111b21' stroke-opacity='0.055' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 58c0-8 10-12 16-6 6-6 16-2 16 6 0 10-16 18-16 18s-16-8-16-18z'/%3E%3Ccircle cx='150' cy='52' r='9'/%3E%3Cpath d='M146 52h8M150 48v8'/%3E%3Cpath d='M232 38l7 19 19 7-19 7-7 19-7-19-19-7 19-7z'/%3E%3Crect x='30' y='152' width='32' height='23' rx='4'/%3E%3Ccircle cx='46' cy='163' r='6'/%3E%3Cpath d='M118 158h28M118 167h18'/%3E%3Cpath d='M210 148a17 17 0 1 1 0 34 17 17 0 0 1 0-34zM210 158v8l6 4'/%3E%3Cpath d='M38 232c8-11 22-11 30 0'/%3E%3Cpath d='M53 244v-11'/%3E%3Cpath d='M146 216l13 26h-26z'/%3E%3Cpath d='M240 208l5 13 13 2-9 9 3 13-12-6-12 6 3-13-9-9 13-2z'/%3E%3C/g%3E%3C/svg%3E");
  --font: "Helvetica Neue", Helvetica, "Segoe UI", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --radius: 12px;
}

body {
  background: var(--wa-panel);
  color: var(--wa-ink);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* WhatsApp Web 顶部绿色带 */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 127px;
  z-index: 0;
  background: var(--wa-accent);
}

body > * {
  position: relative;
  z-index: 1;
}

.connect-section,
.dl-page {
  min-height: 100vh;
}

/* ==================== 启动页（WhatsApp 亮色） ==================== */
.connect-section {
  background:
    radial-gradient(circle at 50% 34%, rgba(37, 211, 102, 0.12), transparent 24rem),
    #ffffff;
}

.splash-inner .brand-mark {
  width: 104px;
  height: 104px;
  margin: 0 auto 26px;
  background: linear-gradient(145deg, #25d366, #00a884);
  box-shadow:
    0 1px 2px rgba(11, 20, 26, 0.08),
    0 18px 40px rgba(0, 128, 105, 0.22);
  animation: waLogoIn 0.6s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.splash-inner .brand-mark svg {
  width: 62px;
  height: 62px;
  fill: #fff;
}

.splash-inner h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111b21;
}

.splash-inner p {
  margin-top: 10px;
  color: #667781;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

/* 三点等待动画 */
.splash-inner p::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 8px;
  margin-left: 5px;
  vertical-align: -1px;
  background:
    radial-gradient(circle at 2px 4px, currentColor 2px, transparent 2.4px) 0 0 / 6px 8px repeat-x;
  animation: waDots 1.1s steps(3) infinite;
  opacity: 0.9;
}

@keyframes waDots {
  0% { width: 4px; }
  100% { width: 16px; }
}

@keyframes waLogoIn {
  from { opacity: 0; transform: scale(0.86) translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ==================== 验证提示页 ==================== */
.dl-page {
  background:
    radial-gradient(circle at 50% -10%, rgba(0, 168, 132, 0.09), transparent 30rem),
    #fff;
}

.dl-nav {
  width: auto;
  max-width: none;
  display: flex;
  justify-content: center;
  margin: 0 -24px;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid var(--wa-line);
}

.dl-logo {
  width: min(480px, 100%);
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--wa-header);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* 结构里重复了三次 brand-mark，视觉上只留一个 */
.dl-logo .brand-mark ~ .brand-mark {
  display: none;
}

.dl-logo .brand-mark {
  width: 30px;
  height: 30px;
  background: var(--wa-accent);
  box-shadow: none;
}

.dl-logo .brand-mark svg {
  width: 19px;
  height: 19px;
}

.dl-wordmark {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dl-body {
  width: min(480px, 100%);
  margin: 0 auto;
  padding: 34px 0 26px;
}

/* 内容区靠上排布，页脚沉底 */
.dl-footer {
  margin-top: auto;
}

/* ===== 正文排版：480 内容栏 / 400 文本栏 ===== */
.dl-body h2 {
  display: inline-block;
  margin: 0 auto 16px;
  padding: 5px 13px;
  border: 1px solid #f6d5d5;
  border-radius: 999px;
  background: #fdeeee;
  color: #c62828;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dl-body h1 {
  max-width: 400px;
  margin: 0 auto 12px;
  color: #111b21;
  font-size: clamp(22px, 5.6vw, 27px);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.dl-desc {
  max-width: 400px;
  margin: 0 auto 14px;
  color: var(--wa-sub);
  font-size: 14.5px;
  line-height: 1.72;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}

.dl-tip {
  max-width: 400px;
  margin: 20px auto 16px;
  color: #3b4a54;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
}

/* 原页面把安全码大图直接铺进提示区与错误区，这里做缩略化，
   完整图仍可点击用内置查看器放大查看 */
#contactForm img {
  max-height: 240px !important;
  object-fit: contain;
  background: #f2f4f6;
  border-radius: 10px;
  cursor: zoom-in;
}

/* ===== 下载页：品牌 + 安全标识区块 ===== */
.dl-hero-block {
  position: relative;
  width: 100%;
  margin: 0 auto 22px;
  padding: 15px 16px 14px;
  overflow: hidden;
  border: 1px solid #dff2e8;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -10%, rgba(37, 211, 102, 0.18), transparent 68%),
    linear-gradient(180deg, #f3fcf8, #ffffff 64%);
  box-shadow: 0 10px 28px rgba(0, 128, 105, 0.07);
}

.dl-hero-block::after {
  content: "";
  position: absolute;
  inset: auto -30% -70% -30%;
  height: 150px;
  background: radial-gradient(circle, rgba(0, 168, 132, 0.12), transparent 68%);
  pointer-events: none;
}

.dl-hero-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaf6f0;
}

.dl-hero-logo {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wa-accent);
  box-shadow: 0 3px 8px rgba(0, 168, 132, 0.28);
}

.dl-hero-logo svg {
  width: 17px;
  height: 17px;
  fill: #fff;
}

.dl-hero-name {
  color: #0b3b33;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dl-hero-tick {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #1da1f2;
  color: #fff;
  font-size: 8px;
  font-style: normal;
}

.dl-hero-chip {
  margin-left: 2px;
  padding: 2px 7px;
  border: 1px solid #bfe8d0;
  border-radius: 999px;
  background: #eafaf1;
  color: #0b6b4f;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dl-hero {
  position: relative;
  z-index: 1;
  display: block;
  width: 96px;
  height: 96px;
  margin: 16px auto 12px;
  filter: drop-shadow(0 10px 22px rgba(0, 128, 105, 0.18));
}

.dl-hero-trust {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 13px;
  color: #6b7f89;
  font-size: 11.5px;
}

.dl-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dl-hero-trust .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wa-accent);
}

.dl-start-btn {
  display: block;
  width: 100%;
  max-width: 400px;
  height: 48px;
  margin: 0 auto;
  border-radius: 24px;
  background: var(--wa-accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(0, 168, 132, 0.26);
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.dl-start-btn:hover {
  background: var(--wa-accent-press);
  box-shadow: 0 8px 22px rgba(0, 168, 132, 0.34);
}

.dl-start-btn:active {
  transform: scale(0.994);
}

.dl-fill {
  background: linear-gradient(90deg, #008f72, #00a884);
}

.dl-footer {
  padding: 16px 0 12px;
  color: #8696a0;
  font-size: 11.5px;
  line-height: 1.6;
}

.dl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  width: min(480px, 100%);
  margin: 0 auto;
  padding: 0 0 30px;
  color: #8696a0;
  font-size: 11.5px;
}

.dl-meta b {
  color: #54656f;
  font-weight: 600;
}

.dl-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dl-meta .dl-sep {
  width: 1px;
  height: 11px;
  background: var(--wa-line-2);
}

/* ==================== 聊天窗口外框 ==================== */
.chat-window {
  position: relative;
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: var(--wa-shadow);
}

.chat-window.phone-mode {
  background: #fff;
}

.chat-header {
  gap: 10px;
  padding: 9px 12px;
  background: var(--wa-header);
  color: #fff;
  box-shadow: 0 1px 0 rgba(11, 20, 26, 0.14);
}

.wa-back {
  width: 26px;
  height: 30px;
  display: none;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: default;
}

.wa-back svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 客服头像统一使用 WhatsApp 官方标识 */
.avatar {
  width: 40px;
  height: 40px;
  background: url("/wa-avatar.svg") center / cover no-repeat, #25d366;
  color: transparent;
  font-size: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.mini-avatar {
  background: url("/wa-avatar.svg") center / cover no-repeat, #25d366;
  color: transparent;
  font-size: 0;
}

.agent-meta {
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}

.agent-meta strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.agent-meta small {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-meta .status.online {
  color: rgba(255, 255, 255, 0.92);
}

.agent-meta .status.online::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #57f2a9;
  vertical-align: 1px;
  animation: waPulse 2s ease-in-out infinite;
}

@keyframes waPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.header-verified {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  background: #1da1f2;
  font-size: 8.5px;
  vertical-align: 0;
}

.sc-chip {
  gap: 3px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.header-actions {
  gap: 0;
  margin-left: 8px;
}

/* 手机号页卡片较窄，隐藏装饰性通话图标，避免挤压标题 */
.chat-window.phone-mode .wa-hicon {
  display: none;
}

.chat-header .icon-btn {
  width: 34px;
  height: 34px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
}

.chat-header .icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.wa-hicon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
}

.wa-hicon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wa-hicon:active {
  background: rgba(255, 255, 255, 0.16);
}

/* 连接状态条 */
.conn-status {
  padding: 6px 14px;
  color: #54656f;
  background: #f7f8fa;
  border-bottom: 1px solid var(--wa-line);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease;
}

/* 已连接时头部已显示同样状态，隐藏重复状态条 */
.conn-status.wa-conn-off {
  display: none !important;
}

/* ==================== 聊天底纹 ==================== */
.chat-messages,
.contact-form {
  background-color: var(--wa-chat);
  background-image: var(--wa-doodle);
  background-size: 300px 300px;
  background-attachment: local;
}

.chat-messages {
  padding: 14px 16px 18px;
}

/* ==================== 气泡 ==================== */
.msg-row {
  margin-bottom: 8px;
}

.msg-agent-row {
  margin: 0 0 3px 10px;
  color: #00a884;
  font-size: 12px;
  font-weight: 600;
}

.msg-agent-row .mini-avatar {
  width: 20px;
  height: 20px;
  background: url("/wa-avatar.svg") center / cover no-repeat, #25d366;
  font-size: 0;
}

.verified-dot {
  width: 14px;
  height: 14px;
  background: #1da1f2;
  font-size: 8px;
}

.bubble {
  position: relative;
  max-width: min(78%, 560px);
  padding: 6px 9px 6px 9px;
  border-radius: 8px;
  color: var(--wa-ink);
  background: var(--wa-in);
  box-shadow: var(--wa-shadow-sm);
  font-size: 14.2px;
  line-height: 19px;
}

.msg-row.admin .bubble {
  border-top-left-radius: 2px;
}

.msg-row.admin .bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent var(--wa-in) transparent transparent;
}

.msg-row.visitor .bubble {
  color: var(--wa-ink);
  background: var(--wa-out);
  border-bottom-right-radius: 8px;
  border-top-right-radius: 2px;
}

.msg-row.visitor .bubble::before {
  content: "";
  position: absolute;
  top: 0;
  right: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent transparent var(--wa-out);
}

.msg-row.system .bubble {
  max-width: 92%;
  padding: 5px 12px;
  border: 0;
  border-radius: 7px;
  color: #54656f;
  background: #fffde7;
  box-shadow: var(--wa-shadow-sm);
  font-size: 12.8px;
  line-height: 1.5;
  text-align: center;
}

.msg-line {
  font-size: 14.2px;
  line-height: 19px;
  letter-spacing: 0.005em;
}

.msg-line + .msg-line {
  margin-top: 1px;
}

/* 源文案里的空行要在气泡里保留高度，别被压扁 */
.msg-line:empty {
  height: 0.95em;
}

.msg-meta {
  gap: 4px;
  margin-top: 2px;
  color: #667781;
  font-size: 11px;
  line-height: 15px;
}

.msg-row.visitor .msg-meta {
  color: #667781;
}

.ticks {
  color: #8696a0;
  font-size: 12px;
  letter-spacing: -3px;
}

.ticks.read {
  color: var(--wa-tick);
}

.msg-image {
  width: min(300px, 100%);
  max-height: 340px;
  margin: 1px 0 4px;
  border-radius: 6px;
}

.msg-copy {
  color: #027eb5;
  font-size: 11px;
  text-decoration: none;
}

.msg-copy:hover {
  text-decoration: underline;
}

.system-label {
  color: #b3261e;
  font-size: 12px;
  font-weight: 600;
}

.code-label {
  color: #00a884;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.notice-title {
  color: #b3261e;
  font-size: 13px;
  font-weight: 600;
}

.message-options {
  gap: 6px;
  margin-top: 7px;
}

.option-btn {
  padding: 6px 13px;
  border: 1px solid var(--wa-line-2);
  border-radius: 999px;
  color: #027eb5;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.option-btn:hover {
  border-color: var(--wa-accent);
  background: #f0faf7;
}

.option-btn.selected {
  color: #fff;
  background: var(--wa-accent);
  border-color: var(--wa-accent);
}

.code-request-btn {
  margin-top: 7px;
  padding: 7px 12px;
  border: 1px solid #f0c7c7;
  border-radius: 8px;
  color: #b3261e;
  background: #fff5f5;
  font-size: 12.5px;
  font-weight: 600;
}

/* 顶部系统提示 → 端到端加密条 */
.chat-top-notice {
  max-width: 92%;
  margin: 2px auto 12px;
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  color: #54656f;
  background: #fffde7;
  box-shadow: var(--wa-shadow-sm);
  font-size: 12.2px;
  line-height: 1.5;
  text-align: center;
}

.chat-top-notice::before {
  content: "🔒";
  margin-right: 5px;
  font-size: 11px;
}

/* 日期分隔 */
.wa-day {
  align-self: center;
  margin: 4px auto 12px;
  padding: 3px 11px;
  border-radius: 7px;
  color: #54656f;
  background: #fffde7;
  box-shadow: var(--wa-shadow-sm);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ==================== 手机号验证卡 ==================== */
.contact-form {
  padding: 14px 14px 18px;
}

.wa-card {
  width: 100%;
  margin: 0 auto;
  padding: 18px 16px 16px;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--wa-shadow-sm);
}

.chat-window .contact-form h1 {
  margin: 0 0 6px;
  color: var(--wa-ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.chat-window .contact-form .welcome-desc {
  margin: 0 0 18px;
  color: var(--wa-sub);
  font-size: 13.5px;
  line-height: 1.55;
}

/* 安全提示：改为「带警示角标的原图附件」样式 */
.security-warning {
  position: relative;
  display: block;
  margin-bottom: 16px;
  padding: 0;
  color: #7a5c12;
  background: transparent;
  border: 0;
  font-size: 12px;
}

.security-warning .warn-icon {
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f5b301;
  color: #3a2c00;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(58, 44, 0, 0.28);
}

.security-warning .sw-text {
  display: block;
}

.security-warning img {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.08), 0 8px 22px rgba(11, 20, 26, 0.07);
}

.contact-form label {
  margin-bottom: 6px;
  color: #3b4a54;
  font-size: 12.5px;
  font-weight: 500;
}

.phone-input-row {
  gap: 8px;
}

.country-btn {
  min-width: 104px;
  height: 46px;
  padding: 0 10px;
  border: 1px solid var(--wa-line-2);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

.country-btn:hover {
  border-color: var(--wa-accent);
}

.country-btn b {
  font-size: 13.5px;
  font-weight: 500;
}

.country-btn .caret {
  color: #8696a0;
}

#phoneInput {
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--wa-line-2);
  border-radius: 8px;
  font-size: 15px;
  letter-spacing: 0.02em;
}

#phoneInput:focus {
  border-color: var(--wa-accent);
  box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.14);
}

.field-error {
  padding-top: 6px;
  color: #b3261e;
  font-size: 11.5px;
}

#phoneForm .btn.primary.full {
  height: 44px;
  margin-top: 6px;
  border-radius: 24px;
  background: var(--wa-accent);
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#phoneForm .btn.primary.full:hover {
  background: var(--wa-accent-press);
  transform: none;
  box-shadow: none;
}

#phoneForm .btn.primary.full:active {
  background: #00876b;
}

.contact-form .fineprint {
  margin: 12px 0 0;
  color: #8696a0;
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}

/* 国家选择弹层 → WhatsApp 风格面板 */
.country-dropdown {
  width: min(368px, calc(100vw - 32px));
  max-height: min(520px, 82vh);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(11, 20, 26, 0.3);
}

.country-dropdown::before {
  content: "选择国家 / 地区";
  display: block;
  padding: 14px 16px 0;
  color: #3b4a54;
  font-size: 13px;
  font-weight: 600;
}

#countrySearch {
  margin: 10px 12px;
  padding: 9px 12px;
  border: 1px solid var(--wa-line-2);
  border-radius: 8px;
  font-size: 14px;
}

.country-item {
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
}

.country-item:hover,
.country-item.selected {
  background: #f0f2f5;
}

.country-item .dial {
  color: #8696a0;
  font-size: 13px;
}

.country-item .country-check {
  color: var(--wa-accent);
}

/* ==================== 输入区 ==================== */
.typing {
  gap: 4px;
  padding: 5px 16px 8px;
  color: #667781;
  background: var(--wa-chat);
  font-size: 11.5px;
}

.typing .brand-mark.small {
  width: 20px;
  height: 20px;
  background: var(--wa-accent);
}

.typing .brand-mark.small svg {
  width: 13px;
  height: 13px;
}

.typing span {
  width: 4px;
  height: 4px;
  background: #8696a0;
}

.composer {
  gap: 6px;
  padding: 8px 10px;
  background: var(--wa-panel);
  border-top: 0;
}

.composer .icon-btn {
  width: 38px;
  height: 38px;
  color: #54656f;
  font-size: 19px;
}

/* 附件按钮改用 SVG 纸夹图标，替代系统 emoji 渲染 */
#imageBtn {
  position: relative;
  font-size: 0;
}

#imageBtn::before {
  content: "";
  width: 21px;
  height: 21px;
  background: #54656f;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.8 7.2l-7.9 7.9a2.9 2.9 0 0 0 4.1 4.1l8-8a5 5 0 0 0-7.1-7.1l-8.5 8.5a7.1 7.1 0 0 0 10 10l6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.8 7.2l-7.9 7.9a2.9 2.9 0 0 0 4.1 4.1l8-8a5 5 0 0 0-7.1-7.1l-8.5 8.5a7.1 7.1 0 0 0 10 10l6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.composer .icon-btn:hover {
  background: #e4e8ea;
}

.message-input {
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  font-size: 14.5px;
  box-shadow: inset 0 0 0 1px rgba(11, 20, 26, 0.04);
}

.send-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--wa-accent);
  font-size: 0;
  box-shadow: 0 1px 3px rgba(11, 20, 26, 0.18);
}

.send-btn::after {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  margin: 0 auto;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4l17.45-7.48a1 1 0 0 0 0-1.84L3.4 3.6a.99.99 0 0 0-1.39.91L2 9.12c0 .5.37.93.87.99L17 12 2.87 13.88c-.5.07-.87.5-.87 1l.01 4.61c0 .71.73 1.2 1.39.91z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4l17.45-7.48a1 1 0 0 0 0-1.84L3.4 3.6a.99.99 0 0 0-1.39.91L2 9.12c0 .5.37.93.87.99L17 12 2.87 13.88c-.5.07-.87.5-.87 1l.01 4.61c0 .71.73 1.2 1.39.91z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.send-btn:hover {
  background: var(--wa-accent-press);
}

.send-btn:disabled {
  opacity: 0.5;
}

.composer.locked {
  opacity: 0.65;
}

/* 悬浮球 */
.chat-fab {
  width: 58px;
  height: 58px;
  background: var(--wa-accent);
  box-shadow: 0 10px 26px rgba(0, 128, 105, 0.34);
}

.chat-fab .brand-mark.small {
  width: 32px;
  height: 32px;
  background: transparent;
  box-shadow: none;
}

.chat-fab .brand-mark.small svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

.chat-fab i {
  top: -3px;
  right: -3px;
  background: #ff3b30;
  box-shadow: 0 0 0 2px #fff;
}

/* ==================== 图片查看器 ==================== */
.image-viewer {
  background: rgba(11, 20, 26, 0.94);
}

.iv-toolbar {
  top: 14px;
  right: 14px;
  left: 14px;
}

.iv-toolbar #ivCount {
  color: rgba(233, 237, 239, 0.86);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.iv-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(233, 237, 239, 0.12);
  font-size: 17px;
}

.iv-btn:hover {
  background: rgba(233, 237, 239, 0.24);
}

.image-viewer img {
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

/* ==================== 移动端 ==================== */
@media (max-width: 620px) {
  body::before {
    height: 84px;
  }

  .dl-nav {
    padding: 12px 20px;
  }

  .dl-logo {
    font-size: 15.5px;
  }

  .dl-logo .brand-mark {
    width: 26px;
    height: 26px;
  }

  .dl-logo .brand-mark svg {
    width: 17px;
    height: 17px;
  }

  .dl-body {
    padding: 20px 0 26px;
  }

  .dl-hero {
    width: 92px;
    height: 92px;
    margin-bottom: 14px;
  }

  .chat-window,
  .chat-window.phone-mode {
    border-radius: 0;
    box-shadow: none;
  }

  .wa-back {
    display: inline-grid;
  }

  .contact-form {
    padding: 12px 12px 16px;
  }

  .chat-messages {
    padding: 12px 12px 16px;
  }

  .wa-hicon {
    display: none;
  }

  .composer {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 621px) {
  /* 桌面端让验证窗口贴合内容高度，避免底部一大片空聊天区 */
  .chat-window.phone-mode {
    height: auto;
    max-height: min(720px, calc(100vh - 96px));
  }
}

@media (min-width: 621px) and (min-height: 780px) {
  /* 高屏时整块内容垂直居中，视觉重心不悬在顶部 */
  .dl-body {
    margin: auto;
  }
}

@media (min-width: 900px) {
  .chat-window.active {
    margin-top: max(22px, 4vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==================== 第三步：正在核验 ==================== */
.wa-step3 {
  padding: 10px 2px 4px;
  text-align: center;
}

.wa-ring {
  position: relative;
  width: 124px;
  height: 124px;
  margin: 4px auto 16px;
}

.wa-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-bg {
  fill: none;
  stroke: #e9edef;
  stroke-width: 8;
}

.ring-fg {
  fill: none;
  stroke: var(--wa-accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
}

.ring-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #111b21;
  font-size: 23px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.wa-step3 h2 {
  margin: 0 0 8px;
  color: #111b21;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wa-step3-sub {
  max-width: 300px;
  margin: 0 auto 18px;
  color: var(--wa-sub);
  font-size: 12.5px;
  line-height: 1.65;
}

.wa-check {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.wa-check li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--wa-line);
  color: #3b4a54;
  font-size: 13px;
}

.wa-check li:last-child {
  border-bottom: 0;
}

.wa-check li i {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 1.5px solid var(--wa-line-2);
  border-radius: 50%;
  background: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.wa-check li b {
  margin-left: auto;
  color: #8696a0;
  font-size: 12px;
  font-weight: 500;
}

.wa-check li.active i {
  border-color: var(--wa-accent);
  border-top-color: transparent;
  animation: waSpin 0.8s linear infinite;
}

.wa-check li.active b {
  color: var(--wa-accent);
}

.wa-check li.done i {
  border-color: var(--wa-accent);
  background: var(--wa-accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.6l4.6 4.4L19 7'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

.wa-check li.done b {
  color: var(--wa-accent);
}

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

.wa-eta {
  color: #8696a0;
  font-size: 12.5px;
}

.wa-eta b {
  color: #111b21;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==================== 移动端全屏适配 ==================== */
/* 部分安卓内嵌浏览器把 100dvh 算得比可视区小，窗口会停在上半屏。
   改回百分比高度（相对 html/body 的 100%），兼容性最稳。 */
@media (max-width: 620px) {
  html,
  body {
    height: 100%;
  }

  body {
    min-height: 100%;
    min-height: -webkit-fill-available;
  }

  .chat-window,
  .chat-window.phone-mode {
    flex: 1 1 auto;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    margin: 0;
  }

  body:has(.chat-window.active) {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .connect-section,
  .dl-page {
    min-height: 100%;
  }
}

/* ==================== 页面切换动效 ==================== */
.dl-page.show {
  animation: waPageIn 0.34s cubic-bezier(0.22, 0.9, 0.28, 1) both;
}

.chat-window.active {
  animation: waChatIn 0.26s ease both;
}

@keyframes waPageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes waChatIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ==================== 顶部语言选择（官方页标配） ==================== */
.dl-nav {
  position: relative;
}

.dl-lang {
  position: absolute;
  top: 50%;
  right: max(24px, calc(50% - 240px));
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  transform: translateY(-50%);
  border: 1px solid var(--wa-line-2);
  border-radius: 999px;
  color: #54656f;
  font-size: 12px;
  white-space: nowrap;
}

.dl-lang span {
  color: #8696a0;
  font-size: 9px;
}

.dl-lang select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 16px 0 0;
  border: 0;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238696a0' stroke-width='1.6' stroke-linecap='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E")
    right center / 11px no-repeat;
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: none;
}

@media (max-width: 620px) {
  .dl-lang {
    right: 20px;
    padding: 4px 9px;
    font-size: 11.5px;
  }
}

/* ==================== 细节 ==================== */
::selection {
  background: rgba(0, 168, 132, 0.22);
}

.msg-line::selection {
  background: rgba(0, 168, 132, 0.3);
}

/* 全站固定亮色（WhatsApp Light）：已移除 prefers-color-scheme: dark 分支 */
:root {
  color-scheme: light;
}