/* The comment section, shared by the work page (works.dj.html) and the blog
   post (blog.dj.html): the action row, replies, the reply box, the spoiler
   switch and the frosted-glass cards. */

/* ---- Comments: one row of actions, replies in the comment's box --------- */

/* The foot of a comment: reply and the rating on the start side (right, on
   this right-to-left page), the report on the far side. */
#reviews .comment-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .75rem;
}

#reviews .comment-actions-main {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

#reviews .comment-actions-side {
    flex: none;
}

/* The comment box, opened inside the comment it answers. */
#reviews .comment-reply-slot:empty {
    display: none;
}

#reviews .comment-reply-slot {
    margin-top: .75rem;
}

#reviews .comment-reply-slot form {
    padding: .75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-body);
}

/* A reply in its comment's box needs no quote of what it answers: that is
   right above it. */
#reviews .comment.is-threaded .reply-chain {
    display: none;
}

#reviews .comment-replies .comment.is-reply {
    margin-right: 0;
}

/* The comment box's last row: the spoiler switch, then sending. */
#reviews .comment-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

#reviews .comment-form-send {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-inline-start: auto;
}

/* The spoiler choice is an on/off switch - the same pill the user panel and
   the admin panel draw every checkbox as. */
#reviews .comment-form-foot input[type="checkbox"],
#reviews .comment-edit-spoiler input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 48px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(127, 127, 127, .35);
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .3s;
}

#reviews .comment-form-foot input[type="checkbox"]::after,
#reviews .comment-edit-spoiler input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .3s;
}

#reviews .comment-form-foot input[type="checkbox"]:checked,
#reviews .comment-edit-spoiler input[type="checkbox"]:checked {
    background: #10b981;
}

#reviews .comment-form-foot input[type="checkbox"]:checked::after,
#reviews .comment-edit-spoiler input[type="checkbox"]:checked::after {
    transform: translateX(20px);
}

#reviews .comment-form-foot input[type="checkbox"]:focus-visible,
#reviews .comment-edit-spoiler input[type="checkbox"]:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

@media (max-width: 576px) {
    #reviews .comment-actions { gap: .35rem; }
    #reviews .comment-actions-main { gap: .3rem; }
    #reviews .comment-form-send { width: 100%; justify-content: space-between; }
}

/* Like and dislike side by side in the action row at every width - the
   compact pair the phone layout already drew. */
#reviews .comment-actions .like-dislike {
    flex: 0 0 auto;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 .35rem;
    border-radius: .5rem;
}

#reviews .comment-actions .like-dislike .btn {
    display: inline-flex !important;
    align-items: center;
    gap: .3rem;
    height: 34px;
    min-width: 0;
    padding: 0 .45rem;
    line-height: 34px;
    font-size: 12px;
}

#reviews .comment-actions .like-dislike .btn svg {
    width: 17px;
    height: 17px;
}

#reviews .comment-actions .like-dislike .btn:not(:last-child):after {
    margin: 0 .3rem;
}

#reviews .comment-actions .comment-reply-link,
#reviews .comment-actions .comment-report-link {
    height: 34px;
    min-width: 0;
    margin-top: 0 !important;
    padding: 0 .8rem;
    line-height: 34px;
    white-space: nowrap;
}

/* Replies sit inside their comment's box, under its actions, each in a glass
   box of its own: the same frosted surface, without the green light. */
#reviews .commnetbody .comment-replies {
    display: grid;
    gap: .75rem;
    margin: 1rem 0 0;
    padding: 0;
    border-inline-start: 0;
}

#reviews .commnetbody .comment-replies:empty {
    display: none;
}

#reviews .commnetbody .comment-replies > .comment {
    margin: 0;
    padding: 0;
    border: 0;
}

#reviews .commnetbody .comment-replies .commnetbody {
    padding: .9rem 1rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 4px 14px rgba(0, 0, 0, .18);
}

body.light-mode #reviews .commnetbody .comment-replies .commnetbody {
    border-color: rgba(0, 0, 0, .07);
    background: rgba(255, 255, 255, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 4px 12px rgba(0, 0, 0, .05);
}

/* The icons on the comment buttons: reply, report and send. */
#reviews .btn .comment-btn-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

#reviews [data-comment-submit] .comment-btn-icon {
    width: 18px;
    height: 18px;
}

/* Every button in the comment section holds its text in the middle,
   top to bottom, whatever height or line-height it was given. */
#reviews .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

#reviews .btn[hidden] {
    display: none !important;
}

/* ---- Comment boxes: frosted glass, lit from the top-left corner ----------
   The box to write in and every comment card: a see-through surface that
   blurs what is behind it, a green-tinted gradient fading in from the top
   left, a hairline border and a soft highlight along the top edge. Replies
   get a glass box of their own (above). */
#reviews :is(#work-comment-form, #blog-comment-form),
#reviews .comment-list > .comment > .commnetbody {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0 0, rgba(150, 242, 7, .22) 0, rgba(150, 242, 7, .08) 140px, rgba(150, 242, 7, .02) 280px, rgba(150, 242, 7, 0) 420px),
        rgba(22, 22, 27, .55);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 10px 30px rgba(0, 0, 0, .28);
}

/* The form moved into a comment to answer it sits on that comment's glass. */
#reviews .comment-reply-slot :is(#work-comment-form, #blog-comment-form) {
    border-radius: 14px;
    background: radial-gradient(circle at 0 0, rgba(150, 242, 7, .14) 0, rgba(150, 242, 7, .04) 140px, rgba(150, 242, 7, 0) 320px), rgba(255, 255, 255, .02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Fields on the glass: a little darker than it, so the text box reads. */
#reviews :is(#work-comment-form, #blog-comment-form) .form-control {
    background: rgba(0, 0, 0, .28);
    border-color: rgba(255, 255, 255, .08);
}

body.light-mode #reviews :is(#work-comment-form, #blog-comment-form),
body.light-mode #reviews .comment-list > .comment > .commnetbody {
    border-color: rgba(0, 0, 0, .08);
    background:
        radial-gradient(circle at 0 0, rgba(110, 180, 0, .24) 0, rgba(110, 180, 0, .08) 140px, rgba(110, 180, 0, 0) 400px),
        rgba(255, 255, 255, .7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 10px 28px rgba(0, 0, 0, .08);
}

body.light-mode #reviews :is(#work-comment-form, #blog-comment-form) .form-control {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(0, 0, 0, .1);
}

/* ---- The two buttons that take something back: red ------------------------
   Reporting a comment and dropping a reply half-written are not the page's
   green actions; they are drawn in red, filled red on hover. */
#reviews .comment-list li .commnetbody .comment-actions .comment-report-link,
#reviews .comment-form-send .btn[data-comment-reply-cancel] {
    color: #f05252;
    border-color: rgba(240, 82, 82, .55);
    background-color: rgba(240, 82, 82, .06);
}

@media (hover: hover) {
    #reviews .comment-list li .commnetbody .comment-actions .comment-report-link:hover,
    #reviews .comment-form-send .btn[data-comment-reply-cancel]:hover {
        color: #fff;
        border-color: #e02424;
        background-color: #e02424;
    }
}

#reviews .comment-list li .commnetbody .comment-actions .comment-report-link:focus-visible,
#reviews .comment-form-send .btn[data-comment-reply-cancel]:focus-visible {
    outline: 2px solid rgba(240, 82, 82, .7);
    outline-offset: 2px;
}

body.light-mode #reviews .comment-list li .commnetbody .comment-actions .comment-report-link,
body.light-mode #reviews .comment-form-send .btn[data-comment-reply-cancel] {
    color: #c81e1e;
    border-color: rgba(200, 30, 30, .45);
}

/* ---- One's own comment, waiting on a moderator: the three-dot menu -------
   Three dots pinned to the top-left corner of that comment's card. Hovering
   (or tapping) them opens a small menu of «ویرایش» and «حذف», each an icon and
   a word. An action the time limit has closed stays in the menu, greyed, and
   hovering it says why. Matched on the card's own column only, so a parent
   whose reply is the reader's own keeps its date where it was. */
#reviews .commnetbody {
    position: relative;
}

#reviews .commnetbody > .row > div > [data-comment-own] {
    position: absolute;
    top: .7rem;
    left: .75rem;
    z-index: 5;
    display: block;
    margin: 0;
}

#reviews .commnetbody:has(> .row > div > [data-comment-own]) > .row > div > .comment-meta {
    padding-inline-end: 44px;
}

#reviews .comment-own-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted, #9aa0a6);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

#reviews .comment-own-menu:hover .comment-own-toggle,
#reviews .comment-own-menu.is-open .comment-own-toggle,
#reviews .comment-own-toggle:focus-visible {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08);
    color: var(--text-body, #fff);
}

/* The menu hangs from the dots toward the inside of the card. */
#reviews .comment-own-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 150px;
    padding: .35rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(24, 24, 30, .97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}

/* A bridge over the gap, so moving from the dots to the menu keeps it open. */
#reviews .comment-own-list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

#reviews .comment-own-menu:hover .comment-own-list,
#reviews .comment-own-menu:focus-within .comment-own-list,
#reviews .comment-own-menu.is-open .comment-own-list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .15s, transform .15s, visibility 0s;
}

#reviews .comment-own-item {
    position: relative;
    display: block;
}

#reviews .comment-own-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .65rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-body, #fff);
    font-size: 13px;
    line-height: 1.4;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}

#reviews .comment-own-option .comment-btn-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

#reviews .comment-own-option:not(:disabled):hover,
#reviews .comment-own-option:focus-visible {
    background: rgba(255, 255, 255, .08);
    outline: none;
}

#reviews .comment-own-option.is-danger {
    color: #f05252;
}

#reviews .comment-own-option.is-danger:not(:disabled):hover {
    background: rgba(240, 82, 82, .14);
}

#reviews .comment-own-option:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Why an action is closed, beside it on hover - a disabled button shows no
   title of its own. */
#reviews .comment-own-item[data-reason]:hover::after {
    content: attr(data-reason);
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    z-index: 6;
    width: max-content;
    max-width: 240px;
    padding: .45rem .65rem;
    border-radius: 8px;
    background: #2b2b33;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
    color: #fff;
    font-size: 12px;
    line-height: 1.7;
    white-space: normal;
    transform: translateY(-50%);
    pointer-events: none;
}

body.light-mode #reviews .comment-own-list {
    border-color: rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}

body.light-mode #reviews .comment-own-option:not(:disabled):hover {
    background: rgba(0, 0, 0, .05);
}

body.light-mode #reviews .comment-own-menu:hover .comment-own-toggle,
body.light-mode #reviews .comment-own-menu.is-open .comment-own-toggle {
    border-color: rgba(0, 0, 0, .1);
    background: rgba(0, 0, 0, .05);
}

/* Each glass card is its own layer, so a menu hanging out of one would sit
   under the next card: the card whose menu is open comes forward. */
#reviews .comment:has(.comment-own-menu:hover),
#reviews .comment:has(.comment-own-menu:focus-within),
#reviews .comment:has(.comment-own-menu.is-open) {
    position: relative;
    z-index: 20;
}

/* ---- Editing one's comment: the spoiler switch and save/cancel, one row ---
   The text box takes the full width; under it the spoiler switch on the
   right and the two buttons on the left. */
#reviews [data-comment-editor]:not(.d-none) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

#reviews [data-comment-editor] > .comment-edit-box {
    flex: 0 0 100%;
    margin-bottom: .6rem;
}

#reviews [data-comment-editor] > .comment-edit-spoiler {
    margin: 0;
}

#reviews [data-comment-editor] > .comment-own-actions {
    flex-wrap: nowrap;
    gap: .5rem;
    margin: 0;
    margin-inline-start: auto;
}

#reviews [data-comment-editor] .btn .comment-btn-icon {
    width: 16px;
    height: 16px;
}