.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;max-width:calc(100% - 32px);background:#1d2a36;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;z-index:70}
.modal-header{padding:18px 20px;text-align:center;background:#243242;position:relative}
.modal-close{position:absolute;right:12px;top:10px;background:none;border:none;color:#c9d7e4;font-size:24px;cursor:pointer}
.modal-body{padding:16px 18px;max-height:60vh;overflow:auto}
.ctx-menu{
  position:fixed;z-index:130;min-width:220px;max-width:min(320px, calc(100vw - 16px));
  max-height:min(70vh, 500px);overflow:auto;
  background:#1c2935;border:1px solid rgba(255,255,255,.06);
  border-radius:14px;box-shadow:var(--shadow);padding:6px;
}
.ctx-menu .mi{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;cursor:pointer}
.ctx-menu .mi:hover{background:#243747}
.ctx-menu .mi.danger{color:#ffb7b7}
.ctx-menu .reacts{display:flex;flex-wrap:nowrap;gap:6px;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.ctx-menu .reacts span{cursor:pointer;padding:4px;border-radius:8px;flex:0 0 auto}
.ctx-menu .more-reacts{color:var(--accent);display:grid;place-items:center;width:28px}
.ctx-menu .reacts-expanded{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:6px;
  padding:6px 8px;max-height:220px;overflow:auto;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ctx-menu .reacts-expanded span{cursor:pointer;padding:4px;border-radius:8px;display:grid;place-items:center}
.ctx-menu .reacts-expanded span img.r{width:22px;height:22px}
.ctx-menu{max-height:min(70vh,520px);overflow:auto}

.emoji-picker{
  position:absolute;
  left:8px;right:8px;bottom:calc(100% + 6px);
  height:300px;
  background:#1c2935;border:1px solid rgba(255,255,255,.06);
  border-radius:16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;z-index:40;
}
/* никаких max-width, никаких media-query — одинаково на desktop и mobile */
.picker-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.05)}
.picker-tab{flex:1;text-align:center;padding:10px;color:var(--muted)}
.picker-tab.active{color:#79b8ff;font-weight:600}
.emoji-grid{padding:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(36px,1fr));gap:8px;overflow:auto}
.emoji-grid span{display:grid;place-items:center;height:40px;border-radius:8px;cursor:pointer}
.emoji-grid span:hover{background:#243747}
.emoji-grid span img{width:28px;height:28px}

.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:110;transition:background .2s;pointer-events:none}
.sheet-backdrop.open{background:rgba(0,0,0,.45);pointer-events:auto}
.bottom-sheet{
  position:fixed;left:0;right:0;bottom:0;
  max-height:92vh;max-height:92dvh;
  overflow:auto;background:#1c2935;
  border-top-left-radius:18px;border-top-right-radius:18px;
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
  z-index:120;
  transform:translateY(100%);transition:transform .22s;
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-sheet.open{transform:translateY(0)}
.sheet-handle{width:42px;height:5px;border-radius:999px;background:#52657a;margin:8px auto;cursor:grab}
.modal-backdrop{z-index:115}
.modal{z-index:116}
.reacts-wrap{position:relative}
.reacts-expanded-overlay{
  position:fixed;z-index:140;background:#1c2935;
  border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:8px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:6px;
  max-height:min(260px, 40vh);overflow:auto;
}
.reacts-expanded-overlay span{cursor:pointer;padding:4px;border-radius:8px;display:grid;place-items:center}
.reacts-expanded-overlay span img.r{width:22px;height:22px}