/* =========================================================
 * wechat/wxpuppy.css — 「心动小狗」主题专属样式
 * 复刻自微信主题包 C:\iPhone\芸の心动小狗（Corneyrabbit-1H64T）
 * 素材由 server/_exportdog.mjs 从原包导出到 img/wxdog/
 *
 * 本主题与其它主题的本质差异：
 *   1. 气泡不是「圆角色块」，而是手绘墨线框 → 用 border-image 九宫格拉伸
 *   2. 顶栏 / 标签栏带涂鸦插画与手绘波浪分隔线 → 整块贴图铺底
 *   3. 标签栏图标是小狗头像（而非线性 SVG）→ background-image 替换
 *   4. 搜索框是手绘圆角框 → border-image
 * 所有规则只在 html[data-theme="puppy"] 下生效，不污染其它主题。
 * ========================================================= */

/* ---------- 1. 页面底：真实涂鸦背景图 ---------- */
/* 会话底与聊天底共用同一张涂鸦图；不用 background-repeat 平铺，
 * 否则小狗与爱心会规律重复、露出接缝。原图 660x1428，按高度 cover。 */
.app-wechat[data-theme="puppy"] .wx-bg {
  background-color: #fff8f8;
  background-image: var(--wx-dog-list-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.app-wechat[data-theme="puppy"] .wx-msgs {
  background-color: #fff8f8;
  background-image: var(--wx-dog-chat-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

/* 主题预览小卡不该显示整屏涂鸦，改为纯色 */
.app-wechat[data-theme="puppy"] .wx-theme-preview {
  background-image: none !important;
  background-color: #fff8f8;
}

/* ---------- 2. 顶栏：涂鸦插画铺底 ---------- */
/* 原图 880x199 只在顶栏区域可见，横向铺满、纵向按需 */
.app-wechat[data-theme="puppy"] .navbar {
  background-color: #fff8f8;
  background-image: var(--wx-dog-topbar);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center bottom;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 顶栏已自带手绘底线，去掉通用分隔线避免双线 */
.app-wechat[data-theme="puppy"] .navbar::after { display: none; }

/* ---------- 3. 标签栏：手绘波浪线 + 粉白底 ---------- */
.app-wechat[data-theme="puppy"] .tabbar {
  background-color: #fff8f8;
  background-image: var(--wx-dog-tabbar);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  border-top-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- 4. 标签栏图标：小狗头像 ---------- */
/* 通用主题给 .tab-ico::before 画了圆角底板，本主题用真实小狗图，需清掉 */
.app-wechat[data-theme="puppy"] .tab-ico::before {
  content: none;
  background: none;
  box-shadow: none;
}
.app-wechat[data-theme="puppy"] .tab-ico {
  width: 40px; height: 34px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
/* 隐藏通用线性 SVG 图标，露出小狗图 */
.app-wechat[data-theme="puppy"] .tab-ico svg { display: none; }

/* 四个 tab 用不同的小狗头（与原包 tabbar_* 一一对应） */
.app-wechat[data-theme="puppy"] .tab-item[data-key="chats"] .tab-ico {
  background-image: var(--wx-dog-tab-chats);
}
.app-wechat[data-theme="puppy"] .tab-item[data-key="contacts"] .tab-ico {
  background-image: var(--wx-dog-tab-contacts);
}
.app-wechat[data-theme="puppy"] .tab-item[data-key="discover"] .tab-ico {
  background-image: var(--wx-dog-tab-discover);
}
.app-wechat[data-theme="puppy"] .tab-item[data-key="me"] .tab-ico {
  background-image: var(--wx-dog-tab-me);
}

/* 标签文字：原包未选中 #cccccc / 选中 #333333。
 * 注意 ui.tabbar 给选中项写了内联 style="color:…"（优先级高于本文件），
 * 所以选中态必须用 !important 才能压回原包的 #333333。 */
.app-wechat[data-theme="puppy"] .tabbar .tab-item { color: #a8a2a2; }
.app-wechat[data-theme="puppy"] .tabbar .tab-item.active { color: #333333 !important; }

/* ---------- 5. 搜索框：手绘圆角框 ---------- */
/* 原图 660x42 是「左端圆、右端方」的墨线框，用 border-image 横向拉伸 */
.app-wechat[data-theme="puppy"] .wx-searchfield {
  height: 30px;
  padding: 0 14px;
  background-color: #fff8f8;
  background-image: var(--wx-dog-search);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.app-wechat[data-theme="puppy"] .wx-searchfield input { color: #3a3434; }
.app-wechat[data-theme="puppy"] .wx-searchfield input::placeholder { color: #9b9595; }

/* ---------- 6. 气泡：手绘墨线框（border-image 九宫格） ---------- */
/* 原图 170x119@3x，实测：
 *   对方(them) 墨线框 x[19..146] y[19..106]，狗头在右上角 x[104..165] y[4..33]
 *   我方(me)   墨线框 x[20..152] y[17..107]，狗头在左上角 x[11..70] y[3..18]
 * 狗头必须完整落在「不拉伸的角区」内，故上/侧切片要开得足够大；
 * border-image-width 统一取 切片/3，还原 @3x 的 1:1 视觉尺寸。
 * 收起通用主题给的圆角/毛玻璃/阴影，换成真实墨线框。 */
.app-wechat[data-theme="puppy"] .wx-b-text,
.app-wechat[data-theme="puppy"] .wx-b-voice,
.app-wechat[data-theme="puppy"] .wx-b-loc,
.app-wechat[data-theme="puppy"] .wx-b-notice,
.app-wechat[data-theme="puppy"] .wx-b-card {
  border: 0 solid transparent;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #fff;
  border-image-repeat: stretch;
  border-image-outset: 0;
  border-image-slice: 34 66 12 24 fill;
  border-image-width: 11.33px 22px 4px 8px;
  padding: 9px 13px;
}
/* 对方气泡：狗头在右上 → 右切片 66（170-104），左切片 24 */
.app-wechat[data-theme="puppy"] .wx-msg.them .wx-b-text,
.app-wechat[data-theme="puppy"] .wx-msg.them .wx-b-voice {
  border-image-source: var(--wx-dog-bubble-them);
}
/* 我方气泡：狗头在左上 → 左切片 72（含狗头 x11..70），右切片 42（含右上爱心 x128..160） */
.app-wechat[data-theme="puppy"] .wx-msg.me .wx-b-text,
.app-wechat[data-theme="puppy"] .wx-msg.me .wx-b-voice {
  border-image-source: var(--wx-dog-bubble-me);
  border-image-slice: 34 42 12 72 fill;
  border-image-width: 11.33px 14px 4px 24px;
}
.app-wechat[data-theme="puppy"] .wx-b-loc,
.app-wechat[data-theme="puppy"] .wx-b-notice,
.app-wechat[data-theme="puppy"] .wx-b-card {
  border-image-source: var(--wx-dog-bubble-them);
}

/* 气泡尾巴：原主题没有小三角，改为墨线框自然收边 */
.app-wechat[data-theme="puppy"] .wx-msg.them .wx-b-text::before,
.app-wechat[data-theme="puppy"] .wx-msg.them .wx-b-voice::before,
.app-wechat[data-theme="puppy"] .wx-msg.me .wx-b-text::after,
.app-wechat[data-theme="puppy"] .wx-msg.me .wx-b-voice::after {
  content: none;
}

/* 气泡内文字 */
.app-wechat[data-theme="puppy"] .wx-msg.them .wx-b-text,
.app-wechat[data-theme="puppy"] .wx-msg.them .wx-b-voice,
.app-wechat[data-theme="puppy"] .wx-msg.me .wx-b-text,
.app-wechat[data-theme="puppy"] .wx-msg.me .wx-b-voice {
  color: #3a3434;
}

/* ---------- 7. 卡片 / 列表：半透明粉白，能看见涂鸦底 ---------- */
.app-wechat[data-theme="puppy"] .wx-chatlist,
.app-wechat[data-theme="puppy"] .wx-list,
.app-wechat[data-theme="puppy"] .wx-inputwrap {
  background: rgba(255, 252, 252, 0.74);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(58, 52, 52, .07);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
.app-wechat[data-theme="puppy"] .wx-inputwrap {
  border-radius: 0;
  border-top: 0;
}
.app-wechat[data-theme="puppy"] .wx-charow::after,
.app-wechat[data-theme="puppy"] .wx-list .row::after { background: rgba(58, 52, 52, .10); }

/* ---------- 8. 输入框 / 输入栏图标：墨线圆角框 ---------- */
.app-wechat[data-theme="puppy"] .wx-inbox textarea,
.app-wechat[data-theme="puppy"] .wx-voicebtn {
  background: #ffffff;
  border: 1.5px solid #3a3434;
  border-radius: 12px;
  color: #3a3434;
  box-shadow: none;
}
.app-wechat[data-theme="puppy"] .wx-inico {
  background: none;
  color: #3a3434;
  box-shadow: none;
  border-radius: 0;
}
.app-wechat[data-theme="puppy"] .wx-inico:active { opacity: .35; background: none; color: #3a3434; }
.app-wechat[data-theme="puppy"] .wx-sendbtn {
  background: #3a3434;
  color: #fff8f8;
  border-radius: 12px;
}

/* ---------- 9. 强调元素：粉调 ---------- */
.app-wechat[data-theme="puppy"] .wx-chip.on {
  background: rgba(217, 138, 150, .18);
  box-shadow: inset 0 0 0 1px #d98a96;
}
.app-wechat[data-theme="puppy"] .wx-avabadge { border-color: #fff8f8; }

/* "我"页头图：底色是内联 linear-gradient（按用户取色，优先级高），
 * 用粉色蒙层把它压回本主题的粉调，避免出现紫/蓝等跳色 */
.app-wechat[data-theme="puppy"] .wx-mehead {
  background-image: linear-gradient(rgba(255, 245, 246, .78), rgba(250, 226, 229, .82)) !important;
}

/* ---------- 10. 聊天页时间戳 / 系统消息：手绘风弱化 ---------- */
.app-wechat[data-theme="puppy"] .wx-time span,
.app-wechat[data-theme="puppy"] .wx-sys span {
  color: #9b9595;
  background: rgba(255, 252, 252, .8);
  border-radius: 8px;
  padding: 1px 7px;
}

/* ---------- 11. 深色模式下仍保持粉白涂鸦（该主题无深色版） ---------- */
html.dark .app-wechat[data-theme="puppy"] .wx-bg,
html.dark .app-wechat[data-theme="puppy"] .wx-msgs {
  background-color: #fff8f8;
  filter: none;
}