/* send: STUUR_NAAR_DAAN. A preview bubble, the big mint link, and the "werkt het niet?" fallbacks.
   The confirm dialog lives in the overlay layer, so it carries .scr-send itself (.scr-send.scr-send__confirm). */
.scr-send.screen {
  /* room to scroll everything clear of Henk when he nags */
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
}

.scr-send .scr-send__heading {
  margin: 0;
}

.scr-send .scr-send__intro {
  margin-top: 6px;
}

/* --- preview: a mint "outgoing" bubble in a lavender chat --- */
.scr-send .scr-send__chat {
  padding: 8px 10px 12px;
  background: var(--lav-l);
  border: var(--bw) solid var(--ink);
}

.scr-send .scr-send__to {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  line-height: 1.3;
}

.scr-send .scr-send__to b {
  font-family: var(--font-ui);
  font-weight: 400;
  text-transform: uppercase;
}

.scr-send .scr-send__bubble-wrap {
  position: relative;
  margin: 0 15px 0 24px;
  padding: 8px 10px 20px;
  background: var(--mint);
  border: var(--bw) solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
}

/* pixel tail on the right, like an outgoing chat message */
.scr-send .scr-send__bubble-wrap::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23C8F6C8' d='M0 0h1v3H0zM1 1h1v2H1zM2 2h1v1H2z'/%3E%3Cpath fill='%23292A33' d='M1 0h1v1H1zM2 1h1v1H2zM3 2h1v1H3zM0 3h4v1H0z'/%3E%3C/svg%3E") 0 0 / 12px 12px no-repeat;
}

.scr-send .scr-send__bubble {
  font-size: var(--fs-s);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.scr-send .scr-send__bubble p {
  margin: 0;
}

.scr-send .scr-send__bubble b {
  font-weight: 700;
}

.scr-send .scr-send__gap {
  height: 6px;
}

/* WhatsApp's _italic_ lines: the pixel font has no italics, so they are a little lighter */
.scr-send .scr-send__em {
  opacity: 0.78;
}

.scr-send .scr-send__bubble .scr-send__more {
  margin-top: 4px;
  font-size: var(--fs-xs);
}

.scr-send .scr-send__time {
  position: absolute;
  right: 6px;
  bottom: 2px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.4;
}

/* very short screens (the first iPhone SE): the button matters more than the preview */
@media (max-height: 600px) {
  .scr-send .scr-send__chat {
    display: none;
  }
}

/* --- the big button --- */
.scr-send .scr-send__wa {
  gap: 12px;
  margin-top: 16px;
  padding: 10px 14px;
  font-size: clamp(18px, 5.6vw, 24px);
}

.scr-send .scr-send__wa-icon {
  display: flex;
}

.scr-send .scr-send__wa-label {
  white-space: nowrap;
}

/* very narrow phones: the label needs the room */
@media (max-width: 340px) {
  .scr-send .scr-send__wa-icon {
    display: none;
  }
}

@keyframes scr-send-nudge {
  0%, 100% { transform: none; }
  25% { transform: translateY(-6px); }
  50% { transform: none; }
  75% { transform: translateY(-3px); }
}

.scr-send .scr-send__wa.scr-send__nudge {
  animation: scr-send-nudge calc(480ms / var(--speed)) steps(4) 2;
}

.scr-send .scr-send__hint {
  margin-top: 14px;
  font-weight: 700;
  text-align: center;
}

.scr-send .scr-send__hint2 {
  margin-top: 2px;
  font-size: var(--fs-s);
  line-height: 1.3;
  text-align: center;
}

.scr-send .scr-send__divider {
  margin-top: 16px;
}

/* --- werkt het niet? --- */
.scr-send .scr-send__alt-title {
  font-family: var(--font-ui);
  font-size: var(--fs-s);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

/* Two or three buttons (DEEL… only where the phone can share, which includes every iPhone). They share
   the row equally, never break a label, and a button that no longer fits moves to its own full-width row. */
.scr-send .scr-send__alt-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.scr-send .scr-send__alt-btn {
  flex: 1 1 0;
  min-width: max-content;
  min-height: var(--tap);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  white-space: nowrap;
  box-shadow: 3px 3px 0 0 var(--ink);
}

.scr-send .scr-send__alt-btn:active {
  transform: translate(3px, 3px);
}

.scr-send .scr-send__textwrap {
  margin-top: 14px;
}

.scr-send .scr-send__textnote {
  margin: 0 0 8px;
  font-size: var(--fs-s);
  line-height: 1.3;
  text-align: center;
}

.scr-send .scr-send__textwrap.is-manual .scr-send__textnote {
  padding: 6px 8px;
  text-align: left;
  background: var(--yellow);
  border: var(--bw) solid var(--ink);
}

/* Read-only (nothing to type, so no iOS zoom at 16 px): compact for screenshots; LEESBRIL makes it bigger. */
.scr-send .scr-send__text {
  display: block;
  font-size: max(16px, var(--fs-s));
  line-height: 1.3;
  white-space: pre-wrap;
  overflow: hidden;
  resize: none;
}

.scr-send .scr-send__manual {
  display: block;
  min-height: var(--tap);
  margin: 12px auto 0;
}

/* --- the "is het verstuurd?" dialog --- */
.scr-send.scr-send__confirm .scr-send__q {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-m);
  line-height: 1.25;
}

.scr-send.scr-send__confirm .scr-send__qsub {
  font-size: var(--fs-s);
  line-height: 1.3;
}

/* the buttons are listed KOPIEER, NEE, JA (so JA gets the focus); show them JA first */
.scr-send.scr-send__confirm .btn-row {
  flex-direction: column-reverse;
  align-items: stretch;
}