/* ===================================================================
   chat.css — 访客端聊天（微信风格）
   =================================================================== */
body.chat-page {
  background: var(--bg);
  overflow: hidden;
  height: 100dvh;
}

/* 桌面端：手机外框 */
@media (min-width: 900px) {
  body.chat-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background:
      radial-gradient(1100px 520px at 12% -10%, #dff7e8 0%, rgba(223, 247, 232, 0) 62%),
      radial-gradient(900px 500px at 96% 108%, #e2ecff 0%, rgba(226, 236, 255, 0) 60%),
      #eef1f4;
  }
  .phone {
    width: 424px;
    height: min(880px, calc(100dvh - 44px));
    border-radius: 20px;
    box-shadow: 0 36px 90px -28px rgba(16, 30, 45, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.7);
    border: 1px solid #d8dde2;
  }
  .composer {
    padding-bottom: 10px;
  }
}

.phone {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* -------------------------------- 头部 -------------------------------- */
.chat-header {
  flex: 0 0 auto;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  background: #f7f7f7;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  position: relative;
  z-index: 5;
  padding-top: env(safe-area-inset-top);
  height: calc(54px + env(safe-area-inset-top));
}
.chat-header .av {
  width: 34px;
  height: 34px;
  border-radius: 5px;
}
.ch-meta {
  flex: 1 1 auto;
  min-width: 0;
}
.ch-name {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ch-status {
  font-size: 11.5px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c6cbd0;
  display: inline-block;
  flex: 0 0 auto;
}
.dot--on {
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.14);
}
.dot--off {
  background: #f0a020;
  box-shadow: 0 0 0 3px rgba(240, 160, 32, 0.14);
}
.hd-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.hd-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #4a5057;
}
.hd-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.hd-btn svg {
  width: 19px;
  height: 19px;
}

/* 连接状态条 */
.net-bar {
  flex: 0 0 auto;
  font-size: 12px;
  text-align: center;
  padding: 5px 10px;
  background: #fff6e0;
  color: #91631a;
  border-bottom: 1px solid #f4e6c8;
  display: none;
}
.net-bar.show {
  display: block;
}

/* 公告条 */
.notice-bar {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #6a4a12;
  background: #fff9e9;
  border-bottom: 1px solid #f6ecca;
  padding: 7px 14px;
}
.notice-bar.show {
  display: flex;
}
.notice-bar svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* ------------------------------- 消息区 ------------------------------- */
.chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.022) 1px, transparent 0);
  background-size: 18px 18px;
}
.msg-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}

.day-divider {
  text-align: center;
  font-size: 11.5px;
  color: #9aa0a6;
  margin: 6px 0 2px;
  letter-spacing: 0.3px;
}
.day-divider span {
  background: rgba(0, 0, 0, 0.045);
  padding: 2px 9px;
  border-radius: 4px;
}

.sys-msg {
  text-align: center;
  font-size: 11.5px;
  color: #8c9196;
  line-height: 1.5;
  padding: 0 30px;
}
.sys-msg span {
  background: rgba(0, 0, 0, 0.045);
  padding: 3px 9px;
  border-radius: 4px;
  display: inline-block;
  max-width: 100%;
}

.msg-row {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  animation: msgIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.msg-row.self {
  flex-direction: row-reverse;
}
.msg-row .av {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  margin-top: 1px;
}
.msg-main {
  max-width: min(74%, 320px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.msg-row.self .msg-main {
  align-items: flex-end;
}

.bubble {
  position: relative;
  background: #fff;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 14.5px;
  line-height: 1.48;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: #191b1d;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035);
}
.bubble::after {
  content: "";
  position: absolute;
  top: 11px;
  left: -5px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: #fff;
  border-left: 0;
}
.msg-row.self .bubble {
  background: var(--bubble-self);
}
.msg-row.self .bubble::after {
  left: auto;
  right: -5px;
  border-right: 0;
  border-left: 5px solid var(--bubble-self);
  border-right-color: transparent;
}
.bubble a {
  color: #3a6ea5;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bubble--img {
  padding: 0;
  background: transparent !important;
  box-shadow: none;
  overflow: hidden;
  border-radius: 5px;
  line-height: 0;
}
.bubble--img::after {
  display: none;
}
.bubble--img img {
  max-width: 100%;
  max-height: 240px;
  display: block;
  border-radius: 5px;
  cursor: zoom-in;
  background: #f2f3f4;
}

.msg-foot {
  font-size: 10.5px;
  color: #a3a8ad;
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 13px;
}
.msg-foot .tick {
  color: var(--brand);
  font-weight: 600;
}
.msg-row.pending .bubble {
  opacity: 0.62;
}

/* 正在输入 */
.typing {
  display: none;
  align-items: flex-start;
  gap: 9px;
  padding: 0 12px 6px;
}
.typing.show {
  display: flex;
}
.typing .av {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
.typing-bubble {
  background: #fff;
  border-radius: 12px;
  padding: 10px 13px;
  display: flex;
  gap: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035);
}
.typing-bubble i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c2c7cc;
  animation: blink 1.25s infinite ease-in-out;
}
.typing-bubble i:nth-child(2) { animation-delay: 0.18s; }
.typing-bubble i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2.5px); }
}

/* 新消息提示 */
.jump-latest {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 128px;
  background: #fff;
  color: var(--brand-dark);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  display: none;
  z-index: 6;
  border: 1px solid rgba(7, 193, 96, 0.2);
}
.jump-latest.show {
  display: block;
}

/* ------------------------------- 输入区 ------------------------------- */
.composer {
  flex: 0 0 auto;
  background: #f7f7f7;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  position: relative;
  z-index: 5;
}
.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.cm-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #4d545a;
  flex: 0 0 auto;
  margin-bottom: 1px;
}
.cm-icon:hover {
  background: rgba(0, 0, 0, 0.05);
}
.cm-icon svg {
  width: 21px;
  height: 21px;
}
.input-wrap {
  flex: 1 1 auto;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e4e6;
  padding: 6px 10px;
  transition: border-color 0.16s, box-shadow 0.16s;
  display: flex;
  align-items: center;
  min-height: 36px;
}
.input-wrap:focus-within {
  border-color: rgba(7, 193, 96, 0.65);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}
#input {
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 14.5px;
  line-height: 1.5;
  max-height: 108px;
  padding: 1px 0;
  color: #16181a;
}
#input::placeholder {
  color: #a9aeb3;
}
.send-btn {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.16s, opacity 0.16s, transform 0.08s;
  margin-bottom: 1px;
}
.send-btn:disabled {
  background: #dfe3e6;
  color: #a9aeb3;
  cursor: default;
  box-shadow: none;
}
.send-btn:not(:disabled):hover {
  background: var(--brand-dark);
}
.send-btn:not(:disabled):active {
  transform: scale(0.96);
}

/* 表情面板 */
.panel-emoji {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.panel-emoji.open {
  display: block;
  max-height: 190px;
  overflow-y: auto;
  margin-bottom: 6px;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  padding: 4px 0;
}
.emoji-grid button {
  height: 32px;
  font-size: 20px;
  border-radius: 6px;
  line-height: 1;
}
.emoji-grid button:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* 附件面板 */
.panel-more {
  display: none;
  gap: 8px;
  padding: 10px 2px 4px;
  grid-template-columns: repeat(4, 1fr);
}
.panel-more.open {
  display: grid;
}
.more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 10px;
  color: #5a6066;
  font-size: 11.5px;
}
.more-item:hover {
  background: rgba(0, 0, 0, 0.045);
}
.more-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: var(--shadow-1);
  color: #4b5359;
}
.more-ico svg {
  width: 22px;
  height: 22px;
}

/* 语音模式 */
.hold-wrap {
  display: none;
  flex: 1.2 1 0;
  align-items: center;
}
/* 语音/键盘图标切换 */
#btnVoice .ico-keyboard { display: none; }
.chat-page.voice-mode #btnVoice .ico-voice { display: none; }
.chat-page.voice-mode #btnVoice .ico-keyboard { display: block; }
/* 语音模式：隐藏输入框与发送按钮，显示按住说话；+ 保持可见 */
.chat-page.voice-mode .input-wrap,
.chat-page.voice-mode #btnSend {
  display: none !important;
}
.chat-page.voice-mode .hold-wrap {
  display: flex;
}
.hold-btn {
  display: none;
  flex: 1 1 auto;
  height: 36px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e4e6;
  font-size: 14px;
  color: #4b5359;
  text-align: center;
  user-select: none;
  touch-action: none;
}
.hold-btn.recording {
  background: #d9d9d9;
  color: #16181a;
  border-color: #cfcfcf;
}
.chat-page.voice-mode .hold-btn {
  display: block;
}

/* 录音浮层 */
.rec-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 14, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 24px;
}
.rec-overlay.show {
  display: flex;
}
.rec-panel {
  background: rgba(30, 33, 37, 0.96);
  border-radius: 16px;
  padding: 22px 34px;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-3);
}
.rec-mic {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(7, 193, 96, 0.18);
  display: grid;
  place-items: center;
  color: #34d399;
}
.rec-mic.recording {
  animation: recPulse 1.1s infinite ease-in-out;
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(7, 193, 96, 0.45); }
  50% { box-shadow: 0 0 0 10px rgba(7, 193, 96, 0); }
}
.rec-mic svg { width: 22px; height: 22px; }
.rec-time {
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.rec-tip {
  margin-top: 6px;
  font-size: 12px;
  color: #b9bfc5;
}
.rec-tip.cancel {
  color: #ff8f92;
  font-weight: 600;
}

/* 消息上的自动回复标记 */
.msg-foot .auto-tag {
  font-size: 10px;
  color: #b58a1e;
  background: #fdf3dd;
  border-radius: 4px;
  padding: 0 4px;
}
/* 会话结束提示条 */
.closed-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-2);
  box-shadow: var(--shadow-1);
}
.closed-bar.show {
  display: flex;
}

/* 资料卡弹层 */
.sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 24, 28, 0.36);
  backdrop-filter: blur(2px);
}
.sheet-wrap.open {
  display: flex;
}
.sheet {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  animation: pop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.sheet-top {
  padding: 24px 20px 18px;
  text-align: center;
  background: linear-gradient(170deg, #f2fdf6, #ffffff);
  border-bottom: 1px solid var(--line-soft);
}
.sheet-top .av {
  margin: 0 auto 10px;
}
.sheet-top h4 {
  margin: 0 0 3px;
  font-size: 16px;
}
.sheet-top p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.sheet-list {
  padding: 6px 0;
}
.sheet-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 20px;
  font-size: 13px;
  color: var(--ink-2);
}
.sheet-row b {
  font-weight: 500;
  color: var(--ink);
}
.sheet-actions {
  padding: 10px 16px 16px;
  display: grid;
  gap: 8px;
}

/* 图片预览 */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 12, 0.93);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 120;
  padding: 20px;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  animation: pop 0.18s ease;
}