/* =========================================================================
   文章页评论区：输入框 / 验证码框 / 验证码图 / 表情按钮 / 发布按钮
   作用域：form:has(textarea#comment)，只影响评论表单（含回复表单）
   ========================================================================= */

/* ---------- 1) 输入框：做成"书写卡片" ---------- */
form:has(textarea#comment) textarea#comment {
    min-height: 132px !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    border: 1px solid #e9ecef !important;
    background: #fbfcfd !important;
    color: #1f2d3d !important;
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    box-shadow: none !important;
    resize: vertical;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

form:has(textarea#comment) textarea#comment::placeholder {
    color: #98a2b3 !important;
    font-size: 14px !important;
}

form:has(textarea#comment) textarea#comment:focus {
    background: #fff !important;
    border-color: #34c96f !important;
    box-shadow: 0 0 0 4px rgba(52, 201, 111, .13) !important;
}

/* ---------- 2) 验证码区：整行靠左、输入框与图片等高 ---------- */
form:has(textarea#comment) .comment-info .col-12.col-sm-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

form:has(textarea#comment) .comment-info .row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
}

form:has(textarea#comment) .comment-info {
    margin-top: 10px !important;
}

form:has(textarea#comment) .comment-info .col-8.col-sm-7,
form:has(textarea#comment) .comment-info .col-4.col-sm-5 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    text-align: left !important;
}

form:has(textarea#comment) .comment-info input#comment-vd {
    width: 150px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: #f6f8fa !important;
    color: #1f2d3d !important;
    font-size: 14px !important;
    letter-spacing: .18em;
    text-align: center;
    box-shadow: none !important;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

form:has(textarea#comment) .comment-info input#comment-vd::placeholder {
    color: #a9b3bf !important;
    letter-spacing: normal;
}

form:has(textarea#comment) .comment-info input#comment-vd:focus {
    background: #fff !important;
    border-color: #34c96f !important;
    box-shadow: 0 0 0 3px rgba(52, 201, 111, .13) !important;
}

form:has(textarea#comment) #comment-captcha-box {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
}

form:has(textarea#comment) #comment-captcha-box img.comment-captcha {
    height: 42px !important;
    width: auto !important;
    max-width: 130px;
    border-radius: 10px !important;
    border: 1px solid #e9ecef !important;
    background: #fff;
    object-fit: cover;
    cursor: pointer;
    transition: filter .18s ease, border-color .18s ease;
}

form:has(textarea#comment) #comment-captcha-box img.comment-captcha:hover {
    filter: brightness(1.04);
    border-color: #cfd6dd !important;
}

/* ---------- 3) 底部操作行 ---------- */
form:has(textarea#comment) .p-flex-sbc {
    margin-top: 14px !important;
    align-items: center !important;
    gap: 12px;
}

/* ---------- 4) 表情按钮：40px 圆形 ---------- */
form:has(textarea#comment) .btn.btn-outline-secondary.btn-ssm,
form:has(textarea#comment) .btn.btn-outline-secondary.btn-ssm.pk-modal-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid #e5e8ed !important;
    background: #fff !important;
    color: #6b7684 !important;
    box-shadow: 0 8px 18px -14px rgba(16, 24, 40, .4);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), background .18s ease, color .18s ease, border-color .18s ease;
}

form:has(textarea#comment) .btn.btn-outline-secondary.btn-ssm i {
    font-size: 16px !important;
    color: inherit !important;
}

form:has(textarea#comment) .btn.btn-outline-secondary.btn-ssm:hover {
    background: #eefaf2 !important;
    border-color: #bfe8d0 !important;
    color: #1f8a4c !important;
    transform: translateY(-2px);
}

form:has(textarea#comment) .btn.btn-outline-secondary.btn-ssm:active {
    transform: translateY(0) scale(.94);
}

/* ---------- 5) 发布评论：胶囊 + 绿色渐变 ---------- */
form:has(textarea#comment) button.btn.btn-primary.btn-ssm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 40px !important;
    padding: 0 26px !important;
    line-height: 1 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #34c96f, #23a558) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    box-shadow: 0 12px 24px -14px rgba(35, 165, 88, .8), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease, filter .32s ease;
}

form:has(textarea#comment) button.btn.btn-primary.btn-ssm i {
    font-size: 13px !important;
    color: #fff !important;
}

form:has(textarea#comment) button.btn.btn-primary.btn-ssm:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 18px 30px -14px rgba(35, 165, 88, .9), inset 0 1px 0 rgba(255, 255, 255, .26) !important;
}

form:has(textarea#comment) button.btn.btn-primary.btn-ssm:active {
    transform: translateY(0) scale(.98);
}

/* 取消按钮（回复表单里出现时）同步胶囊 */
form:has(textarea#comment) button.btn.btn-outline-dark.btn-ssm {
    height: 40px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    border: 1px solid #e5e8ed !important;
    background: #fff !important;
    color: #5c6773 !important;
    font-size: 13.5px !important;
}

/* ---------- 6) 移动端 ---------- */
@media (max-width: 575.98px) {
    form:has(textarea#comment) .comment-info .row {
        gap: 8px !important;
    }

    form:has(textarea#comment) .comment-info input#comment-vd {
        width: 120px !important;
    }

    form:has(textarea#comment) #comment-captcha-box img.comment-captcha {
        height: 38px !important;
    }

    form:has(textarea#comment) button.btn.btn-primary.btn-ssm {
        height: 38px !important;
        padding: 0 20px !important;
    }

    form:has(textarea#comment) .btn.btn-outline-secondary.btn-ssm {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
}