Hype Corne

HTML

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hype Corne Interactive</title><style>
  body{margin:0;background:#0b141a;display:flex;justify-content:center;height:100vh;font-family:system-ui}
  .phone{width:100%;max-width:400px;background:#0b141a;display:flex;flex-direction:column;height:100vh;position:relative}
  .top{background:#1f2c34;color:#fff;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;font-size:13px}
  .header{background:#008069;color:#fff;padding:10px 12px;display:flex;align-items:center;gap:10px}
  .header .avatar{width:40px;height:40px;background:#fff;border-radius:50%;display:grid;place-items:center;font-size:20px}
  .header b{font-size:15px}.header small{font-size:11px;opacity:.8}
  .icons{display:flex;gap:16px;font-size:18px;align-items:center}
  .chat{flex:1;background:#0b141a url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');background-size:300px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
  .bubble{max-width:75%;padding:8px 10px 6px 10px;border-radius:8px;font-size:14.5px;line-height:1.35;position:relative;box-shadow:0 1px 0.5px rgba(0,0,0,.13)}
  .bot{background:#202c33;color:#e9edef;align-self:flex-start;border-top-left-radius:0}
  .bot::before{content:"";position:absolute;top:0;left:-6px;width:12px;height:12px;background:#202c33;clip-path:polygon(0 0,100% 0,100% 100%)}
  .user{background:#005c4b;color:#e9edef;align-self:flex-end;border-top-right-radius:0}
  .user::before{content:"";position:absolute;top:0;right:-6px;width:12px;height:12px;background:#005c4b;clip-path:polygon(0 0,0 100%,100% 0)}
  .label{color:#53bdeb;font-weight:bold;font-size:13px;margin-bottom:2px;display:block}
  .input-bar{background:#1f2c34;padding:6px 8px;display:flex;align-items:center;gap:8px}
 ...