/* =========================================================
   BOOT ERROR (fallback visibile se le librerie non si caricano)
========================================================= */
.boot-error[hidden] {
  display: none !important;
}
.boot-error {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.boot-error-box {
  max-width: 320px;
  text-align: center;
  color: #fff;
}
.boot-error-box p {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.boot-error-box button {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* =========================================================
   RESET & TOKENS
========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #FFFFFF;
  --bg-secondary: #F2F2F7;
  --bg-elevated: #FFFFFF;
  --bg-input: #E9E9EB;
  --text: #000000;
  --text-secondary: #6E6E76;
  --separator: rgba(60,60,67,0.29);
  --blue: #7C6CF6;
  --blue-grad-1: #2FA1FF;
  --blue-grad-2: #0B6BFF;
  --green: #30D158;
  --red: #FF3B30;
  --gray-bubble: #EAF1FB;
  --tabbar-bg: rgba(249,249,249,0.85);
  --header-bg: rgba(255,255,255,0.85);
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;

  /* Comet brand accent */
  --comet-1: #6C5CE7;
  --comet-2: #9C8CFF;
  --comet-grad: linear-gradient(135deg, var(--comet-1), var(--comet-2));
  --comet-glow: rgba(124, 108, 246, 0.35);

  /* Liquid glass surfaces */
  --glass-bg: rgba(255,255,255,0.68);
  --glass-bg-strong: rgba(255,255,255,0.82);
  --glass-border: rgba(255,255,255,0.55);
  --glass-shine: rgba(255,255,255,0.75);
  --glass-shadow: 0 12px 40px rgba(0,0,0,0.14);
}

.dark {
  --bg: #000000;
  --bg-secondary: #0B0B0C;
  --bg-elevated: #1C1C1E;
  --bg-input: #1C1C1E;
  --text: #FFFFFF;
  --text-secondary: #98989F;
  --separator: rgba(84,84,88,0.6);
  --gray-bubble: #1B2430;
  --tabbar-bg: rgba(20,20,22,0.85);
  --header-bg: rgba(0,0,0,0.75);
  --glass-bg: rgba(40,40,46,0.6);
  --glass-bg-strong: rgba(44,44,50,0.78);
  --glass-border: rgba(255,255,255,0.1);
  --glass-shine: rgba(255,255,255,0.09);
  --glass-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

/* =========================================================
   TEMA COMET — oceano profondo. Sostituisce l'intera palette
   quando attivo; disattivandolo si torna a light/dark normali.
========================================================= */
.theme-comet {
  --bg: #051423;
  --bg-secondary: #0A1D30;
  --bg-elevated: #0D2338;
  --bg-input: #12293F;
  --text: #EAF6FF;
  --text-secondary: #7FA3BC;
  --separator: rgba(120,180,220,0.18);
  --blue: #21C7E8;
  --green: #2EE6A8;
  --red: #FF6B7A;
  --gray-bubble: #123049;
  --tabbar-bg: rgba(6,24,40,0.82);
  --header-bg: rgba(5,20,35,0.8);
  --comet-1: #16B7DD;
  --comet-2: #4FF0C8;
  --comet-glow: rgba(33, 199, 232, 0.4);
  --glass-bg: rgba(16,48,72,0.55);
  --glass-bg-strong: rgba(14,42,64,0.8);
  --glass-border: rgba(140,220,255,0.22);
  --glass-shine: rgba(180,235,255,0.16);
  --glass-shadow: 0 12px 40px rgba(0,10,20,0.6);
}
/* Fondale con correnti luminose che si muovono piano */
.theme-comet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 55% at 15% -5%, rgba(33,199,232,0.16), transparent 60%),
    radial-gradient(ellipse 75% 50% at 95% 105%, rgba(79,240,200,0.1), transparent 60%);
}
@keyframes waveCurrent {
  from { opacity: 0.65; transform: translateY(0); }
  to { opacity: 1; transform: translateY(-8px); }
}
.theme-comet.reduce-motion::before { animation: none; }
.theme-comet .large-title,
.theme-comet .conv-name,
.theme-comet .profile-name { text-shadow: 0 0 24px rgba(33,199,232,0.25); }
.theme-comet .title-logo { filter: drop-shadow(0 0 8px rgba(33,199,232,0.5)); }
.theme-comet .auth-brand-mark { filter: none; }
.theme-comet .footer-logo { filter: none; }


/* =========================================================
   TEMA REALISM — NERO TITANIO & VETRO LUCIDO
   Look premium: superfici in vetro nero lucido, cornice
   argento metallico riflettente con gradiente, glow blu
   elettrico SOLO nell'angolo in basso a sinistra, ombre
   ambientali morbide, riflessi interni. Raggi ampi (24–30px).
   Ispirato al design industriale Apple / titanio lucido.
========================================================= */
.theme-realism {
  --bg: #060708;
  --bg-secondary: #0b0d0f;
  --bg-elevated: #101316;
  --bg-input: #0e1114;
  --text: #f4f6f8;
  --text-secondary: #97a3ad;
  --separator: rgba(180,200,215,0.10);
  --blue: #2f7fff;
  --green: #34e0a8;
  --red: #ff5a6e;
  --gray-bubble: #0e1114;
  --tabbar-bg: rgba(8,10,12,0.7);
  --header-bg: rgba(6,8,10,0.72);
  --comet-1: #6db3ff;
  --comet-2: #2f7fff;
  --comet-grad: linear-gradient(135deg, #eef4fa, #aeb9c4 45%, #6f7c88);
  --comet-glow: rgba(47, 127, 255, 0.35);
  --glass-bg: rgba(16,20,24,0.62);
  --glass-bg-strong: rgba(12,15,18,0.82);
  --glass-border: rgba(190,205,220,0.18);
  --glass-shine: rgba(220,235,250,0.16);
  --glass-shadow: 0 16px 46px rgba(0,0,0,0.65);

  /* Materiali riutilizzabili del tema */
  --tit-surface: linear-gradient(158deg, #15191d 0%, #0c0f12 46%, #070203 100%);
  --tit-surface-soft: linear-gradient(158deg, #12161a, #0a0d10);
  /* Cornice argento: chiara in alto, scura in basso — riflesso metallico */
  --tit-edge: linear-gradient(150deg, #dfe8f0 0%, #9aa6b2 26%, #454e57 55%, #2b3138 100%);
  --tit-radius: 26px;
  /* Glow blu elettrico posizionato in basso a sinistra */
  --tit-glow: radial-gradient(circle 60px at 0% 100%, rgba(47,127,255,0.5), rgba(47,127,255,0.14) 45%, transparent 72%);
  --tit-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
  --tit-inner: inset 0 1px 0 rgba(230,240,255,0.14), inset 0 -1px 2px rgba(0,0,0,0.5);
}

/* Fondale ambientale: leggera luce fredda in alto, alone blu profondo in basso */
.theme-realism .frame-wrap,
.theme-realism.frame-wrap {
  background:
    radial-gradient(circle 560px at 82% -10%, #1a2026, transparent 58%),
    radial-gradient(circle 480px at 2% 112%, rgba(47,127,255,0.12), transparent 55%),
    #040506 !important;
}

/* ---------- MIXIN VISIVO: superficie titanio con cornice + glow ----------
   Applicato tramite ::before (cornice metallica cava) e ::after (glow blu). */
.theme-realism .glass-panel,
.theme-realism .settings-group,
.theme-realism .search-bar,
.theme-realism .text-field,
.theme-realism .bubble,
.theme-realism .admin-stat,
.theme-realism .admin-row,
.theme-realism .sheet,
.theme-realism .dialog-card,
.theme-realism .btn-primary,
.theme-realism .send-btn.enabled,
.theme-realism .dialog-ok:not(.danger),
.theme-realism .admin-tab.active {
  position: relative;
  background: var(--tit-surface);
  box-shadow: var(--tit-shadow), var(--tit-inner);
  isolation: isolate;
}
/* Cornice argento riflettente (bordo cavo tramite mask) */
.theme-realism .glass-panel::before,
.theme-realism .settings-group::before,
.theme-realism .search-bar::before,
.theme-realism .text-field::before,
.theme-realism .bubble::before,
.theme-realism .admin-stat::before,
.theme-realism .admin-row::before,
.theme-realism .sheet::before,
.theme-realism .dialog-card::before,
.theme-realism .btn-primary::before,
.theme-realism .send-btn.enabled::before,
.theme-realism .dialog-ok:not(.danger)::before,
.theme-realism .admin-tab.active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: var(--tit-edge);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
/* Glow blu elettrico SOLO angolo in basso a sinistra */
.theme-realism .glass-panel::after,
.theme-realism .settings-group::after,
.theme-realism .search-bar::after,
.theme-realism .text-field::after,
.theme-realism .bubble.me::after,
.theme-realism .admin-stat::after,
.theme-realism .sheet::after,
.theme-realism .dialog-card::after,
.theme-realism .btn-primary::after,
.theme-realism .send-btn.enabled::after,
.theme-realism .dialog-ok:not(.danger)::after,
.theme-realism .admin-tab.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--tit-glow);
  pointer-events: none;
  z-index: 1;
}

/* Raggi ampi premium sui contenitori */
.theme-realism .settings-group,
.theme-realism .sheet,
.theme-realism .dialog-card,
.theme-realism .admin-stat,
.theme-realism .admin-row { border-radius: var(--tit-radius); }
.theme-realism .search-bar,
.theme-realism .text-field { border-radius: 22px; }

/* ---------- BOLLE CHAT ---------- */
.theme-realism .bubble { border-radius: 22px; }
.theme-realism .bubble.me {
  background: linear-gradient(158deg, #1a2530, #0d1620 55%, #060b12);
}
.theme-realism .bubble.them {
  background: var(--tit-surface);
}
/* la coda delle bolle non serve la cornice extra */
.theme-realism .bubble::before { padding: 1.2px; }

/* ---------- CONTENUTO SOPRA GLI STRATI ---------- */
.theme-realism .btn-primary,
.theme-realism .dialog-ok:not(.danger),
.theme-realism .admin-tab.active { color: #eaf1f8; }
.theme-realism .send-btn.enabled svg,
.theme-realism .btn-primary,
.theme-realism .dialog-ok:not(.danger) { position: relative; z-index: 3; }

/* ---------- PULSANTI: vetro nero + cornice + glow ---------- */
.theme-realism .btn-primary,
.theme-realism .dialog-ok:not(.danger) { border-radius: 26px; }
.theme-realism .send-btn.enabled {
  background: linear-gradient(158deg, #1a1f24, #0b0e11) !important;
  border-radius: 50%;
}
.theme-realism .send-btn.enabled svg path { stroke: #dfe8f0; }

/* ---------- NAVBAR / TAB BAR: vetro nero lucido ---------- */
.theme-realism .tab-bar {
  background: linear-gradient(158deg, rgba(20,24,28,0.9), rgba(8,10,13,0.92)) !important;
  box-shadow: var(--tit-shadow), var(--tit-inner);
}
.theme-realism .tab-bar::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  padding: 1.4px; background: var(--tit-edge);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 0;
}
.theme-realism .tab-bar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--tit-glow); pointer-events: none; z-index: 0;
}
/* I pulsanti restano sopra cornice e glow */
.theme-realism .tab-btn { position: relative; z-index: 3; }
.theme-realism .tab-btn.active .tab-icon svg { filter: drop-shadow(0 0 7px rgba(47,127,255,0.55)); }

/* ---------- HEADER e superfici vetro ---------- */
.theme-realism .conv-header,
.theme-realism .admin-header {
  background: linear-gradient(180deg, rgba(16,20,24,0.82), rgba(8,10,13,0.8)) !important;
}

/* ---------- LOGHI ---------- */
.theme-realism .title-logo,
.theme-realism .auth-brand-mark { filter: drop-shadow(0 2px 8px rgba(47,127,255,0.3)); }
.theme-realism .footer-logo { filter: none; }

/* ---------- AVATAR: bordo titanio ---------- */
.theme-realism .avatar { box-shadow: 0 0 0 1px rgba(190,205,220,0.22), 0 4px 12px rgba(0,0,0,0.5); }

/* ---------- INPUT focus: glow blu più marcato in basso a sx ---------- */
.theme-realism .text-field:focus-within::after,
.theme-realism .search-bar:focus-within::after {
  background: radial-gradient(circle 70px at 0% 100%, rgba(47,127,255,0.6), rgba(47,127,255,0.16) 48%, transparent 74%);
}

/* Lo sfondo di html/body (visibile dietro notch e barra home) segue il tema.
   Le classi .dark / .theme-comet ora vengono applicate anche a <html>. */
html.dark, html.dark body { background: #000000; }
html.theme-comet, html.theme-comet body { background: #051423; }
html.theme-realism, html.theme-realism body { background: #040506; }

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Su mobile lo sfondo delle safe area (notch, barra home) segue il tema
   dell'app invece di restare nero: niente più bande scure ai bordi */
@media (max-width: 899px) {
  html, body {
    background: var(--bg);
    /* Dimensiona alla viewport VISIBILE tramite inset:0 (stabile e allineata
       ai tocchi). NIENTE height:100% / 100dvh: su iOS PWA il dvh è instabile
       all'avvio e faceva sfasare il layout rispetto al layer dei tocchi
       (touch più in basso del previsto) e comparire il blocco in fondo. */
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/* =========================================================
   PHONE FRAME (decorativo su desktop, full-bleed su mobile)
========================================================= */
.frame-wrap {
  height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, #2b2b35, #050506 70%);
}

.phone {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  transition: background .35s ease, color .35s ease;
}

/* Mobile: la cornice e lo schermo riempiono FISICAMENTE tutto il display,
   ancorati ai 4 bordi. Non dipendiamo da 100dvh (che iOS in modalità
   "aggiunta a Home" calcola più corto dello schermo, lasciando le bande nere) */
@media (max-width: 899px) {
  .frame-wrap {
    position: fixed;
    inset: 0;
    height: auto;
    display: block;
    /* Sfondo a tutto schermo con i glow Comet: copre FISICAMENTE l'intero
       display, safe area comprese, così non compare mai una striscia piatta
       ai bordi (né sopra né sotto). Segue il tema tramite le variabili CSS. */
    background:
      radial-gradient(130% 44% at 12% -3%, color-mix(in srgb, var(--comet-1) 22%, transparent), transparent 58%),
      radial-gradient(130% 46% at 92% 103%, color-mix(in srgb, var(--comet-2) 18%, transparent), transparent 58%),
      var(--bg) !important;
  }
  .phone {
    position: fixed;
    inset: 0;
    width: 100%;
    height: auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
    /* Trasparente: lascia vedere il gradiente a tutto schermo di .frame-wrap.
       I contenuti (righe chat, header, tab bar) hanno comunque il proprio sfondo. */
    background: transparent;
  }
  /* Gli orb glow interni sono ridondanti col gradiente full-screen: attenuali */
  .app::before, .app::after { opacity: 0.10 !important; }
}

/* Su schermi larghi (desktop) mostriamo una cornice iPhone decorativa */
@media (min-width: 620px) {
  .phone {
    width: 393px;
    height: 852px;
    border-radius: 55px;
    border: 12px solid #111;
    box-shadow:
      0 0 0 2px #2c2c2e,
      0 30px 80px rgba(0,0,0,0.6),
      0 10px 30px rgba(0,0,0,0.4);
  }
}

/* =========================================================
   AUTH — design a pillole (fornito dall'utente, adattato
   alle CSS variables dell'app per light/dark automatico)
========================================================= */
.auth-wrapper {
  position: absolute;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(54px + env(safe-area-inset-top, 0px)) 20px 20px;
  background: var(--bg);
  overflow: hidden;
}
.auth-wrapper::before,
.auth-wrapper::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  pointer-events: none;
}
.auth-wrapper::before {
  background: var(--comet-1);
  top: -120px;
  left: -110px;
  animation: blobDrift1 11s ease-in-out infinite alternate;
}
.auth-wrapper::after {
  background: var(--comet-2);
  bottom: -140px;
  right: -120px;
  animation: blobDrift2 13s ease-in-out infinite alternate;
}
@keyframes blobDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(45px, 35px) scale(1.15); }
}
@keyframes blobDrift2 {
  from { transform: translate(0, 0) scale(1.1); }
  to { transform: translate(-40px, -30px) scale(0.95); }
}
.reduce-motion .auth-wrapper::before,
.reduce-motion .auth-wrapper::after { animation: none; }
.auth-wrapper.hidden { display: none; }

.auth-wrapper { flex-direction: column; gap: 22px; }

.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 8px;
}
.auth-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.auth-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
}

.auth-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  height: 64px;
  animation: authBrandIn .6s cubic-bezier(.2,.9,.3,1);
}
.auth-brand-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, var(--comet-glow), transparent 70%);
  filter: blur(6px);
  animation: authGlowPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
.auth-brand-mark {
  position: relative;
  height: 40px;
  width: auto;
  transition: filter .3s ease;
  filter: drop-shadow(0 4px 14px var(--comet-glow));
}
.dark .auth-brand-mark { filter: drop-shadow(0 4px 14px var(--comet-glow)); }

@keyframes authBrandIn {
  0% { opacity: 0; transform: translateY(-14px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.12); }
}

.forms-wrapper {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 28px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-shine);
  animation: authCardIn .5s .05s cubic-bezier(.2,.9,.3,1) backwards;
}
@keyframes authCardIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.form { display: none; flex-direction: column; }
.form.active { display: flex; }
.form-inner { display: flex; flex-direction: column; gap: 12px; padding: 1.8rem 1.6rem 1.3rem; }

.auth-heading {
  text-align: center;
  margin: 0 0 0.4rem 0;
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 700;
}

.field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 14px;
  padding: 0.75rem 1.1rem;
  background-color: var(--bg-input);
  transition: background 0.2s, box-shadow 0.2s;
  position: relative;
}
.field:focus-within { box-shadow: 0 0 0 1.5px var(--blue); }

.input-icon { height: 1.2em; width: 1.2em; fill: var(--text-secondary); flex-shrink: 0; }
.input-field {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  color: var(--text);
  font-size: 0.95rem;
  font-family: var(--font);
}
.input-field::placeholder { color: var(--text-secondary); }

.username-status {
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}
.username-status.available { color: var(--green); }
.username-status.taken { color: var(--red); }
.username-status.checking { color: var(--text-secondary); }

.phone-group { display: flex; gap: 0.5rem; width: 100%; }
.phone-group .country-input {
  background: var(--bg);
  color: var(--text);
  border: none;
  outline: none;
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.85rem;
  width: 82px;
  flex-shrink: 0;
  text-align: center;
}
.phone-group .input-field { flex: 1; min-width: 0; }
input[list]::-webkit-calendar-picker-indicator { opacity: 0; width: 0; }

.conditional-field { display: none; }
.conditional-field.visible { display: flex; }

.choice-group { display: flex; gap: 1.6rem; justify-content: center; margin: 0.2rem 0 0.2rem; }
.choice-group label {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--text-secondary); font-size: 0.9rem; cursor: pointer;
  padding: 0.3rem 0.7rem; border-radius: 30px; user-select: none;
}
.choice-group input[type="radio"] { display: none; }
.choice-group .radio-custom {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--separator);
  display: inline-block; position: relative; flex-shrink: 0;
}
.choice-group input[type="radio"]:checked + .radio-custom {
  border-color: var(--comet-1);
  background: var(--comet-grad);
}
.choice-group input[type="radio"]:checked + .radio-custom::after {
  content: ''; width: 7px; height: 7px; background: #fff; border-radius: 50%;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.btn-group { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.4rem; }
.btn-primary {
  padding: 0.85rem;
  border: none;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s, filter 0.15s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; }

.form-error { color: var(--red); font-size: 13px; min-height: 4px; text-align: center; }

.link-bottom { text-align: center; margin-top: 0.3rem; color: var(--text-secondary); font-size: 0.88rem; }
.link-bottom a { color: var(--comet-1); font-weight: 600; cursor: pointer; }

.phone-field[hidden] { display: none !important; }

.username-hint { font-size: 12px; color: var(--text-secondary); }

/* =========================================================
   LOADER DI TRANSIZIONE TRA LE PAGINE
========================================================= */
.page-loader-overlay {
  position: absolute;
  inset: 0;
  z-index: 950;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.page-loader-overlay.visible { opacity: 0.97; pointer-events: auto; }
.page-loader-overlay[hidden] { display: none; }

/* Spinner semplice per i loader di transizione tra pagine */
.loader {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--separator);
  border-top-color: var(--comet-1);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   SPLASH DI AVVIO — essenziale (stile Signal)
   Nero pieno + logo Comet bianco al centro. Niente onde, bagliori o barre:
   il nero coincide con la status bar di iOS, così l'avvio è pulito e
   istantaneo, senza stacchi di colore.
========================================================= */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s ease;
}
.boot-splash.hiding { opacity: 0; pointer-events: none; }
.boot-splash[hidden] { display: none !important; }
/* Nessuna animazione: il logo deve comparire SUBITO col primo frame.
   Se ne avesse una, ripartirebbe nel momento in cui style.css viene
   applicato (dopo il primo disegno) facendo uno sfarfallio. */
.boot-splash-logo {
  width: 72%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(124, 108, 246, 0.55));
}

/* Loader legacy (usato altrove) — invariato */
.wave-loader {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3.5px solid rgba(255,255,255,0.14);
  border-top-color: var(--comet-1);
  border-right-color: var(--comet-2);
  animation: waveSpin .8s linear infinite;
}
@keyframes waveSpin { to { transform: rotate(360deg); } }

/* =========================================================
   LIQUID GLASS — superficie traslucida riutilizzabile
========================================================= */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-shine);
}

/* =========================================================
   RIDUCI ANIMAZIONI — spegne quelle decorative,
   mantiene le transizioni funzionali essenziali
========================================================= */
.reduce-motion .profile-banner,
.reduce-motion .about-logo-wrap,
.reduce-motion .auth-brand-glow,
.reduce-motion .profile-bio-bubble > span,
.reduce-motion .tab-btn.active .tab-icon svg,
.reduce-motion .tab-badge {
  animation: none !important;
}
.reduce-motion .bubble-row,
.reduce-motion .auth-brand,
.reduce-motion .forms-wrapper,
.reduce-motion .profile-bio-bubble {
  animation-duration: 0.01s !important;
  animation-delay: 0s !important;
}
.reduce-motion .conversation { transition-duration: .15s; }

/* =========================================================
   BOTTOM SHEET (selettore paese)
========================================================= */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.36);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 500;
  display: flex;
  align-items: flex-end;
}
.sheet-overlay[hidden] { display: none; }
.sheet {
  width: 100%;
  max-height: 80%;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -10px 44px rgba(0,0,0,0.2), inset 0 1px 0 var(--glass-shine);
  animation: sheetUp .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.sheet-handle {
  width: 36px; height: 5px;
  background: var(--separator);
  border-radius: 3px;
  margin: 10px auto 4px;
}
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}
.sheet-header h2 { font-size: 17px; font-weight: 700; }
.sheet-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.sheet-close:active { transform: scale(0.88); }
.sheet-search { margin: 4px 16px 8px; }
.sheet-list { overflow-y: auto; max-height: 50vh; padding-bottom: 12px; }

.about-sheet {
  align-items: center;
  padding: 8px 0 max(28px, env(safe-area-inset-bottom, 0px));
  position: relative;
}
.about-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
}
.about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 28px 4px;
}
.about-logo-wrap {
  width: 84px;
  height: 84px;
  border-radius: 26px;
  background: var(--comet-grad);
  background-size: 200% 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px var(--comet-glow);
  margin-bottom: 18px;
}.about-logo {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
.about-slogan {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: var(--comet-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.about-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 280px;
}
.about-security-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}
.about-divider {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--separator);
  margin: 20px 0 14px;
}
.about-brand {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* =========================================================
   PRIVACY E SICUREZZA
========================================================= */
.sheet-scroll {
  overflow-y: auto;
  padding: 4px 16px max(20px, env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
.privacy-section-label {
  margin: 16px 2px 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.privacy-group {
  background: var(--bg-input);
  border-radius: 14px;
  overflow: hidden;
}
.privacy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  position: relative;
}
.privacy-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px; right: 0; bottom: 0;
  height: 1px;
  background: var(--separator);
}
.privacy-key { font-size: 15px; font-weight: 600; width: 82px; flex-shrink: 0; }
.privacy-value {
  flex: 1;
  font-size: 15px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.lock-mini { color: var(--text-secondary); flex-shrink: 0; opacity: 0.7; }
.privacy-hint {
  padding: 8px 14px 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  animation: hintIn .25s ease;
}
@keyframes hintIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.privacy-hint[hidden] { display: none; }

.eye-btn {
  width: 32px; height: 32px;
  border: none;
  background: none;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  transition: transform .15s ease, color .15s ease, background .15s ease;
}
.eye-btn:active { transform: scale(0.85); }
.eye-btn.on { color: var(--comet-1); background: var(--comet-glow); }

.privacy-form {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.privacy-form input {
  width: 100%;
  border: none;
  outline: none;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 15px;
  font-family: var(--font);
  padding: 11px 14px;
  border-radius: 12px;
  transition: box-shadow .15s ease;
}
.privacy-form input:focus { box-shadow: 0 0 0 1.5px var(--comet-1); }
.privacy-form input::placeholder { color: var(--text-secondary); }
.pw-field { position: relative; display: flex; align-items: center; }
.pw-field input { flex: 1; padding-right: 44px; }
.pw-field .eye-btn { position: absolute; right: 6px; }
.form-success { color: var(--green); font-size: 13px; text-align: center; min-height: 4px; }
.phone-connect-row { display: flex; gap: 8px; }
.phone-connect-row #connectPhonePrefix { width: 76px; flex-shrink: 0; text-align: center; }
.phone-connect-row #connectPhoneNumber { flex: 1; min-width: 0; }

/* =========================================================
   RIGA TEMA COMET (impostazioni)
========================================================= */
.theme-comet-icon {
  background: linear-gradient(135deg, #16B7DD, #4FF0C8);
}
.theme-row-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.theme-row-text .settings-label { flex: none; }
.theme-row-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.3; }

.country-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
}
.country-row:active { background: var(--bg-secondary); }
.country-row-name { font-size: 15px; }
.country-row-code { font-size: 15px; color: var(--text-secondary); }

/* =========================================================
   RICERCA UTENTI (nuovo messaggio)
========================================================= */
.user-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
}
.user-result-row:active { background: var(--bg-secondary); }
.user-result-name { font-size: 16px; font-weight: 600; }
.user-result-username { font-size: 13.5px; color: var(--text-secondary); }

.logout-row { width: 100%; border: none; background: none; cursor: pointer; }
.logout-label { color: var(--red); font-weight: 500; text-align: center; width: 100%; }

/* =========================================================
   GRUPPI: chip membri selezionati + barra creazione
========================================================= */
.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 0;
}
.chips-row[hidden] { display: none; }
.member-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border-radius: 16px;
  padding: 5px 10px 5px 6px;
  font-size: 13px;
}
.member-chip .avatar { width: 20px; height: 20px; font-size: 9px; }
.member-chip-remove {
  background: none; border: none; color: var(--text-secondary);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px;
}

.user-result-row.selectable { justify-content: space-between; }
.user-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--separator);
  flex-shrink: 0;
}
.user-check.checked {
  background: var(--blue);
  border-color: var(--blue);
  position: relative;
}
.user-check.checked::after {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.group-create-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--separator);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.group-create-bar[hidden] { display: none; }
.group-create-bar input {
  background: var(--bg-input);
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 15px;
  color: var(--text);
  outline: none;
}

/* =========================================================
   FORM NEI BOTTOM SHEET (community, profilo)
========================================================= */
.sheet-form {
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sheet-form input, .sheet-form textarea {
  background: var(--bg-input);
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text);
  outline: none;
  font-family: var(--font);
  resize: none;
}
.sheet-form input::placeholder, .sheet-form textarea::placeholder { color: var(--text-secondary); }

.color-swatch-row {
  display: flex;
  gap: 10px;
  padding: 2px 0 4px;
}
.color-swatch {
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}
.color-swatch.selected {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg);
}

.profile-edit-hint {
  font-size: 12.5px;
  color: var(--blue);
  margin-top: 6px;
}

.avatar-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
}
.avatar-picker .avatar-xl {
  background-size: cover;
  background-position: center;
}
.avatar-picker-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.username-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 12px 14px;
}
.username-field-row input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 15px;
  color: var(--text);
  font-family: var(--font);
}

/* =========================================================
   COMMUNITY: stato iscrizione
========================================================= */
.community-join-btn {
  background: var(--bg-input);
  color: var(--blue);
  border: none;
  border-radius: 14px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.community-join-btn.joined {
  background: transparent;
  color: var(--text-secondary);
}
.community-member-count {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* mute */
.mute-icon {
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-left: 4px;
}

/* =========================================================
   INFO CHAT (profilo persona / gruppo)
========================================================= */
.info-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 20px 8px;
}
.info-name { font-size: 20px; font-weight: 700; margin-top: 10px; }
.info-sub { font-size: 13.5px; color: var(--text-secondary); margin-top: 2px; }
.info-status { font-size: 14px; color: var(--text); margin-top: 8px; }

/* =========================================================
   STATUS BAR
========================================================= */
.status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  padding: 0 28px;
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  z-index: 400;
  pointer-events: none;
}
.sb-icons { display: flex; align-items: center; gap: 5px; color: var(--text); }
.sb-signal, .sb-wifi, .sb-battery { fill: currentColor; }

/* =========================================================
   APP CONTAINER
========================================================= */
.app {
  position: absolute;
  inset: 0;
  padding-top: calc(54px + env(safe-area-inset-top, 0px));
}
/* Sfere sfumate come nella schermata di accesso, ma più discrete
   per non disturbare la lettura dei contenuti */
.app::before,
.app::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(85px);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.app::before {
  background: var(--comet-1);
  top: -110px;
  left: -100px;
}
.app::after {
  background: var(--comet-2);
  bottom: -120px;
  right: -110px;
}
.dark .app::before, .dark .app::after { opacity: 0.22; }
.theme-comet .app::before, .theme-comet .app::after { opacity: 0.26; }
.reduce-motion .app::before, .reduce-motion .app::after { animation: none; }

.screen {
  position: absolute;
  inset: 0;
  top: calc(54px + env(safe-area-inset-top, 0px));
  bottom: 0;
  overflow-y: auto;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.995);
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.9,.3,1);
  -webkit-overflow-scrolling: touch;
  will-change: opacity, transform;
}
.screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* =========================================================
   NAV HEADER / LARGE TITLE
========================================================= */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px 0;
}
.large-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 2px 0 10px;
  margin: 0;
  flex: 1;
}
.large-title-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 12px;
}
.title-logo {
  height: 56px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 14px rgba(124, 108, 246, 0.55));
  transition: filter .3s ease;
  background: rgba(0, 0, 0, 0.55);
  padding: 8px 16px;
  border-radius: 14px;
}
.dark .title-logo { filter: drop-shadow(0 0 14px rgba(124, 108, 246, 0.55)); }
.nav-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 17px;
  padding: 6px 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.nav-btn.compose { color: var(--comet-1); transition: transform .15s ease, color .15s ease; }
.nav-btn.compose:active { transform: scale(0.85) rotate(-8deg); }
.nav-btn-spacer { width: 40px; }

/* =========================================================
   SEARCH BAR
========================================================= */
.search-bar {
  margin: 0 16px 10px;
  background: var(--bg-input);
  border-radius: 11px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  transition: box-shadow .2s ease;
}
.search-bar:focus-within { box-shadow: 0 0 0 1.5px var(--comet-1), 0 2px 12px var(--comet-glow); }
.search-bar input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  color: var(--text);
  width: 100%;
}
.search-bar input::placeholder { color: var(--text-secondary); }

/* =========================================================
   SEGMENTED CONTROL
========================================================= */
.segmented {
  margin: 4px 16px 14px;
  background: var(--bg-input);
  border-radius: 9px;
  display: flex;
  padding: 2px;
}
.seg-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border-radius: 7px;
  cursor: pointer;
  transition: background .2s ease, transform .15s cubic-bezier(.3,1.4,.5,1), box-shadow .2s ease;
}
.seg-btn:active { transform: scale(0.96); }
.seg-btn.active {
  background: var(--bg-elevated);
  box-shadow: 0 1px 4px rgba(0,0,0,0.16);
}

/* =========================================================
   LISTS (chat / community / calls)
========================================================= */
.list { padding-bottom: 20px; }

/* =========================================================
   CONTACTS
========================================================= */
.contact-row-wrap {
  margin-bottom: 2px;
}
.contact-row {
  align-items: center;
  min-height: 64px;
}
.contact-row .row-avatar-wrap {
  width: 48px;
  height: 48px;
  margin-right: 12px;
}
.contact-row .row-avatar-wrap .avatar {
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.contact-row .row-name {
  font-size: 16px;
  font-weight: 600;
}
.contact-row .row-sub {
  margin-top: 2px;
}
.contact-status {
  font-size: 13px;
  color: var(--text-secondary);
}
.contact-status.online {
  color: var(--green);
}
.contact-row .presence-badge {
  width: 12px;
  height: 12px;
  border: 2px solid var(--bg);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 36px 40px;
  animation: emptyIn .4s cubic-bezier(.2,.9,.3,1);
}
.empty-state-icon,
.empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--comet-glow);
  color: var(--comet-1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.empty-icon svg { width: 32px; height: 32px; }
.empty-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.empty-sub { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; max-width: 240px; }
.empty-state-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.empty-state-sub { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; max-width: 240px; }
@keyframes emptyIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.reduce-motion .empty-state { animation: none; }

.row-wrap {
  position: relative;
  overflow: hidden;
}
.row-wrap.row-collapsing {
  transition: height .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  opacity: 0;
}
.row-actions {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
}
.row-action {
  width: 76px;
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s ease;
}
.row-action:active { filter: brightness(0.85); }
.row-action.mute { background: #FF9F0A; }
.row-action.delete { background: var(--red); }
.row-action-loading { pointer-events: none; }

.btn-spinner {
  width: 17px;
  height: 17px;
  border: 2.2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.row {
  position: relative;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.2,.9,.3,1), background .15s ease;
  touch-action: pan-y;
}
.row .avatar { width: 56px; height: 56px; }
/* Riga con messaggi non letti: nome in grassetto, anteprima marcata,
   sottile barra d'accento a sinistra */
/* Sfondo OPACO: il velo colorato sta sopra il fondo pieno, così i pulsanti
   Silenzia/Elimina (nascosti dietro la riga) non traspaiono mai */
.row-unread { background: linear-gradient(90deg, var(--comet-glow), rgba(0,0,0,0) 60%), var(--bg); }
.row-unread::before {
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 32px;
  border-radius: 0 3px 3px 0;
  background: var(--comet-grad);
}
.row-unread .row-name { font-weight: 800; }
.row-unread .row-preview { color: var(--text); font-weight: 600; }
/* Entrata scaglionata solo alla prima renderizzazione della lista,
   per non far "lampeggiare" le righe a ogni aggiornamento */
.list.first-render .row { animation: rowIn .35s cubic-bezier(.2,.9,.3,1) backwards; }
.list.first-render .row-wrap:nth-child(1) .row { animation-delay: .02s; }
.list.first-render .row-wrap:nth-child(2) .row { animation-delay: .05s; }
.list.first-render .row-wrap:nth-child(3) .row { animation-delay: .08s; }
.list.first-render .row-wrap:nth-child(4) .row { animation-delay: .11s; }
.list.first-render .row-wrap:nth-child(5) .row { animation-delay: .14s; }
.list.first-render .row-wrap:nth-child(6) .row { animation-delay: .17s; }
.list.first-render .row-wrap:nth-child(n+7) .row { animation-delay: .2s; }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.reduce-motion .list.first-render .row { animation: none; }
.row:active { background: var(--bg-secondary); }
.row-wrap:not(:last-child) .row::after {
  content: "";
  position: absolute;
  left: 85px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--separator);
}

.row-text { flex: 1; min-width: 0; }
.row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.row-name { font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-time { font-size: 13px; color: var(--text-secondary); white-space: nowrap; font-weight: 500; }
.row-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.row-preview { font-size: 14.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.row-preview.typing { color: var(--green); font-style: normal; }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--comet-grad); flex-shrink: 0; box-shadow: 0 0 6px var(--comet-glow); }
.unread-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--comet-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px var(--comet-glow);
}

/* Community rows */
.community-desc { font-size: 13px; color: var(--text-secondary); margin-top: 1px; }

/* Calls rows */
.call-type { display: flex; align-items: center; gap: 4px; font-size: 14.5px; }
.call-type.missed { color: var(--red); }
.call-type.missed .row-name { color: var(--red); }
.call-icon { flex-shrink: 0; }
.call-btn {
  background: none; border: none; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}

/* =========================================================
   AVATARS
========================================================= */
.avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.avatar-sm { width: 34px; height: 34px; font-size: 13px; }
.row .avatar { width: 50px; height: 50px; font-size: 18px; }
.avatar-xl { width: 96px; height: 96px; font-size: 34px; margin: 0 auto 12px; }

.online-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--green);
  border: 2.5px solid var(--bg);
}

.grad-1 { background: linear-gradient(135deg, #7C6CFB, #3FD0F2); }
.grad-2 { background: linear-gradient(135deg, #FF9F6E, #FF5F7E); }
.grad-3 { background: linear-gradient(135deg, #37D67A, #1FA5A0); }
.grad-4 { background: linear-gradient(135deg, #A78BFA, #F472B6); }
.grad-5 { background: linear-gradient(135deg, #60A5FA, #34D399); }
.grad-6 { background: linear-gradient(135deg, #FFD166, #FF8C42); }
.grad-7 { background: linear-gradient(135deg, #64748B, #334155); }

/* =========================================================
   PROFILE
========================================================= */
.profile-banner {
  height: 108px;
  margin: 0 16px;
  border-radius: 20px;
  background: var(--comet-grad);
  background-size: 200% 200%;
  position: relative;
  overflow: hidden;
}
.profile-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.25), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.18), transparent 40%);
}
.banner-edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform .15s ease, background .15s ease;
}
.banner-edit-btn:active { transform: scale(0.88); background: rgba(0,0,0,0.4); }
@keyframes bannerDrift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.banner-swatch-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 6px 2px 4px;
}
.banner-swatch {
  height: 52px;
  border-radius: 14px;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  transition: transform .15s ease, border-color .15s ease;
}
.banner-swatch:active { transform: scale(0.94); }
.banner-swatch.selected { border-color: var(--text); }
.banner-swatch.selected::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--bg-elevated) inset;
}
.profile-card { text-align: center; padding: 0 20px 24px; margin-top: -52px; }
.avatar-wrap { position: relative; width: 96px; margin: 0 auto 12px; }
.avatar-wrap .avatar-xl { margin: 0; }
.profile-card .avatar-xl { border: 4px solid var(--bg); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.profile-name { font-size: 22px; font-weight: 700; margin-top: 4px; }
.profile-status { font-size: 14px; color: var(--text-secondary); margin-top: 3px; }
.profile-pronouns {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--comet-1);
  background: var(--comet-glow);
  padding: 3px 11px;
  border-radius: 10px;
  margin-top: 8px;
}
.profile-pronouns[hidden] { display: none; }

/* Nuvoletta nota — stile Instagram, adattato ai colori Comet */
.note-bubble {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--comet-grad);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 4px 16px 4px 12px;
  border-radius: 30px;
  white-space: nowrap;
  box-shadow: 0 4px 14px var(--comet-glow);
  line-height: 1.5;
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: notePop .3s cubic-bezier(.25,1.2,.35,1) .15s backwards;
}
/* Coda: quadratino ruotato, come la nota IG */
.note-bubble::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  margin-left: -7px;
  width: 14px;
  height: 14px;
  background: var(--comet-1);
  border-radius: 2px 0 0 0;
  transform: rotate(45deg);
  box-shadow: -2px 2px 6px rgba(0,0,0,0.08);
}
.note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.note-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.note-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.note-text.placeholder { opacity: 0.85; font-weight: 400; }
.note-bubble.pop { animation: notePop .2s ease; }
@keyframes notePop {
  0% { transform: translateX(-50%) scale(0.92); opacity: 0; }
  40% { transform: translateX(-50%) scale(1.04); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
.reduce-motion .note-bubble { animation: none; }

.settings-section-title {
  margin: 22px 16px 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.settings-value { color: var(--text-secondary); font-size: 15px; }
.settings-hint {
  padding: 2px 14px 12px 55px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: visible;
}
.settings-hint:empty { display: none; }

.app-footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 28px 0 8px;
  opacity: 0.45;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.footer-logo { height: 14px; width: auto; }
.dark .footer-logo { filter: none; }

.settings-group {
  margin: 0 16px 20px;
  background: var(--bg-elevated);
  border-radius: 14px;
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  position: relative;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font);
  transition: background .15s ease;
}
button.settings-row:active { background: var(--bg-secondary); }
.settings-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50px; right: 0; bottom: 0;
  height: 1px;
  background: var(--separator);
}
/* Se la riga è seguita da un testo di aiuto, la linea non deve
   tagliare il testo: la togliamo dalla riga e la mettiamo dopo l'aiuto */
.settings-row:has(+ .settings-hint)::after { display: none; }
.settings-hint {
  position: relative;
}
.settings-hint:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50px; right: 0; bottom: 0;
  height: 1px;
  background: var(--separator);
}
.settings-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--bg-input);
  color: var(--text-secondary);
}
.settings-icon svg {
  width: 18px;
  height: 18px;
}
.ig-icon svg {
  width: 22px;
  height: 22px;
}
.bg-gray, .bg-purple, .bg-green, .bg-red, .bg-orange { background: var(--bg-input); color: var(--text-secondary); }
.bg-blue { background: var(--blue); color: #fff; }
.bg-red { background: rgba(255, 59, 48, 0.15); color: #ff453a; }
.bg-orange { background: rgba(255, 149, 0, 0.15); color: #ff9500; }
.bg-green { background: rgba(48, 209, 88, 0.15); color: #30d158; }
.bg-purple { background: rgba(175, 82, 222, 0.15); color: #af52de; }
.settings-label { flex: 1; font-size: 16px; }
.chev { color: var(--text-secondary); }

.ios-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.ios-switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0;
  background: rgba(120,120,130,0.35);
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 22px;
  transition: background .2s ease, border-color .2s ease;
  cursor: pointer;
}
.switch-track::before {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: transform .2s ease;
}
.ios-switch input:checked + .switch-track { background: var(--green); border-color: var(--green); }
.ios-switch input:checked + .switch-track::before { transform: translateX(18px); }

/* =========================================================
   TAB BAR
========================================================= */
/* Barra fissa nera attaccata al fondo dello schermo,
   senza effetti glass, senza indicatori animati */
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: 0;
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.08);
  display: flex;
  align-items: stretch;
  padding: 0 8px;
  z-index: 80;
  overflow: hidden;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .2s ease;
}

/* Bagliore liquido disabilitato per navbar fissa nera */
.liquid-glow { display: none; }

/* Indicatore disabilitato per navbar fissa nera */
.nav-indicator { display: none; }
.tab-btn {
  flex: 1;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: color .15s ease, transform .15s ease;
}
.tab-btn { z-index: 2; }
.tab-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 32px;
  transform: scale(0.92);
  transition: transform .25s cubic-bezier(.3,1.4,.5,1);
}
.tab-icon svg { width: 26px; height: 24px; transition: filter .2s ease; }
.tab-btn.active .tab-icon { transform: scale(1); }
.tab-btn.active .tab-icon svg { filter: drop-shadow(0 0 6px var(--comet-glow)); }
.tab-btn:active { transform: scale(0.94); }
.tab-btn.active { color: var(--comet-1); }
.tab-btn.active .tab-icon svg { animation: tabPop .3s cubic-bezier(.3,1.5,.5,1); }
@keyframes tabPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.tab-badge {
  position: absolute;
  top: -3px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--comet-grad);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px var(--comet-glow);
  animation: tabPop .3s cubic-bezier(.3,1.5,.5,1);
}
.tab-badge-red { background: var(--red); box-shadow: 0 2px 6px rgba(255,59,48,0.4); }

/* =========================================================
   CONVERSATION (push view)
========================================================= */
.conversation {
  position: absolute;
  inset: 0;
  padding-top: calc(54px + env(safe-area-inset-top, 0px));
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,.9,.3,1);
  z-index: 200;
}
.conversation.open { transform: translateX(0); }

.conv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
}
.conv-back {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--comet-1);
  font-size: 17px;
  padding: 6px;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.conv-back:active { transform: translateX(-2px) scale(0.96); opacity: 0.75; }
.conv-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.conv-name { font-size: 12.5px; font-weight: 600; }
.conv-actions { display: flex; gap: 14px; padding-right: 8px; }
.icon-btn { background: none; border: none; color: var(--blue); cursor: pointer; }

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 10px;
  -webkit-overflow-scrolling: touch;
}
.day-divider {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 10px 0 14px;
}

.bubble-row { display: flex; margin-bottom: 3px; animation: bubbleIn .25s ease; }
.bubble-sender {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--comet-1);
  margin: 8px 0 2px 14px;
}
.bubble-row.me { justify-content: flex-end; }
.bubble-row.them { justify-content: flex-start; }

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.bubble {
  max-width: 74%;
  padding: 9px 14px;
  font-size: 16.5px;
  line-height: 1.32;
  border-radius: 19px;
  position: relative;
  word-wrap: break-word;
  /* Impedisce la selezione testo e il menu iOS (Copia/Cerca/Traduci)
     durante la pressione prolungata */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* i link e i media restano selezionabili/interattivi */
.bubble a, .bubble .bubble-file { -webkit-user-select: auto; user-select: auto; -webkit-touch-callout: default; }
.bubble.me {
  background: var(--comet-grad);
  color: #fff;
  border-bottom-right-radius: 20px;
  box-shadow: 0 3px 10px var(--comet-glow);
  border: 1.5px solid rgba(255,255,255,0.35);
}
.bubble.them {
  background: var(--gray-bubble);
  color: var(--text);
  border-bottom-left-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.22);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.msg-time {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  margin: 3px 0 8px;
}

.typing-bubble {
  background: var(--gray-bubble);
  border-radius: 20px;
  border-bottom-left-radius: 5px;
  padding: 11px 16px;
  display: inline-flex;
  gap: 4px;
  width: fit-content;
}
.typing-bubble span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-secondary);
  animation: bounceDot 1.2s infinite ease-in-out;
}
.typing-bubble span:nth-child(2) { animation-delay: .15s; }
.typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes bounceDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* =========================================================
   INPUT BAR
========================================================= */
.input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--separator);
  flex-shrink: 0;
}
/* Margine di sicurezza su schermi stretti (es. Android budget): meno gap/padding
   per lasciare più spazio al campo di testo prima che qualsiasi cosa traballi */
@media (max-width: 380px) {
  .input-bar { gap: 5px; padding-left: 7px; padding-right: 7px; }
}
.round-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.text-field {
  flex: 1;
  min-width: 0; /* consente al campo di restringersi invece di far traboccare la input-bar
                   (senza questo, su schermi stretti mic/invio finiscono fuori dallo
                   schermo e vengono tagliati dagli antenati con overflow:hidden) */
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--separator);
  border-radius: 18px;
  padding: 5px 6px 5px 14px;
  min-height: 34px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.text-field:focus-within { border-color: var(--comet-1); box-shadow: 0 0 10px var(--comet-glow); }
.text-field input {
  flex: 1;
  min-width: 0; /* idem: l'input non deve imporre una larghezza minima intrinseca */
  border: none;
  background: transparent;
  outline: none;
  font-size: 16.5px;
  color: var(--text);
}
.text-field input::placeholder { color: var(--text-secondary); }
.camera-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; }

.send-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--comet-grad);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.35;
  transform: scale(0.85);
  transition: opacity .2s ease, transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s ease;
}
.send-btn.enabled {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 2px 10px var(--comet-glow);
}
.send-btn:active { transform: scale(0.88); }

/* =========================================================
   SCROLLBARS
========================================================= */
::-webkit-scrollbar { width: 0; height: 0; }

/* =========================================================
   DIALOGO COMET — sostituisce confirm()/alert() nativi
========================================================= */
.dialog-overlay {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: dialogFade .2s ease;
}
.dialog-overlay[hidden] { display: none; }
@keyframes dialogFade { from { opacity: 0; } to { opacity: 1; } }

.dialog-card {
  width: 100%;
  max-width: 300px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35), inset 0 1px 0 var(--glass-shine);
  padding: 24px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: dialogPop .32s cubic-bezier(.25,1.3,.4,1);
}
@keyframes dialogPop {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.reduce-motion .dialog-card { animation: none; }

.dialog-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: #fff;
}
.dialog-icon.di-danger { background: linear-gradient(135deg, #FF6B6B, #E23A55); box-shadow: 0 6px 18px rgba(255,80,90,0.4); }
.dialog-icon.di-brand { background: var(--comet-grad); box-shadow: 0 6px 18px var(--comet-glow); }
.dialog-icon.di-info { background: linear-gradient(135deg, #8E8E93, #5B5B60); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

.dialog-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; color: var(--text); }
.dialog-msg { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 18px; white-space: pre-line; }

.dialog-actions { display: flex; gap: 10px; width: 100%; }
.dialog-btn {
  flex: 1;
  border: none;
  border-radius: 30px;
  padding: 11px 0;
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: transform .15s cubic-bezier(.3,1.4,.5,1), filter .15s ease;
}
.dialog-btn:active { transform: scale(0.95); filter: brightness(0.92); }
.dialog-cancel { background: var(--bg-input); color: var(--text); }
.dialog-ok { background: var(--comet-grad); color: #fff; box-shadow: 0 4px 14px var(--comet-glow); }
.dialog-ok.danger { background: linear-gradient(135deg, #FF6B6B, #E23A55); box-shadow: 0 4px 14px rgba(255,80,90,0.4); }
.dialog-cancel[hidden] { display: none; }

/* =========================================================
   ALLEGATI — foto e file nelle chat
========================================================= */
.attach-btn {
  width: 34px; height: 34px;
  border: none;
  background: none;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  transition: transform .15s cubic-bezier(.3,1.4,.5,1), color .15s ease;
}
.attach-btn:active { transform: scale(0.85) rotate(-10deg); color: var(--comet-1); }

.pending-attachment[hidden] { display: none; }
.pending-file-icon[hidden] { display: none; }
.pending-thumb[hidden] { display: none; }
.privacy-row[hidden] { display: none; }
/* Rete di sicurezza: hidden vince sempre, anche su classi con display esplicito */
[hidden] { display: none !important; }
.pending-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 6px;
  padding: 8px 10px;
  border-radius: 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15), inset 0 1px 0 var(--glass-shine);
  animation: pendingIn .25s cubic-bezier(.25,1.2,.35,1);
}
@keyframes pendingIn {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.pending-thumb {
  width: 44px; height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.pending-file-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--comet-glow);
  color: var(--comet-1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pending-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pending-remove {
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.pending-remove:active { transform: scale(0.85); }

.bubble.has-image { padding: 4px; overflow: hidden; }
.bubble.has-image .bubble-text { padding: 5px 10px 6px; }
.bubble-img-link { display: block; line-height: 0; }
.bubble-img {
  max-width: 100%;
  max-height: 280px;
  border-radius: 15px;
  display: block;
  object-fit: cover;
}
.bubble-file {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  padding: 2px 0;
  max-width: 100%;
}
.bubble.them .bubble-file-icon { background: var(--comet-glow); color: var(--comet-1); }
.bubble-file-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bubble-file-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.send-btn.sending { pointer-events: none; animation: sendPulse 1s ease-in-out infinite; }
@keyframes sendPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}



/* =========================================================
   INFO CHAT — card profilo e gestione membri
========================================================= */
.info-banner {
  height: 152px;
  margin: 12px 16px 0;
  border-radius: 28px;
  background: var(--comet-grad);
  background-size: 200% 200%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.3);
}
.info-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.4), transparent 46%),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,0.22), transparent 42%),
    radial-gradient(circle at 70% 92%, rgba(0,0,0,0.14), transparent 50%),
    linear-gradient(180deg, transparent 52%, rgba(0,0,0,0.16));
}
.reduce-motion .info-banner { animation: none; }

.info-hero {
  text-align: center;
  margin-top: -58px;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}
.info-hero .avatar-xl {
  border: 4px solid var(--bg);
  box-shadow: 0 14px 32px rgba(0,0,0,0.35), 0 0 0 1px var(--glass-border);
  width: 110px; height: 110px;
}
.info-hero .avatar-wrap { margin: 0 auto 14px; }
.info-hero .info-name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }

.info-sub-pill, .info-username-pill {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--comet-glow);
  color: var(--comet-1);
  box-shadow: inset 0 0 0 1px rgba(124,108,246,0.16);
}
/* Riga azioni rapide nella card profilo 1:1 */
.info-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 22px 20px 4px;
}
.info-action-btn {
  flex: 1;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: none;
  border-radius: 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  color: var(--comet-1);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 4px 14px rgba(0,0,0,0.12);
  transition: transform .15s cubic-bezier(.3,1.4,.5,1), background .15s ease, box-shadow .15s ease;
}
.info-action-btn svg {
  width: 24px; height: 24px;
  padding: 8px;
  box-sizing: content-box;
  background: var(--comet-glow);
  border-radius: 50%;
}
.info-action-btn:active { transform: scale(0.95); }
.info-action-btn:hover { background: var(--bg-input); box-shadow: inset 0 1px 0 var(--glass-shine), 0 6px 18px rgba(0,0,0,0.16); }

.info-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.presence-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
  opacity: 0.5;
}
.info-presence.online { color: var(--green); }
.info-presence.online .presence-dot {
  background: var(--green);
  opacity: 1;
  box-shadow: 0 0 8px var(--green);
  animation: presencePulse 2.4s ease-in-out infinite;
}
@keyframes presencePulse {
  0%, 100% { box-shadow: 0 0 4px var(--green); }
  50% { box-shadow: 0 0 10px var(--green); }
}
.reduce-motion .info-presence.online .presence-dot { animation: none; }

.member-row { padding: 10px 14px; }
.member-me { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.member-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 9px;
  vertical-align: 1px;
  margin-left: 4px;
}
.badge-owner { background: var(--comet-grad); color: #fff; box-shadow: 0 2px 8px var(--comet-glow); }
.badge-admin { background: var(--comet-glow); color: var(--comet-1); }

.member-actions { display: flex; gap: 6px; flex-shrink: 0; }
.member-action {
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--comet-1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.3,1.4,.5,1), background .15s ease;
}
.member-action:active { transform: scale(0.85); }
.member-kick { color: var(--red); }

/* =========================================================
   VISUALIZZATORE FOTO E VIDEO NELLE BOLLE
========================================================= */
.bubble-img { cursor: pointer; }
.bubble-video {
  max-width: 100%;
  max-height: 300px;
  border-radius: 15px;
  display: block;
  background: #000;
}

.photo-viewer {
  position: absolute;
  inset: 0;
  z-index: 700;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dialogFade .2s ease;
}
.photo-viewer[hidden] { display: none; }
.photo-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: viewerZoom .28s cubic-bezier(.25,1.15,.35,1);
}
@keyframes viewerZoom {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.reduce-motion .photo-viewer-img { animation: none; }

.photo-viewer-top {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
.viewer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 22px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: transform .15s cubic-bezier(.3,1.4,.5,1), background .15s ease;
}
.viewer-btn:active { transform: scale(0.92); }
.viewer-save { background: var(--comet-grad); border: none; box-shadow: 0 4px 16px var(--comet-glow); }
.viewer-btn:disabled { opacity: 0.6; pointer-events: none; }

/* =========================================================
   DESKTOP (≥900px) — layout a due pannelli stile web app:
   lista chat a sinistra, conversazione a destra.
   Sotto i 900px non cambia nulla: telefono e tablet restano identici.
========================================================= */
.desktop-placeholder { display: none; }

/* =========================================================
   DESKTOP (≥900px) — layout a due pannelli semplice e pulito:
   barra laterale stretta con le icone + lista + conversazione.
   Sotto i 900px non cambia nulla.
========================================================= */
.desktop-placeholder { display: none; }
.desktop-rail { display: none; }

@media (min-width: 900px) {
  :root { --rail: 72px; --list: 340px; }

  /* App a tutto schermo, niente cornice telefono */
  .frame-wrap { background: var(--bg); display: block; }
  .phone {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .status-bar { display: none; }
  .app { padding-top: 0; }
  .app::before, .app::after { display: none; } /* niente orbs sul desktop */

  /* ---- Barra laterale stretta con le icone (sostituisce la navbar mobile) ---- */
  .tab-bar {
    left: 0;
    transform: none;
    top: 0;
    bottom: 0;
    width: var(--rail);
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    padding: 18px 0;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--separator);
    background: var(--bg-secondary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow: visible;
    z-index: 120;
  }
  .tab-bar::before, .tab-bar::after { display: none; } /* niente riflesso/rumore */
  .tab-bar .liquid-glow, .tab-bar .nav-indicator { display: none; }
  .tab-btn {
    flex: none;
    width: 100%;
    height: 58px;
    gap: 3px;
    border-radius: 0;
    color: var(--text-secondary);
    transition: color .15s ease;
  }
  .tab-btn span:last-child { font-size: 10px; }
  .tab-btn.active { color: var(--comet-1); }
  .tab-btn .tab-icon { width: 30px; height: 26px; transform: none; }
  .tab-btn.active .tab-icon svg { filter: drop-shadow(0 0 6px var(--comet-glow)); }
  .tab-btn:hover { color: var(--text); }
  .tab-btn.active:hover { color: var(--comet-1); }

  /* ---- Colonna lista (chat / community / profilo) ---- */
  .screen {
    left: var(--rail);
    right: auto;
    width: var(--list);
    top: 0;
    bottom: 0;
    border-right: 1px solid var(--separator);
    padding-bottom: 0;
  }
  .large-title-brand { padding-top: 16px; }

  /* ---- Pannello destro: la conversazione ---- */
  #conversation {
    left: calc(var(--rail) + var(--list));
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 0;
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 40;
  }
  #conversation.open { opacity: 1; pointer-events: auto; }
  #btnBack { display: none; } /* col doppio pannello non serve */

  #conversation .messages {
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(124,108,246,0.05), transparent 60%),
      var(--bg);
  }
  #conversation .conv-header {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px) saturate(1.7);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
  }
  #conversation.open .messages { animation: convFadeUp .35s cubic-bezier(.2,.9,.3,1); }
  @keyframes convFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .reduce-motion #conversation.open .messages { animation: none; }
  .bubble { max-width: 60%; }
  .messages { padding-left: 5%; padding-right: 5%; }

  /* ---- Info chat: modale centrato sopra il pannello destro ---- */
  #infoScreen {
    left: calc(var(--rail) + var(--list));
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 0;
    z-index: 50;
  }

  /* ---- "Nuovo messaggio": modale centrato, non un pannello incastrato ---- */
  #newChatScreen {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 500;
  }
  #newChatScreen.open { opacity: 1; pointer-events: auto; }
  #newChatScreen > * {
    width: 100%;
    max-width: 460px;
    max-height: 80vh;
    background: var(--bg);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
    overflow: hidden;
    animation: dialogPop .3s cubic-bezier(.25,1.2,.4,1);
  }
  .reduce-motion #newChatScreen > * { animation: none; }

  /* ---- Benvenuto quando nessuna chat è aperta ---- */
  .desktop-placeholder {
    display: flex;
    position: absolute;
    top: 0; bottom: 0; right: 0;
    left: calc(var(--rail) + var(--list));
    z-index: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 70% 60% at 30% 20%, rgba(124,108,246,0.12), transparent 60%),
      radial-gradient(ellipse 60% 55% at 80% 90%, rgba(0,212,255,0.08), transparent 60%),
      var(--bg-secondary);
  }
  .desktop-placeholder::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 220px;
    background: radial-gradient(120% 100% at 50% 140%, var(--comet-glow), transparent 70%);
    opacity: 0.5;
    pointer-events: none;
  }
  .desk-logo {
    display: block;
    width: 220px;
    height: auto;
    margin-bottom: 30px;
    filter: drop-shadow(0 10px 30px var(--comet-glow));
    animation: deskFloat 5s ease-in-out infinite;
  }
  @keyframes deskFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .reduce-motion .desk-logo { animation: none; }
  .desk-title {
    font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 10px;
    background: linear-gradient(135deg, var(--text), var(--comet-1));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .desk-sub { font-size: 14.5px; color: var(--text-secondary); max-width: 320px; line-height: 1.5; }
  .desk-hint {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 34px; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); opacity: 0.75;
  }

  /* ---- Mouse: hover al posto dello swipe ---- */
  .row { cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
  .row:hover { background: var(--bg-secondary); box-shadow: inset 3px 0 0 var(--comet-1); }
  .row-actions {
    z-index: 3;
    align-items: center;
    gap: 8px;
    padding: 0 14px 0 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    /* Sfondo pieno che copre completamente il testo sotto i pulsanti */
    background: linear-gradient(90deg, transparent, var(--bg-secondary) 44px);
  }
  .row-wrap:hover .row-actions { opacity: 1; pointer-events: auto; }
  .row-action {
    width: auto; min-width: 0; height: 30px;
    padding: 0 15px; border-radius: 16px; font-size: 12.5px; font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    white-space: nowrap;
    transition: transform .15s cubic-bezier(.3,1.4,.5,1), filter .15s ease;
  }
  .row-action:hover { filter: brightness(1.08); }
  .row-action:active { transform: scale(0.94); }
  .nav-btn:hover, .attach-btn:hover, .sheet-close:hover, .member-action:hover { filter: brightness(1.12); }
  .btn-primary:hover { filter: brightness(1.05); }

  /* Sheet come modali centrati */
  .sheet-overlay { align-items: center; justify-content: center; padding: 24px; }
  .sheet {
    max-width: 440px;
    border-radius: 24px;
    border-bottom: 1px solid var(--glass-border);
    animation: dialogPop .3s cubic-bezier(.25,1.2,.4,1);
  }
  .sheet-handle { display: none; }

  /* Scrollbar sottili */
  .screen::-webkit-scrollbar, .messages::-webkit-scrollbar, .sheet-scroll::-webkit-scrollbar, .sheet-list::-webkit-scrollbar { width: 8px; }
  .screen::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb, .sheet-scroll::-webkit-scrollbar-thumb, .sheet-list::-webkit-scrollbar-thumb {
    background: var(--separator);
    border-radius: 4px;
  }
  .screen::-webkit-scrollbar-thumb:hover, .messages::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
}

@media (min-width: 1500px) {
  :root { --sidebar: 440px; }
}

/* =========================================================
   PANNELLO ADMIN
========================================================= */
.admin-panel {
  position: absolute;
  inset: 0;
  z-index: 650;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: dialogFade .2s ease;
}
.admin-panel[hidden] { display: none; }
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--separator);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  flex-shrink: 0;
}
.admin-back {
  display: flex; align-items: center; gap: 3px;
  background: none; border: none; color: var(--comet-1);
  font-size: 16px; font-weight: 600; cursor: pointer; padding: 6px;
}
.admin-title { font-size: 16px; font-weight: 700; }

/* Cancello codice */
.admin-gate {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 32px;
  gap: 4px;
}
.admin-gate[hidden] { display: none; }
.admin-gate-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--comet-glow);
  color: var(--comet-1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.admin-gate h2 { font-size: 20px; font-weight: 800; }
.admin-gate p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; max-width: 280px; margin-bottom: 12px; }
.admin-gate input {
  width: 100%; max-width: 300px;
  border: none; outline: none;
  background: var(--bg-input); color: var(--text);
  font-size: 15px; font-family: var(--font);
  padding: 12px 16px; border-radius: 12px;
  text-align: center; letter-spacing: 0.03em;
  transition: box-shadow .15s ease;
}
.admin-gate input:focus { box-shadow: 0 0 0 1.5px var(--comet-1); }
.admin-gate .btn-primary { max-width: 300px; width: 100%; margin-top: 12px; }

/* Corpo */
.admin-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.admin-body[hidden] { display: none; }
.admin-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  position: sticky; top: 0;
  background: var(--bg);
  z-index: 2;
}
.admin-tab {
  flex: 1;
  border: none;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 13.5px; font-weight: 700;
  font-family: var(--font);
  padding: 9px 0; border-radius: 12px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.admin-tab.active { background: var(--comet-grad); color: #fff; box-shadow: 0 3px 12px var(--comet-glow); }
.admin-tab-content { padding: 0 14px 24px; }
.admin-tab-content[hidden] { display: none; }

.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.admin-stat {
  background: var(--bg-input);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
}
.admin-stat-val { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.admin-stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; font-weight: 600; }
.admin-loading { text-align: center; color: var(--text-secondary); padding: 40px; grid-column: 1 / -1; }

.admin-search { margin-bottom: 10px; }
.admin-search input {
  width: 100%; border: none; outline: none;
  background: var(--bg-input); color: var(--text);
  font-size: 15px; font-family: var(--font);
  padding: 10px 14px; border-radius: 12px;
}
.admin-search input:focus { box-shadow: 0 0 0 1.5px var(--comet-1); }

.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-input);
  border-radius: 14px;
  padding: 11px 14px;
}
.admin-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.admin-row-name { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.admin-row-sub { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-dot-online { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); display: inline-block; }
.admin-danger-btn {
  border: none; background: var(--red); color: #fff;
  font-size: 12.5px; font-weight: 700; font-family: var(--font);
  padding: 7px 14px; border-radius: 16px; cursor: pointer; flex-shrink: 0;
  transition: transform .15s cubic-bezier(.3,1.4,.5,1), filter .15s ease;
}
.admin-danger-btn:active { transform: scale(0.92); }
.admin-danger-btn:hover { filter: brightness(1.08); }
.admin-empty { text-align: center; color: var(--text-secondary); padding: 30px; font-size: 13.5px; }

/* Desktop: pannello admin come modale centrato elegante */
@media (min-width: 900px) {
  .admin-panel {
    left: calc(var(--rail) + var(--list));
    z-index: 55;
  }
}

/* =========================================================
   AZIONI MESSAGGIO (long-press) + INOLTRA + SALVATI
========================================================= */
.msg-action-overlay {
  position: absolute;
  inset: 0;
  z-index: 620;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dialogFade .18s ease;
}
.msg-action-overlay[hidden] { display: none; }
.msg-action-sheet {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 1px 0 var(--glass-shine);
  overflow: hidden;
  animation: dialogPop .28s cubic-bezier(.25,1.2,.4,1);
}
.reduce-motion .msg-action-sheet { animation: none; }
.msg-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 15.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
}
.msg-action:not(:last-child) { border-bottom: 1px solid var(--separator); }
.msg-action:active { background: var(--bg-secondary); }
.msg-action svg { color: var(--comet-1); flex-shrink: 0; }

.bubble-pressed { transform: scale(0.97); filter: brightness(1.15); transition: transform .15s ease, filter .15s ease; }

/* Righe inoltra */
.forward-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font);
  border-radius: 12px;
  transition: background .15s ease;
}
.forward-row:hover, .forward-row:active { background: var(--bg-secondary); }
.forward-name { font-size: 15px; font-weight: 600; }

/* Messaggi salvati */
.saved-item {
  background: var(--bg-input);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 10px;
  position: relative;
}
.saved-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
  gap: 10px;
}
.saved-from { font-size: 13.5px; font-weight: 700; color: var(--comet-1); }
.saved-date { font-size: 11.5px; color: var(--text-secondary); flex-shrink: 0; }
.saved-text { font-size: 14.5px; line-height: 1.4; word-break: break-word; }
.saved-conv { font-size: 12px; color: var(--text-secondary); margin-top: 5px; font-style: italic; }
.saved-remove {
  margin-top: 10px;
  border: none;
  background: var(--bg-elevated);
  color: var(--red);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font);
  padding: 6px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.saved-remove:active { transform: scale(0.94); }

/* =========================================================
   MIGLIORAMENTI AZIONI MESSAGGIO (v2)
========================================================= */
/* Niente selezione testo / menu nativo iOS sulle bolle */
.bubble {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Il testo resta selezionabile col mouse su desktop, ma non l'attivazione touch */
@media (min-width: 900px) {
  .bubble { -webkit-user-select: text; user-select: text; }
}

/* Focus: messaggio selezionato in evidenza, gli altri sfocati */
.bubble-row { transition: filter .2s ease, opacity .2s ease, transform .2s ease; }
.bubble-dimmed { filter: blur(3px) brightness(0.7); opacity: 0.55; pointer-events: none; }
.bubble-focused { transform: scale(1.03); z-index: 621; position: relative; }
.reduce-motion .bubble-row { transition: none; }

/* Bandierina "salvato" sulle bolle */
.bubble { position: relative; }
.bubble-saved-flag {
  position: absolute;
  top: -6px;
  right: 10px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #FFB400;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.bubble-saved-flag svg { width: 8px; height: 8px; }
.bubble.me .bubble-saved-flag { right: auto; left: 10px; }

/* Voce pericolosa nel menu azioni */
.msg-action.danger { color: var(--red); }
.msg-action.danger svg { color: var(--red); }

/* =========================================================
   TESTI NON SELEZIONABILI SU MOBILE
   Su telefono l'interfaccia non deve far comparire il menu di
   selezione iOS/Android tenendo premuto. Restano selezionabili
   solo i campi di input e le aree di testo.
========================================================= */
@media (max-width: 899px) {
  body, .app, .screen, .row, .settings-row, .tab-bar, .conv-header,
  .info-hero, .sheet, .dialog-card, .msg-action-sheet, .admin-panel,
  .bubble-sender, .day-divider, .row-name, .row-preview, .row-time {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}

/* Stella preferiti nella lista chat */
.fav-star { color: #FFB400; vertical-align: -1px; margin-right: 2px; filter: drop-shadow(0 0 4px rgba(255,180,0,0.4)); }

/* Selettore lingua */
.lang-row { display: flex; align-items: center; gap: 13px; }
.lang-flag { width: 30px; height: 20px; border-radius: 4px; overflow: hidden; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.25); display: block; }
.lang-flag svg { display: block; width: 30px; height: 20px; }
.lang-check { margin-left: auto; color: var(--comet-1); font-weight: 800; font-size: 17px; }

/* =========================================================
   NOTE CARD — versione ordinata (sostituisce la bolla flottante)
   Una pillola pulita e centrata sotto il nome, non più sopra l'avatar.
========================================================= */
.profile-note-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  margin: 14px auto 0;
  padding: 9px 16px;
  border-radius: 18px;
  background: var(--bg-input);
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 2px 8px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.profile-note-card:active { transform: scale(0.97); }
.profile-note-card .note-icon {
  width: 15px; height: 15px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.profile-note-card .note-icon svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--comet-1); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.profile-note-card .note-text {
  font-size: 14px;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-note-card .note-text.placeholder { color: var(--text-secondary); }
.profile-note-card.pop { animation: notePopClean .2s ease; }
@keyframes notePopClean {
  0% { transform: scale(0.92); opacity: 0.5; }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

/* Community ufficiale Comet */
.official-avatar {
  background: var(--comet-grad) !important;
  display: flex; align-items: center; justify-content: center;
}
.official-avatar img { width: 62%; height: auto; filter: brightness(0) invert(1); }
.official-badge { display: inline-flex; vertical-align: -2px; margin-right: 2px; }
.official-note {
  display: flex; align-items: center; gap: 9px;
  margin: 16px 16px 0;
  padding: 13px 16px;
  border-radius: 16px;
  background: var(--comet-glow);
  color: var(--text-secondary);
  font-size: 13px; line-height: 1.4;
  box-shadow: inset 0 0 0 1px rgba(124,108,246,0.16);
}
.official-note svg { flex-shrink: 0; }

/* Composer annunci nel pannello admin */
.admin-announce {
  background: var(--bg-input);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
}
.admin-announce-title { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.admin-announce textarea {
  width: 100%;
  border: none; outline: none;
  background: var(--bg-secondary);
  color: var(--text);
  font-family: var(--font); font-size: 14.5px;
  padding: 11px 13px; border-radius: 12px;
  resize: vertical; min-height: 60px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.admin-announce textarea:focus { box-shadow: 0 0 0 1.5px var(--comet-1); }
.admin-announce .btn-primary { width: 100%; }

/* =========================================================
   BADGE VERIFICATO
========================================================= */
.verified-badge, .comet-verified {
  display: inline-flex;
  vertical-align: -3px;
  margin-left: 1px;
}
.verified-badge svg, .comet-verified svg { filter: drop-shadow(0 1px 3px rgba(124,108,246,0.5)); }
/* Nel nome profilo grande il badge è leggermente più grande */
.profile-name .verified-badge svg { width: 20px; height: 20px; vertical-align: -4px; }
.info-name .verified-badge svg { width: 19px; height: 19px; }

/* Barra "sola lettura" al posto del composer nelle community ufficiali */
.readonly-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--bg-secondary);
  border-top: 1px solid var(--separator);
}
.readonly-bar svg { flex-shrink: 0; opacity: 0.8; }

/* Riga verifica account verificata */
.settings-row.is-verified .settings-label { color: #1D9BF0; font-weight: 700; }


/* =========================================================
   GUIDA INSTALLAZIONE PWA
========================================================= */
.install-intro {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 18px;
}
.install-tabs {
  display: flex;
  gap: 8px;
  background: var(--bg-input);
  padding: 5px;
  border-radius: 16px;
  margin-bottom: 18px;
}
.install-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.install-tab.active {
  background: var(--bg);
  color: var(--comet-1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.install-tab svg { flex-shrink: 0; }
.install-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.install-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--comet-grad);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px var(--comet-glow);
}
.install-text {
  font-size: 14.5px;
  line-height: 1.5;
  padding-top: 3px;
}
.install-text b { font-weight: 700; }
.install-glyph {
  display: inline-flex;
  align-items: center;
  vertical-align: -3px;
  color: var(--comet-1);
  font-weight: 800;
  padding: 0 2px;
}
.install-hint-box {
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--comet-glow);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.install-direct-btn { width: 100%; margin-top: 8px; }

/* Pulsante scorri in fondo alla chat */
.scroll-bottom-btn {
  position: absolute;
  right: 16px;
  bottom: 92px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  color: var(--comet-1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), inset 0 1px 0 var(--glass-shine);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  animation: scrollBtnIn .2s ease;
  transition: transform .15s ease;
}
.scroll-bottom-btn:active { transform: scale(0.9); }
@keyframes scrollBtnIn { from { opacity: 0; transform: translateY(8px) scale(0.9); } to { opacity: 1; transform: none; } }

/* Rispetta "riduci animazioni" anche per gli elementi nuovi */
.reduce-motion .scroll-bottom-btn { animation: none; }
.reduce-motion .msg-action-sheet,
.reduce-motion .profile-note-card.pop { animation: none; }

/* =========================================================
   ORA MESSAGGIO + CITAZIONI + REAZIONI + REPLY BAR + SFONDI
========================================================= */
/* Citazione risposta dentro la bolla */
.bubble-quote {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  border-radius: 12px;
  padding: 7px 10px;
  margin: 2px 0 7px;
  background: rgba(0,0,0,0.14);
  border-left: 3px solid rgba(255,255,255,0.55);
}
.bubble.them .bubble-quote {
  background: rgba(127,127,127,0.14);
  border-left-color: var(--comet-1);
}
.bubble-quote-name {
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 1px;
  color: inherit;
  opacity: 0.95;
}
.bubble-quote-text {
  display: block;
  font-size: 12.5px;
  opacity: 0.8;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.bubble.me .bubble-quote { color: #fff; }
.bubble.them .bubble-quote { color: var(--text); }

/* Flash quando salti al messaggio citato */
.bubble-jump-flash { animation: jumpFlash 1.2s ease; }
@keyframes jumpFlash {
  0%, 60% { box-shadow: 0 0 0 3px var(--comet-1), 0 0 24px var(--comet-glow); }
  100% { box-shadow: none; }
}

/* Riga emoji nel menu long-press */
.reaction-row {
  display: flex;
  justify-content: space-around;
  gap: 4px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--separator);
}
.reaction-pick {
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: transform .15s cubic-bezier(.3,1.6,.5,1), background .15s ease;
}
.reaction-pick:hover, .reaction-pick:active { transform: scale(1.25); }
.reaction-pick.active { background: var(--comet-glow); }

/* Effetto risposta: sfondo più scuro e sfocato, messaggio in risalto con glow */
.msg-action-overlay {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.bubble-focused {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 0 28px var(--comet-glow), 0 8px 32px rgba(0,0,0,0.4);
}

/* Barra di risposta sopra il composer */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--separator);
  animation: replyIn .2s ease;
}
.reduce-motion .reply-bar { animation: none; }
@keyframes replyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.reply-bar-accent {
  width: 3.5px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--comet-grad);
  flex-shrink: 0;
}
.reply-bar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reply-bar-name { font-size: 12.5px; font-weight: 800; color: var(--comet-1); }
.reply-bar-text { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar-close {
  border: none;
  background: var(--bg-input);
  color: var(--text-secondary);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* Sfondi chat */
.messages.has-wallpaper {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.messages.has-wallpaper .bubble.them {
  background: color-mix(in srgb, var(--gray-bubble) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.messages.has-wallpaper .day-divider {
  background: rgba(0,0,0,0.28);
  color: #fff;
  padding: 3px 12px;
  border-radius: 12px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.conv-wallpaper-btn {
  width: 40px; height: 40px;
  border: none;
  background: none;
  color: var(--comet-1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}
.conv-wallpaper-btn:active { background: var(--bg-secondary); }

/* Griglia scelta sfondi */
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.wallpaper-tile {
  position: relative;
  aspect-ratio: 3/5;
  border: 2.5px solid transparent;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.wallpaper-tile:active { transform: scale(0.96); }
.wallpaper-tile.selected { border-color: var(--comet-1); }
.wp-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 6px 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  font-family: var(--font);
}
.wp-none-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
}
.wp-check {
  position: absolute;
  top: 7px; right: 7px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--comet-1);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* =========================================================
   STILE iMESSAGE: orari a scomparsa + tapback + liquid glass
========================================================= */
/* Orari nascosti a destra: si rivelano trascinando la chat a sinistra */
.messages { --dragx: 0; overflow-x: hidden; }
.messages .bubble-row {
  position: relative;
  transform: translateX(calc(var(--dragx, 0) * -1px));
  transition: transform .3s cubic-bezier(.25,1,.35,1), filter .2s ease, opacity .2s ease;
}
.messages.time-dragging .bubble-row { transition: filter .2s ease, opacity .2s ease; }
.msg-time {
  position: absolute;
  right: -66px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: left;
  opacity: calc(var(--dragx, 0) / 74);
  pointer-events: none;
  white-space: nowrap;
}
.messages.has-wallpaper .msg-time { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* Tapback: piccola bolla reazione attaccata all'angolo (stile iMessage) */
.bubble-row.has-tapback { margin-top: 16px; }
.tapback {
  position: absolute;
  top: -15px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-elevated);
  border: 2px solid var(--bg);
  border-radius: 16px;
  padding: 3px 8px;
  font-size: 12.5px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  z-index: 2;
}
.bubble.me .tapback { left: -8px; }
.bubble.them .tapback { right: -8px; }
.tapback i { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--text-secondary); margin-left: 1px; }

/* LIQUID GLASS: bolle traslucide, lo sfondo si vede attraverso */
.messages.has-wallpaper .bubble.them {
  background: color-mix(in srgb, var(--gray-bubble) 84%, transparent);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 14px rgba(0,0,0,0.18);
}
.messages.has-wallpaper .bubble.me {
  background: linear-gradient(135deg, rgba(124,108,246,0.92), rgba(156,140,255,0.86));
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 14px rgba(0,80,180,0.25);
}
.messages.has-wallpaper .tapback {
  background: rgba(30,32,36,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: transparent;
  color: #fff;
}

/* =========================================================
   iMESSAGE LOOK: bolle con codina, spazi ariosi, vetro fluttuante
========================================================= */
/* Bolle più grandi e rotonde, tipografia iOS */
.bubble {
  max-width: 78%;
  padding: 10px 15px;
  font-size: 17px;
  line-height: 1.3;
  border-radius: 20px;
  letter-spacing: -0.01em;
}
.messages { padding: 16px 14px 12px; }
.bubble-row { margin: 1.5px 0; }
/* Più respiro quando cambia il mittente */
.bubble-row.me + .bubble-row.them,
.bubble-row.them + .bubble-row.me { margin-top: 10px; }


/* Con lo sfondo attivo, la codina segue il vetro */

/* Link nei messaggi */
.bubble-link { color: inherit; text-decoration: underline; word-break: break-all; }

/* ---- SFONDO A TUTTO SCHERMO: header e composer in vetro fluttuante ---- */
.conversation.has-wallpaper {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.conversation.has-wallpaper .messages { background: transparent !important; }
.conversation.has-wallpaper .conv-header {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.conversation.has-wallpaper .conv-back,
.conversation.has-wallpaper .conv-wallpaper-btn {
  background: rgba(24,26,30,0.5);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.25);
}
.conversation.has-wallpaper .conv-back { padding: 7px 13px 7px 9px; }
.conversation.has-wallpaper .conv-contact {
  background: rgba(24,26,30,0.5);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-radius: 24px;
  padding: 5px 14px 5px 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.25);
}
.conversation.has-wallpaper .conv-name { color: #fff; }
.conversation.has-wallpaper .input-bar {
  background: transparent;
  border-top: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.conversation.has-wallpaper .text-field {
  background: rgba(24,26,30,0.55);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.conversation.has-wallpaper .text-field input { color: #fff; }
.conversation.has-wallpaper .text-field input::placeholder { color: rgba(255,255,255,0.55); }
.conversation.has-wallpaper .attach-btn {
  background: rgba(24,26,30,0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 50%;
  color: #fff;
}
.conversation.has-wallpaper .reply-bar {
  background: rgba(24,26,30,0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: none;
}

/* Header sempre trasparente con sfondo attivo (blindato) */
.conversation.has-wallpaper .conv-header { background: transparent !important; }

/* Angoli raggruppati stile iMessage: le bolle consecutive dello stesso
   mittente hanno l'angolo interno meno arrotondato */
.bubble-row.me:has(+ .bubble-row.me) .bubble.me { border-bottom-right-radius: 6px; }
.bubble-row.me + .bubble-row.me .bubble.me { border-top-right-radius: 6px; }
.bubble-row.them:has(+ .bubble-row.them) .bubble.them { border-bottom-left-radius: 6px; }
.bubble-row.them + .bubble-row.them .bubble.them { border-top-left-radius: 6px; }

/* Indicatore "sta scrivendo…" con puntini animati */
.typing-row { display: flex; padding: 2px 0 6px; }
.typing-bubble {
  background: var(--gray-bubble);
  border-radius: 20px;
  padding: 13px 15px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.messages.has-wallpaper .typing-bubble {
  background: color-mix(in srgb, var(--gray-bubble) 84%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.typing-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
  animation: typingBounce 1.3s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .18s; }
.typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: none; opacity: .55; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.reduce-motion .typing-dot { animation: none; }

/* Conferma di lettura sotto l'ultimo mio messaggio */
.read-receipt {
  text-align: right;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 2px 12px 0;
}
.messages.has-wallpaper .read-receipt { color: rgba(255,255,255,0.8); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.read-receipt b { font-weight: 800; }

/* =========================================================
   SFONDO CHAT FISSO A TUTTO SCHERMO (mobile)
   Copre l'intero display (anche sotto il notch) e NON si muove
   quando si apre la tastiera: la chat scorre, lo sfondo resta.
========================================================= */
.conversation.has-wallpaper {
  background-image: var(--chat-wp);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 899px) {
  .conversation.has-wallpaper { background-image: none !important; }
  .conversation.has-wallpaper::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--chat-wp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
  }
  /* Il contenuto della conversazione sta sopra lo sfondo fisso.
     Il livello animato (#chatAnimBg) resta escluso: deve poter coprire. */
  .conversation.has-wallpaper > *:not(#chatAnimBg) { position: relative; z-index: 1; }
}

/* Su mobile: header della chat subito sotto la status bar (come iMessage),
   senza i 54px di spazio vuoto ereditati dal layout desktop */
@media (max-width: 899px) {
  .conversation { padding-top: env(safe-area-inset-top, 0px); }
  /* Quando la chat è aperta col suo sfondo, togli il transform:
     così lo sfondo fisso resta agganciato allo SCHERMO e non si
     muove quando si apre la tastiera. */
  .conversation.has-wallpaper.open { transform: none; }
}


/* Ultimo messaggio del gruppo: angolo stretto pulito (niente codina) */
.bubble-row.me:not(:has(+ .bubble-row.me)) .bubble.me { border-bottom-right-radius: 6px; }
.bubble-row.them:not(:has(+ .bubble-row.them)) .bubble.them { border-bottom-left-radius: 6px; }

/* Micro-animazione: l'ultima bolla appare con un piccolo pop */
.bubble-row:last-of-type .bubble { animation: bubbleIn .22s cubic-bezier(.25,1.3,.4,1); }
@keyframes bubbleIn { from { transform: scale(0.92) translateY(4px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.reduce-motion .bubble-row:last-of-type .bubble { animation: none; }

/* Donazioni crypto */
.crypto-glyph { color: #fff; font-weight: 800; font-size: 15px; line-height: 1; }
.settings-value { margin-left: auto; margin-right: 8px; font-size: 13.5px; color: var(--text-secondary); }
.donate-badge {
  width: 64px; height: 64px;
  border-radius: 50%;
  margin: 6px auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.donate-net { text-align: center; font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; font-weight: 600; }
.donate-address {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-all;
  background: var(--bg-input);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  margin-bottom: 14px;
  user-select: all;
  -webkit-user-select: all;
}
.donate-copy { width: 100%; }

/* Accessibilità: testo solo per screen reader */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Focus visibile navigando da tastiera (non appare al tocco/click) */
:focus-visible {
  outline: 2px solid var(--comet-1);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Badge di verifica WebScore */
.webscore-badge {
  display: block;
  width: fit-content;
  margin: 14px auto 4px;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .15s ease, opacity .15s ease;
  opacity: 0.92;
}
.webscore-badge:hover { transform: scale(1.03); opacity: 1; }
.webscore-badge img { display: block; }

/* =========================================================
   SCHERMATA VERIFICA EMAIL (OTP)
========================================================= */
.otp-screen {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(124,108,246,0.24), transparent 55%),
    radial-gradient(120% 90% at 85% 100%, rgba(156,140,255,0.16), transparent 55%),
    var(--bg);
}
.otp-card {
  width: 100%;
  max-width: 400px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: 26px;
  padding: 34px 26px 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
}
.otp-icon {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--comet-grad);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px var(--comet-glow);
}
.otp-title { margin: 0 0 8px; font-size: 21px; font-weight: 800; }
.otp-sub { margin: 0 0 22px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.otp-sub b { color: var(--text); word-break: break-all; }
.otp-boxes { display: flex; gap: 9px; justify-content: center; margin-bottom: 16px; }
.otp-box {
  width: 46px; height: 56px;
  border: 1.5px solid var(--separator);
  border-radius: 14px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  font-family: var(--font);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.otp-box:focus {
  border-color: var(--comet-1);
  box-shadow: 0 0 0 3px var(--comet-glow);
  transform: scale(1.04);
}
.otp-verify-btn { width: 100%; margin-top: 4px; }
.otp-resend {
  display: block;
  width: 100%;
  margin-top: 14px;
  border: none;
  background: none;
  color: var(--comet-1);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px;
}
.otp-resend:disabled { color: var(--text-secondary); cursor: default; }
.otp-logout {
  display: block;
  width: 100%;
  margin-top: 2px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
}

/* Bottone verifica nel pannello admin */
.admin-verify-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid var(--separator);
  background: var(--bg-input);
  color: var(--text-secondary);
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 8px;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
}
.admin-verify-pill:active { transform: scale(0.94); }
.admin-verify-pill.on {
  background: var(--comet-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(124,108,246,0.35);
}
.admin-verify-pill:disabled { opacity: 0.5; cursor: default; }

/* Niente zoom/gesti browser: comportamento da app nativa */
html, body { touch-action: pan-x pan-y; }
input, textarea { touch-action: manipulation; }

/* Galleria media nella scheda contatto */
.info-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  border-radius: 16px;
  overflow: hidden;
}
.info-media-cell {
  position: relative;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  background: var(--bg-input);
  cursor: pointer;
  overflow: hidden;
}
.info-media-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.info-media-cell:active img { transform: scale(1.06); }
.info-media-cell.is-video {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#1a1d24,#2a2f3a);
}
.info-link-row { text-decoration: none; }
.info-link-text {
  font-size: 14px;
  color: var(--comet-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fila di 4 azioni stile iMessage nella scheda contatto */
.info-actions.four { gap: 8px; margin-left: 14px; margin-right: 14px; }
.info-actions.four .info-action-btn {
  max-width: none;
  padding: 13px 4px;
  font-size: 12px;
  gap: 6px;
  border-radius: 16px;
}
.info-actions.four .info-action-btn svg { width: 20px; height: 20px; }

/* Intestazione sezione con "Vedi tutto" */
.info-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 2px 8px;
}
.see-all-btn {
  border: none;
  background: none;
  color: var(--comet-1);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
}

/* Barra di ricerca nella conversazione */
.conv-search-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-input);
  border-radius: 14px;
  padding: 11px 14px;
  margin-bottom: 14px;
  color: var(--text-secondary);
}
.conv-search-bar input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
}
.conv-search-result {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 12px 6px;
  border-bottom: 0.5px solid var(--separator);
  cursor: pointer;
  font-family: var(--font);
}
.conv-search-result:active { background: var(--bg-secondary); }
.csr-meta { display: block; font-size: 12px; font-weight: 700; color: var(--comet-1); margin-bottom: 3px; }
.csr-text { display: block; font-size: 14.5px; color: var(--text); line-height: 1.4; }

/* =========================================================
   LOOKUP UI: typing in lista, presenza, rifiniture
========================================================= */
/* "sta scrivendo…" al posto dell'anteprima, in blu */
.row-preview.is-typing {
  color: var(--comet-1);
  font-weight: 600;
  font-style: italic;
}

/* Pallino verde di presenza sull'avatar (chat 1:1 online) */
.row-avatar-wrap { position: relative; flex-shrink: 0; }
.presence-badge {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #30D158;
  border: 2.5px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* La chat non "trascina" lo sfondo quando arrivi in cima/fondo */
.messages { overscroll-behavior: contain; }

/* Schermata OTP: resta visibile anche con la tastiera aperta */
.otp-screen {
  align-items: flex-start;
  overflow-y: auto;
  padding-top: min(12vh, 90px);
}

/* La schermata Info è scrollabile: con toggle, galleria e link
   il contenuto supera lo schermo e deve poter scorrere */
#infoScreen #infoContent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.e2ee-badge{display:inline-flex;vertical-align:-1px;margin-left:4px;color:var(--green)}
.messages .day-divider.e2ee-note{background:var(--comet-glow);color:var(--comet-1);padding:7px 14px;border-radius:14px;width:fit-content;max-width:86%;margin:4px auto 16px;line-height:1.45;font-weight:600;font-size:12px}
.messages.has-wallpaper .day-divider.e2ee-note{background:rgba(0,0,0,.4);color:#fff}
.bubble-text.e2ee-locked{font-style:italic;opacity:.7}
.bubble-row.optimistic .bubble.me{opacity:.72}
.bubble-row.optimistic .msg-time{opacity:.5}

/* =========================================================
   SFONDI CHAT ANIMATI — solo CSS, GPU-friendly, stile iMessage
========================================================= */
.chat-anim-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;display:none}
/* Blindatura: su mobile la conversazione usa un ::before fisso per lo sfondo;
   qui forziamo il livello animato a coprire sempre, dietro ai messaggi. */
.conversation.has-wallpaper #chatAnimBg.chat-anim-bg{position:absolute!important;inset:0!important;top:0!important;z-index:0!important}
@media (max-width:899px){
  .conversation.has-wallpaper #chatAnimBg.chat-anim-bg{position:fixed!important;inset:0!important}
}
.conversation.has-wallpaper > *:not(.chat-anim-bg){position:relative;z-index:1}
.chat-anim-bg .cab-layer{position:absolute;inset:-20%;will-change:transform,opacity}

/* Aurora: blob di colore che fluttuano lentamente (iMessage-like) */
.chat-anim-bg.anim-aurora .l1{background:radial-gradient(closest-side,rgba(33,199,232,.55),transparent 70%);width:70%;height:55%;left:-10%;top:5%;filter:blur(30px);animation:cabDrift1 14s ease-in-out infinite alternate}
.chat-anim-bg.anim-aurora .l2{background:radial-gradient(closest-side,rgba(79,240,200,.42),transparent 70%);width:65%;height:55%;right:-10%;top:30%;filter:blur(34px);animation:cabDrift2 17s ease-in-out infinite alternate}
.chat-anim-bg.anim-aurora .l3{background:radial-gradient(closest-side,rgba(124,108,251,.4),transparent 70%);width:75%;height:60%;left:10%;bottom:-15%;filter:blur(36px);animation:cabDrift3 20s ease-in-out infinite alternate}

/* Nebbia mesh: tre aloni colorati che morphano */
.chat-anim-bg.anim-mesh .l1{background:radial-gradient(closest-side,rgba(255,107,157,.5),transparent 70%);width:70%;height:55%;left:-8%;top:0;filter:blur(40px);animation:cabDrift1 16s ease-in-out infinite alternate}
.chat-anim-bg.anim-mesh .l2{background:radial-gradient(closest-side,rgba(96,165,250,.5),transparent 70%);width:70%;height:55%;right:-8%;top:25%;filter:blur(40px);animation:cabDrift2 19s ease-in-out infinite alternate}
.chat-anim-bg.anim-mesh .l3{background:radial-gradient(closest-side,rgba(52,211,153,.45),transparent 70%);width:80%;height:60%;left:5%;bottom:-12%;filter:blur(44px);animation:cabDrift3 22s ease-in-out infinite alternate}

/* Alba viva */
.chat-anim-bg.anim-sunset .l1{background:radial-gradient(closest-side,rgba(255,159,110,.55),transparent 70%);width:80%;height:55%;left:-5%;top:-8%;filter:blur(34px);animation:cabDrift2 15s ease-in-out infinite alternate}
.chat-anim-bg.anim-sunset .l2{background:radial-gradient(closest-side,rgba(255,95,126,.5),transparent 70%);width:70%;height:55%;right:-8%;top:35%;filter:blur(36px);animation:cabDrift1 18s ease-in-out infinite alternate}
.chat-anim-bg.anim-sunset .l3{background:radial-gradient(closest-side,rgba(255,209,165,.5),transparent 70%);width:85%;height:55%;left:0;bottom:-10%;filter:blur(38px);animation:cabDrift3 21s ease-in-out infinite alternate}

/* Neon */
.chat-anim-bg.anim-neon .l1{background:radial-gradient(closest-side,rgba(255,0,170,.5),transparent 70%);width:65%;height:50%;left:-8%;top:0;filter:blur(30px);animation:cabDrift1 13s ease-in-out infinite alternate}
.chat-anim-bg.anim-neon .l2{background:radial-gradient(closest-side,rgba(0,229,255,.5),transparent 70%);width:65%;height:50%;right:-8%;top:30%;filter:blur(30px);animation:cabDrift2 16s ease-in-out infinite alternate}
.chat-anim-bg.anim-neon .l3{background:radial-gradient(closest-side,rgba(150,80,255,.5),transparent 70%);width:75%;height:55%;left:8%;bottom:-12%;filter:blur(34px);animation:cabDrift3 19s ease-in-out infinite alternate}

@keyframes cabDrift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(14%,10%) scale(1.15)}}
@keyframes cabDrift2{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-12%,8%) scale(.95)}}
@keyframes cabDrift3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8%,-10%) scale(1.12)}}

/* Bolle che salgono */
.chat-anim-bg.anim-bubbles .cab-layer{inset:0}
.chat-anim-bg.anim-bubbles .l1{background-image:radial-gradient(circle 8px at 20% 100%,rgba(255,255,255,.5),transparent 60%),radial-gradient(circle 5px at 50% 100%,rgba(255,255,255,.45),transparent 60%),radial-gradient(circle 11px at 80% 100%,rgba(255,255,255,.4),transparent 60%);background-repeat:no-repeat;animation:cabRise 9s linear infinite}
.chat-anim-bg.anim-bubbles .l2{background-image:radial-gradient(circle 6px at 33% 100%,rgba(255,255,255,.42),transparent 60%),radial-gradient(circle 9px at 66% 100%,rgba(255,255,255,.38),transparent 60%),radial-gradient(circle 4px at 90% 100%,rgba(255,255,255,.5),transparent 60%);background-repeat:no-repeat;animation:cabRise 13s linear infinite;animation-delay:-4s}
.chat-anim-bg.anim-bubbles .l3{background-image:radial-gradient(circle 7px at 10% 100%,rgba(255,255,255,.4),transparent 60%),radial-gradient(circle 5px at 45% 100%,rgba(255,255,255,.5),transparent 60%),radial-gradient(circle 10px at 72% 100%,rgba(255,255,255,.36),transparent 60%);background-repeat:no-repeat;animation:cabRise 17s linear infinite;animation-delay:-8s}
@keyframes cabRise{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(-115%);opacity:0}}

/* Onde animate in sovrapposizione */
.chat-anim-bg.anim-waves .cab-layer{inset:auto 0 0 0;height:60%;background-repeat:repeat-x;background-position:bottom}
.chat-anim-bg.anim-waves .l1{background-image:radial-gradient(120% 60px at 50% 100%,rgba(255,255,255,.14),transparent 70%);background-size:50% 90px;animation:cabWave 6s ease-in-out infinite}
.chat-anim-bg.anim-waves .l2{background-image:radial-gradient(120% 60px at 50% 100%,rgba(255,255,255,.1),transparent 70%);background-size:40% 120px;animation:cabWave 9s ease-in-out infinite reverse;opacity:.8}
.chat-anim-bg.anim-waves .l3{background-image:radial-gradient(120% 60px at 50% 100%,rgba(255,255,255,.08),transparent 70%);background-size:60% 150px;animation:cabWave 12s ease-in-out infinite}
@keyframes cabWave{0%,100%{transform:translateX(0)}50%{transform:translateX(-12%)}}

/* Cielo stellato che scintilla e va alla deriva */
.chat-anim-bg.anim-stars .cab-layer{inset:0;background-repeat:repeat}
.chat-anim-bg.anim-stars .l1{background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 60% 70%,#fff,transparent),radial-gradient(1.6px 1.6px at 80% 20%,#fff,transparent),radial-gradient(1px 1px at 40% 80%,#fff,transparent);background-size:200px 200px;animation:cabTwinkle 4s ease-in-out infinite}
.chat-anim-bg.anim-stars .l2{background-image:radial-gradient(1.2px 1.2px at 15% 60%,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 70% 40%,rgba(255,255,255,.9),transparent),radial-gradient(1.4px 1.4px at 90% 75%,rgba(255,255,255,.9),transparent);background-size:260px 260px;animation:cabTwinkle 6s ease-in-out infinite,cabDriftSlow 40s linear infinite;animation-delay:-2s}
.chat-anim-bg.anim-stars .l3{background-image:radial-gradient(closest-side,rgba(79,240,200,.18),transparent 70%);width:70%;height:40%;left:-10%;top:10%;filter:blur(40px);animation:cabDrift1 24s ease-in-out infinite alternate}
@keyframes cabTwinkle{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes cabDriftSlow{from{background-position:0 0}to{background-position:260px 130px}}

/* Respiro: gradiente diagonale che pulsa dolcemente */
.chat-anim-bg.anim-breathe{animation:cabBreathe 9s ease-in-out infinite}
.chat-anim-bg.anim-breathe .cab-layer{display:none}
@keyframes cabBreathe{0%,100%{filter:brightness(1) saturate(1);transform:scale(1)}50%{filter:brightness(1.12) saturate(1.25);transform:scale(1.04)}}

/* Anteprima nel picker */
.wallpaper-tile.wp-anim{overflow:hidden;position:relative}
.wallpaper-tile.wp-anim .cab-layer{position:absolute}

/* Rispetta "Riduci animazioni": sfondi fermi ma ancora belli */
.reduce-motion .chat-anim-bg .cab-layer,
.reduce-motion .chat-anim-bg.anim-breathe{animation:none!important}

/* =========================================================
   iOS PWA installata (standalone): iOS mostra la sua status bar reale
   (stile "black"). La finta status bar dell'app (residuo del mockup
   desktop) va nascosta per evitare una doppia barra. Lo spazio in alto
   resta invariato, così il layout non cambia rispetto a prima. */
@media (display-mode: standalone) {
  .status-bar { display: none !important; }
}

/* =========================================================
   BLOCCO CONTATTI
========================================================= */
.blocked-bar { gap: 10px; }
.blocked-bar-btn {
  border: none;
  background: var(--comet-1);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 16px;
  cursor: pointer;
}
.blocked-bar-btn:active { transform: scale(0.96); }

.blocked-row { gap: 12px; }
.blocked-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.blocked-row-user { font-size: 12.5px; color: var(--text-secondary); }
.blocked-unblock-btn {
  border: 1px solid var(--comet-1);
  background: transparent;
  color: var(--comet-1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.blocked-unblock-btn:active { transform: scale(0.96); }

.privacy-row-nav {
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.privacy-chevron { color: var(--text-secondary); opacity: 0.6; flex-shrink: 0; margin-left: 4px; }

/* =========================================================
   PRESTAZIONI MOBILE — fluidità
   Il "liquid glass" per-bolla (backdrop-filter) costringe Safari a
   ricampionare e sfocare lo sfondo per OGNI bolla a OGNI frame di scroll:
   con decine di bolle (e sfondi animati sotto) è la causa principale degli
   scatti. Qui le bolle usano superfici traslucide già pronte: resa visiva
   praticamente identica, costo di rendering enormemente più basso.
========================================================= */
@media (max-width: 899px) {
  .messages.has-wallpaper .bubble.them,
  .messages.has-wallpaper .bubble.me,
  .messages.has-wallpaper .tapback,
  .messages.has-wallpaper .typing-bubble {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .messages.has-wallpaper .bubble.them {
    background: color-mix(in srgb, var(--gray-bubble) 93%, transparent) !important;
  }
  .messages.has-wallpaper .bubble.me {
    background: linear-gradient(135deg, rgba(124,108,246,0.97), rgba(156,140,255,0.93)) !important;
  }
  .messages.has-wallpaper .tapback { background: rgba(30,32,36,0.88) !important; }
  .messages.has-wallpaper .typing-bubble {
    background: color-mix(in srgb, var(--gray-bubble) 93%, transparent) !important;
  }

  /* Lo scorrimento della chat non deve trascinare la pagina sotto */
  .messages { overscroll-behavior: contain; }

  /* Livelli dello sfondo animato: promossi a layer GPU, animati SOLO in
     transform/opacity (il browser non deve ricalcolare la sfocatura). */
  .chat-anim-bg .cab-layer {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* "Respiro": animava filter/brightness a tutto schermo (ricalcolo per frame).
   Stesso effetto con opacity+transform, che la GPU gestisce gratis. */
.chat-anim-bg.anim-breathe { animation: none; position: relative; }
.chat-anim-bg.anim-breathe .cab-layer {
  display: block;
  inset: 0;
  background: radial-gradient(closest-side, rgba(124,108,251,0.55), transparent 72%);
  animation: cabBreathe2 9s ease-in-out infinite;
}
.chat-anim-bg.anim-breathe .l2 { animation-delay: -3s; opacity: .7; }
.chat-anim-bg.anim-breathe .l3 { animation-delay: -6s; opacity: .5; }
@keyframes cabBreathe2 {
  0%, 100% { opacity: .35; transform: scale(1) translateZ(0); }
  50%      { opacity: .8;  transform: scale(1.08) translateZ(0); }
}

/* L'animazione di comparsa vale SOLO per le bolle davvero nuove.
   Prima era su .bubble-row: ad ogni aggiornamento della chat TUTTE le bolle
   si ri-animavano insieme (scatto visibile ad ogni nuovo messaggio). */
.bubble-row { animation: none !important; }
.bubble-row.is-new .bubble { animation: bubbleIn .22s cubic-bezier(.25,1.3,.4,1); }

/* Pulsante "carica messaggi precedenti" */
.load-older-wrap { display: flex; justify-content: center; padding: 4px 0 12px; }
.load-older-btn {
  border: 1px solid var(--separator);
  background: var(--bg-secondary);
  color: var(--comet-1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 18px;
  cursor: pointer;
}
.load-older-btn:active { transform: scale(0.97); }
.load-older-btn[disabled] { opacity: .6; }

/* Menu che compare tenendo premuto su una chat (preferiti / blocco) */
.row-menu-title {
  padding: 12px 16px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--separator);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.msg-action.row-action-danger { color: var(--red); }

/* =========================================================
   MESSAGGI VOCALI
========================================================= */
.mic-btn {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--comet-1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .18s ease;
}
.mic-btn:active { transform: scale(0.9); background: color-mix(in srgb, var(--comet-1) 16%, transparent); }
.mic-btn[hidden] { display: none; }
.send-btn[hidden] { display: none; }

/* --- Barra di registrazione --- */
.rec-bar { gap: 10px; align-items: center; }
.rec-bar[hidden] { display: none; }
.rec-cancel {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--red, #FF453A);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.rec-cancel:active { transform: scale(0.9); }
.rec-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red, #FF453A);
  flex-shrink: 0;
  animation: recPulse 1.2s ease-in-out infinite;
}
@keyframes recPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.rec-time {
  font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  min-width: 38px;
}
.rec-wave { flex: 1; height: 30px; min-width: 0; }
.rec-send { flex-shrink: 0; }
.reduce-motion .rec-dot { animation: none; }

/* --- Riproduttore in chat --- */
.bubble.has-voice { padding: 9px 12px; }
.voice-player {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 196px;
}
.voice-play {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .12s ease;
}
.bubble.them .voice-play { background: color-mix(in srgb, var(--comet-1) 88%, transparent); color: #fff; }
.voice-play:active { transform: scale(0.9); }
.voice-play.loading { opacity: .5; pointer-events: none; }

.voice-wave {
  flex: 1;
  min-width: 0;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.voice-wave i {
  flex: 1;
  min-width: 1.5px;
  border-radius: 2px;
  background: currentColor;
  opacity: .38;
  transition: opacity .12s linear;
}
.voice-wave i.on { opacity: 1; }
.bubble.me .voice-wave { color: #fff; }
.bubble.them .voice-wave { color: var(--text); }

.voice-time {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  opacity: .75;
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}
.voice-speed {
  border: none;
  background: rgba(255,255,255,0.18);
  color: inherit;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: .85;
}
.bubble.them .voice-speed { background: color-mix(in srgb, var(--text) 14%, transparent); }
.voice-player.pending { opacity: .7; }
.voice-player.pending .voice-play { pointer-events: none; }

/* =========================================================
   SPUNTE STILE TELEGRAM/SIGNAL
   1 spunta grigia  = in invio (non ancora arrivato al server)
   2 spunte grigie  = inviato/consegnato
   2 spunte azzurre = visualizzato
========================================================= */
.msg-ticks {
  float: right;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin: 10px -5px -3px 7px;
  pointer-events: none;
}
.bubble.me .msg-ticks { color: rgba(255,255,255,0.72); }
.bubble.me .msg-ticks.read { color: #97F5FF; filter: drop-shadow(0 0 4px rgba(120,235,255,0.55)); }
.msg-ticks.pending { color: rgba(255,255,255,0.55); animation: tickPulse 1.1s ease-in-out infinite; }
@keyframes tickPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.reduce-motion .msg-ticks.pending { animation: none; }
/* Sopra foto e video le spunte galleggiano nell'angolo (leggibili su ogni sfondo) */
.bubble.has-image .msg-ticks {
  position: absolute; right: 10px; bottom: 8px;
  float: none; margin: 0;
  color: rgba(255,255,255,0.92);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.65));
}
.bubble.has-image .msg-ticks.read { color: #97F5FF; }
/* Sui vocali restano in linea, ma senza spingere il player */
.bubble.has-voice .msg-ticks { margin-top: 6px; }
/* Sticker e jumbo non hanno bolla: spunte discrete sotto, nei colori del tema */
.bubble.is-sticker .msg-ticks,
.bubble.is-jumbo .msg-ticks {
  position: static; float: right;
  margin: 4px 0 0 6px;
  color: var(--text-secondary);
  filter: none;
}
.bubble.is-sticker .msg-ticks.read,
.bubble.is-jumbo .msg-ticks.read { color: #35B8FF; filter: none; }

/* =========================================================
   STICKER & EMOJI JUMBO — niente bolla, solo il contenuto
========================================================= */
.bubble.is-sticker,
.bubble.is-jumbo {
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 4px 0;
}
.theme-realism .bubble.is-sticker::before,
.theme-realism .bubble.is-sticker::after,
.theme-realism .bubble.is-jumbo::before,
.theme-realism .bubble.is-jumbo::after { display: none !important; }
.bubble-sticker {
  font-size: 84px;
  line-height: 1.08;
  text-align: center;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,0.28));
  -webkit-user-select: none; user-select: none;
}
.bubble-text.jumbo {
  font-size: 46px;
  line-height: 1.15;
  padding: 0;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.22));
}
.bubble.is-sticker .bubble-quote,
.bubble.is-jumbo .bubble-quote { margin-bottom: 4px; }

/* =========================================================
   TEMA MONO — bianco e nero essenziale, cromature grigie.
   Palette completa: attivo di default alla prima installazione.
========================================================= */
.theme-mono {
  --bg: #0A0A0B;
  --bg-secondary: #101012;
  --bg-elevated: #17181A;
  --bg-input: #1A1B1E;
  --text: #F5F5F7;
  --text-secondary: #98989F;
  --separator: rgba(255,255,255,0.10);
  --blue: #E9EAEE;
  --green: #C8CCD2;
  --gray-bubble: #1C1D21;
  --tabbar-bg: rgba(12,12,14,0.86);
  --header-bg: rgba(10,10,11,0.82);
  --comet-1: #F4F5F7;
  --comet-2: #B9BEC6;
  --comet-grad: linear-gradient(150deg, #FBFCFD 0%, #D9DCE1 46%, #AAB0B8 58%, #E7EAEE 100%);
  --comet-glow: rgba(255,255,255,0.10);
  --glass-bg: rgba(30,31,34,0.58);
  --glass-bg-strong: rgba(23,24,27,0.84);
  --glass-border: rgba(255,255,255,0.13);
  --glass-shine: rgba(255,255,255,0.10);
  --glass-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
/* Le mie bolle: argento cromato con testo scuro (leggibilità massima) */
.theme-mono .bubble.me {
  color: #0C0D0F;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.9);
}
.theme-mono .bubble.me .msg-ticks { color: rgba(10,10,12,0.45); }
.theme-mono .bubble.me .msg-ticks.read { color: #0B84FF; filter: none; }
.theme-mono .msg-ticks.pending { color: rgba(10,10,12,0.35); }
.theme-mono .bubble.is-sticker .msg-ticks.read,
.theme-mono .bubble.is-jumbo .msg-ticks.read { color: #35B8FF; }
/* Cromature: bottoni principali in metallo lucido con icone scure */
.theme-mono .send-btn.enabled,
.theme-mono .btn-primary,
.theme-mono .dialog-ok:not(.danger) {
  color: #0C0D0F;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -1px 0 rgba(0,0,0,0.12);
}
.theme-mono .send-btn svg *, .theme-mono .rec-send svg * { stroke: #0C0D0F; }
.theme-mono .unread-badge { color: #0C0D0F; }
.theme-mono .badge-owner { color: #0C0D0F; }
.theme-mono .unread-dot { box-shadow: 0 0 6px rgba(255,255,255,0.25); }
/* Loghi: bianchi sul nero */
.theme-mono .title-logo { filter: none; }
.theme-mono .auth-brand-mark { filter: none; }
.theme-mono .footer-logo { filter: none; }
/* Bordo cromato sottile sulle superfici in vetro */
.theme-mono .tab-bar,
.theme-mono .sheet,
.theme-mono .dialog-card {
  border: 1px solid rgba(255,255,255,0.12);
}
/* Il pallino online resta percepibile ma in tono grigio-chiaro */
.theme-mono .online-dot { background: #D6DAE0; box-shadow: 0 0 6px rgba(255,255,255,0.35); }