/* AEOTEE Fluid & Alive — no screen roll, no 3D cylinder, no moving background.
   This wrapper is retained for existing chat layout only, not for animation. */
.app .chat > #aeoteeRollSurface.aeotee-roll-surface {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.app #messages {
  scroll-behavior: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
/* Desktop pointer moves never rotate, lift or resize message content.
   Existing swipe-to-reply remains the sole owner of bubble transforms. */
.app #messages > .bubble:not(.swiping) {
  transition: border-color 140ms ease;
}
.app #messages > .bubble:hover {
  box-shadow: 0 7px 20px rgba(0,0,0,.09) !important;
}
.app .chat-media-image.media-ready:hover {
  transform: translate3d(0,0,0) scale(1) !important;
}
/* Refined natural, tactile responses. No hover-triggered movement. */
.app .composer button:not(:disabled),
.app .chat-header .actions button:not(:disabled),
.connect-reaction-picker button,
.message-actions button,
.aeotee-peer-call-actions button,
.aeotee-call-actions-row button {
  touch-action: manipulation;
}
.app .composer button:not(:disabled):active,
.app .chat-header .actions button:not(:disabled):active,
.connect-reaction-picker button:active,
.message-actions button:active,
.aeotee-peer-call-actions button:active,
.aeotee-call-actions-row button:not(:disabled):active {
  transform: scale(.955);
}
/* Existing encrypted media placeholders handle loading. Final media arrives
   softly, without large zoom or blur that causes apparent jitter. */
.app .chat-media-image.media-ready {
  transition: opacity 230ms cubic-bezier(.22,1,.36,1),
              transform 260ms cubic-bezier(.22,1,.36,1),
              filter 260ms ease !important;
}
/* Dialog only: never animate RTC video/audio elements or alter streams. */
.aeotee-peer-call-dialog[open],
.aeotee-agora-call-dialog[open],
.aeotee-livekit-call-dialog[open] {
  animation: aeotee-fluid-call-enter 230ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes aeotee-fluid-call-enter {
  from {opacity: .84; transform: translateY(7px) scale(.987);}
  to {opacity: 1; transform: none;}
}
@media (prefers-reduced-motion: reduce) {
  .aeotee-peer-call-dialog[open],
  .aeotee-agora-call-dialog[open],
  .aeotee-livekit-call-dialog[open] {animation: none !important;}
}
html.premium-motion-off .aeotee-peer-call-dialog[open],
html.premium-motion-off .aeotee-agora-call-dialog[open],
html.premium-motion-off .aeotee-livekit-call-dialog[open] {animation: none !important;}

/* Swipe action cue: visual only, no content layout shift or scroll modification. */
.app #messages > .bubble.swiping {transition:none!important;}
.app #messages > .bubble.swiping::after {
  content:attr(data-swipe-hint);position:absolute;top:50%;right:8px;left:auto;
  z-index:3;border-radius:999px;min-width:42px;box-sizing:border-box;
  padding:5px 7px;text-align:center;font:700 10px/1.2 system-ui,sans-serif;
  pointer-events:none;color:#fff5ff;background:rgba(39,28,48,.95);
  border:1px solid rgba(220,170,224,.45);opacity:.52;
  transform:translate3d(0,-50%,0) scale(.85);
  transition:opacity 120ms ease,transform 120ms ease;
}
.app #messages > .bubble.swiping[data-swipe-direction="right"]::after{left:8px;right:auto;}
.app #messages > .bubble.swiping.swipe-ready::after{
 opacity:1;transform:translate3d(0,-50%,0) scale(1);background:rgba(91,54,109,.98);
}
@media(prefers-reduced-motion:reduce){.app #messages > .bubble.swiping::after{transition:none!important;}}
html.premium-motion-off .app #messages > .bubble.swiping::after{transition:none!important;}
@media(hover:hover) and (pointer:fine){
  .app.premium-ready #userList .contact:hover{transform:none!important;}
  .app .composer button:hover:not(:disabled){transform:none!important;}
  .app .chat-header .actions .mocha-call-launch:hover{transform:none!important;}
  .connect-reaction-picker button:hover{transform:none!important;}
}

/* Fluid UI V3 — consistent press/release and no hover-driven geometry shifts. */
:root{--aeotee-ui-ease:cubic-bezier(.22,1,.36,1)}
.app #messages>.bubble:not(.swiping){transition:border-color 140ms ease!important}
.app #messages>.bubble:hover{box-shadow:none!important}
.app.premium-ready #userList .contact{transition:background-color 180ms ease,border-color 180ms ease!important}
.app.premium-ready #userList .contact:hover,
.app.premium-ready #userList .contact.active,
.app.premium-ready #userList .contact[aria-current="true"]{transform:none!important}
.app.premium-ready #userList .contact:active{opacity:.92}
:is(.app .sidebar,.app .chat-header,.app .composer,.app .premium-mobile-nav,#mochaSettings,
.mocha-panel,.connect-gesture-menu,#aeoteeUpdateNotice,#aeoteeLinkDialog,
#aeoteeSecurityDialog,.aeotee-peer-call-actions,.aeotee-call-actions-row) button:not(:disabled){
 transition-property:transform,background-color,border-color,color,opacity!important;
 transition-duration:155ms,185ms,185ms,185ms,120ms!important;
 transition-timing-function:var(--aeotee-ui-ease)!important
}
:is(.app .sidebar,.app .chat-header,.app .composer,.app .premium-mobile-nav,#mochaSettings,
.mocha-panel,.connect-gesture-menu,#aeoteeUpdateNotice,#aeoteeLinkDialog,
#aeoteeSecurityDialog,.aeotee-peer-call-actions,.aeotee-call-actions-row) button:not(:disabled):active{
 transform:scale(.965)!important
}
@media(hover:hover) and (pointer:fine){
 :is(.app .sidebar,.app .chat-header,.app .composer,.app .premium-mobile-nav,#mochaSettings,
 .mocha-panel,.connect-gesture-menu) button:not(:active):hover{transform:none!important}
}
.aeotee-emoji-picker:not([hidden]){animation:aeotee-ui-overlay-in 175ms var(--aeotee-ui-ease) both}
#aeoteeUpdateNotice:not([hidden]){animation:aeotee-ui-overlay-in 215ms var(--aeotee-ui-ease) both}
@keyframes aeotee-ui-overlay-in{
 from{opacity:.7;transform:translate3d(0,6px,0) scale(.992)}
 to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
/* Crossfade encrypted media previews without GPU-expensive blur. */
.app .chat-media-image,.app .chat-media-image.media-ready{
 filter:none!important;
 transition:opacity 215ms var(--aeotee-ui-ease),transform 230ms var(--aeotee-ui-ease)!important
}
@media(max-width:700px){.mocha-panel::backdrop{backdrop-filter:none!important}}
@media(prefers-reduced-motion:reduce){
 .aeotee-emoji-picker:not([hidden]),#aeoteeUpdateNotice:not([hidden]){animation:none!important}
 :is(.app .sidebar,.app .chat-header,.app .composer,.app .premium-mobile-nav,
 .mocha-panel,.connect-gesture-menu,#mochaSettings,#aeoteeUpdateNotice,
 #aeoteeLinkDialog,#aeoteeSecurityDialog) button{transition:none!important;transform:none!important}
}
html.premium-motion-off .aeotee-emoji-picker:not([hidden]),
html.premium-motion-off #aeoteeUpdateNotice:not([hidden]){animation:none!important}
html.premium-motion-off :is(.app .sidebar,.app .chat-header,.app .composer,.app .premium-mobile-nav,
.mocha-panel,.connect-gesture-menu,#mochaSettings,#aeoteeUpdateNotice,#aeoteeLinkDialog,
#aeoteeSecurityDialog) button{transition:none!important;transform:none!important}

/* Premium motion v4: no scroll transforms or live repaint loops. */
:root{--aeotee-fluid-v4-ease:cubic-bezier(.2,.84,.22,1)}
.app #userList .contact,.app.premium-ready #userList .contact{
 transition:background-color 195ms ease,border-color 195ms ease!important
}
.app #userList .contact.active,.app #userList .contact[aria-current="true"]{transform:none!important}
.app #messages{scroll-behavior:auto!important}
.app #messages>.bubble:not(.swiping){transition:border-color 140ms ease!important}
.app #messages>.bubble:hover{box-shadow:none!important}
.app .composer #messageInput:not(:disabled):focus-visible{
 border-color:rgba(205,157,233,.65);
 transition:border-color 170ms ease,background-color 170ms ease!important
}
.app .composer .send:not(:disabled):active{transform:scale(.94)!important}
.connect-gesture-menu,.connect-reaction-picker,.mocha-panel[open]{
 animation:aeotee-v4-menu-enter 190ms var(--aeotee-fluid-v4-ease) both!important
}
.mocha-panel[open]{animation-duration:230ms!important}
@keyframes aeotee-v4-menu-enter{
 from{opacity:.65;transform:translate3d(0,7px,0) scale(.987)}
 to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.aeotee-emoji-picker:not([hidden]),#aeoteeUpdateNotice:not([hidden]){
 animation:aeotee-v4-menu-enter 205ms var(--aeotee-fluid-v4-ease) both
}
@media(prefers-reduced-motion:reduce){
 .connect-gesture-menu,.connect-reaction-picker,.mocha-panel[open],
 .aeotee-emoji-picker:not([hidden]),#aeoteeUpdateNotice:not([hidden]){animation:none!important}
}
html.premium-motion-off .connect-gesture-menu,
html.premium-motion-off .connect-reaction-picker,html.premium-motion-off .mocha-panel[open],
html.premium-motion-off .aeotee-emoji-picker:not([hidden]),
html.premium-motion-off #aeoteeUpdateNotice:not([hidden]){animation:none!important}


/* V5 Signature Motion — short premium action effects; zero scroll-linked motion.
   Effects are not permanent, do not alter message geometry, and respect motion-off. */
.app #messages {scroll-behavior:auto!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;}
.app #messages > .bubble{isolation:isolate;}
.app #messages > .bubble.aeotee-message-arriving::before{
 content:'';position:absolute;inset:-2px;border-radius:inherit;z-index:1;
 border:1px solid rgba(212,171,255,.62);pointer-events:none;
 animation:aeotee-message-aura 430ms cubic-bezier(.18,.83,.22,1) both;
}
.app #messages > .bubble.outgoing.aeotee-message-arriving::before{
 border-color:rgba(225,204,255,.74);
}
@keyframes aeotee-message-aura{
 0%{opacity:0;box-shadow:0 0 0 0 rgba(174,114,245,.28)}
 36%{opacity:1;box-shadow:0 0 0 3px rgba(174,114,245,.17)}
 100%{opacity:0;box-shadow:0 0 0 7px rgba(174,114,245,0)}
}
.app .composer #sendBtn{position:relative;isolation:isolate;overflow:visible;}
.app .composer #sendBtn.aeotee-send-launch::after{
 content:'➤';position:absolute;inset:0;display:grid;place-items:center;
 font-size:16px;color:#f4e5ff;pointer-events:none;
 animation:aeotee-send-flight 385ms cubic-bezier(.18,.82,.25,1) both;
}
@keyframes aeotee-send-flight{
 0%{opacity:0;transform:translate3d(-5px,4px,0) scale(.65)}
 30%{opacity:1;transform:translate3d(0,0,0) scale(1.07)}
 100%{opacity:0;transform:translate3d(15px,-13px,0) scale(.7)}
}
.app .composer #sendBtn.aeotee-send-confirmed::after{
 content:'✓';position:absolute;top:-8px;right:-7px;width:20px;height:20px;
 border-radius:50%;display:grid;place-items:center;background:#6c398b;
 border:1px solid rgba(234,208,255,.8);color:#fff;font:700 12px system-ui;
 pointer-events:none;animation:aeotee-send-check 400ms cubic-bezier(.16,.86,.24,1) both;
}
@keyframes aeotee-send-check{
 0%{opacity:0;transform:scale(.4)}
 40%{opacity:1;transform:scale(1.18)}
 75%{opacity:1;transform:scale(1)}
 100%{opacity:0;transform:scale(.9)}
}
.message-reactions .reaction-pill{
 position:relative;transition:background-color 155ms ease,border-color 155ms ease!important;
}
.message-reactions .reaction-pill:hover{transform:none!important;}
.message-reactions .reaction-pill.aeotee-reaction-spark::after{
 content:'✦';position:absolute;top:-12px;right:-6px;color:#ecd0ff;
 pointer-events:none;text-shadow:0 0 5px rgba(172,107,238,.5);
 animation:aeotee-reaction-sparkle 370ms ease-out both;
}
@keyframes aeotee-reaction-sparkle{
 0%{opacity:0;transform:translate3d(0,5px,0) scale(.65)}
 42%{opacity:1;transform:translate3d(3px,-4px,0) scale(1)}
 100%{opacity:0;transform:translate3d(5px,-10px,0) scale(.6)}
}
.app #messages > .bubble.swiping.swipe-ready{
 outline:1px solid rgba(218,161,248,.62);
 outline-offset:1px;
}
.app #messages > .bubble.swiping.swipe-ready::after{
 border-color:rgba(236,200,255,.82);
 box-shadow:0 0 0 2px rgba(152,91,190,.17);
}
.premium-mobile-nav .premium-nav-item{position:relative;}
.premium-mobile-nav .premium-nav-item[aria-current="page"]::after{
 content:'';position:absolute;bottom:3px;left:38%;right:38%;height:2px;
 border-radius:999px;background:#d7a8fa;pointer-events:none;
 animation:aeotee-nav-underline 190ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes aeotee-nav-underline{from{opacity:.4;transform:scaleX(.3)}to{opacity:1;transform:scaleX(1)}}
.aeotee-media-lightbox{
 padding:48px 18px 18px;border:1px solid rgba(217,170,255,.35);
 border-radius:20px;background:rgba(17,13,25,.98);color:#fff;
 width:min(96vw,1080px);max-height:95dvh;max-width:96vw;
 box-sizing:border-box;text-align:center;overflow:auto;
}
.aeotee-media-lightbox::backdrop{background:rgba(5,5,12,.86);}
.aeotee-media-lightbox img{
 display:block;margin:auto;max-width:100%;width:auto;height:auto;
 max-height:calc(91dvh - 90px);object-fit:contain;border-radius:12px;
}
.aeotee-media-lightbox .aeotee-media-close{
 position:absolute;top:8px;right:9px;width:34px;height:34px;
 border:1px solid rgba(255,255,255,.3);border-radius:50%;
 background:rgba(110,75,133,.55);color:#fff;font:24px/1 system-ui;
 cursor:pointer;touch-action:manipulation;
}
.app .attachment-preview > img.chat-media-image{cursor:zoom-in;}
@media(prefers-reduced-motion:reduce){
 .app #messages > .bubble.aeotee-message-arriving::before,
 .app .composer #sendBtn.aeotee-send-launch::after,
 .app .composer #sendBtn.aeotee-send-confirmed::after,
 .message-reactions .reaction-pill.aeotee-reaction-spark::after,
 .premium-mobile-nav .premium-nav-item[aria-current="page"]::after{animation:none!important;display:none!important;}
}
html.premium-motion-off .app #messages > .bubble.aeotee-message-arriving::before,
html.premium-motion-off .app .composer #sendBtn.aeotee-send-launch::after,
html.premium-motion-off .app .composer #sendBtn.aeotee-send-confirmed::after,
html.premium-motion-off .message-reactions .reaction-pill.aeotee-reaction-spark::after,
html.premium-motion-off .premium-mobile-nav .premium-nav-item[aria-current="page"]::after{animation:none!important;display:none!important;}

/* V6: a brighter, premium ring animated with transform/opacity only.
   Animated shadow blur caused repaints on midrange mobile GPUs. */
.app #messages>.bubble.aeotee-message-arriving::before {
  inset:-3px;
  border-width:2px;
  border-color:rgba(224,169,255,.94);
  box-shadow:none!important;
  z-index:1;
  animation:aeotee-message-aura 510ms cubic-bezier(.16,.84,.26,1) both;
}
.app #messages>.bubble.outgoing.aeotee-message-arriving::before{
  border-color:rgba(255,193,227,.95);
}
@keyframes aeotee-message-aura {
  0%{opacity:0;transform:scale(.93)}
  38%{opacity:1;transform:scale(1.025)}
  100%{opacity:0;transform:scale(1.075)}
}
.app #messages>.bubble.aeotee-message-arriving{backface-visibility:hidden}
.app .composer #sendBtn.aeotee-send-launch{color:transparent!important}
.app .composer #sendBtn.aeotee-send-launch::after{color:#fff3ff!important}
/* Scroll-time backdrop-blur across the entire mobile bar was expensive.
   Replace it with one stable, opaque material surface. */
@media(max-width:700px){
 .app.premium-ready .premium-mobile-nav{
   backdrop-filter:none!important;
   -webkit-backdrop-filter:none!important;
   background:#221a27!important;
   border-top-color:rgba(174,127,200,.37)!important;
 }
}