.entry-interaction { margin:40px 0 20px; padding-top:24px; border-top:1px solid var(--line); font-family:var(--sans); }
.entry-interaction [hidden] { display:none !important; }
.reaction-bar { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; padding:0; border:0; border-radius:0; background:transparent; }
.reaction-title { font-size:14px; color:var(--muted); }
.reaction-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:auto; min-height:42px; min-width:100px; padding:8px 18px; border:1px solid var(--line); border-radius:24px; background:var(--paper); color:var(--ink); font:500 14px var(--sans); cursor:pointer; }
.reaction-icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }
.reaction-btn.is-reacted { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--paper)); }
.reaction-count { font:12px var(--mono); }
.reaction-btn.pulse { animation: reactionPulse .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.reaction-btn.pulse .reaction-icon { animation: heartPop .45s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.comment-like-btn.pulse { animation: reactionPulse .35s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes reactionPulse { 0% { transform: scale(1); } 45% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes heartPop { 0% { transform: scale(1); } 50% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1) rotate(0deg); } }
.entry-interaction button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.entry-interaction button:disabled { opacity:.5; cursor:wait; }
.comment-box { padding:24px; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:none; }
.comment-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; padding:0; border:0; }
.comment-head h3 { margin:0; font:600 18px/1.4 var(--sans); }
.comment-total { font:13px var(--mono); color:var(--muted); margin-left:6px; }
.comment-tip { font-size:12px; color:var(--muted); }
.comment-form { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; padding:0; border:0; }
.form-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; position:static; }
.reader-avatar { display:inline-block; flex:0 0 auto; width:42px; height:42px; border-radius:50%; background-image:url('/assets/avatars/readers-v1.webp'); background-size:400% 200%; background-color:#f7f3ea; box-shadow:inset 0 0 0 1px rgba(30,25,15,.08); }
.avatar-pen { background-position:0 0; }.avatar-compass { background-position:33.333333% 0; }.avatar-coffee { background-position:66.666667% 0; }.avatar-mountain { background-position:100% 0; }.avatar-book { background-position:0 100%; }.avatar-keycap { background-position:33.333333% 100%; }.avatar-leaf { background-position:66.666667% 100%; }.avatar-lantern { background-position:100% 100%; }
.avatar-current-btn { display:flex; align-items:center; gap:5px; padding:0; height:auto; min-height:44px; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.avatar-current-btn .reader-avatar { width:44px; height:44px; }
.avatar-caret { font-size:11px; }
.nickname-input { min-width:0; flex:1; width:160px; height:auto; min-height:44px; padding:8px 12px; font:16px var(--sans); color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:8px; }
.nickname-input:focus { outline:2px solid color-mix(in srgb,var(--accent) 20%,transparent); border-color:var(--accent); }
.ip-indicator { width:auto; font-size:11px; color:var(--muted); }
.avatar-popover { position:static; width:auto; padding:12px; border:1px solid var(--line); border-radius:12px; box-shadow:none; background:color-mix(in srgb,var(--ink) 2%,var(--paper)); }
.avatar-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.avatar-option { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 2px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font:12px var(--sans); cursor:pointer; }
.avatar-option .reader-avatar { width:48px; height:48px; }
.avatar-option.is-selected { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,var(--paper)); }
.editor-wrapper { display:block; width:100%; min-width:0; border:1px solid var(--line); border-radius:10px; background:transparent; overflow:visible; }
.editor-wrapper:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent); }
.comment-textarea { display:block; width:100%; min-height:96px; padding:14px; color:var(--ink); background:transparent; border:0; border-radius:10px 10px 0 0; resize:none; font:16px/1.65 var(--sans); box-sizing:border-box; }
.comment-textarea:focus { outline:none; }
.editor-toolbar { display:flex; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:8px 10px; border-top:1px solid var(--line); background:transparent; }
.toolbar-actions,.toolbar-right { display:flex; align-items:center; gap:4px; width:auto; position:static; }
.toolbar-right { gap:12px; padding:0; border:0; }
.tool-btn { height:auto; min-height:36px; min-width:32px; padding:4px 8px; border:0; border-radius:6px; background:transparent; color:var(--muted); font:13px var(--sans); cursor:pointer; }
.tool-btn:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,transparent); }
.emoji-popover { position:static; width:auto; max-width:none; padding:10px; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; background:transparent; }
.emoji-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; }
.emoji-btn { display:grid; place-items:center; width:auto; min-width:0; height:44px; border:0; border-radius:6px; background:transparent; cursor:pointer; font-size:19px; }
.emoji-btn:hover { background:color-mix(in srgb,var(--accent) 7%,transparent); transform:none; }
.char-count { color:var(--muted); font:11px var(--mono); }
.submit-btn { height:auto; min-height:38px; padding:8px 16px; border:1px solid var(--accent); border-radius:22px; background:var(--accent); color:white; font:500 14px var(--sans); cursor:pointer; }
.form-privacy { margin:0; font:11.5px/1.6 var(--sans); color:var(--muted); }
.form-notice,.interaction-notice,.comment-load-state { margin:0; font:13px/1.6 var(--sans); color:var(--muted); }
.form-notice,.interaction-notice { padding:10px 12px; border-radius:8px; background:color-mix(in srgb,var(--accent) 4%,var(--paper)); }
.interaction-notice { margin-bottom:14px; }
.entry-interaction .is-error { color:var(--accent); }
.comment-list { display:flex; flex-direction:column; gap:20px; margin:0; padding:0; max-height:none; overflow:visible; }
.comment-empty { margin:8px 0; color:var(--muted); font-size:13px; text-align:center; font-style:normal; }
.comment-item { display:flex; gap:12px; padding:20px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; }
.comment-item-main { min-width:0; flex:1; }
.comment-item-header { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.comment-author { font-size:13px; font-weight:600; }
.comment-time { margin-left:auto; color:var(--muted); font-size:11px; font-family:var(--sans); }
.comment-item-body { color:var(--ink); font-size:14px; line-height:1.75; overflow-wrap:anywhere; }
.comment-item-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; }
.comment-geo { color:var(--muted); font-size:11px; background:transparent; padding:0; font-family:var(--sans); }
.comment-like-btn { margin-left:auto; padding:6px 10px; min-height:32px; border:1px solid transparent; border-radius:16px; background:transparent; color:var(--muted); font:12px var(--sans); cursor:pointer; }
.comment-like-btn.is-liked { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 20%,transparent); background:color-mix(in srgb,var(--accent) 5%,transparent); }
.load-more,.load-retry { display:block; min-height:40px; margin:16px auto 0; padding:8px 16px; border:1px solid var(--line); border-radius:20px; background:transparent; color:var(--ink); font:13px var(--sans); cursor:pointer; }
@media(max-width:720px) {
 .comment-box { padding:18px 12px; border-radius:12px; }
 .comment-head { align-items:baseline; gap:8px; }.comment-head h3 { font-size:17px; }.comment-tip { font-size:11px; }
 .form-meta { gap:8px; }.ip-indicator { width:100%; }
 .editor-toolbar { flex-wrap:nowrap; gap:6px; }.toolbar-right { gap:8px; }
 .submit-btn { min-height:42px; }.comment-item .reader-avatar { width:36px; height:36px; }.comment-item { gap:10px; padding:20px 0 0; }
}
@media(max-width:480px) { .emoji-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }

.emoji-search-bar { display:flex; align-items:center; gap:8px; }
.emoji-search-input { flex:1; min-width:0; width:100%; min-height:42px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font:16px var(--sans); }
.emoji-search-input:focus { outline:2px solid color-mix(in srgb,var(--accent) 18%,transparent); border-color:var(--accent); }
.emoji-search-clear { flex:0 0 auto; min-height:40px; padding:6px; border:0; background:transparent; color:var(--muted); font:12px var(--sans); cursor:pointer; }
.emoji-search-status { margin:10px 0 6px; font:12px/1.6 var(--sans); color:var(--muted); }
.emoji-search-pages { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; font:12px var(--mono); color:var(--muted); }
.emoji-search-pages button,.emoji-search-retry { min-height:40px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink); font:12px var(--sans); cursor:pointer; }
.emoji-search-retry { margin-top:10px; }
@media(max-width:360px) { .emoji-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }