/* ── Surcouche philosophie par-dessus styles.css (hérité du coach) ──
   On garde la structure et la sobriété du coach ; on ajoute l'identité du
   Cercle : marque texte à chouette, barre de modes, bulles « philosophe ». */

/* Marque : la chouette seule (SVG maison, static/img/owl.svg) */
#nav-logo img { height: 34px !important; width: auto !important; }
.welcome-owl { height: 220px; width: auto; margin-bottom: 22px; }

/* Barre des 3 modes au-dessus du fil */
#mode-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  max-width: 780px; margin: 0 auto; width: 100%;
  padding: 14px 20px 0 20px;
}
#mode-buttons { display: flex; gap: 6px; }
.mode-btn {
  border: 1px solid #d8d8d8; background: #fff; color: #777;
  border-radius: 16px; padding: 6px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .12s;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.mode-btn:hover { border-color: #457b9d; color: #457b9d; }
.mode-btn.mode-active { background: #457b9d; border-color: #457b9d; color: #fff; }
#philo-select {
  font-size: 13px; padding: 6px 10px; border: 1px solid #d8d8d8;
  border-radius: 8px; background: #fff; color: #333; max-width: 260px;
}

/* Bulles « philosophe » : blanches, filet gauche, nom en tête */
.chat-msg-philosopher { display: flex; justify-content: flex-start; }
.chat-msg-philosopher .msg-bubble {
  background: #fff; border: 1px solid #e4e4e4; border-left: 3px solid #457b9d;
  border-radius: 4px 14px 14px 14px; padding: 12px 16px; max-width: 92%;
}
.msg-philo-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700; font-size: 14px; color: #457b9d; margin-bottom: 6px;
}

/* Sources sous les réponses */
.msg-sources {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid #eee;
  font-size: 12px; color: #999;
}
.msg-sources em { color: #777; }
.msg-sources-only .msg-bubble { background: transparent; border: none; padding: 0; }

/* Le fil accueille la barre de modes sans la faire défiler */
#chat-main { min-height: 0; }