.cm { border: 1px solid #e6e8eb; border-radius: 10px; padding: 16px; background: #fff; }
.cm-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cm-label { font-size: 0.95rem; color: #4b5563; }
.cm-textarea { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; resize: vertical; font: inherit; }
.cm-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.cm-actions { display: flex; align-items: center; gap: 10px; }
.cm-btn { appearance: none; border: 0; border-radius: 8px; padding: 8px 14px; background: #2563eb; color: #fff; font-weight: 600; cursor: pointer; }
.cm-btn:hover { background: #1e4fd4; }
#comments .cm-error a { text-decoration: underline; }
#comments .cm-error a:hover { text-decoration: none; }


.cm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cm-item { padding: 12px 12px; border: 1px solid #eef0f2; border-radius: 8px; background: #fafbfc; }
.cm-item--empty { text-align: center; color: #6b7280; background: #fff; border-style: dashed; }
.cm-body { white-space: pre-wrap; line-height: 1.5; color: #111827; }
#comments .cm-meta { color:#6b7280; font-size:.9rem; margin-top:.25rem; }
#comments .cm-who { font-style: italic; }


.cm-auth { margin-bottom: 12px; display:flex; gap:10px; flex-wrap:wrap; }
.cm-auth form { display:flex; gap:8px; align-items:center; }
.cm-auth input { padding:6px 10px; border:1px solid #d1d5db; border-radius:8px; }
.cm-auth button { padding:8px 12px; border:0; border-radius:8px; background:#2563eb; color:#fff; font-weight:600; }
.cm-auth-ok { color:#059669; font-weight:600; }
#comments .cm-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid #e6a7a7; /* a bit darker to match bg */
  border-radius: 8px;
  background: #ffc4c4;       /* your chosen color */
  color: #1f2937;            /* darker text for AAA contrast */
  font-size: 0.95rem;
}

#comments .cm-note__icon {
  display: inline-flex;
  line-height: 0;
  opacity: 0.9;              /* subtle, but keeps contrast */
}

/* Links inside the note (if any) */
#comments .cm-note a {
  color: inherit;
  text-decoration: underline;
}
#comments .cm-note a:hover { text-decoration: none; }

/* Dark mode tweak */
@media (prefers-color-scheme: dark) {
  #comments .cm-note {
    background: #4a1f1f;     /* deeper, less luminous red */
    border-color: #7a2c2c;
    color: #fee2e2;          /* light text for contrast */
  }
  #comments .cm-note a { color: inherit; }
}