/* ==========================================================================
   components/messages.css — 留言板
   结构 = 线上原版：糖果标题条 + 表单 + 列表（容器 860px · radius 20px）
   视觉 = 糖果粗野：ink 硬描边 + 实心硬影 + 纯色头像块
   ========================================================================== */

.message-board {
  display: grid;
  gap: 18px;
  width: min(100%, 860px);
  margin: 0 auto;
}

/* 表单（线上：gap 12px，textarea 104px） */
.message-form {
  display: grid;
  gap: 12px;
}

.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.char-hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.char-hint b {
  color: var(--accent);
  font-weight: var(--fw-blackest);
  font-size: var(--fs-md);
}

/* --------------------------------------------------------------------------
   列表（线上：gap 12px，条目 radius 16px）
   -------------------------------------------------------------------------- */

.message-list {
  display: grid;
  gap: 12px;
  padding: 2px;
  transition: opacity var(--t-fast) var(--ease);
}

/* 翻页时旧内容整体变淡（不清空）→ 无闪屏、无高度塌陷 */
.message-list.is-loading {
  opacity: 0.4;
  pointer-events: none;
}

.message-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px 16px;
  background: var(--panel-solid);
  border: var(--stroke-thin) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--hard-sm);
  transition:
    transform var(--t-fast) var(--ease-pop),
    box-shadow var(--t-fast) var(--ease-pop),
    background-color var(--t-fast) var(--ease);
}

.message-item:hover {
  background: var(--candy-orange-wash);
  transform: var(--lift);
  box-shadow: var(--hard);
}

/* 头像：纯糖果色块 + ink 描边 */
.message-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: var(--fs-md);
  font-weight: var(--fw-blackest);
  color: var(--ink);
  background: var(--candy-pink);
  border: var(--stroke-thin) solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 0 var(--ink);
}

.message-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.message-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.message-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--text);
}

.message-time {
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.message-text {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   分页
   -------------------------------------------------------------------------- */

.message-pagination:empty {
  display: none;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.pager-info {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pager-info b {
  color: var(--text);
  font-weight: var(--fw-blackest);
}

@media (max-width: 620px) {
  .message-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }

  .message-avatar {
    width: 36px;
    height: 36px;
  }

  .pager {
    gap: 10px;
  }
}