/* Framed, swipeable previews; images never open a viewer. */
.handoff-previews { min-width: 0; width: 100%; }
.handoff-preview { container-type: inline-size; min-width: 0; padding: 14px 0 0; border: 1px solid rgb(33 29 24 / 12%); border-radius: 14px; background: #fffdfa; box-shadow: 0 8px 24px rgb(53 34 14 / 5%); overflow: hidden; }
.handoff-preview-heading { padding: 0 14px 12px; border-bottom: 1px solid rgb(33 29 24 / 8%); }
.handoff-preview-kicker { display: block; color: #b74400; font: 600 9px/1.4 var(--mono-font, monospace); letter-spacing: .07em; text-transform: uppercase; }
.handoff-preview-heading h4 { margin: 8px 0 5px; font: 700 clamp(16px, 1.3vw, 20px)/1.2 var(--body-font, sans-serif); letter-spacing: -.025em; color: #14171c; }
.handoff-preview-heading p { margin: 0; min-height: 2.8em; color: #70747a; font-size: 11px; line-height: 1.4; }
.handoff-preview-track { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; touch-action: pan-y; cursor: grab; }
.handoff-preview-track::after { content: ''; flex: 0 0 32px; }
.handoff-preview-track::-webkit-scrollbar { display: none; }
.handoff-preview-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.handoff-preview-slide { flex: 0 0 calc(100% - 32px); box-sizing: border-box; min-width: 0; margin: 0; padding: 16px; scroll-snap-align: start; user-select: none; -webkit-user-select: none; }
.handoff-preview-slide figcaption { min-height: 46px; margin: 0 0 10px; }
.handoff-preview-slide figcaption strong { display: block; color: #22262b; font-size: 12px; line-height: 1.4; font-weight: 650; }
.handoff-preview-slide figcaption span { display: block; margin-top: 3px; color: #7a7e84; font-size: 10px; line-height: 1.4; }
.handoff-preview-sheet { display: grid; place-items: center; height: clamp(230px, 24vw, 340px); padding: 12px; border: 1px solid #e7e3dc; border-radius: 8px; background: #f1eee9; overflow: hidden; }
.handoff-preview-sheet img { display: block; width: 100%; height: 100%; min-height: 0; max-width: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.handoff-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px 8px; }
.handoff-preview-count { color: #7a7e84; font: 500 10px var(--mono-font, monospace); white-space: nowrap; }
.handoff-preview-dots, .handoff-preview-arrows { display: flex; align-items: center; gap: 3px; }
.handoff-preview button { display: grid; place-items: center; width: 32px; height: 36px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #35383e; cursor: pointer; }
.handoff-preview { position: relative; }
.handoff-preview-arrows { position: absolute; top: var(--preview-arrow-y, 55%); left: 6px; right: 6px; z-index: 2; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.handoff-preview-arrows button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(246 91 10 / 22%); font-size: 21px; background: #fffdfa; box-shadow: 0 3px 12px rgb(33 29 24 / 12%); pointer-events: auto; transition: background 180ms, color 180ms; }
.handoff-preview-arrows button:hover:not(:disabled) { background: #f65b0a; color: white; }
.handoff-preview-arrows button:disabled { opacity: .3; cursor: default; }
.handoff-preview-dots button { width: 22px; }
.handoff-preview-dots button::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: #ccc5bc; transition: width 180ms, background 180ms; }
.handoff-preview-dots button[aria-current="true"]::before { width: 15px; background: #f65b0a; }
.handoff-preview button:focus-visible, .handoff-preview-track:focus-visible { outline: 2px solid #f65b0a; outline-offset: -2px; }
.handoff-preview--handoff .handoff-preview-slide,
.handoff-preview--chat .handoff-preview-slide { padding: 16px; }
.handoff-preview--handoff figcaption,
.handoff-preview--chat figcaption { min-height: 0; margin: 0 0 12px; }
.handoff-preview--handoff figcaption strong,
.handoff-preview--chat figcaption strong { font-size: 1rem; line-height: 1.3; letter-spacing: -.015em; }
.handoff-preview--handoff figcaption span,
.handoff-preview--chat figcaption span { margin-top: 4px; font-size: .8125rem; line-height: 1.45; }
.handoff-preview--handoff .handoff-preview-heading p,
.handoff-preview--chat .handoff-preview-heading p { min-height: 0; font-size: .8125rem; }
.handoff-preview[data-preview-autoheight] .handoff-preview-track { align-items: flex-start; transition: height 220ms ease; }
.handoff-preview-sheet--persona { height: auto; aspect-ratio: 1800 / 1273; }
/* One shallow, gently fanned deck on every screen: never a second row. */
.handoff-proposal-collage { display: flex; flex-wrap: nowrap; align-items: flex-start; isolation: isolate; padding: clamp(16px, 3cqi, 24px) clamp(12px, 2.5cqi, 20px); border: 1px solid #e7e3dc; border-radius: 10px; background: linear-gradient(145deg, #f6f3ed, #eee9e1); }
.handoff-proposal-page { position: relative; flex: 0 0 28%; min-width: 0; transform-origin: center 85%; }
.handoff-proposal-page + .handoff-proposal-page { margin-left: -4%; }
.handoff-proposal-page:nth-child(1) { transform: rotate(-3deg); z-index: 1; }
.handoff-proposal-page:nth-child(2) { transform: rotate(-1deg); z-index: 2; }
.handoff-proposal-page:nth-child(3) { transform: rotate(1deg); z-index: 3; }
.handoff-proposal-page:nth-child(4) { transform: rotate(3deg); z-index: 4; }
.handoff-proposal-page img { display: block; width: 100%; height: auto; aspect-ratio: 1039 / 1800; object-fit: contain; border: 1px solid rgb(25 30 40 / 12%); border-radius: 4px; box-shadow: -5px 5px 14px rgb(25 30 40 / 14%); pointer-events: none; -webkit-user-drag: none; }
.handoff-proposal-page span { display: block; width: 84%; margin-top: 8px; color: #686d74; font: 500 .75rem/1.35 var(--mono-font, monospace); }
.handoff-preview--chat .handoff-preview-sheet { width: min(100%, 330px); height: auto; aspect-ratio: 1080 / 2251; padding: 0; margin-inline: auto; border-radius: 14px; background: #11151c; box-shadow: 0 10px 28px rgb(25 20 15 / 10%); }
.handoff-preview--chat .handoff-preview-sheet img { width: 100%; height: auto; object-fit: contain; }
.whatsapp-conversation-preview { min-width: 0; margin: 0; padding: 12px; border: 1px solid rgb(33 29 24 / 12%); border-radius: 14px; background: #fffdfa; }
.whatsapp-conversation-preview figcaption { margin-bottom: 10px; }
.whatsapp-conversation-preview figcaption strong { display: block; font-size: 1rem; line-height: 1.4; }
.whatsapp-preview-hint { display: block; margin-top: 5px; font-size: .8125rem; color: #70747a; }
.whatsapp-preview-track { overflow-x: auto; overscroll-behavior-inline: contain; border-radius: 8px; background: #031011; scrollbar-color: #f65b0a #152226; scrollbar-width: thin; }
.whatsapp-preview-track img { display: block; width: 100%; min-width: 1000px; max-width: none; height: auto; }
.whatsapp-preview-track:focus-visible { outline: 2px solid #f65b0a; outline-offset: 3px; }
.handoff-preview--chat .handoff-preview-kicker,
.handoff-preview--handoff .handoff-preview-kicker { font-size: .75rem; }
@container (max-width: 245px) {
  .handoff-preview-footer { flex-wrap: wrap; }
  .handoff-preview-dots { order: 3; flex-basis: 100%; justify-content: center; }
}
@media (max-width: 720px) {
  .handoff-preview-heading p { min-height: 0; }
  .handoff-preview-sheet--persona { padding: 8px; }
  .handoff-preview--handoff .handoff-preview-slide,
  .handoff-preview--chat .handoff-preview-slide { padding: 12px; }
  .handoff-preview--chat .handoff-preview-sheet { max-width: 300px; }
  .handoff-preview button { min-height: 44px; }
  .handoff-preview-dots button { width: 28px; }
}
@media (prefers-reduced-motion: reduce) { .handoff-preview-dots button::before, .handoff-preview[data-preview-autoheight] .handoff-preview-track { transition: none; } }