/* ============================================================
   message-menu.css — WhatsApp-stil' menyu soobscheniya.
   Overlay poverh zamylennogo ekrana: panel' bystryh reakcij NAD
   puzyr'kom, klon puzyrya na svoem meste (podsvechen), karta
   dejstvij POD nim (v duhe contact-info.css).
   Plus chipy reakcij pod puzyr'kami v lente.
   Palitra --aya-* s hex-folbekom, temnaya tema cherez body.dark-theme.
   ============================================================ */

/* ---------- Overlay + zamylennyj fon ---------- */
.msg-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  opacity: 0;
  transition: opacity .16s ease;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.msg-menu-overlay.show { opacity: 1; }

.msg-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 28, .32);
  -webkit-backdrop-filter: blur(0px) saturate(1.05);
  backdrop-filter: blur(0px) saturate(1.05);
  transition: backdrop-filter .18s ease, -webkit-backdrop-filter .18s ease;
}
.msg-menu-overlay.show .msg-menu-backdrop {
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
  backdrop-filter: blur(7px) saturate(1.05);
}
body.dark-theme .msg-menu-backdrop {
  background: rgba(0, 0, 0, .5);
}

.msg-menu-stack {
  position: absolute;
  inset: 0;
}

/* ---------- Klon puzyrya (na svoem meste, podsvechen) ---------- */
.msg-menu-clone-slot {
  pointer-events: none; /* tap po klonu zakryvaet (obrabotka na stack) */
}
.msg-menu-clone-slot .msg-menu-clone {
  margin: 0 !important;
  max-width: 100% !important;
  /* lyogkaya podsvetka vsego puzyrya */
  animation: msg-menu-pop .16s ease;
}
.msg-menu-clone-slot .message-content-mobile {
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22), 0 0 0 2px rgba(26, 107, 130, .25);
}
body.dark-theme .msg-menu-clone-slot .message-content-mobile {
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 0 0 2px rgba(120, 200, 220, .25);
}
@keyframes msg-menu-pop {
  from { transform: scale(.97); }
  to   { transform: scale(1); }
}

/* ---------- Panel' bystryh reakcij (pilyulya nad puzyr'kom) ---------- */
.msg-menu-reactions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  background: var(--panel, #fff);
  border-radius: 30px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .12);
  max-width: calc(100vw - 16px);
  animation: msg-menu-rise .18s ease;
}
body.dark-theme .msg-menu-reactions {
  background: var(--panel, #1c2128);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
.msg-react-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .12s ease;
}
.msg-react-btn:active {
  transform: scale(1.25);
  background: var(--aya-grey-bg, #eef0f2);
}
body.dark-theme .msg-react-btn:active { background: #252c34; }

@keyframes msg-menu-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Karta dejstvij (v duhe contact-info) ---------- */
.msg-menu-actions {
  width: min(280px, calc(100vw - 24px));
  background: var(--panel, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .26), 0 1px 4px rgba(0, 0, 0, .1);
  animation: msg-menu-rise .18s ease;
}
body.dark-theme .msg-menu-actions {
  background: var(--panel, #1c2128);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .6);
}

.msg-menu-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 13px 16px;
  cursor: pointer;
  color: var(--text, #1a1d21);
  font-size: 16px;
  position: relative;
  font-family: inherit;
}
body.dark-theme .msg-menu-row { color: var(--text, #e6edf3); }
.msg-menu-row:active { background: var(--aya-grey-bg, #eef0f2); }
body.dark-theme .msg-menu-row:active { background: #252c34; }

/* Razdelitel' mezhdu strokami (posle ikonki) */
.msg-menu-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border, #eef0f2);
}
body.dark-theme .msg-menu-row:not(:last-child)::after { background: #30363d; }

/* Ikonka sleva */
.msg-menu-row .ic {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--aya-grey2, #52606a);
}
body.dark-theme .msg-menu-row .ic { color: var(--text-secondary, #8b949e); }
.msg-menu-row span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Opasnye dejstviya (udalit'/zablokirovat') */
.msg-menu-row.danger { color: var(--aya-danger, #e8502e); }
.msg-menu-row.danger .ic { color: var(--aya-danger, #e8502e); }

/* ---------- Chipy reakcij pod puzyr'kami v lente ---------- */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
  max-width: 100%;
}
.message-mobile.own .msg-reactions { justify-content: flex-end; }
.message-mobile.other .msg-reactions { justify-content: flex-start; }

.msg-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  background: var(--aya-grey-bg, #eef0f2);
  border-radius: 14px;
  padding: 3px 9px 3px 7px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-secondary, #65676b);
  transition: background .12s ease;
}
body.dark-theme .msg-reaction-chip {
  background: rgba(255, 255, 255, .08);
  color: var(--text-secondary, #8b949e);
}
.msg-reaction-chip:active { background: var(--soft-hover, #e2e6ea); }
body.dark-theme .msg-reaction-chip:active { background: rgba(255, 255, 255, .14); }

.msg-reaction-chip.mine {
  background: rgba(26, 107, 130, .14);
  color: var(--aya-teal, #1a6b82);
}
body.dark-theme .msg-reaction-chip.mine {
  background: rgba(74, 163, 189, .22);
  color: var(--aya-teal, #7cc6da);
}
.msg-reaction-emoji { font-size: 14px; line-height: 1; }
.msg-reaction-count { font-weight: 600; font-size: 12px; }

/* ---------- Safe-area (notch / home-indicator) ---------- */
@supports (padding: env(safe-area-inset-bottom)) {
  /* paneli pozicioniruyutsya cherez JS s otstupami; rezerv na safe-area
     uzhe uchtyon klampom v position(). Zdes' tol'ko podstrahovka dlya
     ochen' uzkih ekranov. */
  .msg-menu-actions { max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); }
}