:root {
  --bg:#0b1020; --fg:#e5e7eb; --muted:#94a3b8; --line:#273247; --chip:#121a2c; --accent:#e5e7eb; --accent-fg:#0b1020;
}

.index{
  width: 35px;
  text-align: center;
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 5px;
}

#mecheotron { font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); }

.mo-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.mo-title { margin:0; font-size: 18px; font-weight: 700; }
/*.mo-actions-right .btn { margin-left: 6px; }*/

.mo-actions-right, .mecheotron-actions {
  display: flex;
  gap: 10px;              /* petit espace entre les boutons */
}

.mo-actions-right button, .mecheotron-actions button {
  flex: 1;                /* prend toute la place dispo */
  text-align: center;     /* centre le texte/icône */
}

.mecheotron-canvas {
  position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 8px auto 14px;
  border-radius: 12px; overflow: hidden;
}
.mecheotron-canvas .layer { position:absolute; inset:0; width:100%; height:100%; image-rendering:auto; opacity:0; transition:opacity .15s ease; }
.mecheotron-canvas .layer[src] { opacity:1; }

.mecheotron-controls { display:grid; grid-template-columns: 1fr; gap: 14px; }
.ctrl { border-bottom:1px dashed; padding: 10px;}
.row-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.label { font-weight: 700; }
.right-head { display:flex; align-items:center; gap:6px; }
.badge.hidden-badge { padding:2px 8px; color:var(--muted); font-size:12px; font-style: italic; }
.mini { background:transparent; padding:4px 8px; cursor:pointer; }
.mini.lock[data-locked="true"] { outline:2px solid var(--warn); }

.thumbs { display:flex; gap:8px; overflow:auto; padding:2px; }
.thumb { width:64px; height:64px; border-radius:10px; position:relative; flex:0 0 auto; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.thumb img { width:100%; height:100%; object-fit:contain; }
.thumb.active { outline: 3px solid var(--accent); }
/*.thumb.locked::after { position:absolute; right:6px; top:4px; font-size:14px; }*/
/* On remet le conteneur comme avant (pas de scroll parasite) */
.ctrl .thumbs { overflow: hidden; position: relative; }

.ctrl .thumb img {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ctrl .thumb:hover img {
  transform: scale(1.5);
  z-index: 2;
}

.ctrl .thumb.active img {
  transform: scale(2.5);
  z-index: 2;
}

/* État verrouillé visuel */
.thumb.locked { position: relative; cursor: not-allowed; opacity:0.3; }
.thumb.locked img { filter: grayscale(100%); opacity: .55; pointer-events: none; }

/* Tooltip globale (portée body) */
.mo-tooltip {
  position: fixed;
  z-index: 9999;
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-6px);
}
.mo-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0,0,0,.85);
}

.mecheotron-actions { display:flex; gap:8px; justify-content:center; margin-top: 10px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background: var(--accent); color: var(--accent-fg); padding: 8px 14px; border-radius:4px; cursor:pointer; }
.btn .i { width:18px; height:18px; fill: currentColor; }

.mo-random.spin .i { animation: spin .5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toasts { position: fixed; left:50%; transform:translateX(-50%); bottom: 20px; display:flex; flex-direction:column; gap:8px; z-index:9999; }
.toast { padding:10px 14px; border-radius:12px; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--err); }
.toast.info { background: #161616; }

.mecheotron-locked { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--chip); color: var(--muted); }

/* --- Grille 2 colonnes --- */
.mo-grid {
  display: grid;
  grid-template-columns: 520px minmax(0,1fr); /* 500px canvas + marges */
  gap: 16px;
  align-items: start;
}

/* Colonne gauche sticky (avatar toujours visible) */
.mo-left {
  position: sticky;
  top: 116px;              /* marge avec le haut de la fenêtre */
  align-self: start;
}

/* La colonne droite peut scroller indépendamment si tu veux: */
.mo-right {
  max-height: none;
  padding-right: 4px;              /* un peu d’air pour la scrollbar */
}

/* Ajuste un peu la carte avatar + actions */
.mecheotron-canvas { margin: 8px 0 12px; }
.mecheotron-actions { justify-content: flex-start; }
.mecheotron-actions a{width: 100%}

/* Responsive : en-dessous de 980px, on repasse en 1 colonne */
@media (max-width: 980px) {
  .mo-grid { grid-template-columns: 1fr; }
  .mo-left { position: static; }
  .mo-right { max-height: none; overflow: visible; }
  .mecheotron-actions { justify-content: center; }
}
/* --- Panneaux d'options scrollables avec en-tête sticky --- */
.mo-right { 
/*  max-height: calc(100vh - 120px); */
  overflow: auto; 
  padding-right: 6px; 
  padding-bottom: 16px; /* évite que le dernier panneau soit coupé */
}

/* Chaque ctrl devient un petit "card" scrollable */
.ctrl {
  max-height: 320px;         /* ajuste à ton goût: 280–380px */
  overflow: auto;
  position: relative;
  scroll-padding-top: 44px;  /* confort de scroll sous l'en-tête sticky */
}

/* En-tête (label + flèches + lock) toujours visible pendant le scroll */
.ctrl .row-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 8px;
  margin: 0;                 /* annule la marge basse précédente */
}

/* La zone vignettes peut être longue: elle scrolle dans .ctrl */
.thumbs { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px; 
  padding: 10px 6px 10px; 
}

/* Vignettes adaptatives à la grille */
.thumb { 
  width: 100%; 
  height: 64px; 
}

/* Petit fondu en bas du panneau pour signaler qu'il y a encore du contenu */
.ctrl::after {
  content: "";
  position: sticky;          /* reste en bas du panneau visible */
  display: block;
  bottom: 0;
  height: 22px;
  margin-top: -22px;         /* chevauche la fin de la liste */
  pointer-events: none;
}

/* Sur écrans plus grands, on peut autoriser un peu plus de hauteur */
@media (min-height: 900px) {
  .ctrl { max-height: 380px; }
}

/* Responsive: une colonne -> pas de panneaux étriqués */
@media (max-width: 980px) {
  .mo-right { max-height: none; overflow: visible; padding-right: 0; }
  .ctrl { max-height: none; }
  .ctrl .row-head { position: static; border-bottom: none; }
}