/* cutbg-orphans.css — zone de rappel des badges et commandes isolees.
 *
 * Elle se pose juste au-dessus de la colonne de docking, sur la meme colonne
 * (mesure navigateur 1440x950). Les badges d etat et les boutons isoles y
 * vivent plutot que de flotter sur le contenu.
 */
.cutbg-tray {
  position: fixed;
  z-index: 940; /* entre la barre d'actions (950) et le dock (900) */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(18, 20, 29, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
}

.cutbg-tray > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  flex: 0 0 auto;
  max-height: 32px;
  align-self: center;
  margin: 0;
  box-shadow: none;
  font-family: var(--cutbg-font-body, 'DM Sans', sans-serif);
  font-size: 11px;
}
/* Commande vocale (auto-features-3). Le module injectait ce bouton dans le
   <header> sans aucun style : il sortait brut et se superposait a la
   navigation. Il est desormais dans le dock ; on lui donne les memes
   jetons que les autres commandes du tray. */
.cutbg-voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--cutbg-glass-border, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
  color: var(--cutbg-text, #eef1f7);
  font-family: var(--cutbg-font-body, "DM Sans", sans-serif);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cutbg-voice-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cutbg-voice-btn.is-on {
  border-color: #3579ff;
  background: rgba(53, 121, 255, 0.16);
  color: #cddcff;
}

.cutbg-voice-btn:focus-visible {
  outline: 2px solid #3579ff;
  outline-offset: 2px;
}

.cutbg-voice-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280;
  flex: 0 0 auto;
  display: inline-block;
}

/* --- 2026-10-05 : garde-fou de bandeau (mesure Playwright, studio @ 375px) ---
   Constat : .nav { display:flex; flex-wrap:nowrap } + .nav-right en flex sans
   repli -> le contenu du bandeau (739px) deborde de sa boite (335px).
   Le declencheur etait #btn-cutbg-tile-inspector monte dans <header> par
   studio.js ; il est desormais monte dans #cutbg-tray. Ces deux garde-fous
   ferment la chaine pour tout contenu tiers. */
@media (max-width:850px){
  header.nav{ flex-wrap:wrap !important; align-content:flex-start; row-gap:6px; overflow:visible; }
  header.nav .nav-right{ flex-wrap:wrap !important; row-gap:8px; min-width:0; }
}