/* ══════════════════════════════════════════════════════════════════════════
   WorldMates — Modern chat visual layer for Wondertag.
   Loaded LAST (after dark.css) — same "thin overlay" approach as
   windows-messenger's wm-ultra.css: never touch layout-critical properties
   (display/flex/position) on structural containers, only add color, shadow,
   blur, radius, and motion. Applies to BOTH the full /messages page
   (.tag_msg_wrapper) and the floating chat widget (.chat-messages-wrapper).

   Lessons from earlier broken passes (do not repeat):
   - Never use `@media (prefers-color-scheme)` — that's the OS preference,
     not this site's own dark-mode cookie toggle. They can disagree and
     produce unreadable text. Incoming-bubble background/text color is never
     touched here — dark.css/style.css already pair them correctly for
     whichever theme is actually active. Only outgoing bubbles get an
     explicit hardcoded-safe color pair (white on the accent gradient).
   - The floating widget's header is `.online-toggle-hdr`, NOT `.online-toggle`
     (a typo that silently made an entire rule never match anything).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --wmc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wmc-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --wmc-glass-bg: rgb(255 255 255 / 6%);
  --wmc-glass-border: rgb(255 255 255 / 10%);
}

/* ── 1. Ambient animated background behind the conversation ─────────────── */

@keyframes wmc-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-3%, 2%) scale(1.08); }
}

.messagejoint.tag_msg_container,
.chat-tab-container {
  position: relative;
}
.messagejoint.tag_msg_container::before,
.chat-tab-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 15% 0%, color-mix(in srgb, var(--main) 11%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 45% at 100% 100%, color-mix(in srgb, var(--main) 8%, transparent), transparent 70%);
  animation: wmc-drift 26s ease-in-out infinite;
}
.tag_msg_main_body > *,
.chat-messages-wrapper { position: relative; z-index: 1; }

/* ── 2. Message bubbles — refined shape, layered shadow, entrance ───────── */

@keyframes wmc-bubble-in {
  0%   { opacity: 0; transform: translateY(12px) scale(.94); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.message-contnaier,
.chat-messages-wrapper .messages-wrapper {
  animation: wmc-bubble-in .32s var(--wmc-smooth) both;
}

.chat-messages-wrapper .incoming .message-text,
.chat-messages-wrapper .outgoing .message-text,
.tag_msg_wrapper .message-text {
  border-radius: 19px !important;
  padding: 10px 15px !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  letter-spacing: -.005em;
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
  transition: box-shadow .22s var(--wmc-smooth), transform .18s var(--wmc-spring);
  /* NOTE: no background/color for incoming — see file header. */
}

.tag_msg_wrapper.outgoing .message-text,
.chat-messages-wrapper .outgoing .message-text {
  background: linear-gradient(135deg, var(--main), color-mix(in srgb, var(--main) 68%, #000)) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--main) 40%, transparent), inset 0 1px 0 rgb(255 255 255 / 18%);
}

.message-contnaier:hover .message-text,
.chat-messages-wrapper .messages-wrapper:hover .message-text {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
}
.message-contnaier:hover .tag_msg_wrapper.outgoing .message-text,
.chat-messages-wrapper .messages-wrapper:hover .outgoing .message-text {
  box-shadow: 0 8px 26px color-mix(in srgb, var(--main) 48%, transparent), inset 0 1px 0 rgb(255 255 255 / 18%);
}

/* Left/right separation — belt-and-suspenders on top of the theme's own
   float/order rules (which depend on .valign giving the parent display:flex). */
.chat-messages-wrapper .messages-wrapper.messages-text { display: flex; }
.chat-messages-wrapper .message.incoming { margin-right: auto; text-align: left; }
.chat-messages-wrapper .message.outgoing { margin-left: auto; text-align: right; order: 2; }
.tag_msg_wrapper.incoming { margin-right: auto; }
.tag_msg_wrapper.outgoing { margin-left: auto; }

/* ── 3. Message action toolbar — IN NORMAL DOCUMENT FLOW, directly under the
   message text, always clickable (no hover-gated pointer-events, no
   absolute positioning). A previous hover-triggered floating-pill version
   was unreliable: moving the mouse toward it could cross out of the
   `:hover` trigger area first (the gap between stacked messages), flipping
   `pointer-events` back to `none` before the click landed — "hard to hover
   onto, keeps jumping". This version can't do that: it never moves and is
   never non-interactive. ─────────────────────────────────────────────── */

.wmc-actions {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s var(--wmc-smooth);
}
.outgoing .wmc-actions { align-items: flex-end; }

/* Hidden until you hover the message — but since the row lives in normal
   flow right under the text (not absolutely positioned above/beside it),
   revealing it never moves or resizes anything, so there's no gap to lose
   the hover through and nothing to "jump". :focus-within keeps it visible
   while the reaction picker is open even if the mouse drifts slightly. */
.message-contnaier:hover .wmc-actions,
.message-contnaier:focus-within .wmc-actions,
.chat-messages-wrapper .messages-wrapper:hover .wmc-actions,
.chat-messages-wrapper .messages-wrapper:focus-within .wmc-actions {
  opacity: 1;
  visibility: visible;
}

.wmc-actions-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgb(28 30 34 / 70%);
  opacity: .55;
  transition: opacity .15s var(--wmc-smooth), background .15s;
}
.wmc-actions-row:hover,
.wmc-actions:focus-within .wmc-actions-row {
  opacity: 1;
  background: rgb(28 30 34 / 85%);
}

.wmc-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #f2f2f2;
  cursor: pointer;
  transition: transform .15s var(--wmc-spring), background .13s;
}
.wmc-action-btn:hover {
  background: color-mix(in srgb, var(--main) 30%, transparent);
  transform: scale(1.14);
}
.wmc-action-btn:active { transform: scale(.9); }
.wmc-action-btn.wmc-action-danger:hover {
  background: rgb(220 60 60 / 35%);
  color: #ff8080;
}

/* Reaction picker: plain in-flow toggle (click the smiley), NOT a Bootstrap
   dropdown — a dropdown could get pushed/flipped to the opposite side by
   Bootstrap's own edge-of-viewport collision logic, which is likely what
   "reactions render on the wrong side" was. This just appears directly
   below the actions row, closed by default, toggled via a plain class. */
.wmc-react-menu {
  display: none;
  gap: 3px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgb(28 30 34 / 95%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 32%);
}
.wmc-react-menu.open { display: flex; }
.wmc-reaction-item {
  font-size: 18px;
  line-height: 1;
  padding: 3px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .18s var(--wmc-spring), background .13s;
}
.wmc-reaction-item:hover {
  transform: scale(1.3) translateY(-2px);
  background: color-mix(in srgb, var(--main) 25%, transparent);
}

/* Inline translation result — appears right under the original text. */
.wmc-translation {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgb(128 128 128 / 35%);
  font-size: 13px;
  font-style: italic;
  opacity: .85;
}

/* Diagnostic: shows the exact reason an action failed, directly in the page —
   temporary-by-nature (only appears on failure) but deliberately NOT hidden
   behind DevTools, so a failure can be reported back verbatim. */
.wmc-error {
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgb(220 60 60 / 15%);
  color: #ff8080;
  font-size: 12px;
  max-width: 320px;
  word-break: break-word;
}

/* ── 4. Composer — subtle glass pill, WITHOUT touching layout/flex/display
   of the structural wrapper (a full background/padding override there broke
   the composer entirely in an earlier pass — this version only styles leaf
   elements: the textarea itself and the buttons, never the containing row). */

.tag_msg_write_tarea {
  border-radius: 22px !important;
  transition: box-shadow .2s var(--wmc-smooth);
}
.tag_msg_write_tarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 22%, transparent);
}

.message-option-btn,
.tag_msg_write .send-button {
  transition: transform .18s var(--wmc-spring), color .14s, background .14s, box-shadow .2s;
}
.message-option-btn:hover { transform: scale(1.14); }
.message-option-btn:active { transform: scale(.9); }

.tag_msg_write .send-button {
  background: linear-gradient(135deg, var(--main), color-mix(in srgb, var(--main) 72%, #000)) !important;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--main) 38%, transparent);
}
.tag_msg_write .send-button:hover {
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--main) 58%, transparent);
}
.tag_msg_write .send-button:active { transform: scale(.92) rotate(-2deg); }

/* ── 5. Sidebar conversation list — glass items, refined hover ──────────── */

.messages-recipients-list,
.messages-group-list .notification-list {
  border-radius: 15px !important;
  margin: 2px 8px;
  transition: background .18s var(--wmc-smooth), transform .15s var(--wmc-spring);
}

.messages-recipients-list:hover,
.messages-group-list .notification-list:hover {
  background: var(--wmc-glass-bg) !important;
  transform: translateX(2px);
}

.messages-recipients-list.active,
.messages-group-list .notification-list.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--main) 18%, transparent), color-mix(in srgb, var(--main) 6%, transparent)) !important;
}

.messages-recipients-list:active,
.messages-group-list .notification-list:active { transform: scale(.985); }

/* ── 6. Online presence — pulsing dot ────────────────────────────────────── */

@keyframes wmc-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(76 175 80 / 55%); }
  50%       { box-shadow: 0 0 0 5px rgb(76 175 80 / 0%); }
}

.online_dot .dot,
.dot.green {
  animation: wmc-dot-pulse 2.4s ease-in-out infinite;
}

/* ── 7. Empty / loading states ───────────────────────────────────────────── */

.no-messages.empty_state {
  animation: wmc-bubble-in .45s var(--wmc-smooth) both;
}

.msg_progress .indeterminate {
  background: linear-gradient(90deg, transparent, var(--main), transparent) !important;
}

/* ── 8. Scrollbars — thin, unobtrusive ───────────────────────────────────── */

.messages-container.tag_scroll::-webkit-scrollbar,
.chat-messages-wrapper::-webkit-scrollbar,
.tag_msg_body_content.tag_scroll::-webkit-scrollbar {
  width: 5px;
}
.messages-container.tag_scroll::-webkit-scrollbar-thumb,
.chat-messages-wrapper::-webkit-scrollbar-thumb,
.tag_msg_body_content.tag_scroll::-webkit-scrollbar-thumb {
  background: rgb(128 128 128 / 35%);
  border-radius: 4px;
}

/* ── 9. /messages chat header + avatars ───────────────────────────────────── */

.msg_usr_info_top_list {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.tag_msg_toolbar .btn {
  transition: transform .14s var(--wmc-spring), background .13s;
}
.tag_msg_toolbar .btn:hover { transform: scale(1.1); }
.tag_msg_toolbar .btn:active { transform: scale(.9); }

#user-avatar-right img,
.notification-user-avatar img {
  transition: box-shadow .2s;
}
#user-avatar-right:hover img,
.notification-user-avatar:hover img {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 40%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   10. FLOATING WIDGET — dedicated facelift.
   ══════════════════════════════════════════════════════════════════════════ */

.chat-wrapper {
  border-radius: 18px 18px 0 0 !important;
  overflow: hidden;
  box-shadow: 0 -12px 40px rgb(0 0 0 / 30%), 0 0 0 1px var(--wmc-glass-border);
  animation: wmc-bubble-in .26s var(--wmc-smooth) both;
}

/* Header — fixed the .online-toggle -> .online-toggle-hdr class name bug
   from the previous pass, which meant NONE of this ever actually applied. */
.chat-wrapper .online-toggle-hdr,
.wow_chat_hdr_usr {
  background: linear-gradient(135deg, color-mix(in srgb, var(--main) 24%, transparent), transparent 80%) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.chat-wrapper .cht_hd_avtr {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--main) 55%, transparent);
  transition: box-shadow .2s;
}

.chat-wrapper .close-chat svg {
  transition: transform .15s var(--wmc-spring), opacity .13s;
  opacity: .75;
}
.chat-wrapper .close-chat svg:hover { opacity: 1; transform: scale(1.15); }

.chat-messages-wrapper {
  padding-top: 12px !important;
}

.chat-textarea {
  transition: box-shadow .2s;
}
.chat-textarea textarea {
  border-radius: 20px !important;
  transition: box-shadow .2s, background .2s;
}
.chat-textarea textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 22%, transparent);
}

.chat-textarea .chat-btns-w .chat_optns,
.chat-textarea button {
  transition: transform .16s var(--wmc-spring), background .13s;
}
.chat-textarea .chat-btns-w .chat_optns:hover,
.chat-textarea button:hover { transform: scale(1.14); }

/* Sidebar "Chats" launcher rail + online/offline user rows */
.tag_chat_side_btn {
  transition: transform .14s var(--wmc-spring), background .13s, box-shadow .2s;
}
.tag_chat_side_btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--main) 35%, transparent);
}
.tag_chat_side_btn:active { transform: scale(.92); }

.recipient-chat-user {
  border-radius: 13px !important;
  transition: background .16s var(--wmc-smooth), transform .14s var(--wmc-spring);
}
.recipient-chat-user:hover {
  background: var(--wmc-glass-bg) !important;
  transform: translateX(-3px);
}
.recipient-chat-user .user-info img {
  transition: box-shadow .2s;
}
.recipient-chat-user:hover .user-info img {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--main) 45%, transparent);
}

/* ── 11. Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .message-contnaier,
  .chat-messages-wrapper .messages-wrapper,
  .messagejoint.tag_msg_container::before,
  .chat-tab-container::before,
  .no-messages.empty_state,
  .online_dot .dot,
  .dot.green,
  .message-text,
  .message-option-btn,
  .tag_msg_write .send-button,
  .wmc-actions,
  .wmc-action-btn,
  .wmc-reaction-item,
  .tag_msg_toolbar .btn,
  .tag_chat_side_btn,
  .messages-recipients-list,
  .chat-wrapper,
  .recipient-chat-user {
    animation: none !important;
    transition: none !important;
  }
}