/* CHAT DRAWER: contenitore principale = colonna flex con altezza fissa */
#chat-drawer{
  position: fixed;
  right: 16px; bottom: 84px;
  width: min(720px, 90vw);
  height: 70vh;             /* <<— fondamentale */
  max-height: 70vh;
  z-index: 2000;            /* sopra header/footer */
  display: none;            /* verrà mostrato via JS */
  display: flex;            /* .box è il drawer stesso */
  flex-direction: column;
}

/* header/footer non crescono */
#chat-drawer .box-header,
#chat-drawer .box-footer{ flex: 0 0 auto; }

/* body riempie lo spazio e lascia scorrere i figli */
#chat-drawer .box-body{
  flex: 1 1 auto;
  min-height: 0;            /* <<— sblocca lo scroll dei figli in flex */
  display: flex;
  gap: 8px;
  overflow: hidden;         /* evita sbordi */
}

/* colonna contatti con scrollbar sua */
#chat-contacts{
  flex: 0 0 35%;
  min-width: 200px;
  border-right: 1px solid #eee;
  overflow-y: auto;
  min-height: 0;            /* <<— importante in flex row */
  overscroll-behavior: contain;
}

/* pannello conversazione = colonna flessibile */
#chat-panel{
  flex: 1 1 auto;
  min-width: 0;             /* evita overflow orizzontale */
  min-height: 0;            /* <<— per far scrollare #chat-history */
  display: flex;
  flex-direction: column;
  position: relative;       /* per overlay upload */
  overflow: hidden;
}

/* area messaggi: QUI scorre */
#chat-history{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable; /* niente salto quando appare la barra */
}

/* composer */
#chat-input{
  display: flex;
  gap: 6px;
  padding: 6px 0;
  align-items: flex-start;
}
#chat-text{
  flex: 1 1 auto;
  min-height: 38px;
  max-height: 30vh;
  resize: vertical;
  overflow-y: auto;
}

/* overlay upload */
#chat-uploading{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.85);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: 600;
  z-index: 2;
}
#chat-panel.uploading #chat-uploading{ display: flex; }

/* contatti: estetica + stato attivo */
#chat-contacts .contact{ padding:6px 8px; cursor:pointer; border-bottom:1px solid #eee; }
#chat-contacts .contact:hover{ background:#f9f9f9; }
#chat-contacts .contact.active{ background:#eef5ff; font-weight:600; }

/* mobile: usa tutto lo schermo e nascondi l’elenco contatti */
@media (max-width: 768px){
  #chat-drawer{
    left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }
  #chat-contacts{ display:none; }
  #chat-panel{ flex: 1 1 auto; }
}

#chat-drawer{ display:none; }                 /* chiuso di default */
#chat-drawer.is-open{ display:flex !important; } /* aperto = flex */


#chat-drawer .box-body{ min-height:0 !important; overflow:hidden !important; }
#chat-panel{ min-height:0 !important; }
#chat-history{ min-height:0 !important; overflow-y:auto !important; }
#chat-contacts{ overflow-y:auto !important; }


/* Drawer: chiuso di default, aperto in flex */
 #chat-drawer{ display:none !important; }
 #chat-drawer.is-open{ display:flex !important; }

 /* Contenitore fixed con altezza fissata e layout a colonna */
 #chat-drawer{
   position: fixed !important;
   right: 16px; bottom: 84px;
   width: min(720px, 90vw);
   height: 70vh;                 /* limite verticale */
   max-height: 70vh;
   z-index: 2147483647;
   flex-direction: column;
 }

 /* Header / footer non crescono */
 #chat-drawer .box-header,
 #chat-drawer .box-footer{ flex: 0 0 auto; }

 /* Body riempie lo spazio e fa scorrere i figli */
 #chat-drawer .box-body{
   flex: 1 1 auto !important;
   min-height: 0 !important;     /* sblocca lo scroll dei figli in flex */
   display: flex !important;
   gap: 8px;
   overflow: hidden !important;  /* niente “sbordo” laterale */
   margin: 0 !important;         /* evita margini AdminLTE */
   padding: 8px !important;
 }

 /* Lista contatti: scroll verticale */
 #chat-contacts{
   flex: 0 0 35%;
   min-width: 200px;
   border-right: 1px solid #eee;
   overflow-y: auto !important;
   min-height: 0 !important;
 }

 /* Pannello conversazione = colonna, con history che scrolla */
 #chat-panel{
   flex: 1 1 auto;
   min-width: 0 !important;
   min-height: 0 !important;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
 }
 #chat-history{
   flex: 1 1 auto;
   min-height: 0 !important;
   overflow-y: auto !important;
   padding: 8px;
   scrollbar-gutter: stable;
 }

 /* Composer */
 #chat-input{
   display: flex; gap: 6px; padding: 6px 0; align-items: flex-start;
 }
 #chat-text{
   flex: 1 1 auto; min-height: 38px; max-height: 30vh; resize: vertical; overflow-y: auto;
 }

 /* Sovrascrivi eventuali inline styles rimasti */
 #chat-drawer[style]{ width: auto !important; }

 /* Mobile: usa l’intera viewport e nascondi contatti */
 @media (max-width: 768px){
   #chat-drawer{
     left: 0; right: 0; bottom: 0;
     width: 100vw;
     height: 100dvh;     /* migliore su iOS */
     max-height: 100dvh;
   }
   #chat-contacts{ display:none; }
 }

 /* (Opzionale) blocca lo scroll della pagina sotto il drawer */
 body.chat-open{ overflow:hidden !important; }