.c42-whatsapp-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Root only lays out the editor surface and the (separate) preview below it. */
  gap: 1rem;
  color: var(--c42-color-fg, #111827);
  box-sizing: border-box;
}

/* The rich editor itself: a single continuous card (white, rounded, subtle
   shadow) holding the toolbar, text area and footer. The preview lives outside
   it as a sibling, so it reads as a separate element. */
.c42-whatsapp-editor-surface {
  display: flex;
  flex-direction: column;
  background: var(--c42-color-bg, #ffffff);
  border: 1px solid var(--c42-color-border, #e5e7eb);
  border-radius: var(--c42-radius, 0.75rem);
  box-shadow: var(--c42-shadow, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.c42-whatsapp-editor *,
.c42-whatsapp-editor *::before,
.c42-whatsapp-editor *::after {
  box-sizing: border-box;
}

.c42-whatsapp-editor-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.125rem;
  /* 0.5rem here + the command buttons' own 0.5rem inline padding lines the first
     icon up at 16px — the same inline offset as the textarea text below. */
  padding: 0.5rem;
  border: 0;
}

/* Divider between the fixed tools and the text area, inset 16px on each side so
   its ends align with the icons and the text rather than the card edges. */
.c42-whatsapp-editor-toolbar::after {
  content: '';
  position: absolute;
  inset-inline: 1rem;
  bottom: 0;
  height: 1px;
  background: var(--c42-color-border, #e5e7eb);
}

/* Thin vertical divider to group toolbar / floating-menu actions. */
.c42-whatsapp-editor-separator {
  flex: none;
  align-self: stretch;
  width: 1px;
  min-height: 1.25rem;
  margin: 0.125rem 0.25rem;
  background: var(--c42-color-border, #e5e7eb);
}

.c42-whatsapp-editor-command,
.c42-whatsapp-editor-trigger {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c42-color-fg, #111827);
  padding: 0.375rem 0.5rem;
  min-width: 2rem;
  border-radius: var(--c42-radius-sm, 0.375rem);
  font: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--c42-transition, 200ms ease);
}

.c42-whatsapp-editor-command:hover,
.c42-whatsapp-editor-trigger:hover {
  background: color-mix(in srgb, var(--c42-color-accent, #25d366) 12%, transparent);
}

/* Active marker (selection is wrapped): reflected by the controller via
   aria-pressed / data-active on the toolbar and floating-menu buttons. */
.c42-whatsapp-editor-command[aria-pressed='true'],
.c42-whatsapp-editor-command[data-active] {
  background: color-mix(in srgb, var(--c42-color-accent, #25d366) 18%, transparent);
  color: var(--c42-color-accent, #25d366);
}

.c42-whatsapp-editor-trigger {
  color: var(--c42-color-accent, #25d366);
}

.c42-whatsapp-editor-trigger[hidden] {
  display: none;
}

.c42-whatsapp-editor-input {
  width: 100%;
  min-height: 8rem;
  /* Integrated into the card: no border, no separate background, just padding. */
  padding: 0.875rem 1rem;
  border: 0;
  background: none;
  border-radius: 0;
  color: var(--c42-color-fg, #111827);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

.c42-whatsapp-editor-input::placeholder {
  color: var(--c42-color-muted, #9ca3af);
}

.c42-whatsapp-editor-input:focus {
  outline: none;
  box-shadow: none;
}

/* Floating bubble toolbar that appears above the current text selection.
   The controller sets left/top to the selection point; the transform lifts it
   above the line and centers it horizontally. */
.c42-whatsapp-editor-floating {
  position: absolute;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem;
  width: max-content;
  max-width: 100%;
  background: var(--c42-color-bg, #ffffff);
  border: 1px solid var(--c42-color-border, #e5e7eb);
  border-radius: var(--c42-radius, 0.75rem);
  box-shadow: var(--c42-shadow, 0 6px 18px rgba(0, 0, 0, 0.14));
  /* Sit just above the selected line (the controller clamps within the editor). */
  transform: translate(-50%, calc(-100% - 0.5rem));
  animation: c42-wa-floating-in 120ms ease both;
}

/* Hidden/closed state — the theme must own this because the rule above sets
   `display`, which would otherwise override the native `hidden` attribute
   (mirrors how the emoji panel handles `[hidden]`). */
.c42-whatsapp-editor-floating[hidden],
.c42-whatsapp-editor-floating[data-state='closed'] {
  display: none;
}

@keyframes c42-wa-floating-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% - 0.25rem));
  }
  to {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 0.5rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .c42-whatsapp-editor-floating {
    animation: none;
  }
}

/* Footer row: counter on the left, emoji affordance on the right. */
.c42-whatsapp-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.625rem;
}

.c42-whatsapp-editor-counter {
  font-size: 0.75rem;
  color: var(--c42-color-muted, #6b7280);
}

/* Positioned anchor so the picker drops from the bottom-right trigger. */
.c42-whatsapp-editor-emoji {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}

.c42-whatsapp-editor-panel {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 10;
}

.c42-whatsapp-editor-panel[hidden] {
  display: none;
}

/* Built-in inline emoji grid (used when you don't plug in a 3rd-party picker). */
.c42-whatsapp-editor-panel--grid {
  background: var(--c42-color-bg, #ffffff);
  border: 1px solid var(--c42-color-border, #e5e7eb);
  border-radius: var(--c42-radius, 0.75rem);
  box-shadow: var(--c42-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem;
}

.c42-whatsapp-editor-item {
  background: none;
  border: 0;
  font-size: 1.25rem;
  padding: 0.375rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background var(--c42-transition, 200ms ease);
}

.c42-whatsapp-editor-item:hover {
  background: var(--c42-color-surface, #f9fafb);
}

/* Preview — a WhatsApp-like bubble rendering of the parsed markup. Rendered as a
   separate block below the editor surface (not inside the card). */
.c42-whatsapp-editor-preview {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--c42-radius, 0.75rem);
  background: var(--c42-color-surface, #f0f2f5);
  color: var(--c42-color-fg, #111827);
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.c42-whatsapp-editor-preview:empty {
  display: none;
}

.c42-whatsapp-editor-preview strong {
  font-weight: 700;
}

.c42-whatsapp-editor-preview em {
  font-style: italic;
}

.c42-whatsapp-editor-preview del {
  text-decoration: line-through;
}

.c42-whatsapp-editor-preview code,
.c42-whatsapp-editor-preview pre {
  font-family: var(--c42-font-mono, ui-monospace, monospace);
  font-size: 0.875em;
  background: color-mix(in srgb, var(--c42-color-fg, #111827) 8%, transparent);
  border-radius: 0.25rem;
}

.c42-whatsapp-editor-preview code {
  padding: 0.05em 0.3em;
}

.c42-whatsapp-editor-preview pre {
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
}

.c42-whatsapp-editor-preview pre code {
  padding: 0;
  background: none;
}

.c42-whatsapp-editor-preview blockquote {
  margin: 0.25rem 0;
  padding-left: 0.625rem;
  border-left: 3px solid var(--c42-color-accent, #25d366);
  color: var(--c42-color-muted, #6b7280);
}

.c42-whatsapp-editor-preview ul,
.c42-whatsapp-editor-preview ol {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   Opt-in device preview (default phone skin).

   Wrap the preview in `.c42-whatsapp-editor-device` to render it on a WhatsApp
   phone background. Entirely optional — omit the wrapper to keep the plain
   bubble. The background image ships with @42/styles; positioning is tunable
   via the custom properties below.

   <div class="c42-whatsapp-editor-device">
     <div data-c42-wa-preview class="c42-whatsapp-editor-preview"></div>
   </div>
   ─────────────────────────────────────────────────────────────────────────── */
.c42-whatsapp-editor-device {
  --c42-wa-device-width: 22rem;
  --c42-wa-device-height: 19rem;
  --c42-wa-device-pad-top: 6.5rem; /* clears the header bar in the image */
  --c42-wa-device-pad-x: 1rem;
  /* Cap the bubble height so long messages scroll instead of overflowing. */
  --c42-wa-device-msg-max-height: calc(
    var(--c42-wa-device-height) - var(--c42-wa-device-pad-top) - 1.5rem
  );

  position: relative;
  width: 100%;
  max-width: var(--c42-wa-device-width);
  height: var(--c42-wa-device-height);
  margin: 0 auto;
  padding: var(--c42-wa-device-pad-top) var(--c42-wa-device-pad-x) 1rem;
  overflow: hidden;
  background: url('./assets/whatsapp-phone.webp') top center / 100% auto no-repeat;
  box-sizing: border-box;
}

/* Inside the frame the bubble becomes the WhatsApp incoming (white) bubble. */
.c42-whatsapp-editor-device .c42-whatsapp-editor-preview {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: var(--c42-wa-device-msg-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Thin, subtle scrollbar matching the WhatsApp bubble tone (Firefox/standard). */
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 20, 26, 0.2) transparent;
  margin: 0 0.5rem 0 1rem;
  background: #ffffff;
  color: #111b21;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13);
}

/* WebKit (Chrome/Safari/Edge): thin scrollbar with a subtle WhatsApp-toned thumb. */
.c42-whatsapp-editor-device .c42-whatsapp-editor-preview::-webkit-scrollbar {
  width: 4px;
}

.c42-whatsapp-editor-device .c42-whatsapp-editor-preview::-webkit-scrollbar-track {
  background: transparent;
}

.c42-whatsapp-editor-device .c42-whatsapp-editor-preview::-webkit-scrollbar-thumb {
  background: rgba(11, 20, 26, 0.2);
  border-radius: 4px;
}

.c42-whatsapp-editor-device .c42-whatsapp-editor-preview::-webkit-scrollbar-thumb:hover {
  background: rgba(11, 20, 26, 0.35);
}

/* The little tail ("pico") at the top-left, like a real WhatsApp incoming bubble.
   Drawn on the device wrapper (not the bubble) because the bubble sets
   overflow-y:auto for scrolling, which also clips overflow-x and would hide a
   tail positioned outside its box. Positioned to meet the bubble's top-left
   corner: device padding-x (1rem) + bubble margin-left (1rem) − tail width. */
.c42-whatsapp-editor-device::after {
  content: '';
  position: absolute;
  top: var(--c42-wa-device-pad-top);
  /* overlap the bubble's left edge by 1px so no shadow seam shows between them */
  left: calc(var(--c42-wa-device-pad-x) + 1rem - 0.5rem);
  width: calc(0.5rem + 1px);
  height: 0.5rem;
  background: #ffffff;
  /* flat top edge continues the bubble; hypotenuse slopes down to the corner */
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  /* paint above the bubble so its box-shadow can't cut into the tail */
  z-index: 1;
  display: none;
}

/* Only show the tail when the bubble actually has rendered content. */
.c42-whatsapp-editor-device:has(
    .c42-whatsapp-editor-preview:not(:empty):not([data-empty])
  )::after {
  display: block;
}

.c42-whatsapp-editor-device .c42-whatsapp-editor-preview:empty,
.c42-whatsapp-editor-device .c42-whatsapp-editor-preview[data-empty] {
  display: none;
}