/* Comment thread styles, shared by every _Comments / _Replies render on the question page.
   Lives here rather than inside _Comments.cshtml, which rendered once for the question and once
   per answer and so repeated this whole block in the HTML each time. */

  /* ── Thread container ── */
  /* .rh-comments-section {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 0 3rem;
  } */

  .rh-comments-header {

    border-bottom: 1px solid var(--phoenix-border-color-translucent, rgba(0,0,0,.1));
  }

  .rh-comments-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  .rh-comment-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--phoenix-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 8px;
    line-height: 1.4;
  }

  /* ── New comment composer ── */
  .rh-composer {
    display: flex;
    gap: .75rem;
    margin-bottom: 2rem;
    align-items: flex-start;
  }

  .rh-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--phoenix-primary-bg-subtle, #e8f4fd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--phoenix-primary);
    overflow: hidden;
    border: 2px solid var(--phoenix-border-color-translucent, rgba(0,0,0,.08));
  }

  .rh-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .rh-avatar.rh-avatar-sm {
    width: 30px;
    height: 30px;
    font-size: .65rem;
  }

  .rh-composer-body {
    flex: 1;
  }

  .rh-composer-input {
    width: 100%;
    border: 1px solid var(--phoenix-border-color, rgba(0,0,0,.15));
    border-radius: .5rem;
    padding: .65rem .85rem;
    font-size: .875rem;
    background: var(--phoenix-body-bg);
    color: var(--phoenix-body-color);
    resize: vertical;
    min-height: 80px;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-family: inherit;
    line-height: 1.55;
  }

  .rh-composer-input:focus {
    outline: none;
    border-color: var(--phoenix-primary);
    box-shadow: 0 0 0 3px rgba(var(--phoenix-primary-rgb, 13,110,253), .12);
  }

  .rh-composer-input::placeholder {
    color: var(--phoenix-secondary-color, #8a93a2);
  }

  .rh-composer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .5rem;
  }

  /* ── Comment cards ── */
  .rh-comment {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
    position: relative;
  }

  .rh-comment-thread-line {
    position: absolute;
    left: 19px;
    top: 42px;
    bottom: 0;
    width: 1.5px;
    background: var(--phoenix-border-color-translucent, rgba(0,0,0,.09));
    border-radius: 2px;
  }

  .rh-comment:last-child .rh-comment-thread-line {
    display: none;
  }

  .rh-comment-content-col {
    flex: 1;
    min-width: 0;
  }

  .rh-comment-bubble {
    background: var(--phoenix-emphasis-bg, rgba(0,0,0,.035));
    border-radius: 0 .75rem .75rem .75rem;
    padding: .75rem 1rem;
    position: relative;
  }

  .rh-comment-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .3rem;
    flex-wrap: wrap;
  }

  .rh-comment-author {
    font-weight: 700;
    font-size: .85rem;
    color: var(--phoenix-body-color);
    text-decoration: none;
  }

  .rh-comment-author:hover {
    color: var(--phoenix-primary);
  }

  .rh-comment-role-badge {
    font-size: .65rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 20px;
    line-height: 1.6;
  }

  .rh-badge-mod {
    background: rgba(var(--phoenix-success-rgb, 25,135,84), .12);
    color: var(--phoenix-success);
  }

  .rh-badge-member {
    background: rgba(var(--phoenix-primary-rgb, 13,110,253), .1);
    color: var(--phoenix-primary);
  }

  .rh-comment-timestamp {
    font-size: .75rem;
    color: var(--phoenix-secondary-color, #8a93a2);
    margin-left: auto;
    white-space: nowrap;
  }

  .rh-comment-body {
    font-size: .875rem;
    line-height: 1.65;
    color: var(--phoenix-body-color);
    word-break: break-word;
    margin: 0;
  }

  /* ── Comment footer actions ── */
  .rh-comment-footer {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .4rem;
    padding-left: .25rem;
  }

  .rh-action-btn {
    background: none;
    border: none;
    padding: .25rem .5rem;
    border-radius: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--phoenix-secondary-color, #8a93a2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: background .12s ease, color .12s ease;
    line-height: 1;
  }

  .rh-action-btn:hover {
    background: var(--phoenix-emphasis-bg, rgba(0,0,0,.05));
    color: var(--phoenix-body-color);
  }

  .rh-action-btn.rh-liked {
    color: #e63946;
  }

  /* ── Vote widget ── */
  .rh-vote-widget {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--phoenix-border-color, rgba(0,0,0,.15));
    border-radius: 20px;
    overflow: hidden;
    height: 26px;
    flex-shrink: 0;
  }

  .rh-vote-btn {
    background: none;
    border: none;
    padding: 0 .55rem;
    height: 100%;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: .8rem;
    color: var(--phoenix-secondary-color, #8a93a2);
    transition: background .12s ease, color .12s ease;
    line-height: 1;
  }

  .rh-vote-btn:hover {
    background: var(--phoenix-emphasis-bg, rgba(0,0,0,.05));
  }

  .rh-vote-btn.rh-upvoted {
    color: var(--phoenix-success, #198754);
    background: rgba(var(--phoenix-success-rgb, 25,135,84), .1);
  }

  .rh-vote-btn.rh-downvoted {
    color: var(--phoenix-danger, #dc3545);
    background: rgba(var(--phoenix-danger-rgb, 220,53,69), .1);
  }

  .rh-vote-score {
    padding: 0 .45rem;
    font-size: .78rem;
    font-weight: 700;
    border-left: 1px solid var(--phoenix-border-color, rgba(0,0,0,.12));
    border-right: 1px solid var(--phoenix-border-color, rgba(0,0,0,.12));
    height: 100%;
    display: inline-flex;
    align-items: center;
    min-width: 28px;
    justify-content: center;
    color: var(--phoenix-body-color);
    transition: color .15s ease;
  }

  .rh-vote-score.rh-score-positive { color: var(--phoenix-success, #198754); }
  .rh-vote-score.rh-score-negative { color: var(--phoenix-danger,  #dc3545); }
  .rh-vote-score.rh-score-zero     { color: var(--phoenix-secondary-color, #8a93a2); }

  .rh-action-btn.rh-reply-toggle-active {
    color: var(--phoenix-primary);
    background: rgba(var(--phoenix-primary-rgb, 13,110,253), .08);
  }

  .rh-action-btn .rh-count {
    font-weight: 400;
  }

  .rh-divider-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--phoenix-border-color, rgba(0,0,0,.2));
    flex-shrink: 0;
  }

  /* ── Replies toggle button ── */
  .rh-replies-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    font-size: .78rem;
    font-weight: 600;
    color: var(--phoenix-primary);
    cursor: pointer;
    padding: .25rem .4rem;
    border-radius: .35rem;
    transition: background .12s ease;
  }

  .rh-replies-toggle:hover {
    background: rgba(var(--phoenix-primary-rgb, 13,110,253), .08);
  }

  .rh-replies-toggle .rh-chevron {
    display: inline-block;
    font-size: .7rem;
    transition: transform .2s ease;
  }

  .rh-replies-toggle.rh-open .rh-chevron {
    transform: rotate(180deg);
  }

  /* ── Reply composer (inline) ── */
  .rh-reply-composer {
    display: none;
    margin-top: .6rem;
    padding: .6rem .75rem;
    background: var(--phoenix-emphasis-bg, rgba(0,0,0,.025));
    border-radius: .5rem;
    border-left: 2.5px solid var(--phoenix-primary);
  }

  .rh-reply-composer.rh-visible {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
  }

  .rh-reply-composer .rh-composer-input {
    min-height: 58px;
    border-radius: .4rem;
    font-size: .83rem;
  }

  .rh-reply-input-wrap {
    flex: 1;
  }

  .rh-reply-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: .4rem;
  }

  /* ── Nested replies list ── */
  .rh-replies-list {
    display: none;
    margin-top: .65rem;
    padding-left: .25rem;
  }

  .rh-replies-list.rh-visible {
    display: block;
  }

  .rh-reply-item {
    display: flex;
    gap: .6rem;
    margin-bottom: .85rem;
    align-items: flex-start;
  }

  .rh-reply-bubble {
    flex: 1;
    background: var(--phoenix-body-bg);
    border: 1px solid var(--phoenix-border-color-translucent, rgba(0,0,0,.08));
    border-radius: 0 .6rem .6rem .6rem;
    padding: .6rem .85rem;
  }

  .rh-reply-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .25rem;
    flex-wrap: wrap;
  }

  .rh-reply-author {
    font-weight: 700;
    font-size: .82rem;
    color: var(--phoenix-body-color);
  }

  .rh-reply-body {
    font-size: .84rem;
    line-height: 1.6;
    color: var(--phoenix-body-color);
    margin: 0;
    word-break: break-word;
  }

  .rh-mention {
    color: var(--phoenix-primary);
    font-weight: 600;
  }

  /* ── Load more ── */
  .rh-load-more {
    text-align: center;
    margin-top: .75rem;
  }

  /* ── Empty state ── */
  .rh-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--phoenix-secondary-color, #8a93a2);
    font-size: .9rem;
  }

  /* ── Responsive tweaks ── */
  @media (max-width: 576px) {
    .rh-comment-timestamp {
      display: none;
    }
    .rh-comment-bubble,
    .rh-reply-bubble {
      padding: .6rem .75rem;
    }
  }

  .rh-reply-content-col {
  flex: 1;
  min-width: 0;
}

/* Remove flex:1 from the bare bubble now that the col owns it */
.rh-reply-content-col .rh-reply-bubble {
  flex: unset;
}

/* ── Responsive tweaks (add inside / replace existing @media block) ── */
@media (max-width: 576px) {
  /* Tighten reply item gap on small screens */
  .rh-reply-item {
    gap: .45rem;
  }

  /* Allow timestamp to show on replies (it's tucked inside the bubble) */
  .rh-reply-bubble .rh-comment-timestamp {
    display: inline;
  }

  /* Keep composer actions from overflowing */
  .rh-reply-actions {
    flex-wrap: wrap;
  }

  .rh-reply-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

.rh-reply-to {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    color: var(--phoenix-secondary-color, #8a93a2);
}

.rh-reply-to-icon {
    font-size: .65rem;
    opacity: .7;
}