.comments-panel {
  --comments-blue: var(--site-primary);
  --comments-blue-dark: var(--site-primary);
  --comments-navy: #10204a;
  --comments-muted: #6680ad;
  --comments-line: #dce8fa;
  background: rgba(255, 255, 255, .97);
  border: 1px solid #e4edf9;
  border-radius: 1.45rem;
  box-shadow: 0 12px 34px rgba(34, 83, 146, .06);
  padding: 1rem;
  scroll-margin-top: 6rem;
}

.comments-panel-header,
.comments-panel-title,
.comments-panel-actions,
.comments-panel-filters {
  display: flex;
  align-items: center;
}

.comments-panel-header {
  justify-content: space-between;
  gap: .85rem;
  margin-bottom: .7rem;
  background: transparent !important;
}

.comments-panel-title {
  gap: .65rem;
  min-width: 0;
  color: var(--comments-navy);
}

.comments-panel-title :is(svg, i[data-lucide]) {
  width: 1.55rem;
  height: 1.55rem;
  color: var(--comments-blue);
  stroke-width: 2.35;
}

.comments-panel-title h2 {
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: normal;
}

.comments-panel-count {
  color: var(--comments-muted);
  font-size: .72rem;
  font-style: italic;
  font-weight: 800;
  white-space: nowrap;
}

.comments-panel-actions {
  gap: .65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.comments-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.45rem;
  padding: .6rem 1rem;
  border: 1px solid color-mix(in srgb, var(--comments-blue) 24%, transparent);
  border-radius: .75rem;
  background: color-mix(in srgb, var(--comments-blue) 5%, #fff);
  color: var(--comments-blue);
  font-size: .75rem;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.comments-action-button:hover {
  border-color: color-mix(in srgb, var(--comments-blue) 35%, transparent);
  background: color-mix(in srgb, var(--comments-blue) 9%, #fff);
  color: var(--comments-blue);
}

.comments-action-button:active {
  transform: translateY(1px);
}

.comments-action-button :is(svg, i[data-lucide]) {
  width: 1rem;
  height: 1rem;
}

.comments-panel-filters {
  gap: .55rem;
  margin-bottom: .75rem;
  overflow-x: auto;
  padding-bottom: .1rem;
  scrollbar-width: thin;
}

.comments-filter-button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
  min-height: 2.15rem;
  padding: .48rem .9rem;
  border: 1px solid var(--comments-line);
  border-radius: 999px;
  background: #f8fbff;
  color: #31588f;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.comments-filter-button:hover {
  border-color: color-mix(in srgb, var(--comments-blue) 40%, transparent);
  color: var(--comments-blue);
}

.comments-filter-button.is-active {
  border-color: var(--comments-blue);
  background: var(--comments-blue);
  color: #fff;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--comments-blue) 18%, transparent);
}

.comments-filter-button :is(svg, i[data-lucide]) {
  width: .95rem;
  height: .95rem;
}

@media (max-width: 640px) {
  .comments-panel {
    border-radius: 1.15rem;
    padding: .8rem;
  }

  .comments-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .comments-panel-actions {
    width: 100%;
    justify-content: stretch;
  }

  .comments-action-button {
    flex: 1 1 0;
  }
}

.dark .comments-panel {
  --comments-navy: #f1f5f9;
  --comments-muted: #94a3b8;
  --comments-line: #334155;
  background: rgba(30, 41, 59, .93);
  border-color: #334155;
  box-shadow: none;
}

.dark .comments-panel-header {
  background: transparent !important;
}

.dark .comments-action-button,
.dark .comments-filter-button {
  background: #0f172a;
  color: var(--comments-blue);
}

.dark .comments-filter-button.is-active {
  background: var(--comments-blue);
  border-color: var(--comments-blue);
  color: #fff;
}

.comment-composer {
  margin-bottom: .75rem;
  border: 1px solid var(--comments-line, #dce8fa);
  border-radius: .85rem;
  background: #fff;
  overflow: hidden;
  scroll-margin-top: 6rem;
}

.comment-composer-main {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .65rem;
  padding: .48rem .55rem;
}

.comment-composer-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  background: #edf3fc;
  color: #7a91b5;
}

.comment-composer-avatar svg,
.comment-composer-photo :is(svg, i[data-lucide]) {
  width: 1.05rem;
  height: 1.05rem;
}

.comment-composer-input {
  min-width: 0;
  width: 100%;
  min-height: 2.45rem;
  max-height: 10rem;
  padding: .65rem .8rem;
  border: 1px solid #e2eaf7;
  border-radius: .65rem;
  background: #fff;
  color: #29466f;
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  transition: min-height .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.comment-composer-input::placeholder {
  color: #7b8eaf;
  opacity: 1;
}

.comment-composer-input:focus {
  border-color: var(--comments-blue, #0969f6);
  box-shadow: 0 0 0 3px rgba(9, 105, 246, .1);
}

.comment-composer-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: #28518f;
  cursor: pointer;
}

.comment-composer-photo:hover {
  background: #edf4ff;
}

.comment-composer-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: .55rem 1rem;
  border-radius: .7rem;
  background: var(--comments-blue, #0969f6);
  color: #fff;
  font-size: .73rem;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 7px 15px rgba(9, 105, 246, .16);
  border: 1px solid var(--comments-blue, #0969f6);
  cursor: pointer;
}

.comment-composer-submit:disabled {
  border-color: #9aa9be;
  background: #9aa9be;
  box-shadow: none;
  cursor: wait;
}

.comment-composer.is-expanded .comment-composer-main {
  border-bottom: 1px solid var(--comments-line, #dce8fa);
  background: #f8fbff;
}

.comment-composer.is-expanded .comment-composer-input {
  min-height: 4.8rem;
}

.comment-form-body {
  padding: .9rem;
  background: #fbfdff;
}

.comment-form-body[hidden] {
  display: none !important;
}

.comment-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .75rem;
}

.comment-form-field {
  display: block;
}

.comment-form-label {
  display: block;
  margin-bottom: .3rem;
  color: #334a70;
  font-size: .7rem;
  font-weight: 850;
}

.comment-form-control {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid #d7e2f2;
  border-radius: .65rem;
  background: #fff;
  color: #13264b;
  font-size: .78rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.comment-form-control:focus {
  border-color: var(--comments-blue, #0969f6);
  box-shadow: 0 0 0 3px rgba(9, 105, 246, .1);
}

.comment-file-input {
  display: block;
  width: 100%;
  color: #6f82a3;
  font-size: .7rem;
}

.comment-file-input::file-selector-button {
  margin-right: .55rem;
  padding: .55rem .7rem;
  border: 0;
  border-radius: .55rem;
  background: #eaf2ff;
  color: #24518e;
  font-size: .7rem;
  font-weight: 850;
  cursor: pointer;
}

.comment-form-help {
  display: block;
  margin-top: .25rem;
  color: #8291aa;
  font-size: .62rem;
  font-weight: 650;
}

.comment-captcha {
  display: flex;
  align-items: flex-end;
  gap: .55rem;
}

.comment-captcha {
  margin-top: .75rem;
}

.comment-captcha-question {
  display: block;
  min-height: 1rem;
  margin-bottom: .25rem;
  color: #1765c7;
  font-size: .68rem;
  font-weight: 850;
}

.comment-captcha-input {
  width: 6rem;
  text-align: center;
  font-weight: 850;
}

.comment-refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.4rem;
  border-radius: .65rem;
  font-size: .73rem;
  font-weight: 850;
  cursor: pointer;
  transition: .2s ease;
}

.comment-refresh-button {
  width: 2.4rem;
  border: 1px solid #d7e2f2;
  background: #fff;
  color: #4e6993;
}

.comment-form-note {
  margin: .55rem 0 0;
  color: #8492a8;
  font-size: .62rem;
  font-weight: 650;
}

.comment-form-message {
  margin-top: .6rem;
  padding: .65rem .75rem;
  border: 1px solid;
  border-radius: .65rem;
  font-size: .7rem;
  font-weight: 750;
}

@media (max-width: 640px) {
  .comment-composer-main {
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    gap: .45rem;
  }

  .comment-composer-avatar {
    width: 2.1rem;
    height: 2.1rem;
  }

  .comment-composer-submit {
    min-height: 2.2rem;
    padding: .5rem .7rem;
  }

  .comment-form-grid {
    grid-template-columns: 1fr;
  }

  .comment-composer-submit {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
  }
}

.dark .comment-composer,
.dark .comment-form-control,
.dark .comment-refresh-button {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

.dark .comment-composer.is-expanded .comment-composer-main,
.dark .comment-form-body {
  background: #111c31;
}

.dark .comment-composer-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

.dark .comment-form-label {
  color: #cbd5e1;
}

.shared-comment-list {
  display: grid;
  gap: .45rem;
}

.shared-comment-card {
  display: grid;
  grid-template-columns: minmax(9.5rem, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem 1rem;
  position: relative;
  padding: .7rem;
  border: 1px solid var(--comments-line, #dce8fa);
  border-radius: .8rem;
  background: #fff;
  box-shadow: 0 3px 12px rgba(38, 83, 145, .025);
}

.shared-comment-card[hidden] {
  display: none !important;
}

.shared-comment-card.is-comment-target {
  border-color: color-mix(in srgb, var(--site-primary) 72%, white);
  animation: comment-target-highlight 3.2s ease-out;
}

@keyframes comment-target-highlight {
  0%, 28% { box-shadow: 0 0 0 .24rem color-mix(in srgb, var(--site-primary) 28%, transparent), 0 8px 24px rgb(15 23 42 / .12); }
  100% { box-shadow: 0 3px 12px rgba(38, 83, 145, .025); }
}

@media (prefers-reduced-motion: reduce) {
  .shared-comment-card.is-comment-target { animation: none; box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--site-primary) 24%, transparent); }
}

.comment-author-column {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  align-self: start;
}

.comment-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  border-radius: 999px;
  background: #e8eef7;
  color: #536b91;
  font-size: .88rem;
  font-weight: 900;
}

.comment-author-meta {
  min-width: 0;
}

.comment-author-name {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--comments-navy, #10204a);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-date {
  display: block;
  margin-top: .22rem;
  color: #7190c0;
  font-size: .62rem;
  font-weight: 750;
  line-height: 1.2;
}

.comment-content-column {
  min-width: 0;
}

.comment-text {
  margin: 0;
  color: #29466f;
  font-size: .74rem;
  font-weight: 620;
  line-height: 1.55;
}

.comment-toggle {
  display: inline;
  margin-left: .2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--comments-blue, #0969f6);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.comment-votes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .45rem;
}

.comment-votes form {
  display: inline;
  margin: 0;
}

.comment-vote-button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.7rem;
  padding: .25rem .55rem;
  border: 1px solid #dce7f7;
  border-radius: 999px;
  background: #f8fbff;
  color: #47658f;
  font-size: .62rem;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.comment-vote-button:hover,
.comment-vote-button.is-active {
  border-color: #a9c8f6;
  background: #eaf3ff;
  color: #0c60d8;
}

.comment-vote-button :is(svg, i[data-lucide]) {
  width: .8rem;
  height: .8rem;
}

.comment-vote-count {
  min-width: 1.2rem;
  padding: .08rem .3rem;
  border: 1px solid #e5edf8;
  border-radius: .4rem;
  background: #fff;
  color: #6780a4;
  text-align: center;
  font-size: .58rem;
}

.comment-vote-message {
  color: #d33c59;
  font-size: .62rem;
  font-weight: 750;
}

.comment-photo-button {
  width: 4.6rem;
  height: 4.6rem;
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid #d5e2f3;
  border-radius: .7rem;
  background: #eef3fa;
  cursor: zoom-in;
  transition: opacity .2s ease, transform .2s ease;
}

.comment-photo-button:hover {
  opacity: .9;
  transform: scale(1.02);
}

.comment-photo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-photo-column {
  position: relative;
  justify-self: end;
}

.comment-photo-count {
  position: absolute;
  right: .35rem;
  bottom: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .22rem .38rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: .38rem;
  background: rgba(15, 34, 66, .82);
  color: #fff;
  font-size: .58rem;
  font-weight: 900;
  line-height: 1;
}

.comment-photo-count :is(svg, i[data-lucide]) {
  width: .7rem;
  height: .7rem;
}

.comment-search-images {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.comments-empty-state {
  padding: 2rem 1rem;
  border: 1px dashed var(--comments-line, #dce8fa);
  border-radius: .8rem;
  color: #7185a5;
  text-align: center;
  font-size: .72rem;
  font-weight: 750;
}

.comments-empty-state :is(svg, i[data-lucide]) {
  width: 2rem;
  height: 2rem;
  margin: 0 auto .45rem;
  color: #a9bad2;
}

.comments-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: .7rem;
}

.comments-load-more-wrap[hidden],
.comments-empty-state[hidden] {
  display: none !important;
}

.comments-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-width: 14rem;
  min-height: 2rem;
  padding: .4rem .9rem;
  border: 1px solid #dce7f7;
  border-radius: 999px;
  background: #eef5ff;
  color: #1767d5;
  font-size: .68rem;
  font-weight: 850;
  cursor: pointer;
}

.comments-load-more:hover {
  border-color: #b7d1f5;
  background: #e1eeff;
}

.comments-load-more :is(svg, i[data-lucide]) {
  width: .9rem;
  height: .9rem;
}

@media (max-width: 780px) {
  .shared-comment-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .comment-author-column {
    grid-column: 1;
    grid-row: 1;
  }

  .comment-content-column {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .comment-photo-column {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}

@media (max-width: 420px) {
  .shared-comment-card {
    padding: .65rem;
  }

  .comment-avatar {
    width: 2.3rem;
    height: 2.3rem;
    flex-basis: 2.3rem;
  }

  .comment-photo-button,
  .comment-photo-button img {
    width: 3.8rem;
    height: 3.8rem;
  }

  .comments-load-more {
    width: 100%;
    min-width: 0;
  }
}

.dark .shared-comment-card {
  background: #0f172a;
  border-color: #334155;
}

.dark .comment-text {
  color: #cbd5e1;
}

.dark .comment-vote-button,
.dark .comment-vote-count,
.dark .comments-load-more {
  background: #111c31;
  border-color: #334155;
  color: #aebed5;
}