/* ── Sirocco custom styles ─────────────────────────────────────────────── */

/* ── Page de login : sous-titre KYLI ─────────────────────────────────── */
/* Inject via JS (voir banner.js) — ce bloc sert de base pour les styles */
.sirocco-login-subtitle {
  text-align: center;
  font-size: 13px;
  color: rgba(120, 140, 180, 0.85);
  margin-top: -8px;
  margin-bottom: 20px;
  font-style: italic;
  line-height: 1.5;
}

/* ── Page de login : mise en page ─────────────────────────────────────── */
/*
  Chainlit rend le login en grille 2 colonnes [formulaire | image] (classe
  `.grid.min-h-svh`, colonnes 50/50 à partir de `lg:`). L'image de droite vient
  de `[UI] login_page_image` (config.toml). On rétrécit la colonne formulaire au
  tiers gauche et on laisse les deux tiers à l'illustration. Le bandeau Sirocco
  (44px fixe) occupe le haut : on décale la grille d'autant pour ne pas masquer
  le logo. À ne s'appliquer qu'au point de rupture `lg` (≥1024px) où Chainlit
  affiche réellement les 2 colonnes.
*/
@media (min-width: 1024px) {
  .grid.min-h-svh {
    grid-template-columns: 1fr 2fr !important;   /* formulaire ≈ 1/3, image ≈ 2/3 */
  }
}

/* Bouton « Se connecter » en bleu (marque Sirocco) — le seul bouton submit du
   formulaire ; le bouton œil du mot de passe est `type="button"`, non touché. */
.grid.min-h-svh button[type="submit"] {
  background-color: #2d4a7a !important;
  border-color: #4a70b0 !important;
  color: #ffffff !important;
}
.grid.min-h-svh button[type="submit"]:hover {
  background-color: #365a92 !important;
}

/* ── Collapse des anciens messages ────────────────────────────────────── */
/*
  Au-delà de 5 messages visibles, les anciens sont collapsés :
  le bouton "Afficher les messages précédents" est injecté par banner.js
*/
.sirocco-collapsed-messages {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.sirocco-collapsed-messages.expanded {
  max-height: 99999px;
}

.sirocco-show-older {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px;
  margin: 8px 0 16px;
  background: none;
  border: 1px solid rgba(100, 140, 200, 0.25);
  border-radius: 8px;
  color: rgba(120, 160, 220, 0.8);
  font-size: 12px;
  cursor: pointer;
  font-family: -apple-system, sans-serif;
  letter-spacing: 0.04em;
}
.sirocco-show-older:hover {
  background: rgba(60, 100, 180, 0.1);
  border-color: rgba(100, 140, 200, 0.5);
}

/* ── Positionnement zone de saisie ───────────────────────────────────────── */
main, [class*="MessageList"], [class*="Messages"] {
  padding-bottom: 60px !important;
}

[class*="Input"], [class*="Textarea"], textarea[placeholder*="Posez"] {
  margin-top: -10px !important;
}

.cl-input-container, [class*="InputContainer"] {
  margin-bottom: 10px !important;
  padding-bottom: 0 !important;
}