.mx-toolwin{position:fixed;z-index:100;right:max(12px,env(safe-area-inset-right));bottom:84px;width:min(400px,calc(100vw - 24px));height:min(540px,calc(100svh - 130px));display:flex;flex-direction:column;background:var(--mt-panel,#15161b);color:var(--mt-ink,#f4f5f7);border:1px solid var(--mt-border,#30323b);border-radius:14px;box-shadow:0 16px 50px #0008;overflow:hidden;pointer-events:auto}
.mx-toolwin .mx-lh{flex:none}.mx-toolnotice{font-size:12px;line-height:1.5;color:var(--mt-muted,#acafb8);padding:10px 14px;margin:0}.mx-toolmsgs{flex:1;min-height:0;overflow:auto;padding:8px 14px}.mx-toolmsg{padding:10px;border:1px solid var(--mt-border,#30323b);border-radius:8px;margin-bottom:10px;overflow-wrap:anywhere}.mx-toolmsg b{font-size:13px}.mx-toolmsg small{display:block;font-size:11px;color:var(--mt-muted,#acafb8)}.mx-toolmsg p{white-space:pre-wrap;margin:6px 0 0;font-size:14px}.mx-toolform{display:flex;gap:8px;padding:12px;border-top:1px solid var(--mt-border,#30323b)}.mx-toolform textarea{flex:1;min-width:0;font:inherit;font-size:16px;background:var(--mt-input,#0c0d10);color:var(--mt-ink,#fff);border:1px solid var(--mt-border,#30323b);border-radius:8px;padding:8px;resize:none}.mx-toolstatus{margin:0;padding:0 12px;font-size:13px}.mx-tool-inbox{width:100%;min-height:44px;background:var(--mt-panel,#15161b);color:var(--mt-ink,#fff);border:0;border-top:1px solid var(--mt-border,#30323b);font:inherit;cursor:pointer}
@media(max-width:599px){.mx-toolwin{inset:max(12px,env(safe-area-inset-top)) 12px auto;height:calc(100svh - 96px);width:auto}}
/* Mech Tech Messenger — premium, token-based. Colours come from premium.css (--pm-*) with safe fallbacks.
   Layout modes: compact floating (inbox + resizable windows), mobile full-height, full-page workspace (.mx-ws). */
.mx-root{
 --mx-bg:var(--pm-bg,#0B0F14);--mx-surf:var(--pm-surface,#141B24);--mx-surf2:var(--pm-surface-2,#1B2530);--mx-line:var(--pm-line,#232F3C);--mx-soft:var(--pm-line-soft,#1A242F);
 --mx-ink:var(--pm-ink,#F5F7FA);--mx-mut:var(--pm-mut,#98A4B3);--mx-red:var(--pm-red,#D3263E);--mx-red2:var(--pm-red-hover,#E03A51);--mx-redbg:var(--pm-red-soft,rgba(211,38,62,.16));
 --mx-hover:var(--pm-hover,rgba(152,164,179,.09));--mx-input:var(--pm-input,#0F151C);--mx-in:var(--pm-bubble-in,#1B2530);--mx-in-ink:var(--pm-bubble-in-ink,#F5F7FA);--mx-out:var(--pm-bubble-out,#D3263E);--mx-out-ink:var(--pm-bubble-out-ink,#fff);
 --mx-pop:var(--pm-pop,0 24px 60px -20px rgba(0,0,0,.75));--mx-ok:var(--pm-ok,#2FB574);
 --mx-sab:env(safe-area-inset-bottom,0px);--mx-sat:env(safe-area-inset-top,0px);--mx-sar:env(safe-area-inset-right,0px);--mx-sal:env(safe-area-inset-left,0px);
 font:14px/1.45 var(--pm-font,"MT Inter",system-ui,-apple-system,"Segoe UI",sans-serif);color:var(--mx-ink)}
.mx-root{position:fixed;inset:0;z-index:1200;pointer-events:none;isolation:isolate}
.mx-root[hidden],.mx-root [hidden]{display:none!important}
.mx-launch,.mx-list,.mx-win,.mx-chip,.mx-note{pointer-events:auto}
.mx-root *{box-sizing:border-box}
.mx-root svg{width:18px;height:18px;display:block}
.mx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mx-hidden{display:none!important}

/* launcher (only when the header Messages control is unavailable) */
.mx-launch{position:fixed;right:calc(20px + var(--mx-sar));bottom:calc(20px + var(--mx-sab));z-index:70;width:52px;height:52px;border-radius:50%;border:0;background:var(--mx-red);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);transition:transform .16s ease;touch-action:none;cursor:pointer}
.mx-launch svg{width:24px;height:24px}
.mx-launch:hover{transform:translateY(-1px)}
.mx-launch.drag{transition:none}
.mx-launch-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--mx-ink);color:var(--mx-bg);font-size:11px;font-weight:700;display:grid;place-items:center}

/* shared controls */
.mx-ib{width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;flex:none;padding:0;transition:background .12s}
.mx-ib:hover{background:var(--mx-hover)}
.mx-root button:focus-visible,.mx-root input:focus-visible,.mx-root textarea:focus-visible{outline:2px solid var(--mx-red);outline-offset:2px}
.mx-btn{border:1px solid var(--mx-line);background:var(--mx-surf2);color:var(--mx-ink);border-radius:8px;padding:8px 14px;font:600 13px var(--pm-font,inherit);cursor:pointer;min-height:36px}
.mx-btn:hover{border-color:var(--mx-mut)}
.mx-btn.sm{padding:5px 10px;font-size:12px;min-height:30px}
.mx-btn.red{background:var(--mx-red);border-color:var(--mx-red);color:#fff}
.mx-btn.red:hover{background:var(--mx-red2);border-color:var(--mx-red2)}
.mx-btn.dang{color:var(--mx-red);border-color:var(--mx-red)}
.mx-btn:disabled{opacity:.5;cursor:not-allowed}
.mx-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mx-hb{display:flex;align-items:center;gap:2px;margin-left:auto}
.mx-muted{color:var(--mx-mut);font-size:12px;margin:6px 0}
.mx-cap{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mx-mut);margin:14px 0 7px}
.mx-errt,.mx-err{color:var(--mx-red);font-size:12.5px;font-weight:600}
.mx-err{background:var(--mx-redbg);padding:8px 10px;border-radius:8px}
#mx-root .mx-err:empty,#mx-root .mx-errt:empty{display:none!important}

/* avatars */
.mx-av{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:650;font-size:13.5px;flex:none;color:var(--mx-ink);background:var(--mx-surf2);border:1px solid var(--mx-line);letter-spacing:.02em}
.mx-av.sm{width:32px;height:32px;font-size:12px}
.mx-av.xs{width:24px;height:24px;font-size:10px}
.mx-av-photo{overflow:visible;padding:0}
.mx-av-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.mx-av-grp{background:var(--mx-redbg);color:var(--mx-red);border-color:transparent}
.mx-av-ro{border-radius:10px;font-size:11px;font-family:var(--pm-mono,ui-monospace)}
.mx-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--mx-mut);border:2px solid var(--mx-surf)}
.mx-dot.on{background:var(--mx-ok)}

/* inbox */
.mx-list{position:fixed;right:calc(20px + var(--mx-sar));bottom:calc(20px + var(--mx-sab));top:auto;z-index:65;width:360px;height:min(600px,calc(var(--mx-vvh,100vh) - 96px));background:var(--mx-surf);border:1px solid var(--mx-line);border-radius:14px;box-shadow:var(--mx-pop);display:flex;flex-direction:column;overflow:hidden;animation:mx-rise .2s cubic-bezier(.2,.8,.2,1);transform-origin:bottom right}
body.pm-hdr-msg .mx-list:not(.mx-root.mx-ws .mx-list){top:calc(var(--pm-header,56px) + 8px + var(--mx-sat));bottom:auto;transform-origin:top right}
@keyframes mx-rise{from{opacity:1;transform:translateY(8px)}to{opacity:1;transform:none}}
.mx-lh{display:flex;align-items:center;gap:4px;padding:12px 8px 8px 16px;flex:none}
.mx-lh h2{margin:0;font-size:17px;font-weight:650;letter-spacing:-.015em;color:var(--mx-ink)}
.mx-lsearch{padding:4px 12px 6px;flex:none}
.mx-lsearch input,.mx-form input:not([type=checkbox]):not([type=radio]),.mx-form select,.mx-addsel,.mx-sq{width:100%;border:1px solid var(--mx-line);border-radius:8px;padding:9px 12px;font:inherit;background:var(--mx-input);color:var(--mx-ink);min-height:40px}
.mx-lsearch input{border-radius:10px;background:var(--mx-surf2);border-color:transparent}
.mx-lsearch input:focus{border-color:var(--mx-red);outline:none}
.mx-kinds{display:flex;flex-wrap:wrap;gap:6px;padding:4px 12px 8px;flex:none}
.mx-kind{flex:none;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--mx-line);background:transparent;color:var(--mx-mut);font:600 12.5px var(--pm-font,inherit);cursor:pointer}
.mx-kind:hover{color:var(--mx-ink)}
.mx-kind.on{background:var(--mx-ink);border-color:var(--mx-ink);color:var(--mx-bg)}
.mx-convs{overflow:auto;padding:0 6px 10px;flex:1;overscroll-behavior:contain}
.mx-sec{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mx-mut);padding:12px 10px 4px}
.mx-ci{position:relative;display:flex;align-items:center;border-radius:10px}
.mx-ci:hover{background:var(--mx-hover)}
.mx-ci.is-active{background:var(--mx-redbg)}
.mx-conv{display:flex;gap:11px;align-items:center;flex:1;min-width:0;text-align:left;border:0;background:none;padding:10px;border-radius:10px;cursor:pointer;color:inherit;font:inherit}
.mx-cb{flex:1;min-width:0}
.mx-ct{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 8px}
.mx-ct b{font-size:14px;white-space:normal;min-width:0;flex:1;overflow-wrap:anywhere;font-weight:600}
.mx-ct>:not(b):not(time){flex-basis:100%;order:3;white-space:normal}
.mx-ct time{font-size:11px;color:var(--mx-mut);flex:none;font-variant-numeric:tabular-nums}
.mx-crole{font-size:11px;color:var(--mx-mut);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-cp{display:flex;align-items:center;gap:6px;color:var(--mx-mut);font-size:12.5px}
.mx-cp>span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-cp em,.mx-chip em{font-style:normal;background:var(--mx-red);color:#fff;font-size:10.5px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.mx-conv.unread b{font-weight:700}.mx-conv.unread .mx-cp>span{color:var(--mx-ink);font-weight:550}
.mx-pinned,.mx-mut{color:var(--mx-mut);display:inline-grid}
.mx-pinned svg,.mx-mut svg{width:13px;height:13px}
.mx-cq{display:flex;gap:2px;padding-right:6px;opacity:0;transition:opacity .12s}
.mx-ci:hover .mx-cq,.mx-ci:focus-within .mx-cq{opacity:1}
.mx-cqb{width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:var(--mx-mut);display:grid;place-items:center;cursor:pointer}
.mx-cqb:hover,.mx-cqb.on{color:var(--mx-ink);background:var(--mx-surf2)}
.mx-cqb svg{width:15px;height:15px}
.mx-invites{margin:4px 12px;padding:4px 10px 8px;border:1px solid var(--mx-red);background:var(--mx-redbg);border-radius:10px}
.mx-inv{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 0}
.mx-inv small{display:block;color:var(--mx-mut);font-size:11.5px}
.mx-lbody{overflow:auto;padding:4px 16px 16px}
.mx-people{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto}
.mx-person{display:flex;gap:10px;align-items:center;border:0;background:none;padding:7px 6px;border-radius:10px;text-align:left;cursor:pointer;color:inherit;font:inherit}
.mx-person:hover{background:var(--mx-hover)}
.mx-person small{display:block;color:var(--mx-mut);font-size:11.5px;text-transform:capitalize}
.mx-form{display:flex;flex-direction:column;gap:10px}
.mx-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--mx-mut)}
.mx-form fieldset{border:1px solid var(--mx-line);border-radius:10px;padding:8px 10px;margin:0}
.mx-form legend{font-size:12px;font-weight:600;padding:0 4px;color:var(--mx-mut)}
.mx-checks{max-height:150px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.mx-root label.mx-chk{display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:500;font-size:13px;color:var(--mx-ink)}
.mx-chk input{width:17px;height:17px;accent-color:var(--mx-red);flex:none}
.mx-set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--mx-soft)}
.mx-set small{display:block;color:var(--mx-mut);font-size:12px}
.mx-sw{width:44px;height:26px;border-radius:13px;border:0;background:var(--mx-line);position:relative;flex:none;cursor:pointer;padding:0}
.mx-sw span{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .16s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.mx-sw[aria-checked=true]{background:var(--mx-red)}
.mx-sw[aria-checked=true] span{transform:translateX(18px)}
.mx-empty{text-align:center;padding:32px 18px;color:var(--mx-mut)}
.mx-empty b{display:block;color:var(--mx-ink);font-size:15px;margin-bottom:4px}
.mx-empty p{margin:0 0 12px;font-size:13px}
.mx-skel{display:flex;gap:11px;align-items:center;padding:10px}
.mx-skel span{width:40px;height:40px;border-radius:50%}
.mx-skel div{flex:1;display:flex;flex-direction:column;gap:7px}
.mx-skel i{height:10px;border-radius:5px;width:70%}.mx-skel i+i{width:45%}
.mx-skel span,.mx-skel i,.mx-mskel i{background:linear-gradient(90deg,var(--mx-surf2) 0,var(--mx-hover) 50%,var(--mx-surf2) 100%);background-size:200% 100%;animation:mx-sh 1.2s infinite linear}
@keyframes mx-sh{to{background-position:-200% 0}}
.mx-mskel{display:flex;flex-direction:column;gap:10px;padding:14px}
.mx-mskel i{display:block;height:34px;width:62%;border-radius:16px}
.mx-mskel i.r{align-self:flex-end;width:48%}

/* conversation windows */
.mx-win{position:fixed;z-index:50;background:var(--mx-surf);border:1px solid var(--mx-line);border-radius:14px;box-shadow:var(--mx-pop);display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;padding-bottom:22px}
.mx-root:not(.mx-ws) .mx-list{min-width:0;min-height:0;max-height:none;padding-bottom:22px}
.mx-root.mx-ws .mx-win.mx-wsw{padding-bottom:0}
.mx-win.mx-compact .mx-dt{display:none}
@media(pointer:coarse){.mx-root .mx-ib{min-width:44px;min-height:44px}}
.mx-win.mx-in{animation:mx-rise .2s cubic-bezier(.2,.8,.2,1)}
.mx-win.mx-moving{user-select:none}
.mx-win.mx-max{max-width:none;max-height:none;border-radius:12px}
.mx-list.mx-list-max [data-resize-list]{display:none}
.mx-short .mx-window-label,.mx-short .mx-wt small,.mx-short .mx-whav{display:none}
.mx-short .mx-wh{min-height:44px;padding-top:0;padding-bottom:0}
.mx-short .mx-input{max-height:64px}
.mx-short .mx-comp{padding-top:4px;padding-bottom:4px}
.mx-wh[data-drag],.mx-list .mx-lh[data-drag-list]{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.mx-wh[data-drag] :is(button,input),.mx-lh[data-drag-list] :is(button,input){touch-action:manipulation;cursor:pointer}
.mx-max .mx-wh[data-drag]{cursor:default}
.mx-window-label{display:block;font:600 10.5px/1.2 var(--pm-font,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--mx-red);margin-bottom:1px}
.mx-msgs,.mx-convs,.mx-panel,.mx-lbody{touch-action:pan-y;-webkit-overflow-scrolling:touch}
.mx-list .mx-rz,[data-resize-list]{touch-action:none}
.mx-rz{touch-action:none}
.mx-wh{background:var(--mx-surf);color:var(--mx-ink);display:flex;align-items:center;gap:10px;padding:8px 6px 8px 10px;min-height:56px;cursor:grab;touch-action:none;border-bottom:1px solid var(--mx-line);flex:none}
.mx-wh:active{cursor:grabbing}
.mx-back{display:none}
.mx-wt{min-width:0;flex:1}
.mx-wt b{display:block;font-size:14.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-wt small{display:block;font-size:11.5px;color:var(--mx-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-wh .mx-ib{width:34px;height:34px;color:var(--mx-mut)}
.mx-wh .mx-ib:hover{color:var(--mx-ink)}
.mx-wh .mx-ib svg{width:17px;height:17px}
.mx-sbar{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--mx-line);background:var(--mx-surf2)}
.mx-sres{text-align:center;font-size:12px;color:var(--mx-mut);padding:4px}
.mx-msgs{flex:1;overflow:auto;padding:12px 14px 6px;display:flex;flex-direction:column;gap:2px;background:var(--mx-bg);overscroll-behavior:contain}
.mx-older{align-self:center;border:1px solid var(--mx-line);background:var(--mx-surf);border-radius:16px;padding:5px 12px;font-size:12px;color:var(--mx-mut);cursor:pointer;margin:4px 0 8px}
.mx-day{text-align:center;margin:12px 0 6px}
.mx-day span{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--mx-mut);background:var(--mx-surf);border:1px solid var(--mx-line);padding:3px 10px;border-radius:10px}
.mx-m{display:flex;flex-direction:column;align-items:flex-start;margin-top:8px;position:relative}
.mx-m.grp{margin-top:2px}
.mx-m.me{align-items:flex-end}
.mx-from{font-size:11.5px;color:var(--mx-mut);margin:0 0 3px 34px;font-weight:600}
.mx-mrow{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.mx-m.me .mx-mrow{flex-direction:row-reverse}
.mx-bub{max-width:min(76%,520px);min-width:0;background:var(--mx-in);color:var(--mx-in-ink);border-radius:16px;padding:8px 12px;position:relative;overflow-wrap:anywhere}
.mx-m.me .mx-bub{background:var(--mx-out);color:var(--mx-out-ink)}
.mx-m.me.grp .mx-bub{border-top-right-radius:6px}
.mx-m:not(.me).grp .mx-bub{border-top-left-radius:6px}
.mx-bub.haspoll,.mx-m.me .mx-bub.haspoll{background:var(--mx-surf);border:1px solid var(--mx-line);color:var(--mx-ink);width:min(320px,82%);max-width:none}
.mx-m.del .mx-bub{background:transparent;border:1px dashed var(--mx-line);color:var(--mx-mut)}
.mx-m.pinned .mx-bub{box-shadow:0 0 0 2px var(--mx-ink)}
.mx-pinf{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:2px}
.mx-tx{white-space:pre-wrap}
.mx-meta{display:flex;gap:6px;justify-content:flex-end;font-size:10.5px;opacity:.72;margin-top:3px;font-variant-numeric:tabular-nums}
.mx-rc button{border:1px solid var(--mx-line);background:var(--mx-surf);color:var(--mx-ink);border-radius:6px;font-size:10.5px;font-weight:600;cursor:pointer;margin-left:4px}
.mx-rc.bad{font-weight:700}
.mx-rq{display:block;width:100%;text-align:left;border:0;border-left:3px solid currentColor;background:rgba(0,0,0,.14);color:inherit;border-radius:6px;padding:4px 8px;margin-bottom:5px;font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-rq b{display:block;font-size:11px}
.mx-roref{display:block;width:100%;text-align:left;border:1px solid currentColor;background:transparent;color:inherit;border-radius:9px;padding:5px 9px;margin-bottom:5px;font-size:12.5px;font-weight:600;cursor:pointer}
.mx-roref small{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;color:inherit}
.mx-attl{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.mx-img img{display:block;max-width:100%;max-height:240px;border-radius:12px;object-fit:cover}
.mx-vid{max-width:100%;max-height:260px;border-radius:12px;background:#000}
.mx-aud{max-width:240px;height:38px}
.mx-file-l{display:block;background:var(--mx-surf);color:var(--mx-ink);border:1px solid var(--mx-line);border-radius:10px;padding:7px 10px;text-decoration:none}
.mx-file-l small{display:block;color:var(--mx-mut);font-size:11px}
.mx-acts{display:none;gap:2px;background:var(--mx-surf);border:1px solid var(--mx-line);border-radius:10px;padding:2px;box-shadow:var(--mx-pop);align-self:center;flex-wrap:wrap}
.mx-acts button{border:0;background:none;font-size:11.5px;font-weight:600;padding:5px 8px;border-radius:7px;cursor:pointer;color:var(--mx-ink)}
.mx-acts button:hover{background:var(--mx-hover)}
.mx-acts .dang{color:var(--mx-red)}
.mx-m:hover .mx-acts,.mx-m:focus-within .mx-acts{display:flex}
.mx-reacts{display:flex;gap:4px;margin:-6px 10px 0;z-index:1;flex-wrap:wrap}
.mx-m:not(.me) .mx-reacts{margin-left:40px}
.mx-reacts button{border:1px solid var(--mx-line);background:var(--mx-surf);border-radius:12px;font-size:12px;padding:1px 7px;cursor:pointer;color:var(--mx-ink)}
.mx-reacts button.mine{border-color:var(--mx-red);background:var(--mx-redbg)}
.mx-picker{display:flex;gap:2px;background:var(--mx-surf);border:1px solid var(--mx-line);border-radius:14px;padding:4px;box-shadow:var(--mx-pop);margin-top:4px}
.mx-picker[hidden]{display:none}
.mx-picker button{border:0;background:none;font-size:19px;width:36px;height:36px;border-radius:8px;cursor:pointer}
.mx-picker button:hover{background:var(--mx-hover)}
.mx-flash .mx-bub{animation:mx-fl 1.3s}
@keyframes mx-fl{0%,60%{box-shadow:0 0 0 3px var(--mx-red)}100%{box-shadow:none}}

/* polls */
.mx-pq{font-weight:700;font-size:14px}
.mx-pm{font-size:11px;color:var(--mx-mut);margin:2px 0 8px}
.mx-po{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--mx-line);border-radius:10px;padding:8px 10px;margin:5px 0;overflow:hidden;cursor:pointer;flex-wrap:wrap}
.mx-po.locked{cursor:default}
.mx-po.mine{border-color:var(--mx-red)}
.mx-po input{position:relative;z-index:1;accent-color:var(--mx-red);margin:0;width:16px;height:16px}
.mx-pbar{position:absolute;inset:0;background:var(--mx-redbg);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mx-pl{position:relative;flex:1;font-size:13px;font-weight:600}
.mx-pc{position:relative;font-size:11.5px;font-weight:700;color:var(--mx-mut)}
.mx-pvs{position:relative;flex-basis:100%;font-size:10.5px;color:var(--mx-mut);padding-left:24px}
.mx-pf{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:11px;color:var(--mx-mut);margin-top:6px;flex-wrap:wrap}

/* details panel */
.mx-panel{position:absolute;inset:57px 0 0 0;background:var(--mx-surf);z-index:3;overflow:auto;animation:mx-slide .18s ease}
@keyframes mx-slide{from{opacity:1;transform:translateY(8px)}to{opacity:1;transform:none}}
.mx-pin-in{padding:0 14px 16px}
.mx-ph{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--mx-surf);padding:10px 0;border-bottom:1px solid var(--mx-line);z-index:1}
.mx-pinrow{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--mx-soft);background:none;padding:9px 2px;cursor:pointer;color:inherit;font:inherit}
.mx-pinrow:hover{background:var(--mx-hover)}
.mx-pinrow b{display:block;font-size:12.5px}
.mx-pinrow span{display:block;font-size:13px}
.mx-pinrow small{color:var(--mx-mut);font-size:11px}
.mx-mems{display:flex;flex-direction:column}
.mx-mem{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--mx-soft)}
.mx-memn{flex:1;min-width:0}
.mx-memn b{display:block;font-size:13px}
.mx-memn small{color:var(--mx-mut);font-size:11px;text-transform:capitalize}
.mx-addrow{display:flex;gap:6px}
.mx-addrow select{flex:1}
.mx-popts{display:flex;flex-direction:column;gap:6px}
.mx-seg{display:flex;border:1px solid var(--mx-line);border-radius:10px;overflow:hidden}
.mx-root .mx-seg label{flex:1;flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:8px;font-weight:600;cursor:pointer}
.mx-seg label:has(input:checked){background:var(--mx-ink);color:var(--mx-bg)}
.mx-seg input{accent-color:var(--mx-red)}
.mx-closeat[hidden]{display:none}
.mx-review{margin-top:6px}

/* typing + composer */
.mx-typing{font-size:11.5px;color:var(--mx-mut);padding:0 14px;min-height:18px;display:flex;align-items:center;gap:6px;flex:none;background:var(--mx-bg)}
.mx-dots{display:inline-flex;gap:3px}
.mx-dots i{width:5px;height:5px;border-radius:50%;background:var(--mx-mut);animation:mx-b 1s infinite}
.mx-dots i:nth-child(2){animation-delay:.15s}.mx-dots i:nth-child(3){animation-delay:.3s}
@keyframes mx-b{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.mx-comp{border-top:1px solid var(--mx-line);padding:8px 10px calc(8px + var(--mx-sab));background:var(--mx-surf);flex:none}
.mx-cx{display:flex;align-items:center;gap:8px;background:var(--mx-surf2);border-left:3px solid var(--mx-red);border-radius:8px;padding:5px 4px 5px 10px;margin-bottom:6px;font-size:12px}
.mx-cx.ro{border-left-color:var(--mx-ink)}
.mx-cx span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-cx b{display:block;font-size:11.5px}
.mx-cx .mx-ib,.mx-ph .mx-ib{color:var(--mx-ink);width:30px;height:30px}
.mx-atts{display:flex;gap:6px;flex-wrap:wrap}
.mx-atts:not(:empty){margin-bottom:6px}
.mx-att{display:flex;align-items:center;gap:6px;border:1px solid var(--mx-line);border-radius:10px;padding:4px 4px 4px 9px;font-size:11.5px;max-width:100%}
.mx-att.bad{border-color:var(--mx-red);color:var(--mx-red)}
.mx-attn{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.mx-att small{color:inherit;opacity:.75}
.mx-att button{border:0;background:none;width:22px;height:22px;display:grid;place-items:center;cursor:pointer;color:inherit;padding:0}
.mx-att svg{width:13px;height:13px}
.mx-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--mx-line);border-top-color:var(--mx-red);animation:mx-rot .7s linear infinite;margin-right:4px}
@keyframes mx-rot{to{transform:rotate(360deg)}}
.mx-voice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;padding:4px 2px 8px}
.mx-voice[hidden]{display:none}
.mx-voice audio{height:34px;max-width:200px}
.mx-recdot{width:10px;height:10px;border-radius:50%;background:var(--mx-red);animation:mx-b 1s infinite}
.mx-crow{display:flex;align-items:flex-end;gap:6px}
.mx-amenu-wrap{position:relative}
.mx-attach{color:var(--mx-mut);width:40px;height:40px}
.mx-attach:hover{color:var(--mx-ink)}
.mx-attach svg{width:21px;height:21px}
.mx-amenu{position:absolute;bottom:46px;left:0;background:var(--mx-surf);border:1px solid var(--mx-line);border-radius:12px;box-shadow:var(--mx-pop);padding:5px;min-width:210px;z-index:5}
.mx-amenu[hidden]{display:none}
.mx-amenu button{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--mx-ink)}
.mx-amenu button:hover,.mx-amenu button:focus{background:var(--mx-hover)}
.mx-input{flex:1;resize:none;border:1px solid var(--mx-line);background:var(--mx-input);border-radius:12px;padding:9px 14px;font:inherit;font-size:14px;line-height:1.4;min-height:40px;max-height:140px;color:var(--mx-ink)}
.mx-input:focus{outline:none;border-color:var(--mx-red)}
.mx-input::placeholder{color:var(--mx-mut)}
.mx-send{width:40px;height:40px;border-radius:10px;border:0;background:var(--mx-red);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .12s,background .12s}
.mx-send:hover{background:var(--mx-red2)}
.mx-send:active{transform:scale(.94)}
.mx-rz{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:4;background:linear-gradient(135deg,transparent 55%,var(--mx-mut) 55%,var(--mx-mut) 62%,transparent 62%,transparent 74%,var(--mx-mut) 74%,var(--mx-mut) 81%,transparent 81%);opacity:.6}
.mx-max .mx-rz{display:none}

/* minimized dock */
.mx-dock{position:fixed;right:calc(20px + var(--mx-sar));bottom:calc(20px + var(--mx-sab));z-index:66;display:flex;gap:8px;flex-direction:row-reverse;max-width:calc(100vw - 120px);overflow-x:auto;padding:4px}
.mx-launch:not([hidden])~.mx-dock{right:calc(84px + var(--mx-sar))}
.mx-chip{display:flex;align-items:center;background:var(--mx-surf);color:var(--mx-ink);border-radius:24px;box-shadow:var(--mx-pop);border:1px solid var(--mx-line)}
.mx-chipb{display:flex;align-items:center;gap:8px;border:0;background:none;color:inherit;padding:4px 6px 4px 4px;cursor:pointer;max-width:200px;touch-action:none;font:inherit}
.mx-chipt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:12.5px}
.mx-draft{font-style:normal;font-size:10.5px;color:var(--mx-red);font-weight:600}
.mx-chipx{border:0;background:none;color:var(--mx-mut);width:28px;height:28px;display:grid;place-items:center;cursor:pointer;margin-right:4px;border-radius:50%}
.mx-chipx:hover{color:var(--mx-ink);background:var(--mx-hover)}
.mx-chipx svg{width:14px;height:14px}

/* notifications: under the top header, upper right on wide screens, centred on phones */
.mx-notes{position:fixed;right:calc(16px + var(--mx-sar));left:auto;top:var(--mx-note-top,calc(64px + var(--mx-sat)));z-index:80;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 24px));max-height:calc(var(--mx-vvh,100vh) - var(--mx-note-top,64px) - 24px);overflow:hidden;pointer-events:none}
@media(max-width:720px){.mx-notes{right:auto;left:50%;transform:translateX(-50%);width:min(380px,calc(100vw - 16px))}}
.mx-note.mx-incoming{display:grid;gap:6px;padding:10px 12px;border-left:1px solid var(--mx-line);position:relative;overflow:hidden}
.mx-note.mx-incoming::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--mx-red)}
.mx-alert-head{display:flex;align-items:center;gap:10px;min-width:0}
.mx-alert-head .mx-av{width:34px;height:34px;font-size:12px}
.mx-alert-head>div,.mx-alert-head .mx-alert-who{flex:1;min-width:0}
#mx-root .mx-alert-head b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mx-root .mx-alert-head small,#mx-root .mx-alert-head span{display:block;color:var(--mx-mut);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-alert-head time{flex:none;font-size:11px;color:var(--mx-mut);font-variant-numeric:tabular-nums;align-self:flex-start}
#mx-root .mx-alert-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;color:var(--mx-ink);font-size:13px;line-height:1.4;overflow-wrap:anywhere}
#mx-root .mx-alert-summary{display:block;color:var(--mx-mut);font-size:11.5px;font-weight:600}
.mx-alert-acts{display:flex;gap:6px;justify-content:flex-end}
.mx-alert-acts button{min-height:36px;padding:0 14px;border-radius:8px;font:600 12.5px var(--pm-font,inherit);cursor:pointer;border:1px solid var(--mx-line);background:transparent;color:var(--mx-ink)}
.mx-alert-acts button:hover{background:var(--mx-hover)}
.mx-alert-acts [data-mx="notice-open"]{background:var(--mx-red);border-color:var(--mx-red);color:#fff}
.mx-alert-acts [data-mx="notice-open"]:hover{background:var(--mx-red2)}
@media(pointer:coarse){.mx-alert-acts button{min-height:44px}}
.mx-note{pointer-events:auto;background:var(--mx-surf);border:1px solid var(--mx-line);border-left:3px solid var(--mx-red);border-radius:12px;box-shadow:var(--mx-pop);padding:10px 14px;text-align:left;color:var(--mx-ink);animation:mx-drop .22s cubic-bezier(.2,.8,.2,1);font:inherit;font-size:13px;width:100%}
button.mx-note{cursor:pointer}
.mx-note b{display:block;font-size:13px}
.mx-note:not(.mx-incoming) span{display:block;color:var(--mx-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-note.bad{background:var(--mx-red);color:#fff;border-color:var(--mx-red2)}
@keyframes mx-drop{from{opacity:1;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* host integration */
.mx-robar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mx-robtn svg{width:15px;height:15px}
.mx-chatpage{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mx-chatpage h2{margin:4px 0}
.mx-wshost{display:block;width:100%;min-height:320px}
.mx-dtonly{display:grid}

/* ---------- full-page workspace (chat / tech-chat routes) ---------- */
#mx-root.mx-ws:not(.mx-phone-chat){z-index:30}
.mx-root.mx-ws .mx-launch,.mx-root.mx-ws .mx-dock,.mx-root.mx-ws .mx-lh [data-mx="close-list"]{display:none!important}
.mx-root.mx-ws .mx-list{top:var(--ws-t,56px);left:var(--ws-l,0px);bottom:var(--ws-b,0px);right:auto;width:340px;height:auto;max-height:none;border-radius:0;border:0;border-right:1px solid var(--mx-line);box-shadow:none;animation:none}
.mx-root.mx-ws .mx-dtonly{display:none}
.mx-root.mx-ws .mx-win.mx-wsw{top:var(--ws-t,56px)!important;left:calc(var(--ws-l,0px) + 340px)!important;right:var(--ws-r,0px)!important;bottom:var(--ws-b,0px)!important;width:auto!important;height:auto!important;border-radius:0;border:0;box-shadow:none;min-width:0;animation:none;z-index:50}
.mx-root.mx-ws .mx-win.mx-wsw .mx-wh{cursor:default;touch-action:auto;padding-left:16px}
.mx-root.mx-ws .mx-win.mx-wsw :is(.mx-rz,.mx-dt){display:none!important}
.mx-root.mx-ws .mx-win.mx-wsw .mx-msgs{padding:16px clamp(16px,4vw,48px) 8px}
.mx-root.mx-ws .mx-win.mx-wsw .mx-comp{padding:10px clamp(12px,4vw,48px) calc(12px + var(--mx-sab))}
.mx-root.mx-ws .mx-win.mx-wsw .mx-bub{max-width:min(68%,560px)}
@media (min-width:1280px){.mx-root.mx-ws .mx-win.mx-wsw .mx-panel{left:auto;width:320px;border-left:1px solid var(--mx-line);box-shadow:var(--mx-pop)}}
.mx-wsempty{position:fixed;top:var(--ws-t,56px);left:calc(var(--ws-l,0px) + 340px);right:var(--ws-r,0px);bottom:var(--ws-b,0px);display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;color:var(--mx-mut);background:var(--mx-bg);pointer-events:auto;padding:24px}
.mx-wsempty b{color:var(--mx-ink);font-size:17px;font-weight:650}
.mx-wsempty p{margin:0;max-width:320px;font-size:13.5px}

/* ---------- phones + small tablets: floating, clamped windows (geometry is inline, set by messenger.js) ---------- */
@media(max-width:720px){
 .mx-launch{width:50px;height:50px;right:calc(12px + var(--mx-sar));bottom:auto;top:calc(var(--mx-vvh,100vh) - 150px)}
 .mx-left .mx-launch{right:auto;left:calc(12px + var(--mx-sal))}
 .mx-list{width:min(360px,calc(100vw - 16px));height:min(560px,calc(var(--mx-vvh,100dvh) - 120px));right:8px;bottom:calc(8px + var(--mx-sab))}
 .mx-root.mx-ws .mx-list{top:var(--ws-t,56px);height:calc(var(--mx-vvh,100dvh) - var(--ws-t,56px) - var(--ws-b,0px))}
 .mx-dtonly{display:none}
 .mx-back{display:grid}
 .mx-win.mx-mob{min-width:0;min-height:0;max-width:calc(100vw - 8px);max-height:var(--mx-vvh,100dvh);border-radius:14px}
 .mx-wsempty{display:none}
 .mx-wh{min-height:52px;padding:4px 2px 4px 4px;gap:4px}
 .mx-root .mx-ib,.mx-wh .mx-ib{min-width:44px;min-height:44px}
 .mx-root :is([data-mx="conv-fav"],[data-mx="conv-mute"]){min-width:44px;min-height:44px}
 .mx-root :is(input,textarea,select){font-size:16px}
 .mx-rz{width:28px;height:28px}
 .mx-dock{right:calc(12px + var(--mx-sar));left:auto;bottom:calc(12px + var(--mx-sab));flex-direction:column-reverse;max-width:none;overflow:visible;gap:10px}
 .mx-left .mx-dock{right:auto;left:calc(12px + var(--mx-sal))}
 .mx-chip{border-radius:50%;background:none;box-shadow:none;border:0;position:relative}
 .mx-chipb{padding:0}
 .mx-chipb .mx-av{width:46px;height:46px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
 .mx-chipt,.mx-draft,.mx-chipx{display:none}
 .mx-chip em{position:absolute;top:-4px;right:-4px}
 .mx-input{font-size:16px}
 .mx-acts{display:none}
 .mx-m:focus-within .mx-acts,.mx-m:active .mx-acts{display:flex}
 .mx-bub{max-width:84%}
 .mx-cq{opacity:1}
 .mx-panel{inset:53px 0 0 0}
}
/* compact phone header: hide secondary header tools (they live in the info panel); keep Back, name, min/max/close */
@media(max-width:420px){.mx-wh .mx-dt{display:none}.mx-wt small{display:none}}
@media(prefers-reduced-motion:reduce){.mx-root *{animation:none!important;transition:none!important}}
.mx-safe{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
/* Keep the one native messenger reachable across screen sizes; full-page chat retains its own controls. */
html body #mx-root:not(.mx-ws):not([hidden]) .mx-launch:not([hidden]){display:grid!important}
html body #mx-root.mx-inbox-open:not(.mx-ws) .mx-launch:not([hidden]){display:none!important}
@media(max-width:767px){
 body #mx-root:not(.mx-ws) .mx-launch:not([hidden]){display:grid!important}
 #mx-root .mx-launch{width:48px;height:48px;right:auto;bottom:auto;background:rgba(12,13,17,.72);-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);border:1px solid rgba(224,51,75,.48);color:#F4F5F7;box-shadow:0 10px 24px -12px rgba(0,0,0,.8),inset 0 -2px 0 rgba(224,51,75,.42);opacity:.9;transition:opacity .16s ease,transform .16s ease;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
 #mx-root .mx-launch svg{width:21px;height:21px}
 #mx-root .mx-launch:hover{transform:none;opacity:1}
 #mx-root .mx-launch:active{opacity:1}
 #mx-root .mx-launch.drag{opacity:1;transform:scale(1.07);transition:none;cursor:grabbing}
 #mx-root .mx-launch.snap{transition:left .22s cubic-bezier(.2,.8,.2,1),top .22s cubic-bezier(.2,.8,.2,1),opacity .16s}
 #mx-root .mx-launch-badge{top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#E0334B;color:#fff;border:2px solid #0C0D11;font:700 10.5px/1 var(--pm-font,inherit);font-variant-numeric:tabular-nums}
 html.ng-lock #mx-root .mx-launch{opacity:0;pointer-events:none}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){#mx-root .mx-launch.snap{transition:none}}