/* ==========================================================================
   css/components/reactions.css
   Split from app.html (build 2026.10.08.9-beta), original lines 2406-2516.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- Reactions modal (who reacted) -- */
.rxm-overlay { position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; animation:overlay-in 0.15s ease; }
.rxm { width:520px; max-width:96vw; height:560px; max-height:88vh; background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:14px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.6); animation:modal-pop 0.22s var(--ease-out, ease); }
.rxm-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); font-size:17px; font-weight:700; color:var(--text-primary); flex-shrink:0; }
.rxm-close { background:none; border:none; color:var(--text-muted); font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
.rxm-close:hover { color:var(--text-primary); }
.rxm-body { flex:1; display:flex; min-height:0; }
.rxm-emojis { width:96px; flex-shrink:0; border-right:1px solid var(--border); overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; }
.rxm-emoji { display:flex; align-items:center; gap:8px; padding:8px 6px; border-radius:9px; background:transparent; border:none; cursor:pointer; color:var(--text-secondary); }
.rxm-emoji:hover { background:var(--bg-hover); }
.rxm-emoji.active { background:var(--bg-active); }
.rxm-emoji-char { font-size:20px; line-height:1; }
.rxm-emoji-count { font-size:14px; font-weight:700; color:var(--text-primary); }
.rxm-users { flex:1; overflow-y:auto; padding:10px 12px; }
.rxm-loading { color:var(--text-muted); font-size:13px; text-align:center; padding:30px 0; }
.rxm-user { display:flex; align-items:center; gap:12px; padding:8px 8px; border-radius:9px; }
.rxm-user:hover { background:var(--bg-hover); }
.rxm-user-av { width:40px; height:40px; flex-shrink:0; }
.rxm-user-av img, .rxm-user-av span { width:40px; height:40px; border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.rxm-user-name { font-size:14.5px; font-weight:600; color:var(--text-primary); }
.rxm-user-sub { font-size:12.5px; color:var(--text-muted); }

.msg-actions {
  position: absolute;
  right: 12px;
  top: -4px;
  display: flex;
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  pointer-events: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  gap: 1px;
  padding: 3px;
  /* Subtle, clean float - the old var(--shadow-md) was a heavy dark blob. */
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.25);
  z-index: 2;
  transition: opacity 0.12s var(--ease-out, ease), transform 0.12s var(--ease-out, ease);
}
/* `none`, not `translateY(0) scale(1)`. An element with ANY transform makes its own
   background-attachment:fixed anchor to itself instead of the viewport, so the wallpaper this
   toolbar repaints started from its own corner and did not line up with the menus beside it.
   `none` is the identity for a transition, so the reveal animates exactly as before. */
.message-group:hover .msg-actions { opacity: 1; transform: none; pointer-events: auto; }
/* Touch devices: :hover fires while SCROLLING (a passing touch), popping the action bar
   mid-scroll. Disable the hover trigger and show the bar only on a real long-press
   (JS adds .show-actions). Also suppress the iOS text-selection callout. */
@media (hover: none), (pointer: coarse) {
  .message-group:hover .msg-actions { opacity: 0; transform: translateY(-4px) scale(0.96); pointer-events: none; }
  .message-group.show-actions .msg-actions { opacity: 1; transform: none; pointer-events: auto; }
  .message-group { -webkit-touch-callout: none; }
}
.log-entry:hover .log-actions { display: flex; }
.log-countdown { display: block !important; }

.msg-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.msg-action-btn:hover { background: var(--bg-active); color: var(--text-primary); }

.msg-embed {
  margin-top: 8px;
  border-left: 4px solid var(--accent);
  background: var(--bg-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 16px;
  max-width: 440px;
}

.embed-title { font-size: 14px; font-weight: 600; color: var(--accent-bright); margin-bottom: 4px; }
.embed-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* User-authored embed/callout block: [embed]...[/embed] in parseContent. */
.msg-callout {
  border-left: 4px solid var(--accent);
  background: var(--bg-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 8px 14px;
  margin: 4px 0;
  max-width: 440px;
}
.msg-callout > :first-child { margin-top: 0; }
.msg-callout > :last-child { margin-bottom: 0; }

/* Optimistic/failed message states */
.message-group.sending { opacity: 0.6; }
.message-group.failed .msg-content { color: var(--red); }

.msg-fail-bar {
  font-size: 12px;
  color: var(--red);
  margin-top: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.msg-retry-btn {
  color: var(--accent-bright);
  cursor: pointer;
  text-decoration: underline;
  font-size: 12px;
}

/* Typing indicator */