/* Nexi OS Messages 1.7 — friends, media, calls (nexi-messages.css). Builds on the .nxm styles in nexi-os.css. */
.nxm17 .nxm-sh{padding:12px 12px 6px}
.nxm-tabs{display:flex;gap:4px;padding:0 10px 8px}
.nxm-tabs button{flex:1;border:0;border-radius:10px;padding:7px 8px;background:var(--hover);color:inherit;font:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.nxm-tabs button.on{background:var(--accent);color:var(--on-accent,#fff)}
.nxm-badge{font-style:normal;min-width:18px;height:18px;border-radius:9px;background:#ff4d5e;color:#fff;font-size:11px;font-weight:800;display:inline-grid;place-items:center;padding:0 5px}
.nxm-hint{opacity:.65;font-size:13px;padding:10px 8px}
.nxm-lh{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.6;padding:12px 8px 4px}
.nxm-fr{display:flex;align-items:center;gap:6px;padding:7px 6px;border-radius:12px;flex-wrap:wrap}
.nxm-fr:hover{background:var(--hover)}
.nxm-fr .nxm-ct{min-width:90px}
.nxm-frb{display:flex;gap:6px;width:100%;padding-left:44px}
.nxm-frb .btn{flex:1}
.nxm-new .nxm-err{width:100%;padding:2px 0 0}
.nxm-err.ok{color:#7fe0a5}
.nxm-fl h3{margin:2px 0 6px;font-size:16px}
.nxm-fcard{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--hover)}
.nxm-safe{opacity:.65;font-size:12.5px;line-height:1.45;margin:14px 2px 0;max-width:560px}
.nxm-ib{width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;flex:none;background:var(--hover);position:relative}
.nxm-ib::before,.nxm-clip::before,.nxc-i{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.nxm-ib{color:inherit} .nxm-ib:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 30%,transparent)}
.nxm-ib:disabled{opacity:.35;cursor:not-allowed}
.nxm-ib.call{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.7%202z%22/%3E%3C/svg%3E")} .nxm-ib.vid{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%208-6%204%206%204V8z%22/%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2214%22%20height%3D%2212%22%20rx%3D%222%22/%3E%3C/svg%3E")} .nxm-ib.msg{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E")}
.nxm-fcard .nxm-ib{background:rgba(255,255,255,.08)}
.nxm17 .nxm-clip{position:relative;color:inherit;--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.4%2011.1-9.2%209.2a6%206%200%200%201-8.5-8.5l9.2-9.2a4%204%200%200%201%205.7%205.7l-9.2%209.2a2%202%200%200%201-2.8-2.8l8.5-8.5%22/%3E%3C/svg%3E")}
.nxm17 .nxm-clip:disabled{opacity:.4}
.nxm-nf{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:13.5px;opacity:.9}
.nxm-b.media{padding:4px 4px 3px;background:transparent;border-color:transparent}
.nxm-b.media .nxm-meta{padding:0 6px}
.nxm-vid{width:300px;max-width:100%;max-height:340px;border-radius:12px;background:#000;display:block}
.nxm-vnote{font-size:12px;opacity:.8} .nxm-vnote:empty{display:none}
.nxm-fa{display:flex;align-items:center;gap:8px} .nxm-fa small{opacity:.6;font-size:11px}
.nxm-prog{display:flex;align-items:center;gap:10px;padding:0 4px 8px;font-size:13px}
.nxm-prog[hidden]{display:none}
.nxm-pt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.nxm-pb{flex:1;height:6px;border-radius:3px;background:var(--hover);overflow:hidden}
.nxm-pb i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.nxm-rs{opacity:.7;font-size:12px}
.nxm-av.big{width:84px;height:84px;font-size:36px}
/* call screen */
.nxc{position:fixed;inset:0;z-index:100000;background:radial-gradient(circle at 50% 30%,#2b3a4a,#0b0f14 70%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;font-family:inherit;animation:nxcIn .2s ease-out}
@keyframes nxcIn{from{opacity:0;transform:scale(.98)}}
.nxc-rv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;opacity:0;transition:opacity .3s;pointer-events:none}
.nxc.vid .nxc-rv{opacity:1}
.nxc-lv{position:absolute;right:18px;top:18px;width:200px;max-width:28vw;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#111;box-shadow:0 8px 30px rgba(0,0,0,.5);display:none;transform:scaleX(-1);z-index:2}
.nxc.selfvid .nxc-lv{display:block}
.nxc-top{position:relative;z-index:1;margin-top:12vh;display:flex;flex-direction:column;align-items:center;gap:10px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.nxc.vid .nxc-top{margin-top:22px;flex-direction:row;gap:10px;align-self:flex-start;margin-left:22px}
.nxc.vid .nxc-top .nxm-av{width:36px;height:36px;font-size:16px}
.nxc-name{font-size:26px} .nxc.vid .nxc-name{font-size:17px}
.nxc-status{opacity:.85;font-size:15px;max-width:min(520px,90vw);text-align:center;line-height:1.4}
.nxc.bad .nxc-status{color:#ffb4b4;font-weight:600}
.nxc-btns{position:relative;z-index:1;display:flex;gap:22px;margin-bottom:9vh}
.nxc-b{position:relative;width:64px;height:64px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;backdrop-filter:blur(8px)}
.nxc-b small{position:absolute;top:70px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;opacity:.85}
.nxc-b .nxc-i{width:26px;height:26px}
.nxc-b:hover{background:rgba(255,255,255,.26)}
.nxc-b.on{background:#fff;color:#111}
.nxc-b.mic{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%2212%22%20rx%3D%223%22/%3E%3Cpath%20d%3D%22M19%2010v1a7%207%200%200%201-14%200v-1M12%2018v4M8%2022h8%22/%3E%3C/svg%3E")} .nxc-b.mic.on{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%202%2020%2020M9%209v2a3%203%200%200%200%205.1%202.1M15%209.3V5a3%203%200%200%200-5.9-.6M17%2016.9A7%207%200%200%201%205%2011v-1m14%200v1a7%207%200%200%201-.1%201.2M12%2018v4M8%2022h8%22/%3E%3C/svg%3E")}
.nxc-b.cam{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%208-6%204%206%204V8z%22/%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2214%22%20height%3D%2212%22%20rx%3D%222%22/%3E%3C/svg%3E")} .nxc-b.cam.on{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%202%2020%2020M16%2016v1a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V7a2%202%200%200%201%202-2h2m5.7%200H14a2%202%200%200%201%202%202v3.3l1%201L22%208v8%22/%3E%3C/svg%3E")}
.nxc-b.end{background:#e5484d;--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.7%2013.3a16%2016%200%200%200%203.4%202.6l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.7%202v3a2%202%200%200%201-2.2%202A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8M22%202%202%2022%22/%3E%3C/svg%3E")} .nxc-b.end:hover{background:#f2555a}
.nxc-b.ok{background:#2fb86c;--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.7%202z%22/%3E%3C/svg%3E")} .nxc-b.ok:hover{background:#39c977}
.nxc.ended .nxc-btns .nxc-b{width:auto;height:auto;border-radius:999px;padding:10px 22px;font:inherit;font-weight:600}
.nxc-ring{position:fixed;z-index:100001;right:18px;top:18px;width:min(360px,calc(100vw - 36px));display:flex;align-items:center;gap:12px;padding:14px 16px 30px;border-radius:20px;background:rgba(20,24,30,.96);color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.55);animation:nxcRing 1.2s ease-in-out infinite alternate}
@keyframes nxcRing{from{box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 0 rgba(47,184,108,.0)}to{box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 6px rgba(47,184,108,.45)}}
.nxc-ring .nxm-av.big{width:48px;height:48px;font-size:20px}
.nxc-rt{flex:1;display:flex;flex-direction:column;min-width:0} .nxc-rt b{font-size:16px} .nxc-rt small{opacity:.75}
.nxc-ring .nxc-b{width:48px;height:48px} .nxc-ring .nxc-b small{top:52px;font-size:11px} .nxc-ring .nxc-b .nxc-i{width:20px;height:20px}
/* standalone page (messages.html: the Nexi OS USB Messages app) */
body.nxm-alone{color-scheme:dark;margin:0;height:100vh;display:flex;flex-direction:column;font-family:"Inter","Segoe UI",system-ui,sans-serif;background:#12161c;color:#eef1f5;
  --accent:#2fb86c;--on-accent:#fff;--line:rgba(255,255,255,.1);--hover:rgba(255,255,255,.07);--win:#1a2029}
body.nxm-alone .nxm{flex:1;min-height:0}
body.nxm-alone .btn{border:0;border-radius:10px;padding:9px 16px;font:inherit;font-weight:600;background:rgba(255,255,255,.1);color:inherit;cursor:pointer}
body.nxm-alone .btn:hover{background:rgba(255,255,255,.16)}
body.nxm-alone .btn.small{padding:6px 11px;font-size:13px}
body.nxm-alone .btn.primary{background:var(--accent);color:#fff}
body.nxm-alone .btn.danger{background:#c9373c;color:#fff}
body.nxm-alone .btn:disabled{opacity:.5;cursor:default}
body.nxm-alone .field{border:1px solid var(--line);background:rgba(0,0,0,.25);color:inherit;border-radius:10px;padding:10px 12px;font:inherit;outline:none}
body.nxm-alone .field:focus{border-color:var(--accent)}
.nxa-gate{margin:auto;width:min(380px,92vw);display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:22px;background:#1a2029;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.nxa-gate h1{margin:0 0 4px;font-size:24px;display:flex;align-items:center;gap:10px}
.nxa-gate p{margin:0;opacity:.7;font-size:13.5px;line-height:1.45}
.nxa-gate .tabs{display:flex;gap:4px} .nxa-gate .tabs button{flex:1}
.nxa-gate .tabs button.on{background:var(--accent);color:#fff}
.nxa-err{color:#ff9c9c;font-size:13px;font-weight:600} .nxa-err:empty{display:none}
.nxa-toasts{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:100002;display:flex;flex-direction:column;gap:8px;align-items:center}
.nxa-toast{background:#222a35;color:#fff;border-radius:14px;padding:10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:min(460px,92vw);font-size:13.5px;cursor:pointer}
.nxa-toast b{display:block;font-size:14px}