/* Reusable team share sheet — native OS share + social network menu. Injected once into by team-share.js; used by team profile, workspace team profile, and the public team landing page. */ .tsh-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, 0.48); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; -webkit-tap-highlight-color: transparent; } .tsh-overlay.is-open { opacity: 1; visibility: visible; } .tsh-sheet { --tsh-primary: #7B61FF; --tsh-primary-dark: #5439F0; --tsh-ink: #111827; --tsh-muted: #6B7280; --tsh-line: #E5E7EB; --tsh-bg: #FFFFFF; --tsh-soft: #F9FAFB; width: 100%; max-width: 480px; background: var(--tsh-bg); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18); padding: 8px 20px calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(24px); opacity: 0; transition: transform .24s cubic-bezier(.22,1,.36,1), opacity .24s ease; font-family: inherit; direction: rtl; text-align: right; } .tsh-overlay.is-open .tsh-sheet { transform: translateY(0); opacity: 1; } .tsh-grip { width: 44px; height: 5px; border-radius: 999px; background: var(--tsh-line); margin: 6px auto 12px; } .tsh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .tsh-title { font-size: 16px; font-weight: 800; color: var(--tsh-ink); margin: 0; } .tsh-close { border: none; background: var(--tsh-soft); color: var(--tsh-muted); width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .tsh-close:hover { background: var(--tsh-line); color: var(--tsh-ink); } .tsh-close svg { width: 18px; height: 18px; } /* Native OS share button (iOS / Android share sheet) */ .tsh-native { display: none; align-items: center; justify-content: center; gap: 10px; width: 100%; border: none; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; background: linear-gradient(135deg, var(--tsh-primary), var(--tsh-primary-dark)); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 8px 20px rgba(84, 57, 240, 0.28); } .tsh-native.is-visible { display: inline-flex; } .tsh-native svg { width: 20px; height: 20px; } /* Social network grid */ .tsh-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; margin-bottom: 18px; } .tsh-app { display: flex; flex-direction: column; align-items: center; gap: 7px; border: none; background: transparent; color: var(--tsh-ink); cursor: pointer; font-family: inherit; text-decoration: none; padding: 0; } .tsh-app__icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform .15s ease; } .tsh-app:hover .tsh-app__icon { transform: translateY(-2px); } .tsh-app__icon svg { width: 26px; height: 26px; } .tsh-app__label { font-size: 11.5px; font-weight: 600; color: var(--tsh-muted); } .tsh-app__icon--telegram { background: #29A9EB; } .tsh-app__icon--whatsapp { background: #25D366; } .tsh-app__icon--x { background: #000000; } .tsh-app__icon--linkedin { background: #0A66C2; } .tsh-app__icon--facebook { background: #1877F2; } .tsh-app__icon--email { background: #EA4335; } /* Copy-link row */ .tsh-copy { display: flex; align-items: center; gap: 8px; border: 1px solid var(--tsh-line); border-radius: 14px; background: var(--tsh-soft); padding: 6px 6px 6px 14px; } .tsh-copy__url { flex: 1; min-width: 0; border: none; background: transparent; font-size: 13px; color: var(--tsh-muted); font-family: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: left; } .tsh-copy__url:focus { outline: none; } .tsh-copy__btn { flex: none; border: none; border-radius: 10px; background: var(--tsh-primary); color: #fff; font-size: 13px; font-weight: 700; font-family: inherit; padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .tsh-copy__btn:hover { background: var(--tsh-primary-dark); } .tsh-copy__btn svg { width: 15px; height: 15px; } .tsh-copy__btn.is-done { background: #22C55E; } /* Toast */ .tsh-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px); background: #111827; color: #fff; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px; z-index: 2147483001; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .tsh-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (min-width: 640px) { .tsh-overlay { align-items: center; } .tsh-sheet { border-radius: 22px; transform: translateY(0) scale(.96); padding-bottom: 24px; } .tsh-overlay.is-open .tsh-sheet { transform: translateY(0) scale(1); } .tsh-grip { display: none; } } @media (prefers-color-scheme: dark) { .tsh-sheet { --tsh-ink: #F3F4F6; --tsh-muted: #9CA3AF; --tsh-line: #374151; --tsh-bg: #1F2937; --tsh-soft: #111827; } .tsh-app { color: var(--tsh-ink); } }