/* Site-wide PC60 adaptation. Original-size egg; only the bird is 81.6px. */
.kh-site-up { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 172px; z-index: 20; pointer-events: none; }
.kh-site-up [hidden], .kh-site-up[hidden] { display: none !important; }
.kh-site-up .kh-perch-sculpture { position: relative; width: 172px; height: 222px; pointer-events: none; }
.kh-site-up .kh-perched-bird { position: absolute; width: 81.6px; height: 81.6px; pointer-events: none; z-index: 1; }
.kh-site-up .robinluke { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: 1; pointer-events: none; }
.kh-site-up .robinluke__image,
.kh-site-up .kh-grip-image,
.kh-site-up .kh-perch-fallback { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.kh-site-up .robinluke__fallback { display: none; }
.kh-site-up .kh-egg-button { position: absolute; left: 50px; bottom: 0; display: grid; place-items: center; width: 72px; height: 112px; min-width: 72px; padding: 0; margin: 0; background: transparent; color: #4a4a4a; border: 0; border-radius: 24px; box-shadow: none; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.kh-site-up .kh-egg-button svg { display: block; width: 72px; height: 112px; overflow: visible; pointer-events: none; }
.kh-site-up .kh-bird-pause { display: none; min-height: 32px; margin: 0 auto; padding: 4px 10px; font: inherit; font-size: 12px; line-height: 1.5; color: #52636a; background: #fff; border: 1px solid #d7e1e4; border-radius: 5px; cursor: pointer; pointer-events: auto; }
.kh-site-up button:focus-visible { outline: 2px solid #ad591e; outline-offset: 3px; }
.kh-site-up button:disabled { cursor: default; }

.kh-site-up[data-mode="mobile"] { width: 48px; }
.kh-site-up .kh-mobile-up { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid #8b9a91; border-radius: 8px; background: #fafbf8ed; color: #3d6253; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.kh-site-up .kh-mobile-up svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
@media (max-width: 650px), (pointer: coarse) {
  .kh-site-up .kh-perch-sculpture, .kh-site-up .kh-bird-pause { display: none; }
}

.kh-site-up, .kh-site-up * { box-sizing: border-box; }

/* PC-only native sibling button: head/upper body, never the expanded wings.
   Its bottom is above egg-hit top (110px), throughout the morph. */
.kh-site-up .kh-bird-song { position: absolute; z-index: 3; width: 40px; height: 32px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; pointer-events: auto; cursor: pointer; }
.kh-site-up .kh-bird-song:focus-visible { outline: 2px solid #ad591e; outline-offset: 2px; }

/* Contact-band docking: absolute position is computed in document coordinates. */
.kh-site-up { --kh-up-rest-bottom: calc(20px + env(safe-area-inset-bottom)); bottom: var(--kh-up-rest-bottom); }
.kh-site-up .kh-mobile-up { border-radius: 50%; background: #fffdf5; color: #3c807b; border-color: #bbcfc8; box-shadow: 0 2px 8px #203b3214; }
/* Mobile v2 has its own static images, hitbox and measured claw anchor. */
.kh-site-up .kh-contact-static-bird--mobile { display: none; }
@media (max-width: 650px), (pointer: coarse) {
  .kh-site-up[data-mode="mobile"] .kh-contact-static-bird--mobile { display: block; position: absolute; width: 76px; height: 76px; aspect-ratio: 1 / 1; min-width: 0; min-height: 0; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; pointer-events: auto; touch-action: pan-y; cursor: pointer; }
  .kh-site-up .kh-contact-static-bird--mobile img { display: block; position: absolute; inset: 0; width: 76px; height: 76px; aspect-ratio: 1 / 1; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
}
.kh-site-up .kh-dock-feet { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; pointer-events: none; clip-path: polygon(0 63.7959%, 62.9984% 63.7959%, 62.9984% 100%, 0 100%); }

/* Dedicated white space outside the CTA, never padding inside its dark surface. */
@media (max-width: 390px) {
  [data-kh-robin-dock] {
    --kh-mobile-dock-clearance: 84px;
    position: relative;
    margin-top: var(--kh-mobile-dock-clearance);
  }
  [data-kh-robin-dock]::before {
    content: "";
    position: absolute;
    inset: auto 0 100%;
    height: var(--kh-mobile-dock-clearance);
    background: #fff;
    pointer-events: none;
  }
  /* The brand return bands already have enough preceding section padding. */
  section.kb-return[data-kh-robin-dock] { --kh-mobile-dock-clearance: 0px; }
}

/* CTA-integrated structural edge: no detached rail and no extra layout height. */
[data-kh-robin-dock] {
  --kh-dock-bar-height: 4px;
  --kh-dock-bar-color: #899697;
  box-shadow: inset 0 var(--kh-dock-bar-height) 0 var(--kh-dock-bar-color);
}

/* Moving controls are not scroll anchors; the document itself keeps normal anchoring. */
.kh-site-up, .kh-site-up * { overflow-anchor: none; }
[data-kh-robin-dock] { overflow-anchor: none; }

/* Mobile-only shape change: the 48px layout box and its bottom never move. */
@media (max-width: 650px), (pointer: coarse) {
  .kh-site-up[data-mode="mobile"] { height: 48px; }
  .kh-site-up[data-mode="mobile"] .kh-mobile-up { position: absolute; left: 0; bottom: 0; height: 48px; transition: height 400ms ease-in-out, border-radius 400ms ease-in-out, background-color 400ms ease-in-out, border-color 400ms ease-in-out, color 400ms ease-in-out; }
  .kh-site-up[data-mode="mobile"] .kh-mobile-up[data-shape="egg"] { height: 60px; border-radius: 50% 50% 48% 48% / 64% 64% 36% 36%; background-color: rgb(51, 176, 183); border-color: rgb(255, 255, 255); color: rgb(255, 255, 255); }
}
@media (prefers-reduced-motion: reduce) {
  .kh-site-up[data-mode="mobile"] .kh-mobile-up { transition: none; }
}

/* Whole-widget entry only. Individual translate does not replace dock transform.
   display:none resets the animation; scrolling while visible never restarts it. */
@keyframes kh-site-up-enter {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .kh-site-up[data-mode="mobile"]:not([hidden]) { animation: kh-site-up-enter 300ms ease-out; }
  .kh-site-up[data-mode="desktop"] { opacity: 0; translate: 0 100px; transition: opacity 650ms ease-in-out, translate 650ms ease-in-out; }
  .kh-site-up[data-mode="desktop"][data-presence="shown"] { opacity: 1; translate: 0 0; transition-timing-function: ease-out; }
}

/* Footer terminal decoration: no arrow, hit target or keyboard action. */
.kh-site-up[data-mode="mobile"][data-mobile-footer="true"] .kh-mobile-up { pointer-events: none; cursor: default; }
.kh-site-up[data-mode="mobile"][data-mobile-footer="true"] .kh-mobile-up svg { visibility: hidden; }