/*==========================================================================
  comments.css — threaded comment system
  --------------------------------------------------------------------------
  Serves the shared comment engine (includes/comments/comment-lib.php).

  Loaded by BOTH consumers:
    blog/includes/comments.php   (ships with the blog fragment)
    upload/view_image.php        (linked in its <head>)

  This is the only copy. The duplicate rules were removed from
  upload/css/upload_style.css and the inline avatar-picker <style> block was
  removed from upload/view_image.php on 2026-08-11 — don't copy them back.
  Note .comment-indicator (the upload gallery's "new comments" badge) is NOT
  part of this file; it stays in upload_style.css.

  Everything is scoped under .comments-section. The threading variables live
  there too rather than on :root, so nothing leaks into the rest of the site.

  NOTE ON BROWSER SUPPORT: the connector spines and curves are drawn with CSS
  anchor positioning (anchor-name / position-anchor / anchor()). That is
  Chromium-only for now. In Firefox and Safari the anchored pseudo-elements
  simply do not paint, leaving plain indented replies — degraded, not broken.
==========================================================================*/

.comments-section {
    /* Avatar measurements */
    --avatar-size: 32px;
    --avatar-padding: 8px;
    --avatar-gap: 10px;
    --avatar-center: calc(var(--avatar-padding) + (var(--avatar-size) / 2));

    /* Threading line measurements */
    --spine-width: 2px;
    --curve-width: 23px;
    --curve-height: 38px;
    --curve-radius: 12px;
    --curve-top-offset: -15px;
    --first-curve-height: 25px;
    --reply-indent: 45px;

    /* Derived values (no magic numbers!) */
    --curve-left-offset: calc(var(--avatar-center) - (var(--curve-width) * 2) + (var(--spine-width) / 2));
    --spine-stop-at-curve: calc(var(--curve-height) + var(--curve-top-offset));
}

/*=========================== SECTION SHELL ==============================*/

.comments-section {
    margin-top: 30px;
    padding: 25px 30px 5px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.comments-heading {
    margin: 0 0 4px 0;
    font-size: var(--font-lg);
    font-family: 'Amaranth', sans-serif;
    color: var(--font-colour_white);
    scroll-margin-top: 20px;
}

.comments-empty {
    margin: 0 0 10px 0;
    font-size: var(--font-md);
    color: var(--font-colour_grey);
}

.comments-thread {
    margin-top: 15px;
}

/* Inline status line — validation errors, rate-limit notices, save failures */
.comments-message {
    display: none;
    margin-bottom: 12px;
    padding: 9px 13px;
    border-radius: 5px;
    font-size: var(--font-md);
    border: 1px solid var(--border-colour);
}

.comments-message.visible {
    display: block;
}

.comments-message.is-error {
    background: color-mix(in srgb, var(--sales-bright-red) 18%, transparent);
    border-color: var(--sales-bright-red);
    color: var(--font-colour_white);
}

.comments-message.is-success {
    background: color-mix(in srgb, var(--main-colour) 22%, transparent);
    border-color: var(--main-colour);
    color: var(--font-colour_white);
}

/*======================= THREADED COMMENT NODES =========================*/

.comments-section .thread-node {
    position: relative;
    /* No scope here - it lives in parent scope */
}

.comments-section .comment-wrapper {
    margin-bottom: 15px;
    position: relative;
    anchor-scope: --comment-box, --last-reply-anchor;
}

.comments-section .comment-box {
    display: flex;
    align-items: flex-start;
    background-color: var(--secondary-colour);
    padding: var(--avatar-padding);
    border-radius: 5px;
    margin-bottom: 0;
    border: 1px solid var(--border-colour);
    position: relative;
    anchor-name: --comment-box;
}

.comments-section .comment-box.reply {
    background-color: var(--link-colour_visited);
}

/* Tombstone left behind when a moderator removes a comment that had replies */
.comments-section .comment-box.is-deleted {
    opacity: 0.6;
}

.comments-section .comment-box.is-deleted .comment-text {
    font-style: italic;
}

.comments-section .avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    margin-right: 12px;
    border-radius: 50%;
    background-color: var(--secondary-colour);
    color: var(--font-colour_white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    border: 1px solid var(--border-colour);
    flex-shrink: 0;
    position: relative;
}

.comments-section .avatar.has-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.comments-section .avatar .avatar-initial {
    color: var(--font-colour_white);
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comments-section .avatar.has-avatar .avatar-initial {
    display: none;
}

.comments-section .username-input {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: var(--border-width-thin) solid var(--border-colour);
    background-color: var(--sidebar-menu_bg2);
    color: var(--font-colour_offwhite);
    margin-bottom: 5px;
    box-sizing: border-box;
}

/* The actual visual box for the comment text */
.comments-section .comment-content {
    flex: 1;
    min-width: 0;
}

.comments-section .comment-box.reply .comment-content {
    background-color: transparent;
}

.comments-section .comment-header {
    margin-bottom: 2px;
}

.comments-section .comment-username {
    font-weight: bold;
    color: var(--font-colour_white);
    font-size: 14px;
}

.comments-section .comment-text {
    color: var(--font-colour_offwhite);
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.comments-section .comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    position: relative;
    padding-left: calc(var(--avatar-size) + var(--avatar-gap));
}

.comments-section .comment-timestamp {
    color: var(--font-colour_offwhite);
    font-size: 12px;
}

.comments-section .reply-button {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    color: var(--font-colour_white);
    cursor: pointer;
    font-size: 14px;
    font-variant: all-small-caps;
    font-weight: bold;
    max-width: fit-content;
    display: block;
}

/* Moderator-only — rendered when the blog/admin.php session is active */
.comments-section .comment-delete-button {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    color: var(--sales-bright-red);
    cursor: pointer;
    font-size: 14px;
    font-variant: all-small-caps;
    font-weight: bold;
    max-width: fit-content;
}

.comments-section .comment-delete-button:hover {
    text-decoration: underline;
}

/*====================== IMPROVED THREADING SYSTEM ========================*/

.comments-section .replies {
    position: static;
    border-left: none;
    margin-left: 0;
    padding-left: var(--reply-indent);
}

/* Vertical Spine for Replies - Fixed for all nesting depths */

/* The spine extends from parent comment bottom to the last reply's curve start */
.comments-section .replies::before {
    content: "";
    position: absolute;
    position-anchor: --comment-box;
    top: anchor(bottom);
    left: anchor(left);
    margin-left: var(--avatar-center);
    width: var(--spine-width);
    background: var(--border-colour);
    z-index: 0;
    /* Default: hide the spine */
    display: none;
}

/* Create a wider hoverable area over the threading line */
.comments-section .replies::after {
    content: "";
    position: absolute;
    position-anchor: --comment-box;
    top: anchor(bottom);
    left: anchor(left);
    margin-left: calc(var(--avatar-center) - 10px);
    width: 20px;
    bottom: 0;
    z-index: 1;
    pointer-events: auto;
    display: none;
}

/* Show hoverable area when spine is visible */
.comments-section .comment-box.has-replies+.comment-meta+.reply-form-container+.replies::after {
    display: block;
    bottom: anchor(--last-reply-anchor top);
}

/* For last thread-node in replies, use this as anchor reference */
.comments-section .replies>.thread-node:last-child {
    anchor-name: --last-reply-anchor;
}

/* Hide spine when comment has no replies */
.comments-section .comment-box:not(.has-replies)+.comment-meta+.reply-form-container+.replies::before {
    display: none;
}

/* Show spine when comment has replies - bottom anchored to last reply */
.comments-section .comment-box.has-replies+.comment-meta+.reply-form-container+.replies::before {
    display: block;
    /* Bottom is anchored to the last reply thread-node's top */
    bottom: anchor(--last-reply-anchor top);
}

/* Hide spine when only one reply exists (curve alone handles connection) */
.comments-section .replies:has(> .thread-node:only-child)::before {
    display: none;
}

/* Curved Connector for Child Comments - No more magic numbers! */
.comments-section .replies>.thread-node::before {
    content: "";
    position: absolute;
    position-anchor: --comment-box;
    left: anchor(left);
    margin-left: var(--curve-left-offset);
    width: var(--curve-width);
    top: var(--curve-top-offset);
    height: var(--curve-height);
    border-bottom: var(--spine-width) solid var(--border-colour);
    border-left: var(--spine-width) solid var(--border-colour);
    border-bottom-left-radius: var(--curve-radius);
    z-index: 0;
    pointer-events: none;
}

/* Fix for first child */
.comments-section .replies>.thread-node:first-child::before {
    top: anchor(bottom);
    height: var(--first-curve-height);
    border-top: none;
}

/* Create a hover zone on the left side of each thread-node (over threading lines) */
.comments-section .thread-node::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--reply-indent);
    z-index: 1;
    pointer-events: auto;
}

/* Thread hover highlight - like Reddit */
.comments-section .replies::before,
.comments-section .replies>.thread-node::before {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Make sure comment content is above hover zone and blocks hover events */
.comments-section .comment-box,
.comments-section .comment-meta,
.comments-section .reply-form-container {
    position: relative;
    z-index: 3;
}

/*============================ HOVER LOGIC ===============================*/

/*
 * HOVER BEHAVIOR - CLEAN APPROACH:
 * Only the DEEPEST hovered thread should have its connections highlighted.
 * We use :not(:has(.thread-node:hover)) to identify the deepest hovered thread.
 *
 * Connections to highlight for the deepest hovered thread:
 * 1. Its own curve (connecting to its parent)
 * 2. Its children's spine (below it)
 * 3. Its children's curves
 * 4. The parent's spine portion leading to it
 */

/* ===== STEP 1: Only highlight for the DEEPEST hovered thread ===== */
/* This thread is hovered AND has no hovered descendants */

/* NOTE: We do NOT highlight the curve ABOVE the hovered thread (connecting to parent)
   We only highlight: children's spine, children's curves, and parent's spine */

/* 1. Deepest thread's children's spine */
.comments-section .thread-node:hover:not(:has(.thread-node:hover))>.comment-wrapper>.replies::before {
    background-color: var(--font-colour_lightgrey);
}

/* 3. Deepest thread's children's curves */
.comments-section .thread-node:hover:not(:has(.thread-node:hover))>.comment-wrapper>.replies>.thread-node::before {
    border-color: var(--font-colour_lightgrey);
}

/* 4. Parent spine of the deepest hovered thread */
.comments-section .replies:has(> .thread-node:hover:not(:has(.thread-node:hover)))::before {
    background-color: var(--font-colour_lightgrey);
}

/* ===== STEP 2: Disable highlighting when hovering comment content ===== */

.comments-section .thread-node:hover:not(:has(.thread-node:hover)):has(.comment-box:hover)::before,
.comments-section .thread-node:hover:not(:has(.thread-node:hover)):has(.comment-meta:hover)::before {
    border-color: var(--border-colour);
}

.comments-section .thread-node:hover:not(:has(.thread-node:hover)):has(.comment-box:hover)>.comment-wrapper>.replies::before,
.comments-section .thread-node:hover:not(:has(.thread-node:hover)):has(.comment-meta:hover)>.comment-wrapper>.replies::before {
    background-color: var(--border-colour);
}

.comments-section .thread-node:hover:not(:has(.thread-node:hover)):has(.comment-box:hover)>.comment-wrapper>.replies>.thread-node::before,
.comments-section .thread-node:hover:not(:has(.thread-node:hover)):has(.comment-meta:hover)>.comment-wrapper>.replies>.thread-node::before {
    border-color: var(--border-colour);
}

.comments-section .replies:has(> .thread-node:hover:not(:has(.thread-node:hover)):has(.comment-box:hover))::before,
.comments-section .replies:has(> .thread-node:hover:not(:has(.thread-node:hover)):has(.comment-meta:hover))::before {
    background-color: var(--border-colour);
}

/*=============================== FORMS ==================================*/

.comments-section .reply-form {
    display: flex;
    align-items: flex-start;
    background-color: var(--sales-light-red);
    padding: 10px;
    border-radius: 5px;
    gap: 10px;
    flex-wrap: wrap;
    margin: 5px 0px 5px var(--reply-indent);
    border: var(--border-width-thin) solid var(--border-colour);
}

.comments-section .reply-form .avatar {
    margin-top: 5px;
    min-width: var(--avatar-size);
}

.comments-section .reply-form textarea {
    width: 100%;
    min-height: 75px;
    max-height: 200px;
    resize: vertical;
    border: var(--border-width-thin) solid var(--border-colour);
    border-radius: 4px;
    padding: 5px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: var(--sidebar-menu_bg2);
    color: var(--font-colour_offwhite);
}

.comments-section .main-comment-form {
    display: flex;
    align-items: flex-start;
    margin-top: 15px;
    background-color: var(--main-colour);
    padding: 10px;
    border-radius: 5px;
    gap: 10px;
    flex-wrap: wrap;
    border: var(--border-width-thin) solid var(--border-colour);
}

.comments-section .main-comment-form .avatar {
    margin-top: 5px;
    flex-shrink: 0;
    min-width: var(--avatar-size);
}

.comments-section .main-comment-form textarea {
    width: 100%;
    min-height: 75px;
    max-height: 200px;
    resize: vertical;
    border: var(--border-width-thin) solid var(--border-colour);
    border-radius: 4px;
    padding: 5px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: var(--sidebar-menu_bg2);
    color: var(--font-colour_offwhite);
}

/* Column holding name + textarea + counter + submit in both form flavours */
.comments-section .comment-form-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.comments-section .comment-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.comments-section .reply-form .cancel-reply,
.comments-section .delete-button {
    background-color: var(--lightbox-bg);
    color: var(--font-colour_offwhite);
    border: 1px solid var(--border-colour);
    font-size: var(--font-sm);
    max-height: fit-content !important;
    align-self: self-end;
    padding: 5px !important;
}

.comments-section form button[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* Character counter styles */
.comments-section .char-counter {
    font-size: 12px;
    color: var(--font-colour_grey);
    text-align: right;
    margin-top: 2px;
    margin-bottom: 5px;
}

.comments-section .char-counter.near-limit {
    color: #f0ad4e;
}

.comments-section .char-counter.at-limit {
    color: var(--sales-bright-red);
    font-weight: bold;
}

/*========================== AVATAR PICKER ===============================*/
/* Previously an inline <style> block in upload/view_image.php. */

.comments-section .avatar-placeholder {
    width: var(--avatar-size);
    height: var(--avatar-size);
    margin-right: 10px;
    border-radius: 50%;
    border: 1px dotted var(--border-colour);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: visible;
    flex-shrink: 0;

    /* Must out-rank .comment-box / .comment-meta / .reply-form-container (3).
       `position: relative` + a z-index makes this element a stacking context,
       which traps the picker popup's z-index inside it — so the popup can never
       climb above a comment on its own, no matter how large its own z-index is.
       This was 1, which is why the popup opened *behind* the thread. */
    z-index: 5;
}

/* While the picker is open, lift it clear of the whole thread.
   The popup opens upwards (bottom: 100%) across earlier comments, and for a
   reply form the surrounding .reply-form-container is itself a stacking context
   at z-index 3 — sibling .replies content that follows it in the DOM would
   otherwise paint on top. Both ancestors are raised together; raising only one
   leaves the popup trapped in the other. */
.comments-section .avatar-placeholder:has(.avatar-selector.visible),
.comments-section .reply-form-container:has(.avatar-selector.visible) {
    z-index: 60;
}

.comments-section .avatar-placeholder.has-avatar {
    border: none;
    background-color: transparent;
}

.comments-section .avatar-placeholder > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: none;
}

.comments-section .avatar-placeholder .avatar-initial {
    color: var(--font-colour_white);
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    display: none;
}

.comments-section .avatar-placeholder:not(.has-avatar) .avatar-initial.has-value {
    display: flex;
}

.comments-section .avatar-selector {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 10px;
    background: var(--bg-colour);
    border: 2px solid var(--main-colour);
    border-radius: 8px;
    padding: 10px;
    z-index: 10000;
    display: none;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 200px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

.comments-section .avatar-selector.visible {
    display: flex;
}

.comments-section .avatar-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.comments-section .avatar-option:hover {
    border-color: var(--main-colour);
}

.comments-section .avatar-option img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/*============================ RESPONSIVE ================================*/

@media (max-width: 640px) {
    .comments-section {
        padding-left: 15px;
        padding-right: 15px;
        /* Deep threads still cost 45px a level; trim the indent so a
           depth-5 reply keeps a usable text column on a phone. */
        --reply-indent: 26px;
        --curve-width: 14px;
    }
}
