/* ==========================================================================
   Notes — composer + threaded notes list (cases, reviews, firms, complaints…)
   ========================================================================== */
.notes-form {
  margin-bottom: var(--space-4);
}

.notes-form__editor {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.notes-form__editor:focus-within {
  border-color: var(--color-primary-green);
  box-shadow: var(--focus-ring);
}

.notes-form__error {
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--tint-danger-10);
  color: var(--color-danger);
  font-size: var(--font-size-small);
}

.notes-form__textarea {
  min-height: 80px;
  padding: var(--space-2);
  border: none;
  outline: none;
  font-family: var(--font-family-base);
  font-size: var(--font-size-medium);
  line-height: 1.55;
  color: var(--color-text);
}

.notes-form__textarea:empty:before {
  content: attr(placeholder);
  color: var(--color-text-faint);
}

.notes-form__textarea:focus {
  outline: none;
}

.notes-form__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-2);
}

.notes-form__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Highlight (mark) styling for the editor and rendered notes */
.notes-form__textarea mark,
.note__text mark {
  background-color: var(--tint-yellow-28, #fff1a8);
  color: inherit;
  padding: 0 2px;
  border-radius: var(--radius-sm);
}

.trix-button.trix-button--highlight {
  width: auto;
  padding: 0 var(--space-2);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
}

/* --- Firm record's Notes page --- */
/* The composer and thread sit in a card of their own there, so the gap between
   them is set here rather than by the panel around them (as on a case). */
.firm-notes-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.firm-notes-thread__empty {
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

/* --- Threaded list --- */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.note:first-child {
  border-color: var(--color-primary-green);
}

.note__avatar {
  flex-shrink: 0;
}

.note__avatar-circle {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
}

.note__content {
  flex: 1;
  min-width: 0;
}

.note__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 2px;
}

.note__author {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-small);
  color: var(--color-primary-dark);
}

.note__timestamp {
  font-size: var(--font-size-xsmall, 0.72rem);
  color: var(--color-text-faint);
}

.note__text {
  font-size: var(--font-size-small);
  color: var(--color-text);
  line-height: 1.5;
  word-wrap: break-word;
}

.note__text p {
  margin: 0 0 var(--space-1) 0;
}

.note__text p:last-child {
  margin-bottom: 0;
}