/* ============================================================ SCALA DEL TESTO — un solo punto di controllo ------------------------------------------------------------ Tutte le dimensioni del testo del progetto sono in `rem`, cioè multipli di questo valore: cambiare `html{font-size}` riscala l'INTERA interfaccia in modo proporzionale. Perché così e non ritoccando le singole classi: nel foglio ci sono ~294 dichiarazioni di font-size. Aumentandone a mano un gruppo per volta ne restavano sempre fuori decine (le date, le etichette, i contatori, le intestazioni di sezione…), e il risultato continuava a sembrare "tutto piccolo" anche dopo più giri di ritocchi. Con i rem il problema non si ripresenta: quello che si aggiunge domani eredita la scala senza doversene ricordare. 16px su desktop = identico a prima (1rem = 16px è il default del browser, quindi la conversione px→rem non cambia una virgola lì). Su mobile si parte più grandi, e l'utente può regolare a piacere dal profilo (data-text-size sull'elemento ). ============================================================ */ html{font-size:16px} @media (max-width:768px){ html{font-size:18px} } /* Scelta dell'utente: vince sempre, anche su mobile */ html[data-text-size="s"]{font-size:15px} html[data-text-size="m"]{font-size:17px} html[data-text-size="l"]{font-size:19px} html[data-text-size="xl"]{font-size:21px} :root{ --accent: #7c5cff; --accent-2: #00d4ff; --accent-soft: rgba(124,92,255,.16); --bg: #0b0d17; --panel: rgba(255,255,255,.045); --panel-strong: rgba(255,255,255,.08); --stroke: rgba(255,255,255,.09); --text: #eef0ff; --text-dim: #9aa0b8; --bubble-me: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent), var(--accent-2) 55%)); --bubble-other: rgba(255,255,255,.07); --radius: 18px; --online:#2fe38f; --busy:#ff5c7a; --away:#ffc24b; --sat-left: env(safe-area-inset-left, 0px); } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{ font-family:'Inter',system-ui,sans-serif; background: var(--bg); color:var(--text); overflow:hidden; touch-action:manipulation; /* niente doppio-tap per zoomare, niente ritardo tap: feeling da app nativa */ } .aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;transition:opacity .6s} .aurora .blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;animation:float 22s ease-in-out infinite alternate} .aurora .b1{width:44vw;height:44vw;background:var(--accent);top:-12%;left:-8%} .aurora .b2{width:36vw;height:36vw;background:var(--accent-2);bottom:-14%;right:-6%;animation-delay:-8s} .aurora .b3{width:26vw;height:26vw;background:#ff4bb8;top:35%;left:55%;opacity:.28;animation-delay:-14s} @keyframes float{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,-4vh) scale(1.15)}} /* --net-banner-h: alzato dall'indicatore di connessione quando compare, in modo che il contenuto scenda invece di finirgli sotto. A 0 non cambia nulla rispetto a prima. */ .app{position:relative;z-index:1;display:flex;height:100vh;gap:0;padding:14px; padding-top:calc(14px + var(--net-banner-h,0px)); height:calc(100vh - var(--net-banner-h,0px)); transition:padding-top .18s ease,height .18s ease} .app.hidden{display:none} .dock{width:66px;display:flex;flex-direction:column;align-items:center;padding:11px 0;gap:5px; background:var(--panel);border:1px solid var(--stroke);border-radius:24px;backdrop-filter:blur(24px);margin-right:14px} .logo{width:46px;height:46px;margin-bottom:14px;cursor:pointer;background:none;box-shadow:none;border-radius:0;display:block} .logo img{width:46px;height:46px;display:block} .dock-btn{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;cursor:pointer;border:none;background:transparent;color:var(--text-dim);position:relative;transition:.18s} .dock-btn:hover{background:var(--panel-strong);color:var(--text)} .dock-btn.active{background:var(--accent-soft);color:var(--accent)} .dock-btn.active::before{content:'';position:absolute;left:-12px;width:4px;height:19px;border-radius:4px;background:var(--accent)} .dock-btn svg{width:19px;height:19px} .dock-btn .bdg{position:absolute;top:8px;right:8px;min-width:17px;height:17px;border-radius:9px;background:#ff5c7a;color:#fff;font-size:0.625rem;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)} /* Su desktop, quando Sintònia Meets è aperta occupa lo spazio di sidebar+main+rpanel invece di sovrapporsi a tutto (dock sempre visibile e cliccabile). Su mobile la pagina torna un overlay fisso a tutto schermo (vedi la media query della pagina Meet). */ @media (min-width:769px){ .app:has(> .pm-page.on) .sidebar, .app:has(> .pm-page.on) .main, .app:has(> .pm-page.on) .rpanel{display:none} } .dock .spacer{flex:1} /* Le due azioni di aspetto restano insieme in basso nel dock desktop. */ .dock .spacer{order:1} .dock #navTheme2{order:2} .dock #themeBtn{order:3} .dock .status-picker{order:4} .me-avatar{width:44px;height:44px;border-radius:15px;position:relative;cursor:pointer} .me-avatar img{width:100%;height:100%;border-radius:15px;object-fit:cover} .status-dot{position:absolute;bottom:-2px;right:-2px;width:13px;height:13px;border-radius:50%;background:var(--online);border:3px solid #14162a} /* ====== BARRA DI NAVIGAZIONE MOBILE (sostituisce il dock verticale sotto ~768px) ====== */ .mobile-tabbar{display:none} .mtb-btn{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;color:var(--text-dim);cursor:pointer;padding:6px 2px 2px;font-family:inherit;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .mtb-btn svg{width:21px;height:21px} .mtb-btn img{width:21px;height:21px;border-radius:7px;object-fit:cover} .mtb-btn em{font-style:normal;font-size:0.625rem;font-weight:600} .mtb-btn.active{color:var(--accent)} .mtb-btn .bdg{position:absolute;top:0;right:22%;min-width:15px;height:15px;border-radius:8px;background:#ff5c7a;color:#fff;font-size:0.5625rem;font-weight:700;display:grid;place-items:center;padding:0 3px;border:2px solid var(--bg)} /* ====== ANIMALETTI DI STATO ====== */ .status-badge{display:inline-flex;align-items:center;justify-content:center;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} .status-badge.sm{font-size:0.75rem} .status-badge.md{font-size:1rem} .status-badge.lg{font-size:1.625rem} @keyframes anim-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes anim-wiggle{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}} @keyframes anim-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}} @keyframes anim-tilt{0%,100%{transform:rotate(0deg)}50%{transform:rotate(14deg)}} @keyframes anim-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @keyframes anim-blink{0%,88%,100%{opacity:1}94%{opacity:.35}} @keyframes anim-spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .anim-bounce{animation:anim-bounce 1.1s ease-in-out infinite} .anim-wiggle{animation:anim-wiggle .9s ease-in-out infinite} .anim-shake{animation:anim-shake .5s ease-in-out infinite} .anim-tilt{animation:anim-tilt 1.5s ease-in-out infinite} .anim-float{animation:anim-float 2.3s ease-in-out infinite} .anim-blink{animation:anim-blink 3.2s ease-in-out infinite} .anim-spin-slow{animation:anim-spin-slow 4s linear infinite} .status-picker{position:relative} /* max-width: su uno schermo stretto il menu non deve comunque superare la larghezza disponibile, altrimenti il calcolo di posizione non ha spazio in cui incastrarlo. max-height + scroll per gli elenchi di stati lunghi. */ .status-picker-menu{position:fixed;width:220px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);overflow-y:auto;background:rgba(22,24,42,.97);border:1px solid var(--stroke);border-radius:16px;padding:8px;backdrop-filter:blur(24px);box-shadow:0 20px 50px -12px rgba(0,0,0,.6);z-index:60;display:none} .status-picker-menu.on{display:block} .status-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;cursor:pointer;font-size:0.8125rem} .status-opt:hover{background:var(--panel-strong)} .status-opt.active{background:var(--accent-soft)} .status-opt .status-badge{font-size:1.1875rem} .status-opt .so-label{flex:1} .status-opt .so-mute{font-size:0.625rem;color:var(--text-dim)} .sidebar{width:270px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--stroke); border-radius:24px;backdrop-filter:blur(24px);margin-right:14px;overflow:hidden} .sb-head{padding:20px 18px 12px} .workspace{display:flex;align-items:center;gap:10px;margin-bottom:16px} .workspace h1{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:-.3px;white-space:nowrap} .pill{font-size:0.625rem;font-weight:700;padding:3px 8px;border-radius:8px;background:var(--accent-soft);color:var(--accent);letter-spacing:.4px} .search{display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.25);border:1px solid var(--stroke);border-radius:13px;padding:10px 13px;color:var(--text-dim);font-size:0.8125rem;cursor:text} .search svg{width:15px;height:15px;flex-shrink:0} .search kbd{margin-left:auto;font-family:inherit;font-size:0.625rem;background:var(--panel-strong);padding:2px 7px;border-radius:6px;border:1px solid var(--stroke)} .my-status-bar{display:flex;align-items:center;gap:8px;width:calc(100% - 24px);margin:2px 12px 8px;padding:9px 12px;border:1px solid var(--stroke);border-radius:13px;background:rgba(0,0,0,.2);color:var(--text);cursor:pointer;transition:.15s;font-family:inherit;font-size:0.8125rem;font-weight:600} .my-status-bar:hover{background:var(--panel-strong);border-color:var(--accent)} .my-status-bar .status-badge{position:static} .msb-label{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msb-chevron{color:var(--text-dim);flex-shrink:0} body.light .my-status-bar{background:rgba(10,15,40,.04)} .sb-scroll{flex:1;overflow-y:auto;padding:6px 12px 14px} .sb-scroll::-webkit-scrollbar,.msgs::-webkit-scrollbar{width:5px} .sb-scroll::-webkit-scrollbar-thumb,.msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:4px} .sec{display:flex;align-items:center;gap:6px;padding:14px 8px 8px;font-size:0.6875rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim)} .sec .add{margin-left:auto;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;cursor:pointer;transition:.15s} .sec .add:hover{background:var(--panel-strong);color:var(--text)} .chat-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:13px;cursor:pointer;transition:.15s;position:relative} .chat-item:hover{background:var(--panel-strong)} .chat-item.active{background:var(--accent-soft)} .chat-item.active .cname{color:var(--text)} .ch-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.9375rem;flex-shrink:0;position:relative} .ch-icon.hash{background:var(--panel-strong);color:var(--text-dim)} .chat-item.active .ch-icon.hash{background:color-mix(in srgb, var(--accent) 28%, transparent);color:var(--accent)} .ch-icon.meeting{background:color-mix(in srgb, var(--accent-2) 20%, transparent);color:var(--accent-2)} .chat-item.active .ch-icon.meeting{background:color-mix(in srgb, var(--accent-2) 32%, transparent)} .ch-icon.vroom{background:color-mix(in srgb, #f5b93d 20%, transparent);color:#f5b93d} .empty-hint{color:var(--text-dim);font-size:0.75rem;padding:6px 10px} .vroom-actions{display:flex;gap:2px;flex-shrink:0} .vroom-actions .icon-btn{width:26px;height:26px} .vroom-copy.copied{color:var(--online)} .ch-icon img{width:100%;height:100%;border-radius:12px;object-fit:cover} .ch-icon .dot{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;border:2.5px solid var(--bg);transition:background .7s ease,opacity .7s ease} .ch-icon .call-dot{position:absolute;top:-3px;right:-3px;width:15px;height:15px;border-radius:50%;background:var(--busy);display:flex;align-items:center;justify-content:center;font-size:0.5rem;border:2px solid var(--bg);line-height:1} .member .call-dot{font-size:0.625rem} .ci-meta{flex:1;min-width:0} .cname{font-size:0.875rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px} .cprev{font-size:0.75rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .ci-right{display:flex;flex-direction:row;align-items:center;gap:6px;flex-shrink:0} .ctime{font-size:0.65625rem;color:var(--text-dim)} .unread{min-width:19px;height:19px;border-radius:10px;background:var(--bubble-me);color:#fff;font-size:0.65625rem;font-weight:700;display:grid;place-items:center;padding:0 5px} .unread-priority{background:#e6432b;animation:unread-priority-blink 1s ease-in-out infinite} @keyframes unread-priority-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.12)}} .mut{opacity:.45} .main{flex:1;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--stroke);border-radius:24px;backdrop-filter:blur(24px);overflow:hidden;position:relative} .drop-overlay{position:absolute;inset:10px;z-index:40;display:none;align-items:center;justify-content:center;border:2px dashed var(--accent);border-radius:18px;background:rgba(124,92,255,.14);backdrop-filter:blur(4px);font-size:1rem;font-weight:700;color:var(--accent);pointer-events:none} .drop-overlay.on{display:flex} .chat-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;transition:.5s;border-radius:24px} .topbar{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--stroke);position:relative;z-index:2;background:rgba(11,13,23,.25);backdrop-filter:blur(8px)} .tb-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;background:var(--accent-soft);color:var(--accent);overflow:hidden} .tb-icon img{width:100%;height:100%;object-fit:cover} .tb-meta{min-width:0;flex:1} .tb-meta h2{font-family:'Space Grotesk',sans-serif;font-size:0.96875rem;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tb-meta p{font-size:0.71875rem;color:var(--text-dim);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .live-dot{width:7px;height:7px;border-radius:50%;background:var(--online);display:inline-block;animation:pulse 1.6s infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,227,143,.5)}55%{box-shadow:0 0 0 6px rgba(47,227,143,0)}} .avatar-stack{display:flex;margin-left:auto;margin-right:4px;cursor:pointer} .avatar-stack img{width:30px;height:30px;border-radius:10px;border:2.5px solid #1a1c31;margin-left:-9px;object-fit:cover} .avatar-stack img:first-child{margin-left:0} .avatar-stack .more{width:30px;height:30px;border-radius:10px;border:2.5px solid #1a1c31;margin-left:-9px;background:var(--panel-strong);display:grid;place-items:center;font-size:0.625rem;font-weight:700;color:var(--text-dim)} .tb-actions{display:flex;gap:8px;flex-shrink:0} #tbMoreBtn{display:none} .tb-more-menu{position:fixed;min-width:220px;max-width:calc(100vw - 20px);background:rgba(22,24,42,.97);border:1px solid var(--stroke);border-radius:16px;padding:6px;backdrop-filter:blur(24px);box-shadow:0 16px 40px -10px rgba(0,0,0,.6);z-index:80;display:none;flex-direction:column;gap:2px} .tb-more-menu.on{display:flex} .tb-more-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:none;border-radius:11px;background:none;color:var(--text);font-family:inherit;font-size:0.875rem;text-align:left;cursor:pointer} .tb-more-item:hover,.tb-more-item:active{background:var(--panel-strong)} .tb-more-item svg{width:18px;height:18px;flex-shrink:0;color:var(--text-dim)} .icon-btn{width:40px;height:40px;border-radius:13px;border:1px solid var(--stroke);background:var(--panel);color:var(--text-dim);display:grid;place-items:center;cursor:pointer;transition:.18s} .icon-btn:hover{color:var(--text);background:var(--panel-strong);transform:translateY(-1px)} .icon-btn:disabled{opacity:.35;cursor:not-allowed;transform:none} .icon-btn svg{width:18px;height:18px} .msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:26px 28px 10px;display:flex;flex-direction:column;gap:4px;position:relative;z-index:1} /* Il riquadro dei messaggi non deve MAI scorrere in orizzontale: un pannello che si sposta di lato al primo swipe obliquo fa sembrare l'app una pagina web dentro un iframe, non un'app. Chi ha bisogno di scorrere in orizzontale e' solo il blocco di codice, che lo fa per conto suo (.bubble pre). min-width:0 sui figli e' necessario: dentro un flex un elemento non scende sotto la larghezza del proprio contenuto se non glielo si dice, e un URL lunghissimo allargherebbe la colonna invece di andare a capo. */ .msgs>*{min-width:0;max-width:100%} .msg{min-width:0} .bubble{min-width:0;overflow-wrap:anywhere} .msgs.loading-older::before{content:"Caricamento messaggi precedenti…";display:block;text-align:center;font-size:0.71875rem;color:var(--text-dim);padding-bottom:10px} .jump-latest{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;border:1px solid var(--stroke);background:var(--accent);color:#fff;font-size:0.78125rem;font-weight:600;box-shadow:0 10px 28px -8px rgba(0,0,0,.5);cursor:pointer;opacity:0;pointer-events:none;transition:.18s;z-index:3} .jump-latest.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} .day-sep{display:flex;align-items:center;gap:14px;margin:18px 0 14px;color:var(--text-dim);font-size:0.6875rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase} .day-sep::before,.day-sep::after{content:'';flex:1;height:1px;background:var(--stroke)} .msg{display:flex;gap:10px;max-width:72%;margin-bottom:8px;animation:msgin .3s ease both} @keyframes msgin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .msg img.av{width:33px;height:33px;border-radius:11px;object-fit:cover;flex-shrink:0;margin-top:2px} .msg .body{min-width:0} .msg .who{font-size:0.75rem;font-weight:700;margin-bottom:3px;display:flex;align-items:baseline;gap:8px;position:relative} .msg .who time{font-size:0.65625rem;font-weight:500;color:var(--text-dim)} /* messaggi consecutivi dello stesso mittente raggruppati stile WhatsApp: niente nome/avatar ripetuti (l'avatar resta come spaziatore invisibile, così i fumetti restano allineati), solo l'orario resta visibile. */ .msg.grouped img.av{visibility:hidden} .msg.grouped .who{margin-bottom:2px} .msg:has(+ .msg.grouped){margin-bottom:2px} /* flex-wrap + min-width:0: la barra azioni e' larga ~214px e su un telefono sbordava dal riquadro dei messaggi, creando lo scorrimento laterale che faceva sembrare la chat una pagina web dentro un iframe. Ora va a capo invece di spingere fuori il contenuto. */ .msg-actions{display:flex;flex-wrap:wrap;gap:2px;opacity:0;transition:.15s;margin-left:auto;min-width:0;max-width:100%} .msg:hover .msg-actions{opacity:1} .msg.me .msg-actions{margin-left:0;margin-right:auto} .msg-act{width:22px;height:22px;border-radius:7px;border:none;background:var(--panel-strong);color:var(--text-dim);display:grid;place-items:center;cursor:pointer;transition:.15s} .msg-act:hover{color:var(--text);background:var(--accent-soft)} .msg-act.busy{opacity:.5;cursor:default;animation:msg-act-busy 1s linear infinite} @keyframes msg-act-busy{0%,100%{opacity:.35}50%{opacity:.8}} .msg-act.on{background:color-mix(in srgb, #f5b93d 22%, transparent);color:#f5b93d} /* ---------------- MESSAGGI FISSATI (pin) ---------------- */ .pinned-bar{flex-direction:column;gap:6px;padding:10px 22px;border-bottom:1px solid var(--stroke);background:color-mix(in srgb, #f5b93d 7%, transparent)} .pinned-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:11px;cursor:pointer;transition:.15s} .pinned-row:hover{background:var(--panel-strong)} .pinned-icon{color:#f5b93d;flex-shrink:0} .pinned-meta{flex:1;min-width:0} .pinned-sender{font-size:0.71875rem;font-weight:700;color:#f5b93d} .pinned-text{font-size:0.78125rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pinned-unpin{width:24px;height:24px;flex-shrink:0;border-radius:8px} /* ---------------- DELEGHE one-to-one ---------------- */ .delegation-bar{display:none;flex-direction:column;gap:8px;padding:10px 16px 12px;border-bottom:1px solid color-mix(in srgb, #22c3a6 35%, var(--stroke));background:linear-gradient(180deg, color-mix(in srgb, #22c3a6 16%, transparent), color-mix(in srgb, #22c3a6 6%, transparent));position:relative;z-index:2;max-height:42vh;overflow-y:auto} .delegation-head{display:flex;align-items:center;gap:10px} .delegation-head-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb, #22c3a6 22%, transparent);color:#22c3a6;flex-shrink:0} .delegation-bar.has-open .delegation-head-icon{animation:delegation-pulse 2.4s ease-in-out infinite} @keyframes delegation-pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,195,166,.45)}70%{box-shadow:0 0 0 8px rgba(34,195,166,0)}} .delegation-head-icon svg{width:16px;height:16px} .delegation-head-text{flex:1;min-width:0} .delegation-head-text strong{display:block;font-size:0.8125rem;font-weight:700;color:#22c3a6;letter-spacing:-.1px} .delegation-head-text span{display:block;font-size:0.6875rem;color:var(--text-dim);margin-top:1px} .delegation-history-btn{flex-shrink:0;border:1px solid color-mix(in srgb, #22c3a6 35%, var(--stroke));background:color-mix(in srgb, #22c3a6 10%, transparent);color:#22c3a6;border-radius:999px;padding:6px 10px;font:650 0.6875rem/1 Inter,system-ui,sans-serif;cursor:pointer} .delegation-history-btn.stretch{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px} .delegation-history-btn.stretch svg{width:14px;height:14px} .delegation-bar.compact{padding:8px 14px;background:color-mix(in srgb, #22c3a6 8%, transparent);max-height:none} .delegation-list{display:flex;flex-direction:column;gap:6px} .delegation-row{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid color-mix(in srgb, #22c3a6 22%, transparent);cursor:pointer;transition:.15s} .delegation-row:hover{background:rgba(0,0,0,.28)} .delegation-row.closed{opacity:.72;border-color:var(--stroke);background:rgba(0,0,0,.1)} .delegation-check{width:26px;height:26px;flex-shrink:0;border-radius:8px;border:2px solid #22c3a6;background:transparent;color:transparent;display:grid;place-items:center;cursor:pointer;padding:0;transition:.15s} .delegation-check:hover,.delegation-chip-mark:hover{background:color-mix(in srgb, #22c3a6 22%, transparent);color:#fff} .delegation-check.done,.delegation-chip-mark.done{background:#22c3a6;border-color:#22c3a6;color:#06261f} .delegation-meta{min-width:0;flex:1} .delegation-title{font-size:0.8125rem;font-weight:650;color:var(--text);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .delegation-row.closed .delegation-title{text-decoration:line-through;color:var(--text-dim);font-weight:500} .delegation-who{font-size:0.6875rem;color:var(--text-dim);margin-top:2px} .delegation-badge{min-width:18px;height:18px;border-radius:9px;background:#22c3a6;color:#06261f;font-size:0.625rem;font-weight:800;display:grid;place-items:center;padding:0 5px} .delegation-hint{display:none;align-items:center;gap:8px;padding:7px 12px;margin-bottom:8px;border-radius:10px;background:color-mix(in srgb, #22c3a6 16%, transparent);border-left:3px solid #22c3a6;color:#22c3a6;font-size:0.75rem;font-weight:600} .delegation-hint.on{display:flex} .delegation-hint svg{flex-shrink:0} .delegation-hint strong{color:var(--text)} .delegation-btn.on{background:#22c3a6;color:#06261f} .delegation-chip{display:flex;align-items:center;gap:7px;margin-bottom:6px;padding:4px 8px 4px 4px;border-radius:9px;background:color-mix(in srgb, #22c3a6 16%, transparent);border:1px solid color-mix(in srgb, #22c3a6 30%, transparent);width:fit-content;max-width:100%} .delegation-chip.closed{background:rgba(255,255,255,.06);border-color:var(--stroke)} .delegation-chip-mark{width:22px;height:22px;border-radius:7px;border:2px solid #22c3a6;background:transparent;color:transparent;display:grid;place-items:center;padding:0;flex-shrink:0;cursor:pointer} span.delegation-chip-mark{cursor:default} .delegation-chip-label{font-size:0.65625rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#22c3a6} .delegation-chip.closed .delegation-chip-label{color:var(--text-dim);text-transform:none;letter-spacing:0;font-weight:650} .msg.me .delegation-chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)} .msg.me .delegation-chip-label{color:#c8fff2} .msg.me .delegation-chip.closed .delegation-chip-label{color:rgba(255,255,255,.75)} .msg.me .delegation-chip-mark{border-color:#c8fff2} .msg.system-msg{max-width:100%;align-self:center;margin:6px 0;animation:msgin .25s ease both} .msg.system-msg .system-msg-body{font-size:0.75rem;line-height:1.4;color:var(--text-dim);background:color-mix(in srgb, #22c3a6 12%, var(--panel-strong));border:1px solid color-mix(in srgb, #22c3a6 22%, var(--stroke));border-radius:999px;padding:6px 14px;text-align:center;max-width:min(520px,92%);margin:0 auto} body.light .delegation-bar{background:linear-gradient(180deg, color-mix(in srgb, #0f9f86 14%, #fff), color-mix(in srgb, #0f9f86 5%, #fff))} body.light .delegation-row{background:rgba(15,159,134,.08)} body.light .delegation-row:hover{background:rgba(15,159,134,.14)} body.light .delegation-head-text strong,body.light .delegation-chip-label,body.light .delegation-history-btn{color:#0f9f86} body.light .delegation-check,body.light .delegation-chip-mark{border-color:#0f9f86} body.light .delegation-check.done,body.light .delegation-chip-mark.done{background:#0f9f86;border-color:#0f9f86;color:#fff} body.light .delegation-btn.on{background:#0f9f86;color:#fff} body.light .delegation-hint{color:#0f9f86} body.light .delegation-hint strong{color:var(--text)} body.light .msg.system-msg .system-msg-body{background:rgba(15,159,134,.1);color:#3b4258} .receipts{margin-top:4px;display:flex;justify-content:flex-end} .receipt{display:flex;align-items:center;gap:4px;font-size:0.65625rem;color:var(--text-dim)} .receipt.read{color:var(--accent-2)} .receipt-clickable{appearance:none;border:0;background:none;padding:0;font-family:inherit;cursor:pointer;border-radius:5px} .receipt-clickable:hover{text-decoration:underline} .receipt-clickable:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px} .bubble{background:var(--bubble-other);border:1px solid var(--stroke);padding:9px 13px;border-radius:4px var(--radius) var(--radius) var(--radius);font-size:0.84375rem;line-height:1.5;backdrop-filter:blur(10px);word-break:break-word;white-space:pre-wrap} .code-block{margin:6px 0;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)} .code-block:first-child{margin-top:0} .code-block:last-child{margin-bottom:0} .code-lang{font-size:0.625rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);padding:5px 12px;border-bottom:1px solid rgba(255,255,255,.08)} .code-block pre{margin:0;padding:10px 12px;overflow-x:auto;white-space:pre} .code-block code{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:0.78125rem;line-height:1.5;color:#d7e0ff} .inline-code{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.9em;background:rgba(0,0,0,.28);padding:1px 5px;border-radius:5px} .msg.me{align-self:flex-end;flex-direction:row-reverse} .msg.me .who{justify-content:flex-end} .msg.me .bubble{background:var(--bubble-me);border:none;border-radius:var(--radius) 4px var(--radius) var(--radius);color:#fff;box-shadow:0 8px 22px -8px color-mix(in srgb, var(--accent) 55%, transparent)} .msg.me .bubble a{color:#fff} .msg.pending .bubble{opacity:.6} .reactions{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap} .react{font-size:0.75rem;padding:3px 9px;border-radius:11px;background:var(--panel-strong);border:1px solid var(--stroke);cursor:pointer;transition:.15s;display:flex;gap:5px;align-items:center} .react:hover{transform:scale(1.08)} .react.on{background:var(--accent-soft);border-color:var(--accent)} .react b{font-size:0.6875rem;font-weight:700} .reaction-picker{position:fixed;display:flex;gap:4px;padding:7px 8px;background:rgba(22,24,42,.97);border:1px solid var(--stroke);border-radius:18px;backdrop-filter:blur(24px);box-shadow:0 16px 40px -10px rgba(0,0,0,.6);z-index:85} .msg-context-menu{position:fixed;display:flex;flex-direction:column;gap:1px;padding:6px;min-width:200px;background:rgba(22,24,42,.97);border:1px solid var(--stroke);border-radius:14px;backdrop-filter:blur(24px);box-shadow:0 16px 40px -10px rgba(0,0,0,.6);z-index:85} .msg-ctx-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;border:none;background:none;color:var(--text);font-family:inherit;font-size:0.8125rem;text-align:left;cursor:pointer;transition:.12s} .msg-ctx-item:hover{background:var(--panel-strong)} .msg-ctx-item svg{width:15px;height:15px;flex-shrink:0;color:var(--text-dim)} .msg-ctx-item.danger{color:#ff6b7d} .msg-ctx-item.danger svg{color:currentColor} .dm-context-menu{min-width:150px} .rp-emoji{width:34px;height:34px;border-radius:50%;border:none;background:transparent;font-size:1.1875rem;display:grid;place-items:center;cursor:pointer;transition:.12s} .rp-emoji:hover{background:var(--panel-strong);transform:scale(1.2)} .emoji-picker{position:fixed;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:10px;width:272px;background:rgba(22,24,42,.97);border:1px solid var(--stroke);border-radius:16px;backdrop-filter:blur(24px);box-shadow:0 16px 40px -10px rgba(0,0,0,.6);z-index:85} .ep-emoji{width:32px;height:32px;border-radius:9px;border:none;background:transparent;font-size:1.125rem;display:grid;place-items:center;cursor:pointer;transition:.12s} .ep-emoji:hover{background:var(--panel-strong);transform:scale(1.15)} .att-img{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;max-width:340px} .att-img img{width:100%;height:110px;object-fit:cover;border-radius:12px;cursor:pointer;transition:.2s} .att-img img:hover{transform:scale(1.03)} .att-wrap{position:relative} .att-dl{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:none;border-radius:10px;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;padding:0} .att-dl:hover{background:rgba(0,0,0,.62)} .att-wrap .att-dl{position:absolute;top:6px;right:6px;z-index:2} .att-voice{display:flex;align-items:center;gap:8px;margin-top:8px;max-width:340px} .att-voice .voice-player{flex:1;min-width:0} .att-file{display:flex;align-items:center;gap:12px;margin-top:8px;background:rgba(0,0,0,.22);border:1px solid var(--stroke);border-radius:14px;padding:11px 14px;cursor:pointer;max-width:320px;transition:.15s;text-decoration:none;color:inherit} .att-file:hover{background:rgba(0,0,0,.34)} .att-file .fico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:0.625rem;font-weight:800;color:#fff;flex-shrink:0} .att-file .fmeta{min-width:0;flex:1} .att-file .att-dl{background:rgba(255,255,255,.12);color:inherit} .msg.me .att-file .att-dl{background:rgba(255,255,255,.22)} .att-file .fname{font-size:0.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .att-file .fsize{font-size:0.6875rem;color:var(--text-dim);margin-top:2px} .link-preview-card{display:block;margin-top:8px;max-width:320px;background:rgba(0,0,0,.22);border:1px solid var(--stroke);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:.15s} .link-preview-card:hover{background:rgba(0,0,0,.34)} .msg.me .link-preview-card{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2)} .msg.me .link-preview-card:hover{background:rgba(255,255,255,.22)} .link-preview-card .lp-img{width:100%;height:150px;background:#000;position:relative} .link-preview-card .lp-img img{width:100%;height:100%;object-fit:cover;display:block} .link-preview-card .lp-img.lp-video::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:1.75rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)} .link-preview-card .lp-meta{padding:9px 12px} .link-preview-card .lp-site{font-size:0.65625rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);margin-bottom:2px} .link-preview-card .lp-title{font-size:0.8125rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .link-preview-card .lp-desc{font-size:0.75rem;color:var(--text-dim);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .voice{display:flex;align-items:center;gap:11px;margin-top:8px;background:rgba(0,0,0,.22);border:1px solid var(--stroke);border-radius:16px;padding:9px 14px;max-width:300px} .msg.me .voice{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2)} .voice-player{width:230px} .voice-player .vp-audio{display:none} .vp-play{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:none;display:grid;place-items:center;background:var(--accent);color:#fff;cursor:pointer} .vp-play .ic-play{margin-left:2px} .vp-track{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.18);cursor:pointer;position:relative;overflow:hidden} .msg.me .vp-track{background:rgba(255,255,255,.3)} .vp-fill{height:100%;width:0%;background:var(--accent);border-radius:3px} .msg.me .vp-fill{background:#fff} .vp-time{font-size:0.6875rem;color:var(--text-dim);min-width:32px;text-align:right} .msg.me .vp-time{color:rgba(255,255,255,.8)} .vp-speed{flex-shrink:0;font-size:0.65625rem;font-weight:700;border:1px solid var(--stroke);background:rgba(0,0,0,.2);color:var(--text-dim);border-radius:8px;padding:3px 6px;cursor:pointer} .msg.me .vp-speed{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.9)} /* Registrazione di una chiamata: stessa UI del player vocale ma con etichetta ed accento verde (colore "chiamata" già usato per il tasto accetta), così si distingue a colpo d'occhio da un messaggio vocale. */ .call-rec{margin-top:8px} .call-rec-label{font-size:0.6875rem;font-weight:700;color:var(--online);text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px} .msg.me .call-rec-label{color:#c8ffe6} .call-rec .voice{margin-top:0;border-color:rgba(47,227,143,.35)} .call-rec .vp-play{background:var(--online)} .call-rec .vp-fill{background:var(--online)} .msg.me .call-rec .vp-play{background:#fff;color:var(--online)} .msg.me .call-rec .vp-fill{background:#fff} .vplay{width:34px;height:34px;border-radius:50%;background:var(--accent);border:none;color:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0} .msg.me .vplay{background:#fff;color:var(--accent)} .typing{display:flex;align-items:center;gap:10px;padding:4px 0 10px;color:var(--text-dim);font-size:0.78125rem} .typing .dots{display:flex;gap:4px} .typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:tp 1.2s infinite} .typing .dots i:nth-child(2){animation-delay:.15s}.typing .dots i:nth-child(3){animation-delay:.3s} @keyframes tp{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1}} .composer{padding:10px 16px 14px;position:relative;z-index:2} .edit-indicator{display:none;align-items:center;justify-content:space-between;padding:6px 12px;margin-bottom:8px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:0.75rem;font-weight:600} .mention-dropdown{display:none;position:absolute;bottom:100%;left:16px;margin-bottom:6px;width:min(280px,80%);max-height:220px;overflow-y:auto;background:rgba(22,24,42,.98);border:1px solid var(--stroke);border-radius:14px;padding:6px;backdrop-filter:blur(24px);box-shadow:0 16px 40px -10px rgba(0,0,0,.6);z-index:20} .mention-dropdown.on{display:block} .mention-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:0.8125rem} .mention-row img{width:24px;height:24px;border-radius:8px;object-fit:cover} .mention-row .mr-name{font-weight:600} .mention-row .mr-handle{color:var(--text-dim);font-size:0.71875rem;margin-left:4px} .mention-row.active{background:var(--accent-soft)} .mention{font-weight:700;color:var(--accent);background:var(--accent-soft);padding:0 4px;border-radius:5px} .msg.me .mention{color:#fff;background:rgba(255,255,255,.22)} .edit-indicator.on{display:flex} .edit-indicator .icon-btn{width:22px;height:22px;color:var(--accent)} .reply-indicator{display:none;align-items:center;gap:9px;padding:7px 12px;margin-bottom:8px;border-radius:10px;background:var(--panel-strong);border-left:3px solid var(--accent)} .reply-indicator.on{display:flex} .reply-indicator svg{color:var(--accent);flex-shrink:0} .reply-indicator .ri-body{flex:1;min-width:0} .reply-indicator .ri-name{font-size:0.71875rem;font-weight:700;color:var(--accent)} .reply-indicator .ri-text{font-size:0.75rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .reply-indicator .icon-btn{width:22px;height:22px;color:var(--text-dim);flex-shrink:0} .reply-quote{display:block;padding:3px 8px;margin-bottom:4px;border-radius:7px;border-left:3px solid var(--accent);background:rgba(0,0,0,.18);cursor:pointer;max-width:100%;white-space:normal} .msg.me .reply-quote{background:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.7)} .reply-quote .rq-name{font-size:0.6875rem;font-weight:700;color:var(--accent);line-height:1.35} .msg.me .reply-quote .rq-name{color:#fff} .reply-quote .rq-text{font-size:0.71875rem;line-height:1.35;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msg.me .reply-quote .rq-text{color:rgba(255,255,255,.75)} .selection-reply-btn{position:absolute;z-index:40;padding:6px 12px;border-radius:10px;border:none;background:rgba(22,24,42,.97);color:var(--text);font-size:0.78125rem;font-weight:600;cursor:pointer;box-shadow:0 10px 26px -8px rgba(0,0,0,.6);display:flex;align-items:center;gap:6px} .selection-reply-btn svg{width:14px;height:14px} body.light .selection-reply-btn{background:rgba(255,255,255,.97)} .comp-box{position:relative;display:flex;align-items:flex-end;gap:6px;background:rgba(0,0,0,.32);border:1px solid var(--stroke);border-radius:18px;padding:7px 9px;backdrop-filter:blur(16px);transition:.2s} .comp-box:focus-within{border-color:color-mix(in srgb, var(--accent) 65%, transparent);box-shadow:0 0 0 4px var(--accent-soft)} .comp-box textarea{flex:1;background:none;border:none;outline:none;resize:none;color:var(--text);font-family:inherit;font-size:0.84375rem;line-height:1.45;padding:6px 6px;max-height:120px} .comp-box textarea::placeholder{color:var(--text-dim)} .c-btn{width:38px;height:38px;border-radius:13px;border:none;background:transparent;color:var(--text-dim);display:grid;place-items:center;cursor:pointer;transition:.15s;flex-shrink:0} .c-btn:hover{background:var(--panel-strong);color:var(--text)} .comp-extra{display:contents} #compMoreBtn{display:none} .c-btn.recording{background:var(--busy);color:#fff;animation:c-btn-rec-pulse 1.2s ease-in-out infinite} @keyframes c-btn-rec-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,122,.55)}50%{box-shadow:0 0 0 8px rgba(255,92,122,0)}} .c-btn.transcribing{opacity:.55;pointer-events:none} .c-btn.transcribing svg{animation:anim-spin-slow 1.1s linear infinite} .priority-btn.on{background:var(--busy);color:#fff;animation:anim-blink 1.6s ease-in-out infinite} .msg.urgent .bubble{border:2px solid var(--busy);box-shadow:0 0 0 3px rgba(255,92,122,.25)} .msg.urgent .who::after{content:'🔴 priorità alta';font-size:0.625rem;font-weight:700;color:var(--busy);margin-left:6px;text-transform:uppercase;letter-spacing:.4px} .ping-bubble{cursor:pointer;border:1.5px solid #f5b93d;background:color-mix(in srgb, #f5b93d 12%, transparent);border-radius:12px;padding:6px 11px;max-width:280px;transition:.15s;white-space:normal} .ping-bubble:hover{background:color-mix(in srgb, #f5b93d 20%, transparent)} .ping-label{font-size:0.65625rem;font-weight:700;color:#f5b93d;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;line-height:1.35} .ping-quote{font-size:0.78125rem;line-height:1.35;color:var(--text);opacity:.9;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* nel proprio fumetto (sfondo colorato pieno) il testo del messaggio è bianco (.msg.me .bubble{color:#fff}): la citazione del ping deve seguire la stessa regola, altrimenti resta scuro/illeggibile sul gradiente */ .msg.me .ping-label{color:#ffe4a8} .msg.me .ping-quote{color:rgba(255,255,255,.9)} @keyframes highlight-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,185,61,0)}20%,60%{box-shadow:0 0 0 6px rgba(245,185,61,.45)}} .msg.highlight-pulse .bubble{animation:highlight-pulse 1.1s ease-in-out 2} .msg-select{display:none;align-items:center;cursor:pointer;align-self:center;flex-shrink:0} .msgs.bulk-mode .msg-select{display:flex} .msg-select input{width:18px;height:18px;cursor:pointer;accent-color:var(--accent)} .msgs.bulk-mode .msg{cursor:pointer} .msg.selected .bubble{outline:2px solid var(--accent);outline-offset:1px} .bulk-bar{display:none;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--stroke);background:var(--panel);flex-wrap:wrap} .bulk-bar #bulkCount{font-size:0.8125rem;font-weight:600;color:var(--text-dim);white-space:nowrap} .bulk-bar select{flex:1;min-width:160px;background:rgba(0,0,0,.25);border:1px solid var(--stroke);border-radius:10px;color:var(--text);font-size:0.8125rem;padding:8px 10px} .c-btn svg{width:19px;height:19px} .send{background:var(--bubble-me);color:#fff;box-shadow:0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent)} .send:hover{background:var(--bubble-me);color:#fff;filter:brightness(1.12)} .rpanel{width:0;transition:width .35s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;flex-direction:column} .rpanel.open{width:300px;margin-left:12px} .rp-inner{width:300px;flex-shrink:0;height:100%;background:var(--panel);border:1px solid var(--stroke);border-radius:24px;backdrop-filter:blur(24px);display:flex;flex-direction:column;overflow:hidden} .rp-head{padding:18px 20px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;gap:10px} .rp-head h3{font-family:'Space Grotesk',sans-serif;font-size:0.9375rem;font-weight:700;flex:1} .rp-head .icon-btn{width:32px;height:32px;border-radius:10px} .rp-body{flex:1;overflow-y:auto;padding:16px 18px} .rp-sec{font-size:0.65625rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-dim);margin:14px 0 10px} .member{display:flex;align-items:center;gap:10px;padding:6px 6px;border-radius:11px;cursor:pointer;transition:.15s} .notif-row{border-bottom:1px solid var(--stroke);border-radius:0;padding:11px 4px} .notif-row:last-child{border-bottom:none} /* nome dedicato "notif-unread" (non "unread"): quella classe è già usata dal badge numerico dei non letti (height:19px, centrato) — condividerla con qui schiacciava l'altezza della riga e ne tagliava il testo multilinea */ .notif-row.notif-unread{position:relative} .notif-row.notif-unread::before{content:"";position:absolute;left:-8px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--accent)} .notif-row.notif-unread .mn{font-weight:700} .member:hover{background:var(--panel-strong)} .member img{width:31px;height:31px;border-radius:10px;object-fit:cover} .member .mm{flex:1;min-width:0} .member .mn{font-size:0.84375rem;font-weight:600} .member .mr{font-size:0.6875rem;color:var(--text-dim)} .member .sdot{width:9px;height:9px;border-radius:50%} .member-remove{flex-shrink:0;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--text-dim);font-size:1.1rem;line-height:1;cursor:pointer;opacity:0;transition:.15s} .member:hover .member-remove,.member-remove:focus{opacity:1} .member-remove:hover{background:rgba(255,80,80,.15);color:#ff6b6b} .rp-field{margin-bottom:10px} .rp-field label{font-size:0.6875rem;color:var(--text-dim);display:block;margin-bottom:5px} .rp-field input,.rp-field select,.rp-field textarea{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--stroke);border-radius:10px;padding:8px 10px;color:var(--text);font-family:inherit;font-size:0.8125rem} .btn{background:var(--bubble-me);color:#fff;border:none;border-radius:12px;padding:9px 16px;font-weight:600;font-size:0.8125rem;cursor:pointer} .btn:hover{filter:brightness(1.1)} .btn.secondary{background:var(--panel-strong);color:var(--text)} .btn.danger{background:rgba(255,92,122,.18);color:#ff5c7a} .acc-row{display:flex;gap:10px;flex-wrap:wrap} .acc{width:34px;height:34px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:.18s} .acc:hover{transform:scale(1.12)} .acc.sel{border-color:#fff;box-shadow:0 0 0 3px var(--accent-soft)} .wall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .wall{aspect-ratio:1;border-radius:13px;cursor:pointer;border:2px solid transparent;transition:.18s;position:relative;overflow:hidden} .wall:hover{transform:scale(1.05)} .wall.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:4px} .theme-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:12px;border:2px solid var(--stroke);background:var(--panel-strong);cursor:pointer;color:var(--text);font-family:inherit;font-size:0.78125rem;font-weight:600;transition:.15s} .theme-opt:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--stroke))} .theme-opt.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .theme-swatch{width:26px;height:26px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,#7c5cff,#00d4ff);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)} .theme-swatch.th-light{background:linear-gradient(135deg,#f3f5fb,#dbe4f5);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} .theme-swatch.th-flat.th-dark{background:#171a28} .theme-swatch.th-flat.th-light{background:#ffffff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .theme-swatch[style*="--th-accent"]{background:var(--th-accent)} .toast{position:fixed;top:22px;right:22px;z-index:80;width:280px;background:rgba(20,22,40,.85);border:1px solid var(--stroke);border-radius:16px;padding:11px 14px;backdrop-filter:blur(24px);display:flex;gap:10px;align-items:flex-start;transform:translateX(340px);transition:transform .45s cubic-bezier(.34,1.3,.5,1);box-shadow:0 20px 50px -12px rgba(0,0,0,.6);cursor:pointer} .toast.on{transform:none} .toast.urgent{border-color:#ff4d5e;box-shadow:0 20px 50px -12px rgba(255,77,94,.5),0 0 0 1px rgba(255,77,94,.4)} .toast.urgent .tlabel{color:#ff4d5e} .toast.urgent .tt{color:#ff4d5e} /* Un ping è un sollecito, non un allarme: colore ambra distinto dal rosso "urgente" così si riconosce subito il tipo di notifica. */ .toast.ping{border-color:#f5b93d;box-shadow:0 20px 50px -12px rgba(245,185,61,.5),0 0 0 1px rgba(245,185,61,.4)} .toast.ping .tt{color:#f5b93d} .sound-opt.sel{border-color:var(--accent);color:var(--accent);font-weight:700} .ss-banner{display:flex;align-items:center;gap:10px;padding:9px 22px;background:color-mix(in srgb, var(--accent) 18%, transparent);border-bottom:1px solid var(--stroke);font-size:0.8125rem} .ss-banner #ssBannerText{flex:1;font-weight:600} .icon-btn.sharing{background:var(--busy);color:#fff} /* Barra dedicata alla registrazione riunioni: colori ambra/rossi apposta diversi da tutte le altre barre/banner, per farla riconoscere subito come una feature specifica delle chat di tipo "riunione". */ .meeting-record-bar{display:flex;align-items:center;gap:10px;padding:9px 22px;background:linear-gradient(90deg,rgba(255,150,40,.20),rgba(255,90,40,.12));border-bottom:1px solid rgba(255,150,40,.35);font-size:0.8125rem;color:#ffb347} .meeting-record-bar .mrb-label{flex:1;font-weight:600} .meeting-record-bar #meetingRecordBtn{background:linear-gradient(90deg,#ff9628,#ff5546);color:#fff;border:none;font-weight:700} .meeting-record-bar.recording{background:linear-gradient(90deg,rgba(255,60,60,.28),rgba(255,20,20,.16));animation:mrb-pulse 1.6s ease-in-out infinite} .meeting-record-bar.recording #meetingRecordBtn{background:#c0293a} @keyframes mrb-pulse{0%,100%{opacity:1}50%{opacity:.75}} body.light .meeting-record-bar{color:#b35900} .ss-overlay{position:fixed;inset:0;z-index:75;background:rgba(6,7,14,.85);backdrop-filter:blur(10px);display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px} .ss-overlay.on{display:flex} .ss-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;max-width:100%;max-height:80vh} .ss-grid video{max-width:min(90vw,900px);max-height:70vh;border-radius:16px;border:1px solid var(--stroke);background:#000} .ss-tile{display:flex;flex-direction:column;align-items:center;gap:6px} .ss-tile .ss-label{font-size:0.75rem;color:var(--text-dim)} .ss-controls{display:flex;gap:10px} .lightbox{position:fixed;inset:0;z-index:95;background:rgba(4,5,10,.94);backdrop-filter:blur(8px);display:none;touch-action:none} .lightbox.on{display:block} .lightbox-stage{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none} /* Foto grandi (es. 12MP da telefono): in un flex item max-width/max-height 100% non coincidono con il box usato per justify-content, quindi l'immagine risulta traslata a sinistra e tagliata. Fuori dal flex, centrata sul viewport, object-fit contain. Lo zoom JS aggiunge translate(-50%,-50%) come base. */ .lightbox img{position:absolute;top:50%;left:50%;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;min-width:0;min-height:0;border-radius:8px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);cursor:default;transform:translate(-50%,-50%);transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none} .lightbox-frame,.lightbox-video{width:min(100%,920px);height:min(100%,86%);border:0;border-radius:10px;background:#111;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)} .lightbox.is-pdf .lightbox-stage{top:calc(62px + env(safe-area-inset-top,0px))} .lightbox.is-pdf::after{content:"";position:absolute;top:0;left:0;right:0;height:calc(62px + env(safe-area-inset-top,0px));background:rgba(4,5,10,.92);z-index:3;pointer-events:none} .lightbox.is-pdf .lightbox-frame{width:100%;height:100%;max-width:none;border-radius:0;box-shadow:none} .lightbox-file{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 22px;max-width:86%;text-align:center;color:#fff} /* display:flex su .lightbox-file vince sul [hidden] del browser: la scheda "Anteprima non disponibile" restava visibile sopra l'iframe del PDF. */ .lightbox img[hidden], .lightbox-frame[hidden], .lightbox-video[hidden], .lightbox-file[hidden]{display:none!important} .lightbox-file-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:0.75rem;font-weight:800;background:rgba(255,255,255,.12)} .lightbox-file-name{font-size:1rem;font-weight:650;word-break:break-word} .lightbox-file-hint{font-size:0.8125rem;color:rgba(255,255,255,.65);line-height:1.45;max-width:280px} .lightbox-back{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:14px;z-index:4;border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:8px 14px;font:650 0.875rem/1 Inter,system-ui,sans-serif;cursor:pointer} .lightbox-back:hover{background:rgba(255,255,255,.2)} .lightbox-controls{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:14px;z-index:4;display:flex;gap:10px} .lightbox-controls .icon-btn{background:rgba(255,255,255,.1);color:#fff;width:38px;height:38px;border-color:transparent} .lightbox-controls .icon-btn:hover{background:rgba(255,255,255,.2)} .att-img img{cursor:zoom-in} /* Widget di chiamata flottante, non a schermo intero: durante una chiamata si deve poter continuare a scrivere/leggere il resto della chat — non è un blocco modale, solo una card ben in vista in un angolo. */ .call-overlay{position:fixed;top:16px;right:16px;z-index:140;display:none;align-items:center;gap:12px;padding:10px 14px;max-width:340px;background:rgba(22,24,42,.97);backdrop-filter:blur(24px);border:1px solid var(--stroke);border-radius:18px;box-shadow:0 16px 40px -10px rgba(0,0,0,.6);touch-action:none;cursor:grab} .call-overlay.dragging{cursor:grabbing;user-select:none} .call-overlay .call-btn{cursor:pointer} .call-overlay.expanded{cursor:default} .call-overlay.on{display:flex} .call-overlay.ringing{border-color:var(--accent);box-shadow:0 16px 40px -10px rgba(0,0,0,.6),0 0 0 3px var(--accent-soft);animation:call-ring-shake 1.4s ease-in-out infinite} /* con video attivo (proprio o di un altro partecipante) il widget passa da riga compatta a colonna più larga, con la griglia di tile video sopra a nome/stato/controlli — appena tutti spengono la webcam torna al widget audio compatto di sempre */ .call-overlay.video-on{flex-direction:column;align-items:stretch;max-width:min(92vw,460px);width:min(92vw,460px)} .call-overlay.video-on .call-avatar{display:none} /* "Ingrandisci" ha senso solo quando c'è un video da vedere meglio */ .call-btn.expand{display:none} .call-overlay.video-on .call-btn.expand{display:grid} .call-btn.expand.on{background:var(--accent);color:#fff} /* widget ingrandito: centrato, molto più grande, tile video più leggibili — resta comunque un overlay fluttuante sopra la chat, non un modale */ .call-overlay.expanded{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);max-width:min(94vw,900px);width:min(94vw,900px)} .call-overlay.expanded .call-videos{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .call-overlay.expanded .call-vtile{aspect-ratio:16/10} .call-videos{display:none;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:6px;margin-bottom:2px} .call-vtile{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--panel-strong);display:flex;align-items:center;justify-content:center} .call-vtile.local{order:-1;box-shadow:0 0 0 2px var(--accent-soft)} .call-vtile video{width:100%;height:100%;object-fit:cover;display:none} .call-vtile.has-video video{display:block} .call-vtile .vtile-av{width:42%;max-width:56px;border-radius:50%;object-fit:cover} .call-vtile.has-video .vtile-av{display:none} .call-vtile .vtile-name{position:absolute;left:4px;bottom:3px;font-size:0.625rem;color:#fff;background:rgba(0,0,0,.45);padding:1px 5px;border-radius:5px;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .call-vtile.screen{grid-column:span 2} .vtile-actions{position:absolute;top:4px;right:4px;display:flex;gap:4px;opacity:0;transition:opacity .15s} .call-vtile.screen:hover .vtile-actions{opacity:1} .vtile-act{width:24px;height:24px;border-radius:7px;border:none;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer} .vtile-act:hover{background:rgba(0,0,0,.75)} @keyframes call-ring-shake{0%,85%,100%{transform:translateX(0)}88%{transform:translateX(-3px)}91%{transform:translateX(3px)}94%{transform:translateX(-2px)}97%{transform:translateX(2px)}} .call-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 3px rgba(124,92,255,.22);animation:call-avatar-pulse 1.8s ease-in-out infinite} @keyframes call-avatar-pulse{0%,100%{box-shadow:0 0 0 3px rgba(124,92,255,.22)}50%{box-shadow:0 0 0 7px rgba(124,92,255,.08)}} .call-info{flex:1;min-width:0} .call-name{font-size:0.8125rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .call-status{font-size:0.71875rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .call-participants{display:flex;gap:-4px;margin-top:3px} .call-reconnecting{font-size:0.65625rem;font-weight:700;color:#ffb020;margin-top:3px;animation:call-reconnect-pulse 1.1s ease-in-out infinite} @keyframes call-reconnect-pulse{0%,100%{opacity:1}50%{opacity:.45}} .call-participants .cp-av{width:18px;height:18px;border-radius:50%;object-fit:cover;border:2px solid rgba(22,24,42,.97);margin-left:-6px} .call-participants .cp-av:first-child{margin-left:0} .call-controls{display:flex;gap:8px;flex-shrink:0} .call-btn{width:36px;height:36px;border-radius:50%;border:none;display:grid;place-items:center;cursor:pointer;transition:.15s;color:#fff;pointer-events:auto} .call-btn svg,.call-btn path{pointer-events:none} .call-btn.accept{background:var(--online)} .call-btn.accept:hover{filter:brightness(1.1)} .call-btn.reject{background:var(--busy)} .call-btn.reject:hover{filter:brightness(1.1)} .call-btn.mute{background:var(--panel-strong);color:var(--text)} .call-btn.mute.on{background:var(--accent);color:#fff} .call-btn.video{background:var(--panel-strong);color:var(--text)} .call-btn.video.on{background:var(--accent);color:#fff} .call-btn.screen{background:var(--panel-strong);color:var(--text)} .call-btn.screen.on{background:var(--accent);color:#fff} .call-btn.screen:disabled{opacity:.4;cursor:not-allowed} .call-btn.addp{background:var(--panel-strong);color:var(--text);width:30px;height:30px} .call-btn.addp:hover{background:var(--accent-soft)} @media (max-width:768px){ .call-overlay{left:10px;right:10px;top:10px;max-width:none} .call-overlay.expanded{left:10px;right:10px;top:50%;width:auto;transform:translateY(-50%)} .call-btn.accept,.call-btn.reject{width:44px;height:44px} } .toast img{width:40px;height:40px;border-radius:13px;object-fit:cover} .toast .tt{font-size:0.8125rem;font-weight:700;color:var(--text)} .toast .tm{font-size:0.78125rem;color:var(--text-dim);margin-top:3px;line-height:1.4} .toast .tlabel{font-size:0.625rem;font-weight:700;color:var(--accent);letter-spacing:.8px;text-transform:uppercase;margin-bottom:3px;display:flex;align-items:center;gap:5px} .cmdk{position:fixed;inset:0;z-index:70;background:rgba(6,7,14,.55);backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding-top:14vh} .cmdk.on{display:flex;animation:fade .2s} @keyframes fade{from{opacity:0}to{opacity:1}} .cmdk-box{width:min(560px,90vw);background:rgba(22,24,42,.92);border:1px solid var(--stroke);border-radius:22px;overflow:hidden;backdrop-filter:blur(30px);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)} .cmdk-box input{width:100%;background:none;border:none;outline:none;color:var(--text);font-size:1rem;font-family:inherit;padding:19px 22px;border-bottom:1px solid var(--stroke)} .cmdk-list{max-height:320px;overflow-y:auto;padding:8px} .cmdk-it{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:13px;cursor:pointer;font-size:0.875rem} .cmdk-it:hover,.cmdk-it.hl{background:var(--accent-soft)} .cmdk-sec{margin-top:6px;padding-top:8px;border-top:1px solid var(--stroke)} .cmdk-sec-title{font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);padding:6px 14px 4px} .cmdk-msg-it{flex-direction:column;align-items:stretch;gap:3px} .cmdk-msg-top{display:flex;justify-content:space-between;gap:10px;font-size:0.78125rem} .cmdk-msg-sender{font-weight:700;color:var(--text)} .cmdk-msg-conv{color:var(--text-dim);flex-shrink:0} .cmdk-msg-body{font-size:0.84375rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .search-hit{background:#ffe066;color:#111;border-radius:2px;padding:0 1px} .conv-search-bar{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--stroke);background:rgba(11,13,23,.25);color:var(--text-dim)} .conv-search-bar input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:0.90625rem;font-family:inherit} .conv-search-results{max-height:280px;overflow-y:auto;border-bottom:1px solid var(--stroke);background:var(--panel)} .conv-search-it{display:flex;flex-direction:column;gap:3px;padding:10px 18px;cursor:pointer;border-bottom:1px solid var(--stroke)} .conv-search-it:hover{background:var(--accent-soft)} .conv-search-it .csr-top{display:flex;justify-content:space-between;gap:10px;font-size:0.75rem;color:var(--text-dim)} .conv-search-it .csr-body{font-size:0.84375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .conv-search-empty{padding:16px 18px;color:var(--text-dim);font-size:0.84375rem} body.light .conv-search-bar{background:rgba(255,255,255,.35)} .modal-ov{position:fixed;inset:0;z-index:120;background:rgba(6,7,14,.7);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center} .modal-ov.on{display:flex} .modal-card{width:min(400px,92vw);background:rgba(19,21,40,.97);border:1px solid var(--stroke);border-radius:20px;padding:22px;backdrop-filter:blur(30px)} .modal-card h3{font-family:'Space Grotesk',sans-serif;font-size:0.96875rem;margin-bottom:14px} .read-receipt-summary{margin:-7px 0 14px;color:var(--text-dim);font-size:0.78125rem} .read-receipt-list{display:flex;flex-direction:column;gap:3px;max-height:min(420px,55vh);overflow-y:auto} .read-receipt-user{cursor:default;padding:8px} .read-receipt-user:hover{background:var(--panel-strong)} .read-receipt-user img{width:38px;height:38px;border-radius:12px} .read-receipt-check{flex-shrink:0;color:var(--accent-2)} .admin-page{position:fixed;inset:0;z-index:96;background:var(--bg);display:none;flex-direction:column; top:var(--net-banner-h,0px)} /* fissa: il padding di .app non la tocca */ .admin-page.on{display:flex} .admin-page-header{display:flex;align-items:center;gap:18px;padding:16px 28px;border-bottom:1px solid var(--stroke);background:rgba(11,13,23,.5);backdrop-filter:blur(20px);flex-shrink:0} .admin-page-title{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600;color:var(--text-dim)} .admin-page-body{flex:1;overflow-y:auto;padding:28px 32px 60px} .admin-page-body>.admin-inner{max-width:920px;margin:0 auto} .admin-page-body h3{display:none} .admin-page-body .modal-actions{max-width:920px;margin:0 auto} .admin-page-body .chk-list{max-height:none!important} @media (max-width:768px){ .admin-page-header{padding:14px 16px} .admin-page-body{padding:18px 16px 40px} } /* Sotto-tab Impostazioni istanza */ .inst-subtabs{display:flex;gap:4px;background:var(--panel-strong);border:1px solid var(--stroke); border-radius:14px;padding:4px;margin:4px 0 20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .inst-subtabs::-webkit-scrollbar{display:none} .inst-subtab{flex:1 0 auto;border:0;background:transparent;color:var(--text-dim);font:inherit; font-size:0.8125rem;font-weight:650;padding:8px 14px;border-radius:11px;cursor:pointer;white-space:nowrap} .inst-subtab:hover{color:var(--text);background:rgba(255,255,255,.04)} .inst-subtab.on{background:var(--panel);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.16)} .inst-pane{display:none} .inst-pane.on{display:block} .inst-card{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:18px 20px 12px;margin-bottom:14px} .inst-card-title{font-family:'Space Grotesk',sans-serif;font-size:0.9375rem;font-weight:600;margin:0 0 4px} .inst-card-desc{font-size:0.78125rem;color:var(--text-dim);margin:0 0 14px;line-height:1.45} .inst-card .rp-sec{margin-top:4px} .inst-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .inst-grid .span-2{grid-column:1 / -1} .inst-card .chk-row{margin-bottom:12px} .inst-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px; margin-top:6px;padding:18px 0 4px;background:linear-gradient(180deg,transparent,var(--bg) 36%);z-index:2} .inst-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 12px} .inst-presets span{font-size:0.75rem;color:var(--text-dim)} body.light .inst-subtab:hover{background:rgba(10,15,40,.04)} body.light .inst-subtab.on{background:#fff;box-shadow:0 1px 4px rgba(15,20,50,.1)} @media (max-width:768px){ .inst-grid{grid-template-columns:1fr} .inst-subtab{flex:1 1 auto;text-align:center;padding:10px 12px;font-size:0.75rem} .inst-card{padding:16px 14px 10px} .inst-actions{justify-content:stretch} .inst-actions .btn{flex:1} } /* Figlio flex di #app su desktop, overlay fisso solo su mobile (vedi media query più sotto). */ .pm-page{flex:1;display:none;flex-direction:column;background:var(--panel);border:1px solid var(--stroke);border-radius:24px;overflow:hidden} .pm-page.on{display:flex} .pm-page-header{display:flex;align-items:center;gap:18px;padding:16px 28px;border-bottom:1px solid var(--stroke);background:rgba(11,13,23,.5);backdrop-filter:blur(20px);flex-shrink:0} .pm-back{display:none;flex-shrink:0} .pm-page-title{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600;color:var(--text-dim)} .pm-cal-upcoming{display:none} .pm-tabs{display:flex;gap:4px;background:var(--panel-strong);border-radius:12px;padding:3px} .pm-tab{border:0;background:transparent;color:var(--text-dim);font:inherit;font-size:0.75rem;font-weight:650;padding:6px 12px;border-radius:9px;cursor:pointer} .pm-tab.on{background:var(--panel);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.12)} .modal-card.wide{width:min(560px,94vw);max-height:88vh;overflow-y:auto} .vr-mode{display:flex;gap:8px;margin:4px 0 12px} .vr-mode button{flex:1;border:1px solid var(--stroke);background:var(--panel-strong);color:var(--text);border-radius:10px;padding:8px 10px;font:inherit;font-size:0.78rem;font-weight:650;cursor:pointer} .vr-mode button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .vr-row2{display:grid;grid-template-columns:1fr 110px;gap:10px} .vr-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:0;margin-top:8px} .vr-chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--text);border-radius:999px;padding:4px 8px 4px 10px;font-size:0.75rem} .vr-chip button{border:0;background:transparent;color:var(--text-dim);cursor:pointer;font-size:13px;line-height:1} .vr-users{max-height:140px;overflow:auto;margin-top:8px;display:flex;flex-direction:column;gap:4px} .vr-colleagues{margin-top:8px;font-size:0.75rem;color:var(--text-dim)} .vr-colleagues summary{cursor:pointer;font-weight:650} .vr-user{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;cursor:pointer} .vr-user:hover{background:var(--panel-strong)} .vr-user img,.vr-user .vr-av{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:0.65rem;font-weight:700} .pm-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap} .pm-cal-head h3{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;margin:0;flex:1;min-width:0} .pm-cal-modes{display:flex;gap:3px;background:var(--panel-strong);border-radius:10px;padding:3px} .pm-cal-mode{border:0;background:transparent;color:var(--text-dim);font:inherit;font-size:0.72rem;font-weight:650;padding:6px 10px;border-radius:8px;cursor:pointer} .pm-cal-mode.on{background:var(--panel);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.12)} .pm-cal-nav{display:flex;gap:6px} .pm-cal-nav button{width:32px;height:32px;border-radius:10px;border:1px solid var(--stroke);background:var(--panel-strong);color:var(--text);cursor:pointer} .pm-cal-nav #pmCalToday{width:auto;padding:0 10px;font-size:12px} .pm-week-hint{margin:0 0 10px;font-size:0.72rem;color:var(--text-dim)} .pm-detail:has(.pm-week){display:flex;flex-direction:column;overflow:hidden;min-height:0} .pm-week{--pm-hour-h:52px;flex:1;min-height:0;display:flex;flex-direction:column} .pm-week-head-row{display:grid;grid-template-columns:44px repeat(5,1fr);flex-shrink:0;border-bottom:1px solid var(--stroke);background:var(--panel);position:sticky;top:0;z-index:2} .pm-week-gutter{min-width:0} .pm-week-dhead{text-align:center;padding:6px 2px 8px;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-dim)} .pm-week-dhead em{display:block;font-style:normal;font-size:0.95rem;font-weight:700;color:var(--text);margin-top:2px} .pm-week-dhead.today em{width:26px;height:26px;margin:2px auto 0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center} .pm-week-scroll{flex:1;overflow:auto;min-height:0;overscroll-behavior:contain} .pm-week-body{display:flex;height:calc(var(--pm-hour-h) * 11)} .pm-week-hours{width:44px;flex-shrink:0} .pm-week-hour{height:var(--pm-hour-h);font-size:0.62rem;color:var(--text-dim);line-height:1;transform:translateY(-6px)} .pm-week-cols{flex:1;display:grid;grid-template-columns:repeat(5,1fr);min-width:0} .pm-week-col{position:relative;border-left:1px solid var(--stroke);touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;background-image:repeating-linear-gradient(to bottom,transparent,transparent calc(var(--pm-hour-h) - 1px),var(--stroke) calc(var(--pm-hour-h) - 1px),var(--stroke) var(--pm-hour-h))} .pm-week-ev{position:absolute;left:3px;right:3px;z-index:1;border:0;border-left:3px solid var(--accent);border-radius:6px;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);font:inherit;font-size:0.68rem;font-weight:650;text-align:left;padding:3px 5px;overflow:hidden;cursor:pointer;line-height:1.25} .pm-week-ev strong{display:block;font-size:0.62rem;color:var(--accent)} .pm-week-ghost{position:absolute;left:2px;right:2px;z-index:2;pointer-events:none;border:1px dashed var(--accent);border-radius:6px;background:color-mix(in srgb,var(--accent) 28%,transparent)} .pm-week-now{position:absolute;left:0;right:0;height:2px;background:#ff5c7a;z-index:3;pointer-events:none} .pm-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .pm-cal-dow{font-size:0.68rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-dim);text-align:center;padding:4px 0} .pm-cal-day{min-height:78px;border:1px solid var(--stroke);border-radius:12px;padding:6px;background:rgba(0,0,0,.08);cursor:pointer} .pm-cal-day.out{opacity:.38} .pm-cal-day.today{border-color:var(--accent)} .pm-cal-day.on{background:var(--accent-soft)} .pm-cal-num{font-size:0.75rem;font-weight:700;margin-bottom:4px} .pm-cal-ev{font-size:0.68rem;font-weight:600;background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent);border-radius:6px;padding:2px 5px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pm-badge{display:inline-block;font-size:0.68rem;font-weight:700;padding:2px 8px;border-radius:8px;margin-left:8px;vertical-align:middle} .pm-badge.soon{background:rgba(0,102,204,.14);color:var(--accent)} .pm-badge.instant{background:var(--panel-strong);color:var(--text-dim)} .pm-invitees{display:flex;flex-direction:column;gap:8px;margin:12px 0 18px} .pm-invitee{display:flex;align-items:center;gap:8px;background:var(--panel-strong);border-radius:12px;padding:7px 10px} .pm-invitee .pm-p-av{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:0.68rem;font-weight:700} .pm-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 8px} .pm-page-body{flex:1;display:flex;overflow:hidden} .pm-sidebar{width:300px;flex-shrink:0;border-right:1px solid var(--stroke);overflow-y:auto;padding:10px} .pm-detail{flex:1;overflow-y:auto;padding:26px 30px} .pm-sec{display:flex;align-items:center;gap:6px;padding:12px 8px 8px;font-size:0.6875rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim)} .pm-row{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:13px;cursor:pointer;transition:.15s} .pm-row:hover{background:var(--panel-strong)} .pm-row.active{background:var(--accent-soft)} .pm-row-icon{width:34px;height:34px;border-radius:11px;background:color-mix(in srgb, #f5b93d 20%, transparent);color:#f5b93d;display:grid;place-items:center;flex-shrink:0} .pm-row-meta{flex:1;min-width:0} .pm-row-title{font-size:0.84375rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pm-row-sub{font-size:0.71875rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .pm-row-actions{display:flex;gap:2px;flex-shrink:0} .pm-row-actions .icon-btn{width:26px;height:26px} .pm-detail-empty{color:var(--text-dim);font-size:0.875rem;padding:40px;text-align:center} .pm-detail-head{margin-bottom:22px} .pm-detail-title{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:700;margin-bottom:4px} .pm-detail-sub{color:var(--text-dim);font-size:0.8125rem} .pm-status-badge{display:inline-block;font-size:0.6875rem;font-weight:700;padding:3px 9px;border-radius:8px;letter-spacing:.3px;margin-left:8px;vertical-align:middle} .pm-status-badge.pending{background:rgba(255,194,75,.18);color:var(--away)} .pm-status-badge.done{background:rgba(47,227,143,.18);color:var(--online)} .pm-status-badge.failed{background:rgba(255,92,122,.18);color:var(--busy)} .pm-participants{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px} .pm-participant{display:flex;align-items:center;gap:8px;background:var(--panel-strong);border-radius:12px;padding:6px 12px 6px 6px} .pm-participant img,.pm-participant .pm-p-av{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:0.6875rem;font-weight:700} .pm-participant-name{font-size:0.78125rem;font-weight:600} .pm-participant-time{font-size:0.65625rem;color:var(--text-dim)} .pm-transcript{background:var(--panel);border:1px solid var(--stroke);border-radius:14px;padding:18px;font-size:0.84375rem;line-height:1.6;white-space:pre-wrap} .pm-recording audio{width:100%;margin-bottom:16px} @media (max-width:768px){ /* Overlay sopra la tabbar, non sopra (inset:0 la copriva). Pannello singolo: lista o calendario o dettaglio, mai due colonne schiacciate. */ .pm-page{position:fixed;top:0;left:0;right:0;bottom:var(--mtb-h);z-index:48; border-radius:0;border:none; padding-top:max(env(safe-area-inset-top), var(--net-banner-h,0px))} .pm-page-header{padding:10px 12px 8px;flex-wrap:wrap;gap:8px} .pm-page-title{font-size:0.9375rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pm-page-header .btn{padding:8px 12px;font-size:0.78125rem;white-space:nowrap} .pm-page.pm-has-detail .pm-back{display:grid} .pm-page.pm-has-detail .pm-tabs, .pm-page.pm-has-detail #pmNewLinkBtn{display:none} .pm-page.pm-has-detail .pm-page-header{flex-wrap:nowrap} .pm-page-body{flex-direction:column} .pm-sidebar{width:100%;max-height:none;flex:1;border-right:none;border-bottom:none;padding:8px 10px 16px} .pm-detail{padding:14px 14px 20px;min-height:0} .pm-page.pm-tab-calendar:not(.pm-has-detail) .pm-sidebar{display:none} .pm-page.pm-tab-calendar:not(.pm-has-detail) .pm-detail{display:flex;flex-direction:column;flex:1} .pm-page.pm-tab-list:not(.pm-has-detail) .pm-detail{display:none} .pm-page.pm-has-detail .pm-sidebar{display:none} .pm-page.pm-has-detail .pm-detail{display:flex;flex-direction:column;flex:1} .pm-cal-upcoming{display:block;margin-top:14px} .pm-cal-head{margin-bottom:10px} .pm-cal-head h3{font-size:1rem} .pm-cal-mode{padding:7px 8px;font-size:0.68rem} .pm-week{--pm-hour-h:44px} .pm-week-head-row{grid-template-columns:32px repeat(5,1fr)} .pm-week-hours{width:32px} .pm-week-hour{font-size:0.55rem} .pm-week-dhead{font-size:0.58rem;padding:4px 1px 6px} .pm-week-dhead em{font-size:0.82rem} .pm-week-ev{font-size:0.58rem;padding:2px 3px;left:1px;right:1px} .pm-week-hint{font-size:0.65rem;margin-bottom:8px} .pm-cal-grid{gap:4px} .pm-cal-day{min-height:42px;padding:3px 2px;border-radius:8px} .pm-cal-num{font-size:0.6875rem;margin-bottom:2px} .pm-cal-ev{font-size:0.5625rem;padding:1px 3px;margin-bottom:2px} .pm-row{padding:11px 8px} .pm-row-icon{width:38px;height:38px} .pm-detail-title{font-size:1.05rem} .pm-detail-empty{padding:28px 16px} .pm-tabs{order:3;width:100%;justify-content:stretch} .pm-tab{flex:1;padding:8px 8px;font-size:0.71875rem} .vr-mode button{padding:11px 10px} .vr-row2{grid-template-columns:1fr} } .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px} .chk-list{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-top:6px} .chk-row{display:flex;align-items:flex-start;gap:8px;font-size:0.8125rem;line-height:1.4} .chk-row input[type="checkbox"]{flex-shrink:0;width:auto;margin-top:3px} .chk-row span{min-width:0;flex:1} body.light{--bg:#eef0f8;--panel:rgba(255,255,255,.6);--panel-strong:rgba(10,15,40,.06);--stroke:rgba(15,20,50,.1);--text:#171a2e;--text-dim:#6a7090;--bubble-other:rgba(255,255,255,.8)} body.light .aurora .blob{opacity:.25} body.light .status-dot{border-color:#fff} body.light .avatar-stack img,.light .avatar-stack .more{border-color:#fff} body.light .search{background:rgba(10,15,40,.05)} body.light .comp-box{background:rgba(255,255,255,.75)} body.light .att-file,.light .voice,body.light .link-preview-card,body.light .reply-quote,body.light .reply-indicator{background:rgba(10,15,40,.05)} body.light .link-preview-card:hover{background:rgba(10,15,40,.09)} body.light .toast{background:rgba(255,255,255,.9)} body.light .cmdk-box{background:rgba(255,255,255,.95)} body.light .topbar{background:rgba(255,255,255,.35)} body.light .rp-field input,body.light .rp-field select,body.light .rp-field textarea, body.light .bulk-bar select{background:rgba(10,15,40,.05)} body.light .admin-page-header{background:rgba(255,255,255,.7)} /* pannelli/popup fluttuanti: mancavano del tutto una variante chiara, restavano scuri sopra un'app altrimenti chiara (modali, dropdown, picker, banner) */ body.light .modal-card, body.light .status-picker-menu, body.light .reaction-picker, body.light .emoji-picker, body.light .msg-context-menu, body.light .mention-dropdown, body.light .update-card, body.light .ios-hint, body.light .comp-extra, body.light .tb-more-menu{background:rgba(255,255,255,.97)} body.light .update-whats-new{background:linear-gradient(135deg,rgba(47,227,143,.08),rgba(245,197,66,.14));border-color:rgba(47,227,143,.28)} body.light .update-whats-new-star{color:#a67c00;background:rgba(245,197,66,.35)} body.light .code-block{background:rgba(10,15,40,.05);border-color:rgba(15,20,50,.1)} body.light .code-block code{color:var(--text)} body.light .code-lang{border-color:rgba(15,20,50,.1)} body.light .inline-code{background:rgba(10,15,40,.08)} body.light .vp-speed{background:rgba(10,15,40,.08)} /* ====== TEMI "FLAT" (pannelli solidi, senza sfumature/aurora/blur) e tema "Aziendale" (sfondo bianco, blu di brand, alto contrasto) ====== */ body.theme-flat .aurora, body.theme-flat .splash-aurora{display:none} body.theme-flat{--bubble-me:var(--accent)} body.theme-flat:not(.light){--panel:#141726;--panel-strong:#1a1e30} body.theme-flat.light{--panel:#ffffff;--panel-strong:#eef0f6} body.theme-flat .sidebar,body.theme-flat .dock,body.theme-flat .rpanel,body.theme-flat .comp-box, body.theme-flat .modal-card,body.theme-flat .cmdk-box,body.theme-flat .topbar,body.theme-flat .toast, body.theme-flat .mobile-tabbar,body.theme-flat .main{backdrop-filter:none} body.theme-corporate{ --bg:#ffffff;--panel:#ffffff;--panel-strong:#f5f7fa;--stroke:#e0e4ea; --text:#1a1d24;--text-dim:#5b6270;--bubble-other:#f0f2f5; --online:#1f9d55;--busy:#cc0000;--away:#c98a00; } body.theme-corporate .msg.me .mention{background:rgba(255,255,255,.28)} /* login */ .login-screen{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow-y:auto;overflow-x:hidden;padding:24px 0;background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 14%, var(--bg)) 0%, var(--bg) 55%)} /* ---- sfondo futuristico dedicato alla login (distinto dall'aurora dell'app) ---- */ .login-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;perspective:600px} .login-grid{position:absolute;inset:-20% -20% 0 -20%;height:140%;background-image: linear-gradient(color-mix(in srgb, var(--accent) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent) 1px, transparent 1px); background-size:46px 46px; transform:rotateX(62deg) translateY(0); transform-origin:center top; opacity:.22; mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 55%, transparent 92%); animation:login-grid-pan 14s linear infinite} @keyframes login-grid-pan{from{background-position:0 0}to{background-position:0 92px}} .login-scanline{position:absolute;left:0;right:0;height:120px;top:-120px; background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent-2) 22%, transparent) 45%, transparent); animation:login-scan 6.5s ease-in-out infinite} @keyframes login-scan{0%{top:-15%}55%{top:105%}100%{top:105%}} .login-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:float 20s ease-in-out infinite alternate} .login-orb.o1{width:40vw;height:40vw;background:var(--accent);top:-8%;left:-6%} .login-orb.o2{width:32vw;height:32vw;background:var(--accent-2);bottom:-12%;right:-4%;animation-delay:-7s} .login-orb.o3{width:22vw;height:22vw;background:#ff4bb8;top:44%;left:60%;opacity:.28;animation-delay:-13s} @keyframes login-card-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes login-border-spin{to{--login-angle:360deg}} @property --login-angle{syntax:'';initial-value:0deg;inherits:false} /* ---------------- SPLASH SCREEN (avvio + aggiornamento) ---------------- */ /* ---------------- PING: overlay a schermo intero (più invadente del toast) ---------------- */ .meet-alert{position:fixed;inset:0;z-index:262;display:none;align-items:center;justify-content:center;padding:20px; background:rgba(6,7,14,.78);backdrop-filter:blur(6px);animation:meet-bg-flash .7s ease-in-out infinite} .meet-alert.on{display:flex} @keyframes meet-bg-flash{0%,100%{background:rgba(0,102,204,.22)}50%{background:rgba(245,185,61,.42)}} .meet-alert-card{width:100%;max-width:440px;background:rgba(22,24,42,.98);border:3px solid #0066cc;border-radius:24px;padding:32px 28px;text-align:center; box-shadow:0 0 0 10px rgba(0,102,204,.22),0 30px 70px -16px rgba(0,0,0,.7);animation:meet-card-pulse .8s ease-in-out infinite} body.light .meet-alert-card{background:rgba(255,255,255,.98);color:var(--text)} @keyframes meet-card-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}} .meet-alert-icon{font-size:3rem;line-height:1;margin-bottom:10px;animation:meet-icon-flash .5s ease-in-out infinite} @keyframes meet-icon-flash{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.2)}} .meet-alert-title{font-family:'Space Grotesk',sans-serif;font-size:1.375rem;font-weight:700;margin-bottom:10px;color:#5eb1ff} .meet-alert-quote{font-size:0.9375rem;line-height:1.5;color:var(--text-dim);margin-bottom:24px} .meet-alert-actions{display:flex;gap:10px} .meet-alert-actions .btn,.meet-alert-actions .btn.secondary{flex:1;width:auto} .ping-alert{position:fixed;inset:0;z-index:260;display:none;align-items:center;justify-content:center;padding:20px; background:rgba(6,7,14,.72);backdrop-filter:blur(6px);animation:ping-bg-flash 1s ease-in-out infinite} .ping-alert.on{display:flex} @keyframes ping-bg-flash{0%,100%{background:rgba(6,7,14,.72)}50%{background:rgba(245,185,61,.38)}} .ping-alert-card{width:100%;max-width:420px;background:rgba(22,24,42,.98);border:2px solid #f5b93d;border-radius:24px;padding:32px 28px;text-align:center; box-shadow:0 0 0 8px rgba(245,185,61,.18),0 30px 70px -16px rgba(0,0,0,.7);animation:ping-card-shake .5s ease-in-out 1} body.light .ping-alert-card{background:rgba(255,255,255,.98);color:var(--text)} @keyframes ping-card-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}} .ping-alert-icon{font-size:3rem;line-height:1;margin-bottom:10px;animation:ping-icon-bounce .6s ease-in-out infinite} @keyframes ping-icon-bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}} .ping-alert-title{font-family:'Space Grotesk',sans-serif;font-size:1.3125rem;font-weight:700;margin-bottom:10px;color:#f5b93d} .ping-alert-quote{font-size:0.875rem;line-height:1.5;color:var(--text-dim);font-style:italic;margin-bottom:24px;max-height:120px;overflow-y:auto} .ping-alert-actions{display:flex;gap:10px} .ping-alert-actions .btn,.ping-alert-actions .btn.secondary{flex:1;width:auto} .splash-screen{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .45s ease,visibility .45s ease} .splash-screen.hidden{opacity:0;visibility:hidden;pointer-events:none} .splash-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none} .splash-aurora .blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.55;animation:float 22s ease-in-out infinite alternate} .splash-aurora .b1{width:50vw;height:50vw;background:var(--accent);top:-15%;left:-10%} .splash-aurora .b2{width:40vw;height:40vw;background:var(--accent-2);bottom:-16%;right:-8%;animation-delay:-8s} .splash-aurora .b3{width:30vw;height:30vw;background:#ff4bb8;top:38%;left:58%;opacity:.3;animation-delay:-14s} .splash-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center} .splash-logo{width:88px;height:88px;animation:splash-pulse 1.8s ease-in-out infinite} .splash-logo img{width:88px;height:88px;display:block} @keyframes splash-pulse{0%,100%{transform:scale(1);box-shadow:0 20px 60px -12px color-mix(in srgb, var(--accent) 65%, transparent)}50%{transform:scale(1.07);box-shadow:0 24px 70px -10px color-mix(in srgb, var(--accent) 80%, transparent)}} .splash-title{font-family:'Space Grotesk',sans-serif;font-size:1.875rem;font-weight:700;letter-spacing:-.5px} .splash-bar{width:160px;height:4px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden} .splash-bar-fill{height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:splash-bar 1.3s ease-in-out infinite} @keyframes splash-bar{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}} .splash-sub{font-size:0.8125rem;color:var(--text-dim)} /* ---------------- POPUP AGGIORNAMENTO DISPONIBILE ---------------- Centrato e grande apposta (richiesta esplicita): un aggiornamento disponibile deve essere impossibile da non notare, non un bannerino discreto in un angolo che si può ignorare per sbaglio. */ .update-overlay{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,7,14,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:.25s} .update-overlay.show{opacity:1;pointer-events:auto} .update-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 36px;border-radius:28px;background:rgba(22,24,42,.98);border:1px solid var(--stroke);box-shadow:0 30px 70px -14px rgba(0,0,0,.65);width:min(92vw,480px);transform:scale(.94) translateY(10px);transition:.25s} .update-overlay.show .update-card{transform:scale(1) translateY(0)} .update-icon{font-size:3.25rem;line-height:1;margin-bottom:4px} .update-title{font-size:1.5rem;font-weight:800;font-family:'Space Grotesk',sans-serif} .update-version{font-size:0.9375rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:20px;padding:5px 16px;letter-spacing:.3px} .update-whats-new{display:flex;align-items:flex-start;gap:12px;width:100%;margin:4px 0 2px;padding:14px 16px;border-radius:16px;text-align:left;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,#f5c542 12%,transparent));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,#f5c542 18%,transparent) inset;animation:update-whats-new-in .45s ease both} .update-whats-new[hidden]{display:none} .update-whats-new-star{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#b8860b;background:color-mix(in srgb,#f5c542 28%,transparent);box-shadow:0 0 18px color-mix(in srgb,#f5c542 35%,transparent)} .update-whats-new-body{min-width:0;flex:1} .update-whats-new-label{font-size:0.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 85%,#b8860b);margin:0 0 6px} .update-whats-new-list{margin:0;padding-left:1.1em;font-size:0.9rem;font-weight:600;line-height:1.45;color:var(--text)} .update-whats-new-list li{margin:0 0 4px} .update-whats-new-list li:last-child{margin-bottom:0} @keyframes update-whats-new-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}} .profile-changelog{margin:0 0 4px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,#f5c542 12%,transparent));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,#f5c542 18%,transparent) inset} .profile-changelog[hidden]{display:none} .profile-changelog-meta{margin:0 0 10px;font-size:0.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 85%,#b8860b)} .profile-changelog-list{margin:0;padding-left:1.1em;font-size:0.9rem;font-weight:600;line-height:1.45;color:var(--text);max-height:min(42vh,280px);overflow-y:auto} .profile-changelog-list li{margin:0 0 6px} .profile-changelog-list li:last-child{margin-bottom:0} .profile-changelog-empty{margin:8px 0 0;font-size:13px;color:var(--text-dim);text-align:center} body.light .profile-changelog{background:linear-gradient(135deg,rgba(47,227,143,.08),rgba(245,197,66,.14));border-color:rgba(47,227,143,.28)} .update-sub{font-size:0.9375rem;line-height:1.5;color:var(--text-dim);margin-bottom:10px} .update-banner-actions{display:flex;gap:12px;justify-content:center;width:100%} .update-banner-actions .btn{flex:1;padding:13px 18px;font-size:0.90625rem} .login-card{position:relative;z-index:1;width:min(380px,92vw);background:var(--panel);border:1px solid var(--stroke);border-radius:24px;padding:34px;backdrop-filter:blur(24px);animation:login-card-in .7s cubic-bezier(.2,.8,.2,1) both} .login-card h1,.login-card>p,.login-logo{text-align:center} .login-card::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;z-index:-1; background:conic-gradient(from var(--login-angle), transparent 0deg, var(--accent) 60deg, var(--accent-2) 120deg, transparent 200deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:login-border-spin 5s linear infinite; opacity:.85} .login-logo{width:56px;height:56px;margin:0 auto 16px;animation:splash-pulse 2.4s ease-in-out infinite} .login-logo img{width:56px;height:56px;display:block} .install-hint{margin-top:18px;border-top:1px solid var(--stroke);padding-top:14px} .install-hint-toggle{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--text-dim);font-family:inherit;font-size:0.78125rem;font-weight:600;cursor:pointer;padding:4px 0} .install-hint-toggle .chev{margin-left:auto;transition:transform .2s} .install-hint-toggle.open .chev{transform:rotate(180deg)} .install-guide{display:none;padding-top:10px;font-size:0.78125rem;color:var(--text-dim)} .install-guide.open{display:block} .install-steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px} .install-steps b{color:var(--text)} .install-modal-card .install-steps{margin-bottom:6px} .login-card h1{font-family:'Space Grotesk',sans-serif;font-size:1.625rem;margin-bottom:6px} .login-card p{color:var(--text-dim);font-size:0.8125rem;margin-bottom:22px} .login-card input:not([type="checkbox"]){width:100%;background:rgba(0,0,0,.25);border:1px solid var(--stroke);border-radius:12px;padding:11px 13px;color:var(--text);font-family:inherit;font-size:0.875rem;margin-bottom:12px} .login-card .btn{width:100%;padding:12px;font-size:0.875rem} .login-error{color:var(--busy);font-size:0.78125rem;margin-bottom:10px;min-height:16px} .ios-hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(20,22,40,.92);border:1px solid var(--stroke);border-radius:16px;padding:12px 18px;font-size:0.78125rem;max-width:min(360px,90vw);z-index:90;display:none;backdrop-filter:blur(20px)} .ios-hint.on{display:block} /* ====== RESPONSIVE MOBILE ====== Sotto ~768px non si usa il dock verticale desktop (troppo stretto per restare comodo): la navigazione principale passa a una barra di tab fissa in basso, e sidebar/chat diventano due schermate a piena larghezza (come Slack/WhatsApp mobile) invece di stare affiancate, con un pulsante "indietro" e lo swipe dal bordo sinistro per tornare alla lista chat. */ .back-btn{display:none} /* include la safe-area (notch) nell'altezza: .mobile-tabbar la aggiunge già nel proprio padding-bottom, e le icone mobile (27px) rendono la barra ~67px + safe-area. Se questa variabile restasse a 64px, Meet/rpanel coprirebbero i 3px alti della tabbar. */ :root{--mtb-h:calc(68px + env(safe-area-inset-bottom))} @media (max-width: 768px){ /* --net-banner-h va ripetuto qui: questa regola RIDEFINISCE padding e height della .app di base, quindi senza rimetterlo la riga di stato coprirebbe l'intestazione della chat (il titolo del canale finiva tagliato sotto la riga). */ .app{padding:8px;padding-top:calc(8px + var(--net-banner-h,0px));gap:8px; height:calc(100vh - var(--mtb-h) - var(--net-banner-h,0px)); height:calc(100dvh - var(--mtb-h) - var(--net-banner-h,0px))} .app.chat-active{height:calc(100vh - var(--net-banner-h,0px)); height:calc(100dvh - var(--net-banner-h,0px))} .dock{display:none} .mobile-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50; background:rgba(14,16,30,.85);backdrop-filter:blur(24px);border-top:1px solid var(--stroke); padding:6px 4px calc(6px + env(safe-area-inset-bottom));} body.light .mobile-tabbar{background:rgba(255,255,255,.85)} .app.chat-active .mobile-tabbar{display:none} .app:has(> .pm-page.on) .mobile-tabbar{display:flex} /* Notifiche è una destinazione della tabbar: il pannello resta sopra la barra, non la copre — prima spariva anche da lì e sembrava un bug di navigazione. */ .sidebar{width:auto;flex:1;margin-right:0;border-radius:20px} .sb-scroll{padding-bottom:14px} .main{border-radius:20px} /* di default (viewport stretto) si vede la lista; ".chat-active" sull'.app indica che l'utente ha aperto una chat specifica */ .app.chat-active .sidebar{display:none} .app:not(.chat-active) .main{display:none} /* swipe-indietro: la lista resta sotto la chat che scorre a destra */ html,body{overscroll-behavior-x:none} .app.chat-active.chat-swiping .sidebar{ display:flex !important;position:absolute;inset:0;z-index:1;margin-right:0;width:auto;pointer-events:none} .app.chat-active.chat-swiping .main{ position:relative;z-index:2;box-shadow:-10px 0 28px rgba(0,0,0,.28);will-change:transform} .back-btn{display:grid !important} .topbar{padding:10px 12px;gap:8px} .tb-icon{width:36px;height:36px;border-radius:11px;flex-shrink:0} .tb-actions .icon-btn:not(#tbMoreBtn){display:none !important} #tbMoreBtn{display:grid} .avatar-stack{display:none} /* schermata messaggi più compatta, stile WhatsApp: meno aria tra i fumetti, fumetti/avatar più piccoli, così in una schermata da telefono si legge più conversazione senza scrollare in continuazione. */ .msgs{padding:10px 8px 6px;gap:2px} .day-sep{margin:10px 0 8px} .msg{max-width:84%;gap:7px;margin-bottom:3px} .msg img.av{width:29px;height:29px;border-radius:10px} .msg .who{font-size:0.75rem;margin-bottom:2px} .bubble{padding:7px 10px;font-size:0.84375rem;line-height:1.42} .reactions{margin-top:5px} .composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom))} .delegation-bar{padding:8px 10px 10px;max-height:36vh;gap:6px} .delegation-row{padding:10px 10px;gap:12px;align-items:center} .delegation-check{width:30px;height:30px;border-radius:9px} .delegation-title{font-size:0.875rem;-webkit-line-clamp:3} .delegation-head-icon{width:36px;height:36px;border-radius:12px} .delegation-chip{padding:5px 10px 5px 5px} .delegation-chip-mark{width:26px;height:26px} .msg.system-msg .system-msg-body{font-size:0.8125rem;padding:8px 14px;border-radius:16px} /* niente zoom automatico iOS quando si fa focus su un campo di testo: Safari zooma se il font-size è sotto i 16px */ /* Questa resta in PIXEL di proposito, unica in tutto il foglio: e' una soglia fisica di iOS (sotto 16px reali Safari zooma il campo al focus), non una scelta tipografica. In rem seguirebbe la scala scelta dall'utente e con il testo piccolo lo zoom tornerebbe. */ .comp-box textarea,.rp-field input,.rp-field select,.rp-field textarea, .bulk-bar select,.login-card input:not([type="checkbox"]){font-size:max(16px,1rem)} /* composer: sotto ~768px le azioni secondarie (priorità/dettatura/vocale/ walkie-talkie) non ci stanno affiancate al testo — si raccolgono dietro un tasto "⋯" in un piccolo pannello a comparsa. */ #compMoreBtn{display:grid} .comp-extra{display:flex;flex-direction:column;gap:2px;position:absolute;bottom:calc(100% + 10px);right:10px; background:rgba(19,21,40,.97);border:1px solid var(--stroke);border-radius:16px;padding:6px; backdrop-filter:blur(24px);box-shadow:0 16px 40px -10px rgba(0,0,0,.6);opacity:0;pointer-events:none; transform:translateY(6px);transition:.16s} .comp-extra.open{opacity:1;pointer-events:auto;transform:translateY(0)} .comp-extra .c-btn{width:auto;height:auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:9px 12px;border-radius:11px} .comp-extra .c-btn::after{content:attr(data-label);font-size:0.8125rem;color:var(--text);white-space:nowrap} .comp-extra .c-btn:hover{background:var(--panel-strong)} .rpanel.open{position:fixed;top:8px;left:8px;right:8px;bottom:calc(var(--mtb-h) + 8px);width:auto;margin-left:0;z-index:49} .rpanel .rp-inner{width:100%} .cmdk{padding-top:8vh} .modal-card,.cmdk-box{width:94vw} .modal-ov{align-items:flex-end;padding-bottom:env(safe-area-inset-bottom)} .modal-card{width:100%;border-radius:22px 22px 0 0;max-height:88vh;overflow-y:auto} /* incremento generale su mobile: testo e tocchi ~10% più grandi (richiesta esplicita, oltre al primo piccolo incremento già fatto in precedenza) */ .bubble{font-size:1rem;padding:9px 12px} .msg .who{font-size:0.875rem} .msg .who time{font-size:0.75rem} .cname{font-size:1rem} .cprev{font-size:0.875rem} .tb-meta h2{font-size:1.125rem} .tb-meta p{font-size:0.8125rem} .search{font-size:0.9375rem;padding:12px 15px} .btn{padding:11px 19px;font-size:0.9375rem} .ch-icon{width:44px;height:44px;font-size:1.0625rem} .msg img.av{width:34px;height:34px} .mtb-btn svg,.mtb-btn img{width:27px;height:27px} .mtb-btn em{font-size:0.78125rem} .c-btn{width:44px;height:44px} .comp-extra .c-btn::after{font-size:0.9375rem} .react{font-size:0.875rem;padding:4px 11px} .update-card{padding:32px 24px;width:calc(100vw - 32px)} .update-icon{font-size:2.75rem} .update-title{font-size:1.3125rem} .update-banner-actions{flex-direction:column-reverse} .update-banner-actions .btn{width:100%} /* Secondo incremento mobile (segnalato come "troppo piccolo"). */ .bubble{font-size:1.0625rem;line-height:1.45} .cname{font-size:1.0625rem} .cprev{font-size:0.9375rem} .msg .who{font-size:0.90625rem} /* notifiche e pannelli laterali (usano .mn/.mr di .member) */ .notif-row .mn,.member .mn{font-size:0.96875rem} .notif-row .mr,.member .mr{font-size:0.8125rem} .member-remove{opacity:1} .rp-head h3{font-size:1.0625rem} .rp-sec{font-size:0.75rem} } /* leggero rimpicciolimento generale su desktop: interfaccia un filo più compatta */ @media (min-width: 1025px){ .bubble{font-size:0.8125rem;padding:8px 12px} .msg .who{font-size:0.71875rem} .cname{font-size:0.84375rem} .cprev{font-size:0.71875rem} .tb-meta h2{font-size:0.9375rem} .tb-meta p{font-size:0.6875rem} .search{font-size:0.78125rem;padding:9px 12px} .btn{padding:8px 15px;font-size:0.78125rem} .ch-icon{width:36px;height:36px;font-size:0.90625rem} .dock-btn{width:40px;height:40px} .dock-btn svg{width:18px;height:18px} .logo{width:44px;height:44px} .logo img{width:44px;height:44px} .comp-box textarea{font-size:0.8125rem} .c-btn{width:36px;height:36px} .sec{font-size:0.65625rem} .rp-sec{font-size:0.625rem} }