/* -----------------------------------------------------------------------
   comments.css – v2.4
   -----------------------------------------------------------------------
   • REMOVED the :root palette variable block.
   • Inlined every previous --c-* variable directly into each rule.
   • No other selectors or declarations were touched.
--------------------------------------------------------------------------- */
/* ────────────────────────────────────────────────────────────────
   REPLACE THIS BLOCK: keep only surfaces that are actually used (0–3)
   ──────────────────────────────────────────────────────────────── */
:root {
  --comments-surface-0: var(--section-light-background-color);
  --comments-surface-1: var(--section-medium-background-color);
  --comments-surface-2: var(--section-dark-background-color);
  --comments-surface-3: var(--section-darkest-background-color);
}




/* -----------------------------------------------------------------------
   comments.css – v2.3  (header section retained for context)
   -----------------------------------------------------------------------
   • NEW: conversation-header with comment-count + viewers badge.
   • All previous rules retained (textarea wrapper, avatars, send button…).
--------------------------------------------------------------------------- */
.egXXL-comments-section {
    width: 100%;
    margin-bottom: 36px;

}

.snap-rail-anchor .egXXL-comments-section {
     margin-bottom: 0px;
}

/* ---------- header layout ------------------------------------------- */
.conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .65rem;
    /* ← was var(--c-border) */
    position: relative;
}

.egComments-wrapped .conversation-header {
    margin-bottom: 2rem;
}

.conversation-header::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 0.75px;
    background-color: var(--card-color, var(--site-color));
    transition: none;
    transition: width 0.2s ease-in-out;
}

.conversation-header .left {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: var(--ft-26-24);
}

.conversation-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-family: var(--identity-font);
    line-height: 1;
    letter-spacing: -1px;
    padding: 0;
    white-space: nowrap;
}

.comment-count {
    font-family: var(--identity-font);
    font-weight: 600;
    font-size: .575em;
    margin-left: .425em;
    color: var(--grey-color-2)
}

.viewers-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--identity-font);
    font-weight: 500;
    font-size: var(--font-size-11px);
    color: #2ecc71;
    /* green text */
}

.viewer-icon {
    width: 1.35em;
    height: 1.35em;
    fill: #2ecc71;
    /* green icon */
}

/* -----------------------------------------------------------------------
   comments.css  – append spinner rule (same green, size matches icon)
--------------------------------------------------------------------------- */
.viewer-spinner {
    width: 1.35em;
    height: 1.35em;
    border: 2px solid transparent;
    border-top-color: #2ecc71;
    border-radius: 50%;
    animation: viewerSpin 0.7s linear infinite;
}

@keyframes viewerSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ---------- retain all previous rules below ------------------------- */
/* … (leave your existing textarea, send-box, comment-card rules here) … */

/* ---------- send-box -------------------------------------------------- */
.egXXL-summary .egComments-wrapped .sendbox {
    margin-top: 2.25rem;
}

.egComments-wrapped .sendbox-inner {
    padding: 0rem .75rem;
    /* example vertical padding */
}

#egCommentsRoot[data-style="wrapped"] .comment-card:hover,
.egComments-wrapped .comment-card:hover {
    filter: brightness(1.12);
    /* subtle lift */
    transition: filter .12s ease-in;
    /* smooth */
}

.sendbox {
    background: var(--comments-surface-2);
    border-radius: 10px;
    padding: clamp(17px, 10.4545px + 1.0909vw, 23px) clamp(18px, 4.9091px + 2.1818vw, 30px);
    margin-bottom: 1rem;
}

.sendbox-user {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.sendbox-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.sendbox-username {
    font-family: var(--identity-font);
    font-weight: var(--font-weight6, 600);
    color: var(--white-color-1);
    font-size: var(--font-size-16px);
    margin-left: .65rem;
}

/* ---------- avatar ---------------------------------------------------- */
.comment-avatar,
.sendbox-avatar {
    flex-shrink: 0;
    width: var(--ft-40-35);
    height: var(--ft-40-35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.sendbox-avatar svg {
    height: 97%;
    fill: var(--grey-color-4, #909090);
}

.comment-avatar svg {
    height: 90%;
    fill: var(--grey-color-4, #909090);
}




/* -----------------------------------------------------------------------
   comments.css – v1.7 (textarea changes retained)
--------------------------------------------------------------------------- */

/* ---------- wrapper around textarea ---------------------------------- */
.textarea-wrapper {
    background: var(--comments-surface-3, #161718);
    border: 1px solid var(--comments-surface-1) !important;
    border-radius: 4px;
    padding: 10px 16px;
    transition: height .15s ease;
}

/* ---------- textarea itself ------------------------------------------ */
.textarea-wrapper textarea,
.textarea-wrapper textarea:focus {
    font-size: var(--font-size-16px);
    line-height: 1.5;
    background: transparent;
    border: 0 !important;
    outline: none !important;
    padding: 0;
    width: 100%;
    min-height: 24px;
    color: var(--white-color-1);
    overflow: hidden;
    resize: none;
}

/* ---------- banned message wrapper -------------------------------------- */
.textarea-wrapper.banned {
    background: var(--comments-surface-3, #161718);
    border: 1px solid var(--comments-surface-1) !important;
    border-radius: 4px;
    padding: 10px 16px;
    font-family: monospace, var(--identity-font);
    font-size: var(--font-size-14px);
    line-height: 1.5;
    color: var(--grey-color-4);
}

.textarea-wrapper.banned a {
    text-decoration: underline;
    color: var(--grey-color-4);
}

.sendbox-footer {
    display: flex;
    justify-content: space-between;
    margin-left: .15rem;
    margin-top: 1rem;
}

.community-guidelines {
    font-family: var(--identity-font);
    font-weight: 400;
    color: var(--grey-color-2);
    font-size: var(--font-size-12px);
    text-transform: none;
}

/* ---------- SEND button ---------------------------------------------- */
.btn-send {
    background: var(--card-color, var(--site-color));
    border: none;
    padding: 6px 22px;
    font-family: var(--identity-font);
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    border-radius: 6px;
    transition: background .15s ease, transform .06s ease;
    cursor: pointer;
}

.btn-send:hover,
.btn-send:focus {
    background: var(--card-accent);
}

.btn-send[disabled] {
    background: var(--card-dark-accent);
    cursor: default;
}

.btn-send:active:not([disabled]) {
    transform: scale(.95);
}

/* ---------- guest bar tweak ------------------------------------------ */
.sendbox-guest input {
    cursor: text;
    color: #b0b0b0;
    /* ← was var(--c-text-sub) */
}


/* ---------- comment card --------------------------------------------- */
.comment-card {
    background: var(--comments-surface-2);
    border-radius: 4px;
    border-radius: 10px;
    padding: clamp(17px, 10.4545px + 1.0909vw, 23px) clamp(18px, 4.9091px + 2.1818vw, 30px);
    margin-bottom: 1rem;
    box-sizing: border-box;
    z-index: 1;

}

.comment-card.current,
.comment-thread.current>.comment-card {
    border: none;
    box-shadow: 0 0 0 1px var(--card-color, var(--site-start-color));
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: .65rem;
}

.comment-author {
    font-family: var(--identity-font);
    font-weight: var(--font-weight6, 600);
    color: var(--white-color-1);
    font-size: var(--font-size-14px);
    margin-left: .65rem;
}

.comment-author.anonymous {
    color: var(--grey-color-4);
}


.comment-divider {
    height: .75px;
    background: var(--comments-surface-1);
    margin: .45rem 0 .55rem;
}

.comment-date {
    font-size: var(--font-size-12px);
    font-family: var(--identity-font);
    font-weight: 400;
    color: var(--grey-color-4);
    margin-bottom: .5rem;
}

.comment-message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: var(--identity-font);
    font-weight: 400;
    color: var(--white-color-1);
    font-size: var(--font-size-14px);
}

.comment-message.removed {
    color: var(--grey-color-4);
    font-size: var(--font-size-13px);
    font-style: italic;
}


/* ---------- comment footer ------------------------------------------ */
.comment-footer {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.25rem;
    font-size: var(--font-size-13px, 12px);
    color: var(--grey-color-4);
}

.btn-reply {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--identity-font);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
    color: inherit;
}

.btn-reply:hover,
.btn-reply:focus {
    color: #ffffff;
}

/* -----------------------------------------------------------------------
   Like button – snappy, no sticky focus       (v3.1 final)
----------------------------------------------------------------------- */
.btn-like {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--identity-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    color: inherit;
    transition: color .12s ease;
}

.btn-like svg,
.btn-like svg path {
    width: 1.15em;
    height: 1.15em;
    fill: currentColor;
    transition: fill .12s ease;
}


.btn-like:hover:not(.liked) {
    color: #ffffff;
}


.btn-like.liked {
    color: #ffffff;
}

.btn-like.liked:hover {
    filter: brightness(.85);
}




.like-count {
    font-family: var(--identity-font);
}

.footer-sep {
    user-select: none;
}







/* -----------------------------------------------------------------------
   reply threading – one rail centred on avatars, trimmed at last reply
--------------------------------------------------------------------------- */
:root {
    --card-pad: clamp(18px, 4.9091px + 2.1818vw, 30px);
    --avatar: var(--ft-40-35);
    --gap: 85px;
    --rail-x: calc(var(--card-pad) + var(--avatar)/2);
    --rail-cl: var(--comments-surface-0);
}

/* ===== top‑level thread wrapper ===================================== */
.comment-thread {
    position: relative;
}

/* ===== replies container (indented) ================================= */
.comment-replies {
    margin-left: var(--gap);
}

/* draw one rail segment per reply ------------------------------------ */
.comment-replies>.comment-thread {
    position: relative;
}

/* full segment – covers card + half avatar above & below ------------- */
.comment-replies>.comment-thread::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--gap) + var(--rail-x));
    top: -calc(var(--avatar)/2);
    height: calc(100% + var(--avatar) * .9);
    width: 1px;
    background: var(--rail-cl);
}

/* shorten the **last** segment so rail ends at last avatar centre ---- */
.comment-replies>.comment-thread:last-child::before {
    height: calc(clamp(17px, 10.4545px + 1.0909vw, 23px) + (var(--ft-40-35))/4)
}

/* ===== elbows (rail → avatar) ======================================= */
.comment-replies .comment-avatar {
    position: relative;
}

.comment-replies .comment-avatar::before {
    content: '';
    position: absolute;
    top: calc(var(--avatar)/4);
    transform: translateY(-50%);
    left: calc(-1 * var(--gap) + var(--avatar)/2);
    width: calc(var(--gap) - clamp(18px, 4.9091px + 2.1818vw, 30px) - var(--avatar)/2 - 4px);
    height: calc((var(--avatar) * .9)/2);
    border-bottom: 1px solid var(--comments-surface-0);
    border-bottom-left-radius: 8px;
    border-left: 1px solid var(--comments-surface-0);
}


/* hide duplicate rails on deeper levels ------------------------------ */
.comment-replies .comment-replies .comment-replies>.comment-thread::before {
    display: none;
}















/* -----------------------------------------------------------------------
   Owner menu, Edit & Delete (v1.0)
--------------------------------------------------------------------------- */
.comment-card {
    position: relative;
}

/* ----- header layout tweak ------------------------------------------- */
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-header-left {
    display: flex;
    align-items: center;
}

/* ----- three‑dot button ---------------------------------------------- */
.comment-menu-wrapper {
    position: relative;
}

.btn-comment-menu {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.btn-comment-menu svg circle {
    fill: var(--grey-color-4, #909090);
}

/* ----- dropdown ------------------------------------------------------ */
.comment-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--comments-surface-3, #161718);
    border: 1px solid var(--comments-surface-1);
    border-radius: 4px;
    padding: .25rem 0;
    min-width: 120px;
    z-index: 5;
}

.comment-menu button {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: .45rem 1rem;
    font-family: var(--identity-font);
    font-size: var(--font-size-14px);
    color: var(--white-color-1);
}

.comment-menu button:hover {
    background: var(--comments-surface-1);
}

/* ----- edit mode ----------------------------------------------------- */
.comment-edit-actions,
.comment-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

.btn-cancel {
    background: transparent;
    border: 1px solid var(--comments-surface-1);
    padding: 6px 22px;
    font-family: var(--identity-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--white-color-1);
    border-radius: 6px;
    cursor: pointer;
}

.btn-cancel:hover {
    background: var(--comments-surface-1);
}

/* ----- delete overlay ------------------------------------------------ */
.comment-delete-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    border-radius: inherit;
    /* match the card’s 10 px corners */
    overflow: hidden;
    /* clip overlay to the rounded edge */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.comment-delete-dialog {
    background: var(--comments-surface-2);
    border: 1px solid var(--comments-surface-1);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    max-width: 320px;
    width: 100%;
    text-align: center;
}

.comment-delete-dialog p {
    margin: 0 0 1rem;
    font-family: var(--identity-font);
    font-size: var(--font-size-14px);
    color: var(--white-color-1);
}

/* -----------------------------------------------------------------------
   Owner menu – enlarged hit‑zone & outside‑click helper (v1.1)
--------------------------------------------------------------------------- */
.comment-menu-wrapper {
    position: relative;
}

/* hit‑zone around the three‑dot icon */
.comment-menu-hit {
    width: 44px;
    /* ample thumb target */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: -8px;
    /* re‑align with card edge */
}

/* keep original tiny icon centred */
.btn-comment-menu {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-comment-menu svg circle {
    fill: var(--grey-color-4, #909090);
}

/* -----------------------------------------------------------------------
   Meta row: See‑more & Edited flag  (v1.2)
--------------------------------------------------------------------------- */
.comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: .45rem;
    font-family: var(--identity-font);
    font-size: var(--font-size-13px, 12px);
}

.btn-see-more {
    background: none;
    border: none;
    padding: 0;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    color: var(--white-color-1);
}

.btn-see-more:hover,
.btn-see-more:focus {
    text-decoration: underline;
}

.comment-edited {
    color: var(--grey-color-4);
    font-style: italic;
}






/* -----------------------------------------------------------------------
   Rate‑limit / length violation pop‑up (v1.0)
--------------------------------------------------------------------------- */
.rate-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.rate-popup-dialog {
    background: var(--comments-surface-2);
    border: 1px solid var(--comments-surface-1);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    max-width: 340px;
    width: 100%;
    text-align: center;
}

.rate-popup-dialog p {
    margin: .5rem 0;
    font-family: var(--identity-font);
    color: var(--white-color-1);
}


/* -----------------------------------------------------------------------
   Inline length / validation errors (v1.3)
--------------------------------------------------------------------------- */
.send-error {
    margin-top: 4px;
    font-size: var(--font-size-12px, 12px);
    color: var(--accent-warn-color, #ff6961);
    font-family: var(--identity-font);
}



/* ---------- Show more replies button -------------------------------- */
/* ---------- “Show more replies” controls ----------------------------- */
.btn-show-replies {
    position: relative;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--identity-font);
    font-weight: 400;
    cursor: pointer;
    font-size: var(--font-size-14px);
    color: var(--card-color, var(--site-start-color));
    margin-bottom: 1rem;
}

.btn-show-replies:hover,
.btn-show-replies:focus {
    text-decoration: underline;
}

/* ---------- Show‑more arrow / spinner ------------------------------- */
.btn-show-replies .caret-icon {
    width: 1.35em;
    height: 1.35em;
    margin-right: 1px;
    vertical-align: middle;
    fill: currentColor;
}

/* Spinner (same class already used elsewhere) keeps 12×12 footprint.   */
.spinner {
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- vertical guide must stop at last rendered card ---------- */
.comment-replies>.comment-thread:last-of-type::before {
    height: calc(clamp(17px, 10.4545px + 1.0909vw, 23px) + (var(--ft-40-35))/4);
}







/* ---------- Show More Comments button ------------------------------ */
.btn-more-comments {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-15px);
    background: var(--card-color, var(--site-start-color));
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 1rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-more-comments:disabled {
    opacity: .6;
    cursor: default;
}

.btn-more-comments .btn-spinner {
    width: var(--font-size-14px);
    height: var(--font-size-14px);
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}









/* -----------------------------------------------------------------------
   eg-comments-footer – powered‑by divider (v1.0)
   ----------------------------------------------------------------------- */
.eg-comments-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--identity-font);
    font-size: var(--font-size-12px, 12px);
    color: var(--grey-color-4, #909090);
    margin-top: 2rem;
}

.eg-footer-powered,
.eg-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}

.eg-footer-links a:hover,
.eg-footer-links a:focus {
    text-decoration: underline;
}

.eg-footer-logo {
    width: var(--font-size-12px, 12px);
    height: var(--font-size-12px, 12px);
    vertical-align: text-bottom;
}









/* ────────────────────────────────────────────────────────────────
   Per‑user admin dropdown (Active / Banned) – layout patch
   • Keeps the menu icon snug beside the author’s name.
   • Resets the negative right‑margin used by the owner‑menu.
   • Positions the dropdown directly under the icon (left‑aligned).
   ---------------------------------------------------------------- */
.user-menu-wrapper {
    position: relative;
    display: inline-flex;
    /* shrink‑wrap to icon */
    margin-left: .5rem;
    /* little gap after username */
}

.user-menu-wrapper .comment-menu-hit {
    margin-right: 0;
    /* cancel the −8 px shim */
}

.user-menu-wrapper .comment-menu {
    left: 0;
    /* align with icon */
    right: auto;
}













/* FILE: public/css/comments.css — APPEND THIS BLOCK */
/* -----------------------------------------------------------------------
   Open-thread banner (shown when #egCommentsRoot[data-empty="true"])
----------------------------------------------------------------------- */
.eg-empty-thread {
  display: none;                     /* default hidden – JS toggles */
  text-align: center;
  padding: 1.75rem 0 .75rem;
}

.eg-empty-thread .open-thread-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto .5rem;
}

/* Colour the 3 inner lines to the category/site colour */
.eg-empty-thread .open-thread-icon path:nth-of-type(-n+3) {
  fill: var(--card-color, var(--site-color));
}
/* Bubble outline/body – subtle neutral */
.eg-empty-thread .open-thread-icon path:last-of-type {
  fill: var(--comments-surface-1);
}

.eg-empty-thread .open-thread-title {
  font-family: var(--identity-font);
  font-weight: 700;
  font-size: var(--font-size-16px);
  color: var(--white-color-1);
  margin: 0 0 .15rem;
}

.eg-empty-thread .open-thread-sub {
  font-family: var(--identity-font);
  font-weight: 400;
  font-size: var(--font-size-13px);
  color: var(--grey-color-2);
  margin: 0;
}

/* Show the banner when the root flips the data attribute on */
#egCommentsRoot[data-empty="true"] + .eg-empty-thread {
  display: block;
}











/* ────────────────────────────────────────────────────────────────
   REPLACE THIS BLOCK: footer-scoped theme with only used surfaces (0–3)
   ──────────────────────────────────────────────────────────────── */
.article-footer :where(#egCommentsRoot, .egXXL-comments-section) {
  --comments-surface-0: var(--section-light-background-color);
  --comments-surface-1: var(--section-medium-background-color);
  --comments-surface-2: var(--section-darkestdark-background-color);
  --comments-surface-3: var(--section-darkestdarker-background-color);
}

.article-footer .comment-card,
.article-footer .sendbox {
    border: 1px solid var(--section-medium-background-color);;
}