/* Verse Share sheet (js/verse-share.js). Light, matches the Verse Social pages. */
#verse-share-root { position: relative; z-index: 1200; }
.vsh-overlay { position: fixed; inset: 0; background: rgba(26, 26, 46, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1200; animation: vsh-fade .15s ease-out; }
.vsh-sheet { background: #fff; color: #1a1a2e; border-radius: 16px; width: 100%; max-width: 540px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; animation: vsh-rise .18s ease-out; }
.vsh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid #e4e6eb; position: sticky; top: 0; background: #fff; }
.vsh-heading { font-size: 17px; font-weight: 700; }
.vsh-sub { font-size: 13px; color: #65676b; margin-top: 2px; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsh-close { background: none; border: none; cursor: pointer; color: #65676b; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.vsh-close:hover, .vsh-close:focus-visible { background: #f0f2f5; color: #1a1a2e; outline: none; }
.vsh-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 18px; }
.vsh-section { display: flex; flex-direction: column; gap: 10px; }
.vsh-h { font-size: 12px; font-weight: 700; color: #6c5ce7; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.vsh-actions { display: flex; flex-direction: column; gap: 8px; }
.vsh-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #e4e6eb; border-radius: 12px; background: #fafbfc; }
.vsh-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vsh-action-label { font-size: 14px; font-weight: 600; }
.vsh-action-hint { font-size: 12.5px; color: #65676b; }
.vsh-action-side { display: flex; align-items: center; gap: 8px; flex: none; }
.vsh-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: none; background: #6c5ce7; color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.vsh-btn:hover, .vsh-btn:focus-visible { background: #5a4bd1; outline: none; }
.vsh-btn[disabled] { opacity: .65; cursor: default; }
.vsh-btn-outline { background: #fff; color: #6c5ce7; border: 1px solid #6c5ce7; }
.vsh-btn-outline:hover, .vsh-btn-outline:focus-visible { background: rgba(108, 92, 231, 0.08); }
.vsh-done { display: inline-flex; align-items: center; gap: 6px; color: #00b894; font-size: 13.5px; font-weight: 600; }
.vsh-error { font-size: 12.5px; color: #d63031; }
.vsh-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.vsh-net { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #e4e6eb; border-radius: 10px; background: #fff; color: #1a1a2e; font-size: 13px; text-align: left; cursor: pointer; }
.vsh-net:hover, .vsh-net:focus-visible { border-color: #6c5ce7; background: rgba(108, 92, 231, 0.07); outline: none; }
.vsh-mark { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: #65676b; color: #fff; font-weight: 700; font-size: 12px; }
.vsh-mark-facebook { background: #1877f2; }
.vsh-mark-x { background: #000; }
.vsh-mark-linkedin { background: #0a66c2; }
.vsh-mark-pinterest { background: #e60023; }
.vsh-mark-reddit { background: #ff4500; }
.vsh-mark-whatsapp { background: #25d366; color: #0b2a12; }
.vsh-mark-telegram { background: #229ed9; }
.vsh-mark-email { background: #2d3436; }
.vsh-mark-instagram { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); font-size: 10.5px; }
.vsh-link { margin: 0; font-size: 12px; color: #65676b; word-break: break-all; }
.vsh-link code { font-family: Consolas, "SFMono-Regular", Menlo, monospace; background: #f0f2f5; padding: 2px 6px; border-radius: 6px; }
.vsh-note { margin: 0; font-size: 12.5px; color: #b7791f; }
.vsh-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); background: #1a1a2e; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1300; max-width: calc(100vw - 32px); text-align: center; }
.vsh-toast.show { opacity: 1; transform: translate(-50%, 0); }
.vsh-spin { animation: vsh-spin 1s linear infinite; }
@keyframes vsh-spin { to { transform: rotate(360deg); } }
@keyframes vsh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vsh-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 480px) {
    .vsh-overlay { align-items: flex-end; padding: 0; }
    .vsh-sheet { border-radius: 16px 16px 0 0; max-height: 92vh; }
    .vsh-action { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .vsh-overlay, .vsh-sheet, .vsh-spin { animation: none; } }

/* A post opened from a share link (verse-social.html?post=ID) gets a short highlight. */
.vs-post-flash { animation: vs-post-flash 3.5s ease-out; }
@keyframes vs-post-flash { 0% { box-shadow: 0 0 0 3px #6c5ce7, 0 1px 3px rgba(0,0,0,0.08); } 100% { box-shadow: 0 0 0 0 rgba(108,92,231,0), 0 1px 3px rgba(0,0,0,0.08); } }
@media (prefers-reduced-motion: reduce) { .vs-post-flash { animation: none; box-shadow: 0 0 0 3px #6c5ce7; } }