/* Mise en page de MediaEnhancer.
 *
 * Les primitives sont dans ds/components.css. Ce fichier ne fait que la
 * disposition, reprise de l'artboard `EnhancerWindow` : rail de 246px a gauche,
 * puits d'apercu et file a droite, barre d'etat en pied.
 *
 * L'artboard est une fenetre de 1180x760 posee sur le bureau turquoise. Dans un
 * navigateur, la fenetre occupe tout le viewport moins une marge : c'est la
 * lecture « full-bleed window » du premier tour du canevas, celle qui tient a
 * n'importe quelle taille.
 */

html, body { height: 100% }

body {
  /* Le bureau turquoise plat, seul fond de l'OS. */
  background: var(--surface-desktop);
  overflow: hidden;
}

.shell {
  /* 100dvh et non 100vh ni un pourcentage : sur mobile, la barre d'adresse
     retranche de la hauteur reellement visible, et l'unite dynamique est la
     seule a en tenir compte. Un `position: fixed` ferait pire, puisqu'il se
     cale sur le viewport de mise en page, celui qui passe SOUS la barre. */
  height: 100dvh;
  padding: 6px;
  display: flex;
}

.app-window {
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
}

/* Corps de la fenetre : le padding asymetrique de l'artboard (8px en haut,
   3px sur les cotes, 4px en bas). */
.body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 8px;
  padding: 8px 3px 4px;
  align-items: stretch;
}

/* ------------------------------------------------------------------ */
/* Rail de reglages                                                    */
/* ------------------------------------------------------------------ */

.rail {
  width: 246px;
  flex: 0 0 246px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
}

.rail-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ------------------------------------------------------------------ */
/* Colonne de droite                                                   */
/* ------------------------------------------------------------------ */

.pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-block {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.preview {
  flex: 1;
  min-height: 150px;
  position: relative;
  overflow: hidden;
}

.preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.preview-actions { display: flex; gap: 6px }

/* -- Etat vide : la regle de depot enoncee franchement, comme dans l'artboard. */
.preview-empty {
  position: absolute;
  inset: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 12px;
}

/* -- Puits de comparaison : source a gauche, resultat a droite, diviseur
      deplacable. Reserve aux photos : aucun apercu video n'est produit. */
.cmp { position: absolute; inset: 2px; overflow: hidden; background: var(--surface-field) }

.cmp img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Les resultats sont des agrandissements : on veut voir les pixels, pas le
     lissage du navigateur. */
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
}

/* Le resultat est masque a droite du diviseur ; --split est pose par app.js. */
.cmp-after { clip-path: inset(0 0 0 var(--split, 52%)) }

.cmp-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 52%);
  width: 6px;
  margin-left: -3px;
  background: var(--surface);
  box-shadow: var(--bevel-out);
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.cmp-divider span { width: 1px; height: 26px; box-shadow: var(--bevel-thin-in) }

/* Etiquettes flottantes : fond gris bevele, comme dans l'artboard. */
.cmp-tag {
  position: absolute;
  background: var(--surface);
  box-shadow: var(--bevel-thin-out);
  padding: 2px 5px;
  font: var(--text-11)/1 var(--font-ui);
  color: var(--text-body);
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmp-tag--tl { top: 8px; left: 10px }
.cmp-tag--tr { top: 8px; right: 10px; font-weight: var(--weight-bold) }
.cmp-tag--bl { bottom: 8px; left: 10px; color: var(--gray-shadow) }
.cmp-tag--br { bottom: 8px; right: 10px }

/* ------------------------------------------------------------------ */
/* File                                                                */
/* ------------------------------------------------------------------ */

.queue {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.queue .w98-lv-body { height: 158px }

.foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.foot-note {
  flex: 1;
  min-width: 0;
  font: var(--text-11)/1 var(--font-ui);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Un job en echec porte son diagnostic sous sa ligne, en monospace : c'est une
   sortie de programme, pas de la prose. */
.job-error {
  grid-column: 1 / -1;
  margin: 0 4px 4px;
  padding: 4px 6px;
  background: var(--surface-field);
  box-shadow: var(--bevel-field);
  font: var(--text-11)/1.35 var(--font-mono);
  color: var(--red-alert);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 76px;
  overflow-y: auto;
}

.w98-lv-row.has-error { height: auto; display: block; padding: 0 2px }
.w98-lv-row.has-error > .cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 52px 118px 96px 84px;
  align-items: center;
  height: 24px;
}
.w98-lv-row.has-error > .cells > * {
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Voile de depot                                                      */
/* ------------------------------------------------------------------ */

.drop-veil {
  position: absolute;
  inset: 0;
  background: var(--blue-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.drop-veil-rule { position: absolute; inset: 6px; outline: 1px dotted var(--white) }

.drop-veil-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
}

.drop-veil-tiles { display: flex; gap: 6px }

.drop-veil-title {
  font: var(--weight-bold) var(--text-16)/1.2 var(--font-ui);
  color: var(--white);
}

.drop-veil-card {
  background: var(--surface);
  box-shadow: var(--bevel-thin-out);
  padding: 5px 9px;
  font: var(--text-11)/1.4 var(--font-ui);
  color: var(--text-body);
}

/* ------------------------------------------------------------------ */
/* Mire et boite de message                                            */
/* ------------------------------------------------------------------ */

.gate, .modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 60;
  padding: 16px;
}

.modal { background: transparent }

.gate-dialog, .modal-dialog { width: min(360px, 100%) }

.gate-body, .modal-body {
  display: flex;
  gap: var(--space-11);
  padding: var(--space-11);
  align-items: flex-start;
}

.gate-glyph, .modal-glyph {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  flex: 0 0 var(--size-icon-lg);
  border-radius: 50%;
  background: var(--blue-navy);
  color: var(--white);
  font: 700 22px/1 var(--font-ui);
}

.modal-glyph[data-level="error"] { background: var(--red-alert) }
.modal-glyph[data-level="warning"] { background: var(--yellow-highlight); color: var(--black) }

.gate-msg, .modal-msg {
  margin: 0 0 6px;
  font: var(--text-12)/1.35 var(--font-ui);
  color: var(--text-body);
}

.modal-msg { margin: 0; overflow-wrap: anywhere }

.gate-foot, .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-control);
  padding: 0 var(--space-11) var(--space-11);
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

/* Regles de l'artboard `EnhancerMobile` : la fenetre seule, sans bureau autour ;
   apercu epingle en haut, file ensuite, reglages en dessous dans une seule
   colonne qui defile ; la barre d'outils perd ses separateurs ; boutons et
   lignes passent a 44px pour le tactile. */
@media (max-width: 760px) {
  .shell { padding: 0 }

  .body {
    flex-direction: column;
    overflow-y: auto;
    padding: 6px 3px 4px;
  }

  /* L'ordre visuel change, pas l'ordre du DOM. `display: contents` dissout le
     rail pour que ses trois enfants deviennent des elements flex du corps de
     fenetre : sans cela, `order` ne pourrait pas les separer, puisqu'il ne
     joue qu'entre freres d'un meme conteneur flex.

     Ce qui permet de remonter le seul selecteur de mode en tete tout en
     laissant les groupes de reglages sous la file — la regle de l'artboard,
     et la correction du defaut : le selecteur se trouvait a 802px dans un
     viewport de 813, donc jamais vu, donc jamais change. */
  .rail { display: contents }
  .rail > [data-mode-row] { order: 0; flex: 0 0 auto }
  .pane { order: 1; flex: 0 0 auto }
  .rail > .rail-options { order: 2 }
  .rail > .w98-hint { order: 3 }

  /* Le selecteur de mode gagne le fond gris et un peu d'air : detache du rail,
     il flotterait sinon sans rattachement visuel. */
  .rail > [data-mode-row] {
    background: var(--surface);
    padding: 2px 0 6px;
  }

  .preview { min-height: 190px; max-height: 44vh }
  .queue .w98-lv-body { height: auto; max-height: 46vh }

  .w98-tbsep { display: none }

  /* Cibles tactiles. Les hauteurs fixes de l'OS ne sont pas negociables sur
     desktop, mais un doigt n'a pas 19px de precision. */
  .w98-tbtn { height: 44px; min-width: 44px }
  .w98-btn { height: 44px }
  .w98-btn--sm { height: 32px }
  .w98-select, .w98-input { height: 32px }
  .w98-check input { width: 18px; height: 18px; flex: 0 0 18px; font-size: 13px }
  .w98-lv-row { height: 44px }
  .w98-lv-row.has-error > .cells { height: 44px }
  .w98-menu-item { height: 32px }

  /* Les colonnes Taille et Type sortent : la largeur ne les porte pas. */
  .w98-lv-head, .w98-lv-row, .w98-lv-row.has-error > .cells {
    grid-template-columns: minmax(0, 1fr) 96px 84px;
  }
  .w98-lv-head > div:nth-child(2),
  .w98-lv-head > div:nth-child(3),
  .w98-lv-head > div:nth-child(5),
  .w98-lv-row .col-size,
  .w98-lv-row .col-type,
  .w98-lv-row .col-eta { display: none }

  /* « Tout telecharger » est arrime au bas de la fenetre. */
  .foot {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding: 4px 0 0;
    flex-wrap: wrap;
  }
  .foot-note { flex: 1 1 100%; white-space: normal }

  .w98-status > [data-pane-disk] { display: none }
}