<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Bot Robot</title>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.svg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

svg {
    width: 220px;
    height: 220px;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.2));
}
</style>
</head>

<body>

<div class="svg-container">
    <svg viewBox="0 0 100 100" class="animate-float" role="img" aria-label="Cute Bot Robot">
        <circle cx="50" cy="70" r="25" fill="#f97316" stroke="white" stroke-width="3"/>
        <circle cx="40" cy="75" r="8" fill="white"/>
        <circle cx="60" cy="75" r="8" fill="white"/>
        <circle cx="40" cy="75" r="4" fill="#1e293b"/>
        <circle cx="60" cy="75" r="4" fill="#1e293b"/>
        <path d="M42,62 Q50,68 58,62" fill="none" stroke="#1e293b" stroke-width="3" stroke-linecap="round"/>
        <circle cx="32" cy="68" r="4" fill="#ec4899" opacity="0.6"/>
        <circle cx="68" cy="68" r="4" fill="#ec4899" opacity="0.6"/>
        <rect x="35" y="30" width="30" height="25" rx="8" fill="#10b981" stroke="white" stroke-width="2"/>
        <rect x="42" y="38" width="16" height="10" fill="#1e293b" stroke="#f8fafc"/>
        <text x="50" y="45" text-anchor="middle" fill="#10b981" font-size="8" font-weight="bold">Hi!</text>
        <rect x="38" y="15" width="8" height="15" fill="#1e293b" stroke="white"/>
        <rect x="54" y="15" width="8" height="15" fill="#1e293b" stroke="white"/>
    </svg>
</div>

</body>
</html>