/* UFY Mensajes — lo compartido como tarjeta (js/ufy-phone/message-share-cards.js).
   Usa los colores de messages.css, así funciona también en el modo oscuro. */
.ufy-dm-share {display:flex;flex-direction:column;width:min(235px,100%);margin-bottom:4px;border-radius:18px;overflow:hidden;background:var(--dm-efeff3,#efeff3);color:var(--dm-gray-17,#111);text-decoration:none;-webkit-tap-highlight-color:transparent;}
.ufy-dm-message.mine .ufy-dm-share {margin-left:auto;}
.ufy-dm-share[href] {cursor:pointer;}
.ufy-dm-share:active[href] {opacity:.85;}

.ufy-dm-share-label {display:block;padding:9px 12px 0;font-size:calc(12px * var(--ufy-font-scale,1));color:var(--dm-767680,#767680);}
.ufy-dm-share-head {display:flex;align-items:center;gap:8px;padding:9px 12px;min-width:0;}
.ufy-dm-share-avatar {display:inline-flex;flex-shrink:0;width:30px;height:30px;border-radius:50%;overflow:hidden;align-items:center;justify-content:center;background:var(--dm-dfdfe4,#dfdfe4);font-size:calc(11px * var(--ufy-font-scale,1));font-weight:700;}
.ufy-dm-share-avatar img,.ufy-dm-share-profile-photo img {width:100%;height:100%;object-fit:cover;}
.ufy-dm-share-who {display:flex;flex-direction:column;min-width:0;line-height:1.2;}
.ufy-dm-share-who strong,.ufy-dm-share-who small {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ufy-dm-share-who strong {font-size:calc(14px * var(--ufy-font-scale,1));}
.ufy-dm-share-who small {color:var(--dm-767680,#767680);font-size:calc(12px * var(--ufy-font-scale,1));}

.ufy-dm-share-media {position:relative;display:block;aspect-ratio:4 / 5;background:var(--dm-dfdfe4,#dfdfe4);}
.ufy-dm-share-media img,.ufy-dm-share-media video {display:block;width:100%;height:100%;object-fit:cover;}
/* Reels y videos: el triángulo de "reproducir" encima de la portada. */
.ufy-dm-share-play {position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);}
.ufy-dm-share-play::after {content:"";position:absolute;top:7px;left:10px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #fff;}
.ufy-dm-share-media.is-profile {aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 18px;background:transparent;}
.ufy-dm-share-profile-photo {display:inline-flex;width:84px;height:84px;border-radius:50%;overflow:hidden;align-items:center;justify-content:center;background:var(--dm-dfdfe4,#dfdfe4);font-size:calc(24px * var(--ufy-font-scale,1));font-weight:700;}
.ufy-dm-share-profile-kind {font-size:calc(12px * var(--ufy-font-scale,1));color:var(--dm-767680,#767680);}

.ufy-dm-share-caption {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding:9px 12px 11px;font-size:calc(13.5px * var(--ufy-font-scale,1));overflow-wrap:anywhere;}

/* Mientras llega del servidor: el hueco de la foto, latiendo suave. */
.ufy-dm-share.is-loading .ufy-dm-share-media {animation:ufy-dm-share-wait 1.2s ease-in-out infinite alternate;}
@keyframes ufy-dm-share-wait {from {opacity:.55;} to {opacity:1;}}
@media (prefers-reduced-motion:reduce) {.ufy-dm-share.is-loading .ufy-dm-share-media {animation:none;}}

/* Ya no se puede ver (cuenta privada, historia caducada…). */
.ufy-dm-share.is-gone {border:1px solid var(--dm-dfdfe4,#dfdfe4);background:transparent;}
.ufy-dm-share-gone {display:block;padding:12px;font-size:calc(13.5px * var(--ufy-font-scale,1));color:var(--dm-767680,#767680);}