/* Chat: struttura a pannelli arrotondati sullo sfondo del tema. Colori solo da theme.css (--wc-*). */
.chat-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--wc-bg); color: var(--wc-text); font-family: var(--wc-font); }
.min-w-0 { min-width: 0; }
/* La pagina della chat è bloccata a tutto schermo: scorrono solo i messaggi e gli elenchi, mai la pagina intera
   (su Safari dell'iPhone scorreva tutta, e "tirando giù" si ricaricava). */
html:has(> .chat-body) { height: 100%; overflow: hidden; overscroll-behavior: none; }
.chat-body { position: fixed; left: 0; right: 0; top: var(--app-top, 0); height: var(--app-h, 100dvh); bottom: auto; overscroll-behavior: none; }
@media (max-width: 991.98px) { #convReduce { display: none !important; } }
.offcanvas-lg .offcanvas-header { justify-content: flex-start; gap: .6rem; }
.offcanvas-lg .offcanvas-title { font-weight: 800; }
.back-btn { position: relative; }

/* ---------- barra in alto ---------- */
.app-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; padding-top: max(.5rem, env(safe-area-inset-top)); flex: 0 0 auto; }
.brand { display: flex; align-items: center; gap: .6rem; min-width: 0; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
.brand-mark { width: 2.1rem; height: 2.1rem; border-radius: 12px; background: var(--wc-accent); color: var(--wc-accent-contrast); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icon-btn { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 14px; background: var(--wc-surface); color: var(--wc-text); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: var(--wc-shadow); transition: background .15s, color .15s; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--wc-accent-soft); color: var(--wc-accent-text); }
.icon-btn .wc-icon { width: 1.25rem; height: 1.25rem; }
.chat-header .icon-btn { box-shadow: none; background: var(--wc-surface-2); }
.count-badge { position: absolute; top: -.3rem; right: -.3rem; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--wc-danger); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1.2rem; text-align: center; }
.count-badge.count-muted { background: var(--wc-text); color: var(--wc-surface); }
.count-badge:empty { display: none; }
.me-chip { display: flex; align-items: center; gap: .5rem; border: 0; background: var(--wc-surface); color: var(--wc-text); border-radius: 999px; padding: .25rem .8rem .25rem .25rem; max-width: 12rem; font-weight: 700; box-shadow: var(--wc-shadow); }
.me-chip:hover { background: var(--wc-accent-soft); }
.me-name { min-width: 0; }
@media (max-width: 575.98px) { .me-chip { padding: .25rem; } .me-name { display: none; } }
.me-menu { min-width: 16rem; }
.me-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.me-menu .dropdown-item .wc-icon { color: var(--wc-muted); }
.theme-picker { display: flex; gap: .25rem; margin: .25rem .75rem .5rem; padding: .25rem; border-radius: 14px; background: var(--wc-surface-2); }
.theme-picker button { flex: 1; border: 0; background: none; color: var(--wc-muted); border-radius: 10px; padding: .35rem .2rem; font-size: .72rem; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.theme-picker button.active { background: var(--wc-surface); color: var(--wc-accent-text); box-shadow: var(--wc-shadow); }

/* ---------- pannelli ---------- */
.chat-layout { flex: 1; display: flex; min-height: 0; gap: .75rem; padding: 0 .75rem .75rem; }
.chat-layout .chat-side { background-color: var(--wc-surface) !important; } /* Bootstrap mette trasparente !important sugli offcanvas da desktop */
@media (min-width: 992px) {
  .chat-side { width: 300px; flex: 0 0 300px; border-radius: var(--wc-radius); box-shadow: var(--wc-shadow); overflow-y: auto; }
  .chat-side-right { width: 240px; flex-basis: 240px; }
}
@media (max-width: 991.98px) {
  .chat-layout { padding: 0; gap: 0; }
  .chat-main { border-radius: var(--wc-radius) var(--wc-radius) 0 0; }
}
.offcanvas-lg .offcanvas-header { padding: 1rem 1rem .25rem; }
.side-head { padding: 1rem 1rem .25rem; }
.side-heading { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .75rem; }
.filters { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.filters::-webkit-scrollbar { display: none; }
.chip { border: 0; border-radius: 999px; padding: .35rem .65rem; font-size: .78rem; font-weight: 700; white-space: nowrap; background: var(--wc-surface-2); color: var(--wc-muted); }
.chip:hover { color: var(--wc-text); }
.chip.active { background: var(--wc-accent); color: var(--wc-accent-contrast); }
.side-title { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--wc-muted); padding: .9rem 1.1rem .35rem; }
.side-title span { text-transform: none; letter-spacing: 0; }
.side-note { font-size: .82rem; color: var(--wc-muted); padding: .35rem 1.1rem .75rem; margin: 0; }
.side-note:empty { display: none; }
.conv-list { display: flex; flex-direction: column; gap: 2px; padding: 0 .5rem; }
.conv-item { display: flex; align-items: center; gap: .7rem; width: 100%; border: 0; background: none; color: var(--wc-text); text-align: left; padding: .55rem .6rem; border-radius: 16px; transition: background .12s; }
.conv-item:hover { background: var(--wc-surface-2); }
.conv-item.active { background: var(--wc-accent-soft); }
.conv-item:disabled { opacity: 1; cursor: default; }
.conv-body { flex: 1; min-width: 0; }
.conv-row { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.conv-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { font-size: .72rem; color: var(--wc-muted); flex: 0 0 auto; }
.conv-item.has-unread .conv-time { color: var(--wc-accent-text); font-weight: 700; }
.conv-preview { flex: 1; min-width: 0; font-size: .84rem; color: var(--wc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: .3rem; }
.conv-preview .wc-icon { width: 1em; height: 1em; flex: 0 0 auto; }
.conv-preview .pv-text { overflow: hidden; text-overflow: ellipsis; }
.pv-status { display: inline-flex; color: var(--wc-muted); flex: 0 0 auto; }
.pv-status .wc-icon { width: 1.05em; height: 1.05em; }
.pv-status.status-read { color: #2F8FDB; }
[data-theme="notte"] .pv-status.status-read { color: #6CC4FF; }
.conv-item.has-unread .conv-preview { color: var(--wc-text); }
.conv-note { color: var(--wc-accent-text); font-weight: 600; }
.unread-pill { min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: var(--wc-accent); color: var(--wc-accent-contrast); font-size: .72rem; font-weight: 800; line-height: 1.35rem; text-align: center; flex: 0 0 auto; }
.conv-lock { color: var(--wc-muted); flex: 0 0 auto; }
.conv-tag { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .4rem; border-radius: 6px; background: var(--wc-surface-2); color: var(--wc-muted); flex: 0 0 auto; }
.conv-tag.tag-admin { background: rgba(217, 58, 63, .12); color: var(--wc-danger); }
.conv-tag.tag-moderator { background: rgba(30, 158, 106, .14); color: var(--wc-online); }

/* ---------- avatar: iniziale su colore fisso per nome ---------- */
.avatar { --av-bg: var(--wc-accent-soft); --av-fg: var(--wc-accent-text); position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--av-bg); color: var(--av-fg); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-weight: 800; font-size: 1.05rem; line-height: 1; user-select: none; }
.avatar:empty { display: none; }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.avatar-sm { width: 2rem; height: 2rem; font-size: .82rem; }
.avatar-xs { width: 1.75rem; height: 1.75rem; font-size: .72rem; }
.avatar.is-channel { border-radius: 14px; }
.avatar.is-guest { --av-bg: var(--wc-surface-2); --av-fg: var(--wc-muted); }
.avatar .wc-icon { width: 1.2rem; height: 1.2rem; }
.avatar .presence { position: absolute; right: -1px; bottom: -1px; width: .8rem; height: .8rem; border-radius: 50%; background: var(--wc-online); border: 2px solid var(--wc-surface); }
.av-0 { --av-bg: #E8EAFD; --av-fg: #3B44C0; }
.av-1 { --av-bg: #FDE7EC; --av-fg: #B4234B; }
.av-2 { --av-bg: #DFF5EA; --av-fg: #17734F; }
.av-3 { --av-bg: #FFF0D9; --av-fg: #9A5A00; }
.av-4 { --av-bg: #E3F1FC; --av-fg: #1D5F99; }
.av-5 { --av-bg: #F1E6FC; --av-fg: #7134B0; }
.av-6 { --av-bg: #DDF4F4; --av-fg: #146B6B; }
.av-7 { --av-bg: #FBE6DC; --av-fg: #A6411B; }
[data-theme="notte"] .av-0 { --av-bg: #2B2F63; --av-fg: #C3C8FF; }
[data-theme="notte"] .av-1 { --av-bg: #4A2231; --av-fg: #FFB8C9; }
[data-theme="notte"] .av-2 { --av-bg: #183E30; --av-fg: #9FE6C4; }
[data-theme="notte"] .av-3 { --av-bg: #47361A; --av-fg: #FFD48C; }
[data-theme="notte"] .av-4 { --av-bg: #1B3550; --av-fg: #A9D3FA; }
[data-theme="notte"] .av-5 { --av-bg: #3A2556; --av-fg: #DDBDFF; }
[data-theme="notte"] .av-6 { --av-bg: #163F40; --av-fg: #9DE3E3; }
[data-theme="notte"] .av-7 { --av-bg: #4A2A1E; --av-fg: #FFC3A8; }

/* ---------- colonna centrale ---------- */
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wc-chat-bg); border-radius: var(--wc-radius); box-shadow: var(--wc-shadow); overflow: hidden; }
.chat-header { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--wc-border); background: var(--wc-surface); min-height: 4rem; }
.conv-title { font-weight: 800; font-size: 1.02rem; }
.conv-topic, .conv-status { font-size: .8rem; color: var(--wc-muted); }
#convCall:not(.d-none) { display: flex; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.empty-state { color: var(--wc-muted); text-align: center; margin-top: 3rem; padding: 0 1rem; }
.chat-composer { display: flex; gap: .5rem; align-items: flex-end; padding: .6rem .75rem; background: var(--wc-surface); border-top: 1px solid var(--wc-border); padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
.chat-composer textarea { resize: none; max-height: 9rem; min-height: 2.75rem; overflow-y: hidden; border-radius: 22px; padding: .6rem 1rem; background: var(--wc-surface-2); border-color: transparent; line-height: 1.35; }
.chat-composer textarea:focus { background: var(--wc-surface); }
.send-btn { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--wc-accent); color: var(--wc-accent-contrast); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .15s, transform .1s; }
.send-btn:hover { background: var(--wc-accent-hover); }
.send-btn:active { transform: scale(.94); }
.send-btn:disabled { opacity: .45; }
.send-btn .wc-icon { width: 1.2rem; height: 1.2rem; }
.attach-group { display: flex; }
.attach-btn { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--wc-surface-2); color: var(--wc-muted); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; font-size: 1.1rem; }
.attach-btn:hover, .attach-btn[aria-expanded="true"] { color: var(--wc-accent-text); background: var(--wc-accent-soft); }
.attach-btn .wc-icon { width: 1.25rem; height: 1.25rem; }
.attach-menu { min-width: 12rem; }
.attach-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.chat-composer.drop-target, .dm-win-composer.drop-target { outline: 2px dashed var(--wc-accent); outline-offset: -4px; }

/* ---------- fissati, risposta, sta scrivendo ---------- */
.pin-bar { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; border-bottom: 1px solid var(--wc-border); background: var(--wc-surface); color: var(--wc-text); padding: .45rem 1rem; font-size: .82rem; text-align: left; }
.pin-bar .wc-icon { color: var(--wc-accent-text); }
.pin-bar .pin-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar { display: flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-top: 1px solid var(--wc-border); background: var(--wc-surface); font-size: .82rem; }
.reply-bar > .wc-icon { color: var(--wc-accent-text); }
.reply-bar .reply-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--wc-accent); padding-left: .5rem; }
.typing-line { font-size: .76rem; color: var(--wc-muted); font-style: italic; padding: 0 1.1rem; min-height: 1.15rem; }
.typing-line:empty { min-height: 0; }
.toast-link { cursor: pointer; }
.toast-link:hover { text-decoration: underline; }

/* ---------- messaggi a fumetto: i miei a destra, gli altri a sinistra con avatar ---------- */
:root { --wc-tick-read: #8EE8FF; }
[data-theme="salvia"] { --wc-tick-read: #0F7FC0; }
.msg { display: flex; align-items: flex-end; gap: .5rem; margin-top: .6rem; }
.msg.cont { margin-top: .15rem; }
.msg.mine { flex-direction: row-reverse; }
.msg-av { flex: 0 0 2rem; display: flex; }
.msg.cont .msg-av { visibility: hidden; }
.is-dm .msg-av, .dm-win .msg-av { display: none; }
.msg-bubble { min-width: 0; max-width: min(78%, 36rem); padding: .4rem .75rem .5rem; border-radius: 18px 18px 18px 6px; background: var(--wc-bubble-in); color: var(--wc-bubble-in-text); }
.msg.mine .msg-bubble { background: var(--wc-bubble-out); color: var(--wc-bubble-out-text); border-radius: 18px 18px 6px 18px; }
.dm-win .msg-bubble { max-width: 85%; }
.msg-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .1rem; }
.msg-author { font-weight: 800; font-size: .82rem; background: none; border: 0; padding: 0; color: var(--av-fg, inherit); }
.msg-author:hover { text-decoration: underline; }
.msg.mine .msg-author { color: inherit !important; }
.msg.cont .msg-author, .msg.cont .role-tag { display: none; }
.role-admin { color: var(--wc-danger) !important; }
.role-moderator { color: var(--wc-online) !important; }
.role-guest { color: var(--wc-muted) !important; font-weight: 600; }
.role-tag { font-size: .6rem; }
.msg-time { font-size: .72rem; color: var(--wc-muted); }
.msg-status { display: inline-flex; color: var(--wc-muted); }
.msg-status .wc-icon { width: 1rem; height: 1rem; }
.msg.mine .msg-time, .msg.mine .msg-status, .msg.mine .msg-more, .msg.mine .msg-fwd { color: var(--wc-bubble-out-muted); }
.msg.mine .msg-status.status-read { color: var(--wc-tick-read); }
.msg-more { border: 0; background: none; color: var(--wc-muted); font-weight: 800; font-size: 1.05rem; line-height: 1; padding: 0 .3rem; border-radius: 8px; }
.msg-more:hover, .msg-more:focus-visible, .msg-more[aria-expanded="true"] { background: rgba(var(--wc-accent-rgb), .12); color: var(--wc-accent-text); }
.msg.mine .msg-more:hover, .msg.mine .msg-more[aria-expanded="true"] { background: var(--wc-quote-out); color: inherit; }
.msg-body { white-space: pre-wrap; word-break: break-word; line-height: 1.42; }
.msg-fwd { display: flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--wc-muted); font-style: italic; }
.msg-quote { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--wc-accent); background: rgba(var(--wc-accent-rgb), .08); color: inherit; font-size: .8rem; padding: .25rem .55rem; margin: .15rem 0 .3rem; border-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.mine .msg-quote { background: var(--wc-quote-out); border-left-color: currentColor; }
.msg-quote strong { color: inherit; }
.msg-reactions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.msg-reactions:empty { display: none; }
.msg-reaction { border: 1px solid var(--wc-border); background: var(--wc-surface); color: var(--wc-text); border-radius: 999px; font-size: .78rem; padding: 0 .5rem; line-height: 1.6; }
.msg-reaction.mine { border-color: var(--wc-accent); background: var(--wc-accent-soft); color: var(--wc-accent-text); }
.msg.deleted .msg-bubble { background: transparent; border: 1px dashed var(--wc-border); color: var(--wc-muted); }
.msg.deleted .msg-time, .msg.deleted .msg-status { color: var(--wc-muted); }
.msg.flash-target .msg-bubble { animation: flash-target 1.6s ease-out; }
@keyframes flash-target { 0% { box-shadow: 0 0 0 5px rgba(var(--wc-accent-rgb), .45); } 100% { box-shadow: 0 0 0 0 rgba(var(--wc-accent-rgb), 0); } }
.day-sep { display: flex; justify-content: center; margin: 1rem 0 .3rem; position: sticky; top: -.5rem; z-index: 2; pointer-events: none; }
.day-sep.covered { visibility: hidden; }
.day-sep span { font-size: .72rem; font-weight: 700; color: var(--wc-muted); background: var(--wc-surface); border: 1px solid var(--wc-border); padding: .2rem .75rem; border-radius: 999px; box-shadow: var(--wc-shadow); }
.msg-system { text-align: center; font-size: .78rem; color: var(--wc-muted); margin: .6rem 0; }
.msg-menu { position: fixed; z-index: 1085; min-width: 13rem; display: block; }
.msg-menu .reaction-row { display: flex; justify-content: space-between; gap: .15rem; padding: .25rem .5rem .4rem; }
.msg-menu .reaction-row button { border: 0; background: none; font-size: 1.3rem; padding: .1rem .25rem; border-radius: 10px; transition: transform .1s; }
.msg-menu .reaction-row button:hover { background: var(--wc-surface-2); transform: scale(1.15); }
.msg-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }

/* ---------- allegati nei fumetti ---------- */
.msg-attach { display: block; margin: .25rem 0; max-width: min(340px, 100%); }
.msg-image { border: 0; padding: 0; background: none; border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.msg-image img { display: block; max-width: 100%; height: auto; border-radius: 12px; background: var(--wc-surface-2); }
.msg-video { max-height: 320px; width: 100%; border-radius: 12px; background: #000; }
.msg-file { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 12px; background: rgba(var(--wc-accent-rgb), .07); color: inherit; text-decoration: none; }
.msg.mine .msg-file { background: var(--wc-quote-out); }
.msg-file:hover { color: inherit; filter: brightness(.97); }
.file-icon { width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--wc-accent); color: var(--wc-accent-contrast); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.msg.mine .file-icon { background: var(--wc-bubble-out-text); color: var(--wc-bubble-out); }
.file-sub { display: block; font-size: .76rem; opacity: .75; }
.msg-expired { display: flex; align-items: center; gap: .35rem; font-size: .8rem; opacity: .75; font-style: italic; }
.voice { display: flex; align-items: center; gap: .6rem; width: 17rem; max-width: 100%; padding: .15rem 0; }
.voice audio { display: none; }
.voice-play { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; background: var(--wc-accent); color: var(--wc-accent-contrast); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.msg.mine .voice-play { background: var(--wc-bubble-out-text); color: var(--wc-bubble-out); }
.voice-bars { flex: 1; min-width: 0; height: 2rem; display: flex; align-items: center; gap: 2px; cursor: pointer; color: var(--wc-accent); }
.msg.mine .voice-bars { color: var(--wc-bubble-out-text); }
.voice-bar { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; opacity: .32; transition: opacity .15s; }
.voice-bar.lit { opacity: 1; }
.voice-time { font-size: .74rem; font-variant-numeric: tabular-nums; opacity: .8; min-width: 2.2rem; text-align: right; }
.lightbox-img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.dm-win .msg-attach { max-width: 100%; }

/* ---------- anteprima dell'allegato e registrazione ---------- */
.attach-preview { padding: .45rem .8rem; border-top: 1px solid var(--wc-border); background: var(--wc-surface); }
.attach-chip { display: flex; align-items: center; gap: .6rem; }
.attach-chip img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.attach-icon { width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--wc-accent-soft); color: var(--wc-accent-text); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.attach-info { flex: 1; min-width: 0; }
.attach-progress { height: 4px; margin-top: .2rem; }
.rec-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--wc-danger); animation: rec-blink 1s infinite; flex: 0 0 auto; }
@keyframes rec-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- emoji ---------- */
.composer-field { flex: 1; min-width: 0; position: relative; display: flex; align-items: flex-end; }
.composer-field textarea { padding-right: 2.8rem; }
.emoji-btn { position: absolute; right: .3rem; bottom: .25rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: none; color: var(--wc-muted); display: flex; align-items: center; justify-content: center; }
.emoji-btn:hover, .emoji-btn[aria-expanded="true"] { color: var(--wc-accent-text); background: var(--wc-accent-soft); }
.emoji-btn .wc-icon { width: 1.25rem; height: 1.25rem; }
.emoji-pop { position: fixed; z-index: 1086; width: min(20rem, calc(100vw - 1rem)); background: var(--wc-surface); color: var(--wc-text); border: 1px solid var(--wc-border); border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); display: flex; flex-direction: column; overflow: hidden; }
.emoji-tabs { display: flex; gap: 2px; padding: .35rem .35rem 0; border-bottom: 1px solid var(--wc-border); }
.emoji-tabs button { flex: 1; border: 0; background: none; font-size: 1.1rem; padding: .3rem 0 .4rem; border-bottom: 2px solid transparent; filter: grayscale(.6); }
.emoji-tabs button.active { border-bottom-color: var(--wc-accent); filter: none; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: .4rem; height: 13rem; overflow-y: auto; align-content: start; }
.emoji-grid button { border: 0; background: none; font-size: 1.35rem; line-height: 1; padding: .3rem 0; border-radius: 8px; }
.emoji-grid button:hover, .emoji-grid button:focus-visible { background: var(--wc-surface-2); }

/* ---------- chiamata: sempre scura, come la bozza Notte ---------- */
.call-view { position: fixed; inset: 0; z-index: 1070; background: #0E1016; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--wc-font); }
.call-remote { width: 100%; height: 100%; object-fit: contain; background: #0E1016; }
.call-local { position: absolute; right: 1rem; top: max(1rem, env(safe-area-inset-top)); width: 30vw; max-width: 200px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; border: 2px solid rgba(255, 255, 255, .55); background: #3B3F55; transform: scaleX(-1); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.call-local.back-camera { transform: none; }
.call-info { position: absolute; left: 50%; transform: translateX(-50%); top: max(1.4rem, env(safe-area-inset-top)); max-width: 60vw; text-align: center; }
.call-peer { font-weight: 800; font-size: 1.2rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-status { display: inline-block; margin-top: .4rem; padding: .2rem .7rem; border-radius: 999px; background: rgba(14, 16, 22, .6); font-size: .8rem; font-weight: 700; }
.call-status:empty { display: none; }
.call-controls { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(1.5rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: 32px; background: rgba(20, 23, 31, .82); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(8px); }
.call-btn { width: 3.4rem; height: 3.4rem; border: 0; border-radius: 50%; background: #2A2F40; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .15s, transform .1s; }
.call-btn:hover { background: #363C52; }
.call-btn:active { transform: scale(.94); }
.call-btn .wc-icon { width: 1.4rem; height: 1.4rem; }
.call-btn .ic-on, .call-btn .ic-off { display: inline-flex; }
.call-btn .ic-off, .call-btn.off .ic-on { display: none; }
.call-btn.off .ic-off { display: inline-flex; }
.call-btn.off { background: #F2F3F7; color: #14171F; }
.call-btn-danger { background: #E5484D; }
.call-btn-danger:hover { background: #D13A40; }
.call-btn-wide { width: 4.2rem; border-radius: 28px; }
.call-btn-accept { background: #1E9E6A; }
.call-btn-accept:hover { background: #18865A; }
.call-audio-avatar, .call-ring-avatar { width: 6rem; height: 6rem; border-radius: 50%; background: var(--wc-accent); color: var(--wc-accent-contrast); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 800; }
.call-audio-avatar { position: absolute; display: none; width: 8rem; height: 8rem; font-size: 3.2rem; box-shadow: 0 0 0 18px rgba(var(--wc-accent-rgb), .18), 0 0 0 36px rgba(var(--wc-accent-rgb), .08); }
.call-view.audio-only .call-remote, .call-view.audio-only .call-local { opacity: 0; pointer-events: none; }
.call-view.audio-only .call-audio-avatar, .call-view.no-remote-video .call-audio-avatar { display: flex; }
.call-ring-avatar { animation: ring-pulse 1.2s ease-in-out infinite; }
@keyframes ring-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wc-accent-rgb), .5); } 50% { box-shadow: 0 0 0 16px rgba(var(--wc-accent-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .call-ring-avatar { animation: none; } }
.call-incoming { border-radius: var(--wc-radius); }
.call-choice { display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--wc-muted); }

/* ---------- campanella degli avvisi (solo telefono) ---------- */
.bell-menu { width: min(22rem, calc(100vw - 1rem)); padding: 0; overflow: hidden; border-radius: 18px; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--wc-border); }
.bell-list { max-height: min(60vh, 26rem); overflow-y: auto; overscroll-behavior: contain; }
.bell-item { display: flex; align-items: flex-start; gap: .6rem; width: 100%; border: 0; background: none; color: var(--wc-text); text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--wc-border); }
.bell-item:last-child { border-bottom: 0; }
.bell-item.unread { background: var(--wc-accent-soft); }
.bell-body { flex: 1; min-width: 0; font-size: .86rem; }
.bell-line, .bell-snippet { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-snippet { color: var(--wc-muted); font-size: .82rem; }
.bell-time { font-size: .7rem; color: var(--wc-muted); flex: 0 0 auto; padding-top: .15rem; }
.bell-empty { padding: 1rem .9rem; margin: 0; color: var(--wc-muted); font-size: .86rem; }

/* ---------- posizione con anteprima della mappa ---------- */
.msg-location { display: block; color: inherit; text-decoration: none; border-radius: 12px; overflow: hidden; }
.msg-location:hover { color: inherit; }
.map-preview { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; background: var(--wc-surface-2); }
.msg-location .msg-file { border-radius: 0; }

/* ---------- ricerca, nuovo messaggio ---------- */
.side-heading-row { align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.side-heading-row .side-heading { margin: 0; }
.side-heading-row .icon-btn, .offcanvas-header .new-msg-btn { background: var(--wc-accent); color: var(--wc-accent-contrast); box-shadow: none; }
.search-box { display: flex; align-items: center; gap: .5rem; background: var(--wc-surface-2); border-radius: 14px; padding: 0 .4rem 0 .8rem; margin-bottom: .6rem; color: var(--wc-muted); }
.search-box input { flex: 1; min-width: 0; border: 0; background: none; color: var(--wc-text); padding: .55rem 0; outline: none; font-size: .92rem; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-box:focus-within { box-shadow: 0 0 0 2px rgba(var(--wc-accent-rgb), .35); }
.search-clear { border: 0; background: none; color: var(--wc-muted); width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
#searchResults { padding: 0 .5rem .75rem; }
#searchResults .side-title { padding-left: .6rem; }
#searchResults mark { background: rgba(var(--wc-accent-rgb), .22); color: inherit; padding: 0 .1em; border-radius: 4px; }

/* ---------- schede del pannello sul telefono: Chat, Utenti, Avvisi, Tu ---------- */
@media (max-width: 991.98px) {
  #sideLeft { display: flex; flex-direction: column; }
  #sideLeft .side-view { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 992px) {
  #viewChats { display: block !important; }
  #viewUsers, #viewBell, #viewMe, #viewCalls { display: none !important; }
  /* Sul computer la scheda Chiamate (dal menu in alto) prende il posto dell'elenco delle conversazioni. */
  #sideLeft.calls-open #viewChats { display: none !important; }
  #sideLeft.calls-open #viewCalls { display: block !important; overflow-y: auto; }
}
.bottom-nav { display: flex; flex: 0 0 auto; border-top: 1px solid var(--wc-border); background: var(--wc-surface); padding: .3rem .25rem max(.3rem, env(safe-area-inset-bottom)); }
.bottom-nav button { position: relative; flex: 1; border: 0; background: none; color: var(--wc-muted); display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem 0; font-size: .7rem; font-weight: 700; border-radius: 12px; }
.bottom-nav button .wc-icon { width: 1.35rem; height: 1.35rem; }
.bottom-nav button.active { color: var(--wc-accent-text); }
.bottom-nav button.active .wc-icon { background: var(--wc-accent-soft); border-radius: 999px; padding: .15rem .9rem; width: auto; height: 1.65rem; box-sizing: content-box; }
.bottom-nav .avatar-xs { width: 1.5rem; height: 1.5rem; font-size: .65rem; }
.bottom-nav button.active .avatar-xs { box-shadow: 0 0 0 2px var(--wc-accent); }
.nav-badge { position: absolute; top: .1rem; left: 55%; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--wc-danger); color: #fff; font-size: .66rem; line-height: 1.15rem; text-align: center; }
.me-card { display: flex; align-items: center; gap: .8rem; padding: 1.2rem 1rem .4rem; }
.me-card .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.4rem; }
.me-links { padding-top: .5rem; }
.me-links .conv-item { text-decoration: none; font-weight: 600; }
.me-links .conv-item .wc-icon { color: var(--wc-muted); }

/* ---------- gruppi ---------- */
.avatar.is-group { border-radius: 16px; }
.conv-muted { color: var(--wc-muted); display: inline-flex; flex: 0 0 auto; }
.conv-muted .wc-icon { width: .95em; height: .95em; }
.invite-item { align-items: flex-start; background: var(--wc-accent-soft); }
.invite-item:hover { background: var(--wc-accent-soft); }
.invite-actions { display: flex; gap: .4rem; margin-top: .45rem; }
.new-group-entry { margin: .5rem .5rem 0; width: calc(100% - 1rem); }
.new-group-entry .avatar { background: var(--wc-accent); color: var(--wc-accent-contrast); }
.chips-picked { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.chips-picked:empty { display: none; }
.chip-picked { display: inline-flex; align-items: center; gap: .3rem; border: 0; border-radius: 999px; background: var(--wc-accent-soft); color: var(--wc-accent-text); padding: .2rem .4rem .2rem .7rem; font-size: .82rem; font-weight: 700; }
.chip-picked .wc-icon { width: .9rem; height: .9rem; }
.conv-item.picked { background: var(--wc-accent-soft); }
.conv-item .check-mark { margin-left: auto; color: var(--wc-accent-text); }
.group-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.group-photo { width: 4rem; height: 4rem; font-size: 1.6rem; }
.member-row { cursor: default; }
.member-row:hover { background: none; }
.member-actions { display: flex; gap: .9rem; margin-top: .15rem; font-size: .82rem; }
.readby-group { padding: .6rem .9rem; border-bottom: 1px solid var(--wc-border); }
.readby-group:last-child { border-bottom: 0; }
.readby-group .side-title { padding: 0 0 .3rem; }

.conv-head { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; border-radius: 14px; }
.conv-head.clickable { cursor: pointer; }
.conv-head.clickable:hover .conv-title { text-decoration: underline; }
.conv-lock { display: inline-flex; color: var(--wc-muted); flex: 0 0 auto; }
.conv-lock .wc-icon { width: .95em; height: .95em; }
.conv-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.conv-menu .dropdown-item .wc-icon { color: var(--wc-muted); }
.filters .chip { padding: .35rem .6rem; }
@media (min-width: 992px) { .filters { flex-wrap: wrap; overflow: visible; } } /* computer: 5 schede su due righe invece di nasconderne una */

/* ---------- amicizie, segui, richieste ---------- */
.um-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: .35rem; }
.um-avatar { width: 5rem; height: 5rem; font-size: 2rem; }
.um-counts { display: flex; gap: 1rem; margin-top: .55rem; font-size: .8rem; color: var(--wc-muted); }
.um-counts strong { display: block; color: var(--wc-text); font-size: 1rem; }
.um-rel { font-size: .82rem; color: var(--wc-muted); background: var(--wc-surface-2); border-radius: 12px; padding: .55rem .7rem; margin: 0; }
.um-rel strong { color: var(--wc-text); }
.request-item { align-items: flex-start; }
.request-item .invite-actions { margin-top: .4rem; }
.rq-body { background: var(--wc-surface-2); border-left: 3px solid var(--wc-accent); border-radius: 10px; padding: .55rem .75rem; margin: 0 0 .75rem; white-space: pre-wrap; word-break: break-word; }
.rel-bar { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-top: 1px solid var(--wc-border); background: var(--wc-accent-soft); color: var(--wc-text); font-size: .84rem; }
.rel-bar .rel-text { flex: 1; min-width: 0; }
.rel-bar.locked { background: var(--wc-surface-2); }
.dm-win .rel-bar { padding: .45rem .7rem; font-size: .8rem; }
.rel-tag { flex-shrink: 0; font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--wc-accent-soft); color: var(--wc-accent-text); }

/* Cronologia delle chiamate (11.6a): righe con esito, durata, qualità a tre tacche e "Richiama" (classi ch-*: call-* è della schermata di chiamata). */
.calls-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem .3rem; }
.ch-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem; border: 0; background: transparent; width: 100%; text-align: left; color: var(--wc-text); }
.ch-row:hover { background: var(--wc-surface-2); }
.ch-row .ch-main { flex: 1; min-width: 0; }
.ch-row .ch-name { font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-row.missed .ch-name { color: var(--wc-danger); }
.ch-row .ch-info { display: flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--wc-muted); }
.ch-row .ch-info .wc-icon { width: .95rem; height: .95rem; }
.ch-row .ch-side { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; font-size: .72rem; color: var(--wc-muted); }
.ch-redial { border: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--wc-accent-soft); color: var(--wc-accent-text); display: grid; place-items: center; flex: 0 0 auto; }
.ch-redial .wc-icon { width: 1.1rem; height: 1.1rem; }
.q-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.q-bars i { display: block; width: 3px; border-radius: 1px; background: var(--wc-border); }
.q-bars i:nth-child(1) { height: 5px; } .q-bars i:nth-child(2) { height: 8px; } .q-bars i:nth-child(3) { height: 12px; }
.q-bars.good i { background: var(--wc-online); }
.q-bars.fair i:nth-child(-n+2) { background: #d99a1e; }
.q-bars.poor i:nth-child(1) { background: var(--wc-danger); }

/* Indicatore della qualità durante la chiamata (11.6a, Q1-Q3): tre tacche in alto a sinistra, dettagli al tocco, avviso. */
.call-quality { position: absolute; left: max(1rem, env(safe-area-inset-left)); top: max(1.4rem, env(safe-area-inset-top)); z-index: 2; border: 0; border-radius: 999px; background: rgba(14, 16, 22, .6); padding: .5rem .65rem; display: grid; place-items: center; }
.call-quality .q-bars { height: 14px; gap: 3px; }
.call-quality .q-bars i { width: 4px; background: rgba(255, 255, 255, .28); }
.call-quality .q-bars i:nth-child(1) { height: 6px; } .call-quality .q-bars i:nth-child(2) { height: 10px; } .call-quality .q-bars i:nth-child(3) { height: 14px; }
.call-quality-info { position: absolute; left: max(1rem, env(safe-area-inset-left)); top: calc(max(1.4rem, env(safe-area-inset-top)) + 2.8rem); z-index: 2; background: rgba(14, 16, 22, .82); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: .55rem .75rem; font-size: .78rem; line-height: 1.5; max-width: 70vw; white-space: pre-line; }
.call-warn { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(1.4rem, env(safe-area-inset-top)) + 4.6rem); z-index: 2; background: #f5b43c; color: #2a1b00; border-radius: 14px; padding: .45rem .8rem; font-size: .8rem; font-weight: 700; text-align: center; max-width: 80vw; }

/* Chiamate di gruppo (11.6b): griglia di riquadri, chi parla evidenziato; sul telefono 4 riquadri visibili, gli altri scorrendo. */
.gc-banner { background: var(--wc-accent-soft); color: var(--wc-accent-text); font-weight: 700; }
.gc-view { position: fixed; inset: 0; z-index: 1070; background: #0E1016; color: #fff; display: flex; flex-direction: column; font-family: var(--wc-font); }
.gc-top { display: flex; align-items: center; gap: .75rem; padding: max(.8rem, env(safe-area-inset-top)) 1rem .6rem; }
.gc-top .call-quality { position: static; }
.gc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.gc-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-title span { font-size: .78rem; opacity: .75; }
.gc-people-btn { width: 2.6rem; height: 2.6rem; }
.gc-qinfo { top: 4rem; }
.gc-warn { top: 4.4rem; }
.gc-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: .5rem; padding: .5rem .75rem 6.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-content: start; }
.gc-grid.n1 { grid-template-columns: 1fr; }
.gc-tile { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #1a1e28; border: 3px solid transparent; }
.gc-tile.speaking { border-color: #4ade80; }
.gc-tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.gc-tile.screen video { object-fit: contain; }
.gc-tile .gc-face { position: absolute; inset: 0; display: grid; place-items: center; }
.gc-tile .gc-face .avatar { width: 4.5rem; height: 4.5rem; font-size: 1.8rem; }
.gc-tile .gc-name { position: absolute; left: .5rem; bottom: .5rem; display: inline-flex; align-items: center; gap: .35rem; max-width: calc(100% - 1rem); padding: .2rem .55rem; border-radius: 999px; background: rgba(14, 16, 22, .7); font-size: .78rem; font-weight: 700; }
.gc-tile .gc-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-tile .gc-name .wc-icon { width: .9rem; height: .9rem; color: #f87171; }
.gc-people { position: absolute; right: .75rem; top: 4rem; z-index: 3; width: min(22rem, calc(100vw - 1.5rem)); max-height: calc(100% - 11rem); overflow-y: auto; background: rgba(20, 23, 31, .96); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: .6rem; }
.gc-person { display: flex; align-items: center; gap: .5rem; padding: .35rem .3rem; font-size: .85rem; }
.gc-person .gc-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-person button { border: 0; border-radius: 999px; padding: .2rem .6rem; font-size: .72rem; font-weight: 700; background: rgba(255, 255, 255, .12); color: #fff; }
.gc-person button.danger { background: rgba(217, 58, 63, .85); }
.gm-calls select:disabled { opacity: .75; }
@media (max-width: 991.98px) {
  .gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100dvh - 12rem) / 2); }
  .gc-grid.n1 { grid-template-columns: 1fr; grid-auto-rows: calc(100dvh - 12rem); }
  .gc-grid.n2 { grid-template-columns: 1fr; grid-auto-rows: calc((100dvh - 12rem) / 2); }
  .gc-tile { aspect-ratio: auto; }
}
.um-reach { font-size: .82rem; color: var(--wc-text); margin-top: .1rem; }
.avatar .presence.away { background: #F08C1E; }