/* Final native application layer — desktop and mobile. */
:root {
  color-scheme: dark;
  --native-bg: #050506;
  --native-panel: rgba(18, 18, 21, .84);
  --native-panel-solid: #121215;
  --native-raised: #19191e;
  --native-line: rgba(255, 255, 255, .095);
  --native-line-strong: rgba(255, 255, 255, .17);
  --native-text: #f7f7f8;
  --native-muted: #96969f;
  --native-accent: #806cf2;
  --native-accent-soft: rgba(128, 108, 242, .17);
  --native-red: #ff5f57;
  --native-yellow: #febc2e;
  --native-green: #28c840;
  --native-radius: 15px;
  --native-radius-lg: 22px;
  --native-shadow: 0 20px 60px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .025);
  --native-spring: cubic-bezier(.2, .8, .2, 1);
}

html,
html[data-theme="light"] {
  color-scheme: dark !important;
  background: #020203 !important;
}

html[data-theme="light"] body,
body {
  margin: 0;
  color: var(--native-text) !important;
  background:
    radial-gradient(1000px 620px at 82% -10%, rgba(92, 72, 196, .12), transparent 58%),
    #020203 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, system-ui, sans-serif !important;
  font-feature-settings: "kern" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button,
input,
select,
textarea { font: inherit; }

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
.listing-card,
.store-ops-card {
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .22s ease,
    opacity .18s ease,
    transform .24s var(--native-spring) !important;
}

button:active,
a.solid-button:active,
a.outline-button:active { transform: scale(.975) !important; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(128, 108, 242, .3) !important;
  outline-offset: 2px;
}

.app-shell {
  min-width: 0;
  background: transparent;
}

.rail {
  background: rgba(9, 9, 11, .88) !important;
  border-color: var(--native-line) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .025);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  backdrop-filter: blur(28px) saturate(125%);
}

.brand { margin-top: 4px !important; margin-bottom: 20px !important; }
.brand b { letter-spacing: -.04em; }
.rail-nav { scrollbar-width: none; }
.rail-nav::-webkit-scrollbar { display: none; }

.nav-link,
.account-link {
  border: 1px solid transparent !important;
  border-radius: 11px !important;
}

.nav-link::before,
.nav-link.active::before { display: none !important; }

.nav-link:hover,
.account-link:hover {
  color: var(--native-text) !important;
  background: rgba(255, 255, 255, .055) !important;
}

.nav-link.active {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .075) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .065)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 4px 14px rgba(0, 0, 0, .16) !important;
}

.avatar,
.avatar-button,
.thread-avatar,
.profile-avatar,
.account-avatar { overflow: hidden; border-radius: 50% !important; }

.avatar img,
.avatar-button img,
.thread-avatar img,
.profile-avatar img,
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }

.workspace {
  min-width: 0;
  color: var(--native-text) !important;
  background:
    radial-gradient(900px 560px at 78% 8%, rgba(87, 67, 185, .055), transparent 62%),
    var(--native-bg) !important;
}

.topbar {
  background: rgba(6, 6, 7, .74) !important;
  border-color: var(--native-line) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
  backdrop-filter: blur(24px) saturate(135%) !important;
  z-index: 30;
}

.topbar h1 { color: var(--native-text); font-weight: 640 !important; }
.topbar p,
.kicker,
.home-label { color: var(--native-muted) !important; }

.notification-button,
.avatar-button {
  color: var(--native-text) !important;
  border: 1px solid var(--native-line) !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.notification-button:hover,
.avatar-button:hover { background: rgba(255, 255, 255, .085) !important; }

.app-loader,
.clean-loader {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.app-loader[hidden] { display: none !important; }
.app-loader { width: 38px; height: 38px; }
.app-loader i,
.clean-loader i {
  display: block;
  width: 19px;
  height: 19px;
  border: 2px solid rgba(255, 255, 255, .15);
  border-top-color: #9b89ff;
  border-radius: 50%;
  animation: clean-loader-spin .72s linear infinite;
}
.clean-loader { width: 32px; height: 32px; }
.clean-loader i { width: 24px; height: 24px; border-width: 2.5px; }
.loading-state {
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  color: var(--native-muted) !important;
  text-align: center;
}
.emoji-picker-loading.loading-state { min-height: 92px !important; }
.conversation-empty.loading-state { min-height: 100%; }
.profile-popup-loading.loading-state { min-height: 230px !important; }
.app-is-loading .topbar h1 { opacity: .72; }
@keyframes clean-loader-spin { to { transform: rotate(360deg); } }

.screen.active {
  animation: native-screen-in .34s var(--native-spring) both !important;
}

.screen.active > * {
  animation: native-content-in .38s var(--native-spring) both;
}
.screen.active > :nth-child(2) { animation-delay: 35ms; }
.screen.active > :nth-child(3) { animation-delay: 65ms; }
.screen.active > :nth-child(4) { animation-delay: 90ms; }

@keyframes native-screen-in {
  from { opacity: 0; transform: translateY(7px) scale(.997); }
  to { opacity: 1; transform: none; }
}

@keyframes native-content-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

:where(.home-command, .home-pulse > *, .listing-card, .network-hero, .network-tools,
  .network-card, .resell-command, .resell-flow, .resell-toolbar, .resell-empty,
  .directory-hero, .directory-tools, .store-directory-card, .store-ops-card,
  .money-summary, .money-card, .account-card, .settings-card, .empty-state) {
  border-color: var(--native-line) !important;
  box-shadow: var(--native-shadow);
}

:where(.home-pulse > *, .listing-card, .network-card, .store-directory-card,
  .store-ops-card, .money-card, .account-card, .settings-card) {
  background: linear-gradient(180deg, rgba(22, 22, 26, .92), rgba(14, 14, 17, .94)) !important;
  border-radius: var(--native-radius) !important;
}

:where(.solid-button, .outline-button, .text-button, .filter, .home-command button,
  .network-tools button, .directory-tools button, .store-actions button, .dialog-actions button) {
  min-height: 42px;
  border-radius: 10px !important;
  font-weight: 620 !important;
}

.solid-button {
  color: #fff !important;
  border-color: rgba(155, 139, 255, .45) !important;
  background: linear-gradient(180deg, #8a76f8, #6e5adf) !important;
  box-shadow: 0 8px 22px rgba(83, 60, 204, .24), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

.solid-button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.outline-button,
.text-button,
.filter {
  color: var(--native-text) !important;
  border-color: var(--native-line) !important;
  background: rgba(255, 255, 255, .035) !important;
}
.filter.active {
  color: #fff !important;
  border-color: rgba(141, 121, 255, .32) !important;
  background: var(--native-accent-soft) !important;
}

:where(input, select, textarea) {
  color: var(--native-text) !important;
  border-color: var(--native-line) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .038) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22) !important;
}

:where(input, select, textarea)::placeholder { color: #777780 !important; opacity: 1; }
:where(input, select, textarea):focus {
  border-color: rgba(140, 120, 255, .68) !important;
  box-shadow: 0 0 0 3px rgba(128, 108, 242, .15), inset 0 1px 2px rgba(0, 0, 0, .2) !important;
}

dialog {
  color: var(--native-text) !important;
  border: 1px solid var(--native-line-strong) !important;
  border-radius: 18px !important;
  background: rgba(19, 19, 23, .94) !important;
  box-shadow: 0 36px 110px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  backdrop-filter: blur(32px) saturate(140%);
}

dialog[open] { animation: native-dialog-in .26s var(--native-spring) both; }
dialog::backdrop {
  background: rgba(0, 0, 0, .58) !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: native-backdrop-in .2s ease both;
}

@keyframes native-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.975); }
  to { opacity: 1; transform: none; }
}
@keyframes native-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.listing-card:hover,
.network-card:hover,
.store-directory-card:hover,
.store-ops-card:hover {
  border-color: var(--native-line-strong) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .04);
  transform: translateY(-3px);
}

.empty-state:has(.spinner),
.loading-shimmer { animation: native-loading 1.45s ease-in-out infinite; }
@keyframes native-loading { 50% { opacity: .58; } }

.native-success {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  z-index: 10020;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: min(330px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  padding: 11px 14px 11px 11px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 15px;
  background: rgba(25, 25, 29, .88);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  opacity: 0;
  transform: translate(-50%, -18px) scale(.94);
  transition: opacity .24s ease, transform .42s cubic-bezier(.16, 1.25, .32, 1);
  pointer-events: none;
}
.native-success.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.native-success-store .native-success-icon { animation: native-store-pop .72s cubic-bezier(.16,1.25,.32,1) both; }
@keyframes native-store-pop {
  0% { transform: scale(.45) rotate(-8deg); }
  58% { transform: scale(1.13) rotate(3deg); }
  100% { transform: none; }
}
.native-success-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(145deg, #957fff, #6751db);
  box-shadow: 0 7px 18px rgba(103, 81, 219, .32);
}
.native-success-icon::before,
.native-success-icon::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c8bdff;
  animation: native-spark .8s ease-out both;
}
.native-success-icon::before { top: -4px; right: -3px; }
.native-success-icon::after { right: -7px; bottom: 2px; animation-delay: .1s; }
.native-success strong { display: block; font-size: 13px; font-weight: 660; letter-spacing: -.01em; }
.native-success small { display: block; margin-top: 2px; color: #aaaab3; font-size: 11px; }
@keyframes native-spark {
  from { opacity: 0; transform: scale(.2); }
  45% { opacity: 1; transform: scale(1.4); }
  to { opacity: 0; transform: translate(4px, -5px) scale(.5); }
}

.level-up-moment {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(2, 2, 4, .34);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .28s ease;
  cursor: pointer;
}
.level-up-moment.show { opacity: 1; }
.level-up-card {
  position: relative;
  z-index: 2;
  width: min(330px, calc(100vw - 32px));
  padding: 30px 26px 27px;
  display: grid;
  justify-items: center;
  text-align: center;
  color: #fff;
  border: 1px solid rgba(175, 159, 255, .3);
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0, rgba(132, 105, 255, .2), transparent 48%), rgba(18, 18, 22, .94);
  box-shadow: 0 36px 120px rgba(0, 0, 0, .62), 0 0 80px rgba(110, 85, 230, .18), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(24px) scale(.88);
  transition: transform .58s cubic-bezier(.16, 1.22, .3, 1);
}
.level-up-moment.show .level-up-card { transform: none; }
.level-up-card > span { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#9b87ff,#654bd9); box-shadow: 0 12px 35px rgba(101,75,217,.38); }
.level-up-card > span .ui-icon { width: 22px; height: 22px; }
.level-up-card small { color: #afa5e8; font-size: 10px; font-weight: 760; letter-spacing: .18em; text-transform: uppercase; }
.level-up-card strong { margin-top: 4px; font-size: 92px; font-weight: 670; line-height: 1; letter-spacing: -.08em; background: linear-gradient(180deg,#fff,#a99af3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.level-up-card p { margin: 10px 0 0; color: #aaaab3; font-size: 13px; }
.level-up-burst { position: absolute; width: min(560px, 100vw); aspect-ratio: 1; }
.level-up-burst i { --angle: calc(var(--i) * 36deg); position: absolute; left: 50%; top: 50%; width: 7px; height: 20px; border-radius: 8px; background: hsl(calc(248 + var(--i) * 3) 85% 72%); opacity: 0; transform: rotate(var(--angle)) translateY(-50px) scale(.3); }
.level-up-moment.show .level-up-burst i { animation: level-particle 1.25s calc(var(--i) * 28ms) cubic-bezier(.2,.75,.25,1) both; }
@keyframes level-particle {
  16% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(-245px) rotate(160deg) scale(.85); }
}

#toast {
  border: 1px solid var(--native-line-strong) !important;
  border-radius: 12px !important;
  background: rgba(24, 24, 28, .92) !important;
  box-shadow: 0 16px 55px rgba(0, 0, 0, .46) !important;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

@media (min-width: 761px) {
  .app-shell {
    min-height: calc(100dvh - 20px);
    margin: 10px;
    overflow: clip;
    border: 1px solid var(--native-line-strong);
    border-radius: var(--native-radius-lg);
    background: var(--native-bg);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255, 255, 255, .035);
  }
  .rail {
    inset: 10px auto 10px 10px !important;
    height: auto !important;
    border-radius: var(--native-radius-lg) 0 0 var(--native-radius-lg);
  }
  .workspace {
    min-height: calc(100dvh - 20px) !important;
    margin-left: var(--rail) !important;
    border-radius: 0 var(--native-radius-lg) var(--native-radius-lg) 0;
    overflow: clip;
  }
  .topbar { top: 0; }
  .screen { max-width: 1440px; }
  .screen[data-screen="messages"] .messenger { box-shadow: none !important; }
  body:has(.screen[data-screen="messages"].active) .app-shell,
  body:has(.screen[data-screen="messages"].active) .workspace {
    height: calc(100dvh - 20px) !important;
  }
  body:has(.screen[data-screen="messages"].active) .workspace main {
    height: calc(100dvh - 94px) !important;
  }
}

@media (max-width: 760px) {
  html { height: 100%; overflow-x: clip !important; }
  body { min-width: 0; min-height: 100%; overflow-x: clip !important; overscroll-behavior-y: none; }
  .app-shell,
  .workspace { width: 100%; min-height: 100dvh; margin: 0 !important; border: 0; border-radius: 0; }
  .rail { display: none !important; }
  .workspace { padding-bottom: calc(72px + env(safe-area-inset-bottom)); overflow-x: clip; }
  .topbar {
    position: sticky !important;
    top: 0;
    min-height: 62px !important;
    padding: max(8px, env(safe-area-inset-top)) 13px 8px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    box-shadow: 0 1px 0 rgba(255,255,255,.035), 0 8px 28px rgba(0,0,0,.18);
  }
  .topbar > div:first-of-type { min-width: 0; margin: 0 !important; }
  .topbar h1 { font-size: 18px !important; }
  .topbar p { display: none; }
  .mobile-brand { display: inline-flex !important; }
  .top-actions { min-width: 0; gap: 6px; }
  .notification-button,
  .avatar-button { display: grid !important; width: 38px !important; height: 38px !important; }
  .workspace main { width: 100%; min-width: 0; overflow-x: clip !important; -webkit-overflow-scrolling: touch; }
  .screen { width: 100%; padding: 12px 12px calc(94px + env(safe-area-inset-bottom)) !important; }
  .screen.active > * { animation-duration: .3s; }
  .page-intro h2,
  .section-heading h2 { font-size: clamp(25px, 8vw, 34px) !important; }
  :where(.solid-button, .outline-button, .text-button, .filter) { min-height: 44px; }
  :where(button, a, summary, [role="button"]) { touch-action: manipulation; }
  :where(input, select, textarea) { min-height: 46px; font-size: 16px !important; }
  .home-command { padding: 20px !important; }
  .home-command-copy h2 { font-size: clamp(34px, 11vw, 43px) !important; line-height: .94 !important; }
  .home-command-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .home-command-actions > * { width: 100%; }
  .home-pulse { gap: 8px !important; }
  .home-pulse > * { min-width: 0; padding: 15px !important; }
  .home-pulse strong { overflow-wrap: anywhere; }
  .filter-row,
  .store-ops-tabs,
  .money-tabs,
  .subnav {
    width: calc(100% + 24px) !important;
    max-width: none !important;
    margin-inline: -12px !important;
    padding-inline: 12px !important;
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-row::-webkit-scrollbar,
  .store-ops-tabs::-webkit-scrollbar,
  .money-tabs::-webkit-scrollbar,
  .subnav::-webkit-scrollbar { display: none; }
  .filter-row > *,
  .store-ops-tabs > *,
  .money-tabs > *,
  .subnav > * { flex: 0 0 auto !important; min-height: 44px !important; scroll-snap-align: start; }
  .store-ops-panel-head { gap: 14px !important; }
  .store-ops-panel-head > div:last-child { width: 100%; display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .store-ops-panel-head > div:last-child > * { width: 100% !important; }
  .store-settings-grid,
  .account-grid,
  .money-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .settings-card,
  .money-card,
  .store-settings-form,
  .store-domain-manager { min-width: 0; padding: 17px !important; }
  .network-card { grid-template-columns: 112px minmax(0, 1fr) !important; }
  .network-card-media { min-width: 0; }
  .network-card-body { min-width: 0; }
  .network-card h3,
  .network-card p { overflow-wrap: anywhere; }
  .mobile-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .mobile-menu-grid > button { min-width: 0; min-height: 72px !important; padding: 12px !important; }
  .mobile-notifications { min-width: 0; }
  .mobile-notifications header { gap: 10px; align-items: center; }
  .mobile-notifications header button { min-height: 44px; white-space: nowrap; }
  .listing-card:hover,
  .network-card:hover,
  .store-directory-card:hover,
  .store-ops-card:hover { transform: none; }
  .mobile-dock {
    position: fixed !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    inset: auto 8px calc(7px + env(safe-area-inset-bottom)) 8px !important;
    padding: 5px !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 17px !important;
    background: rgba(20, 20, 23, .82) !important;
    box-shadow: 0 16px 52px rgba(0, 0, 0, .54), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    -webkit-backdrop-filter: blur(26px) saturate(145%);
    backdrop-filter: blur(26px) saturate(145%);
  }
  .mobile-dock button {
    min-width: 0;
    min-height: 53px !important;
    padding: 5px 2px !important;
    color: #92929b !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
  }
  .mobile-dock button.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .095) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  }
  .mobile-dock button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  dialog:not(.mobile-menu-dialog) {
    width: calc(100% - 12px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 12px) !important;
    margin: auto 6px 6px !important;
    border-radius: 20px !important;
  }
  .mobile-menu-dialog {
    width: calc(100% - 12px) !important;
    max-height: min(82dvh, 720px) !important;
    margin: auto 6px 6px !important;
    border-radius: 20px !important;
  }
  dialog[open] { animation-name: native-sheet-in; }
  dialog .dialog-close {
    position: sticky !important;
    top: 0 !important;
    z-index: 4;
    margin-left: auto;
    background: rgba(29,29,34,.92) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  @keyframes native-sheet-in {
    from { opacity: 0; transform: translateY(28px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
  .native-success { top: max(10px, env(safe-area-inset-top)); }
  body:has(.screen[data-screen="messages"].active) .workspace { padding-bottom: 0; }
  body:has(.screen[data-screen="messages"].active) .topbar { display: none !important; }
  .workspace main:has(>.screen[data-screen="messages"].active) {
    height: calc(100dvh - 72px - env(safe-area-inset-bottom)) !important;
  }
  .screen[data-screen="messages"] .composer {
    width: 100%;
    min-width: 0;
    padding: 9px max(9px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: 44px 44px minmax(0,1fr) auto !important;
    gap: 7px !important;
  }
  .screen[data-screen="messages"] .composer > * { min-width: 0; }
  .screen[data-screen="messages"] .composer input { width: 100% !important; }
  .screen[data-screen="messages"] .composer .solid-button { min-width: 64px; padding-inline: 12px !important; }
}

@media (max-width: 420px) {
  .listing-grid,
  .listing-grid.wide { grid-template-columns: minmax(0, 1fr) !important; }
  .listing-media { height: min(58vw, 230px) !important; }
  .network-card { grid-template-columns: 1fr !important; }
  .network-card-media { min-height: 190px !important; }
  .home-pulse { grid-template-columns: 1fr 1fr !important; }
  .mobile-menu-grid { grid-template-columns: 1fr 1fr !important; }
}

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

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

/* Compact mobile shell: keep navigation solid and make every tab share one rhythm. */
@media (max-width:760px) {
  .screen { padding-top: 8px !important; padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
  .home-command { padding: 16px !important; }
  .home-command-copy h2 { margin-top: 10px !important; margin-bottom: 12px !important; }
  .home-command-actions { margin-top: 18px !important; }
  .home-balance { padding: 14px !important; }
  .home-balance > strong { margin: 12px 0 6px !important; }
  .home-balance > button { margin-top: 14px !important; }
  .home-pulse > * { min-height: 108px !important; padding: 12px !important; }
  .home-service-grid article { min-height: 175px !important; padding: 15px !important; }
  .home-services-heading { margin-top: 34px !important; }

  .mobile-dock {
    background: #000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 4px 5px !important;
    border-color: #29292f !important;
  }
  .mobile-dock button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 48px !important;
    line-height: 1 !important;
  }
  .mobile-dock button svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    margin: 0 auto !important;
  }
  .mobile-dock button span {
    display: block !important;
    height: 12px !important;
    line-height: 12px !important;
  }
}

/* Stable native messaging: polling updates in place, media keeps its shape. */
.message-stream { scroll-behavior:auto; overscroll-behavior-y:contain; overflow-anchor:auto!important; scrollbar-gutter:stable; gap:6px!important; }
.message-unit { max-width:min(72%,560px)!important; transform-origin:left bottom; }
.message-unit.mine { transform-origin:right bottom; }
.message-unit.is-new { animation:mzz-message-arrive .26s cubic-bezier(.2,.8,.2,1) both; }
.message-unit .bubble { padding:10px 14px; border:1px solid rgba(255,255,255,.055); border-radius:17px 17px 17px 5px; background:#17171a; color:#f5f5f7; line-height:1.42; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 5px 18px rgba(0,0,0,.12); }
.message-unit .bubble.mine { border-color:rgba(255,255,255,.09); border-radius:17px 17px 5px 17px; background:linear-gradient(145deg,#846ff0,#6d58df); color:#fff; }
.message-unit small[data-delivery-state] { min-height:13px; transition:opacity .18s ease; }
.message-media-button { display:block; max-width:100%; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:#09090b; cursor:zoom-in; box-shadow:0 10px 28px rgba(0,0,0,.2); }
.message-media { width:min(390px,68vw)!important; height:auto!important; max-height:380px!important; aspect-ratio:auto!important; margin:0!important; border:0!important; border-radius:17px!important; object-fit:contain!important; background:#09090b; }
img.message-media { display:block; min-height:120px; }
video.message-media { display:block; }
.message-lightbox { display:grid; justify-items:center; gap:12px; }
.message-lightbox img { max-width:min(82vw,900px); max-height:76vh; border-radius:16px; object-fit:contain; }
.message-lightbox a { color:#bdb5ff; font-size:12px; }
.typing-state { display:flex; align-items:center; gap:8px; min-height:25px; }
.typing-dots { display:inline-flex; align-items:center; gap:3px; padding:5px 8px; border-radius:999px; background:#17171a; }
.typing-dots i { width:4px; height:4px; border-radius:50%; background:#a99df6; animation:mzz-typing 1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay:.14s; }
.typing-dots i:nth-child(3) { animation-delay:.28s; }
.composer-media-preview { min-height:60px; padding:8px 14px!important; gap:12px; }
.composer-upload-thumb { min-width:0; display:flex; align-items:center; gap:10px; }
.composer-upload-thumb>img,.composer-upload-thumb>video { width:42px; height:42px; flex:none; border-radius:10px; object-fit:cover; background:#09090b; }
.composer-upload-thumb>span { min-width:0; display:grid; gap:2px; }
.composer-upload-thumb strong { max-width:min(45vw,360px); overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.composer-upload-thumb small { color:var(--muted); font-size:10px; }
.upload-spinner { width:18px; height:18px; flex:none; border:2px solid rgba(255,255,255,.13); border-top-color:#9c8df3; border-radius:50%; animation:mzz-spin .75s linear infinite; }
.profile-avatar-picker.is-dragging { outline:2px solid #8b7cff; outline-offset:4px; transform:scale(1.035); }
.profile-avatar-picker.is-uploading { pointer-events:none; }
.profile-avatar-picker.is-uploading:after { content:""; position:absolute; inset:7px; border:2px solid rgba(255,255,255,.22); border-top-color:#fff; border-radius:50%; animation:mzz-spin .75s linear infinite; z-index:3; }
@keyframes mzz-message-arrive { from { opacity:0; transform:translateY(8px) scale(.965); } to { opacity:1; transform:none; } }
@keyframes mzz-typing { 0%,60%,100% { opacity:.35; transform:translateY(0); } 30% { opacity:1; transform:translateY(-2px); } }
@keyframes mzz-spin { to { transform:rotate(360deg); } }

@media (max-width:760px) {
  .screen[data-screen="messages"] .message-stream { padding:14px 12px 8px!important; }
  .message-unit { max-width:86%!important; }
  .message-media { width:min(72vw,340px)!important; max-height:46vh!important; }
  .screen[data-screen="messages"] .conversation-head { min-height:62px!important; padding:9px 12px!important; }
  .composer-upload-thumb strong { max-width:52vw; }
}