/* The new mobile message lane owns its layout instead of relying on implicit
   grid placement for optional search, media, and composer rows. */
@media (max-width: 760px) and (pointer: coarse) {
  .mobile-contact-swipe-announcer { position: fixed !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
  #app #chatView { height: 100% !important; min-height: 0 !important; padding: 0 !important; background: var(--next-bg) !important; }
  #app #contactPickerScreen.active-chat-screen { display: grid !important; grid-template-rows: auto auto auto minmax(0,1fr) !important; height: 100% !important; padding: 0 12px !important; min-height: 0 !important; gap: 0 !important; }
  #app .message-picker-heading { min-height: 72px !important; padding: calc(12px + env(safe-area-inset-top)) 0 12px !important; margin: 0 !important; }
  #app .message-picker-heading h2 { font: 700 24px/32px system-ui !important; letter-spacing: 0 !important; color: var(--next-text) !important; }
  #app .stories-panel { padding: 4px 0 12px !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  #app .stories-heading { min-height: 44px !important; }
  #app .stories-heading strong { font: 600 14px/20px system-ui !important; color: var(--next-text) !important; }
  #app .stories-heading > div > span { display: none !important; }
  #app #createStoryButton { color: var(--next-blue) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  #app .message-tabs { padding: 4px 0 12px !important; margin: 0 !important; gap: 8px !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
  #app .message-tab { display: flex !important; align-items: center; justify-content: center; gap: 4px; min-height: 44px !important; height: 44px !important; padding: 0 8px !important; background: transparent !important; color: var(--next-muted) !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; font: 600 13px/18px system-ui !important; }
  #app .message-tab.active { color: var(--next-blue) !important; background: var(--next-selected) !important; }
  #app .tab-label-full { display: none !important; }
  #app .tab-label-short { display: inline !important; }
  #app .message-tab .tab-badge { position: static !important; min-width: 18px; font: 600 10px/18px system-ui !important; padding: 0 4px !important; }
  #app #messageContacts { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 0 12px !important; min-height: 0 !important; height: 100% !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none; }
  #app.call-active #messageContacts { padding-bottom: 76px !important; }
  #app #messageContacts > .message-contact { flex: 0 0 80px !important; height: 80px !important; min-height: 80px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important; background: var(--next-bg) !important; box-shadow: none !important; overflow: hidden !important; }
  #app #messageContacts > .message-contact > .message-contact-summary { display: grid !important; grid-template-columns: 48px minmax(0,1fr) auto !important; align-items: center !important; gap: 12px !important; height: 80px !important; min-height: 80px !important; padding: 8px 0 !important; border: 0 !important; border-radius: 16px !important; background: var(--next-bg) !important; box-shadow: none !important; }
  #app #messageContacts .avatar-wrap, #app #messageContacts .avatar { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 50% !important; }
  #app #messageContacts .avatar img { width: 100% !important; height: 100% !important; object-fit: cover; }
  #app #messageContacts .contact-main { display: flex !important; flex-direction: column; gap: 4px; min-width: 0 !important; overflow: hidden; }
  #app #messageContacts .name-with-badge { display: flex; align-items: center; gap: 4px; min-width: 0; }
  #app #messageContacts .contact-main strong { font: 600 16px/22px system-ui !important; color: var(--next-text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app #messageContacts .contact-main small { font: 400 13px/18px system-ui !important; color: var(--next-muted) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app #messageContacts .message-row-actions { display: flex !important; align-items: center; gap: 0 !important; margin: 0 !important; }
  #app #messageContacts .message-row-actions 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: 12px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: var(--next-muted) !important; box-shadow: none !important; transform: none !important; }
  #app #messageContacts .message-row-actions button svg { width: 20px !important; height: 20px !important; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  #app #messageContacts .message-row-actions .message-chat-button { display: grid !important; }
  #app #messageContacts .message-row-actions .message-call-button { display: none !important; }
  #app #messageContacts .message-pin-toggle svg { width: 16px !important; height: 16px !important; }
  #app #messageContacts .message-pin-toggle.active { color: var(--next-blue) !important; }
  #app #messageContacts .message-pin-toggle.active svg { fill: currentColor !important; }
  #app #messageContacts .unread-count { position: absolute; top: 4px; left: 32px; }
  #app #conversationScreen.active-chat-screen { position: relative !important; display: grid !important; grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto auto minmax(0,1fr) auto !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; }
  #app #conversationScreen > .topbar { grid-column: 1 !important; grid-row: 1 !important; position: relative !important; inset: auto !important; min-height: 64px !important; height: auto !important; padding: calc(8px + env(safe-area-inset-top)) 8px 8px !important; border: 0 !important; border-bottom: 1px solid var(--next-line) !important; background: var(--next-bg) !important; }
  #app #messageSearchBar { grid-column: 1 !important; grid-row: 2 !important; }
  #app #messages { grid-column: 1 !important; grid-row: 3 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; min-height: 0 !important; height: 100% !important; padding: 12px !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none; gap: 4px !important; }
  #app #messages::before { content: ''; display: block; flex: 1 0 0; }
  #app #messages > * { flex-shrink: 0; }
  #app #messages .message { width: fit-content !important; max-width: 78% !important; min-width: 0 !important; padding: 8px 12px !important; border: 0 !important; border-radius: 18px !important; box-shadow: none !important; font-size: 16px !important; line-height: 1.4 !important; letter-spacing: 0 !important; overflow-wrap: anywhere; }
  #app #messages .message.inbound { align-self: flex-start !important; }
  #app #messages .message.outbound { align-self: flex-end !important; }
  #app #messageForm { grid-column: 1 !important; grid-row: 4 !important; position: relative !important; inset: auto !important; align-self: end !important; margin: 0 8px 8px !important; width: auto !important; min-height: 60px !important; padding: 8px !important; border: 0 !important; border-radius: 18px !important; box-shadow: none !important; background: var(--next-surface) !important; }
  #app.call-active #messageForm { margin-bottom: 72px !important; }
  #app #messageInput { min-width: 0 !important; min-height: 44px !important; max-height: 120px !important; resize: none !important; overflow-y: hidden; font: 400 16px/22px system-ui !important; padding: 10px 12px !important; border: 0 !important; border-radius: 16px !important; background: var(--next-line) !important; color: var(--next-text) !important; box-shadow: none !important; }
  #app #messageInput::placeholder { color: var(--next-muted); opacity: 1; }
  #app #messageInput:focus { outline: 2px solid color-mix(in srgb, var(--next-blue) 72%, transparent) !important; outline-offset: 0 !important; border-color: transparent !important; box-shadow: none !important; }
  #app #attachmentPreview:not(.hidden) { position: relative !important; display: flex !important; align-items: flex-start !important; width: max-content !important; min-width: 84px !important; min-height: 64px !important; padding: 0 24px 0 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
  #app .selected-attachment-thumb, #app .mobile-attachment-thumb { position: relative !important; display: block !important; 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: #111722 !important; box-shadow: none !important; overflow: hidden !important; }
  #app .selected-attachment-thumb :is(img,video), #app .mobile-attachment-thumb :is(img,video) { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
  #app .selected-attachment-thumb > span, #app .mobile-attachment-play { position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; color: #fff !important; background: #05070b42 !important; }
  #app .selected-attachment-thumb > span svg, #app .mobile-attachment-play svg { width: 22px !important; height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; }
  #app #clearAttachment.selected-attachment-remove, #app #clearAttachment.mobile-attachment-remove { position: absolute !important; z-index: 2 !important; top: -8px !important; right: -8px !important; display: grid !important; place-items: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 10px !important; border: 0 !important; border-radius: 50% !important; color: #fff !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important; }
  #app #clearAttachment.selected-attachment-remove::before, #app #clearAttachment.mobile-attachment-remove::before { content: ""; position: absolute; inset: 8px; border: 1px solid #ffffff24; border-radius: 50%; background: #080b12d9; }
  #app #clearAttachment.selected-attachment-remove svg, #app #clearAttachment.mobile-attachment-remove svg { position: relative; width: 16px !important; height: 16px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; }
  #app #newMessagesJump { position: absolute !important; right: 12px !important; bottom: 84px !important; }

  #app > #callBar {
    position: fixed !important;
    z-index: 120 !important;
    top: auto !important;
    right: 8px !important;
    bottom: calc(var(--next-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
    left: 8px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) auto 44px !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 56px !important;
    max-height: 64px !important;
    padding: 8px !important;
    border: 1px solid var(--next-line) !important;
    border-radius: 18px !important;
    color: var(--next-text) !important;
    background: color-mix(in srgb, var(--next-surface) 94%, transparent) !important;
    box-shadow: 0 10px 32px #0005 !important;
    backdrop-filter: blur(18px) !important;
    touch-action: auto !important;
  }
  #app > #callBar.hidden { display: none !important; }
  #app > #callBar .call-bar-avatar { width: 38px !important; height: 38px !important; border: 0 !important; }
  #app > #callBar .call-bar-main { min-width: 0 !important; cursor: pointer !important; touch-action: auto !important; }
  #app > #callBar .call-bar-main strong { color: var(--next-text) !important; font: 600 14px/19px system-ui !important; }
  #app > #callBar .call-bar-main small { color: var(--next-muted) !important; font: 500 11px/16px system-ui !important; }
  #app > #callBar :is(.call-bar-button,.call-options-button) { min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 8px !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; }
  #app > #callBar #callMute:disabled, #app > #callBar #callTopUpBar.hidden { display: none !important; }
  #app > #callBar #callEndBar { color: #fff !important; background: #d84955 !important; }
  #app > #callBar #callOptions { color: var(--next-text) !important; background: var(--next-line) !important; }

  html.web-runtime #callDialog[open] {
    position: fixed !important;
    z-index: 200 !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #07090d !important;
    overflow: hidden !important;
  }
  html.web-runtime #callDialog[open] > .call-card {
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) auto auto !important;
    gap: 16px !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: calc(18px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #f7f8fb !important;
    background: #07090d !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  html.web-runtime #callDialog .call-panel-header { display: grid !important; grid-template-columns: 56px minmax(0,1fr) 44px !important; align-items: center !important; gap: 12px !important; padding: 0 !important; }
  html.web-runtime #callDialog .call-avatar { width: 56px !important; height: 56px !important; border: 0 !important; border-radius: 50% !important; }
  html.web-runtime #callDialog .call-panel-copy { min-width: 0 !important; }
  html.web-runtime #callDialog :is(.call-eyebrow,.call-status-text) { color: #a8afbc !important; }
  html.web-runtime #callDialog .call-eyebrow { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font: 600 11px/16px system-ui,sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
  html.web-runtime #callDialog .call-panel-copy h2 { margin: 2px 0 !important; color: #f7f8fb !important; font: 700 22px/28px system-ui !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.web-runtime #callDialog .call-close-button { display: grid !important; place-items: center; width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 10px !important; border: 0 !important; border-radius: 50% !important; color: #f7f8fb !important; background: #1a1e27 !important; box-shadow: none !important; }
  html.web-runtime #callDialog .call-close-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  html.web-runtime #callDialog .call-video-stage { position: relative !important; display: grid !important; place-items: center !important; min-height: 0 !important; width: 100% !important; border: 0 !important; border-radius: 20px !important; background: #0e1118 !important; overflow: hidden !important; }
  html.web-runtime #callDialog .remote-video-placeholder { display: grid !important; place-items: center !important; align-content: center; gap: 10px; color: #a8afbc !important; }
  html.web-runtime #callDialog .remote-video-placeholder > span:last-child { font: 500 14px/20px system-ui,sans-serif !important; letter-spacing: 0 !important; }
  html.web-runtime #callDialog .remote-video-placeholder .camera-off-symbol { width: 92px !important; height: 92px !important; border-radius: 50%; color: transparent !important; background: linear-gradient(145deg,#55c9d5,#507ce8) !important; }
  html.web-runtime #callDialog .call-media-actions { display: flex !important; align-items: center; justify-content: center; gap: 20px !important; }
  html.web-runtime #callDialog .call-media-button { display: grid !important; place-items: center; width: 56px !important; min-width: 56px !important; height: 56px !important; min-height: 56px !important; padding: 15px !important; border: 0 !important; border-radius: 50% !important; color: #f7f8fb !important; background: #1a1e27 !important; box-shadow: none !important; }
  html.web-runtime #callDialog .call-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding: 0 !important; }
  html.web-runtime #callDialog .call-actions > :is(button,#callTopUpControls) { width: 100% !important; min-height: 52px !important; border-radius: 14px !important; box-shadow: none !important; }
  html.web-runtime #callDialog #endCall, html.web-runtime #callDialog #declineCall { color: #fff !important; background: #d84955 !important; }
  html.web-runtime #callDialog #answerCall { color: #fff !important; background: #2aa86e !important; }
}

@media (max-width: 760px) and (pointer: coarse) {
  html.web-runtime #storyViewerDialog .story-feedback-actions { align-items: end !important; }
  html.web-runtime #storyViewerDialog .story-feedback-actions button {
    display: grid !important;
    grid-template-rows: 28px auto !important;
    place-items: center !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 4px 6px !important;
    gap: 2px !important;
    color: #f7f8fb !important;
    background: rgb(5 7 11 / 44%) !important;
    backdrop-filter: blur(10px) !important;
  }
  html.web-runtime #storyViewerDialog .story-feedback-actions button svg { width: 23px !important; height: 23px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
  html.web-runtime #storyViewerDialog .story-feedback-actions button span { font: 600 9px/12px system-ui,sans-serif !important; letter-spacing: 0 !important; }
  html.web-runtime #storyViewerDialog .story-feedback-actions button.active { color: #ff496c !important; }
  html.web-runtime #storyViewerDialog .story-feedback-actions #likeStoryButton.active svg { fill: currentColor !important; }
  @media (max-width: 350px) {
    html.web-runtime #storyViewerDialog .story-feedback-actions button span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
  }
}