/* ========================================================================
   微信对话生成器（/wechat/chat）专属样式
   ground truth：原站 chat 模块 678180591669ebfd.css（类名去 hash 转 kebab），
   预览内部为 3x raw 值（外层 .shot-zoom zoom:1/3，见 transfer-bill.css）
   ======================================================================== */

/* ==================== 侧栏：角色管理（原站 ant-list split） ==================== */
.role-header { display: flex; align-items: center; padding: 8px 0; }
.role-header h3 { flex: 1 1; margin: 0; font-size: 16px; font-weight: 600; }

/* 头像上传（原站 role_upload：hover 显示半透明遮罩 + 上传图标） */
.role-upload { position: relative; display: block; cursor: pointer; }
.role-upload .role-mask {
  display: none; position: absolute; background-color: rgba(0, 0, 0, 0.4);
  left: 0; top: 0; right: 0; bottom: 0;
  align-items: center; justify-content: center; border-radius: 4px;
}
.role-upload .role-mask-icon { font-size: 18px; color: #fff; }
.role-upload:hover .role-mask { display: flex; }
.role-avatar { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; display: block; background: #f1f1f1; }

/* 角色行（原站 ant-list-item：头像 + 名称输入（内嵌随机钮） + 操作钮） */
.role-name-wrap { position: relative; width: 150px; }
.role-tag-self { background-color: #87d068; margin-right: 0; }
/* 随机按钮：内嵌在昵称输入框内右侧，输入框宽度固定故各行天然同列 */
.role-random-btn {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  min-width: 40px; height: 24px; padding: 0 4px; font-size: 13px;
}
/* 角色名称输入框 - 防止溢出，padding-right 为内嵌随机钮让位 */
.role-name-input {
  max-width: 100%;
  padding-right: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 移动端：缩小输入框宽度，避免删除/选择按钮换行 */
@media screen and (max-width: 480px) {
  .role-name-wrap { width: 100px; }
  .role-random-btn { min-width: 36px; font-size: 12px; padding: 0 2px; }
}

/* ==================== 侧栏：对话编辑器 ==================== */
/* 分区标题（原站：左文字 + 右延伸细线） */
.chat-section-title {
  display: flex; align-items: center; margin: 0 0 12px;
  font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, 0.88);
}
.chat-section-title:after { content: ""; flex: 1 1; height: 1px; background: #f0f0f0; margin-left: 10px; }

/* 选择发送用户（原站 ant-segmented ant-segmented-block：#f5f5f5 容器 + 白底选中块，头像在上名称在下）
   原站实测：容器 76（padding 2）/ 选中项 72 = 内衬 6 + 头像 32 + 名称行高 28 + 内衬 6 */
.role-pick { display: flex; background: #f5f5f5; border-radius: 6px; padding: 2px; margin-bottom: 16px; }
.role-pick .seg-item { flex: 1 1; min-width: 0; border-radius: 4px; cursor: pointer; }
.role-pick .seg-item.active {
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}
.role-pick .seg-label { padding: 6px; text-align: center; }
.role-pick .seg-avatar {
  width: 32px; height: 32px; border-radius: 6px; object-fit: cover;
  background: #f1f1f1; display: inline-block; vertical-align: top;
}
.role-pick .seg-name {
  display: block; margin-top: 0; font-size: 14px; line-height: 28px; color: rgba(0, 0, 0, 0.88);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 对话类型横排 Tabs（复用 common.css ant-tabs，窄面板可横滑） */
.chat-type-tabs .ant-tabs-nav { margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.chat-type-tabs .ant-tabs-nav::-webkit-scrollbar { display: none; }
.chat-type-tabs .ant-tab { margin-right: 20px; white-space: nowrap; flex: none; }

/* 编辑盒（原站：白底圆角盒 = 头部类型名 + 内容 + 底部 清空|发送） */
.chat-editor-box { border: 1px solid #f0f0f0; border-radius: 8px; background: #fff; }
.chat-editor-head { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; font-size: 14px; font-weight: 600; }
/* 编辑盒下方操作提示（转账/红包：点击预览气泡可领取） */
.chat-editor-tip { margin-top: 12px; text-align: center; font-size: 12px; color: #999; }
.chat-editor-body { padding: 12px; }
.chat-editor-foot { display: flex; border-top: 1px solid #f0f0f0; }
.chat-editor-foot button {
  flex: 1 1; height: 40px; border: none; background: none;
  font-size: 14px; color: rgba(0, 0, 0, 0.65); cursor: pointer;
}
.chat-editor-foot button + button { border-left: 1px solid #f0f0f0; }
.chat-editor-foot button:hover { color: #1677ff; }

/* 表情面板（原站 emoji_wrap：高 120、margin-top 10、无内边距、space-between 每行 10 个） */
.emoji-wrap {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;
  height: 120px; overflow: auto; margin-top: 10px; padding: 0;
}
.emoji-wrap[hidden] { display: none; }
.emoji-wrap .emoji-cell {
  width: 30px; height: 30px; border: none; background: none;
  font-size: 20px; line-height: 30px; text-align: center; cursor: pointer; padding: 0;
  background-repeat: no-repeat; background-position: 50%; background-size: 80%;
  overflow: hidden; text-indent: -9999px;   /* 名称仅用于 title/插入令牌，视觉为表情图 */
}
.emoji-wrap .emoji-cell:hover { background: #f5f5f5; border-radius: 4px; }

.chat-textarea {
  width: 100%; resize: vertical;
  border: 1px solid #d9d9d9; border-radius: 6px; padding: 4px 11px;
  font-size: 14px; line-height: 1.5715; font-family: inherit;
}
.chat-textarea:focus { border-color: #1677ff; outline: none; box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1); }

/* 横排表单行（原站：左标签 + 右控件，转账/红包/语音） */
.chat-form-row { display: flex; align-items: center; margin-bottom: 16px; }
.chat-form-row:last-child { margin-bottom: 0; }
.chat-form-row > label { flex: none; width: 70px; font-size: 14px; color: rgba(0, 0, 0, 0.88); }
.chat-input-ctl {
  flex: 1 1; min-width: 0; height: 32px; padding: 4px 11px;
  border: 1px solid #d9d9d9; border-radius: 6px; font-size: 14px; background: #fff; color: rgba(0, 0, 0, 0.88);
}
.chat-input-ctl:focus { border-color: #1677ff; outline: none; box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1); }
.chat-input-ctl::-webkit-outer-spin-button, .chat-input-ctl::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chat-input-ctl[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* 是否已读（原站：实底单选按钮组，选中蓝底白字） */
.chat-seg { display: inline-flex; }
.chat-seg-item {
  height: 32px; padding: 0 14px; border: 1px solid #d9d9d9; background: #fff;
  color: rgba(0, 0, 0, 0.88); font-size: 14px; cursor: pointer;
}
.chat-seg-item + .chat-seg-item { border-left: none; }
.chat-seg-item:first-child { border-radius: 6px 0 0 6px; }
.chat-seg-item:last-child { border-radius: 0 6px 6px 0; }
.chat-seg-item.active { background: #1677ff; border-color: #1677ff; color: #fff; }

/* 图片拖拽上传区（原站 antd Upload.Dragger：虚线框 + 收件箱图标 + 提示文案） */
.chat-uploader {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 148px; border: 1px dashed #d9d9d9; border-radius: 8px;
  background: rgba(0, 0, 0, 0.02); cursor: pointer; text-align: center;
}
.chat-uploader:hover { border-color: #1677ff; }
.chat-uploader-icon { color: #1677ff; line-height: 1; }
.chat-uploader-icon svg { width: 44px; height: 44px; }
.chat-uploader-text { font-size: 14px; color: rgba(0, 0, 0, 0.45); }
.chat-uploader .chat-thumb { width: 96px; height: 96px; margin: 0; border-radius: 6px; object-fit: cover; }

/* 时间日期选择（原站 antd DatePicker：输入框 + 右侧日历图标） */
.chat-datepicker { position: relative; }
.chat-datepicker .chat-input-ctl { display: block; width: 100%; padding-right: 30px; cursor: pointer; }
.chat-datepicker-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: rgba(0, 0, 0, 0.25); pointer-events: none; line-height: 1; }
.chat-datepicker-icon svg { width: 14px; height: 14px; }
/* 原生 date 输入仅作选择器载体：视觉隐藏但保持可渲染以便 showPicker() */
.chat-datepicker-native { position: absolute; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }

/* 帮助面板文章 */
.help-article { font-size: 14px; line-height: 1.8; color: rgba(0, 0, 0, 0.88); }
.help-article h2 { font-size: 18px; margin: 0 0 12px; }
.help-article p { margin: 0 0 10px; }
.help-article ul { margin: 0 0 10px; padding-left: 20px; }
.help-article li { margin-bottom: 8px; }

/* ==================== 预览：聊天页结构 ==================== */
.chat-wrap { display: flex; flex-direction: column; height: 100%; }
.chat-content { flex: 1 1; overflow: scroll; margin-top: 10px; display: flex; flex-direction: column; }

/* 聊天输入栏（原站 bottom_bar，3x 值） */
.chat-bar { display: flex; align-items: center; height: 167px; background-color: #f6f6f6; }
.chat-bar > span { width: 80px; height: 80px; text-indent: -9999px; }
/* 加号嵌套在 popmenu-wrap 内：外层承担 flex 子项 margin，内层需块级才有尺寸 */
.chat-bar .popmenu-wrap { margin: 0 32px 0 39px; }
.chat-bar .popmenu-wrap, .chat-bar .popmenu-wrap * { text-indent: 0; }
.chat-bar .chat-voice { background: url('/assets/img/orig/icon1.91d21c92.png') no-repeat; margin-left: 32px; }
.chat-bar .chat-input {
  height: 120px; background: #fff; border-radius: 15px; flex: 1 1;
  text-indent: -9999px; margin: 0 32px;
}
.chat-bar .chat-emoji { background: url('/assets/img/orig/icon2.e79d8dae.png') no-repeat; }
.chat-bar .chat-more { display: block; width: 80px; height: 80px; background: url('/assets/img/orig/icon3.7d13a601.png') no-repeat; }
.chat-bar.chat-say .chat-voice { background: url('/assets/img/orig/icon4.0289ebf9.png') no-repeat; }
.chat-bar.chat-say .chat-input {
  color: #1a1a1a; font-size: 48px; text-indent: 0; text-align: center;
  line-height: 120px; font-weight: 500; font-style: normal;
}

/* 加号悬浮菜单（原站 popmenu：hover 显示，气泡白底圆角 + 旋转方块箭头） */
.popmenu-wrap { position: relative; }
.popmenu-wrap .popmenu-content { position: absolute; left: 0; display: none; top: -210px; width: 100%; z-index: 99999; }
.popmenu-wrap .popmenu-content .popmenu-main { height: 210px; left: 50%; position: absolute; transform: translateX(-50%); }
.popmenu-wrap .popmenu-content .popmenu-main .popmenu-items {
  background-color: #fff; background-clip: padding-box; border-radius: 21px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  padding: 12px; display: flex; height: 180px;
}
.popmenu-wrap .popmenu-content .popmenu-main .popmenu-items .popmenu-item {
  display: flex; flex-direction: column; padding: 0 50px; align-items: center; justify-content: center;
  border-right: 1px solid #f1f1f1; cursor: pointer; color: #333; white-space: nowrap;
}
.popmenu-wrap .popmenu-content .popmenu-main .popmenu-items .popmenu-item .popmenu-icon { font-size: 54px; }
.popmenu-wrap .popmenu-content .popmenu-main .popmenu-items .popmenu-item span { font-size: 36px; margin-top: 15px; }
.popmenu-wrap .popmenu-content .popmenu-main .popmenu-items .popmenu-item:last-child { border: none; }
.popmenu-wrap .popmenu-content .popmenu-main:after {
  position: absolute; content: ""; z-index: 1; display: block; pointer-events: none;
  width: 36px; height: 36px; overflow: hidden; background-color: #fff;
  bottom: 20px; left: 50%; margin-left: -18px; border-radius: 5px;
  transform: rotate(45deg); transform-origin: center;
}
.popmenu-wrap .popmenu-content.popmenu-bottom { top: 120px; }
.popmenu-wrap .popmenu-content.popmenu-bottom .popmenu-main { padding-top: 20px; }
.popmenu-wrap .popmenu-content.popmenu-bottom .popmenu-main:after { top: 5px; bottom: auto; }
.popmenu-wrap:hover .popmenu-content { display: block; }

/* 消息 hover 操作气泡（复用 popmenu 体系：删除单条 / 清空全部） */
.item-wrap.popmenu-wrap:hover { z-index: 99999; }
.item-wrap .popmenu-item span { margin-top: 0; }

/* 消息列表滚动区（原站 dialog_list） */
.dialog-list { padding: 36px; flex: 1 1; overflow: scroll; }

/* ==================== 预览：消息气泡（3x 值） ==================== */
/* 富文本（文本气泡内：emoji 内联块 + 蓝色链接文字） */
.richtext-wrap { display: flex; align-items: center; }
.richtext-emoji {
  width: 60px; height: 60px; background-size: 60px; background-position: 50%;
  background-repeat: no-repeat; text-indent: -9999px; flex: none; display: inline-block;
}
.richtext-blue { color: #5e7198; }

.item-wrap { margin-bottom: 50px; position: relative; display: flex; }
.item-wrap .item-avatar {
  width: 123px; height: 123px; background: #f1f1f1; border-radius: 15px;
  background-size: cover; background-repeat: no-repeat; position: absolute;
  background-position: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.item-wrap .item-content {
  background: #fff; padding: 28px 38px; font-size: 48px; border-radius: 15px;
  margin-right: 140px; word-break: break-all; margin-left: 160px;
  display: inline-block; position: relative; line-height: normal; min-height: 123px;
}
.item-wrap .item-content:after {
  content: ""; background: #fff; width: 24px; height: 24px;
  border-bottom-left-radius: 4px; top: 50px; left: -12px; position: absolute; transform: rotate(45deg);
}
.item-wrap .item-content.item-image { border: 1px solid #d5d5d5; padding: 0; background: 0 0; overflow: hidden; }
.item-wrap .item-content.item-image img { max-width: 420px; max-height: 420px; vertical-align: top; border-radius: 15px; }
.item-wrap .item-content.item-image:after { display: none; }
.item-wrap .item-notice { font-size: 36px; color: #a6a6a6; display: flex; justify-content: center; flex: 1 1; }

/* 转账 / 红包卡片 */
.item-wrap .item-card { background: #fff; width: 700px; padding-top: 0; padding-bottom: 0; }
.item-wrap .item-card .item-main { display: flex; height: 192px; align-items: center; position: relative; }
.item-wrap .item-card .item-bottom { height: 71px; align-items: center; display: flex; }
.item-wrap .item-card .item-bottom span { font-size: 36px; color: #faecda; }
.item-wrap .item-card:after { background: #fff; }
.item-wrap .item-redpacket, .item-wrap .item-transfer { background-color: #f79c46; }
.item-wrap .item-redpacket .item-main i, .item-wrap .item-transfer .item-main i {
  width: 120px; height: 120px; background: url('/assets/img/orig/trans-icon1.0f2384fb.png') no-repeat;
}
.item-wrap .item-redpacket .item-main div, .item-wrap .item-transfer .item-main div {
  flex: 1 1; display: flex; flex-direction: column; margin-left: 30px; overflow: hidden;
}
.item-wrap .item-redpacket .item-main div span, .item-wrap .item-transfer .item-main div span {
  font-size: 48px; color: #fff; margin-top: -9px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-family: SansStdRegular, -apple-system, sans-serif;
}
.item-wrap .item-redpacket .item-main div em, .item-wrap .item-transfer .item-main div em {
  font-size: 36px; color: #fff; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-style: normal;
}
.item-wrap .item-redpacket .item-main:after, .item-wrap .item-transfer .item-main:after {
  content: ""; background: #f0b36f; position: absolute; width: 100%; height: 1px; bottom: 0;
}
.item-wrap .item-redpacket:after, .item-wrap .item-transfer:after { background: #f79c46; }
/* 已领取态 */
.item-wrap .item-redpacket.item-get, .item-wrap .item-transfer.item-get { background: #f8e2c6; }
.item-wrap .item-redpacket.item-get .item-main i, .item-wrap .item-transfer.item-get .item-main i {
  background: url('/assets/img/orig/trans-icon2.90d2120e.png') no-repeat;
}
.item-wrap .item-redpacket.item-get .item-main:after, .item-wrap .item-transfer.item-get .item-main:after { background: #f9e7d1; }
.item-wrap .item-redpacket.item-get:after, .item-wrap .item-transfer.item-get:after { background: #f8e2c6; }
/* 转账/红包卡片可点击领取 */
.item-wrap [data-claim] { cursor: pointer; }
/* 红包专属图标与文案行 */
.item-wrap .item-redpacket .item-main i {
  width: 102px; background-image: url('/assets/img/orig/trans-icon3.ba56a0d2.png'); margin-left: 9px;
}
/* 红包卡底栏：真实微信为白底灰字独立条（横跨整卡宽） */
.item-wrap .item-redpacket .item-bottom { margin: 0 -38px; padding: 0 38px; background: #fff; border-radius: 0 0 15px 15px; }
.item-wrap .item-redpacket .item-bottom span { color: #9a9a9a; }
/* 红包领取系统通知：前置小红包图标 + 橙色“红包” */
.item-wrap .item-notice-rp::before {
  content: ""; flex: 0 0 auto; width: 34px; height: 42px; margin-right: 12px; align-self: center;
  background: url('/assets/img/orig/trans-icon3.ba56a0d2.png') no-repeat center / contain;
}
.item-wrap .item-notice .rp-link { color: #fa9d3b; }

/* 语音消息 */
.item-wrap .item-voice { display: flex; align-items: center; }
.item-wrap .item-voice span { white-space: nowrap; }
.item-wrap .item-voice i {
  width: 34px; height: 49px; background: url('/assets/img/orig/voice-icon1.d148f40f.png') no-repeat;
  margin-right: 30px; margin-left: 16px;
}

/* 自己（右侧）消息 */
.item-me-wrap { justify-content: flex-end; }
.item-me-wrap .item-content { background: #98e970; margin-left: 140px; margin-right: 160px; }
.item-me-wrap .item-content:after {
  background: #98e970; left: auto; right: -10px;
  border-top-right-radius: 4px; border-bottom-left-radius: 0;
}
.item-me-wrap .item-redpacket, .item-me-wrap .item-transfer { background-color: #f79c46; }
.item-me-wrap .item-redpacket:after, .item-me-wrap .item-transfer:after { background: #f79c46; }
.item-me-wrap .item-voice { flex-flow: row-reverse; }
.item-me-wrap .item-voice i {
  background-image: url('/assets/img/orig/voice-icon2.af88e3ea.png');
  margin-left: 30px; margin-right: 16px;
}

/* 导航栏返回箭头（b02c 共享：wechat_back 27×52） */
.wechat-back {
  text-indent: -9999px; width: 27px; height: 52px;
  background: url('/assets/img/orig/back.337d9490.png') no-repeat;
}

/* 聊天页导航栏右侧“更多”点（原站 wechat_right：right.c0e43b50.png 70×12） */
.wechat-right {
  width: 70px; height: 12px;
  background: url('/assets/img/orig/right.c0e43b50.png') no-repeat;
  text-indent: -9999px; display: inline-block;
}
.wechat-title { display: flex; }
.wechat-title .wechat-text { font-size: 51px; font-weight: 500; }