/* Fresh Messages surface. These classes are owned by messages-surface.js. */
.messages-pull-refresh { display: none; }

@media (min-width: 761px), (pointer: fine) {
  #messageContacts .next-message-row__swipe-actions {
    display: none !important;
    pointer-events: none !important;
  }

  #messageContacts .next-message-row__surface {
    position: relative;
    z-index: 1;
  }

  #messageContacts .next-message-row__badge[hidden] { display: none !important; }
}

@media (max-width: 760px) and (pointer: coarse) {
  html,
  body,
  #app,
  #chatView { max-width: 100%; overflow-x: clip; }

  #app #createStoryButton {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: var(--next-blue) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
  }

  #app #createStoryButton::before {
    content: "+" !important;
    font: 400 25px/1 system-ui, sans-serif !important;
  }

  #messageContacts.next-message-surface {
    contain: layout paint;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important;
    overflow-anchor: none;
  }

  #messageContacts.has-horizontal-swipe {
    overscroll-behavior-y: none;
  }

  #messageContacts > .next-message-row {
    --swipe-progress: 0;
    position: relative !important;
    isolation: isolate;
    flex: 0 0 82px !important;
    width: 100% !important;
    height: 82px !important;
    min-height: 82px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0;
    overflow: hidden !important;
    touch-action: pan-y;
  }

  #messageContacts > .next-message-row:focus-visible {
    outline: 2px solid var(--next-blue) !important;
    outline-offset: -2px;
  }

  #messageContacts .next-message-row__swipe-actions {
    position: absolute;
    z-index: 0;
    inset: 4px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px;
    background: color-mix(in srgb, var(--next-blue) calc(var(--swipe-progress) * 16%), var(--next-surface));
    opacity: min(1, calc(var(--swipe-progress) * 1.15));
    pointer-events: none;
  }

  #messageContacts .next-swipe-action {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 100%;
    padding: 0 17px;
    color: var(--next-blue);
    font: 650 12px/16px system-ui, sans-serif;
    opacity: var(--swipe-progress);
    transform: translate3d(var(--swipe-icon-shift, 10px),0,0) scale(var(--swipe-icon-scale, .78));
    transform-origin: center;
  }

  #messageContacts .next-swipe-action--call {
    transform: translate3d(calc(var(--swipe-icon-shift, 10px) * -1),0,0) scale(var(--swipe-icon-scale, .78));
  }

  #messageContacts .next-swipe-action svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #messageContacts .next-swipe-action > span { display: none; }

  #messageContacts .next-message-row:not(.is-swiping-chat) .next-swipe-action--chat,
  #messageContacts .next-message-row:not(.is-swiping-call) .next-swipe-action--call {
    opacity: 0;
  }

  #messageContacts .next-message-row.is-ready .next-message-row__swipe-actions {
    background: color-mix(in srgb, var(--next-blue) 22%, var(--next-surface));
  }

  html.web-runtime.mobile-device #messageContacts > .next-message-row[data-row-id] > .next-message-row__surface {
    position: relative !important;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 48px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    height: 82px !important;
    min-height: 82px !important;
    padding: 8px 4px 8px 8px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--next-bg) !important;
    box-shadow: inset 0 -1px color-mix(in srgb, var(--next-line) 74%, transparent) !important;
    transform: translate3d(var(--next-swipe-x, 0),0,0) !important;
    transition: none !important;
    backface-visibility: hidden;
  }

  html.web-runtime.mobile-device #messageContacts > .next-message-row.is-returning > .next-message-row__surface,
  html.web-runtime.mobile-device #messageContacts > .next-message-row.is-completing > .next-message-row__surface {
    transition: transform 180ms cubic-bezier(.22,1,.36,1) !important;
  }

  #messageContacts .next-message-row__avatar-wrap,
  #messageContacts .next-message-row__avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    overflow: visible;
  }

  #messageContacts .next-message-row__avatar {
    color: var(--next-text);
    background: var(--next-surface);
    overflow: hidden;
  }

  #messageContacts .next-message-row__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #messageContacts .next-message-row__presence {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border: 3px solid var(--next-bg);
    border-radius: 50%;
    background: #6f7683;
  }

  #messageContacts .next-message-row__presence.is-online { background: #31b673; }

  #messageContacts .next-message-row__unread-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--next-bg);
    border-radius: 50%;
    background: var(--next-blue);
  }

  #messageContacts .next-message-row__copy {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
  }

  #messageContacts .next-message-row__title-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  #messageContacts .next-message-row__name {
    min-width: 0;
    overflow: hidden;
    color: var(--next-text);
    font: 650 16px/21px system-ui, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #messageContacts .next-message-row__badge {
    flex: 0 1 auto;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #messageContacts .next-message-row__badge[hidden] { display: none !important; }

  #messageContacts .next-message-row__preview {
    overflow: hidden;
    color: var(--next-muted);
    font: 450 13px/18px system-ui, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #messageContacts .next-message-row__controls {
    display: flex !important;
    align-items: center;
    gap: 0;
  }

  #messageContacts .next-message-row__button {
    position: static !important;
    display: grid !important;
    place-items: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: var(--next-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #messageContacts .next-message-row__button:active {
    color: var(--next-text) !important;
    background: var(--next-surface) !important;
  }

  #messageContacts .next-message-row__button svg {
    width: 21px !important;
    height: 21px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #messageContacts .next-message-row__pin svg { width: 17px !important; height: 17px !important; }
  #messageContacts .next-message-row__pin.active { color: var(--next-blue) !important; }
  html.web-runtime.mobile-device #app #messageContacts .next-message-row__pin.active svg {
    fill: currentColor !important;
    filter: none !important;
  }
  #messageContacts .next-message-row__button[hidden] { display: none !important; }
  #messageContacts .next-message-row .message-call-button { display: none !important; }

  #messageContacts .next-message-list-empty {
    display: grid;
    min-height: 160px;
    place-items: center;
    margin: 0;
    padding: 24px;
    text-align: center;
  }

  #messageContacts > .next-group-create-action {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 22px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 68px;
    padding: 8px 12px 8px 8px;
    border: 0;
    border-radius: 16px;
    color: var(--next-text);
    background: color-mix(in srgb, var(--next-blue) 9%, var(--next-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--next-blue) 19%, transparent);
    text-align: left;
  }

  #messageContacts .next-group-create-action__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    color: var(--next-blue);
    background: color-mix(in srgb, var(--next-blue) 14%, transparent);
  }

  #messageContacts .next-group-create-action__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  #messageContacts .next-group-create-action__copy strong { font: 650 15px/20px system-ui, sans-serif; }
  #messageContacts .next-group-create-action__copy small {
    overflow: hidden;
    color: var(--next-muted);
    font: 450 12px/17px system-ui, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #messageContacts .next-group-create-action > svg,
  #messageContacts .next-group-create-action__icon svg,
  #messageContacts .next-saved-message-row__marker svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #messageContacts > .next-saved-message-row {
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) 44px;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 78px;
    padding: 8px 4px 8px 8px;
    border: 0;
    border-radius: 16px;
    color: var(--next-text);
    background: var(--next-bg);
    box-shadow: inset 0 -1px color-mix(in srgb, var(--next-line) 74%, transparent);
    outline: 0;
  }

  #messageContacts > .next-saved-message-row:focus-visible,
  #messageContacts > .next-group-create-action:focus-visible {
    outline: 2px solid var(--next-blue);
    outline-offset: -2px;
  }

  #messageContacts .next-saved-message-row__avatar {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--next-surface);
  }

  #messageContacts .next-saved-message-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
  #messageContacts .next-saved-message-row__copy { display: grid; gap: 3px; min-width: 0; }
  #messageContacts .next-saved-message-row__heading { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
  #messageContacts .next-saved-message-row__name {
    min-width: 0;
    overflow: hidden;
    font: 650 15px/20px system-ui, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #messageContacts .next-saved-message-row__context {
    flex: 0 0 auto;
    color: var(--next-muted);
    font: 450 11px/16px system-ui, sans-serif;
  }
  #messageContacts .next-saved-message-row__preview {
    overflow: hidden;
    color: var(--next-muted);
    font: 450 13px/18px system-ui, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #messageContacts .next-saved-message-row__marker {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--next-blue);
  }
  #messageContacts .next-saved-message-row__marker svg { fill: color-mix(in srgb, var(--next-blue) 24%, transparent); }

  #messageContacts > .next-saved-list-empty {
    display: grid;
    min-height: 160px;
    place-items: center;
    margin: 0;
    padding: 24px;
    color: var(--next-muted);
    font: 450 14px/20px system-ui, sans-serif;
    text-align: center;
  }

  .next-swipe-announcer {
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #messages.next-message-timeline {
    overflow-anchor: none;
    overflow-x: clip !important;
  }

  #messages.next-message-timeline > :is(.message,.group-message-row) {
    margin-block: 0 !important;
  }

  #messages.next-message-timeline > :is(.message,.group-message-row).timeline-group-start,
  #messages.next-message-timeline > :is(.message,.group-message-row).timeline-group-single {
    margin-top: 10px !important;
  }

  #messages.next-message-timeline > :is(.message,.group-message-row).timeline-group-end,
  #messages.next-message-timeline > :is(.message,.group-message-row).timeline-group-single {
    margin-bottom: 2px !important;
  }

  #messages.next-message-timeline > .message,
  #messages.next-message-timeline > .group-message-row > .message {
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%), 0 3px 12px rgb(0 0 0 / 11%) !important;
  }

  #messages.next-message-timeline > .message.inbound.timeline-group-middle,
  #messages.next-message-timeline > .message.inbound.timeline-group-end,
  #messages.next-message-timeline > .group-message-row.inbound.timeline-group-middle > .message,
  #messages.next-message-timeline > .group-message-row.inbound.timeline-group-end > .message {
    border-top-left-radius: 7px !important;
  }

  #messages.next-message-timeline > .message.outbound.timeline-group-middle,
  #messages.next-message-timeline > .message.outbound.timeline-group-end,
  #messages.next-message-timeline > .group-message-row.outbound.timeline-group-middle > .message,
  #messages.next-message-timeline > .group-message-row.outbound.timeline-group-end > .message {
    border-top-right-radius: 7px !important;
  }

  #messages .next-conversation-empty {
    display: grid;
    justify-items: center;
    gap: 5px;
    width: min(100%, 300px);
    margin: auto;
    padding: 24px;
    color: var(--next-muted);
    text-align: center;
  }

  #messages .next-conversation-empty strong {
    color: var(--next-text);
    font: 650 16px/22px system-ui, sans-serif;
  }

  #messages .next-conversation-empty p { margin: 0; font: 450 14px/20px system-ui, sans-serif; }

  #messages .message-saved-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    color: color-mix(in srgb, var(--next-blue) 80%, var(--next-text));
    font: 650 11px/15px system-ui, sans-serif;
    text-shadow: none;
  }

  #messages .message-saved-label svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #messageForm {
    align-items: end !important;
    background: color-mix(in srgb, var(--next-surface) 96%, transparent) !important;
    box-shadow: 0 -8px 28px rgb(0 0 0 / 14%), inset 0 0 0 1px color-mix(in srgb, var(--next-line) 72%, transparent) !important;
  }

  #messageForm :is(#attachButton,#voiceNoteButton,#sendMessageButton) {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #messageForm #sendMessageButton:not(.mobile-send-empty) {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font: 650 14px/20px system-ui, sans-serif !important;
  }

  #messageForm.recording-voice {
    grid-template-columns: minmax(0,1fr) !important;
  }

  #messageForm.recording-voice > :is(.composer-tool-bar,#messageInput,#sendMessageButton) {
    display: none !important;
  }

  #voiceRecordingBar:not(.hidden) {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 4px 4px 4px 12px !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: var(--next-text) !important;
    background: color-mix(in srgb, var(--next-blue) 18%, var(--next-line)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--next-blue) 26%, transparent) !important;
  }

  #voiceRecordingBar .voice-recording-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 650 13px/18px system-ui, sans-serif;
  }

  #voiceRecordingBar .voice-recording-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e24d60;
  }

  #voiceRecordingBar .voice-transcript-preview {
    min-width: 0;
    overflow: hidden;
    color: var(--next-muted);
    font: 450 12px/17px system-ui, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #voiceRecordingBar .voice-recording-actions { display: flex; align-items: center; gap: 4px; }
  #voiceRecordingBar .voice-recording-actions button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  #messageForm .upload-progress.composer-progress-mirrored { display: none !important; }

  #messageForm .composer-attachment-preview:not(.hidden) {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 68px !important;
    padding: 4px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .composer-attachment-item {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--next-line) 62%, var(--next-surface));
  }

  .composer-attachment-item.is-audio {
    display: block;
    width: min(100%,320px);
    height: auto;
    min-height: 60px;
    padding-right: 36px;
  }

  .composer-attachment-media {
    display: block;
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #0b0f17 !important;
    box-shadow: none !important;
    overflow: hidden;
  }

  .composer-attachment-media :is(img,video) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .composer-attachment-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgb(5 7 11 / 24%);
  }

  .composer-attachment-play svg,
  .composer-file-preview svg,
  :is(.composer-attachment-remove,.composer-attachment-retry) svg,
  .composer-attachment-progress svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .composer-file-preview { display: grid; place-items: center; width: 60px; height: 60px; color: var(--next-muted); }

  .composer-attachment-remove,
  .composer-attachment-retry {
    position: absolute !important;
    z-index: 4;
    display: grid !important;
    place-items: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 11px !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #messageForm .composer-attachment-remove,
  #messageForm .composer-attachment-retry {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 11px !important;
  }

  .composer-attachment-remove { top: -10px; right: -10px; }
  .composer-attachment-retry { right: -10px; bottom: -10px; }
  .composer-attachment-remove::before,
  .composer-attachment-retry::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 50%;
    background: rgb(8 11 18 / 88%);
  }

  .composer-attachment-progress {
    --attachment-progress: 0;
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    color: #fff;
    background: rgb(5 7 11 / 38%);
    pointer-events: none;
  }

  .composer-attachment-progress i {
    width: 24px;
    height: 24px;
    border: 2px solid rgb(255 255 255 / 28%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: messages-refresh-spin 720ms linear infinite;
  }

  .composer-voice-preview { width: 100%; }
}

@media (max-width: 370px) and (pointer: coarse) {
  #messageContacts .next-message-row__surface {
    grid-template-columns: 44px minmax(0,1fr) auto !important;
    gap: 8px !important;
  }
  #messageContacts .next-message-row__avatar-wrap,
  #messageContacts .next-message-row__avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  #messageContacts .next-message-row__pin { display: none !important; }
  #messageContacts .next-swipe-action span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #messageContacts .next-message-row__surface { transition-duration: 1ms !important; }
}

@media (max-width: 760px) and (pointer: coarse) {
  .message-decision-backdrop {
    position: fixed;
    z-index: 2200;
    inset: 0;
    background: rgb(3 6 12 / 68%);
    backdrop-filter: blur(10px);
  }

  .message-decision-sheet {
    position: fixed;
    z-index: 2201;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    display: grid;
    gap: 12px;
    max-width: 420px;
    margin-inline: auto;
    padding: 18px;
    border: 0;
    border-radius: 16px;
    color: var(--next-text);
    background: color-mix(in srgb, var(--next-surface) 96%, transparent);
    box-shadow: 0 20px 60px rgb(0 0 0 / 38%), inset 0 0 0 1px var(--next-line);
    opacity: 0;
    transform: translate3d(0,12px,0);
    transition: opacity 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1);
  }

  .message-decision-sheet.is-ready { opacity: 1; transform: translate3d(0,0,0); }
  .message-decision-sheet h2 { margin: 0; font: 700 19px/25px system-ui, sans-serif; }
  .message-decision-sheet p { margin: 0; color: var(--next-muted); font: 450 14px/20px system-ui, sans-serif; }
  .message-decision-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 88px;
    padding: 12px;
    border: 1px solid var(--next-line);
    border-radius: 12px;
    color: var(--next-text);
    background: var(--next-bg);
    font: 450 16px/22px system-ui, sans-serif;
    resize: vertical;
  }

  .message-decision-input:focus { border-color: var(--next-blue); outline: 2px solid color-mix(in srgb, var(--next-blue) 24%, transparent); }
  .message-decision-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .message-decision-actions button {
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    color: var(--next-text);
    background: var(--next-line);
    font: 650 15px/20px system-ui, sans-serif;
  }
  .message-decision-actions .message-decision-confirm { color: #fff; background: var(--next-blue); }
  .message-decision-actions .message-decision-confirm.danger-action { background: #b83e51; }
}

@media (prefers-reduced-motion: reduce) {
  .message-decision-sheet { transition-duration: 1ms !important; }
}

/* The fresh Messages shell owns its header chrome, presence and action sheets. */
@media (max-width: 760px) and (pointer: coarse) {
  html.web-runtime.mobile-device .message-picker-heading.next-messages-header {
    display: grid !important;
    grid-template-columns: 44px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 64px !important;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
  }

  .next-messages-header > div:first-of-type { min-width: 0; }
  .next-messages-header h2 {
    margin: 0 !important;
    overflow: hidden;
    color: var(--next-text) !important;
    font: 700 20px/28px system-ui, sans-serif !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .messages-profile-button,
  .messages-picker-more,
  .messages-conversation-more {
    display: grid !important;
    place-items: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--next-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .messages-profile-button img {
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--next-blue) 58%, var(--next-line));
    border-radius: 50%;
    object-fit: cover;
  }

  :is(.messages-picker-more,.messages-conversation-more) svg,
  .conversation-screen :is(#backToContacts,#startCall,#toggleMessageSearch,#reloadMessages) svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .conversation-screen #startCall span { display: none; }

  #activeStatus[data-presence="online"],
  #activeStatus[data-presence="offline"] {
    display: flex !important;
    align-items: center;
    gap: 6px;
  }

  #activeStatus .messages-presence-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #777f8d;
    box-shadow: 0 0 0 2px color-mix(in srgb, #777f8d 18%, transparent);
  }

  #activeStatus[data-presence="online"] .messages-presence-dot {
    background: #31b673;
    box-shadow: 0 0 0 2px color-mix(in srgb, #31b673 18%, transparent);
  }

  .messages-loading-row {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) 44px 44px;
    align-items: center;
    gap: 11px;
    width: 100%;
    height: 82px;
    padding: 8px 4px 8px 8px;
  }

  .messages-loading-avatar,
  .messages-loading-row b,
  .messages-loading-copy i {
    display: block;
    border-radius: 12px;
    background: color-mix(in srgb, var(--next-line) 76%, transparent);
    animation: messages-loading-pulse 900ms ease-in-out infinite alternate;
  }

  .messages-loading-avatar { width: 48px; height: 48px; border-radius: 50%; }
  .messages-loading-copy { display: grid; gap: 8px; min-width: 0; }
  .messages-loading-copy i:first-child { width: min(145px,70%); height: 12px; }
  .messages-loading-copy i:last-child { width: min(210px,92%); height: 9px; }
  .messages-loading-row b { width: 44px; height: 44px; border-radius: 50%; }

  .messages-pull-refresh {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--next-blue);
    background: color-mix(in srgb, var(--next-surface) 96%, transparent);
    box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, calc(-44px + var(--messages-pull-distance,0px)),0) scale(.86);
    transition: opacity 140ms ease, transform 180ms cubic-bezier(.22,1,.36,1);
  }

  .messages-pull-refresh svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #contactPickerScreen.messages-pull-active .messages-pull-refresh {
    opacity: min(1, calc(var(--messages-pull-distance,0px) / 52px));
    transform: translate3d(-50%, calc(-38px + var(--messages-pull-distance,0px)),0) scale(1);
  }

  #contactPickerScreen.messages-pull-ready .messages-pull-refresh svg,
  #contactPickerScreen.messages-pull-completing .messages-pull-refresh svg {
    animation: messages-refresh-spin 620ms linear infinite;
  }

  #contactPickerScreen .messages-pull-refresh { display: grid; }
}

.messages-shell-backdrop {
  position: fixed;
  z-index: 2147483600;
  inset: 0;
  background: rgb(0 0 0 / 46%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.messages-shell-menu {
  position: fixed;
  z-index: 2147483601;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 12px;
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin-inline: auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--next-line) 74%, transparent);
  border-radius: 16px;
  color: var(--next-text);
  background: color-mix(in srgb, var(--next-surface) 96%, transparent);
  box-shadow: 0 20px 60px rgb(0 0 0 / 38%);
  opacity: 0;
  transform: translate3d(0,12px,0);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1);
}

.messages-shell-menu.is-open { opacity: 1; transform: translate3d(0,0,0); }
.messages-shell-menu header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-left: 8px; }
.messages-shell-menu header strong { font: 700 16px/22px system-ui, sans-serif; }
.messages-shell-menu header button,
.messages-shell-menu-actions button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: inherit;
  background: transparent;
}
.messages-shell-menu header button { display: grid; place-items: center; padding: 11px; }
.messages-shell-menu-actions { display: grid; gap: 4px; }
.messages-shell-menu-actions button { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 12px; padding: 10px 12px; text-align: left; background: color-mix(in srgb, var(--next-line) 42%, transparent); }
.messages-shell-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.messages-shell-menu .danger-action { color: #ee6677; }

@keyframes messages-loading-pulse { to { opacity: .42; } }
@keyframes messages-refresh-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .messages-shell-menu { transition-duration: 1ms; }
  .messages-loading-row :is(span,b,i) { animation: none; }
  .messages-pull-refresh { transition-duration: 1ms; }
  #contactPickerScreen:is(.messages-pull-ready,.messages-pull-completing) .messages-pull-refresh svg { animation: none; }
}