/* cutbg-actionbar.css — barre d'actions unifiee en bas a droite.
 *
 * PIEGE MESURE (02/10/2026, navigateur 1440x950) : avec bottom:20px, la barre
 * se retrouvait a y=1519, soit 640 px SOUS le viewport. Cause : un ancetre
 * porte backdrop-filter, ce qui cree un bloc de confinement ; le bottom:20px
 * de la barre est alors calcule par rapport a cet ancetre, pas au viewport.
 * Meme piege que pour la colonne de docking. Solution : la barre est fixee
 * par le script avec des coordonnees viewport explicites, et ce fichier ne
 * pose QUE l aspect visuel. */
.cutbg-actionbar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 950; /* entre le dock (900) et les panneaux (1000) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: min(620px, calc(100vw - 360px));
  padding: 8px;
  border-radius: var(--cutbg-radius-md, 8px);
  background: var(--cutbg-glass-bg, rgba(18, 20, 29, 0.94));
  border: 1px solid var(--cutbg-glass-border, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

/* Chaque controle adopte la meme surface : avant, chacun avait sa propre
   ombre portee, ce qui lisait comme un empilement accidentel. */
.cutbg-actionbar > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  box-shadow: none;
  margin: 0;
  font-family: var(--cutbg-font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  line-height: 1.2;
  border-radius: 6px;
}

.cutbg-actionbar button {
  cursor: pointer;
  border: 1px solid var(--cutbg-glass-border, rgba(255, 255, 255, 0.08));
}

/* Sur petits ecrans, la barre passe sous le contenu au lieu de le recouvrir. */
@media (max-width: 900px) {
  .cutbg-actionbar {
    right: 12px;
    left: 12px;
    max-width: none;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------
   Bouton « … Plus » : ce qui deborde la barre de 300 px part derriere ce
   bouton. Mesure 03/10/2026 : 9 actions pour 875 px de contenu, donc
   6 d entre elles etaient hors ecran sans aucun moyen de les atteindre.
   --------------------------------------------------------------- */
.cutbg-actionbar-more {
  flex: 0 0 auto;
  min-width: 28px;
  max-width: 34px !important;
  height: 30px;
  padding: 0 6px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  color: var(--cutbg-text-primary, #e5e7eb);
  background: var(--cutbg-glass-bg, rgba(18, 20, 29, 0.94));
  border: 1px solid var(--cutbg-glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
}
.cutbg-actionbar-more:hover,
.cutbg-actionbar-more:focus-visible {
  border-color: var(--cutbg-accent, #3579ff);
}

/* Bouton de rejeu de recette. MESURE 03/10/2026 : il remplace la zone de
   depot 200x200 en position fixed, qui recourait le contenu principal
   (y=94..1629 sur une page de 2 068 px). La fonction reste, la surface
   disparait : l action vit dans la barre, conteneur unique. */
.cutbg-recipe-run-btn {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  height: auto;
  max-height: 34px !important;
  max-width: none !important;
  margin: 0;
  padding: 6px 10px;
  font-family: var(--cutbg-font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--cutbg-text-primary, #e5e7eb);
  background: var(--cutbg-glass-bg, rgba(18, 20, 29, 0.94));
  border: 1px solid var(--cutbg-glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  cursor: pointer;
  box-shadow: none;
}
.cutbg-recipe-run-btn:hover,
.cutbg-recipe-run-btn:focus-visible {
  border-color: var(--cutbg-accent, #3579ff);
}

/* Le menu s ouvre vers le haut : la barre est ancree en bas d ecran. */
.cutbg-actionbar-more-panel {
  /* !important obligatoire : `.cutbg-dock > *` pose
     `position: relative !important` sur tout enfant du dock, et le
     menu peut s y retrouver. Sans ce !important, le menu perd le
     conflit de cascade et s affiche a y=2285 au lieu d au-dessus
     de la barre (mesure 04/10/2026). */
  position: fixed !important;
  z-index: 960;
  display: none;
  flex-direction: column;
  gap: 6px;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 8px;
  border-radius: var(--cutbg-radius-md, 8px);
  background: var(--cutbg-glass-bg, rgba(18, 20, 29, 0.94));
  border: 1px solid var(--cutbg-glass-border, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.cutbg-actionbar-more-panel.open {
  display: flex;
}

/* Dans le menu, un bouton retrouve sa largeur naturelle : le menu est en
   colonne, il n a plus de contrainte de 300 px. */
.cutbg-actionbar-more-panel > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  max-width: 300px !important;
  max-height: 36px !important;
  height: auto;
  margin: 0;
  font-family: var(--cutbg-font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none;
  border-radius: 6px;
}