/* XO World — world chat panel (chat.js). Glass panel in the map HUD style; bottom-left, lifted above the hotbar when they'd touch. */
#xoChat{--xc-w:330px;--xc-lift:0px;position:absolute;left:16px;bottom:calc(16px + var(--xc-lift) + env(safe-area-inset-bottom,0px));z-index:7;width:var(--xc-w);max-width:calc(100vw - 24px);
  color:#fff;font:700 13px Figtree,sans-serif;background:rgba(24,21,34,.74);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);overflow:hidden;transition:bottom .25s ease,opacity .3s,width .25s ease,background .2s}
#xoChat.typing{background:rgba(24,21,34,.88);border-color:rgba(255,135,166,.55);box-shadow:0 0 0 3px rgba(255,135,166,.18),0 18px 40px -16px rgba(0,0,0,.7)}
#xoChat button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
/* header / toggle */
#xoChat .xc-head{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px 8px 9px;text-align:left}
#xoChat .xc-head img{width:24px;height:24px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
#xoChat .xc-head b{font:900 13px Rubik,sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
#xoChat .xc-on{font-style:normal;display:inline-flex;align-items:center;gap:5px;margin-left:2px;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.08);font:800 11px Figtree;color:rgba(255,255,255,.75);white-space:nowrap}
#xoChat .xc-on em{font-style:normal}
#xoChat .xc-on i{width:7px;height:7px;border-radius:50%;background:#8a8796;flex:none}
#xoChat[data-st=online] .xc-on i{background:#5ee28a;box-shadow:0 0 0 0 rgba(94,226,138,.6);animation:xcPulse 2.4s infinite}
#xoChat[data-st=connecting] .xc-on i{background:#ffcf5a}
#xoChat[data-st=offline] .xc-on{color:rgba(255,255,255,.5)}
@keyframes xcPulse{70%{box-shadow:0 0 0 6px rgba(94,226,138,0)}100%{box-shadow:0 0 0 0 rgba(94,226,138,0)}}
#xoChat .xc-badge{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#ff87a6;color:#1f1d2b;font:900 11px/20px Rubik,sans-serif;text-align:center}
#xoChat .xc-badge.on{display:inline-block}
#xoChat .xc-chev{margin-left:auto;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.07);font-size:11px;transition:transform .25s}
#xoChat .xc-head:hover .xc-chev{background:rgba(255,135,166,.28)}
#xoChat.xc-min .xc-chev{transform:rotate(180deg)}
/* body */
#xoChat .xc-body{position:relative;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-rows:1fr auto auto;animation:xcOpen .26s cubic-bezier(.2,.8,.2,1)}
#xoChat.xc-min .xc-body{display:none}
@keyframes xcOpen{from{opacity:0;transform:translateY(8px)}}
#xoChat.xc-min{width:max-content;max-width:calc(100vw - 24px)}
#xoChat.xc-min .xc-head{width:auto;padding-right:8px}
#xoChat.xc-min .xc-chev{margin-left:4px}
#xoChat .xc-list{height:190px;overflow-y:auto;overscroll-behavior:contain;padding:8px 10px 4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;-webkit-mask-image:linear-gradient(transparent,#000 14px);mask-image:linear-gradient(transparent,#000 14px)}
#xoChat .xc-list::-webkit-scrollbar{width:6px}#xoChat .xc-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
#xoChat .xc-m{padding:3px 4px;border-radius:8px;font:600 13px/1.38 Figtree,sans-serif;color:rgba(255,255,255,.92);word-wrap:break-word;overflow-wrap:anywhere;animation:xcIn .22s ease-out}
#xoChat .xc-m:hover{background:rgba(255,255,255,.05)}
#xoChat .xc-m time{font:800 10.5px Figtree;color:rgba(255,255,255,.42);margin-right:6px;font-variant-numeric:tabular-nums}
#xoChat .xc-m b{font:800 13px Figtree;color:#ffd34d;margin-right:6px}
#xoChat .xc-m.me b{color:#ff87a6}
#xoChat .xc-m.local{opacity:.72}
#xoChat .xc-m em{margin-left:6px;font:800 9.5px Figtree;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:0 4px}
#xoChat .xc-empty{padding:28px 6px;text-align:center;color:rgba(255,255,255,.5);font:700 12.5px/1.5 Figtree}
@keyframes xcIn{from{opacity:0;transform:translateY(4px)}}
#xoChat .xc-new{position:absolute;left:50%;top:150px;transform:translate(-50%,6px);opacity:0;pointer-events:none;background:#ff87a6;color:#1f1d2b;font:900 11px Rubik,sans-serif;padding:4px 10px;border-radius:99px;cursor:pointer;transition:.2s;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
#xoChat .xc-new.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#xoChat .xc-form{display:flex;gap:6px;padding:6px 8px 4px}
#xoChat .xc-form input{flex:1;min-width:0;height:34px;border-radius:11px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:#fff;font:600 13.5px Figtree,sans-serif;padding:0 11px;outline:none;transition:border-color .15s,background .15s}
#xoChat .xc-form input::placeholder{color:rgba(255,255,255,.42)}
#xoChat .xc-form input:focus{border-color:rgba(255,135,166,.75);background:rgba(255,255,255,.1)}
#xoChat .xc-form button{height:34px;padding:0 12px;border-radius:11px;background:#ff87a6!important;color:#1f1d2b!important;font:900 12px Rubik,sans-serif!important;letter-spacing:.04em}
#xoChat .xc-form button:hover{filter:brightness(1.08)}
#xoChat .xc-foot{display:flex;justify-content:space-between;gap:8px;padding:0 12px 7px;font:700 10.5px Figtree;color:rgba(255,255,255,.38)}
#xoChat .xc-foot .warn{color:#ffcf5a}
#xoChat .xc-note{position:absolute;left:10px;right:10px;bottom:72px;text-align:center;font:800 11.5px Figtree;color:#1f1d2b;background:#ffd34d;border-radius:9px;padding:4px 8px;opacity:0;transform:translateY(6px);transition:.2s;pointer-events:none}
#xoChat .xc-note.on{opacity:1;transform:none}
#xoChat.ping .xc-head img{animation:xcPing .6s ease-out}
@keyframes xcPing{40%{transform:scale(1.25) rotate(-8deg)}}
/* hide with the rest of the HUD */
#worldScr.cine #xoChat,body.xm-open #xoChat,#worldScr:has(#wDialog.on) #xoChat{opacity:0;pointer-events:none;visibility:hidden}
/* phones / touch: compact pill by default, wider panel when open, always above the hotbar (chat.js sets --xc-lift) */
@media (max-width:760px),(pointer:coarse){
  #xoChat{left:12px;--xc-w:min(360px,calc(100vw - 24px))}
  #xoChat .xc-head{padding:7px 9px}
  #xoChat .xc-head b{font-size:12px}
  #xoChat .xc-list{height:min(28vh,190px)}
  #xoChat .xc-foot span:last-child{display:none}
  #xoChat .xc-form input{font-size:16px} /* no iOS zoom on focus */
}
@media (max-width:420px){#xoChat.xc-min .xc-head b{display:none}}
@media (prefers-reduced-motion:reduce){#xoChat,#xoChat *{animation:none!important;transition:none!important}}