/* Comments like on YouTube (includes/comments.jspf + js/comments.js), the same under a song and on Music. */

/* on Music the box gets its own panel under the carousel (on a song page it sits in .lyric-comments) */
.ep-comments-wrap {
  max-width: 880px;
  margin: 28px auto 0;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: left;
}

.cmts { --cmt-av: 40px; text-align: left; }
.cmts-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 16px; }
.cmts-title { margin: 0; font-size: var(--fs-h3); }

/* "Sort: Top ▾" */
.cmts-sort { position: relative; font-size: var(--fs-small); }
.cmts-sort summary {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--panel-border); cursor: pointer; list-style: none; color: var(--text); user-select: none;
}
.cmts-sort summary::-webkit-details-marker { display: none; }
.cmts-sort summary:hover, .cmts-sort[open] summary { border-color: var(--accent); }
.cmts-sort-label { color: var(--text-dim); }
.cmts-sort-list, .cmt-menu-list {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 160px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border-radius: 14px; border: 1px solid var(--panel-border); background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow);
}
.cmts-sort-list button, .cmt-menu-list button,
body.light .cmts-sort-list button, body.light .cmt-menu-list button {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text); font-size: var(--fs-small); text-align: left; cursor: pointer; white-space: nowrap;
}
.cmts-sort-list button:hover, .cmt-menu-list button:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cmts-sort-list button[aria-pressed="true"] { color: var(--accent); }
.cmt-menu-list .cmt-delete:hover { color: #ff6a6a; }
.cmt-menu-list .cmt-report:hover { color: #ffb84d; }

.cmts-note {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: var(--fs-small);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text);
}
.cmts-note[hidden] { display: none; }
.cmts-empty { margin: 8px 0 0; color: var(--text-dim); text-align: center; font-family: var(--font-text); font-size: var(--fs-text); }

/* avatars */
.cmt-avatar { width: var(--cmt-av); height: var(--cmt-av); border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cmt-avatar-empty {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: 0.9em;
}
.cmt-avatar.cmt-avatar-sm, .cmt-reply .cmt-avatar { --cmt-av: 30px; }

/* the box to write in: one line until you click in it, then Cancel / Send */
.cmt-composer { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; }
.cmt-composer.is-reply { margin: 12px 0 4px; }
.cmt-composer.is-edit { margin: 4px 0 0; }
.cmt-composer-main { flex: 1; min-width: 0; position: relative; }
.cmt-composer textarea,
body.light .cmt-composer textarea {
  width: 100%; min-height: 2.2em; padding: 6px 2px; resize: none; overflow-y: hidden; scrollbar-width: thin;
  border: 0; border-bottom: 1px solid var(--panel-border); border-radius: 0; background: transparent; box-shadow: none;
  color: var(--text); font-family: var(--font-text); font-weight: 300; font-size: var(--fs-text); letter-spacing: 0.02em; line-height: 1.45;
  transition: border-color 0.2s ease;
}
.cmt-composer textarea.is-long { overflow-y: auto; }
.cmt-composer textarea::-webkit-scrollbar-button { display: none; }
.cmt-composer textarea:focus { outline: none; border-bottom: 2px solid var(--accent); }
.cmt-composer-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cmt-composer-bar[hidden] { display: none; }
.cmt-counter { margin-right: auto; font-size: var(--fs-small); color: var(--text-dim); }
.cmt-emoji-btn,
body.light .cmt-emoji-btn {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: transparent;
  color: var(--text-dim); font-size: 1.15rem; cursor: pointer;
}
.cmt-emoji-btn:hover, .cmt-emoji-btn[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cmt-cancel, .cmt-send,
body.light .cmt-cancel, body.light .cmt-send {
  padding: 8px 16px; border-radius: 999px; border: 0; font-size: var(--fs-card); cursor: pointer;
  background: transparent; color: var(--text);
}
.cmt-cancel:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.cmt-send, body.light .cmt-send { background: var(--accent); color: var(--accent-ink); }
.cmt-send:disabled, body.light .cmt-send:disabled { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text-dim); cursor: default; }
.cmt-emoji {
  position: absolute; z-index: 25; left: 0; top: calc(100% + 6px);
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; padding: 8px; width: min(340px, 100%);
  border-radius: 14px; border: 1px solid var(--panel-border); background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow);
}
.cmt-emoji[hidden] { display: none; }
.cmt-emoji button, body.light .cmt-emoji button {
  aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.cmt-emoji button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); transform: scale(1.15); }

/* one comment */
.cmt-thread + .cmt-thread { margin-top: 18px; }
.cmt { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; transition: background-color 0.6s ease; }
.cmt.is-target { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cmt-body { flex: 1; min-width: 0; }
.cmt-pinned { margin: 0 0 3px; font-size: var(--fs-small); color: var(--text-dim); }
.cmt-pinned .fa-thumbtack { color: var(--accent); margin-right: 4px; }
.cmt-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.cmt-name { color: var(--text); font-size: var(--fs-card); }
.cmt-name.is-gone { color: var(--text-dim); font-style: italic; }
/* Skeli himself: his name in a pill, like a channel owner on YouTube */
.cmt-name.is-artist { padding: 1px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.cmt-name.is-artist .fa-circle-check { font-size: 0.85em; }
.cmt-time, .cmt-edited { font-size: var(--fs-small); color: var(--text-dim); }
.cmt-text {
  margin: 4px 0 2px; color: var(--text); font-family: var(--font-text); font-weight: 300;
  font-size: var(--fs-text); line-height: 1.45; letter-spacing: 0.02em; white-space: pre-line; overflow-wrap: anywhere;
}
.cmt-text[hidden] { display: none; }

/* 👍 12  👎  ♥  Reply  ⋮ */
.cmt-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: -8px; }
.cmt-vote, .cmt-reply-btn, .cmt-heart,
body.light .cmt-vote, body.light .cmt-reply-btn, body.light .cmt-heart {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-dim); font-size: var(--fs-small); cursor: pointer;
}
.cmt-vote:hover, .cmt-reply-btn:hover, button.cmt-heart:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.cmt-vote i { font-size: 1rem; }
.cmt-vote.on { color: var(--accent); }
.cmt-vote .n:empty { display: none; }
.cmt-reply-btn { color: var(--text); }
/* the heart from Skeli: his small photo with a red heart on it */
.cmt-heart i { font-size: 0.95rem; }
.cmt-heart.on { position: relative; padding: 0 8px; }
.cmt-heart-pic { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 0.7rem; }
.cmt-heart-pic img { width: 100%; height: 100%; object-fit: cover; }
.cmt-heart.on > i { position: absolute; right: 2px; bottom: 4px; color: #ff4d6d; font-size: 0.7rem; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }
.cmt-menu { position: relative; margin-left: auto; }
.cmt-menu summary {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim); cursor: pointer; list-style: none;
}
.cmt-menu summary::-webkit-details-marker { display: none; }
.cmt-menu summary:hover, .cmt-menu[open] summary { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.cmt-menu-list { left: auto; right: 0; }

/* "▾ 3 replies", then the replies indented under the comment */
.cmt-replies-toggle,
body.light .cmt-replies-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0 calc(var(--cmt-av) + 4px); padding: 7px 14px;
  border: 0; border-radius: 999px; background: transparent; color: var(--accent); font-size: var(--fs-card); cursor: pointer;
}
.cmt-replies-toggle:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cmt-replies-toggle i { transition: transform 0.2s ease; font-size: 0.8em; }
.cmt-replies-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.cmt-replies { margin: 6px 0 0 calc(var(--cmt-av) + 12px); display: flex; flex-direction: column; gap: 14px; }
.cmt-replies[hidden] { display: none; }

@media (max-width: 600px) {
  .cmts { --cmt-av: 34px; }
  .ep-comments-wrap { padding: 14px; }
  .cmt-replies { margin-left: 18px; }
  .cmt-replies-toggle { margin-left: 30px; }
  .cmts-sort-label { display: none; }
  .cmt-emoji { grid-template-columns: repeat(6, 1fr); }
}