/* Source: styles-v340-tags.css */
/* Keep tags inline with the story/bio, including image stories. */
#storyDialog .story-text .inline-text-tag,
#profileBioDisplay .inline-text-tag {
  display: inline !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  font-weight: 800 !important;
  text-shadow: inherit;
  text-transform: none;
  white-space: normal !important;
  overflow-wrap: anywhere;
  vertical-align: baseline;
  transform: none !important;
  cursor: pointer;
}
#storyDialog .story-text .inline-text-tag:hover,
#profileBioDisplay .inline-text-tag:hover { text-decoration: underline; }
#storyDialog .story-text .inline-text-tag:focus-visible,
#profileBioDisplay .inline-text-tag:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* Source: styles-employees.css */
/* The credit keeps its original typography; only its underline is new. */
#xentikEmployeesButton {
  all: unset !important;
  display: inline !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
#xentikEmployeesButton:hover,
#xentikEmployeesButton:active,
#xentikEmployeesButton[aria-expanded="true"] {
  color: var(--text) !important;
  text-shadow: 0.25px 0 currentColor, -0.25px 0 currentColor !important;
  text-decoration-thickness: 2px !important;
}
#xentikEmployeesButton:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 4px !important; }
#employeeModal .employee-modal {
  width: min(680px, calc(100vw - 28px)) !important;
  height: min(650px, calc(100dvh - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  border-radius: var(--ui-radius-surface, 42px) !important;
}
#employeeModal .employee-header { flex: 0 0 auto; }
#employeeModal .employee-panel { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; margin: 0; overflow: hidden; }
#employeeModal .hidden { display: none !important; }
#employeeModal .employee-list-heading { justify-content: space-between; flex: 0 0 auto; }
#employeeModal .employee-list-heading h3 { margin: 0; }
#employeeModal .employee-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
#employeeModal .employee-profile { flex: 1; min-width: 0; }
/* No employee skin, avatar size, padding, gap, radius or font override:
   all three screens use Messages' dm-inbox markup and shared styles. */
#employeeModal .employee-edit {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  line-height: 0;
}
#employeeModal .employee-edit .employee-edit-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
#employeeModal .employee-description-label { display: block; margin: 18px 0 8px; font-size: 14px; font-weight: 700; }
#employeeModal #employeeDescription {
  box-sizing: border-box; width: 100%; height: auto !important;
  min-height: 130px !important; max-height: 230px; padding: 14px 16px;
  border-radius: var(--ui-radius-field, 22px) !important; font-size: 16px; resize: vertical;
}
#employeeModal .employee-hint { margin: 8px 0; font-size: 12px; color: var(--secondary-text); }
#employeeModal .employee-editor-actions { display: flex; gap: 10px; padding: 12px 20px 16px; margin-top: auto; flex: 0 0 auto; }
#employeeModal .employee-editor-actions button { flex: 1; min-width: 0; min-height: 44px; }
#employeeModal #employeeRemove { flex: 0 0 auto; align-self: center; margin: 0 0 18px; min-height: 24px; }
#employeeModal .employee-retry { margin: 8px 20px; align-self: flex-start; min-height: 32px; }
#employeeModal button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
@media (max-width: 700px) {
  #employeeModal { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  #employeeModal .employee-modal {
    width: min(420px, calc(100vw - 20px)) !important;
    height: min(610px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: var(--ui-radius-surface, 38px) !important;
  }
  #employeeModal .employee-list-heading { flex-wrap: wrap; gap: 8px; }
  #employeeModal #employeeNew { font-size: 12px; padding: 9px 13px; min-height: 40px; }
  #employeeModal .employee-edit {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  #employeeModal .employee-editor-actions { padding-inline: 16px; }
}
/* Use Delete Yap's existing confirmation surface. */
#employeeRemoveConfirm .delete-modal { opacity: 1; transform: none; }
#employeeRemoveConfirm #employeeRemoveStatus:empty { display: none; }


/* Source: styles-plus-gifts.css */
.plus-code-entry-row { grid-template-columns: minmax(0,1fr) !important; }
.plus-code-entry-actions { display:flex; gap:10px; }
.plus-code-entry-actions > button { flex:1; min-width:0; width:auto; }
#plusGiftModal { z-index:1180; }
#plusGiftModal.hidden { display:none !important; }
#plusGiftModal .plus-gift-modal { width:min(680px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); height:auto; border-radius:var(--ui-radius-surface,42px) !important; }
#plusGiftModal .plus-gift-content { display:flex; flex-direction:column; min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px 18px; }
#plusGiftModal .plus-gift-options { display:grid; gap:10px; }
#plusGiftModal .plus-gift-options button { display:flex; align-items:center; gap:12px; text-align:left; width:100%; padding:11px 18px; min-height:66px; }
#plusGiftModal .plus-gift-options button > svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 24px; }
#plusGiftModal .plus-gift-options button > span:nth-child(2) { flex:1; min-width:0; }
#plusGiftModal .plus-gift-options strong,#plusGiftModal .plus-gift-options small { display:block; }
#plusGiftModal .plus-gift-options small { font-size:12px; font-weight:400; color:var(--secondary-text); margin-top:4px; white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
#plusGiftModal .plus-gift-options button > span:last-child { flex:0 0 auto; }
#plusGiftModal .plus-gift-code-pill { align-self:center; border:1px solid var(--border); border-radius:999px; padding:9px 18px; margin-bottom:18px; color:var(--secondary-text); font-size:13px; }
#plusGiftModal .plus-gift-code-pill strong { color:var(--text); letter-spacing:.12em; margin-left:8px; }
#plusGiftModal .plus-gift-hint { color:var(--secondary-text); font-size:12px; line-height:1.5; margin:14px 6px 0; }
#plusGiftModal .plus-gift-actions { display:flex; flex:0 0 auto; gap:10px; padding:12px 18px 18px; }
#plusGiftModal .plus-gift-actions:empty { display:none; }
#plusGiftModal .plus-gift-actions button { flex:1; min-height:46px; min-width:0; }
#plusGiftModal .plus-gift-card-preview { display:flex; justify-content:center; min-height:0; }
#plusGiftModal canvas { display:block; width:auto; max-width:100%; height:auto; max-height:calc(100dvh - 210px); object-fit:contain; border-radius:24px; }
#plusGiftModal .plus-gift-link-panel { text-align:center; padding:12px 4px; }
#plusGiftModal .plus-gift-link-panel h3 { margin:18px 0 10px; font-size:22px; }
#plusGiftModal .plus-gift-link-panel p { color:var(--secondary-text); line-height:1.45; }
#plusGiftModal .plus-gift-link-panel label { display:block; margin:22px 0 10px; text-align:left; font-size:13px; }
#plusGiftModal #plusGiftLink { width:100%; min-width:0; box-sizing:border-box; font-size:16px; }
.plus-gift-emblem { display:inline-flex; align-items:center; justify-content:center; width:82px; height:82px; border-radius:50%; background:linear-gradient(140deg,#a8b7ff,#5c77ff 55%,#3549a8); box-shadow:inset 0 1px 1px #ffffff99,0 12px 36px #5c77ff33; color:white; font-size:32px; font-weight:800; }
#plusGiftModal:has(#plusGiftPeople) .plus-gift-modal { height:min(650px,calc(100dvh - 32px)); }
#plusGiftModal:has(#plusGiftPeople) .plus-gift-content { padding:0; flex:1; overflow:hidden; }
#plusGiftModal .plus-gift-person { flex-shrink:0; }
#plusGiftModal .dm-inbox-topline { min-width:0; }
#plusGiftModal .dm-inbox-topline > .dm-inbox-profile-target { min-width:0; }
#plusGiftModal .hidden { display:none !important; }
/* Reserve avatar space in either POV; never inherit the generic snippet width
   or oversized action-button padding. Both cards use the same actual geometry. */
#dmModal .dm-message-row.dm-plus-gift-message-row { width:min(332px,100%) !important; max-width:100% !important; }
#dmModal .dm-plus-gift-card,
.dm-plus-gift-card { display:flex; align-items:center; justify-content:flex-start; flex:0 0 auto; gap:10px; width:min(280px,calc(100vw - 132px)); max-width:100%; min-width:0; height:auto; min-height:64px; padding:11px 14px !important; box-sizing:border-box; border-radius:9999px !important; text-align:left; background:color-mix(in srgb,var(--primary) 10%,var(--bubble)) !important; color:var(--text) !important; border:1px solid color-mix(in srgb,var(--primary) 45%,var(--border)) !important; font-size:14px; line-height:1.25; letter-spacing:normal; box-shadow:none !important; transform:none !important; }
#dmModal .dm-plus-gift-card > span:first-child,
.dm-plus-gift-card > span:first-child { flex:0 0 36px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--primary); color:var(--primary-text); font-size:15px; font-weight:800; }
.dm-plus-gift-card > span:last-child { min-width:0; }
#dmModal .dm-plus-gift-card strong,.dm-plus-gift-card strong { display:block; font-size:14px; font-weight:700; line-height:1.25; }
#dmModal .dm-plus-gift-card small,.dm-plus-gift-card small { display:block; margin-top:3px; color:var(--secondary-text); font-size:12px; font-weight:400; line-height:1.25; }
#dmModal .dm-plus-gift-card:disabled,.dm-plus-gift-card:disabled { opacity:1; cursor:default; }
.dm-plus-gift-card:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
@media(max-width:700px) {
  #plusGiftModal .plus-gift-modal { width:min(420px,calc(100vw - 20px)); }
  #plusGiftModal .plus-gift-options button { padding:11px 16px; }
  #plusGiftModal .plus-gift-content { padding:12px; }
}


/* Source: styles-v355-home-layout.css */
/* v3.55 — inline home composer and one balanced mobile navigation capsule. */
@media (max-width: 700px) {
  .mobile-dock-rail {
    display: flex;
  }

  #closeMobileComposerButton { display: none !important; }

  #searchModal,
  #searchModal.is-open,
  #searchModal.is-closing {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Leave the header and avatar sizes intact. Pull the following content up
     by removing stacked exterior gaps, not the room needed by story rings. */
  body[data-auth-state="authenticated"] #storyRail {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
  }
  body[data-auth-state="authenticated"] #storyRail .story-people {
    padding-top: 9px !important;
    padding-bottom: 2px !important;
  }
  body[data-auth-state="authenticated"] #composerCard {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
}


/* Source: styles-v359-fallback-avatar.css */
/* Yapper v3.59 — fallback avatars must never lose their filled circle.
   Loaded last so older DM/group/story geometry rules cannot make the face transparent. */
.profile-avatar.is-fallback-avatar {
  background: var(--primary, #5C77FF) !important;
  background-color: var(--primary, #5C77FF) !important;
  color: var(--primary-text, #fff) !important;
  opacity: 1 !important;
}
#dmGroupMemberList .dm-group-member-avatar-shell > .profile-avatar.is-fallback-avatar,
.dm-conversation-profile-button .profile-avatar.is-fallback-avatar,
.dm-inbox-item .profile-avatar.is-fallback-avatar,
.dm-search-result .profile-avatar.is-fallback-avatar {
  background: var(--primary, #5C77FF) !important;
  background-color: var(--primary, #5C77FF) !important;
}


/* Source: styles-v360-motion.css */
/* =========================================================
   Yapper v3.60 — motion polish
   Smoother, springier interactions without changing layout.
   ========================================================= */

:root {
  --yapper-motion-spring: cubic-bezier(.16, 1, .3, 1);
  --yapper-motion-soft: cubic-bezier(.22, .75, .25, 1);
  --yapper-motion-press: cubic-bezier(.2, .8, .2, 1);
  --yapper-motion-fast: 150ms;
  --yapper-motion-ui: 230ms;
  --yapper-motion-menu: 285ms;
  --yapper-motion-surface: 360ms;
}

/* Buttons and tappable controls: soft lift + quick compression. */
button:not(:disabled),
[role="button"],
.mobile-dock-tab,
.mobile-dock-edge-button,
.mobile-dock-create-button,
.theme-button,
.music-platform-choice,
.app-wallpaper-choice,
.notification-item,
.search-result,
.connection-item,
.saved-account-item,
.dm-inbox-item,
.dm-search-result,
.dm-group-search-result,
.composer-attachment-menu-item,
.post-actions button,
.profile-main-actions > button,
.profile-edit-actions > button,
.profile-edit-persistent-actions > button {
  transform-origin: center !important;
  transition-property: transform, background-color, border-color, color, opacity, box-shadow !important;
  transition-duration: var(--yapper-motion-ui) !important;
  transition-timing-function: var(--yapper-motion-spring) !important;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover,
  [role="button"]:hover,
  .mobile-dock-tab:hover,
  .theme-button:hover,
  .music-platform-choice:hover,
  .app-wallpaper-choice:hover,
  .notification-item:hover,
  .search-result:hover,
  .connection-item:hover,
  .saved-account-item:hover,
  .dm-inbox-item:hover,
  .dm-search-result:hover,
  .dm-group-search-result:hover,
  .composer-attachment-menu-item:hover,
  .post-actions button:hover {
    transform: translateY(-1px) scale(1.012) !important;
  }
}

button:not(:disabled):active,
[role="button"]:active,
.mobile-dock-tab:active,
.mobile-dock-edge-button:active,
.mobile-dock-create-button:active,
.theme-button:active,
.music-platform-choice:active,
.app-wallpaper-choice:active,
.notification-item:active,
.search-result:active,
.connection-item:active,
.saved-account-item:active,
.dm-inbox-item:active,
.dm-search-result:active,
.dm-group-search-result:active,
.composer-attachment-menu-item:active,
.post-actions button:active,
.profile-main-actions > button:active {
  transform: scale(.955) !important;
  transition-duration: 85ms !important;
  transition-timing-function: var(--yapper-motion-press) !important;
}

/* Like state gets one tiny pop instead of abruptly changing fill. */
.like-button .heart-icon,
.story-like svg,
.story-comment-actions [data-comment-action="like"] svg {
  transform-origin: center;
  transition: transform 240ms var(--yapper-motion-spring), fill 180ms ease, color 180ms ease !important;
}

.like-button.liked .heart-icon,
.story-like[aria-pressed="true"] svg,
.story-comment-actions [data-comment-action="like"][aria-pressed="true"] svg {
  animation: yapperHeartPop 360ms var(--yapper-motion-spring) both;
}

/* Feed/content entry. Only runs when nodes are actually inserted/rebuilt. */
#yapFeed > .yap,
.search-results > .search-result,
.notifications-list > .notification-item,
.profile-connections-list > .connection-item,
.dm-search-results > .dm-search-result,
.dm-group-search-results > .dm-group-search-result {
  animation: yapperContentIn 390ms var(--yapper-motion-spring) both;
}

/* Small popup menus. */
.composer-attachment-menu:not(.hidden),
.dm-snippets-menu:not(.hidden),
.profile-status-duration-menu:not(.hidden):not(.is-closing),
.dm-message-row.message-menu-open .dm-message-menu,
.dm-group-member.is-menu-open .dm-group-member-menu,
#storyDialog .story-menu:not(.hidden) {
  animation: yapperMenuIn var(--yapper-motion-menu) var(--yapper-motion-spring) both !important;
  will-change: transform, opacity;
}

/* Main overlays: fade the scrim, then let the surface settle into place. */
.modal-overlay:not(.hidden),
.settings-overlay:not(.hidden),
.device-preferences-overlay:not(.hidden),
.authentication-overlay:not(.hidden),
.notifications-overlay:not(.hidden),
.search-overlay:not(.hidden),
.profile-overlay:not(.hidden),
.account-switcher-overlay:not(.hidden),
.snippet-editor-overlay:not(.hidden),
.customization-overlay:not(.hidden),
.yapper-plus-overlay:not(.hidden),
.yap-share-overlay:not(.hidden),
.dm-overlay:not(.hidden) {
  animation: yapperBackdropIn 210ms ease-out both !important;
}

.modal-overlay:not(.hidden) > .modal-surface,
.modal-overlay:not(.hidden) > .delete-modal,
.settings-overlay:not(.hidden) .settings-modal,
.device-preferences-overlay:not(.hidden) .device-preferences-modal,
.authentication-overlay:not(.hidden) .authentication-modal,
.notifications-overlay:not(.hidden) .notifications-modal,
.search-overlay:not(.hidden) .search-modal,
.profile-overlay:not(.hidden) .profile-modal,
.account-switcher-overlay:not(.hidden) .account-switcher-modal,
.snippet-editor-overlay:not(.hidden) .snippet-editor-modal,
.customization-overlay:not(.hidden) .customization-modal,
.yapper-plus-overlay:not(.hidden) .yapper-plus-modal,
.yap-share-overlay:not(.hidden) .yap-share-modal,
.dm-overlay:not(.hidden) .dm-modal {
  animation: yapperSurfaceIn var(--yapper-motion-surface) var(--yapper-motion-spring) both !important;
  will-change: transform, opacity;
}

/* Panels that replace content inside an already-open surface. */
.dm-contact-info-panel:not(.hidden),
.dm-theme-panel:not(.hidden),
.profile-connections-panel:not(.hidden),
.plus-editor-panel.mobile-active {
  animation: yapperPanelIn 330ms var(--yapper-motion-spring) both !important;
}

/* The mobile dock keeps its existing long shrink/expand motion, but icon taps
   and the moving selection capsule settle more naturally. */
.mobile-dock-highlight {
  transition-timing-function: var(--yapper-motion-spring) !important;
}

.mobile-dock-tab,
.mobile-dock-edge-button,
.mobile-dock-create-button {
  transition-duration: 210ms !important;
  transition-timing-function: var(--yapper-motion-spring) !important;
}

/* Inputs/focus changes no longer snap. */
input,
textarea,
select {
  transition: border-color 190ms ease, background-color 230ms ease, box-shadow 230ms var(--yapper-motion-soft), color 190ms ease !important;
}

@keyframes yapperBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes yapperSurfaceIn {
  0% { opacity: 0; translate: 0 14px; scale: .965; }
  68% { opacity: 1; translate: 0 -1px; scale: 1.006; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes yapperMenuIn {
  0% { opacity: 0; translate: 0 8px; scale: .94; }
  72% { opacity: 1; translate: 0 -1px; scale: 1.012; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes yapperPanelIn {
  0% { opacity: 0; translate: 10px 0; scale: .99; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes yapperContentIn {
  0% { opacity: 0; translate: 0 10px; scale: .988; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes yapperHeartPop {
  0% { scale: .82; }
  58% { scale: 1.18; }
  100% { scale: 1; }
}

/* On phones, keep the same motion but shorten the travel so it never feels
   like a bottom-sheet animation. */
@media (max-width: 700px) {
  @keyframes yapperSurfaceIn {
    0% { opacity: 0; translate: 0 9px; scale: .978; }
    70% { opacity: 1; translate: 0 -.5px; scale: 1.004; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
  }
}

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


/* Source: styles-v361-yap-actions-replies.css */
/* Yapper v3.61 — compact Yap actions + inline reply drawer.
   Final-cascade file: intentionally overrides older action/composer rules. */

#yapFeed .post-author-information {
  flex: 1 1 auto;
  min-width: 0;
}

#yapFeed .delete-yap-top {
  flex: 0 0 auto;
  align-self: flex-start;
  width: auto !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 1px 0 0 auto !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent) !important;
  background: color-mix(in srgb, var(--input) 78%, transparent) !important;
  color: var(--secondary-text) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap;
  box-shadow: none !important;
}

#yapFeed .delete-yap-top:is(:hover, :active, :focus-visible) {
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--primary) 52%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 9%, var(--input)) !important;
}

/* Like / Reply / Share are one equal three-part rail on ordinary Yaps. */
#yapFeed .post-actions:not(.question-snippet-actions) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 9px !important;
  width: 100% !important;
  margin-top: 13px !important;
}

#yapFeed .post-actions:not(.question-snippet-actions) > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
}

#yapFeed .post-actions .action-count {
  display: inline-block;
  min-width: 0;
  overflow: visible;
  color: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#yapFeed .reply-yap-button {
  color: var(--text);
}

#yapFeed .reply-yap-button.active {
  background: var(--primary) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary) !important;
}

#yapFeed .reply-action-icon,
#yapFeed .share-yap-button svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Reply button opens one compact drawer: composer stays fixed on top while
   replies scroll underneath. */
#yapFeed .yap-replies-panel {
  display: grid;
  grid-template-rows: auto minmax(0, auto);
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding-top: 1px;
  transform-origin: top center;
}

#yapFeed .yap-replies-panel.is-opening {
  animation: yapRepliesPanelOpen 220ms cubic-bezier(.2,.82,.2,1) both;
}

#yapFeed .yap-replies-panel.is-closing {
  pointer-events: none;
  animation: yapRepliesPanelClose 220ms cubic-bezier(.4,0,.2,1) both;
}

@keyframes yapRepliesPanelOpen {
  from { opacity: 0; transform: translateY(-7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yapRepliesPanelClose {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-6px) scale(.985); }
}

#yapFeed .yap-replies-composer-header {
  position: relative;
  z-index: 2;
  width: 100%;
}

#yapFeed .yap-replies-panel .yap-reply-composer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: end !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

#yapFeed .yap-replies-panel .yap-reply-composer textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  max-height: 68px !important;
  margin: 0 !important;
  padding: 10px 15px !important;
  resize: none !important;
  overflow-y: hidden;
  background: var(--input) !important;
  color: var(--text) !important;
  caret-color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9999px !important;
  outline: none !important;
  font: inherit;
  font-size: 15px !important;
  line-height: 22px !important;
}

#yapFeed .yap-replies-panel .yap-reply-composer textarea.bubble-multiline {
  border-radius: 23px !important;
}

#yapFeed .yap-replies-panel .send-reply-button {
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary) !important;
}

#yapFeed .yap-replies-panel .send-reply-button:disabled {
  opacity: .65;
}

#yapFeed .send-reply-arrow {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#yapFeed .yap-replies-scroll {
  width: 100%;
  max-height: 276px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 1px 5px 3px 0;
  scroll-behavior: auto;
}

#yapFeed .yap-replies-scroll::-webkit-scrollbar {
  width: 5px;
}

#yapFeed .yap-replies-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--secondary-text) 45%, transparent);
  border-radius: 999px;
}

#yapFeed .yap-replies-scroll .replies-list {
  margin-top: 0 !important;
  gap: 13px !important;
}

#yapFeed .yap-replies-empty,
#yapFeed .yap-replies-loading {
  margin: 4px 0 2px !important;
  padding: 13px 12px !important;
  color: var(--secondary-text) !important;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
}

/* The old bottom Replies/Delete strip is intentionally gone. The card and
   feed gap tighten together so the new shorter Yaps do not look detached. */
#yapFeed > .yap,
#yapFeed .feed-entry > .yap {
  padding-bottom: 16px !important;
  margin-top: 12px !important;
}

@media (max-width: 760px) {
  #yapFeed {
    gap: 10px !important;
  }

  #yapFeed > .yap,
  #yapFeed .feed-entry > .yap {
    margin-top: 0 !important;
    padding-bottom: 13px !important;
  }

  #yapFeed .post-actions:not(.question-snippet-actions) {
    gap: 7px !important;
  }

  #yapFeed .post-actions:not(.question-snippet-actions) > button {
    height: 45px !important;
    min-height: 45px !important;
    padding-inline: 7px !important;
  }

  #yapFeed .yap-replies-panel .yap-reply-composer {
    grid-template-columns: minmax(0, 1fr) 45px !important;
  }

  #yapFeed .yap-replies-panel .yap-reply-composer textarea {
    min-height: 45px !important;
  }

  #yapFeed .yap-replies-panel .send-reply-button {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    height: 45px !important;
    min-height: 45px !important;
  }

  #yapFeed .yap-replies-scroll {
    max-height: 252px;
    padding-right: 3px;
  }

  #yapFeed .delete-yap-top {
    height: 29px !important;
    min-height: 29px !important;
    padding-inline: 9px !important;
    font-size: 10.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #yapFeed .yap-replies-panel.is-opening,
  #yapFeed .yap-replies-panel.is-closing {
    animation: none !important;
  }
}


/* Source: styles-v362-reply-polish.css */
/* Yapper v3.62 — reply controls visual correction.
   Keep v3.61 behavior; only restore the established Liquid Glass/text geometry. */

/* The moved Delete Yap control should stay the old text action, not become a pill. */
#yapFeed .delete-yap-top,
#yapFeed .delete-yap-top:is(:hover, :active, :focus-visible) {
  display: inline !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 2px 0 0 auto !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--secondary-text) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  transform: none !important;
}

#yapFeed .delete-yap-top:is(:hover, :focus-visible) {
  color: var(--text) !important;
  text-decoration: underline !important;
}

/* The circular Post Reply arrow uses Yapper's normal Liquid Glass control,
   not the accent-blue selected state. */
#yapFeed .yap-replies-panel .send-reply-button,
#yapFeed .yap-replies-panel .send-reply-button.sent-state,
#yapFeed .yap-replies-panel .send-reply-button:disabled {
  background:
    linear-gradient(145deg, var(--glass-highlight-soft) 0%, transparent 50%),
    var(--glass-control) !important;
  color: var(--text) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 7px 18px rgba(0, 0, 0, 0.08) !important;
  filter: none !important;
}

#yapFeed .yap-replies-panel .send-reply-button:is(:hover, :active, :focus-visible),
#yapFeed .yap-replies-panel .send-reply-button.sent-state:is(:hover, :active, :focus-visible) {
  background:
    linear-gradient(145deg, var(--glass-highlight) 0%, transparent 50%),
    var(--glass-control-hover) !important;
  color: var(--text) !important;
  border-color: var(--glass-highlight) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 8px 20px rgba(0, 0, 0, 0.10) !important;
}

#yapFeed .yap-replies-panel .send-reply-button:disabled {
  opacity: .65 !important;
}

/* One canonical reply glyph in every open/closed state. Never fill or morph it. */
#yapFeed .reply-yap-button .reply-action-icon {
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  shape-rendering: geometricPrecision;
}

#yapFeed .reply-yap-button.active .reply-action-icon,
#yapFeed .reply-yap-button:not(.active) .reply-action-icon {
  fill: none !important;
  stroke: currentColor !important;
}

@media (max-width: 760px) {
  #yapFeed .delete-yap-top,
  #yapFeed .delete-yap-top:is(:hover, :active, :focus-visible) {
    margin-top: 1px !important;
    padding: 2px 0 !important;
    font-size: 12px !important;
  }
}


/* Source: styles-project465-dev2.css */
/* Project Yapper 465 — Private Developer Beta 2 UI repair.
   Actual Yapper version remains v3.65. This file adds only 465 feature geometry. */

/* --------------------------------------------------------------------------
   SEARCH MODES + COMPACT YAP RESULTS
   -------------------------------------------------------------------------- */
#searchModal .search-input-row-465 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(214px, 236px) !important;
  align-items: center !important;
  gap: 10px !important;
}

#searchModal .search-mode-switch {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#searchModal .search-mode-button {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--glass-border, var(--border)) !important;
  background:
    linear-gradient(145deg, var(--glass-highlight-soft, rgba(255,255,255,.08)) 0%, transparent 52%),
    var(--glass-control, var(--input)) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight, rgba(255,255,255,.12)), 0 7px 18px rgba(0,0,0,.07) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#searchModal .search-mode-button.active {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 14%, var(--glass-control, var(--input))) !important;
}

#searchModal .modal-close-button {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
}

#searchModal .search-results[data-search-mode="yaps"] {
  display: grid !important;
  gap: 8px !important;
}

#searchModal .yap-search-result {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  text-align: left !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

#searchModal .yap-search-result .profile-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

#searchModal .yap-search-result-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  text-align: left !important;
}

#searchModal .yap-search-result-author {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
}

#searchModal .yap-search-result-handle {
  min-width: 0 !important;
  color: var(--secondary-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#searchModal .yap-search-result-snippet {
  min-width: 0 !important;
  color: var(--text) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow-wrap: anywhere !important;
}

#searchModal .yap-search-highlight {
  padding: 0 2px !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--primary) 24%, transparent) !important;
  color: inherit !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   FOUR EQUAL YAP ACTIONS + HOLD-TO-QUOTE PROGRESS
   -------------------------------------------------------------------------- */
#yapFeed .post-actions:not(.question-snippet-actions) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#yapFeed .repost-yap-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  touch-action: manipulation !important;
}

#yapFeed .repost-yap-button > * {
  position: relative;
  z-index: 2;
}

#yapFeed .repost-yap-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: color-mix(in srgb, var(--primary) 34%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
}

#yapFeed .repost-yap-button.quote-hold-active::after {
  transform: scaleX(1);
  transition: transform var(--quote-hold-duration, 430ms) linear 20ms;
}

#yapFeed .repost-yap-button.quote-hold-complete::after {
  transform: scaleX(1);
  transition: none;
}

#yapFeed .repost-yap-button svg {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
}

#yapFeed .repost-yap-button.reposted {
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 10%, var(--glass-control, var(--input))) !important;
}

/* Question Yaps keep Like / Repost / Share as three equal actions. */
#yapFeed .post-actions.question-snippet-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* --------------------------------------------------------------------------
   REPOST SOCIAL CONTEXT
   -------------------------------------------------------------------------- */
#yapFeed .repost-social-context {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  min-height: 46px !important;
  margin: 8px 2px 1px 0 !important;
  padding-right: 2px !important;
  pointer-events: auto !important;
}

#yapFeed .repost-social-cluster {
  display: flex !important;
  align-items: flex-end !important;
  gap: 3px !important;
  pointer-events: auto !important;
}

#yapFeed .repost-person {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  --repost-drift-x: 2px;
  --repost-drift-y: -3px;
  --repost-return-x: -1px;
  --repost-return-y: 1px;
  transform-origin: center bottom !important;
  animation: yapper465RepostFloat 4.2s ease-in-out infinite !important;
}

#yapFeed .repost-person:nth-child(2) {
  --repost-drift-x: -2px;
  --repost-drift-y: -4px;
  --repost-return-x: 1px;
  --repost-return-y: 2px;
  animation-delay: -1.35s !important;
}
#yapFeed .repost-person:nth-child(3) {
  --repost-drift-x: 3px;
  --repost-drift-y: 2px;
  --repost-return-x: -2px;
  --repost-return-y: -1px;
  animation-delay: -2.7s !important;
}
#yapFeed .repost-person + .repost-person { margin-left: -8px !important; }

#yapFeed .repost-person .profile-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.15) !important;
}

#yapFeed .repost-person-badge {
  position: absolute !important;
  right: -4px !important;
  bottom: -4px !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  color: var(--primary) !important;
  background: var(--card, var(--background)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 58%, var(--border)) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
  z-index: 3 !important;
}

#yapFeed .repost-person-badge svg {
  width: 11px !important;
  height: 11px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#yapFeed .repost-thought-bubble {
  position: absolute !important;
  right: 24px !important;
  bottom: 26px !important;
  max-width: 146px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--glass-border, var(--border)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--glass-control, var(--input)) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
  color: var(--text) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 4 !important;
}

#yapFeed .repost-thought-bubble.is-empty {
  color: var(--secondary-text) !important;
  border-style: dashed !important;
}

#yapFeed .repost-person:nth-child(1) .repost-thought-bubble { right: 23px !important; bottom: 27px !important; }
#yapFeed .repost-person:nth-child(2) .repost-thought-bubble { right: 14px !important; bottom: 43px !important; }
#yapFeed .repost-person:nth-child(3) .repost-thought-bubble { right: 7px !important; bottom: 59px !important; }

@keyframes yapper465RepostFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  32% {
    transform: translate3d(var(--repost-drift-x), var(--repost-drift-y), 0) scale(1.035);
  }
  68% {
    transform: translate3d(var(--repost-return-x), var(--repost-return-y), 0) scale(1.018);
  }
}

/* --------------------------------------------------------------------------
   QUOTE YAPS — preview and posted result deliberately share one geometry.
   -------------------------------------------------------------------------- */
#yapFeed .quote-yap-card,
.composer-quote-preview .quote-yap-card {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: start !important;
  gap: 8px !important;
  margin: 10px 0 0 !important;
  padding: 14px !important;
  border-radius: 30px !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  background: var(--input) !important;
  color: var(--text) !important;
  text-align: left !important;
  white-space: normal !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 9%, transparent),
    0 8px 22px color-mix(in srgb, var(--shadow) 42%, transparent) !important;
}

#yapFeed .quote-yap-card-interactive {
  cursor: pointer !important;
}

#yapFeed .quote-yap-card-interactive:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border)) !important;
}

.quote-yap-author {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  text-align: left !important;
}

.quote-yap-author .profile-avatar {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

.quote-yap-author-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
  justify-items: start !important;
  text-align: left !important;
}

.quote-yap-author-name {
  max-width: 100% !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

.quote-yap-author-handle,
.quote-yap-snippet-label {
  color: var(--secondary-text) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.quote-yap-text {
  width: 100% !important;
  min-width: 0 !important;
  color: var(--text) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
}

/* Inside a Quote Yap, #hashtags and @mentions stay clickable but look exactly
   like normal Yap text — never giant nested pill buttons. */
.quote-yap-text .inline-text-tag,
.quote-yap-text .inline-hashtag,
.quote-yap-text .inline-mention {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  overflow: visible !important;
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-weight: 800 !important;
  line-height: inherit !important;
  white-space: normal !important;
  vertical-align: baseline !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

.quote-yap-text .inline-text-tag:hover {
  text-decoration: underline !important;
  background: transparent !important;
  transform: none !important;
}

.quote-yap-image {
  display: block !important;
  width: 100% !important;
  max-height: 220px !important;
  margin: 2px 0 0 !important;
  object-fit: cover !important;
  border-radius: 22px !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
}

.composer-quote-preview {
  width: 100% !important;
  margin: 10px 0 0 !important;
}

.composer-quote-preview.hidden { display: none !important; }
.composer-quote-preview-shell {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

.composer-quote-preview-shell > .quote-yap-card {
  margin-top: 0 !important;
  padding-right: 58px !important;
}

.composer-quote-remove {
  position: absolute !important;
  right: 12px !important;
  top: 12px !important;
  z-index: 8 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

.composer-quote-remove .yapper-x-icon {
  width: 19px !important;
  height: 19px !important;
}

/* --------------------------------------------------------------------------
   REPOST THOUGHT EDITOR
   -------------------------------------------------------------------------- */
/* Reuse the real Settings surface. Do NOT invent a Project-465 modal skin.
   The settings-modal/settings-card classes now own background, glass, border,
   radius, shadow and mobile treatment on both desktop and mobile. */
.repost-thought-modal {
  width: min(520px, calc(100vw - 36px)) !important;
  display: grid !important;
  gap: 9px !important;
  padding-bottom: 16px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.repost-thought-modal > .modal-close-button {
  top: 14px !important;
  right: 14px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
}
.repost-thought-description { margin: -5px 0 1px !important; color: var(--secondary-text) !important; font-size: 13px !important; }
.repost-thought-field { display: grid !important; gap: 6px !important; }
.repost-thought-field > span { color: var(--secondary-text) !important; font-size: 11px !important; font-weight: 800 !important; }
.repost-thought-field input { width: 100% !important; height: 48px !important; padding: 0 15px !important; border-radius: 999px !important; box-sizing: border-box !important; }
.repost-thought-count { margin-top: -7px !important; text-align: right !important; color: var(--secondary-text) !important; font-size: 10px !important; font-weight: 750 !important; }
.repost-thought-modal > #repostThoughtStatus {
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}
.repost-thought-modal > #repostThoughtStatus:empty {
  display: none !important;
}
.repost-thought-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 1px !important;
}

/* --------------------------------------------------------------------------
   PROFILE REPOST TAB — reset old five-item nth-child rules first.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .profile-modal .profile-stats,
  #profileViewSection .profile-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 9px !important;
  }

  .profile-modal .profile-stats > .profile-stat:nth-child(n),
  #profileViewSection .profile-stats > .profile-stat:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    margin: 0 !important;
  }

  #searchModal .search-input-row-465 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #searchModal .search-mode-switch { width: 100% !important; }
  #yapFeed .post-actions:not(.question-snippet-actions) { gap: 7px !important; }
  #yapFeed .post-actions:not(.question-snippet-actions) > button { gap: 5px !important; padding-inline: 6px !important; }
  #yapFeed .repost-thought-bubble { max-width: 118px !important; }
}

@media (min-width: 701px) {
  .profile-modal .profile-stats,
  #profileViewSection .profile-stats {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 8px !important;
    border-radius: 999px !important;
  }

  .profile-modal .profile-stats > .profile-stat:nth-child(n),
  #profileViewSection .profile-stats > .profile-stat:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding-inline: 2px !important;
  }

  /* Safety only: retain v3.65 dimensions, but force the normal centered flow. */
  main,
  #appSection,
  #appSection > .feed-toolbar,
  #appSection > #yapFeed,
  #appSection > .load-more-row,
  #yapFeed > .feed-entry,
  #yapFeed > .yap,
  #yapFeed .feed-entry > .yap {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #appSection,
  #yapFeed,
  #yapFeed > .feed-entry,
  #yapFeed > .yap,
  #yapFeed .feed-entry > .yap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #yapFeed .repost-person { animation: none !important; }
  #yapFeed .repost-yap-button::after { transition: none !important; }
}


/* Project 465 Beta 3 — final quote/repost polish from device QA. */
@media (max-width: 540px) {
  .repost-thought-modal {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 18px) !important;
    padding: 22px 14px 13px !important;
    border-radius: 26px !important;
  }

  .repost-thought-modal > .modal-close-button {
    top: 12px !important;
    right: 12px !important;
  }

  .composer-quote-preview-shell > .quote-yap-card {
    padding-right: 54px !important;
  }

  .composer-quote-remove {
    right: 10px !important;
    top: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #yapFeed .repost-person {
    animation: none !important;
    transform: none !important;
  }
}


/* Source: styles-profile-card-beta30.css */
/* Project Yapper 465 — Private Developer Beta 28
   Free texture + collection UX + mood responsiveness polish.
   Visible app version remains v3.65. */
/* Project Yapper 465 — Profile Cards / Wave 2 / Private Developer Beta 11
   Visible app version remains v3.65. */

:root {
  --yapper-card-radius: 42px;
  --yapper-card-spring: cubic-bezier(.16, 1, .3, 1);
  --yapper-card-soft: cubic-bezier(.22, .75, .25, 1);
}

#profileAvatarDisplay {
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
#profileAvatarDisplay:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 72%, transparent);
  outline-offset: 5px;
}

.profile-modal.profile-card-active {
  padding: 0 !important;
  overflow: hidden !important;
  perspective: 1200px;
  transform-style: preserve-3d;
}

:is(#profileCardSection, [data-card-part="profileCardSection"]) {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--profile-card-height, 520px);
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: var(--card);
  color: var(--text);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

:is(#profileCardSection, [data-card-part="profileCardSection"]).card-preparing {
  visibility: hidden;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active {
  backface-visibility: visible;
}

:is(#profileCardSection, [data-card-part="profileCardSection"]).hidden,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]).hidden {
  display: none !important;
}

.profile-card-background-layer,
.profile-card-gallery-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.profile-card-background-layer {
  z-index: 0;
  background: var(--card);
}

.profile-card-background-layer .plus-saved-overlay {
  position: absolute;
}

.profile-card-gallery-layer {
  z-index: 1;
}

.profile-card-gallery-image {
  position: absolute;
  left: var(--card-gallery-x, 5%);
  top: var(--card-gallery-y, 12%);
  width: var(--card-gallery-size, 22%);
  max-width: 190px;
  aspect-ratio: var(--card-gallery-ratio, 1 / 1);
  object-fit: cover;
  border-radius: clamp(13px, 2.8vw, 25px);
  opacity: .38;
  filter: saturate(1.06) contrast(1.03);
  transform: translate3d(0,0,0) rotate(var(--card-gallery-rotation, 0deg));
  box-shadow: 0 10px 28px rgba(0,0,0,.17);
  user-select: none;
  -webkit-user-drag: none;
}

.profile-card-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 26%, transparent), transparent 25%, transparent 73%, color-mix(in srgb, var(--card) 24%, transparent)),
    radial-gradient(circle at 50% 48%, transparent 18%, rgba(0,0,0,.09) 100%);
}

.profile-card-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: var(--profile-card-height, 520px);
  padding: 18px 22px 24px;
}

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding-right: 48px;
}

.profile-card-header-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  color: inherit;
  cursor: pointer;
}

.profile-card-header-avatar .profile-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box;
}

.profile-card-header-avatar:active {
  transform: scale(.93);
}

.profile-card-heading-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

:is(#profileCardTitle, [data-card-part="profileCardTitle"]) {
  margin: 0;
  max-width: 100%;
  color: var(--text);
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.profile-card-owner-edit {
  margin-left: auto;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.profile-card-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
}

.profile-card-pronouns {
  align-self: center;
  min-height: 18px;
  margin: -6px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .015em;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,.24);
  mix-blend-mode: difference;
}
.profile-card-pronouns:empty { display: none; }

.profile-card-mood-panel,
.profile-card-top7-panel,
.profile-card-signature-panel {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  background: color-mix(in srgb, var(--card) 74%, transparent);
  -webkit-backdrop-filter: blur(15px) saturate(1.08);
  backdrop-filter: blur(15px) saturate(1.08);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 8px 24px rgba(0,0,0,.08);
}

.profile-card-mood-panel {
  padding: 11px 12px 10px;
  border-radius: 24px;
}

.profile-card-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.profile-card-section-heading strong {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .02em;
}
.profile-card-section-heading span {
  color: var(--secondary-text);
  font-size: 10px;
  font-weight: 750;
}

.profile-card-mood-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: start;
}

.profile-card-mood-day {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}

.profile-card-mood-day-label {
  color: color-mix(in srgb, var(--text) 82%, transparent);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.profile-card-mood-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  color: var(--primary);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.14));
}
.profile-card-mood-dot svg {
  width: 27px;
  height: 27px;
  overflow: visible;
}
.profile-card-mood-dot svg .mood-solid { fill: currentColor; }
.profile-card-mood-dot svg .mood-highlight { fill: rgba(255,255,255,.20); }
.profile-card-mood-dot svg .mood-eye { fill: rgba(0,0,0,.78); }
.profile-card-mood-dot svg .mood-detail,
.profile-card-mood-dot svg .mood-tongue {
  fill: none;
  stroke: rgba(0,0,0,.78);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile-card-mood-dot svg .mood-tongue { fill: rgba(255,255,255,.52); }
.profile-card-mood-dot.is-empty {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-top: 4px;
  border: 2px solid #fff;
  background: transparent;
  box-shadow: 0 1px 7px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.08);
}
.profile-card-mood-day.is-today .profile-card-mood-dot:not(.is-empty) {
  outline: 2px solid color-mix(in srgb, var(--primary) 48%, transparent);
  outline-offset: 2px;
}

.profile-card-top7-panel {
  padding: 13px 12px 12px;
  border-radius: 28px;
}

.profile-card-top7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  align-items: start;
}

.profile-card-person {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit;
  box-shadow: none !important;
  cursor: pointer;
}
.profile-card-person .profile-avatar {
  width: clamp(34px, 8vw, 48px) !important;
  height: clamp(34px, 8vw, 48px) !important;
  min-width: clamp(34px, 8vw, 48px) !important;
  min-height: clamp(34px, 8vw, 48px) !important;
  max-width: clamp(34px, 8vw, 48px) !important;
  max-height: clamp(34px, 8vw, 48px) !important;
  margin: 0 !important;
  border: 2px solid color-mix(in srgb, var(--primary) 46%, var(--card));
  box-shadow: 0 5px 14px rgba(0,0,0,.13);
}
.profile-card-person-name {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-card-person:active .profile-avatar { transform: scale(.92); }
.profile-card-top7-empty {
  grid-column: 1 / -1;
  margin: 4px 0 2px;
  color: var(--secondary-text);
  font-size: 12px;
  text-align: center;
}

.profile-card-signature-panel {
  margin-top: auto;
  padding: 12px 16px;
  border-radius: 24px;
  text-align: center;
}
.profile-card-signature-label {
  display: block;
  margin-bottom: 4px;
  color: var(--secondary-text);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
:is(#profileCardSignature, [data-card-part="profileCardSignature"]) {
  margin: 0;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.profile-card-signature-panel.is-empty { display: none; }

/* -------- Card intro animations -------- */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] {
  animation: yapperCardFlipIn 680ms var(--yapper-card-spring) both;
}
@keyframes yapperCardFlipIn {
  0% { opacity: .08; transform: perspective(1100px) rotate3d(1, 1, 0, 94deg) rotateZ(-7deg) scale(.88); filter: brightness(.76) saturate(1.5); }
  58% { opacity: 1; transform: perspective(1100px) rotate3d(1, 1, 0, -8deg) rotateZ(1.2deg) scale(1.018); filter: brightness(1.06) saturate(1.12); }
  82% { transform: perspective(1100px) rotate3d(1, 1, 0, 2.5deg) rotateZ(-.35deg) scale(.997); }
  100% { opacity: 1; transform: perspective(1100px) rotate3d(1, 1, 0, 0deg) rotateZ(0deg) scale(1); filter: none; }
}

:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] {
  animation: yapperCardGlitchIn 470ms steps(1,end) both;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(88,255,210,.20), transparent 42%),
    linear-gradient(270deg, rgba(177,92,255,.22), transparent 44%);
  mix-blend-mode: screen;
  animation: yapperCardGlitchFlash 470ms steps(1,end) both;
}
@keyframes yapperCardGlitchIn {
  0% { opacity: 0; transform: translate3d(-11px, 2px, 0) scale(.985); filter: blur(7px) hue-rotate(75deg) saturate(2); }
  12% { opacity: .8; transform: translate3d(9px, -2px, 0) scale(1.012); clip-path: inset(0 0 67% 0 round inherit); }
  24% { transform: translate3d(-5px, 1px, 0); clip-path: inset(28% 0 35% 0 round inherit); filter: hue-rotate(-55deg) saturate(2.2); }
  40% { transform: translate3d(6px, 0, 0); clip-path: inset(63% 0 8% 0 round inherit); }
  57% { transform: translate3d(-2px, 0, 0) scale(1.004); clip-path: inset(8% 0 10% 0 round inherit); filter: blur(1px) hue-rotate(15deg) saturate(1.25); }
  72% { clip-path: inset(0); transform: translate3d(1px,0,0); }
  100% { opacity: 1; clip-path: inset(0); transform: none; filter: none; }
}
@keyframes yapperCardGlitchFlash {
  0%, 18%, 36% { opacity: .85; transform: translateX(7px); }
  10%, 28%, 48% { opacity: .25; transform: translateX(-8px); }
  64% { opacity: .12; }
  100% { opacity: 0; }
}

:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="blur_reveal"] {
  animation: yapperCardBlurIn 620ms var(--yapper-card-soft) both;
}
@keyframes yapperCardBlurIn {
  0% { opacity: 0; filter: blur(28px) saturate(1.35); transform: scale(.955); }
  58% { opacity: 1; filter: blur(5px) saturate(1.08); transform: scale(1.008); }
  100% { opacity: 1; filter: none; transform: scale(1); }
}


:is(#profileCardSection, [data-card-part="profileCardSection"]).card-leave-active {
  animation: yapperCardLeave 250ms ease both !important;
}
@keyframes yapperCardLeave {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.965) translateY(5px); filter: blur(3px); }
}

/* -------- Scratch / holographic CD foil -------- */
.profile-card-scratch-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  border-radius: inherit;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  isolation: isolate;
}
.profile-card-scratch-layer.hidden { display: none !important; }

:is(#profileCardScratchCanvas, [data-card-part="profileCardScratchCanvas"]) {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  touch-action: none;
  animation: yapperScratchCanvasIridescence 3.2s ease-in-out infinite alternate;
}
@keyframes yapperScratchCanvasIridescence {
  from { filter: hue-rotate(-10deg) saturate(1.02) brightness(1); }
  to { filter: hue-rotate(18deg) saturate(1.12) brightness(1.045); }
}

.profile-card-scratch-shine {
  position: absolute;
  inset: -30%;
  z-index: 2;
  pointer-events: none;
  background:
    conic-gradient(from 20deg at 50% 50%, transparent 0 12%, rgba(83,255,179,.36) 20%, transparent 31%, rgba(182,82,255,.42) 46%, transparent 58%, rgba(95,212,255,.34) 73%, transparent 88%),
    linear-gradient(116deg, transparent 24%, rgba(255,255,255,.26) 39%, transparent 52%);
  mix-blend-mode: screen;
  opacity: .58;
  transform: rotate(-12deg) translate3d(-6%,0,0);
  animation: yapperScratchFoilShine 3.2s ease-in-out infinite alternate;
  transition: opacity 150ms ease;
}
.profile-card-scratch-layer.has-scratched .profile-card-scratch-shine {
  opacity: 0;
}

@keyframes yapperScratchFoilShine {
  from { transform: rotate(-14deg) translate3d(-8%, -2%, 0); filter: hue-rotate(-14deg); }
  to { transform: rotate(8deg) translate3d(8%, 2%, 0); filter: hue-rotate(25deg); }
}

.profile-card-scratch-instruction {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 3;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 42px);
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(8,8,10,.30);
  color: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .025em;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.profile-card-scratch-layer.is-scratching .profile-card-scratch-instruction {
  opacity: .42;
  transform: translateY(4px);
}
.profile-card-scratch-layer.is-finishing {
  animation: yapperScratchFinish 360ms ease forwards;
  pointer-events: none;
}
@keyframes yapperScratchFinish {
  to { opacity: 0; filter: blur(8px); transform: scale(1.015); }
}

/* -------- Edit Card -------- */
.profile-modal.profile-card-editing-active {
  padding: 0 !important;
  overflow: hidden !important;
}

:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: min(82dvh, 780px);
  min-height: min(650px, 82dvh);
  overflow: hidden;
  background: var(--card);
  border-radius: inherit;
}

.profile-card-editor-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 64px;
  padding: 16px 62px 12px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.profile-card-editor-header h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -.02em;
}

.profile-card-editor-scroll {
  box-sizing: border-box;
  height: calc(100% - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px 24px;
}

.profile-card-editor-section {
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 25px;
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
}
.profile-card-editor-section h3 {
  margin: 0 0 4px;
  font-size: 15px;
}
.profile-card-editor-help {
  margin: 0 0 11px;
  color: var(--secondary-text);
  font-size: 11px;
  line-height: 1.4;
}

.profile-card-editor-section textarea,
.profile-card-editor-section input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  border-radius: 18px;
}
.profile-card-editor-section textarea {
  min-height: 72px;
  resize: vertical;
}

.profile-card-editor-count {
  margin: 6px 3px 0;
  color: var(--secondary-text);
  font-size: 10px;
  text-align: right;
}

.profile-card-pronoun-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}

.profile-card-animation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.profile-card-animation-option {
  display: grid;
  min-height: 72px;
  align-content: center;
  gap: 3px;
  padding: 11px !important;
  border-radius: 20px !important;
  text-align: left;
}
.profile-card-animation-option strong { font-size: 12px; }
.profile-card-animation-option small { color: var(--secondary-text); font-size: 10px; line-height: 1.25; }
.profile-card-animation-option.active {
  border-color: color-mix(in srgb, var(--primary) 78%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 14%, var(--card)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
}

.profile-card-animation-preview {
  display: grid;
  place-items: center;
  margin: 10px 0 0;
  min-height: 88px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  overflow: hidden;
}
.profile-card-animation-preview-object {
  display: grid;
  place-items: center;
  width: 86px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--primary) 48%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 40%),
    var(--card);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  color: var(--text);
  font-size: 10px;
  font-weight: 850;
}

.profile-card-selected-top7 {
  display: flex;
  gap: 7px;
  min-height: 54px;
  padding: 2px 0 10px;
  overflow-x: auto;
}
.profile-card-selected-friend {
  position: relative;
  display: grid;
  justify-items: center;
  flex: 0 0 52px;
  gap: 3px;
}
.profile-card-selected-friend .profile-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
}
.profile-card-selected-friend span:last-child {
  width: 52px;
  overflow: hidden;
  font-size: 9px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.profile-card-selected-friend button {
  position: absolute;
  top: -3px;
  right: -1px;
  display: grid;
  place-items: center;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.profile-card-friend-search {
  margin-bottom: 8px;
}
.profile-card-friends-list {
  display: grid;
  gap: 6px;
  max-height: 250px;
  overflow-y: auto;
}
.profile-card-friend-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px !important;
  border-radius: 18px !important;
  text-align: left;
}
.profile-card-friend-option .profile-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}
.profile-card-friend-option-copy { min-width: 0; flex: 1; }
.profile-card-friend-option-copy strong,
.profile-card-friend-option-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card-friend-option-copy strong { font-size: 12px; }
.profile-card-friend-option-copy span { color: var(--secondary-text); font-size: 10px; }
.profile-card-friend-option.active {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--card)) !important;
}
.profile-card-top7-number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
}

.profile-card-gallery-editor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 7px;
  margin-bottom: 9px;
}
.profile-card-gallery-editor-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bubble);
}
.profile-card-gallery-editor-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-card-gallery-editor-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.56) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 14px !important;
}
.profile-card-gallery-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.profile-card-gallery-add input { display: none; }

.profile-card-editor-actions {
  position: absolute;
  inset: auto 0 0;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  box-sizing: border-box;
  min-height: 64px;
  padding: 10px 18px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.profile-card-editor-actions button { width: 100%; }
:is(#profileCardEditStatus, [data-card-part="profileCardEditStatus"]) {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 0;
  font-size: 11px;
  text-align: center;
}
:is(#profileCardEditStatus, [data-card-part="profileCardEditStatus"]):empty { display: none; }

/* -------- Daily mood gate -------- */
body.card-mood-gate-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

#cardMoodModal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: block;
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  opacity: 1 !important;
  pointer-events: auto !important;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--primary) 34%, transparent) 0 10%, transparent 31%),
    radial-gradient(circle at 20% 54%, color-mix(in srgb, var(--primary) 22%, transparent) 0 12%, transparent 39%),
    linear-gradient(160deg, color-mix(in srgb, var(--primary) 24%, var(--bg)) 0%, var(--bg) 48%, color-mix(in srgb, var(--primary) 14%, var(--bg)) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}
#cardMoodModal::before,
#cardMoodModal::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .34;
}
#cardMoodModal::before {
  width: min(78vw, 560px);
  aspect-ratio: 1;
  right: -25vw;
  top: 5vh;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.32), rgba(255,255,255,.06) 18%, color-mix(in srgb, var(--primary) 22%, transparent) 56%, transparent 72%);
  border: 1px solid rgba(255,255,255,.14);
}
#cardMoodModal::after {
  width: min(110vw, 760px);
  aspect-ratio: 1.4;
  left: -46vw;
  bottom: -33vh;
  background: radial-gradient(ellipse at 60% 35%, rgba(255,255,255,.16), color-mix(in srgb, var(--primary) 12%, transparent) 50%, transparent 74%);
}
#cardMoodModal.hidden { display: none !important; }

.card-mood-modal-surface {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  text-align: center;
  overflow: hidden;
  animation: yapperMoodGateIn 430ms var(--yapper-card-spring) both;
}
@keyframes yapperMoodGateIn {
  from { opacity: 0; transform: scale(1.025); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

.card-mood-title-wrap {
  position: absolute;
  top: max(18.5vh, 150px);
  left: 50%;
  width: min(92vw, 560px);
  transform: translateX(-50%);
}
.card-mood-title-wrap h2 {
  margin: 0;
  font-size: clamp(30px, 8vw, 52px);
  font-weight: 870;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}

.card-mood-choice-orbit {
  position: absolute;
  top: 31%;
  left: 50%;
  width: min(88vw, 430px);
  height: min(31vh, 300px);
  transform: translateX(-50%);
}
.card-mood-choice {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(88px, 23vw, 118px) !important;
  height: clamp(88px, 23vw, 118px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.31) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.10) !important;
  color: var(--primary) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 18px 44px rgba(0,0,0,.13) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  outline: none;
  transition: transform 150ms var(--yapper-card-spring), background-color 150ms ease, border-color 150ms ease !important;
  animation: yapperMoodChoiceIn 470ms var(--yapper-card-spring) both;
}
.card-mood-choice:nth-child(1) { animation-delay: 35ms; }
.card-mood-choice:nth-child(2) { animation-delay: 70ms; }
.card-mood-choice:nth-child(3) { animation-delay: 105ms; }
.card-mood-choice:nth-child(4) { animation-delay: 140ms; }
.card-mood-choice:nth-child(5) { animation-delay: 175ms; }
.card-mood-choice:nth-child(6) { animation-delay: 210ms; }
@keyframes yapperMoodChoiceIn {
  from { opacity: 0; transform: scale(.76) translateY(14px); }
  to { opacity: 1; transform: none; }
}
.card-mood-choice svg {
  width: 67% !important;
  height: 67% !important;
  overflow: visible;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.13));
  pointer-events: none;
}
.card-mood-choice svg .mood-solid { fill: currentColor; }
.card-mood-choice svg .mood-highlight { fill: rgba(255,255,255,.22); }
.card-mood-choice svg .mood-eye { fill: rgba(0,0,0,.78); }
.card-mood-choice svg .mood-detail,
.card-mood-choice svg .mood-tongue {
  fill: none;
  stroke: rgba(0,0,0,.79);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-mood-choice svg .mood-tongue { fill: rgba(255,255,255,.50); }
.card-mood-choice:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 72%, #fff);
  outline-offset: 4px;
}
.card-mood-choice:active,
.card-mood-choice.is-selected {
  transform: scale(.90) !important;
  background: color-mix(in srgb, var(--primary) 15%, rgba(255,255,255,.12)) !important;
  border-color: color-mix(in srgb, var(--primary) 62%, #fff) !important;
}
.card-mood-choice.is-busy { opacity: .56; pointer-events: none; }

/* Screenshot-inspired six-point mood layout. */
.card-mood-choice-happy     { left: 50%; top: 0; translate: -50% 0; }
.card-mood-choice-sad       { left: 1%; top: 22%; }
.card-mood-choice-silly     { right: 1%; top: 22%; }
.card-mood-choice-bored     { left: 5%; bottom: 0; }
.card-mood-choice-surprised { right: 5%; bottom: 0; }
.card-mood-choice-wink      { left: 50%; bottom: -8%; translate: -50% 0; }
.card-mood-choice-happy:active,
.card-mood-choice-happy.is-selected,
.card-mood-choice-wink:active,
.card-mood-choice-wink.is-selected { transform: translateX(-50%) scale(.90) !important; }

.card-mood-gate-week {
  position: absolute;
  left: 50%;
  bottom: max(22vh, 150px);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
  width: min(90vw, 520px);
  transform: translateX(-50%);
  gap: clamp(5px, 2vw, 13px);
}
.card-mood-gate-day {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}
.card-mood-gate-day-label {
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 850;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0,0,0,.20);
}
.card-mood-gate-dot {
  display: grid;
  place-items: center;
  width: clamp(28px, 7.5vw, 38px);
  height: clamp(28px, 7.5vw, 38px);
  color: var(--primary);
}
.card-mood-gate-dot svg { width: 100%; height: 100%; overflow: visible; }
.card-mood-gate-dot svg .mood-solid { fill: currentColor; }
.card-mood-gate-dot svg .mood-highlight { fill: rgba(255,255,255,.18); }
.card-mood-gate-dot svg .mood-eye { fill: rgba(0,0,0,.78); }
.card-mood-gate-dot svg .mood-detail,
.card-mood-gate-dot svg .mood-tongue {
  fill: none;
  stroke: rgba(0,0,0,.79);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-mood-gate-dot svg .mood-tongue { fill: rgba(255,255,255,.50); }
.card-mood-gate-dot.is-empty {
  width: clamp(18px, 5vw, 25px);
  height: clamp(18px, 5vw, 25px);
  margin-top: clamp(5px, 1.4vw, 7px);
  border: 2px solid rgba(255,255,255,.93);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 1px 8px rgba(0,0,0,.20), inset 0 0 0 1px rgba(0,0,0,.05);
}
.card-mood-gate-day.is-today .card-mood-gate-dot {
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--primary) 50%, transparent));
}

#cardMoodStatus {
  position: absolute;
  left: 50%;
  bottom: max(3.2vh, 24px);
  width: min(88vw, 460px);
  min-height: 0;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
#cardMoodStatus:empty { display: none; }
#cardMoodStatus.error {
  display: block;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (max-width: 600px) {
  .profile-card-content {
    padding: 16px 14px max(18px, env(safe-area-inset-bottom));
  }
  .profile-card-header { padding-right: 44px; }
  .profile-card-body { gap: 11px; padding-top: 18px; }
  .profile-card-top7 { gap: 4px; }
  .profile-card-person .profile-avatar {
    width: clamp(31px, 9vw, 40px) !important;
    height: clamp(31px, 9vw, 40px) !important;
    min-width: clamp(31px, 9vw, 40px) !important;
    min-height: clamp(31px, 9vw, 40px) !important;
    max-width: clamp(31px, 9vw, 40px) !important;
    max-height: clamp(31px, 9vw, 40px) !important;
  }
  .profile-card-person-name { font-size: 8px; }
  .profile-card-mood-dot { width: 25px; height: 25px; min-width: 25px; min-height: 25px; }
  .profile-card-mood-dot svg { width: 24px; height: 24px; }
  :is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) { height: min(88dvh, 760px); min-height: min(620px, 88dvh); }
  .profile-card-editor-scroll { padding: 10px 10px 22px; }
  .profile-card-editor-section { padding: 12px; border-radius: 22px; }
  .profile-card-pronoun-inputs { grid-template-columns: 1fr; }
  .profile-card-gallery-editor-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 390px) {
  .profile-card-content { padding-inline: 11px; }
  .profile-card-top7-panel { padding-inline: 8px; }
  .profile-card-top7 { gap: 2px; }
  .profile-card-person-name { display: none; }
  .profile-card-mood-week { gap: 3px; }
}

@media (max-height: 760px) {
  .card-mood-title-wrap { top: max(14vh, 104px); }
  .card-mood-choice-orbit { top: 28%; height: min(31vh, 250px); width: min(84vw, 390px); }
  .card-mood-choice { width: clamp(76px, 21vw, 104px) !important; height: clamp(76px, 21vw, 104px) !important; }
  .card-mood-gate-week { bottom: max(18vh, 118px); }
}

@media (max-width: 390px) and (min-height: 761px) {
  .card-mood-choice-orbit { width: 92vw; }
  .card-mood-choice { width: 88px !important; height: 88px !important; }
}

@media (prefers-reduced-motion: reduce) {
  :is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active,
  :is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active .profile-card-content,
  :is(#profileCardSection, [data-card-part="profileCardSection"]).card-leave-active,
  .profile-card-scratch-shine,
  :is(#profileCardScratchCanvas, [data-card-part="profileCardScratchCanvas"]),
  .card-mood-modal-surface {
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 13                            */
/* Card geometry / animation / performance repair. Visible version: v3.65.   */
/* ========================================================================== */

/* --- Card header: mirror the modal X geometry instead of floating inward. --- */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-content {
  padding: 13px 13px max(18px, env(safe-area-inset-bottom)) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header {
  position: relative;
  min-height: 38px !important;
  height: 38px;
  padding: 0 168px 0 0 !important;
  gap: 9px;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header-avatar {
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header-avatar > .profile-avatar,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header-avatar > .profile-avatar.is-cd-avatar {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 38px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-heading-copy {
  min-width: 0;
  max-width: 100%;
  height: 38px;
  align-items: center;
}
:is(#profileCardTitle, [data-card-part="profileCardTitle"]) {
  min-width: 0;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(17px, 4.4vw, 21px) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-owner-edit {
  position: absolute !important;
  z-index: 12;
  top: 13px !important;
  right: 61px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-body {
  padding-top: 19px !important;
}

/* Slightly rounder content panels so the card itself uses the same visual
   language as Yapper's newer Apple-like surfaces. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-mood-panel,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-signature-panel {
  border-radius: 30px !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-top7-panel {
  border-radius: 32px !important;
}

/* --- CD avatars: hard-lock every Card avatar box to a true square/circle. --- */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-avatar,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-avatar,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-avatar.is-cd-avatar,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-avatar.is-cd-avatar {
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  transform-origin: 50% 50% !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-avatar.is-cd-avatar > .cd-avatar-disc,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-avatar.is-cd-avatar > .cd-avatar-disc {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  transform-origin: 50% 50% !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-person .profile-avatar,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-person .profile-avatar.is-cd-avatar {
  width: clamp(36px, 9vw, 46px) !important;
  min-width: clamp(36px, 9vw, 46px) !important;
  max-width: clamp(36px, 9vw, 46px) !important;
  height: clamp(36px, 9vw, 46px) !important;
  min-height: clamp(36px, 9vw, 46px) !important;
  max-height: clamp(36px, 9vw, 46px) !important;
  flex: 0 0 clamp(36px, 9vw, 46px) !important;
}

/* --- Real two-turn diagonal Card Flip. It never reverses or "settles back". --- */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] {
  animation: yapperCardFlipInB13 920ms cubic-bezier(.20,.72,.18,1) both !important;
}
@keyframes yapperCardFlipInB13 {
  0% {
    opacity: .06;
    transform: perspective(1250px) rotate3d(1, 1, 0, -720deg) rotateZ(-8deg) scale(.86);
    filter: brightness(.76) saturate(1.28);
  }
  22% {
    opacity: .52;
    transform: perspective(1250px) rotate3d(1, 1, 0, -540deg) rotateZ(-6deg) scale(.90);
    filter: brightness(.88) saturate(1.22);
  }
  48% {
    opacity: .88;
    transform: perspective(1250px) rotate3d(1, 1, 0, -360deg) rotateZ(-4deg) scale(.96);
    filter: brightness(.96) saturate(1.14);
  }
  73% {
    opacity: 1;
    transform: perspective(1250px) rotate3d(1, 1, 0, -180deg) rotateZ(-2deg) scale(1.005);
    filter: brightness(1.02) saturate(1.06);
  }
  100% {
    opacity: 1;
    transform: perspective(1250px) rotate3d(1, 1, 0, 0deg) rotateZ(0deg) scale(1);
    filter: none;
  }
}

/* --- Animation preview: miniature Card + EXACT same animation keyframes. --- */
.profile-card-animation-preview {
  min-height: 154px !important;
  padding: 16px !important;
  border-radius: var(--ui-radius-panel, 34px) !important;
  perspective: 1000px;
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 42%),
    color-mix(in srgb, var(--text) 5%, transparent) !important;
}
.profile-card-animation-preview-object {
  position: relative;
  display: block !important;
  width: min(190px, 58%) !important;
  height: 118px !important;
  padding: 11px !important;
  border-radius: 28px !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)) !important;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--primary) 8%, var(--card)), var(--card)) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.18) !important;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.profile-card-animation-mini-header {
  display: grid;
  grid-template-columns: 19px 1fr 28px;
  gap: 6px;
  align-items: center;
  height: 19px;
}
.profile-card-animation-mini-header > span {
  width: 19px; height: 19px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 72%, #fff);
}
.profile-card-animation-mini-header > i {
  height: 7px; width: 70%; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 68%, transparent);
}
.profile-card-animation-mini-header > b {
  height: 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 72%, transparent);
}
.profile-card-animation-mini-panel {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 3px;
  height: 27px;
  margin-top: 9px;
  padding: 5px 7px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
}
.profile-card-animation-mini-panel > i {
  width: 9px; height: 9px; justify-self: center; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--text) 78%, transparent);
}
.profile-card-animation-mini-people {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 24px;
  margin-top: 7px;
  padding: 3px 7px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.profile-card-animation-mini-people > i {
  width: 15px; height: 15px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 55%, var(--button));
}
.profile-card-animation-mini-signature {
  width: 64%; height: 8px; margin: 7px auto 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 26%, transparent);
}
.profile-card-animation-preview-object.is-previewing[data-card-animation="card_flip"] {
  animation: yapperCardFlipInB13 920ms cubic-bezier(.20,.72,.18,1) both !important;
}
.profile-card-animation-preview-object.is-previewing[data-card-animation="glitch"] {
  animation: yapperCardGlitchIn 470ms steps(1,end) both !important;
}
.profile-card-animation-preview-object.is-previewing[data-card-animation="blur_reveal"] {
  animation: yapperCardBlurIn 620ms var(--yapper-card-soft) both !important;
}
.profile-card-animation-preview-object.is-previewing[data-card-animation="glitch"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(88,255,210,.20), transparent 42%),
    linear-gradient(270deg, rgba(177,92,255,.22), transparent 44%);
  mix-blend-mode: screen;
  animation: yapperCardGlitchFlash 470ms steps(1,end) both;
}

/* --- Edit Card: Yapper/Apple geometry, not square settings cards. --- */
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-editor-header {
  min-height: 72px !important;
  padding: 17px 64px 14px 22px !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-editor-header h2 {
  font-size: 22px !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-editor-scroll {
  padding: 16px 16px 30px !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-editor-section {
  margin-bottom: 16px !important;
  padding: 18px !important;
  border-radius: var(--ui-radius-panel, 34px) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent 55%),
    color-mix(in srgb, var(--primary) 4%, var(--card)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-editor-section h3 {
  font-size: 16px !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-editor-section textarea,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-editor-section input[type="text"],
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-friend-search {
  border-radius: var(--ui-radius-field, 30px) !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-animation-option {
  min-height: 82px !important;
  padding: 13px 14px !important;
  border-radius: var(--ui-radius-item, 28px) !important;
}

/* Top 7 picker now follows the established Add-to-Group row proportions. */
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-friend-search {
  min-height: 54px !important;
  height: 54px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-friends-list {
  gap: 8px !important;
  max-height: 300px !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-friend-option {
  width: 100% !important;
  min-height: 64px !important;
  height: auto !important;
  padding: 7px 10px !important;
  gap: 11px !important;
  border-radius: 31px !important;
  transform: none !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-friend-avatar-shell {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-friend-avatar-shell > .profile-avatar,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-friend-avatar-shell > .profile-avatar.is-cd-avatar {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-friend-option-copy strong { font-size: 14px !important; }
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-friend-option-copy span { font-size: 12px !important; }
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-top7-number {
  flex: 0 0 34px;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  font-size: 13px !important;
}

/* Selected Top 7 avatars and every destructive X are exact circles. */
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-friend {
  flex: 0 0 62px !important;
  width: 62px !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-avatar-shell {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  max-width: 50px;
  max-height: 50px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-avatar-shell > .profile-avatar,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-avatar-shell > .profile-avatar.is-cd-avatar {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  flex: 0 0 50px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-friend button,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-gallery-editor-remove {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 26px !important;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  transform: none !important;
  line-height: 1 !important;
  overflow: hidden !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-friend button .yapper-x-icon,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-gallery-editor-remove .yapper-x-icon {
  display: block;
  width: 13px !important;
  height: 13px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-friend button {
  top: -2px !important;
  right: 1px !important;
  background: color-mix(in srgb, var(--card) 84%, #000) !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-gallery-editor-grid {
  gap: 9px !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-gallery-editor-item {
  border-radius: var(--ui-radius-item, 28px) !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-gallery-editor-remove {
  top: 7px !important;
  right: 7px !important;
  background: rgba(8,8,10,.62) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-gallery-add > .file-picker-label {
  border-radius: 999px !important;
}

/* --- Daily mood selector: same six-point geometry as the supplied reference.
   Coordinates are center-based, so screen ratio changes cannot make the circles
   collapse into each other. --- */
#cardMoodModal .card-mood-title-wrap {
  top: max(18.2vh, 142px) !important;
}
#cardMoodModal .card-mood-choice-orbit {
  top: 31% !important;
  width: min(86vw, 410px) !important;
  height: min(32vh, 292px) !important;
}
#cardMoodModal .card-mood-choice {
  width: clamp(76px, 20vw, 100px) !important;
  min-width: clamp(76px, 20vw, 100px) !important;
  max-width: clamp(76px, 20vw, 100px) !important;
  height: clamp(76px, 20vw, 100px) !important;
  min-height: clamp(76px, 20vw, 100px) !important;
  max-height: clamp(76px, 20vw, 100px) !important;
  aspect-ratio: 1 / 1 !important;
  translate: -50% -50% !important;
}
#cardMoodModal .card-mood-choice-happy     { left: 50% !important; top: 14% !important; right: auto !important; bottom: auto !important; }
#cardMoodModal .card-mood-choice-sad       { left: 23% !important; top: 39% !important; right: auto !important; bottom: auto !important; }
#cardMoodModal .card-mood-choice-silly     { left: 77% !important; top: 39% !important; right: auto !important; bottom: auto !important; }
#cardMoodModal .card-mood-choice-bored     { left: 23% !important; top: 72% !important; right: auto !important; bottom: auto !important; }
#cardMoodModal .card-mood-choice-surprised { left: 77% !important; top: 72% !important; right: auto !important; bottom: auto !important; }
#cardMoodModal .card-mood-choice-wink      { left: 50% !important; top: 90% !important; right: auto !important; bottom: auto !important; }
#cardMoodModal .card-mood-choice:active,
#cardMoodModal .card-mood-choice.is-selected,
#cardMoodModal .card-mood-choice-happy:active,
#cardMoodModal .card-mood-choice-happy.is-selected,
#cardMoodModal .card-mood-choice-wink:active,
#cardMoodModal .card-mood-choice-wink.is-selected {
  transform: scale(.91) !important;
}
#cardMoodModal .card-mood-gate-week {
  bottom: max(21.5vh, 150px) !important;
  width: min(88vw, 500px) !important;
}

/* Small phones keep the exact arrangement; only the orbit/face scale changes. */
@media (max-width: 390px) {
  :is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-content { padding-inline: 13px !important; }
  :is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header { padding-right: 160px !important; }
  :is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-editor-scroll { padding-inline: 12px !important; }
  :is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-editor-section { padding: 16px !important; border-radius: 32px !important; }
  #cardMoodModal .card-mood-choice-orbit { width: 88vw !important; height: min(31vh, 275px) !important; }
  #cardMoodModal .card-mood-choice {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
  }
}

@media (max-height: 760px) {
  #cardMoodModal .card-mood-title-wrap { top: max(14vh, 102px) !important; }
  #cardMoodModal .card-mood-choice-orbit { top: 28.5% !important; height: min(32vh, 246px) !important; }
  #cardMoodModal .card-mood-choice { width: clamp(70px, 18.5vw, 88px) !important; height: clamp(70px, 18.5vw, 88px) !important; }
  #cardMoodModal .card-mood-gate-week { bottom: max(18.5vh, 116px) !important; }
}

/* Beta 13 final mood geometry calibration against the supplied reference.
   The Safari-height layout is deliberately asymmetric vertically: the first
   five faces move upward while the bottom wink stays low, matching the source. */
#cardMoodModal .card-mood-choice-sad,
#cardMoodModal .card-mood-choice-bored { left: 25% !important; }
#cardMoodModal .card-mood-choice-silly,
#cardMoodModal .card-mood-choice-surprised { left: 75% !important; right: auto !important; }

@media (max-height: 760px) {
  #cardMoodModal .card-mood-choice-orbit {
    top: 24.5% !important;
    height: min(31vh, 250px) !important;
  }
  #cardMoodModal .card-mood-choice-happy     { top: 14% !important; }
  #cardMoodModal .card-mood-choice-sad,
  #cardMoodModal .card-mood-choice-silly     { top: 39% !important; }
  #cardMoodModal .card-mood-choice-bored,
  #cardMoodModal .card-mood-choice-surprised { top: 72% !important; }
  #cardMoodModal .card-mood-choice-wink      { top: 103% !important; }
  /* Keep the week where the reference has it; only the six-face constellation
     needed correction on Safari-height screens. */
  #cardMoodModal .card-mood-gate-week { bottom: max(18.5vh, 116px) !important; }
}

/* Beta 13 reference-locked mood placement.
   The supplied 709×1536 reference is ~2.17:1, so these are viewport-normalized
   coordinates rather than offsets that drift when Safari shortens the page. */
#cardMoodModal .card-mood-title-wrap {
  top: max(21.4vh, 148px) !important;
}
#cardMoodModal .card-mood-choice-orbit {
  top: 29.5% !important;
  height: min(32vh, 292px) !important;
}
#cardMoodModal .card-mood-choice-happy     { top: 14% !important; }
#cardMoodModal .card-mood-choice-sad,
#cardMoodModal .card-mood-choice-silly     { top: 32% !important; }
#cardMoodModal .card-mood-choice-bored,
#cardMoodModal .card-mood-choice-surprised { top: 67% !important; }
#cardMoodModal .card-mood-choice-wink      { top: 84.5% !important; }
#cardMoodModal .card-mood-gate-week {
  bottom: max(29.5vh, 190px) !important;
}

@media (max-height: 760px) {
  #cardMoodModal .card-mood-title-wrap {
    top: max(20vh, 138px) !important;
  }
  #cardMoodModal .card-mood-choice-orbit {
    top: 29.5% !important;
    height: min(31vh, 250px) !important;
  }
  #cardMoodModal .card-mood-choice-happy     { top: 14% !important; }
  #cardMoodModal .card-mood-choice-sad,
  #cardMoodModal .card-mood-choice-silly     { top: 33% !important; }
  #cardMoodModal .card-mood-choice-bored,
  #cardMoodModal .card-mood-choice-surprised { top: 66% !important; }
  #cardMoodModal .card-mood-choice-wink      { top: 87% !important; }
  #cardMoodModal .card-mood-gate-week {
    bottom: max(29.5vh, 190px) !important;
  }
}

/* Beta 13 header geometry lock: avatar, owner action and X share one 40px
   circle/pill axis and equal 10px corner insets on the Card. */
.profile-modal.profile-card-active > #closeProfileButton {
  top: 10px !important;
  right: 10px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-content {
  padding: 10px 10px max(18px, env(safe-area-inset-bottom)) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header {
  height: 40px !important;
  min-height: 40px !important;
  padding-right: 166px !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header-avatar,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header-avatar > .profile-avatar,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header-avatar > .profile-avatar.is-cd-avatar {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex-basis: 40px !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-heading-copy { height: 40px !important; }
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-owner-edit {
  top: 10px !important;
  right: 60px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 14                            */
/* Motion/reflection repair. Visible version remains v3.65.                  */
/* ========================================================================== */

/* Card is a real two-sided 3D object now. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) {
  background: transparent !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  will-change: auto;
}
.profile-card-spin-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--card);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 54px rgba(0,0,0,.22);
}
.profile-card-spin-front { transform: rotateY(0deg) translateZ(.1px); }
.profile-card-spin-back  { transform: rotateY(180deg) translateZ(.1px); }

.profile-card-back-background {
  z-index: 0;
  opacity: 1;
  filter: saturate(.96) contrast(1.02) brightness(.94);
}
.profile-card-spin-back.is-viewer-back .profile-card-back-background { opacity: 0; }
.profile-card-back-holo {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .12;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.92) 0 1.5%, transparent 9%),
    conic-gradient(from 12deg at 48% 48%,
      #d8dde6 0 8%, #8bf5cc 15%, #dfe4ea 26%, #aa78ff 39%,
      #e9eef4 51%, #77cfff 65%, #d7dae3 77%, #b47bff 89%, #d8dde6 100%);
  background-size: 100% 100%;
  filter: saturate(1.28) contrast(1.02);
}
.profile-card-spin-back.is-viewer-back .profile-card-back-holo { opacity: 1; }
.profile-card-back-label {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  translate: -50% -50%;
  width: min(82%, 390px);
  color: rgba(18,20,26,.38);
  font-size: clamp(18px, 5vw, 31px);
  font-weight: 900;
  letter-spacing: -.035em;
  text-align: center;
  text-transform: none;
  text-shadow: 0 1px rgba(255,255,255,.28);
  pointer-events: none;
}
.profile-card-spin-back.is-owner-back .profile-card-back-label {
  color: color-mix(in srgb, var(--text) 34%, transparent);
  text-shadow: 0 1px 8px color-mix(in srgb, var(--card) 45%, transparent);
}

/* Juicy moving reflection. It is intentionally one overlay, not fake duplicated
   Card imagery, so the object reads as one physical card while rotating. */
.profile-card-spin-gloss {
  position: absolute;
  inset: -32%;
  z-index: 29;
  pointer-events: none;
  border-radius: inherit;
  opacity: .10;
  background:
    linear-gradient(112deg,
      transparent 28%,
      rgba(255,255,255,.08) 35%,
      rgba(255,255,255,.78) 43%,
      rgba(138,255,220,.42) 47%,
      rgba(172,104,255,.42) 51%,
      rgba(100,202,255,.40) 55%,
      rgba(255,255,255,.58) 59%,
      transparent 68%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 48%);
  mix-blend-mode: screen;
  transform: translate3d(-34%, -6%, 0) rotate(-7deg);
  filter: saturate(1.22) blur(.2px);
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] .profile-card-spin-gloss {
  opacity: .74;
  animation: yapperCardGlossTwoPassesB14 700ms linear 2 both;
}
@keyframes yapperCardGlossTwoPassesB14 {
  0%   { transform: translate3d(-42%,-7%,0) rotate(-8deg); opacity: .16; }
  18%  { opacity: .78; }
  50%  { opacity: .52; }
  82%  { opacity: .84; }
  100% { transform: translate3d(42%,7%,0) rotate(8deg); opacity: .16; }
}

/* Exactly two constant-speed diagonal revolutions. 0 → 720deg on one fixed
   diagonal axis means no reverse, no settle-back, and both turns have the same speed. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] {
  animation: yapperCardSpinTwiceB14 1400ms linear both !important;
  will-change: transform;
}
@keyframes yapperCardSpinTwiceB14 {
  0%   { opacity: .96; transform: perspective(1250px) rotate3d(.34, 1, .10, 0deg) scale(.965); }
  100% { opacity: 1;   transform: perspective(1250px) rotate3d(.34, 1, .10, 720deg) scale(1); }
}

/* RGB glitch: blood-dark red + green + Yapper blue. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] {
  animation: yapperCardRgbGlitchB14 620ms steps(1,end) both !important;
  will-change: transform, filter, opacity;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] .profile-card-spin-front::after,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] .profile-card-spin-back::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 45;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(74,0,12,.48) 0 5px,
      transparent 5px 14px,
      rgba(47,255,145,.22) 14px 18px,
      transparent 18px 27px,
      rgba(92,119,255,.50) 27px 32px,
      transparent 32px 43px);
  mix-blend-mode: color;
  animation: yapperCardRgbBandsB14 620ms steps(1,end) both;
}
@keyframes yapperCardRgbGlitchB14 {
  0%   { opacity: 0; transform: translate3d(-13px,2px,0) scale(.988); filter: blur(7px) drop-shadow(-10px 0 0 #4a000c) drop-shadow(10px 0 0 #5C77FF); clip-path: inset(0 0 0 0 round 42px); }
  10%  { opacity: .86; transform: translate3d(10px,-2px,0) scale(1.008); filter: drop-shadow(-8px 0 0 #4a000c) drop-shadow(8px 0 0 #5C77FF); clip-path: inset(0 0 63% 0 round 42px); }
  20%  { opacity: 1; transform: translate3d(-8px,1px,0); filter: drop-shadow(7px 0 0 #35ff91) drop-shadow(-7px 0 0 #5C77FF); clip-path: inset(24% 0 36% 0 round 42px); }
  31%  { transform: translate3d(7px,-1px,0); filter: drop-shadow(-9px 0 0 #4a000c) drop-shadow(6px 0 0 #35ff91); clip-path: inset(58% 0 7% 0 round 42px); }
  44%  { transform: translate3d(-5px,0,0); filter: drop-shadow(-6px 0 0 #4a000c) drop-shadow(8px 0 0 #5C77FF); clip-path: inset(8% 0 13% 0 round 42px); }
  57%  { transform: translate3d(4px,0,0); filter: drop-shadow(5px 0 0 #35ff91) drop-shadow(-5px 0 0 #5C77FF); clip-path: inset(42% 0 25% 0 round 42px); }
  72%  { transform: translate3d(-2px,0,0); filter: drop-shadow(-3px 0 0 #4a000c) drop-shadow(3px 0 0 #5C77FF); clip-path: inset(2% 0 4% 0 round 42px); }
  86%  { transform: translate3d(1px,0,0); filter: none; clip-path: inset(0 round 42px); }
  100% { opacity: 1; transform: none; filter: none; clip-path: inset(0 round 42px); }
}
@keyframes yapperCardRgbBandsB14 {
  0%, 9%   { opacity: .78; transform: translateX(9px); }
  10%, 19% { opacity: .28; transform: translateX(-10px); }
  20%, 31% { opacity: .68; transform: translateX(6px); }
  32%, 43% { opacity: .18; transform: translateX(-7px); }
  44%, 58% { opacity: .58; transform: translateX(4px); }
  59%, 75% { opacity: .18; transform: translateX(-3px); }
  76%, 88% { opacity: .28; transform: translateX(1px); }
  100%     { opacity: 0; transform: none; }
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] .profile-card-spin-gloss {
  opacity: .48;
  animation: yapperCardGlitchGlossB14 620ms steps(1,end) both;
}
@keyframes yapperCardGlitchGlossB14 {
  0%, 24%, 52% { transform: translate3d(-34%,-5%,0) rotate(-7deg); opacity:.20; }
  12%, 38%, 68% { transform: translate3d(34%,5%,0) rotate(7deg); opacity:.64; }
  100% { opacity:.10; }
}

:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="blur_reveal"] {
  animation: yapperCardBlurInB14 720ms cubic-bezier(.18,.86,.22,1) both !important;
}
@keyframes yapperCardBlurInB14 {
  0%   { opacity: 0; transform: scale(.965); filter: blur(32px) saturate(1.38) brightness(1.10); }
  55%  { opacity: 1; transform: scale(1.006); filter: blur(6px) saturate(1.10) brightness(1.03); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="blur_reveal"] .profile-card-spin-gloss {
  opacity: .62;
  animation: yapperCardBlurGlossB14 720ms cubic-bezier(.18,.86,.22,1) both;
}
@keyframes yapperCardBlurGlossB14 {
  from { transform: translate3d(-34%,-4%,0) rotate(-6deg); opacity:.08; filter:blur(12px); }
  60%  { opacity:.72; }
  to   { transform: translate3d(24%,3%,0) rotate(4deg); opacity:.10; filter:blur(.2px); }
}


/* Scratch foil reflections are stronger, but disappear immediately where the user
   actually scratches so the revealed content is clean. */
.profile-card-scratch-shine {
  z-index: 3 !important;
  opacity: .78 !important;
  background:
    conic-gradient(from 18deg at 50% 48%,
      transparent 0 9%, rgba(89,255,185,.52) 16%, transparent 27%,
      rgba(175,79,255,.58) 40%, transparent 52%,
      rgba(92,119,255,.50) 64%, transparent 76%,
      rgba(255,255,255,.48) 87%, transparent 100%),
    linear-gradient(113deg, transparent 22%, rgba(255,255,255,.12) 34%, rgba(255,255,255,.70) 43%, transparent 55%);
  animation: yapperScratchFoilShineB14 2.5s ease-in-out infinite alternate !important;
}
@keyframes yapperScratchFoilShineB14 {
  from { transform: rotate(-13deg) translate3d(-10%,-3%,0); filter:hue-rotate(-10deg) saturate(1.08); }
  to   { transform: rotate(10deg) translate3d(10%,3%,0); filter:hue-rotate(22deg) saturate(1.26); }
}
.profile-card-scratch-layer.has-scratched .profile-card-scratch-shine { opacity: 0 !important; }

/* Header axis: Edit Card and the modal X now share the exact y=10 / 40px axis.
   The Edit button is positioned relative to the header, so top must be zero. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header { position: relative !important; height:40px !important; min-height:40px !important; }
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-owner-edit {
  top: 0 !important;
  right: 50px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding-inline: 15px !important;
}

/* Admin controls belong to the normal profile only. Hiding the container by Card
   state avoids mutating the admin button's permission state, so it returns cleanly. */
.profile-modal.profile-card-active > .profile-admin-compact-actions,
.profile-modal.profile-card-editing-active > .profile-admin-compact-actions {
  display: none !important;
}

/* Top 7 selected CD avatars cannot paint over their remove control. */
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-friend {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-avatar-shell {
  position: relative;
  z-index: 1;
  overflow: hidden !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-friend button[data-remove-top7] {
  z-index: 999 !important;
  top: -4px !important;
  right: -1px !important;
  transform: translateZ(3px) !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-avatar-shell .cd-avatar-disc,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-selected-avatar-shell .profile-avatar.is-cd-avatar {
  z-index: 1 !important;
}

/* Own weekly mood strip is intentionally interactive. */
:is(#profileCardMoodPanel, [data-card-part="profileCardMoodPanel"]).is-owner-repick { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:is(#profileCardMoodPanel, [data-card-part="profileCardMoodPanel"]).is-owner-repick:active { transform: scale(.992); }
:is(#profileCardMoodPanel, [data-card-part="profileCardMoodPanel"]).is-owner-repick:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
:is(#profileCardMoodPanel, [data-card-part="profileCardMoodPanel"]).is-resetting { opacity: .72; pointer-events: none; }

/* Animation selector: short labels stay inside their pills. */
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-animation-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:9px !important; }
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-animation-option {
  min-width: 0 !important;
  min-height: 68px !important;
  padding: 11px 13px !important;
  border-radius: 25px !important;
  overflow: hidden !important;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-animation-option strong,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-animation-option small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) .profile-card-animation-option small { font-size: 10px !important; line-height:1.15 !important; }

/* Back to the simple CARD sample: it previews motion, not fake profile content. */
.profile-card-animation-preview {
  min-height: 150px !important;
  display: grid !important;
  place-items: center !important;
  perspective: 900px;
  border-radius: 34px !important;
  overflow: hidden;
}
.profile-card-animation-preview-object {
  position: relative !important;
  width: min(184px, 62%) !important;
  height: 112px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d;
}
.profile-card-animation-preview-object > span,
.profile-card-animation-preview-object::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: 28px;
  background:
    radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 37%),
    linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, var(--card)), var(--card));
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .14em;
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.profile-card-animation-preview-object > span { transform: rotateY(0deg) translateZ(.1px); }
.profile-card-animation-preview-object::before { content:"CARD"; transform: rotateY(180deg) translateZ(.1px); }
.profile-card-animation-preview-object::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  border-radius:28px;
  opacity:0;
}
.profile-card-animation-preview-object.is-previewing[data-card-animation="card_flip"] {
  animation: yapperCardPreviewSpinTwiceB14 1400ms linear both !important;
}
@keyframes yapperCardPreviewSpinTwiceB14 {
  from { transform: perspective(800px) rotate3d(.34,1,.10,0deg) scale(.96); }
  to   { transform: perspective(800px) rotate3d(.34,1,.10,720deg) scale(1); }
}
.profile-card-animation-preview-object.is-previewing[data-card-animation="glitch"] {
  animation: yapperCardPreviewGlitchB14 620ms steps(1,end) both !important;
}
.profile-card-animation-preview-object.is-previewing[data-card-animation="glitch"]::after {
  opacity:1;
  background: repeating-linear-gradient(0deg,rgba(74,0,12,.50) 0 6px,transparent 6px 15px,rgba(48,255,145,.26) 15px 20px,transparent 20px 28px,rgba(92,119,255,.55) 28px 34px,transparent 34px 44px);
  mix-blend-mode: color;
  animation:yapperCardRgbBandsB14 620ms steps(1,end) both;
}
@keyframes yapperCardPreviewGlitchB14 {
  0%{opacity:0;transform:translateX(-10px);filter:blur(6px) drop-shadow(-8px 0 #4a000c) drop-shadow(8px 0 #5C77FF)}
  18%{opacity:1;transform:translateX(8px);filter:drop-shadow(-7px 0 #4a000c) drop-shadow(7px 0 #5C77FF)}
  36%{transform:translateX(-6px);filter:drop-shadow(6px 0 #35ff91) drop-shadow(-6px 0 #5C77FF)}
  54%{transform:translateX(5px);filter:drop-shadow(-5px 0 #4a000c) drop-shadow(5px 0 #5C77FF)}
  72%{transform:translateX(-2px);filter:drop-shadow(-2px 0 #4a000c) drop-shadow(2px 0 #5C77FF)}
  100%{opacity:1;transform:none;filter:none}
}
.profile-card-animation-preview-object.is-previewing[data-card-animation="blur_reveal"] {
  animation: yapperCardPreviewBlurB14 720ms cubic-bezier(.18,.86,.22,1) both !important;
}
@keyframes yapperCardPreviewBlurB14 {
  from{opacity:0;transform:scale(.965);filter:blur(24px) saturate(1.35)}
  55%{opacity:1;transform:scale(1.01);filter:blur(5px) saturate(1.08)}
  to{opacity:1;transform:none;filter:none}
}

/* Remove Beta 13's miniature-profile preview pieces if an old cached DOM lingers. */
.profile-card-animation-mini-header,
.profile-card-animation-mini-panel,
.profile-card-animation-mini-people,
.profile-card-animation-mini-signature { display:none !important; }

/* Hidden Card/editor DOM stays out of profile layout/paint work. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).hidden,
:is(#profileCardEditSection, [data-card-part="profileCardEditSection"]).hidden { display:none !important; contain: strict; }

@media (prefers-reduced-motion: reduce) {
  :is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active,
  .profile-card-animation-preview-object.is-previewing,
  .profile-card-spin-gloss { animation:none !important; }
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"]::after { display:none !important; }
/* Beta 14 final spin lock: explicit half-turn checkpoints stop browsers from
   collapsing a 0→720 transform into a shorter quaternion path. */
@keyframes yapperCardSpinTwiceB14 {
  0%   { opacity:.96; transform:perspective(1250px) rotate3d(.34,1,.10,0deg)   scale(.965); }
  25%  { opacity:1;   transform:perspective(1250px) rotate3d(.34,1,.10,180deg) scale(.974); }
  50%  { opacity:1;   transform:perspective(1250px) rotate3d(.34,1,.10,360deg) scale(.983); }
  75%  { opacity:1;   transform:perspective(1250px) rotate3d(.34,1,.10,540deg) scale(.992); }
  100% { opacity:1;   transform:perspective(1250px) rotate3d(.34,1,.10,720deg) scale(1); }
}
@keyframes yapperCardPreviewSpinTwiceB14 {
  0%   { transform:perspective(800px) rotate3d(.34,1,.10,0deg)   scale(.96); }
  25%  { transform:perspective(800px) rotate3d(.34,1,.10,180deg) scale(.97); }
  50%  { transform:perspective(800px) rotate3d(.34,1,.10,360deg) scale(.98); }
  75%  { transform:perspective(800px) rotate3d(.34,1,.10,540deg) scale(.99); }
  100% { transform:perspective(800px) rotate3d(.34,1,.10,720deg) scale(1); }
}

/* Beta 14 final RGB glitch polish — keep the physical card visible; only the
   chromatic scan slices break apart. This avoids the earlier 'missing chunks'
   look while still reading unmistakably as an RGB glitch. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] {
  animation: yapperCardRgbGlitchVisibleB14 660ms steps(1,end) both !important;
  clip-path: inset(0);
}
@keyframes yapperCardRgbGlitchVisibleB14 {
  0%   { opacity:0; transform:translate3d(-8px,2px,0) scale(.992); filter:blur(7px) drop-shadow(-8px 0 0 #42000b) drop-shadow(8px 0 0 #5C77FF); }
  10%  { opacity:1; transform:translate3d(6px,-1px,0) scale(1.004); filter:drop-shadow(-7px 0 0 #42000b) drop-shadow(7px 0 0 #5C77FF); }
  21%  { transform:translate3d(-5px,1px,0) skewX(-.35deg); filter:drop-shadow(5px 0 0 #35ff91) drop-shadow(-6px 0 0 #5C77FF); }
  34%  { transform:translate3d(4px,-1px,0) skewX(.28deg); filter:drop-shadow(-6px 0 0 #42000b) drop-shadow(5px 0 0 #35ff91); }
  48%  { transform:translate3d(-3px,0,0); filter:drop-shadow(-4px 0 0 #42000b) drop-shadow(5px 0 0 #5C77FF); }
  63%  { transform:translate3d(2px,0,0); filter:drop-shadow(3px 0 0 #35ff91) drop-shadow(-3px 0 0 #5C77FF); }
  78%  { transform:translate3d(-1px,0,0); filter:drop-shadow(-2px 0 0 #42000b) drop-shadow(2px 0 0 #5C77FF); }
  90%  { transform:none; filter:none; }
  100% { opacity:1; transform:none; filter:none; }
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] .profile-card-spin-front::after,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] .profile-card-spin-back::after {
  opacity:0;
  mix-blend-mode:normal !important;
  background:
    linear-gradient(90deg,
      rgba(66,0,11,.44) 0 31%,
      transparent 31% 35%,
      rgba(53,255,145,.22) 35% 63%,
      transparent 63% 67%,
      rgba(92,119,255,.48) 67% 100%),
    repeating-linear-gradient(0deg,
      transparent 0 7px,
      rgba(255,255,255,.08) 7px 8px,
      transparent 8px 15px);
  animation:yapperCardRgbSlicesB14 660ms steps(1,end) both !important;
}
@keyframes yapperCardRgbSlicesB14 {
  0%   { opacity:.00; clip-path:inset(8% 0 74% 0 round 40px); transform:translateX(-10px); }
  9%   { opacity:.72; clip-path:inset(8% 0 74% 0 round 40px); transform:translateX(10px); }
  19%  { opacity:.22; clip-path:inset(70% 0 9% 0 round 40px); transform:translateX(-7px); }
  30%  { opacity:.68; clip-path:inset(43% 0 39% 0 round 40px); transform:translateX(8px); }
  42%  { opacity:.16; clip-path:inset(17% 0 65% 0 round 40px); transform:translateX(-5px); }
  55%  { opacity:.62; clip-path:inset(62% 0 20% 0 round 40px); transform:translateX(5px); }
  68%  { opacity:.45; clip-path:inset(30% 0 50% 0 round 40px); transform:translateX(-3px); }
  81%  { opacity:.22; clip-path:inset(79% 0 5% 0 round 40px); transform:translateX(2px); }
  92%  { opacity:.08; clip-path:inset(0 0 0 0 round 40px); transform:none; }
  100% { opacity:0; clip-path:inset(0 0 0 0 round 40px); transform:none; }
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] .profile-card-spin-gloss {
  animation:yapperCardGlitchGlossJuicyB14 660ms steps(1,end) both !important;
}
@keyframes yapperCardGlitchGlossJuicyB14 {
  0%   { transform:translate3d(-38%,-7%,0) rotate(-8deg); opacity:.14; }
  14%  { transform:translate3d(28%,5%,0) rotate(6deg); opacity:.82; }
  27%  { transform:translate3d(-24%,-3%,0) rotate(-5deg); opacity:.28; }
  43%  { transform:translate3d(34%,6%,0) rotate(7deg); opacity:.72; }
  60%  { transform:translate3d(-12%,-2%,0) rotate(-3deg); opacity:.34; }
  78%  { transform:translate3d(24%,3%,0) rotate(4deg); opacity:.58; }
  100% { transform:translate3d(0,0,0); opacity:.10; }
}

.profile-card-animation-preview-object.is-previewing[data-card-animation="glitch"] {
  animation:yapperCardPreviewGlitchVisibleB14 660ms steps(1,end) both !important;
}
@keyframes yapperCardPreviewGlitchVisibleB14 {
  0%{opacity:0;transform:translateX(-7px) scale(.99);filter:blur(5px) drop-shadow(-6px 0 #42000b) drop-shadow(6px 0 #5C77FF)}
  14%{opacity:1;transform:translateX(6px);filter:drop-shadow(-6px 0 #42000b) drop-shadow(6px 0 #5C77FF)}
  30%{transform:translateX(-5px);filter:drop-shadow(5px 0 #35ff91) drop-shadow(-5px 0 #5C77FF)}
  48%{transform:translateX(4px);filter:drop-shadow(-4px 0 #42000b) drop-shadow(4px 0 #35ff91)}
  66%{transform:translateX(-2px);filter:drop-shadow(-3px 0 #42000b) drop-shadow(3px 0 #5C77FF)}
  84%{transform:translateX(1px);filter:none}
  100%{opacity:1;transform:none;filter:none}
}
.profile-card-animation-preview-object.is-previewing[data-card-animation="glitch"]::after {
  mix-blend-mode:normal !important;
  background:linear-gradient(90deg,rgba(66,0,11,.52) 0 32%,rgba(53,255,145,.25) 34% 65%,rgba(92,119,255,.56) 68% 100%) !important;
  animation:yapperCardRgbSlicesB14 660ms steps(1,end) both !important;
}

/* Beta 14 physical-card spin correction. The diagonal axis lies IN the card
   plane, so front/back faces behave like a real two-sided card instead of a
   mirrored texture. The exact same linear half-turn cadence repeats twice. */
.profile-card-spin-front {
  transform: rotate3d(.34,1,0,0deg) translateZ(.1px) !important;
}
.profile-card-spin-back {
  transform: rotate3d(.34,1,0,180deg) translateZ(.1px) !important;
}
.profile-card-spin-back.is-owner-back .profile-card-back-label {
  opacity: 0 !important;
}
@keyframes yapperCardSpinTwiceB14 {
  0%   { opacity:.97; transform:perspective(1250px) rotate3d(.34,1,0,0deg)   scale(.97); }
  25%  { opacity:1;   transform:perspective(1250px) rotate3d(.34,1,0,180deg) scale(.9775); }
  50%  { opacity:1;   transform:perspective(1250px) rotate3d(.34,1,0,360deg) scale(.985); }
  75%  { opacity:1;   transform:perspective(1250px) rotate3d(.34,1,0,540deg) scale(.9925); }
  100% { opacity:1;   transform:perspective(1250px) rotate3d(.34,1,0,720deg) scale(1); }
}
.profile-card-animation-preview-object > span {
  transform: rotate3d(.34,1,0,0deg) translateZ(.1px) !important;
}
.profile-card-animation-preview-object::before {
  transform: rotate3d(.34,1,0,180deg) translateZ(.1px) !important;
}
@keyframes yapperCardPreviewSpinTwiceB14 {
  0%   { transform:perspective(800px) rotate3d(.34,1,0,0deg)   scale(.96); }
  25%  { transform:perspective(800px) rotate3d(.34,1,0,180deg) scale(.97); }
  50%  { transform:perspective(800px) rotate3d(.34,1,0,360deg) scale(.98); }
  75%  { transform:perspective(800px) rotate3d(.34,1,0,540deg) scale(.99); }
  100% { transform:perspective(800px) rotate3d(.34,1,0,720deg) scale(1); }
}
/* No per-animation subtitles: the editor buttons stay compact and cannot wrap. */
.profile-card-animation-option small { display:none !important; }
/* Explicit side visibility at each edge crossing. Safari/WebKit can keep a child
   face painted while an ancestor rotates on a non-cardinal 3D axis; switching
   visibility exactly at the edge makes the two-sided object deterministic. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] .profile-card-spin-front {
  animation:yapperCardFrontSideB14 1400ms linear both !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] .profile-card-spin-back {
  animation:yapperCardBackSideB14 1400ms linear both !important;
}
@keyframes yapperCardFrontSideB14 {
  0%,12.45% { opacity:1; }
  12.55%,37.45% { opacity:0; }
  37.55%,62.45% { opacity:1; }
  62.55%,87.45% { opacity:0; }
  87.55%,100% { opacity:1; }
}
@keyframes yapperCardBackSideB14 {
  0%,12.45% { opacity:0; }
  12.55%,37.45% { opacity:1; }
  37.55%,62.45% { opacity:0; }
  62.55%,87.45% { opacity:1; }
  87.55%,100% { opacity:0; }
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] .profile-card-spin-face {
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 15                            */
/* Final daily polish: mood spacing, rainbow glitch color cycle, Top 7 names, */
/* and Edit Card height parity with the normal Edit Profile modal.             */
/* Visible version remains v3.65.                                             */
/* ========================================================================== */

/* --- Daily mood selector: keep the bottom wink comfortably above the week. ---
   Beta 14 had both elements technically in the right region, but the gap was
   too small on Safari-height viewports. Keep the supplied six-point pattern;
   only open up the vertical breathing room between the constellation and log. */
#cardMoodModal .card-mood-choice-wink {
  top: 77.5% !important;
}
#cardMoodModal .card-mood-gate-week {
  bottom: max(27.7vh, 174px) !important;
}
@media (max-height: 760px) {
  #cardMoodModal .card-mood-choice-wink {
    top: 79% !important;
  }
  #cardMoodModal .card-mood-gate-week {
    bottom: max(27.2vh, 168px) !important;
  }
}

/* --- Top 7 labels: reserve a real second row below the circular avatar. ---
   Global Yapper button CSS is 42px tall + overflow:hidden, which was clipping
   the name under a ~40px avatar. The Card person button must be content-sized. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-person {
  grid-template-rows: auto minmax(11px, auto) !important;
  align-content: start !important;
  height: auto !important;
  min-height: 62px !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 1px !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-person-name {
  display: block !important;
  position: relative;
  z-index: 5;
  width: calc(100% + 2px) !important;
  min-height: 11px;
  margin-top: 1px;
  overflow: hidden !important;
  line-height: 11px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 390px) {
  :is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-person-name {
    display: block !important;
    font-size: 7.5px !important;
  }
}

/* --- Edit Card height: same mobile shell geometry as the established Edit Profile. --- */
@media (max-width: 700px) {
  #profileModal:has(.profile-card-editing-active) {
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  #profileModal > .profile-modal.profile-card-editing-active {
    box-sizing: border-box !important;
    flex: 0 1 auto !important;
    width: min(94vw, 560px) !important;
    max-width: 560px !important;
    height: min(64dvh, 580px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 48px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 34px !important;
  }

  #profileModal > .profile-modal.profile-card-editing-active :is(#profileCardEditSection, [data-card-part="profileCardEditSection"]) {
    display: grid !important;
    grid-template-rows: 46px minmax(0, 1fr) auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  #profileModal > .profile-modal.profile-card-editing-active .profile-card-editor-header {
    position: relative !important;
    grid-row: 1;
    min-height: 46px !important;
    height: 46px !important;
    padding: 6px 56px 4px 14px !important;
  }
  #profileModal > .profile-modal.profile-card-editing-active .profile-card-editor-header h2 {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  #profileModal > .profile-modal.profile-card-editing-active .profile-card-editor-scroll {
    grid-row: 2;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 8px 14px 10px !important;
  }

  #profileModal > .profile-modal.profile-card-editing-active .profile-card-editor-actions {
    position: relative !important;
    inset: auto !important;
    grid-row: 3;
    min-height: 0 !important;
    padding: 6px 14px 8px !important;
  }
}

/* --- Glitch: restore the original glitch *pattern*; only the color treatment changes. ---
   Movement/clipping cadence stays glitchy. A full-card color flash runs through
   dark blood red → orange → gold → yellow → green → Yapper blue → purple. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] {
  animation: yapperCardGlitchPatternB15 660ms steps(1,end) both !important;
  clip-path: inset(0);
}
@keyframes yapperCardGlitchPatternB15 {
  0%   { opacity:0; transform:translate3d(-11px,2px,0) scale(.985); filter:blur(7px) saturate(1.55); clip-path:inset(0); }
  12%  { opacity:.88; transform:translate3d(9px,-2px,0) scale(1.012); clip-path:inset(0 0 67% 0 round 40px); filter:saturate(1.35); }
  24%  { opacity:1; transform:translate3d(-5px,1px,0); clip-path:inset(28% 0 35% 0 round 40px); filter:saturate(1.45); }
  40%  { transform:translate3d(6px,0,0); clip-path:inset(63% 0 8% 0 round 40px); filter:saturate(1.3); }
  57%  { transform:translate3d(-2px,0,0) scale(1.004); clip-path:inset(8% 0 10% 0 round 40px); filter:blur(1px) saturate(1.22); }
  72%  { clip-path:inset(0 round 40px); transform:translate3d(1px,0,0); filter:none; }
  100% { opacity:1; clip-path:inset(0 round 40px); transform:none; filter:none; }
}

/* Replace Beta 14's RGB band/slice palette with simple rapid whole-card flashes. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"]::after {
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  z-index:45;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:#3a0008;
  mix-blend-mode:color !important;
  animation:yapperCardRainbowFlashB15 660ms steps(1,end) both !important;
}
@keyframes yapperCardRainbowFlashB15 {
  0%   { opacity:.00; background:#3a0008; }
  8%   { opacity:.62; background:#3a0008; }  /* blood-dark red */
  20%  { opacity:.58; background:#ff5a00; }  /* orange */
  32%  { opacity:.56; background:#d79b00; }  /* gold */
  44%  { opacity:.52; background:#ffe12b; }  /* yellow */
  56%  { opacity:.52; background:#36d565; }  /* green */
  68%  { opacity:.60; background:#5C77FF; }  /* Yapper blue */
  80%  { opacity:.58; background:#9b5cff; }  /* purple */
  90%  { opacity:.24; background:#5C77FF; }
  100% { opacity:0; background:#5C77FF; }
}

/* Disable the Beta 14 colored slice overlays without changing the physical
   gloss/reflection layer or the glitch movement itself. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] .profile-card-spin-front::after,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] .profile-card-spin-back::after {
  opacity:0 !important;
  animation:none !important;
  background:transparent !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="glitch"] .profile-card-spin-gloss {
  animation:yapperCardGlitchGlossB15 660ms steps(1,end) both !important;
}
@keyframes yapperCardGlitchGlossB15 {
  0%   { transform:translate3d(-34%,-6%,0) rotate(-7deg); opacity:.08; }
  18%  { transform:translate3d(18%,2%,0) rotate(2deg); opacity:.58; }
  36%  { transform:translate3d(-16%,-2%,0) rotate(-2deg); opacity:.22; }
  54%  { transform:translate3d(26%,4%,0) rotate(5deg); opacity:.62; }
  72%  { transform:translate3d(-8%,-1%,0) rotate(-1deg); opacity:.25; }
  100% { transform:translate3d(0,0,0); opacity:.10; }
}

/* Preview = same restored glitch cadence + same rainbow flash, with only the
   miniature CARD object present. */
.profile-card-animation-preview-object.is-previewing[data-card-animation="glitch"] {
  animation:yapperCardPreviewGlitchPatternB15 660ms steps(1,end) both !important;
  clip-path:inset(0);
}
@keyframes yapperCardPreviewGlitchPatternB15 {
  0%   { opacity:0; transform:translate3d(-9px,2px,0) scale(.985); filter:blur(5px) saturate(1.5); clip-path:inset(0); }
  12%  { opacity:.9; transform:translate3d(8px,-2px,0) scale(1.01); clip-path:inset(0 0 67% 0 round 16px); }
  24%  { opacity:1; transform:translate3d(-5px,1px,0); clip-path:inset(28% 0 35% 0 round 16px); }
  40%  { transform:translate3d(6px,0,0); clip-path:inset(63% 0 8% 0 round 16px); }
  57%  { transform:translate3d(-2px,0,0) scale(1.004); clip-path:inset(8% 0 10% 0 round 16px); filter:blur(.7px); }
  72%  { clip-path:inset(0 round 16px); transform:translate3d(1px,0,0); filter:none; }
  100% { opacity:1; clip-path:inset(0 round 16px); transform:none; filter:none; }
}
.profile-card-animation-preview-object.is-previewing[data-card-animation="glitch"]::after {
  opacity:0;
  background:#3a0008 !important;
  mix-blend-mode:color !important;
  animation:yapperCardRainbowFlashB15 660ms steps(1,end) both !important;
}

/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 16                            */
/* Manual 3D Card interaction + foil parity + admin isolation.                */
/* Visible app version remains v3.65.                                         */
/* ========================================================================== */

/* The Card is completely still unless the user grabs it. Pointer movement
   writes these variables; after one second of release JS eases them back to 0. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) {
  --card-manual-rx: 0deg;
  --card-manual-ry: 0deg;
  --card-gloss-x: 0%;
  --card-gloss-y: 0%;
  --card-gloss-strength: .12;
  transform: perspective(1180px) rotateX(var(--card-manual-rx)) rotateY(var(--card-manual-ry));
  transform-origin: 50% 50%;
  transition: none !important;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab:not(.card-intro-active) {
  cursor: grabbing;
  will-change: transform;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-returning:not(.card-intro-active) {
  will-change: transform;
}

/* Controls keep their normal interaction semantics even though the physical
   Card itself is draggable. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) button,
:is(#profileCardSection, [data-card-part="profileCardSection"]) a,
:is(#profileCardSection, [data-card-part="profileCardSection"]) input,
:is(#profileCardSection, [data-card-part="profileCardSection"]) textarea,
:is(#profileCardSection, [data-card-part="profileCardSection"]) select,
:is(#profileCardMoodPanel, [data-card-part="profileCardMoodPanel"]) {
  touch-action: manipulation;
}

/* Manual gloss follows the finger/cursor. There is NO autonomous Card motion. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) .profile-card-spin-gloss {
  opacity: var(--card-gloss-strength) !important;
  transform: translate3d(var(--card-gloss-x), var(--card-gloss-y), 0) rotate(-7deg) !important;
  transition: opacity 110ms linear;
  will-change: transform, opacity;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab:not(.card-intro-active) .profile-card-spin-gloss {
  filter: saturate(1.34) brightness(1.06) blur(.15px) !important;
}

/* Viewer back = literally the same painted silver/CD foil base as the scratch
   front. The canvas is rendered by the same JS painter at the same size. */
.profile-card-back-foil-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
.profile-card-spin-back.is-owner-back .profile-card-back-foil-canvas,
.profile-card-spin-back.is-owner-back .profile-card-back-holo {
  display: none !important;
}
.profile-card-spin-back.is-viewer-back .profile-card-back-foil-canvas {
  display: block !important;
}
.profile-card-spin-back.is-viewer-back .profile-card-back-holo {
  display: block !important;
  z-index: 2 !important;
  opacity: .78 !important;
  background:
    conic-gradient(from 18deg at 50% 48%,
      transparent 0 9%, rgba(89,255,185,.52) 16%, transparent 27%,
      rgba(175,79,255,.58) 40%, transparent 52%,
      rgba(92,119,255,.50) 64%, transparent 76%,
      rgba(255,255,255,.48) 87%, transparent 100%),
    linear-gradient(113deg,
      transparent 22%, rgba(255,255,255,.12) 34%,
      rgba(255,255,255,.70) 43%, transparent 55%) !important;
  animation: yapperScratchFoilShineB14 2.5s ease-in-out infinite alternate !important;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* The text is already painted into the shared foil canvas for viewers, so do
   not double-print the label on the back. */
.profile-card-spin-back.is-viewer-back .profile-card-back-label {
  opacity: 0 !important;
}

/* Hard isolation for admin-only profile chrome. JS also toggles this class so
   later permission refreshes cannot make Delete User leak through a Card. */
#profileModal .profile-admin-compact-actions.profile-card-force-hidden,
#profileModal .profile-modal.profile-card-active > .profile-admin-compact-actions,
#profileModal .profile-modal.profile-card-editing-active > .profile-admin-compact-actions {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.profile-card-spin-back.is-viewer-back .profile-card-back-foil-canvas {
  animation: yapperScratchCanvasIridescence 3.2s ease-in-out infinite alternate;
}
/* Let the physical card rotate outside its resting rectangle without being
   guillotined by the modal shell. The actual front/back faces carry the surface. */
#profileModal > .profile-modal.profile-card-active {
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}


/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 18                            */
/* True two-face Card: strict owner chrome, physical close button, Safari     */
/* rounded 3D clipping, and profile-background-only backside.                 */
/* Visible app version remains v3.65.                                         */
/* ========================================================================== */

/* While the Card is active, the modal is only a stage. It must not paint a
   rectangular glass sheet behind the rounded physical object. */
#profileModal > .profile-modal.profile-card-active {
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#profileModal > .profile-modal.profile-card-active::before,
#profileModal > .profile-modal.profile-card-active::after {
  content: none !important;
  display: none !important;
}

/* The section itself is a transparent 3D stage. ONLY the two faces paint. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) {
  border: 0 !important;
  outline: 0 !important;
  border-radius: var(--yapper-card-radius, 42px) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

/* Safari can lose overflow-radius clipping during a parent 3D transform. Give
   each physical face its own hard rounded clip + WebKit mask so even extreme
   tilts cannot expose square/spiky corners. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-face {
  inset: 0 !important;
  border-radius: var(--yapper-card-radius, 42px) !important;
  overflow: hidden !important;
  clip-path: inset(.35px round var(--yapper-card-radius, 42px)) !important;
  -webkit-clip-path: inset(.35px round var(--yapper-card-radius, 42px)) !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  mask-image: linear-gradient(#fff, #fff) !important;
  background-clip: padding-box !important;
  isolation: isolate !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-background-layer,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-gallery-layer,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-vignette,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-scratch-layer,
:is(#profileCardSection, [data-card-part="profileCardSection"]) :is(#profileCardScratchCanvas, [data-card-part="profileCardScratchCanvas"]) {
  border-radius: var(--yapper-card-radius, 42px) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-scratch-layer {
  clip-path: inset(.35px round var(--yapper-card-radius, 42px)) !important;
  -webkit-clip-path: inset(.35px round var(--yapper-card-radius, 42px)) !important;
}

/* The physical BACK of every Card is deliberately boring: only that user's
   normal profile background. Scratch foil exists only on the front reveal. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back .profile-card-back-background,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back.is-owner-back .profile-card-back-background,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back.is-viewer-back .profile-card-back-background {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back .profile-card-back-foil-canvas,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back .profile-card-back-holo,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back .profile-card-back-label {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

/* Manual 3D uses JS to decide which physical side is facing the camera. This
   avoids WebKit showing a mirrored front when the parent crosses 90 degrees. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) .profile-card-spin-face {
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) .profile-card-spin-front {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) .profile-card-spin-back {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-back-facing:not(.card-intro-active) .profile-card-spin-front {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-back-facing:not(.card-intro-active) .profile-card-spin-back {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* The real profile X is moved inside the front physical face while Card mode is
   open. Therefore it inherits exactly the same 3D transform instead of floating
   in screen-space. */
:is(#profileCardFrontFace, [data-card-part="profileCardFrontFace"]) > #closeProfileButton.profile-card-attached-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 90 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  transform: none !important;
}

/* No owner chrome is allowed to survive on somebody else's Card. */
#editProfileCardButton.hidden,
#editProfileCardButton[hidden],
#editProfileCardButton[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep profile-only admin chrome completely outside Card mode. */
#profileModal .profile-admin-compact-actions.profile-card-force-hidden,
#profileModal .profile-modal.profile-card-active > .profile-admin-compact-actions,
#profileModal .profile-modal.profile-card-editing-active > .profile-admin-compact-actions {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 19                            */
/* Quaternion trackball 3D, reveal-aware back, restored profile radius.      */
/* Visible app version remains v3.65.                                         */
/* ========================================================================== */

/* Match the exact radius of Yapper's normal profile modal at every breakpoint
   instead of hard-coding the desktop 42px value onto mobile. */
:root {
  --yapper-card-radius: var(--ui-radius-surface, 42px);
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) {
  border-radius: inherit !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-face,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-background-layer,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-gallery-layer,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-vignette,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-scratch-layer,
:is(#profileCardSection, [data-card-part="profileCardSection"]) :is(#profileCardScratchCanvas, [data-card-part="profileCardScratchCanvas"]),
:is(#profileCardSection, [data-card-part="profileCardSection"]) :is(#profileCardBackFoilCanvas, [data-card-part="profileCardBackFoilCanvas"]) {
  border-radius: var(--ui-radius-surface, 42px) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-face,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-scratch-layer {
  clip-path: inset(.35px round var(--ui-radius-surface, 42px)) !important;
  -webkit-clip-path: inset(.35px round var(--ui-radius-surface, 42px)) !important;
}

/* Manual interaction uses a quaternion-generated rotation matrix. This is a
   real continuous trackball orientation, not sequential rotateX/rotateY Euler
   angles, so full flips do not skew diagonally or gimbal when crossing 90°. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) {
  --card-manual-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
  transform: perspective(1180px) var(--card-manual-transform) !important;
  transform-origin: 50% 50% !important;
}

/* Other people's Cards use scratch material on BOTH sides until the scratch is
   completed. As soon as reveal finishes, card-scratch-active is removed and
   the physical back automatically becomes only their profile background. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-background {
  opacity: 0 !important;
  visibility: hidden !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-foil-canvas {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: yapperScratchCanvasIridescence 3.2s ease-in-out infinite alternate !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-holo,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-label {
  display: none !important;
}

/* After reveal (and always on your own Card), the back is deliberately nothing
   except the normal profile background. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-background {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-foil-canvas,
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-holo,
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-label {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Signature sits slightly lower, with the same panel geometry. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-signature-panel {
  transform: translateY(7px);
}


/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 21                            */
/* True physical two-face Card + cache-safe geometry repair. v3.65 stays.    */
/* ========================================================================== */

/* The actual Card radius is captured from the normal Profile before Card mode
   opens. Do not substitute global radius variables: those change by breakpoint
   and were the reason the Card stopped matching the profile. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) {
  --card-physical-radius: 34px;
  border-radius: var(--card-physical-radius) !important;
  background: transparent !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

/* These are two REAL faces. Never switch them with opacity/visibility classes.
   WebKit decides which face is visible from its normal, exactly like a physical
   card. The backside is a fixed local rotateY(180deg), NOT the old diagonal
   rotate3d face that made manual flips physically impossible. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-face {
  inset: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  border-radius: var(--card-physical-radius) !important;
  overflow: hidden !important;
  clip-path: inset(.45px round var(--card-physical-radius)) !important;
  -webkit-clip-path: inset(.45px round var(--card-physical-radius)) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  background-clip: padding-box !important;
  pointer-events: auto;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-front {
  transform: translateZ(.6px) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back {
  transform: rotateY(180deg) translateZ(.6px) !important;
}

/* Kill the Beta14/Beta18 manual face swapping completely. It fought Safari's
   backface system and caused mirrored fronts / diagonal side jumps. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) .profile-card-spin-front,
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) .profile-card-spin-back,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-back-facing:not(.card-intro-active) .profile-card-spin-front,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-back-facing:not(.card-intro-active) .profile-card-spin-back {
  opacity: 1 !important;
  visibility: visible !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] .profile-card-spin-front,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] .profile-card-spin-back {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

/* Every layer obeys the SAME physical silhouette. This is deliberately repeated
   on Safari-sensitive child layers so no square/spiky plate can bleed through
   during an extreme perspective tilt. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-background-layer,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-gallery-layer,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-vignette,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-scratch-layer,
:is(#profileCardSection, [data-card-part="profileCardSection"]) :is(#profileCardScratchCanvas, [data-card-part="profileCardScratchCanvas"]),
:is(#profileCardSection, [data-card-part="profileCardSection"]) :is(#profileCardBackFoilCanvas, [data-card-part="profileCardBackFoilCanvas"]) {
  border-radius: var(--card-physical-radius) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-scratch-layer {
  clip-path: inset(.45px round var(--card-physical-radius)) !important;
  -webkit-clip-path: inset(.45px round var(--card-physical-radius)) !important;
}

/* Viewer card lifecycle:
   LOCKED  = front scratch canvas + the SAME scratch material on the real back.
   REVEALED = front content + back is ONLY the normal profile background. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-background {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-foil-canvas {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-holo,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-label {
  display: none !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-background {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-foil-canvas,
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-holo,
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-label {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Manual rotation is one parent transform. The two local faces above never
   change their geometry, so the card cannot jump to a diagonal backside. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) {
  --card-manual-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
  transform: perspective(1180px) var(--card-manual-transform) !important;
  transform-origin: 50% 50% !important;
}

/* Slightly lower than Beta19 so the Signature sits comfortably off the lower
   content edge while keeping the panel fully inside the Card. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-signature-panel {
  transform: translateY(12px) !important;
}

/* Final WebKit face visibility lock. Older Beta18 rules used a more-specific
   :not(.card-intro-active) selector, so match/exceed that specificity here. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) .profile-card-spin-face,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active .profile-card-spin-face {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

/* Safari-safe deterministic face selection. The physical transforms remain
   front=0° / back=180°; only the painted side switches at the exact edge. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) .profile-card-spin-face {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) .profile-card-spin-front {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-intro-active) .profile-card-spin-back {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-back-facing:not(.card-intro-active) .profile-card-spin-front {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-back-facing:not(.card-intro-active) .profile-card-spin-back {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* During the two-turn intro, use the same deterministic front/back cadence at
   each 90° edge crossing. The local back face is now a real rotateY(180°). */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] .profile-card-spin-face {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] .profile-card-spin-front {
  animation: yapperCardFrontSideB14 1400ms linear both !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-intro-active[data-card-animation="card_flip"] .profile-card-spin-back {
  animation: yapperCardBackSideB14 1400ms linear both !important;
}


/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 21                            */
/* Stable hand-spin physics. Visible app version remains v3.65.              */
/* ========================================================================== */

/* The Card is transformed as one rigid body. Do not let browser hit-testing or
   touch panning interfere while it is actively grabbed. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab {
  touch-action: none !important;
  will-change: transform;
}

/* Keep transform interpolation off during the live drag. The only smoothing is
   the explicit quaternion return animation after release. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab:not(.card-intro-active) {
  transition: none !important;
}


/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 22                            */
/* Physical edge depth + resumable 360 hand-spin + signature polish. v3.65. */
/* ========================================================================== */

/* Give the object real shallow depth instead of two zero-thickness image
   planes. Front/back sit ±3px from the center; nine rounded internal slices
   fill the volume between them. Because every slice inherits the exact Card
   radius, the edge remains rounded instead of becoming a rectangular prism. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-front {
  transform: translateZ(3px) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back {
  transform: rotateY(180deg) translateZ(3px) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-thickness {
  position: absolute;
  inset: 0;
  border-radius: var(--card-physical-radius) !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-thickness > i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--card-physical-radius) !important;
  transform: translateZ(var(--card-depth-z));
  -webkit-transform: translateZ(var(--card-depth-z));
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.20),
      rgba(116,124,145,.26) 28%,
      rgba(18,19,24,.72) 58%,
      rgba(255,255,255,.16));
  box-shadow:
    inset 0 0 0 .75px rgba(255,255,255,.18),
    inset 0 0 0 1.5px rgba(16,18,24,.20);
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* Beta20/21 had moved this to +12px. Pull it gently back upward — still below
   the original placement, but visually centered above the lower Card edge. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-signature-panel {
  transform: translateY(7px) !important;
}

/* The live grab must always win over a stale return frame. JS owns the actual
   generation lock; this keeps CSS from interpolating an old transform when a
   second grab happens during the one-second hold/return window. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab.card-manual-returning {
  transition: none !important;
}


/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 23                            */
/* Back-material repair + visible edge-only physical thickness. v3.65.       */
/* ========================================================================== */

/* Beta 22's thickness was nine FULL opaque card-sized planes. Those planes
   physically covered the real back face whenever the card rotated, producing
   the giant grey/black slab seen on-device. The thickness must only occupy the
   perimeter of the card, never its centre. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-front {
  transform: translateZ(5.8px) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back {
  transform: rotateY(180deg) translateZ(5.8px) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-thickness {
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--card-physical-radius) !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  background: transparent !important;
  overflow: visible !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-thickness > i {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  border-radius: var(--card-physical-radius) !important;
  transform: translateZ(var(--card-depth-z)) !important;
  -webkit-transform: translateZ(var(--card-depth-z)) !important;
  background: transparent !important;
  border: 1.45px solid rgba(119,126,142,.72) !important;
  box-shadow:
    inset 0 0 0 .65px rgba(255,255,255,.34),
    0 0 .5px rgba(255,255,255,.16) !important;
  opacity: .92 !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
/* Subtle material variation across the slab keeps the side from reading as a
   single flat outline when viewed edge-on. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-thickness > i:nth-child(odd) {
  border-color: rgba(40,43,51,.82) !important;
  box-shadow:
    inset 0 0 0 .7px rgba(255,255,255,.20),
    0 0 .55px rgba(0,0,0,.20) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-thickness > i:nth-child(3n) {
  border-color: rgba(191,199,215,.72) !important;
}

/* LOCKED VIEWER CARD: the physical back is the same scratch/CD material as the
   front scratch cover. The canvas painter provides the exact texture; this CSS
   background is a fallback underneath it so a late/blank canvas can never show
   the generic dark back again. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back {
  background: #eef0f5 !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-background {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-foil-canvas {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 4 !important;
  border-radius: var(--card-physical-radius) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.72) 0 3%, transparent 34%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.20) 0 1px, rgba(154,162,180,.10) 1.4px 2px, transparent 2.4px 4px),
    conic-gradient(from 18deg at 50% 50%, #eef1f7, #cfe9e0 12%, #ececf5 25%, #e0cff7 38%, #eef2f8 51%, #cbdcf6 64%, #ead6f4 79%, #f4f5f8 100%) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-holo,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-scratch-active .profile-card-spin-back .profile-card-back-label {
  display: none !important;
}

/* REVEALED / OWNER CARD: backside is exactly the copied profile background and
   nothing else. This rule intentionally wins over every older foil rule. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back {
  background: transparent !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-background {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  filter: none !important;
  border-radius: var(--card-physical-radius) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-foil-canvas,
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-holo,
:is(#profileCardSection, [data-card-part="profileCardSection"]):not(.card-scratch-active) .profile-card-spin-back .profile-card-back-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Keep the edge behind both faces; it should be visible only where perspective
   exposes the side wall, never painted over the face content. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-thickness { z-index: 0 !important; }
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-front { z-index: 2 !important; }

/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 25                            */
/* Collections + connection Top 7 + full-surface grab + exact mood hexagon. */
/* Visible app version remains v3.65.                                         */
/* ========================================================================== */

/* The main Card tab wrapper must retain the same flex geometry the original
   Mood / Top 7 / Signature stack had before tabs were introduced. */
:is(#profileCardMainPanel, [data-card-part="profileCardMainPanel"]).profile-card-tab-panel {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 14px;
}
:is(#profileCardMainPanel, [data-card-part="profileCardMainPanel"]).hidden,
:is(#profileCardCollectionPanel, [data-card-part="profileCardCollectionPanel"]).hidden,
:is(#profileCardTabs, [data-card-part="profileCardTabs"]).hidden,
:is(#profileCardCollectionViewer, [data-card-part="profileCardCollectionViewer"]).hidden {
  display: none !important;
}

.profile-card-tabs {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 66%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.08);
}
.profile-card-tabs button {
  min-height: 30px !important;
  padding: 6px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--secondary-text) !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.profile-card-tabs button.active {
  background: color-mix(in srgb, var(--primary) 18%, var(--card)) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 34%, transparent) !important;
}
:is(#profileCardCollectionCount, [data-card-part="profileCardCollectionCount"]) { opacity: .72; margin-left: 2px; }

/* Collect lives on the exact same header axis as Edit Card. It stays hidden
   until another person's scratch layer is actually gone. */
.profile-card-collect {
  margin-left: auto;
  min-height: 34px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.profile-card-collect.is-busy { opacity: .68; }

.profile-card-collection-panel {
  position: relative;
  z-index: 4;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding: 13px 12px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 30px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  -webkit-backdrop-filter: blur(15px) saturate(1.08);
  backdrop-filter: blur(15px) saturate(1.08);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 8px 24px rgba(0,0,0,.08);
}
.profile-card-collection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 8px;
}
.profile-card-collection-heading strong { font-size: 12px; font-weight: 850; }
.profile-card-collection-heading span { color: var(--secondary-text); font-size: 10px; font-weight: 750; }
.profile-card-collection-empty { margin: auto; color: var(--secondary-text); font-size: 12px; text-align: center; }
.profile-card-collection-shelf {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 240px;
  align-items: center;
  justify-content: center;
}
.profile-card-collection-stack {
  position: relative;
  width: min(100%, 430px);
  height: min(100%, 330px);
  min-height: 230px;
}
.profile-card-collection-preview-shell {
  position: absolute;
  top: 50%;
  width: min(45%, 178px) !important;
  aspect-ratio: .66;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-origin: 50% 70%;
  -webkit-tap-highlight-color: transparent;
}
.profile-card-collection-preview-shell:nth-child(1) { left: 3%; transform: translateY(-50%) rotate(-5deg); z-index: 1; }
.profile-card-collection-preview-shell:nth-child(2) { left: 27.5%; transform: translateY(-50%) rotate(0deg); z-index: 2; }
.profile-card-collection-preview-shell:nth-child(3) { left: 52%; transform: translateY(-50%) rotate(5deg); z-index: 3; }
.profile-card-collection-preview-shell:active:nth-child(1) { transform: translateY(-50%) rotate(-5deg) scale(.96); }
.profile-card-collection-preview-shell:active:nth-child(2) { transform: translateY(-50%) scale(.96); }
.profile-card-collection-preview-shell:active:nth-child(3) { transform: translateY(-50%) rotate(5deg) scale(.96); }
.profile-card-collection-preview-loading,
.profile-card-collection-slide-loading {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--card) 84%, transparent);
  color: var(--secondary-text);
  font-size: 11px;
  font-weight: 800;
}
.profile-card-collection-more {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 48px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--primary) 22%, var(--card)) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

/* Static collected cards deliberately have no perspective/3D transforms. They
   are light DOM snapshots of the current Card, with lazy-loaded images/design. */
.profile-card-static {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: inherit;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  text-align: left;
}
.profile-card-static-background,
.profile-card-static-gallery,
.profile-card-static-vignette {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.profile-card-static-background { z-index: 0; background: var(--card); }
.profile-card-static-gallery { z-index: 1; }
.profile-card-static-vignette {
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.05), transparent 28%, transparent 72%, rgba(0,0,0,.10));
}
.profile-card-static-overlay {
  position: absolute;
  left: calc(var(--overlay-x, 50) * 1%);
  top: calc(var(--overlay-y, 50) * 1%);
  width: calc(var(--overlay-size, 20) * 1%);
  aspect-ratio: 1;
  color: var(--overlay-color, #fff);
  transform: translate(-50%, -50%) rotate(var(--overlay-rotation, 0deg)) scaleX(var(--overlay-flip-x, 1));
  transform-origin: 50% 50%;
  opacity: .92;
}
.profile-card-static-overlay .plus-overlay-art { width: 100%; height: 100%; display: block; }
.profile-card-static-gallery-image {
  position: absolute;
  left: var(--card-gallery-x, 5%);
  top: var(--card-gallery-y, 12%);
  width: var(--card-gallery-size, 22%);
  aspect-ratio: var(--card-gallery-ratio, 1 / 1);
  object-fit: cover;
  border-radius: 12%;
  opacity: .34;
  transform: rotate(var(--card-gallery-rotation, 0deg));
}
.profile-card-static-content {
  position: relative;
  z-index: 4;
  display: flex;
  box-sizing: border-box;
  height: 100%;
  flex-direction: column;
  gap: 3.2%;
  padding: 5.4% 5.8% 5%;
}
.profile-card-static-content > header { display: flex; align-items: center; gap: 3%; min-height: 8%; }
.profile-card-static-content > header strong { min-width: 0; overflow: hidden; font-size: clamp(7px, 2.5cqw, 14px); font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.profile-card-static-avatar {
  display: grid;
  place-items: center;
  width: 11%;
  aspect-ratio: 1;
  flex: 0 0 auto;
  object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 22%, var(--card));
  font-size: clamp(7px, 2cqw, 12px);
  font-weight: 850;
}
.profile-card-static-pronouns { min-height: 3%; color: var(--text); font-size: clamp(5px, 1.8cqw, 9px); font-weight: 780; text-align: center; text-shadow: 0 1px 5px rgba(0,0,0,.24); }
.profile-card-static-mood,
.profile-card-static-top7,
.profile-card-static-signature {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10% / 20%;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.profile-card-static-mood,
.profile-card-static-top7 { padding: 3.5%; }
.profile-card-static-mood > div:first-child,
.profile-card-static-top7 > div:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3%; font-size: clamp(5px, 1.7cqw, 9px); }
.profile-card-static-mood > div:first-child span,
.profile-card-static-top7 > div:first-child span { opacity: .65; }
.profile-card-static-mood-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1%; }
.profile-card-static-mood-day { display: grid; justify-items: center; gap: 1px; }
.profile-card-static-mood-day b { font-size: clamp(4px, 1.3cqw, 7px); }
.profile-card-static-mood-day i { display: grid; width: 68%; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; }
.profile-card-static-mood-day i.has-mood { border: 0; color: var(--primary); }
.profile-card-static-mood-day i svg { width: 100%; height: 100%; }
.profile-card-static-mood-day i svg .mood-solid { fill: currentColor; }
.profile-card-static-mood-day i svg .mood-highlight { fill: rgba(255,255,255,.2); }
.profile-card-static-mood-day i svg .mood-eye { fill: rgba(0,0,0,.78); }
.profile-card-static-mood-day i svg .mood-detail,
.profile-card-static-mood-day i svg .mood-tongue { fill: none; stroke: rgba(0,0,0,.78); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.profile-card-static-people { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 2%; min-height: 11%; }
.profile-card-static-person { display: grid; min-width: 0; justify-items: center; gap: 2px; }
.profile-card-static-person .profile-card-static-avatar { width: 90%; }
.profile-card-static-person small { width: 100%; overflow: hidden; font-size: clamp(3px, 1.1cqw, 6px); font-weight: 780; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.profile-card-static-empty { grid-column: 1/-1; align-self: center; opacity: .62; font-size: clamp(5px, 1.6cqw, 9px); text-align: center; }
.profile-card-static-signature { margin-top: auto; padding: 3.2%; text-align: center; }
.profile-card-static-signature span { display: block; opacity: .62; font-size: clamp(4px, 1.2cqw, 7px); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.profile-card-static-signature strong { display: block; margin-top: 1%; font-size: clamp(6px, 2cqw, 11px); }
.profile-card-static.is-shelf { container-type: inline-size; }

/* Full collection browser: same profile-sized shell, horizontal snap, zero 3D. */
.profile-modal.profile-card-collection-active {
  overflow: hidden !important;
  perspective: none !important;
  transform-style: flat !important;
}
.profile-card-collection-viewer {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: var(--profile-card-height, 520px);
  overflow: hidden;
  border-radius: inherit;
  background: color-mix(in srgb, var(--card) 94%, transparent);
}
.profile-card-collection-viewer-header {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 11px;
  padding: 13px 62px 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
#closeProfileCardCollectionViewer {
  display: grid;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  place-items: center;
  border-radius: 50% !important;
  font-size: 30px !important;
  line-height: 1 !important;
}
.profile-card-collection-viewer-header > div { min-width: 0; }
.profile-card-collection-viewer-header h2 { margin: 0; overflow: hidden; font-size: 19px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
:is(#profileCardCollectionViewerProgress, [data-card-part="profileCardCollectionViewerProgress"]) { display: block; margin-top: 3px; color: var(--secondary-text); font-size: 10px; font-weight: 760; }
.profile-card-collection-track {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 64px);
  gap: 18px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 18px 8%;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.profile-card-collection-track::-webkit-scrollbar { display: none; }
.profile-card-collection-slide {
  display: grid;
  height: min(100%, 720px);
  aspect-ratio: .66;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: clamp(28px, 5vw, 42px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  container-type: inline-size;
}
.profile-card-collection-slide > .profile-card-static { width: 100%; height: 100%; }

/* Full-surface 3D grab safety net. Safari can occasionally hit-test through a
   transformed back face. JS proxies pointer-down from the projected Card box;
   disable browser panning while a manual grab is active. */
.profile-modal.profile-card-active:has(:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab) {
  touch-action: none !important;
}

/* Exact six-point geometry: these centers are a mathematical regular hexagon
   in a square orbit (R=36%). No hand-tuned left/right drift. */
#cardMoodModal {
  --mood-ring-size: min(76vw, 42vh, 440px);
  --mood-ring-top: 30.5%;
}
#cardMoodModal .card-mood-choice-orbit {
  top: var(--mood-ring-top) !important;
  left: 50% !important;
  width: var(--mood-ring-size) !important;
  height: var(--mood-ring-size) !important;
  aspect-ratio: 1 / 1 !important;
  transform: translateX(-50%) !important;
}
#cardMoodModal .card-mood-choice {
  right: auto !important;
  bottom: auto !important;
  translate: none !important;
  transform: translate(-50%, -50%) !important;
}
#cardMoodModal .card-mood-choice-happy     { left: 50% !important;   top: 14% !important; }
#cardMoodModal .card-mood-choice-sad       { left: 18.823% !important; top: 32% !important; }
#cardMoodModal .card-mood-choice-silly     { left: 81.177% !important; top: 32% !important; }
#cardMoodModal .card-mood-choice-bored     { left: 18.823% !important; top: 68% !important; }
#cardMoodModal .card-mood-choice-surprised { left: 81.177% !important; top: 68% !important; }
#cardMoodModal .card-mood-choice-wink      { left: 50% !important;   top: 86% !important; }
#cardMoodModal .card-mood-choice:active,
#cardMoodModal .card-mood-choice.is-selected {
  transform: translate(-50%, -50%) scale(.90) !important;
}
#cardMoodModal .card-mood-gate-week {
  top: calc(var(--mood-ring-top) + var(--mood-ring-size) + 28px) !important;
  bottom: auto !important;
}
@media (max-height: 760px) {
  #cardMoodModal {
    --mood-ring-size: min(72vw, 38vh, 320px);
    --mood-ring-top: 29%;
  }
  #cardMoodModal .card-mood-gate-week {
    top: calc(var(--mood-ring-top) + var(--mood-ring-size) + 18px) !important;
  }
}
.profile-card-collection-preview-shell {
  height: auto !important;
  max-height: none !important;
}


/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 26                            */
/* Collection geometry / viewer / interaction repair. Visible v3.65.         */
/* ========================================================================== */

/* Collect is the OTHER-USER equivalent of Edit Card, so the two controls use
   the same exact header slot. Only JS decides which one is visible. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-collect,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-owner-edit {
  position: absolute !important;
  z-index: 14 !important;
  top: 13px !important;
  right: 61px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-collect:not(.hidden),
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-owner-edit:not(.hidden) {
  display: inline-flex !important;
}

/* Collection mode is a static showcase. The outer physical Card must not tilt,
   hover, compress, or drift while the cursor/finger is interacting with it. */
:is(#profileCardSection, [data-card-part="profileCardSection"]):has(:is(#profileCardCollectionPanel, [data-card-part="profileCardCollectionPanel"]):not(.hidden)) {
  --card-manual-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
}
:is(#profileCardCollectionPanel, [data-card-part="profileCardCollectionPanel"]),
:is(#profileCardCollectionShelf, [data-card-part="profileCardCollectionShelf"]),
.profile-card-collection-preview-shell {
  touch-action: manipulation !important;
}

/* The shelf shows the SAME card shape as the live profile Card. Beta25 forced
   every preview to portrait .66, which is why desktop cards became capsules. */
.profile-card-collection-shelf {
  min-height: 0 !important;
  padding: 4px 2px 8px;
}
.profile-card-collection-stack {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(7px, 2.2vw, 13px) !important;
}
.profile-card-collection-preview-shell {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  flex: 0 1 auto !important;
  width: min(31%, 210px) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: var(--collection-card-aspect, .72) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--collection-card-radius, 18px) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  container-type: inline-size;
}
.profile-card-collection-stack[data-count="1"] .profile-card-collection-preview-shell { width: min(58%, 330px) !important; }
.profile-card-collection-stack[data-count="2"] .profile-card-collection-preview-shell { width: min(43%, 260px) !important; }
.profile-card-collection-preview-shell:nth-child(1),
.profile-card-collection-preview-shell:nth-child(2),
.profile-card-collection-preview-shell:nth-child(3),
.profile-card-collection-preview-shell:active:nth-child(1),
.profile-card-collection-preview-shell:active:nth-child(2),
.profile-card-collection-preview-shell:active:nth-child(3),
.profile-card-collection-preview-shell:hover {
  left: auto !important;
  transform: none !important;
}

/* Static snapshots now use the real Card's rounded language. No percentage
   ellipse radii, no pill-shaped content panels. */
.profile-card-static {
  container-type: inline-size !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  transform: none !important;
}
.profile-card-static-background,
.profile-card-static-gallery,
.profile-card-static-vignette {
  border-radius: inherit !important;
}
.profile-card-static-mood,
.profile-card-static-top7,
.profile-card-static-signature {
  border-radius: clamp(9px, 5.8cqw, 30px) !important;
}
.profile-card-static-gallery-image {
  border-radius: clamp(5px, 4cqw, 22px) !important;
}
.profile-card-static-avatar { border-radius: 50% !important; }

/* Full collection viewer: stable header, no random global button geometry,
   explicit slide size from JS, and horizontal-only scrolling. */
.profile-card-collection-viewer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: color-mix(in srgb, var(--card) 96%, transparent) !important;
}
.profile-card-collection-viewer-header {
  position: relative !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0,1fr) 52px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  align-items: center !important;
  padding: 0 8px !important;
}
#closeProfileCardCollectionViewer {
  position: static !important;
  grid-column: 1 !important;
  justify-self: start !important;
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border-radius: 50% !important;
  transform: none !important;
  font-size: 28px !important;
  line-height: 1 !important;
}
.profile-card-collection-viewer-header > div {
  grid-column: 2 !important;
  min-width: 0 !important;
  text-align: center !important;
}
.profile-card-collection-viewer-header h2 { font-size: 17px !important; }
.profile-card-collection-track {
  box-sizing: border-box !important;
  height: calc(100% - 64px) !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 13px 17px 17px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  touch-action: pan-x !important;
}
.profile-card-collection-slide {
  position: relative !important;
  display: grid !important;
  flex: 0 0 auto !important;
  width: 280px;
  height: 400px;
  max-width: none !important;
  max-height: none !important;
  place-items: stretch !important;
  overflow: hidden !important;
  border-radius: var(--collection-card-radius, 28px) !important;
  scroll-snap-align: center !important;
  transform: none !important;
  container-type: inline-size;
}
.profile-card-collection-slide > .profile-card-static {
  width: 100% !important;
  height: 100% !important;
}
.profile-card-collection-slide-loading {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 7px !important;
  place-content: center !important;
  justify-items: center !important;
  border-radius: inherit !important;
}
.profile-card-collection-slide-loading > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 22%, var(--card));
  font-weight: 850;
}
.profile-card-collection-slide-loading > strong { font-size: 12px; }

@media (max-width: 520px) {
  .profile-card-collection-stack { gap: 7px !important; }
  .profile-card-collection-preview-shell { width: 31.5% !important; }
  .profile-card-collection-stack[data-count="1"] .profile-card-collection-preview-shell { width: 62% !important; }
  .profile-card-collection-stack[data-count="2"] .profile-card-collection-preview-shell { width: 45% !important; }
}


/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 27                            */
/* Collection reconstruction: exact Card geometry + deterministic carousel.  */
/* Visible version remains v3.65.                                             */
/* ========================================================================== */

/* Restore the header axis that was correct before Beta 26. The Card content
   begins 10px from the physical face, so top:0 in the 40px header lines the
   action pill up exactly with the attached 40px X at face top:10px. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-header {
  position: relative !important;
  height: 40px !important;
  min-height: 40px !important;
  padding-right: 166px !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-owner-edit,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-collect {
  position: absolute !important;
  top: 0 !important;
  right: 50px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-owner-edit:not(.hidden),
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-collect:not(.hidden) {
  display: inline-flex !important;
}

/* Collection mode is not a physical interaction surface. Freeze the parent
   Card in JS + CSS and remove all hover/press transforms from snapshots. */
:is(#profileCardSection, [data-card-part="profileCardSection"]).profile-card-static-mode {
  --card-manual-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
}
.profile-card-collection-preview-shell,
.profile-card-collection-preview-shell:hover,
.profile-card-collection-preview-shell:active,
.profile-card-collection-preview-shell:focus,
.profile-card-collection-preview-shell:focus-visible,
.profile-card-collection-slide,
.profile-card-collection-slide:hover,
.profile-card-collection-slide:active {
  transform: none !important;
  translate: none !important;
  transition: none !important;
}
.profile-card-collection-preview-shell {
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none;
  touch-action: manipulation !important;
}
.profile-card-collection-preview-shell:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 72%, white) !important;
}

/* Shape comes from :is(#profileCardFrontFace, [data-card-part="profileCardFrontFace"]), not the modal stage. JS writes an
   exact scaled pixel radius/aspect to these variables. */
.profile-card-collection-preview-shell,
.profile-card-collection-slide,
.profile-card-static {
  border-radius: var(--collection-card-radius, 22px) !important;
}
.profile-card-collection-preview-shell,
.profile-card-collection-slide {
  aspect-ratio: var(--collection-card-aspect, .65) !important;
}
.profile-card-static {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* The static snapshot is a scaled Card, not an oval thumbnail. Keep the same
   hierarchy visible: Card name, pronouns, Mood, Top 7, Signature. */
.profile-card-static-content {
  gap: 2.7% !important;
  padding: 4.2% 4.5% 4.4% !important;
}
.profile-card-static-content > header {
  min-height: 8.5% !important;
  gap: 2.6% !important;
}
.profile-card-static-content > header strong {
  font-size: clamp(8px, 4.1cqw, 16px) !important;
  line-height: 1.05 !important;
}
.profile-card-static-avatar {
  width: 10.5% !important;
}
.profile-card-static-pronouns {
  min-height: 3.5% !important;
  font-size: clamp(6px, 2.7cqw, 11px) !important;
  line-height: 1.1 !important;
}
.profile-card-static-mood,
.profile-card-static-top7,
.profile-card-static-signature {
  border-radius: clamp(9px, 4.4cqw, 24px) !important;
}
.profile-card-static-mood,
.profile-card-static-top7 { padding: 3.2% !important; }
.profile-card-static-mood > div:first-child,
.profile-card-static-top7 > div:first-child {
  font-size: clamp(5px, 2.05cqw, 10px) !important;
}
.profile-card-static-person small {
  font-size: clamp(4px, 1.45cqw, 7px) !important;
}
.profile-card-static-signature strong {
  font-size: clamp(6px, 2.35cqw, 12px) !important;
}

/* The carousel now lives INSIDE the front physical Card. It can no longer
   disappear when the modal shell is transparent, and the normal attached X
   remains in its proper top-right Card position. */
:is(#profileCardFrontFace, [data-card-part="profileCardFrontFace"]) > .profile-card-collection-viewer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 72 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: color-mix(in srgb, var(--card) 97%, #000 3%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.05);
  backdrop-filter: blur(22px) saturate(1.05);
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).profile-card-collection-viewing .profile-card-spin-gloss {
  display: none !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).profile-card-collection-viewing > .profile-card-spin-front {
  pointer-events: auto !important;
}
.profile-card-collection-viewer-header {
  position: relative !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: 50px minmax(0,1fr) 50px !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 10px 10px 0 !important;
  align-items: center !important;
  border-bottom: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#closeProfileCardCollectionViewer {
  position: static !important;
  grid-column: 1 !important;
  justify-self: start !important;
  display: grid !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: 29px !important;
  line-height: 1 !important;
  transform: none !important;
}
.profile-card-collection-viewer-header > div {
  grid-column: 2 !important;
  min-width: 0 !important;
  text-align: center !important;
}
.profile-card-collection-viewer-header h2 {
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
:is(#profileCardCollectionViewerProgress, [data-card-part="profileCardCollectionViewerProgress"]) {
  margin-top: 2px !important;
  font-size: 10px !important;
}
.profile-card-collection-track {
  display: flex !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: calc(100% - 60px) !important;
  gap: 16px !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 10px 16px 18px !important;
  scroll-snap-type: x mandatory !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
}
.profile-card-collection-slide {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
  container-type: inline-size;
}
.profile-card-collection-slide > .profile-card-static {
  width: 100% !important;
  height: 100% !important;
}

/* Keep the real attached X above the collection viewer. */
:is(#profileCardFrontFace, [data-card-part="profileCardFrontFace"]) > #closeProfileButton.profile-card-attached-close {
  z-index: 96 !important;
}

@media (max-width: 520px) {
  .profile-card-collection-shelf { padding-inline: 0 !important; }
  .profile-card-collection-stack[data-count="1"] .profile-card-collection-preview-shell { width: 52% !important; }
  .profile-card-collection-stack[data-count="2"] .profile-card-collection-preview-shell { width: 42% !important; }
  .profile-card-collection-stack[data-count="3"] .profile-card-collection-preview-shell { width: 30% !important; }
}

/* Mobile shelf: keep all three visible but large enough to still read as Cards.
   They overlap slightly instead of being squeezed into tiny 31% thumbnails. */
@media (max-width: 520px) {
  .profile-card-collection-stack[data-count="3"] {
    gap: 0 !important;
    overflow: visible !important;
  }
  .profile-card-collection-stack[data-count="3"] .profile-card-collection-preview-shell {
    width: 40% !important;
    flex: 0 0 40% !important;
    margin-left: -7.5% !important;
  }
  .profile-card-collection-stack[data-count="3"] .profile-card-collection-preview-shell:first-child {
    margin-left: 0 !important;
  }
  .profile-card-collection-stack[data-count="3"] .profile-card-collection-preview-shell:nth-child(1) { z-index: 1 !important; }
  .profile-card-collection-stack[data-count="3"] .profile-card-collection-preview-shell:nth-child(2) { z-index: 2 !important; }
  .profile-card-collection-stack[data-count="3"] .profile-card-collection-preview-shell:nth-child(3) { z-index: 3 !important; }
}


/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 28                            */
/* Free material + collection controls/scroll + adaptive mood layout. v3.65 */
/* ========================================================================== */

/* FREE CARD MATERIAL -------------------------------------------------------
   Plus/custom designs still win through their inline background styles. This
   is the default material underneath them, so free users get a deliberate
   textured Card instead of a flat var(--card) slab. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-background-layer,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-back-background,
.profile-card-static-background {
  background-color: color-mix(in srgb, var(--card) 94%, var(--primary) 6%);
  background-image:
    radial-gradient(ellipse at 16% 10%, color-mix(in srgb, var(--primary) 34%, transparent) 0%, transparent 38%),
    radial-gradient(ellipse at 88% 82%, color-mix(in srgb, #8f6cff 20%, transparent) 0%, transparent 42%),
    repeating-radial-gradient(circle at 112% -14%, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1.25px 8px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 3.2%, transparent) 0 1px, transparent 1px 7px),
    linear-gradient(145deg,
      color-mix(in srgb, var(--card) 88%, var(--primary) 12%) 0%,
      color-mix(in srgb, var(--card) 96%, #000 4%) 52%,
      color-mix(in srgb, var(--card) 88%, #6f59ff 12%) 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 15px 15px, 100% 100%;
  background-position: center;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}

/* COLLECTION BACK CONTROL -------------------------------------------------
   Use a normal vector chevron instead of a font glyph. Font metrics were why
   the old arrow looked off-centre and randomly thick on different browsers. */
.profile-card-collection-viewer-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 10px 60px 0 !important;
}
#closeProfileCardCollectionViewer {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--text) 23%, var(--border)) !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--card) 76%, transparent) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), 0 5px 16px rgba(0,0,0,.13) !important;
  line-height: 1 !important;
  transform: none !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
}
#closeProfileCardCollectionViewer svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
}
.profile-card-collection-viewer-header > div {
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
}

/* COLLECTION SCROLL --------------------------------------------------------
   Horizontal dragging still browses Cards, but vertical wheel/touch is free to
   bubble to the profile overlay/page. JS explicitly relays desktop wheel delta. */
.profile-card-collection-track {
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
}
.profile-card-collection-shelf {
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
}
.profile-card-collection-preview-shell {
  touch-action: pan-y !important;
}

/* MOOD PICKER --------------------------------------------------------------
   One geometry model for phones, tall phones and desktop: the ring size is
   limited by BOTH viewport axes, every face uses the same size, and all six
   centres are points on one regular hexagon. */
#cardMoodModal {
  --mood-ring-size: clamp(250px, min(76vw, 44dvh), 440px);
  --mood-ring-top: clamp(220px, 30dvh, 300px);
  --mood-face-size: clamp(82px, min(27vw, 15dvh), 118px);
  --mood-week-gap: clamp(18px, 3.2dvh, 30px);
}
#cardMoodModal .card-mood-title-wrap {
  top: clamp(120px, 18dvh, 180px) !important;
  width: min(92vw, 660px) !important;
}
#cardMoodModal .card-mood-title-wrap h2 {
  font-size: clamp(34px, min(8vw, 6.5dvh), 52px) !important;
  line-height: 1 !important;
}
#cardMoodModal .card-mood-choice-orbit {
  top: var(--mood-ring-top) !important;
  left: 50% !important;
  width: var(--mood-ring-size) !important;
  height: var(--mood-ring-size) !important;
  aspect-ratio: 1 / 1 !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}
#cardMoodModal .card-mood-choice {
  right: auto !important;
  bottom: auto !important;
  width: var(--mood-face-size) !important;
  height: var(--mood-face-size) !important;
  translate: none !important;
  transform: translate(-50%, -50%) !important;
}
/* Regular hexagon, radius 33% around centre (50%,50%). */
#cardMoodModal .card-mood-choice-happy     { left: 50% !important;      top: 17% !important; }
#cardMoodModal .card-mood-choice-silly     { left: 78.579% !important; top: 33.5% !important; }
#cardMoodModal .card-mood-choice-surprised { left: 78.579% !important; top: 66.5% !important; }
#cardMoodModal .card-mood-choice-wink      { left: 50% !important;      top: 83% !important; }
#cardMoodModal .card-mood-choice-bored     { left: 21.421% !important; top: 66.5% !important; }
#cardMoodModal .card-mood-choice-sad       { left: 21.421% !important; top: 33.5% !important; }
#cardMoodModal .card-mood-choice:active,
#cardMoodModal .card-mood-choice.is-selected {
  transform: translate(-50%, -50%) scale(.90) !important;
}
#cardMoodModal .card-mood-gate-week {
  top: calc(var(--mood-ring-top) + var(--mood-ring-size) + var(--mood-week-gap)) !important;
  bottom: auto !important;
  width: min(90vw, 560px) !important;
}

@media (max-height: 720px) {
  #cardMoodModal {
    --mood-ring-size: clamp(220px, min(70vw, 38dvh), 310px);
    --mood-ring-top: clamp(170px, 27dvh, 215px);
    --mood-face-size: clamp(68px, min(23vw, 13dvh), 94px);
    --mood-week-gap: 16px;
  }
  #cardMoodModal .card-mood-title-wrap {
    top: clamp(82px, 12.5dvh, 108px) !important;
  }
  #cardMoodModal .card-mood-title-wrap h2 {
    font-size: clamp(30px, min(7vw, 6dvh), 44px) !important;
  }
}

@media (max-width: 430px) and (min-height: 721px) {
  #cardMoodModal {
    --mood-ring-size: min(76vw, 330px);
    --mood-face-size: clamp(88px, 27vw, 108px);
  }
}

/* ========================================================================== */
/* Project Yapper 465 — Private Developer Beta 29                            */
/* Exact collection Cards + collection navigation + stable low-cost 3D.      */
/* Visible app version remains v3.65.                                        */
/* ========================================================================== */

/* COLLECTION CARDS = THE REAL CARD STRUCTURE -------------------------------
   Beta 25–28 had a separately-designed thumbnail component. That drifted from
   the actual Card every time the real Card changed. Beta 29 uses the exact
   live Card classes inside a flattened snapshot, and only scales the geometry. */
.profile-card-static.profile-card-static-exact {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)) !important;
  border-radius: var(--collection-card-radius, var(--card-physical-radius, 34px)) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  isolation: isolate !important;
  container-type: inline-size;
  box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
}
.profile-card-static-exact > .profile-card-background-layer,
.profile-card-static-exact > .profile-card-gallery-layer,
.profile-card-static-exact > .profile-card-vignette {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.profile-card-static-exact > .profile-card-background-layer { z-index: 0 !important; }
.profile-card-static-exact > .profile-card-gallery-layer { z-index: 1 !important; }
.profile-card-static-exact > .profile-card-vignette { z-index: 2 !important; }
.profile-card-static-exact .profile-card-static-content {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  flex-direction: column !important;
  padding: clamp(7px, 2.7cqw, 12px) !important;
}
.profile-card-static-exact .profile-card-static-header {
  display: flex !important;
  min-height: clamp(28px, 8.5cqw, 40px) !important;
  height: clamp(28px, 8.5cqw, 40px) !important;
  gap: clamp(5px, 2cqw, 9px) !important;
  align-items: center !important;
  padding-right: 0 !important;
}
.profile-card-static-exact .profile-card-static-header-avatar,
.profile-card-static-exact .profile-card-static-header-avatar > .profile-avatar,
.profile-card-static-exact .profile-card-static-header-avatar > .profile-avatar.is-cd-avatar {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 clamp(28px, 8.5cqw, 40px) !important;
  width: clamp(28px, 8.5cqw, 40px) !important;
  min-width: clamp(28px, 8.5cqw, 40px) !important;
  max-width: clamp(28px, 8.5cqw, 40px) !important;
  height: clamp(28px, 8.5cqw, 40px) !important;
  min-height: clamp(28px, 8.5cqw, 40px) !important;
  max-height: clamp(28px, 8.5cqw, 40px) !important;
  margin: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
}
.profile-card-static-exact .profile-card-heading-copy {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.profile-card-static-exact .profile-card-static-title {
  margin: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--text) !important;
  font-size: clamp(11px, 4.15cqw, 22px) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.profile-card-static-exact .profile-card-static-body {
  position: relative !important;
  display: flex !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: clamp(6px, 2.7cqw, 14px) !important;
  padding-top: clamp(9px, 4.3cqw, 24px) !important;
}
.profile-card-static-exact .profile-card-static-pronouns {
  align-self: center !important;
  min-height: 0 !important;
  margin: clamp(-4px, -1cqw, -1px) 0 0 !important;
  color: #fff !important;
  font-size: clamp(6px, 2.35cqw, 13px) !important;
  font-weight: 760 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.24) !important;
  mix-blend-mode: difference !important;
}
.profile-card-static-exact .profile-card-mood-panel,
.profile-card-static-exact .profile-card-top7-panel,
.profile-card-static-exact .profile-card-signature-panel {
  position: relative !important;
  z-index: 4 !important;
  box-sizing: border-box !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
  background: color-mix(in srgb, var(--card) 74%, transparent) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 5px 16px rgba(0,0,0,.08) !important;
}
.profile-card-static-exact .profile-card-mood-panel {
  padding: clamp(6px, 2.4cqw, 11px) clamp(7px, 2.6cqw, 12px) !important;
  border-radius: clamp(14px, 5.2cqw, 24px) !important;
}
.profile-card-static-exact .profile-card-top7-panel {
  padding: clamp(7px, 2.7cqw, 13px) clamp(7px, 2.6cqw, 12px) !important;
  border-radius: clamp(15px, 5.7cqw, 28px) !important;
}
.profile-card-static-exact .profile-card-signature-panel {
  margin-top: auto !important;
  padding: clamp(6px, 2.7cqw, 12px) clamp(8px, 3.4cqw, 16px) !important;
  border-radius: clamp(14px, 5.2cqw, 24px) !important;
  text-align: center !important;
}
.profile-card-static-exact .profile-card-section-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: clamp(4px, 1.7cqw, 8px) !important;
}
.profile-card-static-exact .profile-card-section-heading strong {
  font-size: clamp(6px, 2.3cqw, 12px) !important;
  font-weight: 850 !important;
}
.profile-card-static-exact .profile-card-section-heading span {
  font-size: clamp(5px, 1.9cqw, 10px) !important;
  font-weight: 750 !important;
}
.profile-card-static-exact .profile-card-mood-week {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0,1fr)) !important;
  gap: clamp(2px, 1.2cqw, 6px) !important;
}
.profile-card-static-exact .profile-card-mood-day { gap: clamp(2px, 1cqw, 5px) !important; }
.profile-card-static-exact .profile-card-mood-day-label { font-size: clamp(4px, 1.7cqw, 9px) !important; }
.profile-card-static-exact .profile-card-mood-dot {
  width: clamp(14px, 5.4cqw, 28px) !important;
  min-width: clamp(14px, 5.4cqw, 28px) !important;
  height: clamp(14px, 5.4cqw, 28px) !important;
  min-height: clamp(14px, 5.4cqw, 28px) !important;
}
.profile-card-static-exact .profile-card-mood-dot svg { width: 100% !important; height: 100% !important; }
.profile-card-static-exact .profile-card-mood-dot.is-empty {
  width: clamp(10px, 3.8cqw, 20px) !important;
  min-width: clamp(10px, 3.8cqw, 20px) !important;
  height: clamp(10px, 3.8cqw, 20px) !important;
  min-height: clamp(10px, 3.8cqw, 20px) !important;
  margin-top: clamp(2px, .8cqw, 4px) !important;
  border-width: clamp(1px, .38cqw, 2px) !important;
}
.profile-card-static-exact .profile-card-top7 {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0,1fr)) !important;
  gap: clamp(2px, 1.4cqw, 7px) !important;
}
.profile-card-static-exact .profile-card-person {
  display: grid !important;
  min-width: 0 !important;
  justify-items: center !important;
  gap: clamp(2px, 1cqw, 5px) !important;
}
.profile-card-static-exact .profile-card-person .profile-avatar,
.profile-card-static-exact .profile-card-person .profile-avatar.is-cd-avatar {
  width: clamp(18px, 7cqw, 48px) !important;
  min-width: clamp(18px, 7cqw, 48px) !important;
  max-width: clamp(18px, 7cqw, 48px) !important;
  height: clamp(18px, 7cqw, 48px) !important;
  min-height: clamp(18px, 7cqw, 48px) !important;
  max-height: clamp(18px, 7cqw, 48px) !important;
  margin: 0 !important;
  border-radius: 50% !important;
}
.profile-card-static-exact .profile-card-person-name {
  width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(4px, 1.7cqw, 9px) !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.profile-card-static-exact .profile-card-top7-empty {
  margin: clamp(2px, 1cqw, 4px) 0 !important;
  font-size: clamp(6px, 2.2cqw, 12px) !important;
}
.profile-card-static-exact .profile-card-signature-label {
  margin-bottom: clamp(2px, .8cqw, 4px) !important;
  font-size: clamp(4px, 1.7cqw, 9px) !important;
}
.profile-card-static-exact .profile-card-static-signature-text {
  margin: 0 !important;
  font-size: clamp(7px, 2.7cqw, 14px) !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}
.profile-card-static-exact .profile-card-gallery-image {
  max-width: none !important;
  border-radius: clamp(7px, 2.8cqw, 25px) !important;
}
.profile-card-static-exact .profile-card-static-overlay {
  position: absolute !important;
  left: calc(var(--overlay-x) * 1%) !important;
  top: calc(var(--overlay-y) * 1%) !important;
  width: var(--overlay-size) !important;
  aspect-ratio: 1 / 1 !important;
  transform: translate(-50%, -50%) rotate(var(--overlay-rotation)) scaleX(var(--overlay-flip-x, 1)) !important;
  pointer-events: none !important;
}

/* Collection snapshots are intentionally flat. Never inherit the live Card's
   3D transform, hover, press scale, CD rotation, or glossy compositor. */
.profile-card-collection-preview-shell,
.profile-card-collection-slide,
.profile-card-static-exact {
  transform-style: flat !important;
  -webkit-transform-style: flat !important;
  will-change: auto !important;
}
.profile-card-static-exact .is-cd-avatar,
.profile-card-static-exact .cd-avatar-disc,
.profile-card-static-exact .cd-avatar-rotator {
  animation: none !important;
  transform: none !important;
}

/* COLLECTION SIDE SCROLL --------------------------------------------------- */
.profile-card-collection-track {
  cursor: grab !important;
  touch-action: pan-x pan-y !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}
.profile-card-collection-track.is-pointer-dragging {
  cursor: grabbing !important;
  scroll-snap-type: none !important;
  user-select: none !important;
}
.profile-card-collection-track::-webkit-scrollbar { display: none !important; }
.profile-card-collection-slide { flex: 0 0 auto !important; }

/* CARD STABILITY -----------------------------------------------------------
   The old document-wide projected-rectangle hit proxy has been removed in JS.
   Both physical faces receive input directly. While hand-spinning, temporarily
   replace expensive live backdrop filters/animations with compositor-cheap
   equivalents. This prevents Mobile Safari from exhausting the GPU process. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-front,
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-spin-back {
  pointer-events: auto !important;
  touch-action: none !important;
  contain: paint style !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab .profile-card-mood-panel,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab .profile-card-top7-panel,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab .profile-card-signature-panel,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab .profile-card-tabs,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-returning .profile-card-mood-panel,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-returning .profile-card-top7-panel,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-returning .profile-card-signature-panel,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-returning .profile-card-tabs {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: color-mix(in srgb, var(--card) 86%, transparent) !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab .profile-card-gallery-image,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-returning .profile-card-gallery-image {
  filter: none !important;
  box-shadow: none !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab .is-cd-avatar,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab .cd-avatar-disc,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab .cd-avatar-rotator,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-returning .is-cd-avatar,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-returning .cd-avatar-disc,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-returning .cd-avatar-rotator {
  animation-play-state: paused !important;
}
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-grab .profile-card-spin-gloss,
:is(#profileCardSection, [data-card-part="profileCardSection"]).card-manual-returning .profile-card-spin-gloss {
  filter: none !important;
  mix-blend-mode: screen !important;
}

/* Questions are ordinary Yaps now. Keep the legacy editor nodes in the DOM so
   old JS references stay safe, but remove the Question attachment entry. */
#addQuestionButton,
#questionSnippetFields {
  display: none !important;
}

/* Beta 29 GPU layer budget: five edge slices are enough to read as a thick
   physical card; the other four existed only to add compositor layers. */
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-thickness > i:nth-child(even) { display: none !important; }
:is(#profileCardSection, [data-card-part="profileCardSection"]) .profile-card-thickness > i:nth-child(odd) {
  border-width: 2px !important;
}


/* Source: styles-beta30-fixes.css */
/* Project 465 Beta 30 — shared geometry, bounded motion, Vocal Yaps. */
/* The pointer tip sits on the real profile avatar, outside its clipped image. */
#profileAvatarDisplay { position: relative; }
#profileAvatarDisplay > .profile-card-discovery-cursor {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 34px;
  z-index: 8; pointer-events: none; user-select: none;
  transform: translate(-4px, -3px); color: var(--primary, #5c77ff);
}
.profile-card-discovery-cursor svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: currentColor; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round;
  transform-origin: 4px 3px; animation: card-discovery-breathe 1.8s ease-in-out infinite;
}
@keyframes card-discovery-breathe {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .profile-card-discovery-cursor svg { animation: none; opacity: 1; }
}
#profileCardSection .profile-card-snapshot[data-card-part="profileCardSection"] {
  position: absolute !important; inset: 0 auto auto 0 !important;
  display: block !important; width: var(--snapshot-width) !important;
  height: var(--snapshot-height) !important; min-height: 0 !important;
  max-width: none !important; max-height: none !important; margin: 0 !important;
  padding: 0 !important; border: 0 !important;
  border-radius: var(--card-physical-radius) !important;
  transform: scale(var(--snapshot-scale)) !important; transform-origin: 0 0 !important;
  transform-style: flat !important; overflow: hidden !important;
  pointer-events: none !important; user-select: none !important;
  will-change: auto !important; animation: none !important; transition: none !important;
  contain: layout paint style;
}
#profileCardSection .profile-card-snapshot > .profile-card-spin-front {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  transform: none !important; transform-style: flat !important;
  visibility: visible !important; opacity: 1 !important;
  border-radius: inherit !important; pointer-events: none !important;
}
#profileCardSection .profile-card-snapshot *,
#profileCardSection .profile-card-snapshot *::before,
#profileCardSection .profile-card-snapshot *::after {
  animation: none !important; transition: none !important; will-change: auto !important;
}
#profileCardSection .profile-card-snapshot .profile-card-content {
  height: var(--snapshot-height) !important; min-height: 0 !important;
}
#profileCardSection .profile-card-snapshot .profile-card-header { padding-right: 0 !important; }
#profileCardSection .profile-card-snapshot .profile-card-heading-copy { display: flex !important; }
#profileCardSection .profile-card-collection-stack {
  display: flex !important; justify-content: center !important; align-items: center !important;
  gap: 12px !important; padding: 5px !important; overflow: visible !important;
}
#profileCardSection .profile-card-collection-stack .profile-card-collection-preview-shell {
  width: calc((100% - 24px) / 3) !important; flex: 0 0 auto !important;
  margin: 0 !important; max-width: none !important; min-width: 0 !important;
  border: 0 !important; overflow: hidden !important; container-type: normal !important;
  box-shadow: 0 5px 15px #0003 !important;
}
#profileCardSection .profile-card-collection-stack[data-count="1"] .profile-card-collection-preview-shell { width: 48% !important; }
#profileCardSection .profile-card-collection-stack[data-count="2"] .profile-card-collection-preview-shell { width: 42% !important; }
#profileCardSection .profile-card-collection-more-card {
  display: flex !important; flex-direction: column !important; justify-content: center !important;
  align-items: center !important; gap: 5px !important; color: white !important;
  background: linear-gradient(145deg, #728aff, #384daa) !important;
  border: 1px solid #a7b4ff !important;
}
.profile-card-collection-more-card strong { font-size: clamp(20px, 4vw, 36px); }
.profile-card-collection-more-card span { font-size: 11px; opacity: .8; }
#profileCardCollectionViewer { overscroll-behavior: contain !important; }
#profileCardCollectionTrack {
  overscroll-behavior: contain !important; touch-action: pan-x !important;
  scroll-snap-type: x proximity !important; scroll-behavior: auto !important;
}
#profileCardCollectionTrack .profile-card-collection-slide {
  position: relative !important; overflow: hidden !important; border: 0 !important;
}
#profileCardSection { will-change: auto !important; }
#profileCardSection:is(.card-manual-grab,.card-manual-returning) { will-change: transform !important; }
#profileCardSection .profile-card-spin-gloss { display: none !important; }
/* A flat face texture with one parent transform avoids nested iOS compositors. */
#profileCardSection:is(.card-manual-grab,.card-manual-returning) .profile-card-spin-face *,
#profileCardSection:is(.card-manual-grab,.card-manual-returning) .profile-card-spin-face *::before,
#profileCardSection:is(.card-manual-grab,.card-manual-returning) .profile-card-spin-face *::after {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  filter: none !important; mix-blend-mode: normal !important;
  animation-play-state: paused !important; will-change: auto !important; transform-style: flat !important;
}
@media (pointer: coarse) {
  #profileCardSection .profile-card-spin-face *,
  #profileCardSection .profile-card-spin-face *::before,
  #profileCardSection .profile-card-spin-face *::after {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    filter: none !important; mix-blend-mode: normal !important;
    will-change: auto !important; transform-style: flat !important;
  }
  #profileCardThickness > i { display: none !important; }
  #profileCardSection #profileCardThickness > i:nth-child(5) { display: block !important; }
  #profileCardSection .profile-card-gallery-image { transform: rotate(var(--card-gallery-rotation,0deg)) !important; }
}
/* Leave room inside the scrollport for the ring's negative inset. */
#yapFeed .yap-replies-scroll { padding: 8px 8px 8px 7px !important; }
#yapFeed .reply-entry, #yapFeed .reply-author-row,
#yapFeed .reply-author-row .avatar-profile-button { overflow: visible !important; }
@media (min-width: 701px) {
  #storyDialog { border-radius: var(--ui-radius-surface, 42px) !important; }
}
#composerAttachmentMenu { display: flex!important; max-height: min(70dvh,400px)!important; overflow-y:auto; flex-direction: column; gap: 6px !important; padding: 12px !important; height: auto !important; min-height: 0 !important; }
#composerAttachmentMenu.hidden { display: none !important; }
#composerAttachmentMenu .composer-attachment-menu-item:not(.hidden) { position: relative !important; margin: 0 !important; min-height: 44px !important; padding: 7px 8px !important; }

/* One inert profile document per editor; its viewport owns Phone/Desktop CSS. */
#plusProfilePreviewFrame { display:block; position:relative; z-index:2; border:0; height:700px; min-height:0; max-width:none!important; pointer-events:none; background:transparent; }
#plusProfileEditorModal .plus-preview-surface { background:transparent!important; padding:0!important; }
#plusProfileEditorModal .plus-preview-surface > #plusCanvasBackground { visibility:hidden; }
#plusProfileEditorModal .plus-preview-surface > #plusCanvasOverlays { z-index:4!important; }
#plusProfileEditorModal .plus-overlay-object > .plus-overlay-art { opacity:0; }
#plusProfileEditorModal .plus-preview-profile-shell { padding:0!important; min-height:0!important; border:0!important; }

#composerSnippetPreview { display:flex!important; flex-direction:column!important; gap:8px!important; border:0!important; background:none!important; padding:0!important; }
#composerSnippetPreview.hidden { display:none!important; }
#composerSnippetPreview > .composer-snippet-preview { width:100%; }
#vocalYapComposer { display:flex; align-items:center; gap:10px; padding:10px 12px; margin:10px 0; border:1px solid var(--border); border-radius:28px; background:var(--bubble); }
#vocalYapComposer.hidden { display:none!important; }
.vocal-record, .vocal-cancel { width:36px!important; height:36px!important; min-height:36px!important; padding:8px!important; border-radius:50%!important; display:grid!important; place-items:center; flex:0 0 36px; }
.vocal-record svg,.vocal-cancel svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.vocal-record.is-recording { color:#ff687c; background:color-mix(in srgb,#ff687c 14%,var(--card)); }
.vocal-record-label { flex:1; font-size:13px; }
#vocalYapTimer { font-variant-numeric:tabular-nums; font-size:12px; }
.vocal-yap-player.dm-voice-message-bubble { display:flex!important; align-items:center!important; gap:10px!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:10px 0!important; padding:10px 13px!important; border-radius:28px!important; background:color-mix(in srgb,var(--primary) 12%,var(--bubble))!important; }
#vocalYapComposer .vocal-yap-player { flex:1; margin:0!important; padding:0!important; background:transparent!important; border:0!important; }
.vocal-yap-player .dm-voice-play-button { width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important; flex:0 0 34px!important; }
.vocal-yap-player .dm-voice-wave-wrap { flex:1 1 auto!important; width:auto!important; min-width:30px!important; max-width:none!important; height:32px!important; }
.vocal-yap-player .dm-voice-wave-wrap::after { display:none!important; }
.vocal-yap-player .vocal-wave { display:block!important; position:absolute!important; inset:0!important; width:100%!important; height:32px!important; background:linear-gradient(to right,var(--primary) var(--vocal-progress,0%),color-mix(in srgb,var(--text) 40%,transparent) var(--vocal-progress,0%))!important;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2280%22%20height%3D%2232%22%3E%3Crect%20x%3D%220%22%20y%3D%2211.0%22%20width%3D%223%22%20height%3D%2210%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%225%22%20y%3D%227.0%22%20width%3D%223%22%20height%3D%2218%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2210%22%20y%3D%223.0%22%20width%3D%223%22%20height%3D%2226%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2215%22%20y%3D%229.0%22%20width%3D%223%22%20height%3D%2214%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2220%22%20y%3D%221.0%22%20width%3D%223%22%20height%3D%2230%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2225%22%20y%3D%226.0%22%20width%3D%223%22%20height%3D%2220%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2230%22%20y%3D%2210.0%22%20width%3D%223%22%20height%3D%2212%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2235%22%20y%3D%224.0%22%20width%3D%223%22%20height%3D%2224%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2240%22%20y%3D%227.5%22%20width%3D%223%22%20height%3D%2217%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2245%22%20y%3D%221.5%22%20width%3D%223%22%20height%3D%2229%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2250%22%20y%3D%229.5%22%20width%3D%223%22%20height%3D%2213%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2255%22%20y%3D%225.0%22%20width%3D%223%22%20height%3D%2222%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2260%22%20y%3D%2210.5%22%20width%3D%223%22%20height%3D%2211%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2265%22%20y%3D%222.5%22%20width%3D%223%22%20height%3D%2227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2270%22%20y%3D%228.0%22%20width%3D%223%22%20height%3D%2216%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2275%22%20y%3D%223.5%22%20width%3D%223%22%20height%3D%2225%22%20rx%3D%221.5%22/%3E%3C/svg%3E") repeat-x left center / 80px 32px; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2280%22%20height%3D%2232%22%3E%3Crect%20x%3D%220%22%20y%3D%2211.0%22%20width%3D%223%22%20height%3D%2210%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%225%22%20y%3D%227.0%22%20width%3D%223%22%20height%3D%2218%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2210%22%20y%3D%223.0%22%20width%3D%223%22%20height%3D%2226%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2215%22%20y%3D%229.0%22%20width%3D%223%22%20height%3D%2214%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2220%22%20y%3D%221.0%22%20width%3D%223%22%20height%3D%2230%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2225%22%20y%3D%226.0%22%20width%3D%223%22%20height%3D%2220%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2230%22%20y%3D%2210.0%22%20width%3D%223%22%20height%3D%2212%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2235%22%20y%3D%224.0%22%20width%3D%223%22%20height%3D%2224%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2240%22%20y%3D%227.5%22%20width%3D%223%22%20height%3D%2217%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2245%22%20y%3D%221.5%22%20width%3D%223%22%20height%3D%2229%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2250%22%20y%3D%229.5%22%20width%3D%223%22%20height%3D%2213%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2255%22%20y%3D%225.0%22%20width%3D%223%22%20height%3D%2222%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2260%22%20y%3D%2210.5%22%20width%3D%223%22%20height%3D%2211%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2265%22%20y%3D%222.5%22%20width%3D%223%22%20height%3D%2227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2270%22%20y%3D%228.0%22%20width%3D%223%22%20height%3D%2216%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2275%22%20y%3D%223.5%22%20width%3D%223%22%20height%3D%2225%22%20rx%3D%221.5%22/%3E%3C/svg%3E") repeat-x left center / 80px 32px;
}
.vocal-yap-player .dm-voice-duration { flex:0 0 auto!important; font-size:12px; font-variant-numeric:tabular-nums; }
.vocal-yap-player .dm-voice-progress { cursor:pointer; }
.vocal-yap-player audio { display:none; }


/* Source: styles-beta32-polish.css */
/* Project Yapper 465 — Private Developer Beta 36
   Visible app version stays v3.65. Final overrides for Card discovery,
   collection carousel and Vocal Yap playback. Snippet picker styling is intentionally left to the original Beta 31 styles. */

/* CARD DISCOVERY --------------------------------------------------------- */
#profileAvatarDisplay {
  position: relative !important;
  overflow: visible !important;
}
#profileAvatarDisplay > .profile-card-discovery-cursor {
  position: absolute !important;
  left: 52% !important;
  top: 48% !important;
  width: 31px !important;
  height: 35px !important;
  z-index: 40 !important;
  pointer-events: none !important;
  user-select: none !important;
  color: var(--primary, #5c77ff) !important;
  transform: translate(-3px, -2px) !important;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
#profileAvatarDisplay > .profile-card-discovery-cursor svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
  fill: currentColor !important;
  stroke: color-mix(in srgb, white 94%, transparent) !important;
  stroke-width: 1.8 !important;
  stroke-linejoin: round !important;
  transform-origin: 4px 3px !important;
  animation: card-discovery-breathe 1.75s cubic-bezier(.4,0,.2,1) infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  #profileAvatarDisplay > .profile-card-discovery-cursor svg {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* VOCAL YAPS ------------------------------------------------------------- */
.vocal-record.is-recording {
  color: var(--primary, #5c77ff) !important;
  background: color-mix(in srgb, var(--primary, #5c77ff) 15%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--primary, #5c77ff) 44%, var(--border)) !important;
}

/* Keep the recorder's own Vocal Yap geometry. Only the playback lighting
   behaviour comes from DMs/group chats. */
#vocalYapComposer {
  border-radius: 9999px !important;
}
#vocalYapComposer.is-preview {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 5px 7px 5px 9px !important;
  gap: 7px !important;
  border-radius: 9999px !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--bubble)) !important;
  overflow: hidden !important;
}
#vocalYapComposer.is-preview > .vocal-yap-player {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#vocalYapComposer.is-preview > .vocal-cancel {
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
}

/* Posted Vocal Yaps stay compact too; this is NOT the DM bubble layout. */
.vocal-yap-player.dm-voice-message-bubble {
  box-sizing: border-box !important;
  min-height: 48px !important;
  padding: 6px 10px !important;
  gap: 8px !important;
  border-radius: 9999px !important;
}
.vocal-yap-player .dm-voice-play-button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  flex: 0 0 32px !important;
}
.vocal-yap-player .dm-voice-wave-wrap {
  height: 28px !important;
  min-height: 28px !important;
}

/* Dense Vocal Yap waveform: same ~5px rhythm as the original recorder/player,
   while each bar still receives the smooth DM-style fade during playback. */
.vocal-yap-player .dm-voice-wave.vocal-wave {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  width: 100% !important;
  height: 28px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  mask: none !important;
  -webkit-mask: none !important;
}
.vocal-yap-player .dm-voice-wave.vocal-wave i {
  display: block !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 2px !important;
  max-width: 3px !important;
}
.vocal-yap-player .dm-voice-progress {
  z-index: 3 !important;
}

/* COLLECTION CAROUSEL --------------------------------------------------- */
#profileCardCollectionTrack {
  overscroll-behavior-x: contain !important;
  scroll-behavior: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
#profileCardCollectionTrack .profile-card-collection-slide {
  contain: layout paint style !important;
}
#profileCardCollectionTrack img {
  -webkit-user-drag: none !important;
  user-select: none !important;
}
#profileCardCollectionTrack.is-pointer-dragging,
#profileCardCollectionTrack.is-pointer-settling {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}
@media (pointer: fine) {
  /* Desktop is snapped in JS after release/wheel. Keeping native snap enabled
     while the mouse owns scrollLeft is what caused the grab-time teleport. */
  #profileCardCollectionTrack {
    scroll-snap-type: none !important;
    cursor: grab !important;
  }
  #profileCardCollectionTrack.is-pointer-dragging {
    cursor: grabbing !important;
  }
}
@media (pointer: coarse) {
  /* Keep the native mobile behaviour shown in the reference recording. */
  #profileCardCollectionTrack {
    scroll-snap-type: x proximity !important;
    touch-action: pan-x !important;
  }
}


/* Recorder, composer preview and posted vocal message all share one height. */
#vocalYapComposer,
#vocalYapComposer.is-preview,
.vocal-yap-player.dm-voice-message-bubble {
  box-sizing: border-box !important;
  min-height: 56px !important;
  height: 56px !important;
  border-radius: 9999px !important;
}
#vocalYapComposer {
  padding: 10px 12px !important;
}
#vocalYapComposer.is-preview {
  padding: 8px 8px 8px 10px !important;
  gap: 8px !important;
}
#vocalYapComposer.is-preview > .vocal-yap-player,
.vocal-yap-player.dm-voice-message-bubble {
  align-items: center !important;
  gap: 8px !important;
}
#vocalYapComposer.is-preview > .vocal-yap-player {
  height: 40px !important;
}
.vocal-yap-player.dm-voice-message-bubble {
  padding: 8px 10px !important;
}
.vocal-yap-player .dm-voice-wave-wrap {
  height: 30px !important;
  min-height: 30px !important;
}
.vocal-yap-player .dm-voice-wave.vocal-wave {
  height: 30px !important;
}


/* Source: styles-card-extras.css */
/* Beta 39. Scoped to the new Card row and dialogs; no snippet overrides. */
.yc-row { position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:0 0 auto;width:100%;max-width:420px;margin:0 auto;container-type:inline-size; }
.yc-row .yc-square { position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:auto;min-width:0;min-height:0;max-width:none;aspect-ratio:1;border-radius:29%;padding:10px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));background:color-mix(in srgb,var(--card) 74%,transparent);color:var(--text);box-shadow:inset 0 1px 0 #ffffff1a,0 8px 24px #00000014;backdrop-filter:blur(15px) saturate(1.08);-webkit-backdrop-filter:blur(15px) saturate(1.08);font-family:inherit;transform:none;overflow:visible; }
.yc-row .yc-label { font-size:clamp(9px,2.8cqw,12px);font-weight:750;line-height:1.15;letter-spacing:.015em;color:var(--muted,var(--text));white-space:nowrap; }
.yc-row .yc-time { font-size:clamp(12px,4.4cqw,21px);line-height:1.12;font-weight:850;letter-spacing:-.025em;white-space:nowrap; }
.yc-row .yc-scene-open { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:12%;width:100%;height:100%;min-height:0;min-width:0;border:0;border-radius:inherit;background:transparent;color:inherit;box-shadow:none;transform:none; }
.yc-row .yc-scene-open:disabled {opacity:1;cursor:default;}
.yc-row .yc-scene-art {position:relative;display:grid;place-items:center;width:100%;height:57%;min-height:0;}
.yc-row .yc-scene-art>svg {width:32%;height:auto;min-width:24px;max-width:40px;}
.yc-row .has-scenes .yc-scene-art {height:69%;width:83%;isolation:isolate;}
.yc-row .yc-scene-art img {display:block;position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:22%;box-shadow:0 3px 7px #0003;}
.yc-row .has-stack .yc-scene-art:before,.yc-row .has-stack .yc-scene-art:after {content:'';position:absolute;inset:0;z-index:0;border-radius:22%;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));background:color-mix(in srgb,var(--primary) 12%,var(--card));transform:rotate(-7deg) translate(-3%,-2%);}
.yc-row .has-stack .yc-scene-art:after {transform:rotate(6deg) translate(3%,-3%);}
.yc-row .yc-add {position:absolute;right:1px;bottom:1px;z-index:3;display:grid;place-items:center;width:28px;height:28px;min-width:0;min-height:0;padding:5px;border-radius:50%;border:2px solid var(--card);background:var(--primary);color:var(--primary-text,#fff);box-shadow:0 2px 7px #0003;transform:none;}
.yc-row .yc-add:before {content:'';position:absolute;inset:-7px;border-radius:50%;}
.yc-row .yc-add svg {width:100%;height:100%;}
.yc-row [hidden],.yc-dialog [hidden] {display:none!important;}
.yc-row .yc-qr-open {padding:9%;gap:5px;cursor:pointer;}
.yc-row .yc-qr-frame {width:82%;display:block;padding:3%;box-sizing:border-box;border-radius:18%;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);}
.yc-qr {display:block;width:100%;height:auto;aspect-ratio:1;}
.yc-row button:focus-visible,.yc-dialog button:focus-visible {outline:3px solid var(--primary);outline-offset:3px;}
.yc-dialog-open {overflow:hidden!important;}
.yc-dialog {box-sizing:border-box;position:fixed;margin:auto;padding:22px;width:min(460px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);border-radius:38px;border:1px solid var(--border,#444);background:var(--card,#1d1e26);color:var(--text,#fff);box-shadow:0 24px 100px #0008;overflow:auto;overscroll-behavior:contain;font-family:inherit;}
.yc-dialog::backdrop {background:#000a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.yc-dialog[open] {animation:yc-enter 160ms ease both;}
.yc-dialog .yc-dialog-head {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;}
.yc-dialog h2 {font-family:inherit;font-weight:850;font-size:24px;line-height:1.15;margin:0;}
.yc-dialog button {box-sizing:border-box;font-family:inherit;min-height:44px;min-width:44px;border-radius:24px;color:var(--text);background:color-mix(in srgb,var(--text) 7%,var(--card));border:1px solid var(--border);padding:10px 16px;box-shadow:none;transform:none;cursor:pointer;}
.yc-dialog button:disabled {opacity:.5;cursor:default;}
.yc-dialog .yc-close,.yc-dialog .yc-prev,.yc-dialog .yc-next {display:grid;place-items:center;padding:10px;width:44px;height:44px;flex:0 0 44px;border-radius:50%;}
.yc-dialog button svg {width:22px;height:22px;}
.yc-dialog .yc-primary {display:block;width:100%;background:var(--primary);color:var(--primary-text,#fff);border-color:transparent;font-weight:800;}
.yc-hint,.yc-identity {text-align:center;color:var(--muted);font-size:14px;margin:8px 0 18px;overflow-wrap:anywhere;}
.yc-status {font-size:14px;text-align:center;line-height:1.4;margin:12px 0 0;overflow-wrap:anywhere;}
.yc-status:empty {display:none;}
.yc-qr-large {padding:16px;margin:20px auto 10px;width:min(100%,340px);box-sizing:border-box;border-radius:32px;background:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 22%,transparent);}
.yc-drafts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:36dvh;overflow:auto;}
.yc-draft {position:relative;aspect-ratio:1;min-width:0;}
.yc-draft img {width:100%;height:100%;object-fit:cover;border-radius:22px;}
.yc-dialog .yc-draft button {position:absolute;right:2px;top:2px;padding:5px;min-width:32px;min-height:32px;width:32px;height:32px;border-radius:50%;background:#161820dd;color:#fff;}
.yc-dialog .yc-draft button svg {width:18px;height:18px;}
.yc-create-actions {display:flex;gap:10px;margin:16px 0;}
.yc-create-actions button {flex:1;display:flex;align-items:center;justify-content:center;gap:8px;}
.yc-camera video {display:block;max-height:30dvh;width:100%;border-radius:24px;background:#000;margin:12px 0;}
.yc-dialog.yc-viewer-dialog {width:min(520px,calc(100vw - 20px));height:min(880px,calc(100dvh - 20px));padding:18px;overflow:hidden;}
.yc-viewer-dialog[open] {display:flex;flex-direction:column;gap:8px;}
.yc-viewer-dialog .yc-identity {margin:0 0 6px;flex:0 0 auto;}
.yc-progress {display:flex;gap:4px;flex:0 0 3px;}
.yc-progress i {flex:1;min-width:0;background:color-mix(in srgb,var(--text) 15%,transparent);border-radius:4px;}
.yc-progress i.is-seen {background:var(--primary);}
.yc-dialog .yc-stage {position:relative;display:grid;place-items:center;flex:1;min-height:0;width:100%;padding:0;margin:0;border:0;background:#0b0b0e;overflow:hidden;border-radius:28px;touch-action:manipulation;}
.yc-dialog .yc-stage:disabled {opacity:1;}
.yc-stage img {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.yc-view-controls {display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;}
.yc-counter {font-size:13px;color:var(--muted);}
/* Allow the new row to scroll within the existing physical Card on short screens. */
#profileCardSection #profileCardMainPanel {overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:9px;}
#profileCardSection #profileCardMainPanel>.profile-card-mood-panel,#profileCardSection #profileCardMainPanel>.profile-card-top7-panel,#profileCardSection #profileCardMainPanel>.profile-card-signature-panel {flex-shrink:0;}
@keyframes yc-enter {from {opacity:0;transform:translateY(6px);}to {opacity:1;transform:none;}}
@media(max-width:360px) {.yc-row {gap:7px;}.yc-dialog{padding:16px;border-radius:32px;}.yc-create-actions{flex-wrap:wrap;}}
@media(prefers-reduced-motion:reduce) {.yc-dialog[open]{animation:none;}}
#profileCardSection > .profile-card-spin-front > .profile-card-content {height:100%;min-height:0;}
#profileCardSection > .profile-card-spin-front > .profile-card-content > .profile-card-body {min-height:0;}
#profileCardSection:has(#profileCardMainPanel.yc-scrollable) > .profile-card-spin-front {touch-action:pan-y!important;}
#profileCardMainPanel.yc-scrollable {touch-action:pan-y!important;}

/* Beta 40: isolate every new control from the app-wide pill geometry. */
#profileCardSection .yc-row {max-width:330px!important;gap:10px!important;flex:0 0 auto!important;margin:0 auto!important;}
#profileCardSection .yc-row .yc-square {height:auto!important;min-height:0!important;max-height:none!important;width:100%!important;min-width:0!important;max-width:none!important;aspect-ratio:1 / 1!important;border-radius:28%!important;clip-path:none!important;opacity:1!important;filter:none!important;transform:none!important;}
#profileCardSection .yc-row .yc-scene-open {width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-height:none!important;padding:12%!important;border-radius:inherit!important;transform:none!important;opacity:1!important;filter:none!important;}
#profileCardSection .yc-row .has-scenes .yc-scene-open {padding:0!important;overflow:hidden!important;}
#profileCardSection .yc-row .has-scenes .yc-scene-art {position:absolute!important;inset:0!important;width:100%!important;height:100%!important;isolation:auto!important;}
#profileCardSection .yc-row .has-scenes .yc-scene-art img {border-radius:inherit!important;object-fit:cover!important;opacity:1!important;filter:none!important;box-shadow:none!important;}
#profileCardSection .yc-row .has-scenes .yc-label {position:absolute;bottom:0;left:0;right:0;z-index:2;padding:18px 7px 9px;background:linear-gradient(transparent,#0008);color:#fff;text-shadow:0 1px 3px #0009;}
#profileCardSection .yc-row .has-stack::before,#profileCardSection .yc-row .has-stack::after {content:'';position:absolute;inset:2px;border:1px solid var(--border);border-radius:inherit;background:var(--card);z-index:-1;transform:rotate(-5deg);pointer-events:none;}
#profileCardSection .yc-row .has-stack::after {transform:rotate(4deg);}
#profileCardSection .yc-row .has-stack .yc-scene-art::before,#profileCardSection .yc-row .has-stack .yc-scene-art::after {display:none!important;}
#profileCardSection .yc-row .yc-add {display:grid!important;place-items:center!important;right:-2px!important;bottom:-2px!important;width:32px!important;min-width:32px!important;max-width:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important;padding:5px!important;border:2px solid var(--bg,#171717)!important;border-radius:50%!important;background:#fff!important;color:#111!important;opacity:1!important;filter:none!important;box-shadow:none!important;transform:none!important;}
#profileCardSection .yc-row .yc-add[hidden] {display:none!important;}
#profileCardSection .yc-row .yc-add svg {width:19px!important;height:19px!important;stroke-width:2.5!important;}
#profileCardSection .yc-row .yc-qr-open {padding:12%!important;border-radius:28%!important;}
#profileCardSection .yc-row .yc-qr-frame {width:100%!important;border-radius:14%!important;}
#profileCardSection .yc-row .yc-qr {border-radius:0!important;clip-path:none!important;}
/* Let the main content fit above the Signature instead of pushing it below
   the physical Card. Only extremely short Cards use the existing scroller. */
#profileCardSection > .profile-card-spin-front > .profile-card-content {height:100%!important;min-height:0!important;max-height:100%!important;box-sizing:border-box!important;}
#profileCardSection > .profile-card-spin-front > .profile-card-content > .profile-card-body {min-height:0!important;}
#profileCardSection #profileCardMainPanel {min-height:0!important;gap:10px!important;padding:2px 0 0!important;overflow-y:auto;overflow-x:hidden;}
#profileCardSection #profileCardSignaturePanel {transform:none!important;flex-shrink:0!important;margin-top:auto!important;margin-bottom:0!important;}
@media(max-height:700px) {#profileCardSection .yc-row{max-width:270px!important;}}
/* The viewer is a small stack of square photographs, without story bars. */
#yapperCardExtraDialog.yc-dialog {border-radius:36px!important;opacity:1;filter:none!important;}
#yapperCardExtraDialog.yc-viewer-dialog {width:min(500px,calc(100vw - 24px))!important;height:auto!important;max-height:calc(100dvh - 24px)!important;padding:20px!important;overflow-y:auto!important;overflow-x:hidden!important;display:flex;flex-direction:column;gap:8px;}
#yapperCardExtraDialog .yc-deck {position:relative;flex:none;width:min(100%,calc(100dvh - 250px));min-width:100px;aspect-ratio:1;margin:16px auto 18px;isolation:isolate;}
#yapperCardExtraDialog .yc-scene-sheet {position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-height:none!important;aspect-ratio:1!important;margin:0!important;padding:0!important;border:1px solid #ffffff24!important;border-radius:24px!important;clip-path:none!important;background:#111!important;opacity:1!important;filter:none!important;overflow:hidden!important;box-shadow:0 8px 22px #0005!important;}
#yapperCardExtraDialog .yc-sheet-back {z-index:0;transform:translate(0,7px) rotate(var(--yc-angle,-6deg))!important;pointer-events:none;}
#yapperCardExtraDialog .yc-sheet-next {z-index:1;transform:translate(0,3px) rotate(var(--yc-angle,5deg))!important;pointer-events:none;}
#yapperCardExtraDialog .yc-stage {z-index:2;cursor:pointer;touch-action:none!important;user-select:none;-webkit-user-select:none;}
#yapperCardExtraDialog .yc-scene-sheet img {position:absolute;inset:0;display:block;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important;opacity:1!important;filter:none!important;pointer-events:none;}
#yapperCardExtraDialog [hidden],#yapperCardExtraDialog .yc-scene-sheet[hidden],#yapperCardExtraDialog .yc-scene-sheet img[hidden] {display:none!important;}
#yapperCardExtraDialog .yc-stack-hint {margin:0;text-align:center;font-size:13px;color:var(--muted);}
#yapperCardExtraDialog .yc-close,#yapperCardExtraDialog .yc-prev {width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:10px!important;border-radius:50%!important;transform:none!important;}
#yapperCardExtraDialog .yc-next {width:auto!important;min-width:64px!important;max-width:none!important;height:44px!important;min-height:44px!important;max-height:44px!important;border-radius:22px!important;padding:10px 16px!important;}
#yapperCardExtraDialog .yc-draft button {width:32px!important;min-width:32px!important;max-width:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important;border-radius:50%!important;padding:5px!important;}
#yapperCardExtraDialog button {filter:none!important;transform:none!important;}
#yapperCardExtraDialog .yc-primary {border-radius:24px!important;}
#yapperCardExtraDialog .yc-qr-large,#yapperCardExtraDialog .yc-qr {clip-path:none!important;}
#yapperCardExtraDialog .yc-qr {border-radius:0!important;}
/* Avoid stacking costly GPU blur surfaces during the existing 3D drag. */
#profileCardSection.card-manual-grab .yc-square,#profileCardSection.card-manual-returning .yc-square {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}

/* Beta 41: content-sized viewer and photo-only motion, isolated from hover. */
#yapperCardExtraDialog.yc-viewer-dialog {height:fit-content!important;min-height:0!important;inset:0!important;margin:auto!important;align-self:center!important;}
#yapperCardExtraDialog .yc-scene-meta {display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;}
#yapperCardExtraDialog .yc-scene-meta .yc-identity {margin:0;}
#yapperCardExtraDialog .yc-deck {width:min(100%,calc(100dvh - 235px));margin:12px auto 14px;}
#yapperCardExtraDialog .yc-stage {position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;background:transparent!important;border:0!important;overflow:visible!important;box-shadow:none!important;transform:none!important;transition:none!important;}
#yapperCardExtraDialog .yc-front {z-index:2;will-change:transform;transition:none!important;}
#yapperCardExtraDialog .yc-scene-sheet img {object-fit:cover!important;object-position:50% 50%!important;}
#profileCardSection .yc-row .yc-qr-frame,.yc-row .yc-qr-frame {overflow:hidden!important;isolation:isolate;}
#yapperCardExtraDialog .yc-qr-large {overflow:hidden!important;}
/* Exact established Delete Yap text styling, without a button background. */
#yapperCardExtraDialog .yc-delete-scene,#yapperCardExtraDialog .yc-delete-scene:is(:hover,:active,:focus-visible) {display:inline!important;flex:0 0 auto!important;align-self:flex-start!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;margin:2px 0 0 auto!important;padding:2px 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--secondary-text)!important;font-size:12px!important;font-weight:750!important;line-height:1.35!important;white-space:nowrap!important;transform:none!important;}
#yapperCardExtraDialog .yc-delete-scene:is(:hover,:focus-visible) {color:var(--text)!important;text-decoration:underline!important;}
dialog.yc-delete-confirm {box-sizing:border-box;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:14px!important;border:0!important;color:var(--text);background:transparent!important;display:grid!important;place-items:center!important;overflow:auto;}
dialog.yc-delete-confirm::backdrop {background:#0009;backdrop-filter:blur(8px);}
dialog.yc-delete-confirm .delete-modal {transform:none!important;}
dialog.yc-delete-confirm .yc-delete-status:empty {display:none;}
/* A third search option uses the existing mode-button design. */
#searchModal .search-input-row-465 {grid-template-columns:minmax(0,1fr) minmax(270px,300px)!important;}
#searchModal .search-mode-switch {grid-template-columns:repeat(3,minmax(0,1fr))!important;}
@media(max-width:650px) {#searchModal .search-input-row-465{grid-template-columns:minmax(0,1fr)!important;}}
/* Full-screen scanner stays in the native top layer above Search. */
html.yqs-open {overflow:hidden!important;}
#yapperQrScanner {box-sizing:border-box!important;position:fixed!important;inset:0!important;margin:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;max-width:none!important;max-height:none!important;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))!important;border:0!important;border-radius:0!important;background:var(--bg,var(--card,#171719))!important;color:var(--text,#fff)!important;font-family:inherit;overflow:hidden!important;transform:none!important;}
#yapperQrScanner[open] {display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;}
#yapperQrScanner::backdrop {background:var(--bg,#171719);}
#yapperQrScanner .yqs-header {display:flex;align-items:center;justify-content:space-between;gap:16px;}
#yapperQrScanner .yqs-brand {font-size:11px;font-weight:850;letter-spacing:.18em;color:var(--primary);}
#yapperQrScanner h2 {font-weight:850;margin:5px 0 0;font-size:24px;line-height:1.2;}
#yapperQrScanner button {font-family:inherit;box-sizing:border-box;cursor:pointer;background:var(--glass-control,var(--card));color:var(--text);border:1px solid var(--border);box-shadow:none!important;transform:none!important;}
#yapperQrScanner .yqs-close {display:grid;place-items:center;flex:0 0 44px;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-height:44px!important;padding:10px!important;border-radius:50%!important;}
#yapperQrScanner .yqs-close svg {width:22px;height:22px;}
#yapperQrScanner .yqs-camera {position:relative;min-height:0;width:100%;max-width:900px;margin:auto;height:100%;overflow:hidden;border-radius:32px;background:#08080b;isolation:isolate;}
#yapperQrScanner video {display:block;width:100%;height:100%;object-fit:cover;}
#yapperQrScanner .yqs-guide {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(72vw,360px,52dvh);aspect-ratio:1;box-sizing:border-box;border:3px solid var(--primary,#8899ff);border-radius:28px;box-shadow:0 0 0 100vmax #0005;pointer-events:none;}
#yapperQrScanner .yqs-guide span {position:absolute;inset:12px;border:1px solid #ffffff70;border-radius:16px;}
#yapperQrScanner .yqs-camera-label {position:absolute;bottom:18px;left:12px;right:12px;text-align:center;font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 5px #000;margin:0;}
#yapperQrScanner footer {text-align:center;}
#yapperQrScanner .yqs-status {margin:0;font-size:14px;line-height:1.4;color:var(--secondary-text,var(--text));}
#yapperQrScanner .yqs-retry {margin:12px auto 0;min-height:44px;padding:10px 22px;border-radius:24px!important;}
#yapperQrScanner [hidden] {display:none!important;}

@media(max-width:760px) {#yapperCardExtraDialog .yc-delete-scene,#yapperCardExtraDialog .yc-delete-scene:is(:hover,:active,:focus-visible){margin-top:1px!important;}}

/* Beta 42: keep the same angle as each Scene moves forward in the stack. */
#yapperCardExtraDialog .yc-sheet-back {transform:rotate(var(--yc-angle,-6deg))!important;}
#yapperCardExtraDialog .yc-sheet-next {transform:rotate(var(--yc-angle,5deg))!important;}
#yapperCardExtraDialog .yc-front {transform:rotate(var(--yc-angle,0deg));}
#yapperCardExtraDialog .yc-scene-sheet {border-radius:clamp(34px,10%,48px)!important;}
/* Beta 36 placed the Signature slightly below the other panels. Restore that
   depth while retaining the padding that keeps it inside the physical Card. */
#profileCardSection #profileCardSignaturePanel {transform:translateY(8px)!important;}

/* Beta 43: the Signature lives inside the Card's scrolling main panel.
   Its translated bottom was clipped by that panel on phones and desktops.
   Give the panel eight pixels more room and keep the Signature in normal flow. */
#profileCardSection > .profile-card-spin-front > .profile-card-content {padding-bottom:max(10px, calc(env(safe-area-inset-bottom) - 8px))!important;}
#profileCardSection #profileCardMainPanel {padding:2px 0 4px!important;scroll-padding-bottom:4px;}
#profileCardSection #profileCardSignaturePanel {transform:none!important;}


/* Source: styles-beta44.css */
/* Beta 44: reuse Yapper's Settings surface and standard message typography. */
#yapperCardExtraDialog.yc-dialog {
  padding: 16px 22px 22px;
  background: linear-gradient(145deg, var(--glass-highlight-soft) 0%, transparent 32%, transparent 70%, rgba(0,0,0,.025) 100%), var(--glass-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--ui-radius-surface, 30px) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-border-soft), 0 28px 80px var(--glass-shadow-deep);
  -webkit-backdrop-filter: blur(var(--glass-blur)) contrast(1.06) brightness(.96);
  backdrop-filter: blur(var(--glass-blur)) contrast(1.06) brightness(.96);
}
#yapperCardExtraDialog .yc-dialog-head { min-height: 38px; align-items: flex-start; padding-right: 44px; }
#yapperCardExtraDialog .yc-dialog-head h2 {
  font-family: inherit !important; font-weight: 400 !important; font-style: normal !important;
  font-size: 24px; line-height: 1.3; margin: 0; padding: 0; letter-spacing: normal;
}
#yapperCardExtraDialog button { font-family: inherit !important; font-weight: 400 !important; font-style: normal !important; }
#yapperCardExtraDialog .yc-close { position: absolute; top: 10px; right: 10px; }
#yapperCardExtraDialog.yc-viewer-dialog { padding-top: 16px; }
/* The host is a full-width row; these offsets are relative to its centered 112px avatar. */
#profileAvatarDisplay > .profile-card-discovery-cursor {
  left: calc(50% + 25px) !important;
  top: 68px !important;
  width: 44px !important;
  height: 50px !important;
  transform: none !important;
}
@media (max-width: 700px) {
  /* Mobile avatars are 84px, so keep the same half-in/half-out overlap. */
  #profileAvatarDisplay > .profile-card-discovery-cursor {
    left: calc(50% + 18px) !important;
    top: 48px !important;
  }
}

/* Let the existing own/incoming bubble rules supply the caption's colors. */
#dmMessageList .dm-image-message-bubble { justify-items: stretch !important; }
#dmMessageList .dm-image-caption-text.dm-message-bubble {
  justify-self: start; align-self: start; width: fit-content !important; max-width: 100% !important;
  margin: 2px 0 0 !important; text-align: start !important;
  font-family: inherit !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important;
}
#dmMessageList .own .dm-image-caption-text.dm-message-bubble { justify-self: end; align-self: end; }
#dmMessageList .dm-message-row { position: relative; }
#dmMessageList .dm-message-row.message-menu-open { z-index: 100 !important; }
#dmMessageList .dm-message-footer { position: static !important; }
#dmMessageList .dm-message-menu.has-reply-actions {
  position: absolute !important; top: auto !important; bottom: calc(100% + 6px) !important;
  width: 164px !important; min-width: 164px !important; max-width: calc(100vw - 48px) !important;
  height: auto !important; padding: 6px !important; gap: 2px !important;
  border-radius: 22px !important; z-index: 101 !important;
  background: var(--glass-card, var(--card)) !important;
  box-shadow: 0 10px 30px #0006 !important;
}
#dmMessageList .message-menu-below .dm-message-menu.has-reply-actions { top: calc(100% + 6px) !important; bottom: auto !important; }
#dmMessageList .dm-message-menu.has-reply-actions > button {
  display: flex !important; align-items: center; justify-content: flex-start !important;
  width: 100% !important; min-height: 40px !important; padding: 8px 12px !important;
  border-radius: 16px !important; gap: 10px;
}
#dmMessageList .dm-message-menu.has-reply-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.dm-reply-composer, #dmMessageList .dm-reply-reference {
  box-sizing: border-box; display: flex; gap: 10px; align-items: center;
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 18px; padding: 10px 13px; background: var(--bubble); color: var(--text);
  text-align: start; font-family: inherit; font-style: normal; box-shadow: none;
}
.dm-reply-composer { margin: 6px 12px; flex: 0 0 auto; }
.dm-reply-composer.hidden { display: none; }
.dm-reply-composer > div { flex: 1; min-width: 0; }
.dm-reply-composer span, #dmMessageList .dm-reply-reference > span { color: var(--primary); font-size: 12px; font-weight: 600; }
.dm-reply-composer small, #dmMessageList .dm-reply-reference > small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-size: 13px; font-weight: 400;
}
.dm-reply-composer button { border: 0; border-radius: 50%; min-width: 40px; min-height: 40px; font-size: 23px; padding: 4px; }
#dmMessageList .dm-reply-reference { display: block; width: min(280px, 100%); max-width: 100%; min-width: 0; min-height: 0; margin: 0 0 5px; cursor: pointer; }
@media (max-width: 760px) {
  #dmMessageList .dm-image-caption-text.dm-message-bubble { font-size: 13.5px !important; }
}
@media (max-width: 540px) {
  #yapperCardExtraDialog.yc-dialog { padding: 14px 18px 18px; }
}


/* Source: styles-beta45.css */
/* Beta 45 uses the existing Yapper surfaces, picker and message controls. */
.glow-kind-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.glow-kind-options button.active { background:var(--highlight); border-color:var(--primary); }
.glow-color-list { display:grid; gap:8px; }
.glow-color-row { display:flex; align-items:center; gap:6px; min-width:0; }
.glow-color-row .plus-color-trigger { flex:1; min-width:0; }
.glow-color-row .plus-color-trigger { padding:5px 9px!important; gap:7px!important; }
.glow-color-row .plus-color-trigger-swatch { width:27px!important; min-width:27px!important; height:27px!important; flex:0 0 27px!important; }
.glow-color-row > button:not(.plus-color-trigger) { width:34px!important; min-width:34px!important; height:34px!important; min-height:34px!important; padding:0!important; flex:0 0 34px; border-radius:50%!important; }
.glow-add-color { margin:10px 0; }
.glow-preview { position:relative; border-radius:var(--ui-radius-surface,30px); padding:24px; margin:14px 2px 6px; background:var(--card); text-align:center; }
/* Keep the existing .public-yap-glow box shadow for every style. Only swap
   its one-color border for a painted border when there are multiple colors. */
.yap.public-yap-glow.multicolor-yap-glow::before,
.yap.public-yap-glow.multicolor-yap-glow::after {
  content:''!important; position:absolute!important; inset:0!important; padding:1px!important;
  border-radius:inherit!important; background:var(--yap-edge-paint)!important; pointer-events:none!important;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude;
}
.yap.public-yap-glow.multicolor-yap-glow {
  position:relative; border-color:transparent!important;
  /* A solid color shadow would tint the whole multicolor outline with swatch 1. */
  box-shadow:none!important;
}
.yap.public-yap-glow.multicolor-yap-glow::after {
  inset:-1px!important; padding:2px!important;
  filter:url(#yapperMulticolorGlow)!important; opacity:1!important;
}

#yapperStickerDialog {
  box-sizing:border-box; width:min(520px,calc(100vw - 28px)); max-width:calc(100vw - 28px);
  max-height:min(780px,calc(100dvh - 40px)); overflow:auto; margin:auto; padding:22px;
  color:var(--text); font-family:inherit;
  border:1px solid var(--glass-border); border-radius:var(--ui-radius-surface,30px)!important;
  background:linear-gradient(145deg,var(--glass-highlight-soft) 0%,transparent 32%,transparent 70%,rgba(0,0,0,.025) 100%),var(--card);
  box-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -1px 0 var(--glass-border-soft),0 28px 80px var(--glass-shadow-deep);
  -webkit-backdrop-filter:blur(var(--glass-blur)) contrast(1.06) brightness(.96);
  backdrop-filter:blur(var(--glass-blur)) contrast(1.06) brightness(.96);
}
#yapperStickerDialog::backdrop { background:rgba(5,5,6,.88); }
#yapperStickerDialog .sticker-header { display:flex; align-items:center; gap:8px; margin:0 0 16px; }
#yapperStickerDialog h2 { flex:1; margin:0; font-size:24px; font-weight:400; font-style:normal; }
#yapperStickerDialog .sticker-add, #yapperStickerDialog .sticker-close {
  position:static!important; transform:none!important; flex:0 0 38px; width:38px!important; height:38px!important;
  min-width:38px!important; min-height:38px!important; padding:0!important; border-radius:50%!important;
  display:inline-flex; align-items:center; justify-content:center; font-size:25px;
}
#yapperStickerDialog .sticker-close svg { width:21px; height:21px; }
#yapperStickerDialog label { display:block; margin:12px 0 6px; font-size:14px; }
#yapperStickerDialog input { box-sizing:border-box; width:100%; min-width:0; font:inherit; font-size:16px; }
#yapperStickerDialog input[type=search], #yapperStickerDialog input[type=text], #stickerName {
  border:1px solid var(--border); background:var(--input); color:var(--text); border-radius:9999px; padding:12px 16px;
}
.sticker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:18px 0; }
#yapperStickerDialog .sticker-choice { display:block!important; box-sizing:border-box!important; width:100%!important; height:auto!important; max-height:none!important; aspect-ratio:1; min-width:0!important; min-height:0!important; padding:8px!important; border:1px solid var(--border); background:var(--bubble); border-radius:20px!important; }
#yapperStickerDialog .sticker-choice:hover, #yapperStickerDialog .sticker-choice:focus-visible { border-color:var(--primary); background:var(--highlight); }
.yapper-sticker { display:block; width:min(180px,100%); aspect-ratio:1; max-width:100%; margin:10px 0; }
.yapper-sticker img, #yapperStickerDialog .sticker-choice img, .sticker-upload-preview img, #dmMessageList .dm-sticker-frame img {
  display:block; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:contain; border-radius:0!important; border:0!important; box-shadow:none!important;
}
.sticker-upload-preview { width:min(200px,100%); aspect-ratio:1; margin:16px auto; }
.sticker-upload-preview:empty { display:none; }
.sticker-status { min-height:20px; font-size:14px; margin:12px 0 0; }
.sticker-loading { font-size:13px; color:var(--muted); }
.composer-snippet-preview .yapper-sticker { width:64px; flex:0 0 64px; margin:0; }
#dmSnippetPreview.sticker-preview .dm-snippet-preview-icon, #dmSnippetPreview.sticker-preview img { border-radius:0!important; }
#dmMessageList .dm-sticker-message, #dmMessageList .dm-sticker-message .dm-image-content { box-sizing:border-box!important; width:180px!important; max-width:100%!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; padding:0!important; }
#dmMessageList .dm-sticker-frame { width:180px!important; max-width:100%!important; aspect-ratio:1; margin:0; padding:0; border:0; border-radius:0!important; }
#yapFeed .yap-replies-panel .yap-reply-composer { display:grid!important; grid-template-columns:minmax(0,1fr) 40px 44px!important; align-items:end; gap:8px; }
#yapFeed .reply-sticker-button { display:flex; align-items:center; justify-content:center; width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; padding:9px!important; border-radius:50%!important; }
.reply-sticker-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.reply-sticker-draft { grid-column:1 / -1; display:flex; gap:12px; align-items:center; }
.reply-sticker-draft .yapper-sticker { width:80px; margin:0; }
.reply-sticker-draft button { width:32px!important; height:32px!important; min-height:32px!important; padding:0!important; border-radius:50%!important; }

/* Restore the old rounded action menu, retaining Reply. */
#dmMessageList .dm-message-menu.has-reply-actions {
  border-radius:30px!important; background:var(--glass-card-strong)!important;
  box-shadow:0 16px 42px var(--glass-shadow-deep),inset 0 1px 0 var(--glass-highlight)!important;
  padding:7px!important; gap:4px!important;
}
#dmMessageList .dm-message-menu.has-reply-actions > button { border-radius:9999px!important; }
#dmMessageList .dm-message-menu.has-reply-actions > button:hover,
#dmMessageList .dm-message-menu.has-reply-actions > button:focus-visible { background:var(--button-hover)!important; }
/* Explicit dimensions defeat broad mobile modal button minimums. */
.dm-reply-composer button[data-cancel-reply] {
  box-sizing:border-box!important; display:inline-flex!important; align-items:center; justify-content:center;
  flex:0 0 34px!important; width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important;
  max-width:34px!important; max-height:34px!important; aspect-ratio:1; padding:6px!important; border-radius:50%!important;
}
.dm-reply-composer button[data-cancel-reply] svg { width:22px!important; height:22px!important; stroke-width:2; }
.dm-reply-composer, #dmMessageList button.dm-reply-reference {
  border-radius:18px!important; padding:12px 14px!important; min-height:64px!important; line-height:1.4!important;
  border:1px solid var(--border)!important; border-left:3px solid var(--primary)!important;
  background:var(--bubble)!important; color:var(--text)!important; font-family:inherit!important; font-style:normal!important;
}
#dmMessageList button.dm-reply-reference {
  box-sizing:border-box!important; flex:none!important; display:block!important; width:280px!important; max-width:100%!important;
  text-align:start!important; white-space:normal!important; box-shadow:none!important; transform:none!important;
}
#dmMessageList button.dm-reply-reference > span, #dmMessageList button.dm-reply-reference > small { display:block; text-align:start; }
@media(max-width:540px) {
  #yapperStickerDialog { padding:18px; }
  .sticker-grid { gap:8px; }
  #dmMessageList button.dm-reply-reference { width:min(260px,calc(100vw - 112px))!important; }
  .glow-color-row { gap:4px; }
  .glow-color-row .plus-color-trigger-value { font-size:12px; }
}

/* The Scenes creator keeps drafts inside one viewport so Publish stays in view. */
#yapperCardExtraDialog.yc-creator-dialog {
  display:flex!important; flex-direction:column; gap:0; max-height:calc(100dvh - 28px)!important;
  overflow-y:auto!important; overflow-x:hidden!important; overscroll-behavior:contain;
}
#yapperCardExtraDialog.yc-creator-dialog .yc-dialog-head,
#yapperCardExtraDialog.yc-creator-dialog .yc-hint { flex:0 0 auto; }
#yapperCardExtraDialog.yc-creator-dialog .yc-drafts {
  box-sizing:border-box; flex:0 0 clamp(128px,18dvh,160px); height:clamp(128px,18dvh,160px);
  min-height:0; max-height:clamp(128px,18dvh,160px); grid-auto-rows:max-content;
  align-content:start; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable;
  overscroll-behavior:contain; padding:3px 5px 3px 0; border-radius:20px;
}
#yapperCardExtraDialog.yc-creator-dialog .yc-drafts:empty { display:none; }
#yapperCardExtraDialog.yc-creator-dialog .yc-draft { width:100%; aspect-ratio:1; }
#yapperCardExtraDialog.yc-creator-dialog .yc-camera {
  display:flex!important; flex-direction:column; align-items:center; gap:12px; flex:0 0 auto;
  margin:4px 0 12px; padding:0; min-height:0;
}
#yapperCardExtraDialog.yc-creator-dialog .yc-camera-stage {
  position:relative; flex:0 0 auto; box-sizing:border-box; width:min(100%,29dvh,320px);
  aspect-ratio:1; margin:0 auto; overflow:hidden; border-radius:30px;
  background:#070709; isolation:isolate;
}
#yapperCardExtraDialog.yc-creator-dialog .yc-camera-stage video {
  display:block!important; position:absolute; top:0; left:12.5%; width:75%!important; height:100%!important;
  max-height:none!important; margin:0!important; object-fit:cover!important;
  border-radius:0!important; background:#111;
}
#yapperCardExtraDialog.yc-creator-dialog .yc-camera-switch {
  position:absolute; right:9px; bottom:9px; z-index:2; box-sizing:border-box;
  display:grid; place-items:center; width:42px!important; height:42px!important;
  min-width:42px!important; min-height:42px!important; padding:9px!important;
  border-radius:50%!important; background:#24242cd9!important; color:#fff!important;
  border:1px solid #ffffff80!important;
}
#yapperCardExtraDialog.yc-creator-dialog .yc-camera-switch svg {width:22px;height:22px;}
#yapperCardExtraDialog.yc-creator-dialog .yc-capture { flex:0 0 auto; width:100%!important; }
#yapperCardExtraDialog.yc-creator-dialog .yc-publish {
  position:sticky; bottom:0; z-index:5; flex:0 0 auto; min-height:48px;
  margin-top:8px; box-shadow:0 -8px 12px var(--card)!important;
}
#yapperCardExtraDialog.yc-creator-dialog .yc-status {flex:0 0 auto;margin-top:7px;}
/* A portrait Scene is composed and viewed without cropping off the sides. */
#yapperCardExtraDialog.yc-viewer-dialog .yc-scene-sheet img {object-fit:contain!important;}

/* The QR scanner's two guide squares use the Yap surface radius. */
#yapperQrScanner .yqs-guide {border-radius:var(--ui-radius-surface,30px)!important;}
#yapperQrScanner .yqs-guide span {border-radius:var(--ui-radius-surface,30px)!important;}
#profileCardSection .yc-row .yc-qr-frame,.yc-row .yc-qr-frame,
#yapperCardExtraDialog .yc-qr-large {border-radius:var(--ui-radius-surface,30px)!important;}


/* Source: styles-beta46.css */
/* Beta 46 polish. The camera and viewer show the same central square. */
#yapperCardExtraDialog.yc-creator-dialog .yc-camera-stage video {
  left:0!important; top:0!important; width:100%!important; height:100%!important;
  object-fit:cover!important; object-position:center!important;
}
#yapperCardExtraDialog.yc-viewer-dialog .yc-scene-sheet img {
  object-fit:cover!important; object-position:center!important;
}
/* Only the QR scanner guides changed: keep the Card's original QR geometry. */
#profileCardSection .yc-row .yc-qr-frame, .yc-row .yc-qr-frame {
  border-radius:14%!important;
}
#yapperQrScanner .yqs-guide {border-radius:42px!important;}
#yapperQrScanner .yqs-guide span {border-radius:30px!important;}

/* A native modal that stays in the centre while the sticker feed scrolls. */
dialog#yapperStickerDialog[open] {
  position:fixed!important; inset:0!important; margin:auto!important;
  transform:none!important; 
  display:flex!important; flex-direction:column!important;
  width:min(520px,calc(100vw - 28px))!important;
  height:fit-content!important; max-height:calc(100dvh - 32px)!important;
  overflow:hidden!important; overscroll-behavior:contain;
}
#yapperStickerDialog::backdrop {background:rgba(5,5,6,.68)!important;}
#yapperStickerDialog .sticker-header {flex:none;}
#yapperStickerDialog .sticker-library {display:flex;flex-direction:column;min-height:0;flex:0 1 auto;}
#yapperStickerDialog .sticker-library.hidden, #yapperStickerDialog .sticker-create.hidden {display:none!important;}
#yapperStickerDialog .sticker-library > label,
#yapperStickerDialog .sticker-library > input {flex:none;}
#yapperStickerDialog .sticker-grid {
  overflow-y:auto; overscroll-behavior:contain; min-height:110px;
  max-height:min(47dvh,430px); align-content:start; flex:0 1 auto;
  grid-auto-rows:max-content; padding:14px 0 4px;
}
#yapperStickerDialog .sticker-choice {
  width:100%!important; height:auto!important; aspect-ratio:1!important;
  min-width:0!important; min-height:0!important; max-height:none!important;
  padding:0!important; margin:0!important; border:0!important;
  border-radius:0!important; background:transparent!important; overflow:visible!important;
  box-shadow:none!important; display:block!important;
}
#yapperStickerDialog .sticker-choice img {
  display:block!important; width:100%!important; height:100%!important;
  aspect-ratio:1!important; object-fit:fill!important; border-radius:0!important;
}
#yapperStickerDialog .sticker-choice:focus-visible {outline:2px solid var(--primary);outline-offset:2px;}
#yapperStickerDialog .sticker-more {flex:none;}
#yapperStickerDialog .sticker-status {flex:none;min-height:0;}
#yapperStickerDialog .sticker-status:empty {display:none;}
#yapperStickerDialog .sticker-add {font-size:31px!important;font-weight:400!important;line-height:1!important;}
#yapperStickerDialog .sticker-create {overflow-y:auto;overscroll-behavior:contain;min-height:0;}
#yapperStickerDialog .sticker-choose-file {
  box-sizing:border-box!important; display:flex!important; flex-direction:column;
  justify-content:center;align-items:center;gap:9px;
  width:min(216px,100%)!important;height:auto!important;aspect-ratio:1;
  min-width:0!important;min-height:0!important;max-height:none!important;
  padding:12px!important;margin:4px auto 18px!important;
  border-radius:24px!important;
}
#yapperStickerDialog .sticker-upload-preview {
  display:grid;place-items:center;flex:none;
  width:min(150px,100%)!important;height:150px!important;aspect-ratio:1; margin:0!important;
  overflow:hidden;border-radius:0;
}
#yapperStickerDialog .sticker-upload-preview img {
  width:100%!important;height:100%!important;object-fit:contain!important;
}
#yapperStickerDialog .sticker-upload-preview svg {
  width:42px;height:42px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
#yapperStickerDialog .sticker-file-label {font-size:14px;line-height:1.15;}
#yapperStickerDialog .sticker-create .button-row {display:flex;gap:10px;align-items:stretch;}
#yapperStickerDialog .sticker-create .sticker-save {flex:1;}

/* Reply stickers live in the input surface, without a second text field. */
#yapFeed .yap-replies-panel .yap-reply-composer {
  grid-template-columns:minmax(0,1fr) 44px 44px!important;
  align-items:end!important;
}
#yapFeed .yap-replies-panel .reply-sticker-button {
  box-sizing:border-box!important;width:44px!important;height:44px!important;
  min-width:44px!important;min-height:44px!important;max-width:44px!important;
  max-height:44px!important;padding:10px!important;margin:0!important;
  align-self:end!important;
}
#yapFeed .yap-replies-panel .reply-sticker-button svg {width:24px!important;height:24px!important;}
#yapFeed .yap-replies-panel .reply-sticker-field {
  box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  min-width:0;width:100%;height:112px;padding:8px 10px;
  border:1px solid var(--border);border-radius:24px;background:var(--input);
}
#yapFeed .reply-sticker-field .yapper-sticker {
  display:block;width:94px;height:94px;flex:0 0 94px;margin:0;
}
#yapFeed .reply-sticker-field button {
  box-sizing:border-box!important;display:grid!important;place-items:center!important;
  width:32px!important;height:32px!important;min-width:32px!important;
  min-height:32px!important;max-width:32px!important;padding:6px!important;
  margin:0!important;border-radius:50%!important;
}
#yapFeed .reply-sticker-field button svg {width:20px!important;height:20px!important;stroke-width:2!important;}
#yapFeed .reply-content .yapper-sticker {
  width:min(var(--sticker-width,180px),100%)!important;
  height:auto!important;aspect-ratio:var(--sticker-ratio,1)!important;
  margin:0!important;
}
#yapFeed .reply-content .yapper-sticker img {object-fit:contain!important;}

/* The dimensions of the sent art determine the message row and its controls. */
#dmMessageList .dm-message-row.dm-sticker-message-row {
  width:fit-content!important;max-width:min(280px,88%)!important;
}
#dmMessageList .dm-message-row.dm-sticker-message-row.own {
  width:max(72px,var(--dm-sticker-render-width,180px))!important;
}
#dmMessageList .dm-message-row.dm-sticker-message-row.incoming {
  width:max(90px,calc(var(--dm-sticker-render-width,180px) + 37px))!important;
}
#dmMessageList .dm-sticker-message-row.incoming .dm-incoming-message-line {width:100%;}
#dmMessageList .dm-sticker-message-row.incoming .dm-incoming-message-content {
  flex:0 0 var(--dm-sticker-render-width,180px);width:var(--dm-sticker-render-width,180px);
  max-width:calc(100% - 37px);
}
#dmMessageList .dm-sticker-message,
#dmMessageList .dm-sticker-message .dm-image-content {
  box-sizing:border-box!important;display:block!important;
  width:var(--dm-sticker-render-width,180px)!important;height:fit-content!important;
  min-width:0!important;min-height:0!important;max-width:100%!important;
  padding:0!important;margin:0!important;
}
#dmMessageList .dm-sticker-frame {
  box-sizing:border-box!important;display:block!important;
  width:var(--dm-sticker-render-width,180px)!important;
  height:auto!important;min-height:0!important;max-height:180px!important;
  aspect-ratio:var(--dm-sticker-ratio,1)!important;
  margin:0!important;padding:0!important;border:0!important;
  background:transparent!important;border-radius:0!important;
}
#dmMessageList .dm-sticker-frame img {
  width:100%!important;height:100%!important;object-fit:contain!important;
  border-radius:0!important;
}
@media(max-width:540px) {
  #yapperStickerDialog .sticker-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
}


/* Source: styles-beta47.css */
/* The Card's unopened QR can have a pocket at its base. The enlarged QR
   keeps its entire matrix and white quiet zone inside the white square. */
#profileCardSection .yc-row .yc-qr-frame,.yc-row .yc-qr-frame {
  border-radius:23% 23% 14% 14%!important;
  padding:5%!important;
}
#yapperCardExtraDialog .yc-qr-large {
  padding:34px!important;
  border-radius:32px!important;
  overflow:visible!important;
}
#yapperCardExtraDialog .yc-qr-large .yc-qr {
  display:block!important;
  width:100%!important;
  height:auto!important;
  border-radius:0!important;
  overflow:visible!important;
}

/* Render the actual Yap border around a Yap-shaped preview. Its paint comes
   from glowPaint(), the same function used by the feed cards. */
#plusGlowStyles .glow-preview.yap {
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  width:calc(100% - 4px)!important;
  max-width:100%!important;
  aspect-ratio:1.85!important;
  min-height:160px!important;
  margin:14px 2px 6px!important;
  padding:24px!important;
  border-radius:56px!important;
  text-align:center;
}
#yapperStickerDialog .sticker-add .yapper-x-icon {
  width:21px!important;
  height:21px!important;
  stroke-width:2.45!important;
}


/* Source: styles-release-465.css */
/* Project Yapper 465 — one-time release welcome screen.
   Full-screen, theme-aware and intentionally non-dismissible until completed. */
.release465-overlay {
  --release465-accent: #5C77FF;
  z-index: 2147483647 !important;
  place-items: stretch !important;
  padding: 0 !important;
  background: var(--background) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

.release465-overlay.is-open,
.release465-overlay.is-closing {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.release465-overlay > .release465-screen.modal-surface {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding:
    max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--release465-accent) 12%, transparent), transparent 38%),
    var(--background) !important;
  box-shadow: none !important;
  color: var(--text);
  overflow: hidden;
}

body[data-theme="dark"] .release465-overlay > .release465-screen.modal-surface {
  background:
    radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--release465-accent) 19%, transparent), transparent 42%),
    #101010 !important;
}

.release465-confetti {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(760px, 100vw);
  height: 235px;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}

.release465-confetti span {
  --confetti-color: var(--release465-accent);
  position: absolute;
  top: var(--y, 12px);
  left: var(--x, 50%);
  width: var(--w, 7px);
  height: var(--h, 18px);
  border-radius: 3px;
  background: var(--confetti-color);
  opacity: var(--o, .9);
  transform: rotate(var(--r, 12deg));
  animation: release465ConfettiFloat var(--d, 4.6s) ease-in-out var(--delay, 0s) infinite alternate;
}

.release465-confetti span:nth-child(3n) {
  --confetti-color: color-mix(in srgb, var(--release465-accent) 58%, white);
}
.release465-confetti span:nth-child(4n) {
  border-radius: 999px;
}
.release465-confetti span:nth-child(5n) {
  --confetti-color: color-mix(in srgb, var(--release465-accent) 72%, transparent);
}

@keyframes release465ConfettiFloat {
  from { translate: 0 -2px; rotate: -3deg; }
  to { translate: 0 7px; rotate: 5deg; }
}

.release465-header,
.release465-feature-scroll,
.release465-footer {
  width: min(720px, 100%);
}

.release465-header {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 8px 14px;
  text-align: center;
}

.release465-app-icon-shell {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-bottom: 2px;
  border: 1px solid color-mix(in srgb, var(--release465-accent) 32%, var(--border));
  border-radius: 25px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--release465-accent) 14%, white), color-mix(in srgb, var(--release465-accent) 6%, var(--card))),
    var(--card);
  box-shadow:
    0 16px 42px color-mix(in srgb, var(--release465-accent) 19%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
}

body[data-theme="dark"] .release465-app-icon-shell {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--release465-accent) 22%, #171717), #151515),
    var(--card);
  box-shadow:
    0 16px 50px color-mix(in srgb, var(--release465-accent) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.release465-app-icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px color-mix(in srgb, var(--release465-accent) 24%, transparent));
}


.release465-header h2,
.release465-header p {
  margin: 0;
}

.release465-header h2 {
  max-width: 680px;
  font-size: clamp(30px, 6vw, 48px);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.release465-title-accent {
  display: block;
  margin-top: 4px;
  color: var(--release465-accent);
}

.release465-header p {
  max-width: 520px;
  margin-top: 3px;
  color: var(--secondary-text);
  font-size: clamp(13px, 2.6vw, 15px);
  line-height: 1.4;
}

.release465-feature-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--release465-accent) 16%, var(--border));
  border-radius: 29px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow:
    0 18px 48px color-mix(in srgb, var(--shadow) 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 25%, transparent);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

body[data-theme="dark"] .release465-feature-scroll {
  background: color-mix(in srgb, #17191f 93%, transparent);
  border-color: color-mix(in srgb, var(--release465-accent) 18%, #363a48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.release465-feature {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 21px;
  background: color-mix(in srgb, var(--bubble) 78%, transparent);
}

body[data-theme="dark"] .release465-feature {
  background: color-mix(in srgb, #20232c 90%, transparent);
  border-color: color-mix(in srgb, #474b59 62%, transparent);
}

.release465-feature-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--release465-accent) 22%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--release465-accent) 11%, var(--card));
  color: var(--release465-accent);
}

body[data-theme="dark"] .release465-feature-icon {
  background: color-mix(in srgb, var(--release465-accent) 13%, #20242e);
}

.release465-feature-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.release465-feature-copy {
  min-width: 0;
}

.release465-feature-copy strong,
.release465-feature-copy small {
  display: block;
}

.release465-feature-copy strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.15;
}

.release465-feature-copy small {
  margin-top: 4px;
  color: var(--secondary-text);
  font-size: 12px;
  line-height: 1.28;
}

.release465-feature-chevron {
  color: color-mix(in srgb, var(--secondary-text) 82%, transparent);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
}

.release465-footer {
  flex: 0 0 auto;
  display: grid;
  gap: 9px;
  padding-top: 11px;
}

.release465-interesting-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 15px;
  border: 1px solid color-mix(in srgb, var(--release465-accent) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

body[data-theme="dark"] .release465-interesting-row {
  background: color-mix(in srgb, #191c24 94%, transparent);
  border-color: color-mix(in srgb, var(--release465-accent) 20%, #3c414f);
}

.release465-interesting-row > span {
  font-size: 15px;
  font-weight: 800;
}

/* Reuse the Rotating CD custom ticker/checkmark mechanics, but make this
   release-screen instance circular. */
.release465-interesting-row .profile-cd-toggle {
  flex: 0 0 27px !important;
  border-radius: 50% !important;
}

.release465-status {
  min-height: 0;
  margin: 0;
  padding: 0 10px;
  text-align: center;
  font-size: 12px;
}

.release465-status:empty {
  display: none;
}

.release465-enter {
  width: 100%;
  min-height: 52px;
  border-radius: 999px !important;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.01em;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}

.release465-enter:not(:disabled) {
  border-color: var(--release465-accent) !important;
  background: var(--release465-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 11px 28px color-mix(in srgb, var(--release465-accent) 30%, transparent) !important;
}

.release465-enter:not(:disabled):active {
  transform: scale(.985) !important;
}

.release465-enter:disabled {
  opacity: 1 !important;
  cursor: not-allowed !important;
  border-color: color-mix(in srgb, var(--release465-accent) 20%, var(--border)) !important;
  background: color-mix(in srgb, var(--release465-accent) 24%, var(--button)) !important;
  color: color-mix(in srgb, var(--release465-accent) 52%, var(--secondary-text)) !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-theme="dark"] .release465-enter:disabled {
  background: color-mix(in srgb, var(--release465-accent) 22%, #2b2e38) !important;
  color: #8d96bd !important;
}

@media (max-width: 600px) {
  .release465-overlay > .release465-screen.modal-surface {
    padding:
      max(12px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left)) !important;
  }

  .release465-header {
    gap: 4px;
    padding: 3px 6px 10px;
  }

  .release465-app-icon-shell {
    width: 66px;
    height: 66px;
    border-radius: 21px;
  }

  .release465-app-icon {
    width: 52px;
    height: 52px;
  }

  .release465-header h2 {
    font-size: clamp(29px, 9.4vw, 38px);
  }

  .release465-header p {
    font-size: 12px;
    line-height: 1.34;
  }

  .release465-feature-scroll {
    gap: 7px;
    padding: 7px;
    border-radius: 25px;
  }

  .release465-feature {
    grid-template-columns: 42px minmax(0, 1fr) 14px;
    gap: 10px;
    min-height: 65px;
    padding: 8px 10px;
    border-radius: 19px;
  }

  .release465-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .release465-feature-icon svg {
    width: 23px;
    height: 23px;
  }

  .release465-feature-copy strong {
    font-size: 13px;
  }

  .release465-feature-copy small {
    margin-top: 3px;
    font-size: 11px;
  }

  .release465-footer {
    gap: 8px;
    padding-top: 9px;
  }

  .release465-interesting-row {
    min-height: 50px;
    padding: 8px 13px;
  }

  .release465-enter {
    min-height: 50px;
  }
}

@media (max-height: 700px) {
  .release465-header {
    padding-bottom: 8px;
  }

  .release465-app-icon-shell {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }

  .release465-app-icon {
    width: 46px;
    height: 46px;
  }


  .release465-header h2 {
    font-size: 29px;
  }

  .release465-header p {
    font-size: 11px;
  }

  .release465-feature {
    min-height: 59px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .release465-confetti span {
    animation: none !important;
  }
}


/* Source: styles-v468-mobile-yap-transparency.css */
/* Yapper v4.68 — mobile Yap transparency parity.
   Keep the mobile performance path blur-free, but paint Yap cards with the
   same translucent glass fill used on desktop instead of the opaque --card. */
@media (max-width: 760px), (pointer: coarse) {
  .yap {
    background:
      linear-gradient(
        145deg,
        var(--glass-highlight-soft) 0%,
        transparent 32%,
        transparent 70%,
        rgba(0, 0, 0, 0.025) 100%
      ),
      var(--glass-card) !important;
  }
}


/* Source: styles-v475-dash-mode-status.css */
/* v4.75 — dedicated Dash mode-transition row. */
#dmDashModeStatus.dm-dash-mode-status {
  display: none;
}

#dmDashModeStatus.dm-dash-mode-status.is-visible:not(:empty) {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 1.25em !important;
  height: auto !important;
  margin: 5px 18px 8px !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  position: relative;
  text-align: center !important;
  text-wrap: balance;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em;
}

@media (max-width: 430px) {
  #dmDashModeStatus.dm-dash-mode-status.is-visible:not(:empty) {
    margin-inline: 12px !important;
  }
}


/* Source: styles-v477-reply-sticker-aspect.css */
/* Yapper v4.77 — aspect-aware sticker previews in Yap reply composer. */
#yapFeed .yap-replies-panel .reply-sticker-field {
  gap: 8px !important;
  padding: 8px !important;
  overflow: hidden !important;
}

#yapFeed .yap-replies-panel .reply-sticker-field .yapper-sticker {
  display: block !important;
  box-sizing: border-box !important;
  width: min(var(--reply-sticker-width, 94px), calc(100% - 40px)) !important;
  height: 94px !important;
  min-width: 0 !important;
  max-width: calc(100% - 40px) !important;
  flex: 0 1 auto !important;
  aspect-ratio: var(--sticker-ratio, 1) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#yapFeed .yap-replies-panel .reply-sticker-field .yapper-sticker img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

#yapFeed .yap-replies-panel .reply-sticker-field > button[data-action="remove-reply-sticker"] {
  flex: 0 0 32px !important;
  align-self: center !important;
}

@media (max-width: 540px) {
  #yapFeed .yap-replies-panel .reply-sticker-field .yapper-sticker {
    max-width: calc(100% - 40px) !important;
  }
}


/* Source: styles-v478-video.css */
/* Yapper v4.78 — local 360p video snippets */
.composer-video-preview {
  margin: 10px 0 6px;
}
.composer-video-preview.hidden { display:none !important; }
.composer-video-preview-shell {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 11px;
  border:1px solid color-mix(in srgb, var(--accent, #5c77ff) 22%, rgba(255,255,255,.18));
  border-radius:22px;
  background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 12px 30px rgba(0,0,0,.12);
  backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
}
.composer-video-poster-wrap {
  position:relative;
  width:90px;
  aspect-ratio:16/9;
  border-radius:15px;
  overflow:hidden;
  flex:0 0 auto;
  background:rgba(0,0,0,.24);
  box-shadow:0 7px 17px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.15);
}
.composer-video-poster { width:100%; height:100%; object-fit:cover; display:block; }
.composer-video-play-glyph,
.dm-video-preview-play {
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:999px;
  color:#fff; background:rgba(18,20,31,.48);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.composer-video-play-glyph svg { width:19px; fill:currentColor; }
.composer-video-preview-copy { min-width:0; flex:1; display:grid; gap:3px; }
.composer-video-preview-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.composer-video-preview-copy small { opacity:.68; }
.composer-video-preview-remove {
  border:0; border-radius:999px; padding:8px 11px; font:inherit; font-weight:700;
  color:inherit; background:rgba(255,255,255,.09); cursor:pointer;
}

.yap-video-card,
.yapper-video-shell {
  position:relative;
  width:min(100%, 560px);
  margin:10px 0 2px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(8,10,18,.15));
  box-shadow:0 16px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
}
.yap-video-stage,
.yapper-video-stage {
  position:relative;
  width:100%;
  aspect-ratio:var(--yap-video-ratio, var(--video-ratio, 16/9));
  min-height:150px;
  max-height:520px;
  overflow:hidden;
  background:#07080d;
}
.yap-video-poster,
.yap-video-element,
.yapper-video-poster,
.yapper-video-media {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  background:#07080d;
}
.yap-video-element,
.yapper-video-media { z-index:2; }
.yap-video-card:not(.is-playing) .yap-video-element:not([src]),
.dm-video-message-row:not(.dm-video-is-playing) .dm-video-media:not([src]) { opacity:0; }
.yap-video-poster,
.yapper-video-poster { z-index:1; object-fit:cover; }
.yap-video-card.is-playing .yap-video-poster,
.dm-video-is-playing .dm-video-poster { opacity:0; pointer-events:none; }
.yap-video-play,
.yapper-video-play {
  position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%) translateZ(0);
  width:64px; height:64px; border-radius:50%; border:1px solid rgba(255,255,255,.38);
  display:grid; place-items:center; cursor:pointer; color:white;
  background:linear-gradient(145deg, rgba(255,255,255,.28), rgba(25,29,44,.34));
  box-shadow:0 16px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.18);
  backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
  transition:transform .18s ease, opacity .18s ease;
}
.yap-video-play:active,.yapper-video-play:active { transform:translate(-50%,-50%) scale(.93); }
.yap-video-play svg { width:31px; fill:currentColor; }
.yap-video-card.is-playing .yap-video-play,
.dm-video-is-playing .dm-video-play { opacity:0; pointer-events:none; }
.yap-video-loading,
.yapper-video-loading {
  position:absolute; z-index:5; inset:0; display:grid; place-content:center; justify-items:center; gap:10px;
  color:#fff; background:rgba(7,8,13,.44); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.yap-video-loading.hidden,.yapper-video-loading.hidden { display:none !important; }
.yap-video-spinner,.yapper-video-spinner {
  width:30px; height:30px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation:yapperVideoSpin .8s linear infinite;
}
@keyframes yapperVideoSpin { to { transform:rotate(360deg); } }
.yap-video-controls,
.yapper-video-controls {
  min-height:48px; display:flex; align-items:center; gap:9px; padding:8px 10px;
  background:linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.yap-video-mini-play,.yapper-video-mini-play {
  width:34px; height:34px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:grid; place-items:center; color:inherit; background:rgba(255,255,255,.09); cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.yap-video-mini-play svg { width:18px; fill:currentColor; }
.yap-video-progress,.yapper-video-progress {
  flex:1; min-width:80px; height:5px; accent-color:var(--accent, #5c77ff); cursor:pointer;
}
.yap-video-time,.yapper-video-time { flex:0 0 auto; font-size:12px; font-variant-numeric:tabular-nums; opacity:.76; white-space:nowrap; }

.dm-video-message-bubble { width:min(72vw, 420px); max-width:100%; }
.dm-video-message-row .dm-incoming-message-content,
.dm-video-message-row.own { max-width:min(78vw, 440px); }
.dm-video-message-row .dm-video-shell { width:100%; margin:0; }
.dm-video-poster-loading {
  position:absolute; inset:0; z-index:1; display:grid; place-items:center; color:rgba(255,255,255,.72); font-size:13px;
  background:linear-gradient(145deg,#161927,#0b0d14);
}
.dm-video-preview-poster { position:relative; width:100%; height:100%; display:block; }
.dm-video-preview-poster img { width:100%; height:100%; object-fit:cover; display:block; }
.dm-video-preview-play { width:26px; height:26px; font-size:11px; }

@media (max-width:640px) {
  .yap-video-card,.yapper-video-shell { border-radius:20px; }
  .yap-video-stage,.yapper-video-stage { min-height:125px; }
  .yap-video-play,.yapper-video-play { width:58px; height:58px; }
  .yap-video-time,.yapper-video-time { font-size:11px; }
  .composer-video-preview-shell { border-radius:19px; gap:9px; }
  .composer-video-poster-wrap { width:78px; }
  .composer-video-preview-remove { font-size:12px; padding:7px 9px; }
}

@media (prefers-reduced-motion:reduce) {
  .yap-video-play,.yapper-video-play { transition:none; }
  .yap-video-spinner,.yapper-video-spinner { animation-duration:1.4s; }
}


/* Source: styles-v479-video-fixes.css */
/* Yapper v4.79 — video posting reliability + true-aspect previews */

/* Composer video preview now behaves like the image preview: large, centered,
   true aspect ratio, with a real local playback control. */
.composer-video-preview {
  display: grid;
  justify-items: center;
  width: 100%;
  margin: 16px 0 12px;
  padding: 0;
}

.composer-video-preview.hidden {
  display: none !important;
}

.composer-video-preview-shell {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.composer-video-preview-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 100%;
  color: var(--text);
  text-align: center;
}

.composer-video-preview-heading strong {
  font-size: 14px;
  font-weight: 800;
}

.composer-video-preview-heading small {
  font-size: 12px;
  opacity: .62;
}

.composer-video-preview-frame {
  position: relative;
  width: min(100%, var(--composer-video-frame-width, 560px));
  aspect-ratio: var(--composer-video-ratio, 16 / 9);
  overflow: hidden;
  border: 1px solid var(--glass-border, rgba(255,255,255,.16));
  border-radius: 22px;
  background: #07080d;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight, rgba(255,255,255,.18)),
    0 12px 28px rgba(0,0,0,.16);
  transform: translateZ(0);
}

.composer-video-preview-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #07080d;
  cursor: pointer;
}

.composer-video-preview-play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,.30), rgba(35,40,61,.30));
  box-shadow:
    0 15px 34px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(0,0,0,.16);
  backdrop-filter: blur(17px) saturate(1.55);
  -webkit-backdrop-filter: blur(17px) saturate(1.55);
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease, background .16s ease;
}

.composer-video-preview-play:hover {
  background:
    linear-gradient(145deg, rgba(255,255,255,.36), rgba(45,51,78,.34));
}

.composer-video-preview-play:active {
  transform: translate(-50%, -50%) scale(.93);
}

.composer-video-preview-play svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.composer-video-preview-pause-icon {
  display: none;
}

.composer-video-preview-shell.is-playing .composer-video-preview-play {
  width: 48px;
  height: 48px;
  opacity: .72;
}

.composer-video-preview-shell.is-playing .composer-video-preview-play-icon {
  display: none;
}

.composer-video-preview-shell.is-playing .composer-video-preview-pause-icon {
  display: grid;
  place-items: center;
}

.composer-video-preview-remove {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--glass-border, rgba(255,255,255,.16));
  border-radius: 999px;
  background: var(--glass-control, rgba(255,255,255,.08));
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--glass-highlight, rgba(255,255,255,.16));
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.composer-video-preview-remove:hover,
.composer-video-preview-remove:active {
  background: var(--glass-control-hover, rgba(255,255,255,.13));
}

/* Feed videos preserve their encoded orientation instead of forcing every
   clip into the same wide card. */
.yap-video-card {
  width: min(100%, var(--yap-video-card-width, 560px));
  max-width: 100%;
}

.yap-video-stage {
  min-height: 0;
  max-height: none;
  aspect-ratio: var(--yap-video-ratio, 16 / 9);
}

/* DM/group video cards keep the same true-aspect behavior. */
.dm-video-message-bubble {
  width: min(78vw, var(--dm-video-shell-width, 420px));
  max-width: 100%;
}

.dm-video-message-row .dm-video-shell {
  width: 100%;
}

.dm-video-stage {
  min-height: 0;
  max-height: none;
}

/* The tiny DM composer tile also stops forcing a 16:9 crop. */
.dm-video-preview-poster {
  aspect-ratio: var(--dm-video-preview-ratio, 16 / 9);
  width: 100%;
  height: 100%;
}

.dm-video-preview-poster img {
  object-fit: cover;
}

@media (max-width: 700px) {
  .composer-video-preview {
    margin-top: 14px;
    margin-bottom: 12px;
  }

  .composer-video-preview-play {
    width: 54px;
    height: 54px;
  }

  .composer-video-preview-shell.is-playing .composer-video-preview-play {
    width: 44px;
    height: 44px;
  }

  .composer-video-preview-heading strong {
    font-size: 13px;
  }

  .composer-video-preview-heading small {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .composer-video-preview-play {
    transition: none;
  }
}


/* Source: styles-v480-video-player.css */
/* Yapper v4.80 — video player visual + audio polish */

/* Match the established Yapper image corner language. */
.composer-video-preview-frame,
.yap-video-stage,
.yapper-video-stage {
  border-radius: 34px !important;
}

/* Composer: the video itself owns the card shape, just like image previews. */
.composer-video-preview-frame {
  border: 1px solid var(--glass-border, rgba(255,255,255,.16)) !important;
  background: #07080d !important;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight, rgba(255,255,255,.18)),
    0 12px 28px rgba(0,0,0,.14) !important;
}

/* Posted videos are centered media, not a left-anchored glass panel. */
.yap-video-card {
  width: min(100%, var(--yap-video-card-width, 560px)) !important;
  max-width: 100% !important;
  margin: 12px auto 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.yap-video-stage,
.yapper-video-stage {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--glass-border, rgba(255,255,255,.16)) !important;
  background: #07080d !important;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight, rgba(255,255,255,.14)),
    0 10px 24px rgba(0,0,0,.10) !important;
  cursor: pointer;
}

.yap-video-poster,
.yap-video-element,
.yapper-video-poster,
.yapper-video-media,
.composer-video-preview-media {
  border-radius: inherit !important;
}

.yap-video-card.video-loaded .yap-video-poster,
.dm-video-message-row.video-loaded .dm-video-poster {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* DM/group cards use the same media-first treatment. */
.dm-video-message-bubble {
  margin-inline: auto !important;
}

.dm-video-message-row .dm-video-shell {
  margin-inline: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* One visible, blue, 3D liquid-glass button. It appears over the video only. */
.composer-video-preview-play,
.yap-video-play,
.yapper-video-play {
  width: 68px !important;
  height: 68px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--accent, #5c77ff) 82%, white 18%),
      color-mix(in srgb, var(--accent, #5c77ff) 84%, #132057 16%)) !important;
  box-shadow:
    0 13px 30px color-mix(in srgb, var(--accent, #5c77ff) 34%, transparent),
    0 5px 13px rgba(0,0,0,.28),
    inset 0 2px 1px rgba(255,255,255,.46),
    inset 0 -2px 1px rgba(0,0,0,.17) !important;
  backdrop-filter: blur(13px) saturate(1.42) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.42) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(1) translateZ(0) !important;
  transition:
    opacity .14s ease,
    transform .12s cubic-bezier(.2,.8,.2,1),
    filter .12s ease !important;
}

/* No size morph = no shake. Hover gets one tiny tactile scale only. */
.composer-video-preview-play:hover,
.yap-video-play:hover,
.yapper-video-play:hover {
  transform: translate(-50%, -50%) scale(1.045) translateZ(0) !important;
  filter: brightness(1.055);
}

.composer-video-preview-play:active,
.yap-video-play:active,
.yapper-video-play:active {
  transform: translate(-50%, -50%) scale(.965) translateZ(0) !important;
  filter: brightness(.98);
}

.composer-video-preview-frame:hover .composer-video-preview-play,
.composer-video-preview-shell.video-controls-visible .composer-video-preview-play,
.yap-video-stage:hover .yap-video-play,
.yap-video-card.video-controls-visible .yap-video-play,
.dm-video-stage:hover .dm-video-play,
.dm-video-message-row.video-controls-visible .dm-video-play,
.composer-video-preview-play:focus-visible,
.yap-video-play:focus-visible,
.dm-video-play:focus-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Make the glyph actually fit the big button. */
.composer-video-preview-play svg,
.yap-video-play svg,
.yapper-video-play svg {
  width: 36px !important;
  height: 36px !important;
  fill: currentColor !important;
  display: block;
}

.composer-video-preview-play-icon,
.yap-video-play-icon,
.dm-video-play-icon,
.composer-video-preview-pause-icon,
.yap-video-pause-icon,
.dm-video-pause-icon {
  display: grid;
  place-items: center;
}

.composer-video-preview-play-icon svg,
.yap-video-play-icon svg,
.dm-video-play-icon svg {
  transform: translateX(2px);
}

.composer-video-preview-pause-icon,
.yap-video-pause-icon,
.dm-video-pause-icon {
  display: none !important;
}

.composer-video-preview-shell.is-playing .composer-video-preview-play-icon,
.yap-video-card.is-playing .yap-video-play-icon,
.dm-video-message-row.dm-video-is-playing .dm-video-play-icon {
  display: none !important;
}

.composer-video-preview-shell.is-playing .composer-video-preview-pause-icon,
.yap-video-card.is-playing .yap-video-pause-icon,
.dm-video-message-row.dm-video-is-playing .dm-video-pause-icon {
  display: grid !important;
}

/* Keep seek + time, but remove the second play button and the separate pill. */
.yap-video-mini-play,
.yapper-video-mini-play {
  display: none !important;
}

.yap-video-controls,
.yapper-video-controls {
  position: absolute !important;
  z-index: 6 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 34px 14px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, transparent 0%, rgba(4,6,13,.20) 25%, rgba(4,6,13,.68) 100%) !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}

.yap-video-stage:hover .yap-video-controls,
.yap-video-card.video-controls-visible .yap-video-controls,
.dm-video-stage:hover .dm-video-controls,
.dm-video-message-row.video-controls-visible .dm-video-controls,
.yap-video-controls:focus-within,
.dm-video-controls:focus-within {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.yap-video-progress,
.yapper-video-progress {
  height: 5px !important;
  min-width: 72px !important;
  margin: 0 !important;
  accent-color: var(--accent, #5c77ff) !important;
}

.yap-video-time,
.yapper-video-time {
  color: #fff !important;
  opacity: .92 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Composer button should stay the same size whether it is play or pause. */
.composer-video-preview-shell.is-playing .composer-video-preview-play {
  width: 68px !important;
  height: 68px !important;
}

@media (hover: none), (pointer: coarse) {
  /* Touch has no hover; paused clips still need an obvious entry point. */
  .composer-video-preview-play,
  .yap-video-card:not(.is-playing) .yap-video-play,
  .dm-video-message-row:not(.dm-video-is-playing) .dm-video-play,
  .video-controls-visible .yap-video-play,
  .video-controls-visible .dm-video-play {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .yap-video-controls,
  .yapper-video-controls {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (max-width: 700px) {
  .composer-video-preview-frame,
  .yap-video-stage,
  .yapper-video-stage {
    border-radius: 32px !important;
  }

  .composer-video-preview-play,
  .yap-video-play,
  .yapper-video-play,
  .composer-video-preview-shell.is-playing .composer-video-preview-play {
    width: 62px !important;
    height: 62px !important;
  }

  .composer-video-preview-play svg,
  .yap-video-play svg,
  .yapper-video-play svg {
    width: 33px !important;
    height: 33px !important;
  }

  .yap-video-controls,
  .yapper-video-controls {
    padding: 30px 12px 10px !important;
    gap: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .composer-video-preview-play,
  .yap-video-play,
  .yapper-video-play,
  .yap-video-controls,
  .yapper-video-controls {
    transition: none !important;
  }
}


/* Source: styles-v481-video-interaction.css */
/* Yapper v4.81 — stable video controls, touch playback, DM menu layering */

/* The center control must NEVER move. Generic Yapper button hover rules and
   earlier video transforms are intentionally neutralized here. */
.composer-video-preview-play,
.yap-video-play,
.yapper-video-play {
  left: 50% !important;
  top: 50% !important;
  translate: -50% -50% !important;
  transform: none !important;
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  transition: opacity .14s ease, filter .12s ease, box-shadow .12s ease !important;
  will-change: opacity;
}

.composer-video-preview-play:hover,
.composer-video-preview-play:active,
.yap-video-play:hover,
.yap-video-play:active,
.yapper-video-play:hover,
.yapper-video-play:active {
  translate: -50% -50% !important;
  transform: none !important;
}

.composer-video-preview-play:hover,
.yap-video-play:hover,
.yapper-video-play:hover {
  filter: brightness(1.055) !important;
}

.composer-video-preview-play:active,
.yap-video-play:active,
.yapper-video-play:active {
  filter: brightness(.975) !important;
}

/* Center the glyph itself rather than compensating with a translate. */
.composer-video-preview-play-icon,
.yap-video-play-icon,
.dm-video-play-icon,
.composer-video-preview-pause-icon,
.yap-video-pause-icon,
.dm-video-pause-icon {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  pointer-events: none !important;
}

.composer-video-preview-play-icon svg,
.yap-video-play-icon svg,
.dm-video-play-icon svg,
.composer-video-preview-pause-icon svg,
.yap-video-pause-icon svg,
.dm-video-pause-icon svg {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  transform-origin: 50% 50% !important;
}

/* Desktop/fine pointer: the center button belongs to the media hover state.
   No delayed mouse-move animation and no positional hover effect. */
@media (hover: hover) and (pointer: fine) {
  .composer-video-preview-play,
  .yap-video-play,
  .yapper-video-play {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .composer-video-preview-frame:hover .composer-video-preview-play,
  .composer-video-preview-shell.video-controls-visible .composer-video-preview-play,
  .yap-video-stage:hover .yap-video-play,
  .yap-video-card.video-controls-visible .yap-video-play,
  .dm-video-stage:hover .dm-video-play,
  .dm-video-message-row.video-controls-visible .dm-video-play,
  .composer-video-preview-play:focus-visible,
  .yap-video-play:focus-visible,
  .dm-video-play:focus-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Touch: paused video always exposes Play. During playback it disappears after
   the one-second reveal window. Tapping the video reveals Pause; only the
   center button changes playback state. */
@media (hover: none), (pointer: coarse) {
  .composer-video-preview-shell:not(.is-playing) .composer-video-preview-play,
  .yap-video-card:not(.is-playing) .yap-video-play,
  .dm-video-message-row:not(.dm-video-is-playing) .dm-video-play {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .composer-video-preview-shell.is-playing:not(.video-controls-visible) .composer-video-preview-play,
  .yap-video-card.is-playing:not(.video-controls-visible) .yap-video-play,
  .dm-video-message-row.dm-video-is-playing:not(.video-controls-visible) .dm-video-play {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .composer-video-preview-shell.video-controls-visible .composer-video-preview-play,
  .yap-video-card.video-controls-visible .yap-video-play,
  .dm-video-message-row.video-controls-visible .dm-video-play {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Keep the actual video perfectly centered and aspect-correct everywhere. */
.composer-video-preview,
.yap-video-card,
.dm-video-message-bubble,
.dm-video-message-row .dm-video-shell {
  margin-left: auto !important;
  margin-right: auto !important;
}

.composer-video-preview-frame,
.yap-video-stage,
.dm-video-stage {
  margin-inline: auto !important;
}

/* DM/group send preview: poster only. No fake play button. Give the preview a
   stable centered viewport so editing/reselecting a portrait clip cannot make
   it jump or crop from one side. */
#dmSnippetPreview.video-preview {
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
}

#dmSnippetPreview.video-preview .dm-snippet-preview-icon,
#dmSnippetPreview.video-preview .dm-snippet-preview-icon.has-artwork {
  box-sizing: border-box !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: #07080d !important;
}

#dmSnippetPreview.video-preview .dm-video-preview-poster {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: #07080d !important;
  border-radius: inherit !important;
}

#dmSnippetPreview.video-preview .dm-video-preview-poster img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  border-radius: inherit !important;
}

#dmSnippetPreview .dm-video-preview-play {
  display: none !important;
}

/* Video message cards remain centered inside both direct and group rows. */
.dm-video-message-row.own > .dm-video-message-bubble,
.dm-video-message-row.incoming .dm-incoming-message-content > .dm-video-message-bubble {
  margin-inline: auto !important;
}

/* The options menu belongs to the three-dot footer, on a layer above video.
   This prevents menu clicks from falling through to playback. */
.dm-video-message-row .dm-video-stage {
  z-index: 1 !important;
  isolation: isolate;
}

.dm-video-message-row .dm-message-footer {
  position: relative !important;
  z-index: 40 !important;
  isolation: isolate;
}

.dm-video-message-row .dm-message-more {
  position: relative !important;
  z-index: 42 !important;
}

.dm-video-message-row .dm-message-menu {
  z-index: 80 !important;
  top: auto !important;
  bottom: calc(100% + 6px) !important;
}

.dm-video-message-row.message-menu-below .dm-message-menu {
  top: calc(100% + 6px) !important;
  bottom: auto !important;
}

.dm-video-message-row.message-menu-open .dm-video-stage {
  pointer-events: none !important;
}

@media (max-width: 640px) {
  .composer-video-preview-play,
  .yap-video-play,
  .yapper-video-play {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
  }

  .composer-video-preview-play-icon svg,
  .yap-video-play-icon svg,
  .dm-video-play-icon svg,
  .composer-video-preview-pause-icon svg,
  .yap-video-pause-icon svg,
  .dm-video-pause-icon svg {
    width: 37px !important;
    height: 37px !important;
  }

  #dmSnippetPreview.video-preview {
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
  }

  #dmSnippetPreview.video-preview .dm-snippet-preview-icon,
  #dmSnippetPreview.video-preview .dm-snippet-preview-icon.has-artwork {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }
}


/* Source: styles-v482-video-seek.css */
/* Yapper v4.82 — deterministic video seek bar on iOS/Safari and desktop.
   Global Yapper input styling must not leak into range controls. */
.yap-video-progress,
.yapper-video-progress {
  --yapper-video-progress: 0%;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 72px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  accent-color: initial !important;
  cursor: pointer !important;
  touch-action: pan-y !important;
}

.yap-video-progress::-webkit-slider-runnable-track,
.yapper-video-progress::-webkit-slider-runnable-track {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,
    var(--accent, #5c77ff) 0%,
    var(--accent, #5c77ff) var(--yapper-video-progress),
    rgba(255,255,255,.58) var(--yapper-video-progress),
    rgba(255,255,255,.58) 100%) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.34) !important;
}

.yap-video-progress::-webkit-slider-thumb,
.yapper-video-progress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: -7px !important;
  padding: 0 !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  border-radius: 50% !important;
  background: var(--accent, #5c77ff) !important;
  box-shadow: 0 2px 9px rgba(0,0,0,.42), 0 0 0 1px rgba(92,119,255,.18) !important;
}

.yap-video-progress::-moz-range-track,
.yapper-video-progress::-moz-range-track {
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.58) !important;
}

.yap-video-progress::-moz-range-progress,
.yapper-video-progress::-moz-range-progress {
  height: 4px !important;
  border-radius: 999px !important;
  background: var(--accent, #5c77ff) !important;
}

.yap-video-progress::-moz-range-thumb,
.yapper-video-progress::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  border-radius: 50% !important;
  background: var(--accent, #5c77ff) !important;
  box-shadow: 0 2px 9px rgba(0,0,0,.42) !important;
}

/* Prevent the thumb from inheriting generic button/input motion. */
.yap-video-progress:active,
.yapper-video-progress:active {
  transform: none !important;
}


/* Source: styles-yapper-next-dm-video-fixes.css */
/* Yapper Next dev4 — restore original DM/group menu + deterministic video chrome. */

/* Composer video attachment thumbnail: center-crop the generated first-frame poster. */
#dmSnippetPreview.video-preview .dm-snippet-preview-icon,
#dmSnippetPreview.video-preview .dm-snippet-preview-icon.has-artwork {
  background: #07080d !important;
}
#dmSnippetPreview.video-preview .dm-video-preview-poster,
#dmSnippetPreview.video-preview .dm-video-preview-poster img {
  width: 100% !important;
  height: 100% !important;
}
#dmSnippetPreview.video-preview .dm-video-preview-poster {
  display: block !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}
#dmSnippetPreview.video-preview .dm-video-preview-poster img {
  display: block !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

/* Keep sent videos centered in direct and group conversations. */
.dm-video-message-row { overflow: visible !important; }
.dm-video-message-row.own > .dm-video-message-bubble,
.dm-video-message-row.incoming .dm-incoming-message-content > .dm-video-message-bubble {
  margin-inline: auto !important;
}

/* ORIGINAL message menu, not a cloned/floating replacement.
   Beta 44 made every footer position:static, which caused the absolutely
   positioned menu to anchor to the entire (very tall) video row. Re-establish
   the footer as the containing block specifically for video rows. */
#dmMessageList .dm-video-message-row .dm-message-footer {
  position: relative !important;
  z-index: 122 !important;
  isolation: isolate !important;
}
#dmMessageList .dm-video-message-row .dm-message-more {
  position: relative !important;
  z-index: 124 !important;
}
#dmMessageList .dm-video-message-row .dm-message-menu.has-reply-actions {
  position: absolute !important;
  z-index: 126 !important;
  top: auto !important;
  bottom: calc(100% + 6px) !important;
}
#dmMessageList .dm-video-message-row.message-menu-below .dm-message-menu.has-reply-actions {
  top: calc(100% + 6px) !important;
  bottom: auto !important;
}
#dmMessageList .dm-video-message-row.message-menu-open {
  z-index: 120 !important;
  overflow: visible !important;
}

/* A transparent hit layer sits above the media while the ORIGINAL menu is open.
   The footer/menu sit above this layer. This prevents taps on Reply/Delete or
   the menu glass from falling through into video play/pause/seek. */
#dmMessageList .dm-video-message-row.message-menu-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 110;
  background: transparent;
  pointer-events: auto;
  touch-action: manipulation;
}
#dmMessageList .dm-video-message-row.message-menu-open .dm-video-stage,
#dmMessageList .dm-video-message-row.message-menu-open .dm-video-shell,
#dmMessageList .dm-video-message-row.message-menu-open .dm-video-controls,
#dmMessageList .dm-video-message-row.message-menu-open .dm-video-play,
#dmMessageList .dm-video-message-row.message-menu-open .dm-video-media {
  pointer-events: none !important;
}

/* Video progress/time chrome follows the SAME visibility state as the center
   Play/Pause control. Earlier v4.80 touch CSS forced it visible permanently. */
.yap-video-controls,
.yapper-video-controls {
  opacity: 0 !important;
  transform: translateY(3px) !important;
  pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .yap-video-stage:hover .yap-video-controls,
  .yap-video-card.video-controls-visible .yap-video-controls,
  .dm-video-stage:hover .dm-video-controls,
  .dm-video-message-row.video-controls-visible .dm-video-controls,
  .yap-video-controls:focus-within,
  .dm-video-controls:focus-within {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

@media (hover: none), (pointer: coarse) {
  /* Paused touch videos always show Play, so the seek/time chrome is visible too. */
  .yap-video-card:not(.is-playing) .yap-video-controls,
  .dm-video-message-row:not(.dm-video-is-playing) .dm-video-controls,
  .yap-video-card.video-controls-visible .yap-video-controls,
  .dm-video-message-row.video-controls-visible .dm-video-controls,
  .yap-video-controls:focus-within,
  .dm-video-controls:focus-within {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* While playback is running and the one-second reveal has expired, both the
     center Pause control and the progress/time chrome disappear together. */
  .yap-video-card.is-playing:not(.video-controls-visible) .yap-video-controls,
  .dm-video-message-row.dm-video-is-playing:not(.video-controls-visible) .dm-video-controls {
    opacity: 0 !important;
    transform: translateY(3px) !important;
    pointer-events: none !important;
  }
}


/* Source: styles-v483-connections-reports.css */
html.connections-screen-open { overflow:hidden!important; }
#yapperConnectionsScreen { box-sizing:border-box!important;position:fixed!important;inset:0!important;margin:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))!important;border:0!important;border-radius:0!important;background:var(--bg)!important;color:var(--text)!important;font-family:inherit;overflow:hidden!important; }
#yapperConnectionsScreen[open] { display:grid!important;grid-template-rows:auto minmax(0,1fr);gap:18px; }
#yapperConnectionsScreen::backdrop { background:var(--background); }
#yapperConnectionsScreen { background:var(--background)!important; }
#yapperConnectionsScreen .connections-screen-header { display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:900px;width:100%;margin:0 auto; }
#yapperConnectionsScreen h2 { margin:0;font-size:24px;font-weight:850; }
#yapperConnectionsScreen .connections-screen-close { display:grid;place-items:center;width:44px!important;min-width:44px!important;height:44px!important;padding:10px!important;border-radius:50%!important;background:var(--glass-control,var(--card))!important;color:var(--text)!important;border:1px solid var(--border)!important; }
#yapperConnectionsScreen .connections-screen-close svg { width:22px;height:22px; }
#yapperConnectionsScreen .connections-screen-scroll { min-height:0;overflow-y:auto;overscroll-behavior:contain;width:100%;max-width:900px;margin:0 auto;scrollbar-gutter:stable; }
#yapperConnectionsScreen .connections-screen-people { display:flex;flex-direction:column;gap:10px; }
#yapperConnectionsScreen .connection-item { display:flex!important;align-items:center;gap:14px;width:100%!important;min-height:74px!important;max-height:none!important;height:auto!important;text-align:left;padding:12px 16px!important;border-radius:var(--ui-radius-surface,30px)!important;color:var(--text)!important;background:var(--glass-control,var(--card))!important;border:1px solid var(--border)!important;flex-shrink:0; }
#yapperConnectionsScreen .connection-item-text { display:flex;flex-direction:column;gap:4px;min-width:0; }
#yapperConnectionsScreen .connection-item-name { font-weight:750; }
#yapperConnectionsScreen .connection-item-username { color:var(--secondary-text);font-size:13px; }
#yapperConnectionsScreen .avatar-connection { flex-shrink:0;width:48px;height:48px; }
#yapperConnectionsScreen .connections-screen-status { padding:16px 4px;color:var(--secondary-text); }
#yapperConnectionsScreen [hidden] { display:none!important; }
#yapFeed .yap-moderation-actions { display:flex;align-self:flex-start;align-items:flex-start;gap:12px;flex:0 0 auto;margin-left:auto; }
#yapFeed .yap-moderation-actions .delete-yap-top { margin-left:0!important; }


/* Source: styles-v484-card-fixes.css */
/* An empty signature never paints a clipped, blank panel, including collection snapshots. */
.profile-card-signature-panel.is-empty,
.profile-card-static-exact .profile-card-signature-panel.is-empty {
  display:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  min-height:0!important;
  transform:none!important;
}
/* Keep the existing reflection while avoiding the filters that made mobile spins costly. */
:is(#profileCardSection,[data-card-part="profileCardSection"]).card-manual-grab .profile-card-spin-gloss,
:is(#profileCardSection,[data-card-part="profileCardSection"]).card-manual-returning .profile-card-spin-gloss {
  display:block!important;
  opacity:var(--card-gloss-strength,.12)!important;
  transform:translate3d(var(--card-gloss-x,0%),var(--card-gloss-y,0%),0) rotate(-7deg)!important;
  filter:none!important;
  pointer-events:none!important;
}


/* Source: styles-v486-playback-wallpaper.css */
/* Keep the existing control design, with a stable hit target on phones. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  html body .yap-video-card .yap-video-stage > .yap-video-play[data-yap-video-action="toggle"] {
    touch-action: manipulation;
    z-index: 7 !important;
  }
}
.yap-video-loading { pointer-events: none !important; }

/* Safari scrolls and clips transformed root pseudo-elements inconsistently.
   Real fixed wrappers contain moving paints; the header's clipping never moves. */
.app-wallpaper-viewport, .app-wallpaper-header { display: none; }
@media (max-width: 760px), (pointer: coarse) {
  html[data-app-wallpaper-layers="ready"][data-app-wallpaper]:not([data-app-wallpaper="default"])::before,
  html[data-app-wallpaper-layers="ready"][data-app-wallpaper]:not([data-app-wallpaper="default"]) > body::after {
    display: none !important;
    content: none !important;
  }
  html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body {
    isolation: isolate;
  }
  html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body > .app-wallpaper-viewport,
  html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body > .app-wallpaper-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--app-wallpaper-viewport-height, 100dvh);
    overflow: hidden;
    pointer-events: none;
    contain: paint;
  }
  html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body > .app-wallpaper-viewport { z-index: -1; }
  html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body > .app-wallpaper-header {
    z-index: 90;
    height: var(--app-wallpaper-mobile-header-bottom, 96px);
  }
  .app-wallpaper-paint {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--app-wallpaper-viewport-height, 100dvh);
    background-color: var(--app-wallpaper-base);
    background-image: var(--app-wallpaper-layer);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  html[data-app-wallpaper-motion="on"] .app-wallpaper-paint {
    /* The enlarged cover crop also zooms uploaded photos. It never tiles or
       mirrors their edges, and both header/feed paints keep the same crop. */
    left: -12px;
    top: -12px;
    width: calc(100% + 24px);
    height: calc(var(--app-wallpaper-viewport-height, 100dvh) + 24px);
    transform: translate3d(var(--app-wallpaper-motion-x, 0px), var(--app-wallpaper-motion-y, 0px), 0);
    will-change: transform;
  }
}


/* Source: styles-v487-video-chrome.css */
/* One state hides/reveals Pause and the seek bar together. This overrides
   legacy touch hover/focus rules, including a range left focused by a tap. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  html body .yap-video-card[data-video-chrome="hidden"] .yap-video-stage > :is(.yap-video-play, .yap-video-controls) {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  html body .yap-video-card[data-video-chrome="visible"] .yap-video-stage > :is(.yap-video-play, .yap-video-controls) {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Video captions use the same grid alignment as image captions. The existing
   own/incoming caption rules now align short bubbles to the correct edge. */
#dmMessageList .dm-video-message-bubble {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 6px;
}


/* Source: styles-v488-motion.css */
/* Exits have their own timing and path, without replaying the entrance spring.
   Individual translate/scale work with the legacy transform rules and card 3D. */
:root { --yapper-motion-exit: cubic-bezier(.32, 0, .67, .35); }
.modal-overlay.is-closing:not(.hidden),
.release465-overlay.is-closing:not(.hidden) {
  animation: yapperBackdropOut 180ms linear both !important;
  pointer-events: none !important;
}
.modal-overlay.is-closing:not(.hidden) > .modal-surface,
.modal-overlay.is-closing:not(.hidden) > .delete-modal,
.modal-overlay.is-closing:not(.hidden) > .dm-modal,
.modal-overlay.is-closing:not(.hidden) > .plus-profile-editor-modal,
.release465-overlay.is-closing:not(.hidden) > .release465-card,
dialog.yapper-dialog-closing {
  animation: yapperSurfaceOut 180ms var(--yapper-motion-exit) both !important;
}
dialog.yapper-dialog-closing::backdrop { animation: yapperBackdropOut 180ms linear both !important; }
.profile-status-duration-menu.is-closing,
.composer-attachment-menu.yapper-menu-closing,
.dm-snippets-menu.yapper-menu-closing,
.dm-message-row.message-menu-open.yapper-menu-closing .dm-message-menu,
.dm-group-member.is-menu-open.yapper-menu-closing .dm-group-member-menu,
#storyDialog .story-menu.yapper-menu-closing {
  animation: yapperMenuOut 150ms var(--yapper-motion-exit) both !important;
  pointer-events: none !important;
}
#profileEditSection.is-closing,
.profile-connections-panel.is-closing,
.settings-card.is-closing {
  animation: yapperPanelOut 180ms var(--yapper-motion-exit) both !important;
  pointer-events: none !important;
}
@keyframes yapperBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes yapperSurfaceOut {
  0% { opacity: 1; translate: 0 0; scale: 1; }
  25% { opacity: 1; }
  100% { opacity: 0; translate: 0 8px; scale: .978; }
}
@keyframes yapperMenuOut {
  from { opacity: 1; translate: 0 0; scale: 1; }
  to { opacity: 0; translate: 0 3px; scale: .97; }
}
@keyframes yapperPanelOut {
  from { opacity: 1; translate: 0 0; scale: 1; }
  to { opacity: 0; translate: -6px 0; scale: .994; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.is-closing:not(.hidden),
  .modal-overlay.is-closing:not(.hidden) > *,
  .release465-overlay.is-closing,
  .yapper-menu-closing,
  .yapper-menu-closing .dm-message-menu,
  .yapper-menu-closing .dm-group-member-menu,
  dialog.yapper-dialog-closing,
  dialog.yapper-dialog-closing::backdrop,
  #profileEditSection.is-closing,
  .profile-status-duration-menu.is-closing,
  .profile-connections-panel.is-closing,
  .settings-card.is-closing { animation-duration: .001ms !important; }
}


/* Restore motion on the current connections screen. */
/* Add after the existing current motion rules. Reuse current motion paths. */
#yapperConnectionsScreen[open]:not(.yapper-dialog-closing) {
  animation: yapperPanelIn 330ms var(--yapper-motion-spring) both !important;
}
#yapperConnectionsScreen .connections-screen-people > .connection-item {
  animation: yapperContentIn 390ms var(--yapper-motion-spring) both;
}
@media (prefers-reduced-motion: reduce) {
  #yapperConnectionsScreen[open],
  #yapperConnectionsScreen .connections-screen-people > .connection-item {
    animation-duration: .001ms !important;
  }
}


/* Important declarations in a named layer outrank legacy unlayered motion
   rules, so a user's Reduce Motion preference survives the full cascade. */
@layer yapper-motion-preferences {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* Closing surfaces keep their resting base transform while the shared
   individual translate/scale exit runs. */
.modal-overlay.is-closing:not(.hidden) > .modal-surface,
.modal-overlay.is-closing:not(.hidden) > .delete-modal,
.modal-overlay.is-closing:not(.hidden) > .dm-modal {
  transform: none !important;
}

/* Shared motion for the current native dialogs. */
/* Place after existing v488 motion and geometry rules. All paths already exist. */
#storyDialog[open]:not(.yapper-dialog-closing),
dialog#yapperStickerDialog[open]:not(.yapper-dialog-closing),
#yapperQrScanner[open]:not(.yapper-dialog-closing) {
  animation: yapperSurfaceIn var(--yapper-motion-surface) var(--yapper-motion-spring) both !important;
}
#storyDialog[open]:not(.yapper-dialog-closing)::backdrop,
#yapperStickerDialog[open]:not(.yapper-dialog-closing)::backdrop,
#yapperQrScanner[open]:not(.yapper-dialog-closing)::backdrop {
  animation: yapperBackdropIn 210ms ease-out both !important;
}
/* IDs are necessary: Sticker open previously wins over generic dialog exit. */
#storyDialog.yapper-dialog-closing,
dialog#yapperStickerDialog.yapper-dialog-closing,
#yapperQrScanner.yapper-dialog-closing {
  animation: yapperSurfaceOut 180ms var(--yapper-motion-exit) both !important;
}
#storyDialog.yapper-dialog-closing::backdrop,
#yapperStickerDialog.yapper-dialog-closing::backdrop,
#yapperQrScanner.yapper-dialog-closing::backdrop {
  animation: yapperBackdropOut 180ms linear both !important;
}
@media (prefers-reduced-motion: reduce) {
  #storyDialog[open],
  dialog#yapperStickerDialog[open],
  #yapperQrScanner[open],
  #storyDialog[open]::backdrop,
  #yapperStickerDialog[open]::backdrop,
  #yapperQrScanner[open]::backdrop {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}