/*
 * The WhatsApp channel of "Nachricht senden" (M3): channel choice with counter,
 * the message as a chat bubble with its button, and the cost box in front of
 * the send button. Tokens only; the bubble follows the dashboard theme.
 */
@layer components {
  /* Subject, dish and the mail preview make room when WhatsApp is chosen. */
  .campaign-editor [hidden] {
    display: none !important;
  }

  .campaign-channel {
    border: 0;
    gap: 4px;
    margin: 0;
    padding: 0;
  }

  .campaign-channel__choice--locked {
    color: var(--color-ink-medium);
    cursor: not-allowed;
  }

  .campaign-channel__counter {
    display: block;
    font-variant-numeric: tabular-nums;
    margin-block-start: 4px;
  }

  .campaign-channel__counter--over {
    color: var(--color-negative);
  }

  .whatsapp-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .whatsapp-preview__chat {
    background: var(--color-ink-lightest);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 8px;
    padding: 24px 16px;
  }

  .whatsapp-preview__bubble {
    background: var(--color-surface);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 8px;
    border-start-start-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-inline-size: 38ch;
    padding: 12px 12px 0;
  }

  .whatsapp-preview__text {
    font-size: var(--text-small, 0.9rem);
    overflow-wrap: anywhere;
  }

  .whatsapp-preview__button {
    border-block-start: 1px solid var(--color-ink-lighter);
    color: var(--color-link);
    font-weight: 600;
    margin-inline: -12px;
    padding: 12px;
    text-align: center;
  }

  .campaign-cost {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .campaign-cost__line {
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-block: 4px;
  }
}