/**
 * 斗地主专用样式
 *
 * 只放这个游戏独有的类（.ddz-*），通用的按钮/面板/徽章继续用 main.css，
 * 这样全站视觉保持一致，也避免改动公共样式影响别的游戏。
 * 配色沿用 main.css 的变量：--accent / --accent-2 / --warn / --danger / --panel / --border
 *
 * ★ 牌面排版的关键都在 .ddz-stack-row / .ddz-stack 这一段：
 *     1. 同点数的牌落在同一个横坐标上（同一个 .ddz-stack）
 *     2. 每多一张就向上偏移 --stack-offset（CSS 变量，改这里就能调疏密）
 *     3. 行高按「最厚的那一叠」算，所以偏移不会把牌裁掉
 *     4. 选中不位移：只加描边 / 发光 / ✓ 角标（见 .ddz-card.selected）
 */

/* ============================== 牌桌 ============================== */

.ddz-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 对手在左右，底牌在中间 */
.ddz-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.ddz-seat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ddz-seat:last-child {
  align-items: flex-end;
}

/* ============================== 座位卡 ============================== */

.ddz-seat-card {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 250px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(8, 13, 28, 0.5);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.ddz-seat-card.active {
  border-color: var(--accent);
  background: rgba(91, 140, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(91, 140, 255, 0.35);
}
.ddz-seat-card.me {
  border-color: rgba(61, 220, 151, 0.4);
}

.ddz-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background: linear-gradient(180deg, rgba(91, 140, 255, 0.3), rgba(91, 140, 255, 0.1));
  border: 1px solid var(--border);
}

.ddz-seat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ddz-seat-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ddz-seat-name-text {
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ddz-seat-count {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-dim);
}

/* 不出 / 抢地主 气泡 */
.ddz-bubble {
  flex-shrink: 0;
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  min-height: 1.5em;
  line-height: 1.5em;
}
.ddz-bubble.bubble-empty {
  border-color: transparent;
  color: transparent;
}
.ddz-bubble.bubble-idle {
  color: var(--text-mute);
}
.ddz-bubble.bubble-strong {
  color: #0b1020;
  background: var(--accent-2);
  border-color: transparent;
  font-weight: 650;
}

/* 对手的背面牌堆 */
.ddz-back-stack {
  --card-w: 38px;
  --card-h: 56px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ddz-back-count {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-dim);
}

/* ============================== 底牌 ============================== */

.ddz-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: rgba(8, 13, 28, 0.35);
}
.ddz-bottom-label {
  font-size: 0.74rem;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}

/* ============================== 牌 ============================== */

.ddz-cards {
  --card-w: 52px;
  --card-h: 76px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2px;
  row-gap: 8px;
}
.ddz-cards.mini {
  --card-w: 38px;
  --card-h: 56px;
}

/**
 * ★ 同点数「同轴向上堆叠」的核心。
 *
 *   .ddz-stack-row 横向排布每一叠：第 i 叠的 left = i × --step
 *   .ddz-stack     一叠牌：宽度 = 一张牌，内部所有牌共用同一个 X
 *   .ddz-card      第 k 张：bottom = k × --stack-offset（越往上越往左上露出角标）
 *
 * --n / --stack-max / --overlap 由 JS 按实际牌面写入（第 i 叠、这一叠有几张、
 * 相邻两叠搭接多少），牌宽牌高与偏移量则固定在 CSS 里 —— 视觉参数只此一处。
 */
.ddz-stack-row {
  --card-w: 52px;
  --card-h: 76px;
  --stack-offset: 18px; /* ★ 同点数每多一张向上偏移多少（要更紧凑就调小） */
  --overlap: 0px; /* 相邻两叠的横向搭接，牌多时由 JS 调大 */
  --stack-max: 3; /* 这一行最厚的一叠多出几张，由 JS 写入 */
  --step: calc(var(--card-w) - var(--overlap));
  position: relative;
  flex: 0 0 auto;
  /* 行高 = 牌高 + 最厚那一叠的抬升量，保证往上叠的牌不会被裁切 */
  height: calc(var(--card-h) + var(--stack-max) * var(--stack-offset) + 2px);
  width: calc((var(--n, 1) - 1) * var(--step) + var(--card-w));
}
.ddz-stack-row.mini {
  --card-w: 38px;
  --card-h: 56px;
  --stack-offset: 12px;
}
.ddz-stack-row.tight {
  --stack-offset: 14px;
}

/**
 * ★ 打出去的牌：横向「半叠放」+ 自动压缩，永远塞得进卡片里。
 *
 *   基准步长 = --card-w × --expose（--expose 由 JS 按张数给：牌越多叠得越紧，露出大半）。
 *   但真正定 left 的是 min()：
 *
 *       第 i 叠的 left = i × min( 基准步长, (可用宽 - 牌宽) / (张数 - 1) )
 *
 *   —— 牌少时用基准步长（紧凑半叠放，后面的牌压在前一张上面，z-index 递增）；
 *      牌多到基准步长也装不下时，min() 自动把它压到「刚好填满可用宽度」，
 *      所以总宽 = (n-1)×步长 + 牌宽 ≤ 可用宽，永远不会溢出、不会被裁切、不会出滚动条。
 *   百分比以行宽为基准，而 .fit 的行宽就是卡片正文宽度（width: 100%），
 *   因此窗口变窄也不会失效（不依赖任何 JS 量出来的像素值）。
 */
.ddz-stack-row.fit {
  width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  --step: calc(var(--card-w) * var(--expose, 0.6));
}
.ddz-stack-row.fit > .ddz-stack {
  left: calc(var(--i, 0) * min(var(--step), (100% - var(--card-w)) / var(--n-spread, 1)));
}

/* ★ 一次出十几张（长顺子 / 连对 / 飞机）时整排缩小一号，
     并把左上角点数收得更紧 —— 每张露出来的那一条里仍然看得清是什么牌 */
.ddz-stack-row.mini.dense {
  --card-w: 30px;
  --card-h: 44px;
  --stack-offset: 9px;
}
.ddz-stack-row.mini.dense > .ddz-stack > .ddz-card.mini .ddz-corner {
  top: 2px;
  left: 2px;
}
.ddz-stack-row.mini.dense > .ddz-stack > .ddz-card.mini .ddz-corner b {
  font-size: 0.6rem;
}
.ddz-stack-row.mini.dense > .ddz-stack > .ddz-card.mini .ddz-corner i {
  font-size: 0.5rem;
}
.ddz-stack-row.mini.dense .ddz-center {
  font-size: 0.8rem;
}

.ddz-stack {
  position: absolute;
  bottom: 0;
  left: calc(var(--i, 0) * var(--step));
  width: var(--card-w);
  height: 100%;
  /* ★ 后面的牌压在前一张上面：第 i 叠永远盖住第 i-1 叠 */
  z-index: calc(10 + var(--i, 0));
  /* 把每一叠变成独立的层叠上下文：叠内的 z-index 不会串到旁边那一叠去 */
  isolation: isolate;
}
.ddz-stack > .ddz-card {
  position: absolute;
  left: 0;
  bottom: calc(var(--k, 0) * var(--stack-offset));
  /* 越靠上的牌层级越低：这样每一张都露出自己的左上角点数，一眼看清整叠是什么 */
  z-index: calc(100 - var(--k, 0));
}

.ddz-card {
  position: relative;
  width: var(--card-w, 52px);
  height: var(--card-h, 76px);
  flex-shrink: 0;
  border-radius: 7px;
  background: linear-gradient(170deg, #ffffff, #e8edf8);
  border: 1px solid rgba(140, 152, 180, 0.7);
  box-shadow: 0 3px 8px rgba(4, 8, 18, 0.45);
  color: #1a2030;
  user-select: none;
  touch-action: manipulation;
  /* ★ 只过渡颜色类属性：选中态不做任何位移 */
  transition: box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease,
    filter 0.12s ease;
  cursor: default;
}
.ddz-card.red {
  color: #d5344a;
}
.ddz-card.mini {
  border-radius: 5px;
}
.ddz-card[data-card-id]:not([data-card-id='']) {
  cursor: pointer;
}

/**
 * ★ 选中：完全不位移（没有 transform），只靠「描边 + 发光 + 提亮 + ✓ 角标」表达。
 * 位移会同时改变点击热区与牌桌观感，所以这里连 1px 都不动。
 */
.ddz-card.selected {
  border-color: var(--accent-2);
  background: linear-gradient(170deg, #ffffff, #d8f6e7);
  box-shadow:
    0 0 0 2px var(--accent-2),
    0 0 16px rgba(61, 220, 151, 0.7),
    0 3px 8px rgba(4, 8, 18, 0.45);
  filter: brightness(1.06) saturate(1.12);
}
/* ✓ 角标放在左上角点数的对面：叠牌时露出来的正是这一条上沿，所以一定看得见 */
.ddz-card.selected::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #06231a;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(4, 8, 18, 0.5);
}
.ddz-card.hint {
  box-shadow: 0 0 0 2px var(--accent), 0 6px 14px rgba(4, 8, 18, 0.5);
}
.ddz-card.back {
  background: repeating-linear-gradient(135deg, #2a3a64 0 6px, #22304f 6px 12px);
  border-color: rgba(120, 145, 210, 0.5);
  color: rgba(180, 200, 245, 0.55);
  display: grid;
  place-items: center;
  cursor: default;
}
.ddz-back-mark {
  font-size: 1rem;
  line-height: 1;
}

.ddz-corner {
  position: absolute;
  top: 3px;
  left: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.ddz-corner b {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ddz-corner i {
  font-size: 0.7rem;
  font-style: normal;
}
.ddz-card.mini .ddz-corner b {
  font-size: 0.7rem;
}
.ddz-card.mini .ddz-corner i {
  font-size: 0.58rem;
}

/* 牌面中央的花色 / 大小王标记 */
.ddz-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  opacity: 0.85;
}
.ddz-card.mini .ddz-center {
  font-size: 0.95rem;
}
.ddz-card.joker .ddz-center {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ddz-card.joker .ddz-corner b {
  font-size: 0.68rem;
  writing-mode: vertical-rl;
  letter-spacing: 0.02em;
}
.ddz-card.joker.mini .ddz-corner b {
  font-size: 0.58rem;
}

/* ============================== 台面 / 提示 ============================== */

/**
 * ★ 牌桌上的「三角形三张卡片」，一个角代表一个人：
 *
 *     .ddz-action-corner.left   左上 = 上家
 *     .ddz-action-corner.right  右上 = 下家
 *     .ddz-action-corner.self   下方居中 = 我（带头像与自己的信息）
 *
 *   每个角 = 卡片（.ddz-action-col）+ 卡片**下方**的倒计时进度条（.ddz-action-timer）。
 *   观战者没有「我」，三个角按座位号 0 / 1 / 2 摆开。
 *   每张卡片：圆形头像（昵称首字 + 按座位取色）+ 昵称 + 👑 地主 + 🤖 托管中
 *             + 剩余张数 + 该家最近一次操作（小号牌面 / 「不出」/ 淡色「—」）。
 *
 *   ⚠️ 这里**没有**公共的「上一手」区域 —— 每家的上一次操作各归各的卡片。
 *
 *   ★ 一律没有边框（border / outline 都没有）：当前行动者用
 *     「背景提亮 + 轻微放大 + 发光阴影 + ▶ 当前 角标」表达，不依赖边框。
 */
.ddz-actions {
  display: grid;
  /* 上排两个角 + 下排一个角（跨两列居中）= 三角形 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    'left right'
    'self self';
  gap: 10px 20px;
  align-items: start;
  justify-items: center;
  padding: 6px 0 2px;
}

/* 一个角：卡片 + 卡片下方的进度条。宽度上限和卡片一致，进度条正好横跨卡片。
   ⚠️ 类名必须避开 .ddz-corner —— 那是每张牌左上角的点数角标，撞名会把牌面撑坏 */
.ddz-action-corner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  max-width: 330px;
  min-width: 0;
}
/* 三个角：左上靠右、右上靠左（都往中间收），下方居中 */
.ddz-action-corner.left {
  grid-area: left;
  justify-self: end;
}
.ddz-action-corner.right {
  grid-area: right;
  justify-self: start;
}
.ddz-action-corner.self {
  grid-area: self;
  justify-self: center;
}

.ddz-action-col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  /* ★ 去掉列边框：高亮完全靠背景 / 放大 / 发光表达 */
  border: none;
  outline: none;
  border-radius: var(--radius-sm);
  background: rgba(8, 13, 28, 0.45);
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
/* 卡片同时带外壳的 .player-card（快捷语气泡挂在它上面），这里把边框彻底压掉 */
.ddz-action-col.player-card {
  border: none;
  outline: none;
}

/**
 * ★ 剩余出牌时间：圆角、绿→红渐变、从满到空。
 *   放在卡片**下方**（.ddz-action-corner 里卡片的下一个兄弟），横跨卡片宽度，不压住卡片内容。
 *   宽度与颜色每帧由 JS（requestAnimationFrame）写进 fill 的行内样式，
 *   所以这里**不要**加 transition —— 会和平滑的逐帧刷新打架、看起来发飘。
 */
.ddz-action-timer {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
/* 没轮到这一家的角：轨道占位但不可见（卡片与进度条位置不会跳动） */
.ddz-action-timer.off {
  visibility: hidden;
}
.ddz-action-timer-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #bff5dd, #3ddc97);
}

/* ★ 当前行动者：背景提亮 + 轻微放大 + 发光（没有边框） */
.ddz-action-col.active {
  background: rgba(91, 140, 255, 0.22);
  box-shadow: 0 0 18px rgba(91, 140, 255, 0.4);
  transform: scale(1.035);
  z-index: 2;
}
/* 我自己那张卡片用一层绿色底区分（和高亮的蓝色不冲突） */
.ddz-action-col.me {
  background: rgba(61, 220, 151, 0.1);
}
.ddz-action-col.me.active {
  background: rgba(61, 220, 151, 0.2);
  box-shadow: 0 0 18px rgba(61, 220, 151, 0.4);
}

/* 可点暗示：外壳会给别人的卡片加 .avatar-anchor（cursor: pointer + 提示 title），
   这里再补一点 hover 反馈，让「点这张卡片可以互动」一眼看得出来 */
.ddz-action-col.avatar-anchor:hover {
  background: rgba(91, 140, 255, 0.18);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* 被扔鸡蛋 / 收到花：命中后抖一下（外壳给锚点加 .hit）。
   用 rotate 而不是位移，保持「卡片本身不移动」的观感。 */
.ddz-action-col.hit {
  animation: ddz-card-hit 0.5s ease;
}
@keyframes ddz-card-hit {
  0%,
  100% {
    rotate: 0deg;
  }
  20% {
    rotate: -1.6deg;
  }
  45% {
    rotate: 1.6deg;
  }
  70% {
    rotate: -0.9deg;
  }
}

.ddz-action-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  font-size: 0.78rem;
  line-height: 1.4;
}
.ddz-action-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ★ 圆形头像：昵称首字 + 按座位取的底色（和外壳侧栏同一个观感） */
.ddz-action-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1;
  color: #0b1020;
  border: 2px solid rgba(255, 255, 255, 0.18);
}
/* 托管中：头像加一圈警示环，和外壳侧栏的 .pavatar.auto 一个意思 */
.ddz-action-avatar.auto {
  box-shadow: 0 0 0 2px var(--warn);
}

/* ★ 我自己的信息行：剩余手牌数 / 这个角是谁 */
.ddz-action-selfinfo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-dim);
}
.ddz-action-count {
  color: var(--text-dim);
}
.ddz-action-who {
  color: var(--text-mute);
}

/* ★ 托管徽章：要醒目，别人一眼看见「他现在是电脑在代打」 */
.ddz-action-auto {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 1px 7px;
  border-radius: 999px;
  color: #0b1020;
  background: var(--warn);
  border: 1px solid transparent;
}
/* ★ 「▶ 当前」角标：不靠边框也能看出轮到谁 */
.ddz-action-turn {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 1px 7px;
  border-radius: 999px;
  color: #0b1020;
  background: var(--accent);
}

.ddz-action-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
}
/* ★ 打出去的牌：.fit 已经保证整行塞得进卡片宽度，所以这里不要再出横向滚动条 */
.ddz-action-scroll {
  display: flex;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 2px;
}
.ddz-action-scroll > .ddz-stack-row {
  margin: 0 auto;
}
/* 还没轮到过他 / 还没出过牌 */
.ddz-action-none {
  color: var(--text-mute);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

.ddz-table-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-mute);
}

.ddz-prompt {
  text-align: center;
  font-size: 0.94rem;
  color: var(--text-dim);
  padding: 6px 0;
}
.ddz-prompt.mine {
  color: var(--accent-2);
  font-weight: 650;
}
.ddz-prompt.must {
  color: var(--warn);
}
.ddz-prompt.must::after {
  content: '（领出不能过牌）';
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--text-mute);
}

/* ============================== 抢地主条 ============================== */

.ddz-grab-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ============================== 托管提示（按钮在 shell 的 HUD 里） ============================== */

.ddz-auto-note {
  text-align: center;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--warn);
  padding: 4px 0;
}
.ddz-auto-note[hidden] {
  display: none;
}

/* ============================== 我的手牌 ============================== */

.ddz-hand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
/* 手牌区横向滚动，别让页面整体撑破 */
.ddz-hand-scroll {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* 上下留出空间，选中态的发光不会被裁掉 */
  padding: 10px 2px 8px;
}
.ddz-hand-inner {
  display: flex;
  flex: 0 0 auto;
  /* 牌少时居中，牌多时靠 auto 归零并横向滚动 */
  margin: 0 auto;
}
.ddz-hand-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  min-height: 1.4em;
}

/* ============================== 观战席 ============================== */

.ddz-spectate-seats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ddz-spectate-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8, 13, 28, 0.5);
  font-size: 0.82rem;
}

/* ============================== 移动端 ============================== */

@media (max-width: 820px) {
  .ddz-table-row {
    grid-template-columns: 1fr 1fr;
  }
  .ddz-bottom {
    grid-column: 1 / -1;
    order: -1;
  }
  .ddz-stack-row {
    --card-w: 42px;
    --card-h: 62px;
    --stack-offset: 13px;
  }
  .ddz-stack-row.mini {
    --card-w: 32px;
    --card-h: 48px;
    --stack-offset: 10px;
  }
  .ddz-cards.mini {
    --card-w: 32px;
    --card-h: 48px;
  }
  /* 偏移变小了，✓ 角标也要跟着变小，否则会盖到下一张牌上 */
  .ddz-card.selected::after {
    width: 11px;
    height: 11px;
    font-size: 0.5rem;
    line-height: 11px;
  }
  .ddz-seat-card {
    max-width: none;
  }
  .ddz-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }
  /* 三角形在窄屏上仍是「上二下一」的三个角，只是更紧凑 */
  .ddz-actions {
    gap: 8px 10px;
  }
  .ddz-action-corner {
    max-width: none;
  }
  .ddz-action-col {
    padding: 6px 6px;
    gap: 4px;
  }
  .ddz-action-timer {
    height: 5px;
  }
  .ddz-action-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
  }
  .ddz-action-body {
    min-height: 50px;
  }
  .ddz-action-name {
    font-size: 0.74rem;
  }
  .ddz-action-selfinfo {
    gap: 6px;
    font-size: 0.72rem;
  }
}