/* =====================================================================
   WeebChat — messenger Frutiger Aero, variante PINK/magenta
   (chrome finestra resta aqua-glass standard; solo i contenuti dell'app
   sono rosa: header, badge, bolla "mia", pulsante invio)
   ===================================================================== */
.weebchat-win .win-body { overflow: hidden; }
.app.weebchat { position: relative; overflow: hidden; flex-direction: row; }

/* ---------- colonna sinistra: elenco chat ---------- */
.app.weebchat .wc-side {
  flex: none; width: 300px; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid rgba(180, 10, 100, 0.22);
  background: linear-gradient(180deg, rgba(255,244,250,0.65), rgba(255,225,242,0.5));
}
.app.weebchat .wc-side-head {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,214,240,0.78) 50%, rgba(255,170,224,0.68) 51%, rgba(255,228,246,0.9) 100%);
  border-bottom: 1px solid rgba(180,10,100,0.22);
  box-shadow: 0 2px 8px rgba(150,0,80,0.14);
}
.app.weebchat .wc-logo { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(150,0,80,0.35)); }
.app.weebchat .wc-side-title { font: 700 1.1rem var(--font-display); letter-spacing: -0.01em; color: #0b3a80; text-shadow: 0 1px 0 rgba(255,255,255,0.9); }

.app.weebchat .wc-list {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
}
.app.weebchat .wc-list::-webkit-scrollbar { width: 9px; }
.app.weebchat .wc-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.3); }
.app.weebchat .wc-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffc3e6, #ff6fc4); border-radius: 999px; border: 2px solid rgba(255,255,255,0.7); }

.app.weebchat .wc-side-empty {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; font: 600 0.9rem var(--font); color: #0b3a80; opacity: 0.75; line-height: 1.5;
}

.app.weebchat .wc-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(180,10,100,0.1);
  background: transparent; cursor: pointer; text-align: left; color: #0b3a80; font-family: var(--font);
}
.app.weebchat .wc-row:hover { background: rgba(255,140,205,0.16); }
.app.weebchat .wc-row.active { background: linear-gradient(180deg, rgba(255,180,224,0.55), rgba(255,120,195,0.4)); }
.app.weebchat .wc-row-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #ffffff, #ffd9ee 60%, #ff9fd6);
  border: 1px solid rgba(255,255,255,0.95); box-shadow: 0 3px 7px rgba(150,0,80,0.3), 0 1px 0 rgba(255,255,255,0.9) inset;
  display: grid; place-items: center;
}
.app.weebchat .wc-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.app.weebchat .wc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.app.weebchat .wc-row-top { display: flex; align-items: baseline; gap: 6px; }
.app.weebchat .wc-row-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.app.weebchat .wc-row-time { flex: none; font-size: 0.68rem; opacity: 0.7; }
.app.weebchat .wc-row-bottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.app.weebchat .wc-row-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; opacity: 0.75; }
.app.weebchat .wc-row-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb6e0, #ff2d92); box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 1px 3px rgba(150,0,80,0.5);
}

.app.weebchat .wc-badge {
  flex: none; font: 700 0.6rem var(--font); text-transform: uppercase; letter-spacing: 0.03em; color: #fff;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.app.weebchat .wc-badge.role-marianna { background: linear-gradient(180deg, #ffb6e0, #ff2d92); text-shadow: 0 -1px 0 rgba(140,0,70,0.6); }
.app.weebchat .wc-badge.role-user { background: linear-gradient(180deg, #bfe4ff, #3aa8ff); text-shadow: 0 -1px 0 rgba(0,50,120,0.6); }
.app.weebchat .wc-badge.role-admin { background: linear-gradient(180deg, #e2ffb0, #7ddc2b); color: #0b3a80; text-shadow: 0 -1px 0 rgba(30,90,0,0.4); }

/* ---------- colonna destra: conversazione ---------- */
.app.weebchat .wc-conv { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; position: relative; }

.app.weebchat .wc-conv-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center; color: #0b3a80; opacity: 0.6;
}
.app.weebchat .wc-conv-empty img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(150,0,80,0.25)); }

.app.weebchat .wc-conv-active { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.app.weebchat .wc-conv-head {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,214,240,0.72) 50%, rgba(255,170,224,0.6) 51%, rgba(255,228,246,0.86) 100%);
  border-bottom: 1px solid rgba(180,10,100,0.22);
  box-shadow: 0 2px 8px rgba(150,0,80,0.12);
}
.app.weebchat .wc-back { display: none; flex: none; border: 0; background: transparent; color: #0b3a80; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.app.weebchat .wc-conv-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: radial-gradient(circle at 35% 30%, #ffffff, #ffd9ee 60%, #ff9fd6);
  border: 1px solid rgba(255,255,255,0.95); box-shadow: 0 3px 8px rgba(150,0,80,0.3), 0 1px 0 rgba(255,255,255,0.9) inset;
}
.app.weebchat .wc-conv-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.app.weebchat .wc-conv-info b { font-size: 1rem; color: #0b3a80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app.weebchat .wc-conv-info span { font-size: 0.72rem; color: #0b3a80; opacity: 0.7; }

/* ---------- messaggi ---------- */
.app.weebchat .wc-messages {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255,255,255,0.65) 0, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 8% 92%, rgba(255,190,225,0.5) 0, rgba(255,190,225,0) 30%),
    linear-gradient(180deg, rgba(255,240,248,0.5), rgba(255,222,240,0.4));
  scroll-behavior: smooth;
}
.app.weebchat .wc-messages::-webkit-scrollbar { width: 10px; }
.app.weebchat .wc-messages::-webkit-scrollbar-track { background: rgba(255,255,255,0.35); }
.app.weebchat .wc-messages::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffc3e6, #ff6fc4); border-radius: 999px; border: 2px solid rgba(255,255,255,0.7); }

.app.weebchat .wc-msg-hint { align-self: center; margin: auto; font: 600 0.85rem var(--font); color: #0b3a80; opacity: 0.55; }

.app.weebchat .wc-day { align-self: center; margin: 4px 0; }
.app.weebchat .wc-day span {
  display: inline-block; padding: 4px 12px; border-radius: 999px; font: 700 0.68rem var(--font);
  color: #0b3a80; background: rgba(255,255,255,0.7); border: 1px solid rgba(180,10,100,0.18);
  box-shadow: 0 1px 4px rgba(150,0,80,0.15);
}

.app.weebchat .wc-msg { display: flex; max-width: 78%; animation: wc-pop 0.22s cubic-bezier(.2,1.2,.3,1) both; }
.app.weebchat .wc-msg.mine { align-self: flex-end; }
.app.weebchat .wc-msg.their { align-self: flex-start; }
.app.weebchat .wc-msg.pending { opacity: 0.65; }
@keyframes wc-pop { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }

.app.weebchat .wc-bubble { position: relative; overflow: hidden; min-width: 46px; padding: 7px 11px 5px; border-radius: 15px; font-size: 0.93rem; line-height: 1.4; word-break: break-word; }
.app.weebchat .wc-bubble::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 1px; height: 42%;
  border-radius: inherit; border-bottom-left-radius: 40% 60%; border-bottom-right-radius: 40% 60%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.02)); pointer-events: none;
}
.app.weebchat .wc-text { position: relative; z-index: 1; white-space: pre-wrap; }
.app.weebchat .wc-meta { position: relative; z-index: 1; display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; }
.app.weebchat .wc-time { font-size: 0.64rem; opacity: 0.75; }
.app.weebchat .wc-check { font-size: 0.72rem; opacity: 0.85; }

/* loro: vetro bianco, coda in basso a sinistra */
.app.weebchat .wc-msg.their .wc-bubble {
  color: #0b3a80;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,235,246,0.82));
  border: 1px solid rgba(255,255,255,0.98);
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 12px rgba(150,0,80,0.16), 0 0 0 1px rgba(230,120,190,0.22), 0 1px 0 rgba(255,255,255,0.9) inset;
}
/* mie: rosa/magenta glossy, coda in basso a destra */
.app.weebchat .wc-msg.mine .wc-bubble {
  color: #fff; text-shadow: 0 1px 2px rgba(120,0,60,0.6), 0 0 6px rgba(180,0,90,0.4);
  background: linear-gradient(180deg, #ffbfe8 0%, #ff5fc0 45%, #ec1f96 50%, #c8127a 100%);
  border: 1px solid #9c0f63;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(150,0,80,0.35), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.app.weebchat .wc-msg.mine .wc-bubble::before { left: 5%; right: 5%; top: 4%; height: 38%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.03)); }
.app.weebchat .wc-msg.mine .wc-time, .app.weebchat .wc-msg.mine .wc-check { color: #ffe6f5; text-shadow: none; }

/* ---------- barra di input ---------- */
.app.weebchat .wc-inputbar {
  flex: none; display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,225,242,0.6));
  border-top: 1px solid rgba(180,10,100,0.22);
  box-shadow: 0 -2px 10px rgba(150,0,80,0.1);
}
.app.weebchat .wc-input { flex: 1; height: 38px; min-height: 38px; max-height: 110px; resize: none; padding: 8px 12px; line-height: 1.35; font-family: var(--font); overflow-y: auto; }
.app.weebchat .wc-input:disabled { opacity: 0.55; }
.app.weebchat .wc-send {
  flex: none; position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #9c0f63;
  background: linear-gradient(180deg, #ffbfe8 0%, #ff5fc0 45%, #ec1f96 50%, #c8127a 100%);
  box-shadow: 0 3px 8px rgba(150,0,80,0.4), 0 1px 0 rgba(255,255,255,0.85) inset;
  display: grid; place-items: center; cursor: pointer; color: #fff;
}
.app.weebchat .wc-send::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 10%; height: 42%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.05)); pointer-events: none;
}
.app.weebchat .wc-send i { position: relative; z-index: 1; font-style: normal; font-size: 1.05rem; transform: translateX(-1px) rotate(0deg); text-shadow: 0 1px 2px rgba(120,0,60,0.5); }
.app.weebchat .wc-send:hover { filter: brightness(1.08); }
.app.weebchat .wc-send:active { transform: translateY(1px) scale(0.97); }
.app.weebchat .wc-send:disabled { opacity: 0.5; cursor: default; filter: none; }

/* elementi mostrati/nascosti da JS via .hidden — le regole sopra (display:flex, con
   specificità più alta del semplice [hidden] dello UA stylesheet) altrimenti vincerebbero
   e li terrebbero visibili: vedi lo stesso problema commentato in css/mobile.css. */
.app.weebchat .wc-list[hidden],
.app.weebchat .wc-side-empty[hidden],
.app.weebchat .wc-conv-empty[hidden],
.app.weebchat .wc-conv-active[hidden] { display: none; }

/* ---------- toast (errori 403 ecc.) ---------- */
.app.weebchat .wc-toast {
  position: absolute; left: 50%; bottom: 76px; transform: translate(-50%, 16px); opacity: 0;
  padding: 9px 18px; border-radius: 999px; z-index: 6; pointer-events: none; white-space: nowrap; max-width: 90%;
  overflow: hidden; text-overflow: ellipsis;
  font: 700 0.86rem var(--font); color: #fff; text-shadow: 0 -1px 0 rgba(120,0,60,0.6);
  background: linear-gradient(180deg, #ffbfe8 0%, #ff5fc0 45%, #ec1f96 50%, #c8127a 100%);
  border: 1px solid #9c0f63; box-shadow: 0 6px 18px rgba(150,0,80,0.35), 0 1px 0 rgba(255,255,255,0.9) inset;
  transition: transform 0.3s cubic-bezier(.2,1.3,.3,1), opacity 0.3s ease;
}
.app.weebchat .wc-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* =====================================================================
   Mobile: due pannelli a tutto schermo (lista / conversazione) con
   freccia indietro; input bar sopra la tastiera (flex 100%, no vh).
   ===================================================================== */
html.mobile .app.weebchat { flex-direction: column; }
html.mobile .app.weebchat .wc-side, html.mobile .app.weebchat .wc-conv { width: 100%; height: 100%; }
html.mobile .app.weebchat[data-view="list"] .wc-conv { display: none; }
html.mobile .app.weebchat[data-view="conv"] .wc-side { display: none; }
html.mobile .app.weebchat .wc-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }

html.mobile .app.weebchat .wc-side-head { padding: 8px 12px; }
html.mobile .app.weebchat .wc-row { padding: 12px; min-height: 44px; }
html.mobile .app.weebchat .wc-row-avatar { width: 46px; height: 46px; }
html.mobile .app.weebchat .wc-row-top b { font-size: 0.98rem; }
html.mobile .app.weebchat .wc-row-preview { font-size: 0.82rem; }

html.mobile .app.weebchat .wc-conv-head { padding: 6px 10px; }
html.mobile .app.weebchat .wc-messages { padding: 10px 10px 8px; -webkit-overflow-scrolling: touch; }
html.mobile .app.weebchat .wc-msg { max-width: 88%; }
html.mobile .app.weebchat .wc-bubble { font-size: 1rem; }
html.mobile .app.weebchat .wc-inputbar { padding: 8px 10px calc(8px + var(--safe-bottom, 0px)); gap: 8px; }
html.mobile .app.weebchat .wc-input { min-height: 44px; height: 44px; }
html.mobile .app.weebchat .wc-send { width: 44px; height: 44px; }