/*
Componenti condivisi fra il portale cliente e l'area operatore:
dropzone con anteprime, spinner sul pulsante di invio, lightbox.

Vivono in un file separato da style.css perche' servono anche dentro
il chrome Bootstrap di django-helpdesk (form "Nuovo Ticket" operatore,
templates/portale/nuovo_ticket_operatore.html), dove style.css NON va
caricato: ridefinisce body, .btn, .card, form input... e andrebbe in
conflitto con Bootstrap. Qui ci sono solo classi proprie del portale
(.dropzone*, .preview-*, .spinner, .lightbox*), che non collidono con
nulla, e ogni colore ha un fallback perche' le variabili --xxx di
style.css nell'area operatore non esistono.

Lo script che le anima e' static/portale/js/portale.js (caricato in
entrambe le interfacce).
*/

/* --- Spinner sul pulsante di invio (portale.js: initSubmitLoading) --- */

.btn .spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.btn.secondary .spinner { border-color: rgba(31,36,48,.25); border-top-color: var(--text, #1f2430); }
.btn.is-loading .spinner { display: inline-block; margin-right: 6px; }
.btn.is-loading .btn-label { opacity: .75; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Allegati: icone accanto alla casella di testo, come in WhatsApp --- */

.dropzone {
  /* Non e' piu' un riquadro tratteggiato: il nome resta solo perche' e'
     l'hook su cui portale.js cerca gli input/le anteprime
     ([data-dropzone] sull'attributo, non su questa classe - il nome
     classe e' rimasto identico solo per non doverlo rinominare ovunque). */
  position: relative;
  transition: background-color .15s ease;
  border-radius: var(--radius, 12px);
}
.dropzone.is-dragover {
  background: var(--primary-light, #eaf1ff);
}
.dropzone input[type=file]:not([hidden]) {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.dropzone-hint { font-size: 12px; color: var(--muted, #6b7280); margin-top: 8px; }

/* Riga di composizione: casella di testo + icone di allegato subito a
   destra, invece di un riquadro drag&drop separato piu' in basso. */
.message-compose-row {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.message-compose-row textarea {
  flex: 1;
  min-width: 0;
}
.attach-icons {
  display: flex;
  flex-shrink: 0;
  padding-bottom: 2px;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--muted, #6b7280);
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--bg, #f4f5f7); color: var(--primary, #2f6fed); }

/* "Fotocamera" ha senso solo su smartphone: su schermi larghi (desktop/
   tablet in orizzontale) una fotocamera integrata e utilizzabile da
   browser è rara, e il pulsante sarebbe solo un secondo selettore file
   ridondante con "Galleria". */
@media (min-width: 768px) {
  .icon-btn-camera { display: none; }
}

.dropzone-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  justify-content: flex-start;
  text-align: left;
}
.dropzone-previews:empty { margin-top: 0; }

.preview-item {
  position: relative;
  width: 76px;
}
.preview-thumb {
  width: 76px; height: 76px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border, #e2e4e9);
  display: block;
  background: var(--card, #ffffff);
}
.preview-thumb.is-file {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted, #6b7280);
  text-align: center;
  padding: 4px;
  word-break: break-all;
}
.preview-remove {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--danger, #c0392b);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-name {
  font-size: 11px;
  color: var(--muted, #6b7280);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Lightbox (portale.js la crea sempre: senza queste regole il div
       resterebbe visibile in fondo alla pagina) ------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 23, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.lightbox-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}