/* Styles for the chat apps, scoped to slides with class="uses-chat". */
@keyframes grow { from { max-height: 0; } to { max-height: 340px; } }
@keyframes shrink { from { max-height: 200px; opacity: 1; } to { max-height: 0; opacity: 0; } }
@scope (.slide.uses-chat) {
	/* Chat rows that push older messages up, plus a rich link card (clips 5 and 6) */
	.row { overflow: hidden; display: flex; flex-direction: column; animation: grow 0.4s cubic-bezier(.22,1,.36,1) var(--d) both; }
	.row > * { margin-top: 10px; animation: bubbleIn 0.4s cubic-bezier(.22,1,.36,1) var(--d) both; transform-origin: left bottom; }
	.row.me > * { transform-origin: right bottom; }
	.row.gone { animation: grow 0.3s ease var(--d) both, shrink 0.25s ease var(--e) forwards; }


	.stamp { align-self: center; color: #8a8a8e; font: 500 13.5px/1 var(--ios); margin: 0 0 4px; }
	.linkcard { align-self: flex-start; width: 286px; border-radius: 20px; overflow: hidden; background: #f0f0f2; }
	.lc-img { height: 132px; background: var(--vc-cream); padding: 14px 14px 0; position: relative; overflow: hidden; }
	.lc-img .app-head .av-img { width: 34px; height: 34px; }
	.lc-img .app-head h1 { font-size: 16px; }
	.lc-img .app-head p { font-size: 11px; }
	.lc-img .mini-btn { margin-top: 10px; height: 30px; border-radius: 9px; background: var(--vc-brass); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--ios); }
	.lc-img .mini-slots { display: flex; gap: 5px; margin-top: 8px; }
	.lc-img .mini-slots span { flex: 1; text-align: center; padding: 5px 0; border-radius: 7px; border: 1px dashed #cbbfa9; background: #fffdf9; font: 600 10px/1 var(--ios); color: #5b564c; }
	.lc-meta { padding: 10px 14px 12px; }
	.lc-meta b { display: block; font: 650 15.5px/1.25 var(--ios); color: #111; }
	.lc-meta span { display: flex; align-items: center; gap: 5px; margin-top: 3px; font: 400 13.5px/1.2 var(--ios); color: #8a8a8e; }

	/* Client-facing barber booking page (Max's and Victoria's public pages) */
	.pub { position: absolute; inset: 0; background: var(--vc-cream); color: var(--vc-ink); font-family: var(--ios); padding: 18px 16px; }
	.pub .hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
	.pub .hero .av-img { width: 78px; height: 78px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--vc-brass); }
	.pub .hero h1 { margin-top: 12px; font: 780 25px/1.1 var(--ios); letter-spacing: -0.02em; }
	.pub .hero p { margin-top: 5px; font: 500 14px/1.3 var(--ios); color: #6d6a63; }
	.pub .book-now { margin-top: 18px; }
	.pub .svc { margin-top: 16px; }
	.pub .svc div { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-top: 1px solid #f1ebe1; font: 600 15px/1.2 var(--ios); }
	.pub .svc div:first-child { border-top: 0; }
	.pub .svc small { display: block; font: 500 12.5px/1.2 var(--ios); color: #8a847a; margin-top: 2px; }
	.pub .svc b { font: 700 15px/1 var(--ios); }
	.pub .note { margin-top: 14px; text-align: center; font: 500 12px/1.3 var(--ios); color: #a39d92; }
}