/* Telegram-inspired midnight chat. This is scoped to the new default chat
   background so every other saved theme and photo wallpaper stays intact. */
#chatView[data-chat-background="midnight"] {
  --midnight-canvas: #0b1220;
  --midnight-incoming: #202b3a;
  --midnight-outgoing-a: #7c2ec7;
  --midnight-outgoing-b: #278bd8;
  --midnight-muted: #9aa9ba;
  --midnight-line: rgba(255, 255, 255, .12);
  --glass-bg: #0b1220;
  background:
    radial-gradient(circle at 88% 8%, rgba(119, 67, 181, .28), transparent 35%),
    radial-gradient(circle at 8% 82%, rgba(40, 127, 184, .23), transparent 40%),
    linear-gradient(165deg, #111a2b 0%, #0a101c 56%, #130d20 100%) !important;
  border-color: transparent !important;
  color: #f7f9ff;
}

#chatView[data-chat-background="midnight"] #chatMessages.chat-messages[data-background="midnight"]:not(.custom-wallpaper) {
  background:
    radial-gradient(circle at 88% 8%, rgba(119, 67, 181, .28), transparent 35%),
    radial-gradient(circle at 8% 82%, rgba(40, 127, 184, .23), transparent 40%),
    linear-gradient(165deg, #111a2b 0%, #0a101c 56%, #130d20 100%) !important;
  background-attachment: local !important;
  color: #f7f9ff;
}

#chatView[data-chat-background="midnight"] .chat-topbar {
  grid-template-columns: 44px 46px minmax(0, 1fr) 42px !important;
  gap: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#chatView[data-chat-background="midnight"] .chat-composer {
  min-height: 48px !important;
  padding: 2px 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(120deg, rgba(28, 43, 61, .76), rgba(17, 29, 43, .68)) !important;
  border: 1px solid rgba(184, 211, 242, .24) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 7px 22px rgba(0, 0, 0, .42) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.28) !important;
  backdrop-filter: blur(24px) saturate(1.28) !important;
}

#chatView[data-chat-background="midnight"] .chat-topbar::after,
#chatView[data-chat-background="midnight"] .chat-composer::after {
  display: none !important;
}

#chatView[data-chat-background="midnight"] .chat-partner-copy strong,
#chatView[data-chat-background="midnight"] .chat-compose-row textarea {
  color: #fff !important;
}

#chatView[data-chat-background="midnight"] .chat-partner-copy small,
#chatView[data-chat-background="midnight"] .chat-partner-copy small.offline,
#chatView[data-chat-background="midnight"] .chat-compose-row textarea::placeholder {
  color: var(--midnight-muted) !important;
}

#chatView[data-chat-background="midnight"] .chat-back-btn,
#chatView[data-chat-background="midnight"] .chat-more-btn {
  background: rgba(37, 49, 66, .7) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
}

#chatView[data-chat-background="midnight"] .chat-back-btn,
#chatView[data-chat-background="midnight"] .chat-more-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
}

#chatView[data-chat-background="midnight"] .chat-partner-avatar {
  z-index: 2;
  width: 46px !important;
  height: 46px !important;
  background: #263448 !important;
  border: 2px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .32) !important;
}

#chatView[data-chat-background="midnight"] .chat-partner-copy {
  align-self: center;
  align-content: center;
  grid-template-rows: auto auto;
  height: 52px;
  min-height: 0;
  margin-right: -3px;
  margin-left: -52px;
  width: calc(100% + 55px);
  min-width: 0;
  max-width: none;
  justify-self: stretch;
  overflow: hidden;
  padding: 4px 14px 4px 60px;
  border: 1px solid rgba(177, 126, 224, .18);
  border-radius: 999px;
  background: linear-gradient(110deg, rgba(42, 49, 70, .72), rgba(77, 32, 91, .68));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 7px 20px rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
}

#chatView[data-chat-background="midnight"] .chat-partner-copy strong {
  line-height: 1.15 !important;
}

#chatView[data-chat-background="midnight"] .chat-partner-copy small {
  min-height: 13px;
  overflow: hidden;
  line-height: 1.1 !important;
  white-space: nowrap;
}

#chatView[data-chat-background="midnight"] .chat-bubble {
  background: var(--midnight-incoming) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
}

#chatView[data-chat-background="midnight"] .chat-message.mine .chat-bubble {
  background: linear-gradient(135deg, var(--midnight-outgoing-a), var(--midnight-outgoing-b)) !important;
  color: #fff !important;
}

#chatView[data-chat-background="midnight"] .chat-message.theirs .chat-bubble {
  border-bottom-left-radius: 5px !important;
}

#chatView[data-chat-background="midnight"] .chat-message.mine .chat-bubble {
  border-bottom-right-radius: 5px !important;
}

#chatView[data-chat-background="midnight"] .chat-message:is(.photo, .sticker) .chat-bubble {
  background: transparent !important;
}

#chatView[data-chat-background="midnight"] .chat-message.photo:not(.sticker) .chat-photo-message {
  background: #101720;
  border: 1px solid var(--midnight-line);
}

#chatView[data-chat-background="midnight"] .chat-bubble p,
#chatView[data-chat-background="midnight"] .chat-bubble footer,
#chatView[data-chat-background="midnight"] .chat-message.mine .chat-bubble :is(p, footer, small) {
  color: inherit !important;
  text-shadow: none !important;
}

#chatView[data-chat-background="midnight"] .chat-bubble footer {
  opacity: .72;
}

#chatView[data-chat-background="midnight"] .chat-replied {
  background: rgba(0, 0, 0, .2) !important;
  border-left-color: #d5b4ff !important;
  color: #f2eaff !important;
}

#chatView[data-chat-background="midnight"] .chat-message-reactions {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
  filter: none !important;
}

#chatView[data-chat-background="midnight"] .chat-message-reactions :is(span, button) {
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

#chatView[data-chat-background="midnight"] :is(.chat-date-separator, .chat-new-marker, .chat-history-state, .chat-typing, .chat-new-messages) {
  background: rgba(30, 40, 55, .88) !important;
  border-color: var(--midnight-line) !important;
  color: #dce6f2 !important;
  box-shadow: none !important;
}

#chatView[data-chat-background="midnight"] .chat-empty,
#chatView[data-chat-background="midnight"] .chat-empty p {
  color: #c7d0dc !important;
}

#chatView[data-chat-background="midnight"] .chat-media-btn,
#chatView[data-chat-background="midnight"] .chat-mic-btn,
#chatView[data-chat-background="midnight"] .chat-emoji-btn {
  color: #c7d4e5 !important;
}

#chatView[data-chat-background="midnight"] .chat-compose-row {
  gap: 0 !important;
}

#chatView[data-chat-background="midnight"] .chat-compose-row textarea {
  min-height: 38px !important;
  padding: 8px 4px 6px !important;
}

#chatView[data-chat-background="midnight"] :is(.chat-emoji-btn, .chat-media-btn, .chat-mic-btn) {
  width: 33px !important;
  height: 38px !important;
  background: transparent !important;
}

#chatView[data-chat-background="midnight"] .chat-send-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #5dbeff, #247ed0) !important;
  border-color: rgba(177, 224, 255, .62) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(36, 126, 208, .4) !important;
}

.chat-camera-icon { display: none !important; }
#chatView[data-chat-background="midnight"] .chat-composer:not(.has-text) .chat-send-icon { display: none !important; }
#chatView[data-chat-background="midnight"] .chat-composer:not(.has-text) .chat-camera-icon { display: block !important; }
#chatView[data-chat-background="midnight"] .chat-composer.has-text .chat-send-icon { display: block !important; }
#chatView[data-chat-background="midnight"] .chat-camera-icon { width: 22px; height: 22px; }

#chatView[data-chat-background="midnight"] :is(.chat-search-bar, .chat-reply-preview, .chat-pinned-message, .chat-offline-notice) {
  background: rgba(27, 37, 52, .96) !important;
  border-color: var(--midnight-line) !important;
  color: #f4f7fb !important;
}

/* Telegram-like reply strip: one compact row inside the composer, not a
   second floating card above it. */
#chatView[data-chat-background="midnight"] .chat-reply-preview {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
  min-height: 50px;
  margin: 0 3px 1px !important;
  padding: 3px 1px 4px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#chatView[data-chat-background="midnight"] .chat-reply-preview::before {
  content: '↩';
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #58b7ff;
  font-size: 22px;
  font-weight: 800;
}
#chatView[data-chat-background="midnight"] .chat-reply-preview > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}
#chatView[data-chat-background="midnight"] .chat-reply-preview small {
  overflow: hidden;
  color: #62baff !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chatView[data-chat-background="midnight"] .chat-reply-preview strong {
  overflow: hidden;
  color: #c1ccda !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chatView[data-chat-background="midnight"] .chat-reply-preview button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: #aebccc !important;
  box-shadow: none !important;
  font-size: 24px;
}

#chatView[data-chat-background="midnight"] :is(.chat-link-preview, .chat-voice-player) {
  background: rgba(8, 15, 25, .28) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: inherit !important;
}

#chatView[data-chat-background="midnight"] .chat-emoji-picker {
  background: #17202d !important;
  border-color: var(--midnight-line) !important;
  color: #fff !important;
}

#chatView[data-chat-background="midnight"] .chat-emoji-picker :is(.chat-picker-handle span, .chat-emoji-heading, .chat-sticker-section) {
  color: #c7d4e5 !important;
}

#chatView[data-chat-background="midnight"] .chat-emoji-picker button {
  color: #eef5ff;
  background-color: transparent;
}

#chatView[data-chat-background="midnight"] .chat-emoji-picker button[aria-pressed="true"] {
  background: #34445a !important;
  box-shadow: inset 0 -2px #9b65e8 !important;
}

#chatBackgroundPicker .background-sample.midnight {
  background: linear-gradient(145deg, #050608, #202b3a 55%, #7c2ec7 56%, #278bd8);
}

/* Conversation overview: partner chat leads; Saved Messages is a compact
   private utility. Each card remains a single, lightweight glass surface. */
#chatView[data-chat-background="midnight"] .chat-conversation-list { gap: 15px; }
#chatView[data-chat-background="midnight"] .chat-list-header { padding: 10px 6px 2px; }
#chatView[data-chat-background="midnight"] .chat-list-search {
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 18px;
  background: rgba(255,255,255,.5) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 10px 26px rgba(79,53,91,.1) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
  backdrop-filter: blur(22px) saturate(1.16);
}
#chatView[data-chat-background="midnight"] .chat-list-rows {
  display: grid;
  gap: 12px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#chatView[data-chat-background="midnight"] .chat-list-row {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8) !important;
  border-radius: 25px;
  background: linear-gradient(125deg, rgba(255,255,255,.7), rgba(238,227,245,.45)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.86), 0 14px 32px rgba(78,52,92,.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  backdrop-filter: blur(24px) saturate(1.18);
  transition: transform .16s ease, box-shadow .16s ease;
}
#chatView[data-chat-background="midnight"] .chat-list-row:first-child {
  min-height: 98px;
  padding: 15px;
  background: radial-gradient(circle at 92% 12%, rgba(214,112,190,.22), transparent 34%), linear-gradient(125deg, rgba(255,255,255,.76), rgba(233,220,244,.5)) !important;
}
#chatView[data-chat-background="midnight"] .chat-list-row:first-child::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(#ef70ba, #8b64db);
}
#chatView[data-chat-background="midnight"] .chat-list-row:last-child {
  min-height: 78px;
  padding: 10px 13px;
  border-radius: 21px;
  background: linear-gradient(125deg, rgba(255,255,255,.58), rgba(231,234,255,.42)) !important;
}
#chatView[data-chat-background="midnight"] .chat-list-row:active {
  transform: scale(.985);
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 8px 20px rgba(78,52,92,.11);
}
#chatView[data-chat-background="midnight"] .chat-list-row:first-child .chat-list-avatar { width: 62px; height: 62px; }
#chatView[data-chat-background="midnight"] .chat-list-row:last-child .chat-list-avatar {
  width: 50px;
  height: 50px;
  border: 0;
  box-shadow: 0 7px 18px rgba(91,74,191,.22);
}
#chatView[data-chat-background="midnight"] .chat-list-row:first-child .chat-list-copy strong { font-size: 17px; }
#chatView[data-chat-background="midnight"] .chat-list-row:last-child .chat-list-copy strong::after {
  content: '  ·  Private';
  color: #8d73a2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}
#chatView[data-chat-background="midnight"] .chat-list-privacy { margin-top: -5px; color: #9a879f; }
html[data-appearance="dark"] #chatView[data-chat-background="midnight"] .chat-list-search,
html[data-appearance="dark"] #chatView[data-chat-background="midnight"] .chat-list-row {
  border-color: rgba(255,255,255,.15) !important;
  background: linear-gradient(125deg, rgba(38,35,48,.88), rgba(24,25,34,.72)) !important;
}
html[data-appearance="dark"] #chatView[data-chat-background="midnight"] .chat-list-row:first-child {
  background: radial-gradient(circle at 92% 12%, rgba(189,72,160,.2), transparent 34%), linear-gradient(125deg, rgba(52,43,59,.9), rgba(25,25,35,.78)) !important;
}

@media (max-width: 520px) {
  body.chat-active #chatView[data-chat-background="midnight"] {
    background:
      radial-gradient(circle at 88% 8%, rgba(119, 67, 181, .28), transparent 35%),
      radial-gradient(circle at 8% 82%, rgba(40, 127, 184, .23), transparent 40%),
      linear-gradient(165deg, #111a2b 0%, #0a101c 56%, #130d20 100%) !important;
  }

  body.chat-active #chatView[data-chat-background="midnight"] .chat-conversation-pane {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  body.chat-active #chatView[data-chat-background="midnight"] .chat-conversation-pane.hidden {
    display: none;
  }

  body.chat-active #chatView[data-chat-background="midnight"] .chat-messages {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    padding: 72px 10px 76px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overscroll-behavior: contain;
  }

  body.chat-active #chatView[data-chat-background="midnight"] .chat-topbar {
    position: absolute !important;
    z-index: 24;
    top: 8px !important;
    right: 8px;
    left: 8px;
    margin: 0 !important;
  }

  body.chat-active #chatView[data-chat-background="midnight"] .chat-composer {
    position: absolute !important;
    z-index: 24;
    right: 8px;
    bottom: max(8px, var(--safe-bottom)) !important;
    left: 8px;
    margin: 0 !important;
  }

  body.chat-active #chatView[data-chat-background="midnight"] :is(.chat-search-bar, .chat-offline-notice, .chat-pinned-bar) {
    position: absolute;
    z-index: 23;
    top: 66px;
    right: 10px;
    left: 10px;
    margin: 0 !important;
  }

  body.chat-active #chatView[data-chat-background="midnight"] .chat-new-below-anchor {
    position: absolute;
    z-index: 25;
    right: 0;
    bottom: 76px;
    left: 0;
  }

  body.chat-list-active #chatView[data-chat-background="midnight"] .chat-conversation-list {
    padding-inline: 2px;
  }
}