/*!
 *   _____ _  _____ _   _ __  __
 *  |  ___/ \|_   _| | | |  \/  |
 *  | |_ / _ \ | | | | | | |\/| |
 *  |  _/ ___ \| | | |_| | |  | |
 *  |_|/_/   \_\_|  \___/|_|  |_|
 *
 ————————————————————————
 *
 * Project : Fatum
 *
 * Author : Pear Blossom Poetry
 *
 * Description : A lightweight, simple, refined and pure personal dynamic program
 *
 * Copyright (c) : 2026 by 梨花诗 All Rights Reserved
 *
 * Restriction : Redistribution, modification, repackaging, resale, or unauthorized public deployment without express written permission is strictly prohibited.
 *
 * The only official purchasing channel：qq：1239399954
 *
 * Official website：https://imoe.top
 *
 * Warning : FATUM is an original work. Any unauthorized copying, scraping, resale, redistribution or commercial use is prohibited.
 *
 * Notice : Fatum has successfully passed the National Copyright Administration’s computer software copyright registration certificate We respect intellectual property rights and protect original achievements, and we also protect the legitimate rights and interests of every genuine user.
 *
 * Other : Development and ongoing long‑term maintenance demand considerable time and energy. Please respect this work and abide by the corresponding licensing provisions.
 *
 ————————————————————————
 *
 */
 
.pg-comments-section {
    --primary: #1d9bf0;
    --primary-light: #e8f4fd;
    --text: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --bg: #ffffff;
    --radius: 14px;
    --radius-sm: 8px;
    margin: 24px 0 0;
    background: transparent;
}
.pg-comments-section .pg-top-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    border-radius: 2px;
    margin: 0 auto 14px;
}
.pg-top-header {
    text-align: center;
    margin-bottom: 10px;
}
.pg-top-header h2 {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}
.pg-top-count {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
.pg-comment-form {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    padding: 12px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}
.pg-comment-form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(var(--primary-rgb),0.1);
}
.pg-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.pg-form-row-email {
    position: relative;
    margin-bottom: 12px;
    display: block;
}
.pg-form-row-email .pg-form-input {
    width: 100%;
    padding-right: 46px;
}
.pg-form-avatar-preview {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    overflow: hidden;
    border: 1px solid var(--border);
}
.pg-form-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pg-form-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12px;
    color: var(--text);
    background: var(--bg);
    outline: none;
    transition: all 0.2s ease;
    min-width: 0;
}
.pg-form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.08);
}
.pg-form-input::placeholder {
    color: #c4c9d4;
}
.pg-form-textarea {
    width: 100%;
    min-height: 64px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    outline: none;
    resize: vertical;
    line-height: 1.5;
    transition: all 0.2s ease;
}
.pg-form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.08);
}
.pg-form-textarea::placeholder {
    color: #c4c9d4;
}
.pg-form-footer {
    display: flex;
    align-items: center;
    margin-top: 8px;
}
.pg-btn-send {
    height: 28px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pg-btn-send.ft-verify {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.ft-verify.busy {
    pointer-events: none;
    opacity: .55;
}
.ft-verify.ok {
    cursor: default;
}
.pg-sticker-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.04);
    border: none;
    transition: all 0.15s;
    flex-shrink: 0;
    margin-right: 4px;
}
.pg-sticker-btn:hover {
    background: rgba(0,0,0,0.08);
}
.pg-sticker-btn:active {
    transform: scale(0.92);
}
.pg-sticker-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--primary);
}
.pg-sticker-panel {
    display: none;
    margin: 4px 6px 8px;
    background: #f8f9fc;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid var(--border);
}
.pg-sticker-panel.show {
    display: block;
}
.pg-sticker-tabs {
    display: flex;
    gap: 8px;
    padding: 0 4px 6px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: 6px;
}
.pg-sticker-tab {
    font-size: 11px;
    color: #999;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.pg-sticker-tab.active {
    background: rgba(var(--primary-rgb),0.1);
    color: var(--primary);
    font-weight: 500;
}
.pg-sticker-tab:hover {
    background: rgba(0,0,0,.04);
}
.pg-sticker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    overflow-y: auto;
    max-height: 118px;
    padding: 2px;
}
.pg-sticker-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    height: 36px;
}
.pg-sticker-grid-item:hover {
    background: rgba(0,0,0,.06);
    transform: scale(1.15);
}
.pg-sticker-grid-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    pointer-events: none;
}
.ck-wrap { --ck-extend: 22px; margin: 0 0 8px; }
.ios .ck-wrap { --ck-extend: 30px; }
@media (min-width: 481px) {
  .timeline .ck-wrap { --ck-extend: 48px; }
}
.ck-list { margin: 0; padding: 0; list-style: none; }
.ck-item {
    list-style: none; position: relative;
    padding: 0;
    margin-left: 0; margin-right: 0;
    border-top: 0;
    display: block;
}
.ck-item + .ck-item { margin-top: 10px; }
.ck-item:first-child { padding-top: 11px; }
.ck-item:last-child { padding-bottom: 11px; }
.ck-self {
    background: #f7f7f7;
    border-radius: 12px;
    padding: 11px 12px;
    display: flex;
    gap: 10px;
}
.ck-av {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: #f0f0f0; margin-top: -.5px;
    border: 1.5px solid #fff; box-shadow: 0 2px 7px rgba(31,45,80,.16), 0 .5px 1.5px rgba(31,45,80,.1);
}
.ck-body { flex: 1; min-width: 0; }
.ck-author { padding-top: 1px; display: flex; align-items: center; gap: 6px; }
.ck-name { font-size: 14px; font-weight: 400; color: var(--text); line-height: 1.25; }
.ck-sname { font-size: 13px; font-weight: 400; color: var(--text); line-height: 1.25; padding-top: 1px; }
.ck-name .un, .ck-sname .un { font-weight: 400; color: var(--text); }
.ck-nlink { text-decoration: none; color: rgb(var(--primary-rgb)); }
.ck-nlink:active { opacity: .7; }
.ck-row { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.ck-sub .ck-row { margin-top: 4px; gap: 8px; }
.ck-time { font-size: 11px; color: #8a919c; line-height: 1; }
.ck-sub .ck-time { font-size: 10.5px; }
.ck-reply {
    border: 0; background: transparent; font-size: 11px; font-weight: 500; color: #8a919c;
    cursor: pointer; font-family: inherit; padding: 0; line-height: 1;
    transition: color .15s; -webkit-tap-highlight-color: transparent;
}
.ck-reply:active { color: rgb(var(--primary-rgb)); }
.ck-sub .ck-reply { font-size: 10.5px; }
.ck-txt { font-size: 13.5px; color: var(--text); line-height: 1.55; margin-top: 5px; word-break: break-word; white-space: pre-wrap; }
.ck-stxt { font-size: 12.5px; color: var(--text); line-height: 1.5; margin-top: 4px; word-break: break-word; white-space: pre-wrap; }
.ck-txt .at, .ck-stxt .at { color: var(--text); }
.ck-subs { margin: 8px 0 0 44px; background: #f7f7f7; border-radius: 12px; padding: 2px 12px; }
.ck-sub { padding: 9px 0; list-style: none; display: flex; gap: 8px; }
.ck-sub + .ck-sub { border-top: 1px solid rgba(31,45,80,.04); }
.ck-sav {
    width: 25px; height: 25px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: #eceff3; margin-top: 1.5px;
    border: 1px solid #fff; box-shadow: 0 1px 3px rgba(31,45,80,.08);
}
.ck-hidden { display: none !important; }
.ck-fold {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid rgba(var(--primary-rgb),.35); background: transparent;
    color: rgb(var(--primary-rgb)); font-size: 11.5px; font-weight: 400; cursor: pointer;
    font-family: inherit; padding: 5.5px 13px; border-radius: 99px; margin: 9px 0 0 44px;
    -webkit-tap-highlight-color: transparent;
}
.ck-fold svg { width: 10px; height: 10px; transition: transform .2s; }
.ck-fold.open svg { transform: rotate(180deg); }
.ck-endline { border-top: 1px solid var(--border); margin: 0 calc(-1 * var(--ck-extend)); }
.pg-empty-state {
    text-align: center;
    padding: 24px 16px;
}
.pg-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.pg-empty-icon svg {
    width: 24px;
    height: 24px;
    color: #cbd5e1;
}
.pg-empty-state h3 {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.pg-empty-state p {
    font-size: 13px;
    color: var(--text-muted);
}
.pc-closed-state {
    text-align: center;
    padding: 26px 20px 2px;
}
.pc-closed-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.pc-closed-icon svg {
    width: 24px;
    height: 24px;
    color: #cbd5e1;
}
.pc-closed-state h3 {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.pc-closed-state p {
    font-size: 13px;
    color: var(--text-muted);
}
@keyframes pgShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
 
.page-view:has(.pg-comments-section) {
    padding-bottom: 4px;
}
 
.page-view:has(.pg-comments-section) ~ .footer-copyright {
    margin-top: 4px;
}
 
.page-view:has(.pc-closed-state) ~ .footer-copyright {
    margin-top: 26px;
}