/* Reply-to-message — desktop hover button + mobile swipe */
.message-bubble-container {
  position: relative;
}

.eldalil-msg-reply-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(235, 95, 125, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #eb5f7d;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  transition: opacity 0.12s, transform 0.12s, background 0.12s;
}

.message-bubble-container:hover .eldalil-msg-reply-btn,
.message-bubble-container:focus-within .eldalil-msg-reply-btn {
  opacity: 1;
  pointer-events: auto;
}

.eldalil-msg-reply-btn:hover {
  background: #eb5f7d;
  color: #fff;
  border-color: #eb5f7d;
}

.message-bubble-container:not(.justify-end) .eldalil-msg-reply-btn {
  right: 6px;
}

.message-bubble-container.justify-end .eldalil-msg-reply-btn {
  left: 6px;
}

body.dark .eldalil-msg-reply-btn {
  background: rgba(30, 32, 35, 0.96);
  border-color: rgba(235, 95, 125, 0.4);
  color: #fda4af;
}

body.dark .eldalil-msg-reply-btn:hover {
  background: #eb5f7d;
  color: #fff;
}

/* ── Mobile / PWA swipe-to-reply ── */
@media (pointer: coarse), (max-width: 768px) {
  .message-bubble-container {
    touch-action: pan-y;
    transition: transform 0.15s ease;
    will-change: transform;
  }

  .message-bubble-container.eldalil-swipe-active {
    transition: none;
    z-index: 5;
  }

  .eldalil-msg-reply-btn {
    display: none !important;
  }

  .eldalil-swipe-reply-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(235, 95, 125, 0.14);
    color: #eb5f7d;
    font-size: 18px;
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, transform 0.12s;
  }

  .eldalil-swipe-reply-hint.visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .eldalil-swipe-reply-hint.eldalil-swipe-reply-hint--ready {
    background: rgba(235, 95, 125, 0.32);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
  }

  .message-bubble-container.eldalil-swipe-reply-triggered {
    animation: eldalil-swipe-reply-flash 0.42s ease;
  }

  @keyframes eldalil-swipe-reply-flash {
    0% { filter: brightness(1); }
    35% { filter: brightness(1.08); }
    100% { filter: brightness(1); }
  }

  /* Incoming — swipe right, hint on the left */
  .message-bubble-container:not(.justify-end) .eldalil-swipe-reply-hint {
    left: 4px;
  }

  /* Outgoing — swipe left, hint on the right */
  .message-bubble-container.justify-end .eldalil-swipe-reply-hint {
    right: 4px;
  }

  body.dark .eldalil-swipe-reply-hint {
    background: rgba(235, 95, 125, 0.22);
    color: #fda4af;
  }
}

html.host-blushed .eldalil-msg-reply-btn {
  border-color: rgba(238, 61, 138, 0.35);
  color: #ee3d8a;
}

html.host-blushed .eldalil-msg-reply-btn:hover {
  background: #ee3d8a;
  border-color: #ee3d8a;
}

html.host-blushed .eldalil-swipe-reply-hint {
  background: rgba(238, 61, 138, 0.12);
  color: #ee3d8a;
}

html.host-blushed body.dark .eldalil-swipe-reply-hint {
  background: rgba(238, 61, 138, 0.22);
  color: #f9a8d4;
}