/* Pale-gray canvas with native white picker/composer surfaces. */
html,
body,
#root {
  background-color: #f6f7f9;
}
/* Subtle depth on message bubbles only; sender labels and timestamps stay flat. */
[data-preview-message] {
  box-shadow:
    0 2px 6px rgb(15 23 42 / 8%),
    0 1px 2px rgb(15 23 42 / 4%);
}

/* Highlighted snippet row, tinted to echo the shared purple cursor. */
#root [data-preview-highlight] {
  position: relative;
  background-color: #eef2ff;
  border-color: #c7d2fe;
}
.snippet-preview-cursor {
  position: absolute;
  width: 40.3px;
  height: auto;
  right: 18px;
  bottom: -6px;
  pointer-events: none;
}

[data-preview-incoming] {
  background-color: #fff;
}

/* Lighter elevation for the snippet picker only. */
[data-preview-picker] {
  box-shadow:
    0 3px 8px rgb(15 23 42 / 5%),
    0 1px 2px rgb(15 23 42 / 3%);
}

/* Circle diameter is the original 24×24px button diagonal (24√2).
   Offset the extra radius so the icon keeps its original center. */
[data-preview-snippet-hover] {
  width: 33.941125px;
  height: 33.941125px;
  margin-left: -4.970563px;
  margin-bottom: -4.970563px;
  padding: 0;
  justify-content: center;
  background-color: #3f3f46;
  border-radius: 50%;
}
[data-preview-snippet-hover] svg {
  color: #fff;
}

/* Keep the decorative cursor clear of saved reply text on narrow previews. */
@media (max-width: 350px) {
  #root [data-preview-highlight] {
    padding-right: 52px;
  }
}

/* Even gaps inside the screen: the message box sits as far from the bottom as from the sides (its form adds 6px
   below it), and the conversation keeps its distance above the box. The page sizes the frame so the snippet
   picker's top gap matches (business-texting.module.css). */
.composer-position {
  bottom: 10px;
}
.conversation-position {
  bottom: 110px;
}
@media (max-width: 500px) {
  .composer-position {
    bottom: 2px;
  }
  .conversation-position {
    bottom: 102px;
  }
}

/* Make it yours: native Waveline light palette on a slightly dimmed white
   canvas, leaving headroom for the existing scroll highlight. Picker unchanged. */
.capture-surface:not(:has([data-preview-picker])) {
  background: #fdfdfd;
  color: var(--color-zinc-900);
  color-scheme: light;
}
.capture-surface:not(:has([data-preview-picker])) [data-preview-incoming] {
  background-color: var(--color-zinc-100);
  color: var(--color-zinc-900);
}