/* ============================================================
 * 微信对话生成器（wechat_chat）· 前台样式（由 view/front/index.htm 抽出）
 * 资源路径相对本文件（../img、../fonts），因此插件独立页与站点模板页共用一份。
 * 使用方：
 *   ① weapp/wechat_chat/view/front/index.htm                （插件独立页）
 *   ② template/Quyou/pc|mobile/view_marketing_wechat.htm    （EyouCMS 站点页）
 * ============================================================ */
@font-face{font-family:'SF Pro Text';src:url('../fonts/sf-pro-text_semibold.7869e58b.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
.wc-page *{box-sizing:border-box}
.wc-page{
  --wc-brand:#07c160;--wc-dark:#111;--wc-muted:#8b93a1;--wc-line:#e7e7e7;
  --wc-bg:#f5f6f8;--wc-chat-bg:#ededed;--wc-bubble-me:#98e970;--wc-bubble-peer:#fff;
  --wc-input-bg:#f7f7f7;--wc-nav:#181818;--wc-text:#111;--wc-text-sec:#8b8b8b;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--wc-dark);background:var(--wc-bg);min-height:100vh;-webkit-tap-highlight-color:transparent}
.wc-page a{color:inherit;text-decoration:none}

.wc-hd{background:linear-gradient(135deg,#1d2126,#0f1216);color:#fff;padding:22px 0 60px}
.wc-hd__in{max-width:1280px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:14px}
.wc-logo{width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:var(--wc-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700}
.wc-hd__txt{flex:1;min-width:0}
.wc-hd__txt b{display:block;font-size:19px;letter-spacing:.5px}
.wc-hd__txt span{display:block;margin-top:4px;font-size:12.5px;color:rgba(255,255,255,.62)}
.wc-hd__user{display:flex;align-items:center;gap:10px;font-size:13px}
.wc-chip{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.wc-chip--free{background:var(--wc-brand);color:#fff}
.wc-chip--link{cursor:pointer;transition:background .18s}
.wc-chip--link:hover{background:rgba(255,255,255,.22)}

/* 桌面端列宽：左列只占手机壳真正需要的宽度（390 手机 + 卡片左右内边距 36 + 呼吸位），
   剩余宽度全部给右侧「消息编辑 / 外观设置 / 样式设置 + 导出」面板，避免预览区大片留白。
   （<=1024px 时由下面的媒体查询改为单列） */
.wc-main{max-width:1280px;margin:-42px auto 0;padding:0 18px 56px;
  display:grid;grid-template-columns:460px minmax(0,1fr);gap:20px;align-items:start}
/* 站点模板嵌入模式（body.wc-embed，模板不输出插件自身头部）：
   取消与头部重叠用的 -42px 负边距，改用正常上间距。 */
.wc-embed .wc-main{margin-top:0;padding-top:34px}
.wc-card{background:#fff;border-radius:18px;box-shadow:0 6px 24px rgba(23,30,43,.08)}

/* ---------------- 桌面端「左固定 + 右滚动」布局（第 8 期改版） ----------------
   ① 左列手机壳：position:sticky 钉在左侧，页面滚动时手机壳不动；
   ② 右列「编辑与导出」：固定高度 + 自己的滚动条，消息编辑 / 外观设置 / 样式设置 /
      导出成品 / 优惠套餐全部在右列内滚动查看，不会再跑到页面最底部、也不会被拉宽。
   偏移量用 CSS 变量控制：插件独立页 18px；站点模板页顶部有 36px 固定工具栏，让开它。 */
.wc-page{--wc-stick-top:18px;--wc-panel-h:calc(100vh - 36px)}
.wc-embed .wc-page{--wc-stick-top:48px;--wc-panel-h:calc(100vh - 66px)}
.wc-stage{position:sticky;top:var(--wc-stick-top)}
.wc-panel{position:sticky;top:var(--wc-stick-top);max-height:var(--wc-panel-h);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(15,23,32,.18) transparent}
.wc-panel::-webkit-scrollbar{width:6px}
.wc-panel::-webkit-scrollbar-track{background:transparent}
.wc-panel::-webkit-scrollbar-thumb{background:rgba(15,23,32,.16);border-radius:6px}
.wc-panel::-webkit-scrollbar-thumb:hover{background:rgba(15,23,32,.3)}
/* 手机壳整体不超过一屏，避免「底部被切掉又滚不到」 */
@media (min-width:1025px){
  .wc-screen{height:max(440px,min(720px,calc(100vh - 180px)))}
}

/* ---------------- 手机壳 ---------------- */
.wc-stage{padding:26px 18px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.wc-phone{position:relative;width:390px;max-width:100%}
.wc-phone__frame{position:relative;border-radius:52px;padding:13px;background:#0b0d10;
  box-shadow:0 22px 55px rgba(0,0,0,.32),0 2px 0 rgba(255,255,255,.07) inset}
.wc-phone__notch{position:absolute;left:50%;top:13px;transform:translateX(-50%);width:156px;height:30px;
  background:#0b0d10;border-radius:0 0 18px 18px;z-index:6}
.wc-phone__notch:after{content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:48px;height:5px;border-radius:3px;background:#2b3037}
.wc-screen{position:relative;border-radius:40px;overflow:hidden;background:var(--wc-chat-bg);
  height:720px;display:flex;flex-direction:column}

/* 状态栏 */
.wc-statusbar{flex:0 0 auto;height:44px;padding:13px 14px 0 32px;display:flex;align-items:center;
  justify-content:space-between;font-size:15px;font-weight:600;color:#111;
  font-family:'SF Pro Text',-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
.wc-statusbar__l,.wc-statusbar__r{display:flex;align-items:center;gap:5px}
.wc-statusbar__l{gap:7px}
/* 第 9 期：网络文字（5G/4G/WiFi…）移到信号格正上方，极小号显示 */
.wc-signalbox{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;line-height:1}
.wc-signal{display:inline-block;width:18px;height:12px;background:url('../img/phone_sigle.png') no-repeat;background-size:contain}
.wc-signal[data-level="1"]{background-image:url('../img/phone_sigle_v1.png')}
.wc-signal[data-level="2"]{background-image:url('../img/phone_sigle_v2.png')}
.wc-signal[data-level="3"]{background-image:url('../img/phone_sigle_v3.png')}
.wc-signal[data-level="0"]{background-image:none;width:0}
/* 定位微调：相对定位只做视觉偏移，不改变纵向排列（上 4 / 左 -4，改这两个值即可微调） */
.wc-network{position:relative;top:4px;left:-4px;font-size:8px;line-height:8px;font-weight:600;color:#111;text-align:center;letter-spacing:.2px;white-space:nowrap;margin-bottom:1px}
.wc-wifi{display:inline-block;width:21px;height:15px;background:url('../img/phone_wifi.png') no-repeat;background-size:contain}
.wc-battery{position:relative;display:inline-block;width:25px;height:12px;background:url('../img/phone_battery.png') no-repeat;background-size:contain}
.wc-battery__fill{position:absolute;left:2px;right:5px;top:2px;bottom:2px;background:#111;border-radius:1px}
.wc-battery__fill.is-charge{background:#65c466}
.wc-battery__bolt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:6px;height:12px;background:url('../img/phone_battery_phone_battery_charge_i.png') no-repeat;background-size:contain;display:none}
.wc-battery__bolt.is-on{display:block}

/* 导航栏 */
.wc-chathead{flex:0 0 auto;height:44px;display:flex;align-items:center;padding:0 16px;
  background:transparent;position:relative;z-index:2}
.wc-chathead__back{width:50px;height:44px;display:flex;align-items:center;position:relative;flex:0 0 50px}
.wc-chathead__back i{display:inline-block;width:9px;height:17px;background:url('../img/phone_nav_back.png') no-repeat;background-size:contain}
.wc-chathead__badge{position:absolute;left:14px;top:6px;min-width:18px;height:18px;padding:0 5px;
  background:#fa5151;border-radius:999px;color:#fff;font-size:11px;font-weight:600;display:flex;
  align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-chathead__name{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:17px;font-weight:600;color:var(--wc-nav);overflow:hidden}
.wc-chathead__name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.wc-chathead__name i{display:none;width:10px;height:14px;background:url('../img/phone_nav_center_span_i.png') no-repeat;background-size:contain}
.wc-chathead__name.is-earpiece i{display:inline-block}
.wc-chathead__more{width:50px;height:44px;display:flex;align-items:center;justify-content:flex-end;flex:0 0 50px}
.wc-chathead__more i{display:inline-block;width:23px;height:4px;background:url('../img/phone_nav_more.png') no-repeat;background-size:contain}

/* 聊天区 */
.wc-msgs{flex:1;overflow-y:auto;padding:14px 12px 12px;display:flex;flex-direction:column;gap:2px;
  background-size:cover;background-position:center}
.wc-msgs::-webkit-scrollbar{width:3px}
.wc-msgs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:3px}

.wc-msg-row{display:flex;gap:9px;align-items:flex-start;max-width:100%;margin-bottom:14px}
.wc-msg-row--me{flex-direction:row-reverse}
.wc-msg-row--sys{justify-content:center;margin:18px 0}

.wc-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:4px;overflow:hidden;background:#c8cdd4;
  color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.wc-avatar img{width:100%;height:100%;object-fit:cover}

.wc-msg__in{max-width:232px;display:flex;flex-direction:column;gap:5px}
.wc-msg-row--me .wc-msg__in{align-items:flex-end}

.wc-bubble{position:relative;padding:9px 12px;border-radius:5px;background:var(--wc-bubble-peer);
  font-size:15.5px;line-height:1.48;color:#111;word-break:break-word;white-space:pre-wrap;
  box-shadow:0 1px 0 rgba(0,0,0,.04)}
.wc-msg-row--me .wc-bubble{background:var(--wc-bubble-me)}
.wc-bubble:before{content:"";position:absolute;top:13px;width:0;height:0;border-style:solid}
.wc-msg-row:not(.wc-msg-row--me):not(.wc-msg-row--sys) .wc-bubble:before{left:-6px;
  border-width:6px 6px 6px 0;border-color:transparent var(--wc-bubble-peer) transparent transparent}
.wc-msg-row--me .wc-bubble:before{right:-6px;border-width:6px 0 6px 6px;
  border-color:transparent transparent transparent var(--wc-bubble-me)}

/* 图片 */
.wc-bubble--img{border:1px solid #d5d5d5;padding:0;background:transparent!important;box-shadow:none}
.wc-bubble--img:before{display:none}
.wc-bubble--img img{max-width:140px;border-radius:6px;display:block}

/* 语音 */
.wc-bubble--voice{position:relative;display:flex;align-items:center;justify-content:space-between;min-width:72px;max-width:200px;padding:8px 12px}
.wc-bubble--voice .wc-voice__i{width:11px;height:16px;background:url('../img/wechat_dialog_voice_i.png') no-repeat;background-size:contain;flex:0 0 11px}
.wc-msg-row--me .wc-bubble--voice .wc-voice__i{background-image:url('../img/wechat_dialog_right_wechat_dialog_voice_i.png')}
.wc-bubble--voice .wc-voice__t{font-size:14px;color:#111;line-height:1}
.wc-bubble--voice .wc-voice__dot{position:absolute;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#e75e58}
.wc-msg-row:not(.wc-msg-row--me):not(.wc-msg-row--sys) .wc-bubble--voice .wc-voice__dot{right:-14px}
.wc-msg-row--me .wc-bubble--voice .wc-voice__dot{left:-14px}
.wc-msg-row--me .wc-bubble--voice{flex-direction:row-reverse}

/* 系统提示（时间/普通） */
.wc-bubble--sys{align-self:center;background:hsla(0,0%,100%,.5);color:#151414;font-size:12px;padding:4px 9px;border-radius:5px;text-align:center;max-width:90%;box-shadow:none}
.wc-bubble--sys:before{display:none}
.wc-bubble--time{align-self:center;background:rgba(0,0,0,.1);color:#fff;font-size:11px;padding:3px 7px;border-radius:3px;margin:6px 0}
.wc-bubble--time:before{display:none}

/* 手机壳内消息行：悬停删除按钮（快捷删除） */
.wc-msg-row{position:relative}
.wc-row-del{display:none;position:absolute;top:-9px;width:20px;height:20px;padding:0;border:0;
  border-radius:50%;background:#fa5151;color:#fff;font-family:inherit;font-size:13px;font-weight:600;
  line-height:20px;text-align:center;cursor:pointer;z-index:8;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.wc-msg-row:hover .wc-row-del{display:block}
/* 触屏设备没有 hover，删除按钮常显（半透明弱化），点击即删 */
@media (hover:none){.wc-row-del{display:block;opacity:.85}}
.wc-msg-row:not(.wc-msg-row--me):not(.wc-msg-row--sys) .wc-row-del{left:-4px}
.wc-msg-row--me .wc-row-del{right:-4px}
.wc-msg-row--sys .wc-row-del{left:0;top:-8px}

/* 手机壳内消息行：悬停快捷操作（未拆红包 → 领取 / 退回；待确认转账 → 确认收款）。
   与删除按钮并排在气泡上方，导出成品不带入（data-html2canvas-ignore）。 */
.wc-row-act{display:none;position:absolute;top:-9px;height:20px;padding:0 8px;border:0;border-radius:10px;
  background:#07c160;color:#fff;font-family:inherit;font-size:11px;font-weight:600;line-height:20px;
  text-align:center;cursor:pointer;z-index:8;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.wc-msg-row:hover .wc-row-act{display:block}
/* 触屏设备没有 hover，操作按钮常显（半透明弱化），点击即生效 */
@media (hover:none){.wc-row-act{display:block;opacity:.85}}
.wc-msg-row:not(.wc-msg-row--me):not(.wc-msg-row--sys) .wc-row-act{left:20px}
.wc-msg-row--me .wc-row-act{right:20px}
.wc-row-act--alt{background:#576b95}
.wc-msg-row:not(.wc-msg-row--me):not(.wc-msg-row--sys) .wc-row-act--alt{left:66px}
.wc-msg-row--me .wc-row-act--alt{right:66px}

/* 红包领取通知（源站 /wechat .wechat-dialog-notice-system 1:1，3x 设计稿 → 1x）：
   居中灰字 + 红包小图标，em 橙色高亮 */
.wc-notice{display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#a6a6a6;
  padding:3px 10px;text-align:center;max-width:90%;line-height:1.5}
.wc-notice__icon{width:15px;height:17px;flex:0 0 15px;margin-right:6px;
  background:url('../img/wechat_dialog_notice_redp_icon.png') no-repeat;background-size:contain}
.wc-notice em{font-style:normal;color:#ef9d49}

/* 转账（源站 1:1）：样式数值逐条取自 /wechat/css/app.1ea52a3c.css 的
   .wechat-dialog-text / .wechat-dialog-trans 系列。源站手机内容区 1170px 宽、
   以 scale(1/3) 显示（3 倍设计稿），故这里保留源站 3x 数值，外层同样 scale(1/3) 还原，
   视觉与源站完全一致（含 1px 分隔线、省略号、小尾巴箭头）。 */
.wc-msg__in--tr{max-width:240px}
.wc-bubble--trans{position:relative;display:block;width:233.33px;height:87.67px;padding:0;
  background:transparent;box-shadow:none;overflow:visible}
.wc-bubble--trans:before{display:none}
.wc-tr2{position:absolute;left:0;top:0;display:block;width:700px;padding:0 38px;
  background:#f79c46;border-radius:15px;font-size:48px;line-height:normal;
  transform:scale(.33333333);transform-origin:0 0}
/* 小尾巴（源站 .wechat-dialog-text:after：24x24 旋转 45° 小方块） */
.wc-tr2:after{content:"";background:#f79c46;width:24px;height:24px;border-bottom-left-radius:4px;
  top:50px;left:-12px;position:absolute;transform:rotate(45deg)}
.wc-msg-row--me .wc-tr2:after{left:auto;right:-10px;border-top-right-radius:4px;border-bottom-left-radius:0}
/* 上半内容区：图标 + 金额 + 「转账给XX」 */
.wc-tr2__content{display:flex;height:192px;align-items:center;position:relative}
.wc-tr2__content:after{content:"";background:#f0b36f;position:absolute;width:100%;height:1px;bottom:0}
.wc-tr2__icon{display:block;width:120px;height:120px;flex:0 0 120px;
  background:url('../img/wechat-trans-icon1.png') no-repeat}
.wc-tr2__txt{flex:1;display:flex;flex-direction:column;margin-left:30px;overflow:hidden}
.wc-tr2__m{font-size:48px;color:#fff;margin-top:-9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-tr2__t{font-size:36px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 下半底条：文案恒为「微信转账」（源站 XbbCW），仅颜色随状态（未领取 #faecda / 已领取白色） */
.wc-tr2__bottom{height:71px;align-items:center;display:flex}
.wc-tr2__bottom span{font-size:36px;color:#faecda}
/* 已领取 / 已退还（源站 .wechat-dialog-trans-get） */
.wc-bubble--trans.is-accepted .wc-tr2{background:#f8e2c6}
.wc-bubble--trans.is-accepted .wc-tr2:after{background:#f8e2c6}
.wc-bubble--trans.is-accepted .wc-tr2__content:after{background:#f9e7d1}
.wc-bubble--trans.is-accepted .wc-tr2__icon{background-image:url('../img/wechat-trans-icon2.png')}
.wc-bubble--trans.is-accepted .wc-tr2__bottom span{color:#fff}
/* 转账备注（源站 dialog_trans_remark）：小字显示在卡片下方，随气泡侧对齐（真实微信一致） */
.wc-tr2__remark{display:block;max-width:233px;font-size:11px;color:#999;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 红包 */
.wc-bubble--redp{min-width:180px;max-width:220px;background:#f79c46!important;color:#fff;padding:0;overflow:hidden}
.wc-bubble--redp:before{border-color:transparent transparent transparent #f79c46!important}
.wc-msg-row:not(.wc-msg-row--me) .wc-bubble--redp:before{border-color:transparent #f79c46 transparent transparent!important}
.wc-redp__top{display:flex;align-items:center;gap:10px;padding:12px 14px}
.wc-redp__icon{width:34px;height:34px;background:url('../img/wechat_dialog_wechat_dialog_redp_content_i.png') no-repeat;background-size:contain;flex:0 0 34px}
.wc-redp__info{flex:1}
.wc-redp__b{font-size:16px;font-weight:500;line-height:1.4;color:#fff}
/* 被领取 / 已退回状态行（源站 redp-content <font>已领取</font>：36/3=12px 白色） */
.wc-redp__s{display:block;font-size:12px;font-weight:400;line-height:1.3;color:#fff;margin-top:1px}
/* 底部文案行（真机口径）：不显示任何状态，安卓恒为「微信红包」、苹果恒为「红包」；
   未拆底部字 #faecda + 分隔线 #f0b36f（源站 trans-content:after / trans-bottom span） */
.wc-redp__bot{padding:6px 14px 7px;font-size:12px;font-weight:500;color:#faecda;border-top:1px solid #f0b36f}

/* 已领取 / 已退回红包（源站 wechat-dialog-trans-get 1:1）：米色卡片 #f8e2c6、白字、
   分隔线 #f9e7d1、底部白字，图标换已拆红包（base64 已提取为 _re.png），底部文案不变 */
.wc-bubble--redp.is-received{background:#f8e2c6!important}
.wc-bubble--redp.is-received:before{border-color:transparent transparent transparent #f8e2c6!important}
.wc-msg-row:not(.wc-msg-row--me) .wc-bubble--redp.is-received:before{border-color:transparent #f8e2c6 transparent transparent!important}
.wc-bubble--redp.is-received .wc-redp__bot{color:#fff;border-top-color:#f9e7d1}

/* 底部输入区 */
.wc-inputbar{flex:0 0 auto;min-height:56px;padding:8px 10px;display:flex;align-items:center;gap:8px;
  background:var(--wc-input-bg);border-top:1px solid #e2e2e2}
.wc-inputbar__voice{width:28px;height:28px;flex:0 0 28px;background:url('../img/wechat_voice_icon.png') no-repeat;background-size:contain;cursor:pointer}
.wc-inputbar.is-voice .wc-inputbar__voice{background-image:url('../img/wechat_voice_say.png')}
.wc-inputbar__box{flex:1;position:relative;display:flex;align-items:center;height:40px}
.wc-inputbar__fld{position:absolute;inset:0;width:100%;height:100%;border-radius:5px;background:#fff;border:0;
  padding:0 12px;font-size:16px;color:#1a1a1a;outline:none}
.wc-inputbar__fld.is-say{text-align:center;font-weight:500;color:#1a1a1a;cursor:default}
.wc-inputbar__smile{width:28px;height:28px;flex:0 0 28px;background:url('../img/wechat_emoji_icon.png') no-repeat;background-size:contain;cursor:pointer}
.wc-inputbar__plus{width:28px;height:28px;flex:0 0 28px;background:url('../img/wechat_more_icon.png') no-repeat;background-size:contain;cursor:pointer}

/* Home Indicator */
.wc-homebar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:134px;height:5px;
  background:#111;border-radius:3px;z-index:5;opacity:.9}

/* 水印层 */
.wc-watermark{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;pointer-events:none;
  z-index:30;user-select:none}
.wc-watermark__i{position:absolute;white-space:nowrap;font-weight:700;letter-spacing:.5px;
  transform-origin:left top}

.wc-stage__tip{margin:0;font-size:12.5px;color:var(--wc-muted);display:flex;align-items:center;gap:6px}
.wc-stage__tip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wc-brand)}

/* ---------------- 右侧面板 ---------------- */
.wc-panel{padding:18px}
.wc-tabs{display:flex;gap:6px;background:#f2f3f5;border-radius:12px;padding:5px}
.wc-tab{flex:1;height:38px;border:0;border-radius:9px;background:transparent;color:#5b6472;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:all .18s;font-family:inherit}
.wc-tab.is-on{background:#fff;color:var(--wc-dark);box-shadow:0 1px 4px rgba(20,25,35,.1)}
.wc-pane{display:none;padding:18px 2px 4px}
.wc-pane.is-on{display:block}

/* 表单 */
.wc-fld{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.wc-fld__l{font-size:13px;font-weight:600;color:#48505c;display:flex;align-items:center;gap:6px}
.wc-fld__l em{font-style:normal;font-weight:400;color:var(--wc-muted);font-size:11.5px;margin-left:auto}
.wc-fld input[type=text],.wc-fld input[type=number],.wc-fld input[type=url],.wc-fld textarea,.wc-fld select{
  width:100%;border:1px solid var(--wc-line);border-radius:10px;padding:9px 11px;font-size:13.5px;
  font-family:inherit;color:var(--wc-dark);background:#fbfbfd;outline:none;transition:all .18s}
.wc-fld input:focus,.wc-fld textarea:focus,.wc-fld select:focus{border-color:var(--wc-brand);
  background:#fff;box-shadow:0 0 0 3px rgba(7,193,96,.1)}
.wc-fld__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wc-sw{display:flex;align-items:center;gap:8px;padding:6px 0}
.wc-sw input{width:17px;height:17px;accent-color:var(--wc-brand);cursor:pointer}
.wc-sw span{font-size:13px;color:#48505c}

/* 头像上传预览 */
.wc-avatar-edit{display:flex;align-items:center;gap:12px}
.wc-avatar-preview{width:46px;height:46px;border-radius:5px;background:#c8cdd4;color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:600;overflow:hidden;flex:0 0 46px}
.wc-avatar-preview img{width:100%;height:100%;object-fit:cover}
.wc-avatar-edit input{flex:1}

/* 图片上传（第 8 期）：头像 / 聊天背景 / 消息图片统一「点上传图片 → 选图 → 自动上传 → 回填」
   （原 URL 输入框保留，粘网图依旧可用；窄屏自动换行，不做图标按钮，越简单越好用） */
.wc-up{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.wc-up input[type=text]{flex:1;min-width:120px;width:auto}
.wc-up__btn{flex:0 0 auto;height:38px;padding:0 13px;border:1px solid var(--wc-brand);border-radius:10px;
  background:#fff;color:var(--wc-brand);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:background .18s,opacity .18s}
.wc-up__btn:hover{background:rgba(7,193,96,.08)}
.wc-up__btn:disabled{opacity:.55;cursor:default}
.wc-up__btn--ghost{border-color:var(--wc-line);color:var(--wc-muted)}
.wc-up__btn--ghost:hover{background:#f2f3f5}
.wc-bg-edit{display:flex;align-items:center;gap:12px}
.wc-bg-preview{width:56px;height:56px;flex:0 0 56px;border-radius:10px;border:1px solid var(--wc-line);
  background:#ededed center/cover no-repeat;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--wc-muted)}
.wc-up__tip{display:block}
.wc-up__tip img{max-width:104px;border-radius:8px;border:1px solid var(--wc-line);display:block}
/* 第 9 期：上传成功后不把图片地址回填到可见输入框，字段进入「已上传」提示态 */
.wc-up input.is-uploaded{border-style:dashed;background:#f4f6f7;color:#8b93a1}

.wc-empty{padding:30px 18px;border:1px dashed #dfe3e9;border-radius:14px;background:#fafbfc;text-align:center}
.wc-empty b{display:block;font-size:14.5px;margin-bottom:7px}
.wc-empty p{margin:0;font-size:12.5px;line-height:1.75;color:var(--wc-muted)}
.wc-badge{display:inline-block;margin-top:11px;padding:4px 10px;border-radius:999px;font-size:11.5px;
  background:#eef7f1;color:#0b8a48;font-weight:600}

.wc-export{margin-top:20px;padding-top:18px;border-top:1px solid var(--wc-line)}
.wc-export__t{margin:0 0 12px;font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.wc-export__t:before{content:"";width:4px;height:15px;border-radius:2px;background:var(--wc-brand)}
.wc-export__list{display:flex;flex-direction:column;gap:9px}
.wc-pick{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--wc-line);
  border-radius:12px;background:#fbfbfd;cursor:pointer;transition:all .18s}
.wc-pick:hover{border-color:#cfe9da}
.wc-pick.is-on{border-color:var(--wc-brand);background:#f2fbf6;box-shadow:0 0 0 3px rgba(7,193,96,.09)}
.wc-pick__dot{width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:1.5px solid #cfd4db;position:relative}
.wc-pick.is-on .wc-pick__dot{border-color:var(--wc-brand);background:var(--wc-brand)}
.wc-pick.is-on .wc-pick__dot:after{content:"";position:absolute;left:5px;top:5px;width:6px;height:6px;
  border-radius:50%;background:#fff}
.wc-pick__txt{flex:1;min-width:0}
.wc-pick__txt b{display:block;font-size:14px}
.wc-pick__txt span{display:block;margin-top:2px;font-size:12px;color:var(--wc-muted)}
.wc-pick__price{font-size:15px;font-weight:700;color:#e0562d;white-space:nowrap}
.wc-pick__price em{font-size:11.5px;font-style:normal;font-weight:500;color:var(--wc-muted);margin-left:2px}

.wc-btn{width:100%;height:50px;margin-top:16px;border:0;border-radius:12px;background:var(--wc-brand);color:#fff;
  font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .18s,transform .18s}
.wc-btn:hover{opacity:.93}
.wc-btn:active{transform:scale(.995)}
.wc-btn[disabled]{opacity:.55;cursor:not-allowed}
.wc-export__tip{margin:12px 0 0;font-size:12.5px;line-height:1.75;color:var(--wc-muted);text-align:center}
.wc-export__tip b{color:#e0562d;font-weight:600}

.wc-toast{position:fixed;left:50%;bottom:46px;transform:translate(-50%,16px);z-index:9999;
  max-width:min(520px,86vw);padding:12px 18px;border-radius:12px;background:rgba(25,30,38,.94);color:#fff;
  font-size:13.5px;line-height:1.6;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;text-align:center}
.wc-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------------- 消息编辑器 ---------------- */
.wc-editor{margin-top:10px}
.wc-type-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.wc-type-btns button{flex:1;min-width:56px;height:34px;border:1px solid #e7e7e7;border-radius:8px;background:#fff;color:#48505c;font-size:12.5px;font-weight:600;cursor:pointer;transition:.18s;font-family:inherit}
.wc-type-btns button:hover{border-color:#07c160;color:#07c160}
.wc-type-btns button:active{transform:scale(.98)}
.wc-msg-list{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow-y:auto;padding-right:4px}
.wc-msg-list::-webkit-scrollbar{width:3px}
.wc-msg-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:3px}
.wc-msg-list__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12px;color:#8b93a1}
.wc-msg-list__acts{display:flex;align-items:center;gap:14px}
.wc-msg-list__hd button{border:0;background:transparent;color:#07c160;font-size:12px;cursor:pointer;font-weight:600;font-family:inherit}
.wc-msg-list__hd button:hover{text-decoration:underline}
.wc-msg-list__hd .wc-msg-list__clear{color:#e0574f}
.wc-msg-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #e7e7e7;border-radius:10px;background:#fbfbfd;cursor:pointer;transition:.18s}
.wc-msg-item:hover{border-color:#cfe9da;background:#f9fbfa}
.wc-msg-item.is-on{border-color:#07c160;background:#f2fbf6;box-shadow:0 0 0 3px rgba(7,193,96,.08)}
.wc-msg-item__icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:5px;background:#e8ecef;color:#6a7685;font-size:11px;font-weight:700}
.wc-msg-item.is-on .wc-msg-item__icon{background:#07c160;color:#fff}
.wc-msg-item__txt{flex:1;min-width:0;font-size:12.5px;color:#48505c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-msg-item__side{font-size:11px;color:#8b93a1;background:#eef0f3;padding:2px 6px;border-radius:4px;white-space:nowrap}
.wc-msg-item__side--me{color:#07c160;background:#e8f7ed}
.wc-msg-item__acts{display:flex;gap:4px}
.wc-msg-item__act{padding:4px 6px;border:0;background:transparent;cursor:pointer;font-size:12px;color:#8b93a1;border-radius:5px}
.wc-msg-item__act:hover{background:#e7e7e7}
.wc-msg-item__act--del:hover{color:#fa5151;background:#ffeded}
.wc-editor__fields{padding:14px;border:1px solid #e7e7e7;border-radius:12px;background:#fff;margin-bottom:12px}
.wc-editor__t{margin:0 0 12px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.wc-editor__t:before{content:"";width:4px;height:15px;border-radius:2px;background:#07c160}
.wc-hint{margin:0;font-size:11.5px;line-height:1.65;color:#8b93a1;background:#f6f8fa;border-radius:8px;padding:8px 10px}
.wc-editor__btns{display:flex;gap:8px;margin-top:14px}
.wc-editor__btns button{flex:1;height:38px;border-radius:8px;border:0;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.18s}
.wc-editor__btns .wc-btn--primary{background:#07c160;color:#fff}
.wc-editor__btns .wc-btn--secondary{background:#f2f3f5;color:#48505c}
.wc-editor__btns .wc-btn--secondary:hover{background:#e7e7e7}
.wc-editor__btns .wc-btn--danger{background:#fff0f0;color:#fa5151}
.wc-editor__btns .wc-btn--danger:hover{background:#ffe2e2}

/* ---------------- 公告（第 4 期）：顶部滚动条 ---------------- */
/* 作为 .wc-main 的整行子元素（grid-column:1/-1），站点模板页与插件独立页共用 */
.wc-marquee{grid-column:1/-1;display:flex;align-items:center;gap:10px;height:38px;margin:0 0 14px;
  padding:0 16px;border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(15,23,32,.05);overflow:hidden}
.wc-marquee__t{flex:none;font-size:12px;font-weight:700;color:#fa5151;letter-spacing:2px}
.wc-marquee__roll{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.wc-marquee__roll span{display:inline-block;padding-left:100%;font-size:12.5px;color:#576069;
  animation:wcMarquee 16s linear infinite}
@keyframes wcMarquee{to{transform:translateX(-100%)}}

/* ---------------- 公告（第 4 期）：弹窗公告 ---------------- */
.wc-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:24px}
.wc-modal__mask{position:absolute;inset:0;background:rgba(15,23,32,.45)}
.wc-modal__box{position:relative;width:min(420px,92vw);max-height:76vh;display:flex;flex-direction:column;
  background:#fff;border-radius:16px;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(15,23,32,.28)}
.wc-modal__t{font-size:16.5px;color:#111}
.wc-modal__c{margin:12px 0 18px;overflow:auto;font-size:13.5px;line-height:1.85;color:#3c4650;
  white-space:pre-wrap;word-break:break-word}
.wc-modal .wc-btn{margin-top:0}

/* ---------------- 导出长图：解除高度限制（第 4 期） ----------------
   由 JS 在成像前给 body 加 .wc-capture-full，成像后移除；
   第 9 期：只截 #wcScreen（屏幕界面本身），手机壳边框 / 刘海 / 圆角不再进成品，
   屏幕高度随内容自适应，消息区不再滚动、全部铺开，隐藏底部小黑条 */
.wc-capture-full .wc-screen{height:auto;min-height:720px;border-radius:0}
.wc-capture-full .wc-msgs{overflow:visible}
.wc-capture-full .wc-homebar{display:none}
/* 第 9 期：GIF / 视频逐帧截图同样只保留屏幕内容（去圆角 + 隐藏小黑条） */
.wc-capture-flat .wc-screen{border-radius:0}
.wc-capture-flat .wc-homebar{display:none}
/* 第 8 期：左列改吸顶后，导出瞬间取消 sticky，避免 html2canvas 克隆时定位偏移 */
.wc-capture-full .wc-stage,.wc-capture-full .wc-panel{position:static}

/* ---------------- 套餐（第 5 期） ---------------- */
.wc-pkg{margin-top:14px;border:1px solid #e5e9f0;border-radius:12px;padding:12px 12px 6px;background:#fafbfd}
.wc-pkg__t{font-size:13px;font-weight:600;color:#4b5563;margin-bottom:8px}
.wc-pkg__row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid #e9edf3;border-radius:10px;background:#fff;margin-bottom:8px}
.wc-pkg__n{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wc-pkg__n b{font-size:13.5px;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-pkg__n em{font-style:normal;font-size:12px;color:#8a94a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-pkg__p{font-size:15px;font-weight:700;color:var(--wc-brand,#07c160);white-space:nowrap}
.wc-pkg__btn{border:0;border-radius:8px;background:var(--wc-brand,#07c160);color:#fff;font-size:12.5px;padding:7px 14px;cursor:pointer;white-space:nowrap}
.wc-pkg__btn:disabled{opacity:.5;cursor:default}

/* ---------------- 模板中心（第 6 期） ---------------- */
.wc-sty-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.wc-sty-chip{border:1px solid #e5e9f0;background:#fff;border-radius:999px;padding:5px 13px;
  font-size:12.5px;color:#4b5563;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.wc-sty-chip i{font-style:normal;font-size:11px;color:#9aa4b2}
.wc-sty-chip.is-on{border-color:var(--wc-brand,#07c160);color:var(--wc-brand,#07c160);background:rgba(7,193,96,.06)}
.wc-sty-chip.is-on i{color:var(--wc-brand,#07c160)}
.wc-sty-list{display:flex;flex-direction:column;gap:10px}
.wc-sty-card{border:1px solid #e5e9f0;border-radius:12px;padding:12px 13px;background:#fff}
.wc-sty-card__hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wc-sty-card__hd b{font-size:13.5px;color:#1f2937}
.wc-sty-card__cat{font-size:11px;color:var(--wc-brand,#07c160);background:rgba(7,193,96,.08);
  border-radius:6px;padding:2px 8px;white-space:nowrap}
.wc-sty-card__sum{font-size:12px;color:#8a94a3;margin:6px 0 4px;line-height:1.5}
.wc-sty-card__meta{font-size:11.5px;color:#a7b0bd;margin-bottom:9px}
.wc-sty-card__btn{border:0;border-radius:8px;background:var(--wc-brand,#07c160);color:#fff;
  font-size:12.5px;padding:7px 16px;cursor:pointer}
.wc-sty-card__btn:hover{opacity:.9}

/* ---------------- 水印动态化（第 6 期：漂浮 + 自愈） ---------------- */
/* 每个 .wc-watermark__i 由 JS 写入随机 --wm-deg/--wm-dur/--wm-delay，
   keyframes 保留 rotate 角度、小幅漂移 8px；导出时容器加 is-static 暂停动画 */
#wcWatermark.is-float .wc-watermark__i{animation:wcWmDrift var(--wm-dur,7s) ease-in-out var(--wm-delay,0s) infinite alternate}
@keyframes wcWmDrift{
  from{transform:rotate(var(--wm-deg,-24deg)) translate(0,0)}
  to{transform:rotate(var(--wm-deg,-24deg)) translate(8px,-10px)}
}
#wcWatermark.is-static .wc-watermark__i{animation:none!important}

@media (max-width:1024px){
  .wc-main{grid-template-columns:minmax(0,1fr)}
  /* 单列（手机/平板）下取消吸顶与内滚动，回归整页滚动 */
  .wc-stage,.wc-panel{position:static;top:auto;max-height:none;overflow:visible}
  .wc-panel{order:2}
  .wc-screen{height:640px}
  .wc-phone{width:360px}
}
@media (max-width:420px){
  .wc-hd__in{gap:10px}
  .wc-hd__txt span{display:none}
  .wc-hd{padding:18px 0 56px}
  .wc-phone__frame{border-radius:42px;padding:10px}
  .wc-screen{border-radius:32px;height:580px}
  .wc-main{padding:0 12px 44px}
  .wc-embed .wc-main{padding-top:14px}
}