Messages :
C'est joliiiii ! * - *
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>.application-screen{display:flex;flex-direction:column;height:calc(100% - 20px)}.application-screen *{box-sizing:border-box}.application-bar{display:grid;grid-template-columns:repeat(3,1fr);background-color:#f1f5f8;height:25px;font-size:10px;align-items:center;padding-inline:5px;border-bottom:1px solid #fff;box-shadow:0 1px 0 #e6e6e6}.messages-list{flex:1;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;padding:10px 15px;display:flex;flex-direction:column;row-gap:10px}.messages-list::-webkit-scrollbar{width:0}.new-message{display:flex;background-color:#f1f5f8;height:30px;line-height:25px;margin-top:1px;padding:10px 7px;box-sizing:border-box;border-top:1px solid #fff;box-shadow:0 -1px 0 #e6e6e6;align-items:center;color:#abaaaa}.back-button,.details-button{color:#6fab9a}.phone-balloon{position:relative;border-radius:10px;padding:8px 12px;font-size:12px;max-width:80%}.phone-balloon img{max-width: 100%;max-height: 100%;}.phone-balloon[data-sender=me]{align-self:flex-end;background:#48bbfc;color:#fff}.phone-balloon:after{content:"";width:0;height:0;border-style:solid;position:absolute;bottom:4px}.phone-balloon[data-sender=me]:after{border-width:10px 0 0 10px;border-color:transparent transparent transparent #48bbfc;right:-7px}.phone-balloon[data-sender=other]{background:#e5e4ea;align-self:flex-start}.phone-balloon[data-sender=other]:after{border-width:10px 10px 0 0;border-color:transparent #e5e4ea transparent transparent;left:-7px}.message-bar{flex:1;background:#fff;color:#ccc;font-size:13px;border:1px solid #ccc;border-radius:5px;padding:0 6px;margin:-2px 10px}.new-message>.send{font-size:11px}.recipient-name{text-align:center}.details-button{text-align:right}.phone{width:250px;height:450px;border-radius:25px;margin-inline:auto;position:relative;background-color:var(--phone-color,#444);border:1px solid #2f2f2f;font-family:'Roboto',sans-serif;box-sizing:border-box}.phone *{box-sizing:border-box}.phone-screen{width:220px;height:340px;background-color:#fff;margin:50px auto 15px;display:flex;flex-direction:column}.phone-system-bar{width:100%;display:grid;grid-template-columns:repeat(3,1fr);background-color:#f1f5f8;height:20px;padding-top:1px;box-shadow:0 1px 0 #e6e6e6;font-size:10px}.points{padding-left:4px}.points span{display:inline-block;height:5px;width:5px;border-radius:50%;background-color:#000;margin-right:1px;margin-top:4px}.phone-time{text-align:center}.battery{text-align:right;margin-right:1px}.credit{position:absolute;width:100%;text-align:center;text-transform:uppercase;font-size:8px;letter-spacing:3px;margin-top:20px}.credit a{color:#ccc;text-decoration:none}.circle-button{display:block;height:30px;width:30px;background:hsla(0,0%,18%,.7);border-radius:50%;margin-inline:auto}</style><div class="phone" style="--phone-color: #444"><div class="credit"><a href="https://pk-tools.netlify.app/sms" target="_blank">Phone K</a></div><div class="phone-screen"> <section class="phone-system-bar"><div class="points"><span></span><span></span><span></span></div><div class="phone-time">11:42</div><div class="battery"><i class="fa fa-battery-full" aria-hidden="true"></i></div></section> <div class="application-screen"><div class="application-bar"><div class="back-button"><i class="fa fa-chevron-left" aria-hidden="true"></i> Messages</div><div class="recipient-name">Prénom</div><div class="details-button">Details</div></div><div class="messages-list"><div class="phone-balloon" data-sender=other><img src="https://c4.wallpaperflare.com/wallpaper/969/52/917/anime-original-motorcycle-mountain-path-hd-wallpaper-preview.jpg" alt="Image envoyée" loading="lazy"/></div><div class="phone-balloon" data-sender=me>C'est joliiiii ! * - * </div></div><div class="new-message"> <i class="fa fa-camera" aria-hidden="true"></i><div class="message-bar">Message</div><div class="send">Envoyer</div></div></div></div><div class="circle-button"></div></div>