/* ==========================================================================
   Dream.IA — l'onglet d'assistance du panneau social
   ========================================================================== */

.social-panel-tab-ia {
  color: #d7b4ff;
}
.social-panel-tab-ia.active {
  color: #f0e0ff;
}

#socialPaneDreamia {
  display: none;
  flex-direction: column;
  min-height: 0;
}
#socialPaneDreamia.active { display: flex; }

/* ---- le mot d'accueil ---- */
.dia-intro {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 10px 12px 4px; padding: 12px;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(167, 108, 255, .14), rgba(167, 108, 255, .04));
  border: 1px solid rgba(167, 108, 255, .28);
}
.dia-intro[hidden] { display: none; }
.dia-intro b { font-size: 13.5px; color: #e2ccff; }
.dia-intro p {
  margin: 4px 0 0; font-size: 11.5px; line-height: 1.55;
  color: var(--text-dim, #a7adb5);
}
.dia-intro a { color: var(--accent, #ff8a00); }
.dia-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a76cff, #2a1745 78%);
  box-shadow: 0 0 18px -4px #a76cff;
}

/* ---- le fil ---- */
.dia-messages {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 8px 12px; display: flex; flex-direction: column; gap: 9px;
}
.dia-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; }
.dia-msg.is-me { justify-content: flex-end; }

.dia-msg-avatar {
  width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px;
  display: grid; place-items: center; font-size: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a76cff, #2a1745 78%);
}

.dia-msg-body {
  max-width: 82%;
  padding: 8px 11px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.55;
  /* Les retours à la ligne du modèle sont rendus ici, pas en HTML : le texte reste
     du texte, on ne lui fait jamais confiance pour du balisage. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--panel-2, #1b1f24);
  border: 1px solid var(--border, #262b31);
  color: var(--text, #eef1f4);
}
.dia-msg.is-me .dia-msg-body {
  background: rgba(255, 138, 0, .13);
  border-color: rgba(255, 138, 0, .3);
}
.dia-msg.is-error .dia-msg-body {
  background: rgba(239, 68, 68, .1);
  border-color: rgba(239, 68, 68, .35);
  color: #ffb4b4;
}
.dia-msg-ago {
  display: block; margin-top: 4px;
  font-size: 9.5px; color: var(--text-faint, #6b7280);
}

/* ---- les trois points pendant la réflexion ---- */
.dia-msg.is-thinking .dia-msg-body { display: flex; gap: 4px; padding: 12px 13px; }
.dia-msg.is-thinking i {
  width: 6px; height: 6px; border-radius: 50%; background: #a76cff;
  animation: dia-blink 1.1s ease-in-out infinite;
}
.dia-msg.is-thinking i:nth-child(2) { animation-delay: .18s; }
.dia-msg.is-thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes dia-blink {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}

/* ---- les questions toutes faites ---- */
.dia-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 12px 8px;
}
.dia-suggestions[hidden] { display: none; }
.dia-suggestion {
  padding: 6px 10px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 11px; text-align: left;
  background: var(--panel-2, #1b1f24);
  border: 1px solid var(--border, #262b31);
  color: var(--text-dim, #a7adb5);
  transition: border-color .13s, color .13s;
}
.dia-suggestion:hover { border-color: #a76cff; color: #e2ccff; }

/* ---- la barre du bas ---- */
.dia-input-row { flex-shrink: 0; }
.dia-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px 9px; font-size: 10px; color: var(--text-faint, #6b7280);
}
.dia-clear {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 10px; color: var(--text-faint, #6b7280);
  text-decoration: underline;
}
.dia-clear:hover { color: var(--accent, #ff8a00); }

@media (prefers-reduced-motion: reduce) {
  .dia-msg.is-thinking i { animation: none; opacity: .6; }
}