/* ============================================================================ */
/* COMPONENTS STYLESHEET (Switches, Living Emojis, Study Tracker, Doodle)       */
/* ============================================================================ */
      /* Switch styles */
      .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
      }
      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      .slider {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background-color: rgba(255,255,255,0.1);
        transition: .4s;
        border-radius: 24px;
      }
      .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
      }
      input:checked + .slider {
        background-color: var(--accent);
      }
      input:checked + .slider:before {
        transform: translateX(20px);
      }
      @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
      }
      @keyframes slideDown {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
      }
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
      }
      /* GPU-promoted Living Emoji Base Layers */
      .living-emoji-wrap {
        position: relative;
        will-change: transform;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-origin: 50% 55%;
        overflow: visible;
      }
      .living-emoji-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
        transform: translateZ(0);
        backface-visibility: hidden;
      }

      /* ========================================================================== */
      /* ARTICULATED FACIAL REACTION OVERLAY RIG (.emoji-face-rig)                  */
      /* ========================================================================== */
      .emoji-face-rig {
        position: absolute;
        inset: -18%;
        width: 136%;
        height: 136%;
        pointer-events: none;
        overflow: visible;
        z-index: 3;
        transform: translate3d(0, 0, 0);
      }
      .emoji-face-rig * {
        transform-box: fill-box;
        transform-origin: center;
        will-change: transform, opacity;
      }

      /* 1. Laughing Eye-Corner Tears (😂 🤣 😆) */
      @keyframes faceTearSquirtLeft {
        0%, 12%, 100% { opacity: 0; transform: translate3d(3px, 0, 0) scale3d(0.3, 0.3, 1) rotate(15deg); }
        25% { opacity: 0.95; transform: translate3d(-2px, 1px, 0) scale3d(1.05, 1.05, 1) rotate(-12deg); }
        65% { opacity: 0.85; transform: translate3d(-7px, 7px, 0) scale3d(0.9, 1.1, 1) rotate(-25deg); }
        90% { opacity: 0; transform: translate3d(-10px, 12px, 0) scale3d(0.4, 0.4, 1) rotate(-32deg); }
      }
      @keyframes faceTearSquirtRight {
        0%, 12%, 100% { opacity: 0; transform: translate3d(-3px, 0, 0) scale3d(0.3, 0.3, 1) rotate(-15deg); }
        25% { opacity: 0.95; transform: translate3d(2px, 1px, 0) scale3d(1.05, 1.05, 1) rotate(12deg); }
        65% { opacity: 0.85; transform: translate3d(7px, 7px, 0) scale3d(0.9, 1.1, 1) rotate(25deg); }
        90% { opacity: 0; transform: translate3d(10px, 12px, 0) scale3d(0.4, 0.4, 1) rotate(32deg); }
      }
      .rig-tear-left { animation: faceTearSquirtLeft 1.05s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }
      .rig-tear-right { animation: faceTearSquirtRight 1.05s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }

      /* 2. Kissing Lips & Floating Mouth Heart (😘 😗 😚) */
      @keyframes faceKissBlow {
        0%, 15% { opacity: 0; transform: translate3d(0, 2px, 0) scale3d(0.2, 0.2, 1) rotate(-10deg); }
        38% { opacity: 1; transform: translate3d(4px, -2px, 0) scale3d(1.18, 1.18, 1) rotate(8deg); }
        75% { opacity: 0.9; transform: translate3d(12px, -9px, 0) scale3d(1, 1, 1) rotate(16deg); }
        100% { opacity: 0; transform: translate3d(16px, -14px, 0) scale3d(0.45, 0.45, 1) rotate(22deg); }
      }
      .rig-kiss-heart { animation: faceKissBlow 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }

      /* 3. Rosy Blush Cheekbones & Heart-Eye Pop (🥰 😍 😊 😳 🥺) */
      @keyframes faceBlushPulse {
        0%, 100% { opacity: 0.2; transform: scale3d(0.85, 0.85, 1); }
        45% { opacity: 0.88; transform: scale3d(1.22, 1.15, 1); }
      }
      @keyframes faceEyeHeartPopLeft {
        0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale3d(0.4, 0.4, 1) rotate(-8deg); }
        32% { opacity: 1; transform: translate3d(-2px, -4px, 0) scale3d(1.25, 1.25, 1) rotate(-14deg); }
        68% { opacity: 0.85; transform: translate3d(-4px, -7px, 0) scale3d(0.95, 0.95, 1) rotate(-6deg); }
      }
      @keyframes faceEyeHeartPopRight {
        0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale3d(0.4, 0.4, 1) rotate(8deg); }
        32% { opacity: 1; transform: translate3d(2px, -4px, 0) scale3d(1.25, 1.25, 1) rotate(14deg); }
        68% { opacity: 0.85; transform: translate3d(4px, -7px, 0) scale3d(0.95, 0.95, 1) rotate(6deg); }
      }
      .rig-blush-cheek { animation: faceBlushPulse 1.3s ease-in-out var(--emoji-loops, 2) forwards; }
      .rig-eye-heart-l { animation: faceEyeHeartPopLeft 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }
      .rig-eye-heart-r { animation: faceEyeHeartPopRight 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }

      /* 4. Angry Nostril Steam Puffs & Temple Vein (😡 🤬 😤 😠) */
      @keyframes faceSteamLeft {
        0%, 15% { opacity: 0; transform: translate3d(2px, -2px, 0) scale3d(0.3, 0.3, 1); }
        40% { opacity: 0.92; transform: translate3d(-6px, 4px, 0) scale3d(1.1, 1.1, 1); }
        85%, 100% { opacity: 0; transform: translate3d(-12px, 9px, 0) scale3d(1.45, 1.45, 1); }
      }
      @keyframes faceSteamRight {
        0%, 15% { opacity: 0; transform: translate3d(-2px, -2px, 0) scale3d(0.3, 0.3, 1); }
        40% { opacity: 0.92; transform: translate3d(6px, 4px, 0) scale3d(1.1, 1.1, 1); }
        85%, 100% { opacity: 0; transform: translate3d(12px, 9px, 0) scale3d(1.45, 1.45, 1); }
      }
      @keyframes faceVeinThrob {
        0%, 100% { opacity: 0.25; transform: scale3d(0.75, 0.75, 1) rotate(0deg); }
        35% { opacity: 1; transform: scale3d(1.25, 1.25, 1) rotate(-8deg); }
        70% { opacity: 0.9; transform: scale3d(1.1, 1.1, 1) rotate(6deg); }
      }
      .rig-steam-left { animation: faceSteamLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }
      .rig-steam-right { animation: faceSteamRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }
      .rig-anger-vein { animation: faceVeinThrob 0.85s ease-in-out var(--emoji-loops, 2) forwards; }

      /* 5. Crying Rolling Tear Streams (😢 😭) */
      @keyframes faceCryStream {
        0% { opacity: 0; transform: translate3d(0, -3px, 0) scale3d(0.7, 0.4, 1); }
        30% { opacity: 0.95; transform: translate3d(0, 2px, 0) scale3d(1, 1.1, 1); }
        75% { opacity: 0.9; transform: translate3d(0, 9px, 0) scale3d(0.95, 1.2, 1); }
        100% { opacity: 0; transform: translate3d(0, 14px, 0) scale3d(0.6, 0.5, 1); }
      }
      .rig-cry-drop-l { animation: faceCryStream 1.35s cubic-bezier(0.4, 0, 0.6, 1) var(--emoji-loops, 2) forwards; }
      .rig-cry-drop-r { animation: faceCryStream 1.35s cubic-bezier(0.4, 0, 0.6, 1) 0.22s var(--emoji-loops, 2) forwards; }

      /* 6. Puppy-Eye Specular Shimmer (🥺 🥹) */
      @keyframes facePuppyGlint {
        0%, 100% { opacity: 0.45; transform: translate3d(0, 0, 0) scale3d(0.85, 0.85, 1); }
        25% { opacity: 1; transform: translate3d(-1px, -1px, 0) scale3d(1.3, 1.3, 1); }
        50% { opacity: 0.8; transform: translate3d(1px, 0.5px, 0) scale3d(1.1, 1.1, 1); }
        75% { opacity: 1; transform: translate3d(-0.5px, 1px, 0) scale3d(1.25, 1.25, 1); }
      }
      .rig-puppy-glint { animation: facePuppyGlint 1.2s ease-in-out var(--emoji-loops, 2) forwards; }

      /* 7. Sunglasses Specular Lens Sweep (😎 😏) */
      @keyframes faceLensSweep {
        0%, 20% { opacity: 0; transform: translate3d(-14px, -2px, 0) skewX(-22deg); }
        45% { opacity: 0.95; transform: translate3d(0px, 0px, 0) skewX(-22deg); }
        75%, 100% { opacity: 0; transform: translate3d(14px, 2px, 0) skewX(-22deg); }
      }
      .rig-lens-gleam { animation: faceLensSweep 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }

      /* 8. Temple Sweat Bead Slide (😅 😰 😬) */
      @keyframes faceSweatSlide {
        0% { opacity: 0; transform: translate3d(0, -4px, 0) scale3d(0.5, 0.5, 1); }
        30% { opacity: 0.98; transform: translate3d(0, 1px, 0) scale3d(1.1, 1.1, 1); }
        75% { opacity: 0.9; transform: translate3d(0, 8px, 0) scale3d(0.95, 1.15, 1); }
        100% { opacity: 0; transform: translate3d(0, 12px, 0) scale3d(0.5, 0.5, 1); }
      }
      .rig-sweat-bead { animation: faceSweatSlide 1.2s cubic-bezier(0.4, 0, 0.6, 1) var(--emoji-loops, 2) forwards; }

      /* 9. Sleepy Floating Zzz (😴 🥱) */
      @keyframes faceSleepZ {
        0% { opacity: 0; transform: translate3d(-2px, 4px, 0) scale3d(0.4, 0.4, 1) rotate(-8deg); }
        35% { opacity: 0.95; transform: translate3d(3px, -3px, 0) scale3d(1, 1, 1) rotate(4deg); }
        80% { opacity: 0.75; transform: translate3d(8px, -10px, 0) scale3d(1.2, 1.2, 1) rotate(12deg); }
        100% { opacity: 0; transform: translate3d(10px, -14px, 0) scale3d(0.7, 0.7, 1) rotate(16deg); }
      }
      .rig-sleep-z1 { animation: faceSleepZ 1.9s ease-out var(--emoji-loops, 2) forwards; }
      .rig-sleep-z2 { animation: faceSleepZ 1.9s ease-out 0.45s var(--emoji-loops, 2) forwards; }

      /* 10. Thinking Temple Idea Spark & Brow (🤔 🤨) */
      @keyframes faceIdeaPop {
        0%, 15%, 100% { opacity: 0; transform: translate3d(0, 3px, 0) scale3d(0.3, 0.3, 1); }
        40%, 70% { opacity: 1; transform: translate3d(2px, -4px, 0) scale3d(1.15, 1.15, 1) rotate(8deg); }
      }
      .rig-think-spark { animation: faceIdeaPop 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }

      /* 11. Articulated Hugging Hands Squeeze (🤗 🫂) */
      @keyframes faceHugHandLeft {
        0%, 100% { transform: translate3d(-4px, 1px, 0) rotate(-14deg) scale3d(0.92, 0.92, 1); }
        35%, 65% { transform: translate3d(3px, -1px, 0) rotate(8deg) scale3d(1.12, 1.12, 1); }
      }
      @keyframes faceHugHandRight {
        0%, 100% { transform: translate3d(4px, 1px, 0) rotate(14deg) scale3d(0.92, 0.92, 1); }
        35%, 65% { transform: translate3d(-3px, -1px, 0) rotate(-8deg) scale3d(1.12, 1.12, 1); }
      }
      .rig-hug-hand-l { animation: faceHugHandLeft 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }
      .rig-hug-hand-r { animation: faceHugHandRight 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; }

      /* 11B. Real Google Noto Animated 512px WebP + Choreographed Emoji Prop Scenes:
         (a) Say Ahh / Feed Me (😮 + 🍓🥄 gliding into open mouth)
         (b) Eating / Nom Nom (😋 + 🍪 munching at mouth corner)
         (c) All Ears / Listening (😊 + 👂 cupped at side of head)
         (d) Feed Partner (🥰 + 🥄🍰 offered forward)
         (e) Gentle Head Pat (😊 + 🫳 patting top of head)
         (f) Cheek Pinch (🥰 + 🤏 pinching cheek) */
      .noto-scene-prop {
        position: absolute;
        pointer-events: none;
        user-select: none;
        line-height: 1;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.42));
        will-change: transform, opacity;
      }
      @keyframes propFeedSpoonGlide {
        0%, 100% {
          transform: translate3d(28%, 18%, 0) rotate(14deg) scale3d(0.88, 0.88, 1);
          opacity: 0.85;
        }
        42%, 68% {
          transform: translate3d(-12%, -18%, 0) rotate(-10deg) scale3d(1.06, 1.06, 1);
          opacity: 1;
        }
      }
      @keyframes propEatBiteMunch {
        0%, 100% {
          transform: translate3d(6%, 8%, 0) rotate(8deg) scale3d(0.95, 0.95, 1);
        }
        25%, 65% {
          transform: translate3d(-12%, -8%, 0) rotate(-12deg) scale3d(1.12, 0.92, 1);
        }
        45%, 85% {
          transform: translate3d(-4%, 2%, 0) rotate(4deg) scale3d(0.88, 1.08, 1);
        }
      }
      @keyframes propListenEarCup {
        0%, 100% {
          transform: translate3d(0, 0, 0) rotate(0deg) scale3d(0.96, 0.96, 1);
        }
        38%, 72% {
          transform: translate3d(10%, -8%, 0) rotate(-10deg) scale3d(1.18, 1.18, 1);
        }
      }
      @keyframes propOfferSpoonReach {
        0%, 100% {
          transform: translate3d(0, 0, 0) rotate(0deg) scale3d(0.92, 0.92, 1);
        }
        45%, 75% {
          transform: translate3d(12%, -10%, 0) rotate(-8deg) scale3d(1.18, 1.18, 1);
        }
      }
      @keyframes propPatHandStroke {
        0%, 100% {
          transform: translate3d(0, -24%, 0) rotate(-6deg) scale3d(0.96, 0.96, 1);
        }
        32%, 68% {
          transform: translate3d(0, 8%, 0) rotate(6deg) scale3d(1.08, 0.94, 1);
        }
      }
      @keyframes propPinchHandSquish {
        0%, 100% {
          transform: translate3d(14%, 0, 0) rotate(6deg) scale3d(0.94, 0.94, 1);
        }
        38%, 72% {
          transform: translate3d(-10%, -4%, 0) rotate(-10deg) scale3d(1.14, 1.08, 1);
        }
      }
      .prop-feed-spoon {
        right: -14%;
        bottom: -6%;
        animation: propFeedSpoonGlide 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards;
      }
      .prop-eat-bite {
        right: -6%;
        bottom: 2%;
        animation: propEatBiteMunch 1.1s ease-in-out var(--emoji-loops, 2) forwards;
      }
      .prop-listen-ear {
        right: -18%;
        top: 22%;
        animation: propListenEarCup 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards;
      }
      .prop-offer-spoon {
        right: -16%;
        bottom: -4%;
        animation: propOfferSpoonReach 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards;
      }
      .prop-pat-hand {
        top: -18%;
        left: 24%;
        animation: propPatHandStroke 1.1s ease-in-out var(--emoji-loops, 2) forwards;
      }
      .prop-pinch-hand {
        right: -16%;
        bottom: 12%;
        animation: propPinchHandSquish 1.15s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards;
      }

      /* 12. Subtle Natural Head Micro-Posture (No violent shaking — lets facial expressions shine) */
      @keyframes emojiLaughShake {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale3d(1, 1, 1); }
        25% { transform: translate3d(0, -1.5px, 0) rotate(-3deg) scale3d(1.04, 1.04, 1); }
        50% { transform: translate3d(0, 0.5px, 0) rotate(3deg) scale3d(1.02, 1.02, 1); }
        75% { transform: translate3d(0, -1px, 0) rotate(-2deg) scale3d(1.04, 1.04, 1); }
      }
      @keyframes emojiKissPulse {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg); }
        38% { transform: translate3d(1px, -1px, 0) scale3d(1.06, 1.06, 1) rotate(-4deg); }
        72% { transform: translate3d(0, 0, 0) scale3d(0.98, 0.98, 1) rotate(2deg); }
      }
      @keyframes emojiAngryTremor {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
        25% { transform: translate3d(-1px, 0.5px, 0) rotate(-2deg) scale3d(1.05, 1.05, 1); }
        50% { transform: translate3d(1px, 0.5px, 0) rotate(2deg) scale3d(1.05, 1.05, 1); }
        75% { transform: translate3d(-1px, 0, 0) rotate(-1.5deg) scale3d(1.03, 1.03, 1); }
      }
      @keyframes emojiCrySway {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale3d(1, 1, 1); }
        50% { transform: translate3d(0, 1.5px, 0) rotate(-2deg) scale3d(0.98, 0.98, 1); }
      }
      @keyframes emojiLoveBeat {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
        32% { transform: translate3d(0, -1px, 0) scale3d(1.07, 1.07, 1); }
        55% { transform: translate3d(0, 0, 0) scale3d(1.02, 1.02, 1); }
      }
      /* Relative Hug Choreography */
      @keyframes hugDriftLeft {
        0% { transform: translate3d(-24px, 0, 0) scale3d(0.9, 0.9, 1) rotate(-9deg); opacity: 0.85; }
        22% { transform: translate3d(-3px, 0, 0) scale3d(1.05, 1.05, 1) rotate(-3deg); opacity: 1; }
        35% { transform: translate3d(0px, 0, 0) scale3d(1.02, 1.02, 1) rotate(2deg); }
        52% { transform: translate3d(2px, 0, 0) scale3d(1.06, 1.06, 1) rotate(0deg); }
        74% { transform: translate3d(1px, 0, 0) scale3d(1.03, 1.03, 1) rotate(-1deg); }
        88% { transform: translate3d(0px, 0, 0) scale3d(1, 1, 1) rotate(0deg); opacity: 1; }
        100% { transform: translate3d(0px, 0, 0) scale3d(1, 1, 1) rotate(0deg); opacity: 1; }
      }
      @keyframes hugDriftRight {
        0% { transform: translate3d(24px, 0, 0) scale3d(0.9, 0.9, 1) rotate(9deg); opacity: 0.85; }
        22% { transform: translate3d(3px, 0, 0) scale3d(1.05, 1.05, 1) rotate(3deg); opacity: 1; }
        35% { transform: translate3d(0px, 0, 0) scale3d(1.02, 1.02, 1) rotate(-2deg); }
        52% { transform: translate3d(-2px, 0, 0) scale3d(1.06, 1.06, 1) rotate(0deg); }
        74% { transform: translate3d(-1px, 0, 0) scale3d(1.03, 1.03, 1) rotate(1deg); }
        86% { transform: translate3d(0px, 0, 0) scale3d(0.98, 0.98, 1) rotate(0deg); opacity: 0.85; }
        100% { transform: translate3d(0px, 0, 0) scale3d(0.94, 0.94, 1) rotate(0deg); opacity: 0; }
      }
      @keyframes hugCalmAura {
        0% { opacity: 0; transform: translate3d(0, 0, 0) scale3d(0.6, 0.6, 1); }
        25% { opacity: 0.85; transform: translate3d(0, 0, 0) scale3d(1.28, 1.28, 1); }
        65% { opacity: 0.6; transform: translate3d(0, 0, 0) scale3d(1.16, 1.16, 1); }
        100% { opacity: 0; transform: translate3d(0, 0, 0) scale3d(1.38, 1.38, 1); }
      }
      @keyframes emojiPleadQuiver {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg); }
        30% { transform: translate3d(0, -1px, 0) scale3d(1.04, 1.04, 1) rotate(-1.5deg); }
        65% { transform: translate3d(0, -1px, 0) scale3d(1.04, 1.04, 1) rotate(1.5deg); }
      }
      @keyframes emojiBlushGlow {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg); }
        45% { transform: translate3d(0, 1px, 0) scale3d(1.04, 1.04, 1) rotate(-2deg); }
      }
      @keyframes emojiThinkTap {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale3d(1, 1, 1); }
        40%, 70% { transform: translate3d(0, -1px, 0) rotate(-3.5deg) scale3d(1.04, 1.04, 1); }
      }
      @keyframes emojiCoolSwagger {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale3d(1, 1, 1); }
        35% { transform: translate3d(0, -1.5px, 0) rotate(-2.5deg) scale3d(1.05, 1.05, 1); }
        70% { transform: translate3d(0, 0, 0) rotate(1.5deg) scale3d(1.02, 1.02, 1); }
      }
      @keyframes emojiSleepyBreathe {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg); }
        50% { transform: translate3d(0, 1px, 0) scale3d(1.05, 1.05, 1) rotate(2deg); }
      }
      @keyframes emojiFireFlare {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
        35% { transform: translate3d(0, -2px, 0) scale3d(1.09, 1.09, 1) rotate(-2deg); }
        70% { transform: translate3d(0, -1px, 0) scale3d(1.06, 1.06, 1) rotate(2deg); }
      }
      @keyframes emojiShockPop {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
        28% { transform: translate3d(0, -2px, 0) scale3d(1.09, 1.12, 1); }
        65% { transform: translate3d(0, -1px, 0) scale3d(1.04, 1.05, 1); }
      }
      @keyframes emojiSweatNervous {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg); }
        35% { transform: translate3d(0, -1px, 0) scale3d(1.03, 1.03, 1) rotate(-2deg); }
        70% { transform: translate3d(0, 0.5px, 0) scale3d(0.99, 0.99, 1) rotate(1.5deg); }
      }
      @keyframes emojiMeltSlump {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
        50% { transform: translate3d(0, 2.5px, 0) scale3d(1.1, 0.88, 1); }
      }
      @keyframes emojiSickRetch {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg); }
        35% { transform: translate3d(0, -1px, 0) scale3d(1.05, 1.05, 1) rotate(-3deg); }
        70% { transform: translate3d(0, 1px, 0) scale3d(0.97, 0.97, 1) rotate(2deg); }
      }
      @keyframes emojiSaluteSnap {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg); }
        30% { transform: translate3d(0, -2px, 0) scale3d(1.06, 1.06, 1) rotate(1.5deg); }
      }
      @keyframes emojiClownHonk {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg); }
        30% { transform: translate3d(0, -1px, 0) scale3d(1.08, 0.94, 1) rotate(-4deg); }
        65% { transform: translate3d(0, 1px, 0) scale3d(0.95, 1.06, 1) rotate(4deg); }
      }
      @keyframes emojiFacepalmRecoil {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale3d(1, 1, 1); }
        40% { transform: translate3d(0, 1px, 0) rotate(-5deg) scale3d(1.04, 1.04, 1); }
      }
      @keyframes emojiCraveDrool {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg); }
        45% { transform: translate3d(0, 1px, 0) scale3d(1.05, 1.05, 1) rotate(3deg); }
      }
      @keyframes emojiToastClink {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg); }
        35% { transform: translate3d(0, -2px, 0) scale3d(1.08, 1.08, 1) rotate(-5deg); }
        65% { transform: translate3d(0, -3px, 0) scale3d(1.12, 1.12, 1) rotate(5deg); }
      }
      @keyframes emojiHugSqueeze {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
        40% { transform: translate3d(0, -1px, 0) scale3d(1.06, 1.06, 1); }
      }
      @keyframes emojiSadDroop {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale3d(1, 1, 1); }
        35% { transform: translate3d(0, 2px, 0) rotate(-3deg) scale3d(0.97, 0.95, 1); }
        70% { transform: translate3d(0, 2.5px, 0) rotate(2deg) scale3d(0.96, 0.94, 1); }
      }
      @keyframes emojiFearShiver {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
        20% { transform: translate3d(-1.5px, -1px, 0) rotate(-2.5deg) scale3d(1.05, 1.07, 1); }
        40% { transform: translate3d(1.5px, -1px, 0) rotate(2.5deg) scale3d(1.05, 1.07, 1); }
        60% { transform: translate3d(-1px, 0, 0) rotate(-1.5deg) scale3d(1.03, 1.04, 1); }
        80% { transform: translate3d(1px, 0, 0) rotate(1.5deg) scale3d(1.02, 1.02, 1); }
      }
      @keyframes emojiSighExhale {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale3d(1, 1, 1); }
        30% { transform: translate3d(0, -1.5px, 0) rotate(2deg) scale3d(1.04, 1.05, 1); }
        75% { transform: translate3d(1px, 2px, 0) rotate(-3deg) scale3d(0.98, 0.95, 1); }
      }
      @keyframes emojiDizzyWobble {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale3d(1, 1, 1); }
        25% { transform: translate3d(-2px, -1px, 0) rotate(-6deg) scale3d(1.04, 0.97, 1); }
        50% { transform: translate3d(0, 1px, 0) rotate(0deg) scale3d(0.97, 1.04, 1); }
        75% { transform: translate3d(2px, -1px, 0) rotate(6deg) scale3d(1.04, 0.97, 1); }
      }
      @keyframes emojiFreezeChatter {
        0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
        15%, 45%, 75% { transform: translate3d(-1.5px, 0, 0) scale3d(0.98, 1.02, 1); }
        30%, 60%, 90% { transform: translate3d(1.5px, 0, 0) scale3d(0.98, 1.02, 1); }
      }

      .anim-emoji-laugh { animation: emojiLaughShake 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-kiss { animation: emojiKissPulse 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-angry { animation: emojiAngryTremor 0.85s cubic-bezier(0.36, 0.07, 0.19, 0.97) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-cry { animation: emojiCrySway 1.45s cubic-bezier(0.45, 0, 0.55, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-sad { animation: emojiSadDroop 1.35s cubic-bezier(0.45, 0, 0.55, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-fear { animation: emojiFearShiver 0.95s cubic-bezier(0.36, 0.07, 0.19, 0.97) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-sigh { animation: emojiSighExhale 1.35s cubic-bezier(0.45, 0, 0.55, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-dizzy { animation: emojiDizzyWobble 1.15s cubic-bezier(0.45, 0, 0.55, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-freeze { animation: emojiFreezeChatter 0.85s ease-in-out var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-love { animation: emojiLoveBeat 1.15s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-fire { animation: emojiFireFlare 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-party { animation: emojiLaughShake 1.05s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-thumbs { animation: emojiKissPulse 1.05s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 1) forwards; cursor: pointer; }
      .anim-emoji-shock { animation: emojiShockPop 1.05s cubic-bezier(0.18, 0.89, 0.32, 1.28) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-wink { animation: emojiKissPulse 1.15s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-float { animation: emojiCrySway 1.2s cubic-bezier(0.45, 0, 0.55, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-plead { animation: emojiPleadQuiver 1.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-blush { animation: emojiBlushGlow 1.4s cubic-bezier(0.45, 0, 0.55, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-think { animation: emojiThinkTap 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-cool { animation: emojiCoolSwagger 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-sleepy { animation: emojiSleepyBreathe 2.1s cubic-bezier(0.45, 0, 0.55, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-sweat { animation: emojiSweatNervous 1.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-melt { animation: emojiMeltSlump 1.75s cubic-bezier(0.45, 0, 0.55, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-sick { animation: emojiSickRetch 1.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-salute { animation: emojiSaluteSnap 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-clown { animation: emojiClownHonk 1.05s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-facepalm { animation: emojiFacepalmRecoil 1.15s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-crave { animation: emojiCraveDrool 1.25s cubic-bezier(0.45, 0, 0.55, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-toast { animation: emojiToastClink 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .anim-emoji-hug { animation: emojiHugSqueeze 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--emoji-loops, 2) forwards; cursor: pointer; }
      .relative-hug-container {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        margin: 0 4px;
        cursor: pointer;
        contain: layout style;
      }
      .relative-hug-container .hug-aura {
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(251, 146, 60, 0.45) 0%, rgba(244, 114, 182, 0.3) 50%, transparent 75%);
        animation: hugCalmAura 3.2s ease-in-out var(--emoji-loops, 1) forwards;
        pointer-events: none;
        will-change: transform, opacity;
        transform: translate3d(0, 0, 0);
      }
      .relative-hug-container .hug-partner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        will-change: transform, opacity;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
      }
      .relative-hug-container .hug-partner-left {
        left: 0;
        animation: hugDriftLeft 3.2s cubic-bezier(0.25, 1, 0.5, 1) var(--emoji-loops, 1) forwards;
        z-index: 2;
      }
      .relative-hug-container .hug-partner-right {
        right: 0;
        animation: hugDriftRight 3.2s cubic-bezier(0.25, 1, 0.5, 1) var(--emoji-loops, 1) forwards;
        z-index: 1;
      }

      .bubble-react-laugh { animation: emojiLaughShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2; will-change: transform; }
      .bubble-react-angry { animation: emojiAngryTremor 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3; box-shadow: 0 0 18px rgba(239, 68, 68, 0.45) !important; will-change: transform; }
      .bubble-react-kiss { animation: emojiLoveBeat 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2; box-shadow: 0 0 18px rgba(244, 63, 94, 0.45) !important; will-change: transform; }
      .bubble-react-sad { animation: emojiSadDroop 0.8s cubic-bezier(0.45, 0, 0.55, 1) 2; box-shadow: 0 0 18px rgba(59, 130, 246, 0.38) !important; will-change: transform; }
      .bubble-react-shock { animation: emojiFearShiver 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2; box-shadow: 0 0 18px rgba(56, 189, 248, 0.4) !important; will-change: transform; }

      .reaction-picker {
        display: none;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: max-content !important;
        max-width: calc(100vw - 20px) !important;
        white-space: nowrap !important;
        gap: 4px !important;
        padding: 5px 8px !important;
        border-radius: 999px !important;
        background: rgba(18, 21, 30, 0.96) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65) !important;
        z-index: 160 !important;
      }
      .picker-emoji {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0 !important;
        will-change: transform;
        transform: translate3d(0, 0, 0);
        transition: transform 0.16s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.15s ease !important;
      }
      .picker-emoji:hover {
        transform: translate3d(0, -3px, 0) scale3d(1.26, 1.26, 1) !important;
      }