/* WhatsApp-mockup: telefoon, chatballonnen, fototegels, linkvoorbeeld */
.phone { width: 340px; max-width: 100%; border-radius: 50px; background: #0d0f0f; padding: 11px; box-shadow: 0 30px 60px rgba(11, 46, 38, .25), inset 0 0 0 2px #2a2d2d; position: relative; }
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; background: #0d0f0f; border-radius: 20px; z-index: 3; }
.screen { border-radius: 40px; overflow: hidden; background: #EFEAE2; height: 680px; display: flex; flex-direction: column; font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif; }
.screen.tall { height: auto; min-height: 680px; }

.sb { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px 4px; font-size: 14px; font-weight: 600; background: #F6F5F3; color: #111; }
.sb i { font-style: normal; letter-spacing: 1px; font-size: 11px; }

.wa-head { display: flex; align-items: center; gap: 9px; padding: 6px 12px 9px; background: #F6F5F3; border-bottom: 1px solid #e2e0dc; color: #111; }
.wa-head .back { color: #007AFF; font-size: 26px; line-height: 1; margin-right: 2px; }
.wa-head .av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; background: var(--petrol); }
.wa-head .av img { width: 100%; height: 100%; }
.wa-head .who { line-height: 1.2; flex: 1; min-width: 0; }
.wa-head .who b { font-size: 15px; display: block; }
.wa-head .who small { font-size: 11.5px; color: #667781; }
.wa-head .ico { display: flex; gap: 18px; color: #007AFF; }
.wa-head .ico svg { width: 21px; height: 21px; }

.wa-body { flex: 1; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 5px; overflow: hidden;
  background-color: #EFEAE2;
  background-image: radial-gradient(rgba(11, 46, 38, .045) 1.2px, transparent 1.3px);
  background-size: 14px 14px; }
.wa-day { align-self: center; background: #fff; color: #54656F; font-size: 11.5px; padding: 4px 10px; border-radius: 8px; margin: 2px 0 6px; box-shadow: 0 1px .5px rgba(0, 0, 0, .1); }
.wa-sys { align-self: center; background: #FFF3C4; color: #54656F; font-size: 11px; text-align: center; padding: 5px 10px; border-radius: 8px; max-width: 88%; margin-bottom: 4px; line-height: 1.35; }

.bub { max-width: 82%; padding: 6px 9px 7px; border-radius: 10px; font-size: 13.5px; line-height: 1.38; color: #111B21; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); white-space: pre-line; word-wrap: break-word; }
.bub.in { background: #fff; align-self: flex-start; border-top-left-radius: 3px; }
.bub.out { background: #D9FDD3; align-self: flex-end; border-top-right-radius: 3px; }
.bub .t { float: right; font-size: 10.5px; color: #667781; margin: 7px 0 -4px 10px; line-height: 1; }
.bub.out .t::after { content: " ✓✓"; color: #53BDEB; letter-spacing: -2px; }
.bub b { font-weight: 700; }
.bub.media { padding: 3px; }
.bub.media .t { position: relative; margin: 4px 5px 1px 0; }
.bub.cont { margin-top: -2px; }

.ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 214px; }
.ph { position: relative; aspect-ratio: 1; border-radius: 7px; background-color: var(--c, #8aa39b); overflow: hidden;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Cpath d='M14 66Q16 54 30 52L50 38Q56 33 66 33H98Q108 33 115 40L128 52Q144 54 146 64V72Q146 76 142 76H18Q14 76 14 72Z' fill='%23fff' fill-opacity='.92'/%3E%3Cpath d='M54 42 64 37H82V52H44Z' fill='%230B2E26' fill-opacity='.35'/%3E%3Cpath d='M88 37H98Q104 37 109 42L118 52H88Z' fill='%230B2E26' fill-opacity='.35'/%3E%3Ccircle cx='42' cy='76' r='12' fill='%230B2E26'/%3E%3Ccircle cx='118' cy='76' r='12' fill='%230B2E26'/%3E%3Ccircle cx='42' cy='76' r='5' fill='%23cfd8d4'/%3E%3Ccircle cx='118' cy='76' r='5' fill='%23cfd8d4'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(0, 0, 0, .18));
  background-repeat: no-repeat; background-position: center 58%, center; background-size: 72%, cover; }
.ph span { position: absolute; left: 6px; bottom: 5px; font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

.lp { display: block; text-decoration: none; color: inherit; background: #F0F2F5; border-radius: 7px; overflow: hidden; margin: -1px -4px 6px; }
.lp .ph { aspect-ratio: 16/8; border-radius: 0; }
.lp .lp-in { padding: 7px 9px 8px; }
.lp small { display: block; color: #667781; font-size: 11px; text-transform: lowercase; }
.lp b { display: block; font-size: 13px; line-height: 1.3; margin: 1px 0 2px; }
.lp em { font-style: normal; font-size: 12px; color: #3B4A54; }
.bub a.u { color: #027EB5; text-decoration: none; word-break: break-all; }

.typing { align-self: flex-start; background: #fff; border-radius: 10px; border-top-left-radius: 3px; padding: 10px 12px; display: flex; gap: 4px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9AA6AC; animation: tp 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tp { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.wa-input { display: flex; align-items: center; gap: 10px; padding: 8px 12px 22px; background: #F6F5F3; border-top: 1px solid #e2e0dc; color: #007AFF; }
.wa-input .field { flex: 1; background: #fff; border: 1px solid #e2e0dc; border-radius: 18px; height: 34px; }
.wa-input svg { width: 22px; height: 22px; flex: none; }

@media (prefers-reduced-motion: reduce) { .typing i { animation: none; } }