/* Joomla Center — JoomComments, «Карточки диалога».
   Подключить после Bootstrap, template.css, custom.css и article.css.
   Область действия: только #jc[data-template="bootstrap5"].
   В custom.css исключить поля #jc из старого height:100%!important:
   фрагмент custom-css-replacement.css содержит точную замену этого правила.
   !important переопределяет только служебные классы Bootstrap с !important.
   Пагинация оформляется отдельным общим файлом сайта. */

#jc[data-template="bootstrap5"] {
  --jcc-ink: #173c55;
  --jcc-muted: #61758c;
  --jcc-blue: #115a91;
  --jcc-line: #d8e1eb;
  --jcc-field: #cbd9e6;
  container: jc-comments / inline-size;
  min-inline-size: 0;
  margin-block: 32px 0;
  color: var(--jcc-ink);
  font: 400 15px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: start;
}

#jc[data-template="bootstrap5"] *,
#jc[data-template="bootstrap5"] *::before,
#jc[data-template="bootstrap5"] *::after { box-sizing: border-box; }

/* Заголовок и список. */
#jc[data-template="bootstrap5"] .comments-list-header {
  gap: 16px !important;
  margin: 0 0 20px !important;
  padding: 0;
}
#jc[data-template="bootstrap5"] .comments-list-header h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--jcc-ink);
  font-family: inherit;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-transform: none;
}
#jc[data-template="bootstrap5"] .comments-list-header h2::after { content: none; }
#jc[data-template="bootstrap5"] :is(.comments-list, .comment-item) {
  min-inline-size: 0;
  padding: 0;
}
#jc[data-template="bootstrap5"] .comment-item { margin: 0; }
#jc[data-template="bootstrap5"] .comment-card {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--jcc-line);
  border-radius: 10px;
  background: #fff;
  color: var(--jcc-ink);
  box-shadow: none;
}
#jc[data-template="bootstrap5"] .comment-card:hover {
  border-color: #b6ccdf;
  box-shadow: 0 3px 14px #173c5508;
}

/* Автор, роль, дата и постоянная ссылка. */
#jc[data-template="bootstrap5"] .comment-card > .comment-info {
  margin: 0;
  padding: 20px 22px 0;
  border: 0;
  background: none;
  color: var(--jcc-muted);
}
#jc[data-template="bootstrap5"] .comment-info > .flex-grow-1 { min-inline-size: 0; }
#jc[data-template="bootstrap5"] .comment-info > .flex-grow-1 > .d-flex {
  gap: 6px 18px !important;
  font-size: 12px;
  line-height: 1.6;
}
#jc[data-template="bootstrap5"] .createdby {
  flex-wrap: wrap;
  min-inline-size: 0;
  color: var(--jcc-ink);
  font-size: 14px;
  font-weight: 650;
}
#jc[data-template="bootstrap5"] .published {
  color: var(--jcc-muted);
  font-size: 12px;
  font-weight: 400;
}
#jc[data-template="bootstrap5"] :is(.createdby, .published) > [aria-hidden="true"] {
  color: #6b85a0;
  font-size: 13px;
}
#jc[data-template="bootstrap5"] .joomcomments-author-role {
  padding: 3px 7px;
  border: 0;
  border-radius: 5px;
  background-color: #edf1f5 !important;
  color: #63778b !important;
  font: 550 10.5px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: normal;
}
#jc[data-template="bootstrap5"] .joomcomments-author-role-registered {
  background-color: #eaf4f8 !important;
  color: #2b6f8e !important;
}
#jc[data-template="bootstrap5"] .joomcomments-author-role-administrator {
  background-color: #e6f1fb !important;
  color: #1b659d !important;
}
#jc[data-template="bootstrap5"] .comment-anchor {
  color: #7890a4;
  font: 400 12px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
  scroll-margin-block-start: 100px;
}
#jc[data-template="bootstrap5"] .comment-anchor:hover { color: var(--jcc-blue); }
#jc[data-template="bootstrap5"] .comment-card > .card-body { min-inline-size: 0; padding: 14px 22px 20px; }
#jc[data-template="bootstrap5"] .comment-body {
  min-inline-size: 0;
  color: var(--jcc-ink);
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere !important;
}
#jc[data-template="bootstrap5"] .comment-body p { margin: 0 0 10px; }
#jc[data-template="bootstrap5"] .comment-body > :last-child { margin-block-end: 0; }
#jc[data-template="bootstrap5"] .comment-body a { color: var(--jcc-blue); text-underline-offset: .18em; }
#jc[data-template="bootstrap5"] .comment-body img { max-inline-size: 100%; block-size: auto; }

/* Ответы. Убираем лишнее сужение от служебной колонки со стрелкой. */
#jc[data-template="bootstrap5"] .comments-list-child {
  margin-inline-start: 24px !important;
  padding-inline-start: 22px;
  border-inline-start: 2px solid #d9e7f2;
}
#jc[data-template="bootstrap5"] .comments-list-child > .comment-item > .d-flex {
  position: relative;
  display: block !important;
  min-inline-size: 0;
}
#jc[data-template="bootstrap5"] .comments-list-child > .comment-item > .d-flex > .pt-2 {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: -33px;
  padding: 0 !important;
}
#jc[data-template="bootstrap5"] .comments-list-child .comment-card { background: #fbfdff; }
#jc[data-template="bootstrap5"] .comment-parent-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  min-block-size: 24px;
  border-radius: 4px;
  background: #fff;
  color: #85a3bb !important;
  font-size: 12px;
  text-decoration: none;
}
#jc[data-template="bootstrap5"] .comment-parent-link:hover { color: var(--jcc-blue) !important; }

/* Действия: одинаковое скругление, спокойные второстепенные кнопки. */
#jc[data-template="bootstrap5"] .comments-buttons > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-inline-size: 100%;
  min-block-size: 36px;
  padding: 7px 11px;
  border: 1px solid #cbddeb;
  border-radius: 8px;
  background: #f7fbff;
  color: var(--jcc-blue);
  font: 400 12px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: normal;
  text-decoration: none;
  box-shadow: none;
}
#jc[data-template="bootstrap5"] .comments-buttons > .btn > [aria-hidden="true"] { margin-inline-end: 0 !important; }
#jc[data-template="bootstrap5"] .comments-buttons > .btn-outline-secondary {
  border-color: transparent;
  background: transparent;
  color: #6a8093;
}
#jc[data-template="bootstrap5"] .comments-buttons > .btn:hover {
  border-color: #96bddb;
  background: #e7f2fc;
  color: #0b4675;
}
#jc[data-template="bootstrap5"] .comments-buttons > .btn-outline-secondary:hover {
  border-color: var(--jcc-line);
  background: #f0f5fa;
  color: var(--jcc-blue);
}
#jc[data-template="bootstrap5"] .comments-list-header .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  min-block-size: 38px;
  padding: 8px;
  border: 1px solid var(--jcc-line);
  border-radius: 8px;
  background: #fff;
  color: var(--jcc-muted);
  box-shadow: none;
}
#jc[data-template="bootstrap5"] .comments-list-header .btn:hover {
  border-color: #a8c8e1;
  background: #eaf4fc;
  color: var(--jcc-blue);
}
#jc[data-template="bootstrap5"] .comments-list-footer {
  justify-content: flex-end;
  margin: 12px 0 28px !important;
}
#jc[data-template="bootstrap5"] .comments-list-footer > .btn {
  min-block-size: 36px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: #6a8093;
  font: 400 12px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: normal;
  text-decoration: none;
  box-shadow: none;
}
#jc[data-template="bootstrap5"] .comments-list-footer > .btn:hover { border-color: var(--jcc-line); background: #f0f5fa; color: var(--jcc-blue); }

/* Основная форма и та же форма при переносе внутрь ответа. */
#jc[data-template="bootstrap5"] #comments-form-container {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--jcc-line);
  border-radius: 10px;
  background-color: #fff !important;
  box-shadow: none;
}
#jc[data-template="bootstrap5"] #comments-form-container > .card-header {
  margin: 0;
  padding: 22px 24px 0;
  border: 0;
  background: none;
  color: var(--jcc-ink) !important;
  font-family: inherit;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.015em;
}
#jc[data-template="bootstrap5"] #comments-form-container > .card-body {
  container: jc-comment-form / inline-size;
  min-inline-size: 0;
  padding: 20px 24px 24px;
}
#jc[data-template="bootstrap5"] #comments-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px 20px !important;
  min-inline-size: 0;
  inline-size: 100%;
  margin: 0 !important;
  padding: 0;
  color: var(--jcc-ink);
  font-family: inherit;
}
#jc[data-template="bootstrap5"] #comments-form > * { grid-column: 1 / -1; min-inline-size: 0; }
#jc[data-template="bootstrap5"] #comments-form > .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: auto;
  align-items: start !important;
  gap: 7px !important;
  margin: 0;
}
#jc[data-template="bootstrap5"] #comments-form > .row > * { inline-size: 100%; max-inline-size: 100%; margin: 0; padding: 0; }
#jc[data-template="bootstrap5"] #comments-form > .row > .col-auto { order: -1; }
#jc[data-template="bootstrap5"] #comments-form .form-label { margin: 0; color: #536b80; font: 400 12px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#jc[data-template="bootstrap5"] #comments-form .form-control {
  min-inline-size: 0;
  inline-size: 100%;
  min-block-size: 43px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--jcc-field);
  border-radius: 8px;
  background: #fff;
  color: var(--jcc-ink);
  font: 400 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: none;
}
#jc[data-template="bootstrap5"] #comments-form .form-control:hover { border-color: #9bbbd5; }
#jc[data-template="bootstrap5"] #comments-form .form-control:focus {
  outline: none;
  border-color: #3d8ac3;
  box-shadow: 0 0 0 3px #1e73b51a;
}
#jc[data-template="bootstrap5"] #comments-form .form-control::placeholder { color: #8b9cad; opacity: 1; }
#jc[data-template="bootstrap5"] #comments-form-comment.form-control {
  min-block-size: 140px;
  block-size: 146px;
  padding: 13px 14px;
  border-radius: 8px 8px 0 0 !important;
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
}
#jc[data-template="bootstrap5"] :is(.grippie, .counterpanel) {
  min-inline-size: 0;
  padding: 5px 12px !important;
  border: 1px solid var(--jcc-field) !important;
  border-block-start: 0 !important;
  border-radius: 0 0 8px 8px !important;
  background-color: #f7fafd !important;
  color: #7b8fa1 !important;
  font-size: 11px;
  line-height: 1.5;
  text-align: end;
}
#jc[data-template="bootstrap5"] .counter { color: inherit; font: inherit; }
#jc[data-template="bootstrap5"] .smiles {
  flex-wrap: nowrap !important;
  gap: 2px !important;
  max-inline-size: 100%;
  margin: 0 !important;
  padding: 2px 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #b7cde0 #eff5fa;
}
#jc[data-template="bootstrap5"] .smiles::-webkit-scrollbar { block-size: 5px; height: 5px; }
#jc[data-template="bootstrap5"] .smiles::-webkit-scrollbar-track { border-radius: 10px; background: #eff5fa; }
#jc[data-template="bootstrap5"] .smiles::-webkit-scrollbar-thumb { border-radius: 10px; background: #b7cde0; }
#jc[data-template="bootstrap5"] .smile { flex: 0 0 auto; max-inline-size: 24px; max-block-size: 24px; padding: 2px; border-radius: 5px; cursor: pointer; }
#jc[data-template="bootstrap5"] .smile:hover { background: #e6f0fa; }

/* Существующая капча: изображение, обновление и поле ввода. */
#jc[data-template="bootstrap5"] .captcha-container {
  display: grid;
  grid-template-columns: minmax(0, 121px) minmax(0, 200px);
  gap: 5px 18px;
  align-items: start;
  padding: 14px 16px !important;
  border: 1px solid #e1e9f0 !important;
  border-radius: 8px !important;
  background: #f8fbfe;
}
#jc[data-template="bootstrap5"] .captcha-container > br { display: none; }
#jc[data-template="bootstrap5"] #comments-form-captcha-image {
  grid-column: 1;
  grid-row: 1;
  max-inline-size: 100%;
  block-size: auto;
  border: 1px solid #dbe5ed;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
#jc[data-template="bootstrap5"] .captcha-reload { grid-column: 1; grid-row: 2; margin: 0 !important; font-size: 11px; line-height: 1.5; }
#jc[data-template="bootstrap5"] .captcha-reload a { color: #6b85a0; text-decoration: none; }
#jc[data-template="bootstrap5"] .captcha-reload a:hover { color: var(--jcc-blue); }
#jc[data-template="bootstrap5"] #comments-form-captcha.form-control {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  min-block-size: 39px;
  padding: 8px 12px;
  font-size: 13px;
}
#jc[data-template="bootstrap5"] #comments-form-buttons { margin: 0; padding: 0; }
#jc[data-template="bootstrap5"] #comments-form-buttons > .btn {
  min-block-size: 42px;
  padding: 10px 17px;
  border: 1px solid var(--jcc-field);
  border-radius: 8px;
  background: #fff;
  color: #5e768b;
  font: 400 14px/20px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: normal;
  box-shadow: none;
}
#jc[data-template="bootstrap5"] #comments-form-buttons > .btn:hover { border-color: #9dbed9; background: #edf5fc; color: var(--jcc-blue); }
#jc[data-template="bootstrap5"] #comments-form-buttons > #comments-form-send { border-color: var(--jcc-blue); background: var(--jcc-blue); color: #fff; }
#jc[data-template="bootstrap5"] #comments-form-buttons > #comments-form-send:hover { border-color: #0b4675; background: #0b4675; color: #fff; box-shadow: 0 3px 8px #115a9126; }
#jc[data-template="bootstrap5"] .comments-inline-edit {
  container: jc-comment-form / inline-size;
  min-inline-size: 0;
  padding: 18px 22px 20px !important;
  border-color: var(--jcc-line) !important;
  background-color: #f5f9fd !important;
}
#jc[data-template="bootstrap5"] #comments-form-message { margin: 0; font-size: 13px; line-height: 1.6; border-radius: 8px; }
#jc[data-template="bootstrap5"] #comments-form :is(.form-control.error, .form-control.invalid, .form-control[aria-invalid="true"]) { border-color: #bd4b4b; }
#jc[data-template="bootstrap5"] :is(.btn, .comment-anchor, .comment-parent-link, .captcha-reload a, .smile):focus-visible { outline: 2px solid #397fb8; outline-offset: 3px; }

/* Адаптация зависит от ширины компонента, включая узкие вкладки проектов. */
@container jc-comments (max-width: 540px) {
  #jc[data-template="bootstrap5"] .comments-list-header h2 { font-size: 23px; }
  #jc[data-template="bootstrap5"] .comment-card > .comment-info { gap: 7px !important; padding: 17px 16px 0; }
  #jc[data-template="bootstrap5"] .comment-info > .flex-grow-1 > .d-flex { flex-direction: column; align-items: flex-start !important; }
  #jc[data-template="bootstrap5"] .createdby > .icon-user { display: none; }
  #jc[data-template="bootstrap5"] .published { font-size: 11px; }
  #jc[data-template="bootstrap5"] .joomcomments-author-role { padding-inline: 6px; font-size: 10px; }
  #jc[data-template="bootstrap5"] .comment-card > .card-body { padding: 12px 16px 16px; }
  #jc[data-template="bootstrap5"] .comment-body { font-size: 14px; }
  #jc[data-template="bootstrap5"] .comments-buttons { justify-content: flex-start !important; }
  #jc[data-template="bootstrap5"] .comments-buttons > .btn-outline-secondary { padding-inline-start: 0; font-size: 11px; }
  #jc[data-template="bootstrap5"] .comments-list-child { margin-inline-start: 10px !important; padding-inline-start: 13px; }
  #jc[data-template="bootstrap5"] .comments-list-child > .comment-item > .d-flex > .pt-2 { inset-inline-start: -24px; }
  #jc[data-template="bootstrap5"] .comments-list-child .comments-list-child { margin-inline-start: 0 !important; padding-inline-start: 10px; }
  #jc[data-template="bootstrap5"] .comments-list-footer { justify-content: flex-start; margin-block-end: 22px !important; }
  #jc[data-template="bootstrap5"] #comments-form-container > .card-header { padding: 20px 18px 0; }
  #jc[data-template="bootstrap5"] #comments-form-container > .card-body { padding: 17px 18px 20px; }
  #jc[data-template="bootstrap5"] #comments-form { grid-template-columns: minmax(0, 1fr); gap: 16px !important; }
  #jc[data-template="bootstrap5"] .comments-inline-edit { padding: 16px !important; }
  #jc[data-template="bootstrap5"] .captcha-container { grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: 5px 12px; padding: 12px !important; }
  #jc[data-template="bootstrap5"] #comments-form-buttons > .btn { padding: 9px 13px; font-size: 13px; }
}
@container jc-comment-form (max-width: 220px) {
  #jc[data-template="bootstrap5"] .captcha-container { grid-template-columns: minmax(0, 1fr); }
  #jc[data-template="bootstrap5"] #comments-form-captcha.form-control { grid-column: 1; grid-row: 3; }
  #jc[data-template="bootstrap5"] #comments-form-captcha-image { inline-size: 104px; }
}
/* Не увеличивать масштаб страницы при фокусе поля на телефоне. */
@media (max-width: 600px) {
  #jc[data-template="bootstrap5"] #comments-form .form-control { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  #jc[data-template="bootstrap5"] :is(.comment-card, .btn, .comment-anchor, .comment-parent-link, .captcha-reload a, .smile, .form-control) {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  #jc[data-template="bootstrap5"] :is(.comment-card, .btn, .comment-anchor, .comment-parent-link, .captcha-reload a, .smile, .form-control) { transition: none; }
}