/* =============================================================================
   prompt-library.css - Launcher de la bibliothèque de prompts (Prompt 7)
   -----------------------------------------------------------------------------
   Point d'entrée de la démo, ancré au BAS de la zone Chat. Niveau de lecture 1/3 :
   grand public, SOBRE. Un simple champ de recherche (style Gemini) avec l'icône
   IA ; au focus, la bibliothèque de prompts se déroule (panneau filtrable). Le
   mode libre est masqué pour l'instant. Réutilise les tokens du design-system.
   ========================================================================== */

#prompt-library {
  padding: var(--rs-sp-3);
  border-top: 1px solid var(--rs-line);
  background: var(--rs-surface);
}

/* --- Barre de recherche sobre (icône IA + champ) --------------------------- */
.plib__bar {
  display: flex; align-items: center; gap: var(--rs-sp-2);
  padding: 8px 10px 8px 12px;
  background: var(--rs-surface-2);
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-radius-pill);
  box-shadow: var(--rs-shadow-sm);
  transition: border-color var(--rs-dur-fast) var(--rs-ease),
              box-shadow var(--rs-dur-fast) var(--rs-ease);
}
.plib__bar:focus-within { border-color: var(--rs-main); box-shadow: 0 0 0 3px var(--rs-main-100); }

/* Icône IA neutre (sparkle) : évoque un assistant sans logo officiel. */
.plib__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  fill: var(--rs-main);
}

.plib__input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  padding: 4px 0;
  font-family: inherit; font-size: var(--rs-fs-sm);
  color: var(--rs-ink);
}
.plib__input::placeholder { color: var(--rs-muted); }
.plib__input:focus { outline: none; }

/* --- Panneau de la bibliothèque (listbox, position:fixed via JS) ----------- */
.plib__panel {
  position: fixed;
  z-index: var(--rs-z-tooltip);
  max-height: min(340px, 56vh);
  overflow-y: auto;
  padding: var(--rs-sp-2);
  background: var(--rs-surface);
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-radius);
  box-shadow: var(--rs-shadow-lg);
}
.plib__panel[hidden] { display: none; }

/* --- Barre d'onglets (Parcours / Tous / Général / Par rayon), collante en tête */
.plib__tabs {
  position: sticky; top: calc(-1 * var(--rs-sp-2));
  z-index: 1;
  display: flex; gap: 4px;
  margin: calc(-1 * var(--rs-sp-2)) calc(-1 * var(--rs-sp-2)) var(--rs-sp-2);
  padding: var(--rs-sp-2);
  background: var(--rs-surface);
  border-bottom: 1px solid var(--rs-line);
}
.plib__tab {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid transparent; border-radius: var(--rs-radius-pill);
  background: var(--rs-surface-2);
  font-family: inherit; font-size: var(--rs-fs-xs); font-weight: 700;
  color: var(--rs-muted); cursor: pointer; white-space: nowrap;
  transition: background var(--rs-dur-fast) var(--rs-ease), color var(--rs-dur-fast) var(--rs-ease);
}
.plib__tab:hover { color: var(--rs-secondary); }
.plib__tab.is-active { background: var(--rs-main); color: #fff; }

.plib__group + .plib__group { margin-top: var(--rs-sp-2); }
.plib__group-label {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px 4px;
  font-size: var(--rs-fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--rs-muted);
}
.plib__group-icon { font-size: 14px; line-height: 1; }

.plib__opt {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none; border-radius: var(--rs-radius-sm);
  background: transparent;
  font-family: inherit; font-size: var(--rs-fs-sm); font-weight: 600;
  color: var(--rs-ink);
  cursor: pointer; line-height: 1.35;
  transition: background var(--rs-dur-fast) var(--rs-ease);
}
.plib__opt::before {
  content: '▸'; flex-shrink: 0;
  color: var(--rs-main); font-size: 11px; line-height: 1.5;
  transition: transform var(--rs-dur-fast) var(--rs-ease);
}
.plib__opt:hover,
.plib__opt.is-active { background: var(--rs-main-100); color: var(--rs-secondary); }
.plib__opt:hover::before,
.plib__opt.is-active::before { transform: translateX(2px); }

/* Deja vu : grise mais TOUJOURS selectionnable. */
.plib__opt.is-seen { color: var(--rs-muted); font-weight: 600; }
.plib__opt.is-seen::before { content: '✓'; color: var(--rs-muted); }
.plib__opt.is-seen:hover { color: var(--rs-secondary); }

.plib__panel-empty {
  padding: var(--rs-sp-3) 10px;
  font-size: var(--rs-fs-sm); color: var(--rs-muted); font-style: italic;
}

/* --- Fallback agent libre (quand aucun scénario précalculé ne correspond) --- */
.plib__ask-agent {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 4px; padding: 9px 10px;
  text-align: left; cursor: pointer;
  background: var(--rs-main-100, rgba(16,163,127,0.08));
  border: 1px solid transparent; border-radius: var(--rs-radius, 10px);
  font: inherit; font-size: var(--rs-fs-sm); font-weight: 600; color: var(--rs-secondary);
  transition: background 0.15s, border-color 0.15s;
}
.plib__ask-agent:hover { background: var(--rs-main-100, rgba(16,163,127,0.14)); border-color: var(--rs-main); }
.plib__ask-agent .plib__icon { width: 16px; height: 16px; }
.plib__ask-agent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Ligne de note (erreur / vide) ----------------------------------------- */
.plib__note {
  margin-top: var(--rs-sp-2);
  font-size: var(--rs-fs-xs); line-height: 1.4;
  color: var(--rs-ink-soft);
  padding: 6px 10px;
  border-radius: var(--rs-radius-sm);
  background: var(--rs-surface-2);
}
.plib__note[data-kind="error"] {
  color: var(--rs-accent);
  background: var(--rs-accent-100);
}

/* Repli du chat : le launcher reste accessible (on ne masque que le fil). */
#app.chat-collapsed #prompt-library { display: none; }

/* Mobile : composer compact, identique en logique. */
@media (max-width: 720px) {
  #prompt-library { padding: var(--rs-sp-2); }
}