/* ============================================================ 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} } /* Shell autonoma: conserva il client Mail di Ping, eliminando i moduli Chat. */ .mail-login{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:24px} .mail-login-card{width:min(100%,420px);padding:38px;border:1px solid var(--stroke);border-radius:24px;background:rgba(19,22,43,.82);box-shadow:0 24px 65px rgba(0,0,0,.35);backdrop-filter:blur(24px);text-align:center} .mail-login-card .h2-logo{width:150px;height:auto;margin:0 auto 22px;display:block}.mail-login-mark{font-size:30px;margin-bottom:4px}.mail-login-card h1{font-size:1.7rem}.mail-login-card>p{color:var(--text-dim);margin:8px 0 24px}.mail-login-card label{display:block;text-align:left;color:var(--text-dim);font-size:.84rem;margin:14px 0 7px}.mail-login-card input{width:100%;border:1px solid var(--stroke);border-radius:11px;background:rgba(0,0,0,.22);color:var(--text);padding:12px;font:inherit}.mail-login-card .btn{width:100%;margin-top:20px}.login-error{min-height:1.3em;color:#ff5c7a;font-size:.84rem;margin-top:12px} .mail-logout{position:absolute;right:28px;top:25px;z-index:30;border:1px solid var(--stroke);background:var(--panel-strong);color:var(--text);border-radius:10px;padding:8px 13px;font:inherit;font-size:.78rem;cursor:pointer}.mail-logout:hover{background:var(--accent-soft);color:var(--accent)} .mail-modal{width:min(94vw,620px);max-height:88vh;overflow:auto;border:1px solid var(--stroke);border-radius:18px;padding:24px;background:#171a30;color:var(--text);box-shadow:0 25px 70px rgba(0,0,0,.6)}.mail-modal::backdrop{background:rgba(0,0,0,.55)}.mail-modal h3{margin-bottom:18px}.modal-x{float:right;border:0;background:transparent;color:var(--text-dim);font-size:24px;line-height:18px;cursor:pointer}.mail-modal .btn{border:0;border-radius:10px;background:var(--accent);color:#fff;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer}.mail-modal .btn.secondary{background:var(--panel-strong);color:var(--text);border:1px solid var(--stroke)}.mail-modal .btn.danger{background:#a82f50}.mail-modal .rp-field{margin:12px 0}.mail-modal .rp-field label{display:block;font-size:.82rem;color:var(--text-dim);margin-bottom:6px}.mail-modal input,.mail-modal select,.mail-modal textarea{width:100%;padding:9px 10px;border:1px solid var(--stroke);border-radius:9px;background:rgba(0,0,0,.2);color:var(--text);font:inherit}.mail-modal .modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.mail-modal .chk-row{display:flex;gap:8px;align-items:center}.mail-modal .chk-row input{width:auto} @media (max-width:768px){.mail-login-card{padding:28px 22px}.mail-logout{right:14px;top:14px}.app{padding:0;height:100vh}.mail-page{border-radius:0}} /* Mail usa sempre il tema Aziendale di Ping: chiaro, piatto e blu H2Web. */ body.theme-corporate{--accent:#0066cc;--accent-2:#004c99;--accent-soft:rgba(0,102,204,.16)} body.theme-corporate .mail-login-card{background:#fff;border-color:#d8e0ea;box-shadow:0 24px 65px rgba(0,45,90,.16)}body.theme-corporate .mail-login-card input{background:#fff;border-color:#b9c7d8;color:#1a1d24} .mail-top-logo{width:94px;height:30px;object-fit:contain;object-position:left center;flex-shrink:0;margin-left:4px} .mail-settings{max-width:760px}.mail-settings-section{padding:18px 0;border-bottom:1px solid var(--stroke);margin-bottom:18px}.mail-settings-section h2{font-size:1rem;margin-bottom:5px}.mail-settings-section p{font-size:.84rem;color:var(--text-dim);margin-bottom:12px}.mail-settings-accounts{display:grid;gap:8px}.mail-settings-account{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:1px solid var(--stroke);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;text-align:left;cursor:pointer}.mail-settings-account:hover{border-color:var(--accent);background:var(--accent-soft)}.mail-settings-account span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1}.mail-settings-account small{color:var(--text-dim)}.mail-settings-account span:last-child{font-size:.8rem;color:var(--accent);font-weight:650} .mail-account-settings{max-width:1000px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.mail-account-settings .mail-cfg-sec{margin:0;padding:18px;border:1px solid var(--stroke);border-radius:14px;background:var(--panel)}.mail-account-settings .mail-cfg-danger{grid-column:1/-1}.mail-account-settings .modal-actions{grid-column:1/-1}@media(max-width:760px){.mail-account-settings{grid-template-columns:1fr}} .mail-logout{left:28px;right:auto;top:auto;bottom:24px;z-index:40} .mail-modal{position:relative;padding:30px}.mail-modal h3{padding-right:42px}.modal-x{position:absolute;top:14px;right:16px;z-index:2;float:none} .mail-fullpage{height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}.mail-fullpage-head{padding:28px 34px 20px;border-bottom:1px solid var(--stroke);background:var(--panel)}.mail-fullpage-head h1{font-size:1.45rem;margin-top:8px}.mail-fullpage-head p{color:var(--text-dim);margin-top:5px}.mail-fullpage-back{border:0;background:none;color:var(--accent);font:inherit;font-weight:650;cursor:pointer;padding:0}.mail-fullpage-body{width:min(100%,1000px);margin:0 auto;padding:20px 34px 50px;overflow:auto}.mail-fullpage-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border:1px solid var(--stroke);border-radius:14px;background:var(--panel);margin-bottom:10px}.mail-fullpage-row .pm-row-meta{min-width:0;flex:1}.mail-fullpage-row .pm-row-title{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-fullpage-row .pm-row-sub{color:var(--text-dim);font-size:.82rem;margin-top:4px}.mail-fullpage-row .pm-row-actions{display:flex;gap:8px;flex-shrink:0} @media (max-width:768px){.mail-logout{left:14px;bottom:14px}.mail-fullpage-head{padding:20px 16px}.mail-fullpage-body{padding:14px 16px 38px}.mail-fullpage-row{padding:14px;align-items:flex-start}.mail-fullpage-row .pm-row-actions{flex-direction:column}} /* 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; } *{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;border-radius:16px;display:grid;place-items:center;margin-bottom:14px; background:var(--bubble-me);box-shadow:0 8px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent);cursor:pointer} .logo svg{width:24px;height:24px;stroke:#fff} .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 Email o Ping Meets è aperta occupa lo spazio di sidebar+main+rpanel invece di sovrapporsi a tutto (dock sempre visibile e cliccabile, come "Chat" non è mai coperto da Mail/Meet). Su mobile non serve: lì le pagine tornano un overlay fisso a tutto schermo (vedi le rispettive media query), quindi qui non si applica nulla di diverso. */ @media (min-width:769px){ .app:has(> .mail-page.on) .sidebar, .app:has(> .mail-page.on) .main, .app:has(> .mail-page.on) .rpanel, .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.1875rem;font-weight:700;letter-spacing:-.3px} .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)} .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:column;align-items:flex-end;gap:5px;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 h2{font-family:'Space Grotesk',sans-serif;font-size:0.96875rem;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:8px} .tb-meta p{font-size:0.71875rem;color:var(--text-dim);margin-top:1px} .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} .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} .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)} .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)} .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-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} .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%} .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;align-items:center;justify-content:center;padding:40px;cursor:zoom-out} .lightbox.on{display:flex} .lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);cursor:default} .lightbox-controls{position:absolute;top:18px;right:22px;display:flex;gap:10px} .lightbox-controls .icon-btn{background:rgba(255,255,255,.1);color:#fff;width:38px;height:38px} .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:90;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} .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%)} } .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} .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} } /* ---- Area Email (Deploy 1: config caselle) ---- */ /* Su desktop è un figlio flex di #app come .main (non più un overlay fisso a tutto schermo sopra il dock): quando è aperta, .app:has() sotto nasconde sidebar/main/rpanel e la lascia occupare tutto lo spazio rimasto accanto al dock, che resta sempre visibile e cliccabile. */ .mail-page{flex:1;display:none;flex-direction:column;background:var(--panel);border:1px solid var(--stroke);border-radius:24px;overflow:hidden} .mail-page.on{display:flex} .mail-page-body{flex:1;overflow-y:auto;padding:28px 32px 60px} .mail-intro{max-width:760px;margin:0 auto 20px;color:var(--text-dim);font-size:0.875rem;line-height:1.5} .mail-loading{max-width:760px;margin:0 auto;color:var(--text-dim);padding:24px 0} .mail-acc-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .mail-acc-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:16px 18px} .mail-acc-dot{width:12px;height:12px;border-radius:50%;background:var(--acc);flex-shrink:0} .mail-acc-main{flex:1;min-width:0} .mail-acc-top{display:flex;align-items:center;gap:10px} .mail-acc-email{font-weight:600;font-size:0.9375rem} .mail-acc-sub{font-size:0.78125rem;color:var(--text-dim);margin-top:2px} .mail-acc-shared{font-size:0.75rem;color:var(--text-dim);margin-top:3px} .mail-acc-err{font-size:0.75rem;color:#e5484d;margin-top:4px} .mail-badge{font-size:0.6875rem;font-weight:700;padding:2px 9px;border-radius:20px;background:rgba(255,255,255,.1);color:var(--text-dim)} .mail-badge.ok{background:color-mix(in srgb,#2fe38f 22%,transparent);color:#2fe38f} .mail-badge.warn{background:color-mix(in srgb,#ffc24b 22%,transparent);color:#ffc24b} .mail-test-row{display:flex;align-items:center;gap:12px;margin-top:6px} .mail-test-result{font-size:0.78125rem;color:var(--text-dim)} .mail-test-result.ok{color:#2fe38f} .mail-test-result.err{color:#e5484d} .mail-page-body{padding:0} /* Impostazioni casella: form esteso (generali/IMAP/SMTP/cartelle), font più grandi delle .rp-field generiche perché qui i dati (host, porte...) devono restare leggibili anche da mobile durante la digitazione. */ .mail-cfg-body{max-height:min(60vh,520px);overflow-y:auto;padding-right:4px;margin:0 -2px} .mail-cfg-sec{padding:14px 2px;border-bottom:1px solid var(--stroke)} .mail-cfg-sec:first-child{padding-top:0} .mail-cfg-sec:last-child{border-bottom:none} .mail-cfg-sec-title{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:12px} .mail-cfg-field{margin-bottom:12px} .mail-cfg-field:last-child{margin-bottom:0} .mail-cfg-field label{font-size:0.84375rem;font-weight:600;color:var(--text-dim);display:block;margin-bottom:6px} .mail-cfg-field input,.mail-cfg-field select,.mail-cfg-field textarea{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--stroke);border-radius:10px;padding:10px 12px;color:var(--text);font-family:inherit;font-size:0.9375rem} .mail-cfg-field textarea{resize:vertical;line-height:1.5} .mail-cfg-row{display:flex;gap:10px;align-items:flex-end} .mail-cfg-row>.mail-cfg-field{flex:1;margin-bottom:12px} .mail-cfg-chk{display:flex;align-items:center;gap:8px;font-size:0.875rem;margin-bottom:0} .mail-cfg-ssl{padding-bottom:11px;white-space:nowrap} .mail-cfg-swatches{display:flex;gap:8px;flex-wrap:wrap} .mail-cfg-swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0} .mail-cfg-swatch.on{border-color:var(--text)} .mail-cfg-copy{background:none;border:none;color:var(--accent);font-size:0.8125rem;font-weight:600;cursor:pointer;padding:0;margin-bottom:12px;display:block} .mail-cfg-danger{display:flex;justify-content:center} @media (max-width:768px){ .mail-cfg-field label{font-size:0.9375rem} .mail-cfg-field input,.mail-cfg-field select,.mail-cfg-field textarea{font-size:1rem;padding:12px 13px} .mail-cfg-chk{font-size:0.9375rem} } /* ---- Client email (topbar + subbar + split lista/lettura) ---- */ .mail-client{display:flex;flex-direction:column;height:100%;overflow:hidden} .mail-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--stroke);flex-shrink:0} .mail-topbar-title{display:flex;flex-direction:column;min-width:0} .mail-top-folder{font-family:'Space Grotesk',sans-serif;font-size:1.125rem;font-weight:700;line-height:1.1} .mail-top-acc{font-size:0.71875rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-topbar-actions{display:flex;gap:6px;flex-shrink:0} .mail-ic{width:38px;height:38px;border-radius:11px;border:none;background:var(--panel-strong);color:var(--text);display:grid;place-items:center;cursor:pointer} .mail-ic:hover{background:var(--accent-soft);color:var(--accent)} .mail-ic.spin svg{animation:mail-spin .8s linear infinite} /* Un pulsante disabilitato ma dall'aspetto normale invita a cliccarlo e poi non fa niente: peggio che mostrarlo spento. */ .mail-ic:disabled{opacity:.45;cursor:default} .mail-ic:disabled:hover{background:var(--panel-strong);color:var(--text)} @keyframes mail-spin{to{transform:rotate(360deg)}} .mail-subbar{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--stroke);flex-shrink:0;overflow-x:auto;user-select:none;-webkit-user-select:none} .mail-accsel{display:flex;gap:6px;flex-shrink:0} .mail-acc-chip{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--stroke);background:transparent;color:var(--text);cursor:pointer;font-size:0.78125rem;white-space:nowrap;flex-shrink:0} .mail-acc-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .mail-acc-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);flex-shrink:0} .mail-folders{display:flex;gap:5px;flex:1} .mail-folder{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-size:0.8125rem;white-space:nowrap;flex-shrink:0} .mail-folder:hover{background:var(--panel-strong)} .mail-folder.on{background:var(--accent-soft);color:var(--accent);font-weight:600} .mail-folder-badge{font-size:0.65625rem;font-weight:700;background:var(--accent);color:#fff;border-radius:20px;padding:0 6px;min-width:16px;text-align:center} .mail-filters{display:flex;gap:6px;flex-shrink:0;margin-left:auto} .mail-filter{font-size:0.75rem;padding:5px 11px;border-radius:20px;border:1px solid var(--stroke);background:transparent;color:var(--text-dim);cursor:pointer;white-space:nowrap} .mail-filter.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)} .mail-subbar-search{flex-direction:column;align-items:stretch;gap:8px} .mail-search-row{display:flex;align-items:center;gap:8px} .mail-search-close{flex-shrink:0;width:32px;height:32px;border-radius:9px;border:none;background:var(--panel-strong);color:var(--text);display:grid;place-items:center;cursor:pointer} .mail-search-input{flex:1;min-width:0;background:var(--panel-strong);border:1px solid var(--stroke);border-radius:20px;padding:7px 14px;font-family:inherit;font-size:0.875rem;color:var(--text);outline:none} .mail-search-fields{display:flex;gap:6px;flex-shrink:0;overflow-x:auto} .mail-hit{background:#ffe066;color:#111;border-radius:2px;padding:0 1px} .mail-main{flex:1;display:flex;min-height:0} .mail-list-col{width:380px;flex-shrink:0;border-right:1px solid var(--stroke);display:flex;flex-direction:column;overflow:hidden} .mail-list{flex:1;overflow-y:auto} .mail-msg-row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--stroke);cursor:pointer;min-height:64px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .mail-msg-row:hover{background:var(--panel-strong)} .mail-msg-row.sel{background:var(--accent-soft)} .mail-msg-dot{width:9px;height:9px;border-radius:50%;background:transparent;flex-shrink:0} /* Avatar circolare del mittente. Foto del collega se è un utente Ping, altrimenti iniziali su colore stabile — nessuna richiesta di rete verso domini esterni (vedi mailAvatarHtml per il perché). */ .mail-msg-av{position:relative;width:42px;height:42px;border-radius:50%;flex-shrink:0; display:grid;place-items:center;color:#fff;font-weight:700;font-size:0.9375rem; letter-spacing:.3px;overflow:visible;user-select:none} /* l'immagine copre le iniziali disegnate sotto: se non carica viene rimossa (wireMailAvatarFallback) e riappaiono quelle, invece dell'icona rotta */ .mail-msg-av img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%; object-fit:cover;display:block} /* favicon = logo aziendale, non un ritratto: intero e su fondo chiaro, non ritagliato per riempire il cerchio */ .mail-msg-av.is-favicon{background:#fff;border:1px solid var(--stroke)} .mail-msg-av.is-favicon img{object-fit:contain;padding:20%;background:#fff} /* il pallino dei non letti si sposta sull'angolo dell'avatar: in vista unificata porta il colore della casella, e va distinto dalla foto sotto */ .mail-av-dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%; border:2px solid var(--bg);transition:background .15s} .mail-msg-row.mail-unread .mail-msg-dot{background:var(--accent)} .mail-msg-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--stroke);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff} .mail-msg-row.bulk-sel{background:var(--accent-soft)} .mail-msg-row.bulk-sel .mail-msg-check{background:var(--accent);border-color:var(--accent)} .mail-msg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .mail-msg-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline} .mail-msg-from{font-size:0.875rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-msg-date{font-size:0.71875rem;color:var(--text-dim);flex-shrink:0} .mail-msg-subj{font-size:0.8125rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-msg-snippet{font-size:0.75rem;color:var(--text-dim);opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-msg-row.mail-unread .mail-msg-from,.mail-msg-row.mail-unread .mail-msg-subj{font-weight:700;color:var(--text)} .mail-msg-row{touch-action:pan-y;position:relative;background:var(--bg);z-index:1} /* La transizione va applicata SOLO a riposo (rilascio/snap-back), mai mentre si trascina: se resta sempre attiva, ogni transform impostato da JS durante il drag viene "smussato" con un'animazione di 150ms che insegue il dito con un ritardo percepibile invece di seguirlo 1:1 — il "poco fluido" segnalato. */ .mail-swipe-wrap:not(.dragging) .mail-msg-row{transition:transform .15s} .mail-msg-acc{font-size:0.6875rem;color:var(--text-dim);opacity:.75} /* Piede dell'elenco: "carico altre…" / "fine dei messaggi". Senza, arrivando in fondo non si capisce se la lista e' finita davvero o se si e' rotto qualcosa. */ /* Indicatore di connessione, unico per tutta l'app. È una RIGA a tutta larghezza ancorata in cima, non un badge flottante: un elemento che galleggia sopra il contenuto attira l'occhio più di quanto meriti e copre quello che si sta leggendo. Una riga sottile occupa una fascia sua, la si legge una volta e poi si ignora — che è il comportamento giusto per un avviso di stato. Fissa e non dentro il flusso perché .app è un flex row: un elemento inline ne diventerebbe una colonna. Il contenuto scende comunque, perché updateNetBanner alza --net-banner-h con l'altezza reale della riga. z-index 100: sopra le pagine a tutto schermo (posta 48, admin 96) ma SOTTO i modali (120) e l'avviso di ping (260), che devono poterla coprire. */ .net-banner{position:fixed;z-index:100;left:0;right:0;top:0; padding:5px 14px;padding-top:calc(5px + env(safe-area-inset-top)); font-size:0.75rem;font-weight:600;letter-spacing:.2px; display:flex;align-items:center;justify-content:center;gap:7px; pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; background:color-mix(in srgb,#ffc24b 22%,var(--panel)); color:#8a6206; border-bottom:1px solid color-mix(in srgb,#ffc24b 42%,transparent)} body.light .net-banner{color:#7a5605} .net-banner.ok{background:color-mix(in srgb,#30a46c 20%,var(--panel));color:#1a7f4f; border-bottom-color:color-mix(in srgb,#30a46c 40%,transparent)} /* pallino che pulsa mentre si sta ritentando: dice "sta succedendo qualcosa", che è la differenza fra un'attesa e un blocco */ .net-banner .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0} .net-banner.retry .dot{animation:netPulse 1.1s ease-in-out infinite} @keyframes netPulse{0%,100%{opacity:1}50%{opacity:.25}} @media (prefers-reduced-motion:reduce){ .net-banner.retry .dot{animation:none} } .mail-more{padding:16px;text-align:center;font-size:0.8125rem;color:var(--text-dim)} .mail-more.done{opacity:.6} .mail-msg-count{display:inline-block;background:var(--panel-strong);color:var(--text-dim);font-size:0.65625rem;font-weight:700;border-radius:8px;padding:1px 6px;margin-left:2px} /* barra azioni selezione multipla (tieni premuto un messaggio): sostituisce visivamente la subbar quando attiva, stessa altezza per non far "saltare" il layout della lista sotto */ .mail-bulk-bar{display:none;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--stroke);background:var(--accent-soft)} .mail-bulk-bar.show{display:flex} .mail-bulk-cancel{width:30px;height:30px;border-radius:50%;border:none;background:var(--panel-strong);color:var(--text);cursor:pointer;flex-shrink:0} .mail-bulk-count{font-size:0.84375rem;font-weight:600;color:var(--text)} .mail-bulk-actions{display:flex;gap:8px;margin-left:auto} .mail-bulk-act{display:inline-flex;align-items:center;gap:6px;background:var(--panel-strong);border:1px solid var(--stroke);border-radius:18px;padding:6px 14px;font-family:inherit;font-size:0.78125rem;font-weight:600;color:var(--text);cursor:pointer} .mail-bulk-act.danger{color:#ff5c7a;border-color:rgba(255,92,122,.35)} /* sfondo colorato rivelato dietro la riga durante lo swipe: senza questo sotto il dito compariva solo bianco, illeggibile (feedback utente) */ .mail-swipe-wrap{position:relative;overflow:hidden} /* opacity 0 finché non si trascina: prima erano sempre nel DOM e restavano visibili sotto lo sfondo semi-trasparente della riga selezionata/hover dopo aver letto un messaggio — non aveva senso vederle a riposo. */ .mail-swipe-action{position:absolute;top:0;bottom:0;width:50%;display:flex;align-items:center;color:#fff;font-weight:700;font-size:0.8125rem;gap:7px;z-index:0;opacity:0;transition:opacity .1s} .mail-swipe-wrap.dragging .mail-swipe-action{opacity:.55} /* "armato": superata la soglia, al rilascio l'azione parte davvero. Il colore pieno e l'icona più grande lo dicono mentre si trascina, come fanno Mail di iOS e Gmail — senza, non si capisce quando basta e si tende a tenere il dito fermo aspettando che succeda qualcosa. */ .mail-swipe-wrap.armed .mail-swipe-action{opacity:1} .mail-swipe-wrap.armed .mail-swipe-action svg{transform:scale(1.18);transition:transform .12s} .mail-swipe-action svg{width:18px;height:18px;flex-shrink:0} .mail-swipe-action.left{left:0;justify-content:flex-start;padding-left:20px} .mail-swipe-action.right{right:0;justify-content:flex-end;padding-right:20px} .mail-reader{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0} .mail-reader-empty{margin:auto;color:var(--text-dim);padding:40px} /* ---- Radar: cruscotto AI della posta ---- */ .radar{flex:1;overflow-y:auto;padding:22px 24px 40px;display:flex;flex-direction:column;gap:16px} .radar-head{display:flex;align-items:center;gap:10px} .radar-title{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:1.1875rem;font-weight:700;color:var(--text)} .radar-badge{font-size:0.625rem;font-weight:800;letter-spacing:.8px;background:var(--accent-soft);color:var(--accent);border-radius:7px;padding:2px 7px} .radar-head .mail-ic{margin-left:auto} .radar-sub{font-size:0.75rem;color:var(--text-dim);margin-top:-12px} .radar-card{background:var(--panel-strong);border:1px solid var(--stroke);border-radius:18px;padding:16px 16px 14px} .radar-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px} .radar-card-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:1.125rem;flex-shrink:0} .radar-card-icon.warn{background:color-mix(in srgb,#ffc24b 20%,transparent)} .radar-card-icon.danger{background:color-mix(in srgb,#ff5c7a 18%,transparent)} .radar-card-title{font-size:0.90625rem;font-weight:700;color:var(--text)} .radar-card-sub{font-size:0.75rem;color:var(--text-dim);margin-top:2px} .radar-empty,.radar-loading{font-size:0.8125rem;color:var(--text-dim);padding:4px 2px} /* Gruppi per casella: nella vista unificata ogni segnalazione deve dire da quale casella arriva, e le caselle senza risultati devono restare visibili (altrimenti "analizzata e pulita" e "non analizzata" si confondono). */ /* Selettore dimensione testo (pannello Personalizza) */ .tsize-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} .tsize-opt{flex:1 1 auto;white-space:nowrap} .tsize-opt.sel{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .rp-hint{font-size:.75rem;color:var(--text-dim);line-height:1.45;margin-bottom:14px} /* La frase citata dall'email: distinta dal testo generato, cosi' si capisce che e' testo vero del messaggio e non una spiegazione del modello. */ .radar-item-quote{font-size:.75rem;color:var(--text);opacity:.85;font-style:italic; margin-top:3px;line-height:1.45;border-left:2px solid var(--accent);padding-left:8px} .radar-group{margin-bottom:12px} .radar-group:last-child{margin-bottom:0} .radar-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px; padding:4px 2px 6px;border-bottom:1px solid var(--border);margin-bottom:8px} .radar-group-acc{font-size:0.8125rem;font-weight:650;color:var(--text)} .radar-group-count{font-size:0.75rem;color:var(--text-dim);white-space:nowrap} /* Barra di avanzamento dell'analisi: con un modello locale ci vogliono minuti, e senza un indicatore che si muove sembra tutto bloccato. */ .radar-bar{margin-top:6px;height:3px;border-radius:2px;background:rgba(127,127,127,.22);overflow:hidden} .radar-bar>span{display:block;height:100%;border-radius:2px;background:var(--accent);transition:width .4s ease} /* Larghezza 0 = non sappiamo ancora quanti lotti: meglio un'animazione indeterminata che una barra ferma a zero, che sembra un errore. */ .radar-bar>span[style*="width:0%"]{width:35%!important;animation:radarIndet 1.2s ease-in-out infinite} @keyframes radarIndet{0%{transform:translateX(-100%)}100%{transform:translateX(285%)}} .radar-partial{font-size:0.75rem;line-height:1.45;color:#e0a02c;background:color-mix(in srgb,#ffc24b 12%,transparent);border:1px solid color-mix(in srgb,#ffc24b 35%,transparent);border-radius:10px;padding:7px 10px;margin-bottom:9px} .radar-error{font-size:0.78125rem;color:#ff5c7a;padding:4px 2px;line-height:1.45} .radar-items{display:flex;flex-direction:column;gap:8px} .radar-item{display:flex;gap:10px;background:var(--panel);border:1px solid var(--stroke);border-radius:13px;padding:10px 12px;cursor:pointer;transition:.15s} .radar-item:hover{border-color:var(--accent)} /* .radar-item è flex per affiancare casella di spunta e contenuto; il contenuto vero va invece incolonnato — senza questo mittente, oggetto e motivo finivano tutti sulla stessa riga, con l'oggetto schiacciato a "Pre…" sugli schermi stretti. */ .radar-item-main{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column} .radar-spam-item{cursor:default} .radar-check{display:flex;align-items:flex-start;padding-top:2px} .radar-check input{width:auto;margin:0;cursor:pointer} .radar-item-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:2px} .radar-item-who{font-size:0.75rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .radar-urg{font-size:0.625rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:6px;padding:2px 6px;flex-shrink:0} .radar-urg.alta{background:color-mix(in srgb,#ff5c7a 20%,transparent);color:#ff5c7a} .radar-urg.media{background:color-mix(in srgb,#ffc24b 22%,transparent);color:#e0a02c} .radar-urg.bassa{background:var(--panel-strong);color:var(--text-dim)} .radar-item-subj{font-size:0.84375rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .radar-item-reason{font-size:0.75rem;color:var(--text-dim);margin-top:2px;line-height:1.4} .radar-bulk{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .radar-bulk .btn{padding:8px 14px;font-size:0.78125rem} .radar-bulk .radar-danger{color:#ff5c7a;border-color:rgba(255,92,122,.35)} /* Striscia riassuntiva in cima all'elenco: è il modo di far esistere il Radar su mobile, dove non c'è un riquadro di lettura sempre visibile in cui mostrarlo. Su desktop il pannello completo è già lì a destra, quindi la striscia sarebbe solo rumore -> nascosta (vedi media query). */ .radar-strip{display:none} body.light .radar-card{background:rgba(10,15,40,.03)} @media (max-width:768px){ .radar-strip{display:flex;align-items:center;gap:9px;width:100%;padding:13px 14px;border:none;border-bottom:1px solid var(--stroke);background:var(--panel-strong);color:var(--text-dim);font-family:inherit;font-size:0.875rem;cursor:pointer;text-align:left} .radar-strip.alert{background:var(--accent-soft);color:var(--accent)} .radar-strip-label{font-weight:700;color:var(--text)} .radar-strip.alert .radar-strip-label{color:var(--accent)} .radar-strip-summary{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .radar{padding:18px 16px 40px} } .mail-rd-head{padding:20px 24px 14px;border-bottom:1px solid var(--stroke)} .mail-rd-subject{font-size:1.3125rem;font-weight:700;margin-bottom:10px} /* align-items:center e non baseline: con l'avatar accanto, allineare alla linea di base del testo lo farebbe galleggiare troppo in alto. */ .mail-rd-meta{display:flex;justify-content:space-between;gap:12px;align-items:center} .mail-rd-meta .mail-msg-av{width:36px;height:36px;font-size:0.8125rem} .mail-rd-meta .mail-rd-from{flex:1} .mail-rd-from{font-size:0.9375rem;min-width:0;overflow:hidden;text-overflow:ellipsis} .mail-rd-date{font-size:0.75rem;color:var(--text-dim);flex-shrink:0} .mail-rd-line{font-size:0.84375rem;color:var(--text-dim);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .mail-att{display:inline-flex;align-items:center;gap:6px;font-size:0.78125rem;background:var(--panel-strong);border:1px solid var(--stroke);border-radius:10px;padding:6px 10px;color:var(--text);text-decoration:none} .mail-att-size{color:var(--text-dim)} .mail-att-more{display:inline-flex;align-items:center;font-size:0.78125rem;font-weight:600;background:none;border:1px dashed var(--stroke);border-radius:10px;padding:6px 12px;color:var(--accent);cursor:pointer;font-family:inherit} .mail-att-more:hover{background:var(--accent-soft)} .mail-rd-imgbar{margin-top:12px;font-size:0.78125rem;color:var(--text-dim);background:var(--panel-strong);border-radius:10px;padding:8px 12px} .mail-showimg{background:none;border:none;color:var(--accent);cursor:pointer;font-weight:600;font-size:0.78125rem} .mail-rd-body{flex:1;display:flex} .mail-body-frame{width:100%;height:100%;min-height:400px;border:none;background:#fff} .mail-rd-back{display:none} .mail-rd-actions{display:flex;flex-wrap:wrap;gap:10px;padding:12px 24px;border-top:1px solid var(--stroke);flex-shrink:0} .mail-rd-act{display:inline-flex;align-items:center;gap:6px;background:var(--panel-strong);border:1px solid var(--stroke);border-radius:18px;padding:8px 16px;font-family:inherit;font-size:0.8125rem;font-weight:600;color:var(--text);cursor:pointer} .mail-rd-act:hover{background:var(--accent-soft)} .mail-rd-act.danger{color:#ff5c7a;border-color:rgba(255,92,122,.35)} .mail-rd-act.danger:hover{background:rgba(255,92,122,.12)} .mail-badge-dot{position:absolute;top:2px;right:2px;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} .mail-badge-dot.info{background:var(--accent)} .mail-ic{position:relative} .mail-toast{position:fixed;left:50%;bottom:calc(var(--mtb-h) + 20px);transform:translate(-50%,20px);background:var(--accent);color:#fff;font-size:0.8125rem;font-weight:600;padding:10px 18px;border-radius:22px;box-shadow:0 8px 24px -6px rgba(0,0,0,.4);opacity:0;transition:.28s;z-index:99;pointer-events:none} .mail-toast.show{opacity:1;transform:translate(-50%,0)} /* Il toast con azione DEVE ricevere i click: quello semplice ha pointer-events:none per non rubare tocchi alla pagina sotto, ma con un pulsante "Annulla" dentro renderebbe il pulsante inutilizzabile. */ .mail-toast{display:flex;align-items:center;gap:12px} .mail-toast:has(.mail-toast-act){pointer-events:auto} .mail-toast-act{background:rgba(255,255,255,.22);border:none;color:#fff;font-family:inherit; font-size:0.8125rem;font-weight:700;padding:5px 12px;border-radius:14px;cursor:pointer} .mail-toast-act:hover{background:rgba(255,255,255,.34)} /* Azioni su una segnalazione "in attesa di risposta". Sempre visibili e non al passaggio del mouse: su mobile l'hover non esiste, e sono le due azioni che danno senso all'elenco. */ /* .radar-item e' flex in riga (serve alla spunta dello spam): senza questo, le azioni finirebbero AFFIANCATE al testo invece che sotto, schiacciando l'oggetto a pochi caratteri su mobile. */ .radar-item:has(.radar-item-acts){flex-direction:column;align-items:stretch} .radar-item-acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap} .radar-act{background:var(--panel-strong);border:1px solid var(--stroke);border-radius:14px; padding:5px 12px;font-family:inherit;font-size:0.75rem;font-weight:600;color:var(--text);cursor:pointer} .radar-act:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} @media (max-width:768px){ /* mobile: nessun header "Torna alla chat" — si naviga dalla tabbar in basso dell'app (che resta visibile). Feeling da app: topbar + contenuto + tabbar. Il dettaglio messaggio copre lo schermo con tasto "Elenco". padding-top per la safe-area (notch iPhone) così la topbar non è mai troncata sotto la status bar. */ .mail-page{position:fixed;inset:0;bottom:var(--mtb-h);z-index:48; /* max e non somma: quando la riga di stato c'e', la sua altezza INCLUDE gia' la safe-area (la riga parte da top:0), quindi sommarle scavalcherebbe il notch due volte. */ padding-top:max(env(safe-area-inset-top), var(--net-banner-h,0px)); border-radius:0;border:none} .mail-topbar{padding:12px 14px} .mail-top-folder{font-size:1.25rem} .mail-top-acc{font-size:0.8125rem} .mail-ic{width:44px;height:44px} .mail-ic svg{width:21px;height:21px} .mail-subbar{padding:10px 12px;gap:8px} .mail-accsel{gap:6px} .mail-acc-chip{font-size:0.875rem;padding:7px 12px} .mail-folder{font-size:0.90625rem;padding:8px 13px} .mail-filters{margin-left:6px} .mail-filter{font-size:0.84375rem;padding:7px 13px} .mail-search-input{font-size:1rem;padding:9px 14px} .mail-search-close{width:38px;height:38px} .mail-list-col{width:100%;border-right:none} /* Elenco email: e' la schermata piu' guardata di tutte da telefono, quindi sta un gradino sopra il resto. La riga della casella e la data erano rimaste alle dimensioni desktop e tiravano giu' l'impressione generale anche con mittente e oggetto gia' grandi. */ .mail-msg-row{min-height:86px;padding:15px 16px;gap:13px} .mail-msg-from{font-size:1.125rem} .mail-msg-date{font-size:0.875rem} .mail-msg-subj{font-size:1.0625rem} .mail-msg-snippet{font-size:0.9375rem} .mail-msg-acc{font-size:0.8125rem;opacity:.9} .mail-msg-count{font-size:0.8125rem} .mail-bulk-count{font-size:0.9375rem} .mail-bulk-act{font-size:0.84375rem;padding:8px 15px} .mail-msg-dot{width:11px;height:11px} .mail-msg-av{width:46px;height:46px;font-size:1.0625rem} .mail-av-dot{width:14px;height:14px} .mail-reader{display:none} /* dettaglio: copre lo schermo ma rispetta la safe-area in alto e lascia visibile la tabbar in basso; l'header con "Elenco" è sticky così il tasto indietro non sparisce mai scrollando o sotto il notch. */ .mail-client.show-reader .mail-reader{display:flex;position:fixed;top:0;left:0;right:0;bottom:var(--mtb-h);z-index:97;background:var(--bg);overflow-y:auto;padding-top:env(safe-area-inset-top)} .mail-client.show-reader .mail-rd-head{position:sticky;top:0;z-index:2;background:var(--bg)} .mail-rd-back{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--accent);font-size:1rem;font-weight:600;cursor:pointer;padding:0 0 12px} .mail-rd-subject{font-size:1.4375rem} .mail-rd-from{font-size:1.0625rem} .mail-rd-line{font-size:0.9375rem} /* solo icone, più grandi: col testo le 4 azioni non entravano in una riga e "Elimina" andava a capo da solo */ .mail-rd-actions{flex-wrap:nowrap;justify-content:space-between;gap:6px} .mail-rd-act{flex:1;justify-content:center;padding:12px 0} .mail-rd-act svg{width:20px;height:20px} .mail-rd-act-label{display:none} } /* FAB compose "scrivi" (stile Gmail) — visibile sia desktop sia mobile */ .mail-fab{display:flex;position:absolute;right:20px;bottom:20px;z-index:20;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;border-radius:28px;height:52px;padding:0 20px;font-family:inherit;font-size:0.875rem;font-weight:600;cursor:pointer;box-shadow:0 8px 24px -6px rgba(0,0,0,.45)} /* Il form di composizione occupa lo stesso spazio del FAB "Scrivi": senza nasconderlo, restava lì sopra anche a form già aperto (cliccarlo di nuovo non aveva alcun senso). ".composing" (non ".show-reader", condivisa anche con la sola lettura di un messaggio) per non nascondere il FAB anche mentre si legge un'email normale — solo mentre si scrive. */ .mail-client.composing .mail-fab{display:none} .mail-fab svg{width:20px;height:20px} @media (max-width:768px){.mail-fab{right:16px;bottom:16px;padding:0;width:56px;height:56px;justify-content:center}.mail-fab span{display:none}} /* Composer email */ .mailc-back{display:none} .mailc-header{display:flex;align-items:center;padding:8px 18px 0} .mailc-send-top{margin-left:auto;height:34px;padding:0 16px;font-size:0.8125rem} .mailc-form{display:flex;flex-direction:column;gap:0;height:100%} .mailc-row{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--stroke);position:relative} .mailc-row label{font-size:0.78125rem;color:var(--text-dim);width:52px;flex-shrink:0} .mailc-row input{flex:1;background:none;border:none;color:var(--text);font-family:inherit;font-size:0.96875rem;outline:none} .mailc-row select{flex:1;background:none;border:none;color:var(--text);font-family:inherit;font-size:0.96875rem;outline:none;cursor:pointer} .mailc-row select option{background:var(--panel-strong);color:var(--text)} .mailc-form.mailc-dragover{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-soft)} .mailc-suggest{position:absolute;left:0;right:0;top:100%;background:var(--panel-strong);border:1px solid var(--stroke);border-top:none;border-radius:0 0 12px 12px;z-index:8;max-height:220px;overflow-y:auto;box-shadow:0 10px 24px -8px rgba(0,0,0,.45)} .mailc-suggest-item{padding:9px 18px;font-size:0.875rem;cursor:pointer;display:flex;align-items:baseline;gap:8px} .mailc-suggest-item:hover,.mailc-suggest-item.hi{background:var(--accent-soft)} .mailc-suggest-email{font-weight:600;color:var(--text)} .mailc-suggest-name{color:var(--text-dim);font-size:0.78125rem} .mailc-body{flex:1;padding:16px 18px;background:none;border:none;color:var(--text);font-family:inherit;font-size:0.96875rem;line-height:1.6;outline:none;resize:none;min-height:180px} .mailc-actions{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--stroke)} .mailc-attach{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;border:none;background:var(--panel-strong);color:var(--text);cursor:pointer;flex-shrink:0} .mailc-attach:hover{background:var(--accent-soft);color:var(--accent)} .mailc-attach.on{background:var(--accent-soft);color:var(--accent)} .mailc-schedule-row{display:flex;align-items:center;gap:8px;padding:8px 18px;border-top:1px solid var(--stroke);color:var(--text-dim);font-size:0.78125rem} .mailc-schedule-row input[type=datetime-local]{background:var(--panel-strong);border:1px solid var(--stroke);border-radius:8px;padding:5px 8px;color:var(--text);font-family:inherit;font-size:0.78125rem} .mailc-schedule-row .icon-btn{width:26px;height:26px;margin-left:auto} .mailc-status{font-size:0.78125rem;color:var(--text-dim);flex:1} .mailc-status.err{color:#ff5c7a} .mailc-send{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;border-radius:22px;height:40px;padding:0 22px;font-family:inherit;font-size:0.875rem;font-weight:600;cursor:pointer;margin-left:auto} .mailc-send:disabled{opacity:.5;cursor:default} .mailc-atts{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 10px} .mailc-att-chip{display:inline-flex;align-items:center;gap:6px;font-size:0.78125rem;background:var(--panel-strong);border:1px solid var(--stroke);border-radius:10px;padding:5px 9px;color:var(--text)} .mailc-att-size{color:var(--text-dim)} .mailc-att-rm{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:0.8125rem;padding:0 0 0 2px;line-height:1} .mailc-att-rm:hover{color:#ff5c7a} @media (max-width:768px){ .mailc-back{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--accent);font-size:0.9375rem;font-weight:600;cursor:pointer;padding:10px 14px 6px} /* Le regole sopra (non in media query) su "Da/A/Cc/Oggetto" vincevano sempre anche da mobile perché dichiarate DOPO nel foglio di stile a parità di specificità — il precedente tentativo di ingrandirle da qui non aveva mai avuto effetto. Va tenuto qui, in fondo al file (dopo le regole base del composer), non prima. */ .mailc-row label{font-size:1.0625rem;font-weight:600;width:70px} .mailc-row input,.mailc-body{font-size:1.0625rem} .mailc-send{height:48px;padding:0 26px;font-size:1rem} .mailc-send-top{height:38px;padding:0 18px;font-size:0.875rem} .mailc-attach{width:46px;height:46px} .mailc-suggest-item{padding:11px 18px;font-size:0.9375rem} } /* Stesso ragionamento di .mail-page sopra: 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-page-title{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600;color:var(--text-dim)} .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)} .mail-outbox-err{font-size:0.71875rem;color:#ff5c7a;margin-top:4px} .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){ .pm-page{position:fixed;inset:0;z-index:48;border-radius:0;border:none; padding-top:var(--net-banner-h,0px)} .pm-page-header{padding:14px 16px} .pm-page-body{flex-direction:column} .pm-sidebar{width:100%;max-height:38%;border-right:none;border-bottom:1px solid var(--stroke)} .pm-detail{padding:18px 16px} } .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{background:rgba(255,255,255,.97)} 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) ---------------- */ .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;border-radius:26px;display:grid;place-items:center;background:var(--bubble-me);box-shadow:0 20px 60px -12px color-mix(in srgb, var(--accent) 65%, transparent);color:#fff;animation:splash-pulse 1.8s ease-in-out infinite} .splash-logo svg{width:42px;height:42px} @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-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;border-radius:18px;display:grid;place-items:center;background:var(--bubble-me);box-shadow:0 14px 40px -10px color-mix(in srgb, var(--accent) 65%, transparent);color:#fff;animation:splash-pulse 2.4s ease-in-out infinite} .login-logo svg{width:26px;height:26px} .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" 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, quindi la barra è realmente più alta di 64px sugli iPhone — se questa variabile non lo sapesse, tutto ciò che si posiziona "sopra la tabbar" (mail-page, rpanel) finirebbe un po' sotto di essa, con l'effetto di contenuto "tagliato" segnalato dall'utente. */ :root{--mtb-h:calc(64px + 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} /* Notifiche è una destinazione della tabbar (come Mail): 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} .back-btn{display:grid !important} .topbar{padding:12px 14px;gap:10px} .tb-actions #screenShareBtn{display:none} /* screen share: non sprecare spazio su mobile (le chiamate invece restano visibili) */ .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))} /* 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"). Il primo giro aveva toccato solo la chat: mail, Radar e notifiche erano rimaste alle dimensioni desktop, che su un telefono in mano sono illeggibili. Qui si copre tutto il resto, e la chat sale ancora un gradino. */ .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} /* Le dimensioni delle righe dell'elenco email stanno TUTTE nel blocco mobile piu' sopra (.mail-list-col e dintorni), non qui: erano definite in due punti e vinceva questo, piu' in basso nel foglio, con i valori piu' piccoli — per cui gli aumenti applicati sopra non si vedevano affatto. Un solo punto di verita' per selettore. */ .mail-folder{font-size:0.9375rem;padding:8px 14px} .mail-acc-email{font-size:1.03125rem} .mail-acc-sub{font-size:0.875rem} /* lettura di una email */ .mail-rd-subject{font-size:1.3125rem} .mail-rd-date{font-size:0.8125rem} .mail-rd-act{font-size:0.9375rem;padding:10px 18px} .mail-att,.mail-att-more{font-size:0.875rem;padding:8px 12px} /* Radar */ .radar-title{font-size:1.25rem} .radar-sub{font-size:0.84375rem} .radar-card-title{font-size:1.03125rem} .radar-card-sub{font-size:0.84375rem} .radar-item-subj{font-size:0.96875rem} .radar-item-who{font-size:0.84375rem} .radar-item-reason,.radar-item-quote{font-size:0.84375rem} .radar-empty,.radar-loading{font-size:0.90625rem} .radar-group-acc{font-size:0.9375rem} .radar-group-count{font-size:0.8125rem} .radar-act{font-size:0.84375rem;padding:7px 14px} .mail-toast{font-size:0.90625rem} .mail-toast-act{font-size:0.875rem} .radar-partial{font-size:0.84375rem} /* 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} .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} .comp-box textarea{font-size:0.8125rem} .c-btn{width:36px;height:36px} .sec{font-size:0.65625rem} .rp-sec{font-size:0.625rem} }