/* ============================================
   组件：评论区
   依赖：themes/*.css 提供的变量
   结构：.comments / .comment-form / .comment-item / .reply-item
   ============================================ */

/* ---------- 评论区容器 ---------- */
.comments {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--app-border);
}

.comments__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.comments__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.comments__count {
    font-size: .85rem;
    font-weight: 400;
    color: var(--app-text-muted);
}

.comments__sort .form-select {
    width: auto;
    min-width: 100px;
    font-size: .82rem;
    padding: .3rem 2rem .3rem .6rem;
    border-radius: 8px;
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

/* ---------- 发布评论表单 ---------- */
.comment-form {
    background: var(--app-surface, #fff);
    border: 1px solid var(--app-border, #e5e7eb);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--app-shadow, 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.06));
}

.comment-form__row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.comment-form__row .form-control {
    flex: 1;
    max-width: 200px;
    font-size: .88rem;
    padding: .45rem .75rem;
    border-radius: 8px;
    background-color: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text);
}

.comment-form__row .form-control::placeholder {
    color: var(--app-text-muted);
}

/* 评分星星 */
.rating-picker {
    display: flex;
    align-items: center;
    gap: .15rem;
}

.rating-picker__star {
    font-size: 1.2rem;
    color: var(--app-border);
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
    line-height: 1;
}

.rating-picker__star:hover,
.rating-picker__star.is-active {
    color: #f59e0b;
}

.rating-picker__star:hover {
    transform: scale(1.15);
}

.rating-picker__label {
    font-size: .78rem;
    color: var(--app-text-muted);
    margin-left: .35rem;
    min-width: 2.5em;
}

/* 文本区域 */
.comment-form__body {
    position: relative;
}

.comment-form__body .form-control {
    font-size: .88rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    background-color: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text);
    resize: vertical;
    min-height: 80px;
}

.comment-form__body .form-control::placeholder {
    color: var(--app-text-muted);
}

.comment-form__body .form-control:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.comment-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .6rem;
}

/* ---------- 验证码 ---------- */
.comment-form__captcha,
.reply-form__captcha {
    margin-top: .5rem;
}

.comment-form__captcha .captcha-field {
    max-width: 260px;
}

.reply-form__captcha .captcha-field {
    max-width: 240px;
}

.comment-form__count {
    font-size: .78rem;
    color: var(--app-text-muted);
}

.comment-form__count.is-over {
    color: #ef4444;
}

.comment-form .btn-primary {
    border-radius: 8px;
    padding: .4rem 1rem;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ---------- 评论列表 ---------- */
.comment-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

/* 单条评论 */
.comment-item {
    background: var(--app-surface, #fff);
    border: 1px solid var(--app-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: var(--app-shadow, 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.06));
    padding: 1rem;
    transition: box-shadow .2s ease;
    animation: fade-up .45s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms);
}

.comment-item:hover {
    box-shadow: var(--app-shadow);
}

/* 评论头部 */
.comment-item__header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .6rem;
}

.comment-item__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--app-accent);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.comment-item__meta {
    flex: 1;
    min-width: 0;
}

.comment-item__name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--app-text);
    display: block;
    line-height: 1.3;
}

.comment-item__stars {
    display: flex;
    align-items: center;
    gap: .1rem;
    font-size: .72rem;
    color: #f59e0b;
    line-height: 1;
}

.comment-item__stars .star-empty {
    color: var(--app-border);
}

.comment-item__time {
    font-size: .78rem;
    color: var(--app-text-muted);
    flex-shrink: 0;
}

/* 评论内容 */
.comment-item__content {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--app-text);
    margin: 0 0 .6rem;
    word-break: break-word;
}

/* 评论操作按钮 */
.comment-item__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.comment-action {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--app-text-muted);
    background: none;
    border: none;
    padding: .25rem .5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.comment-action:hover {
    color: var(--app-accent);
    background: var(--app-accent-soft);
}

.comment-action.is-liked {
    color: var(--app-accent);
}

/* ---------- 回复区 ---------- */
.comment-replies {
    margin-top: .75rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--app-border);
}

.comment-replies__toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: var(--app-accent);
    background: none;
    border: none;
    padding: .2rem 0;
    cursor: pointer;
    transition: opacity .15s ease;
}

.comment-replies__toggle:hover {
    opacity: .8;
}

.comment-replies__toggle .bi {
    transition: transform .2s ease;
}

.comment-replies__toggle.is-open .bi {
    transform: rotate(180deg);
}

.comment-replies__list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .6rem;
    padding-left: .5rem;
    border-left: 2px solid var(--app-border);
}

/* 回复项 */
.reply-item {
    display: flex;
    gap: .5rem;
    animation: fade-up .35s cubic-bezier(.22, 1, .36, 1) both;
}

.reply-item__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--app-surface-alt);
    color: var(--app-text-muted);
    font-size: .72rem;
    font-weight: 600;
    flex-shrink: 0;
    border: 1px solid var(--app-border);
}

.reply-item__body {
    flex: 1;
    min-width: 0;
}

.reply-item__name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--app-text);
    margin-right: .35rem;
}

.reply-item__content {
    font-size: .85rem;
    line-height: 1.6;
    color: var(--app-text);
    margin: .15rem 0 .3rem;
    word-break: break-word;
}

.reply-item__footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .75rem;
    color: var(--app-text-muted);
}

/* ---------- 回复输入框 ---------- */
.reply-form {
    margin-top: .75rem;
    padding: .75rem;
    background: var(--app-surface-alt);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.reply-form__row {
    display: flex;
    gap: .5rem;
}

.reply-form .form-control {
    font-size: .82rem;
    padding: .4rem .65rem;
    border-radius: 8px;
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.reply-form .form-control::placeholder {
    color: var(--app-text-muted);
}

.reply-form .form-control:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.reply-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
}

.reply-form .btn {
    font-size: .8rem;
    padding: .3rem .75rem;
    border-radius: 6px;
}

/* ---------- 加载更多 / 空状态 ---------- */
.comment-more {
    text-align: center;
    margin-top: 1rem;
}

.comment-more .btn {
    border-radius: 8px;
    padding: .45rem 1.5rem;
    font-size: .85rem;
}

.comment-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--app-text-muted);
}

.comment-empty .bi {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .6rem;
    opacity: .5;
}

.comment-empty p {
    font-size: .9rem;
    margin: 0;
}

/* ---------- 发布成功动画 ---------- */
@keyframes comment-pop {
    0%   { opacity: 0; transform: translateY(-10px) scale(.97); }
    100% { opacity: 1; transform: none; }
}

.comment-item--new {
    animation: comment-pop .4s cubic-bezier(.22, 1, .36, 1) both;
    border-color: var(--app-accent);
}

/* ---------- 点赞动画 ---------- */
@keyframes like-bump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.comment-action--bump i {
    animation: like-bump .3s ease;
}

/* ---------- 响应式 ---------- */
@media (max-width: 575.98px) {
    .comment-form__row {
        flex-direction: column;
        align-items: stretch;
    }

    .comment-form__row .form-control {
        max-width: none;
    }

    .rating-picker {
        margin-top: .25rem;
    }

    .comments__title {
        font-size: .95rem;
    }

    .comments__sort .form-select {
        font-size: .78rem;
        padding: .25rem 1.8rem .25rem .5rem;
    }

    .comment-item__header {
        flex-wrap: wrap;
    }

    .comment-item__time {
        width: 100%;
        margin-left: calc(36px + .65rem);
        margin-top: -.25rem;
    }
}

@media (min-width: 576px) {
    .comment-form {
        padding: 1.25rem;
    }

    .comment-item {
        padding: 1.15rem;
    }
}