/* ============================================
   profile-phone.css — Phone-only profile shell
   Every rule is scoped under .profile-view-shell.is-phone instead of an
   @media query — profile-phone.js only ever sets that class (it's the
   phone shell; profile-desktop.js sets .is-desktop instead), so the class
   itself is the platform gate. Specificity (an extra class) is enough to
   beat any plain-class desktop-base rule in profile.css on its own — no
   !important or ID-based specificity tricks needed anywhere in this file.
   ============================================ */

/* ---- Layout: collapse to single column, identity on top ----
   Moved here from profile.css's old mobile block (now deleted) — still
   needed, phone's info-col/grid-col are full-width stacked siblings, not
   desktop's 2-column grid. */

.profile-view-shell.is-phone {
  display: flex;
  flex-direction: column;
  overflow: visible;
  min-height: unset;
}

.profile-view-shell.is-phone .profile-info-col {
  order: -1;
  width: 100%;
  border-left: none;
  border-bottom: none;
  position: static;
  height: auto;
  overflow-y: visible;
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
}

.profile-view-shell.is-phone .profile-grid-col {
  order: 0;
  width: 100%;
  overflow-y: visible;
  height: auto;
  padding-top: 0;
}

.profile-view-shell.is-phone .profile-tabs {
  margin-bottom: 0;
}

.profile-view-shell.is-phone .profile-tab {
  flex: 1;
}

.profile-view-shell.is-phone .profile-pages-grid {
  grid-template-columns: repeat(3, 1fr);
}

.profile-view-shell.is-phone .profile-stickers-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ---- Header: left-aligned photo + identity column ---- */

.profile-view-shell.is-phone .profile-phone-header {
  display: block;
  width: 100%;
}

.profile-view-shell.is-phone .profile-phone-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
}

.profile-view-shell.is-phone .profile-phone-avatar-wrap {
  flex-shrink: 0;
}

.profile-view-shell.is-phone .profile-phone-avatar {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  background: var(--gradient-accent);
  font-family: var(--font-display);
  overflow: hidden;
}

.profile-view-shell.is-phone .profile-phone-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  padding-top: 2px;
}

.profile-view-shell.is-phone .profile-phone-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-view-shell.is-phone .profile-phone-handle {
  font-size: 14px;
  color: #8a8a99;
  margin-top: 2px;
}

/* No `gap` here on purpose — the icon needs 5px after the word but the
   shop pill needs 6px after the icon, two different values a single flex
   `gap` can't express. Each is its own margin-left below instead. */
.profile-view-shell.is-phone .profile-phone-creator-label {
  display: none; /* toggled to flex by JS when profile.is_creator */
  align-items: center;
  color: #0d9488;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

/* lucide.createIcons() replaces the <i data-lucide> element with a real
   <svg> (defaults to 24x24) — the <i> itself is gone by render time, so
   targeting it does nothing. */
.profile-view-shell.is-phone .profile-phone-creator-label svg {
  width: 15px;
  height: 15px;
  margin-left: 5px;
}

.profile-view-shell.is-phone .profile-phone-shop-pill {
  margin-left: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #6630d1;
  background: transparent;
  border: 1.5px solid #6630d1;
  border-radius: 14px;
  padding: 1px 10px;
  cursor: pointer;
  white-space: nowrap;
}

/* ---- Stats: tightened, no divider ----
   Structural properties (display/flex-direction/justify-content/width)
   moved here from profile.css's old mobile block, merged with this file's
   own already-tightened spacing. */

.profile-view-shell.is-phone .profile-stats {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 28px;
  margin-top: 10px;
  margin-bottom: 0;
  width: 100%;
  border-bottom: none;
  padding-bottom: 0;
}

.profile-view-shell.is-phone .profile-stat-num {
  font-size: 18px;
}

.profile-view-shell.is-phone .profile-stat-label {
  font-size: 13px;
  color: #555555;
}

/* ---- Links: single line (built by _renderLinksPhone), no icon ----
   Structural properties moved here from profile.css's old mobile block,
   merged with this file's own spacing/order. */

.profile-view-shell.is-phone .profile-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  order: 1;
  margin-top: 8px;
}

.profile-view-shell.is-phone .profile-link-phone-line {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  min-width: 0;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

/* The label (or, with no label, the domain standing in for it — same
   class either way, same "never printed twice" rule as desktop's chips).
   flex:1 + ellipsis so a long label truncates first; the domain (fixed,
   no shrink) stays fully visible. */
.profile-view-shell.is-phone .profile-link-phone-label {
  font-weight: 700;
  color: #1f3a8a;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-view-shell.is-phone .profile-link-phone-dot,
.profile-view-shell.is-phone .profile-link-phone-domain {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 400;
  color: #8a8a99;
}

/* Real gap on both sides via margin, not space characters in the string
   (those live inside the truncated label and aren't reliable). */
.profile-view-shell.is-phone .profile-link-phone-dot {
  margin: 0 4px;
}

.profile-view-shell.is-phone .profile-link-phone-more {
  font-weight: 700;
  color: #1a1a1a;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: .3em; /* not a leading space in the string — that lives
    inside the truncated label span and can vanish with the ellipsis */
}

/* ---- Follow + Message row (someone else's profile only) ----
   #profile-actions is shared by two different variants of its own content
   (own-profile Edit/Share vs. someone else's Follow/Message) with no other
   marker to tell them apart in the DOM — :has(#profile-btn-follow) is the
   only way to style just the second one. Default hidden (moved here from
   profile.css's old mobile block) covers the Edit/Share variant; the
   :has() rule below it overrides that back to visible+styled only when
   the follow button is actually present. */
.profile-view-shell.is-phone .profile-actions {
  display: none;
}

.profile-view-shell.is-phone .profile-actions:has(#profile-btn-follow) {
  display: flex;
  flex-direction: row;
  order: 2;
  width: 100%;
  gap: 8px;
  margin-top: 10px;
}

.profile-view-shell.is-phone .profile-actions:has(#profile-btn-follow) .profile-btn {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 700;
}

.profile-view-shell.is-phone .profile-actions:has(#profile-btn-follow) .profile-btn-follow {
  background: #6630d1;
  color: #ffffff;
}

.profile-view-shell.is-phone .profile-actions:has(#profile-btn-follow) .profile-btn-following {
  background: #f1f1f4;
  color: #18181b;
}

.profile-view-shell.is-phone .profile-actions:has(#profile-btn-follow) .profile-btn-message {
  background: #f1f1f4;
  color: #18181b;
}

/* Visitor (signed-out) variant appends this after the two buttons —
   not part of this row's spec, so it stays hidden on phone. */
.profile-view-shell.is-phone .profile-actions:has(#profile-btn-follow) .profile-visitor-shop-link {
  display: none;
}

/* ---- Back: floating pill, not a row ----
   #profile-back-btn/#profile-back-row carry no inline style now (only
   #profile-back-row's shown/hidden toggle, set as an inline style by
   _wireProfileBackButton in core — that's a runtime state change, not
   markup, and this rule's plain display:none is what it overrides). */
.profile-view-shell.is-phone #profile-back-row {
  display: none;
  margin-bottom: 0;
}

/* Shared look for #profile-back-btn (leaves the profile entirely) and
   #profile-post-feed-back-btn (closes the phone post feed, task 1; closes
   over the grid+header, so it's a sibling of them, not nested here).
   z-index was 500 — that put it ABOVE #mobile-drawer (200) and its
   #mobile-drawer-overlay (199), so opening the hamburger drawer while this
   pill was showing left it floating on top of the drawer. Dropped to 150,
   matching the other floating pills app-wide (shop-phone.css's shop-tab
   pill, inbox-phone.css's New Message pill) — still above ordinary content,
   now correctly below the drawer/overlay, and still below the sheets
   (1100+). */
.profile-view-shell.is-phone .profile-phone-back-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  height: 44px;
  padding: 0 16px 0 10px;
  border: none;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-display);
  cursor: pointer;
  z-index: 150;
}

.profile-view-shell.is-phone .profile-phone-back-pill svg {
  width: 22px;
  height: 22px;
}

/* Post feed's Close (Oct 2026): centered, purple, a touch smaller than the
   profile's Back pill (40px tall, 13px text). Same z-index as the other
   floating pills (see above). */
.profile-view-shell.is-phone .profile-phone-close-pill {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  height: 40px;
  padding: 0 22px;
  border: none;
  border-radius: 20px;
  background: #6D28D9;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(109, 40, 217, 0.35);
  cursor: pointer;
  z-index: 150;
}

/* ---- Floating Edit button (own profile only) ----
   Bottom-right, the back pill's bottom-left — the two never overlap.
   Stays at 500 — below the sheets (1100+). It's a direct child of
   #profile-view-shell (profile-phone.js's _wirePhoneFloatingEditButton),
   a sibling of .profile-grid-col/.profile-info-col rather than nested
   inside either, so hiding those two for the post feed (above) does not
   hide this on its own — it would otherwise stay floating on top of the
   feed and cover the card's 4th action button. Hidden explicitly below. */
.profile-view-shell.is-phone #profile-phone-edit-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  cursor: pointer;
  z-index: 500;
}

.profile-view-shell.is-phone #profile-phone-edit-fab svg {
  width: 22px;
  height: 22px;
}

.profile-view-shell.is-phone.has-phone-post-feed #profile-phone-edit-fab {
  display: none;
}

/* Posts grid's last row needs to clear whichever floating button is
   present — the back pill (44px + 16px offset) or, taller, this Edit
   button (54px + 16px offset = 70px deep before safe-area; 90px leaves a
   margin for devices where env(safe-area-inset-bottom) pushes it higher). */
.profile-view-shell.is-phone .profile-pages-grid {
  padding-bottom: 90px;
}

/* ---- Post feed (task 1) ----
   Replaces the grid AND the phone header/stats/actions column — #mobile-
   header (outside this shell) is the only chrome left showing. Feed cards
   use feed.css's own generic (not #feed-area-scoped) touch-width rules, so
   no width/spacing override is needed here.
   --sb-feed-gap-top/bottom are deliberately NOT overridden here (left at
   feed.css's .feed-main default, 0px/12px) even though this container's
   own padding is 12px/90px below — the Back pill floats over the card's
   corner rather than sitting in reserved space, so card sizing should
   match Home exactly, not be additionally shrunk for padding no card
   actually needs to clear. */
.profile-view-shell.is-phone #profile-phone-post-feed {
  display: none;
}

.profile-view-shell.is-phone.has-phone-post-feed .profile-grid-col,
.profile-view-shell.is-phone.has-phone-post-feed .profile-info-col {
  display: none;
}

.profile-view-shell.is-phone.has-phone-post-feed #profile-phone-post-feed {
  display: block;
  width: 100%;
  padding-top: 12px;
  padding-bottom: 90px;
}

/* Own-profile long-press-to-delete (profile-phone.js): class added to the
   grid itself, not per-tile inline styles — the wildcard descendant
   selector below is what actually stops iOS's touch-and-hold gesture from
   finding anything nearby (tile, image, overlay icon) still selectable. */
.profile-view-shell.is-phone .profile-pages-grid--no-select,
.profile-view-shell.is-phone .profile-pages-grid--no-select * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.profile-view-shell.is-phone .profile-pages-grid--no-select img {
  -webkit-user-drag: none;
}

/* The delete sheet itself can appear directly under the finger while the
   long-press touch is still active (the timer fires before touchend) —
   without this, iOS can start a fresh selection on the sheet's own text as
   soon as it renders. Targeted by id since this sheet's markup lives in
   profile-sheets.js, not this file; a CSS selector doesn't care which file
   built the DOM it matches. */
#profile-delete-post-sheet,
#profile-delete-post-sheet * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ---- Mobile app header (#mobile-header) — NOT inside #profile-view-shell,
   so not scoped under .is-phone; only ever created by phone-only JS
   (_setupPhoneMobileHeaderShare), so the bare id is safe unguarded. ---- */
#profile-mobile-share-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #18181b;
  display: flex;
  align-items: center;
  justify-content: center;
}

#profile-mobile-share-btn svg {
  width: 24px;
  height: 24px;
}

/* Someone else's profile — same slot/positioning as the Share icon above. */
#profile-mobile-more-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #18181b;
  display: flex;
  align-items: center;
  justify-content: center;
}

#profile-mobile-more-btn svg {
  width: 24px;
  height: 24px;
}

/* Header-row ⋮ (core's #profile-more-btn) is replaced on phone by the
   single ⋯ in the mobile header above — core is now told (hideMoreBtn,
   index.js _wireProfileActions) not to create it at all, so there's
   nothing left here to hide; a display:none rule couldn't have beaten its
   inline style.cssText anyway. */

/* ============================================
   BOTTOM SHEETS (Links, Followers/Following, Shop)
   Appended into #profile-view-shell by profile-sheets.js, which only ever
   runs from the phone shell — always a descendant of .is-phone. Structural
   chrome (position/sizing/backdrop) is inline, set by profile-sheets.js —
   same pattern as the shop's phone filter sheet. Only row/tab/button
   styling lives here.
   ============================================ */

.profile-view-shell.is-phone .profile-links-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
}

.profile-view-shell.is-phone .profile-links-sheet-row:last-child {
  border-bottom: none;
}

.profile-view-shell.is-phone .profile-links-sheet-arrow {
  flex-shrink: 0;
  color: #8a8a99;
  display: flex;
}

.profile-view-shell.is-phone .profile-people-sheet-tab {
  flex: 1;
  padding: 10px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #18181b;
  cursor: pointer;
}

.profile-view-shell.is-phone .profile-people-sheet-tab.active {
  font-weight: 700;
  border-bottom: 2px solid #18181b;
}

.profile-view-shell.is-phone .profile-people-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.profile-view-shell.is-phone .profile-people-sheet-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profile-view-shell.is-phone .profile-people-sheet-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.profile-view-shell.is-phone .profile-people-sheet-name {
  font-size: 15px;
  font-weight: 700;
  color: #18181b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-view-shell.is-phone .profile-people-sheet-handle {
  font-size: 13px;
  color: #8a8a99;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-view-shell.is-phone .profile-people-sheet-btn {
  background: #6D28D9;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.profile-view-shell.is-phone .profile-people-sheet-btn.is-following {
  background: #f1f1f4;
  color: #3f3f46;
}

.profile-view-shell.is-phone .profile-people-sheet-empty {
  text-align: center;
  font-size: 14px;
  color: #8a8a99;
  padding: 32px 16px;
}

/* ---- Shop sheet ---- */

.profile-view-shell.is-phone #profile-shop-sheet-grids {
  padding: 0 16px 16px;
}

/* SIZE (Small/Large) toggle, Shop sheet only — the Drawer sheet's own
   grid rules (#profile-drawer-sheet-grids, below) are untouched. Sheets
   follows Stickers' column count at both sizes: .psp-sheet-thumb's
   aspect-ratio is 4:5, the same as .profile-sticker-card, not 9:16 like
   .psp-bg-img — see the report. The #id + class combo here already beats
   the generic ".profile-stickers-grid{grid-template-columns:repeat(3,1fr)}"
   rule above on specificity alone, no !important needed. */
.profile-view-shell.is-phone #profile-shop-sheet-grids.profile-shop-size-small .profile-stickers-grid,
.profile-view-shell.is-phone #profile-shop-sheet-grids.profile-shop-size-small .profile-shop-sheets-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.profile-view-shell.is-phone #profile-shop-sheet-grids.profile-shop-size-small .profile-shop-bgs-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.profile-view-shell.is-phone #profile-shop-sheet-grids.profile-shop-size-large .profile-stickers-grid,
.profile-view-shell.is-phone #profile-shop-sheet-grids.profile-shop-size-large .profile-shop-sheets-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.profile-view-shell.is-phone #profile-shop-sheet-grids.profile-shop-size-large .profile-shop-bgs-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Owner mode: items aren't tappable — the click handlers the shared card
   renderers (index.js) attach are still there, they just never fire, since
   the browser never dispatches the click to an element with
   pointer-events:none. */
.profile-view-shell.is-phone .profile-shop-sheet-owner #profile-shop-sheet-grids .profile-sticker-card,
.profile-view-shell.is-phone .profile-shop-sheet-owner #profile-shop-sheet-grids .psp-sheet-card,
.profile-view-shell.is-phone .profile-shop-sheet-owner #profile-shop-sheet-grids .psp-bg-card {
  pointer-events: none;
  cursor: default;
}

/* Grid needs enough bottom padding to clear the floating pill below */
.profile-view-shell.is-phone .profile-shop-sheet-owner #profile-shop-sheet-grids {
  padding-bottom: 90px;
}

.profile-view-shell.is-phone .profile-shop-sheet-owner-pill {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  background: #6630d1;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 26px;
  padding: 12px 22px;
  box-shadow: 0 6px 24px rgba(102, 48, 209, 0.35);
  cursor: pointer;
  white-space: nowrap;
  z-index: 1102; /* above the sheet (1101) it floats inside */
}

.profile-view-shell.is-phone .profile-shop-sheet-toolbar-row {
  display: flex;
  align-items: center;
  padding: 4px 16px 12px;
}

.profile-view-shell.is-phone .profile-shop-sheet-toolbar-spacer {
  flex: 0 0 38px;
}

.profile-view-shell.is-phone .profile-shop-sheet-toolbar-seg-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  overflow-x: auto; /* last-resort safety net if it still doesn't fit start-aligned */
}

.profile-view-shell.is-phone .profile-shop-sheet-toolbar-row--start .profile-shop-sheet-toolbar-spacer {
  display: none;
}

.profile-view-shell.is-phone .profile-shop-sheet-toolbar-row--start .profile-shop-sheet-toolbar-seg-wrap {
  justify-content: flex-start;
}

/* Scoped to this sheet's toggle only — reusing .psp-seg/.psp-seg-btn as-is
   (same track/active look as the desktop Shop tab's own toggle), just
   tighter padding here so 2-3 segments with counts fit at 375px. Doesn't
   touch .psp-seg-btn's own rule, so the desktop Shop tab is unaffected. */
.profile-view-shell.is-phone #profile-shop-sheet-seg .psp-seg-btn,
.profile-view-shell.is-phone #profile-drawer-sheet-seg .psp-seg-btn {
  padding: 7px 12px;
}

.profile-view-shell.is-phone .profile-shop-sheet-filter-btn {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: none;
  background: transparent;
  color: #3f3f46;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Same lesson as the Creator label's palette icon: lucide.createIcons()
   replaces <i data-lucide> with a real <svg> (defaults to 24x24) — target
   that, not the <i>, which no longer exists by render time. */
.profile-view-shell.is-phone .profile-shop-sheet-filter-btn svg {
  width: 22px;
  height: 22px;
}

.profile-view-shell.is-phone .profile-shop-sheet-filter-dot {
  display: none; /* toggled to block by JS when sort != Newest or Free only is on */
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #14B8A6;
  box-shadow: 0 0 0 2px #ffffff;
}

.profile-view-shell.is-phone .profile-shop-sheet-filter-dropdown {
  position: fixed;
  width: 210px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: 10px 0;
  z-index: 1150; /* above the sheet (1101), below sticker-detail-global (1200) */
}

.profile-view-shell.is-phone .profile-shop-sheet-filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #9a9aa8;
  padding: 4px 16px 8px;
}

.profile-view-shell.is-phone .profile-shop-sheet-size-row {
  display: flex;
  gap: 10px;
  padding: 0 16px 10px;
}

.profile-view-shell.is-phone .profile-shop-sheet-size-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border: 1.5px solid #e4e4e7;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}

.profile-view-shell.is-phone .profile-shop-sheet-size-tile.active {
  border-color: #6630d1;
  background: #f6f2ff;
}

.profile-view-shell.is-phone .profile-shop-sheet-size-pic {
  display: flex;
  gap: 3px;
  height: 16px;
  align-items: flex-end;
}

/* Stickers/Sheets — squares (both are 4:5 cards either way). */
.profile-view-shell.is-phone .profile-shop-sheet-size-pic span {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: #d4d4d8;
}

/* Backgrounds — tall 9:16 rectangles, matching .psp-bg-img's own aspect
   ratio literally. */
.profile-view-shell.is-phone .profile-shop-sheet-size-pic--tall span {
  width: 9px;
  height: 16px;
}

.profile-view-shell.is-phone .profile-shop-sheet-size-tile.active .profile-shop-sheet-size-pic span {
  background: #6630d1;
}

.profile-view-shell.is-phone .profile-shop-sheet-size-tile-label {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #3f3f46;
}

.profile-view-shell.is-phone .profile-shop-sheet-size-tile.active .profile-shop-sheet-size-tile-label {
  color: #6630d1;
}

.profile-view-shell.is-phone .profile-shop-sheet-filter-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 16px;
  border: none;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #18181b;
  text-align: left;
  cursor: pointer;
}

.profile-view-shell.is-phone .profile-shop-sheet-filter-opt.active {
  color: #6630d1;
  font-weight: 700;
}

.profile-view-shell.is-phone .profile-shop-sheet-filter-check {
  color: #6630d1;
  font-weight: 700;
}

.profile-view-shell.is-phone .profile-shop-sheet-filter-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 6px 0;
}

.profile-view-shell.is-phone .profile-shop-sheet-filter-free-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 14px;
  color: #18181b;
  cursor: pointer;
}

/* ---- Drawer stat (third stats-row item, replaces the old Drawer tab) ----
   lucide.createIcons() replaces the <i data-lucide> with a real <svg> —
   same lesson as the Creator label's palette icon, target that, not the
   <i>, which is gone by render time. */
.profile-view-shell.is-phone #profile-drawer-hidden-icon {
  margin-left: 4px;
  vertical-align: middle;
}

.profile-view-shell.is-phone #profile-drawer-label svg {
  width: 13px;
  height: 13px;
  color: #8a8a99;
}

/* ---- Unfollow confirm sheet (content-sized) ---- */

.profile-view-shell.is-phone .profile-unfollow-sheet-body {
  padding: 4px 24px calc(24px + env(safe-area-inset-bottom));
  text-align: center;
}

.profile-view-shell.is-phone .profile-unfollow-sheet-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.profile-view-shell.is-phone .profile-unfollow-sheet-avatar-img,
.profile-view-shell.is-phone .profile-unfollow-sheet-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-view-shell.is-phone .profile-unfollow-sheet-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-accent, #6D28D9);
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}

.profile-view-shell.is-phone .profile-unfollow-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: #18181b;
}

.profile-view-shell.is-phone .profile-unfollow-sheet-note {
  font-size: 14px;
  color: #8a8a99;
  margin-top: 8px;
  line-height: 1.4;
}

.profile-view-shell.is-phone .profile-unfollow-sheet-confirm-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 0;
  border-radius: 24px;
  border: none;
  background: #dc2626;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.profile-view-shell.is-phone .profile-unfollow-sheet-cancel-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;
  border: none;
  background: none;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #52525b;
  cursor: pointer;
}

/* ---- More sheet (Share Profile / Block / Report — content-sized) ---- */

.profile-view-shell.is-phone .profile-more-sheet-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  text-align: left;
}

.profile-view-shell.is-phone .profile-more-sheet-row:last-child {
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

.profile-view-shell.is-phone .profile-more-sheet-row svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.profile-view-shell.is-phone .profile-more-sheet-row--danger,
.profile-view-shell.is-phone .profile-more-sheet-row--danger svg {
  color: #dc2626;
}

.profile-view-shell.is-phone .profile-more-sheet-row.disabled {
  opacity: 0.45;
  cursor: default;
}

.profile-view-shell.is-phone .profile-more-sheet-note {
  padding: 0 20px 10px;
  margin-top: -8px;
  font-size: 12px;
  color: #8a8a99;
}

/* ---- Delete Post sheet (content-sized, not 75%) ---- */

.profile-view-shell.is-phone .profile-delete-post-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #dc2626;
  cursor: pointer;
  text-align: left;
}

.profile-view-shell.is-phone .profile-delete-post-row svg {
  width: 20px;
  height: 20px;
  color: #dc2626;
  flex-shrink: 0;
}

.profile-view-shell.is-phone .profile-delete-post-confirm {
  padding: 4px 20px calc(20px + env(safe-area-inset-bottom));
  text-align: center;
}

.profile-view-shell.is-phone .profile-delete-post-confirm-title {
  font-size: 17px;
  font-weight: 700;
  color: #18181b;
}

.profile-view-shell.is-phone .profile-delete-post-confirm-body {
  font-size: 14px;
  color: #8a8a99;
  margin-top: 6px;
}

.profile-view-shell.is-phone .profile-delete-post-confirm-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 0;
  border-radius: 24px;
  border: none;
  background: #dc2626;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.profile-view-shell.is-phone .profile-delete-post-confirm-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.profile-view-shell.is-phone .profile-delete-post-cancel-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;
  border: none;
  background: none;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #52525b;
  cursor: pointer;
}

.profile-view-shell.is-phone .profile-delete-post-error {
  margin-top: 10px;
  font-size: 13px;
  color: #dc2626;
}

/* ---- Drawer sheet ---- */

.profile-view-shell.is-phone #profile-drawer-sheet-grids {
  padding: 0 16px 16px;
}

/* 4/row stickers, 3/row backgrounds — Drawer sheet only; the Shop sheet
   reuses the same .profile-stickers-grid/.profile-shop-bgs-grid classes at
   their own column counts (3 and 4, from the generic phone rule above and
   profile.css's desktop-base rule respectively), untouched. Tighter gap
   than either of those so 4 sticker columns fit at 375px without shrinking
   the tiles more than necessary; aspect-ratio on the cards themselves
   (.profile-sticker-card 4:5, .psp-bg-img 9:16) is unchanged, so art stays
   contained via their existing object-fit rules regardless of tile size. */
.profile-view-shell.is-phone #profile-drawer-sheet-grids .profile-stickers-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.profile-view-shell.is-phone #profile-drawer-sheet-grids .profile-shop-bgs-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Owner mode: same technique as the Shop sheet's owner mode above — the
   click handlers the shared card renderers (index.js) attach are still
   there, they just never fire under pointer-events:none. */
.profile-view-shell.is-phone .profile-drawer-sheet-owner #profile-drawer-sheet-grids .profile-sticker-card,
.profile-view-shell.is-phone .profile-drawer-sheet-owner #profile-drawer-sheet-grids .psp-bg-card {
  pointer-events: none;
  cursor: default;
}
/* Header column's own bottom gap, so the space above the posts grid
   doesn't depend on whichever row (links, Follow/Message) happens to be
   last. Without it, a profile with no link put the grid right against
   the counts row. */
.profile-view-shell.is-phone .profile-info-col {
  padding-bottom: 12px;
}

/* ---- Post feed snaps like phone Home (feed-touch-card.css). On phones
   #main-content is what scrolls, so snap goes on it, and only while a
   profile's post feed is open (the grid itself keeps scrolling freely).
   Each post stops just under the 44px header; "stop always" keeps a fast
   flick from flying past several posts. Same for your own profile and
   anyone else's. ---- */
#main-content:has(> .profile-view-shell.is-phone.has-phone-post-feed) {
  scroll-snap-type: y mandatory;
  scroll-padding-top: calc(44px + env(safe-area-inset-top, 0px));
}

.profile-view-shell.is-phone #profile-phone-post-feed > .feed-post-unit {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}