/*
 * nineanime-watch.css — owned by the watch area.
 * Scope: the watch page and the anime page (both drawn by
 * partials/watch/page as 9anime's /watch page) — player, controls, servers,
 * episode grid, detail block, rating, report dialog — and the comment thread
 * (partials/comments/*), which also renders on community posts.
 *
 * styles.css is 9animetv.to's own stylesheet (never edit it); the markup
 * carries 9anime's classes, so most of the look comes free. What is here:
 *   - the CMS engine's hooks needing a different DOM than 9anime's (episode
 *     links in ul > li, .active on the server <li>, #player inside the player
 *     area, .expand on the engine root, the five-span rating),
 *   - CMS features 9anime never drew, in its palette (#5a2e98 purple,
 *     #9b61ec light purple, panels #1c1c1c / #2b2b2b / #343434, text #aaa /
 *     #666 / #525252): Auto Skip, Download, Report, Watch2gether, the
 *     next-episode line, the episode tools, the anime page's "Watch now" slot,
 *     and the whole comment thread (9anime used Disqus).
 * Watch-only rules are scoped to .layout-page-watchtv; anime-page-only rules
 * to .na-detail.
 */

/* ------------------------------------------------------------------ root */

/* #watch-main is the engine root between .container and the two columns; it
   must stay layout-neutral (no position: #watch-block.active is placed
   against .container, as on 9anime). */
#watch-main { display: block; }

/* Expand (≥1280, where styles.css shows the button): main.js ExpandControl
   toggles .expand on #watch-main; these are 9anime's own
   .player-extend-display.active / #watch-block.active values. */
@media screen and (min-width: 1280px) {
    .layout-page-watchtv.expand .player-extend-display { display: block; }
    .layout-page-watchtv.expand #watch-block { position: absolute; top: 0; left: 15px; right: 15px; width: calc(100% - 30px); }
}

/* ---------------------------------------------------------------- player */

/* main.js empties #player and puts the server's iframe in it (the iframe
   rule is styles.css's `#watch-block .wb_-playerarea iframe`). */
#watch-block #player { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
/* 9anime had no play button (it auto-played the first server); this one is
   the play circle of 9anime's card hover, over the blurred cover. main.js
   hides it at bind and fades it in once the episode list has loaded. */
#watch-block #player .play,
.na-detail .na-watch-now .na-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 65px; height: 65px; padding: 0; border: 5px solid #fff; border-radius: 50%;
    background: transparent; color: #fff; font-size: 24px; line-height: 55px; text-align: center; cursor: pointer;
    transition: background .2s ease;
}
#watch-block #player .play i,
.na-detail .na-watch-now .na-play i { margin-left: 4px; }
#watch-block #player .play:hover,
.na-detail .na-watch-now:hover .na-play { background: rgba(0, 0, 0, .6); }
/* main.js's loading state: an empty <div class="loading"> (app.js draws
   9anime's three dots in it) — 9anime's #embed-loading box behind it. */
#watch-block #player > .loading { z-index: 2; }
#watch-block #player:has(> .loading) { background: rgba(255, 255, 255, .05); }
/* main.js's error text ("Unable to load the server…"). */
#watch-block #player > .message {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 420px; color: #aaa; font-size: 13px; text-align: center;
}
#watch-block #player > .message:empty::before { content: "This server could not be loaded. Please try another server."; }

/* Light off: main.js LightControl appends an inline-styled scrim to <body>
   (#000 at .95) and lifts #player-wrapper (= .wb_-playerarea) above it —
   9anime's #mask-overlay was rgba(11,11,11,.98). */
body > div[style*="43046721"] { background: #0b0b0b !important; opacity: .98 !important; }

/* ------------------------------------------------------------- controls */

/* CMS items 9anime's row never had follow its rules: Auto Skip hides with
   the other toggles on tablets. */
@media screen and (max-width: 768px) {
    .player-controls .pc-autoskip { display: none; }
}
/* Phones: 9anime's Prev / Next go icon-only (styles.css ≤479); the CMS
   items do the same so the row keeps one line. */
@media screen and (max-width: 479px) {
    .player-controls .pc-report .btn,
    .player-controls .pc-w2g .btn,
    .player-controls .pc-dl .btn,
    .player-controls .pc-trailer .btn { font-size: 0; }
    .player-controls .pc-report .btn i,
    .player-controls .pc-w2g .btn i,
    .player-controls .pc-dl .btn i,
    .player-controls .pc-trailer .btn i { font-size: 12px; line-height: 38px; }
}
/* 9anime shows Prev / Next only past one episode; main.js always .show()s
   them (inline display), so only an !important class rule holds. */
.na-single-ep .ctrl.forward { display: none !important; }

/* Add to list / Download menus open from main.js's dropdown plugin (.show on
   the .pc-item); styles.css pins .pc-fav's menu (top 26px, right 0), the
   Download menu takes the same place. The folder menu's look is the
   bridge's .dropdown-menu.folders. */
.player-controls .pc-item .dropdown-menu { z-index: 104; }
.pc-dl .dropdown-menu-model.dropdown-menu-normal { transform: none !important; top: 26px !important; left: 0 !important; right: auto !important; }
.pc-dl .dropdown-menu { background: #212121; border: none; box-shadow: 0 2px 10px #171717; padding: 5px 0; min-width: 180px; }
.pc-dl .dropdown-menu .dropdown-item { color: #aaa; padding: 5px 15px; font-size: 13px; }
.pc-dl .dropdown-menu .dropdown-item:hover { color: #fff; background: #2e2e2e; }
.dl-menu .dropdown-header { padding: 8px 15px 4px; font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; }
.dl-menu .dropdown-item-text { display: block; padding: 8px 15px; font-size: 12px; color: #666; }
.dl-menu .loading-relative { min-height: 40px; }

/* ------------------------------------------------------------- servers */

/* 9anime's list is div.item; main.js binds `.type li`. */
.ps__-list { margin: 0; padding: 0; list-style: none; }
.ps__-list .item { display: block; }
/* main.js marks the playing server with .active on the <li>; 9anime put it
   on the .btn. */
.ps__-list .item.active .btn { background: #5a2e98; color: #fff; }
.player-servers .na-no-servers { padding-left: 15px; }
.player-servers .na-no-servers .small { padding: 20px 0; margin: 0; color: #aaa; }
/* While main.js fetches another episode's servers the stale list is hidden
   under 9anime's loader (nineanime-watch.js). */
#servers-content.na-servers-loading > #w-servers { visibility: hidden; }
#servers-content .na-servers-loader { position: absolute; top: 0; left: 280px; right: 0; bottom: 0; }
@media screen and (max-width: 768px) {
    #servers-content .na-servers-loader { left: 0; }
}

/* The next-episode line (CMS): a thin row under the servers, 9anime's
   server-row divider over it. */
.na-next-ep {
    margin: -30px 0 30px; padding: 10px 15px; border-top: 1px dashed #424242;
    background: #2b2b2b; color: #aaa; font-size: 13px;
}
.na-next-ep i, .na-next-ep strong { color: #9b61ec; }
.na-next-ep strong { font-weight: 600; }
.na-next-ep .na-next-count { color: #666; }
.na-next-ep.na-next-ep-detail { margin-top: 0; border-top: 0; }
@media screen and (max-width: 480px) {
    .na-next-ep { margin: -20px -15px 20px; }
    .na-next-ep.na-next-ep-detail { margin-top: 0; }
}

/* ------------------------------------------------------------ episodes */

/* ul.ep-range > li > a is the engine's shape (main.js, comments.js,
   watch-mana.min.js); 9anime's links are direct children of the page div.
   display:contents lets the links float exactly as 9anime's. */
.episodes-ul.ep-range { padding: 0; list-style: none; }
.episodes-ul.ep-range > li { display: contents; }
.episodes-ul.ep-range::after { content: ""; display: block; clear: both; }
/* main.js's sub / dub filter hides links with an inline display. */
.episodes-ul .item[style*="display: none"] { display: none !important; }
/* The range strip: 9anime's <li>s are main.js's .filter.range
   .dropdown-item — take Bootstrap's dropdown-item box off them. */
.ranges li.dropdown-item { display: list-item; width: auto; clear: none; white-space: normal; font-weight: 400; background: none !important; border: 0; }
.ranges li.dropdown-item:focus { outline: none; }
.block_area-episodes .na-eps-empty { padding: 5px 0 10px; color: #666; font-size: 13px; }
/* Number search hit (main.js adds .highlight) and filler episodes (CMS flag). */
.episodes-ul .item.highlight { box-shadow: inset 0 0 0 2px #9b61ec; }
.episodes-ul .item.na-filler { box-shadow: inset 0 -2px 0 #525252; }
.episodes-ul .item.na-filler.highlight { box-shadow: inset 0 0 0 2px #9b61ec; }

/* Episode List Tools (Admin › Appearance, off by default): the sub / dub
   filter (main.js .filter.type), the number search (.filter.name) and the
   card view, at the right of the header in 9anime's .bah-tabs vocabulary. */
.na-eps .na-ep-tools { margin-left: 12px; }
.na-eps .na-ep-lang .dropdown-item { display: inline-block; width: auto; clear: none; background: none !important; }
.na-eps .na-ep-tools .list-sw { height: 32px; padding: 0 6px; background: none; color: #525252; font-size: 15px; line-height: 32px; }
.na-eps .na-ep-tools .list-sw:hover { color: #787878; }
.na-eps .na-ep-tools .list-sw.active { color: #fff; }
.na-eps .list-sw .na-ic-grid,
.na-eps .list-sw.active .na-ic-cards { display: none; }
.na-eps .list-sw.active .na-ic-grid { display: inline; }
.na-eps .filter.name .form-control { width: 120px; height: 32px; padding: 0 12px; }
@media screen and (max-width: 768px) {
    .na-eps .filter.name .form-control { width: 90px; }
}
/* The card view (.na-cards on .na-eps, nineanime-watch.js): one row per
   episode with the TMDB still, number, title, languages and air date. */
.na-ep-card { display: none; }
.na-cards .episodes-ul .item { float: none; width: auto; margin: 0 5px 8px; padding: 6px; line-height: 1.4; text-align: left; }
.na-cards .episodes-ul .item > .order { display: none; }
.na-cards .episodes-ul .item > .na-ep-card { display: flex; align-items: center; }
.na-cards .episodes { max-height: 520px; overflow-y: auto; }
.na-ep-card .hec-thumb { flex-shrink: 0; width: 110px; height: 62px; margin-right: 12px; border-radius: 3px; overflow: hidden; background: #1c1c1c; }
.na-ep-card .hec-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.na-ep-card .hec-info { min-width: 0; flex: 1; }
.na-ep-card .hec-num { font-size: 12px; font-weight: 500; color: inherit; }
.na-ep-card .hec-filler { margin-left: 6px; padding: 0 4px; border-radius: 2px; background: #343434; font-size: 10px; }
.na-ep-card .hec-name { margin: 2px 0; font-size: 13px; color: #ccc; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.na-cards .episodes-ul .item.active .hec-name { color: #fff; }
.na-ep-card .hec-meta { font-size: 11px; color: #666; }
.na-cards .episodes-ul .item.active .hec-meta { color: #ddd; }
.na-ep-card .hec-lang { margin-right: 6px; font-weight: 500; }
@media screen and (max-width: 480px) {
    .na-ep-card .hec-thumb { width: 90px; height: 51px; }
}

/* ------------------------------------------------------- detail block */

/* The rating box: main.js Rating on div#w-rating — one row of five spans in
   krajee's place (9anime's .empty-stars / .filled-stars pair is ten); main.js
   overwrites each span's class with full / half / "". */
#w-rating .stars > span { display: inline-block; margin: 0 3px; color: #343434; }
#w-rating .stars > span.full { color: #bf9900; }
#w-rating .stars > span.half i {
    background: linear-gradient(90deg, #bf9900 50%, #343434 50%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------------------------------------------------------- share */

#watch-main .show-share .na-share-links { justify-content: center; }
.na-share-telegram { background: #08c; }
.na-share-copy { background: #343434; }
.na-share-copy.copied { background: #5a2e98; }

/* ------------------------------------------------------------- report */

/* 9anime's .premodal.premodal-report (styles.css: .name, labels, 13px). */
.premodal-report .description { margin-bottom: 15px; }
.premodal-report .na-report-ep { font-size: 13px; color: #666; }
.premodal-report .custom-control { display: inline-block; width: calc(50% - 5px); margin: 0 0 6px; font-size: 13px; }
.premodal-report .custom-control-label { line-height: 1.5rem; }
.premodal-report .alert { position: relative; margin-bottom: 15px; padding-right: 2.5rem; }
/* AjaxForm's alert carries its own .close, which styles.css would turn into
   the modal's corner button. */
.premodal-report .modal-content .alert .close {
    top: 50%; right: 10px; transform: translateY(-50%); width: auto; height: auto;
    line-height: 1; color: inherit; font-size: 20px;
}
@media screen and (max-width: 479px) {
    .premodal-report .custom-control { width: 100%; }
}

/* ------------------------------------------------------ comment block */

/* The header tabs are comments.js .cm-by triggers; the current one is
   .na-active (never .active — comments.js reads .cm-by.active as the scope). */
.block_area .block_area-header .bah-tabs .btn.na-active { color: #fff !important; }
.block_area-comment .btn-load-comment { font-size: 13px; }

/* The anime reaction bar above the thread (CMS): 9anime's chip look. */
#cm-reactions { margin-bottom: 15px; }
#cm-reactions:empty { display: none; }
#cm-reactions .cm-reactions-inner { display: flex; flex-wrap: wrap; gap: 6px; }
#cm-reactions .cm-rx {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 5px;
    border: 0; border-radius: 4px; background: #343434; color: #ccc;
    font-size: 12px; font-weight: 500; line-height: 28px; cursor: pointer; transition: background .2s ease;
}
#cm-reactions .cm-rx:hover { background: #3d3d3d; color: #fff; }
#cm-reactions .cm-rx:focus { outline: none; }
#cm-reactions .cm-rx.is-active { background: #5a2e98; color: #fff; }
#cm-reactions .cm-rx.is-pending { opacity: .6; }
#cm-reactions .cm-rx-gif { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
#cm-reactions .cm-rx-emoji { width: 20px; text-align: center; font-size: 15px; line-height: 1; }
#cm-reactions .cm-rx-count { color: #888; }
#cm-reactions .cm-rx.is-active .cm-rx-count { color: #ddd; }
#cm-reactions .cm-rx-count:empty { display: none; }
#cm-reactions .cm-rx-pop { animation: na-rx-pop .35s ease; }
@keyframes na-rx-pop { 50% { transform: scale(1.12); } }
@media screen and (max-width: 575px) {
    #cm-reactions .cm-reactions-inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    #cm-reactions .cm-reactions-inner::-webkit-scrollbar { display: none; }
    #cm-reactions .cm-rx { flex-shrink: 0; }
}

/* ------------------------------------------------ the comment thread */
/* partials/comments/* (ajax into #content-comments; community posts into
   #content-comments-community). Disqus left nothing to measure: these are
   9anime's own values elsewhere — .form-dark fields, .bah-tabs links,
   .btn-showmore, the server-row dashed divider, #5a2e98 / #9b61ec. */

.cm-widget { font-size: 13px; color: #aaa; }
.cm-widget .btn:focus, .cm-widget .btn.focus { box-shadow: none !important; }

/* Count + sort row. */
.cm-widget .sc-header { display: flex; align-items: center; margin-bottom: 15px; line-height: 32px; }
.cm-widget .sc-header .sc-h-title { color: #666; }
.cm-widget .sc-header .sc-h-title .cm-count { color: #fff; font-weight: 500; }
.cm-widget .sc-header .sc-h-title i { color: #525252; }
.cm-widget .sc-header .sc-h-sort { position: relative; margin-left: auto; }
.cm-widget .sc-header .btn { padding: 0 6px; background: none; color: #525252; font-size: 13px; font-weight: 500; line-height: 32px; }
.cm-widget .sc-header .btn:hover,
.cm-widget .sc-header .show > .btn { color: #787878; }

/* Dark menus (sort, a comment's More), as the bridge's folder menu. */
.cm-widget .dropdown-menu { z-index: 60; min-width: 140px; padding: 5px 0; border: none; background: #212121; box-shadow: 0 2px 10px #171717; font-size: 13px; }
.cm-widget .dropdown-menu .dropdown-item { padding: 5px 15px; color: #aaa; }
.cm-widget .dropdown-menu .dropdown-item:hover { background: #2e2e2e; color: #fff; }
.cm-widget .dropdown-menu .dropdown-item.active { background: #5a2e98; color: #fff; }
.cm-widget .dropdown-menu .dropdown-item .ic-active { display: none; }
.cm-widget .sc-h-sort .dropdown-menu { right: 0; left: auto; }

.cm-widget .cm-rules-note { margin: 0 0 15px; padding: 8px 12px; border-radius: 3px; background: rgba(255, 255, 255, .05); color: #888; font-size: 12px; line-height: 1.5; }
.cm-widget .cm-rules-note a { color: #9b61ec; }

/* Avatars: 40px circles; the initial behind the image shows when it 404s
   (the img hides itself). */
.cm-widget .user-avatar {
    position: absolute; top: 0; left: 0; display: block; width: 40px; height: 40px;
    border-radius: 50%; overflow: hidden; background: #343434;
}
.cm-widget .user-avatar::before {
    content: attr(data-initial); position: absolute; top: 0; left: 0; right: 0;
    color: #aaa; font-size: 14px; font-weight: 500; line-height: 40px; text-align: center;
}
.cm-widget .user-avatar .user-avatar-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }

/* The composer: 9anime's .form-dark field. */
.cm-widget .comment-input { position: relative; min-height: 40px; margin-bottom: 25px; padding-left: 50px; }
.cm-widget .comment-input .user-name { margin-bottom: 6px; color: #666; font-size: 13px; line-height: 20px; }
.cm-widget .comment-input .user-name .link-highlight { color: #fff; font-weight: 500; }
.cm-widget .comment-form { position: relative; margin: 0; }
.cm-widget .comment-form .na-ci-field,
.cm-widget .comment-form .cm-composer-grow { position: relative; }
.cm-widget .comment-form textarea.form-control,
.cm-widget .cm-edit-composer-wrap textarea.form-control {
    display: block; width: 100%; min-height: 70px; padding: 10px 80px 10px 15px; overflow: hidden; resize: none;
    border: none; border-radius: 0; background: rgba(255, 255, 255, .05); box-shadow: none;
    color: #aaa; font-size: 13px; line-height: 1.5em;
}
.cm-widget .comment-form textarea.form-control:focus,
.cm-widget .cm-edit-composer-wrap textarea.form-control:focus { box-shadow: 0 0 0 2px #5a2e98; color: #ccc; }
.cm-widget .comment-form textarea.form-control::placeholder { color: #525252; }
.cm-widget .comment-input.is-reply textarea.form-control { min-height: 50px; }
.cm-widget .comment-input .ci-emo { position: absolute; top: 0; right: 0; display: flex; }
.cm-widget .comment-input .ci-emo .cb-icon { width: 36px; height: 40px; color: #525252; line-height: 40px; text-align: center; cursor: pointer; }
.cm-widget .comment-input .ci-emo .cb-icon:hover { color: #fff; }
.cm-widget .comment-input .ci-emo .cb-icon:focus { outline: none; }
.cm-widget .ci-emo .na-gif-label { display: inline-block; padding: 0 3px; border: 1.5px solid currentColor; border-radius: 3px; font-size: 9px; font-weight: 700; line-height: 13px; vertical-align: middle; }
.cm-widget .comment-input .ci-buttons { display: flex; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.cm-widget .comment-input .ci-buttons .cm-error { flex: 0 0 100%; margin-bottom: 8px; padding: 6px 10px; border-radius: 0; font-size: 12px; }
.cm-widget .comment-input .ci-b-left { display: flex; align-items: center; }
.cm-widget .comment-input .ci-b-right { display: flex; align-items: center; margin-left: auto; }
.cm-widget .comment-input .ci-buttons .btn { padding: 0 10px; font-size: 12px; line-height: 28px; }
.cm-widget .comment-input .ci-buttons .btn-spoil { padding-left: 0; background: none; color: #525252; cursor: pointer; }
.cm-widget .comment-input .ci-buttons .btn-spoil:hover { color: #787878; }
.cm-widget .comment-input .ci-buttons .btn-spoil i { opacity: .4; }
.cm-widget .comment-input .ci-buttons .btn-spoil.active { color: #fff; }
.cm-widget .comment-input .ci-buttons .btn-spoil.active i { opacity: 1; color: #9b61ec; }
.cm-widget .cm-fmt-bar { display: flex; margin-left: 8px; }
.cm-widget .cm-fmt-bar .btn,
.cm-widget .cm-fmt-btn { padding: 0 6px; border: 0; background: none; color: #525252; font-size: 12px; line-height: 28px; cursor: pointer; }
.cm-widget .cm-fmt-bar .btn:hover,
.cm-widget .cm-fmt-btn:hover { color: #fff; }
.cm-widget .comment-input .ci-buttons .btn-secondary { margin-left: 6px; }
.cm-widget .comment-input .ci-buttons .btn-primary { margin-left: 6px; padding: 0 15px; }
@media screen and (max-width: 479px) {
    .cm-widget .cm-fmt-bar { margin-left: 2px; }
    .cm-widget .cm-fmt-bar .btn { padding: 0 4px; }
}
/* The veil comments.js shows while posting. */
.cm-widget .comment-form .loading-absolute { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background: rgba(28, 28, 28, .7); }
/* Community posts fold the top-level composer until the post's Reply opens it. */
.cm-widget .comment-input.is-collapsed { display: none; }
/* Guests: any touch of the composer opens the sign-in modal (comments-guest.js). */
.cm-widget .guest-comment-form textarea { cursor: pointer; }

/* The emoji picker and the GIF panel comments.js positions (fixed) by the icon. */
emoji-picker { display: none; }
emoji-picker.cm-emoji-open { display: block; position: fixed; z-index: 10050; --background: #212121; --border-color: #2e2e2e; --input-border-color: #343434; --input-font-color: #fff; --button-hover-background: rgba(255, 255, 255, .1); --indicator-color: #5a2e98; --category-font-color: #aaa; }
#cm-gif-panel {
    display: none; position: fixed; z-index: 10050; width: 300px; max-height: 340px; overflow: hidden;
    padding: 10px; border-radius: 6px; background: #212121; box-shadow: 0 2px 10px #171717;
}
#cm-gif-panel.cm-gif-open { display: block; }
#cm-gif-panel .cm-gif-head { display: flex; gap: 8px; }
#cm-gif-panel .cm-gif-q { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; border: 0; background: rgba(255, 255, 255, .05); color: #aaa; font-size: 12px; }
#cm-gif-panel .cm-gif-q:focus { outline: none; box-shadow: 0 0 0 2px #5a2e98; }
#cm-gif-panel .cm-gif-close { border: 0; background: transparent; color: #666; font-size: 20px; line-height: 1; cursor: pointer; }
#cm-gif-panel .cm-gif-close:hover { color: #fff; }
#cm-gif-panel .cm-gif-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 260px; overflow-y: auto; margin-top: 8px; }
#cm-gif-panel .cm-gif-tile { width: 100%; padding: 0; border: 0; border-radius: 3px; overflow: hidden; background: #343434; cursor: pointer; }
#cm-gif-panel .cm-gif-tile img { display: block; width: 100%; }
#cm-gif-panel .cm-gif-msg { padding-top: 8px; color: #666; font-size: 12px; }

/* One comment: avatar 40px, name 14px white, time 12px #666, body 13px/1.5
   #aaa, actions 12px #525252 → #fff; 20px between rows, no cards. */
.cm-widget .cw_l-line { position: relative; min-height: 40px; margin-bottom: 20px; padding-left: 50px; }
.cm-widget .cw_l-line .ipinned { margin-bottom: 2px; color: #9b61ec; font-size: 11px; font-weight: 500; }
.cm-widget .cw_l-line .ihead { display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 4px; line-height: 20px; }
.cm-widget .cw_l-line .ihead .user-name { display: inline-flex; align-items: center; color: #fff; font-size: 14px; font-weight: 500; }
.cm-widget .cw_l-line .ihead .user-name:hover { color: #fff; opacity: .85; }
.cm-widget .cw_l-line .ihead .user-name .badg-level { width: 16px; height: 16px; margin-right: 5px; }
.cm-widget .cw_l-line .ihead .user-name .badg-aura { margin-right: 5px; }
.cm-widget .cw_l-line .ihead .user-name .badg-aura .badg-level { width: 20px; height: 20px; margin-right: 0; }
.cm-widget .cw_l-line .ihead .time,
.cm-widget .cw_l-line .ihead .eps { margin-left: 10px; color: #666; font-size: 12px; white-space: nowrap; }
.cm-widget .cw_l-line .ihead .eps { color: #9b61ec; }
.cm-widget .cw_l-line .ihead .cm-edited-label { font-style: italic; }
.cm-widget .user-name .cm-staff-badge,
.cm-widget .user-name .cm-ban-badge {
    margin-left: 5px; padding: 0 4px; border-radius: 2px; background: #5a2e98; color: #fff;
    font-size: 9px; font-weight: 500; line-height: 15px; text-transform: uppercase;
}
.cm-widget .user-name .cm-ban-badge { background: #921925; }
.cm-widget .cw_l-line .ibottom { display: flex; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.cm-widget .cw_l-line .ibottom .ib-li { position: relative; margin-right: 15px; }
.cm-widget .cw_l-line .ibottom .ib-li .btn { padding: 0; background: none; color: #525252; font-size: 12px; line-height: 20px; }
.cm-widget .cw_l-line .ibottom .ib-li .btn:hover,
.cm-widget .cw_l-line .ibottom .ib-li .btn.active { color: #fff; }
.cm-widget .cw_l-line .ibottom .ib-li.ib-like .btn.active { color: #9b61ec; }
.cm-widget .cw_l-line .ibottom .ib-li .btn.active .far::before { font-weight: 900; }
.cm-widget .cw_l-line .ibottom .ib-li .btn .value:empty { display: none; }
.cm-widget .cw_l-line .ibottom .ib-more .dropdown-menu { top: 100%; left: 0; margin-top: 4px; }
.cm-widget .cw_l-line .ibottom .clearfix { display: none; }
.cm-widget .cw_l-line.is-pinned { padding-bottom: 20px; border-bottom: 1px dashed #424242; }
.cm-widget .cw_l-line.comment-focus > .info > .ibody { margin: -4px -8px; padding: 4px 8px; background: rgba(90, 46, 152, .2); }
.cm-widget .cw_l-line.is-comment-hidden > .info > .ibody { opacity: .7; }
.cm-widget .no-result { padding: 10px 0 20px; color: #666; font-size: 13px; text-align: center; }
.cm-widget .comment-input.reply-block { margin: 12px 0 5px; }

/* The rendered body (CommentService::render). */
.cm-widget .cm-body { color: #aaa; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
.cm-widget .cm-body p { margin-bottom: .4rem; }
.cm-widget .cm-body p:last-child { margin-bottom: 0; }
.cm-widget .cm-body a { color: #9b61ec; }
.cm-widget .cm-body a:hover { color: #fff; }
.cm-widget .cm-body blockquote { margin: .4rem 0; padding: 0 0 0 10px; border-left: 2px solid #5a2e98; color: #777; }
.cm-widget .cm-body code { padding: 1px 4px; background: rgba(255, 255, 255, .06); font-size: .9em; color: #ccc; }
.cm-widget .cm-body img { max-width: 100%; max-height: 200px; margin: .4rem 0; border-radius: 3px; }
.cm-widget .tag-name { margin-right: 4px; color: #9b61ec; font-weight: 500; }
.cm-widget .cm-body .cm-ts {
    display: inline-block; margin: 0 2px; padding: 0 6px; border: 0; border-radius: 3px;
    background: #343434; color: #9b61ec; font-size: 12px; font-weight: 500; line-height: 1.6; cursor: default;
}
body.cm-player-ready .cm-widget .cm-body .cm-ts:not(.cm-ts--bad) { cursor: pointer; }
.cm-widget .cm-body .cm-ts--bad { color: #666; text-decoration: line-through; cursor: not-allowed; }
.cm-widget .cm-embed-gif { display: block; max-width: min(100%, 320px); max-height: 240px; margin: .4rem 0; border-radius: 3px; }
.cm-widget .cm-auto-spoil { position: relative; display: inline; }
.cm-widget .cm-auto-spoil-mask { padding: 0 3px; border-radius: 2px; background: #343434; color: transparent; cursor: pointer; user-select: none; }
.cm-widget .cm-auto-spoil-toggle { margin-left: 4px; padding: 0 6px; border: 0; border-radius: 2px; background: #343434; color: #aaa; font-size: 11px; cursor: pointer; }
.cm-widget .cm-auto-spoil.is-open .cm-auto-spoil-reveal { color: #ccc; }
.cm-widget .cm-comment-notice { color: #666; font-style: italic; }
.cm-widget .cm-thread-locked { font-size: 12px; }

/* The spoiler curtain: comments.js drops .is-spoil from #ibody-{id} on "Show spoil". */
.cm-widget .cw_l-line .ibody.is-spoil .cm-body { max-height: 3em; overflow: hidden; filter: blur(4px); user-select: none; pointer-events: none; }
.cm-widget .cw_l-line .ibody .show-spoil { display: none; }
.cm-widget .cw_l-line .ibody.is-spoil .show-spoil { display: block; margin-top: 6px; }
.cm-widget .show-spoil .btn { padding: 0 8px; border: 0; background: #343434; color: #fff; font-size: 12px; line-height: 24px; }

/* Replies: indented under the parent's text, 9anime's dashed divider at the left. */
.cm-widget .replies { margin-top: 10px; }
.cm-widget .replies-wrap { margin-top: 12px; padding-left: 15px; border-left: 1px dashed #424242; }
.cm-widget .replies-wrap .replies-wrap { padding-left: 0; border-left: 0; }
.cm-widget .replies-wrap .cw_l-line:last-child { margin-bottom: 5px; }
.cm-widget .cm-anchor { display: block; height: 0; }
.cm-widget .rep-more .btn { padding: 0; background: none; color: #9b61ec; font-size: 12px; font-weight: 500; line-height: 20px; }
.cm-widget .rep-more .btn:hover { color: #fff; }
.cm-widget .rep-more.rep-in .btn span::before { content: "View "; }
.cm-widget .rep-more.rep-in .btn.active span::before { content: "Hide "; }
.cm-widget .rep-more.rep-in .btn i { transition: transform .2s ease; }
.cm-widget .rep-more.rep-in .btn.active i { transform: rotate(180deg); }
/* "View more comments": 9anime's .btn-showmore pill. */
.cm-widget .cm-foot .btn { display: block; width: 100%; padding: 8px 12px; background: #343434; color: #fff; font-size: 12px; }
.cm-widget .cm-foot .btn:hover { background: #3d3d3d; }

/* The inline edit composer comments.js builds. */
.cm-widget .cm-edit-composer-wrap { margin: 6px 0 10px; padding-left: 0; }
.cm-widget .cm-edit-composer-wrap .comment-container { position: relative; }
.cm-widget .cm-edit-composer-wrap .cm-fmt-bar { margin: 0 0 4px; }

/* comments.js's own toast when no page toast exists. */
#toast-container { z-index: 10060; }