/* Send To (js/sendto.js): a full-height sheet, like Snapchat's. Your person at the top, the shared
   book (always kept), "Just save it", and a blue Send bar along the bottom once someone's chosen. */
.sheet.sendto {
  display: flex; flex-direction: column; height: calc(100dvh - var(--safe-t) - 10px); max-height: none;
  padding: 10px 0 0; overflow: hidden;
}
.sendto .grab { flex: none; }
.sendto .st-head { display: flex; align-items: center; gap: 10px; padding: 0 16px 8px; flex: none; }
.sendto .st-head h2 { flex: 1; margin: 0; font-size: 22px; }
.sendto .st-close {
  width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--chip); color: var(--fg);
  display: grid; place-items: center; flex: none;
}
.sendto .st-close svg { width: 18px; height: 18px; }
.sendto .st-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 20px; }
.sendto .st-note {
  margin: 4px 0 12px; padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.35;
  background: color-mix(in srgb, var(--accent) 24%, var(--bg)); color: var(--fg);
}
.sendto .st-label { margin: 16px 4px 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sendto .st-row {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 8px; padding: 12px 14px;
  border: 2px solid transparent; border-radius: 16px; background: var(--chip); color: var(--fg); font: inherit; text-align: left;
}
.sendto button.st-row:active { filter: brightness(.96); }
.sendto .st-person { padding: 14px; }
.sendto .st-person.on { border-color: var(--send); background: color-mix(in srgb, var(--send) 10%, var(--chip)); }
.sendto .st-avatar {
  width: 58px; height: 58px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 26px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff8fb1, #ffb36b);
}
.sendto .st-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-fg);
}
.sendto .st-icon svg { width: 22px; height: 22px; }
.sendto .st-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sendto .st-text b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sendto .st-person .st-text b { font-size: 20px; }
.sendto .st-text small { font-size: 13px; color: var(--muted); }
.sendto .st-check {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 2px solid var(--line); color: transparent;
}
.sendto .st-check svg { width: 16px; height: 16px; }
.sendto .on .st-check { background: var(--send); border-color: var(--send); color: #fff; }
.sendto .st-book.on .st-check { background: var(--ok); border-color: var(--ok); }
.sendto .st-foot { flex: none; padding: 10px 14px calc(var(--safe-b) + 12px); border-top: 1px solid var(--line); background: var(--bg); }
.sendto .st-send {
  width: 100%; height: 56px; border: 0; border-radius: 28px; background: var(--send); color: #fff;
  font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 16px rgba(14,173,255,.35); animation: rise .18s cubic-bezier(.2,.8,.2,1);
}
.sendto .st-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sendto .st-arrow { display: grid; }
.sendto .st-arrow svg { width: 22px; height: 22px; }

/* "Sent to Anna 💛 · Delivered" */
.st-toast {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 16px); transform: translate(-50%, -12px); z-index: 101;
  display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: calc(100vw - 32px);
  padding: 9px 18px; border-radius: 18px; background: rgba(20,20,22,.94); color: #fff; text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.st-toast.show { opacity: 1; transform: translate(-50%, 0); }
.st-toast .st-who { font-size: 15px; font-weight: 800; }
.st-toast .st-status { font-size: 12.5px; font-weight: 700; color: #c9c9d1; }
.st-toast .st-status[data-state="delivered"] { color: #7be3a6; }
.st-toast .st-status[data-state="waiting"] { color: #ffd76a; }

/* the viewer's Send */
#viewer .v-send { color: #fff; background: var(--send); }
.sel-bar [data-act="send"] { color: var(--send); }