/* ===== Comments + Likes — 朋友圈风格评论系统 ===== */
/* 精确复刻 updn.pub Comments.tsx Tailwind 样式 */

#comments-section {
  margin-top: 0.5rem;
  padding-bottom: 2rem;
}

/* ===== Action Trigger Anchor (in template, same line as time) ===== */
#comments-action-trigger {
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ===== "··" Action Button — 原版: w-8 h-6 bg-gray-100 rounded ===== */
.action-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.action-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;           /* w-8 */
  height: 24px;          /* h-6 */
  border: none;
  background: #f3f4f6;   /* bg-gray-100 */
  border-radius: 4px;    /* rounded */
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
}

.action-trigger span {
  color: #3b82f6;        /* text-blue-500 */
  font-weight: 700;      /* font-bold */
  font-size: 14px;       /* text-sm */
  letter-spacing: 0.05em; /* tracking-wider */
  line-height: 1;
}

.action-trigger:hover {
  background: #e5e7eb;   /* hover:bg-gray-200 */
}

[data-theme="dark"] .action-trigger {
  background: #374151;   /* dark:bg-gray-700 */
}

[data-theme="dark"] .action-trigger span {
  color: #60a5fa;        /* dark:text-blue-400 */
}

[data-theme="dark"] .action-trigger:hover {
  background: #4b5563;   /* dark:hover:bg-gray-600 */
}

/* ===== Action Popup — 原版: bg-[#4b5563] rounded-md ===== */
.action-popup {
  display: none;
  position: absolute;
  right: calc(100% + 8px); /* 原版 right: 40px from trigger */
  top: 50%;
  transform: translateY(-50%);
  background: #4b5563;
  border-radius: 6px;    /* rounded-md */
  overflow: hidden;
  animation: slideIn 0.15s ease-out forwards;
  z-index: 10;
  white-space: nowrap;
}

.action-popup.show {
  display: flex;
  align-items: center;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(10px) translateY(-50%); }
  to   { opacity: 1; transform: translateX(0) translateY(-50%); }
}

/* 原版: px-4 py-2 text-white hover:bg-[#374151] */
.action-popup button {
  display: flex;
  align-items: center;
  gap: 6px;              /* ml-1.5 ≈ 6px */
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;       /* text-sm */
  padding: 8px 16px;     /* py-2 px-4 */
  cursor: pointer;
  transition: background 0.15s;
}

.action-popup button:hover {
  background: #374151;   /* hover:bg-[#374151] */
}

.action-popup button svg {
  width: 16px;
  height: 16px;
}

/* 点赞已赞状态：图标变红 */
.action-popup button.liked svg {
  color: #DD4C4F;
  fill: #DD4C4F;
}

/* 原版: w-px h-5 bg-gray-500 */
.action-popup-divider {
  width: 1px;
  height: 20px;          /* h-5 */
  background: #6b7280;   /* bg-gray-500 */
  flex-shrink: 0;
}

/* ===== Gray Box — 原版: bg-[#f7f7f7] dark:bg-gray-800 rounded-lg ===== */
.comments-box {
  background: #f7f7f7;
  border-radius: 8px;    /* rounded-lg */
  overflow: hidden;
}

.comments-box:empty {
  display: none;
}

[data-theme="dark"] .comments-box {
  background: #1f2937;   /* dark:bg-gray-800 */
}

/* ===== Likes Row — 原版: flex items-center px-3 py-2 gap-2 ===== */
.likes-row {
  display: flex;
  align-items: center;
  gap: 8px;              /* gap-2 */
  padding: 8px 12px;     /* py-2 px-3 */
}

/* 原版: text-gray-500 (灰色心形，不是红色！) */
.likes-row > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #6b7280;        /* text-gray-500 */
  fill: none;
  stroke: #6b7280;
  stroke-width: 2;
}

/* 原版: flex flex-wrap gap-1 */
.likes-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;              /* gap-1 */
}

/* 原版: w-9 h-9 rounded */
.likes-avatars img {
  width: 36px;           /* w-9 */
  height: 36px;          /* h-9 */
  border-radius: 4px;    /* rounded */
  object-fit: cover;
}

/* ===== Separator — 原版: mx-3 border-t border-gray-200 dark:border-gray-700 ===== */
.box-separator {
  height: 0;
  border-top: 1px solid #e5e7eb;  /* border-gray-200 */
  margin: 0 12px;                 /* mx-3 */
}

[data-theme="dark"] .box-separator {
  border-top-color: #374151;      /* dark:border-gray-700 */
}

/* ===== Comments Row — 原版: px-3 py-2 ===== */
.comments-row {
  padding: 8px 12px;     /* py-2 px-3 */
}

/* 原版: 评论分隔线是独立 div: ml-11 border-t border-gray-200 my-2 */
.comment-separator {
  margin-left: 44px;     /* ml-11 = 2.75rem */
  border-top: 1px solid #e5e7eb;  /* border-gray-200 */
  margin-top: 8px;       /* my-2 */
  margin-bottom: 8px;
}

[data-theme="dark"] .comment-separator {
  border-top-color: #374151;      /* dark:border-gray-700 */
}

/* 原版: flex items-start gap-2 cursor-pointer rounded transition-colors select-none */
.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;              /* gap-2 */
  cursor: pointer;
  border-radius: 4px;    /* rounded */
  transition: background 0.15s;
  user-select: none;
}

.comment-item:active {
  background: #e5e7eb;   /* bg-gray-200 on active/click */
}

[data-theme="dark"] .comment-item:active {
  background: #374151;   /* dark:bg-gray-700 */
}

/* 原版: w-4 h-9 flex items-center justify-center flex-shrink-0 */
.comment-icon-col {
  width: 16px;           /* w-4 */
  height: 36px;          /* h-9 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 原版: text-gray-500 */
.comment-icon-col svg {
  width: 16px;
  height: 16px;
  color: #6b7280;        /* text-gray-500 */
  stroke: #6b7280;
  fill: none;
  stroke-width: 2;
}

/* 原版: w-9 h-9 rounded flex-shrink-0 */
.comment-avatar {
  width: 36px;           /* w-9 */
  height: 36px;          /* h-9 */
  border-radius: 4px;    /* rounded */
  object-fit: cover;
  flex-shrink: 0;
}

.comment-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

[data-theme="dark"] .comment-avatar-placeholder {
  background: #374151;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 原版: font-normal text-sm text-[#576b95] dark:text-[#7a9fd4] */
.comment-nickname {
  font-size: 14px;       /* text-sm */
  font-weight: 400;      /* font-normal */
  color: #576b95;
  line-height: 1;
}

[data-theme="dark"] .comment-nickname {
  color: #7a9fd4;
}

.comment-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #DD4C4F;
  color: #fff;
  line-height: 1.4;
}

/* 原版: flex items-center gap-2 text-xs text-gray-400 */
.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;              /* gap-2 */
  font-size: 12px;       /* text-xs */
  color: #9ca3af;        /* text-gray-400 */
  flex-shrink: 0;
}

/* 原版: hover:text-red-500 transition-colors */
.comment-delete-btn {
  border: none;
  background: none;
  color: #9ca3af;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.comment-delete-btn:hover {
  color: #ef4444;        /* hover:text-red-500 */
}

/* 原版: text-sm text-gray-700 dark:text-gray-300 mt-1 */
.comment-text {
  font-size: 14px;       /* text-sm */
  line-height: 1.6;
  color: #374151;        /* text-gray-700 */
  margin-top: 4px;       /* mt-1 */
  word-break: break-word;
}

[data-theme="dark"] .comment-text {
  color: #d1d5db;        /* dark:text-gray-300 */
}

/* 原版: text-gray-400 */
.comment-text .reply-prefix {
  color: #9ca3af;
}

/* 原版: text-[#576b95] dark:text-[#7a9fd4] */
.comment-text .reply-name {
  color: #576b95;
}

[data-theme="dark"] .comment-text .reply-name {
  color: #7a9fd4;
}

/* ===== Comment Input — 原版: px-3 py-2, border-2 border-[#DD4C4F] rounded ===== */
.comment-input-wrapper {
  padding: 8px 12px;     /* py-2 px-3 */
}

.comment-reply-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 6px;
}

.comment-reply-indicator .reply-target {
  color: #576b95;
}

[data-theme="dark"] .comment-reply-indicator .reply-target {
  color: #7a9fd4;
}

.comment-reply-indicator button {
  border: none;
  background: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}

/* 原版: border-2 border-[#DD4C4F] rounded bg-white dark:bg-gray-700 */
.comment-input-form {
  border: 2px solid #DD4C4F;
  border-radius: 4px;    /* rounded */
  background: #fff;      /* bg-white */
  overflow: hidden;
}

[data-theme="dark"] .comment-input-form {
  background: #374151;   /* dark:bg-gray-700 */
}

/* 原版: w-full p-2 bg-transparent text-base */
.comment-input-form textarea {
  width: 100%;
  padding: 8px;          /* p-2 */
  border: none;
  background: transparent;
  color: #111827;        /* text-gray-900 */
  font-size: 16px;       /* text-base */
  font-family: inherit;
  resize: none;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

[data-theme="dark"] .comment-input-form textarea {
  color: #f3f4f6;        /* dark:text-gray-100 */
}

.comment-input-form textarea:focus {
  outline: none;
}

/* 原版: placeholder-gray-400 */
.comment-input-form textarea::placeholder {
  color: #9ca3af;
}

/* 原版: flex items-center justify-end px-2 pb-2 gap-2 */
.comment-input-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;              /* gap-2 */
  padding: 0 8px 8px;    /* px-2 pb-2 */
}

/* 原版: text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 (纯文字，无边框) */
.comment-cancel-btn {
  border: none;
  background: none;
  padding: 0;
  color: #9ca3af;        /* text-gray-400 */
  font-size: 12px;       /* text-xs */
  cursor: pointer;
  transition: color 0.15s;
}

.comment-cancel-btn:hover {
  color: #4b5563;        /* hover:text-gray-600 */
}

[data-theme="dark"] .comment-cancel-btn:hover {
  color: #d1d5db;        /* dark:hover:text-gray-300 */
}

/* 原版: px-4 py-1 bg-[#07c160] text-white rounded text-sm font-medium */
.comment-send-btn {
  padding: 4px 16px;     /* py-1 px-4 */
  border: none;
  border-radius: 4px;    /* rounded */
  background: #07c160;
  color: #fff;
  font-size: 14px;       /* text-sm */
  font-weight: 500;      /* font-medium */
  cursor: pointer;
  transition: background 0.15s;
}

.comment-send-btn:hover {
  background: #06ae56;   /* hover:bg-[#06ae56] */
}

.comment-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Login Prompt ===== */
.comment-login-prompt {
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}

.comment-login-prompt:hover {
  border-color: #DD4C4F;
  color: #DD4C4F;
}

/* ===== Blocked ===== */
.comment-blocked {
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  padding: 12px;
}

/* ===== Profile Modal ===== */
.profile-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.profile-modal {
  background: var(--color-bg);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 360px;
}

.profile-modal h3 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
}

.profile-avatar-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.profile-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
}

.profile-avatar-empty {
  background: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.profile-avatar-btn {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text);
}

.profile-avatar-btn:hover {
  background: var(--color-border);
}

.profile-nickname-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.profile-nickname-input:focus {
  outline: none;
  border-color: #DD4C4F;
}

.profile-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.profile-cancel-btn {
  padding: 8px 18px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  cursor: pointer;
}

.profile-save-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  background: #DD4C4F;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.profile-save-btn:hover {
  opacity: 0.85;
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .action-popup button {
    padding: 8px 12px;
    font-size: 12px;
  }
}