/**
 * Full-viewport mobile shell for Trust Wallet web mode.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #0d0f12 !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  min-height: var(--tw-app-height, 100dvh) !important;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: #0d0f12 !important;
  color: #fff;
}

#root {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: var(--tw-app-height, 100dvh);
  overflow: hidden;
}

#root > * {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

#tw-web-loading {
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

#root input,
#root textarea,
#root select {
  font-size: 16px !important;
}

#root .tw-scrollbar,
#root [class*="overflow-y-auto"],
#root [class*="overflow-auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ============================================================
   MOBILE OVERRIDES (phones / tablets in tw-mobile mode only)
   Desktop keeps original Trust Wallet layout + animations.
   ============================================================ */
html.tw-mobile {
  html,
  body,
  #root {
    background: #0d0f12 !important;
  }

  #root,
  #root [class*="flex"][class*="w-full"] {
    overflow-x: hidden;
  }

  /* Hide decorative globe overlay + desktop sidebar on onboarding (mobile web). */
  .tw-onboarding #root .flex.w-full > div.absolute,
  .tw-onboarding #root .flex.w-full > div.absolute[class*="pointer-events-none"],
  .tw-onboarding #root .flex.w-full > div.absolute.top-0.left-0 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .tw-onboarding #root .flex.w-full > [class*="sticky"][class*="min-h-screen"],
  .tw-onboarding #root .flex.w-full > [class*="w-1/3"] {
    display: none !important;
  }

  .tw-onboarding #root [class*="w-[504px]"],
  .tw-onboarding #root [class*="w-[411px]"],
  .tw-onboarding #root [class*="w-[599px]"],
  .tw-onboarding #root [class*="w-[363px]"] {
    display: none !important;
  }

  /* Keep the main onboarding form column visible. */
  .tw-onboarding #root .flex.w-full > [class*="flex-1"][class*="min-w-[480px]"],
  .tw-onboarding #root .flex.w-full > [class*="flex-1"][class*="max-w-[716px]"] {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: max(24px, env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Two-column flex rows in onboarding -> single column */
  .tw-onboarding #root .flex.w-full {
    flex-direction: column !important;
  }

  /* Onboarding main content column adjustments. */
  .tw-onboarding #root [class*="flex-1"][class*="min-w-[480px]"],
  .tw-onboarding #root [class*="flex-1"][class*="max-w-[716px]"],
  .tw-onboarding #root [class*="min-w-[480px]"],
  .tw-onboarding #root [class*="max-w-[716px]"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  .tw-onboarding #root [class*="min-w-[3"],
  .tw-onboarding #root [class*="min-w-[4"],
  .tw-onboarding #root [class*="min-w-[5"],
  .tw-onboarding #root [class*="min-w-[6"],
  .tw-onboarding #root [class*="min-w-[7"] {
    min-width: 0 !important;
  }

  .tw-onboarding #root [class*="max-w-[7"],
  .tw-onboarding #root [class*="max-w-[6"],
  .tw-onboarding #root [class*="max-w-[5"],
  .tw-onboarding #root [class*="max-w-[4"] {
    max-width: 100% !important;
  }

  /* Onboarding form/content columns -> full width */
  .tw-onboarding #root [class*="w-[472px]"],
  .tw-onboarding #root [class*="w-[438px]"],
  .tw-onboarding #root [class*="w-[375px]"],
  .tw-onboarding #root [class*="w-[400px]"],
  .tw-onboarding #root [class*="w-[305px]"],
  .tw-onboarding #root [class*="max-w-[438px]"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Large desktop-only fixed-pixel margins removed everywhere (rare on dashboard). */
  #root [class*="ml-[258px]"],
  #root [class*="ml-[130px]"],
  #root [class*="ml-[100px]"],
  #root [class*="mr-[258px]"],
  #root [class*="mr-[130px]"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Wallet dashboard quick actions (Send / Swap / Fund / Sell / Earn) */
  #root [data-testid="dashboard-wallet-board"] {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: clamp(6px, 2.5vw, 14px) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #root [data-testid="dashboard-wallet-board"] > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Onboarding: stretch centered column, no big gutters. */
  .tw-onboarding #root [class*="m-auto"],
  .tw-onboarding #root [class*="mx-auto"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .tw-onboarding #root .flex.w-full > [class*="flex-1"],
  .tw-onboarding #root [class*="m-auto"],
  .tw-onboarding #root [class*="mx-auto"] {
    box-sizing: border-box !important;
    padding-top: max(24px, env(safe-area-inset-top, 0px)) !important;
    padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
  }

  .tw-onboarding #root .flex.w-full > [class*="flex-1"] > * {
    max-width: min(420px, calc(100vw - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .tw-onboarding #root .flex.w-full > [class*="flex-1"] > * > svg:first-child {
    width: min(220px, 70vw) !important;
    max-width: min(220px, 70vw) !important;
    height: auto !important;
  }

  /* Any `flex-1` wrapper in onboarding -> full width */
  .tw-onboarding #root [class*="flex-1"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Tall fixed heights -> auto so onboarding content can grow naturally */
  .tw-onboarding #root [class*="h-[780px]"],
  .tw-onboarding #root [class*="h-[100vh]"],
  .tw-onboarding #root [class*="min-h-screen"][class*="sticky"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Big top margins (mt-[130px], mt-16 inside content column) */
  .tw-onboarding #root [class*="mt-[130px]"] {
    margin-top: 16px !important;
  }

  /* Sane mobile padding for any onboarding column */
  .tw-onboarding #root .flex.flex-col.w-full,
  .tw-onboarding #root [class*="flex-col"][class*="w-full"] {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Don't double-pad nested wrappers */
  .tw-onboarding #root [class*="px-"] .flex.flex-col.w-full,
  .tw-onboarding #root [class*="px-"] [class*="flex-col"][class*="w-full"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Big SCREAMER headings -> phone-sized (only on onboarding) */
  .tw-onboarding #root [class*="text-["][class*="px]"],
  .tw-onboarding #root [class*="text-5xl"],
  .tw-onboarding #root [class*="text-6xl"],
  .tw-onboarding #root [class*="text-7xl"] {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.2 !important;
  }

  /* Onboarding heading spacing */
  .tw-onboarding #root [class*="mt-16"] {
    margin-top: 24px !important;
  }
  .tw-onboarding #root [class*="mb-10"] {
    margin-bottom: 16px !important;
  }

  /* Modals / drawers -> bottom sheet feel */
  #root [class*="fixed"][class*="inset-"],
  #root [class*="fixed"][class*="bottom-"],
  #root [class*="fixed"][class*="top-"] {
    max-width: 100vw !important;
  }

  #root img,
  #root video,
  #root canvas,
  #root svg {
    max-width: 100%;
    height: auto;
  }

  /* Onboarding-only: full-width primary actions */
  .tw-onboarding #root button[class*="w-1/2"],
  .tw-onboarding #root [class*="w-1/2"] > button {
    width: 100% !important;
  }
  .tw-onboarding #root [class*="w-1/2"][class*="ml-auto"] {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Mobile body text (terms checkbox label, secondary copy, etc.) */
  #root .body-text {
    padding-left: 8px;
    font-size: 12px !important;
    line-height: 22px !important;
  }

  /* Terms / checkbox rows: keep label beside the box, not overlapping */
  #root label:has(input[type="checkbox"]) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  #root label:has(input[type="checkbox"]) input[type="checkbox"] {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
  }

  /* Import wallet picker: hide chevron arrows on wallet rows */
  #root [data-testid^="onboarding-select-import-method-"] .flex.justify-between > svg {
    display: none !important;
  }

  #root [data-testid^="onboarding-select-import-method-"] .flex.justify-between {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }

  /* Import method / wallet picker row titles */
  #root [data-testid^="onboarding-select-import-method-"] .tw-import-method-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px !important;
    line-height: 1.35;
    text-align: left;
  }

  #root [data-testid^="onboarding-select-import-method-"] .flex.gap-4.items-center {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  #root [data-testid^="onboarding-select-import-method-"] .flex.gap-4.items-center > div:first-child {
    flex-shrink: 0;
  }

  /* Import screen: space below heading before wallet name field */
  #root [data-testid="wallet-name-input-input-group"] {
    margin-top: 20px !important;
  }
}

/* Desktop — full viewport wallet, preserve original onboarding art */
html:not(.tw-mobile) body,
html:not(.tw-mobile) #root {
  overflow: hidden;
  height: 100vh;
  min-height: 100vh;
}

html:not(.tw-mobile) #root > div.relative.flex.flex-col.flex-1.w-full,
html:not(.tw-mobile) #root > div.relative.flex.flex-col[class*="self-center"],
html:not(.tw-mobile) #root > div[class*="self-center"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  inset: auto !important;
}

html:not(.tw-mobile).tw-onboarding #root {
  overflow: auto;
}

html:not(.tw-mobile).tw-onboarding #root .flex.w-full {
  min-height: 100vh;
}

html:not(.tw-mobile) #root input,
html:not(.tw-mobile) #root textarea,
html:not(.tw-mobile) #root select {
  font-size: inherit !important;
}

/* Very small phones */
@media (max-width: 380px) {
  #root {
    font-size: 15px;
  }
  #root .flex.flex-col.w-full,
  #root [class*="flex-col"][class*="w-full"] {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Landscape phones — keep usable height */
@media (max-height: 500px) and (orientation: landscape) {
  body {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

/* Keyboard open — scroll focused fields into view (see web-mobile.js) */
html.tw-keyboard-open body,
html.tw-keyboard-open #root {
  height: var(--tw-app-height, 100dvh) !important;
  min-height: var(--tw-app-height, 100dvh) !important;
  max-height: var(--tw-app-height, 100dvh) !important;
}

html.tw-keyboard-open #root > div.relative.flex.flex-col,
html.tw-keyboard-open #root > div[class*="self-center"] {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.tw-keyboard-open #root input,
html.tw-keyboard-open #root textarea {
  scroll-margin-top: 72px;
  scroll-margin-bottom: 24px;
}