/* ==========================================================================
   列表组件 (List)
   ========================================================================== */

.zuoekai-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 列表项 */
.zuoekai-list__item {
  display: flex;
  align-items: center; /* 默认垂直居中，可根据内容调整 */
  gap: 16px;
  padding: 12px 16px;
  color: var(--zuoekai-color-text);
  transition: background-color 0.2s ease;
}

/* --- 变体 (Variants) --- */

/* 分割线 (Divided) */
.zuoekai-list--divided .zuoekai-list__item:not(:last-child) {
  border-bottom: 1px solid var(--zuoekai-color-border);
}

/* 悬停效果 (Hover) */
.zuoekai-list--hover .zuoekai-list__item:hover {
  background-color: var(--zuoekai-color-surface-page);
  cursor: pointer;
}

/* 带边框容器 (Bordered) */
.zuoekai-list--bordered {
  border: 1px solid var(--zuoekai-color-border);
  border-radius: var(--zuoekai-radius-md);
  background-color: var(--zuoekai-color-surface-panel);
  overflow: hidden; /* 确保圆角 */
}

/* 紧凑模式 (Compact) */
.zuoekai-list--sm .zuoekai-list__item {
  padding: 8px 12px;
  gap: 12px;
}

/* --- 内部元素 --- */

/* 图标/头像容器 */
.zuoekai-list__media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--zuoekai-radius-sm);
  background-color: var(--zuoekai-color-surface-page);
  color: var(--zuoekai-color-text-secondary);
}

.zuoekai-list__media--circle {
  border-radius: 50%;
}

.zuoekai-list__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* 内容区域 */
.zuoekai-list__content {
  flex: 1;
  min-width: 0; /* 允许文本截断 */
}

.zuoekai-list__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--zuoekai-color-text);
  line-height: 1.4;
}

.zuoekai-list__description {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--zuoekai-color-text-secondary);
  line-height: 1.4;
  
  /* 单行截断 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 元数据 (Meta) - 通常显示在右侧 */
.zuoekai-list__meta {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--zuoekai-color-text-muted);
  text-align: right;
}

/* 操作区 (Actions) */
.zuoekai-list__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.zuoekai-list__item:hover .zuoekai-list__actions {
  opacity: 1;
}

/* 适配移动端 */
@media (max-width: 640px) {
  .zuoekai-list__item {
    flex-wrap: wrap; /* 内容过多时换行，或根据设计保持不换行 */
  }
  
  .zuoekai-list__meta {
    width: 100%;
    text-align: left;
    margin-top: 4px;
    padding-left: 56px; /* 对齐 content (40px icon + 16px gap) */
  }
  
  .zuoekai-list__actions {
    opacity: 1; /* 移动端始终显示 */
    margin-left: auto;
  }
}