/* ============================================================
   SEND.CSS — share sheet + recipient bits (T15)
   Depends on tokens.css + base.css (reuses .btn).
   ============================================================ */

body.send-open { overflow: hidden; }

.send-modal {
  position: fixed; inset: 0; z-index: 96;
  display: grid; place-items: center; padding: var(--sp-4);
  opacity: 0; transition: opacity .28s var(--ease-soft);
}
.send-modal.in { opacity: 1; }
.send-backdrop {
  position: absolute; inset: 0; border: 0; cursor: pointer;
  background: radial-gradient(120% 120% at 50% 30%, rgba(60,40,48,.6), rgba(20,16,18,.82));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}

.send-card {
  position: relative; z-index: 1; width: min(94vw, 460px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-4); padding: var(--sp-8) var(--sp-6) var(--sp-6);
  text-align: center; transform: translateY(14px) scale(.98);
  transition: transform .32s var(--ease-back);
}
.send-modal.in .send-card { transform: none; }

.send-close {
  position: absolute; top: 10px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; color: var(--ink-soft); cursor: pointer;
  display: grid; place-items: center; transition: background var(--dur-1), color var(--dur-1);
}
.send-close:hover { background: var(--paper-2); color: var(--ink); }
.send-close:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.send-seal {
  display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: var(--sp-3);
  font-size: 1.7rem; border-radius: 50%;
  background: var(--grad-romance); box-shadow: var(--sh-1), inset 0 0 0 1px var(--gold-soft);
}
.send-title { font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 1.9rem); color: var(--ink); margin-bottom: var(--sp-2); }
.send-sub { font-size: var(--fs-sm); color: var(--ink-soft); max-width: 36ch; margin: 0 auto var(--sp-5); }

.send-link-label { display: block; text-align: left; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); letter-spacing: .03em; margin-bottom: var(--sp-2); }
.send-link-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.send-link {
  flex: 1 1 auto; min-width: 0; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7em .8em;
  text-overflow: ellipsis;
}
.send-link:focus-visible { outline: none; border-color: var(--rose); box-shadow: var(--ring-focus); }
.send-copy { flex: 0 0 auto; white-space: nowrap; }
.send-copy.ok { background: var(--mood-sage); box-shadow: none; }

.send-channels { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-5); }
.send-chan {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  padding: .5em .9em; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  transition: transform var(--dur-1) var(--ease-back), border-color var(--dur-1), box-shadow var(--dur-2);
}
.send-chan:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.send-chan:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.send-chan-ico::before { font-size: 1.05em; }
.c-native .send-chan-ico::before { content: "📤"; }
.c-wa  .send-chan-ico::before { content: "💬"; }
.c-tg  .send-chan-ico::before { content: "✈️"; }
.c-mail .send-chan-ico::before { content: "✉️"; }
.c-wa:hover  { border-color: #25D366; }
.c-tg:hover  { border-color: #2AABEE; }
.c-mail:hover { border-color: var(--rose); }
.c-native:hover { border-color: var(--gold); }

.send-preview-link {
  font-size: var(--fs-sm); font-weight: 600; color: var(--rose-deep); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: .3em;
}
.send-preview-link:hover { color: var(--rose); }

/* ---------- recipient mode (page opened via #c=…) ---------- */
/* the reveal overlay covers the page; this just keeps the first paint calm */
html.ip-recipient body { background: var(--paper); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .send-modal, .send-card { transition: none !important; }
  .send-card { transform: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 480px) {
  .send-link-row { flex-direction: column; }
  .send-copy { width: 100%; }
}