/* =============================================================================
   18-dm-instagram-rebuild.css — Dark Mode Only
   -----------------------------------------------------------------------------
   v10.469 — Sole source of truth for the v2 DM thread view (header, message
   list, composer). The legacy `09-direct-messages.css` was dismantled in the
   same version, so this file no longer has to fight any specificity wars.

   All selectors target `.dm-v2-*` class names emitted by
   renderDirectMessageThread() in 09-direct-messages.js. The renderer also
   sets `.dm-thread-open` on the page when active — that hides the legacy
   outer topbar and lets the v2 panel run full-height edge-to-edge.

   Design references: Instagram DM (Rush Lust / n0ellebaumeister screenshots).
   ============================================================================= */


/* ---------- Hide the outer page-shell topbar ----------
   The legacy `.direct-messages-topbar` (avatar + "Messages" + edit pencil)
   is replaced by the v2 inbox header AND the v2 thread header.
   v10.488: previous selector (`#direct-messages-page .direct-messages-topbar`,
   specificity 1,1,0) lost to `#direct-messages-page:not(.dm-thread-open) .direct-messages-topbar`
   in 16-light-mode-contrast.css (specificity 1,2,0), so the legacy
   topbar kept rendering. New selector boosts specificity by
   double-classing the IDs/classes — guaranteed to win regardless of
   any future stylesheet additions. */
.direct-messages-page.direct-messages-page#direct-messages-page .direct-messages-topbar.direct-messages-topbar {
  display: none !important;
}


/* ---------- v2 thread panel ----------
   `position: fixed` with explicit edges bypasses the entire wrapper chain.
   The panel anchors directly to the viewport.

   KEYBOARD HANDLING: bottom edge tracks `--dm-keyboard-bottom`, a CSS
   variable that 09-direct-messages.js (`updateDirectMessageKeyboardLift`)
   updates continuously via the visualViewport API. When the iOS keyboard
   slides up, the panel's bottom rises with it, so the flex column re-flows
   and the composer (which is `flex: 0 0 auto`) stays anchored to the
   visible bottom — exactly how Instagram and iMessage handle it.

   The JS fires updates per-frame during the keyboard animation, so we
   skip a CSS transition here — the panel tracks the keyboard pixel-for-
   pixel. A transition would lag behind.

   v10.471: introduced `position: fixed` to defeat ID-specific !important
   rules from older stylesheets.
   v10.473: switched from `inset: 0` to explicit edges with keyboard-aware
   bottom so the composer rises above the iOS keyboard in TestFlight. */
.dm-v2-panel {
  position: fixed !important;
  /* v10.793: top tracks visualViewport.offsetTop so iOS's auto-scroll-to-input
     behavior cannot drift the header above the visible viewport when the
     keyboard opens. Updated by updateDirectMessageKeyboardLift() in JS. */
  top: var(--vv-offset-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--dm-keyboard-bottom, 0px) !important;
  height: auto !important;
  z-index: 4900;  /* above .direct-messages-page (4800) so it covers any
                     residual chrome the wrapper might render. */
  display: flex !important;
  flex-direction: column !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0E0E0E !important;
  color: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

/* v10.826: keep the full-page DM surface above every bottom navigation
   variant. Some iPad/desktop-style bottom-nav rules put #mobile-bottom-nav at
   z-index: 5200, higher than the old DM page z-index 4800. */
#direct-messages-page.direct-messages-page {
  z-index: 9000 !important;
}

/* v10.820: keep the rendered inbox on the exact same fixed geometry as the
   animated inbox underlay. Without this, the close animation can finish on the
   full-screen underlay, then reveal the real inbox inside the older shell for
   one frame, which looks like the inbox is resizing itself. */
.direct-messages-page:not(.dm-thread-open) .direct-messages-content,
.direct-messages-page.dm-nav-finalizing-inbox .direct-messages-content {
  height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.direct-messages-page:not(.dm-thread-open) #dm-fullscreen-shell,
.direct-messages-page.dm-nav-finalizing-inbox #dm-fullscreen-shell,
.direct-messages-page:not(.dm-thread-open) .dm-shell,
.direct-messages-page.dm-nav-finalizing-inbox .dm-shell {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.direct-messages-page:not(.dm-thread-open) #dm-fullscreen-shell > .dm-v2-inbox,
.direct-messages-page.dm-nav-finalizing-inbox #dm-fullscreen-shell > .dm-v2-inbox {
  height: 100% !important;
}

/* v10.824: root fix for the black bottom bar on the fullscreen inbox.
   16-light-mode-contrast.css has `#direct-messages-page .direct-messages-content
   { padding-bottom: 132px !important; }`, which is more specific than the
   v10.820 class-only fullscreen rule above. This ID-scoped override removes
   that reserved bottom-nav/footer space only in the v2 inbox handoff layout. */
#direct-messages-page.direct-messages-page:not(.dm-thread-open) .direct-messages-content,
#direct-messages-page.direct-messages-page.dm-nav-finalizing-inbox .direct-messages-content {
  height: 100dvh !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  overflow: hidden !important;
}

#direct-messages-page.direct-messages-page:not(.dm-thread-open) #dm-fullscreen-shell,
#direct-messages-page.direct-messages-page.dm-nav-finalizing-inbox #dm-fullscreen-shell,
#direct-messages-page.direct-messages-page:not(.dm-thread-open) .dm-shell,
#direct-messages-page.direct-messages-page.dm-nav-finalizing-inbox .dm-shell,
#direct-messages-page.direct-messages-page:not(.dm-thread-open) .dm-v2-inbox,
#direct-messages-page.direct-messages-page.dm-nav-finalizing-inbox .dm-v2-inbox {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* v10.825: remove the remaining visible footer band. The inbox list had a
   hardcoded 100px bottom padding for the floating new-chat button; after the
   fullscreen shell padding was removed, that 100px showed as a lower black
   footer. Keep only iOS safe-area breathing room. */
#direct-messages-page.direct-messages-page:not(.dm-thread-open) .dm-v2-inbox .dm-v2-inbox-list,
#direct-messages-page.direct-messages-page.dm-nav-finalizing-inbox .dm-v2-inbox .dm-v2-inbox-list {
  padding: 0 0 max(18px, env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
}

/* v10.819: directional DM navigation.
   Inbox -> chat: chat sheet enters from the right.
   Chat -> inbox: inbox comes in from the left while chat exits right. */
.direct-messages-page.dm-nav-open-thread .dm-v2-panel {
  animation: dmThreadEnterFromRight 600ms cubic-bezier(.16, 1, .3, 1) both;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.direct-messages-page.dm-nav-close-thread .dm-thread-swipe-underlay {
  animation: dmInboxEnterFromLeft 600ms cubic-bezier(.16, 1, .3, 1) both;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.direct-messages-page.dm-nav-close-thread.dm-thread-swipe-closing .dm-v2-panel {
  transition: transform 600ms cubic-bezier(.16, 1, .3, 1), border-radius 600ms cubic-bezier(.16, 1, .3, 1) !important;
}
@keyframes dmThreadEnterFromRight {
  from { transform: translate3d(100vw, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes dmInboxEnterFromLeft {
  from { transform: translate3d(-32vw, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .direct-messages-page.dm-nav-open-thread .dm-v2-panel,
  .direct-messages-page.dm-nav-close-thread .dm-thread-swipe-underlay {
    animation: none !important;
  }
  .direct-messages-page.dm-nav-close-thread.dm-thread-swipe-closing .dm-v2-panel {
    transition: none !important;
  }
}


/* ---------- Header ---------- */
.dm-v2-panel .dm-v2-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  /* v10.474: tightened top spacing. Was `safe-area-inset-top + 8px`, which
     on iOS Capacitor (contentInset: never) added ~100px of empty space
     between the Dynamic Island and the avatar. We respect ONLY the safe
     area now — no extra buffer — so the avatar sits flush under the
     Dynamic Island, matching the Instagram reference. */
  padding: var(--shelfd-safe-top, 0px) 12px 8px;
  background: #0E0E0E;
  border-bottom: 0;
  position: relative;
  z-index: 5;
}

.dm-v2-panel .dm-v2-back {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.dm-v2-panel .dm-v2-back svg {
  width: 22px;
  height: 22px;
}

.dm-v2-panel .dm-v2-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.dm-v2-panel .dm-v2-identity-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 36px;
  /* Subtle lavender ring for Shelfd flavor */
  box-shadow: 0 0 0 2px #0E0E0E, 0 0 0 3.5px rgba(167, 139, 250, 0.55);
}
.dm-v2-panel .dm-v2-identity-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.dm-v2-panel .dm-v2-identity-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dm-v2-panel .dm-v2-identity-handle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 3-dot overflow menu */
.dm-v2-panel .dm-v2-overflow-wrap {
  position: relative;
  flex: 0 0 auto;
}
.dm-v2-panel .dm-v2-overflow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.dm-v2-panel .dm-v2-overflow svg {
  width: 22px;
  height: 22px;
}
.dm-v2-panel .dm-v2-overflow-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-v2-panel .dm-v2-overflow-menu[hidden] {
  display: none;
}
.dm-v2-panel .dm-v2-overflow-menu button {
  background: transparent;
  color: #fff;
  border: 0;
  text-align: left;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-weight: 500;
  transition: background 120ms ease;
}
.dm-v2-panel .dm-v2-overflow-menu button:hover,
.dm-v2-panel .dm-v2-overflow-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}


/* ---------- Message list — flex: 1, scrolls ---------- */
.dm-v2-panel .dm-v2-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 12px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #0E0E0E;
  scroll-behavior: smooth;
}
.dm-v2-panel .dm-v2-list::-webkit-scrollbar {
  display: none;
}

.dm-v2-panel .dm-v2-empty {
  margin: 24px auto;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  max-width: 360px;
}

/* Date dividers */
.dm-v2-panel .dm-v2-day-divider {
  align-self: center;
  margin: 18px 0 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 400;
  text-align: center;
}


/* ---------- Bubble rows ---------- */
.dm-v2-panel .dm-v2-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.dm-v2-panel .dm-v2-bubble-row.mine {
  justify-content: flex-end;
}
.dm-v2-panel .dm-v2-bubble-row.theirs {
  justify-content: flex-start;
}
.dm-v2-panel .dm-v2-bubble-row.grouped {
  margin-top: -6px; /* tighten consecutive messages from same sender */
}

.dm-v2-panel .dm-v2-bubble-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 30px;
  margin-bottom: 2px;
}
.dm-v2-panel .dm-v2-bubble-avatar-spacer {
  display: inline-block;
  flex: 0 0 30px;
  background: transparent;
}

.dm-v2-panel .dm-v2-bubble-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 76%;
  min-width: 0;
}

.dm-v2-panel .dm-v2-sender-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  padding-left: 14px;
  margin-bottom: 2px;
}


/* ---------- Bubbles ---------- */
.dm-v2-panel .dm-v2-bubble {
  padding: 10px 14px;
  border-radius: 22px;
  font-size: 15px;
  line-height: 1.35;
  color: #fff;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  position: relative;
}

/* Incoming — dark gray */
.dm-v2-panel .dm-v2-bubble-row.theirs .dm-v2-bubble {
  background: #262626;
  color: #fff;
  border-bottom-left-radius: 8px;
}
.dm-v2-panel .dm-v2-bubble-row.theirs.grouped .dm-v2-bubble {
  border-top-left-radius: 8px;
}

/* Outgoing — Shelfd lavender */
.dm-v2-panel .dm-v2-bubble-row.mine .dm-v2-bubble {
  background: rgba(124, 92, 255, 0.78);
  color: #fff;
  border-bottom-right-radius: 8px;
}
.dm-v2-panel .dm-v2-bubble-row.mine.grouped .dm-v2-bubble {
  border-top-right-radius: 8px;
}

/* Emoji-only — no background, large */
.dm-v2-panel .dm-v2-bubble.dm-v2-bubble-emoji,
.dm-v2-panel .dm-v2-bubble-row.mine .dm-v2-bubble.dm-v2-bubble-emoji,
.dm-v2-panel .dm-v2-bubble-row.theirs .dm-v2-bubble.dm-v2-bubble-emoji {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 4px 6px !important;
  font-size: 60px;
  line-height: 1;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Inner payload elements emitted by renderDirectMessagePayloadContent */
.dm-v2-panel .dm-v2-bubble .dm-message-text {
  display: block;
}
.dm-v2-panel .dm-v2-bubble .dm-photo-message-button {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dm-v2-panel .dm-v2-bubble .dm-photo-message {
  display: block;
  max-width: 100%;
  border-radius: 14px;
  margin: 0;
  transform: translateZ(0);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
.dm-v2-panel .dm-v2-bubble .dm-photo-message-button:active .dm-photo-message {
  transform: scale(0.985) translateZ(0);
}
.dm-v2-panel .dm-v2-bubble .dm-shared-media-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.dm-v2-panel .dm-v2-bubble .dm-shared-media-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px 14px 0 0;
}
.dm-v2-panel .dm-v2-bubble .dm-shared-media-card span {
  padding: 8px 4px 2px;
  display: block;
}
.dm-v2-panel .dm-v2-bubble .dm-shared-media-card strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.dm-v2-panel .dm-v2-bubble .dm-shared-media-card em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

/* Seen indicator */
/* v10.900: "Read {timestamp}" receipt under the last sent message in a
   1:1 thread. Spec: Söhne Light (font-weight 300), white at 60% opacity,
   right-aligned (align-self:flex-end works because the parent
   .dm-message-list is flex-column with `gap`). Tabular numerics keep
   the time string from shifting horizontally as digits change. */
.dm-v2-panel .dm-v2-seen {
  align-self: flex-end;
  font: 300 11px/1.2 'Sohne', 'DM Sans', sans-serif;
  color: rgba(255, 255, 255, 0.60);
  padding: 4px 8px 2px 0;
  margin-top: -2px;
  letter-spacing: 0.1px;
  font-variant-numeric: tabular-nums;
}


/* ---------- Composer ---------- */
.dm-v2-panel .dm-v2-compose {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px max(8px, env(safe-area-inset-bottom, 0px));
  background: #0E0E0E;
  border-top: 0;
  position: relative;
  z-index: 4;
  box-sizing: border-box;
}

/* v10.744: + attachment button — dark circle, no purple */
.dm-v2-panel .dm-v2-plus-wrap {
  position: relative;
  flex: 0 0 auto;
}
.dm-v2-panel .dm-v2-plus-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1c1c1e;
  color: #fff;
  border: 0;
  flex: 0 0 36px;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.dm-v2-panel .dm-v2-plus-btn svg {
  width: 20px;
  height: 20px;
}
.dm-v2-panel .dm-v2-plus-btn:active {
  background: rgba(255,255,255,0.12);
}

/* + attachment menu — floats above the button */
.dm-v2-panel .dm-v2-plus-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: rgba(28, 28, 30, 0.68);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  padding: 6px 0;
  min-width: 160px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  z-index: 20;
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.96);
  transform-origin: left bottom;
  pointer-events: none;
  transition:
    opacity 600ms cubic-bezier(.16, 1, .3, 1),
    transform 600ms cubic-bezier(.16, 1, .3, 1),
    background-color 600ms cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.dm-v2-panel .dm-v2-plus-menu[hidden] { display: none; }
.dm-v2-panel .dm-v2-plus-menu.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}
.dm-v2-plus-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dm-v2-plus-menu-item:active {
  background: rgba(255,255,255,0.06);
}
.dm-v2-plus-menu-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
}
.dm-v2-plus-menu-icon svg {
  width: 17px;
  height: 17px;
  color: rgba(255,255,255,0.85);
}

/* Pill input */
.dm-v2-panel .dm-v2-input-pill {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
  min-width: 0;
  min-height: 40px;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
}
.dm-v2-panel .dm-v2-input {
  flex: 1 1 auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  border: 0;
  outline: none;
  color: #fff;
  /* v10.740: 16px floor prevents iOS auto-zoom; -webkit-text-fill-color
     suppresses the iOS autofill/tap-to-fill native overlay box */
  font-size: 16px;
  -webkit-text-fill-color: #fff;
  padding: 6px 4px;
  min-width: 0;
  font-family: inherit;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-radius: 0;
}
.dm-v2-panel .dm-v2-input:-webkit-autofill,
.dm-v2-panel .dm-v2-input:-webkit-autofill:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background-color: transparent !important;
  -webkit-text-fill-color: #fff !important;
}
.dm-v2-panel .dm-v2-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.dm-v2-panel .dm-v2-pill-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 0;
  cursor: pointer;
  flex: 0 0 32px;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.dm-v2-panel .dm-v2-pill-btn svg {
  width: 19px;
  height: 19px;
}
.dm-v2-panel .dm-v2-pill-btn:hover,
.dm-v2-panel .dm-v2-pill-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* Send button — hidden until input has text */
.dm-v2-panel .dm-v2-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: #7c5cff;
  color: #fff;
  border: 0;
  flex: 0 0 36px;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.dm-v2-panel .dm-v2-send-btn svg {
  width: 18px;
  height: 18px;
  margin-left: 1px;
}
.dm-v2-panel .dm-v2-compose.has-text .dm-v2-send-btn {
  display: inline-flex;
}
/* v10.744: hide the waveform/voice btn when send is active */
.dm-v2-panel .dm-v2-compose.has-text .dm-v2-voice-btn {
  display: none;
}


/* ---------- Keyboard-active state (iOS) ---------- */
.direct-messages-page.dm-keyboard-active .dm-v2-panel .dm-v2-compose {
  padding-bottom: 8px;
}


/* ---------- Mobile breakpoints ---------- */
@media (max-width: 700px) {
  .dm-v2-panel .dm-v2-list {
    padding: 8px 10px 14px;
  }
  .dm-v2-panel .dm-v2-bubble-stack {
    max-width: 78%;
  }
  .dm-v2-panel .dm-v2-header {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* ---------- iOS Capacitor / TestFlight only ----------
   v10.808: match the current under-status-bar WebView setup. Older builds
   subtracted 50px here for a native inset model that is no longer active,
   which let the DM chat header sit behind the Dynamic Island. Keep the
   header directly under the safe area, matching Profile Studio. */
html.shelfd-capacitor-ios .dm-v2-panel .dm-v2-header {
  padding-top: max(var(--shelfd-safe-top, 0px), env(safe-area-inset-top, 0px)) !important;
}


/* =============================================================================
   v10.485 — Instagram-style inbox (chat list view)
   -----------------------------------------------------------------------------
   New layout replaces the old `.dm-lite-head` + `.dm-subtabs` + flat list
   with: avatar (left) + "Chat" title (center) + filter pill (right),
   followed by a wide search pill, then the flat chat list, with a
   floating lavender FAB at the bottom-right for starting a new chat.

   Reuses the existing `.dm-chat-list` / `.dm-chat-swipe-item` /
   `.dm-chat-row` markup (no JS markup changes needed) but resets all the
   legacy card styling those classes had so the rows render as Instagram-
   style flat list items.
   ============================================================================= */

.dm-v2-inbox {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #0E0E0E;
  position: relative;
}

/* ---------- Inbox header ---------- */
.dm-v2-inbox-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(var(--shelfd-safe-top, 0px) + 8px) 16px 10px;
  background: #0E0E0E;
}

/* v10.740: Restyled as a plain left-arrow button matching the thread's
   .dm-v2-back. The old avatar/story-ring styling was for an <img> avatar;
   the JS now places a chevron SVG here so the circle-crop looked wrong. */
.dm-v2-inbox-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 36px;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: none;
}
.dm-v2-inbox-back svg {
  width: 22px;
  height: 22px;
}
.dm-v2-inbox-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dm-v2-inbox-title {
  flex: 1 1 auto;
  text-align: center;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  font-family: inherit;
}

/* "All â–¼" filter pill on the right */
.dm-v2-inbox-filter-wrap {
  position: relative;
  flex: 0 0 auto;
}
.dm-v2-inbox-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.dm-v2-inbox-filter svg {
  width: 13px;
  height: 13px;
}
.dm-v2-inbox-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-v2-inbox-filter-menu[hidden] {
  display: none;
}
.dm-v2-inbox-filter-menu button {
  background: transparent;
  color: #fff;
  border: 0;
  text-align: left;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  transition: background 120ms ease;
}
.dm-v2-inbox-filter-menu button:hover,
.dm-v2-inbox-filter-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* ---------- Search pill ---------- */
.dm-v2-inbox-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 14px 14px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #1c1c1e;
  border: 0;
}
.dm-v2-inbox-search svg {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.55);
  flex: 0 0 18px;
}
.dm-v2-inbox-search input {
  flex: 1 1 auto;
  background: transparent !important;
  background-color: transparent !important;
  border: 0;
  outline: none;
  color: #fff;
  font-size: 16px; /* 16px floor — prevents iOS auto-zoom on focus */
  font-family: inherit;
  min-width: 0;
  padding: 0;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  /* v10.740: suppress iOS native input appearance + autofill overlay box */
  appearance: none;
  -webkit-appearance: none;
  -webkit-text-fill-color: #fff;
}
.dm-v2-inbox-search input:-webkit-autofill,
.dm-v2-inbox-search input:-webkit-autofill:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background-color: transparent !important;
  -webkit-text-fill-color: #fff !important;
}
.dm-v2-inbox-search input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Optional composer panel (when "new chat" is open) ---------- */
.dm-v2-inbox-composer-panel {
  flex: 0 0 auto;
  margin: 0 14px 10px;
}

/* v10.827: centered modern new-message modal. This replaces the old inline
   composer card visually while preserving the existing DM search/request logic. */
#direct-messages-page .dm-new-chat-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  animation: dmNewChatBackdropIn 220ms cubic-bezier(.16, 1, .3, 1) both;
}

#direct-messages-page.dm-new-chat-modal-open .dm-v2-inbox-list {
  overflow: hidden !important;
  pointer-events: none !important;
}

#direct-messages-page .dm-new-chat-panel {
  width: min(430px, calc(100vw - 30px));
  max-height: min(78dvh, 650px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(30, 32, 38, 0.94), rgba(13, 14, 18, 0.98));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform-origin: center;
  animation: dmNewChatPanelIn 260ms cubic-bezier(.16, 1, .3, 1) both;
  margin-top: -46px;
}

#direct-messages-page .dm-new-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#direct-messages-page .dm-new-chat-head > div {
  min-width: 0;
}

#direct-messages-page .dm-new-chat-kicker {
  display: block;
  margin-bottom: 4px;
  color: rgba(200, 181, 255, 0.74);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#direct-messages-page .dm-new-chat-head strong {
  display: block;
  color: #ffffff;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

#direct-messages-page .dm-new-chat-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#direct-messages-page .dm-new-chat-close svg {
  width: 18px;
  height: 18px;
}

#direct-messages-page .dm-new-chat-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

#direct-messages-page .dm-new-chat-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.54);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#direct-messages-page .dm-new-chat-tabs button.active {
  background: rgba(200, 181, 255, 0.18);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(200, 181, 255, 0.18);
}

#direct-messages-page .dm-new-chat-panel .dm-search-strip,
#direct-messages-page .dm-new-search-strip {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  overflow: hidden;
}

#direct-messages-page .dm-new-search-label {
  display: block;
  padding: 12px 14px 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 500;
}

#direct-messages-page .dm-new-search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 13px;
}

#direct-messages-page .dm-new-search-input-row svg {
  width: 18px;
  height: 18px;
  color: rgba(200, 181, 255, 0.68);
  flex: 0 0 18px;
}

#direct-messages-page .dm-new-chat-panel .dm-search-strip input,
#direct-messages-page .dm-new-search-input-row input {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 400 !important;
}

#direct-messages-page .dm-new-chat-panel .dm-search-strip input::placeholder {
  color: rgba(255, 255, 255, 0.36) !important;
}

#direct-messages-page .dm-new-search-results {
  max-height: min(42dvh, 330px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#direct-messages-page .dm-new-search-results:empty {
  display: none;
}

#direct-messages-page .dm-new-search-results::-webkit-scrollbar {
  display: none;
}

#direct-messages-page .dm-new-chat-panel .dm-search-empty {
  padding: 14px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
}

#direct-messages-page .dm-new-chat-panel .dm-user-result {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#direct-messages-page .dm-new-chat-panel .dm-user-result:first-child {
  border-top: 0 !important;
}

#direct-messages-page .dm-new-chat-panel .dm-user-result img {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow: none !important;
}

#direct-messages-page .dm-new-chat-panel .dm-user-result > div {
  flex: 1 1 auto;
  min-width: 0;
}

#direct-messages-page .dm-new-chat-panel .dm-user-result strong,
#direct-messages-page .dm-new-chat-panel .dm-user-result strong * {
  display: block !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#direct-messages-page .dm-new-chat-panel .dm-user-result span {
  display: block !important;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.44) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#direct-messages-page .dm-new-chat-panel .dm-result-action,
#direct-messages-page .dm-create-group-btn {
  min-height: 34px;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  background: rgba(200, 181, 255, 0.18) !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer;
}

#direct-messages-page .dm-new-chat-panel .dm-action-sent,
#direct-messages-page .dm-new-chat-panel .dm-result-action.dm-action-sent {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

#direct-messages-page .dm-create-group-btn {
  width: 100%;
  margin-top: -2px;
  background: #7c5cff !important;
}

#direct-messages-page .dm-create-group-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#direct-messages-page .dm-group-setup-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

#direct-messages-page .dm-group-photo-btn {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

#direct-messages-page .dm-group-photo-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#direct-messages-page #dm-group-name-input {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  outline: 0;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-family: inherit;
  font-size: 15px;
}

#direct-messages-page .dm-group-selected {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 500;
}

#direct-messages-page .dm-group-selected-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

#direct-messages-page .dm-group-selected-list::-webkit-scrollbar {
  display: none;
}

#direct-messages-page .dm-group-selected-list button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 180px;
  border: 0;
  border-radius: 999px;
  padding: 5px 9px 5px 5px;
  background: rgba(200, 181, 255, 0.14);
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  white-space: nowrap;
}

#direct-messages-page .dm-group-selected-list img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

#direct-messages-page .dm-group-selected-list em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.58);
}

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

@keyframes dmNewChatPanelIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ---------- Chat list ---------- */
.dm-v2-inbox-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 100px;
  scroll-behavior: smooth;
}
.dm-v2-inbox-list::-webkit-scrollbar {
  display: none;
}

/* Reset legacy chat-row card styling — make rows flat list items.
   Using high specificity (.dm-v2-inbox-list scope + !important) to
   beat the 16-light-mode-contrast.css ID-scoped rules. */
.dm-v2-inbox-list .dm-chat-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dm-v2-inbox-list .dm-chat-swipe-item {
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.dm-v2-inbox-list .dm-chat-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: left !important;
  cursor: pointer;
  position: relative;
  overflow: visible !important;
}
.dm-v2-inbox-list .dm-chat-row:active {
  background: rgba(255, 255, 255, 0.04) !important;
  transform: none !important;
}
.dm-v2-inbox-list .dm-chat-row img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 0 !important;
  box-shadow: none !important;
  flex: 0 0 56px !important;
}
.dm-v2-inbox-list .dm-chat-row .dm-chat-copy {
  flex: 1 1 auto !important;
  min-width: 0;
}
.dm-v2-inbox-list .dm-chat-row .dm-chat-copy strong,
.dm-v2-inbox-list .dm-chat-row .dm-chat-copy strong * {
  display: block !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-v2-inbox-list .dm-chat-row .dm-chat-copy span {
  display: block !important;
  color: rgba(255, 255, 255, 0.50) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin-top: 3px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v10.822: unread inbox rows stay visually quiet. The only unread UI is the
   lavender name plus the lavender dot on the right. */
.direct-messages-page#direct-messages-page .dm-v2-inbox-list .dm-chat-row.unread {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.direct-messages-page#direct-messages-page .dm-v2-inbox-list .dm-chat-row.unread img {
  border: 0 !important;
  box-shadow: none !important;
}
.direct-messages-page#direct-messages-page .dm-v2-inbox-list .dm-chat-row.unread .dm-chat-copy strong,
.direct-messages-page#direct-messages-page .dm-v2-inbox-list .dm-chat-row.unread .dm-chat-copy strong * {
  color: #c8b5ff !important;
}
.dm-v2-inbox-list .dm-chat-row.unread .dm-chat-copy strong::after {
  display: none !important;
}
.dm-v2-inbox-list .dm-chat-row em {
  position: static !important;
  top: auto !important;
  right: auto !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  font-style: normal !important;
  flex: 0 0 auto;
  margin-left: 8px;
  white-space: nowrap;
}
/* Lavender unread dot (right side) — only on unread rows */
.dm-v2-inbox-list .dm-chat-row.unread::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c8b5ff;
  box-shadow: 0 0 10px rgba(200, 181, 255, 0.28);
  transform: translateY(-50%);
  pointer-events: none;
}

/* v10.823: specificity lock for the full-page v2 inbox. Older contrast
   styles use #direct-messages-page + !important for legacy DM rows, so these
   selectors intentionally scope through the v2 inbox tree and the page ID. */
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
}
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row.unread {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  padding-left: 16px !important;
}
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row img,
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row.unread img {
  border: 0 !important;
  box-shadow: none !important;
}
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row .dm-chat-copy strong,
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row .dm-chat-copy strong *,
body.light-mode #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row .dm-chat-copy strong,
body.light-mode #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row .dm-chat-copy strong * {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row.unread .dm-chat-copy strong,
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row.unread .dm-chat-copy strong *,
body.light-mode #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row.unread .dm-chat-copy strong,
body.light-mode #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row.unread .dm-chat-copy strong * {
  color: #c8b5ff !important;
}
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row .dm-chat-copy strong::after,
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row.unread .dm-chat-copy strong::after,
body.light-mode #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row .dm-chat-copy strong::after,
body.light-mode #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row.unread .dm-chat-copy strong::after {
  content: none !important;
  display: none !important;
}
body #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row.unread::after,
body.light-mode #direct-messages-page.direct-messages-page .dm-v2-inbox .dm-v2-inbox-list .dm-chat-row.unread::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #c8b5ff !important;
  box-shadow: 0 0 10px rgba(200, 181, 255, 0.28) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

/* Empty state inside the v2 inbox */
.dm-v2-inbox-list .dm-empty-card {
  margin: 24px 16px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  padding: 28px 22px !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  box-shadow: none !important;
}
.dm-v2-inbox-list .dm-empty-card strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.015em !important;
}

/* ---------- Floating action button (new chat) ----------
   v10.777: switched from `position: absolute` to `position: fixed` so
   the FAB stays anchored to the bottom-right of the VIEWPORT regardless
   of inbox scroll. Previously absolute positioning made it relative to
   the nearest positioned ancestor — when the inbox list scrolled, the
   button scrolled with it and ended up stuck way down past the visible
   area. Now it floats above the scrollable inbox, always visible. */
.dm-v2-inbox-fab {
  position: fixed;
  right: 20px;
  /* Bottom nav is hidden via body.dm-fullscreen-open (.mobile-bottom-nav display:none),
     so we only need to clear the iOS home indicator safe area + breathing room. */
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: #7c5cff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2200;
  box-shadow: 0 10px 28px rgba(124, 92, 255, 0.42);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dm-v2-inbox-fab:active {
  transform: scale(0.94);
}
.dm-v2-inbox-fab svg {
  width: 26px;
  height: 26px;
}

/* iOS Capacitor: same safe-area alignment as the thread header. */
html.shelfd-capacitor-ios .dm-v2-inbox-header {
  padding-top: max(var(--shelfd-safe-top, 0px), env(safe-area-inset-top, 0px)) !important;
}

/* v10.809: Keep the global bottom nav/footer out of the fullscreen DM inbox
   and chat pages. Later bottom-nav rules use the #mobile-bottom-nav ID, so
   this ID-scoped rule must live in the late-loaded DM stylesheet. */
body.dm-fullscreen-open #mobile-bottom-nav,
body.dm-fullscreen-open .mobile-bottom-nav,
body.dm-fullscreen-open [data-dm-hidden-chrome="1"],
html:has(body.dm-fullscreen-open) #mobile-bottom-nav,
html:has(body.dm-fullscreen-open) .mobile-bottom-nav,
html:has(#direct-messages-page.open) #mobile-bottom-nav,
html:has(#direct-messages-page.open) .mobile-bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translate3d(-9999px, 9999px, 0) !important;
  z-index: -1 !important;
}

/* v10.815: DM photo hero viewer. Uses transform/opacity only for the open
   and close animation so iOS can keep the transition on the compositor. */
.dm-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 260ms cubic-bezier(.16, 1, .3, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dm-photo-viewer.is-open {
  opacity: 1;
}
.dm-photo-viewer.is-closing {
  opacity: 0;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(.32, 0, .67, 0);
}
.dm-photo-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.dm-photo-viewer-image {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  transform-origin: top left;
  transform: translate3d(0, 0, 0) scale(1, 1);
  will-change: transform;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.dm-photo-viewer-close {
  position: fixed;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(20,20,22,0.62);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  cursor: pointer;
}
.dm-photo-viewer-close svg {
  width: 19px;
  height: 19px;
}

@media (max-width: 700px) {
  .dm-v2-inbox-header {
    padding-left: 14px;
    padding-right: 14px;
  }
  .dm-v2-inbox-search {
    margin-left: 12px;
    margin-right: 12px;
  }
  .dm-v2-inbox-fab {
    right: 16px;
  }
}