/* MIOIM mobile experience v1 — lighter iOS glass, true viewport sizing and a clean wallet signature. */
:root {
  --mioim-viewport-height: 100dvh;
  --mioim-status-surface: #eef7fc;
}

html.is-ios.is-standalone,
html.is-ios.is-standalone body {
  width: 100%;
  min-height: 100dvh;
  background: var(--mioim-status-surface) !important;
}

/* Paint the iPhone status safe-area with the same material as the app header.
   Controls stay below the Dynamic Island via env(safe-area-inset-top). */
html.is-ios.is-standalone body::before {
  content: "";
  position: fixed;
  z-index: 14;
  inset: 0 0 auto;
  height: max(env(safe-area-inset-top), 1px);
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 0, rgba(100, 205, 255, .20), transparent 42%),
    color-mix(in srgb, var(--mioim-status-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

html[data-theme="dark"] {
  --mioim-status-surface: #0d171e;
}

/* The wallet hero uses one quiet MIOIM silhouette. The former ring layer is intentionally removed. */
.balance-card {
  isolation: isolate;
  min-height: 286px;
  padding: 20px 19px 16px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 27px;
  background:
    radial-gradient(circle at 88% 3%, rgba(225, 248, 255, .38), transparent 29%),
    linear-gradient(148deg, #55c2f2 0%, #36a7e2 45%, #2788c6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -1px 0 rgba(6, 92, 145, .16),
    0 18px 42px rgba(35, 137, 196, .22);
}

.balance-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 79px;
  right: -9px;
  width: 183px;
  height: 138px;
  pointer-events: none;
  background: url("assets/mioim-card-watermark.svg") center / contain no-repeat;
  opacity: .115;
  filter: none;
  mix-blend-mode: normal;
  transform: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 100%);
}

.balance-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px;
  width: auto;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 26px;
  background: linear-gradient(112deg, rgba(255, 255, 255, .12), transparent 38%, rgba(255, 255, 255, .035));
  pointer-events: none;
}

.balance-card > * { position: relative; z-index: 2; }
.balance-card .portfolio-total { margin-top: 24px; }
.balance-card .portfolio-total strong { font-size: clamp(31px, 8.7vw, 38px); }
.balance-card .portfolio-line { margin-top: 19px; }

html[data-theme="dark"] .balance-card {
  background:
    radial-gradient(circle at 88% 3%, rgba(105, 205, 248, .18), transparent 30%),
    linear-gradient(148deg, #173e52 0%, #173447 48%, #102733 100%);
  border-color: rgba(157, 222, 248, .22);
  box-shadow: inset 0 1px 0 rgba(230, 249, 255, .11), 0 18px 42px rgba(0, 0, 0, .30);
}
html[data-theme="dark"] .balance-card::before { opacity: .075; }
html[data-theme="dark"] .balance-card::after { border-color: rgba(204, 239, 252, .07); }

@media (max-width: 520px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  body {
    position: fixed;
    inset: 0;
    touch-action: manipulation;
  }

  .app-stage,
  .app-shell {
    width: 100%;
    height: var(--mioim-viewport-height, 100dvh);
    min-height: var(--mioim-viewport-height, 100dvh);
    max-height: none;
  }

  .app-stage { padding: 0; }
  .app-shell { border-radius: 0; transform: translateZ(0); }
  .screen { -webkit-overflow-scrolling: touch; scroll-behavior: auto; }
  .screen.active { contain: layout paint; }

  .balance-card {
    min-height: 278px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .social-post,
  .market-row,
  .dapp-card,
  .asset-row,
  .activity-row,
  .chat-row { content-visibility: auto; contain-intrinsic-size: 82px; }

  .app-shell button:not(:disabled) {
    transition-duration: 90ms;
  }

  .screen.active.screen-enter-forward,
  .screen.active.screen-enter-back { animation-duration: 180ms; }

  .screen-enter-forward :is(.chat-row, .social-post, .asset-row),
  .screen-enter-back :is(.chat-row, .social-post, .asset-row) {
    animation-duration: 220ms;
    animation-delay: 0ms !important;
  }

  .screen-enter-forward .balance-card,
  .screen-enter-back .balance-card { animation-duration: 240ms; }
}

/* Safari on iPhone pays a high GPU cost for nested live blurs. Keep glass where it frames the app. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 520px) {
    :is(
      .section-block,
      .market-section,
      .chat-conversation-panel,
      .contact-chat-list,
      .settings-list,
      .my-assets-card,
      .appearance-card,
      .ucard-intro,
      .dapp-card,
      .social-post,
      .message-row .message-bubble,
      .action-grid span
    ) {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    .app-header,
    .bottom-nav,
    .chat-room-header {
      -webkit-backdrop-filter: blur(13px) saturate(135%) !important;
      backdrop-filter: blur(13px) saturate(135%) !important;
    }

    .modal,
    .message-composer,
    .meeting-chat-panel,
    .call-controls {
      -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
      backdrop-filter: blur(16px) saturate(135%) !important;
    }

    .app-shell::before,
    .app-shell::after { filter: none; opacity: .72; }

    :is(.section-block, .market-section, .chat-conversation-panel, .contact-chat-list, .settings-list, .my-assets-card, .appearance-card, .ucard-intro, .dapp-card, .social-post)::after {
      mix-blend-mode: normal;
      filter: grayscale(1);
    }
  }
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  html,
  body,
  .app-stage,
  .app-shell {
    height: var(--mioim-viewport-height, 100dvh);
    min-height: var(--mioim-viewport-height, 100dvh);
  }

  html.is-ios .app-stage,
  html.is-ios .app-shell {
    inset: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--mioim-status-surface);
  }
}