/*
 * Discussion attached to a record. It is the quietest thing on the screen it
 * lives on: a comment is context for the data above it, not a second subject.
 * The block used to be a bordered, textured, shadowed panel with a 2px radius —
 * a hard square tile that pulled the eye before the record it commented on, and
 * that stacked into a wall when a record had many of them. It is now a plain
 * surface with the product radius, and its rows are separated by hairlines
 * instead of each getting a box of its own.
 */
.comments-component {
  --comments-border-color: var(--fs-color-border-subtle);
}

.comments-component .comments-component__section {
  display: grid;
  gap: var(--fs-space-2);
  padding: var(--fs-space-3);
  border: 1px solid var(--comments-border-color);
  border-radius: var(--fs-radius-md);
  background: var(--fs-color-surface);
}

.comments-component--compact .comments-component__section {
  gap: 6px;
  padding: var(--fs-space-2) var(--fs-space-3);
}

/*
 * With nothing to show the block is one muted line saying so. Keeping a framed
 * panel around "Коментарі · немає" gave an empty discussion the same weight as
 * a full one, which is how a record with ten targets became ten empty boxes.
 */
.comments-component--compact.comments-component--empty .comments-component__section {
  padding: 0;
  border: 0;
  background: transparent;
}

.comments-component__body {
  display: grid;
  gap: 10px;
}

.comments-component--compact .comments-component__body {
  gap: 7px;
}

.comments-component--compact.comments-component--empty .comments-component__body {
  gap: 0;
}

.comments-component__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* A section label, in the weight every other structural label on the page uses. */
.comments-component__title {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comments-component__add-button {
  flex: 0 0 auto;
  justify-content: center;
}

.comments-component__status,
.comments-component__empty {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.35;
}

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

.comments-component__status--error {
  color: var(--danger, var(--fs-color-danger));
}

.comments-component__list,
.comments-component__previous-list {
  display: grid;
  gap: 12px;
}

/*
 * A comment is a paragraph with an attribution, not a card. Boxing each one
 * inside a boxed block gave every remark two frames, and a thread of five read
 * as five records rather than as one conversation.
 *
 * Обговорення говорить тією ж мовою, що й історія змін поруч: точка на вертикальній лінії, автор і час одним
 * рядком, текст під ними. Раніше репліки різали рядки-волосинки — та сама мова, що в таблиці, а не в стрічці.
 */
.comments-component__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fs-space-3);
  padding: 2px 0 2px 20px;
}

.comments-component__row::before {
  position: absolute;
  top: 7px;
  left: 3px;
  width: 8px;
  height: 8px;
  background: var(--fs-color-text-muted);
  border-radius: 50%;
  content: "";
}

.comments-component__row:not(:last-child)::after {
  position: absolute;
  top: 20px;
  bottom: -14px;
  left: 6.5px;
  width: 1px;
  background: var(--fs-color-border);
  content: "";
}

.comments-component__content {
  min-width: 0;
}

.comments-component__meta {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  margin-bottom: 2px;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  line-height: 1.25;
  font-weight: 500;
}

.comments-component__meta > * + *::before {
  margin-right: var(--fs-space-2);
  color: var(--fs-color-border);
  content: "\00b7";
}

.comments-component__text {
  color: var(--fs-color-text);
  font-size: var(--fs-text-sm);
  line-height: 1.45;
  font-weight: 400;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.comments-component__row-action {
  justify-self: end;
  white-space: nowrap;
}

.comments-component__previous {
  display: grid;
  gap: 7px;
}

.comments-component--compact .comments-component__previous {
  gap: 5px;
}

.comments-component__previous-summary {
  cursor: pointer;
  color: var(--fs-color-primary-text);
  font-size: var(--fs-text-xs);
  line-height: 1.25;
  font-weight: 600;
}

.comments-component__previous-summary::marker {
  color: var(--fs-color-primary-text);
}

/* Розкриті попередні репліки продовжують ту саму стрічку, тому їх відділяє відступ, а не ще одна лінія. */
.comments-component__previous-list {
  padding-top: 4px;
}

.nomenclature-history-toggle {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin-top: 8px;
}

.nomenclature-history-toggle__summary {
  cursor: pointer;
  color: var(--fs-color-primary-text);
  font-size: var(--fs-text-xs);
  line-height: 1.25;
  font-weight: 600;
}

.nomenclature-history-toggle__summary::marker {
  color: var(--fs-color-primary-text);
}

.nomenclature-history__list {
  display: grid;
  gap: 0;
  min-width: 0;
}

/* History repeats the comment anatomy one level down: rows, not cards. */
.nomenclature-history__entry {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 0;
}

.nomenclature-history__entry + .nomenclature-history__entry {
  border-top: 1px solid var(--fs-color-border-subtle);
}

.nomenclature-history__message {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--fs-color-text);
  font-size: var(--fs-text-sm);
  line-height: 1.45;
}

.nomenclature-history__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-2);
  flex-wrap: wrap;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  line-height: 1.25;
  font-weight: 500;
}

.nomenclature-history__empty {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.35;
}

.nomenclature-history__field {
  color: var(--fs-color-text-secondary);
  font-weight: 600;
}

.nomenclature-history__from,
.nomenclature-history__to {
  display: inline-block;
  max-width: 100%;
  padding: 2px 7px;
  overflow-wrap: anywhere;
  border-radius: var(--fs-radius-pill);
  font-size: 11px;
  line-height: 1.2;
  vertical-align: baseline;
}

.nomenclature-history__from {
  color: var(--fs-color-danger-text);
  background: var(--fs-color-danger-subtle);
}

.nomenclature-history__to {
  color: var(--fs-color-success-text);
  background: var(--fs-color-success-subtle);
}

.comments-component__modal {
  width: min(560px, 100%);
}

/*
 * The comment belongs to the open feature record, so its desktop backdrop
 * starts at that record's canvas. Dimming the persistent company/navigation
 * shell made the top bar look disabled even though the dialog did not replace
 * or navigate the shell. The native dialog remains in the browser top layer;
 * only its painted backdrop is clipped to the content viewport.
 */
@media (min-width: 901px) {
  .comments-component__modal::backdrop {
    clip-path: inset(
      var(--comments-backdrop-top, var(--fs-topbar-height))
      0
      0
      var(--comments-backdrop-left, var(--fs-sidebar-width))
    );
  }
}

/* The dialog is already the surface; the editor inside it needs no second one. */
.comments-component__form {
  display: grid;
  gap: var(--fs-space-3);
}

.comments-component__close {
  flex: 0 0 auto;
}

.comments-component__field {
  display: grid;
  gap: 6px;
}

.comments-component__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.comments-component__actions .action-button {
  flex: 0 0 auto;
}

.comments-component__error {
  padding: var(--fs-space-2) var(--fs-space-3);
  border: 1px solid var(--fs-color-danger-line);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-color-danger-subtle);
  color: var(--fs-color-danger-text);
  font-size: var(--fs-text-sm);
  font-weight: 500;
}

@media (max-width: 900px) {
  .comments-component__form {
    gap: var(--fs-space-2);
  }

  .comments-component__field textarea {
    min-height: 120px;
  }

  .comments-component__actions .action-button {
    flex: 1 1 100%;
    width: 100%;
    min-height: 40px;
  }

  .comments-component--compact .comments-component__section {
    padding-inline: var(--fs-space-2);
  }

  .comments-component__meta {
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

@media (max-width: 520px) {
  .comments-component__modal {
    bottom: 0;
    box-sizing: border-box;
    width: 100vw;
    max-height: 100dvh;
    padding-bottom: calc(
      var(--fs-mobile-bottombar-height)
      + env(safe-area-inset-bottom)
      + var(--fs-space-2)
    );
  }

  .comments-component__modal .fs-dialog__card {
    max-height: calc(
      100dvh
      - var(--fs-mobile-bottombar-height)
      - env(safe-area-inset-bottom)
      - (2 * var(--fs-space-2))
    );
  }
}