/* ── Comments Section ─────────────────────────────────────────────────────────
   Layout:
     .comment-section           outer wrapper (visible on edit forms)
     .comment-section__header   title row with icon + count badge
     .comment-section__title    "Comments" heading
     .comment-count             badge showing number of comments
     .comment-list              scrollable list of past comments
     .comment-items             flex column of comment rows
     .comment-item              one row: bubble (left) or right-aligned if own
     .comment-item--mine        own comments → right-aligned with accent colour
     .comment-bubble            white/accent card with text
     .comment-content           comment text
     .comment-meta              date / small info under bubble
     .comment-empty             placeholder when no comments exist
     .comment-compose           textarea + send row
     .comment-textarea          message input
     .comment-compose__footer   author name + send button row
     .comment-author            small "writing as …" label
     .comment-send-btn          primary send button
     .comment-error             error message (red)
────────────────────────────────────────────────────────────────────────────── */

/* ── Outer section ────────────────────────────────────────────────────────── */
.comment-section {
  margin-top: 2rem;
  border-top: 2px solid var(--lysis-border, #e0e0e0);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.comment-section__header {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  color:       var(--lysis-text-muted, #666);
}
.comment-section__header .material-symbols-outlined {
  font-size: 1.1rem;
}
.comment-section__title {
  margin:      0;
  font-size:   0.9rem;
  font-weight: 600;
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  color:       var(--lysis-text, #333);
}

.comment-count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       1.25rem;
  height:          1.25rem;
  padding:         0 0.3rem;
  border-radius:   1rem;
  background:      var(--lysis-accent, #4f7bff);
  color:           #fff;
  font-size:       0.7rem;
  font-weight:     700;
}

/* ── Comment list ─────────────────────────────────────────────────────────── */
.comment-list {
  max-height: 320px;
  overflow-y: auto;
  border:     1px solid var(--lysis-border, #e0e0e0);
  border-radius: 6px;
  background: var(--lysis-surface-alt, #fafafa);
  padding:    0.5rem;
}

.comment-items {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

/* ── Individual comment ───────────────────────────────────────────────────── */
.comment-item {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            0.15rem;
  max-width:      85%;
}
.comment-item--mine {
  align-self:  flex-end;
  align-items: flex-end;
}

.comment-bubble {
  background:    var(--lysis-surface, #fff);
  border:        1px solid var(--lysis-border, #e0e0e0);
  border-radius: 8px;
  padding:       0.5rem 0.75rem;
  word-break:    break-word;
}
.comment-item--mine .comment-bubble {
  background:   var(--lysis-accent, #4f7bff);
  border-color: var(--lysis-accent, #4f7bff);
  color:        #fff;
}

.comment-content {
  margin:    0;
  font-size: 0.85rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.comment-meta {
  font-size: 0.7rem;
  color:     var(--lysis-text-muted, #999);
  padding:   0 0.25rem;
}
.comment-item--mine .comment-meta {
  color: var(--lysis-text-muted, #aaa);
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.comment-empty {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  padding:         1.5rem;
  color:           var(--lysis-text-muted, #bbb);
  font-size:       0.85rem;
}
.comment-empty .material-symbols-outlined {
  font-size: 1.1rem;
}

/* ── Compose area ─────────────────────────────────────────────────────────── */
.comment-compose {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.comment-error {
  color:     var(--lysis-danger, #d32f2f);
  font-size: 0.8rem;
  margin:    0;
}

.comment-textarea {
  width:         100%;
  min-height:    80px;
  padding:       0.6rem 0.75rem;
  border:        1px solid var(--lysis-border, #e0e0e0);
  border-radius: 6px;
  font-size:     0.85rem;
  font-family:   inherit;
  resize:        vertical;
  background:    var(--lysis-surface, #fff);
  color:         var(--lysis-text, #333);
  box-sizing:    border-box;
  transition:    border-color 0.15s;
}
.comment-textarea:focus {
  outline:      none;
  border-color: var(--lysis-accent, #4f7bff);
  box-shadow:   0 0 0 2px color-mix(in srgb, var(--lysis-accent, #4f7bff) 20%, transparent);
}
.comment-textarea:disabled {
  opacity: 0.6;
  cursor:  not-allowed;
}

.comment-compose__footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
}

.comment-author {
  font-size: 0.75rem;
  color:     var(--lysis-text-muted, #999);
}

.comment-send-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.35rem;
  padding:         0.4rem 1rem;
  background:      var(--lysis-accent, #4f7bff);
  color:           #fff;
  border:          none;
  border-radius:   4px;
  cursor:          pointer;
  font-size:       0.85rem;
  font-weight:     500;
  transition:      background 0.15s, opacity 0.15s;
}
.comment-send-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lysis-accent, #4f7bff) 85%, black);
}
.comment-send-btn:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}
.comment-send-btn .material-symbols-outlined {
  font-size: 1rem;
}