/* ═══════════════════════════════════════════════════════════════════════════
   messages-safety.css — Report a message / Block a person (js/messages-safety.js)      2026-10-07

   Drawn on the console's shared colour names (--n-*), which every look re-points (Dark, Light, Ember, Ember Light,
   Neo Light, Neo Dark), so one sheet serves them all; Ember adds its glass and Neo its raised and pressed parts at the
   end. The colour law holds: the report flag and Block are the only red; the one main key is orange.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the "…" key on someone else's message (beside the staff delete key when both show) */
.pm-msg-bubble { position: relative; }
.pm-msg-more {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; color: var(--n-mute, #8E95A5); opacity: 0; transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
.pm-msg-more svg { width: 16px; height: 16px; }
.pm-msg-more ~ .pm-msg-del { right: 34px; }
.pm-msg-bubble-row:hover .pm-msg-more, .pm-msg-more:focus-visible, .pm-msg-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .pm-msg-more { opacity: .7; } }
.pm-msg-more:hover { background: var(--n-hover, rgba(255,255,255,.08)); color: var(--n-ink, #fff); }
.pm-msg-more:focus-visible { outline: 2px solid rgba(255,138,76,.7); outline-offset: 1px; }

/* the menu */
.pms-menu {
  position: fixed; z-index: 10050; min-width: 232px; padding: 6px; border-radius: 16px;
  background: var(--n-raise, #28292D); color: var(--n-ink-2, #E6E7EA);
  border: 1px solid var(--n-line, rgba(255,255,255,.1));
  box-shadow: 0 22px 48px -18px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right; transition: opacity .14s ease, transform .16s cubic-bezier(.2,.8,.2,1);
  font-family: var(--n-font, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}
.pms-menu.is-in { opacity: 1; transform: none; }
.pms-menu__i {
  display: flex; align-items: center; gap: 11px; width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 11px;
  background: transparent; color: inherit; font: 500 14px/1 var(--n-font, inherit); text-align: left; cursor: pointer;
}
.pms-menu__i:hover, .pms-menu__i:focus-visible { background: var(--n-hover, rgba(255,255,255,.07)); outline: none; }
.pms-menu__i .pms-i { width: 17px; height: 17px; flex: none; color: var(--n-mute, #A0A5B1); }
.pms-menu__i--rep .pms-i { color: #E5484D; }

/* the sheet */
.pms-scrim {
  position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(10,11,13,.46); -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  opacity: 0; transition: opacity .18s ease;
}
.pms-scrim.is-in { opacity: 1; }
.pms-sheet {
  width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px 22px 20px; border-radius: 24px;
  background: var(--n-raise, #28292D); color: var(--n-ink-2, #E6E7EA); border: 1px solid var(--n-line, rgba(255,255,255,.1));
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.2);
  font-family: var(--n-font, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  transform: translateY(8px) scale(.985); transition: transform .22s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; align-items: stretch;
}
.pms-scrim.is-in .pms-sheet { transform: none; }
.pms-t { margin: 0 0 14px; font: 600 19px/1.25 var(--n-font, inherit); color: var(--n-ink, #fff); }
.pms-t--c { text-align: center; margin-bottom: 8px; }
.pms-p { margin: 0 0 18px; font: 400 14.5px/1.5 var(--n-font, inherit); color: var(--n-mute, #A0A5B1); text-align: center; }
.pms-quote { padding: 12px 14px; border-radius: 14px; background: var(--n-well, rgba(0,0,0,.25)); border: 1px solid var(--n-line-2, rgba(255,255,255,.06)); margin-bottom: 16px; }
.pms-quote__from { margin: 0 0 4px; font: 600 12.5px/1.3 var(--n-font, inherit); color: var(--n-mute, #A0A5B1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pms-quote__body { margin: 0; font: 400 14px/1.45 var(--n-font, inherit); color: var(--n-ink-2, #E6E7EA); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pms-ask { margin: 0 2px 8px; font: 600 13.5px/1.3 var(--n-font, inherit); color: var(--n-ink, #fff); }
.pms-reasons { display: grid; gap: 6px; }
.pms-reason {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px 0 8px; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--n-card, rgba(255,255,255,.04)); color: var(--n-ink-2, #E6E7EA); border: 1px solid var(--n-line-2, rgba(255,255,255,.07));
  font: 500 14.5px/1.2 var(--n-font, inherit); transition: background-color .14s ease, transform .14s ease;
}
.pms-reason:hover { background: var(--n-hover, rgba(255,255,255,.07)); }
.pms-reason:active { transform: scale(.985); }
.pms-reason:disabled { opacity: .55; cursor: default; transform: none; }
.pms-reason__ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--n-well, rgba(0,0,0,.25)); color: var(--n-mute, #A0A5B1); }
.pms-reason__ic .pms-i { width: 16px; height: 16px; }
.pms-note { margin: 14px 2px 0; font: 400 12.5px/1.5 var(--n-font, inherit); color: var(--n-faint, #8E95A5); }
.pms-err { margin: 12px 0 0; font: 500 13px/1.4 var(--n-font, inherit); color: #E5484D; text-align: center; }
.pms-mark { width: 50px; height: 50px; margin: 2px auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--n-well, rgba(0,0,0,.25)); color: var(--n-ink, #fff); }
.pms-mark .pms-i { width: 22px; height: 22px; }
.pms-mark--ok { border-radius: 50%; background: linear-gradient(180deg, #FF7A35, #F25A12); color: #fff; box-shadow: 0 10px 22px -10px rgba(255,106,31,.7); }
.pms-key {
  height: 46px; border-radius: 23px; border: 1px solid transparent; cursor: pointer; font: 600 15px/1 var(--n-font, inherit);
  background: var(--n-card, rgba(255,255,255,.06)); color: var(--n-ink, #fff); transition: transform .14s ease, filter .14s ease;
}
.pms-key:active { transform: scale(.98); }
.pms-key:disabled { opacity: .6; cursor: default; transform: none; }
.pms-key--go { background: linear-gradient(180deg, #FF6E29, #F4560E); color: #fff; box-shadow: 0 12px 24px -12px rgba(255,106,31,.7); }
.pms-key--stop { background: var(--n-card, rgba(255,255,255,.06)); color: #E5484D; border-color: var(--n-line, rgba(255,255,255,.1)); }
.pms-key--sm { height: 34px; padding: 0 14px; border-radius: 17px; font-size: 13px; border-color: var(--n-line, rgba(255,255,255,.1)); }
.pms-link { margin-top: 6px; height: 38px; border: 0; background: none; cursor: pointer; font: 500 14px/1 var(--n-font, inherit); color: var(--n-mute, #A0A5B1); }
.pms-link:hover { color: var(--n-ink, #fff); }

/* the bar under the chat's header */
.pms-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; font: 500 13px/1.35 var(--n-font, inherit);
  color: var(--n-mute, #A0A5B1); background: var(--n-well, rgba(0,0,0,.2)); border-bottom: 1px solid var(--n-line-2, rgba(255,255,255,.06));
}
.pms-bar__ic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.pms-bar__ic .pms-i { width: 15px; height: 15px; }
.pms-bar__t { flex: 1; min-width: 0; }
.pms-bar__u { border: 0; background: none; padding: 4px 6px; border-radius: 8px; cursor: pointer; font: 600 13px/1 var(--n-font, inherit); color: var(--n-ink, #fff); }
.pms-bar__u:hover { background: var(--n-hover, rgba(255,255,255,.07)); }

/* Blocked people (Account & security) */
.pms-blk__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--n-line-2, rgba(255,255,255,.06)); }
.pms-blk__row:first-child { border-top: 0; }
.pms-blk__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--n-well, rgba(0,0,0,.25)); color: var(--n-ink-2, #E6E7EA); font: 600 14px/1 var(--n-font, inherit); }
.pms-blk__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pms-blk__who b { font: 600 14.5px/1.3 var(--n-font, inherit); color: var(--n-ink, #fff); }
.pms-blk__who small { font: 400 12.5px/1.3 var(--n-font, inherit); color: var(--n-mute, #A0A5B1); }
.pms-blk__empty-t { margin: 4px 0 4px; font: 600 14.5px/1.35 var(--n-font, inherit); color: var(--n-ink, #fff); }
.pms-blk__empty { margin: 0; font: 400 13.5px/1.5 var(--n-font, inherit); color: var(--n-mute, #A0A5B1); }

@media (prefers-reduced-motion: reduce) { .pms-menu, .pms-scrim, .pms-sheet, .pms-reason, .pms-key { transition: none; } }

/* ── Ember: graphite glass ── */
html[data-shade="ember"]:not([data-neo]) :is(.pms-menu, .pms-sheet) {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%), #1C1D20;
  border-color: rgba(255,255,255,.09); border-top-color: rgba(255,255,255,.14);
}
html[data-shade="ember"][data-ember="light"]:not([data-neo]) :is(.pms-menu, .pms-sheet) {
  background: #FFFFFF; border-color: rgba(17,19,24,.08); box-shadow: 0 30px 60px -28px rgba(17,19,24,.35), 0 2px 8px rgba(17,19,24,.06);
}

/* ── Neo: a floating plate; reasons raised, the quote and sockets pressed in ── */
html[data-neo]:not(#pm-n1) :is(.pms-menu, .pms-sheet) {
  background: var(--neo-face), var(--neo-float); color: var(--neo-ink2);
  border-color: var(--neo-lit-t) var(--neo-lit-r) var(--neo-lit-b) var(--neo-lit-l); box-shadow: var(--neo-sh-float);
}
html[data-neo]:not(#pm-n1) .pms-scrim { background: var(--neo-scrim); }
html[data-neo]:not(#pm-n1) :is(.pms-quote, .pms-reason__ic, .pms-mark:not(.pms-mark--ok), .pms-blk__av) {
  background: var(--neo-well); border-color: transparent; box-shadow: var(--neo-recess-sm);
}
html[data-neo]:not(#pm-n1) :is(.pms-reason, .pms-key:not(.pms-key--go)) {
  background: var(--neo-face-pill); border-color: var(--neo-up-t) var(--neo-up-r) var(--neo-up-b) var(--neo-up-l); box-shadow: none;
}
html[data-neo]:not(#pm-n1) :is(.pms-reason, .pms-key:not(.pms-key--go)):active { background: var(--neo-groove); box-shadow: var(--neo-recess-sm); border-color: var(--neo-dn-t) var(--neo-dn-r) var(--neo-dn-b) var(--neo-dn-l); }
html[data-neo]:not(#pm-n1) .pms-key--go, html[data-neo]:not(#pm-n1) .pms-mark--ok { background: var(--neo-orange); box-shadow: var(--neo-orange-sh); }
html[data-neo]:not(#pm-n1) .pms-bar { background: var(--neo-groove); box-shadow: inset 0 2px 4px rgba(0,0,0,.06); border-bottom-color: var(--neo-cut-shade); }
html[data-neo="light"]:not(#pm-n1) :is(.pms-menu__i--rep .pms-i, .pms-key--stop, .pms-err) { color: #D6453D; }

/* Blocked people: the sheet's eyebrow and lead, and the quiet link under the conversation list */
.pms-eb { margin: 0 0 6px; font: 500 11px/1.2 var(--n-font, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--n-faint, #8E95A5); }
.pms-p--l { text-align: left; margin-bottom: 12px; }
.pms-blk { margin: 0 0 6px; }
.pms-inboxlink {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 10px 12px 14px; padding: 9px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--n-line-2, rgba(255,255,255,.07)); background: transparent; color: var(--n-mute, #A0A5B1); font: 500 13px/1 var(--n-font, inherit);
}
.pms-inboxlink:hover { background: var(--n-hover, rgba(255,255,255,.06)); color: var(--n-ink, #fff); }
html[data-neo]:not(#pm-n1) .pms-inboxlink { background: var(--neo-face-pill); border-color: var(--neo-up-t) var(--neo-up-r) var(--neo-up-b) var(--neo-up-l); }