/* Final dark-theme surface audit. This stylesheet loads after every feature stylesheet. */
html[data-theme-color="dark"] {
  --surface: #1c1c1e;
  --surface-2: #28282a;
  --section-bg: #1c1c1e;
  --row-bg: #1c1c1e;
  --raised-bg: #28282a;
  --card-bg: #1c1c1e;
  --topbar-bg: #1c1c1e;
}

html[data-theme-color="dark"] .market-page,
html[data-theme-color="dark"] .my-market-page,
html[data-theme-color="dark"] .market-publish-page,
html[data-theme-color="dark"] .market-detail-page,
html[data-theme-color="dark"] .member-benefit-page.tone-member,
html[data-theme-color="dark"] .member-benefit-page.tone-pro {
  background: #111111 !important;
}

html[data-theme-color="dark"] .market-publish-progress {
  color: #e8f6ef;
  background: rgba(28, 28, 30, .97);
  border-color: #315e4d;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}

html[data-theme-color="dark"] .market-publish-progress-copy span {
  color: #a9b7b0;
}

html[data-theme-color="dark"] .market-publish-progress > b {
  color: #7fe2b4;
}

html[data-theme-color="dark"] .my-market-notice,
html[data-theme-color="dark"] .my-market-tabs,
html[data-theme-color="dark"] .my-market-listing,
html[data-theme-color="dark"] .detail-summary-card .turtle-menu,
html[data-theme-color="dark"] .feedback-post,
html[data-theme-color="dark"] .ledger-thumb-placeholder,
html[data-theme-color="dark"] .market-promise-strip,
html[data-theme-color="dark"] .market-search-wrap,
html[data-theme-color="dark"] .market-stage-tabs,
html[data-theme-color="dark"] .market-form-card,
html[data-theme-color="dark"] .market-safe-note,
html[data-theme-color="dark"] .market-empty > span,
html[data-theme-color="dark"] .market-detail-main,
html[data-theme-color="dark"] .market-detail-specs,
html[data-theme-color="dark"] .market-detail-description,
html[data-theme-color="dark"] .market-seller-card,
html[data-theme-color="dark"] .market-detail-page > .market-safe-note,
html[data-theme-color="dark"] .market-sale-dialog,
html[data-theme-color="dark"] .market-service-dialog,
html[data-theme-color="dark"] .moderation-report-card,
html[data-theme-color="dark"] .member-tier-stage {
  color: #e7e7e7 !important;
  background: #1c1c1e !important;
  border-color: #303033 !important;
  box-shadow: none !important;
}

html[data-theme-color="dark"] .market-sale-price > div,
html[data-theme-color="dark"] .my-market-tabs button,
html[data-theme-color="dark"] .my-market-listing-actions button,
html[data-theme-color="dark"] .detail-menu button,
html[data-theme-color="dark"] .market-photo-card > button,
html[data-theme-color="dark"] .market-stage-tabs button,
html[data-theme-color="dark"] .market-sale-methods span,
html[data-theme-color="dark"] .market-sale-head > button,
html[data-theme-color="dark"] .market-sale-buttons button:first-child,
html[data-theme-color="dark"] .market-service-head > button,
html[data-theme-color="dark"] .market-service-wechat,
html[data-theme-color="dark"] .market-service-code,
html[data-theme-color="dark"] .market-service-buttons button:first-child,
html[data-theme-color="dark"] .seller-store-head > button.active,
html[data-theme-color="dark"] .market-delete-action,
html[data-theme-color="dark"] .market-sold-disabled,
html[data-theme-color="dark"] .market-seller-actions button,
html[data-theme-color="dark"] .market-contact-action,
html[data-theme-color="dark"] .market-detail-favorite,
html[data-theme-color="dark"] .market-media-add,
html[data-theme-color="dark"] .community-chat-product-media,
html[data-theme-color="dark"] .turtle-pool-mark,
html[data-theme-color="dark"] .member-right-item.member .right-icon {
  color: #e7e7e7 !important;
  background: #29292b !important;
  border-color: #3a3a3d !important;
}

html[data-theme-color="dark"] .my-market-tabs button.active,
html[data-theme-color="dark"] .market-stage-tabs button.active {
  color: #f1f1f1 !important;
  background: #343438 !important;
  box-shadow: none !important;
}

html[data-theme-color="dark"] .my-market-listing-actions button.refresh {
  color: #ecfff5 !important;
  background: #237958 !important;
  border-color: #237958 !important;
}

html[data-theme-color="dark"] .my-market-listing-actions button.offline {
  color: #f3d4d8 !important;
  background: #302729 !important;
  border-color: #473437 !important;
}

html[data-theme-color="dark"] .bottom-nav {
  background: #19191b !important;
  border-color: #303033 !important;
}

html[data-theme-color="dark"] .market-card-photo,
html[data-theme-color="dark"] .my-market-media,
html[data-theme-color="dark"] .ledger-thumb-placeholder,
html[data-theme-color="dark"] .community-chat-product-media {
  background: #29292b !important;
}

html[data-theme-color="dark"] .ledger-thumb-placeholder span,
html[data-theme-color="dark"] .ledger-row .ledger-inline-type.purchase,
html[data-theme-color="dark"] .ledger-row .ledger-inline-type.sold,
html[data-theme-color="dark"] .ledger-row .ledger-inline-type.loss,
html[data-theme-color="dark"] .market-card-delivery,
html[data-theme-color="dark"] .market-detail-price span,
html[data-theme-color="dark"] .market-title-templates button,
html[data-theme-color="dark"] .ledger-turtle-meta span {
  color: #b7d6c9 !important;
  border-color: #31473e !important;
  background: #20342b !important;
}

html[data-theme-color="dark"] .market-sale-methods input:checked + span,
html[data-theme-color="dark"] .market-seller-actions button.active {
  color: #d9f4e7 !important;
  border-color: #315b49 !important;
  background: #214435 !important;
}

html[data-theme-color="dark"] .market-service-wechat,
html[data-theme-color="dark"] .market-service-code {
  border-color: #3a3a3d !important;
}

html[data-theme-color="dark"] .market-service-wechat strong {
  color: #a7e2c4 !important;
}

html[data-theme-color="dark"] .my-market-listing-main em {
  color: #a7e2c4 !important;
  background: #214435 !important;
}

html[data-theme-color="dark"] .my-market-listing.is-inactive em,
html[data-theme-color="dark"] .moderation-report-head > em.pending,
html[data-theme-color="dark"] .moderation-report-head > em.removed,
html[data-theme-color="dark"] .moderation-report-actions .danger,
html[data-theme-color="dark"] .member-tier-stage.tone-member::after,
html[data-theme-color="dark"] .care-action-panel .home-module-action.breeding-action > span,
html[data-theme-color="dark"] .care-action-panel .home-module-action.ledger-action > span {
  background: #29292b !important;
}
/* Native app polish: the web shell must fill an iPhone edge to edge. */
html, body, #app { width: 100%; min-width: 0; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior-y: auto; overflow-x: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
/* Long-pressing a chat bubble must behave like a normal messenger: message
   text can be selected and copied, while the rest of the app stays protected
   from accidental selection during gestures. */
.community-chat-page .community-message p,
.community-chat-page .community-official-reminder p {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
@media (max-width: 600px) {
  body { background: var(--bg); }
  .phone-shell { width: 100vw; max-width: none; margin: 0; box-shadow: none; }
  .community-chat-form { width: 100vw; max-width: none; }
}

/* Chat avatars mark the beginning of a received message group. */
.community-message-body { display: flex; align-items: flex-start; gap: 8px; }
.community-message.mine .community-message-body { justify-content: flex-end; }
.community-message-content { min-width: 0; display: grid; gap: 5px; }
.community-chat-message-avatar { width: 32px; height: 32px; flex: 0 0 32px; padding: 0; overflow: hidden; border-radius: 50%; background: transparent; }
.community-chat-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; object-fit: cover; }
.community-chat-avatar-spacer { width: 32px; height: 32px; flex: 0 0 32px; }
.community-message.mine .community-message-media { justify-self: end; }

/* Conversation actions use the WKWebView's native horizontal scroller.  The
   card and its action rail are one scrollable strip, so iOS owns tracking,
   inertia and reversal instead of two JavaScript-transformed layers. */
.message-friend-swipe { --message-swipe-actions-width: 144px; position: relative; isolation: isolate; display: flex; overflow-x: auto; overflow-y: hidden; background: var(--section-bg); touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scroll-behavior: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; contain: layout paint; }
.message-friend-swipe::-webkit-scrollbar { display: none; }
.message-friend-actions { position: relative; inset: auto; z-index: 0; flex: 0 0 var(--message-swipe-actions-width); width: var(--message-swipe-actions-width); display: flex; visibility: visible; opacity: 1; pointer-events: auto; transform: none; scroll-snap-align: end; scroll-snap-stop: always; }
.message-friend-actions button { flex: 0 0 72px; width: 72px; border-radius: 0; color: #fff; background: #4b9f7d; font-size: 13px; font-weight: 700; }
.message-friend-actions .delete { background: #e45762; }
.message-friend-row { position: relative; z-index: 1; display: flex; box-sizing: border-box; flex: 0 0 100%; min-width: 100%; max-width: 100%; transform: none; scroll-snap-align: start; scroll-snap-stop: always; contain: paint; }

/* Interactive edge-swipe back: page follows the finger and rebounds if released early. */
#app { position: relative; z-index: 2; touch-action: pan-y; }
#app.edge-back-dragging { transition: none !important; will-change: transform; }
.edge-back-preview {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
  pointer-events: none;
  background: var(--bg);
  /* The previous inset shadow made the returned page visibly brighten as the
     preview layer was removed, which users understandably perceived as a
     refresh. The source page now stays at its real brightness throughout. */
  box-shadow: none;
  transform: translate3d(-22%, 0, 0);
  will-change: transform;
  contain: layout paint;
}
.edge-back-preview::-webkit-scrollbar { display: none; }
.edge-back-preview * { animation: none !important; transition: none !important; caret-color: transparent !important; }
.edge-back-preview video,
.edge-back-preview audio,
.edge-back-preview iframe,
.edge-back-preview canvas { display: none !important; }
.edge-back-media-placeholder,
.edge-back-image-placeholder { display: block; min-width: 36px; min-height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, var(--raised-bg)); }
/* On real touch devices, a fixed live backdrop blur has to be repainted while
   content moves underneath it. Stable opaque surfaces keep scrolling and pull
   refresh on the compositor instead. */
@media (hover: none) and (pointer: coarse) {
  .topbar,
  .bottom-nav,
  .community-chat-form,
  .community-chat-tools,
  .community-chat-product-context {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .home-turtle-card,
  .turtle-row,
  .ledger-row,
  .memo-row,
  .breed-row,
  .market-card,
  .message-friend-swipe,
  .community-moment {
    contain: paint;
  }
}

/* In dark mode inactive chips are plain text, like the light theme. */
html[data-theme-color="dark"] .market-stage-tabs { background: #181818 !important; border-color: #292929 !important; }
html[data-theme-color="dark"] .market-stage-tabs button { color: #c4c4c6 !important; background: transparent !important; }
html[data-theme-color="dark"] .market-stage-tabs button.active { color: #fff !important; background: #245f70 !important; }

/* Responsive application frame: phones are edge-to-edge; larger screens use their
   available width instead of a 430px phone mockup.  Every fixed surface shares
   the same frame width, so headers, tab bar and chat composer stay aligned. */
:root { --responsive-app-width: 100vw; }
@media (min-width: 601px) {
  :root { --responsive-app-width: min(1180px, calc(100vw - 32px)); }
  body { background: var(--body-bg); }
  .phone-shell {
    width: var(--responsive-app-width) !important;
    min-height: 100dvh;
    margin: 0 auto;
    box-shadow: 0 0 36px rgba(0, 0, 0, .08);
  }
  .topbar,
  .bottom-nav,
  .phone-shell .bottom-nav,
  .community-chat-form,
  .community-chat-tools,
  .community-chat-product-context,
  .phone-shell::before {
    width: var(--responsive-app-width) !important;
  }
  .community-chat-list {
    width: 100%;
    margin-inline: 0;
  }
  .community-message p { max-width: min(78%, 620px); }
}

@media (min-width: 601px) and (max-width: 820px) {
  :root { --responsive-app-width: calc(100vw - 24px); }
}

/* Chat text uses a stable reading column: roughly 16 Chinese characters per
 * line. Do not let the flex item collapse to its one-character min-content
 * width, which would turn ordinary messages into a vertical stack. */
.community-message-content {
  width: fit-content;
  max-width: min(78vw, calc(16em + 24px));
}
.community-message.mine .community-message-content { margin-left: auto; }
.community-message p {
  display: block;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
}

/* Built-in avatar picker in account settings. */
.default-avatar-picker {
  margin: 14px 0 4px;
  padding: 13px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--raised-bg);
}
.default-avatar-picker > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.default-avatar-picker strong { color: var(--ink); font-size: 14px; }
.default-avatar-picker span { color: var(--muted); font-size: 11px; }
.default-avatar-grid { margin-top: 11px; display: grid; grid-template-columns: repeat(auto-fill, 68px); gap: 10px; }
.default-avatar-option { aspect-ratio: 1; min-width: 0; padding: 2px; border: 2px solid transparent; border-radius: 50%; background: transparent; }
.default-avatar-option img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.default-avatar-option.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
html[data-theme-color="dark"] .default-avatar-picker { border-color: #303033; background: #202020; }
@media (min-width: 601px) { .default-avatar-grid { grid-template-columns: repeat(auto-fill, 92px); gap: 12px; } }