/**
 * 角色手机 · 应用统一样式（2026-09-12）
 * 覆盖 phone.css / phonecheck.css 里的旧 App 样式
 *
 * 语言（跟相册/微信一套）：
 *   浅灰底 + 大标题头 + 白卡列表 + 圆角 + 深蓝黑字 + 无彩色渲染
 * 作用域：.pc-app-view（角色手机的 App 容器）
 */

.pc-app-view {
  --pa-ink:   #17171A;
  --pa-ink2:  #6E6E76;
  --pa-ink3:  #A6A6AE;
  --pa-bg:    #F4F4F6;
  --pa-card:  #FFFFFF;
  --pa-line:  rgba(0,0,0,.07);
  --pa-soft:  rgba(0,0,0,.05);
  --pa-accent:#1A1A1A;
  --pa-serif: 'Songti SC','STSong','Noto Serif SC',Georgia,serif;
  --pa-latin: 'Didot','Bodoni MT','Times New Roman',Georgia,serif;
}

html.dark-mode .pc-app-view {
  --pa-ink:   #F2F2F4;
  --pa-ink2:  #9A9AA2;
  --pa-ink3:  #6A6A72;
  --pa-bg:    #17171A;
  --pa-card:  #232327;
  --pa-line:  rgba(255,255,255,.09);
  --pa-soft:  rgba(255,255,255,.07);
  --pa-accent:#F2F2F4;
}

/* ═══════════════ 外壳：大标题头 ═══════════════ */

.pc-app-view .pc-app-page,
.pc-app-view .pc-app-view { background: var(--pa-bg) !important; }

.pc-app-view .pc-app-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px 12px !important;
  background: var(--pa-bg) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.pc-app-view .pc-app-title {
  flex: 1;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--pa-ink) !important;
  letter-spacing: .02em;
  text-align: left !important;
}
.pc-app-view .pc-app-back,
.pc-app-view .pc-app-refresh {
  width: 34px; height: 34px;
  border-radius: 50% !important;
  border: 0 !important;
  background: transparent !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0 !important;
}
.pc-app-view .pc-app-refresh { background: var(--pa-soft) !important; }
.pc-app-view .pc-app-refresh svg,
.pc-app-view .pc-app-back svg {
  stroke: var(--pa-ink2) !important;
  width: 17px !important; height: 17px !important;
}

.pc-app-view .pc-app-body {
  background: var(--pa-bg) !important;
  padding: 0 12px 22px !important;
}

/* ═══════════════ 公共卡片组件 ═══════════════ */

.pa-card {
  background: var(--pa-card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  margin-bottom: 12px;
}
html.dark-mode .pa-card { box-shadow: 0 1px 3px rgba(0,0,0,.3); }

.pa-sec {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 9px;
  font-size: 13px; font-weight: 600;
  color: var(--pa-ink);
  letter-spacing: .02em;
}
.pa-sec .n { font-weight: 400; font-size: 11px; color: var(--pa-ink3); }

.pa-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--pa-line);
}
.pa-item:last-child { border-bottom: none; }
.pa-item:active { background: var(--pa-soft); }

.pa-cover {
  width: 46px; height: 46px;
  border-radius: 11px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(150deg,#E9E9EE,#C2C2CB);
  display: flex; align-items: center; justify-content: center;
}
.pa-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-cover svg { width: 18px; height: 18px; stroke: #fff !important; fill: none !important; stroke-width: 1.7; }

.pa-main { flex: 1; min-width: 0; }
.pa-name {
  font-size: 13.5px; color: var(--pa-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pa-desc {
  font-size: 11.5px; color: var(--pa-ink3);
  margin-top: 3px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-desc.multi { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pa-meta { font-size: 11px; color: var(--pa-ink3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pa-right { flex-shrink: 0; text-align: right; }
.pa-price { font-size: 14px; font-weight: 600; color: var(--pa-ink); font-variant-numeric: tabular-nums; }

.pa-tag {
  display: inline-block;
  font-size: 9.5px; padding: 2px 6px; border-radius: 5px;
  background: var(--pa-soft); color: var(--pa-ink2);
  margin-right: 5px;
}

.pa-empty {
  padding: 26px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--pa-ink3);
}

/* 大图卡（抖音/商品） */
.pa-bigcard {
  background: var(--pa-card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  margin-bottom: 12px;
}
.pa-bigcover {
  height: 156px;
  background: linear-gradient(155deg,#DCE4EA 0%,#B4C2CC 52%,#93A6B3 100%);
  position: relative;
}
.pa-bigcover .badge {
  position: absolute; left: 11px; bottom: 11px;
  font-size: 10px; color: #fff;
  background: rgba(0,0,0,.34);
  padding: 3px 8px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pa-bigbody { padding: 12px 13px 13px; }

/* 时间轴（日程） */
.pa-time {
  width: 42px; flex-shrink: 0;
  font-size: 12px; color: var(--pa-ink2);
  font-variant-numeric: tabular-nums;
}
.pa-time-line {
  width: 2px; align-self: stretch;
  background: var(--pa-line);
  margin: 0 10px 0 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* 引用块（读书划线 / 摘录） */
.pa-quote {
  margin-top: 7px;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--pa-soft);
  font-size: 11.5px; color: var(--pa-ink2);
  line-height: 1.6;
  font-family: var(--pa-serif);
}


/* ═══════════════ 微信（角色手机 · 纯 CSS 覆盖，不动 JS） ═══════════════ */

.cp-chat-section-label {
  padding: 14px 6px 7px !important;
  font-size: 11.5px !important;
  color: var(--pa-ink3) !important;
  letter-spacing: .04em !important;
  background: transparent !important;
  font-weight: 400 !important;
}

.cp-chat-item {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 11px 13px !important;
  margin: 0 !important;
  background: var(--pa-card) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pa-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.cp-chat-item:active { background: var(--pa-soft) !important; }

.cp-chat-avatar {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: linear-gradient(150deg,#E6E6EB,#BCBCC5) !important;
  color: #fff !important;
  font-size: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.cp-user-chat-avatar { background: linear-gradient(150deg,#C9D4DD,#8FA3B2) !important; }

.cp-chat-info { flex: 1 !important; min-width: 0 !important; }
.cp-chat-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pa-ink) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-chat-preview {
  font-size: 12.5px !important;
  color: var(--pa-ink3) !important;
  margin-top: 4px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-chat-meta { flex-shrink: 0 !important; }
.cp-chat-time { font-size: 10.5px !important; color: var(--pa-ink3) !important; }

.cp-pin-chip, .cp-rel-chip {
  display: inline-block !important;
  font-size: 9px !important;
  padding: 1.5px 5px !important;
  border-radius: 4px !important;
  background: var(--pa-soft) !important;
  color: var(--pa-ink2) !important;
  margin-left: 5px !important;
  font-weight: 400 !important;
}

/* 联系人 */
.cp-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 10px 13px !important;
  background: var(--pa-card) !important;
  border-bottom: 1px solid var(--pa-line) !important;
  border-radius: 0 !important;
}
.cp-contact-avatar {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(150deg,#E6E6EB,#BCBCC5) !important;
  color: #fff !important;
  font-size: 16px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.cp-contact-info { flex: 1 !important; min-width: 0 !important; }
.cp-contact-name { font-size: 13.5px !important; color: var(--pa-ink) !important; }
.cp-contact-detail { font-size: 11px !important; color: var(--pa-ink3) !important; margin-top: 3px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 对话气泡 */
.cp-wechat-bubble {
  max-width: 232px !important;
  padding: 10px 13px !important;
  border-radius: 14px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}
.cp-wechat-bubble.cp-bubble-owner {
  background: var(--pa-card) !important;
  color: var(--pa-ink) !important;
  border-top-left-radius: 4px !important;
}
.cp-wechat-bubble.cp-bubble-user {
  background: var(--pa-accent) !important;
  color: #fff !important;
  border-top-right-radius: 4px !important;
}
html.dark-mode .cp-wechat-bubble.cp-bubble-user { color: #17171A !important; }