/* MindChat AI · shared mobile foundation
 * Presentation only: business rules and API contracts stay in each page.
 */
:root {
  --mc-gutter: clamp(16px, 4.6vw, 28px);
  --mc-section-gap: clamp(40px, 9vw, 72px);
  --mc-card-radius: 18px;
  --mc-touch: 44px;
  --mc-header-h: 64px;
  --mc-safe-top: env(safe-area-inset-top, 0px);
  --mc-safe-right: env(safe-area-inset-right, 0px);
  --mc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mc-safe-left: env(safe-area-inset-left, 0px);
  --mc-z-base: 0;
  --mc-z-sticky: 20;
  --mc-z-floating: 30;
  --mc-z-backdrop: 100;
  --mc-z-drawer: 110;
  --mc-z-modal: 120;
  --mc-z-toast: 130;
}

/* Keep page scroll locked even if a host WebView exposes DOM observers late. */
html:has(.modal.open), html:has(.modal.show), html:has(.st-mask.on), html:has(#overlay:not([style*="display: none"])), html:has(#payModal.show),
html.mc-overlay-open { overflow: hidden; }
html:has(.modal.open) body, html:has(.modal.show) body, html:has(.st-mask.on) body,
html:has(#overlay:not([style*="display: none"])) body, html:has(#payModal.show) body, html.mc-overlay-open body { overflow: hidden; }

html {
  min-width: 0;
  scroll-padding-top: calc(var(--mc-header-h) + var(--mc-safe-top) + 16px);
}

body {
  min-width: 0;
  overflow-x: visible;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { min-width: 0; }

a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold, #f0a240) 75%, white 25%);
  outline-offset: 3px;
  }

button, [role="button"] { min-height: var(--mc-touch); }
input, select, textarea { font-size: max(16px, 1em); }
img, video, canvas, svg { max-width: 100%; }

/* Global overlays: the individual page still owns the open/close logic. */
html.mc-overlay-open, html.mc-overlay-open body { overflow: hidden; }
[aria-modal="true"] { overscroll-behavior: contain; }

/* Marketing / index presentation */
@media (max-width: 768px) {
  button, [role="button"], a.btn, a.btn-gold, summary { min-height: 46px; }
  .wrap {
    width: 100%;
    max-width: none;
    padding-inline: var(--mc-gutter) !important;
  }

  section { padding-block: var(--mc-section-gap); scroll-margin-top: calc(var(--mc-header-h) + var(--mc-safe-top) + 14px); }
  footer { padding-bottom: calc(32px + var(--mc-safe-bottom)); }

  /* The index uses a desktop-fixed header; make the mobile header a compact, shared bar. */
  body:has(#sky) > nav {
    position: fixed;
    inset: 0 0 auto;
    height: calc(var(--mc-header-h) + var(--mc-safe-top));
    padding: var(--mc-safe-top) 0 0;
    z-index: var(--mc-z-sticky);
    backdrop-filter: blur(12px);
  }
  body:has(#sky) > nav .nav-inner {
    width: 100%;
    max-width: none;
    height: var(--mc-header-h);
    padding-inline: var(--mc-gutter);
  }
  body:has(#sky) > nav .brand {
    position: static;
    left: auto;
    top: auto;
    gap: 8px;
    font-size: 16px;
  }
  body:has(#sky) > nav .brand img { width: 34px; height: 34px; border-radius: 9px; }
  body:has(#sky) > nav .nav-right {
    position: static;
    top: auto;
    right: auto;
    gap: 6px;
    margin-left: auto;
  }
  body:has(#sky) > nav .nav-btn { display: none; }
  body:has(#sky) > nav .nav-frame-wrap {
    --nav-size: 34px;
    width: calc(var(--nav-size) * 1.62);
    height: calc(var(--nav-size) * 1.52);
  }
  body:has(#sky) > nav .nav-frame-wrap .av {
    width: 34px;
    height: 34px;
  }
  body:has(#sky) > nav .user-pill { min-height: var(--mc-touch); min-width: var(--mc-touch); justify-content: center; }
  body.nav-hidden:has(#sky) > nav, body.nav-hidden:has(#sky) > .brand, body.nav-hidden:has(#sky) > .nav-right { transform: none !important; }

  /* Spirits and membership share the same visual shell but use a `.nav` class. */
  body:has(> .nav) { padding-top: calc(var(--mc-header-h) + var(--mc-safe-top)) !important; }
  body > .nav {
    position: fixed !important;
    inset: 0 0 auto !important;
    height: calc(var(--mc-header-h) + var(--mc-safe-top)) !important;
    padding: var(--mc-safe-top) var(--mc-gutter) 0 !important;
    z-index: var(--mc-z-sticky) !important;
    backdrop-filter: blur(12px);
  }
  body > .nav .brand { position: static; max-width: 66%; font-size: 15px; gap: 8px; }
  body > .nav .brand img { width: 34px; height: 34px; }
  body > .nav .navR { min-width: 0; gap: 4px; margin-left: auto; }
  body > .nav .bb { min-height: var(--mc-touch); display: inline-flex; align-items: center; padding-inline: 8px; font-size: 12px; white-space: normal; text-align: right; }
  body > .nav .nav-frame-wrap { --nav-size: 34px; width: calc(var(--nav-size) * 1.62); height: calc(var(--nav-size) * 1.52); }
  body > .nav .nav-frame-wrap .av { width: 34px; height: 34px; }

body > .user-panel {
    visibility: hidden;
  }
  body > .user-panel.open {
    visibility: visible;
  }
body > .user-panel {
    top: calc(var(--mc-header-h) + var(--mc-safe-top) + 8px) !important;
    right: var(--mc-gutter) !important;
    left: auto;
    width: min(320px, calc(100% - 2 * var(--mc-gutter))) !important;
    max-height: min(70dvh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: var(--mc-z-drawer);
  }
  html:has(#user-panel.open) { overflow: hidden; }
  html:has(#user-panel.open) body { overflow: hidden; }
  body:has(> .user-panel.open)::before { content: ''; position: fixed; inset: 0; z-index: var(--mc-z-backdrop); background: rgba(4,3,2,.66); pointer-events: auto; }
  body > .user-panel.quick-drawer {
    top: calc(var(--mc-header-h) + var(--mc-safe-top)) !important;
    right: 0 !important;
    left: auto !important;
    width: min(348px, calc(100% - 48px)) !important;
    height: calc(100dvh - var(--mc-header-h) - var(--mc-safe-top));
    max-height: none;
    border-radius: 22px 0 0 0;
    transform: translateX(100%) !important;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body > .user-panel.quick-drawer.open { transform: translateX(0) !important; opacity: 1; visibility: visible; }
  body > .user-panel.quick-drawer .up-head > .btn-gold { display: none; }
  body > .user-panel.quick-drawer .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body > .user-panel.quick-drawer .panel-close { position: absolute; }

  .hero {
    padding-top: calc(var(--mc-header-h) + var(--mc-safe-top) + 28px);
    padding-bottom: 36px;
  }
  .hero h1 { font-size: clamp(29px, 8.4vw, 38px); letter-spacing: -0.6px; line-height: 1.16; }
  .hero p.sub { font-size: 16px; line-height: 1.75; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
  .hero-actions .btn-gold, .hero-actions .btn-ghost { width: 100%; min-height: 48px; }
  .phone-shell { max-width: min(250px, 72vw); }
  .social { justify-content: flex-start; }
  .social-avatars { width: min(220px, 60vw); }
  .social-track { animation: none; transform: none !important; }

  .section-title { font-size: clamp(26px, 7vw, 34px); line-height: 1.22; }
  .section-sub { font-size: 15px; line-height: 1.75; }
  .pain-grid { grid-template-columns: 1fr; }
  .growth-stages { grid-template-columns: 1fr 1fr; }
  .companion-card { padding: 18px; overflow: clip; }
  .evo-track { min-width: 0; padding-inline: 0; }
  .evo-node { width: 25%; min-width: 0; }
  .evo-node .beast-orb { width: clamp(38px, 12vw, 50px); height: clamp(38px, 12vw, 50px); }
  .evo-name { font-size: clamp(11px, 3.2vw, 13px); text-align: center; overflow-wrap: anywhere; }
  .evo-th { font-size: 10px; text-align: center; overflow-wrap: anywhere; }
  .evo-line { left: 8%; right: 8%; top: 24px; }
  .evo-node.cur::after { right: 0; }

  .modal {
    z-index: var(--mc-z-modal);
    align-items: flex-start;
    overflow-y: auto;
    padding: calc(12px + var(--mc-safe-top)) var(--mc-gutter) calc(12px + var(--mc-safe-bottom));
  }
  .modal-card {
    width: 100%;
    max-width: 440px;
    max-height: calc(100dvh - 24px - var(--mc-safe-top) - var(--mc-safe-bottom));
    overflow-y: auto;
    margin: auto;
    padding: 28px 20px;
  }
  .modal-close, .st-close { width: var(--mc-touch); height: var(--mc-touch); min-width: var(--mc-touch); }
  .st-mask {
    z-index: var(--mc-z-modal);
    padding: calc(var(--mc-header-h) + var(--mc-safe-top) + 12px) var(--mc-gutter) calc(16px + var(--mc-safe-bottom));
  }
  .st-panel {
    width: 100%;
    max-width: 760px;
    max-height: calc(100dvh - var(--mc-header-h) - 28px - var(--mc-safe-top) - var(--mc-safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
  }
  .scroll-top { display: none !important; }

  /* Generic page header / legal / form surfaces */
  .top {
    width: 100%;
    min-height: var(--mc-header-h);
    height: auto;
    padding-top: var(--mc-safe-top);
    padding-bottom: 8px;
  }
  .top .brand { min-width: 0; max-width: 72%; font-size: 16px; }
  .top .brand span { overflow-wrap: anywhere; }
  .top .back, .nav-home, header .back { min-height: var(--mc-touch); display: inline-flex; align-items: center; }
  main { padding-block: 32px calc(56px + var(--mc-safe-bottom)); }
  main h1 { font-size: clamp(25px, 7.4vw, 32px); line-height: 1.25; overflow-wrap: anywhere; }
  .card { border-radius: var(--mc-card-radius); }
  .field, label { min-width: 0; }
  .ticket { min-width: 0; }
  .ticket .meta { overflow-wrap: anywhere; }

  /* Chat is a task surface: reserve the input zone and keep the login box in view. */
  body:has(#messages) { min-height: 100svh; }
  body:has(#messages) .wrap { height: 100dvh; min-height: 100svh; }
  body:has(#messages) #overlay { position: fixed; inset: 0; overflow-y: auto; padding: calc(16px + var(--mc-safe-top)) var(--mc-gutter) calc(16px + var(--mc-safe-bottom)); }
  body:has(#messages) #overlay .box { width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px 20px; margin: auto; }
  body:has(#messages) #overlay input, body:has(#messages) #input { font-size: 16px; }
  body:has(#messages) footer { padding-bottom: calc(10px + var(--mc-safe-bottom)); }

  /* Commerce: compare first, keep payment controls reachable on short screens. */
  .pay-box { width: min(100%, 520px) !important; max-height: calc(100dvh - 24px - var(--mc-safe-top) - var(--mc-safe-bottom)); overflow-y: auto; }
  .pay-close-x { width: var(--mc-touch) !important; height: var(--mc-touch) !important; min-width: var(--mc-touch); }
}

/* Tablet edge case: the growth chart's absolute SVG used to add a 16px
 * left offset on an already full-width parent. Keep the desktop composition,
 * but make the 769-900px tablet band viewport-safe. */
@media (min-width: 769px) and (max-width: 900px) {
  .evo-svg { left: 0; width: 100%; }
}

@media (max-width: 380px) {
  :root { --mc-gutter: 14px; }
  .hero h1 { font-size: 28px; }
  .hero p.sub { font-size: 15px; }
  .growth-stages { grid-template-columns: 1fr; }
  .modal-card, .st-panel { padding-inline: 16px; }
  body > .user-panel.quick-drawer { width: calc(100% - 36px) !important; }
  body:has(.hero-avatar-wrap) .hero-avatar-wrap { --pet-size: 110px !important; width: min(calc(var(--pet-size) * 2.42), 100%) !important; }
  body:has(.hero-avatar-wrap) .hero-pet { --pet-size: 110px !important; }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root { --mc-header-h: 56px; }
  body:has(#sky) > nav .nav-inner { height: var(--mc-header-h); }
  .hero { padding-top: calc(var(--mc-header-h) + var(--mc-safe-top) + 18px); }
  .modal-card, .st-panel { max-height: calc(100dvh - 16px - var(--mc-safe-top) - var(--mc-safe-bottom)); }
}

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

/* ================================================================
 * Mobile-native information architecture · 方案三：标签页切换
 * Only active under 768px. Desktop keeps the page's existing layout.
 * ================================================================ */
.mc-mobile-tabs,
.mc-commerce-tabs,
.mc-mobile-bottom,
.mc-category-picker,
.mc-mobile-reveal { display: none; }

@media (max-width: 768px) {
  body.mc-primary-surface {
    padding-bottom: calc(76px + var(--mc-safe-bottom)) !important;
  }

  .mc-mobile-tabs,
  .mc-commerce-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    min-height: 52px;
    margin: 0 var(--mc-gutter) 12px;
    padding: 4px;
    background: rgba(21, 17, 12, .94);
    border: 1px solid rgba(240, 162, 64, .18);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
  }

  .mc-mobile-tabs {
    position: sticky;
    top: calc(var(--mc-header-h) + var(--mc-safe-top));
    z-index: var(--mc-z-sticky);
  }

  .mc-commerce-tabs {
    position: sticky;
    top: calc(var(--mc-header-h) + var(--mc-safe-top));
    z-index: var(--mc-z-sticky);
  }

  body.mc-page-skills .mc-mobile-tabs { top: 0; }
  body.mc-page-member .mc-commerce-tabs { top: calc(var(--mc-header-h) + var(--mc-safe-top)); }

  /* The inventory page keeps its useful metrics, but does not let a desktop-
   * sized stats header push the primary destination switcher below the fold. */
  body.mc-page-skills > header { padding: 16px var(--mc-gutter) 14px; }
  body.mc-page-skills > header .wrap { padding: 0; }
  body.mc-page-skills > header h1 { font-size: clamp(21px, 6vw, 25px); line-height: 1.22; }
  body.mc-page-skills > header .sub { margin-bottom: 12px; font-size: 12px; line-height: 1.45; }
  body.mc-page-skills > header .stats { gap: 6px; }
  body.mc-page-skills > header .stat { padding: 8px 10px; }
  body.mc-page-skills > header .stat b { font-size: 19px; }
  body.mc-page-skills > header .search { margin: 12px 0 0; }

  /* Growth is a dashboard, so the mobile hero exposes identity and status in
   * one compact row instead of spending the first screen on artwork. */
  body.mc-page-growth #hero-sec .hero {
    display: grid;
    grid-template-columns: minmax(116px, 34vw) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 18px 14px;
    text-align: left;
  }
  body.mc-page-growth #hero-sec .hero-avatar-wrap {
    grid-column: 1;
    grid-row: 1;
    width: clamp(116px, 34vw, 132px);
    height: 116px;
    margin-left: 0;
    --pet-size: clamp(54px, 17vw, 68px);
  }
  body.mc-page-growth #hero-sec .hero-pet {
    --pet-size: clamp(54px, 17vw, 68px);
  }
  body.mc-page-growth #hero-sec .hero-info {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
  }
  body.mc-page-growth #hero-sec .hero-info .eyebrow {
    font-size: 9px;
    letter-spacing: .12em;
    line-height: 1.3;
  }
  body.mc-page-growth #hero-sec .hero-info h1 {
    font-size: 21px;
    line-height: 1.2;
    margin: 3px 0;
  }
  body.mc-page-growth #hero-sec .hero-info .days {
    font-size: 12px;
    margin-bottom: 7px;
  }
  body.mc-page-growth #hero-sec .ring-wrap {
    justify-content: flex-start;
    gap: 8px;
    margin: 4px 0 8px;
  }
  body.mc-page-growth #hero-sec .ring {
    width: 68px;
    height: 68px;
  }
  body.mc-page-growth #hero-sec .ring::after { inset: 6px; }
  body.mc-page-growth #hero-sec .ring .lv b { font-size: 20px; }
  body.mc-page-growth #hero-sec .ring-meta .big { font-size: 13px; }
  body.mc-page-growth #hero-sec .ring-meta .sub,
  body.mc-page-growth #hero-sec .ring-meta .chip { font-size: 10px; }
  body.mc-page-growth #hero-sec .hero-actions {
    grid-column: 1 / -1;
    margin-top: 2px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.mc-page-growth #hero-sec .hero-actions .btn {
    min-width: 0;
    width: 100%;
  }

  .mc-mobile-tab,
  .mc-commerce-tab {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 5px;
    border: 0;
    border-radius: 12px;
    color: #a99b87;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }

  .mc-mobile-tab[aria-current="page"],
  .mc-commerce-tab[aria-current="page"] {
    color: #1e1408;
    background: #f0a240;
    box-shadow: 0 6px 16px rgba(240, 162, 64, .18);
  }

  .mc-mobile-bottom {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--mc-z-floating);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    min-height: calc(66px + var(--mc-safe-bottom));
    padding: 5px 8px var(--mc-safe-bottom);
    background: rgba(10, 9, 8, .95);
    border-top: 1px solid rgba(240, 162, 64, .18);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body:has(#sky) > nav.mc-mobile-bottom {
    position: fixed !important;
    inset: auto 0 0 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    padding: 5px 8px var(--mc-safe-bottom) !important;
    z-index: var(--mc-z-floating) !important;
    background: rgba(10, 9, 8, .95) !important;
  }

  .mc-mobile-bottom a {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border-radius: 12px;
    color: #8f8475;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }

  .mc-mobile-bottom a[aria-current="page"] {
    color: #ffd27f;
    background: rgba(240, 162, 64, .1);
  }

  .mc-mobile-bottom a:focus-visible,
  .mc-mobile-tab:focus-visible,
  .mc-commerce-tab:focus-visible,
  .mc-category-picker select:focus-visible,
  .mc-mobile-reveal:focus-visible {
    outline: 3px solid color-mix(in srgb, #f0a240 75%, white 25%);
    outline-offset: 2px;
  }

  /* Skills: category navigation becomes a native one-choice control. */
  body.mc-page-skills .mc-category-picker {
    display: block;
    margin: 0 var(--mc-gutter) 12px;
  }

  body.mc-page-skills .mc-category-picker label {
    display: block;
    margin-bottom: 6px;
    color: #9a9388;
    font-size: 12px;
    font-weight: 700;
  }

  body.mc-page-skills .mc-category-picker select {
    width: 100%;
    min-height: 48px;
    padding: 0 40px 0 14px;
    color: #efe7da;
    background: #17150f;
    border: 1px solid rgba(240, 162, 64, .35);
    border-radius: 12px;
    font-size: 16px;
  }

  body.mc-page-skills .mc-legacy-category-nav { display: none !important; }
  body.mc-page-skills .cat:not(.mc-category-active):not(.mc-search-result) { display: none; }
  body.mc-page-skills .cat.mc-category-active { display: block; }
  body.mc-page-skills .cat.mc-category-active:not(.is-expanded) .grid {
    max-height: 430px;
    overflow: hidden;
  }
  body.mc-page-skills .cat.mc-category-active:not(.is-expanded) .grid::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 86px;
    pointer-events: none;
    background: linear-gradient(transparent, var(--bg));
  }
  body.mc-page-skills.mc-searching .cat:not(.mc-search-result) { display: none; }
  body.mc-page-skills.mc-searching .cat.mc-search-result { display: block; }
  body.mc-page-skills.mc-searching .cat.mc-search-result .grid {
    max-height: none;
    overflow: visible;
  }

  /* Spirits: the growth task is first; skins and full skill inventory are progressive disclosure. */
  body.mc-page-growth.mc-growth-compact #skins-sec,
  body.mc-page-growth.mc-growth-compact #skill-sec { display: none; }
  body.mc-page-growth.mc-growth-expanded #skins-sec,
  body.mc-page-growth.mc-growth-expanded #skill-sec { display: block; }
  .mc-mobile-reveal {
    width: calc(100% - 2 * var(--mc-gutter));
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px var(--mc-gutter) 4px;
    padding: 10px 16px;
    color: #f6d18d;
    background: rgba(240, 162, 64, .08);
    border: 1px solid rgba(240, 162, 64, .32);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
  }

  /* Commerce gets decision anchors without turning the purchase page into tabs-only UI. */
  .mc-commerce-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.mc-page-member .mc-commerce-tabs { margin-bottom: 18px; }

  /* Memory is a focused mobile destination, not the whole marketing page. */
  body.mc-focus-memory > section:not(#memory),
  body.mc-focus-memory > footer,
  body.mc-focus-memory > .scroll-top { display: none !important; }
  body.mc-focus-memory #memory {
    display: block !important;
    padding-top: calc(var(--mc-header-h) + var(--mc-safe-top) + 28px);
  }

  @media (max-height: 620px) {
    .mc-mobile-bottom { min-height: calc(56px + var(--mc-safe-bottom)); }
    .mc-mobile-bottom a { min-height: 46px; padding-block: 5px; }
  }
}