/* Share sheet — themed per site with --ss-* variables */
.ss { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; perspective: 1200px; font-family: "Inter Tight", system-ui, sans-serif; }
.ss.is-on { display: grid; }
.ss__backdrop { position: absolute; inset: 0; background: rgba(5, 4, 3, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ss__panel {
  position: relative; width: min(94vw, 520px); max-height: 92vh; overflow: auto;
  padding: 26px 24px 20px; border-radius: 26px;
  background: var(--ss-bg, #15120f); color: var(--ss-fg, #f4efe6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.ss__x { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; color: inherit; background: rgba(255, 255, 255, 0.06); cursor: pointer; border: 0; }
.ss__k { font: 500 11px "JetBrains Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ss-acc, #ffc23d); }
.ss__h { margin-top: 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }

/* a chat, so people see the real preview before they send it */
.ss__chat {
  position: relative; margin: 18px 0 18px; padding: 18px 14px 14px; border-radius: 18px; min-height: 120px;
  background: #0b141a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='4' cy='4' r='1.2' fill='%23ffffff' fill-opacity='.04'/><circle cx='24' cy='22' r='1' fill='%23ffffff' fill-opacity='.04'/></svg>");
  display: flex; flex-direction: column; align-items: flex-end;
}
.ss__typing { position: absolute; right: 16px; top: 18px; display: flex; gap: 5px; padding: 12px 14px; border-radius: 16px; background: #005c4b; }
.ss__typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); animation: ssdot 1s infinite; }
.ss__typing i:nth-child(2) { animation-delay: 0.15s; } .ss__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ssdot { 0%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }
.ss__bubble { width: min(100%, 340px); padding: 4px 4px 6px; border-radius: 12px 12px 4px 12px; background: #005c4b; color: #e9edef; transform-origin: 100% 100%; }
.ss__card { display: block; overflow: hidden; border-radius: 9px; background: #025144; color: inherit; text-decoration: none; }
.ss__card img { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.ss__meta { display: grid; gap: 3px; padding: 8px 10px 9px; }
.ss__meta b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.ss__meta span { font-size: 12px; line-height: 1.35; color: rgba(233, 237, 239, 0.72); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss__meta em { font-style: normal; font-size: 11px; color: rgba(233, 237, 239, 0.55); }
.ss__msg { padding: 6px 8px 0; font-size: 13.5px; color: #53bdeb; word-break: break-all; }
.ss__time { display: block; text-align: right; padding: 0 8px; font-size: 10.5px; color: rgba(233, 237, 239, 0.6); }
.ss__time i { font-style: normal; color: #53bdeb; }

.ss__btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ss__btn {
  display: flex; align-items: center; gap: 9px; padding: 12px 12px; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); color: inherit; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.06);
  font: 600 13.5px "Inter Tight", system-ui, sans-serif; transition: background 0.25s, scale 0.3s;
}
.ss__btn:hover { background: rgba(255, 255, 255, 0.12); scale: 1.03; }
.ss__btn svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.ss__btn--wa { grid-column: span 2; background: #25d366; color: #062a17; border-color: transparent; }
.ss__btn--wa:hover { background: #3be07a; }
.ss__btn--story { grid-column: span 2; background: linear-gradient(120deg, #f58529, #dd2a7b 50%, #8134af); color: #fff; border-color: transparent; }
.ss__tip { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, 0.45); }

/* WhatsApp contact pill (shared look) */
.wa-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: #25d366; color: #062a17; font: 700 16px "Inter Tight", system-ui, sans-serif; text-decoration: none; transition: scale 0.35s, background 0.25s; }
.wa-btn:hover { scale: 1.05; background: #3be07a; }
.wa-btn svg { width: 22px; height: 22px; fill: currentColor; }
.share-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; border: 1px solid currentColor; font: 600 14px "Inter Tight", system-ui, sans-serif; cursor: pointer; background: transparent; color: inherit; transition: background 0.25s, color 0.25s; }
.share-btn:hover { background: var(--ss-acc, #ffc23d); color: #0a0908; border-color: transparent; }
.share-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }