/**
 * KissAnime comments box (template-parts/comments/*), reaction strip.
 * Loaded on anime pages and episode pages by KissAnimeComments::enqueue_scripts().
 */

.ka-comments .ka-panel__body { padding: 14px 12px 12px; }
.ka-cm { display: grid; gap: 14px; }
.ka-cm__avatar { border: 1px solid var(--ka-user-border); }

/* ---------- Reactions ---------- */
.ka-rx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: var(--ka-row-odd); border: 1px solid var(--ka-border); }
.ka-rx__label { font-size: 12px; color: var(--ka-muted); margin-right: 4px; }
.ka-rx__btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid #3a3a3a; background: var(--ka-nav); color: #ddd; cursor: pointer; font-size: 12px; transition: border-color .15s, transform .15s; }
.ka-rx__btn:hover { border-color: var(--ka-green); color: #fff; }
.ka-rx__btn.is-active { border-color: var(--ka-link); background: #2f3d13; color: #fff; }
.ka-rx__btn.is-pending { opacity: .6; }
.ka-rx__emoji { font-size: 16px; line-height: 1; }
.ka-rx__count { font-weight: 700; color: var(--ka-link); min-width: 0; }
.ka-rx__count:empty { display: none; }

/* ---------- Toolbar ---------- */
.ka-cm__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ka-border); }
.ka-cm__count { font: 400 15px var(--ka-font-title); color: #fff; }
.ka-cm__count span { color: var(--ka-title); font-weight: 700; }
.ka-cm__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ka-cm__scope { display: inline-flex; gap: 2px; }
.ka-cm__scope button { height: 28px; font-size: 12px; }
.ka-cm__scope button.is-active { background: var(--ka-green-dark); color: #fff; }
.ka-cm__sort select { width: auto; padding: 4px 6px; font-size: 12px; }

/* ---------- Notices ---------- */
.ka-cm__notice { padding: 12px 14px; background: var(--ka-row-odd); border: 1px solid var(--ka-border); color: #ccc; font-size: 12px; }
.ka-cm__notice--muted { border-color: var(--ka-red); }
.ka-cm__guest { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--ka-row-odd); border: 1px dashed var(--ka-border-dark); }
.ka-cm__guest p { margin: 0; font-size: 12px; color: #ccc; }
.ka-cm__guest .btn { padding: 6px 12px; margin-right: 4px; }
.ka-cm__loading, .ka-cm__empty { padding: 18px 0; text-align: center; color: var(--ka-muted); font-size: 12px; margin: 0; }

/* ---------- Composer ---------- */
.ka-cm-form { display: flex; gap: 10px; align-items: flex-start; }
.ka-cm-form__main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ka-cm-form__as { font-size: 12px; color: var(--ka-muted); }
.ka-cm-form__as strong { color: var(--ka-link); }
.ka-cm-form__box { border: 1px solid var(--ka-input-border); background: var(--ka-input-bg); }
.ka-cm-form__box:focus-within { border-color: var(--ka-btn-to); }
.ka-cm-form__box textarea { display: block; border: 0; background: transparent; resize: vertical; min-height: 64px; max-height: 320px; }
.ka-cm-form.is-reply .ka-cm-form__box textarea { min-height: 48px; }
.ka-cm-fmt { display: flex; align-items: center; gap: 2px; padding: 3px 4px; border-bottom: 1px solid #4a4a4a; }
.ka-cm-fmt button { width: 26px; height: 24px; border: 0; background: transparent; color: #aaa; cursor: pointer; font-size: 12px; }
.ka-cm-fmt button:hover { color: var(--ka-link); background: rgba(255, 255, 255, .05); }
.ka-cm-emo { position: relative; margin-left: auto; }
.ka-cm-emo__panel { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 50; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.ka-cm-emo__panel[hidden] { display: none; }
.ka-cm-emo__panel emoji-picker { --background: #1c1c1c; --border-color: #333; --input-border-color: #555; --input-font-color: #ddd; --indicator-color: #89ce19; --button-hover-background: #333; height: 320px; }
.ka-cm-form__error { margin: 0; padding: 6px 10px; background: #3a1212; border: 1px solid #a94442; color: #f2c2c2; font-size: 12px; }
.ka-cm-form__error[hidden] { display: none; }
.ka-cm-form__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ka-cm-form__spoil { font-size: 12px; color: #bbb; }
.ka-cm-form__btns { display: inline-flex; gap: 6px; }
.ka-cm-form__btns .btn, .ka-cm-form__btns .ka-btn-ghost { padding: 7px 14px; }

/* ---------- Comment ---------- */
.ka-cm__list { display: grid; }
.ka-cm-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--ka-border); }
.ka-cm-item:last-child { border-bottom: 0; }
.ka-cm-item.is-reply { padding: 10px 0 0; border-bottom: 0; }
.ka-cm-item.is-focus > .ka-cm-item__main { box-shadow: -3px 0 0 var(--ka-link); padding-left: 8px; }
.ka-cm-item__main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ka-cm-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; }
.ka-cm-name { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ka-link); }
.ka-cm-name.is-level-a, .ka-cm-name.is-level-b { color: #ff9b3d; }
.ka-cm-name.is-level-c, .ka-cm-name.is-level-d { color: #6fd0ff; }
.ka-cm-name.is-level-mute { color: #777; text-decoration: line-through; }
.ka-cm-badge { width: 16px; height: 16px; object-fit: contain; }
.ka-cm-verified { color: #3ea6ff; font-size: 12px; }
.ka-cm-rank { display: inline-block; padding: 1px 6px; background: var(--ka-user); border: 1px solid var(--ka-user-border); color: #e2c9f0; font-size: 10px; line-height: 15px; }
.ka-cm-rank.is-muted { background: #333; border-color: #555; color: #999; }
.ka-chip--staff { color: #111; }
.ka-chip--staff-a, .ka-chip--staff-b { background: #ff9b3d; }
.ka-chip--staff-c, .ka-chip--staff-d { background: #6fd0ff; }
.ka-cm-time { color: var(--ka-muted); font-size: 11px; }
.ka-cm-item__body { position: relative; font-size: 13px; color: #ddd; word-wrap: break-word; overflow-wrap: anywhere; }
.ka-cm-text { line-height: 1.55; }
.ka-cm-text strong { color: #fff; }
.ka-cm-text del { color: #999; }
.ka-cm-text .tag-name { color: var(--ka-highlight); font-weight: 700; }
.ka-cm-text .cm-quote { display: block; padding: 3px 8px; margin: 2px 0; border-left: 3px solid var(--ka-green); background: rgba(255, 255, 255, .04); color: #bbb; }
.ka-cm-item__body.is-spoiler .ka-cm-text { filter: blur(5px); user-select: none; pointer-events: none; }
.ka-cm-spoil { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 10px; border: 1px solid var(--ka-orange); background: #222; color: var(--ka-orange); font-size: 11px; cursor: pointer; white-space: nowrap; }
.ka-cm-item__body.is-spoiler { min-height: 30px; }
.ka-cm-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.ka-cm-act { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; color: #999; font-size: 12px; cursor: pointer; }
.ka-cm-act:hover { color: var(--ka-link); }
.ka-cm-vote.is-voted { color: var(--ka-link); }
.ka-cm-vote[data-cm-vote="0"].is-voted { color: var(--ka-orange); }
.ka-cm-more { position: relative; }
.ka-cm-more__menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; min-width: 170px; display: grid; background: var(--ka-box); border: 1px solid var(--ka-border); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.ka-cm-more__menu[hidden] { display: none; }
.ka-cm-more__menu button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--ka-border); background: none; color: #ddd; font-size: 12px; text-align: left; cursor: pointer; }
.ka-cm-more__menu button:last-child { border-bottom: 0; }
.ka-cm-more__menu button:hover { background: var(--ka-row-hover); color: var(--ka-link); }
.ka-cm-item__reply:empty { display: none; }
.ka-cm-item__reply { padding-top: 6px; }
.ka-cm-thread[hidden] { display: none; }
.ka-cm-thread__toggle { font-size: 12px; }
.ka-cm-replies { padding-left: 4px; border-left: 2px solid var(--ka-border); margin-top: 4px; }
.ka-cm-replies[hidden] { display: none; }
.ka-cm-replies .ka-cm-item.is-reply { padding-left: 10px; }
.ka-cm__more { text-align: center; }
.ka-cm__more[hidden] { display: none; }

/* Toasts (also in member.css for member pages). */
.ka-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 99999; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.ka-toast { padding: 10px 14px; background: var(--ka-box); border: 1px solid var(--ka-border); border-left: 4px solid var(--ka-green); color: var(--ka-text); font-size: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; word-break: break-word; }
.ka-toast.is-in { opacity: 1; transform: none; }
.ka-toast--error { border-left-color: var(--ka-red); }

@media (max-width: 520px) {
	.ka-cm-form > .ka-cm__avatar { display: none; }
	.ka-cm__bar { align-items: flex-start; }
	.ka-rx__name { display: none; }
}