/* v5: connected surfaces and a shared motion rhythm. */
body.motion-ready{--motion-spring:cubic-bezier(.16,1,.3,1)}
/* FlyingButton's jets/smoke only exist during an eligible message's flight. */
.message-flight-source{opacity:0!important;pointer-events:none!important}
.message-flight-stage{position:fixed;z-index:8000;pointer-events:none;overflow:hidden;isolation:isolate;contain:layout paint}
.message-flight-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.message-flight-craft{position:absolute;left:0;top:0;z-index:1;transform-origin:50% 50%;will-change:transform;pointer-events:none}
.message-flight-visual{position:relative!important;pointer-events:none!important;transition:none!important}
.message-flight-visual:not(.jeb-rainbow){animation:none!important}
.message-flight-craft::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 -9px 18px #ea6f0840;opacity:clamp(0,var(--fly-thrust,0),1)}
.message-flight-jet{display:none;position:absolute;top:calc(100% - 2px);width:9px;height:34px;border-radius:25% 25% 65% 65%;transform:translateX(-50%);transform-origin:50% 0;background:linear-gradient(#fff9c3,#ea6f08 45%,transparent);filter:drop-shadow(0 0 8px #ea6f08);opacity:clamp(0,var(--fly-thrust,0),1);animation:messageJet .1s linear infinite alternate}
[data-flight-fallback] .message-flight-jet{display:block}
@keyframes messageJet{from{scale:.9 .85}to{scale:1.1 1.1}}
/* Rotate the viewport independently of the app's existing transform springs. */
html{width:100%;height:100%;overflow:clip;rotate:none;transform-origin:50% 50%;transition:rotate .8s cubic-bezier(.22,1,.36,1)}
body.motion-ready{width:100%;overflow:clip}
html.australian-mode{rotate:180deg}
/* Native dialogs live in the top layer, outside ancestor transforms. */
html.australian-mode dialog:modal{rotate:180deg}
.motion-ready .view.active,.motion-ready .modal,.motion-ready .groupCard,
.motion-ready .contactCard,.motion-ready .tabContent,.motion-ready .onboardingStep.active,
.motion-ready #profilePopup,.motion-ready #replyBar,.motion-ready #imgPreviewBar,
.motion-ready #chatSearchBar,.motion-ready #toast,
.motion-ready #imgMenu,.motion-ready #reactionPicker,
.motion-ready #chatWindow>.system,.motion-ready .msg:not(.jeb-rainbow){animation:none}
.motion-ready .tabContent{transition:none;will-change:auto}
.motion-ready #groupsView{overflow-x:hidden}
.motion-ready #groupsList,.motion-ready #contactsList,.motion-ready #chatWindow,.motion-ready .s2-content{overflow-x:hidden}
.motion-ready .motion-overflow-guard{overflow-y:hidden!important}
.motion-ready .overlay-modal{transition:none}
.motion-ready .overlay-modal[inert]{pointer-events:auto}
.motion-ready #app{border-radius:26px;border-top-color:#ffffff30;animation:none}
.motion-ready #app:has(#chatView.active){height:calc(var(--vh,1vh)*100 - 24px)}
.motion-ready :is(button,.button-link){transition:transform .38s var(--motion-spring),background .2s,border-color .2s,color .2s,box-shadow .3s}
.motion-ready :is(button,.button-link):active{transform:scale(.94,.91)!important}
.motion-ready :is(button,.button-link):disabled:active{transform:none!important}
.motion-ready .replyBtn:active{transform:translateY(-50%) scale(.94)!important}
.motion-ready .groupCard,.motion-ready .contactCard{
  border-radius:18px;padding:20px;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10);
  transition:transform .45s var(--motion-spring),background .22s,border-color .22s,box-shadow .3s;
}
.motion-ready .groupCard:hover,.motion-ready .contactCard:hover{
  transform:translateY(-3px) scale(1.005);background:rgba(255,255,255,.075);
  border-color:var(--border-accent);box-shadow:0 12px 30px #0002;
}
.motion-ready .groupCard:active,.motion-ready .contactCard:active{transform:scale(.985)!important}
.motion-ready .groupTitle{font-size:17px;letter-spacing:-.025em}
.motion-ready .groupMeta{margin-top:3px}
.motion-ready .groupPreview{margin-top:9px;color:var(--text-muted)}
.motion-ready .groupCard .ghost{border-radius:11px;padding:10px 20px;color:var(--accent);background:var(--accent-soft);border-color:var(--border-accent)}
/* One moving surface rather than two buttons repainting on a tab press. */
.motion-tabs{position:relative;isolation:isolate;overflow:hidden}
.motion-tab-indicator{position:absolute;z-index:0;pointer-events:none;border-radius:9px;background:var(--accent-soft);border:1px solid var(--border-accent);transform-origin:0 50%}
.motion-ready .motion-tabs>.tabbtn{position:relative;z-index:1;white-space:nowrap}
.motion-ready .motion-tabs>.tabbtn.active{background:transparent!important;box-shadow:none!important;color:var(--accent)!important}
.motion-ready #contactsList:empty::after{content:'No contacts yet';display:block;padding:30px 4px;color:var(--text-muted);font-size:14px}
/* Put the latest row in view immediately; its spring supplies the movement. */
.motion-ready #chatWindow{border-radius:20px;padding:18px;background:rgba(3,5,12,.27);scroll-behavior:auto}
.motion-ready .msg{box-shadow:0 2px 8px #0001;line-height:1.55}
.motion-ready .msg:hover{transform:none}
html:not([data-theme]) .motion-ready .msg.me{
  background:linear-gradient(125deg,#ffd43b,#ffb42b);color:#281e09;
  border-color:#ffdc6199!important;box-shadow:0 4px 15px #edac1420!important;
}
html:not([data-theme]) .motion-ready .msg.me .msgTime{color:#4d380c}
.motion-ready .sendBar{
  border-radius:21px!important;padding:7px!important;background:rgba(23,24,32,.95)!important;
  border-color:#ffffff18!important;box-shadow:0 4px 20px #0002,inset 0 1px 0 #ffffff05;
  transition:box-shadow .35s,border-color .35s,background .35s;
}
.motion-ready .sendBar:focus-within{border-color:var(--border-accent)!important;box-shadow:0 0 0 3px var(--accent-soft),0 6px 24px #0002}
.motion-ready .sendBar #msgInput{min-width:0;padding:12px 9px}
.motion-ready .sendBar>button{border-radius:12px!important;min-height:38px}
.motion-ready #sendBtn{width:42px;min-width:42px;padding:10px!important;border-radius:14px!important}
html:not([data-theme]) .motion-ready #sendBtn{background:linear-gradient(135deg,#ffda3d,#ffb22b);color:#241a05;box-shadow:0 3px 12px #ffbd302b}
.motion-ready #settingsBtn{border-radius:13px}
.motion-ready #settingsBtn:hover{transform:rotate(35deg);box-shadow:0 4px 16px var(--accent-soft)}
.motion-ready .modal{border-radius:20px;background:linear-gradient(155deg,#23242e,#14151c);border-color:#ffffff24}
.motion-ready #profilePopup,.motion-ready #emojiPanel,.motion-ready .msgOptMenu{border-radius:17px;border-color:#ffffff21}
.motion-ready .replyBar,.motion-ready #imgPreviewBar{border-radius:14px}
.motion-ready #typingIndicator{transform-origin:0 100%}
.motion-ready #toast{border:1px solid #ffffff1f;border-radius:14px;backdrop-filter:blur(16px)}
html.light-mode .motion-ready #chatWindow{background:#fff7}
html.light-mode .motion-ready .sendBar{background:#fffffff0!important;border-color:#0002!important}
html.light-mode .motion-ready .groupCard,html.light-mode .motion-ready .contactCard{background:#ffffffa0;border-color:#00000014}
html.light-mode .motion-ready .modal{background:linear-gradient(150deg,#fff,#f4f5f8);border-color:#0002}
html.light-mode .motion-ready #contactsList:empty::after{color:#656571}
@media(max-width:600px){
  .motion-ready #app{border-radius:22px;padding:16px}
  .motion-ready .lobbyHeader{position:relative;flex-wrap:wrap;gap:18px!important}
  .motion-ready .lobbyIdentity{min-width:0;width:100%;padding-right:130px}
  .motion-ready #whoAmI{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  .motion-ready .lobbyActions{flex-wrap:wrap;width:100%;gap:8px!important;margin-right:0!important}
  .motion-ready .lobbyActions>.tabs{flex:1 0 100%;width:100%;margin:0}
  .motion-ready .lobbyActions .tabbtn{flex:1}
  .motion-ready .lobbyActions>button:not(#logoutBtn){flex:1;white-space:nowrap}
  .motion-ready #logoutBtn{position:absolute;right:48px;top:0;margin:0!important;font-size:12px;padding:9px 12px;white-space:nowrap}
  .motion-ready .groupCard,.motion-ready .contactCard{padding:16px;gap:12px}
  .motion-ready .groupCard .ghost{padding:9px 14px}
  .motion-ready .sendBar{gap:5px!important;padding:5px!important;border-radius:18px!important}
  .motion-ready .sendBar>button{min-width:32px;min-height:36px}
  .motion-ready #sendBtn{width:36px;min-width:36px}
  .motion-ready #chatWindow{padding:13px}
  .motion-ready #settingsModal .modal{flex-direction:column!important;height:min(680px,92dvh)!important}
  .motion-ready .s2-nav{width:100%;border-right:0;border-bottom:1px solid var(--border);flex-shrink:0}
  .motion-ready .s2-nav-head{padding:15px 18px 11px;border-bottom:0}
  .motion-ready .s2-nav-items{flex-direction:row;overflow-x:auto;flex:none;gap:4px;padding:0 10px 10px}
  .motion-ready .s2-nav-item{width:auto;flex:0 0 auto;white-space:nowrap;padding:9px 12px}
  .motion-ready .s2-content{min-height:0;overflow-x:hidden}
  .motion-ready .s2-panel{padding:20px 16px}
  .motion-ready .s2-panel-head{padding-right:38px}
  .motion-ready .settings-row{padding:13px 12px;gap:10px}
  .motion-ready .settings-row-left{gap:9px}
}
@media(prefers-reduced-motion:reduce){
  html{transition:none}
  .motion-ready *,.motion-ready *::before,.motion-ready *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}