/* =========================================================
   Dark Terminal Comments Theme
   comments-dark.css
   ========================================================= */

:root {

    --comment-bg: #0b0b0b;
    --comment-bg-soft: #111111;

    --comment-border:
        rgba(0,255,136,0.16);

    --comment-border-strong:
        rgba(0,255,136,0.28);

    --comment-text: #d8ffe4;

    --comment-muted: #72c98f;

    --comment-accent: #00ff88;

    --comment-cyan: #00d9ff;

    --comment-shadow:
        0 0 0 1px rgba(0,255,136,0.04),
        0 0 25px rgba(0,255,136,0.05);

    --comment-shadow-hover:
        0 0 0 1px rgba(0,255,136,0.12),
        0 0 35px rgba(0,255,136,0.10);
}

/* =========================================================
   Comments section
   ========================================================= */

#comments-section {

    width: 100%;

    margin-top: 2rem;
}

/* =========================================================
   Comment card
   ========================================================= */

.comment {

    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(10,10,10,0.96),
            rgba(5,5,5,0.98)
        );

    border: 1px solid var(--comment-border);

    border-radius: 18px;

    padding: 1.1rem 1.2rem;

    margin-bottom: 1rem;

    box-shadow: var(--comment-shadow);

    overflow: hidden;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

/* subtle glow line */

.comment::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,255,136,0.5),
            transparent
        );
}

.comment:hover {

    transform: translateY(-2px);

    border-color: var(--comment-border-strong);

    box-shadow: var(--comment-shadow-hover);
}

/* =========================================================
   Reply comments
   ========================================================= */

.comment.reply {

    margin-left: 1rem;

    background:
        linear-gradient(
            90deg,
            rgba(0,255,136,0.05),
            transparent 120px
        ),
        linear-gradient(
            180deg,
            rgba(10,10,10,0.98),
            rgba(5,5,5,1)
        );

    border-left: 3px solid var(--comment-accent);
}

@media (max-width: 640px) {

    .comment.reply {
        margin-left: 0.45rem;
    }
}

/* =========================================================
   Comment header
   ========================================================= */

.comment-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-bottom: 0.9rem;

    padding-bottom: 0.75rem;

    border-bottom:
        1px solid rgba(0,255,136,0.08);
}

/* =========================================================
   Author
   ========================================================= */

.comment-author {

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    font-size: 0.94rem;

    font-weight: 700;

    color: var(--comment-accent);

    background:
        rgba(0,255,136,0.06);

    border:
        1px solid rgba(0,255,136,0.12);

    border-radius: 999px;

    padding: 0.35rem 0.75rem;

    text-shadow:
        0 0 10px rgba(0,255,136,0.22);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03);
}

/* =========================================================
   Date
   ========================================================= */

.comment-date {

    font-size: 0.82rem;

    color: var(--comment-muted);

    background:
        rgba(255,255,255,0.02);

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius: 999px;

    padding: 0.3rem 0.7rem;
}

/* =========================================================
   Comment body
   ========================================================= */

.comment-body {

    color: var(--comment-text);

    line-height: 1.8;

    font-size: 0.97rem;

    overflow-wrap: anywhere;
}

.comment-body a {

    color: var(--comment-cyan);

    text-decoration: none;

    border-bottom:
        1px dashed rgba(0,217,255,0.4);
}

.comment-body a:hover {

    color: #7cecff;

    border-color: #7cecff;
}

/* =========================================================
   Reply button
   ========================================================= */

.reply-btn {

    margin-top: 1rem;

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    background: transparent;

    border: none;

    color: var(--comment-accent);

    font-size: 0.88rem;

    font-weight: 600;

    cursor: pointer;

    padding: 0;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

.reply-btn::before {
    content: "↳";
}

.reply-btn:hover {

    opacity: 0.85;

    transform: translateX(2px);
}

/* =========================================================
   Replies
   ========================================================= */

.replies {

    margin-top: 0.8rem;
}

/* =========================================================
   Reply form container
   ========================================================= */

.reply-form-container {

    margin-top: 1rem;
}

.reply-form-container.hidden {
    display: none;
}

/* =========================================================
   Forms
   ========================================================= */

.reply-form,
.comment-form-wrapper {

    background:
        linear-gradient(
            180deg,
            rgba(15,15,15,0.98),
            rgba(8,8,8,1)
        );

    border:
        1px solid rgba(0,255,136,0.12);

    border-radius: 18px;

    padding: 1.2rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03);
}

.comment-form-wrapper {

    margin-top: 2rem;
}

/* =========================================================
   Form title
   ========================================================= */

.comment-form-wrapper h3 {

    color: var(--comment-accent);

    margin-bottom: 1rem;

    font-size: 1.2rem;

    text-shadow:
        0 0 10px rgba(0,255,136,0.16);
}

/* =========================================================
   Inputs
   ========================================================= */

.form-control {

    width: 100%;

    background: rgba(255,255,255,0.02);

    color: var(--comment-text);

    border:
        1px solid rgba(0,255,136,0.12);

    border-radius: 14px;

    padding: 0.8rem 0.95rem;

    font-size: 0.95rem;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.form-control::placeholder {

    color:
        rgba(180,255,210,0.45);
}

.form-control:focus {

    outline: none;

    background:
        rgba(255,255,255,0.03);

    border-color:
        rgba(0,255,136,0.34);

    box-shadow:
        0 0 0 4px rgba(0,255,136,0.08),
        0 0 18px rgba(0,255,136,0.08);
}

textarea.form-control {

    min-height: 130px;

    resize: vertical;
}

/* =========================================================
   Buttons
   ========================================================= */

.reply-form button,
.comment-form-wrapper button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.45rem;

    background:
        linear-gradient(
            180deg,
            rgba(0,255,136,0.18),
            rgba(0,255,136,0.08)
        );

    color: var(--comment-accent);

    border:
        1px solid rgba(0,255,136,0.22);

    border-radius: 14px;

    padding: 0.7rem 1rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.reply-form button:hover,
.comment-form-wrapper button:hover {

    transform: translateY(-1px);

    background:
        linear-gradient(
            180deg,
            rgba(0,255,136,0.22),
            rgba(0,255,136,0.12)
        );

    box-shadow:
        0 0 18px rgba(0,255,136,0.10);
}

/* =========================================================
   Messages
   ========================================================= */

.comment-msg {

    display: none;

    margin-bottom: 1rem;

    padding: 0.9rem 1rem;

    border-radius: 14px;

    font-size: 0.92rem;

    font-weight: 600;
}

.comment-msg.success {

    display: block;

    color: #7dffb2;

    background:
        rgba(0,255,136,0.08);

    border:
        1px solid rgba(0,255,136,0.16);
}

.comment-msg.error {

    display: block;

    color: #ff8f8f;

    background:
        rgba(255,0,0,0.06);

    border:
        1px solid rgba(255,0,0,0.16);
}

/* =========================================================
   Scrollbars
   ========================================================= */

.reply-form textarea::-webkit-scrollbar,
.comment-body::-webkit-scrollbar {

    width: 8px;
}

.reply-form textarea::-webkit-scrollbar-thumb,
.comment-body::-webkit-scrollbar-thumb {

    background:
        rgba(0,255,136,0.25);

    border-radius: 999px;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 640px) {

    .comment {

        padding: 0.95rem;
    }

    .comment-header {

        align-items: flex-start;
    }

    .comment-body {

        font-size: 0.94rem;

        line-height: 1.75;
    }

    .reply-form,
    .comment-form-wrapper {

        padding: 1rem;
    }

    textarea.form-control {

        min-height: 110px;
    }
}