.char-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px; /* 图片间距 */
  max-width: 1200px; /* 可根据页面宽度调整 */
  margin: 24px auto; /* 居中 */
  padding: 0 12px; /* 边距缓冲 */
}

/* 每个格子为正方形容器 */
.char-item {
  width: 100%;
  aspect-ratio: 1 / 1; /* 保持正方形 */
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.char-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* 图片填充容器，裁剪溢出 */
.char-img {
  height: 90%;
  display: block;
}

/* 可选：在小屏幕上保证可读性（若需要自适应） */
@media (max-width: 900px) {
  .char-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .char-grid { grid-template-columns: repeat(2, 1fr); }
}

.show_chars h1{
    margin-bottom: 40px;
}

.hidden {
    display: none;
}

.message_body {
    padding: 1px 1px 20px 1px;
}

.message_item .bubble {
    max-width: 100%;
}