kambra-device{display:block}
.phoneFrame{--phone-width:clamp(220px,15.5vw,244px);--bezel:7px;--radius:calc(var(--phone-width)*.15);width:var(--phone-width);aspect-ratio:393/852;padding:var(--bezel);border:1px solid #626c79;border-radius:var(--radius);background:linear-gradient(130deg,#414a56,#171c23 48%,#2a313a);box-shadow:0 3px 5px #17263538,0 24px 44px #1726352b,inset 0 1px 1px #ffffff4d;display:flex;transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .24s}
.phoneFrame:hover{box-shadow:0 4px 6px #17263540,0 28px 48px #17263533;transform:translateY(-3px)}
.phoneFrame__screen{width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #0c1015;border-radius:calc(var(--radius) - var(--bezel) - 1px);background:linear-gradient(155deg,#252c35,#191f27);color:#e3e9f2}
.phoneFrame__status{position:relative;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:8px 15px 0;font-size:10px;font-weight:600}
.phoneFrame__island{position:absolute;top:8px;left:34%;width:32%;height:15px;background:#090c10;border-radius:12px}
.phoneFrame__content{flex:1;min-height:0;display:flex;flex-direction:column}
.phoneFrame__home{height:3px;width:36%;margin:9px auto 7px;background:#bec8d4;border-radius:6px;flex-shrink:0}
.sms-thread{display:flex;flex-direction:column;flex:1;min-height:0}
.sms-contact{display:flex;align-items:center;position:relative;justify-content:center;text-align:center;padding:9px 12px 10px;border-bottom:1px solid #e6edfa12;min-height:65px}
.sms-back{position:absolute;left:14px;color:#aab8cb;font-size:22px}
.contact-k{display:block;margin:0 auto 4px;width:26px;height:26px;border:1px solid #ffffff12;background:#3a4351;border-radius:50%;font-size:14px;line-height:24px}
.sms-contact strong{font-size:11px;font-weight:500}
.sms-chat{padding:16px 12px 12px;flex:1}
.sms-stamp{font-size:9px;color:#a5b1c2;text-align:center;line-height:1.6;margin-bottom:14px}
.sms-bubble{padding:11px 12px;background:#353e4a;border-radius:15px 15px 15px 4px;font-size:11px;line-height:1.5;max-width:96%;color:#ebf0f8;animation:rise .6s both}
.sms-reply{padding:10px 12px;background:#304a3e;border-radius:15px 15px 4px 15px;max-width:85%;margin:14px 0 0 auto;font-size:11px;line-height:1.5;color:#e4f2e9;animation:rise .5s both}
.sms-compose{margin:0 12px;height:29px;border:1px solid #59657970;border-radius:30px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;font-size:10px;color:#a5b2c4;flex-shrink:0}
.sms-action{display:block;padding:0;background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.sms-action:hover{text-decoration:underline;text-underline-offset:3px}
.sms-provenance{display:block;text-align:center;font-size:10px;line-height:1.5;color:#627185;margin-top:15px}
.smsFragment{width:100%;border:1px solid #4e5a6c;border-radius:18px;background:#202832;box-shadow:0 3px 5px #14243924,0 18px 35px #1424391f}
.smsFragment .phoneFrame__screen{border:0;border-radius:17px}.smsFragment .phoneFrame__status,.smsFragment .phoneFrame__home,.smsFragment .sms-compose{display:none}
.smsFragment .sms-contact{min-height:50px;justify-content:flex-start;padding:9px 17px;text-align:left}.smsFragment .sms-back{display:none}.smsFragment .contact-k{display:inline-block;margin:0 8px 0 0;vertical-align:middle;width:24px;height:24px;line-height:22px}
.smsFragment .sms-chat{padding:14px 17px 20px}.smsFragment .sms-bubble{max-width:90%;font-size:13px;line-height:1.55}.smsFragment .sms-reply{max-width:85%;font-size:12px}.smsFragment .sms-stamp{font-size:10px;margin-bottom:12px}
/* One canonical Messages material; physical device geometry above is shared. */
.phoneFrame__screen{background:linear-gradient(155deg,#F7FAFF,#EAF2FD);color:#1B2535;border-color:#BCC8DA}
.phoneFrame__status{font-size:11px;color:#1B2535}
.sms-contact{border-bottom-color:#DCE3EE;background:#FFFFFFD9}
.sms-back{color:#285AF5}.contact-k{color:#fff;background:#723CE6;border-color:#723CE6}
.sms-contact strong{font-size:12px;color:#1B2535}
.sms-stamp{font-size:11px;color:#58677C}
.sms-bubble{font-size:12px;line-height:1.5;background:#DCE3EE;color:#1B2535;box-shadow:0 2px 3px #1419250D}
.sms-reply{font-size:12px;background:#087E58;color:#fff;box-shadow:0 2px 3px #087E581F}
.sms-compose{font-size:11px;color:#58677C;border-color:#BCC8DA;background:#FFFFFF80}
.phoneFrame__home{background:#58677C}.sms-provenance{font-size:12px;color:#58677C}
.smsFragment{background:#EAF2FD;border-color:#BCC8DA;box-shadow:0 3px 6px #14192524,0 24px 50px -8px #285AF52B}
.smsFragment .sms-contact strong{font-size:14px}.smsFragment .sms-bubble,.smsFragment .sms-reply{font-size:14px}.smsFragment .sms-stamp{font-size:12px}
@media(prefers-reduced-motion:reduce){.phoneFrame,.sms-bubble,.sms-reply{transition:none;animation:none}}