/*
 * La conversazione — discussione fra persone e assistente.
 *
 * Sta in un file suo perché le stesse righe le disegna il sito e le disegna
 * la dashboard: il markup è uno (`grant_ai_thread_html()` in grants_ai.php),
 * e due copie del foglio di stile sarebbero divergenti al primo ritocco.
 * I colori vengono da tokens.css, caricato da entrambi.
 */

/* discussione */
.chat{margin:10px 0 14px;display:flex;flex-direction:column;gap:10px;max-height:300px;overflow-y:auto}
/* Dentro una scheda la conversazione è un riquadro che scorre; quando è
   lei la pagina — i messaggi fra persone — scorre la pagina, non il
   riquadro: due barre di scorrimento una dentro l'altra si contendono
   la rotellina. */
.chat--full{max-height:none;overflow:visible}
.chat__msg{
  padding:10px 12px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line-row);
}
.chat__msg.is-mine{background:var(--badge-bg);border-color:rgba(61,140,92,.25)}
.chat__who{display:block;font:600 12px 'Exo 2',sans-serif;color:var(--ink-700);margin-bottom:4px}
.chat__when{font:400 10.5px 'Exo 2',sans-serif;color:var(--dim-soft);margin-left:6px}
.chat__body{display:block;font:400 13px/1.55 'Exo 2',sans-serif;color:var(--ink-600);overflow-wrap:anywhere}
/* I collegamenti dentro un messaggio: scritti da una persona, quindi
   si vedono. L'indirizzo per esteso, perché è dove si va davvero. */
.chat__body a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.chat__body a:hover,.chat__body a:focus-visible{color:var(--green-hover)}
/*
 * Il bottone sta dentro la casella, non accanto: cosi' la casella e'
 * larga quanto la finestra e le due righe — discussione e assistente —
 * non possono finire a x diverse, qualunque cosa ci sia scritto sopra.
 * Il nome del bottone resta come etichetta accessibile e suggerimento.
 *
 * Lo spazio a destra del testo e' riservato nella casella, altrimenti
 * l'ultima riga scritta finirebbe sotto il cerchio; e la maniglia di
 * ridimensionamento sparisce, perche' starebbe esattamente li' sotto.
 */
.chat__form{position:relative}
.chat__form .field{margin:0}
.chat__form textarea{min-height:92px;padding-right:66px;resize:none}

.btn--send{
  position:absolute;right:10px;bottom:10px;
  /* Il centraggio è dichiarato qui: sul sito lo dà già .btn, nella
     dashboard il bottone è un .btn di Bootstrap, che non è flex. */
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border-radius:50%;
}

/*
 * L'assistente non è una persona del laboratorio, e la sua risposta non deve
 * somigliare a quella di un collega: stesso impianto, bordo tratteggiato.
 * Il tratteggio distingue senza introdurre un colore nuovo nella palette.
 */
.chat__msg.is-ai{background:var(--panel-bg);border-style:dashed}
.chat__sources{display:block;margin-top:6px;font:400 11px/1.6 'Exo 2',sans-serif}
.chat__sources a{margin-right:10px;overflow-wrap:anywhere}