Nitro-V3/public/nitro_messenger_v2.html

<style>
*{box-sizing:border-box;margin:0;padding:0;}
.root{display:flex;justify-content:center;padding:1.5rem 0;font-family:Arial,Helvetica,sans-serif;}
.card{width:332px;height:445px;display:flex;flex-direction:column;border:2px solid #000;border-radius:10px;overflow:hidden;background:#f2f2eb;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.hdr{display:flex;align-items:center;justify-content:space-between;padding:0 8px;min-height:30px;background:#30728c;border-bottom:1px solid #000;flex-shrink:0;}
.hdr-title{color:#fff;font-size:13px;}
.hdr-min{width:18px;height:18px;border:2px solid #000;border-radius:3px;background:#bbb;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hdr-min::after{content:"";width:8px;height:2px;background:#555;display:block;}
.avatar-bar{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid #000;background:#d9e4ea;flex-shrink:0;overflow-x:auto;}
.av-item{width:36px;height:36px;border:2px solid #7f8b94;border-radius:4px;background:#c0cdd5;overflow:hidden;position:relative;cursor:pointer;flex-shrink:0;}
.av-item.active{border-color:#1e7295;box-shadow:0 0 0 1px #1e7295;}
.av-item img{position:absolute;left:50%;top:50%;transform:translate(-50%,-62%) scale(0.65);width:64px;}
.av-badge{position:absolute;top:-3px;right:-3px;min-width:12px;height:12px;border-radius:6px;background:#f2d64b;border:1px solid #000;font-size:8px;font-weight:700;color:#000;display:flex;align-items:center;justify-content:center;padding:0 2px;}
.thread-hdr{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border-bottom:1px solid #000;flex-shrink:0;background:#e8eef2;}
.thread-name{font-size:12px;font-weight:700;color:#000;}
.acts{display:flex;gap:4px;align-items:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 7px;border:1px solid #1e7295;border-radius:3px;background:#1e7295;color:#fff;font-size:11px;cursor:pointer;}
.btn.danger{border-color:#a81a12;background:#a81a12;}
.btn.close-btn{border-color:#888;background:#ccc;color:#000;font-size:13px;padding:0 5px;}
.btn.icon-btn{width:22px;padding:0;}
.icon-sq{width:10px;height:10px;background:rgba(255,255,255,.35);border-radius:1px;display:block;}
.messages{flex:1;min-height:0;overflow-y:auto;padding:8px;background:#cfd7dd;display:flex;flex-direction:column;gap:8px;}
.msg-row{display:flex;gap:6px;align-items:flex-start;}
.msg-row.own{flex-direction:row-reverse;}
.msg-av{width:40px;height:52px;flex-shrink:0;position:relative;overflow:hidden;}
.msg-av img{position:absolute;left:50%;top:0;transform:translateX(-50%);width:64px;}
.msg-body{display:flex;flex-direction:column;gap:2px;max-width:200px;}
.bubble{background:#dfdfdf;border:1px solid #bbb;border-radius:3px;padding:4px 7px;font-size:12px;line-height:1.4;color:#000;position:relative;}
.bubble.left::before{content:"";position:absolute;top:10px;left:-7px;border:6px solid transparent;border-right-color:#bbb;}
.bubble.left::after{content:"";position:absolute;top:10px;left:-5px;border:5px solid transparent;border-right-color:#dfdfdf;}
.bubble.right::before{content:"";position:absolute;top:10px;right:-7px;border:6px solid transparent;border-left-color:#bbb;}
.bubble.right::after{content:"";position:absolute;top:10px;right:-5px;border:5px solid transparent;border-left-color:#dfdfdf;}
.msg-time{font-size:10px;color:#666;}
.msg-row.own .msg-time{text-align:right;}
.input-row{display:flex;gap:5px;padding:6px 8px;border-top:1px solid #000;background:#e8eef2;flex-shrink:0;align-items:center;}
.input-row input{flex:1;height:26px;border:1px solid #9aa6ad;border-radius:3px;padding:0 7px;font-size:12px;background:#fff;outline:none;}
.btn.send{border-color:#00800b;background:#00800b;}
</style>
<div class="root">
<div class="card">
  <div class="hdr">
    <span class="hdr-title">Le tue chat aperte (7)</span>
    <div class="hdr-min"></div>
  </div>

  <div class="avatar-bar">
    <div class="av-item active" style="position:relative;">
      <img alt="Jarchy" src="https://www.habbo.com/habbo-imaging/avatarimage?figure=hr-831-45.hd-180-1.ch-255-92.lg-275-82.sh-290-92&direction=2&head_direction=2&size=l">
      <span class="av-badge">1</span>
    </div>
    <div class="av-item">
      <img alt=",Homy" src="https://www.habbo.com/habbo-imaging/avatarimage?figure=ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403&direction=2&head_direction=2&size=l">
    </div>
    <div class="av-item">
      <img alt="u3" src="https://www.habbo.com/habbo-imaging/avatarimage?figure=hd-180-1.ch-215-62.lg-280-110&direction=2&head_direction=2&size=l">
    </div>
    <div class="av-item">
      <img alt="u4" src="https://www.habbo.com/habbo-imaging/avatarimage?figure=hd-3096-1370.ch-3030-110.lg-3023-110&direction=2&head_direction=2&size=l">
    </div>
    <div class="av-item">
      <img alt="u5" src="https://www.habbo.com/habbo-imaging/avatarimage?figure=hd-180-3.ch-210-66.lg-270-82&direction=2&head_direction=2&size=l">
    </div>
    <div class="av-item">
      <img alt="u6" src="https://www.habbo.com/habbo-imaging/avatarimage?figure=hd-185-10.ch-220-1338.lg-275-110&direction=2&head_direction=2&size=l">
    </div>
    <div class="av-item">
      <img alt="u7" src="https://www.habbo.com/habbo-imaging/avatarimage?figure=hd-180-2.ch-230-62.lg-285-110&direction=2&head_direction=2&size=l">
    </div>
  </div>

  <div class="thread-hdr">
    <span class="thread-name">Tu + Jarchy</span>
    <div class="acts">
      <button class="btn icon-btn"><span class="icon-sq"></span></button>
      <button class="btn icon-btn"><span class="icon-sq"></span></button>
      <button class="btn danger">Denuncia</button>
      <button class="btn close-btn">×</button>
    </div>
  </div>

  <div class="messages">
    <div class="msg-row">
      <div class="msg-av"><img alt="Jarchy" src="https://www.habbo.com/habbo-imaging/avatarimage?figure=hr-831-45.hd-180-1.ch-255-92.lg-275-82.sh-290-92&direction=2&head_direction=2&size=l"></div>
      <div class="msg-body">
        <div style="font-size:11px;font-weight:700;color:#000;">Jarchy:</div>
        <div class="bubble left">dddove sei?</div>
        <div class="msg-time">7 ore fa</div>
      </div>
    </div>

    <div class="msg-row own">
      <div class="msg-av"><img alt="Tu" src="https://www.habbo.com/habbo-imaging/avatarimage?figure=ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403&direction=4&head_direction=4&size=l"></div>
      <div class="msg-body">
        <div style="font-size:11px;font-weight:700;color:#000;text-align:right;">,Homy:</div>
        <div class="bubble right">su<br>slogga<br>vieni li</div>
        <div class="msg-time">7 ore fa</div>
      </div>
    </div>

    <div class="msg-row">
      <div class="msg-av"><img alt="Jarchy" src="https://www.habbo.com/habbo-imaging/avatarimage?figure=hr-831-45.hd-180-1.ch-255-92.lg-275-82.sh-290-92&direction=2&head_direction=2&size=l"></div>
      <div class="msg-body">
        <div style="font-size:11px;font-weight:700;color:#000;">Jarchy:</div>
        <div class="bubble left">arrivo</div>
        <div class="msg-time">7 ore fa</div>
      </div>
    </div>
  </div>

  <div class="input-row">
    <input placeholder="Fai clic qui per scrivere a Jarchy" type="text">
    <button class="btn send">Parla</button>
  </div>
</div>
</div>