clawd-desktop 1.0.0

package/assets/svg/clawd-mini-sleep.svg

@@ -0,0 +1,112 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500"
+  shape-rendering="crispEdges">
+  <defs>
+    <style>
+      /* Slower breathing for sleepy feel */
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 5s infinite ease-in-out;
+      }
+
+      /* Very slow, barely noticeable arm drift */
+      .arm-wobble {
+        transform-box: fill-box;
+        transform-origin: 100% 0%;
+        animation: arm-drift 50s infinite ease-in-out;
+      }
+
+      /* Zzz particles (same style as clawd-sleeping.svg) */
+      .z-particle { opacity: 0; }
+      .z1 { animation: float-1 6s infinite ease-in-out 0s; }
+      .z2 { animation: float-2 6s infinite ease-in-out 2s; }
+      .z3 { animation: float-3 6s infinite ease-in-out 4s; }
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.015, 0.985) translate(0, 0.3px); }
+      }
+
+      @keyframes arm-drift {
+        0%, 94%, 100% { transform: rotate(0deg); }
+        96% { transform: rotate(3deg); }
+        98% { transform: rotate(-1deg); }
+      }
+
+      /* Zzz floats left and up (away from screen edge) */
+      @keyframes float-1 {
+        0%   { transform: translate(-2px, 6px) scale(0.4); opacity: 0; }
+        10%  { opacity: 1; }
+        30%  { transform: translate(-5px, 3px) scale(0.6); }
+        50%  { transform: translate(-3px, 0px) scale(0.8); }
+        70%  { transform: translate(-6px, -3px) scale(1.0); }
+        90%  { opacity: 0.8; }
+        100% { transform: translate(-4px, -6px) scale(1.1); opacity: 0; }
+      }
+
+      @keyframes float-2 {
+        0%   { transform: translate(-3px, 7px) scale(0.3); opacity: 0; }
+        10%  { opacity: 1; }
+        30%  { transform: translate(-6px, 4px) scale(0.5); }
+        50%  { transform: translate(-4px, 1px) scale(0.7); }
+        70%  { transform: translate(-7px, -2px) scale(0.9); }
+        90%  { opacity: 0.8; }
+        100% { transform: translate(-5px, -5px) scale(1.0); opacity: 0; }
+      }
+
+      @keyframes float-3 {
+        0%   { transform: translate(-1px, 5px) scale(0.5); opacity: 0; }
+        10%  { opacity: 1; }
+        30%  { transform: translate(-4px, 2px) scale(0.7); }
+        50%  { transform: translate(-2px, -1px) scale(0.9); }
+        70%  { transform: translate(-5px, -4px) scale(1.1); }
+        90%  { opacity: 0.8; }
+        100% { transform: translate(-3px, -7px) scale(1.2); opacity: 0; }
+      }
+    </style>
+
+    <g id="pixel-z">
+      <rect x="0" y="0" width="4" height="1"/>
+      <rect x="2" y="1" width="1" height="1"/>
+      <rect x="1" y="2" width="1" height="1"/>
+      <rect x="0" y="3" width="4" height="1"/>
+    </g>
+
+    <g id="pixel-z-small">
+      <rect x="0" y="0" width="3" height="1"/>
+      <rect x="1" y="1" width="1" height="1"/>
+      <rect x="0" y="2" width="3" height="1"/>
+    </g>
+  </defs>
+
+  <!-- Zzz particles -->
+  <use href="#pixel-z" class="z-particle z1" fill="#90A4AE"/>
+  <use href="#pixel-z-small" class="z-particle z2" fill="#B0BEC5"/>
+  <use href="#pixel-z" class="z-particle z3" fill="#CFD8DC"/>
+
+  <g transform="rotate(-12, 7.5, 15)">
+    <g fill="#DE886D">
+      <rect x="3" y="11" width="1" height="4"/>
+      <rect x="5" y="11" width="1" height="4"/>
+      <rect x="9" y="11" width="1" height="4"/>
+      <rect x="11" y="11" width="1" height="4"/>
+    </g>
+
+    <g id="body-js">
+      <g class="breathe-anim">
+        <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+
+        <g class="arm-wobble">
+          <rect x="-1.5" y="9" width="4.5" height="2" fill="#DE886D"/>
+        </g>
+
+        <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+
+        <!-- Eyes closed — wide dashes like sleeping pose -->
+        <g id="eyes-js" fill="#000000">
+          <rect x="3.5" y="8.8" width="2" height="0.4"/>
+          <rect x="9.5" y="8.8" width="2" height="0.4"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/assets/svg/clawd-mini-typing.svg

@@ -0,0 +1,153 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      .eyes-read {
+        animation: read-code 1.2s infinite;
+      }
+
+      #eyes-js {
+        transition: transform 0.2s ease-out;
+      }
+
+      .arm-l-type {
+        transform-origin: 3px 10px;
+        animation: type-l 0.15s infinite ease-in-out;
+      }
+      .arm-r-type {
+        transform-origin: 12px 10px;
+        animation: type-r 0.12s infinite ease-in-out;
+      }
+
+      /* Floating data packets */
+      .data-bit {
+        opacity: 0;
+        animation: float-data 1s infinite linear;
+      }
+      .d1 { animation-delay: 0.0s; transform-origin: -2px 10px; }
+      .d2 { animation-delay: 0.3s; transform-origin: 5px 12px; }
+      .d3 { animation-delay: 0.6s; transform-origin: 12px 11px; }
+      .d4 { animation-delay: 0.8s; transform-origin: 17px 9px; }
+      .d5 { animation-delay: 0.1s; transform-origin: 8px 10px; }
+      .d6 { animation-delay: 0.4s; transform-origin: 0px 11px; }
+      .d7 { animation-delay: 0.7s; transform-origin: 15px 12px; }
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes read-code {
+        0%, 14%   { transform: translate(-2px, 0); }
+        15%, 29%  { transform: translate(-1.5px, 0); }
+        30%, 44%  { transform: translate(-1px, 0); }
+        45%, 59%  { transform: translate(-0.5px, 0); }
+        60%, 84%  { transform: translate(0px, 0); }
+        85%, 100% { transform: translate(-2px, 0); }
+      }
+
+      @keyframes type-l {
+        0%   { transform: rotate(-10deg); }
+        25%  { transform: rotate(15deg); }
+        50%  { transform: rotate(-5deg); }
+        75%  { transform: rotate(10deg); }
+        100% { transform: rotate(-10deg); }
+      }
+
+      @keyframes type-r {
+        0%   { transform: rotate(10deg); }
+        25%  { transform: rotate(-15deg); }
+        50%  { transform: rotate(5deg); }
+        75%  { transform: rotate(-10deg); }
+        100% { transform: rotate(10deg); }
+      }
+
+      .logo-glow {
+        animation: logo-pulse 1.5s infinite alternate ease-in-out;
+      }
+
+      @keyframes logo-pulse {
+        0% { opacity: 0.4; }
+        100% { opacity: 1; }
+      }
+
+      /* Packets float up and fade */
+      @keyframes float-data {
+        0% { transform: translateY(0) scale(0.5); opacity: 0; }
+        20% { opacity: 0.8; }
+        100% { transform: translateY(-15px) scale(1.2); opacity: 0; }
+      }
+    </style>
+
+    <!-- A small square to represent data/code -->
+    <g id="pixel-packet">
+      <rect x="0" y="0" width="1.5" height="1.5" />
+    </g>
+  </defs>
+
+  <!-- No shadow (against screen edge, no ground plane) -->
+
+  <!-- Entire character leaning: rotate -12° around feet base (7.5, 15) -->
+  <!-- Negative = counterclockwise = head tilts left toward screen = peeking pose -->
+  <g transform="rotate(-12, 7.5, 15)">
+
+    <!-- Legs (inside rotation group so they tilt with the body) -->
+    <g fill="#DE886D">
+      <rect x="3" y="11" width="1" height="4"/>
+      <rect x="5" y="11" width="1" height="4"/>
+      <rect x="9" y="11" width="1" height="4"/>
+      <rect x="11" y="11" width="1" height="4"/>
+    </g>
+
+    <!-- Upper Body (JS body-shift preserved for compatibility) -->
+    <g id="body-js">
+      <g class="breathe-anim">
+        <!-- Torso -->
+        <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+
+        <!-- Left Arm — typing -->
+        <g class="arm-l-type">
+          <rect x="0" y="9" width="3" height="2" fill="#DE886D"/>
+        </g>
+
+        <!-- Right Arm — typing -->
+        <g class="arm-r-type">
+          <rect x="12" y="9" width="3" height="2" fill="#DE886D"/>
+        </g>
+
+        <!-- Eyes: JS translate wrapper + CSS blink -->
+        <g id="eyes-js" fill="#000000">
+          <g class="eyes-read">
+            <rect x="4" y="8" width="1" height="2"/>
+            <rect x="10" y="8" width="1" height="2"/>
+          </g>
+        </g>
+      </g>
+    </g>
+
+    <!-- Pixel Laptop (inside rotation group so it leans with Clawd) -->
+    <g id="laptop" transform="translate(3, 11)">
+      <!-- Laptop Base --> 
+      <rect x="-0.5" y="4" width="8" height="1" fill="#546E7A" rx="0.5"/>
+      <!-- Screen Back -->
+      <rect x="0" y="0" width="7" height="4.5" fill="#78909C" rx="0.5"/>
+      <!-- Glowing Logo -->
+      <circle cx="3.5" cy="2" r="1.2" fill="#40C4FF" opacity="0.2" class="logo-glow"/>
+      <rect x="3" y="1.5" width="1" height="1" fill="#FFFFFF" class="logo-glow"/>
+    </g>
+  </g>
+  <!-- Data Particles floating up from behind the laptop -->
+  <g class="data-particles" fill="#40C4FF">
+    <use href="#pixel-packet" class="data-bit d1" x="-2" y="12" />
+    <use href="#pixel-packet" class="data-bit d2" x="5" y="11" />
+    <use href="#pixel-packet" class="data-bit d3" x="12" y="13" />
+    <use href="#pixel-packet" class="data-bit d4" x="17" y="11" />
+    <use href="#pixel-packet" class="data-bit d5" x="8" y="10" />
+    <use href="#pixel-packet" class="data-bit d6" x="1" y="11" />
+    <use href="#pixel-packet" class="data-bit d7" x="15" y="12" />
+  </g>
+</svg>

package/assets/svg/clawd-notification.svg

@@ -0,0 +1,149 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 3.5s loop: startle + 4 decaying jumps */
+
+      .body-anim {
+        transform-origin: 7.5px 15px;
+        animation: body-jump 3.5s infinite ease-in-out;
+      }
+
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-pulse 3.5s infinite ease-in-out;
+      }
+
+      .eyes-look {
+        transform-origin: 7.5px 9px;
+        animation: eye-track 3.5s infinite ease-in-out;
+      }
+
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-wave-l 3.5s infinite ease-in-out;
+      }
+      .arm-r {
+        transform-origin: 14px 10px;
+        animation: arm-wave-r 3.5s infinite ease-in-out;
+      }
+
+      .alert-pop {
+        transform-origin: 16px -1px;
+        animation: alert-flash 3.5s infinite ease-in-out;
+        opacity: 0;
+      }
+
+      /* --- Keyframes --- */
+
+      @keyframes body-jump {
+        0%          { transform: translate(0, 0) scale(1, 1); }
+        3%          { transform: translate(-1.5px, -1px) scale(1.03, 0.97); }
+        10%         { transform: translate(-1.5px, -1px) scale(1.03, 0.97); }
+        15%         { transform: translate(0, 1.5px) scale(1.05, 0.96); }
+        20%         { transform: translate(0, -10px) scale(0.96, 1.04); }
+        25%         { transform: translate(0, 1.5px) scale(1.05, 0.96); }
+        30%         { transform: translate(0, -8px) scale(0.97, 1.03); }
+        35%         { transform: translate(0, 1.2px) scale(1.04, 0.97); }
+        40%         { transform: translate(0, -5px) scale(0.98, 1.02); }
+        45%         { transform: translate(0, 1px) scale(1.03, 0.98); }
+        50%         { transform: translate(0, -3px) scale(0.99, 1.01); }
+        55%         { transform: translate(0, 0.5px) scale(1.01, 0.99); }
+        62%, 100%   { transform: translate(0, 0) scale(1, 1); }
+      }
+
+      @keyframes shadow-pulse {
+        0%              { transform: scale(1); opacity: 0.5; }
+        3%, 10%         { transform: translate(-1.5px, 0) scale(1); opacity: 0.5; }
+        15%             { transform: scale(1.1); opacity: 0.55; }
+        20%             { transform: scale(0.5); opacity: 0.12; }
+        25%             { transform: scale(1.12); opacity: 0.55; }
+        30%             { transform: scale(0.55); opacity: 0.15; }
+        35%             { transform: scale(1.1); opacity: 0.52; }
+        40%             { transform: scale(0.65); opacity: 0.2; }
+        45%             { transform: scale(1.06); opacity: 0.5; }
+        50%             { transform: scale(0.75); opacity: 0.3; }
+        55%             { transform: scale(1.03); opacity: 0.5; }
+        62%, 100%       { transform: scale(1); opacity: 0.5; }
+      }
+
+      @keyframes eye-track {
+        0%          { transform: translate(0, 0) scaleY(1); }
+        3%          { transform: translate(4px, 0) scaleY(0.3); }
+        6%          { transform: translate(4px, 0) scaleY(1); }
+        10%         { transform: translate(4px, 0) scaleY(1); }
+        15%, 100%   { transform: translate(0, 0) scaleY(1); }
+      }
+
+      @keyframes arm-wave-l {
+        0%          { transform: rotate(0deg); }
+        3%, 10%     { transform: rotate(25deg); }
+        15%         { transform: rotate(30deg); }
+        20%         { transform: rotate(155deg); }
+        25%         { transform: rotate(115deg); }
+        30%         { transform: rotate(140deg); }
+        35%         { transform: rotate(100deg); }
+        40%         { transform: rotate(115deg); }
+        45%         { transform: rotate(80deg); }
+        50%         { transform: rotate(80deg); }
+        55%         { transform: rotate(40deg); }
+        62%, 100%   { transform: rotate(0deg); }
+      }
+
+      @keyframes arm-wave-r {
+        0%          { transform: rotate(0deg); }
+        3%, 10%     { transform: rotate(-30deg); }
+        15%         { transform: rotate(-30deg); }
+        20%         { transform: rotate(-155deg); }
+        25%         { transform: rotate(-115deg); }
+        30%         { transform: rotate(-140deg); }
+        35%         { transform: rotate(-100deg); }
+        40%         { transform: rotate(-115deg); }
+        45%         { transform: rotate(-80deg); }
+        50%         { transform: rotate(-80deg); }
+        55%         { transform: rotate(-40deg); }
+        62%, 100%   { transform: rotate(0deg); }
+      }
+
+      @keyframes alert-flash {
+        0%          { opacity: 0; transform: scale(0.3); }
+        3%          { opacity: 1; transform: scale(1.3); }
+        10%         { opacity: 1; transform: scale(1); }
+        50%         { opacity: 1; transform: scale(1); }
+        55%         { opacity: 0.7; transform: scale(0.9); }
+        62%         { opacity: 0; transform: scale(0.6); }
+        100%        { opacity: 0; transform: scale(0.6); }
+      }
+    </style>
+  </defs>
+
+  <!-- Mirrored character -->
+  <g transform="translate(15, 0) scale(-1, 1)">
+    <rect class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000"/>
+
+    <g class="body-anim">
+      <g fill="#DE886D">
+        <rect x="3" y="13" width="1" height="2"/>
+        <rect x="5" y="13" width="1" height="2"/>
+        <rect x="9" y="13" width="1" height="2"/>
+        <rect x="11" y="13" width="1" height="2"/>
+        <rect x="2" y="6" width="11" height="7"/>
+        <g class="arm-l">
+          <rect x="0" y="9" width="2" height="2"/>
+        </g>
+        <g class="arm-r">
+          <rect x="13" y="9" width="2" height="2"/>
+        </g>
+      </g>
+      <g class="eyes-look" fill="#000000">
+        <rect x="4" y="8" width="1" height="2"/>
+        <rect x="10" y="8" width="1" height="2"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- Exclamation mark (screen coords, not mirrored) -->
+  <g class="alert-pop" fill="#FF3D00">
+    <rect x="15" y="-6" width="2" height="5"/>
+    <rect x="15" y="0" width="2" height="2"/>
+  </g>
+</svg>

package/assets/svg/clawd-react-annoyed.svg

@@ -0,0 +1,167 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* ===== 6s one-shot: annoyed, pause, resigned sigh, slow return =====
+         Phase 1 (0-6%,    ~0.36s): Flinch
+         Phase 2 (6-18%,   ~0.72s): Lean away + hand block + question mark
+         Phase 3 (18-35%,  ~1.02s): Hold — stay annoyed, question mark fades
+         Phase 4 (35-55%,  ~1.20s): Sigh — hand drops, body slumps, puff cloud
+         Phase 5 (55-70%,  ~0.90s): Linger slumped — still tired
+         Phase 6 (70-90%,  ~1.20s): Slow return
+         Phase 7 (90-100%, ~0.60s): Still
+      */
+
+      .body-react {
+        transform-origin: 7.5px 12px;
+        animation: body-react 6s 1 ease-in-out forwards;
+      }
+      .arm-l-react {
+        transform-origin: 2px 10px;
+        animation: arm-l-react 6s 1 ease-in-out forwards;
+      }
+      .eyes-react {
+        transform-origin: 7.5px 9px;
+        animation: eyes-react 6s 1 ease-in-out forwards;
+      }
+      .shadow-react {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-react 6s 1 ease-in-out forwards;
+      }
+      .qmark {
+        opacity: 0;
+        transform-origin: 8px -2px;
+        animation: qmark-pop 6s 1 ease-out forwards;
+      }
+      .sigh-cloud {
+        opacity: 0;
+        transform-origin: 16px 9px;
+        animation: sigh-puff 6s 1 ease-out forwards;
+      }
+
+      /* Body: flinch, lean, HOLD, sigh slump, LINGER, slow return */
+      @keyframes body-react {
+        0%        { transform: translate(0, 0) scale(1, 1); }
+        4%        { transform: translate(0, 1.5px) scale(1, 1); }
+        6%        { transform: translate(0, 1px) scale(1, 1); }
+        14%       { transform: translate(2px, 0) scale(1, 1); }
+        /* hold annoyed pose */
+        35%       { transform: translate(2px, 0) scale(1, 1); }
+        /* sigh: rise then slump */
+        40%       { transform: translate(1.5px, -0.5px) scale(1, 1.01); }
+        46%       { transform: translate(1px, 1px) scale(1.03, 0.97); }
+        52%       { transform: translate(0.5px, 0.5px) scale(1.01, 0.99); }
+        /* linger slumped */
+        68%       { transform: translate(0.3px, 0.3px) scale(1, 1); }
+        /* slow return */
+        85%       { transform: translate(0, 0) scale(1, 1); }
+        100%      { transform: translate(0, 0) scale(1, 1); }
+      }
+
+      /* Left arm: block, hold, resigned drop */
+      @keyframes arm-l-react {
+        0%        { transform: rotate(0deg); }
+        6%        { transform: rotate(0deg); }
+        14%       { transform: rotate(-50deg); }
+        /* hold block through pause */
+        35%       { transform: rotate(-45deg); }
+        /* resigned drop */
+        43%       { transform: rotate(-15deg); }
+        48%       { transform: rotate(0deg); }
+        100%      { transform: rotate(0deg); }
+      }
+
+      /* Eyes: squint, half-lid, HOLD, sigh-close, tired linger, recover */
+      @keyframes eyes-react {
+        0%        { transform: scaleY(1); }
+        3%        { transform: scaleY(0.2); }
+        6%        { transform: scaleY(0.6); }
+        14%       { transform: scaleY(0.5); }
+        /* hold half-lid through pause */
+        35%       { transform: scaleY(0.5); }
+        /* sigh: close then reopen tired */
+        40%       { transform: scaleY(0.1); }
+        46%       { transform: scaleY(0.6); }
+        /* linger tired */
+        68%       { transform: scaleY(0.6); }
+        /* blink, back to normal */
+        74%       { transform: scaleY(0.1); }
+        78%       { transform: scaleY(1); }
+        100%      { transform: scaleY(1); }
+      }
+
+      /* Question mark: pop during lean, fade during hold */
+      @keyframes qmark-pop {
+        0%, 4%    { opacity: 0; transform: translate(0, 4px) scale(0.5); }
+        10%       { opacity: 1; transform: translate(0, 0) scale(1.1); }
+        14%, 26%  { opacity: 1; transform: translate(0, 0) scale(1); }
+        34%       { opacity: 0; transform: translate(0, -3px) scale(1.1); }
+        100%      { opacity: 0; }
+      }
+
+      /* Sigh puff: breath cloud after hold */
+      @keyframes sigh-puff {
+        0%, 37%   { opacity: 0; transform: translate(0, 1px) scale(0.3); }
+        43%       { opacity: 0.6; transform: translate(0, 0) scale(0.8); }
+        48%       { opacity: 0.7; transform: translate(1px, 0) scale(1); }
+        60%       { opacity: 0; transform: translate(4px, -4px) scale(1.3); }
+        100%      { opacity: 0; }
+      }
+
+      /* Shadow */
+      @keyframes shadow-react {
+        0%        { transform: translate(0, 0) scaleX(1); opacity: 0.5; }
+        4%        { transform: translate(0, 0) scaleX(0.93); opacity: 0.45; }
+        14%       { transform: translate(1px, 0) scaleX(1); opacity: 0.5; }
+        35%       { transform: translate(1px, 0) scaleX(1); opacity: 0.5; }
+        46%       { transform: translate(0.5px, 0) scaleX(1.05); opacity: 0.55; }
+        68%       { transform: translate(0.3px, 0) scaleX(1.02); opacity: 0.52; }
+        85%       { transform: translate(0, 0) scaleX(1); opacity: 0.5; }
+        100%      { transform: translate(0, 0) scaleX(1); opacity: 0.5; }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="shadow-react" x="3" y="15" width="9" height="1" fill="#000" opacity="0.5"/>
+
+  <!-- Static Legs -->
+  <g fill="#DE886D">
+    <rect x="3" y="11" width="1" height="4"/>
+    <rect x="5" y="11" width="1" height="4"/>
+    <rect x="9" y="11" width="1" height="4"/>
+    <rect x="11" y="11" width="1" height="4"/>
+  </g>
+
+  <!-- Animated Upper Body -->
+  <g class="body-react">
+    <!-- Torso -->
+    <g fill="#DE886D">
+      <rect x="2" y="6" width="11" height="7"/>
+    </g>
+    <!-- Arms -->
+    <g fill="#DE886D">
+      <g class="arm-l-react"><rect x="0" y="9" width="2" height="2"/></g>
+      <rect x="13" y="9" width="2" height="2"/>
+    </g>
+    <!-- Eyes -->
+    <g class="eyes-react" fill="#000">
+      <rect x="4" y="8" width="1" height="2"/>
+      <rect x="10" y="8" width="1" height="2"/>
+    </g>
+    <!-- Question mark -->
+    <g class="qmark" fill="#5C9CE6">
+      <rect x="7" y="-5" width="2" height="1"/>
+      <rect x="6" y="-4" width="1" height="1"/>
+      <rect x="9" y="-4" width="1" height="2"/>
+      <rect x="8" y="-2" width="1" height="1"/>
+      <rect x="7" y="-1" width="1" height="1"/>
+      <rect x="7" y="1" width="1" height="1"/>
+    </g>
+    <!-- Sigh puff cloud (right side of face) -->
+    <g class="sigh-cloud" fill="#FFF">
+      <rect x="14" y="9" width="2" height="1"/>
+      <rect x="15" y="8" width="2" height="1"/>
+      <rect x="16" y="7" width="2" height="1"/>
+    </g>
+  </g>
+</svg>