/* ===== Chat Showcase ===== */
.chat-showcase{
  width: 100%;
  margin: 0px auto;
}

.chat-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: url("https://static.igem.wiki/teams/6017/img/chatbg.webp") center/contain no-repeat;
  /* border-radius: 12px; */
  overflow: hidden;
  /* box-shadow: 0 6px 16px rgba(0,0,0,0.1); */
}

/* slides轨道 */
.chat-frame .slides {
  display: flex;
  /* height: calc(100% );   留出条形空间 */
  transition: transform 0.45s ease-in-out;
  padding-top: 7%;

}
.chat-frame .slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
}
.chat-frame .slide img {
  max-width: 80%;
  max-height: 80%;
  display: block;
  margin: auto;
}

/* 横条容器：放在图下方 */
.chat-frame .chat-bars {
  height: 40px;               /* 条形区高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background: transparent;  /* 和背景黄相配 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 17%;
}

/* 每个横条 */
.chat-frame .chat-bars span {
  display: inline-block;
  width: 50px;
  height: 10px;          /* 高一点 */
  border-radius: 7px;
  background: #d3b16c;   /* 默认色 */
  cursor: pointer;
  transition: background 0.3s;
}
.chat-frame .chat-bars span.active {
  background: #9a5632;   /* 选中高亮 */
}

/* 小屏微调 */
@media (max-width:768px){
  .chat-frame .chat-bars{ padding: 8px 0; gap: 10px; }
  .chat-frame .chat-bars span{ width: 30px; height: 8px; border-radius: 4px; }
}