/* "Ndaje": the share button, its menu on computers (phones use the system's share sheet), and the 3D explorer's
   AR button. assets/js/share.js, assets/js/ar.js. */
.share-btn svg { width: 17px; height: 17px; }
.share-menu { position: absolute; z-index: 140; width: 250px; padding: 8px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-family: var(--sans); animation: share-in .16s var(--ease); }
@keyframes share-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .share-menu { animation: none; } }
.share-menu-title { margin: 4px 10px 6px; font: 700 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.share-menu ul { list-style: none; margin: 0; padding: 0; }
.share-menu a, .share-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 8px 10px; border-radius: 8px; font: 600 15px/1.2 var(--sans); color: var(--text); text-decoration: none; text-align: left; }
.share-menu a:hover, .share-menu button:hover, .share-menu a:focus-visible, .share-menu button:focus-visible { background: var(--gold-soft); outline: none; }
.share-menu a:focus-visible, .share-menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.share-menu button svg { width: 16px; height: 16px; margin: 0 1px; color: var(--text-2); }
.share-dot { width: 14px; height: 14px; flex-shrink: 0; margin: 0 2px; border-radius: 50%; background: var(--c, var(--gold)); }
.share-whatsapp { --c: #25d366; } .share-viber { --c: #7360f2; } .share-facebook { --c: #1877f2; }
.share-x { --c: var(--text); } .share-linkedin { --c: #0a66c2; } .share-email { --c: var(--clay); }
.share-menu-url { margin: 6px 10px 4px; padding-top: 8px; border-top: 1px solid var(--line); font: 500 12px/1.4 var(--sans); color: var(--text-3); overflow-wrap: anywhere; }

/* where the buttons sit */
.record-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.journey-share { margin: 16px 0 0; }

/* 3D explorer: place the object in the room (shown by model-viewer only where AR works) */
.ex-ar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  background: var(--ex-gold, var(--gold)); color: #1a1405; font: 700 14px/1 var(--sans); white-space: nowrap; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); cursor: pointer; }
.ex-ar svg { width: 19px; height: 19px; }
.ex-ar-note { display: flex; gap: 8px; align-items: flex-start; max-width: 420px; margin: 0 auto 14px; padding: 0 16px; font: 500 13px/1.5 var(--sans); color: var(--ex-muted, var(--text-2)); text-align: left; z-index: 2; }
.ex-ar-note svg { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }

/* The 3D toolbar gained the share button: on narrow phones its buttons get a little narrower so the bar still fits. */
@media (max-width: 400px) {
  .ex-controls button { width: 35px; }
  .ex-controls .sep { margin: 0 1px; }
}