小手机使用手册

/* ===== 小手机 通用版 ===== 贴在全局 CSS 最后面 */
/* 色板：小手机 */
.zzph {
  --zzph-frame: #1c1c1e;
  --zzph-bg: #f2f2f5;
  --zzph-bar: #f8f8fa;
  --zzph-text: #1f1f24;
  --zzph-sub: #8a8a93;
  --zzph-line: #e2e2e8;
  --zzph-other: #ffffff;
  --zzph-me: #cfe4fa;
  --zzph-me-text: #16324f;
  --zzph-av: #b9c0cc;
  --zzph-av-me: #8fa8c8;
  --zzph-tf: #f0a04b;
  --zzph-tf-done: #f5c999;
  --zzph-dot: #e5484d;
  --zzph-accent: #4f6f9f;
  /* 聊天背景：none 表示不用图；换图就把 none 换成 url("图片链接") */
  --zzph-wall: none;
}
/* 外框 */
.zzph {
  width: 100%;
  max-width: 340px;
  margin: 8px auto;
  box-sizing: border-box;
  border: 8px solid var(--zzph-frame);
  border-radius: 36px;
  background: var(--zzph-bg);
  overflow: hidden;
  color: var(--zzph-text);
  font-family:
    -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei",
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
/* text-shadow: none：Rubii 默认样式「文字阴影」在手机上会给正文加阴影。
   头像首字虽然设成透明，阴影还在，会在头像图上留下一个淡淡的字；手机里的文字也会发虚 */
.zzph,
.zzph * {
  box-sizing: border-box;
  text-shadow: none;
}
.zzph svg {
  display: inline-block;
  vertical-align: middle;
}
.zzph .rubii-default-quote {
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
  color: inherit;
  font-weight: inherit;
}
/* 状态栏：App 不会按外框圆角裁切里面的内容，所以最上、最下两块自己带圆角（36px 外框 - 8px 边框 = 28px） */
.zzph-status {
  border-radius: 28px 28px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  padding: 0 18px;
  background: var(--zzph-bar);
  font-size: 12px;
  font-weight: 600;
}
/* 左右两块等宽，岛才能居中。右边三个图标共 55px，加上间距要 70px，宽度不能再小 */
.zzph-clock {
  width: 72px;
}
.zzph-island {
  width: 78px;
  height: 20px;
  border-radius: 999px;
  background: var(--zzph-frame);
}
.zzph-sig {
  width: 72px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* flex-shrink: 0：放不下时也不许把图标压扁（App 会压，网页端不会） */
.zzph-sig svg {
  flex-shrink: 0;
  margin-left: 5px;
}
/* 顶栏 */
.zzph-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  padding: 0 10px;
  background: var(--zzph-bar);
  border-bottom: 1px solid var(--zzph-line);
}
.zzph-head-side {
  width: 40px;
  display: flex;
  align-items: center;
}
.zzph-head-side.is-r {
  justify-content: flex-end;
}
.zzph-head-mid {
  width: 64%;
  text-align: center;
}
.zzph-title {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zzph-subtitle {
  font-size: 10px;
  line-height: 1.2;
  color: var(--zzph-sub);
}
/* 聊天区：App 正文不支持内部滚动，所以默认不限高度，手机随消息变长；网页端的固定高度写在下面 @supports 里 */
.zzph-body {
  background-image: var(--zzph-wall);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 12px 10px 6px;
  scrollbar-width: none;
}
.zzph-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.zzph-time {
  margin: 4px 0 10px;
  text-align: center;
}
.zzph-time span {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  color: var(--zzph-sub);
}
.zzph-tip {
  text-align: center;
  margin: 4px 0 10px;
}
.zzph-tip span {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  color: var(--zzph-sub);
}
/* 消息行：zzph-l 对方 / zzph-r 自己 */
.zzph-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  animation: zzph-in 0.35s ease-out both;
}
.zzph-l {
  justify-content: flex-start;
}
.zzph-r {
  justify-content: flex-end;
}
@keyframes zzph-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.zzph-av {
  display: block;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 6px;
  background-color: var(--zzph-av);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 36px;
  text-align: center;
  overflow: hidden;
  object-fit: cover;
}
.zzph-l .zzph-av {
  margin-right: 8px;
}
.zzph-r .zzph-av {
  margin-left: 8px;
  background-color: var(--zzph-av-me);
}
.zzph-col {
  max-width: 72%;
}
.zzph-r .zzph-col {
  text-align: right;
}
/* 左侧发言人名字：默认不显示，群聊时由【群聊】那一行打开 */
.zzph-name {
  display: none;
  font-size: 11px;
  line-height: 1.2;
  color: var(--zzph-sub);
  margin: 0 0 3px 2px;
}
/* 1 文字 */
.zzph-bub {
  display: inline-block;
  text-align: left;
  padding: 8px 11px;
  border-radius: 4px 10px 10px 10px;
  background: var(--zzph-other);
  color: var(--zzph-text);
  word-break: break-word;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.zzph-r .zzph-bub {
  border-radius: 10px 4px 10px 10px;
  background: var(--zzph-me);
  color: var(--zzph-me-text);
}
/* 2 语音（点开转文字） */
.zzph-voice {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.zzph-voice summary {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-weight: normal;
  cursor: pointer;
}
.zzph-voice summary::-webkit-details-marker {
  display: none;
}
.zzph-voice summary::marker {
  content: "";
}
/* 语音条和红点并排；App 正文里图标和秒数要用 flex 才排得成一行 */
.zzph-vwrap {
  display: flex;
  align-items: flex-start;
}
.zzph-r .zzph-vwrap {
  justify-content: flex-end;
}
.zzph-voice .zzph-bub {
  display: flex;
  align-items: center;
  width: 78px;
}
.zzph-voice.is-m .zzph-bub {
  width: 120px;
}
.zzph-voice.is-l .zzph-bub {
  width: 170px;
}
.zzph-r .zzph-voice .zzph-bub {
  justify-content: flex-end;
}
.zzph-l .zzph-vic-r,
.zzph-r .zzph-vic-l,
.zzph-r .zzph-dot {
  display: none;
}
.zzph-voice-txt:empty {
  display: none;
}
.zzph-r .zzph-voice .zzph-bub svg {
  transform: rotate(180deg);
}
.zzph-sec {
  margin: 0 6px;
  font-size: 13px;
}
.zzph-voice-txt {
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  color: var(--zzph-text);
  text-align: left;
}
.zzph-dot {
  display: inline-block;
  vertical-align: top;
  width: 7px;
  height: 7px;
  margin: 15px 0 0 6px;
  border-radius: 999px;
  background: var(--zzph-dot);
}
.zzph-voice[open] + .zzph-dot {
  display: none;
}
/* 3 表情包：图片版 / 文字版 */
.zzph-stk {
  display: inline-block;
  width: 110px;
  height: auto;
  border-radius: 6px;
}
.zzph-stk-txt {
  width: 100px;
  height: 100px;
  padding-top: 20px;
  border: 1px dashed #c9ccd4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--zzph-sub);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}
.zzph-stk-txt div {
  margin-top: 6px;
  padding: 0 6px;
}
/* 3b 表情包：序号版（【表情3】→ 正则换成 <span class="zzph-sk zzph-sk-3"></span>，图在文件末尾的对照表里） */
.zzph-sk {
  display: inline-block;
  width: 110px;
  height: 110px;
  border-radius: 6px;
  background-color: #e4e7ee;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: top;
}
/* 4 图片：图片版 / 文字描述版 */
.zzph-img {
  display: inline-block;
  width: 160px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.zzph-pic {
  display: inline-block;
  width: 160px;
  min-height: 118px;
  padding: 22px 12px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e4e7ee, #c9d0dc);
  color: #5d6675;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.zzph-pic-txt {
  margin-top: 6px;
}
/* 5 转账 */
.zzph-tf {
  display: inline-block;
  width: 210px;
  text-align: left;
  border-radius: 8px;
  background: var(--zzph-tf);
  color: #fff;
  overflow: hidden;
}
.zzph-tf.is-done {
  background: var(--zzph-tf-done);
}
.zzph-tf-main {
  display: flex;
  align-items: center;
  padding: 12px 12px 10px;
}
.zzph-tf-ic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  margin-right: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
}
.zzph-tf-info {
  width: 140px;
}
.zzph-tf-amt {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.zzph-tf-note {
  font-size: 11px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zzph-tf-foot {
  padding: 4px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 10px;
  opacity: 0.9;
}
/* 6 转发的聊天记录（点开看全部） */
.zzph-fw {
  display: inline-block;
  width: 220px;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--zzph-other);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  text-align: left;
  overflow: hidden;
  color: var(--zzph-text);
}
.zzph-fw summary {
  display: block;
  list-style: none;
  margin: 0;
  padding: 10px 12px 0;
  border: none;
  background: none;
  color: inherit;
  font-weight: normal;
  cursor: pointer;
}
.zzph-fw summary::-webkit-details-marker {
  display: none;
}
.zzph-fw summary::marker {
  content: "";
}
.zzph-fw-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.zzph-fw-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--zzph-sub);
}
.zzph-fw-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 5px 0 6px;
  border-top: 1px solid var(--zzph-line);
  font-size: 11px;
  color: var(--zzph-sub);
}
.zzph-fw[open] .zzph-fw-arrow {
  transform: rotate(180deg);
}
.zzph-fw-list {
  padding: 0 12px 6px;
  border-top: 1px solid var(--zzph-line);
}
.zzph-fw-item {
  padding: 7px 0;
  border-bottom: 1px dashed var(--zzph-line);
  font-size: 12px;
  line-height: 1.5;
}
.zzph-fw-item:last-child {
  border-bottom: none;
}
.zzph-fw-who {
  display: block;
  font-size: 11px;
  color: var(--zzph-sub);
}
/* 7 分享链接（推文 / 文章）：有链接用 <a>，没有就用 <div> */
.zzph-link {
  display: inline-block;
  width: 230px;
  vertical-align: top;
  padding: 10px 12px 0;
  border-radius: 8px;
  background: var(--zzph-other);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  text-align: left;
  overflow: hidden;
}
.zzph .zzph-link {
  color: var(--zzph-text);
  text-decoration: none;
}
.zzph-link-title {
  max-height: 2.8em;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.zzph-link-body {
  display: flex;
  align-items: flex-start;
  margin-top: 6px;
}
.zzph-link-desc {
  width: 148px;
  max-height: 4.5em;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.5;
  color: var(--zzph-sub);
}
.zzph-link-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  margin-left: 10px;
  border-radius: 4px;
  background: #e4e7ee;
  color: #8f98a8;
  object-fit: cover;
}
.zzph-link-foot {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding: 5px 0 6px;
  border-top: 1px solid var(--zzph-line);
  font-size: 11px;
  color: var(--zzph-sub);
}
.zzph-link-foot svg {
  margin-right: 4px;
}
/* 8 撤回：点开可看原文 */
.zzph-recall .zzph-tip-act {
  margin-left: 4px;
  padding: 0;
  background: none;
  color: var(--zzph-accent);
}
.zzph-recall {
  display: block;
  margin: 4px 0 10px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
.zzph-recall summary {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 2px 8px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--zzph-sub);
  font-size: 11px;
  font-weight: normal;
  cursor: pointer;
}
.zzph-recall summary::-webkit-details-marker {
  display: none;
}
.zzph-recall summary::marker {
  content: "";
}
.zzph-recall-txt {
  display: inline-block;
  max-width: 80%;
  margin-top: 5px;
  padding: 6px 10px;
  border: 1px dashed #c9ccd4;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--zzph-sub);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
.zzph-recall-tag {
  margin-right: 4px;
  color: var(--zzph-dot);
}
/* 9 引用回复：挂在气泡下面 */
.zzph-quote {
  margin-top: 4px;
}
.zzph-quote span {
  display: inline-block;
  max-width: 100%;
  max-height: 2.8em;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--zzph-sub);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}
/* 10 通话记录：is-miss 未接 / 取消 */
.zzph-call {
  display: flex;
  align-items: center;
}
.zzph-call svg {
  margin: 0 6px 0 0;
}
.zzph-call-语音 .zzph-ic-video,
.zzph-call-视频 .zzph-ic-phone {
  display: none;
}
.zzph-call.is-miss {
  color: var(--zzph-dot);
}
/* 11 发送失败：感叹号放在气泡朝里的一侧（右侧消息在气泡左边，左侧消息在气泡右边） */
.zzph-fail {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 9px 6px 0 0;
  color: var(--zzph-dot);
}
.zzph-l .zzph-fail {
  margin: 9px 0 0 6px;
}
.zzph-fail svg {
  display: block;
}
/* 输入栏 */
.zzph-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--zzph-bar);
  border-top: 1px solid var(--zzph-line);
  color: #4a4a52;
}
.zzph-field {
  width: 62%;
  height: 32px;
  border-radius: 6px;
  background: #fff;
}
/* 12 表情面板：整条输入栏是 summary，点开在下方展开 */
.zzph-kb {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--zzph-bar);
  box-shadow: none;
}
.zzph-kb > summary {
  list-style: none;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}
.zzph-kb > summary::-webkit-details-marker {
  display: none;
}
.zzph-kb > summary::marker {
  content: "";
}
.zzph-kb[open] .zzph-kb-emo {
  color: var(--zzph-accent);
}
.zzph-emo {
  padding: 8px 8px 2px;
  border-top: 1px solid var(--zzph-line);
}
.zzph-emo-head {
  padding: 0 4px 6px;
  font-size: 11px;
  color: var(--zzph-sub);
}
/* 表情格子：App 上全部摊开；网页端限高两行半、在面板里滚动，写在下面 @supports 里 */
.zzph-emo-grid {
  font-size: 0;
  scrollbar-width: none;
}
.zzph-emo-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.zzph-emo-item {
  display: inline-block;
  width: 25%;
  padding: 4px;
  vertical-align: top;
  text-align: center;
}
.zzph-emo-item .zzph-sk {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto;
}
.zzph-emo-no {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--zzph-sub);
}
/* 只给网页端：聊天区固定高度、在手机里滚动；面板打开时缩短聊天区，手机总高度不变（App 会忽略这一整段） */
@supports (display: block) {
  .zzph-body {
    max-height: 460px;
    overflow-y: auto;
  }
  .zzph-emo-grid {
    max-height: 168px;
    overflow-y: auto;
  }
  .zzph:has(.zzph-kb[open]) .zzph-body {
    max-height: 260px;
  }
}
.zzph-home {
  border-radius: 0 0 28px 28px;
  padding: 4px 0 8px;
  background: var(--zzph-bar);
}
.zzph-home div {
  width: 110px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--zzph-frame);
}

/* ===== 头像对照表：卡里自带角色的默认头像。照下面的格式一人一行，名字要和 AI 输出里的完全一样，如果一个人ai生成那个的名字可能不同（例如外国char）就把所有可能的名字都写一遍 ===== */
.zzph-av.av-char {
  background-image: url("https://photos.251125.xyz/avatar/IMG_2801.jpeg");
  color: transparent;
}
.zzph-av.av-我 {
  background-image: url("https://photos.251125.xyz/avatar/default.png");
  color: transparent;
}

/* ===== 表情对照表：加表情就在这里加一行，序号接着往下排 ===== */
/* 注意：App 上，文件名以数字开头的图片不显示。把文件名的第一个数字换成「%3+这个数字」就行，比如 /177.png 写成 /%3177.png（1 写成 %31，2 写成 %32……），还是同一张图 */
/* 面板里显示几个表情：把 23 改成「表情总数 + 1」。现在有 22 个表情，所以是 23 */
.zzph-emo-grid .zzph-emo-item:nth-child(n + 23) {
  display: none;
}
.zzph-sk-1 {
  background-image: url("https://photos.251125.xyz/emoji/emoji1.jpeg");
}
.zzph-sk-2 {
  background-image: url("https://photos.251125.xyz/emoji/emoji2.png");
}
.zzph-sk-3 {
  background-image: url("https://photos.251125.xyz/emoji/emoji3.png");
}
.zzph-sk-4 {
  background-image: url("https://photos.251125.xyz/emoji/emoji4.png");
}
.zzph-sk-5 {
  background-image: url("https://photos.251125.xyz/emoji/emoji5.jpeg");
}
.zzph-sk-6 {
  background-image: url("https://photos.251125.xyz/emoji/emoji6.jpeg");
}
.zzph-sk-7 {
  background-image: url("https://photos.251125.xyz/emoji/emoji7.jpeg");
}
.zzph-sk-8 {
  background-image: url("https://photos.251125.xyz/emoji/emoji8.jpeg");
}
.zzph-sk-9 {
  background-image: url("https://photos.251125.xyz/emoji/emoji9.png");
}
.zzph-sk-10 {
  background-image: url("https://photos.251125.xyz/emoji/emoji10.png");
}
.zzph-sk-11 {
  background-image: url("https://photos.251125.xyz/emoji/emoji11.png");
}
.zzph-sk-12 {
  background-image: url("https://photos.251125.xyz/emoji/emoji12.png");
}
.zzph-sk-13 {
  background-image: url("https://photos.251125.xyz/emoji/emoji13.png");
}
.zzph-sk-14 {
  background-image: url("https://photos.251125.xyz/emoji/emoji14.jpeg");
}
.zzph-sk-15 {
  background-image: url("https://photos.251125.xyz/emoji/emoji15.jpeg");
}
.zzph-sk-16 {
  background-image: url("https://photos.251125.xyz/emoji/emoji16.jpeg");
}
.zzph-sk-17 {
  background-image: url("https://photos.251125.xyz/emoji/emoji17.gif");
}
.zzph-sk-18 {
  background-image: url("https://photos.251125.xyz/emoji/emoji18.jpeg");
}
.zzph-sk-19 {
  background-image: url("https://photos.251125.xyz/emoji/emoji19.png");
}
.zzph-sk-20 {
  background-image: url("https://photos.251125.xyz/emoji/emoji20.gif");
}
.zzph-sk-21 {
  background-image: url("https://photos.251125.xyz/emoji/emoji21.jpg");
}
.zzph-sk-22 {
  background-image: url("https://photos.251125.xyz/emoji/emoji22.jpg");
}

/* ===== 小手机 玫瑰版 ===== 贴在全局 CSS 最后面 */
/* 色板：玫瑰（配红玫瑰 + 奶油底 + 暖金光的背景图） */
.zzph {
  --zzph-frame: #5a1a22; /* 外框：酒红 */
  --zzph-bg: #f6ece2; /* 没有背景图时的聊天底色：奶油 */
  --zzph-bar: #fbf4ec; /* 状态栏、顶栏、输入栏：象牙白 */
  --zzph-text: #3b2323;
  --zzph-sub: #a3837a;
  --zzph-line: #ecdccf;
  --zzph-other: #fffaf5; /* 对方气泡：暖白 */
  --zzph-me: #9e2a36; /* 我的气泡：玫瑰红 */
  --zzph-me-text: #fff4ea;
  --zzph-av: #d8bcae;
  --zzph-av-me: #b9838b;
  --zzph-tf: #c4925a; /* 转账：香槟金 */
  --zzph-tf-done: #e2c8a4;
  --zzph-dot: #c42a3b;
  --zzph-accent: #a8323f;
  /* 聊天背景：把「背景图链接」换成图片地址。前面那层半透明奶油色是为了让字看得清，数字越大越淡 */
  --zzph-wall:
    linear-gradient(rgba(251, 244, 236, 0.1), rgba(251, 244, 236, 0.1)),
    url("https://photos.251125.xyz/bg/Red%20Roses%20%26%20White%20Butterflies.jpeg");
}
/* 外框 */
.zzph {
  width: 100%;
  max-width: 340px;
  margin: 8px auto;
  box-sizing: border-box;
  border: 8px solid var(--zzph-frame);
  border-radius: 36px;
  background: var(--zzph-bg);
  overflow: hidden;
  color: var(--zzph-text);
  font-family:
    -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei",
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 10px 30px rgba(90, 26, 34, 0.28);
}
/* text-shadow: none：Rubii 默认样式「文字阴影」在手机上会给正文加阴影。
   头像首字虽然设成透明，阴影还在，会在头像图上留下一个淡淡的字；手机里的文字也会发虚 */
.zzph,
.zzph * {
  box-sizing: border-box;
  text-shadow: none;
}
.zzph svg {
  display: inline-block;
  vertical-align: middle;
}
.zzph .rubii-default-quote {
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
  color: inherit;
  font-weight: inherit;
}
/* 状态栏：App 不会按外框圆角裁切里面的内容，所以最上、最下两块自己带圆角（36px 外框 - 8px 边框 = 28px） */
.zzph-status {
  border-radius: 28px 28px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  padding: 0 18px;
  background: var(--zzph-bar);
  font-size: 12px;
  font-weight: 600;
}
/* 左右两块等宽，岛才能居中。右边三个图标共 55px，加上间距要 70px，宽度不能再小 */
.zzph-clock {
  width: 72px;
}
.zzph-island {
  width: 78px;
  height: 20px;
  border-radius: 999px;
  background: var(--zzph-frame);
}
.zzph-sig {
  width: 72px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* flex-shrink: 0：放不下时也不许把图标压扁（App 会压，网页端不会） */
.zzph-sig svg {
  flex-shrink: 0;
  margin-left: 5px;
}
/* 顶栏 */
.zzph-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  padding: 0 10px;
  background: var(--zzph-bar);
  border-bottom: 1px solid var(--zzph-line);
}
.zzph-head-side {
  width: 40px;
  display: flex;
  align-items: center;
}
.zzph-head-side.is-r {
  justify-content: flex-end;
}
.zzph-head-mid {
  width: 64%;
  text-align: center;
}
.zzph-title {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zzph-subtitle {
  font-size: 10px;
  line-height: 1.2;
  color: var(--zzph-sub);
}
/* 聊天区：App 正文不支持内部滚动，所以默认不限高度，手机随消息变长；网页端的固定高度写在下面 @supports 里 */
.zzph-body {
  background-image: var(--zzph-wall);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 12px 10px 6px;
  scrollbar-width: none;
}
.zzph-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.zzph-time {
  margin: 4px 0 10px;
  text-align: center;
}
.zzph-time span {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(251, 244, 236, 0.82);
  font-size: 11px;
  color: var(--zzph-sub);
}
.zzph-tip {
  text-align: center;
  margin: 4px 0 10px;
}
.zzph-tip span {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(251, 244, 236, 0.82);
  font-size: 11px;
  color: var(--zzph-sub);
}
/* 消息行：zzph-l 对方 / zzph-r 自己 */
.zzph-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  animation: zzph-in 0.35s ease-out both;
}
.zzph-l {
  justify-content: flex-start;
}
.zzph-r {
  justify-content: flex-end;
}
@keyframes zzph-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.zzph-av {
  display: block;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 6px;
  background-color: var(--zzph-av);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 36px;
  text-align: center;
  overflow: hidden;
  object-fit: cover;
}
.zzph-l .zzph-av {
  margin-right: 8px;
}
.zzph-r .zzph-av {
  margin-left: 8px;
  background-color: var(--zzph-av-me);
}
.zzph-col {
  max-width: 72%;
}
.zzph-r .zzph-col {
  text-align: right;
}
/* 左侧发言人名字：默认不显示，群聊时由【群聊】那一行打开 */
.zzph-name {
  display: none;
  font-size: 11px;
  line-height: 1.2;
  color: var(--zzph-sub);
  margin: 0 0 3px 2px;
}
/* 1 文字 */
.zzph-bub {
  display: inline-block;
  text-align: left;
  padding: 8px 11px;
  border-radius: 4px 10px 10px 10px;
  background: var(--zzph-other);
  color: var(--zzph-text);
  word-break: break-word;
  box-shadow: 0 1px 1px rgba(110, 40, 40, 0.08);
}
.zzph-r .zzph-bub {
  border-radius: 10px 4px 10px 10px;
  background: var(--zzph-me);
  color: var(--zzph-me-text);
}
/* 2 语音（点开转文字） */
.zzph-voice {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.zzph-voice summary {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-weight: normal;
  cursor: pointer;
}
.zzph-voice summary::-webkit-details-marker {
  display: none;
}
.zzph-voice summary::marker {
  content: "";
}
/* 语音条和红点并排；App 正文里图标和秒数要用 flex 才排得成一行 */
.zzph-vwrap {
  display: flex;
  align-items: flex-start;
}
.zzph-r .zzph-vwrap {
  justify-content: flex-end;
}
.zzph-voice .zzph-bub {
  display: flex;
  align-items: center;
  width: 78px;
}
.zzph-voice.is-m .zzph-bub {
  width: 120px;
}
.zzph-voice.is-l .zzph-bub {
  width: 170px;
}
.zzph-r .zzph-voice .zzph-bub {
  justify-content: flex-end;
}
.zzph-l .zzph-vic-r,
.zzph-r .zzph-vic-l,
.zzph-r .zzph-dot {
  display: none;
}
.zzph-voice-txt:empty {
  display: none;
}
.zzph-r .zzph-voice .zzph-bub svg {
  transform: rotate(180deg);
}
.zzph-sec {
  margin: 0 6px;
  font-size: 13px;
}
.zzph-voice-txt {
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(251, 244, 236, 0.85);
  font-size: 13px;
  color: var(--zzph-text);
  text-align: left;
}
.zzph-dot {
  display: inline-block;
  vertical-align: top;
  width: 7px;
  height: 7px;
  margin: 15px 0 0 6px;
  border-radius: 999px;
  background: var(--zzph-dot);
}
.zzph-voice[open] + .zzph-dot {
  display: none;
}
/* 3 表情包：图片版 / 文字版 */
.zzph-stk {
  display: inline-block;
  width: 110px;
  height: auto;
  border-radius: 6px;
}
.zzph-stk-txt {
  width: 100px;
  height: 100px;
  padding-top: 20px;
  border: 1px dashed #dcc3b4;
  border-radius: 12px;
  background: rgba(255, 250, 245, 0.88);
  color: var(--zzph-sub);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}
.zzph-stk-txt div {
  margin-top: 6px;
  padding: 0 6px;
}
/* 3b 表情包：序号版（【表情3】→ 正则换成 <span class="zzph-sk zzph-sk-3"></span>，图在文件末尾的对照表里） */
.zzph-sk {
  display: inline-block;
  width: 110px;
  height: 110px;
  border-radius: 6px;
  background-color: #efe2d6;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: top;
}
/* 4 图片：图片版 / 文字描述版 */
.zzph-img {
  display: inline-block;
  width: 160px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.zzph-pic {
  display: inline-block;
  width: 160px;
  min-height: 118px;
  padding: 22px 12px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f3e6da, #e2cbbb);
  color: #8a5a52;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.zzph-pic-txt {
  margin-top: 6px;
}
/* 5 转账 */
.zzph-tf {
  display: inline-block;
  width: 210px;
  text-align: left;
  border-radius: 8px;
  background: var(--zzph-tf);
  color: #fff;
  overflow: hidden;
}
.zzph-tf.is-done {
  background: var(--zzph-tf-done);
}
.zzph-tf-main {
  display: flex;
  align-items: center;
  padding: 12px 12px 10px;
}
.zzph-tf-ic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  margin-right: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
}
.zzph-tf-info {
  width: 140px;
}
.zzph-tf-amt {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.zzph-tf-note {
  font-size: 11px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zzph-tf-foot {
  padding: 4px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 10px;
  opacity: 0.9;
}
/* 6 转发的聊天记录（点开看全部） */
.zzph-fw {
  display: inline-block;
  width: 220px;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--zzph-other);
  box-shadow: 0 1px 1px rgba(110, 40, 40, 0.08);
  text-align: left;
  overflow: hidden;
  color: var(--zzph-text);
}
.zzph-fw summary {
  display: block;
  list-style: none;
  margin: 0;
  padding: 10px 12px 0;
  border: none;
  background: none;
  color: inherit;
  font-weight: normal;
  cursor: pointer;
}
.zzph-fw summary::-webkit-details-marker {
  display: none;
}
.zzph-fw summary::marker {
  content: "";
}
.zzph-fw-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.zzph-fw-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--zzph-sub);
}
.zzph-fw-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 5px 0 6px;
  border-top: 1px solid var(--zzph-line);
  font-size: 11px;
  color: var(--zzph-sub);
}
.zzph-fw[open] .zzph-fw-arrow {
  transform: rotate(180deg);
}
.zzph-fw-list {
  padding: 0 12px 6px;
  border-top: 1px solid var(--zzph-line);
}
.zzph-fw-item {
  padding: 7px 0;
  border-bottom: 1px dashed var(--zzph-line);
  font-size: 12px;
  line-height: 1.5;
}
.zzph-fw-item:last-child {
  border-bottom: none;
}
.zzph-fw-who {
  display: block;
  font-size: 11px;
  color: var(--zzph-sub);
}
/* 7 分享链接（推文 / 文章）：有链接用 <a>，没有就用 <div> */
.zzph-link {
  display: inline-block;
  width: 230px;
  vertical-align: top;
  padding: 10px 12px 0;
  border-radius: 8px;
  background: var(--zzph-other);
  box-shadow: 0 1px 1px rgba(110, 40, 40, 0.08);
  text-align: left;
  overflow: hidden;
}
.zzph .zzph-link {
  color: var(--zzph-text);
  text-decoration: none;
}
.zzph-link-title {
  max-height: 2.8em;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.zzph-link-body {
  display: flex;
  align-items: flex-start;
  margin-top: 6px;
}
.zzph-link-desc {
  width: 148px;
  max-height: 4.5em;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.5;
  color: var(--zzph-sub);
}
.zzph-link-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  margin-left: 10px;
  border-radius: 4px;
  background: #efe2d6;
  color: #b08f82;
  object-fit: cover;
}
.zzph-link-foot {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding: 5px 0 6px;
  border-top: 1px solid var(--zzph-line);
  font-size: 11px;
  color: var(--zzph-sub);
}
.zzph-link-foot svg {
  margin-right: 4px;
}
/* 8 撤回：点开可看原文 */
.zzph-recall .zzph-tip-act {
  margin-left: 4px;
  padding: 0;
  background: none;
  color: var(--zzph-accent);
}
.zzph-recall {
  display: block;
  margin: 4px 0 10px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
.zzph-recall summary {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 2px 8px;
  border: none;
  border-radius: 4px;
  background: rgba(251, 244, 236, 0.82);
  color: var(--zzph-sub);
  font-size: 11px;
  font-weight: normal;
  cursor: pointer;
}
.zzph-recall summary::-webkit-details-marker {
  display: none;
}
.zzph-recall summary::marker {
  content: "";
}
.zzph-recall-txt {
  display: inline-block;
  max-width: 80%;
  margin-top: 5px;
  padding: 6px 10px;
  border: 1px dashed #dcc3b4;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--zzph-sub);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
.zzph-recall-tag {
  margin-right: 4px;
  color: var(--zzph-dot);
}
/* 9 引用回复：挂在气泡下面 */
.zzph-quote {
  margin-top: 4px;
}
.zzph-quote span {
  display: inline-block;
  max-width: 100%;
  max-height: 2.8em;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(251, 244, 236, 0.82);
  color: var(--zzph-sub);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}
/* 10 通话记录：is-miss 未接 / 取消 */
.zzph-call {
  display: flex;
  align-items: center;
}
.zzph-call svg {
  margin: 0 6px 0 0;
}
.zzph-call-语音 .zzph-ic-video,
.zzph-call-视频 .zzph-ic-phone {
  display: none;
}
.zzph-call.is-miss {
  color: var(--zzph-dot);
}
/* 玫瑰版：我的气泡本身是红色，未接来电的红字会看不见，改用浅色 */
.zzph-r .zzph-call.is-miss {
  color: #ffd9cf;
}
/* 11 发送失败：感叹号放在气泡朝里的一侧（右侧消息在气泡左边，左侧消息在气泡右边） */
.zzph-fail {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 9px 6px 0 0;
  color: var(--zzph-dot);
}
.zzph-l .zzph-fail {
  margin: 9px 0 0 6px;
}
.zzph-fail svg {
  display: block;
}
/* 输入栏 */
.zzph-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--zzph-bar);
  border-top: 1px solid var(--zzph-line);
  color: #6b3a3a;
}
.zzph-field {
  width: 62%;
  height: 32px;
  border-radius: 6px;
  background: #fffaf5;
}
/* 12 表情面板：整条输入栏是 summary，点开在下方展开 */
.zzph-kb {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--zzph-bar);
  box-shadow: none;
}
.zzph-kb > summary {
  list-style: none;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}
.zzph-kb > summary::-webkit-details-marker {
  display: none;
}
.zzph-kb > summary::marker {
  content: "";
}
.zzph-kb[open] .zzph-kb-emo {
  color: var(--zzph-accent);
}
.zzph-emo {
  padding: 8px 8px 2px;
  border-top: 1px solid var(--zzph-line);
}
.zzph-emo-head {
  padding: 0 4px 6px;
  font-size: 11px;
  color: var(--zzph-sub);
}
/* 表情格子：App 上全部摊开；网页端限高两行半、在面板里滚动，写在下面 @supports 里 */
.zzph-emo-grid {
  font-size: 0;
  scrollbar-width: none;
}
.zzph-emo-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.zzph-emo-item {
  display: inline-block;
  width: 25%;
  padding: 4px;
  vertical-align: top;
  text-align: center;
}
.zzph-emo-item .zzph-sk {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto;
}
.zzph-emo-no {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--zzph-sub);
}
/* 只给网页端：聊天区固定高度、在手机里滚动；面板打开时缩短聊天区，手机总高度不变（App 会忽略这一整段） */
@supports (display: block) {
  .zzph-body {
    max-height: 460px;
    overflow-y: auto;
  }
  .zzph-emo-grid {
    max-height: 168px;
    overflow-y: auto;
  }
  .zzph:has(.zzph-kb[open]) .zzph-body {
    max-height: 260px;
  }
}
.zzph-home {
  border-radius: 0 0 28px 28px;
  padding: 4px 0 8px;
  background: var(--zzph-bar);
}
.zzph-home div {
  width: 110px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--zzph-frame);
}

/* ===== 头像对照表：卡里自带角色的默认头像。照下面的格式一人一行，名字要和 AI 输出里的完全一样，如果一个人ai生成那个的名字可能不同（例如外国char）就把所有可能的名字都写一遍 ===== */
.zzph-av.av-char {
  background-image: url("https://photos.251125.xyz/avatar/IMG_2801.jpeg");
  color: transparent;
}
.zzph-av.av-我 {
  background-image: url("https://photos.251125.xyz/avatar/default.png");
  color: transparent;
}

/* ===== 表情对照表：加表情就在这里加一行，序号接着往下排 ===== */
/* 注意：App 上，文件名以数字开头的图片不显示。把文件名的第一个数字换成「%3+这个数字」就行，比如 /177.png 写成 /%3177.png（1 写成 %31，2 写成 %32……），还是同一张图 */
/* 面板里显示几个表情：把 23 改成「表情总数 + 1」。现在有 22 个表情，所以是 23 */
.zzph-emo-grid .zzph-emo-item:nth-child(n + 23) {
  display: none;
}
.zzph-sk-1 {
  background-image: url("https://photos.251125.xyz/emoji/emoji1.jpeg");
}
.zzph-sk-2 {
  background-image: url("https://photos.251125.xyz/emoji/emoji2.png");
}
.zzph-sk-3 {
  background-image: url("https://photos.251125.xyz/emoji/emoji3.png");
}
.zzph-sk-4 {
  background-image: url("https://photos.251125.xyz/emoji/emoji4.png");
}
.zzph-sk-5 {
  background-image: url("https://photos.251125.xyz/emoji/emoji5.jpeg");
}
.zzph-sk-6 {
  background-image: url("https://photos.251125.xyz/emoji/emoji6.jpeg");
}
.zzph-sk-7 {
  background-image: url("https://photos.251125.xyz/emoji/emoji7.jpeg");
}
.zzph-sk-8 {
  background-image: url("https://photos.251125.xyz/emoji/emoji8.jpeg");
}
.zzph-sk-9 {
  background-image: url("https://photos.251125.xyz/emoji/emoji9.png");
}
.zzph-sk-10 {
  background-image: url("https://photos.251125.xyz/emoji/emoji10.png");
}
.zzph-sk-11 {
  background-image: url("https://photos.251125.xyz/emoji/emoji11.png");
}
.zzph-sk-12 {
  background-image: url("https://photos.251125.xyz/emoji/emoji12.png");
}
.zzph-sk-13 {
  background-image: url("https://photos.251125.xyz/emoji/emoji13.png");
}
.zzph-sk-14 {
  background-image: url("https://photos.251125.xyz/emoji/emoji14.jpeg");
}
.zzph-sk-15 {
  background-image: url("https://photos.251125.xyz/emoji/emoji15.jpeg");
}
.zzph-sk-16 {
  background-image: url("https://photos.251125.xyz/emoji/emoji16.jpeg");
}
.zzph-sk-17 {
  background-image: url("https://photos.251125.xyz/emoji/emoji17.gif");
}
.zzph-sk-18 {
  background-image: url("https://photos.251125.xyz/emoji/emoji18.jpeg");
}
.zzph-sk-19 {
  background-image: url("https://photos.251125.xyz/emoji/emoji19.png");
}
.zzph-sk-20 {
  background-image: url("https://photos.251125.xyz/emoji/emoji20.gif");
}
.zzph-sk-21 {
  background-image: url("https://photos.251125.xyz/emoji/emoji21.jpg");
}
.zzph-sk-22 {
  background-image: url("https://photos.251125.xyz/emoji/emoji22.jpg");
}