/*
 * AnimeKAI skin — comments. Owned by the comments re-skin; loaded on every page by
 * layouts/anikoto.blade.php after anikai-bridge.css.
 *
 * Covers the comment widget that comments.js / community.min.js inject on the watch page
 * (section#comments > #content-comments) and on community posts
 * (#community-comments > #content-comments-community): partials/comments/* and
 * components/frontend/comment-composer. The look is AnimeKAI's #comment section
 * (theme template-parts/watch/comments.php + its "#comment …" / "#cm-widget …" rules):
 * #181d22 bubbles, green (#36cb68) accents, orange (#e45f3a) primary button.
 *
 * Everything is keyed off #cm-widget (the widget root) or a comments.js-only class, so
 * nothing leaks to other pages. This file replaces assets/anikoto/css/comments.css,
 * which must not be loaded next to it (its !important Inter / "Font Awesome 6 Free"
 * rules break AnimeKAI's fonts and icons).
 */

/* ---------------------------------------------------------------------------------
   Section frame (watch page: section#comments; community post: #community-comments)
   --------------------------------------------------------------------------------- */
#comments.block_area-comment,
#community-comments.block_area-comment {
	position: relative;
}

#content-comments:empty,
#content-comments-community:empty {
	min-height: 6rem;
	border-radius: .7rem;
	background: linear-gradient(90deg, rgba(255, 255, 255, .02) 0%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .02) 100%);
	background-size: 200% 100%;
	animation: cmSkel 1.4s linear infinite;
}

@keyframes cmSkel {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

#cm-widget {
	width: 100%;
	color: rgba(255, 255, 255, .78);
	font-size: .95rem;
}

#cm-widget .fa-regular {
	font-weight: 300; /* no 400 face in AnimeKAI's FA6 Pro kit — map to Light */
}

#cm-widget a {
	text-decoration: none;
}

#cm-widget .btn {
	box-shadow: none;
	outline: 0;
}

/* Rules / moderation notice from CommentService::notice(). */
#cm-widget .cm-rules-note {
	margin: 0 0 1rem;
	padding: .7rem 1rem;
	border-radius: .65rem;
	background: rgba(54, 203, 104, .08);
	border-left: 3px solid #36cb68;
	color: rgba(255, 255, 255, .75);
	font-size: .88rem;
	line-height: 1.5;
}

#cm-widget .cm-rules-note a {
	color: #36cb68;
	font-weight: 500;
}

/* The widget's icon carries Bootstrap 4's .mr-2, which the Bootstrap 5 CSS
   on this skin does not define — space it here. */
#cm-widget .cm-rules-note > i:first-child {
	margin-right: .5rem;
	color: #36cb68;
}

/* ---------------------------------------------------------------------------------
   Scope tabs (.cm-by) — AnimeKAI's "Anime | Episode N" .snav
   --------------------------------------------------------------------------------- */
#cm-widget .cm-scope {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 0 0 .6rem;
	text-align: right;
}

#cm-widget .cm-scope .tab {
	color: #fff;
	cursor: pointer;
	padding: .2rem .5rem;
	font-size: 1.1rem;
	line-height: 1.4;
	transition: color .2s;
	user-select: none;
	white-space: nowrap;
}

#cm-widget .cm-scope .tab:last-child {
	padding-right: 0;
}

#cm-widget .cm-scope .tab:hover,
#cm-widget .cm-scope .tab.active {
	color: #36cb68;
}

/* On the watch page the tabs sit on the right of the section title row, as on AnimeKAI. */
#comments #cm-widget .cm-scope {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	height: 2.25rem;
}

/* ---------------------------------------------------------------------------------
   Count + sort row
   --------------------------------------------------------------------------------- */
#cm-widget .cm-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, .55);
}

#cm-widget .cm-head .cm-count {
	color: rgba(255, 255, 255, .55);
}

#cm-widget .sort-cm {
	display: flex;
	gap: 1rem;
}

#cm-widget .sort-cm a {
	color: rgba(255, 255, 255, .45);
	font-size: .95rem;
	font-weight: 500;
	padding-bottom: .1rem;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color .2s;
}

#cm-widget .sort-cm a:hover,
#cm-widget .sort-cm a.active {
	color: #36cb68;
}

#cm-widget .sort-cm a.active {
	border-bottom-color: #e45f3a;
}

/* ---------------------------------------------------------------------------------
   Avatars (image, with an initial behind it for broken / missing images)
   --------------------------------------------------------------------------------- */
#cm-widget .user-avatar {
	position: relative;
	display: block;
	flex: 0 0 2.8rem;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(228, 95, 58, .4);
	color: #fff;
	font-weight: 600;
}

#cm-widget .user-avatar::before {
	content: attr(data-initial);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	pointer-events: none;
}

#cm-widget .user-avatar-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #181d22;
}

/* ---------------------------------------------------------------------------------
   Composer (.comment-input + x-frontend.comment-composer = AnimeKAI .item-editor/.cm-editor)
   --------------------------------------------------------------------------------- */
#cm-widget .comment-input {
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	margin-bottom: 1rem;
}

/* Community post: the composer waits for the post's Reply button (widget.blade.php). */
#cm-widget .comment-input.item-editor.is-collapsed {
	display: none;
}

#cm-widget .comment-input .ci-form {
	flex: 1;
	min-width: 0;
}

#cm-widget .comment-input .user-name {
	margin: 0 0 .4rem;
	color: rgba(255, 255, 255, .45);
	font-size: .85rem;
}

#cm-widget .comment-input .user-name .link-highlight {
	color: #36cb68;
	font-weight: 500;
}

#cm-widget .comment-form,
#cm-widget .cm-edit-form {
	position: relative;
	margin: 0;
}

#cm-widget .comment-container {
	position: relative;
	background: #181d22;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: .65rem;
	transition: border-color .2s;
}

#cm-widget .comment-container:focus-within {
	border-color: rgba(54, 203, 104, .35);
}

#cm-widget .comment-container textarea.comment-subject {
	display: block;
	width: 100%;
	min-height: 4.8rem;
	max-height: 20rem;
	margin: 0;
	padding: .75rem 1rem;
	background: transparent !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: .65rem .65rem 0 0;
	box-shadow: none !important;
	font-size: .95rem;
	line-height: 1.5;
	resize: vertical;
}

#cm-widget .comment-container textarea.comment-subject::placeholder {
	color: rgba(255, 255, 255, .5);
}

#cm-widget .editor-ctrl {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: .45rem .6rem;
	background: rgba(255, 255, 255, .025);
	border-radius: 0 0 .65rem .65rem;
}

#cm-widget .toolbar,
#cm-widget .cm-fmt-bar,
#cm-widget .ci-emo {
	display: flex;
	align-items: center;
	gap: .4rem;
}

#cm-widget .toolbar {
	flex-wrap: wrap;
	position: relative;
	min-width: 0;
}

/* .tb-item (composer) and .cm-fmt-btn / .cb-icon (also in comments.js's inline edit form). */
#cm-widget .tb-item,
#cm-widget .cm-fmt-btn,
#cm-widget .ci-emo .cb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .35rem;
	border: 0;
	border-radius: .4rem;
	background: transparent;
	color: rgba(255, 255, 255, .55);
	font-size: .9rem;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, color .2s;
}

#cm-widget .tb-item:hover,
#cm-widget .cm-fmt-btn:hover,
#cm-widget .ci-emo .cb-icon:hover,
#cm-widget .tb-item:focus-visible,
#cm-widget .cm-fmt-btn:focus-visible {
	background: rgba(255, 255, 255, .06);
	color: #fff;
	outline: 0;
}

#cm-widget .cm-fmt-btn .cm-fmt-i {
	font-style: italic;
}

#cm-widget .cm-fmt-btn .cm-fmt-s {
	text-decoration: line-through;
}

#cm-widget .separator {
	width: 1px;
	height: 1.3rem;
	background: rgba(255, 255, 255, .12);
}

/* Whole-comment spoiler flag (.btn-spoil toggles .active in comments.js). */
#cm-widget .btn-spoil {
	font-size: .85rem;
	white-space: nowrap;
}

#cm-widget .btn-spoil.active,
#cm-widget .btn-spoil.active:hover {
	background: rgba(228, 95, 58, .15);
	color: #e45f3a;
}

#cm-widget .ci-buttons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-shrink: 0;
}

#cm-widget .ci-buttons .btn-cancel,
#cm-widget .ci-buttons .btn-secondary {
	padding: 0 1rem;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, .5);
	cursor: pointer;
}

#cm-widget .ci-buttons .btn-cancel:hover,
#cm-widget .ci-buttons .btn-secondary:hover {
	color: #e45f3a;
}

#cm-widget .ci-buttons .btn-primary {
	padding: .3rem .8rem;
	border-radius: .4rem;
	color: #fff;
	font-weight: 500;
}

#cm-widget .ci-buttons .cb-li {
	display: inline-flex;
}

#cm-widget .cm-error {
	margin: .5rem 0 0;
	padding: .5rem .8rem;
	border: 0;
	border-left: 3px solid #e45f3a;
	border-radius: .4rem;
	background: rgba(228, 95, 58, .1);
	color: #ffb5a1;
	font-size: .85rem;
}

#cm-widget .cm-error span {
	display: block;
}

/* comments.js's inline edit form keeps the old shape: .cm-composer-grow (.cm-fmt-bar + textarea)
   and .ci-emo inside .comment-container, then .ci-buttons (.ci-b-left spoil, .ci-b-right). */
#cm-widget .cm-edit-composer-wrap {
	display: block;
	margin: .2rem 0 .4rem;
}

#cm-widget .cm-edit-form .comment-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

#cm-widget .cm-edit-form .cm-composer-grow {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column-reverse;
}

#cm-widget .cm-edit-form .cm-fmt-bar {
	padding: .45rem .6rem;
	background: rgba(255, 255, 255, .025);
	border-radius: 0 0 .65rem .65rem;
}

#cm-widget .cm-edit-form .ci-emo {
	position: absolute;
	right: .6rem;
	bottom: .45rem;
}

#cm-widget .cm-edit-form .ci-buttons {
	display: flex !important;
	justify-content: space-between;
	margin-top: .5rem;
}

#cm-widget .cm-edit-form .ci-buttons .cm-error {
	flex: 1 1 100%;
	order: 3;
}

#cm-widget .cm-edit-form .ci-buttons .btn-spoil {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .6rem;
	border-radius: .4rem;
	color: rgba(255, 255, 255, .55);
}

#cm-widget .cm-edit-form .ci-buttons .btn-spoil i {
	margin: 0 !important;
}

/* Reply composer (#reply-{id}) inside a bubble. */
#cm-widget .comment-input.is-reply {
	margin: .8rem 0 0;
}

#cm-widget .comment-input.is-reply .user-avatar {
	flex-basis: 2.2rem;
	width: 2.2rem;
	height: 2.2rem;
}

#cm-widget .comment-input.is-reply textarea.comment-subject {
	min-height: 3.2rem;
}

/* Busy overlay on a submitting form. */
#cm-widget .loading-absolute {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: .65rem;
	background: rgba(12, 17, 22, .55);
}

#cm-widget .loading-absolute .loading {
	width: 1.75rem;
	height: 1.75rem;
	border: 3px solid rgba(255, 255, 255, .12);
	border-top-color: #36cb68;
	border-radius: 50%;
	animation: cmSpin .9s linear infinite;
}

@keyframes cmSpin {
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------------
   Comment bubble (.cw_l-line.cm-comment = AnimeKAI .cm-item.cm-comment)
   --------------------------------------------------------------------------------- */
#cm-widget .cm-items {
	margin-top: .2rem;
}

#cm-widget .cw_l-line {
	display: flex;
	gap: .8rem;
	margin-top: .8rem;
	padding: 1rem;
	border-radius: .7rem;
	background: #181d22;
	transition: box-shadow .3s;
}

#cm-widget .cw_list > .cw_l-line:first-child {
	margin-top: 0;
}

#cm-widget .cw_l-line.is-pinned {
	box-shadow: inset 3px 0 0 #36cb68;
}

/* Deep-linked comment (?c_id=…) and its thread target. */
#cm-widget .cw_l-line.comment-focus {
	box-shadow: 0 0 0 1px rgba(54, 203, 104, .55), 0 0 0 4px rgba(54, 203, 104, .12);
	animation: cmFocus 1.6s ease-out 1;
}

@keyframes cmFocus {
	0% { background-color: rgba(54, 203, 104, .2); }
	100% { background-color: #181d22; }
}

#cm-widget .cw_l-line {
	flex-wrap: wrap;
}

#cm-widget .cw_l-line .info {
	flex: 1 1 0;
	min-width: 0;
}

/* The first reply to a comment with none yet is appended by comments.js to #cm-{id} itself
   (not to its .info): drop it onto its own row, aligned with the text column. */
#cm-widget .cw_l-line > .replies {
	flex: 0 0 100%;
	padding-left: 3.6rem;
}

#cm-widget .ihead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem .6rem;
	margin-bottom: .35rem;
	min-height: 1.5rem;
}

#cm-widget .ihead .user-name {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: #fff;
	font-weight: 600;
	overflow-wrap: anywhere;
}

#cm-widget .ihead .user-name:hover {
	color: #36cb68;
}

#cm-widget .ihead .user-name .badg-level,
#cm-widget .ihead .user-name .badg-aura {
	margin-right: 0;
}

#cm-widget .cm-staff-badge {
	padding: .1rem .4rem;
	border-radius: .3rem;
	background: rgba(228, 95, 58, .15);
	color: #e45f3a;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.3;
	text-transform: uppercase;
}

#cm-widget .cm-ban-badge {
	color: #f5b942;
	font-size: .75rem;
	font-weight: 500;
}

#cm-widget .ihead .time {
	color: rgba(255, 255, 255, .4);
	font-size: .85rem;
}

#cm-widget .cm-edited-label {
	color: rgba(255, 255, 255, .35);
	font-size: .78rem;
}

#cm-widget .ihead .eps,
#cm-widget .ihead .ipinned {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .05rem .45rem;
	border-radius: .3rem;
	font-size: .72rem;
	font-weight: 500;
	line-height: 1.5;
}

#cm-widget .ihead .eps {
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .6);
}

#cm-widget .ihead .ipinned {
	background: rgba(54, 203, 104, .13);
	color: #36cb68;
}

/* Body text (CommentService::render output). */
#cm-widget .ibody {
	position: relative;
	color: rgba(255, 255, 255, .78);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

#cm-widget .cm-body:empty {
	display: none;
}

#cm-widget .cm-body strong {
	color: #fff;
	font-weight: 700;
}

#cm-widget .cm-body s,
#cm-widget .cm-body del {
	opacity: .7;
}

#cm-widget .cm-body blockquote {
	display: block;
	margin: .45rem 0;
	padding: .55rem .8rem;
	border-left: 3px solid #e45f3a;
	border-radius: .35rem;
	background: rgba(228, 95, 58, .08);
	color: rgba(255, 255, 255, .7);
}

/* styles.css hangs FA quote glyphs off "#cm-widget .content-rendered blockquote"; the bar replaces them. */
#cm-widget .cm-body blockquote::before,
#cm-widget .cm-body blockquote::after {
	content: none;
}

/* nl2br() leaves a <br> after each quote line; the block already breaks. */
#cm-widget .cm-body blockquote + br {
	display: none;
}

#cm-widget .cm-body ul {
	margin: .3rem 0;
	padding-left: 1.2rem;
}

#cm-widget .cm-body .tag-name {
	margin-right: .25rem;
	color: #36cb68;
	font-weight: 500;
}

/* Player timestamps {{m:ss}} → .cm-ts (clickable once the player reports ready). */
#cm-widget .cm-ts {
	display: inline-flex;
	align-items: center;
	margin: 0 .1rem;
	padding: 0 .45rem;
	border: 0;
	border-radius: .3rem;
	background: rgba(54, 203, 104, .13);
	color: #36cb68;
	font-size: .85em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	cursor: default;
	vertical-align: baseline;
}

body.cm-player-ready #cm-widget .cm-ts:not(.cm-ts--bad) {
	cursor: pointer;
}

body.cm-player-ready #cm-widget .cm-ts:not(.cm-ts--bad):hover {
	background: #36cb68;
	color: #0c1116;
}

#cm-widget .cm-ts--bad {
	background: rgba(228, 95, 58, .12);
	color: #e87758;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Inline ||spoiler|| and auto-masked links (.cm-auto-spoil). */
#cm-widget .cm-auto-spoil {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	max-width: 100%;
	margin: 0 .1rem;
	padding: .05rem .4rem;
	border-radius: .35rem;
	background: rgba(255, 255, 255, .1);
	line-height: 1.35;
	vertical-align: baseline;
	white-space: normal;
}

#cm-widget .cm-auto-spoil-mask,
#cm-widget .cm-auto-spoil-label {
	color: rgba(255, 255, 255, .72);
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

#cm-widget .cm-auto-spoil--url .cm-auto-spoil-label::before {
	content: "\f0c1";
	margin-right: .25rem;
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	opacity: .7;
}

#cm-widget .cm-auto-spoil-toggle {
	padding: 0 .4rem;
	border: 0;
	border-radius: .25rem;
	background: rgba(54, 203, 104, .2);
	color: #36cb68;
	font-size: .7em;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.6;
	text-transform: uppercase;
	cursor: pointer;
}

#cm-widget .cm-auto-spoil-toggle:hover {
	background: #36cb68;
	color: #0c1116;
}

#cm-widget .cm-auto-spoil-reveal {
	color: rgba(255, 255, 255, .88);
	word-break: break-word;
}

#cm-widget .cm-auto-spoil.is-open {
	background: rgba(54, 203, 104, .13);
}

#cm-widget .cm-auto-spoil.is-open .cm-auto-spoil-mask,
#cm-widget .cm-auto-spoil.is-open .cm-auto-spoil-label {
	display: none;
}

/* Embedded GIFs (trusted hosts). */
#cm-widget .cm-gif-wrap {
	display: block;
	margin: .5rem 0 .2rem;
	max-width: 100%;
}

#cm-widget .cm-embed-gif {
	display: block;
	width: auto;
	height: auto;
	max-width: min(22rem, 100%);
	max-height: 18rem;
	border-radius: .65rem;
	background: rgba(255, 255, 255, .04);
}

/* Whole-comment spoiler curtain (.ibody.is-spoil + .show-spoil button). */
#cm-widget .ibody.is-spoil > .cm-body {
	max-height: 4.8em;
	overflow: hidden;
	filter: blur(6px);
	user-select: none;
	pointer-events: none;
}

#cm-widget .show-spoil:empty {
	display: none;
}

#cm-widget .ibody:not(.is-spoil) .show-spoil {
	display: none;
}

#cm-widget .ibody.is-spoil .show-spoil {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#cm-widget .show-spoil .btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .8rem;
	border: 0;
	border-radius: .4rem;
	background: rgba(12, 17, 22, .85);
	color: #fff;
	font-size: .85rem;
	font-weight: 500;
}

#cm-widget .show-spoil .btn:hover {
	color: #36cb68;
}

/* Notices that replace a body (banned author, hidden, locked thread). */
#cm-widget .cm-comment-notice {
	margin: 0 0 .5rem;
	padding: .5rem .75rem;
	border-left: 3px solid rgba(255, 255, 255, .25);
	border-radius: .35rem;
	background: rgba(255, 255, 255, .04);
	color: rgba(255, 255, 255, .6);
	font-size: .85rem;
	font-style: italic;
	white-space: normal;
}

#cm-widget .cm-thread-locked {
	border-left-color: #f5b942;
	background: rgba(245, 185, 66, .1);
	color: #f5d08a;
	font-style: normal;
}

#cm-widget .cw_l-line.is-thread-locked > .info > .ibottom > .ib-reply,
#cm-widget .cw_l-line.is-thread-locked > .info > .reply-block,
#cm-widget .replies-wrap.is-thread-locked .ib-reply,
#cm-widget .replies-wrap.is-thread-locked .reply-block {
	display: none !important;
}

/* Action row: like · dislike · reply · more (AnimeKAI .ctrls / .foot). */
#cm-widget .ibottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem 1.4rem;
	margin-top: .55rem;
	font-size: .9rem;
}

#cm-widget .ibottom .ib-li {
	position: relative;
}

#cm-widget .ibottom .ib-li > .btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, .45);
	font-size: .9rem;
	line-height: 1.6;
	cursor: pointer;
	transition: color .2s;
}

#cm-widget .ibottom .ib-li > .btn:hover,
#cm-widget .ibottom .ib-li > .btn[aria-expanded="true"] {
	color: #36cb68;
}

#cm-widget .ibottom .ib-like > .btn.active {
	color: #36cb68;
}

#cm-widget .ibottom .ib-dislike > .btn.active {
	color: #e45f3a;
}

#cm-widget .ibottom .value:empty {
	display: none;
}

/* "More" menu. */
#cm-widget .cm-menu {
	min-width: 10rem;
	padding: .4rem 0;
	border-radius: .6rem;
	background: #1c2228;
	box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .45);
	font-size: .88rem;
	z-index: 20;
}

#cm-widget .cm-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .45rem 1rem;
	color: rgba(255, 255, 255, .6);
	background: transparent;
}

#cm-widget .cm-menu .dropdown-item i {
	width: 1rem;
	text-align: center;
	font-size: .85rem;
}

#cm-widget .cm-menu .dropdown-item:hover,
#cm-widget .cm-menu .dropdown-item:focus {
	background: rgba(255, 255, 255, .05);
	color: #fff;
}

/* ---------------------------------------------------------------------------------
   Replies (#block-reply-{id} > .rep-more toggle + .replies-wrap#replies-{id})
   --------------------------------------------------------------------------------- */
#cm-widget .replies {
	margin-top: .6rem;
}

#cm-widget .rep-more .cm-btn-show-rep {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #36cb68;
	font-size: .88rem;
	font-weight: 500;
}

#cm-widget .rep-more .cm-btn-show-rep:hover {
	color: #5fe08a;
}

#cm-widget .rep-more .cm-btn-show-rep i {
	transition: transform .2s;
}

#cm-widget .rep-more .cm-btn-show-rep.active i {
	transform: rotate(180deg);
}

#cm-widget .rep-in .cm-btn-show-rep span::before {
	content: "View ";
}

#cm-widget .rep-in .cm-btn-show-rep.active span::before {
	content: "Hide ";
}

#cm-widget .replies-wrap {
	margin-top: .3rem;
	padding-left: .9rem;
	border-left: 1px solid rgba(255, 255, 255, .07);
}

#cm-widget .cm-anchor {
	display: block;
	height: 0;
}

#cm-widget .replies-wrap .cw_l-line {
	margin-top: .7rem;
	padding: .8rem;
	background: rgba(255, 255, 255, .025);
}

#cm-widget .replies-wrap .cw_l-line .user-avatar {
	flex-basis: 2.2rem;
	width: 2.2rem;
	height: 2.2rem;
}

/* Pager: watch page (#cm-view-more in .cm-foot) and community (.rep-more added by community.min.js). */
#cm-widget .cm-foot,
#cm-widget .list-comment > .rep-more {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

#cm-widget #cm-view-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	padding: .55rem 1rem;
	border: 0;
	border-radius: .6rem;
	background: #11161b;
	color: rgba(255, 255, 255, .7);
	font-weight: 500;
	transition: background .2s, color .2s;
}

#cm-widget #cm-view-more:hover {
	background: #1b232b;
	color: #fff;
}

#cm-widget .no-result {
	padding: 1.2rem 1rem;
	border-radius: .7rem;
	background: #181d22;
	color: rgba(255, 255, 255, .45);
	text-align: center;
}

/* ---------------------------------------------------------------------------------
   Reactions bar (#cm-reactions, rendered by comments.js above the widget)
   --------------------------------------------------------------------------------- */
#cm-reactions.cm-reactions {
	margin: 0 0 1.2rem;
}

#cm-reactions.cm-reactions:empty {
	display: none;
}

#cm-reactions .cm-reactions-inner {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

#cm-reactions .cm-rx {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .8rem .35rem .45rem;
	border: 1px solid transparent;
	border-radius: 2rem;
	background: #181d22;
	color: rgba(255, 255, 255, .75);
	font-size: .85rem;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: background .2s, border-color .2s, color .2s;
}

#cm-reactions .cm-rx:hover {
	background: #20272e;
	color: #fff;
}

#cm-reactions .cm-rx:focus-visible {
	outline: 0;
	border-color: rgba(54, 203, 104, .5);
}

#cm-reactions .cm-rx.is-active {
	border-color: rgba(54, 203, 104, .55);
	background: rgba(54, 203, 104, .12);
	color: #36cb68;
}

#cm-reactions .cm-rx.is-pending {
	opacity: .55;
	cursor: progress;
}

#cm-reactions .cm-rx-emoji {
	font-size: 1.05rem;
	line-height: 1;
}

#cm-reactions .cm-rx-gif {
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	object-fit: cover;
}

#cm-reactions .cm-rx-label {
	font-weight: 500;
}

#cm-reactions .cm-rx-count {
	color: rgba(255, 255, 255, .45);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
}

#cm-reactions .cm-rx-count:empty {
	display: none;
}

#cm-reactions .cm-rx.is-active .cm-rx-count {
	color: #36cb68;
}

#cm-reactions .cm-rx.cm-rx-pop {
	animation: cmRxPop .22s ease;
}

@keyframes cmRxPop {
	40% { transform: scale(1.12); }
}

/* ---------------------------------------------------------------------------------
   Floating pickers (appended outside the widget by comments.js)
   --------------------------------------------------------------------------------- */
emoji-picker.emoji-picker {
	position: fixed;
	z-index: 2147482000;
	display: none;
	border-radius: .7rem;
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55);
	--background: #181d22;
	--border-color: rgba(255, 255, 255, .08);
	--button-hover-background: rgba(255, 255, 255, .08);
	--button-active-background: rgba(54, 203, 104, .2);
	--indicator-color: #36cb68;
	--input-font-color: #fff;
	--input-border-color: rgba(255, 255, 255, .12);
	--input-placeholder-color: rgba(255, 255, 255, .45);
	--outline-color: #36cb68;
	--category-font-color: rgba(255, 255, 255, .6);
}

emoji-picker.emoji-picker.cm-emoji-open {
	display: block;
	width: min(92vw, 340px);
	height: min(420px, 55vh);
	min-height: 260px;
}

#cm-gif-panel.cm-gif-panel {
	position: fixed;
	z-index: 2147482001;
	display: none;
	flex-direction: column;
	width: min(92vw, 360px);
	max-height: min(70vh, 420px);
	overflow: hidden;
	border-radius: .7rem;
	background: #181d22;
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55);
}

#cm-gif-panel.cm-gif-open {
	display: flex;
}

#cm-gif-panel .cm-gif-head {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem .6rem;
	background: rgba(0, 0, 0, .2);
}

#cm-gif-panel .cm-gif-q {
	flex: 1;
	min-width: 0;
	padding: .4rem .7rem;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: .45rem;
	background: #11161b;
	color: #fff;
	font-size: .88rem;
	outline: 0;
}

#cm-gif-panel .cm-gif-q:focus {
	border-color: rgba(54, 203, 104, .5);
}

#cm-gif-panel .cm-gif-close {
	padding: .1rem .45rem;
	border: 0;
	border-radius: .35rem;
	background: transparent;
	color: rgba(255, 255, 255, .6);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

#cm-gif-panel .cm-gif-close:hover {
	color: #e45f3a;
}

#cm-gif-panel .cm-gif-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-content: start;
	gap: .4rem;
	flex: 1 1 auto;
	min-height: 0;
	max-height: min(56vh, 340px);
	padding: .5rem;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#cm-gif-panel .cm-gif-tile {
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: .45rem;
	background: #0c1116;
	outline: 2px solid transparent;
	cursor: pointer;
	transition: outline-color .15s;
}

#cm-gif-panel .cm-gif-tile:hover {
	outline-color: #36cb68;
}

#cm-gif-panel .cm-gif-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#cm-gif-panel .cm-gif-msg {
	padding: .8rem;
	color: rgba(255, 255, 255, .5);
	font-size: .82rem;
	text-align: center;
}

/* comments.js toasts (#toast-container, created on demand). */
#toast-container .alert {
	position: relative;
	min-width: 250px;
	margin: 0;
	padding: .7rem 2.2rem .7rem 1rem;
	border: 0;
	border-left: 3px solid rgba(255, 255, 255, .3);
	border-radius: .6rem;
	background: #181d22;
	color: #fff;
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55) !important;
	font-size: .88rem;
}

#toast-container .alert-success {
	border-left-color: #36cb68;
}

#toast-container .alert-danger {
	border-left-color: #e45f3a;
}

#toast-container .alert .close {
	position: absolute;
	top: .4rem;
	right: .5rem;
	padding: 0 .3rem;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, .55);
	font-size: 1.2rem;
	line-height: 1;
	opacity: 1;
	text-shadow: none;
}

#toast-container .alert .close:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------------
   Responsive (AnimeKAI: ≤1024 narrower reply indent; ≤767.98 stacked head/editor,
   avatar floats beside the name)
   --------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	#cm-widget .replies-wrap {
		padding-left: .75rem;
	}
}

@media (max-width: 767.98px) {
	#comments #cm-widget .cm-scope {
		height: auto;
		top: .1rem;
	}

	#cm-widget .cm-scope .tab {
		font-size: 1rem;
		padding: .2rem .4rem;
	}

	#cm-widget .cm-head {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
	}

	#cm-widget .comment-input {
		gap: .6rem;
	}

	#cm-widget .comment-input > .user-avatar {
		flex-basis: 2.4rem;
		width: 2.4rem;
		height: 2.4rem;
	}

	#cm-widget .editor-ctrl {
		flex-direction: column;
		align-items: stretch;
		gap: .4rem;
	}

	#cm-widget .toolbar {
		justify-content: center;
	}

	#cm-widget .toolbar .separator {
		display: none;
	}

	#cm-widget .ci-buttons {
		justify-content: flex-end;
	}

	#cm-widget .cw_l-line {
		display: block;
		padding: .85rem;
	}

	#cm-widget .cw_l-line > .user-avatar {
		float: left;
		width: 2.5rem;
		height: 2.5rem;
		margin-right: .7rem;
	}

	#cm-widget .cw_l-line > .info > .ihead {
		min-height: 2.5rem;
		align-content: center;
	}

	#cm-widget .cw_l-line > .info > .ibody {
		clear: left;
		padding-top: .35rem;
	}

	#cm-widget .cw_l-line > .replies {
		clear: left;
		padding-left: 0;
	}

	#cm-widget .ibottom {
		gap: .2rem 1.1rem;
	}

	#cm-widget .replies-wrap {
		padding-left: .6rem;
	}

	#cm-widget .replies-wrap .cw_l-line {
		padding: .7rem;
	}

	#cm-widget .replies-wrap .cw_l-line > .user-avatar {
		width: 2.1rem;
		height: 2.1rem;
	}

	#cm-widget .replies-wrap .cw_l-line > .info > .ihead {
		min-height: 2.1rem;
	}
}

/* Phones: keep the whole toolbar on one centred row like AnimeKAI's (the spoiler flag drops its
   label and keeps icon + title; its .active state stays orange). */
@media (max-width: 575.98px) {
	#cm-widget .toolbar,
	#cm-widget .cm-fmt-bar,
	#cm-widget .ci-emo {
		gap: .1rem;
	}

	#cm-widget .tb-item,
	#cm-widget .cm-fmt-btn,
	#cm-widget .ci-emo .cb-icon {
		min-width: 1.75rem;
		padding: 0 .2rem;
	}

	#cm-widget .btn-spoil span {
		display: none;
	}
}

@media (max-width: 370px) {
	#cm-widget .ibottom .ib-reply span,
	#cm-widget .ibottom .ib-more span {
		display: none;
	}
}