/*
 * LMe Experience Motion + Performance v563
 * One final compositor-only animation layer. It adds richer motion on capable
 * devices and progressively removes ambient work on phones / low-power devices.
 */
:root {
  --lme-v563-fast: 110ms;
  --lme-v563-short: 160ms;
  --lme-v563-medium: 240ms;
  --lme-v563-long: 360ms;
  --lme-v563-emphasized: cubic-bezier(.2, .8, .2, 1);
  --lme-v563-spring: cubic-bezier(.18, .9, .24, 1.18);
  --lme-v563-fade: cubic-bezier(.22, 1, .36, 1);
  --lme-v563-glow: rgba(199, 167, 255, .20);
}

html.lme-experience-v563,
html.lme-experience-v563 body {
  -webkit-tap-highlight-color: transparent;
}

/* Core micro-interactions. No width/height/top/left animation. */
html.lme-experience-v563:not(.lme-motion-reduced-v563) :is(
  button,
  [role="button"],
  .primary-btn,
  .secondary-btn,
  .icon-circle,
  .icon-btn,
  .chat-item,
  .chat-list-item,
  .message-context-item,
  .profile-action,
  .settings-row,
  .tab-btn,
  .chip
) {
  transition-property: transform, opacity, background-color, border-color, color, box-shadow;
  transition-duration: var(--lme-v563-short);
  transition-timing-function: var(--lme-v563-emphasized);
  backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  html.lme-experience-v563.lme-performance-high-v563:not(.lme-motion-reduced-v563) :is(
    button:not(:disabled),
    [role="button"]:not([aria-disabled="true"]),
    .chat-item,
    .chat-list-item,
    .profile-action,
    .settings-row,
    .message-context-item
  ):hover {
    transform: translate3d(0, -1px, 0) scale(1.004);
  }
}

html.lme-experience-v563:not(.lme-motion-reduced-v563) .lme-pressing-v563 {
  transform: translate3d(0, 0, 0) scale(.972) !important;
  transition-duration: 65ms !important;
}

/* One delegated ripple node, created only for real buttons. */
html.lme-experience-v563 .lme-ripple-host-v563 {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}
html.lme-experience-v563 .lme-ripple-v563 {
  position: absolute;
  z-index: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(231, 216, 255, .24);
  transform: translate3d(0, 0, 0) scale(0);
  opacity: .85;
  animation: lmeRippleV563 520ms var(--lme-v563-fade) forwards;
  will-change: transform, opacity;
}
html.lme-experience-v563 .lme-ripple-host-v563 > :not(.lme-ripple-v563) {
  position: relative;
  z-index: 1;
}

/* Runtime entrance classes. */
html.lme-experience-v563:not(.lme-motion-reduced-v563) .lme-enter-v563 {
  animation-duration: var(--lme-enter-duration-v563, var(--lme-v563-medium));
  animation-delay: var(--lme-enter-delay-v563, 0ms);
  animation-timing-function: var(--lme-v563-fade);
  animation-fill-mode: both;
  will-change: transform, opacity;
}
html.lme-experience-v563 .lme-enter-v563[data-lme-motion-kind-v563="message"] {
  --lme-enter-duration-v563: 250ms;
  animation-name: lmeMessageEnterV563;
  transform-origin: center bottom;
}
html.lme-experience-v563 .lme-enter-v563[data-lme-motion-kind-v563="list"] {
  --lme-enter-duration-v563: 220ms;
  animation-name: lmeListEnterV563;
}
html.lme-experience-v563 .lme-enter-v563[data-lme-motion-kind-v563="media"] {
  --lme-enter-duration-v563: 300ms;
  animation-name: lmeMediaEnterV563;
  transform-origin: center bottom;
}
html.lme-experience-v563 .lme-enter-v563[data-lme-motion-kind-v563="surface"] {
  --lme-enter-duration-v563: 320ms;
  animation-name: lmeSurfaceEnterV563;
}
html.lme-experience-v563 .lme-enter-v563[data-lme-motion-kind-v563="menu"] {
  --lme-enter-duration-v563: 190ms;
  animation-name: lmeMenuEnterV563;
  transform-origin: top right;
}
html.lme-experience-v563 .lme-enter-v563[data-lme-motion-kind-v563="toast"] {
  --lme-enter-duration-v563: 300ms;
  animation-name: lmeToastEnterV563;
}

/* Extra live states. */
html.lme-experience-v563:not(.lme-motion-reduced-v563) :is(
  .typing-indicator,
  .recording-dot,
  .presence-dot,
  .online-dot,
  .current-chat-status-dot
) {
  animation: lmeStatusPulseV563 1700ms ease-in-out infinite;
}
html.lme-experience-v563:not(.lme-motion-reduced-v563) :is(
  .call-avatar-ring,
  .call-avatar-pulse,
  .call-visual-rings,
  .call-screen[data-phase="outgoing"] .call-avatar,
  .call-screen[data-phase="incoming"] .call-avatar
) {
  animation: lmeCallBreathV563 2200ms ease-in-out infinite;
}
html.lme-experience-v563:not(.lme-motion-reduced-v563) :is(
  .sending,
  .is-sending,
  [data-message-status="sending"]
) {
  animation: lmeSendingV563 1200ms ease-in-out infinite;
}
html.lme-experience-v563:not(.lme-motion-reduced-v563) .lme-action-pop-v563 {
  animation: lmeActionPopV563 360ms var(--lme-v563-spring) both;
}
html.lme-experience-v563:not(.lme-motion-reduced-v563) .lme-unread-pop-v563 {
  animation: lmeUnreadPopV563 420ms var(--lme-v563-spring) both;
}

/* Panels and backdrops get a consistent entrance even if legacy layers disagree. */
html.lme-experience-v563:not(.lme-motion-reduced-v563) :is(
  .backdrop:not(.hidden),
  .modal-backdrop:not(.hidden)
) {
  animation: lmeBackdropInV563 180ms ease-out both;
}
html.lme-experience-v563:not(.lme-motion-reduced-v563) :is(
  .profile-modal:not(.hidden) .profile-modal-card,
  .profile-action-confirm:not(.hidden) .profile-action-confirm-card,
  .contact-nickname-modal:not(.hidden) .contact-nickname-card,
  .attach-sheet:not(.hidden) .attach-sheet-card,
  .call-panel:not(.hidden),
  .call-screen:not(.hidden),
  .drawer:not(.hidden),
  .modal:not(.hidden) .modal-card
) {
  animation: lmeSurfaceEnterV563 320ms var(--lme-v563-fade) both;
}

/* Performance containment. Avoid message-row content-visibility to keep scroll
   anchoring exact; apply it to independent lists/cards instead. */
html.lme-experience-v563 :is(
  .chat-list-item,
  .chat-item,
  .conversation-item,
  .member-row,
  .community-member-row,
  .community-people-row,
  .profile-track-card,
  .group-card,
  .channel-card
) {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 82px;
}
html.lme-experience-v563 :is(
  .attachment-preview,
  .lme-video-card,
  .media-shell
) {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}

/* While scrolling, prioritize frames over decorative transitions. */
html.lme-scrolling-v563 :is(
  .chat-item,
  .chat-list-item,
  .message-row,
  [data-message-id],
  .attachment-preview,
  .profile-track-card
) {
  transition-duration: 0ms !important;
  animation-play-state: paused !important;
}

/* Hidden tabs must consume almost no ambient animation work. */
html.lme-backgrounded-v563 *,
html.lme-backgrounded-v563 *::before,
html.lme-backgrounded-v563 *::after {
  animation-play-state: paused !important;
}

/* Balanced phones keep entrances/press feedback, but remove ambient glow work. */
html.lme-performance-balanced-v563 :is(
  .call-avatar-ring,
  .call-avatar-pulse,
  .call-visual-rings,
  .lme-video-card.is-playing,
  .voice-message.is-playing,
  .audio-message.is-playing
) {
  box-shadow: none !important;
}

/* Low-power mode preserves clarity and touch feedback without continuous work. */
html.lme-performance-low-v563 :is(
  .typing-indicator,
  .recording-dot,
  .presence-dot,
  .online-dot,
  .current-chat-status-dot,
  .call-avatar-ring,
  .call-avatar-pulse,
  .call-visual-rings,
  .sending,
  .is-sending,
  [data-message-status="sending"]
) {
  animation: none !important;
}
html.lme-performance-low-v563 .lme-enter-v563 {
  animation-duration: 150ms !important;
  animation-delay: 0ms !important;
}
html.lme-performance-low-v563 :is(
  .screen-card,
  .profile-modal-card,
  .modal-card,
  .call-screen,
  .drawer,
  .message-context-menu,
  .reaction-picker
) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

@media (max-width: 920px), (pointer: coarse) {
  html.lme-experience-v563 .lme-ripple-v563 { display: none; }
  html.lme-experience-v563:not(.lme-motion-reduced-v563) .lme-enter-v563[data-lme-motion-kind-v563="message"] {
    --lme-enter-duration-v563: 190ms;
  }
  html.lme-experience-v563 :is(.profile-modal-card, .modal-card, .call-screen, .drawer) {
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.lme-experience-v563 *,
  html.lme-experience-v563 *::before,
  html.lme-experience-v563 *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@keyframes lmeRippleV563 {
  0% { opacity: .8; transform: translate3d(0, 0, 0) scale(0); }
  70% { opacity: .20; }
  100% { opacity: 0; transform: translate3d(0, 0, 0) scale(18); }
}
@keyframes lmeMessageEnterV563 {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.982); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes lmeListEnterV563 {
  from { opacity: 0; transform: translate3d(-7px, 5px, 0) scale(.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes lmeMediaEnterV563 {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes lmeSurfaceEnterV563 {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.975); }
  72% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes lmeMenuEnterV563 {
  from { opacity: 0; transform: translate3d(0, -5px, 0) scale(.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes lmeToastEnterV563 {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes lmeBackdropInV563 {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lmeStatusPulseV563 {
  0%, 100% { opacity: .68; transform: translateZ(0) scale(.94); }
  50% { opacity: 1; transform: translateZ(0) scale(1.08); }
}
@keyframes lmeCallBreathV563 {
  0%, 100% { opacity: .72; transform: translateZ(0) scale(.98); }
  50% { opacity: 1; transform: translateZ(0) scale(1.035); }
}
@keyframes lmeSendingV563 {
  0%, 100% { opacity: .64; transform: translateZ(0) scale(.992); }
  50% { opacity: 1; transform: translateZ(0) scale(1); }
}
@keyframes lmeActionPopV563 {
  0% { transform: translateZ(0) scale(.88); }
  70% { transform: translateZ(0) scale(1.06); }
  100% { transform: translateZ(0) scale(1); }
}
@keyframes lmeUnreadPopV563 {
  0% { opacity: .2; transform: translateZ(0) scale(.7); }
  70% { opacity: 1; transform: translateZ(0) scale(1.12); }
  100% { opacity: 1; transform: translateZ(0) scale(1); }
}