/* Hand it over (js/handoff.js): a message in the notch, Pip's reply as a card. The card is
   the app's PipActionCard: quiet, the app's own icon the only colour, one hairline, the
   words plain and editable, one white capsule. */

.handoff-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; align-items: center; }
.handoff-copy { display: grid; gap: 14px; }
.handoff-stage { height: clamp(500px, 46vw, 620px); border-radius: 30px; box-shadow: 0 30px 70px var(--shadow); }
.handoff-apps { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 8px; }
.handoff-apps img { width: 34px; height: 34px; }
@media (max-width: 900px) {
  .handoff-layout { grid-template-columns: 1fr; gap: 28px; }
  .handoff-copy { order: -1; }
  .handoff-stage { height: 520px; border-radius: 22px; }
}

.notice.quick-reply .pa-card { flex: none; padding: 12px 14px; border-radius: 20px; color: #fff; background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(4px); transform-origin: 50% 0;
  transition: opacity 0.32s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.62s cubic-bezier(0.2, 1.1, 0.35, 1), filter 0.32s ease; }
.notice.quick-reply .pa-card.in { opacity: 1; transform: none; filter: none; }
.notice.quick-reply .pa-card.out { opacity: 0; transform: scale(0.97); filter: blur(4px); transition-duration: 0.24s; }
.pa-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.pa-head img { width: 30px; height: 30px; flex: none; }
.pa-head b { display: block; font-size: 13.5px; font-weight: 600; line-height: 17px; }
.pa-head span { display: block; font-size: 11.5px; line-height: 15px; color: rgba(255, 255, 255, 0.56); }
.pa-head em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.34); }
.pa-rule { display: block; height: 0.5px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.1); }
.pa-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 20px; }
.pa-body { margin: 0 0 12px; font-size: 13px; line-height: 18px; white-space: pre-wrap; }
.pa-body.typing::after { content: ""; display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -2px; background: #fff; animation: pa-caret 1s steps(1) infinite; }
@keyframes pa-caret { 50% { opacity: 0; } }
.pa-row { display: flex; align-items: center; gap: 8px; height: 24px; margin-bottom: 6px; font-size: 12.5px; color: rgba(255, 255, 255, 0.56); }
.pa-row svg { width: 13px; height: 13px; flex: none; color: rgba(255, 255, 255, 0.34); }
.pa-row .pa-plain { color: #fff; }
.pa-chip { margin-left: auto; height: 24px; padding: 0 10px; display: grid; place-items: center; border-radius: 99px; background: rgba(255, 255, 255, 0.1);
  color: #fff; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pa-row:last-of-type { margin-bottom: 12px; }
.pa-foot { display: flex; align-items: center; height: 30px; }
.pa-cancel { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.56); font: 500 12.5px -apple-system, BlinkMacSystemFont, sans-serif; }
.pa-go { margin-left: auto; height: 30px; padding: 0 14px; display: flex; align-items: center; gap: 5px; border: 0; border-radius: 99px;
  background: #fff; color: #000; font: 600 12.5px -apple-system, BlinkMacSystemFont, sans-serif; transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.2s, box-shadow 0.16s ease-out; }
.pa-go svg { width: 10.5px; height: 10.5px; }
.pa-go.pressed { transform: scale(0.96); opacity: 0.75; }
.pa-status { display: flex; align-items: center; gap: 8px; height: 30px; font: 500 12px -apple-system, BlinkMacSystemFont, sans-serif; color: rgba(255, 255, 255, 0.56);
  animation: pa-swap 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); }
.pa-status.done { color: #34c76b; font-size: 12.5px; font-weight: 600; }
.pa-status.done svg { width: 15px; height: 15px; color: #34c76b; animation: pa-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.pa-spin { width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid rgba(255, 255, 255, 0.18); border-top-color: rgba(255, 255, 255, 0.8); animation: pa-turn 0.8s linear infinite; }
@keyframes pa-turn { to { transform: rotate(1turn); } }
@keyframes pa-swap { from { opacity: 0; transform: translateY(3px); } }
@keyframes pa-pop { from { transform: scale(0.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .notice.quick-reply .pa-card { transition: opacity 0.2s; transform: none; filter: none; }
}
.notice.quick-reply .pa-receipt { flex: none; height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border-radius: 99px; align-self: flex-start;
  background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.82); font: 500 12px -apple-system, BlinkMacSystemFont, sans-serif;
  animation: pa-swap 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); transition: opacity 0.22s, transform 0.22s; }
.pa-receipt img { width: 18px; height: 18px; }
.pa-receipt svg { width: 13px; height: 13px; color: #34c76b; }
.notice.quick-reply .pa-receipt.gone { opacity: 0; transform: translateY(-4px); }

/* What the pointer is over, as on a Mac: the button lifts a touch, the notice takes a wash,
   and over words the arrow is an I-beam whose middle is the click. */
.pa-go.hover { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); transform: scale(1.03); }
.pa-cancel.hover { color: #fff; }
#handoff-stage .notice .actions button { transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.16s ease-out, opacity 0.15s; }
#handoff-stage .notice .actions button.hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); transform: scale(1.04); }
#handoff-stage .notice .actions button.pressed { transform: scale(0.96); opacity: 0.75; }
#handoff-stage .pointer.ibeam img { opacity: 0; }
#handoff-stage .pointer.ibeam::after { content: ""; position: absolute; left: 0.5px; top: -4px; width: 9px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 18'%3E%3Cpath d='M1 1.2h2.2c.6 0 1.1.4 1.3.8.2-.4.7-.8 1.3-.8H8M1 16.8h2.2c.6 0 1.1-.4 1.3-.8.2.4.7.8 1.3.8H8M4.5 2v14' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M1 1.2h2.2c.6 0 1.1.4 1.3.8.2-.4.7-.8 1.3-.8H8M1 16.8h2.2c.6 0 1.1-.4 1.3-.8.2.4.7.8 1.3.8H8M4.5 2v14' fill='none' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }