/* ── PARTICLES ── */
.particle{position:fixed;pointer-events:none;border-radius:50%;background:var(--char,var(--acc));animation:particleFly var(--dur,0.8s) ease-out forwards}
@keyframes particleFly{0%{transform:translate(0,0) scale(1);opacity:0.8}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}

/* ── TOUCH ── */
/* 44px minimum hit zones on coarse pointers (tablet + mobile) */
@media(pointer:coarse){
  .topbar-btn{width:44px;height:44px}
  #topbar-right{gap:4px}
  #send-btn,#react-btn{width:44px;height:44px}
  #strip-toggle{height:44px}
  .strip-item{height:52px}
  .strip-avatar{width:36px;height:36px}
  .input-action-btn{padding:8px 14px}
  .view-back,.rp-btn,.wc-send{width:44px;height:44px}
  .nd-close{width:44px;height:44px}
}

/* ── MOBILE ── */
/* Strip stays a left rail: icon-only 48px, expands to 200px as an overlay.
   Never auto-expands; swipe right opens, swipe left closes (strip.js). */
@media(max-width:600px){
  #strip{position:fixed;top:0;left:0;bottom:0;z-index:150}
  #strip.open{box-shadow:8px 0 32px rgba(0,0,0,0.55)}
  #main{margin-left:var(--strip-w)}
  .msg{max-width:85%}
  #msgs-inner{padding:20px 12px 8px}
  #topbar{padding:0 10px;gap:8px}
  #topbar-right{gap:2px}
  #input-area{padding:8px 10px 12px}
  #input-actions{flex-wrap:wrap}
  #notif-drawer{width:100%;border-left:none}
  #view-overlay.open{animation:viewInMobile 0.3s ease}
  .view-body{padding:16px 12px}
  #toast{bottom:96px;max-width:calc(100vw - 24px);white-space:normal;text-align:center}
  #world-presence{width:200px}
}
@keyframes viewInMobile{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}