/* ═══════════════════════════════════════════════════════════════════════
   VideoScope — sélecteur de chaîne Web TV
   ═══════════════════════════════════════════════════════════════════════
   Habillage repris des variables de VideoScope (--color-bg-*, --font-size-*)
   et non des jetons StudioTools : cette app a sa propre échelle, très dense,
   et un bloc importé d'ailleurs jurerait dans son en-tête.
   ═══════════════════════════════════════════════════════════════════════ */

.vs-webtv__champ {
  position: relative;
  display: inline-block;
}

.vs-webtv__input {
  width: 168px;
  min-width: 120px;
}
.vs-webtv__input::-webkit-search-cancel-button {
  filter: invert(0.6);
}

/* Nom de la chaîne en cours, à côté du champ. */
.vs-webtv__actif {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-accent-blue, #00aaff);
}

/* ——— Liste de résultats ———
   En position absolue sous le champ, au-dessus des instruments : l'en-tête
   est bas et la liste doit pouvoir déborder sur les scopes. */
.vs-webtv__liste {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9999;
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--color-bg-panel, #1a1e22);
  border: 1px solid var(--color-border-accent, #000);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.vs-webtv__liste[hidden] { display: none; }

.vs-webtv__item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  color: var(--color-text-primary, #e8eaed);
  font-family: var(--font-family-instrument, Arial, sans-serif);
  font-size: var(--font-size-base, 11px);
  text-align: left;
  cursor: pointer;
}
.vs-webtv__item:last-child { border-bottom: 0; }
.vs-webtv__item:hover,
.vs-webtv__item:focus-visible {
  background: var(--color-bg-secondary, #16181a);
  outline: none;
}

/* Le logo peut manquer ou casser : la pastille porte alors les initiales,
   ce qui évite une icône brisée et garde l'alignement de la grille. */
.vs-webtv__logo {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--color-bg-instrument, #101214);
  font-size: var(--font-size-xs, 9px);
  font-weight: 700;
  color: var(--color-text-tertiary, #787f88);
  overflow: hidden;
  flex-shrink: 0;
}
.vs-webtv__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vs-webtv__nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-webtv__meta {
  font-size: var(--font-size-xs, 9px);
  color: var(--color-text-tertiary, #787f88);
  white-space: nowrap;
}

.vs-webtv__vide,
.vs-webtv__pied {
  padding: 8px;
  font-size: var(--font-size-sm, 10px);
  color: var(--color-text-tertiary, #787f88);
  text-align: center;
}
.vs-webtv__pied {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 900px) {
  .vs-webtv__input { width: 120px; }
  .vs-webtv__liste { width: 260px; }
  .vs-webtv__actif { max-width: 110px; }
}

/* ——— Écoute : coupure et volume ———
   Le libellé le dit et le graphe le garantit : ces commandes n'agissent que
   sur la branche de sortie. Les instruments mesurent la source, coupée ou
   non. */
.vs-mute {
  position: relative;
  flex-shrink: 0;
}
.vs-mute .vs-mute__on,
.vs-mute .vs-mute__off {
  width: 16px;
  height: 16px;
  display: none;
}
.vs-mute[data-muted="0"] .vs-mute__on { display: block; }
.vs-mute[data-muted="1"] .vs-mute__off { display: block; }
/* Coupé : l'état doit se voir sans lire l'icône en détail. */
.vs-mute[data-muted="1"] {
  color: var(--color-accent-blue, #00aaff);
}

.vs-volume {
  width: 86px;
  height: 18px;
  accent-color: var(--color-accent-blue, #00aaff);
  background: transparent;
  cursor: pointer;
}
.vs-volume:focus-visible {
  outline: 1px solid var(--color-accent-blue, #00aaff);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .vs-volume { width: 56px; }
}