/* EDITOR DELLE IMMAGINI (26/10/2026) — js/components/editorImmagine.js. Scuro come WhatsApp Web in entrambi i temi. Niente :has(). */
.edi { position: fixed; inset: 0; z-index: 100100; background: #0b141a; color: #e9edef; display: flex; flex-direction: column; font-size: .88rem; user-select: none; }
.edi-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #222d34; flex-wrap: wrap; }
.edi-sx, .edi-dx, .edi-strumenti { display: flex; align-items: center; gap: 4px; }
.edi-strumenti { flex: 1; justify-content: center; flex-wrap: wrap; }
.edi-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: #aebac1; font-size: 1.05rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.edi-btn:hover:not(:disabled) { background: rgba(255,255,255,.08); color: #e9edef; }
.edi-btn:disabled { opacity: .3; cursor: default; }
.edi-btn.on { background: rgba(0,168,132,.22); color: #00d9a5; }
.edi-btn:focus-visible, .edi-fatto:focus-visible, .edi-scelta:focus-visible { outline: 2px solid #00a884; outline-offset: 2px; }
.edi-fatto { font: inherit; font-weight: 600; font-size: .95rem; color: #e9edef; background: transparent; border: none; padding: 8px 14px; border-radius: 20px; cursor: pointer; }
.edi-fatto:hover { background: rgba(255,255,255,.08); }
.edi-palco { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; position: relative; overflow: hidden; }
.edi-carico { color: #8696a0; display: flex; align-items: center; gap: 8px; }
.edi-tele { position: relative; display: inline-block; line-height: 0; }
.edi-tele[hidden] { display: none; }
.edi-tela { display: block; max-width: calc(100vw - 48px); max-height: calc(100vh - 210px); box-shadow: 0 6px 30px rgba(0,0,0,.5); background: #fff; }
.edi-sopra { position: absolute; left: 0; top: 0; width: 100%; height: 100%; touch-action: none; }
.edi-ritaglio { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); cursor: move; touch-action: none;
  background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 33.33% 33.33%; }
.edi-ritaglio[hidden] { display: none; }
.edi-ritaglio span { position: absolute; width: 18px; height: 18px; border: 4px solid #fff; }
.edi-ritaglio [data-m="nw"] { left: -5px; top: -5px; border-right: none; border-bottom: none; cursor: nwse-resize; }
.edi-ritaglio [data-m="ne"] { right: -5px; top: -5px; border-left: none; border-bottom: none; cursor: nesw-resize; }
.edi-ritaglio [data-m="sw"] { left: -5px; bottom: -5px; border-right: none; border-top: none; cursor: nesw-resize; }
.edi-ritaglio [data-m="se"] { right: -5px; bottom: -5px; border-left: none; border-top: none; cursor: nwse-resize; }
.edi-scrivi { position: absolute; z-index: 3; min-width: 120px; max-width: 70%; line-height: 1.2; font-weight: 600; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: rgba(0,0,0,.25); border: 1px dashed rgba(255,255,255,.7); border-radius: 6px; padding: 2px 6px; outline: none; resize: none; overflow: hidden; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.edi-opzioni { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px 14px; border-top: 1px solid #222d34; }
.edi-colori, .edi-spessori, .edi-scelte { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.edi-colore { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; transition: transform .12s; }
.edi-colore.on { border-color: #e9edef; transform: scale(1.25); }
.edi-spessore { width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.edi-spessore span { display: block; border-radius: 50%; background: #8696a0; }
.edi-spessore.on span { background: #e9edef; }
.edi-scelta { font: inherit; font-size: .82rem; color: #d1d7db; background: #202c33; border: 1px solid #2a3942; border-radius: 18px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.edi-scelta:hover { border-color: #00a884; }
.edi-scelta.on { background: rgba(0,168,132,.22); border-color: #00a884; color: #fff; }
.edi-applica { background: #00a884; border-color: #00a884; color: #fff; font-weight: 600; }
.edi-suggerimento { color: #8696a0; font-size: .8rem; }
.edi-emoji { display: flex; flex-wrap: wrap; gap: 2px; max-width: 760px; justify-content: center; }
.edi-emoji button { font-size: 1.45rem; width: 40px; height: 40px; border: none; background: transparent; border-radius: 8px; cursor: pointer; }
.edi-emoji button:hover { background: rgba(255,255,255,.08); }
/* MINIATURE DEGLI ALLEGATI prima dell'invio (risposta email: utils/email-chat-handlers.js; Nuova email: views/email.js) */
.eal-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 4px 6px 4px 4px; background: var(--card-bg, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; font-size: .8rem; color: var(--text-primary, #374151); }
.eal-mini { width: 40px; height: 40px; flex-shrink: 0; border-radius: 7px; object-fit: cover; display: block; background: #f3f4f6; }
.eal-mini-ico { display: inline-flex; align-items: center; justify-content: center; color: #6b7280; font-size: 1.1rem; }
.eal-apri { padding: 0; border: none; background: none; border-radius: 7px; cursor: zoom-in; flex-shrink: 0; line-height: 0; }
.eal-apri:hover .eal-mini { box-shadow: 0 0 0 2px #00a884; }
.eal-apri:focus-visible, .eal-btn:focus-visible { outline: 2px solid #00a884; outline-offset: 2px; }
.eal-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.eal-peso { opacity: .65; flex-shrink: 0; font-size: .74rem; }
.eal-btn { width: 26px; height: 26px; flex-shrink: 0; border: none; background: transparent; border-radius: 50%; color: #6b7280; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; }
.eal-btn:hover { background: rgba(0,0,0,.06); color: #111827; }
.eal-btn.remove-attachment-btn:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.email-att-mini { width: 34px; height: 34px; }
.email-att-apri { cursor: zoom-in; }
[data-theme="dark"] .eal-chip { background: #1f2937; border-color: #374151; color: #e5e7eb; }
[data-theme="dark"] .eal-mini { background: #111827; }
[data-theme="dark"] .eal-mini-ico, [data-theme="dark"] .eal-btn { color: #9ca3af; }
[data-theme="dark"] .eal-btn:hover { background: rgba(255,255,255,.08); color: #f3f4f6; }

@media (max-width: 700px) {
  .edi-barra { padding: 6px 8px; }
  .edi-strumenti { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .edi-btn { width: 38px; height: 38px; flex-shrink: 0; }
  .edi-tela { max-width: calc(100vw - 16px); max-height: calc(100vh - 260px); }
  .edi-palco { padding: 8px; }
}