/* Page integration. The same stylesheet is loaded inside each Halo shadow root. */
html.pix-comment-modal-open { overflow: hidden; }
.topic_comments_wrap {
  margin-top: 18px;
  padding: 18px 0 0;
  border-top: 1px solid var(--border-color, #ecdde5);
  border-radius: 0;
  background: transparent !important;
}
.topic_comments_wrap.pix-comments-empty { margin: 0; padding: 0; border: 0; }
.post_footer_meta button.show_comment {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--light-text-color, #856b7d);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.post_footer_meta button.show_comment i { margin: 0; font-size: 15px; }
.post_footer_meta button.show_comment:hover { background: var(--btn-light-color, #f4e4ec); color: var(--pix-theme); }
.post_footer_meta .comment-count { font-size: 11px; opacity: .75; }

/* Shadow-root presentation: stable public class names from CommentWidget 1.7. */
.pix-comments-enhanced,
.pix-comment-dialog {
  --note-text: #493745;
  --note-muted: #95838e;
  --note-accent: var(--pix-theme, #87536f);
  --note-line: #eee5eb;
  --note-soft: #faf6f8;
  --note-surface: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--note-text);
  font-size: 14px;
  line-height: 1.7;
}
.pix-comments-enhanced.dark,
.pix-comment-dialog.dark {
  --note-text: #e9dce5;
  --note-muted: #b39ead;
  --note-accent: #e6abc6;
  --note-line: #4b394a;
  --note-soft: #342937;
  --note-surface: #281e2b;
  color-scheme: dark;
}
.pix-comments-enhanced .comment-form { display: none !important; }
.pix-comments-enhanced .comment-timeline { margin-top: 0; }
.pix-comments-enhanced.pix-comments-empty .comment-timeline { display: none; }
.pix-comments-enhanced .comment-timeline > div:first-child { justify-content: space-between; gap: 12px; }
.pix-comments-enhanced .comment-timeline > div:first-child span { color: var(--note-muted); font-size: 12px; font-weight: 500; letter-spacing: .03em; }
.pix-comments-enhanced .comment-timeline > div:nth-child(2) { margin-top: 8px; }
.pix-comment-compose {
  border: 0;
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--note-soft);
  color: var(--note-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 200ms ease, background-color 200ms ease;
}
.pix-comment-compose:hover { transform: translateY(-1px); background: var(--note-line); }
.pix-comments-enhanced .comment-item { padding: 18px 0; border-bottom: 1px solid var(--note-line); }
.pix-comments-enhanced .comment-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.pix-comments-enhanced :is(.comment-item, .reply-item) > div { gap: 12px; }
.pix-comments-enhanced :is(.comment-item, .reply-item) > div > .flex-1 { min-width: 0; }
.pix-comments-enhanced :is(.comment-avatar, .reply-avatar) > * {
  width: 32px;
  height: 32px;
  box-shadow: 0 0 0 3px var(--note-surface);
  background: var(--note-soft);
  color: var(--note-accent);
}
.pix-comments-enhanced :is(.avatar-fallback, .avatar-placeholder) { background: var(--note-soft); color: var(--note-accent); }
.pix-comments-enhanced :is(.comment-informations, .reply-informations) > div { flex-wrap: wrap; gap: 3px 10px; }
.pix-comments-enhanced :is(.comment-informations, .reply-informations) > div > div { color: var(--note-text); font-size: 13px; font-weight: 600; }
.pix-comments-enhanced :is(.comment-informations, .reply-informations) span[title] { color: var(--note-muted); font-size: 11px; font-weight: 400; }
.pix-comments-enhanced :is(.comment-content, .reply-content) { margin-top: 5px; }
.pix-comments-enhanced :is(.comment-content, .reply-content) pre {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--note-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.pix-comments-enhanced :is(.comment-actions, .reply-actions) { margin-top: 8px; gap: 10px; }
.pix-comments-enhanced :is(.comment-actions, .reply-actions) > span:not(.cursor-pointer) { display: none; }
.pix-comments-enhanced :is(.comment-actions, .reply-actions) [role='button'] {
  color: var(--note-muted);
  border-radius: 5px;
  font-size: 11px;
  cursor: pointer;
}
.pix-comments-enhanced :is(.comment-actions, .reply-actions) [role='button']:hover { color: var(--note-accent); }
.pix-comments-enhanced .comment-replies { padding: 2px 12px; margin-top: 12px; background: var(--note-soft); border-left: 2px solid var(--note-line); border-radius: 0 12px 12px 0; }
.pix-comments-enhanced .reply-item { padding: 12px 0; }
.pix-comments-enhanced .reply-avatar > * { width: 26px; height: 26px; box-shadow: none; }
.pix-comments-enhanced .comment-replies .divide-y > * { border-color: var(--note-line); }
.pix-comments-enhanced :is(button, a, [role='button']):focus-visible,
.pix-comment-dialog :is(button, a, textarea, input):focus-visible {
  outline: 2px solid var(--note-accent);
  outline-offset: 3px;
}

/* A native dialog stays above card transforms and traps keyboard focus. */
.pix-comment-dialog {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 28px;
  width: min(540px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--note-line);
  border-radius: 22px;
  background: var(--note-surface);
  box-shadow: 0 24px 90px #21132335;
}
.pix-comment-dialog:not([open]) { display: none; }
.pix-comment-dialog[open] { animation: pix-note-enter 260ms cubic-bezier(.22,1,.36,1); }
.pix-comment-dialog::backdrop { background: rgb(30 21 34 / 38%); backdrop-filter: blur(5px); }
.pix-comment-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.pix-comment-dialog-heading p { margin: 0 0 5px; color: var(--note-muted); font-size: 10px; letter-spacing: .18em; }
.pix-comment-dialog h2 { margin: 0; color: var(--note-text); font-size: 23px; font-weight: 600; letter-spacing: -.03em; line-height: 1.4; }
.pix-comment-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--note-soft);
  color: var(--note-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.pix-comment-dialog .comment-form { display: flex; margin: 0; }
.pix-comment-dialog .comment-form > div { min-width: 0; gap: 16px; }
.pix-comment-dialog .comment-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 154px;
  max-height: 40dvh;
  resize: vertical;
  padding: 15px 16px;
  border: 1px solid var(--note-line);
  border-radius: 14px;
  background: var(--note-soft);
  box-shadow: none;
  color: var(--note-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.8;
}
.pix-comment-dialog .comment-form .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pix-comment-dialog .comment-form input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--note-line);
  border-radius: 10px;
  box-shadow: none;
  background: var(--note-surface);
  color: var(--note-text);
  font: inherit;
  font-size: 12px;
}
.pix-comment-dialog :is(textarea, input)::placeholder { color: var(--note-muted); opacity: .85; }
.pix-comment-dialog .comment-form a { color: var(--note-muted); font-size: 11px; }
.pix-comment-dialog .comment-form button { border-radius: 999px; font-family: inherit; box-shadow: none; }
.pix-comment-dialog .comment-form button:not(:disabled) { background: var(--note-accent) !important; color: var(--note-surface) !important; }
.pix-comment-dialog .comment-form button:disabled { opacity: .65; background: var(--note-line) !important; color: var(--note-muted) !important; }
.pix-comment-dialog .btn-icon { color: inherit; }
.pix-comment-dialog :is(textarea, input):focus-visible { outline: 0; border-color: var(--note-accent); box-shadow: 0 0 0 3px rgb(135 83 111 / 10%); }
.pix-comment-dialog-note { margin: 18px 0 0; color: var(--note-muted); font-size: 11px; }
.pix-comment-status { display: block; color: var(--pix-theme, #87536f); font: 12px/1.7 -apple-system, 'PingFang SC', sans-serif; }
.pix-comment-status:empty { display: none; }
@keyframes pix-note-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 540px) {
  .pix-comment-dialog { padding: 22px; border-radius: 20px; }
  .pix-comment-dialog h2 { font-size: 21px; }
  .pix-comments-enhanced :is(.comment-informations, .reply-informations) > div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .pix-comments-enhanced .comment-replies { padding-left: 10px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pix-comment-dialog[open] { animation: none; }
  .pix-comment-compose { transition: none; transform: none; }
  .pix-comments-enhanced *, .pix-comments-enhanced *::before, .pix-comments-enhanced *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* The plugin still owns its spinner nodes; only their presentation is replaced. */
.pix-comment-spinner-source {
  display: none !important;
}

.pix-comment-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  vertical-align: middle;
  pointer-events: none;
}

.pix-comment-loader .pix-sakura {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.pix-comment-loader.is-compact {
  width: 22px;
  height: 22px;
}