/*
 * Social content
 * Native CSS for Feed, Chat, Pro Shop, stories, profiles, and media viewers.
 * The values intentionally use the shared Par Seeker theme variables so these
 * pages retain the original dark/light theme behavior without Tailwind.
 */

[data-page="social-feed"],
[data-page="chat"],
[data-page="buy-sell"],
ps-social-story-viewer,
ps-social-story-creator,
ps-social-media-viewer,
ps-social-profile-modal {
  display: block;
}

ps-social-story-viewer[hidden],
ps-social-story-creator[hidden],
ps-social-media-viewer[hidden],
ps-social-profile-modal[hidden] {
  display: none;
}

.soc-media-tool-host {
  position: relative;
  z-index: 230;
}

.soc-media-tool-host--tracer > ps-shot-tracer {
  position: fixed;
  z-index: 230;
  inset: 0;
  display: block;
  overflow: auto;
  background: #050505;
}

.soc-page {
  width: 100%;
  min-height: calc(100vh - 8rem);
  color: var(--ps-text-primary);
  background: var(--ps-bg-base);
}

.soc-page button,
.soc-dialog button,
.soc-modal-layer button,
.soc-listing-detail button,
.soc-media-viewer button,
.soc-story-viewer button {
  border: 0;
  color: inherit;
  background: none;
}

.soc-page button:focus-visible,
.soc-dialog button:focus-visible,
.soc-modal-layer button:focus-visible,
.soc-page input:focus-visible,
.soc-page textarea:focus-visible,
.soc-dialog input:focus-visible,
.soc-dialog textarea:focus-visible,
.soc-dialog select:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
}

.soc-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.soc-icon.is-filled {
  fill: currentColor;
}

.soc-icon-button {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: var(--ps-text-secondary) !important;
  transition: color 160ms ease, background-color 160ms ease;
}

.soc-icon-button:hover {
  color: var(--ps-text-primary) !important;
  background: var(--ps-bg-hover) !important;
}

.soc-icon-button.is-active {
  color: var(--ps-primary) !important;
  background: var(--ps-primary-light) !important;
}

.soc-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: visible;
  flex: 0 0 auto;
  border: 2px solid var(--ps-border);
  border-radius: 50%;
  color: var(--ps-primary);
  background: var(--ps-bg-elevated);
  font-weight: 700;
  line-height: 1;
}

.soc-avatar > img,
.soc-avatar > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  object-fit: cover;
}

.soc-avatar--small { width: 2rem; height: 2rem; font-size: 0.68rem; }
.soc-avatar--medium { width: 2.5rem; height: 2.5rem; font-size: 0.78rem; }
.soc-avatar--large { width: 2.75rem; height: 2.75rem; font-size: 0.86rem; }
.soc-avatar--xlarge { width: 3.5rem; height: 3.5rem; font-size: 1.05rem; }

.soc-avatar > i {
  position: absolute;
  right: -0.05rem;
  bottom: -0.05rem;
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid var(--ps-bg-surface);
  border-radius: 50%;
  background: var(--ps-primary);
  box-shadow: var(--ps-online-glow);
}

.soc-spinner {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-block;
  flex: 0 0 auto;
  border: 3px solid color-mix(in srgb, var(--ps-primary) 22%, transparent);
  border-top-color: var(--ps-primary);
  border-radius: 50%;
  animation: soc-spin 720ms linear infinite;
}

.soc-spinner--small {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

@keyframes soc-spin { to { transform: rotate(360deg); } }

.soc-state,
.soc-empty,
.soc-error,
.soc-centered-message {
  min-height: 12rem;
  padding: 2.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--ps-text-muted);
  text-align: center;
}

.soc-state { gap: 0.75rem; }

.soc-empty__icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  color: var(--ps-text-muted);
  opacity: 0.7;
}

.soc-empty h3,
.soc-error h3 {
  margin: 0 0 0.35rem;
  color: var(--ps-text-primary);
  font-family: Poppins, sans-serif;
  font-size: 1.1rem;
}

.soc-empty p,
.soc-error p,
.soc-centered-message {
  margin: 0 0 1rem;
  color: var(--ps-text-secondary);
  font-size: 0.875rem;
}

.soc-input,
.soc-textarea,
.soc-dialog select {
  width: 100%;
  border: 1px solid var(--ps-border);
  border-radius: 0.75rem;
  color: var(--ps-text-primary);
  background: var(--ps-bg-elevated);
  font-size: 0.925rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.soc-input {
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
}

.soc-textarea {
  min-height: 5.5rem;
  padding: 0.75rem 0.85rem;
  resize: vertical;
}

.soc-input::placeholder,
.soc-textarea::placeholder { color: var(--ps-text-muted); }

.soc-input:focus,
.soc-textarea:focus,
.soc-dialog select:focus {
  border-color: var(--ps-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--ps-primary-light);
}

.soc-search {
  position: relative;
}

.soc-search > span,
.soc-search > .soc-icon,
.soc-field__icon > .soc-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0.8rem;
  color: var(--ps-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.soc-search > .soc-input,
.soc-field__icon > .soc-input {
  padding-left: 2.55rem;
}

.soc-search > button {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ps-text-muted);
  transform: translateY(-50%);
}

.soc-search > button:hover { background: var(--ps-bg-hover); }
.soc-search > button .soc-icon { width: 1rem; height: 1rem; }

.soc-button {
  min-height: 2.65rem;
  padding: 0.6rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent !important;
  border-radius: 0.7rem;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  transition: filter 160ms ease, transform 100ms ease, background-color 160ms ease;
}

.soc-button:active:not(:disabled) { transform: scale(0.98); }
.soc-button:disabled { opacity: 0.5; }
.soc-button--compact { min-height: 2.25rem; padding: 0.45rem 0.75rem; font-size: 0.8rem; }
.soc-button--primary { color: #fff !important; background: var(--ps-primary) !important; }
.soc-button--primary:hover { background: var(--ps-primary-hover) !important; }
.soc-button--secondary { border-color: var(--ps-border-light) !important; color: var(--ps-text-secondary) !important; background: var(--ps-bg-elevated) !important; }
.soc-button--secondary:hover { color: var(--ps-text-primary) !important; background: var(--ps-bg-hover) !important; }
.soc-button--post { color: #fff !important; background: #3b82f6 !important; }
.soc-button--success { color: #fff !important; background: var(--ps-success) !important; }
.soc-button--warning { color: #fff !important; background: var(--ps-warning) !important; }
.soc-button--danger { color: #fff !important; background: var(--ps-error) !important; }
.soc-button--danger-outline { border-color: color-mix(in srgb, var(--ps-error) 55%, transparent) !important; color: var(--ps-error) !important; background: transparent !important; }
.soc-button--ai { color: #fff !important; background: linear-gradient(90deg, #9333ea, #2563eb) !important; }

.soc-field {
  display: grid;
  gap: 0.45rem;
}

.soc-field > span,
.soc-field > label {
  color: var(--ps-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.soc-field__icon { position: relative; }

.soc-help {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--ps-text-muted);
  font-size: 0.75rem;
}

.soc-help .soc-icon { width: 0.9rem; height: 0.9rem; margin-top: 0.1rem; }

/* Shared modal system */
.soc-modal-layer,
.soc-media-viewer,
.soc-story-viewer,
.soc-listing-detail {
  position: fixed;
  z-index: 150;
  inset: 0;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.soc-modal-layer--nested { z-index: 3; }
.soc-modal-layer--sheet { align-items: flex-end; padding-bottom: 0; }

.soc-dialog {
  width: min(31rem, 100%);
  max-height: min(90vh, 52rem);
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--ps-border);
  border-radius: 1rem;
  color: var(--ps-text-primary);
  background: var(--ps-bg-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.soc-dialog__header {
  min-height: 4rem;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--ps-border);
}

.soc-dialog__header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: Poppins, sans-serif;
  font-size: 1.05rem;
}

.soc-dialog__scroll {
  padding: 1rem 1.1rem;
  display: grid;
  gap: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.soc-dialog__footer {
  min-height: 4rem;
  padding: 0.75rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex: 0 0 auto;
  border-top: 1px solid var(--ps-border);
  background: var(--ps-bg-surface);
}

.soc-dialog__footer .soc-button { min-width: 6rem; }

/* Feed */
.soc-feed-page { padding-bottom: 1rem; }

.soc-feed-nav {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--ps-border);
  background: color-mix(in srgb, var(--ps-bg-base) 94%, transparent);
  backdrop-filter: blur(15px);
}

.soc-feed-nav nav {
  min-height: 3.4rem;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.soc-feed-nav nav::-webkit-scrollbar { display: none; }

.soc-feed-nav nav > button {
  min-height: 2.25rem;
  padding: 0.35rem 0.68rem;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  color: var(--ps-text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.soc-feed-nav nav > button:hover { color: var(--ps-text-primary); background: var(--ps-bg-hover); }
.soc-feed-nav nav > button.is-active { color: var(--ps-text-primary); border-bottom-color: var(--ps-primary); border-radius: 0; }
.soc-feed-nav nav > button.is-post { color: #60a5fa; }
.soc-feed-nav nav > button.is-book { color: var(--ps-gold); }
.soc-feed-nav nav > button.is-qualified { color: var(--ps-primary); }
.soc-feed-nav nav > button.is-qualifying { color: var(--ps-warning); }
.soc-feed-nav nav > .soc-feed-manage { margin-left: auto; padding: 0.4rem; }
.soc-feed-nav nav > .soc-feed-manage .soc-icon { width: 1.05rem; height: 1.05rem; }

.soc-feed-stats-wrap { padding: 0.85rem 1rem 0; }

.soc-stats-card {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.95fr) minmax(0, 1.45fr);
  overflow: hidden;
  border: 1px solid var(--ps-border);
  border-radius: 1rem;
  background: var(--ps-bg-surface);
}

.soc-stats-card > button {
  min-width: 0;
  min-height: 4.8rem;
  padding: 0.75rem;
}

.soc-stats-card > button:first-child {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 0.55rem;
  border-right: 1px solid var(--ps-border);
  text-align: left;
}

.soc-stats-card > button:first-child > span {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
  color: #fff;
  background: linear-gradient(135deg, var(--ps-primary), #059669);
  font-weight: 800;
}

.soc-stats-card i { font-style: normal; }
.soc-stats-card small { display: block; color: var(--ps-text-muted); font-size: 0.62rem; font-weight: 500; text-transform: uppercase; }
.soc-stats-card strong { color: var(--ps-text-primary); font-family: Poppins, sans-serif; font-size: 0.83rem; }
.soc-stats-card > button:first-child > .soc-icon { width: 1rem; color: var(--ps-primary); }

.soc-stats-card > button:last-child {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.soc-stats-card .is-best small,
.soc-stats-card .is-best strong { color: var(--ps-primary); }
.soc-stats-card .is-worst small,
.soc-stats-card .is-worst strong { color: #f87171; }

.soc-stats-card.is-loading { min-height: 4.8rem; padding: 0.8rem; display: flex; gap: 0.75rem; }
.soc-stats-card.is-loading i { flex: 1; border-radius: 0.65rem; background: var(--ps-bg-elevated); animation: soc-pulse 1.2s ease-in-out infinite alternate; }
@keyframes soc-pulse { to { opacity: 0.45; } }

.soc-stories {
  padding: 1rem;
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.soc-stories::-webkit-scrollbar { display: none; }

.soc-story-item {
  width: 4.25rem;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.4rem;
}

.soc-story-item small {
  width: 100%;
  overflow: hidden;
  color: var(--ps-text-secondary);
  font-size: 0.68rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-story-ring {
  width: 4rem;
  height: 4rem;
  padding: 3px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ps-border);
  border-radius: 50%;
  background: var(--ps-bg-base);
}

.soc-story-ring .soc-avatar { width: 100%; height: 100%; border-width: 2px; border-color: var(--ps-bg-base); }
.soc-story-ring.has-story { border-color: var(--ps-primary); background: linear-gradient(135deg, var(--ps-primary), #10b981); }
.soc-story-ring.is-create { border-style: dashed; }
.soc-story-ring.is-create > i { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; color: var(--ps-text-muted); background: var(--ps-bg-elevated); }

.soc-feed-posts { padding: 0 1rem; display: grid; gap: 1rem; }

.soc-post {
  overflow: hidden;
  border: 1px solid var(--ps-border);
  border-radius: 1rem;
  background: var(--ps-bg-surface);
  transition: border-color 160ms ease;
}

.soc-post:hover { border-color: var(--ps-border-light); }

.soc-post > header {
  padding: 0.85rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.soc-post__person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
}

.soc-post__person > span { min-width: 0; }
.soc-post__person strong { display: flex; align-items: center; gap: 0.45rem; overflow: hidden; color: var(--ps-text-primary); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.soc-post__person strong.is-online::after,
.soc-post__person strong.is-chatting::after { content: ''; width: 0.45rem; height: 0.45rem; flex: 0 0 auto; border-radius: 50%; background: var(--ps-primary); box-shadow: var(--ps-online-glow); }
.soc-post__person strong > i { padding: 0.1rem 0.42rem; border: 1px solid color-mix(in srgb, var(--ps-primary) 25%, transparent); border-radius: 999px; color: var(--ps-primary); background: var(--ps-primary-light); font-size: 0.62rem; font-style: normal; }
.soc-post__person small { display: flex; align-items: center; gap: 0.35rem; color: var(--ps-text-muted); font-size: 0.7rem; }
.soc-post__person small b { font-weight: 400; }
.soc-post__person small em { color: var(--ps-primary); font-style: normal; }
.soc-post__person small em.is-buddies { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--ps-warning); }
.soc-post__person small .soc-icon { width: 0.7rem; height: 0.7rem; }

.soc-post__content { padding: 0 1rem 0.85rem; color: var(--ps-text-primary); font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; }
.soc-post__content p { margin: 0; white-space: normal; }
.soc-post__content a { color: #60a5fa; text-decoration: underline; }

.soc-post__media { width: 100%; max-height: 31.25rem; overflow: hidden; background: #000; }
.soc-post__media > button { width: 100%; }
.soc-post__media img,
.soc-post__media video { width: 100%; max-height: 31.25rem; object-fit: contain; }

.soc-post__counts {
  min-height: 2.6rem;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ps-text-secondary);
  font-size: 0.75rem;
}

.soc-post__counts > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.soc-post__counts .soc-icon { width: 1rem; height: 1rem; color: #ef4444; }
.soc-post__counts button:hover { text-decoration: underline; }

.soc-post__actions {
  padding: 0.42rem 0.65rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ps-border);
}

.soc-post__actions button {
  min-height: 2.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 0.55rem;
  color: var(--ps-text-secondary);
  font-size: 0.8rem;
  font-weight: 550;
}

.soc-post__actions button:hover { color: var(--ps-text-primary); background: var(--ps-bg-hover); }
.soc-post__actions button.is-liked { color: #ef4444; }
.soc-post__actions button.is-liked .soc-icon { fill: currentColor; }

.soc-comments { padding: 0.85rem 1rem 1rem; display: grid; gap: 0.7rem; border-top: 1px solid var(--ps-border); }
.soc-comment { display: flex; align-items: flex-start; gap: 0.6rem; }
.soc-comment > div { min-width: 0; padding: 0.55rem 0.75rem; border-radius: 0.75rem; background: var(--ps-bg-hover); }
.soc-comment > div button { color: var(--ps-text-primary); font-size: 0.78rem; font-weight: 700; }
.soc-comment > div p { margin: 0.12rem 0 0; color: var(--ps-text-secondary); font-size: 0.8rem; overflow-wrap: anywhere; }
.soc-comment-form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; }
.soc-comment-form .soc-input { min-height: 2.35rem; padding: 0.48rem 0.7rem; font-size: 0.8rem; }
.soc-comment-form > button { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: 0.6rem; color: #fff; background: var(--ps-primary); }
.soc-comment-form > button:disabled { opacity: 0.4; }

.soc-feed-more,
.soc-feed-end { padding: 1.2rem; display: flex; align-items: center; justify-content: center; gap: 0.65rem; color: var(--ps-text-muted); font-size: 0.8rem; text-align: center; }
.soc-feed-more .soc-spinner { width: 1.1rem; height: 1.1rem; border-width: 2px; }

.soc-pwa-prompt { padding: 0.75rem; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.65rem; border: 1px solid color-mix(in srgb, var(--ps-primary) 40%, var(--ps-border)); border-radius: 0.85rem; background: var(--ps-primary-light); }
.soc-pwa-prompt > span { font-size: 1.45rem; }
.soc-pwa-prompt strong { color: var(--ps-text-primary); font-size: 0.8rem; }
.soc-pwa-prompt p { margin: 0.1rem 0 0; color: var(--ps-text-secondary); font-size: 0.68rem; }

.soc-embed,
.soc-embed-preview { width: 100%; margin-top: 0.65rem; display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--ps-border); border-radius: 0.75rem; color: var(--ps-text-primary); background: var(--ps-bg-elevated); text-align: left; }
.soc-embed:hover { border-color: var(--ps-primary); }
.soc-embed__thumb,
.soc-embed-preview > div:first-child { position: relative; width: 7.5rem; min-height: 5.2rem; flex: 0 0 auto; background: #000; }
.soc-embed__thumb img,
.soc-embed-preview > div:first-child img { width: 100%; height: 100%; object-fit: cover; }
.soc-embed__thumb > i,
.soc-embed-preview > div:first-child > i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, 0.3); }
.soc-embed__body,
.soc-embed-preview > section { min-width: 0; padding: 0.7rem; display: flex; justify-content: center; flex-direction: column; gap: 0.18rem; }
.soc-embed small,
.soc-embed-preview small { color: var(--ps-primary); font-size: 0.65rem; font-weight: 700; }
.soc-embed strong,
.soc-embed-preview strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.soc-embed span,
.soc-embed-preview span { color: var(--ps-text-muted); font-size: 0.68rem; }
.soc-embed-preview { position: relative; margin-top: 0; }
.soc-embed-preview > button { position: absolute; top: 0.35rem; right: 0.35rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, 0.6); }
.soc-embed-preview.is-loading,
.soc-embed-preview.is-error { min-height: 3.5rem; padding: 0.75rem; align-items: center; gap: 0.55rem; color: var(--ps-text-muted); font-size: 0.78rem; }
.soc-embed-preview.is-error { color: var(--ps-warning); border-color: color-mix(in srgb, var(--ps-warning) 35%, transparent); background: color-mix(in srgb, var(--ps-warning) 10%, var(--ps-bg-elevated)); }

.soc-post-create__user { display: flex; align-items: center; gap: 0.65rem; }
.soc-post-create__user strong { font-size: 0.88rem; }
.soc-post-create__text { min-height: 5rem; max-height: 12.5rem; resize: vertical; }

.soc-quick-picks > label,
.soc-post-create__visibility legend,
.soc-post-create__tags legend {
  margin-bottom: 0.45rem;
  color: var(--ps-text-muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.soc-quick-picks > div { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.soc-quick-picks button { max-width: 100%; padding: 0.45rem 0.65rem; display: flex; align-items: center; gap: 0.35rem; overflow: hidden; border: 1px solid transparent; border-radius: 0.55rem; color: var(--ps-text-secondary); background: var(--ps-bg-elevated); font-size: 0.72rem; }
.soc-quick-picks button:hover { border-color: color-mix(in srgb, var(--ps-primary) 35%, transparent); color: var(--ps-primary); background: var(--ps-primary-light); }
.soc-quick-picks button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.soc-post-create__preview,
.soc-listing-create__preview,
.soc-story-create__preview { position: relative; overflow: hidden; border-radius: 0.75rem; background: #000; }
.soc-post-create__preview img,
.soc-post-create__preview video { width: 100%; max-height: 16rem; object-fit: contain; }
.soc-post-create__preview > button,
.soc-listing-create__preview > button:not(.soc-button--ai),
.soc-story-create__preview > button { position: absolute; z-index: 2; top: 0.55rem; right: 0.55rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, 0.65); }

.soc-post-create__media { padding-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; border-top: 1px solid var(--ps-border); }
.soc-post-create__media > label,
.soc-post-create__media > button { min-height: 2.5rem; padding: 0.45rem 0.7rem; display: flex; align-items: center; gap: 0.4rem; border-radius: 0.55rem; color: var(--ps-text-secondary); background: var(--ps-bg-elevated); font-size: 0.72rem; }
.soc-post-create__media > label:hover,
.soc-post-create__media > button:hover { color: var(--ps-primary); background: var(--ps-primary-light); }
.soc-post-create__media input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.soc-ps-badge { padding: 0.06rem 0.22rem; border-radius: 0.2rem; color: var(--ps-primary); background: var(--ps-primary-light); font-size: 0.62rem; font-weight: 800; }
.soc-ps-badge.is-gold { color: var(--ps-gold); background: color-mix(in srgb, var(--ps-gold) 14%, transparent); }

.soc-post-create__visibility,
.soc-post-create__tags { min-width: 0; margin: 0; padding: 0.8rem 0 0; border: 0; border-top: 1px solid var(--ps-border); }
.soc-post-create__visibility { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.soc-post-create__visibility legend { grid-column: 1 / -1; }
.soc-post-create__visibility label { min-height: 2.65rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; border: 1px solid var(--ps-border); border-radius: 0.65rem; color: var(--ps-text-secondary); background: var(--ps-bg-elevated); font-size: 0.75rem; cursor: pointer; }
.soc-post-create__visibility label.is-selected { border-color: var(--ps-primary); color: var(--ps-primary); background: var(--ps-primary-light); }
.soc-post-create__visibility label.is-buddies.is-selected { border-color: var(--ps-warning); color: var(--ps-warning); background: color-mix(in srgb, var(--ps-warning) 10%, transparent); }
.soc-post-create__visibility input,
.soc-post-create__tags input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.soc-post-create__visibility .soc-icon { width: 1rem; height: 1rem; }

.soc-post-create__tags > div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.soc-post-create__tags label { padding: 0.35rem 0.6rem; display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--ps-border); border-radius: 999px; color: var(--ps-text-secondary); background: var(--ps-bg-elevated); font-size: 0.7rem; cursor: pointer; }
.soc-post-create__tags label.is-selected { border-color: color-mix(in srgb, var(--ps-primary) 45%, transparent); color: var(--ps-primary); background: var(--ps-primary-light); }

.soc-manage-feed .soc-dialog__scroll > section { display: grid; gap: 0.45rem; }
.soc-manage-feed .soc-dialog__scroll h3 { margin: 0.3rem 0; color: var(--ps-text-secondary); font-family: Poppins, sans-serif; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
.soc-manage-feed .soc-dialog__scroll section > button { min-height: 3.2rem; padding: 0.65rem 0.8rem; display: grid; grid-template-columns: auto 1fr 1.25rem; align-items: center; gap: 0.65rem; border: 1px solid var(--ps-border); border-radius: 0.65rem; background: var(--ps-bg-elevated); text-align: left; }
.soc-manage-feed .soc-dialog__scroll section > button > span { font-size: 1.2rem; }
.soc-manage-feed .soc-dialog__scroll section > button strong { font-size: 0.8rem; }
.soc-manage-feed .soc-dialog__scroll section > button > i { width: 1.1rem; height: 1.1rem; display: grid; place-items: center; border: 2px solid var(--ps-border-light); border-radius: 50%; color: #fff; }
.soc-manage-feed .soc-dialog__scroll section > button > i .soc-icon { width: 0.7rem; height: 0.7rem; }
.soc-manage-feed .soc-dialog__scroll section > button.is-followed { border-color: color-mix(in srgb, var(--ps-primary) 45%, transparent); background: var(--ps-primary-light); }
.soc-manage-feed .soc-dialog__scroll section > button.is-followed > i { border-color: var(--ps-primary); background: var(--ps-primary); }

.soc-members { padding: 1rem; display: grid; gap: 1rem; }
.soc-members__search { padding: 1rem; border: 1px solid var(--ps-border); border-radius: 1rem; background: var(--ps-bg-surface); }
.soc-members__search > span { left: 1.8rem; }
.soc-member-directory { padding: 1rem; border: 1px solid var(--ps-border); border-radius: 1rem; background: var(--ps-bg-surface); }
.soc-member-directory > header { margin-bottom: 0.85rem; }
.soc-member-directory > header h2 { margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.45rem; font-family: Poppins, sans-serif; font-size: 0.95rem; }
.soc-member-directory > header h2 .soc-icon { color: var(--ps-primary); }
.soc-member-directory > header p { margin: 0; color: var(--ps-text-muted); font-size: 0.75rem; }
.soc-member-directory > div { display: grid; gap: 0.5rem; }
.soc-member-row { padding: 0.7rem; display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--ps-border); border-radius: 0.75rem; background: var(--ps-bg-surface); }
.soc-member-row:hover { background: var(--ps-bg-hover); }
.soc-member-row > button { min-width: 0; display: flex; align-items: center; flex: 1; gap: 0.65rem; text-align: left; }
.soc-member-row > button > span { min-width: 0; flex: 1; }
.soc-member-row > button strong { display: flex; align-items: center; gap: 0.35rem; overflow: hidden; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.soc-member-row > button strong.is-online::after,
.soc-member-row > button strong.is-chatting::after { content: ''; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--ps-primary); box-shadow: var(--ps-online-glow); }
.soc-member-row > button small { display: block; color: var(--ps-text-muted); font-size: 0.67rem; }
.soc-member-row > button em { display: flex; align-items: center; gap: 0.25rem; overflow: hidden; color: var(--ps-text-secondary); font-size: 0.68rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.soc-member-row > button em .soc-icon { width: 0.7rem; height: 0.7rem; color: var(--ps-primary); }
.soc-member-row > button > i { padding: 0.18rem 0.42rem; border-radius: 999px; color: #fff; background: var(--ps-primary); font-size: 0.63rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.soc-member-row > div { display: flex; gap: 0.35rem; }
.soc-member-row > div button { min-height: 2rem; padding: 0.35rem 0.55rem; display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--ps-border-light); border-radius: 0.5rem; color: var(--ps-text-secondary); font-size: 0.67rem; font-weight: 600; }
.soc-member-row > div button:first-child { color: var(--ps-primary); }
.soc-member-row > div .soc-icon { width: 0.82rem; height: 0.82rem; }

/* Chat */
.soc-chat-page,
.soc-chat-view { min-height: calc(100dvh - 7.25rem); }

.soc-chat-list__header { min-height: 4rem; padding: 0.8rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ps-border); background: var(--ps-bg-surface); }
.soc-chat-list__header h1 { margin: 0; font-family: Poppins, sans-serif; font-size: 1.25rem; }
.soc-chat-page > .soc-search { margin: 0.9rem 1rem; }
.soc-chat-list__body { padding: 0 1rem 1rem; }
.soc-chat-search-results h2 { margin: 1.25rem 0 0.65rem; color: var(--ps-text-muted); font-family: Poppins, sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }

.soc-person-row,
.soc-conversation-row { width: 100%; min-height: 4.5rem; padding: 0.7rem 0.75rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--ps-border) !important; text-align: left; }
.soc-person-row:hover,
.soc-conversation-row:hover { background: var(--ps-bg-hover) !important; }
.soc-person-row > span { min-width: 0; flex: 1; }
.soc-person-row strong { display: block; font-size: 0.86rem; }
.soc-person-row small { display: block; color: var(--ps-text-muted); font-size: 0.72rem; }
.soc-person-row > .soc-icon { color: var(--ps-primary); }

.soc-conversation-list { overflow: hidden; border: 1px solid var(--ps-border); border-radius: 0.9rem; background: var(--ps-bg-surface); }
.soc-conversation-list .soc-conversation-row:last-child { border-bottom: 0 !important; }
.soc-conversation-row__content { min-width: 0; display: grid; flex: 1; gap: 0.17rem; }
.soc-conversation-row__content > span { display: flex; align-items: center; gap: 0.35rem; }
.soc-conversation-row__content strong { overflow: hidden; flex: 1; font-size: 0.86rem; text-overflow: ellipsis; white-space: nowrap; }
.soc-conversation-row__content strong.is-online::after,
.soc-conversation-row__content strong.is-chatting::after { content: ''; width: 0.4rem; height: 0.4rem; margin-left: 0.35rem; display: inline-block; border-radius: 50%; background: var(--ps-primary); box-shadow: var(--ps-online-glow); }
.soc-conversation-row__content > span > .soc-icon { width: 0.82rem; height: 0.82rem; color: var(--ps-warning); }
.soc-conversation-row__content time { color: var(--ps-text-muted); font-size: 0.64rem; white-space: nowrap; }
.soc-conversation-row__content > small { overflow: hidden; color: var(--ps-text-muted); font-size: 0.73rem; text-overflow: ellipsis; white-space: nowrap; }
.soc-conversation-row__content > small.is-unread { color: var(--ps-text-primary); font-weight: 600; }
.soc-conversation-row > i { min-width: 1.2rem; height: 1.2rem; padding: 0 0.25rem; display: grid; place-items: center; border-radius: 999px; color: #fff; background: var(--ps-primary); font-size: 0.6rem; font-style: normal; font-weight: 700; }

.soc-group-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--ps-primary), var(--ps-gold)); }
.soc-group-avatar--small { width: 2rem; height: 2rem; }
.soc-group-avatar--medium { width: 2.5rem; height: 2.5rem; }
.soc-group-avatar--large { width: 2.75rem; height: 2.75rem; }
.soc-group-avatar--xlarge { width: 3.5rem; height: 3.5rem; }
.soc-group-avatar .soc-icon { width: 45%; height: 45%; }

.soc-chat-view { height: calc(100dvh - 7.25rem); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.soc-chat-view__header { min-height: 3.6rem; padding: 0.5rem 0.7rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--ps-border); background: var(--ps-bg-surface); }
.soc-chat-view__title { min-width: 0; padding: 0.25rem; display: flex; align-items: flex-start; flex: 1; flex-direction: column; text-align: left; }
.soc-chat-view__title strong { max-width: 100%; overflow: hidden; font-size: 0.86rem; text-overflow: ellipsis; white-space: nowrap; }
.soc-chat-view__title small { display: flex; align-items: center; gap: 0.25rem; color: var(--ps-text-muted); font-size: 0.64rem; }
.soc-chat-view__title small .soc-icon { width: 0.72rem; height: 0.72rem; }
.soc-chat-view__messages { min-height: 0; padding: 0.75rem; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.soc-chat-empty { min-height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--ps-text-muted); text-align: center; }
.soc-chat-empty h3 { margin: 0.6rem 0 0.12rem; color: var(--ps-text-primary); font-family: Poppins, sans-serif; font-size: 0.9rem; }
.soc-chat-empty p { margin: 0; font-size: 0.72rem; }
.soc-chat-date { margin: 0.65rem 0; display: flex; justify-content: center; }
.soc-chat-date span { padding: 0.18rem 0.5rem; border-radius: 999px; color: var(--ps-text-muted); background: var(--ps-bg-elevated); font-size: 0.62rem; }

.soc-message-row { margin: 0.2rem 0; display: flex; align-items: flex-end; justify-content: flex-start; }
.soc-message-row.is-own { justify-content: flex-end; }
.soc-message-spacer { width: 1.15rem; flex: 0 0 auto; }
.soc-message-wrap { position: relative; max-width: min(78%, 27rem); }
.soc-message-wrap > button:first-child { margin: 0 0 0.15rem 0.35rem; display: block; color: var(--ps-primary); font-size: 0.62rem; font-weight: 600; }
.soc-message { position: relative; min-width: 2.5rem; padding: 0.45rem 0.7rem; border: 1px solid var(--ps-border); border-radius: 1rem 1rem 1rem 0.2rem; color: var(--ps-text-primary); background: var(--ps-bg-surface); }
.soc-message-row.is-own .soc-message { border-color: transparent; border-radius: 1rem 1rem 0.2rem 1rem; color: #fff; background: var(--ps-primary); }
.soc-message.is-failed { border-color: var(--ps-error); opacity: 0.75; }
.soc-message p { margin: 0; font-size: 0.78rem; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.soc-message > i { position: absolute; top: -0.25rem; right: -0.25rem; color: var(--ps-gold); }
.soc-message > i .soc-icon { width: 0.7rem; height: 0.7rem; fill: currentColor; }
.soc-message-save { position: absolute; top: 50%; right: -2rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; color: var(--ps-text-muted) !important; opacity: 0; transform: translateY(-50%); transition: opacity 120ms ease; }
.soc-message-row.is-own .soc-message-save { right: auto; left: -2rem; }
.soc-message-wrap:hover .soc-message-save,
.soc-message-save:focus-visible { opacity: 1; }
.soc-message-save:hover { background: var(--ps-bg-hover) !important; }
.soc-message-save .soc-icon { width: 0.9rem; height: 0.9rem; }
.soc-message-retry { margin: 0.2rem 0.4rem 0; display: block; color: var(--ps-error) !important; font-size: 0.58rem; }

.soc-typing { margin: 0.65rem 0; display: grid; grid-template-columns: 1.7rem auto 1fr; align-items: center; gap: 0.45rem; color: var(--ps-text-muted); }
.soc-typing > span { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--ps-primary), var(--ps-gold)); font-size: 0.68rem; font-weight: 700; }
.soc-typing > i { padding: 0.5rem 0.65rem; display: flex; gap: 0.2rem; border-radius: 0.75rem; background: var(--ps-bg-surface); }
.soc-typing b { width: 0.28rem; height: 0.28rem; border-radius: 50%; background: var(--ps-text-muted); animation: soc-typing 900ms ease-in-out infinite alternate; }
.soc-typing b:nth-child(2) { animation-delay: 150ms; }
.soc-typing b:nth-child(3) { animation-delay: 300ms; }
.soc-typing small { font-size: 0.62rem; }
@keyframes soc-typing { to { transform: translateY(-0.2rem); opacity: 0.5; } }

.soc-chat-composer { padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--ps-border); background: var(--ps-bg-surface); }
.soc-chat-composer > div { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.soc-chat-composer .soc-input { min-height: 2.6rem; }
.soc-chat-composer button { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ps-primary); }
.soc-chat-composer button:disabled { color: var(--ps-text-muted); background: var(--ps-bg-elevated); }

.soc-group-dialog .soc-dialog__scroll { min-height: 18rem; }
.soc-selected-members { display: grid; gap: 0.4rem; }
.soc-selected-members > span { color: var(--ps-text-secondary); font-size: 0.72rem; font-weight: 600; }
.soc-selected-members > div { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.soc-selected-members button { padding: 0.32rem 0.55rem; display: flex; align-items: center; gap: 0.25rem; border-radius: 999px; color: var(--ps-primary); background: var(--ps-primary-light); font-size: 0.68rem; }
.soc-selected-members .soc-icon { width: 0.7rem; height: 0.7rem; }
.soc-group-results { max-height: 13rem; overflow-y: auto; border: 1px solid var(--ps-border); border-radius: 0.7rem; }
.soc-group-results button { width: 100%; min-height: 3.25rem; padding: 0.55rem 0.7rem; display: flex; align-items: center; gap: 0.55rem; border-bottom: 1px solid var(--ps-border); text-align: left; }
.soc-group-results button:last-child { border-bottom: 0; }
.soc-group-results button:hover { background: var(--ps-bg-hover); }
.soc-group-results button > span:not(.soc-avatar) { min-width: 0; flex: 1; overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.soc-group-results button > .soc-icon { color: var(--ps-primary); }

/* Pro Shop */
.soc-shop-page { padding-bottom: 1rem; }
.soc-shop-header { min-height: 4.4rem; padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ps-border); background: var(--ps-bg-base); }
.soc-shop-header h1 { margin: 0; font-family: Poppins, sans-serif; font-size: 1.2rem; }
.soc-shop-header p { margin: 0.15rem 0 0; color: var(--ps-text-secondary); font-size: 0.75rem; }
.soc-shop-header > button { min-height: 2.25rem; padding: 0.35rem 0.6rem; border-radius: 0.55rem; color: var(--ps-primary); font-size: 0.9rem; font-weight: 700; }
.soc-shop-header > button:hover { background: var(--ps-primary-light); }
.soc-shop-search { margin: 1rem; }
.soc-shop-grid { padding: 0 1rem 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.soc-shop-grid > .soc-state,
.soc-shop-grid > .soc-empty,
.soc-shop-grid > .soc-error { grid-column: 1 / -1; }

.soc-listing-card { min-width: 0; overflow: hidden; border: 1px solid var(--ps-border) !important; border-radius: 0.75rem; background: var(--ps-bg-surface) !important; text-align: left; transition: border-color 160ms ease, transform 100ms ease; }
.soc-listing-card:hover { border-color: var(--ps-primary) !important; }
.soc-listing-card:active { transform: scale(0.98); }
.soc-listing-card.is-sold { opacity: 0.72; }
.soc-listing-card__media { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; color: var(--ps-text-muted); background: var(--ps-bg-elevated); }
.soc-listing-card__media img { width: 100%; height: 100%; object-fit: cover; }
.soc-listing-card__media > i .soc-icon { width: 2.5rem; height: 2.5rem; }
.soc-listing-card__media > b,
.soc-listing-detail__image > b { position: absolute; inset: 50% auto auto 50%; padding: 0.4rem 1rem; border-radius: 0.45rem; color: #fff; background: #16a34a; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); font-size: 0.95rem; letter-spacing: 0.04em; transform: translate(-50%, -50%) rotate(-12deg); }
.soc-listing-card__body { min-width: 0; padding: 0.7rem; display: grid; gap: 0.25rem; }
.soc-listing-card__body > span { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.soc-listing-card__body strong { color: var(--ps-primary); font-size: 1rem; }
.soc-listing-card__body > span i { padding: 0.08rem 0.35rem; border-radius: 0.3rem; color: #15803d; background: #dcfce7; font-size: 0.6rem; font-style: normal; font-weight: 650; }
.soc-listing-card__body > b { min-height: 2.25rem; display: -webkit-box; overflow: hidden; color: var(--ps-text-primary); font-size: 0.78rem; font-weight: 550; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.soc-listing-card__body > small { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; color: var(--ps-text-muted); font-size: 0.62rem; }

.soc-listing-detail { z-index: 160; padding: 0; align-items: stretch; background: rgba(0, 0, 0, 0.82); backdrop-filter: none; }
.soc-listing-detail > section { width: min(40rem, 100%); min-height: 100dvh; margin: 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; color: var(--ps-text-primary); background: var(--ps-bg-base); box-shadow: 0 0 45px rgba(0, 0, 0, 0.55); }
.soc-listing-detail > section > header { min-height: 3.8rem; padding: 0.7rem 0.9rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--ps-border); background: var(--ps-bg-surface); }
.soc-listing-detail > section > header > button { display: inline-flex; align-items: center; justify-self: start; gap: 0.3rem; font-size: 0.78rem; }
.soc-listing-detail > section > header h2 { margin: 0; font-family: Poppins, sans-serif; font-size: 0.82rem; }
.soc-listing-detail > section > header > div { display: flex; justify-self: end; gap: 0.2rem; }
.soc-listing-detail > section > header > div button { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: var(--ps-text-secondary); }
.soc-listing-detail > section > header > div button:hover { background: var(--ps-bg-hover); }
.soc-listing-detail__scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.soc-listing-detail__image { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; color: var(--ps-text-muted); background: var(--ps-bg-elevated); }
.soc-listing-detail__image > img { width: 100%; height: 100%; object-fit: contain; }
.soc-listing-detail__image > span { display: grid; place-items: center; gap: 0.5rem; }
.soc-listing-detail__image > span .soc-icon { width: 3.5rem; height: 3.5rem; }
.soc-listing-detail__image > span small { font-size: 0.72rem; }
.soc-listing-detail__body { padding: 1rem; display: grid; gap: 1rem; }
.soc-listing-detail__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.soc-listing-detail__heading > div { min-width: 0; }
.soc-listing-detail__heading > div > strong { color: var(--ps-primary); font-size: 1.75rem; }
.soc-listing-detail__heading > div > strong.is-sold { color: var(--ps-text-muted); text-decoration: line-through; }
.soc-listing-detail__heading h1 { margin: 0.15rem 0; font-family: Poppins, sans-serif; font-size: 1.15rem; overflow-wrap: anywhere; }
.soc-listing-detail__heading p { margin: 0.35rem 0 0; display: flex; align-items: center; gap: 0.3rem; color: var(--ps-text-secondary); font-size: 0.72rem; }
.soc-listing-detail__heading p .soc-icon { width: 0.85rem; height: 0.85rem; }
.soc-listing-detail__heading > button { min-width: 3rem; display: flex; align-items: center; flex-direction: column; gap: 0.2rem; border-radius: 0.55rem; color: var(--ps-text-secondary); }
.soc-listing-detail__heading > button.is-saved { color: var(--ps-primary); }
.soc-listing-detail__heading > button.is-saved .soc-icon { fill: currentColor; }
.soc-listing-detail__heading > button small { font-size: 0.62rem; }

.soc-listing-actions { padding: 0.55rem 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ps-border); border-bottom: 1px solid var(--ps-border); }
.soc-listing-actions button { min-height: 3.2rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.2rem; border-radius: 0.55rem; color: var(--ps-text-secondary); font-size: 0.66rem; }
.soc-listing-actions button:hover:not(:disabled) { color: var(--ps-primary); background: var(--ps-primary-light); }
.soc-listing-actions button:disabled { opacity: 0.35; }

.soc-listing-section { padding-top: 0.4rem; }
.soc-listing-section h3,
.soc-listing-contact h3,
.soc-listing-seller h3 { margin: 0 0 0.55rem; color: var(--ps-text-primary); font-family: Poppins, sans-serif; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; }
.soc-listing-section p { margin: 0; color: var(--ps-text-secondary); font-size: 0.84rem; line-height: 1.65; white-space: pre-wrap; }
.soc-listing-section dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; font-size: 0.78rem; }
.soc-listing-section dt { color: var(--ps-text-muted); }
.soc-listing-section dd { margin: 0; color: var(--ps-text-primary); text-transform: capitalize; }
.soc-listing-contact { padding: 0.9rem; border: 1px solid var(--ps-border); border-radius: 0.8rem; background: var(--ps-bg-elevated); }
.soc-listing-contact form { display: grid; gap: 0.55rem; }
.soc-listing-contact .soc-textarea { min-height: 4.75rem; background: var(--ps-bg-surface); }
.soc-listing-contact .soc-button { justify-self: end; }
.soc-listing-seller { padding-top: 0.9rem; display: grid; gap: 0.65rem; border-top: 1px solid var(--ps-border); }
.soc-listing-seller > header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.soc-listing-seller > header h3 { margin: 0; }
.soc-listing-seller > header button { display: flex; align-items: center; gap: 0.25rem; color: var(--ps-primary); font-size: 0.68rem; font-weight: 600; }
.soc-listing-seller > header .soc-icon { width: 0.75rem; height: 0.75rem; }
.soc-listing-seller__person { min-width: 0; display: flex; align-items: center; gap: 0.7rem; text-align: left; }
.soc-listing-seller__person > span { min-width: 0; }
.soc-listing-seller__person strong { display: block; overflow: hidden; font-size: 0.83rem; text-overflow: ellipsis; white-space: nowrap; }
.soc-listing-seller__person small { color: var(--ps-text-muted); font-size: 0.68rem; }
.soc-listing-seller > .soc-button { justify-self: start; }
.soc-safety-tip { padding: 0.7rem; display: flex; align-items: flex-start; gap: 0.55rem; border-radius: 0.65rem; color: var(--ps-text-secondary); background: color-mix(in srgb, var(--ps-warning) 10%, transparent); }
.soc-safety-tip > span { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: color-mix(in srgb, var(--ps-warning) 20%, transparent); font-size: 0.75rem; }
.soc-safety-tip p { margin: 0; font-size: 0.7rem; line-height: 1.5; }
.soc-safety-tip strong { color: var(--ps-warning); }

.soc-listing-detail__footer { padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--ps-border); background: var(--ps-bg-surface); }
.soc-listing-detail__footer > .soc-button { width: 100%; }
.soc-listing-detail__footer > div { display: grid; gap: 0.45rem; }
.soc-listing-detail__footer > div > p { margin: 0; display: flex; align-items: center; justify-content: center; gap: 0.35rem; color: #15803d; font-size: 0.75rem; font-weight: 650; }
.soc-listing-detail__footer > div > span { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; }
.soc-listing-detail__footer > div > small { color: var(--ps-text-muted); font-size: 0.65rem; text-align: center; }

.soc-confirm-dialog { max-width: 23rem; padding: 1.3rem; align-items: center; text-align: center; }
.soc-confirm-dialog__icon { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; color: var(--ps-error); background: color-mix(in srgb, var(--ps-error) 13%, transparent); }
.soc-confirm-dialog__icon .soc-icon { width: 1.8rem; height: 1.8rem; }
.soc-confirm-dialog h2 { margin: 0.8rem 0 0.25rem; font-family: Poppins, sans-serif; font-size: 1.05rem; }
.soc-confirm-dialog p { margin: 0; color: var(--ps-text-secondary); font-size: 0.78rem; }
.soc-confirm-dialog footer { width: 100%; margin-top: 1.1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }

.soc-share-sheet { width: min(28rem, calc(100% + 2rem)); margin: 0 -1rem; padding: 0.8rem 1rem calc(1.35rem + env(safe-area-inset-bottom)); border: 1px solid var(--ps-border); border-bottom: 0; border-radius: 1.5rem 1.5rem 0 0; color: var(--ps-text-primary); background: var(--ps-bg-surface); }
.soc-share-sheet > i { width: 3rem; height: 0.22rem; margin: 0 auto 0.75rem; display: block; border-radius: 99px; background: var(--ps-border-light); }
.soc-share-sheet h2 { margin: 0 0 1rem; font-family: Poppins, sans-serif; font-size: 1rem; }
.soc-share-sheet > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.soc-share-sheet > div > button,
.soc-share-sheet > div > a { display: flex; align-items: center; flex-direction: column; gap: 0.4rem; color: var(--ps-text-secondary); font-size: 0.68rem; }
.soc-share-sheet > div > button > span,
.soc-share-sheet > div > a > span { width: 3.3rem; height: 3.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--ps-bg-elevated); }
.soc-share-sheet > div > a:nth-child(2) > span { color: #fff; background: #22c55e; }
.soc-share-sheet > div > a:nth-child(3) > span { color: #fff; background: #16a34a; }

.soc-listing-create .soc-dialog__scroll { padding-bottom: 2rem; }
.soc-listing-create__preview > img { width: 100%; height: 12rem; object-fit: cover; }
.soc-listing-create__preview .soc-button--ai { position: absolute; right: 0.5rem; bottom: 0.5rem; left: 0.5rem; width: calc(100% - 1rem); }
.soc-photo-choices,
.soc-story-create__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.soc-photo-choices label,
.soc-story-create__choices label { min-height: 7rem; padding: 0.75rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.45rem; border: 2px dashed var(--ps-border-light); border-radius: 0.75rem; color: var(--ps-text-secondary); text-align: center; cursor: pointer; transition: border-color 160ms ease, color 160ms ease; }
.soc-photo-choices label:hover,
.soc-story-create__choices label:hover { border-color: var(--ps-primary); color: var(--ps-primary); }
.soc-photo-choices label > .soc-icon,
.soc-story-create__choices label > .soc-icon { width: 2rem; height: 2rem; color: var(--ps-primary); }
.soc-photo-choices label:nth-child(2) > .soc-icon,
.soc-story-create__choices label:nth-child(2) > .soc-icon { color: var(--ps-text-muted); }
.soc-photo-choices label strong,
.soc-story-create__choices label strong { font-size: 0.76rem; }
.soc-photo-choices input,
.soc-story-create__choices input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Compact user profile modal */
.soc-profile-dialog { max-width: 26rem; }
.soc-profile-dialog__hero { position: relative; min-height: 7.5rem; display: grid; place-items: end center; padding-bottom: 0.25rem; background: linear-gradient(135deg, color-mix(in srgb, var(--ps-primary) 28%, var(--ps-bg-elevated)), var(--ps-bg-elevated)); }
.soc-profile-dialog__hero > .soc-avatar { width: 5rem; height: 5rem; border-width: 3px; border-color: var(--ps-bg-surface); transform: translateY(1.25rem); }
.soc-profile-dialog__avatar { padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translateY(1.25rem); transition: transform 150ms ease; }
.soc-profile-dialog__avatar:hover { transform: translateY(1.25rem) scale(1.08); }
.soc-profile-dialog__avatar > .soc-avatar { width: 5rem; height: 5rem; border-width: 3px; border-color: var(--ps-bg-surface); }
.soc-profile-dialog__close { position: absolute; top: 0.65rem; right: 0.65rem; color: #fff !important; background: rgba(0, 0, 0, 0.28) !important; }
.soc-profile-dialog__body { padding: 1.85rem 1rem 1rem; text-align: center; }
.soc-profile-dialog__body h2 { margin: 0; font-family: Poppins, sans-serif; font-size: 1.15rem; }
.soc-profile-dialog__heading { display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.soc-profile-dialog__heading > span { padding: 0.18rem 0.45rem; border-radius: 999px; color: #fff; background: var(--ps-primary); font-size: 0.65rem; font-weight: 700; }
.soc-profile-dialog__username { margin: 0.15rem 0 0; color: var(--ps-text-muted); font-size: 0.74rem; }
.soc-profile-dialog__primary { margin: 0.8rem 0; display: flex; justify-content: center; }
.soc-profile-buddy { padding: 0.45rem 0.7rem; display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; color: var(--ps-primary); background: var(--ps-primary-light); font-size: 0.75rem; font-weight: 650; }
.soc-profile-dialog__bio { margin: 0.75rem 0 0; color: var(--ps-text-secondary); font-size: 0.78rem; }
.soc-profile-dialog__meta { margin: 0.45rem 0 0; display: flex; align-items: center; justify-content: center; gap: 0.25rem; color: var(--ps-text-muted); font-size: 0.7rem; }
.soc-profile-dialog__meta .soc-icon { width: 0.8rem; height: 0.8rem; }
.soc-profile-dialog__stats { margin: 1rem 0; padding: 0.75rem 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ps-border); border-bottom: 1px solid var(--ps-border); }
.soc-profile-dialog__stats span,
.soc-profile-dialog__stats button { display: grid; gap: 0.12rem; padding: 0; border: 0; border-right: 1px solid var(--ps-border); color: inherit; background: transparent; text-align: center; }
.soc-profile-dialog__stats span:last-child,
.soc-profile-dialog__stats button:last-child { border-right: 0; }
.soc-profile-dialog__stats button:hover small { color: var(--ps-primary); text-decoration: underline; }
.soc-profile-dialog__stats strong { color: var(--ps-text-primary); font-size: 1rem; }
.soc-profile-dialog__stats small { color: var(--ps-text-muted); font-size: 0.62rem; }
.soc-profile-dialog__actions { margin: 0.85rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.soc-profile-dialog__actions .soc-button { width: 100%; }
.soc-button--message { color: #fff; background: #2563eb; }
.soc-button--message:hover { background: #1d4ed8; }
.soc-profile-buddies { margin: -0.2rem 0 0.85rem; padding: 0.75rem; border: 1px solid var(--ps-border); border-radius: 0.75rem; background: color-mix(in srgb, var(--ps-bg-base) 62%, transparent); text-align: left; }
.soc-profile-buddies > header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.soc-profile-buddies > header h3 { margin: 0; display: flex; align-items: center; gap: 0.35rem; color: var(--ps-text-primary); font-family: Poppins, sans-serif; font-size: 0.72rem; }
.soc-profile-buddies > header h3 .soc-icon { width: 0.9rem; height: 0.9rem; color: var(--ps-primary); }
.soc-profile-buddies__empty { margin: 0; padding: 0.6rem; color: var(--ps-text-muted); font-size: 0.72rem; text-align: center; }
.soc-profile-buddies__list { max-height: 10rem; display: grid; gap: 0.25rem; overflow-y: auto; }
.soc-profile-buddies__list > button { width: 100%; display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem; border: 0; border-radius: 0.5rem; color: var(--ps-text-primary); background: transparent; text-align: left; }
.soc-profile-buddies__list > button:hover { background: var(--ps-bg-hover); }
.soc-profile-buddies__list > button > span:nth-child(2) { min-width: 0; flex: 1; display: grid; }
.soc-profile-buddies__list strong { overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.soc-profile-buddies__list small { color: var(--ps-primary); font-size: 0.64rem; }
.soc-profile-buddies__list em { padding: 0.12rem 0.35rem; border-radius: 999px; color: var(--ps-primary); background: var(--ps-primary-light); font-size: 0.58rem; font-style: normal; }
.soc-text-button { margin-top: 0.8rem; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ps-primary) !important; font-size: 0.75rem; font-weight: 600; }
.soc-text-button .soc-icon { width: 0.8rem; height: 0.8rem; }

/* Story viewer and creator */
.soc-story-viewer { z-index: 210; padding: 0; align-items: stretch; background: #000; backdrop-filter: none; }
.soc-story-viewer__dialog { position: relative; width: min(30rem, 100%); height: 100dvh; margin: 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; color: #fff; background: #090909; }
.soc-story-progress { position: absolute; z-index: 5; top: 0.55rem; right: 0.65rem; left: 0.65rem; display: flex; gap: 0.25rem; }
.soc-story-progress > i { height: 0.15rem; overflow: hidden; flex: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.3); }
.soc-story-progress > i > span { height: 100%; display: block; border-radius: inherit; background: #fff; }
.soc-story-viewer__dialog > header { position: absolute; z-index: 6; top: 1rem; right: 0; left: 0; padding: 0.65rem; display: flex; align-items: center; gap: 0.55rem; }
.soc-story-viewer__dialog > header .soc-avatar { border-color: rgba(255, 255, 255, 0.35); }
.soc-story-viewer__dialog > header > span { min-width: 0; flex: 1; }
.soc-story-viewer__dialog > header strong { display: block; overflow: hidden; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.soc-story-viewer__dialog > header small { display: block; color: rgba(255, 255, 255, 0.68); font-size: 0.64rem; }
.soc-story-viewer__dialog > header button { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, 0.3); }
.soc-story-viewer__content { grid-row: 1 / -1; min-height: 0; display: grid; align-items: center; overflow: hidden; }
.soc-story-viewer__content img { width: 100%; height: 100%; max-height: 100dvh; object-fit: contain; }
.soc-story-viewer__content > p { position: absolute; z-index: 5; right: 1rem; bottom: 4rem; left: 1rem; margin: 0; padding: 0.65rem; border-radius: 0.65rem; color: #fff; background: rgba(0, 0, 0, 0.48); font-size: 0.78rem; text-align: center; }
.soc-story-viewer__text { position: absolute; z-index: 5; right: 1rem; bottom: 4.25rem; left: 1rem; margin: 0; padding: 0.65rem; border-radius: 0.65rem; color: #fff; background: rgba(0, 0, 0, 0.48); font-size: 0.78rem; text-align: center; }
.soc-story-viewer__nav { position: absolute; z-index: 4; top: 20%; bottom: 20%; width: 22%; opacity: 0; }
.soc-story-viewer__nav--previous { left: 0; }
.soc-story-viewer__nav--next { right: 0; }
.soc-story-viewer__dialog > footer { position: absolute; z-index: 7; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); left: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.55rem; }
.soc-story-viewer__dialog > footer button { min-height: 2.5rem; padding: 0.45rem 0.7rem; display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; color: #fff; background: rgba(0, 0, 0, 0.52); font-size: 0.72rem; backdrop-filter: blur(6px); }
.soc-story-viewer__dialog > footer button.is-danger { color: #fecaca; }
.soc-story-viewers { position: absolute; z-index: 10; inset: auto 0 0; max-height: 55%; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 1.2rem 1.2rem 0 0; color: var(--ps-text-primary); background: var(--ps-bg-surface); }
.soc-story-viewers > header { display: flex; align-items: center; justify-content: space-between; }
.soc-story-viewers h3 { margin: 0; font-family: Poppins, sans-serif; font-size: 0.9rem; }
.soc-story-viewers > header button { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--ps-text-secondary); }
.soc-story-viewers > div { min-height: 2.8rem; display: flex; align-items: center; gap: 0.6rem; }
.soc-story-viewers > div:first-of-type { margin-top: 0.7rem; }
.soc-story-viewers > div > span:last-child { font-size: 0.78rem; font-weight: 600; }
.soc-story-viewers > p { margin: 1.5rem 0; color: var(--ps-text-muted); font-size: 0.78rem; text-align: center; }

.soc-story-create { max-width: 28rem; }
.soc-story-create__preview img { width: 100%; max-height: 27rem; object-fit: contain; }

/* Full-screen media viewer */
.soc-media-viewer { z-index: 220; padding: 0; align-items: stretch; background: rgba(0, 0, 0, 0.96); backdrop-filter: none; }
.soc-media-viewer__dialog { width: min(58rem, 100%); height: 100dvh; margin: 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; color: #fff; background: #050505; }
.soc-media-viewer__dialog > header { min-height: 3.6rem; padding: 0.65rem 0.85rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.soc-media-viewer__dialog > header > span { color: rgba(255, 255, 255, 0.72); font-size: 0.72rem; }
.soc-media-viewer__dialog > header > div { display: flex; gap: 0.3rem; }
.soc-media-viewer__dialog > header button { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.09); }
.soc-media-viewer__stage { position: relative; min-height: 0; display: grid; place-items: center; overflow: auto; }
.soc-media-viewer__image { width: 100%; height: 100%; display: grid; place-items: center; cursor: zoom-in; }
.soc-media-viewer__image.is-zoomed { min-width: 170%; min-height: 170%; cursor: zoom-out; }
.soc-media-viewer__image img { width: 100%; height: 100%; object-fit: contain; }
.soc-media-viewer__video,
.soc-media-viewer__frame { width: 100%; height: 100%; border: 0; object-fit: contain; }
.soc-media-viewer__external { min-height: 12rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.55rem; color: #fff; }
.soc-media-viewer__external > .soc-icon { width: 3rem; height: 3rem; }
.soc-media-viewer__external span { color: rgba(255, 255, 255, 0.62); font-size: 0.72rem; }
.soc-media-viewer__nav { position: absolute; z-index: 2; top: 50%; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, 0.5); transform: translateY(-50%); }
.soc-media-viewer__nav--previous { left: 0.65rem; }
.soc-media-viewer__nav--next { right: 0.65rem; }
.soc-media-viewer__dialog > footer { padding: 0.7rem 0.9rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.soc-media-viewer__dialog > footer > div { min-width: 0; }
.soc-media-viewer__dialog > footer strong,
.soc-media-viewer__dialog > footer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-media-viewer__dialog > footer strong { font-size: 0.75rem; }
.soc-media-viewer__dialog > footer small,
.soc-media-viewer__dialog > footer > span { color: rgba(255, 255, 255, 0.62); font-size: 0.65rem; }
.soc-media-viewer__dialog > footer p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.75rem; }
.soc-media-viewer__dots { min-height: 1.5rem; padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
.soc-media-viewer__dots button { width: 0.35rem; height: 0.35rem; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.soc-media-viewer__dots button.is-active { background: #fff; transform: scale(1.2); }

@media (min-width: 768px) {
  .soc-page { min-height: calc(100vh - 9.25rem); }
  .soc-feed-nav { top: 4.6rem; }
  .soc-chat-page,
  .soc-chat-view { min-height: calc(100vh - 9.25rem); }
  .soc-chat-view { height: calc(100vh - 9.25rem); border: 1px solid var(--ps-border); border-radius: 1rem; }
  .soc-shop-page,
  .soc-feed-page,
  .soc-chat-page { overflow: hidden; border: 1px solid var(--ps-border); border-radius: 1rem; }
  .soc-listing-detail > section { min-height: min(92vh, 52rem); margin: auto; border: 1px solid var(--ps-border); border-radius: 1rem; }
  .soc-listing-detail { padding: 1rem; }
  .soc-listing-detail__image { aspect-ratio: 4 / 3; }
  .soc-story-viewer__dialog,
  .soc-media-viewer__dialog { height: min(94vh, 56rem); margin: auto; border-radius: 1rem; }
  .soc-story-viewer,
  .soc-media-viewer { padding: 1rem; }
}

@media (max-width: 520px) {
  .soc-modal-layer:not(.soc-modal-layer--nested):not(.soc-modal-layer--sheet) { padding: 0; align-items: flex-end; }
  .soc-modal-layer:not(.soc-modal-layer--nested):not(.soc-modal-layer--sheet) > .soc-dialog { width: 100%; max-height: 92dvh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 1.1rem 1.1rem 0 0; }
  .soc-modal-layer--nested { padding: 0.75rem; }
  .soc-dialog__footer { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
  .soc-feed-nav nav { padding-inline: 0.65rem; gap: 0.1rem; }
  .soc-feed-nav nav > button { padding-inline: 0.5rem; font-size: 0.7rem; }
  .soc-feed-stats-wrap,
  .soc-stories { padding-right: 0.75rem; padding-left: 0.75rem; }
  .soc-feed-posts { padding: 0; gap: 0.7rem; }
  .soc-post { border-right: 0; border-left: 0; border-radius: 0; }
  .soc-stats-card { grid-template-columns: 0.95fr 1.35fr; }
  .soc-stats-card > button { padding: 0.58rem; }
  .soc-stats-card > button:first-child { grid-template-columns: 2.25rem 1fr auto; gap: 0.35rem; }
  .soc-stats-card > button:first-child > span { width: 2.2rem; height: 2.2rem; font-size: 0.78rem; }
  .soc-stats-card small { font-size: 0.52rem; }
  .soc-stats-card strong { font-size: 0.73rem; }
  .soc-member-row { align-items: flex-start; flex-direction: column; }
  .soc-member-row > button { width: 100%; }
  .soc-member-row > div { width: 100%; justify-content: flex-end; }
  .soc-pwa-prompt { grid-template-columns: auto 1fr auto; }
  .soc-pwa-prompt > .soc-icon-button { grid-column: 3; grid-row: 1; }
  .soc-pwa-prompt > .soc-button { grid-column: 1 / -1; width: 100%; }
  .soc-profile-dialog__message > div { grid-template-columns: 1fr; }
  .soc-profile-dialog__message .soc-button { width: 100%; }
}

@media (max-width: 370px) {
  .soc-feed-nav nav > button { padding-inline: 0.36rem; font-size: 0.64rem; }
  .soc-stats-card > button:first-child > i { display: none; }
  .soc-stats-card > button:first-child { grid-template-columns: 2.15rem 1fr; }
  .soc-listing-card__body { padding: 0.55rem; }
  .soc-listing-detail__footer > div > span { grid-template-columns: 1fr auto; }
  .soc-listing-detail__footer > div > span .soc-button--secondary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .soc-spinner,
  .soc-stats-card.is-loading i,
  .soc-typing b { animation-duration: 1ms; animation-iteration-count: 1; }
  .soc-chat-view__messages { scroll-behavior: auto; }
}