/* Sender page (/u/{name}) restyle to the purple bestfriendgame look (2026-10-11).
   Visual layer only, loaded after the page's own <style>; scoped to body.tm-send. */
body.tm-send {
  --ink: #231a38; --muted: #6a6376; --line: #e8e4ef; --brand: #6c3ee8; --soft: #f0e6ff; --lime: #d4f597;
  background: #f7f6fb !important;
  color: var(--ink);
}
body.tm-send, body.tm-send *:not(.tma-shuffle-btn svg) { font-family: Inter, "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }

/* question card: white header + purple writing area (NGL layout, our colours) */
body.tm-send .tma-msgcard { border: 1px solid #e6dced !important; border-radius: 26px !important; box-shadow: 0 24px 60px -34px #41216866 !important; overflow: hidden; }
body.tm-send .tma-msgcard-avatar { background: var(--soft) !important; }
body.tm-send .tma-msgcard-user { color: #8a7a9c !important; font-weight: 650 !important; }
body.tm-send .tma-msgcard-question { color: var(--ink) !important; font-weight: 750 !important; letter-spacing: -.02em; }
body.tm-send .tma-msgcard-body { background: radial-gradient(ellipse at 0 0, #9a6cf0, transparent 70%), linear-gradient(135deg, #7c4deb 0%, #5b2fc9 100%) !important; }
body.tm-send .tma-textarea { color: #fff !important; font-weight: 600 !important; }
body.tm-send .tma-textarea::placeholder { color: #ffffffb3 !important; font-weight: 650 !important; }
body.tm-send .tma-shuffle-btn { background: #ffffff2e !important; }
body.tm-send .tma-char-count { color: #9a90ad !important; }

body.tm-send .tma-anon-note { margin: 4px 0 14px; text-align: center; font-size: 12px; font-weight: 600; color: #6a5a80; }

/* send = purple, "get your own" = lime (the loop button should pop) */
body.tm-send .tma-send-btn { background: linear-gradient(120deg, #9160ed, #733cda) !important; border-radius: 16px !important; font-weight: 750 !important; box-shadow: 0 10px 24px -10px #6c3ee8 !important; }
body.tm-send .tma-friend-ticker { color: #6a5a80 !important; font-weight: 600 !important; }
body.tm-send .tma-friend-ticker span { color: var(--brand) !important; }
body.tm-send .tma-own-btn { border: 0 !important; background: var(--lime) !important; color: #2b3a12 !important; border-radius: 16px !important; font-weight: 800 !important; box-shadow: 0 5px 0 #b4d77a !important; }
body.tm-send .tma-own-btn svg { stroke: #2b3a12 !important; }
body.tm-send .tma-seo-blurb { color: #9a90ad !important; }
body.tm-send .tma-seo-blurb a { color: var(--brand) !important; }
body.tm-send .tma-error { background: #fff4ef !important; color: #b4370f !important; border: 1px solid #f4d2c3; }
body.tm-send .tma-sticky-ad { background: #f7f6fb !important; }

/* success screen */
body.tm-send .success-state::before, body.tm-send .success-state::after { opacity: .5; filter: hue-rotate(40deg); }
body.tm-send .ss-nav-btn { background: #fff !important; color: var(--brand) !important; border: 1px solid var(--line) !important; }
body.tm-send .ss-glow { background: radial-gradient(circle, #9160ed38 0%, #d4f59722 50%, transparent 75%) !important; }
body.tm-send .ss-title { color: var(--ink) !important; font-weight: 750 !important; letter-spacing: -.04em !important; }
body.tm-send .ss-title .pink { color: var(--brand) !important; }
body.tm-send .ss-subtitle { color: var(--muted) !important; font-weight: 500 !important; }
body.tm-send .ss-card { background: #fff !important; border: 1px solid var(--line) !important; box-shadow: 0 4px 0 #eee7f5 !important; }
body.tm-send .ss-card-icon.pink, body.tm-send .ss-card-icon.purple, body.tm-send .ss-card-icon.orange { background: var(--soft) !important; }
body.tm-send .ss-card-title { color: var(--ink) !important; font-weight: 700 !important; }
body.tm-send .ss-card-sub { color: #8a7a9c !important; font-weight: 500 !important; }
body.tm-send .ss-form-card { background: #fff !important; border: 1.5px solid #dccbf5 !important; box-shadow: 0 18px 40px -28px #41216866 !important; }
body.tm-send .ss-form-label { color: var(--brand) !important; font-weight: 750 !important; }
body.tm-send .ss-input { border-color: #e3d6f1 !important; background: #f6f1fc !important; color: var(--ink) !important; }
body.tm-send .ss-cta { background: linear-gradient(120deg, #9160ed, #733cda) !important; border-radius: 16px !important; font-weight: 750 !important; box-shadow: 0 10px 24px -10px #6c3ee8 !important; }
body.tm-send .ss-secondary { color: var(--brand) !important; }

/* right-to-left (Arabic) */
html[dir="rtl"] body.tm-send .tma-textarea { text-align: right; }
html[dir="rtl"] body.tm-send .tma-shuffle-btn { right: auto !important; left: 14px !important; }

/* link paused by its owner */
body.tm-send .tma-paused { background: #fff; border: 1px solid #e6dced; border-radius: 26px; padding: 26px 20px; text-align: center; margin: 0 16px 16px; box-shadow: 0 24px 60px -34px #41216866; }
body.tm-send .tma-paused-img { width: 110px; height: auto; margin: 0 auto 10px; display: block; }
body.tm-send .tma-paused-title { font-size: 21px; font-weight: 750; letter-spacing: -.03em; color: var(--ink); margin: 0 0 8px; }
body.tm-send .tma-paused-sub { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; }
body.tm-send .tma-paused + .tma-own-btn { display: flex; justify-content: center; align-items: center; text-decoration: none; padding: 17px; }

/* "Get your own" floats at the bottom of the message form, NGL-style (2026-10-11); sticky ad removed */
body.tm-send .tma-own-btn.tm-sticky-own {
  /* centred with left/right + auto margins: the button's shake animation uses transform */
  position: fixed !important; z-index: 60; left: 0 !important; right: 0 !important;
  bottom: max(14px, env(safe-area-inset-bottom)); width: calc(100% - 32px) !important; max-width: 448px; margin: 0 auto !important;
  box-shadow: 0 5px 0 #b4d77a, 0 14px 30px -10px #2b1b3e59 !important;
}
body.tm-send:has(.tm-sticky-own) { padding-bottom: 96px !important; }
body.tm-send .tma-sticky-ad { display: none !important; }
/* while typing (keyboard open) the floating button would cover Send, so hide it */
body.tm-send:has(#msgText:focus) .tm-sticky-own { display: none !important; }

/* Send button: always visible + gentle zoom in / zoom out (2026-10-11) */
body.tm-send .tma-send-btn { display: flex !important; animation: tmSendPulse 1.6s ease-in-out infinite !important; will-change: transform; }
body.tm-send .tma-send-btn.loading, body.tm-send .tma-send-btn[disabled] { animation: none !important; }
body.tm-send .tma-send-btn:active { animation-play-state: paused !important; }
@keyframes tmSendPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 24px -10px #6c3ee8; }
  50%      { transform: scale(1.05); box-shadow: 0 16px 34px -10px #6c3ee8; }
}
@media (prefers-reduced-motion: reduce) { body.tm-send .tma-send-btn { animation: none !important; } }

/* "Message Sent" screen: create-your-link box becomes a sticky bottom bar, name left + CREATE right (2026-10-11) */
body.tm-send .ss-form-card.tm-create-bar {
  position: fixed !important; z-index: 60; left: 0 !important; right: 0 !important;
  bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 24px) !important; max-width: 456px; margin: 0 auto !important;
  padding: 12px 12px 12px !important; border-radius: 22px !important; text-align: left;
  box-shadow: 0 -2px 0 #eee7f5, 0 18px 44px -14px #2b1b3e66 !important;
}
body.tm-send .tm-create-bar .ss-form-label { display: block; margin: 0 4px 8px; font-size: 11px !important; letter-spacing: .04em; }
body.tm-send .tm-create-row { display: flex; align-items: center; gap: 8px; margin: 0; }
body.tm-send .tm-create-row .ss-input-wrap { flex: 1; min-width: 0; }
body.tm-send .tm-create-row .ss-input { height: 50px; padding: 0 40px 0 16px !important; font-size: 15px !important; border-radius: 14px !important; box-sizing: border-box; }
body.tm-send .tm-create-row .ss-input-icon { right: 14px !important; color: #6c3ee8 !important; }
body.tm-send .tm-create-row .ss-cta { flex: none; width: auto !important; height: 50px; margin: 0 !important; padding: 0 18px !important; border-radius: 14px !important; font-size: 14px !important; letter-spacing: .06em; white-space: nowrap; }
body.tm-send .success-state { padding-bottom: 150px !important; }