/* /assets/ct-phone-demo.css: the phone in a group chat (home hero + tool pages).
   One elevated object: an iMessage thread where a CollectiveTap link unfurls into
   its card, tapping it opens the live page in an in-app browser, and a re-share
   shows the current card. Driven by /assets/ct-phone-demo.js. Page layout around
   the phone (grid, chips) stays in the page's own styles. */
.cp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  --cp-accent: #2340c7;
}
/* One line under the phone that names the beat playing: the animation runs
   without narration otherwise. Reserved height so it never shifts layout. */
.cp-caption {
  margin: 14px 0 0;
  max-width: 320px;
  min-height: 2.6em;
  text-align: center;
  font-size: .9rem;
  line-height: 1.3;
  color: var(--muted);
  text-wrap: balance;
}
.cp-caption b { color: var(--text); font-weight: 600; }
.cp-caption b::after { content: " · "; color: var(--muted); font-weight: 400; }
.cp-caption.is-swapping { opacity: 0; }
.cp-caption { transition: opacity .18s ease; }

/* --- PHONE --- */
.cp-phone {
  width: 320px;
  height: 640px;
  background: #F2F2F7;
  border-radius: 42px;
  position: relative;
  overflow: hidden;
  color: #0f1226;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  /* The phone is its own screen: never inherit the host page's alignment (the
     tool pages centre their hero on small screens) into bubbles or typed text. */
  text-align: left;
  letter-spacing: normal;
  box-shadow:
    0 0 0 2px #1a1a1c,
    0 0 0 4px #2c2c2e,
    0 40px 70px -24px rgba(22, 23, 29, 0.35),
    0 10px 22px -8px rgba(22, 23, 29, 0.16);
}
@media (max-width: 360px) {
  .cp-phone { transform: scale(.94); transform-origin: top center; }
}
:root[data-theme="dark"] .cp-phone,
:root:not([data-theme="light"]) .cp-phone {
  box-shadow:
    0 0 0 2px #2a2a2c,
    0 0 0 4px #3a3a3c,
    0 40px 70px -24px rgba(0, 0, 0, 0.6),
    0 10px 22px -8px rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] .cp-phone {
  box-shadow:
    0 0 0 2px #1a1a1c,
    0 0 0 4px #2c2c2e,
    0 40px 70px -24px rgba(22, 23, 29, 0.35),
    0 10px 22px -8px rgba(22, 23, 29, 0.16);
}

.cp-island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 28px; border-radius: 18px; background: #000; z-index: 40;
}
.cp-status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10; height: 48px;
  padding: 16px 22px 0; display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; font-weight: 600; color: #0f1226; pointer-events: none;
}
.cp-status-icons { display: inline-flex; gap: 5px; align-items: center; }
.cp-status svg { display: block; }
.cp-home-bar {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 4px; border-radius: 100px; background: rgba(0,0,0,0.3); z-index: 40;
}
.cp-chat-head {
  position: absolute; top: 48px; left: 0; right: 0; z-index: 5;
  padding: 6px 14px 10px; display: flex; align-items: center; gap: 8px;
  background: rgba(242,242,247,0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 0.5px solid rgba(60,60,67,0.18);
}
.cp-chat-back { color: #007aff; font-size: 22px; line-height: 1; width: 24px; text-align: center; flex-shrink: 0; }
.cp-chat-id { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cp-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--cp-accent); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  transition: background .35s ease;
}
.cp-name { font-size: 10.5px; color: #0f1226; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.cp-chev { color: #8b8fa3; font-size: 9px; }
.cp-chat-action { width: 24px; color: #007aff; display: flex; justify-content: flex-end; }

.cp-msgs {
  position: absolute; top: 110px; bottom: 36px; left: 0; right: 0;
  padding: 12px 14px 12px; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
}
.cp-stamp { align-self: center; font-size: 10px; color: #8b8fa3; margin: 6px 0 12px; font-weight: 500; }
.cp-stamp b { color: #0f1226; font-weight: 700; }
.cp-row { display: flex; max-width: 100%; }
.cp-bubble {
  max-width: 78%; padding: 7px 11px; border-radius: 16px; font-size: 13px; line-height: 1.32; word-wrap: break-word;
}
.cp-bubble.cp-them { background: #e9ebf2; color: #0f1226; border-bottom-left-radius: 5px; }
.cp-bubble.cp-me { background: #0a7cff; color: #fff; border-bottom-right-radius: 5px; }
.cp-bubble:empty { display: none; }
.cp-row-me { justify-content: flex-end; }
.cp-group { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 78%; }
.cp-group .cp-bubble { max-width: none; }
.cp-sender { font-size: 9.5px; color: #8b8fa3; padding-left: 10px; font-weight: 500; }
.cp-row[hidden] { display: none; }
.cp-row-me, .cp-dots-row, [data-cp-reshare-row], [data-cp-card-b] { animation: cpIn .28s ease both; }
@keyframes cpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* tap indicator (finger) */
.cp-tap {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(35, 64, 199, 0.22); border: 2px solid rgba(35, 64, 199, 0.55);
  opacity: 0; pointer-events: none; z-index: 5;
}
.cp-tap.is-on { animation: cpTap .6s ease-out both; }
@keyframes cpTap {
  0% { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}
.cp-lp-stack { position: relative; }
/* text typed into a field on the live page */
.cp-type {
  position: absolute; z-index: 4; pointer-events: none;
  min-width: calc(160px * var(--cp-k, 1)); height: calc(26px * var(--cp-k, 1)); line-height: calc(26px * var(--cp-k, 1));
  padding: 0 calc(10px * var(--cp-k, 1)); background: #fff; box-sizing: border-box;
  font-family: "Inter", -apple-system, system-ui, sans-serif; font-size: calc(13px * var(--cp-k, 1));
  color: #16171d; white-space: nowrap; overflow: hidden;
}
.cp-type:empty { display: none; }

/* in-app browser sheet (SFSafariViewController-style) */
.cp-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 40px; z-index: 30;
  background: #fff; border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 30px rgba(15, 18, 38, 0.18);
  transform: translateY(104%);
  transition: transform .46s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; overflow: hidden;
}
.cp-sheet.is-open { transform: translateY(0); }
.cp-sheet-bar {
  flex: 0 0 auto; height: 44px; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between;
  background: #f7f7f9; border-bottom: 0.5px solid rgba(60,60,67,0.2);
  font-size: 11px; color: #0f1226;
}
.cp-sheet-done { color: #007aff; font-weight: 600; font-size: 12px; width: 44px; }
.cp-sheet-host { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #3a3a3c; }
.cp-sheet-more { width: 44px; display: inline-flex; justify-content: flex-end; gap: 3px; }
.cp-sheet-more i { width: 4px; height: 4px; border-radius: 50%; background: #007aff; }
.cp-sheet-body { flex: 1 1 auto; overflow: hidden; position: relative; scroll-behavior: smooth; background: #faf9f6; }
.cp-page-stack { position: relative; display: grid; }
.cp-page {
  grid-column: 1; grid-row: 1; display: block; width: 100%; height: auto;
  opacity: 0; transition: opacity .25s ease;
}
.cp-page.is-active { opacity: 1; }
.cp-cursor {
  display: inline-block; width: 2px; height: 0.95em; background: currentColor; margin-left: 1px;
  vertical-align: -0.13em; animation: cpBlink 0.9s steps(2) infinite; opacity: 0.7;
}
@keyframes cpBlink { 50% { opacity: 0; } }
.cp-dots-bubble {
  background: #e9ebf2; border-radius: 16px; border-bottom-left-radius: 5px; padding: 8px 12px;
  display: inline-flex; gap: 3px; align-items: center;
}
.cp-dots-bubble i { width: 5px; height: 5px; border-radius: 50%; background: #95989f; animation: cpDotPulse 1.3s ease-in-out infinite; }
.cp-dots-bubble i:nth-child(2) { animation-delay: 0.18s; }
.cp-dots-bubble i:nth-child(3) { animation-delay: 0.36s; }
@keyframes cpDotPulse { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* link preview card (real rendered card PNGs, before + after states) */
.cp-lp-stack { width: 90%; display: grid; }
.cp-lp-stack > .cp-lp { grid-column: 1; grid-row: 1; width: 100%; }
.cp-lp {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,18,38,0.06), 0 8px 24px -10px rgba(15,18,38,0.15);
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.cp-lp.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cp-lp-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #eef0f6; }
.cp-lp-foot { padding: 7px 12px; border-top: 0.5px solid #e6e8f0; }
.cp-lp-url {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 9.5px; color: #8b8fa3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}

@media (prefers-reduced-motion: reduce) {
  .cp-lp, .cp-avatar, .cp-dot { transition: none !important; }
  .cp-row-me, .cp-dots-row, [data-cp-reshare-row], [data-cp-card-b] { animation: none; }
  .cp-sheet { transition: none; }
  .cp-sheet-body { scroll-behavior: auto; }
  .cp-tap.is-on { animation: none; }
  .cp-dots-bubble i { animation: none; opacity: 0.6; }
  .cp-cursor { animation: none; opacity: 0; }
}