/* Dashboard "outil interne" — thème sombre, aplats, bordures fines, pas de dégradés */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0b;
  --panel: #121214;
  --border: #26262a;
  --text: #e8e8ea;
  --muted: #8b8b92;
  --accent: #ffffff; /* blanc pur : réservé au texte/logo, jamais en grand aplat */
  /* Blanc adouci pour les GRANDES surfaces pleines (boutons primaires, sélections) :
     le blanc pur en aplat large est éblouissant sur fond quasi-noir. On garde
     un fort contraste (texte sombre lisible) sans l'agression pour les yeux. */
  --accent-surface: #c9c9cf;
  --accent-surface-hover: #dcdce1;
  --on-accent: #0a0a0b; /* texte sombre posé sur les surfaces claires */
  --ok: #3ddc84;
  --warn: #f5c542;
  --err: #ff5c5c;
  --run: #5cb3ff;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Barre terminal --- */
/* ⚠️ Comme pour .view plus bas : une règle d'ID avec `display` l'emporte sur
   l'attribut `hidden` (spécificité UA très basse) — il faut l'override explicitement. */
#topbar[hidden], #layout[hidden] { display: none; }
#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: #0d0d0f;
  font-family: var(--mono);
  font-size: 12px;
}
.brand { font-weight: 700; letter-spacing: 2px; color: var(--accent); }
/* Console défilante : plusieurs lignes visibles, la plus récente en bas */
#terminal-log {
  flex: 1;
  height: 46px;
  overflow-y: auto;
  color: var(--muted);
  line-height: 1.35;
  scrollbar-width: none;
}
#terminal-log::-webkit-scrollbar { display: none; }
.log-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-line:last-child { color: var(--text); }
.log-t { color: #4a4a52; margin-right: 8px; }
.badge {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 2px 8px;
}
.profile-badge {
  background: transparent;
  cursor: pointer;
  text-transform: none;
}
.profile-badge:hover { color: var(--text); border-color: #4a4a52; }

/* --- Layout 3 colonnes --- */
#layout {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1px;
  background: var(--border);
  overflow: hidden;
}
#col-left, #col-center {
  background: var(--bg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  /* ⚠️ Indispensable : un élément de grille a `min-width: auto` par défaut et
     refuse donc de descendre sous la largeur intrinsèque de son contenu. Un
     seul élément trop large (un <select> aux options longues, par exemple)
     élargit alors toute la grille et décale horizontalement la page entière,
     fond des panneaux compris. */
  min-width: 0;
}

/* Panneau étroit : on empile plutôt que d'écraser la colonne centrale.
   En mode empilé, c'est la page qui défile (plus le défilement par colonne,
   sinon le contenu du bas — la file de jobs — est coupé). */
@media (max-width: 1100px) {
  #layout {
    grid-template-columns: 220px 1fr;
    grid-auto-rows: auto;
    overflow-y: auto;
  }
  #col-left, #col-center { overflow: visible; }
  .panel.grow { flex: none; }
}
@media (max-width: 700px) {
  #layout { grid-template-columns: 1fr; }
  #col-left, #col-center { grid-column: 1; }
}

/* --- Panneaux --- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.panel.grow { flex: 1; min-height: 0; }
.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.panel-head h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  flex: 1;
}
.chev { color: var(--muted); font-size: 11px; }
.collapsed { display: none !important; }

/* --- Cartes --- */
.cards { list-style: none; overflow-y: auto; }
.cards li {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}
.card-row { display: flex; align-items: center; gap: 10px; }
.card-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.card-sub { color: var(--muted); font-size: 11px; font-family: var(--mono); margin-top: 3px; }
.tag-default {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.gray { background: var(--muted); }
.dot.blue { background: var(--run); }
.dot.green { background: var(--ok); }
.dot.yellow { background: var(--warn); }
.dot.red { background: var(--err); }

.avatar {
  width: 28px; height: 28px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* Ligne dédiée sous le nom du persona : dans .card-row (flex), ce select
   écrasait .card-title et débordait du panneau latéral. */
.voice-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 5px;
}

.tag-lipsync {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--border);
  padding: 1px 6px;
  z-index: 1;
}

/* Détail dépliable d'un job */
.job-detail {
  margin-top: 8px;
  padding: 8px;
  background: #0d0d0f;
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.job-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* --- Navigation entre les outils ---
   Chaque onglet reprend l'apparence d'un en-tête de panneau (chevron + titre
   en majuscules) et garde le même espacement que les autres blocs. */
.nav-item {
  display: flex;
  /* `.panel` impose flex-direction: column — on repasse en ligne pour aligner
     le chevron et le titre côte à côte, comme dans les en-têtes de panneau */
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
}
.nav-item h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.nav-item:hover { color: var(--text); border-color: #4a4a52; }
.nav-item.active { color: var(--text); border-color: #4a4a52; }
.nav-item.active h2 { color: var(--accent); }

/* Choix du format de sortie (image2image) */
.aspects { display: flex; gap: 6px; }
.aspect {
  flex: 1;
  padding: 8px;
  background: #0d0d0f;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}
.aspect:hover { border-color: #4a4a52; color: var(--text); }
.aspect.active { background: var(--accent-surface); color: var(--on-accent); border-color: var(--accent-surface); font-weight: 700; }

/* Réglages compacts : chips « label + menu déroulant » alignées sur une ligne,
   à leur taille naturelle (pas de barres pleine largeur). */
.settings-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.setting {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #0d0d0f;
  border: 1px solid var(--border);
  padding: 5px 10px;
  cursor: pointer;
}
.setting:hover { border-color: #4a4a52; }
.setting-label {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Le <select> interne se fond dans la chip (le style global des select ne
   s'applique donc pas ici : ni bordure, ni fond, ni gros padding). */
.setting select {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  outline: none;
}

/* Une seule vue visible à la fois.
   ⚠️ Le :not([hidden]) est indispensable : un sélecteur d'ID l'emporte sur
   `.view[hidden]`, donc sans lui la vue ne pourrait jamais se masquer. */
.view[hidden] { display: none; }
#view-accueil:not([hidden]),
#view-reels:not([hidden]),
#view-i2i:not([hidden]),
#view-i2p:not([hidden]),
#view-gallery:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* --- Accueil : cartes de fonctionnalités --- */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 12px;
  overflow-y: auto;
}
.home-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: #0d0d0f;
  border: 1px solid var(--border);
  padding: 14px;
  color: var(--text);
  cursor: pointer;
}
.home-card:hover { border-color: #4a4a52; }
.home-card h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.home-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* --- Galerie : catégories et textes --- */
.cats {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.cat {
  flex: 1;
  padding: 10px 6px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
}
.cat:last-child { border-right: none; }
.cat:hover { color: var(--text); background: #17171a; }
.cat.active {
  color: var(--text);
  background: #1c1c20;
  box-shadow: inset 0 -2px 0 var(--accent);
}
#gallery, #i2p-list { overflow-y: auto; }
/* Le prompt en cours d'analyse affiche un petit indicateur à gauche */
.texte .spinner { width: 16px; height: 16px; border-width: 2px; flex-shrink: 0; margin-top: 2px; }

.texte {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  background: #0d0d0f;
  margin-top: 8px;
}
.texte pre {
  flex: 1;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.texte .btn { flex-shrink: 0; }

/* --- Lots (batches) --- */
#batches { overflow-y: auto; }
.batch { border-bottom: 1px solid var(--border); padding: 12px; }
.batch-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.batch-title { flex: 1; font-size: 13px; font-weight: 600; }

/* Vignettes au format vertical du reel */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.tile-wrap { position: relative; }
.tile {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
  background: #17171a;
}
video.tile { cursor: pointer; }
video.tile:hover { border-color: #4a4a52; }

/* Rectangle gris pendant tout le traitement */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #202024;
}
.placeholder.err,
.placeholder.warn {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  padding: 10px;
  overflow: hidden;
}
.placeholder.err { color: var(--err); }
/* Doute signalé par l'agent : terminal, mais rien n'est cassé — d'où le jaune
   plutôt que le rouge de l'échec. */
.placeholder.warn { color: var(--warn); }

.spinner {
  width: 26px;
  height: 26px;
  border: 2px solid #3a3a42;
  border-top-color: var(--run);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Bouton de téléchargement, en bas à droite de la vidéo */
.dl {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.tile-wrap:hover .dl { opacity: 1; }
.dl:hover { background: #000; }

/* Surcouche plein écran (repli si le navigateur refuse le fullscreen natif) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
/* Aperçu agrandi mais PAS plein écran : taille modérée + marge visible autour,
   pour qu'on comprenne que c'est une surcouche à refermer. */
.lightbox video,
.lightbox img {
  max-width: 70vw;
  max-height: 72vh;
  cursor: default;
  border: 1px solid var(--border);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

/* Progression par étape du pipeline */
.progress { margin-top: 8px; }
.progress-track {
  height: 3px;
  background: #232327;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--ok);
  transition: width 0.4s ease;
}
.progress-fill.live { background: var(--run); }
.progress-meta {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}

/* Preview visuelle des étapes */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.media { display: flex; flex-direction: column; gap: 4px; }
.media figcaption {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.media img, .media video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
  border: 1px solid var(--border);
}

/* --- Formulaires / boutons --- */
form { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
input[type="text"], textarea, select {
  background: #0d0d0f;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
}
input[type="text"]:focus, textarea:focus, select:focus { border-color: #4a4a52; }
textarea { resize: vertical; font-family: var(--mono); font-size: 12px; }

.filebtn {
  border: 1px dashed var(--border);
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.filebtn input { display: none; }

.btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
.btn:hover { border-color: #4a4a52; }
.btn.primary {
  background: var(--accent-surface);
  color: var(--on-accent);
  border-color: var(--accent-surface);
}
.btn.primary:hover {
  background: var(--accent-surface-hover);
  border-color: var(--accent-surface-hover);
}
.btn.small { padding: 4px 8px; font-size: 10px; }
.btn.danger { color: var(--err); border-color: var(--err); }

.empty { color: var(--muted); font-size: 12px; padding: 12px; font-family: var(--mono); }
.hint { color: var(--muted); font-size: 11px; font-family: var(--mono); text-align: center; }
.hint.left { text-align: left; line-height: 1.5; }
a { color: var(--run); }

/* --- Connexion / inscription / portail d'accès --- */
/* ⚠️ Le [hidden] est indispensable : un sélecteur d'ID avec `display: flex`
   l'emporte sur la règle par défaut du navigateur, donc sans ça la vue ne
   pourrait jamais se masquer (piège déjà rencontré trois fois sur ce projet). */
#view-auth[hidden], #view-access[hidden] { display: none; }
#view-auth, #view-access {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* Grille de points très discrète, cohérente avec le fond quasi-noir : donne
     un peu de texture sans jamais concurrencer le panneau de connexion. */
  background-image: radial-gradient(circle, #1a1a1d 1px, transparent 1px);
  background-size: 24px 24px;
}
.auth-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-logo { color: var(--accent); flex-shrink: 0; }
.auth-wordmark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 3px;
  color: var(--accent);
}
.auth-dot { color: var(--run); }
.auth-tagline {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-bottom: 22px;
}
.auth-panel { width: 320px; }
.auth-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 2px 6px;
  cursor: pointer;
}
.auth-remember input { margin: 0; cursor: pointer; }
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.auth-error {
  color: var(--err);
  font-size: 12px;
  font-family: var(--mono);
  padding: 0 12px;
}

/* --- Paramètres : clés API personnelles --- */
.settings-body { padding: 12px; display: flex; flex-direction: column; gap: 16px; }
.key-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  background: #0d0d0f;
}
.key-info { display: flex; flex-direction: column; gap: 4px; }
.key-info strong { font-size: 13px; }
.badge.connected { color: var(--ok); border-color: var(--ok); }
.key-form { flex-direction: row; padding: 0; flex-wrap: wrap; }
.key-form input { flex: 1; min-width: 160px; }