/* MIOIM interaction language — calm, tactile and consistent across light/dark themes. */
:root {
  --motion-fast: 150ms;
  --motion-medium: 300ms;
  --motion-spring: cubic-bezier(.2, .85, .24, 1.15);
  --motion-smooth: cubic-bezier(.22, 1, .36, 1);
}

.app-shell button,
.app-shell [role="button"],
.app-shell .chat-row,
.app-shell .activity-row,
.app-shell .dapp-card,
.app-shell .social-post-actions button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.app-shell button:not(:disabled) {
  transition:
    transform var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.app-shell button:not(:disabled):active { transform: scale(.965); }
.app-shell .icon-button:not(:disabled):active,
.app-shell .round-button:not(:disabled):active,
.app-shell .chat-add-button:not(:disabled):active,
.app-shell .social-top-actions button:not(:disabled):active { transform: scale(.88); }

.tap-feedback { animation: mioim-tap-feedback .38s var(--motion-smooth); }

@keyframes mioim-tap-feedback {
  0% { filter: brightness(1); }
  45% { filter: brightness(.95); }
  100% { filter: brightness(1); }
}

/* Primary screen changes keep spatial direction without slowing navigation. */
.screen.active.screen-enter-forward { animation: screen-enter-forward .42s var(--motion-smooth) both; }
.screen.active.screen-enter-back { animation: screen-enter-back .42s var(--motion-smooth) both; }

@keyframes screen-enter-forward {
  0% { opacity: .45; transform: translate3d(18px, 0, 0) scale(.992); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes screen-enter-back {
  0% { opacity: .45; transform: translate3d(-14px, 0, 0) scale(.992); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* The navigation icon rises gently and the indicator grows from its center. */
.bottom-nav { overflow: visible; }
.bottom-nav button::before {
  transform: translateX(0) scaleX(0);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform .3s var(--motion-spring), opacity .18s ease;
}
.bottom-nav button.active::before { transform: translateX(0) scaleX(1); opacity: 1; }
.bottom-nav button span { transition: transform .3s var(--motion-spring); }
.bottom-nav button b { transition: color .18s ease, transform .3s var(--motion-spring); }
.bottom-nav button.active span { transform: translate3d(0, -2px, 0) scale(1.08); }
.bottom-nav button.active b { transform: translate3d(0, 1px, 0); }
.bottom-nav button.tap-feedback span { animation: nav-icon-pop .38s var(--motion-spring); }

@keyframes nav-icon-pop {
  0% { transform: scale(1); }
  45% { transform: translate3d(0, -3px, 0) scale(.88); }
  100% { transform: translate3d(0, -2px, 0) scale(1.08); }
}

/* Cards and rows respond to the finger but return to rest quickly. */
.chat-row,
.contact-quick-actions button,
.wallet-actions button,
.five-actions button,
.settings-list > button,
.my-membership-strip,
.my-entry-card,
.ucard-action-grid button,
.dapp-card,
.activity-row {
  transform-origin: 50% 50%;
  transition: transform .16s ease, background-color .16s ease, box-shadow .2s ease, border-color .16s ease;
}
.chat-row:active,
.contact-quick-actions button:active,
.wallet-actions button:active,
.five-actions button:active,
.settings-list > button:active,
.my-membership-strip:active,
.my-entry-card:active,
.ucard-action-grid button:active,
.dapp-card:active,
.activity-row:active { transform: scale(.982); }

.screen-enter-forward .chat-row,
.screen-enter-back .chat-row,
.screen-enter-forward .social-post,
.screen-enter-back .social-post,
.screen-enter-forward .asset-row,
.screen-enter-back .asset-row {
  animation: list-item-arrive .42s var(--motion-smooth) both;
}
.screen-enter-forward :is(.chat-row, .social-post, .asset-row):nth-child(2),
.screen-enter-back :is(.chat-row, .social-post, .asset-row):nth-child(2) { animation-delay: 34ms; }
.screen-enter-forward :is(.chat-row, .social-post, .asset-row):nth-child(3),
.screen-enter-back :is(.chat-row, .social-post, .asset-row):nth-child(3) { animation-delay: 64ms; }
.screen-enter-forward :is(.chat-row, .social-post, .asset-row):nth-child(4),
.screen-enter-back :is(.chat-row, .social-post, .asset-row):nth-child(4) { animation-delay: 90ms; }

@keyframes list-item-arrive {
  0% { opacity: 0; transform: translate3d(0, 9px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Wallet and moments get small state cues instead of decorative motion. */
.balance-card,
.my-assets-card,
.social-topbar { transition: box-shadow .25s ease, border-color .25s ease; }
.screen-enter-forward .balance-card,
.screen-enter-back .balance-card { animation: wallet-card-settle .5s var(--motion-smooth) both; }

@keyframes wallet-card-settle {
  0% { opacity: .55; transform: translate3d(0, 12px, 0) scale(.985); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.social-tabs button::after { transform: scaleX(0); transform-origin: center; transition: transform .28s var(--motion-spring); }
.social-tabs button.active::after { transform: scaleX(1); }
.social-post-actions button.active { animation: social-reaction-pop .4s var(--motion-spring); }

@keyframes social-reaction-pop {
  0% { transform: scale(1); }
  48% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Conversation opens as a dedicated layer; composer and sent messages feel responsive. */
.chat-room.chat-room-entering { animation: chat-room-enter .46s var(--motion-smooth) both; }
.chat-room.chat-room-entering .chat-room-header { animation: chat-header-arrive .4s .04s var(--motion-smooth) both; }
.chat-room.chat-room-entering .message-composer { animation: composer-arrive .42s .08s var(--motion-smooth) both; }

@keyframes chat-room-enter {
  0% { opacity: .3; transform: translate3d(22px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes chat-header-arrive {
  0% { opacity: .4; transform: translate3d(0, -8px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes composer-arrive {
  0% { opacity: .5; transform: translate3d(0, 12px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.message-composer {
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.message-composer:focus-within {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  box-shadow: 0 -10px 30px color-mix(in srgb, var(--blue) 9%, transparent);
}
.message-composer textarea { transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.message-composer textarea:focus { transform: translate3d(0, -1px, 0); box-shadow: 0 0 0 3px var(--focus); }
.message-bubble:active { transform: scale(.985); }
.message-highlight { animation: message-highlight-pulse 1.15s ease both; }

@keyframes message-highlight-pulse {
  0%, 100% { box-shadow: inherit; }
  30% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 24%, transparent), var(--shadow-soft); }
}

/* Bottom sheets and overlays arrive as one coordinated surface. */
.modal-backdrop:not([hidden]) { animation: modal-backdrop-in .24s ease both; }
.modal:not([hidden]) { animation: modal-sheet-in .38s var(--motion-smooth) both; }

@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-sheet-in {
  0% { opacity: .35; transform: translate3d(0, 34px, 0) scale(.985); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

html[data-theme="dark"] .message-composer:focus-within {
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .28), 0 0 0 1px rgba(116, 203, 255, .08);
}

@media (hover: hover) and (pointer: fine) {
  .chat-row:hover,
  .settings-list > button:hover,
  .dapp-card:hover,
  .activity-row:hover { background-color: var(--surface-soft); }
  .contact-quick-actions button:hover,
  .ucard-action-grid button:hover { border-color: color-mix(in srgb, var(--blue) 24%, var(--line)); box-shadow: var(--shadow-soft); }
}

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