/* public/css/preview.css — Vue Rendu (aperçu live du front local), chargée en dernier (tranche contiguë de l'ancien style.css ; ordre de chargement dans index.html, cf. CLAUDE.md) */
/* ── Vue Rendu (aperçu live du front local) ──
   Même DOM dans tous les modes : on ne fait que poser des classes sur .layout
   (preview-open | view-dashboard | view-render | is-resizing), lues par la media query
   1440px. L'iframe n'est jamais déplacée → pas de rechargement au franchissement du seuil.
   INTERDIT sur .workspace / .main / .preview-pane : transform, filter, contain,
   will-change:transform — ils créeraient un bloc conteneur et casseraient les modales
   position:fixed. Défilement par colonne dans tous les modes (cf. decisions.json). */
.layout {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

.workspace {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* .main défile lui-même et occupe toute la largeur de sa colonne : plus de recentrage à 1100px
   (il créait deux grandes marges vides et comprimait cartes/prompt en colonne étroite).
   La grille auto-fill des cartes projet s'adapte à la largeur disponible. */
.workspace > .main {
  max-width: none;
  margin: 0;
  min-width: 0;
  overflow-y: auto;
  padding-left: 28px;
  padding-right: 28px;
}

.preview-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
}

.preview-splitter {
  flex: 0 0 6px;
  cursor: col-resize;
  background: var(--border);
  touch-action: none;
  transition: background 0.15s;
}
.preview-splitter:hover,
.layout.is-resizing .preview-splitter { background: var(--accent); }
.layout.is-resizing { user-select: none; cursor: col-resize; }

/* Header : bouton (écran large) / bascule (écran étroit) */
.btn-preview-toggle {
  background: none;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.btn-preview-toggle:hover { border-color: var(--accent); color: var(--accent); }
.btn-preview-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.view-switch {
  display: flex;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-switch button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.view-switch button + button { border-left: 1px solid var(--border-light); }
.view-switch button[aria-selected="true"] { background: var(--accent-dim); color: var(--accent); }

/* Pastilles : jaune clignotante = intention en cours (même style que .chat-pending-indicator),
   grise = front local arrêté. [hidden] explicite (même piège de spécificité que .chat-pending-indicator). */
.preview-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.preview-dot.running { background: var(--yellow); animation: blink 1s ease-in-out infinite; }
.preview-dot.stopped { background: var(--text-muted); }
.preview-dot[hidden] { display: none; }

/* Barre d'outils */
.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  min-width: 0;
}
.preview-toolbar .preview-project {
  flex: 0 1 220px;
  min-width: 0;
  max-width: 220px;
  width: auto;
  text-overflow: ellipsis;
}
.preview-target,
.preview-device {
  display: flex;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.preview-target button,
.preview-device button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  padding: 5px 9px;
  cursor: pointer;
}
.preview-target button + button,
.preview-device button + button { border-left: 1px solid var(--border-light); }
.preview-target button.active,
.preview-device button.active { background: var(--accent-dim); color: var(--accent); }
.preview-target button:disabled { opacity: 0.4; cursor: not-allowed; }
.preview-device { margin-left: auto; display: none; }

.preview-tool-btn {
  background: none;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  width: 30px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.preview-tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.preview-tool-btn[hidden] { display: none; }

.preview-hint {
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.preview-hint[hidden] { display: none; }
.preview-hint code { font-size: 11px; }

/* Stage + iframe + formats d'appareil */
.preview-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  background: var(--bg);
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.preview-stage.is-running { animation: preview-running-outline 1.4s ease-in-out infinite; }
@keyframes preview-running-outline {
  0%, 100% { outline-color: var(--yellow); }
  50%      { outline-color: transparent; }
}
.preview-stage iframe {
  width: 100%;
  max-width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.preview-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 14px;
  z-index: 1;
}
.preview-state[hidden] { display: none; }
.preview-state-title { color: var(--text); font-weight: 600; font-size: 15px; }
.preview-state-sub { font-size: 12px; }
.preview-state-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.preview-state-btn:disabled { opacity: 0.5; cursor: wait; }

.preview-drag-shield {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 2;
  cursor: col-resize;
}
.layout.is-resizing .preview-drag-shield { display: block; }

/* Bouton 👁 des cartes projet (entre .card-info et .card-header-right : visible replié ou non) */
.btn-card-preview {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
}
.btn-card-preview:hover { border-color: var(--accent); color: var(--accent); }
.project-card.collapsed .btn-card-preview { align-self: center; }

/* < 1440px : une seule vue à la fois (défaut) */
.preview-splitter { display: none; }
.layout.view-dashboard .preview-pane { display: none; }
.layout.view-render .workspace > .main { display: none; }

/* ≥ 1440px : écran partagé — les classes view-* sont ignorées */
@media (min-width: 1440px) {
  .view-switch { display: none; }
  .btn-preview-toggle { display: inline-flex; }
  .preview-device { display: flex; }

  /* .view-render répété pour égaler la spécificité de la règle étroite qui masque .main */
  .layout .workspace > .main,
  .layout.view-render .workspace > .main { display: flex; flex: 0 0 var(--dashboard-width, 33.333%); }
  /* idem : .view-dashboard répété pour battre la règle étroite qui masque .preview-pane */
  .layout .preview-pane,
  .layout.view-dashboard .preview-pane { display: flex; }
  .layout .preview-splitter { display: block; }

  .layout:not(.preview-open) .preview-pane,
  .layout:not(.preview-open) .preview-splitter { display: none; }
  .layout:not(.preview-open) .workspace > .main { flex: 1; }

  .preview-stage[data-device="mobile"] iframe { width: 390px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
  .preview-stage[data-device="tablet"] iframe { width: 820px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}

/* Téléphone : header compact pour que la bascule tienne sans retour à la ligne */
@media (max-width: 540px) {
  .workspace > .main { padding: 14px; }
  .subtitle { display: none; }
  .header-right { gap: 6px; }
  .clock { display: none; }
  .preview-toolbar { padding: 6px 8px; gap: 6px; }
  .preview-toolbar .preview-project { flex: 1 1 auto; max-width: none; width: auto; }
}