/**
 * 评论区/留言区公共样式
 * 适用于文章详情页、产品详情页等所有包含评论/留言功能的页面
 */

/* 评论区容器 */
.comments-section {
  margin-top: 2.5rem;
  animation: fadeSlideIn 0.5s ease-out forwards;
}

/* 评论区标题 */
.comments-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}

.comments-header h2 {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comments-header h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.1em;
  background: var(--gradient-primary);
  border-radius: 2px;
}

/* 未登录：登录卡片 */
.comment-login-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--border-radius);
  padding: 1.6rem 1.4rem;
  margin-bottom: 1.2rem;
  text-align: center;
}

.comment-login-card .login-hint {
  color: rgba(255,255,255,0.55);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.comment-login-card .login-hint strong {
  color: #f35555;
}

.comment-login-qr {
  width: 160px;
  height: auto;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  display: block;
  margin: 0 auto 1.2rem;
}

.comment-login-input-wrap {
  display: flex;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  transition: var(--transition);
  max-width: 320px;
  margin: 0 auto;
}

.comment-login-input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,104,239,0.2);
}

.comment-login-input-wrap .login-code-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.75rem 0.9rem;
  color: #fff;
  font-size: 0.88rem;
  font-family: inherit;
  min-width: 0;
}

.comment-login-input-wrap .login-code-input::placeholder {
  color: rgba(255,255,255,0.3);
}

.comment-login-input-wrap .login-btn {
  padding: 0 1rem;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.comment-login-input-wrap .login-btn:hover {
  opacity: 0.9;
}

/* 已登录：用户信息条 */
.comment-user-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(0,209,178,0.06);
  border: 1px solid rgba(0,209,178,0.15);
  border-radius: 10px;
  margin-bottom: 1rem;
}

.comment-user-bar .user-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(0,209,178,0.35);
  object-fit: cover;
}

.comment-user-bar .user-name {
  flex: 1;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.comment-user-bar .logout-btn {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 3px 10px;
  transition: var(--transition);
}

.comment-user-bar .logout-btn:hover {
  color: #f35555;
  border-color: #f35555;
}

/* 评论表单样式 */
.comment-form-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--border-radius);
  padding: 1.4rem;
  color: #fff;
}

.comment-form-card h3 {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.comment-form-card .form-group {
  margin-bottom: 1rem;
}

.comment-form-card .form-group label {
  display: block;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.comment-form-card .form-control {
  width: 100%;
  padding: 0.85rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.9rem;
  font-family: inherit;
  transition: var(--transition);
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
}

.comment-form-card .form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
  background: rgba(255,255,255,0.08);
}

.comment-form-card .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.comment-form-card .submit-btn {
  width: 100%;
  margin-top: 0.75rem;
}

/* 评论列表样式 */
.message-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.message-item.card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--border-radius);
  padding: 1.1rem 1.3rem !important;
  animation: fadeSlideIn 0.4s ease-out forwards;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.8rem;
}

.avatar .photo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--primary-rgb), 0.3);
}

.message-meta {
  flex: 1;
  min-width: 0;
}

.message-author {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.message-date {
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  font-family: 'Fira Code', monospace;
}

/* 消息操作按钮 */
.message-actions {
  flex-shrink: 0;
}

.action-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.message-content {
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  font-size: 0.92rem;
  word-break: break-word;
}

/* 回复样式 */
.reply-to {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.reply-to-user {
  font-weight: 600;
  color: var(--accent);
}

/* 回复表单样式 */
.reply-form {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: none;
}

.reply-form.active {
  display: block;
}

/* 回复项样式 */
.reply-item {
  margin-left: 1.5rem;
  border-left: 2px solid var(--accent);
  margin-top: 0.8rem;
  padding: 0.9rem 1rem !important;
  background: rgba(255,255,255,0.03) !important;
}

.reply-item .message-header {
  margin-bottom: 0.5rem;
}

.reply-item .avatar .photo {
  width: 36px;
  height: 36px;
}

.reply-item .message-author {
  font-size: 0.9rem;
}

.reply-item .message-date {
  font-size: 0.72rem;
}

.reply-item .message-content {
  font-size: 0.88rem;
  line-height: 1.6;
}

/* 空状态 */
.comment-empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: rgba(255,255,255,0.3);
}

.comment-empty-state .empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}