* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #eae6df;
  color: #111;
}

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #00a884; }
.login-card { background: #fff; padding: 32px; border-radius: 12px; width: 320px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.login-card h1 { margin: 0 0 8px; font-size: 20px; text-align: center; }
.login-card input { padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 14px; }
.login-card button { padding: 10px; background: #00a884; color: #fff; border: 0; border-radius: 8px; font-size: 15px; cursor: pointer; }
.login-error { color: #c0392b; margin: 0; font-size: 13px; text-align: center; }

/* ---- layout ---- */
.app { display: flex; height: 100vh; }
.sidebar { width: 360px; min-width: 280px; background: #fff; border-right: 1px solid #ddd; display: flex; flex-direction: column; }
.sidebar-head { padding: 14px 16px; background: #f0f2f5; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.logout { font-size: 12px; font-weight: 400; color: #667; text-decoration: none; }
.search { margin: 8px 12px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 18px; font-size: 13px; outline: none; }
.conv-list { overflow-y: auto; flex: 1; }

.conv { display: block; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; text-decoration: none; color: inherit; }
.conv:hover { background: #f5f5f5; }
.conv-active { background: #f0f2f5; }
.conv-top { display: flex; justify-content: space-between; }
.conv-name { font-weight: 600; }
.conv-time { font-size: 11px; color: #888; }
.conv-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.conv-preview { font-size: 13px; color: #667; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.badge { background: #25d366; color: #fff; border-radius: 12px; padding: 0 7px; font-size: 11px; min-width: 20px; text-align: center; }
.empty { padding: 20px; color: #888; }

/* ---- thread ---- */
.thread-pane { flex: 1; display: flex; flex-direction: column; background: #efeae2; }
.empty-pane { align-items: center; justify-content: center; color: #667; }
.thread-head { padding: 12px 18px; background: #f0f2f5; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
.thread-head .phone { color: #888; font-size: 12px; margin-left: 8px; }
.window-state { font-size: 12px; }
.window-state .ok { color: #1a7f4b; }
.window-state .warn { color: #b26a00; }
/* azioni globali nell'header sidebar (Sincronizza, report, esci): stessa pill */
.sidebar-head .head-actions { display: flex; align-items: center; gap: 8px; }
.head-btn { background: #fff; color: #00a884; border: 1px solid #00a884; border-radius: 14px;
  padding: 4px 10px; font-size: 12px; font-weight: 400; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-block; line-height: 1.5; }
.head-btn:hover { background: #00a884; color: #fff; }
.sync-flows.htmx-request { opacity: .55; pointer-events: none; }  /* feedback durante il recupero */

/* barra di caricamento globale (indeterminata): visibile solo mentre la richiesta
   indicata con hx-indicator è in corso. Pensata per il tasto Sincronizza. */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .15s; }
.topbar.htmx-request { opacity: 1; }
.topbar-fill { height: 100%; width: 35%; border-radius: 0 3px 3px 0; background: #00a884;
  animation: topbar-slide 1.1s ease-in-out infinite; }
@keyframes topbar-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

.messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.msg { display: flex; }
.msg-in { justify-content: flex-start; }
.msg-out { justify-content: flex-end; }
.bubble { max-width: 65%; padding: 6px 10px 4px; border-radius: 8px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.1); font-size: 14px; word-wrap: break-word; }
/* preserva gli a-capo del testo (composer multiriga) senza far comparire le indentazioni del template */
.bubble .text { white-space: pre-wrap; }
.msg-out .bubble { background: #d9fdd3; }
.bubble .meta { display: block; text-align: right; font-size: 10px; color: #888; margin-top: 2px; }
.status-read { color: #53bdeb; }
.msg-img { max-width: 260px; border-radius: 6px; display: block; }
.media-missing { display: inline-block; padding: 16px; background: #00000010; border-radius: 6px; color: #667; font-size: 13px; }
.caption { margin-top: 4px; }
.reaction { font-size: 20px; }

/* ---- composer ---- */
.composer { padding: 12px 16px; background: #f0f2f5; border-top: 1px solid #ddd; }
.composer form { display: flex; gap: 8px; flex-wrap: wrap; }
.composer input, .composer select, .composer textarea { flex: 1; padding: 10px 12px; border: 1px solid #ccc; border-radius: 20px; font-size: 14px; }
/* textarea del composer: multiriga in stile WhatsApp Web, cresce col testo (height via JS)
   fino a max-height e poi scrolla, senza la maniglia di resize. */
.composer textarea { resize: none; font-family: inherit; line-height: 1.4; max-height: 120px; overflow-y: auto; }
.composer button { padding: 10px 18px; background: #00a884; color: #fff; border: 0; border-radius: 20px; cursor: pointer; }
.composer .hint { font-size: 12px; color: #b26a00; align-self: center; }
.composer .attach { display: flex; align-items: center; font-size: 20px; cursor: pointer; padding: 0 6px; }
/* anteprima allegato: riga propria sopra l'input (width:100% + flex-wrap del form) */
.composer .attach-preview { width: 100%; display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; }
.composer .attach-preview[hidden] { display: none; }  /* display:flex sopra batte il [hidden] di default */
.composer .attach-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid #ccc; }
.composer .attach-preview .fname { flex: 1; font-size: 13px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer .attach-preview .rm { padding: 2px 9px; background: #e54848; border-radius: 12px; font-size: 15px; line-height: 1; }
.tmpl-form { flex-wrap: wrap; }
.template-fields { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.template-fields input { flex: 1 1 200px; }
.composer .refresh-tmpl { background: #f0f2f5; color: #00a884; border: 1px solid #00a884; padding: 8px 14px; font-size: 13px; }

/* feedback "invio in corso": durante la richiesta htmx mette .htmx-request sul form.
   Il bottone Invia mostra uno spinner (testo nascosto via color:transparent) e i campi
   si attenuano, così l'operatore vede subito che il messaggio sta partendo. */
.composer button[type="submit"] { position: relative; transition: opacity .15s; }
.composer form.htmx-request button[type="submit"] { color: transparent; }
.composer form.htmx-request button[type="submit"]::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
  animation: spin .6s linear infinite;
}
.composer form.htmx-request input,
.composer form.htmx-request select,
.composer form.htmx-request textarea { opacity: .55; }
@keyframes spin { to { transform: rotate(360deg); } }

/* avviso di invio fallito sopra il composer (campi non svuotati → si può ritentare) */
.composer .send-error { width: 100%; margin-bottom: 8px; padding: 8px 12px; border-radius: 8px;
  background: #ffe2e0; border: 1px solid #f3b4ae; color: #b3261e; font-size: 13px; }
.composer .send-error[hidden] { display: none; }

/* bolla outbound non consegnata: sfondo rosso tenue + esito esplicito */
.msg-out .bubble-failed { background: #ffe2e0; border: 1px solid #f3b4ae; }
.status-failed { color: #b3261e; }