/* Dusk comment module. */
.dusk-comments .dusk-comments-title { display:flex; align-items:center; gap:9px; margin:0 0 24px; font-size:20px; line-height:1.4; }
.dusk-comments-icon { flex:none; color:var(--accent); }
.dusk-comments-label { font-weight:650; }
.dusk-comments-title > span:last-child { margin-left:2px; padding:2px 9px; border-radius:999px; background:var(--code-bg); color:var(--muted); font-size:12px; font-weight:500; }
.dusk-comments .dusk-respond-title { margin:0 0 16px; font-size:15px; font-weight:650; }
.dusk-comments .dusk-comment-input-wrap { margin:0 0 40px; padding:0; border:0; border-radius:0; background:none; }
.dusk-comments .dusk-comment-form { display:grid; grid-template-columns:1.35fr repeat(3,minmax(0,1fr)); gap:12px 16px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.dusk-comment-form .dusk-comment-field { margin:0; min-width:0; }
.dusk-comment-field label { display:flex; align-items:baseline; gap:4px; margin-bottom:4px; font-size:11.5px; letter-spacing:.02em; color:var(--muted); }
.dusk-comment-field label span { font-size:11px; opacity:.8; }
#comments .dusk-comment-field input, #comments .dusk-comment-field textarea { box-sizing:border-box; width:100%; font:inherit; color:var(--fg); background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; }
#comments .dusk-comment-field input { padding:8px 2px; }
.dusk-comments .dusk-comment-field textarea { min-height:100px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); resize:vertical; }
#comments .dusk-comment-field input:focus-visible, #comments .dusk-comment-field textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.dusk-comment-qq-box { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
#comments .dusk-comment-qq-box input { flex:1; min-width:0; border-bottom:0; }
.dusk-comment-avatar-preview { flex:none; width:38px; height:38px; margin-bottom:4px; border:1px solid var(--line); border-radius:50%; object-fit:cover; background:var(--code-bg); }
.dusk-comment-message, .dusk-comment-actions, .dusk-comment-login, .dusk-comment-feedback { grid-column:1/-1; }
.dusk-comment-login { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0; padding:9px 12px; border-radius:10px; background:var(--code-bg); color:var(--muted); font-size:13px; }
.dusk-comment-login-avatar { width:28px; height:28px; margin-right:2px; border-radius:50%; object-fit:cover; background:var(--bg); }
.dusk-comment-login-name { color:var(--fg); font-weight:600; }
.dusk-comment-login-out { margin-left:auto; color:var(--accent); }
.dusk-comment-field[hidden] { display:none !important; }
.dusk-comment-actions { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:0; }
.dusk-comment-tools-slot { flex:1; min-width:0; }
.dusk-comment-actions > button { flex-shrink:0; margin-left:auto; min-height:38px; padding:0 20px; border:1px solid var(--accent); border-radius:999px; background:var(--accent); color:var(--bg); font-size:14px; font-weight:600; }
.dusk-comment-actions > button:hover { filter:brightness(1.06); }
.dusk-comment-actions > button:disabled { opacity:.6; cursor:progress; }
.dusk-comment-feedback { margin:0; color:var(--accent); font-size:13px; }
.dusk-comment-feedback[hidden] { display:none; }
.dusk-comment-input-wrap > .cancel-comment-reply { float:right; font-size:13px; }
.dusk-comment-input-wrap > #cancel-comment-reply-link { float:right; font-size:13px; }
.dusk-comments .dusk-comment-list { display:flex; flex-direction:column; gap:26px; list-style:none; padding:0; margin:0; }
.dusk-comment-list-wrap { margin-top:8px; }
.dusk-comment-item { display:flex; align-items:flex-start; gap:13px; }
.dusk-comment-avatar { flex-shrink:0; }
.dusk-comment-avatar img { display:block; width:45px; height:45px; border:1px solid var(--line); border-radius:50%; background:var(--code-bg); object-fit:cover; }
.dusk-comment-detail { flex:1; min-width:0; }
.dusk-comment-author { display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:var(--fg); font-size:14.5px; font-weight:650; line-height:1.5; }
.dusk-comment-owner { padding:1px 7px; border-radius:999px; background:var(--accent-soft,var(--code-bg)); color:var(--accent); font-size:11px; font-weight:500; }
.dusk-comment-meta { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-top:2px; color:var(--muted); font-size:12px; }
.dusk-comment-meta a { color:inherit; }
.dusk-comment-meta a:hover { color:var(--accent); text-decoration:none; }
.dusk-comment-client { opacity:.85; }
.dusk-comment-reply { margin-left:auto; }
.dusk-comment-reply a { display:inline-flex; align-items:center; min-height:32px; padding:0 10px; border-radius:999px; color:var(--accent); }
.dusk-comment-reply a:hover { background:var(--accent-soft); text-decoration:none; }
.dusk-comment-text { margin-top:7px; font-size:14.5px; line-height:1.85; overflow-wrap:anywhere; }
.dusk-comment-text > :first-child { margin-top:0; }
.dusk-comment-text > :last-child { margin-bottom:0; }
.dusk-comment-text pre { overflow-x:auto; }
.dusk-comment-text img { max-width:100%; height:auto; }
.dusk-comment-text blockquote { margin:8px 0; padding-left:12px; border-left:3px solid var(--line); }
.dusk-comment-at { font-weight:600; color:var(--accent); }
.dusk-comment-pending { color:var(--muted); }
.dusk-comment-parent { scroll-margin-top:4rem; }
.dusk-comment-parent > .dusk-comment-quote { margin-left:22px; padding-left:22px; border-left:1px solid var(--line); }
.dusk-comment-child > .dusk-comment-item { margin-top:16px; }
.dusk-comment-child .dusk-comment-avatar img { width:35px; height:35px; }
.dusk-comment-list .dusk-comment-input-wrap { margin:18px 0; }
@media (max-width:899px) {
    .dusk-comments .dusk-comment-form { grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px; }
    .dusk-comment-qq, .dusk-comment-website, .dusk-comment-message, .dusk-comment-actions, .dusk-comment-login, .dusk-comment-feedback { grid-column:1/-1; }
    .dusk-comment-parent > .dusk-comment-quote { margin-left:12px; padding-left:14px; }
    .dusk-comment-client { display:none; }
}
@media (max-width:599px) {
    .dusk-comments .dusk-comment-form { gap:10px 12px; padding:12px; }
    .dusk-comments .dusk-comment-field textarea { min-height:84px; padding:10px 12px; }
    .dusk-comment-avatar img { width:38px; height:38px; }
    .dusk-comment-child .dusk-comment-avatar img { width:32px; height:32px; }
    .dusk-comment-avatar-preview { width:34px; height:34px; }
    .dusk-comment-actions { gap:8px; }
    .dusk-comment-actions > button { width:auto; min-height:36px; padding:0 18px; }
}

.dusk-comment-editor { position:relative; width:100%; }
.dusk-comment-toolbar { position:relative; display:flex; flex-wrap:wrap; gap:6px; padding:0; }
.dusk-emoji-picker { position:relative; }
.dusk-comment-toolbar button { display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:38px; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--fg); font:inherit; font-size:13px; line-height:1.3; cursor:pointer; }
.dusk-comment-toolbar button:hover, .dusk-comment-toolbar button[aria-expanded="true"] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.dusk-comment-toolbar button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.dusk-comment-toolbar button svg { display:block; }
.dusk-comment-editor #textarea { display:block; width:100%; border-radius:10px; resize:vertical; }
.dusk-emoji-panel { position:absolute; bottom:calc(100% + 10px); left:0; z-index:20; width:min(420px,calc(100vw - 48px)); box-sizing:border-box; max-height:270px; overflow:hidden; overscroll-behavior:contain; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--dialog-bg,var(--bg)); color:var(--fg); box-shadow:0 18px 46px rgb(15 23 42 / 18%); opacity:0; visibility:hidden; transform:translateY(8px) scale(.98); transform-origin:0 100%; transition:opacity .16s ease,transform .16s ease,visibility .16s; contain:layout paint; }
.dusk-emoji-panel.is-open { opacity:1; visibility:visible; transform:none; }
.dusk-comment-toolbar [hidden], .dusk-emoji-panel[hidden], .dusk-emoji-panel section[hidden] { display:none; }
.dusk-emoji-panel h3 { display:none; }
.dusk-emoji-panel section { max-height:210px; overflow:auto; overscroll-behavior:contain; padding:10px; scrollbar-gutter:stable; }
.dusk-emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:4px; margin-bottom:10px; }
.dusk-comment-toolbar .dusk-emoji-grid button { min-height:42px; border-color:transparent; background:transparent; }
.dusk-comment-toolbar .dusk-emoji-grid button:hover { border-color:var(--line); background:var(--bg); }
.dusk-emoji-grid img { display:block; width:32px; height:32px; object-fit:contain; }
.post-content img.dusk-emoji, .dusk-comments img.dusk-emoji, .dusk-comments img[src*="/assets/emoji/aru/"], .dusk-comments img[src*="/assets/emoji/paopao/"] { display:inline-block; width:32px; height:32px; max-width:32px; margin:0 3px; border:0; border-radius:0; box-shadow:none; vertical-align:middle; object-fit:contain; }
.dusk-emoji-tabs { display:flex; gap:4px; padding:8px 10px; border-top:1px solid var(--line); background:var(--code-bg); }
.dusk-emoji-tabs button { min-width:42px; min-height:38px; border-color:transparent; background:transparent; }
.dusk-emoji-tabs button[aria-selected="true"] { border-color:var(--line); background:var(--bg); }
.dusk-emoji-tabs img { width:24px; height:24px; object-fit:contain; }
@media (prefers-reduced-motion:no-preference) {
    .dusk-emoji-grid button:hover img { transform:scale(1.18); transition:transform .18s ease; }
}
@media (max-width:599px) {
    .dusk-emoji-panel {
        position:fixed;
        right:12px;
        bottom:max(12px, env(safe-area-inset-bottom));
        left:12px;
        width:auto;
        max-height:min(50vh, 340px);
        transform-origin:center bottom;
        z-index:60;
    }
    .dusk-emoji-panel section { max-height:min(38vh, 250px); }
}
@media (prefers-reduced-motion:reduce) {
    .dusk-emoji-panel { transition:none; }
}