/* chrome-behavior.css — Carnegie cockpit pages (/carnegie/create, /carnegie/manage,
 * /carnegie/admin) only.
 *
 * Mirrors the inline <style> block emitted by lib/share-inject.mjs for
 * partner.air3.com pages, so the cockpit pages get the same hide-on-scroll
 * pill + 50%-reveal WhatsApp + "scroll up to show menu" toast UX.
 *
 * Why a separate file instead of reusing share-inject's block:
 *   - share-inject is per-page-deploy code, runs at /api/carnegie/deploy time
 *   - cockpit pages are STATIC HTML, never run through share-inject
 *   - share-inject's snapshot is byte-tested; duplicating here lets us
 *     evolve the cockpit UX independently without breaking partner-page
 *     byte-parity. Keep the two files in lockstep when meaningful changes
 *     happen on either side.
 *
 * Companion: chrome-behavior.js (same folder).
 * Source of truth: lib/share-inject.mjs → buildChromeBehaviorBlock().
 *
 * Kenneth 2026-05-23.
 */

/* Pill — hide-on-scroll */
.share-ann-toolbar {
  transition: bottom 320ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease !important;
  will-change: bottom, opacity;
}
body[data-share-chrome-hidden="1"] .share-ann-toolbar {
  bottom: -120px !important;
  opacity: 0;
  pointer-events: none;
}

/* WhatsApp — hidden until 50% scroll, then docked bottom-left next to pill */
body .share-ann-wa-fab,
body.share-ann-touch .share-ann-wa-fab {
  opacity: 0 !important;
  pointer-events: none;
  bottom: -120px !important;
  width: 40px !important;
  height: 40px !important;
  left: 12px !important;
  right: auto !important;
  top: auto !important;
  transition:
    bottom 360ms cubic-bezier(.2,.8,.2,1),
    opacity 280ms ease,
    transform 220ms ease !important;
  will-change: bottom, opacity, transform;
}
body .share-ann-wa-fab svg,
body.share-ann-touch .share-ann-wa-fab svg {
  width: 20px !important;
  height: 20px !important;
}
body.share-ann-touch .share-ann-wa-fab[data-share-wa-revealed="1"],
body .share-ann-wa-fab[data-share-wa-revealed="1"] {
  opacity: 1 !important;
  pointer-events: auto;
  bottom: max(19px, calc(7px + env(safe-area-inset-bottom, 12px))) !important;
}
body.share-ann-touch[data-share-chrome-hidden="1"] .share-ann-wa-fab[data-share-wa-revealed="1"],
body[data-share-chrome-hidden="1"] .share-ann-wa-fab[data-share-wa-revealed="1"] {
  bottom: -120px !important;
  opacity: 0 !important;
  pointer-events: none;
}
/* Lock-visible window: for ~1.6s after first reveal, WA ignores chrome-hidden
   so the attention nudge pulse is actually visible while scrolling down. */
body.share-ann-touch[data-share-chrome-hidden="1"] .share-ann-wa-fab[data-share-wa-lockvis="1"],
body[data-share-chrome-hidden="1"] .share-ann-wa-fab[data-share-wa-lockvis="1"] {
  bottom: max(19px, calc(7px + env(safe-area-inset-bottom, 12px))) !important;
  opacity: 1 !important;
  pointer-events: auto;
}
@keyframes share-wa-nudge {
  0%   { transform: scale(1);    box-shadow: 0 6px 20px rgba(37,211,102,0.42), 0 2px 6px rgba(0,0,0,0.2); }
  25%  { transform: scale(1.18); box-shadow: 0 10px 36px rgba(37,211,102,0.65), 0 0 0 8px rgba(37,211,102,0.18); }
  50%  { transform: scale(0.96); box-shadow: 0 4px 14px rgba(37,211,102,0.4); }
  75%  { transform: scale(1.08); box-shadow: 0 8px 28px rgba(37,211,102,0.5), 0 0 0 4px rgba(37,211,102,0.12); }
  100% { transform: scale(1);    box-shadow: 0 6px 20px rgba(37,211,102,0.42), 0 2px 6px rgba(0,0,0,0.2); }
}
.share-ann-wa-fab[data-share-wa-nudging="1"] {
  animation: share-wa-nudge 900ms cubic-bezier(.2,.8,.2,1) 200ms 2;
}

/* "Scroll up to show menu" toast — once-ever, dismissed via localStorage */
#share-scroll-tip {
  position: fixed;
  bottom: 8px; left: 50%;
  transform: translateX(-50%) translateY(140%);
  z-index: 2147483646;
  background: rgba(8,10,18,0.78); color: #fff;
  font: 500 11px/1 -apple-system, system-ui, sans-serif;
  padding: 8px 14px; border-radius: 9999px;
  backdrop-filter: blur(18px);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 320ms ease;
  opacity: 0; pointer-events: none;
}
#share-scroll-tip.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}