/* 评论表情选择器（数据源：https://owo.imaegoo.com/owo.json）
   独立文件加载，避免依赖 v2.min.css 的构建产物。 */

.qiwi-v2 .comment-emoji { position: static; display: flex; flex: 0 0 38px; }
.qiwi-v2 .comment-emoji-toggle {
    display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px;
    padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--v2-muted);
    font-family: inherit; cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
.qiwi-v2 .comment-emoji-toggle svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.qiwi-v2 .comment-emoji-toggle:hover,
.qiwi-v2 .comment-emoji-toggle:focus-visible { background: color-mix(in srgb, var(--v2-accent) 15%, transparent); color: var(--v2-accent); }
.qiwi-v2 .comment-emoji.is-open .comment-emoji-toggle { background: color-mix(in srgb, var(--v2-accent) 18%, transparent); color: var(--v2-accent); }

.qiwi-v2 .comment-emoji-panel {
    position: absolute; right: 0; top: calc(100% + 6px); left: 0; z-index: 30;
    display: flex; flex-direction: column; max-height: 320px; padding: 10px 10px 6px;
    border: 1px solid var(--v2-border-soft); border-radius: var(--v2-radius);
    background: var(--v2-surface);
    box-shadow: 0 18px 42px rgba(2, 6, 23, .18);
    animation: qiwiEmojiIn .18s cubic-bezier(.22, .61, .36, 1);
}
.qiwi-v2 .comment-emoji-panel[hidden] { display: none; }
@keyframes qiwiEmojiIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .qiwi-v2 .comment-emoji-panel { animation: none; } }

.qiwi-v2 .comment-emoji-tabs {
    display: flex; flex: 0 0 auto; gap: 6px; padding: 0 28px 8px 0;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.qiwi-v2 .comment-emoji-tabs::-webkit-scrollbar { display: none; }
.qiwi-v2 .comment-emoji-tab {
    padding: 4px 11px; border: 1px solid transparent; border-radius: 999px;
    background: transparent; color: var(--v2-muted); font-family: inherit; font-size: .74rem;
    line-height: 1.6; letter-spacing: .02em; white-space: nowrap; cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.qiwi-v2 .comment-emoji-tab:hover { color: var(--v2-accent); }
.qiwi-v2 .comment-emoji-tab.is-active {
    border-color: color-mix(in srgb, var(--v2-accent) 34%, transparent);
    background: color-mix(in srgb, var(--v2-accent) 12%, transparent);
    color: var(--v2-accent-strong);
}
.qiwi-v2 .comment-emoji-close {
    position: absolute; top: 4px; right: 4px; display: grid; place-items: center;
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--v2-muted); font-family: inherit; font-size: 1rem;
    line-height: 1; cursor: pointer; transition: color .18s ease, background-color .18s ease;
}
.qiwi-v2 .comment-emoji-close:hover { background: color-mix(in srgb, var(--v2-accent) 14%, transparent); color: var(--v2-accent); }

.qiwi-v2 .comment-emoji-grid {
    display: grid; flex: 1 1 auto; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 2px; align-content: start; padding: 2px 2px 4px; overflow-y: auto; overscroll-behavior: contain;
}
.qiwi-v2 .comment-emoji-item {
    display: grid; place-items: center; min-height: 38px; padding: 3px;
    border: 0; border-radius: 6px; background: transparent; color: var(--v2-text);
    font-family: inherit; cursor: pointer; transition: background-color .15s ease;
}
.qiwi-v2 .comment-emoji-item:hover,
.qiwi-v2 .comment-emoji-item:focus-visible { background: color-mix(in srgb, var(--v2-accent) 13%, transparent); }
.qiwi-v2 .comment-emoji-item img { display: block; width: 32px; height: 32px; object-fit: contain; }
.qiwi-v2 .comment-emoji-item.is-emoji { font-size: 1.25rem; line-height: 1; }
.qiwi-v2 .comment-emoji-item.is-kaomoji { grid-column: span 3; padding: 3px 5px; overflow: hidden; font-size: .7rem; line-height: 1.4; white-space: nowrap; text-align: center; }

.qiwi-v2 .comment-emoji-status {
    flex: 0 0 auto; margin: 4px 0 2px; color: var(--v2-muted);
    font-size: .72rem; line-height: 1.6; text-align: center;
}
.qiwi-v2 .comment-emoji-status[hidden] { display: none; }
.qiwi-v2 .comment-emoji-status.is-error { color: var(--v2-danger, #dc2626); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* 评论正文里的表情图（[sticker:owo/xxx] 渲染结果）：按行内尺寸收住 */
.qiwi-v2 .comment-text img.comment-sticker { display: inline-block; width: auto; height: 2em; margin: 0 .08em; vertical-align: -.36em; }
.qiwi-v2 .comment-text img.comment-sticker + img.comment-sticker { margin-left: .12em; }

@media (max-width: 560px) {
    .qiwi-v2 .comment-emoji-panel { top: calc(100% + 4px); max-height: 280px; padding: 8px 8px 4px; }
    .qiwi-v2 .comment-emoji-grid { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
    .qiwi-v2 .comment-emoji-item { min-height: 36px; }
    .qiwi-v2 .comment-emoji-item img { width: 30px; height: 30px; }
}