/* ── Atelier desktop (≥1024px) — chat + historique côte à côte ────────────
   #screen-atelier prend en charge sa propre disposition plein format (comme
   #screen-today/#screen-config, voir layout-desktop.css) plutôt que le simple
   fond glass générique des autres écrans : la conversation avec Alex doit
   remplir toute la hauteur disponible (scroll interne des messages, barre de
   saisie toujours visible en bas), pas juste s'empiler dans une page qui
   scrolle. Même liseret dégradé animé que le reste du redesign. */
@media (min-width: 1024px) {
  #screen-atelier.screen.active {
    overflow: hidden;
    padding: 0;
    margin: 16px 20px 20px;
    display: flex;
    gap: 16px;
    box-sizing: border-box;
  }

  .atelier-chat-col, .atelier-panel {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .atelier-chat-col { flex: 1.4; }

  /* Deux cartes EMPILEES dans une seule colonne, pas deux colonnes de plus : a trois panneaux
     cote a cote, le chat — qui est le coeur de l'ecran — devenait trop etroit. */
  .atelier-side-col {
    flex: 1; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; gap: 16px;
  }
  .atelier-panel { padding: 16px; }
  .atelier-side-col .atelier-panel { flex: 1; }
  /* Les fils rouges prennent la place qu'ils demandent, jamais plus de la moitie : l'historique
     doit rester visible sans scroller la page. */
  .atelier-side-col .atelier-panel-arcs { flex: 0 1 auto; max-height: 50%; }

  /* Même liseret dégradé animé que .dash-panel::before (dashboard.css) —
     réutilise l'angle/keyframe déjà déclarés là-bas. */
  .atelier-chat-col::before, .atelier-panel::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--dash-border-angle),
      var(--card-border-base) 0%, var(--card-border-base) 42%,
      var(--card-border-shine) 50%, var(--card-border-base) 58%, var(--card-border-base) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: dash-border-spin 12s linear infinite;
    pointer-events: none;
  }

  /* .chat-container a une hauteur fixe (calc(100vh - 150px)) pensée pour le plein écran
     mobile — ici elle doit juste remplir .atelier-chat-col, déjà dimensionnée par le flex
     parent (#screen-atelier). */
  .atelier-chat-col .chat-container { height: 100%; }

  .atelier-panel .section-title { padding: 0; margin-bottom: 12px; flex-shrink: 0; }
  #atelier-history-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
}

/* ── Cards d'historique + lightbox — pas de media query : le panneau lui-même
   (.atelier-panel) est masqué sur mobile via #screen-atelier étant plat comme
   avant, donc ces cards ne sont de toute façon visibles qu'en desktop, mais
   le lightbox partage la structure générique .modal-overlay/.modal (déjà
   responsive) donc pas besoin de la re-scoper ici. */
.atelier-history-card {
  background: rgba(var(--text-rgb),0.03); border: 1px solid rgba(var(--text-rgb),0.12);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: background 0.15s;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-card);
}
.atelier-history-card:hover { background: rgba(var(--accent-rgb),0.08); }
.atelier-history-card-main { flex: 1; min-width: 0; }
.atelier-history-card-title {
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.atelier-history-card-date { font-size: 10.5px; color: rgba(var(--text-rgb),0.4); margin-top: 4px; }
.atelier-history-card-delete {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 6px; border-radius: 6px;
  color: rgba(var(--text-rgb),0.35); transition: background 0.15s, color 0.15s;
}
.atelier-history-card-delete:hover { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }


/* ── Carte Fils rouges (Atelier) ──────────────────────────────────────────
   Hors media query, comme les cards d'historique : la carte est aussi rendue sur mobile,
   empilee sous le chat. */
.atelier-arcs-intro {
  font-size: 11px; color: rgba(var(--text-rgb),0.5);
  margin-bottom: 10px; line-height: 1.45; flex-shrink: 0;
}
/* La zone defilante englobe la liste ET les suggestions ; le formulaire d'ajout reste ancre
   sous elle. Sans ce conteneur, deux suggestions suffisaient a repousser le formulaire hors
   de la card, qui est bornee a 50% de hauteur et masque ce qui deborde. */
.atelier-arcs-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
#arcs-list { min-height: 0; }
.atelier-arcs-form { margin-top: 10px; flex-shrink: 0; }
.atelier-arcs-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.atelier-arcs-actions .form-text[type="date"] { flex: 1 1 140px; min-width: 0; }
.atelier-arcs-actions .form-select { flex: 1 1 120px; min-width: 0; }
.atelier-arcs-actions .btn { flex: 1 1 100%; }

.arc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  background: rgba(var(--text-rgb),0.03);
  border: 1px solid rgba(var(--text-rgb),0.12);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.arc-info { flex: 1; min-width: 0; }
.arc-titre {
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arc-meta { font-size: 10.5px; color: rgba(var(--text-rgb),0.4); margin-top: 4px; }
.arc-del { flex: 0 0 auto; padding: 6px 10px; font-size: 13px; line-height: 1; }

/* Fils rouges proposés par Alex. Volontairement distincts des .arc-row : ce ne sont PAS encore
   des fils rouges, ce sont des propositions. Bordure d'accent et fond teinté pour qu'on ne les
   confonde pas avec ceux qui tournent déjà — sinon on croit en avoir cinq en cours. */
.arcs-sugg-titre {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(var(--accent-rgb),0.85); margin: 14px 0 8px;
}
.arc-sugg {
  padding: 12px; margin-bottom: 10px; border-radius: 10px;
  background: rgba(var(--accent-rgb),0.06);
  border: 1px solid rgba(var(--accent-rgb),0.22);
}
.arc-sugg-titre { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.arc-sugg-pourquoi {
  font-size: 11px; color: rgba(var(--text-rgb),0.55); margin-top: 4px; line-height: 1.45;
}
/* Le plan des épisodes se lit AVANT d'adopter : c'est lui qui dit si le fil rouge tient debout. */
.arc-sugg-plan {
  margin: 8px 0 0; padding-left: 18px;
  font-size: 11px; color: rgba(var(--text-rgb),0.65); line-height: 1.6;
}
.arc-sugg-actions { display: flex; gap: 8px; margin-top: 10px; }
.arc-sugg-actions .btn { flex: 1; padding: 7px 10px; font-size: 12px; }