/* Featured comments (SPEC 60): the banner over the video (live page, Go live's camera preview, a stream's replay), the
   Feature buttons and the "Auto-hide after 15 s" switch in the streamer's chat panel, and Go live's chat panel. Colours
   come from style.css's tokens, so light and dark both follow the system setting. */

/* The banner -------------------------------------------------------------- */

/* Bottom left, above the video's own controls (the same height as the Skip intro button, playertools.css), under the
   Listen panel, the Up next card and a sponsor intro (z-index 3+). Taps go through it to the video, except Unfeature. */
.feat-banner {
  position: absolute; left: 14px; bottom: 64px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(460px, calc(100% - 28px)); min-width: 0;
  padding: 9px 12px 9px 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--text);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px;
  box-shadow: var(--shadow); pointer-events: none;
}
.feat-banner[hidden] { display: none; }
.feat-banner .avatar { flex: none; }
.feat-body { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; }
.feat-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate;
  font-size: 13px; font-weight: 700; color: var(--text-2);
}
.feat-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; color: var(--text); }
.feat-unfeature {
  flex: none; align-self: center; pointer-events: auto;
  min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--text); font: 600 13px/1 var(--font); cursor: pointer;
}
.feat-unfeature:hover { background: var(--hover); }
.feat-unfeature:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.feat-banner.is-in { animation: feat-in 0.22s ease-out; }
@keyframes feat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The live page: never over "This stream has ended", nor over the player's "Connecting…", "Reconnecting…" or "Press play
   to watch." (live.js), which it would cover on a phone: it's back once the video plays */
.live-player:has(.live-ended-screen:not([hidden])) .feat-banner,
.live-player:has(> .live-overlay:not([hidden])) .feat-banner { display: none; }
/* A replay's Skip intro / Skip outro (playertools.css: bottom right, at the banner's height): the banner keeps clear */
.player:not(.is-listening):has(> .skip-btn) .feat-banner { max-width: min(460px, calc(100% - 160px)); }
/* Go live: over the camera preview, above the microphone meter */
.golive-stage .feat-banner { left: 10px; bottom: 48px; max-width: calc(100% - 20px); }

/* Feature buttons in the chat ---------------------------------------------- */

/* Next to the message's moderator menu (⋮, chat.css), always shown to the creator and the owner; 8 px apart, so a tap
   meant for ⋮ (always shown on touch screens) doesn't put the message on screen */
.chat.can-feature .chat-msg { padding-right: 80px; }
.chat-feature {
  position: absolute; top: 2px; right: 44px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--text-3); cursor: pointer;
}
.chat-msg:not(:has(.chat-msg-more)) .chat-feature { right: 6px; }
.chat-feature:hover { background: var(--hover); color: var(--text); }
.chat-feature:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; color: var(--text); }
.chat-feature[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.chat-feature[aria-disabled="true"] { cursor: progress; }
/* The message on screen: tinted, with a marked edge (the pressed button says it to screen readers) */
.chat-msg.is-featured { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); box-shadow: inset 3px 0 0 var(--accent); }

/* "Auto-hide after 15 s" (the creator's own chat panel) -------------------- */

.feat-bar { flex: none; display: flex; align-items: center; margin: 8px 10px 0; }
.feat-bar[hidden] { display: none; }
.feat-switch {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; max-width: 100%; padding: 2px 4px;
  border: 0; border-radius: 999px; background: none; color: var(--text); font: 600 13px/1.2 var(--font); text-align: left; cursor: pointer;
}
.feat-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.feat-switch[aria-busy="true"] { cursor: progress; }
.feat-switch-track {
  position: relative; display: inline-block; flex: none; width: 36px; height: 20px; border-radius: 999px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--text-3); transition: background 0.15s ease;
}
.feat-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-2); transition: transform 0.15s ease, background 0.15s ease;
}
.feat-switch[aria-checked="true"] .feat-switch-track { background: var(--accent); box-shadow: none; }
.feat-switch[aria-checked="true"] .feat-switch-knob { transform: translateX(16px); background: #fff; }

/* Go live: the streamer's chat panel, under the camera and the stream's settings */
.golive-chat { min-width: 0; }
.golive-chat[hidden] { display: none; }
.golive-chat .chat { height: clamp(380px, 62vh, 600px); }

/* Wide screens: the chat is the right-hand column while it shows, beside the camera with its LIVE timer and
   "Reconnecting…" warning, and End stream comes first under the camera, so reading the chat scrolls none of them away */
@media (min-width: 1101px) {
  .golive:has(> .golive-chat:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(300px, 34%); align-items: start; }
  .golive:has(> .golive-chat:not([hidden])) > * { grid-column: 1; }
  .golive:has(> .golive-chat:not([hidden])) > .golive-chat { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 76px; }
  .golive:has(> .golive-chat:not([hidden])) .golive-device { grid-template-columns: minmax(0, 1fr); }
  .golive:has(> .golive-chat:not([hidden])) .golive-chat .chat { height: clamp(380px, calc(100vh - 210px), 760px); }
  .golive:has(> .golive-chat:not([hidden]))[data-phase="live"] :is(.golive-end, .golive-status),
  .golive:has(> .golive-chat:not([hidden]))[data-phase="ending"] :is(.golive-end, .golive-status) { order: -1; }
}

@media (max-width: 1100px) {
  .golive-chat .chat { height: auto; }
}

@media (max-width: 720px) {
  .feat-banner { left: 10px; bottom: 54px; max-width: calc(100% - 20px); gap: 8px; padding: 7px 10px 7px 8px; }
  .feat-body { font-size: 13px; }
  .feat-name { font-size: 12px; }
  .feat-text { -webkit-line-clamp: 4; line-clamp: 4; } /* about 140 characters on a 320 px phone */
  .feat-unfeature { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
  .golive-stage .feat-banner { bottom: 46px; }
  .player:not(.is-listening):has(> .skip-btn) .feat-banner { max-width: calc(100% - 142px); }
  .chat.can-feature .chat-msg { padding-right: 76px; }
}

@media (max-width: 380px) {
  .chat.can-feature .chat-msg { padding-right: 74px; }
}

@media (max-width: 374px) {
  /* A short player: two lines while "Tap for sound" (live.js) shows at its top left, so the banner stays below it */
  .live-player:has(> .live-unmute:not([hidden])) .feat-text { -webkit-line-clamp: 2; line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .feat-banner.is-in { animation: none; }
  .feat-switch-track, .feat-switch-knob { transition: none; }
}

@media (forced-colors: active) {
  .feat-banner { border: 1px solid CanvasText; border-left-width: 4px; }
  .feat-switch-track { border: 1px solid CanvasText; }
  .feat-switch[aria-checked="true"] .feat-switch-knob { background: CanvasText; }
}