/* Modal, sheet, drawer and backdrop primitives. */
.modal-backdrop,
.soft-error-backdrop,
.heart-modal-backdrop,
.chat-edit-backdrop,
.drawer-backdrop,
.plus-menu-backdrop,
.reminder-chat-backdrop,
.diary-draft-backdrop,
.photo-confirm-backdrop {
  background: var(--color-overlay) !important;
  backdrop-filter: blur(5px) saturate(.84) !important;
  -webkit-backdrop-filter: blur(5px) saturate(.84) !important;
}

/* A drawer should dim the conversation without raster-blurring every glyph
   behind it.  Keeping this unblurred also avoids the heavy blocky text seen
   on dark mobile WebKit surfaces. */
.drawer-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal,
.heart-modal,
.chat-edit-modal,
.profile-modal,
.soft-error-modal,
.reminder-chat-modal,
.recurring-scope-modal,
.plus-menu,
.context-menu,
.chat-search-panel,
.chat-bag-sheet,
.selection-bar,
.chat-drawer {
  border-color: var(--color-border) !important;
  background: var(--color-surface-raised) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-modal) !important;
}

.chat-drawer,
.chat-bag-sheet,
.chat-search-panel {
  background: var(--color-panel-solid) !important;
  color: var(--color-text) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.chat-drawer *,
.chat-bag-sheet * {
  border-color: var(--color-border) !important;
}

.chat-drawer h3,
.chat-drawer strong,
.chat-bag-sheet h3,
.chat-bag-sheet strong {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

.chat-drawer p,
.chat-drawer small,
.chat-drawer span,
.chat-bag-sheet p,
.chat-bag-sheet small,
.chat-bag-sheet span {
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
}

.chat-drawer button,
.chat-bag-sheet button,
.chat-bag-sheet [class*="chip"] {
  color: var(--color-accent) !important;
  -webkit-text-fill-color: var(--color-accent) !important;
}

body[data-app-theme][data-view="chat"] .chat-drawer,
body[data-app-theme][data-view="chat"] .chat-bag-sheet,
body[data-app-theme][data-view="chat"] .chat-search-panel {
  background: var(--color-panel-solid) !important;
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.modal h3,
.heart-modal h4,
.chat-edit-modal h3,
.profile-modal h3,
.soft-error-modal h3,
.reminder-chat-modal h3,
.recurring-scope-modal h3 { color: var(--color-text) !important; }

.modal small,
.heart-modal p,
.soft-error-modal p,
.reminder-chat-modal p,
.reminder-chat-modal small,
.recurring-scope-modal p,
.recurring-scope-modal small { color: var(--color-text-muted) !important; }

.soft-error-modal small,
.heart-main-icon,
.heart-main .heart-rate-icon,
.reminder-modal-kicker { color: var(--color-accent) !important; }