/* Four small animated samples on the home page: patients, calendar,
   WhatsApp and bills. Each is drawn at 560 x 380 and scaled to fit.
   The pointer and the press animation come from demo.css. */

.bits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(46px, 6vw, 90px) clamp(30px, 5vw, 80px); }
.bit-block h3 { margin-top: 34px; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-stretch: 92%; }
.bit { perspective: 1300px; }
.bit-float { transform-style: preserve-3d; animation: bit-float 9s ease-in-out infinite alternate; }
.bit-block:nth-child(odd) .bit-float { --ry: 11deg; --rz: -1deg; }
.bit-block:nth-child(even) .bit-float { --ry: -11deg; --rz: 1deg; animation-delay: -4s; }
@keyframes bit-float {
  0% { transform: rotateX(8deg) rotateY(var(--ry)) rotateZ(var(--rz)) translateY(0); }
  100% { transform: rotateX(4deg) rotateY(calc(var(--ry) * 0.45)) rotateZ(0deg) translateY(-12px); }
}
.bit-frame { position: relative; height: calc(380px * var(--s, 1)); transform-style: preserve-3d; }
.bit-stage { position: absolute; left: 0; top: 0; width: 560px; height: 380px; transform-origin: 0 0; transform: scale(var(--s, 1)); transform-style: preserve-3d; font: 12.5px/1.4 "Segoe UI", system-ui, sans-serif; color: #24343c; }
.bit-win { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #f5f7f8; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 50px 70px -30px rgba(2, 16, 22, 0.75), 0 20px 34px -18px rgba(2, 16, 22, 0.5); }

.s-bar { height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #fff; border-bottom: 1px solid #d8e1e5; }
.s-bar b { font-size: 15px; }
.s-bar .grow { flex: 1; }
.s-search { flex: 1; height: 28px; display: flex; align-items: center; padding: 0 10px; border: 1px solid #acbbc3; border-radius: 6px; color: #8a9aa2; }
.s-btn { display: inline-block; padding: 6px 13px; border-radius: 6px; background: #27596c; color: #fff; font-weight: 600; white-space: nowrap; transition: background 0.25s, color 0.25s; }
.s-btn.ghost { background: #fff; color: #27596c; box-shadow: inset 0 0 0 1px #acbbc3; }
.s-btn.done { background: #e2f1e4; color: #2c6b3a; box-shadow: none; }
.s-dim { color: #60717a; }

/* Patients */
.s-list { padding: 8px 16px; }
.s-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #e3eaed; }
.s-row:first-child { border-top: 0; }
.s-row i { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #dbe7ec; color: #27596c; display: grid; place-items: center; font: 600 11px "Segoe UI", sans-serif; }
.s-row span { flex: 1; }
.s-row small { display: block; color: #60717a; font: 11px ui-monospace, Consolas, monospace; }
.s-row em { font-style: normal; color: #60717a; }
.s-row.new { animation: row-in 0.8s var(--spring); background: linear-gradient(90deg, #e2f1e4, transparent); margin: 0 -16px; padding-inline: 16px; }
.s-row.new i { background: #cfe3d0; color: #2c6b3a; }
@keyframes row-in { from { opacity: 0; transform: translateY(-26px) scale(0.94); } }
.s-sheet { position: absolute; right: 14px; top: 54px; width: 250px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid #d8e1e5; box-shadow: 0 22px 40px -16px rgba(10, 40, 50, 0.5); display: grid; gap: 9px; transform-origin: 85% 0; opacity: 0; transform: scale(0.7) translateY(-14px); transition: opacity 0.18s, transform 0.6s var(--spring); }
.s-sheet.open { opacity: 1; transform: none; }
.s-sheet label { display: grid; gap: 3px; font-weight: 600; }
.s-input { display: block; height: 28px; line-height: 26px; padding: 0 9px; border: 1px solid #acbbc3; border-radius: 6px; font-weight: 400; background: #fff; }
.s-input.focus { border-color: #27596c; box-shadow: 0 0 0 3px rgba(39, 89, 108, 0.18); }
.s-ok { color: #2c6b3a; opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.5s var(--spring); }
.s-ok.show { opacity: 1; transform: none; }
.s-pop { position: absolute; z-index: 4; opacity: 0; transition: opacity 0.2s, transform 0.9s var(--spring); }
.s-pop.out { opacity: 1; }
.s-card { right: -26px; bottom: -34px; width: 190px; padding: 12px; font-size: 10.5px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6); transform: translate3d(-80px, -90px, 0) rotate(-10deg) scale(0.3); }
.s-card.out { transform: translate3d(0, 0, 90px) rotate(6deg); }
.s-card b { font-size: 13px; display: block; }

/* Calendar */
.cal { position: absolute; left: 0; right: 0; top: 46px; bottom: 0; --cw: 84px; --rh: 54px; }
.cal-days { display: grid; grid-template-columns: 48px repeat(6, var(--cw)); height: 30px; align-items: center; color: #60717a; border-bottom: 1px solid #d8e1e5; background: #fff; }
.cal-days b { color: #27596c; }
.cal-grid { position: absolute; left: 48px; top: 30px; width: calc(var(--cw) * 6); height: calc(var(--rh) * 5); background: linear-gradient(#e3eaed 1px, transparent 1px) 0 0 / 100% var(--rh), linear-gradient(90deg, #e3eaed 1px, transparent 1px) 0 0 / var(--cw) 100%; }
.cal-times { position: absolute; left: 0; top: 30px; width: 48px; }
.cal-times span { display: block; height: var(--rh); padding: 3px 0 0 8px; color: #60717a; font-size: 11px; }
.appt, .slot { position: absolute; left: calc(var(--c) * var(--cw) + 3px); top: calc(var(--r) * var(--rh) + 3px); width: calc(var(--cw) - 6px); height: calc(var(--rh) - 6px); }
.appt { padding: 5px 7px; border-radius: 7px; background: #dbe7ec; border-left: 3px solid #27596c; font-size: 11.5px; line-height: 1.25; overflow: hidden; transition: left 0.8s cubic-bezier(0.3, 1.3, 0.5, 1), top 0.8s cubic-bezier(0.3, 1.3, 0.5, 1), box-shadow 0.2s, transform 0.4s var(--spring), opacity 0.2s, background 0.3s; }
.appt small { display: block; color: #60717a; }
.appt.green { background: #dcefdc; border-color: #2c7a44; }
.appt.amber { background: #fdf0cf; border-color: #c9963a; }
.appt.fresh { opacity: 0; transform: scale(0.4); }
.appt.fresh.show { opacity: 1; transform: none; }
.appt.held { box-shadow: 0 14px 24px -8px rgba(10, 40, 50, 0.55); transform: scale(1.07) rotate(-2deg); z-index: 2; }
.cal-pop { position: absolute; left: 190px; top: 150px; width: 210px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid #d8e1e5; box-shadow: 0 22px 40px -16px rgba(10, 40, 50, 0.5); display: grid; gap: 8px; z-index: 3; transform-origin: 0 60%; opacity: 0; transform: scale(0.7) translateX(-12px); transition: opacity 0.18s, transform 0.6s var(--spring); }
.cal-pop.open { opacity: 1; transform: none; }
.cal-match { display: flex; justify-content: space-between; padding: 7px 9px; border-radius: 6px; background: #e8f1f4; opacity: 0; transform: translateY(8px) scale(0.95); transition: opacity 0.2s, transform 0.5s var(--spring); }
.cal-match.show { opacity: 1; transform: none; }

/* WhatsApp */
.wa { position: absolute; inset: 46px 0 0 0; display: grid; grid-template-columns: 1fr 236px; }
.wa-queue { padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.wa-item { padding: 10px 12px; border-radius: 9px; background: #fff; border: 1px solid #d8e1e5; display: grid; gap: 6px; transition: opacity 0.4s; }
.wa-item p { margin: 0; color: #60717a; }
.wa-item .row { display: flex; gap: 6px; align-items: center; }
.wa-item.sent { opacity: 0.7; }
.wa-phone { margin: 10px 12px 0 0; border-radius: 18px 18px 0 0; overflow: hidden; background: #efe7dd; display: flex; flex-direction: column; box-shadow: 0 0 0 5px #1d2b31; }
.wa-top { padding: 9px 12px; background: #0b5c53; color: #fff; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.wa-top i { width: 24px; height: 24px; border-radius: 50%; background: #cfe3d0; color: #2c6b3a; display: grid; place-items: center; font: 600 10px "Segoe UI", sans-serif; }
.wa-top small { display: block; font-weight: 400; opacity: 0.8; font-size: 10px; }
.wa-chat { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 88%; padding: 7px 9px 5px; border-radius: 9px; background: #fff; align-self: flex-start; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); font-size: 11.5px; line-height: 1.35; transform-origin: 0 100%; display: none; }
.bubble.mine { background: #d9fdd3; align-self: flex-end; transform-origin: 100% 100%; }
.bubble.show { display: block; animation: bubble 0.6s var(--spring); }
@keyframes bubble { from { opacity: 0; transform: scale(0.5) translateY(14px); } }
.bubble time { display: block; text-align: right; font-size: 9.5px; color: #60717a; }
.ticks2 { color: #8a9aa2; transition: color 0.3s; letter-spacing: -3px; margin-left: 3px; }
.ticks2.read { color: #34a5e6; }
.typing { display: none; gap: 3px; padding: 9px 10px; }
.typing.show { display: flex; }
.typing b { width: 5px; height: 5px; border-radius: 50%; background: #8a9aa2; animation: dots 0.9s infinite alternate; }
.typing b:nth-child(2) { animation-delay: 0.2s; }
.typing b:nth-child(3) { animation-delay: 0.4s; }
@keyframes dots { to { transform: translateY(-4px); opacity: 0.4; } }

/* Bills */
.bill { position: absolute; inset: 46px 0 0 0; padding: 12px 16px; }
.bill-line { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #e3eaed; }
.bill-line:first-child { border-top: 0; }
.bill-line.added { display: none; }
.bill-line.added.show { display: flex; animation: row-in 0.7s var(--spring); }
.bill-line small { color: #60717a; margin-left: 6px; }
.bill-total { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 10px; border-top: 2px solid #24343c; font-weight: 700; font-size: 16px; }
.bill-total span:last-child { font-variant-numeric: tabular-nums; }
.bill-total.bump span:last-child { animation: bump 0.5s var(--spring); display: inline-block; }
.bill-foot { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 8px; align-items: center; }
.scan-chip { padding: 4px 11px; border-radius: 999px; background: #eef3f5; border: 1px solid #d8e1e5; color: #60717a; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.scan-chip.hit { background: #fdf0cf; border-color: #e6c66a; color: #6f5200; animation: press 0.42s var(--spring); }
.scan-beam { position: absolute; left: 0; right: 0; top: 46px; height: 3px; background: #e8463c; box-shadow: 0 0 14px 3px rgba(232, 70, 60, 0.6); opacity: 0; }
.scan-beam.sweep { animation: sweep 0.5s ease-in-out; }
@keyframes sweep { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(200px); } }
.s-receipt { right: -22px; bottom: -40px; width: 200px; padding: 13px; font-size: 10.5px; line-height: 1.5; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6); transform: translate3d(0, 150px, 0) rotate(0deg) scale(0.8); }
.s-receipt.out { transform: translate3d(0, 0, 90px) rotate(-5deg); }
.s-receipt b { font-size: 12px; }
.s-receipt div { display: flex; justify-content: space-between; }
.s-receipt .sum { border-top: 1.5px solid #111; margin-top: 4px; padding-top: 3px; font-weight: 700; font-size: 12.5px; }

@media (max-width: 940px) {
  .bits { grid-template-columns: 1fr; }
  .bit-block:nth-child(n) .bit-float { --ry: -6deg; }
  .s-card, .s-receipt { right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .bit-float { animation: none; transform: rotateX(5deg) rotateY(calc(var(--ry) * 0.6)); }
  .bit *, .bit *::after { transition: none !important; animation: none !important; }
}