/* Yapper v5.27 — a shared, tactile motion language.
   Load after the authored styles. Individual scale/translate leave card 3D,
   wallpaper tracking, scene swipes, and positioned media controls intact. */

:root {
  --ym-spring: cubic-bezier(.18, 1.12, .32, 1);
  --ym-settle: cubic-bezier(.16, 1, .3, 1);
  --ym-soft: cubic-bezier(.22, .7, .24, 1);
  --ym-press: cubic-bezier(.2, .7, .25, 1);
  --ym-exit: cubic-bezier(.4, 0, .75, .25);
  --ym-control-time: 390ms;
  --ym-press-time: 140ms;
  --ym-enter-surface: 460ms;
  --ym-enter-menu: 340ms;
  --ym-enter-panel: 420ms;
  --ym-enter-content: 420ms;
  --ym-exit-surface: 220ms;
  --ym-exit-menu: 160ms;
  --ym-exit-panel: 200ms;
  --ym-exit-content: 200ms;
  --ym-surface-travel: 28px;
  --ym-surface-start: .92;
  --ym-panel-travel: 22px;
  --ym-content-travel: 16px;
  --ym-accent: var(--primary, #5c77ff);
  --ym-focus-ring: color-mix(in srgb, var(--ym-accent) 23%, transparent);
  --ym-glass-glint: rgba(255, 255, 255, .45);
  --ym-glass-wash: rgba(255, 255, 255, .20);
  --ym-glass-contact: rgba(24, 30, 56, .12);

  /* Existing authored hooks inherit the same family. */
  --yapper-motion-spring: var(--ym-settle);
  --yapper-motion-soft: var(--ym-soft);
  --yapper-motion-press: var(--ym-press);
  --yapper-motion-fast: 160ms;
  --yapper-motion-ui: var(--ym-control-time);
  --yapper-motion-menu: var(--ym-enter-menu);
  --yapper-motion-surface: var(--ym-enter-surface);
  --yapper-motion-exit: var(--ym-exit);
}

body[data-theme="dark"] {
  --ym-glass-glint: rgba(255, 255, 255, .22);
  --ym-glass-wash: rgba(255, 255, 255, .065);
  --ym-glass-contact: rgba(0, 0, 0, .24);
}

/* Poll percentages live in the authored inline value. Registering the value
   lets new results fill smoothly while the existing gradient remains intact. */
@property --poll-percent {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

/* Important motion declarations outrank the old unlayered motion clamps.
   The already-declared preferences layer has higher important priority. */
@layer yapper-juicy-motion {
  /* Local highlights give ordinary controls depth without adding another
     backdrop filter, changing their hit boxes, or repainting entire menus. */
  :is(.primary-button, .secondary-button, .profile-card-animation-option,
      .profile-card-friend-option):not(:disabled) {
    background-image: linear-gradient(155deg, var(--ym-glass-wash), transparent 62%) !important;
    box-shadow: inset 0 1px 0 var(--ym-glass-glint),
      inset 0 -1px 0 var(--ym-glass-contact), 0 4px 10px var(--ym-glass-contact) !important;
  }
  :is(.primary-button, .secondary-button, .profile-card-animation-option,
      .profile-card-friend-option):is(:active, .ym-pressing, .ym-keypress):not(:disabled) {
    box-shadow: inset 0 1px 3px var(--ym-glass-contact),
      inset 0 -1px 0 var(--ym-glass-glint), 0 1px 3px var(--ym-glass-contact) !important;
  }
  .profile-card-editor-section {
    box-shadow: inset 0 1px 0 var(--ym-glass-glint),
      inset 0 -1px 0 var(--ym-glass-contact) !important;
  }
  /* A lit upper face and a dark contact edge create thickness with a static
     paint. Do not stack extra backdrop filters or animate a full-screen blur. */
  :is(.dm-modal, .settings-modal, .dm-message-menu, .dm-snippets-menu,
      .composer-attachment-menu) {
    background-image: linear-gradient(145deg, var(--ym-glass-wash), transparent 42%),
      linear-gradient(325deg, var(--ym-glass-contact), transparent 38%) !important;
    box-shadow: inset 0 1px 0 var(--ym-glass-glint),
      inset 0 -1px 0 var(--ym-glass-contact), 0 12px 30px var(--ym-glass-contact) !important;
  }
  #mobileDock .mobile-dock-tabs {
    background-image: linear-gradient(150deg, var(--ym-glass-wash), transparent 48%) !important;
    box-shadow: inset 0 1px 0 var(--ym-glass-glint),
      inset 0 -1px 0 var(--ym-glass-contact), 0 8px 20px var(--ym-glass-contact) !important;
  }
  .dm-message-menu {
    background-color: color-mix(in srgb, var(--card) 94%, transparent) !important;
  }
  :is(button, a[href], summary, [role="button"], [role="tab"],
      [role="option"], input[type="checkbox"], input[type="radio"], .ym-control) {
    --ym-hover-scale: 1.065;
    --ym-press-x: .94;
    --ym-press-y: .90;
    transform-origin: center !important;
    transition-property: scale, transform, background-color, border-color, color,
      opacity, box-shadow, outline-color, outline-offset, text-decoration-color !important;
    transition-duration: var(--ym-control-time) !important;
    transition-timing-function: var(--ym-spring) !important;
    -webkit-tap-highlight-color: transparent;
  }

  .ym-control:is(.notification-item, .search-result, .connection-item, .saved-account-item,
      .dm-inbox-item, .dm-search-result, .dm-group-search-result, .employee-search-result,
      .composer-attachment-menu-item, .dm-group-member, .dm-contact-info-row-action,
      .app-wallpaper-choice, .frame-picker-choice, .sticker-choice, .yc-square) {
    --ym-hover-scale: 1.022;
    --ym-press-x: .974;
    --ym-press-y: .95;
  }

  /* Vertical lists keep motion inside their existing padding. A legacy
     transform must not multiply the shared scale and create a second axis. */
  :is(.dm-inbox-list, .dm-search-results, .dm-group-search-results) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
  }
  :is(.dm-inbox-item, .dm-search-result, .dm-group-search-result) {
    transform: none !important;
    min-width: 0;
    max-width: 100%;
  }

  /* Menus belong to the dots' footer, rather than the whole message. Keeping
     this containing block stable also works for tall image/video messages. */
  #dmMessageList .dm-message-row .dm-message-footer {
    position: relative !important;
  }

  :is(.modal-close-button, .password-toggle-button, .avatar-profile-button,
      .composer-attachment-button, .mobile-dock-edge-button, .mobile-dock-create-button,
      .dm-close-button, .dm-back-button, .dm-message-more, .profile-music-toggle,
      .yap-music-preview-toggle, .story-icon, .story-add, .yc-add, .yc-close,
      .yc-prev, .yc-next, .yqs-close, .sticker-close, .sticker-more) {
    --ym-hover-scale: 1.09;
    --ym-press-x: .88;
    --ym-press-y: .86;
  }

  @media (hover: hover) and (pointer: fine) {
    :is(button, a[href], summary, [role="button"], [role="tab"],
        [role="option"], input[type="checkbox"], input[type="radio"], .ym-control):is(:hover, .ym-hovered):where(:not(:disabled):not([aria-disabled="true"]):not([inert]):not([data-ym-motion="none"]):not(.plus-overlay-object):not(.plus-overlay-handle)) {
      scale: var(--ym-hover-scale, 1.065) !important;
    }
  }

  :is(button, a[href], summary, [role="button"], [role="tab"],
      [role="option"], input[type="checkbox"], input[type="radio"], .ym-control):is(:active, .ym-pressing, .ym-keypress):where(:not(:disabled):not([aria-disabled="true"]):not([inert]):not([data-ym-motion="none"]):not(.plus-overlay-object):not(.plus-overlay-handle)) {
    scale: var(--ym-press-x, .94) var(--ym-press-y, .90) !important;
    transition-duration: var(--ym-press-time) !important;
    transition-timing-function: var(--ym-press) !important;
  }

  /* Whole rows do not grow again around the separate action being pressed. */
  :is(button, a[href], [role="button"], .ym-control):has(
      :is(button, a[href], [role="button"], .ym-control):is(:hover, .ym-hovered, .ym-pressing, .ym-keypress)) {
    scale: 1 !important;
  }

  :is(button, a[href], summary, [role="button"], [role="tab"],
      [role="option"], input[type="checkbox"], input[type="radio"], .ym-control):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ym-accent) 85%, white) !important;
    outline-offset: 4px !important;
  }

  a[href] {
    text-underline-offset: .18em;
    transition: color 180ms var(--ym-soft), text-decoration-color 180ms var(--ym-soft),
      text-underline-offset 240ms var(--ym-spring), scale var(--ym-control-time) var(--ym-spring) !important;
  }
  a[href]:is(:hover, :focus-visible) { text-underline-offset: .28em; }

  /* Runtime positions only static hosts; absolute close/play buttons stay put. */
  .ym-positioned { position: relative; }
  #cardMoodModal .card-mood-choice {
    --ym-hover-scale: 1.14;
    --ym-press-x: .86;
    --ym-press-y: .80;
    /* Center before scaling: a transform translation is scaled by individual
       scale and would drag the face diagonally during a press. */
    translate: -50% -50% !important;
    transform: none !important;
    animation: ymMoodChoiceIn 380ms var(--ym-settle) both !important;
    animation-delay: var(--ym-mood-delay, 0ms) !important;
  }
  #cardMoodModal .card-mood-choice:nth-child(2) { --ym-mood-delay: 30ms; }
  #cardMoodModal .card-mood-choice:nth-child(3) { --ym-mood-delay: 60ms; }
  #cardMoodModal .card-mood-choice:nth-child(4) { --ym-mood-delay: 90ms; }
  #cardMoodModal .card-mood-choice:nth-child(5) { --ym-mood-delay: 120ms; }
  #cardMoodModal .card-mood-choice:nth-child(6) { --ym-mood-delay: 150ms; }
  #cardMoodModal .card-mood-modal-surface {
    /* A full-screen constellation travels vertically; its faces keep their
       horizontal positions while the selected mood is dismissed. */
    --ym-surface-start: 1;
    --ym-surface-peak: 1;
    --ym-surface-settle: 1;
    --ym-surface-tuck-x: 1;
    --ym-surface-tuck-y: 1;
    --ym-surface-exit-x: 1;
    --ym-surface-exit-y: 1;
  }
  #profileCardMoodPanel[role="button"] { --ym-hover-scale: 1.025; --ym-press-x: .98; --ym-press-y: .95; }
  .yc-stage[role="button"] { --ym-hover-scale: 1.012; --ym-press-x: .99; --ym-press-y: .976; }
  .ym-control:is([data-dm-profile-username], [data-action="open-quoted-yap"], [data-collection-open-index]) { --ym-hover-scale: 1.035; }
  .ym-inline-control { display: inline-block !important; vertical-align: baseline; max-width: 100%; }
  .ym-ripple-host { isolation: isolate; }
  .ym-ripple {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
  }
  .ym-ripple::before {
    content: "";
    position: absolute;
    left: var(--ym-x, 50%);
    top: var(--ym-y, 50%);
    width: var(--ym-ripple-size, 200%);
    aspect-ratio: 1;
    border-radius: 50%;
    translate: -50% -50%;
    background: color-mix(in srgb, currentColor 17%, transparent);
    pointer-events: none;
    animation: ymRipple 560ms var(--ym-settle) both !important;
  }

  /* Text remains stable while the field border, fill, and focus halo settle. */
  :is(input:not([type="file"]):not([type="hidden"]):not([type="range"]), textarea, select) {
    transition-property: border-color, background-color, box-shadow, color, border-radius, scale !important;
    transition-duration: 220ms !important;
    transition-timing-function: var(--ym-soft) !important;
  }
  :is(input:not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible {
    border-color: var(--ym-accent) !important;
    box-shadow: 0 0 0 4px var(--ym-focus-ring) !important;
    scale: 1.006;
  }
  .profile-cd-toggle::after {
    transition: opacity 130ms ease, transform 300ms var(--ym-spring) !important;
  }
  .profile-cd-toggle:checked::after { animation: ymCheck 330ms var(--ym-settle) both !important; }
  input[type="range"]::-webkit-slider-thumb {
    transition: scale var(--ym-control-time) var(--ym-spring), box-shadow 220ms ease !important;
  }
  input[type="range"]::-moz-range-thumb {
    transition: scale var(--ym-control-time) var(--ym-spring), box-shadow 220ms ease !important;
  }
  input[type="range"]:is(:hover, :focus-visible)::-webkit-slider-thumb { scale: 1.22; }
  input[type="range"]:is(:hover, :focus-visible)::-moz-range-thumb { scale: 1.22; }
  input[type="range"]:active::-webkit-slider-thumb { scale: 1.35 .9; }
  input[type="range"]:active::-moz-range-thumb { scale: 1.35 .9; }

  :is(.dm-theme-choice-check, .dm-group-select-state, .frame-picker-choice-check,
      .app-wallpaper-choice-check, .theme-choice-check) {
    transition: scale var(--ym-control-time) var(--ym-spring), opacity 220ms ease,
      background-color 180ms ease, color 180ms ease !important;
  }
  :is(.dm-theme-choice.is-selected .dm-theme-choice-check,
      .dm-group-search-result.is-selected .dm-group-select-state,
      .frame-picker-choice.active .frame-picker-choice-check) {
    animation: ymSelectionPop 460ms var(--ym-settle) both !important;
  }
  :is(.yap-poll-option-fill, .yap-poll-fill, .poll-result-fill, .dm-poll-option-fill) {
    transition: width 520ms var(--ym-settle), opacity 180ms ease !important;
  }
  .yap-poll-option::before {
    transition: width 520ms var(--ym-settle), opacity 180ms ease !important;
  }
  .yap-poll-option.selected .yap-poll-option-text::before {
    display: inline-block;
    animation: ymSelectionPop 460ms var(--ym-settle) both !important;
  }
  .ym-control.yap-poll-option {
    transition: --poll-percent 520ms var(--ym-settle), scale var(--ym-control-time) var(--ym-spring),
      border-color 180ms ease, background-color 180ms ease, color 180ms ease !important;
  }
  .mobile-dock-highlight {
    /* JS alone owns translation. Scale and the rim can spring independently
       without retargeting a combined transform during a slide. */
    translate: var(--mobile-dock-highlight-x, 3px) var(--mobile-dock-highlight-y, 3px) !important;
    transform: scale(var(--mobile-dock-highlight-scale, 1)) !important;
    transition: transform 360ms var(--ym-spring), opacity 220ms ease,
      background 220ms ease, border-color 220ms ease, box-shadow 300ms ease !important;
    overflow: visible !important;
    z-index: 3 !important;
  }
  .mobile-dock-optical-lens {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }
  .mobile-dock-optical-lens svg { overflow: visible; }
  .mobile-dock-icon-wrap { z-index: auto !important; }
  .mobile-dock-badge { z-index: 5 !important; }
  .mobile-dock-tabs { touch-action: none !important; }
  #postButton.posted-state {
    animation: ymPostAcknowledged 420ms var(--ym-settle) both !important;
  }
  /* Only phone conversations fill the viewport. Desktop and secondary
     views retain their established geometry. */
  @media (max-width: 700px) {
  html:has(#dmModal[data-dm-view="conversation"]:not(.hidden)) {
    scrollbar-gutter: auto !important;
  }
  #dmModal[data-dm-view="conversation"] {
    inset: var(--dm-chat-top, 0px) 0 auto !important;
    width: 100vw !important;
    height: var(--dm-chat-height, 100dvh) !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  #dmModal[data-dm-view="conversation"] > .dm-modal {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }
  #dmModal[data-dm-chat-visited="true"]:not(.hidden, .is-closing, .yapper-dialog-closing, .ym-leaving) > .dm-modal {
    animation: none !important;
    scale: none !important;
    translate: none !important;
    opacity: 1 !important;
  }
  #dmModal[data-dm-view="conversation"].is-closing > .dm-modal {
    animation: ymScreenOut var(--ym-exit-surface) var(--ym-exit) both !important;
  }
  body:has(#dmModal[data-dm-view="conversation"]:not(.hidden)) #mobileDock {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  }
  /* Keep the capsule's circles and unread badges in a stable stacking plane.
     Only the artwork compresses; the optical selector supplies the lift. */
  #mobileDock .mobile-dock-tab { scale: none !important; }
  #mobileDock .mobile-dock-tab svg {
    transition: scale var(--ym-control-time) var(--ym-spring) !important;
    transform-origin: center !important;
  }
  #mobileDock .mobile-dock-tab:is(:active, .ym-pressing, .ym-keypress) svg {
    scale: .9 .87 !important;
    transition-duration: var(--ym-press-time) !important;
  }
  @media (hover: hover) and (pointer: fine) {
    #mobileDock .mobile-dock-tab:is(:hover, .ym-hovered):not(.ym-pressing, .ym-keypress, :active) svg { scale: 1.1 !important; }
  }
  #mobileDock .mobile-dock-tab.ym-feedback > .mobile-dock-icon-wrap {
    animation: none !important;
  }
  #mobileDock .mobile-dock-tab.ym-feedback svg {
    animation: ymDockIconSettle 420ms var(--ym-settle) both !important;
  }
  /* The existing blue selector owns its edge. Refraction is painted inside it. */
  .mobile-dock-highlight::before { content: none !important; }
  @media (max-width: 700px) {
    .mobile-dock-tab > .mobile-dock-label { display: none !important; }
  }

  /* Calm card lift lets the actions inside remain the more tactile element. */
  :is(#yapFeed > .yap, .recommendation-card, .plus-code-history-item,
      .dm-contact-info-card) {
    transition: translate 350ms var(--ym-spring), scale 350ms var(--ym-spring),
      border-color 220ms ease, box-shadow 350ms var(--ym-soft) !important;
  }
  @media (hover: hover) and (pointer: fine) {
    :is(#yapFeed > .yap, .recommendation-card, .plus-code-history-item,
        .dm-contact-info-card):hover:not(:has(
        :is(button, a[href], [role="button"], input, textarea, select, .ym-control):is(:hover, :focus-visible, .ym-pressing))) {
      translate: 0 -3px !important;
      scale: 1.006 !important;
    }
  }

  /* The runtime adds one arrival for a new identity, rather than replaying
     whole feeds whenever a realtime refresh replaces their DOM. */
  :is(#yapFeed > .yap, .search-results > .search-result,
      .notifications-list > .notification-item, .profile-connections-list > .connection-item,
      .connections-screen-people > .connection-item, .dm-search-results > .dm-search-result,
      .dm-group-search-results > .dm-group-search-result, .dm-inbox-list > .dm-inbox-item,
      .sticker-grid > .sticker-choice, .plus-code-history > .plus-code-history-item,
      .dm-group-selected-members > .dm-group-selected-chip):not(.ym-arriving):not([data-yapper-exit-family]) {
    animation: none !important;
  }
  :is(#yapFeed > .yap, .search-results > .search-result,
      .notifications-list > .notification-item, .profile-connections-list > .connection-item,
      .connections-screen-people > .connection-item, .dm-search-results > .dm-search-result,
      .dm-group-search-results > .dm-group-search-result, .dm-inbox-list > .dm-inbox-item,
      .sticker-grid > .sticker-choice, .plus-code-history > .plus-code-history-item,
      .dm-group-selected-members > .dm-group-selected-chip).ym-arriving:not(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving) {
    animation: yapperContentIn var(--ym-enter-content) var(--ym-settle) both !important;
  }
  :is(.search-results, .notifications-list, .profile-connections-list,
      .connections-screen-people, .dm-search-results, .dm-group-search-results,
      .dm-inbox-list, .sticker-grid) > :nth-child(2) { animation-delay: 28ms !important; }
  :is(.search-results, .notifications-list, .profile-connections-list,
      .connections-screen-people, .dm-search-results, .dm-group-search-results,
      .dm-inbox-list, .sticker-grid) > :nth-child(3) { animation-delay: 56ms !important; }
  :is(.search-results, .notifications-list, .profile-connections-list,
      .connections-screen-people, .dm-search-results, .dm-group-search-results,
      .dm-inbox-list, .sticker-grid) > :nth-child(n+4) { animation-delay: 84ms !important; }

  .ym-arriving:not(.ym-control):not([data-ym-motion="none"]):not(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving) {
    animation: yapperContentIn var(--ym-enter-content) var(--ym-settle) both !important;
    animation-delay: var(--ym-stagger, var(--ym-delay, 0ms)) !important;
  }
  .ym-control.ym-arriving:not(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving) {
    animation: ymControlIn 340ms var(--ym-settle) both !important;
  }
  .ym-control.ym-arriving:is(.connection-item, .notification-item, .search-result,
      .saved-account-item, .dm-inbox-item, .dm-search-result, .employee-search-result, .sticker-pick,
      .story-chip, .yap-share-target):not(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving) {
    animation: yapperContentIn var(--ym-enter-content) var(--ym-settle) both !important;
    animation-delay: var(--ym-stagger, 0ms) !important;
  }
  .ym-leaving {
    animation: ymContentOut var(--ym-exit-content) var(--ym-exit) both !important;
    pointer-events: none !important;
  }
  :is(.ym-content-enter, .ym-content-entering):not([data-ym-motion="none"]):not(#profileCardSection.card-intro-active):not(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving) {
    animation: yapperContentIn var(--ym-enter-content) var(--ym-settle) both !important;
  }
  :is(.ym-content-leaving, .ym-swap-leaving) {
    animation: ymContentOut var(--ym-exit-content) var(--ym-exit) both !important;
    pointer-events: none !important;
  }

  /* Menus expand from their trigger; closing compresses and falls away. */
  :is(.composer-attachment-menu, .dm-snippets-menu, .profile-status-duration-menu,
      .dm-message-menu, .dm-group-member-menu, .story-menu, [role="menu"], .ym-menu) {
    transform-origin: var(--ym-origin, 50% 0%) !important;
  }
  .composer-attachment-menu {
    --ym-origin: 100% 100%;
    --ym-menu-enter-y: 8px;
    --ym-menu-rebound-y: -2px;
    --ym-menu-settle-y: 1px;
    --ym-menu-exit-y: 8px;
    transform: none !important;
  }
  :is(.composer-attachment-menu, .dm-snippets-menu, .profile-status-duration-menu,
      .story-menu, .ym-menu):not(.hidden):not([hidden]):not(.is-closing):not(.yapper-menu-closing):not(.ym-leaving),
  .dm-message-row.message-menu-open:not(.yapper-menu-closing) .dm-message-menu,
  .dm-group-member.is-menu-open:not(.yapper-menu-closing) .dm-group-member-menu,
  [popover]:popover-open,
  [role="menu"].ym-arriving {
    animation: yapperMenuIn var(--ym-enter-menu) var(--ym-settle) both !important;
  }

  /* All authored overlay surfaces and native dialogs share the larger spring. */
  :is(.modal-overlay, .release465-overlay, .card-mood-overlay, .plus-yapper-color-overlay):not(.hidden),
  :is(.modal-overlay, .release465-overlay, .card-mood-overlay, .plus-yapper-color-overlay):not(.hidden) > *,
  dialog[open], :is(.ym-content-enter, .ym-content-entering, .ym-content-leaving, .ym-swap-leaving):not(.ym-control) {
    transition-property: none !important;
  }
  /* The older reverse-transition sheet leaves surfaces at its hidden
     translateY(18px)/.965 pose. This family owns the surface pose itself. */
  :is(.modal-overlay, .release465-overlay) > :is(.modal-surface, .delete-modal, .dm-modal, .plus-profile-editor-modal, .release465-card),
  dialog[open] { transform: none !important; transform-origin: 50% 55% !important; }
  :is(.modal-overlay, .release465-overlay):not(.hidden):not(.is-closing):not(.yapper-dialog-closing):not(.ym-leaving) {
    animation: yapperBackdropIn 260ms var(--ym-soft) both !important;
  }
  :is(.modal-overlay, .release465-overlay):not(.hidden):not(.is-closing):not(.yapper-dialog-closing):not(.ym-leaving)
    > :is(.modal-surface, .delete-modal, .dm-modal, .plus-profile-editor-modal, .release465-card),
  dialog[open]:not(.modal-overlay, .release465-overlay):not(.yapper-dialog-closing):not(.ym-leaving) {
    animation: yapperSurfaceIn var(--ym-enter-surface) var(--ym-settle) both !important;
    transform-origin: 50% 55% !important;
  }
  dialog[open]:not(.yapper-dialog-closing):not(.ym-leaving)::backdrop {
    animation: yapperBackdropIn 260ms var(--ym-soft) both !important;
  }
  :is(.dm-panel, .dm-contact-info-panel, .dm-theme-panel, .profile-connections-panel,
      .quick-account-login-panel, .sticker-create):not(.hidden):not([hidden]):not(.is-closing):not(.ym-leaving):not(.ym-content-leaving):not(.ym-swap-leaving),
  .plus-editor-panel.mobile-active:not(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving),
  :is(.settings-card.is-opening, .profile-section-entering, .auth-panel-entering,
      .replies-area.is-opening, .yap-replies-panel.is-opening, .reply-composer.is-opening, .ym-panel.ym-arriving) {
    animation: yapperPanelIn var(--ym-enter-panel) var(--ym-settle) both !important;
  }
  .story-comments-layer:not([hidden]):not(.ym-content-leaving):not(.ym-leaving) > .story-comments-sheet {
    animation: yapperPanelIn var(--ym-enter-panel) var(--ym-settle) both !important;
  }
  .story-comments-layer:is(.ym-content-leaving, .ym-leaving) {
    animation: yapperBackdropOut var(--ym-exit-panel) linear both !important;
  }
  .story-comments-layer:is(.ym-content-leaving, .ym-leaving) > .story-comments-sheet {
    animation: yapperPanelOut var(--ym-exit-panel) var(--ym-exit) both !important;
  }
  :is(.composer-quote-preview, .composer-snippet-preview, .dm-reply-preview, .dm-reply-composer,
      .dm-voice-preview, .dm-voice-recorder-state, .music-verification-preview,
      .vocal-composer, #dmUnlockPanel, #profileCardEditSection,
      #profileCardCollectionViewer, #profileCardMainPanel, #profileCardCollectionPanel,
      #profileViewSection,
      .new-account-setup [data-setup-step]):is(.ym-arriving, .ym-content-enter, .ym-content-entering):not(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving) {
    animation: yapperPanelIn var(--ym-enter-panel) var(--ym-settle) both !important;
  }
  :is(.plus-yapper-color-overlay, .card-mood-overlay):not(.hidden):not([hidden]):not(.is-closing):not(.ym-leaving) {
    animation: yapperBackdropIn 260ms var(--ym-soft) both !important;
  }
  :is(.plus-yapper-color-overlay, .card-mood-overlay):not(.hidden):not([hidden]):not(.is-closing):not(.ym-leaving)
    > :is(.plus-yapper-color-panel, .card-mood-modal, .card-mood-modal-surface) {
    animation: yapperSurfaceIn var(--ym-enter-surface) var(--ym-settle) both !important;
  }

  /* The closing helper reads these actual family durations before removing. */
  :is(.modal-overlay, .release465-overlay, .plus-yapper-color-overlay, .card-mood-overlay):is(.is-closing, .yapper-dialog-closing, .ym-leaving):not(.hidden) {
    animation: yapperBackdropOut var(--ym-exit-surface) linear both !important;
    pointer-events: none !important;
  }
  :is(.modal-overlay, .release465-overlay):is(.is-closing, .yapper-dialog-closing, .ym-leaving):not(.hidden)
    > :is(.modal-surface, .delete-modal, .dm-modal, .plus-profile-editor-modal, .release465-card),
  :is(.plus-yapper-color-overlay, .card-mood-overlay):is(.is-closing, .yapper-dialog-closing, .ym-leaving):not(.hidden)
    > :is(.plus-yapper-color-panel, .card-mood-modal, .card-mood-modal-surface),
  dialog:is(.yapper-dialog-closing, .ym-leaving):not(.modal-overlay, .release465-overlay),
  [data-yapper-exit-family="surface"]:not(.modal-overlay, .release465-overlay, .plus-yapper-color-overlay, .card-mood-overlay):is(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving),
  .ym-surface.ym-leaving {
    animation: yapperSurfaceOut var(--ym-exit-surface) var(--ym-exit) both !important;
  }
  [data-yapper-exit-family="content"]:is(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving) {
    animation: ymContentOut var(--ym-exit-content) var(--ym-exit) both !important;
    pointer-events: none !important;
  }
  dialog:is(.yapper-dialog-closing, .ym-leaving)::backdrop {
    animation: ymNativeBackdropOut var(--ym-exit-surface) linear both !important;
  }
  :is(.modal-overlay, .release465-overlay).yapper-dialog-closing:not(.hidden) {
    animation: yapperBackdropOut var(--ym-exit-surface) linear both !important;
    pointer-events: none !important;
  }
  :is(.modal-overlay, .release465-overlay).yapper-dialog-closing:not(.hidden)
    > :is(.modal-surface, .delete-modal, .dm-modal, .release465-card) {
    animation: yapperSurfaceOut var(--ym-exit-surface) var(--ym-exit) both !important;
  }
  :is(.profile-status-duration-menu.is-closing, .composer-attachment-menu.yapper-menu-closing,
      .dm-snippets-menu.yapper-menu-closing, .story-menu.yapper-menu-closing,
      .ym-menu.ym-leaving),
  [data-yapper-exit-family="menu"]:is(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving),
  .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 {
    animation: yapperMenuOut var(--ym-exit-menu) var(--ym-exit) both !important;
    pointer-events: none !important;
  }
  :is(#profileEditSection.is-closing, .profile-connections-panel.is-closing,
      .settings-card.is-closing, .profile-section-leaving, .auth-panel-leaving,
      .replies-area.is-closing, .yap-replies-panel.is-closing, .reply-composer.is-closing, .ym-panel.ym-leaving),
  [data-yapper-exit-family="panel"]:not(.story-comments-layer):is(.is-closing, .ym-leaving, .ym-content-leaving, .ym-swap-leaving) {
    animation: yapperPanelOut var(--ym-exit-panel) var(--ym-exit) both !important;
    pointer-events: none !important;
  }

  /* Feedback is attached to the new message, badge, or changing icon itself. */
  .dm-message-row.ym-arriving { animation-name: ymMessageIn !important; }
  .dm-message-row.own.ym-arriving { transform-origin: 100% 100% !important; }
  .dm-message-row.incoming.ym-arriving { transform-origin: 0% 100% !important; }
  :is(.account-unread-badge, .mobile-dock-badge, .dm-inbox-count).ym-arriving {
    animation: ymBadgeIn 400ms var(--ym-settle) both !important;
  }
  :is(.like-button.liked .heart-icon, .story-like[aria-pressed="true"] svg,
      .story-comment-actions [data-comment-action="like"][aria-pressed="true"] svg,
      .profile-follow-button.is-animating) {
    animation: yapperHeartPop 420ms var(--ym-settle) both !important;
  }
  :is(.status-message, .dm-status, .sticker-status, .yc-status).ym-arriving:not(:empty) {
    animation: ymStatusIn 310ms var(--ym-settle) both !important;
  }
  .ym-feedback > :is(svg, .heart-icon, .account-nav-icon, .mobile-dock-icon-wrap,
      .profile-stat-value, .profile-stat-count, .ym-feedback-icon),
  .ym-feedback:is(input[type="checkbox"], input[type="radio"]),
  .ym-count-change {
    animation: ymSelectionPop 460ms var(--ym-settle) both !important;
  }
  :is(.dm-typing-bubble span) {
    animation: ymTypingDot 1200ms ease-in-out infinite !important;
  }
  .dm-typing-bubble span:nth-child(2) { animation-delay: 150ms !important; }
  .dm-typing-bubble span:nth-child(3) { animation-delay: 300ms !important; }
  :is(.dm-voice-loading-ring, .yap-music-loading-icon, .yap-video-spinner,
      .yapper-video-spinner, .ym-spinner) {
    animation: ymSpinner 800ms linear infinite !important;
  }
  :is(.dm-recording-dot, .dm-voice-record-dot, .vocal-yap-record-dot, .ym-record-dot) {
    animation: ymRecordPulse 1400ms ease-out infinite !important;
  }
  .vocal-record.is-recording > svg {
    animation: ymRecordPulse 1400ms ease-out infinite !important;
  }
  :is(.sticker-loading, .ym-loading):not(.hidden) {
    animation: ymLoadingBreath 1500ms ease-in-out infinite !important;
  }

  /* Authoring previews and drag geometry are snapshots, not live UI arrivals. */
  :is(.plus-profile-preview-viewport, .plus-preview-surface, .yap-editor-preview,
      .profile-card-collection-preview) :is(.ym-arriving, .ym-leaving, .ym-ripple),
  :is(.plus-overlay-object, .plus-overlay-handle, .plus-overlay-delete-handle, .yc-stage)[data-ym-motion="none"] {
    animation: none !important;
  }
  .profile-card-snapshot, .profile-card-snapshot *,
  .profile-card-snapshot *::before, .profile-card-snapshot *::after {
    animation: none !important;
    transition: none !important;
  }
  .profile-card-snapshot :is(button, a[href], [role="button"], .ym-control) {
    scale: 1 !important;
    translate: none !important;
  }

  /* Edit Card keeps the established compact shell. Animate its contents;
     do not reanimate the shell when switching from Card to its editor. */
  #profileModal:not(.is-closing, .yapper-dialog-closing, .ym-leaving) > .profile-modal:is(.profile-card-active, .profile-card-editing-active) {
    animation: none !important;
    scale: none !important;
    translate: none !important;
    opacity: 1 !important;
  }
  #profileModal > .profile-modal.profile-card-editing-active > #profileCardEditSection.ym-content-enter {
    animation: ymEditorIn 320ms var(--ym-settle) backwards !important;
  }
  #yapperCardExtraDialog.yc-qr-dialog[open]:not(.yapper-dialog-closing, .ym-leaving) {
    animation: ymQrIn 420ms cubic-bezier(.22, .7, .3, 1) both !important;
  }
  #yapperCardExtraDialog.yc-qr-dialog { transform-origin: 50% 50% !important; }
  #yapperCardExtraDialog.yc-qr-dialog:is(.yapper-dialog-closing, .ym-leaving) {
    animation: ymQrOut var(--ym-exit-surface) var(--ym-exit) both !important;
  }
  :is(#yapperQrScanner, #yapperConnectionsScreen)[open]:not(.yapper-dialog-closing, .ym-leaving) {
    animation: ymScreenIn 420ms cubic-bezier(.22, .7, .3, 1) both !important;
  }
  :is(#yapperQrScanner, #yapperConnectionsScreen):is(.yapper-dialog-closing, .ym-leaving) {
    animation: ymScreenOut var(--ym-exit-surface) var(--ym-exit) both !important;
  }
  @media (max-width: 700px) {
    #profileModal > .profile-modal.profile-card-editing-active {
      height: min(64dvh, 580px) !important;
      min-height: 0 !important;
      max-height: calc(100dvh - 48px) !important;
    }
    #profileModal > .profile-modal.profile-card-editing-active > #profileCardEditSection:not(.hidden) {
      display: grid !important;
      grid-template-rows: 46px minmax(0, 1fr) auto !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
  }
}

@keyframes yapperBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes yapperBackdropOut {
  from { opacity: var(--ym-exit-from-opacity, 1); }
  to { opacity: 0; }
}
@keyframes ymNativeBackdropOut {
  from { opacity: var(--ym-backdrop-from-opacity, 1); }
  to { opacity: 0; }
}
@keyframes yapperSurfaceIn {
  0% { opacity: 0; translate: 0 var(--ym-surface-travel); scale: var(--ym-surface-start); }
  50% { opacity: 1; translate: 0 -5px; scale: var(--ym-surface-peak, 1.025); }
  76% { opacity: 1; translate: 0 2px; scale: var(--ym-surface-settle, .994); }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes yapperSurfaceOut {
  0% { opacity: var(--ym-exit-from-opacity, 1); translate: var(--ym-exit-from-translate, 0 0); scale: var(--ym-exit-from-scale, 1); }
  28% { opacity: calc(var(--ym-exit-from-opacity, 1) * .98); translate: var(--ym-exit-from-translate, 0 0); scale: calc(var(--ym-exit-scale-x, 1) * var(--ym-surface-tuck-x, .984)) calc(var(--ym-exit-scale-y, 1) * var(--ym-surface-tuck-y, .968)); }
  100% { opacity: 0; translate: var(--ym-exit-from-x, 0px) calc(var(--ym-exit-from-y, 0px) + 22px); scale: calc(var(--ym-exit-scale-x, 1) * var(--ym-surface-exit-x, .94)) calc(var(--ym-exit-scale-y, 1) * var(--ym-surface-exit-y, .92)); }
}
@keyframes yapperMenuIn {
  0% { opacity: 0; translate: 0 var(--ym-menu-enter-y, -8px); scale: .82 .74; }
  56% { opacity: 1; translate: 0 var(--ym-menu-rebound-y, 2px); scale: 1.028 1.045; }
  80% { opacity: 1; translate: 0 var(--ym-menu-settle-y, -1px); scale: .997 .989; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes yapperMenuOut {
  0% { opacity: var(--ym-exit-from-opacity, 1); translate: var(--ym-exit-from-translate, 0 0); scale: var(--ym-exit-from-scale, 1); }
  30% { opacity: calc(var(--ym-exit-from-opacity, 1) * .96); translate: var(--ym-exit-from-translate, 0 0); scale: calc(var(--ym-exit-scale-x, 1) * .97) calc(var(--ym-exit-scale-y, 1) * .93); }
  100% { opacity: 0; translate: var(--ym-exit-from-x, 0px) calc(var(--ym-exit-from-y, 0px) + var(--ym-menu-exit-y, -8px)); scale: calc(var(--ym-exit-scale-x, 1) * .88) calc(var(--ym-exit-scale-y, 1) * .78); }
}
@keyframes ymEditorIn {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: none; }
}
@keyframes ymMoodChoiceIn {
  0% { opacity: 0; scale: .6; }
  65% { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}
@keyframes ymQrIn {
  from { opacity: 0; translate: 0 14px; scale: .9; }
  to { opacity: 1; translate: none; scale: 1; }
}
@keyframes ymScreenIn {
  from { opacity: 0; translate: 0 12px; scale: 1; }
  to { opacity: 1; translate: none; scale: 1; }
}
@keyframes ymScreenOut {
  from { opacity: var(--ym-exit-from-opacity, 1); translate: var(--ym-exit-from-translate, 0 0); scale: var(--ym-exit-from-scale, 1); }
  to { opacity: 0; translate: var(--ym-exit-from-x, 0px) calc(var(--ym-exit-from-y, 0px) + 8px); scale: var(--ym-exit-from-scale, 1); }
}
@keyframes ymQrOut {
  from { opacity: var(--ym-exit-from-opacity, 1); translate: var(--ym-exit-from-translate, 0 0); scale: var(--ym-exit-from-scale, 1); }
  to { opacity: 0; translate: var(--ym-exit-from-x, 0px) calc(var(--ym-exit-from-y, 0px) + 6px); scale: calc(var(--ym-exit-scale-x, 1) * .97) calc(var(--ym-exit-scale-y, 1) * .97); }
}
@keyframes yapperPanelIn {
  0% { opacity: 0; translate: var(--ym-panel-travel) 0; scale: .962; }
  56% { opacity: 1; translate: -3px 0; scale: 1.012; }
  80% { opacity: 1; translate: 1px 0; scale: .998; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes yapperPanelOut {
  0% { opacity: var(--ym-exit-from-opacity, 1); translate: var(--ym-exit-from-translate, 0 0); scale: var(--ym-exit-from-scale, 1); }
  24% { opacity: var(--ym-exit-from-opacity, 1); translate: var(--ym-exit-from-translate, 0 0); scale: calc(var(--ym-exit-scale-x, 1) * .986) calc(var(--ym-exit-scale-y, 1) * .97); }
  100% { opacity: 0; translate: var(--ym-exit-from-x, 0px) calc(var(--ym-exit-from-y, 0px) + 12px); scale: calc(var(--ym-exit-scale-x, 1) * .964) calc(var(--ym-exit-scale-y, 1) * .94); }
}
@keyframes yapperContentIn {
  0% { opacity: 0; translate: 0 var(--ym-content-travel); scale: .964; }
  60% { opacity: 1; translate: 0 -2px; scale: 1.012; }
  82% { opacity: 1; translate: 0 1px; scale: .998; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes ymContentOut {
  0% { opacity: var(--ym-exit-from-opacity, 1); translate: var(--ym-exit-from-translate, 0 0); scale: var(--ym-exit-from-scale, 1); }
  100% { opacity: 0; translate: var(--ym-exit-from-x, 0px) calc(var(--ym-exit-from-y, 0px) + 10px); scale: calc(var(--ym-exit-scale-x, 1) * .94) calc(var(--ym-exit-scale-y, 1) * .90); }
}
@keyframes ymControlIn {
  0% { opacity: 0; scale: .78; }
  60% { opacity: 1; scale: 1.065; }
  82% { opacity: 1; scale: .985; }
  100% { opacity: 1; scale: 1; }
}
@keyframes yapperHeartPop {
  0% { scale: .72 .86; }
  44% { scale: 1.28 1.18; }
  68% { scale: .93 1.04; }
  85% { scale: 1.04 .98; }
  100% { scale: 1; }
}
@keyframes ymSelectionPop {
  0% { scale: .82; opacity: 1; }
  62% { scale: 1.10; opacity: 1; }
  84% { scale: .985; }
  100% { scale: 1; opacity: 1; }
}
@keyframes ymDockIconSettle {
  0% { scale: .94; }
  65% { scale: 1.055; }
  100% { scale: 1; }
}
@keyframes ymPostAcknowledged {
  0% { translate: 0 0; }
  42% { translate: 0 -3px; }
  100% { translate: 0 0; }
}
@keyframes ymCheck {
  0% { scale: .45; }
  58% { scale: 1.18; }
  82% { scale: .94; }
  100% { scale: 1; }
}
@keyframes ymRipple {
  0% { opacity: .9; scale: .06; }
  55% { opacity: .32; }
  100% { opacity: 0; scale: 1.35; }
}
@keyframes ymMessageIn {
  0% { opacity: 0; translate: 0 18px; scale: .89 .78; }
  56% { opacity: 1; translate: 0 -3px; scale: 1.035 1.05; }
  80% { opacity: 1; translate: 0 1px; scale: .99 .985; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes ymBadgeIn {
  0% { opacity: 0; scale: .35; }
  50% { opacity: 1; scale: 1.2; }
  76% { scale: .92; }
  100% { opacity: 1; scale: 1; }
}
@keyframes ymStatusIn {
  0% { opacity: 0; translate: 0 5px; }
  65% { opacity: 1; translate: 0 -1px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes ymTypingDot {
  0%, 60%, 100% { opacity: .42; translate: 0 0; scale: .9; }
  26% { opacity: 1; translate: 0 -4px; scale: 1.12; }
  42% { translate: 0 1px; scale: 1.05 .87; }
}
@keyframes ymSpinner { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes ymRecordPulse {
  0%, 100% { opacity: .65; scale: .92; }
  40% { opacity: 1; scale: 1.13; }
}
@keyframes ymLoadingBreath { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (max-width: 700px) {
  :root { --ym-surface-travel: 21px; --ym-surface-start: .94; --ym-panel-travel: 16px; }
}

/* Preference overrides use the existing, higher-priority important layer.
   Stop travel and elastic states without resetting any authored transform. */
@layer yapper-motion-preferences {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after, *::backdrop {
      animation-duration: .001ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      transition-delay: 0ms !important;
      scroll-behavior: auto !important;
    }
    :is(button, a[href], summary, [role="button"], [role="tab"], [role="option"],
        input[type="checkbox"], input[type="radio"], .ym-control):is(:hover, :active, .ym-hovered, .ym-pressing, .ym-keypress) {
      scale: 1 !important;
    }
    :is(#yapFeed > .yap, .recommendation-card, .plus-code-history-item,
        .dm-contact-info-card, .device-preference-block, .settings-section):hover {
      translate: none !important;
      scale: 1 !important;
    }
    input[type="range"]::-webkit-slider-thumb { scale: 1 !important; }
    input[type="range"]::-moz-range-thumb { scale: 1 !important; }
    .ym-ripple { display: none !important; }
    #mobileDock .mobile-dock-tab svg { scale: 1 !important; animation: none !important; }
    .dm-typing-bubble span { animation: none !important; opacity: .7 !important; }
    :is(.ym-arriving:not(.ym-control), .ym-content-enter:not(.ym-control),
        .ym-content-entering:not(.ym-control), .ym-feedback > svg,
        .ym-feedback > .heart-icon, .ym-feedback > .account-nav-icon,
        .ym-feedback > .mobile-dock-icon-wrap, .ym-count-change) {
      animation: none !important;
      opacity: 1 !important;
      scale: 1 !important;
      translate: 0 0 !important;
    }
    .ym-control.ym-arriving {
      animation: none !important;
      opacity: 1 !important;
      scale: 1 !important;
    }
    :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible {
      scale: 1 !important;
    }
  }
}

/* Voice controls share the accent and raised, rounded Yapper surfaces. */
.voice-input-control { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:none; min-width:0; max-width:100%; padding:8px 0; font-size:12px; }
.voice-input-control[hidden], .voice-input-meter[hidden] { display:none !important; }
.voice-input-label { display:flex; align-items:center; gap:8px; min-width:0; max-width:100%; color:var(--secondary-text); }
.voice-input-meter { width:76px; height:8px; flex:none; border-radius:99px; overflow:hidden; background:color-mix(in srgb,var(--primary) 14%,var(--card)); box-shadow:inset 0 1px 2px #0004; }
.voice-input-meter-fill { display:block; width:100%; height:100%; border-radius:inherit; background:var(--primary); transform:scaleX(0); transform-origin:left center; transition:transform 55ms linear; }
.voice-input-hint { flex-basis:100%; color:var(--secondary-text); font-size:11px; line-height:1.3; }
#yapperStickerDialog .sticker-choose-file { border-radius:44px !important; }

/* A separate sheet keeps the existing conversation and its media intact. */
#dmModal > .dm-details-layer { position:fixed; inset:0; z-index:5; box-sizing:border-box; display:grid; place-items:center; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:#0006; }
#dmModal > .dm-details-layer.hidden { display:none !important; }
#dmModal .dm-details-surface {
  box-sizing:border-box !important; display:flex !important; flex-direction:column !important;
  width:min(620px,calc(100vw - 24px)) !important; height:auto !important; min-height:0 !important;
  max-height:calc(100dvh - 32px) !important; margin:0 !important; padding:0 !important;
  overflow:hidden !important; border-radius:40px !important;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border)) !important;
  background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--primary) 9%,transparent),transparent 65%),var(--card) !important;
  box-shadow:inset 0 1px 1px #ffffff28,0 22px 65px #0007 !important;
}
#dmModal .dm-details-surface > .dm-panel { flex:0 1 auto !important; min-height:0 !important; max-height:inherit !important; overflow:hidden !important; background:transparent !important; }
#dmModal .dm-details-surface .dm-contact-info-scroll { padding:8px 18px 20px !important; max-height:calc(100dvh - 112px) !important; }
#dmModal .dm-details-surface .dm-contact-info-hero, #dmModal .dm-details-surface .dm-contact-info-card { width:100% !important; max-width:520px !important; box-sizing:border-box !important; margin-inline:auto !important; }
#dmModal .dm-details-surface .dm-contact-info-header { flex:none; padding:12px 18px 6px !important; }
#dmModal .dm-details-surface .dm-theme-scroll { max-height:calc(100dvh - 125px); }
#dmModal .dm-details-surface .dm-contact-info-row { border-radius:28px !important; }
@media (max-width:700px) {
  #dmModal > .dm-details-layer { top:var(--dm-chat-top,0px); bottom:auto; height:var(--dm-chat-height,100dvh); }
  #dmModal .dm-details-surface { max-height:calc(var(--dm-chat-height,100dvh) - 32px) !important; border-radius:36px !important; }
  #dmModal .dm-details-surface .dm-contact-info-scroll, #dmModal .dm-details-surface .dm-theme-scroll { max-height:calc(var(--dm-chat-height,100dvh) - 122px) !important; }
}
@media (prefers-reduced-motion:reduce) { .voice-input-meter-fill { transition:none; } }
.voice-input-control { display:grid; grid-template-columns:max-content minmax(0,240px) 76px; justify-content:start !important; align-items:center; gap:7px 10px; }
.voice-input-control .voice-input-hint { grid-column:1 / -1; }
.voice-input-control .voice-input-picker {
  box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important;
  min-width:0 !important; width:100% !important; max-width:240px !important; min-height:38px !important; padding:8px 13px !important;
  border-radius:999px !important; font:inherit !important; font-size:13px !important; font-weight:600 !important; text-align:left !important; color:var(--text) !important;
  border:1px solid color-mix(in srgb,var(--primary) 34%,var(--border)) !important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 13%,var(--card)),var(--card)) !important;
  box-shadow:inset 0 1px 1px #ffffff26,0 2px 5px #0002 !important;
}
.voice-input-picker:disabled { opacity:1 !important; cursor:default; }
.voice-input-current { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.voice-input-picker > svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.voice-input-menu {
  position:fixed !important; inset:auto; margin:0 !important; box-sizing:border-box !important;
  padding:0 !important; overflow:visible !important;
  border-radius:28px !important; color:var(--text) !important;
  border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border)) !important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 9%,var(--card)),color-mix(in srgb,var(--card) 97%,transparent)) !important;
  box-shadow:inset 0 1px 1px #ffffff2a,0 16px 45px #0006 !important; z-index:100000;
}
.voice-input-menu[hidden] { display:none !important; }
.voice-input-menu:not([hidden]) { display:grid; gap:4px; }
.voice-input-menu .voice-input-option {
  display:flex !important; align-items:center; justify-content:space-between; gap:10px; box-sizing:border-box;
  width:100% !important; min-height:44px !important; padding:11px 14px !important; margin:0 !important; text-align:left !important;
  border-radius:20px !important; border:1px solid transparent !important; font:inherit !important; font-size:13px !important; font-weight:600; color:var(--text) !important;
  background:transparent !important; box-shadow:none !important; white-space:normal; overflow-wrap:anywhere;
}
.voice-input-option[aria-selected="true"] { color:var(--primary) !important; background:color-mix(in srgb,var(--primary) 16%,transparent) !important; border-color:color-mix(in srgb,var(--primary) 26%,transparent) !important; }
.voice-input-option:hover, .voice-input-option:focus-visible { background:color-mix(in srgb,var(--primary) 13%,transparent) !important; outline:2px solid color-mix(in srgb,var(--primary) 45%,transparent); outline-offset:-2px; }
.voice-input-check { visibility:hidden; color:var(--primary); flex:none; }
.voice-input-option[aria-selected="true"] .voice-input-check { visibility:visible; }

.voice-input-options { box-sizing:border-box; display:grid; gap:4px; max-height:inherit; min-height:0; padding:12px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; border-radius:inherit; scrollbar-width:none !important; -ms-overflow-style:none; }
.voice-input-options::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; }
.voice-input-menu .voice-input-option { position:relative; flex:none; touch-action:pan-y; }
.voice-input-menu .voice-input-option:is(:hover,:focus-visible,.ym-hovered) { z-index:2; box-shadow:0 5px 12px #0004,inset 0 1px 1px #ffffff26 !important; }