/* --- AJAF client: patch scroll + responsive --- */

/* 1) Fix scroll de la zone messages (Grid) */
.main-content, .chat-container, .chat-messages { min-height: 0; }
.chat-messages { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 2) Hauteur fiable sur mobiles */
.chat-app { height: 100dvh; padding-bottom: max(env(safe-area-inset-bottom,0px),0px); }

/* 3) Zone d'entrée adaptative */
.chat-input { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
#chatQuestion { width: 100%; min-height: 48px; max-height: 35vh; resize: vertical; }
.chat-input .btn { height: 48px; }

/* 4) Breakpoints */
@media (max-width: 992px){
  .main-content { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .sidebar, .side-panel { order: 2; }
  .chat-container { order: 1; }
}
@media (max-width: 720px){
  .chat-input { grid-template-columns: 1fr; }
  .chat-input .btn { width: 100%; }
  #chatQuestion { min-height: 60px; }
}

/* 5) Accessibilité & tactile */
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
button, .btn { touch-action: manipulation; }
textarea, input { font-size: 16px; } /* évite le zoom iOS */

/* ===== Patch chat mobile: largeur bulles + lisibilité ===== */

/* 1) Confort de lecture et scrolling */
.chat-messages{
  padding: 10px 12px;               /* évite que les bulles collent aux bords */
  overflow-y: auto;                  /* si pas déjà mis */
  -webkit-overflow-scrolling: touch; /* iOS smooth */
}

/* 2) Cible large des bulles (adapte le sélecteur à ta classe si besoin) */
.chat-messages .bubble,
.chat-messages .message,
.chat-messages > li{
  max-width: min(680px, 92%);        /* clamp sur desktop et mobile */
  width: -moz-fit-content;
  width: fit-content;                /* évite 100% pleine largeur */
  /* Bon wrap du contenu */
  white-space: pre-wrap;
  overflow-wrap: anywhere;           /* casse les URLs/mots très longs */
  word-break: break-word;
  hyphens: auto;
}

/* 3) Alignements (si tu as des classes user/bot) */
.chat-messages .bubble.user,
.chat-messages .message.user{ margin-left: auto; }   /* à droite */
.chat-messages .bubble.bot,
.chat-messages .message.bot{ margin-right: auto; }   /* à gauche */

/* 4) Contenu “difficile” (code, tableaux) */
.chat-messages .bubble pre,
.chat-messages .message pre{
  max-width: 100%;
  overflow: auto;                    /* scroll horizontal local si besoin */
  white-space: pre-wrap;
}
.chat-messages .bubble code,
.chat-messages .message code{
  white-space: pre-wrap;
  word-break: break-word;
}

/* 5) Ajustements mobiles */
@media (max-width: 720px){
  .chat-messages{ padding: 8px 10px; }
  .chat-messages .bubble,
  .chat-messages .message,
  .chat-messages > li{
    max-width: 92vw;                 /* bulles moins larges sur petit écran */
  }
}

/* 6) (Option doux) Scroll snapping pour se repérer dans l’historique */
@media (max-width: 720px){
  .chat-messages{ scroll-snap-type: y proximity; }
  .chat-messages .bubble,
  .chat-messages .message,
  .chat-messages > li{ scroll-snap-align: end; }
}