/* ============================================
   NTV tonal button system (YouTube Spec–inspired)
   Soft fill / solid primary / danger / icon pills
   (Navbar / server chips excluded — keep classic chrome)
   ============================================ */

.ntv-btn,
.watch-embed-toggle-btn,
.favorite-btn-large,
.back-btn-small,
.favorite-btn,
.watch-btn,
.load-more-btn,
.category-filter-btn,
.fav-clear-btn,
.ms-clear-btn,
.ms-fullscreen-btn,
.multi-stream-grid .stream-action-btn,
.chat-header-btn,
.chat-welcome-btn,
.chat-auth-tab,
.chat-submit-btn,
.chat-send-btn,
.chat-reaction-chip,
.chat-reaction-pick,
.embed-copy-btn,
.watch-clean-promo__cta,
.btn,
.btn-primary,
.btn-secondary,
.swiper-nav-btn {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.ntv-btn::after,
.watch-embed-toggle-btn::after,
.favorite-btn-large::after,
.back-btn-small::after,
.favorite-btn::after,
.watch-btn::after,
.load-more-btn::after,
.category-filter-btn::after,
.fav-clear-btn::after,
.ms-clear-btn::after,
.ms-fullscreen-btn::after,
.multi-stream-grid .stream-action-btn::after,
.chat-header-btn::after,
.chat-welcome-btn::after,
.chat-submit-btn::after,
.chat-send-btn::after,
.embed-copy-btn::after,
.watch-clean-promo__cta::after,
.btn::after,
.btn-primary::after,
.btn-secondary::after,
.swiper-nav-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 0;
}

.ntv-btn > *,
.watch-embed-toggle-btn > *,
.favorite-btn-large > *,
.back-btn-small > *,
.favorite-btn > *,
.watch-btn > *,
.load-more-btn > *,
.category-filter-btn > *,
.fav-clear-btn > *,
.ms-clear-btn > *,
.ms-fullscreen-btn > *,
.multi-stream-grid .stream-action-btn > *,
.chat-header-btn > *,
.chat-welcome-btn > *,
.chat-submit-btn > *,
.chat-send-btn > *,
.embed-copy-btn > *,
.watch-clean-promo__cta > *,
.btn > *,
.btn-primary > *,
.btn-secondary > *,
.swiper-nav-btn > * {
  position: relative;
  z-index: 1;
}

.ntv-btn:active::after,
.watch-embed-toggle-btn:active::after,
.favorite-btn-large:active::after,
.back-btn-small:active::after,
.favorite-btn:active::after,
.watch-btn:active::after,
.load-more-btn:active::after,
.category-filter-btn:active::after,
.fav-clear-btn:active::after,
.ms-clear-btn:active::after,
.ms-fullscreen-btn:active::after,
.multi-stream-grid .stream-action-btn:active::after,
.chat-header-btn:active::after,
.chat-welcome-btn:active::after,
.chat-submit-btn:active::after,
.chat-send-btn:active::after,
.embed-copy-btn:active::after,
.watch-clean-promo__cta:active::after,
.btn:active::after,
.btn-primary:active::after,
.btn-secondary:active::after,
.swiper-nav-btn:active::after {
  opacity: var(--btn-press-opacity);
}

/* ----- Variants ----- */
.ntv-btn--tonal,
.watch-embed-toggle-btn,
.favorite-btn-large,
.back-btn-small,
.favorite-btn,
.category-filter-btn,
.ms-clear-btn,
.ms-fullscreen-btn,
.multi-stream-grid .stream-action-btn,
.chat-header-btn,
.chat-welcome-btn,
.chat-auth-tab,
.chat-reaction-chip,
.chat-reaction-pick,
.btn-secondary,
.swiper-nav-btn {
  min-height: var(--btn-h);
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  background: var(--btn-tonal-bg);
  color: var(--btn-tonal-fg);
  font-size: var(--btn-fs);
}

.ntv-btn--tonal:hover,
.watch-embed-toggle-btn:hover,
.favorite-btn-large:hover,
.back-btn-small:hover,
.favorite-btn:hover,
.category-filter-btn:hover,
.ms-clear-btn:hover:not(:disabled),
.ms-fullscreen-btn:hover:not(:disabled),
.multi-stream-grid .stream-action-btn:hover,
.chat-header-btn:hover,
.chat-header-btn:focus-visible,
.chat-welcome-btn:hover,
.chat-auth-tab:hover,
.btn-secondary:hover,
.swiper-nav-btn:hover {
  background: var(--btn-tonal-bg-hover);
  color: #fff;
  border: none;
  transform: none;
  box-shadow: none;
}

.ntv-btn--primary,
.watch-btn,
.load-more-btn,
.chat-submit-btn,
.chat-send-btn,
.embed-copy-btn,
.watch-clean-promo__cta,
.btn,
.btn-primary,
.favorites-card-actions .watch-btn {
  min-height: var(--btn-h);
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font-size: var(--btn-fs);
  font-weight: 600;
}

.ntv-btn--primary:hover,
.watch-btn:hover,
.load-more-btn:hover,
.chat-submit-btn:hover,
.chat-send-btn:hover,
.embed-copy-btn:hover,
.watch-clean-promo__cta:hover,
.btn:hover,
.btn-primary:hover,
.favorites-card-actions .watch-btn:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
  transform: none;
  box-shadow: none;
}

.ntv-btn--danger,
.fav-clear-btn,
.multi-stream-grid .stream-action-btn.remove,
.chat-header-btn--logout {
  min-height: var(--btn-h);
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  background: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
  font-size: var(--btn-fs);
  border: none;
}

.ntv-btn--danger:hover,
.fav-clear-btn:hover,
.multi-stream-grid .stream-action-btn.remove:hover,
.chat-header-btn--logout:hover,
.chat-header-btn--logout:focus-visible {
  background: var(--btn-danger-bg-hover);
  color: #fca5a5;
  border: none;
  transform: none;
  box-shadow: none;
}

.ntv-btn--icon,
.favorite-btn,
.chat-send-btn,
.multi-stream-grid .stream-action-btn,
.chat-reaction-pick,
.swiper-nav-btn {
  width: var(--btn-h);
  min-width: var(--btn-h);
  padding: 0;
}

.ntv-btn.is-active,
.ntv-btn.active,
.watch-embed-toggle-btn.active,
.favorite-btn-large.active,
.favorite-btn.active,
.category-filter-btn.active,
.ms-fullscreen-btn.active,
.chat-auth-tab.active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: none;
  box-shadow: none;
  font-weight: 600;
}

.ntv-btn.is-active:hover,
.ntv-btn.active:hover,
.watch-embed-toggle-btn.active:hover,
.favorite-btn-large.active:hover,
.favorite-btn.active:hover,
.category-filter-btn.active:hover,
.ms-fullscreen-btn.active:hover,
.chat-auth-tab.active:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
}

.ntv-btn:disabled,
.watch-embed-toggle-btn:disabled,
.ms-fullscreen-btn:disabled,
.ms-clear-btn:disabled,
.load-more-btn:disabled,
.chat-send-btn:disabled,
.chat-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Compact chrome (filters / chat / swiper — not top navbar) */
.category-filter-btn,
.chat-header-btn,
.chat-auth-tab,
.chat-reaction-chip,
.swiper-nav-btn,
.multi-stream-grid .stream-action-btn {
  min-height: var(--btn-h-sm);
  height: var(--btn-h-sm);
  padding: 0 var(--btn-pad-x-sm);
  font-size: var(--btn-fs-sm);
}

.favorite-btn,
.chat-send-btn,
.chat-header-btn,
.swiper-nav-btn,
.multi-stream-grid .stream-action-btn,
.chat-reaction-pick {
  width: var(--btn-h-sm);
  min-width: var(--btn-h-sm);
  height: var(--btn-h-sm);
  min-height: var(--btn-h-sm);
  padding: 0;
}

.chat-reaction-chip {
  width: auto;
  min-width: 0;
  height: auto;
}

.chat-auth-tab {
  width: auto;
  min-width: 2.5rem;
}

.watch-embed-toggle-btn i,
.watch-embed-toggle-btn .ph,
.favorite-btn-large i,
.favorite-btn-large .ph,
.back-btn-small i,
.back-btn-small .ph {
  font-size: 1.05rem;
  line-height: 1;
}