/* ================================================================
   Loki Talk · glass-bubbles.css · v glass-bub-1
   Telegram-like message meta on top of Element bubble layout.
   Loaded AFTER glass-overlay.css so we can layer on top.
   ================================================================ */

body.glass .mx_EventTile_bubble.mx_EventTile_self .mx_EventTile_line {
  position: relative;
}

body.glass .mx_EventTile_bubble.mx_EventTile_self .mx_EventTile_line::after {
  content: "\2713";
  position: absolute;
  right: 10px;
  bottom: 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--p-muted, rgba(255, 255, 255, 0.45));
  pointer-events: none;
  letter-spacing: -1px;
  font-feature-settings: "tnum";
  opacity: 0.85;
  transition: color 200ms var(--g-ease-out, ease-out);
}

body.glass .mx_EventTile_bubble.mx_EventTile_self:has(.mx_ReadReceiptGroup .mx_BaseAvatar) .mx_EventTile_line::after {
  content: "\2713\2713";
  color: var(--p-accent, var(--g-accent, #7c5cff));
  letter-spacing: -2px;
  text-shadow: 0 0 6px var(--p-accent-glow, rgba(124, 92, 255, 0.45));
  opacity: 1;
}

body.glass .mx_EventTile_bubble.mx_EventTile_self .mx_ReadReceiptGroup {
  display: none !important;
}

body.glass .mx_EventTile_bubble.mx_EventTile_self .mx_MessageTimestamp {
  margin-right: 18px;
}

body.glass .mx_EventTile .mx_EventTile_edited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--p-muted, rgba(255, 255, 255, 0.55));
  background: var(--g-surface-1, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--g-edge, rgba(255, 255, 255, 0.07));
  border-radius: 999px;
  letter-spacing: 0.2px;
  vertical-align: middle;
  cursor: help;
  transition: color 150ms var(--g-ease-out, ease-out),
              background 150ms var(--g-ease-out, ease-out);
}
body.glass .mx_EventTile .mx_EventTile_edited:hover {
  color: var(--p-text, #e6e6f0);
  background: var(--g-surface-2, rgba(255, 255, 255, 0.08));
}
body.glass .mx_EventTile .mx_EventTile_edited::before {
  content: "\270E";
  font-size: 10px;
  opacity: 0.75;
  margin-right: 2px;
}

body.glass .mx_EventTile.mx_EventTile_pinned .mx_EventTile_line,
body.glass .mx_EventTile_bubble.mx_EventTile_pinned .mx_EventTile_line {
  position: relative;
  background:
    linear-gradient(90deg,
      rgba(255, 196, 92, 0.10) 0%,
      transparent 60%),
    var(--g-bubble-bg, transparent) !important;
  border-left: 3px solid var(--g-pin-accent, #ffc45c) !important;
  padding-left: 14px !important;
}
body.glass .mx_EventTile.mx_EventTile_pinned .mx_EventTile_line::before,
body.glass .mx_EventTile_bubble.mx_EventTile_pinned .mx_EventTile_line::before {
  content: "\1F4CC";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 11px;
  opacity: 0.7;
  filter: drop-shadow(0 0 4px rgba(255, 196, 92, 0.5));
  pointer-events: none;
}

body.glass .mx_PinnedMessagesCard,
body.glass .mx_RoomView_pinnedMessageBanner {
  background: linear-gradient(180deg,
    rgba(255, 196, 92, 0.08),
    rgba(255, 196, 92, 0.02) 80%,
    transparent) !important;
  border-bottom: 1px solid rgba(255, 196, 92, 0.18) !important;
}

body.glass .mx_EventTile .mx_MessageTimestamp {
  color: var(--p-muted, rgba(255, 255, 255, 0.45)) !important;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  opacity: 0.85;
}

body.glass .mx_EventTile_bubble:not(.mx_EventTile_info) .mx_EventTile_line {
  transition: background 180ms var(--g-ease-out, ease-out),
              box-shadow 200ms var(--g-ease-out, ease-out),
              transform 120ms var(--g-ease-out, ease-out);
}
body.glass .mx_EventTile_bubble:not(.mx_EventTile_info):hover .mx_EventTile_line {
  background: var(--g-bubble-hover, rgba(255, 255, 255, 0.04)) !important;
}
body.glass .mx_EventTile_bubble:not(.mx_EventTile_info):active .mx_EventTile_line {
  transform: scale(0.997);
}

body.glass .mx_ReplyChain_show,
body.glass .mx_ReplyChain {
  border-left: 2px solid var(--p-accent, var(--g-accent, #7c5cff)) !important;
  padding-left: 8px !important;
  background: linear-gradient(90deg,
    rgba(124, 92, 255, 0.08),
    transparent 70%) !important;
  border-radius: 0 6px 6px 0;
  margin-bottom: 4px;
}
body.glass .mx_ReplyChain .mx_ReplyChain_link {
  color: var(--p-accent-2, var(--g-accent-2, #00d4ff)) !important;
  font-weight: 600;
  font-size: 12px;
}

body.glass .mx_EventTile_sending .mx_EventTile_line::after {
  content: "\1F553" !important;
  font-size: 10px;
  color: var(--p-muted, rgba(255, 255, 255, 0.4));
  text-shadow: none !important;
  opacity: 0.7;
}
body.glass .mx_EventTile_notSent .mx_EventTile_line::after {
  content: "\26A0" !important;
  color: #ff7676 !important;
  text-shadow: 0 0 6px rgba(255, 118, 118, 0.45) !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  body.glass .mx_EventTile_bubble:not(.mx_EventTile_info) .mx_EventTile_line,
  body.glass .mx_EventTile .mx_EventTile_edited {
    transition: none !important;
  }
}