/* Slime Character Styles */
.slime-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.slime-wrapper {
    position: absolute;
    pointer-events: auto;
}

.slime {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: linear-gradient(135deg, #4ade80, #22c55e, #16a34a);
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(74, 222, 128, 0.4),
        0 0 40px rgba(74, 222, 128, 0.2),
        0 0 60px rgba(74, 222, 128, 0.1);
    transition: all 0.3s linear, transform 0.15s ease-out;
    cursor: grab;
    pointer-events: auto;
    animation: slimeGlow 3s ease-in-out infinite alternate;
}

.slime:hover {
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 30px rgba(74, 222, 128, 0.6),
        0 0 60px rgba(74, 222, 128, 0.3),
        0 0 90px rgba(74, 222, 128, 0.2);
    transform: scale(1.05);
}

.slime.dragging {
    cursor: grabbing;
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 40px rgba(74, 222, 128, 0.8),
        0 0 80px rgba(74, 222, 128, 0.4),
        0 0 120px rgba(74, 222, 128, 0.3);
    /* Don't override transform - let the walking animation continue */
}

/* Mata kiri */
.slime .eye-left {
    content: '';
    position: absolute;
    top: 20px;
    left: 16px;
    width: 12px;
    height: 12px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: none;
}

/* Mata kanan */
.slime .eye-right {
    content: '^^';
    position: absolute;
    top: 20px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: none;
}

.slime:active {
    /* Disabled zoom/scale effect on click */
    transform: none;
    transition: none;
}

.slime[style*="cursor: grabbing"] {
    /* Disabled grabbing effects - no scaling, no yellow glow */
    transform: none;
    box-shadow: none;
}

.slime.interacting {
    animation: slimeInteract 0.5s linear;
}

.slime.jumping {
    animation: slimeJump 0.8s linear;
}

.slime.squishing {
    animation: slimeSquish 0.3s linear;
}

.slime.trail {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    animation: slimeTrail 1s linear forwards;
}

@keyframes slimeInteract {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1); /* Disabled scaling - keep original size */
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slimeJump {
    0% {
        transform: translateY(0px) scale(1);
    }
    25% {
        transform: translateY(-30px) scale(0.9);
    }
    50% {
        transform: translateY(-40px) scale(1.1);
    }
    75% {
        transform: translateY(-20px) scale(0.95);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes slimeSquish {
    0% {
        transform: scale(1);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
    50% {
        transform: scale(1); /* Disabled scaling - keep original size */
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* Keep original border radius */
    }
    100% {
        transform: scale(1);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
}

@keyframes slimeTrail {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(0.5);
    }
}

/* Interactive elements highlight */
.interactive-element {
    transition: all 0.3s linear;
    position: relative;
    z-index: 1;
}

.interactive-element:hover {
    /* Disabled hover effects - no scaling */
    transform: none;
    z-index: 1;
}

.interactive-element:hover::after {
    /* Hapus aura hijau */
    display: none;
}

@keyframes slimePulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1); /* Disabled scaling - keep original size */
    }
}

.slime-attracted {
    animation: slimeAttract 0.5s linear;
}

@keyframes slimeAttract {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1); /* Disabled scaling - keep original size */
        box-shadow: none;
    }
    100% {
        transform: scale(1);
    }
}

/* Slime personality states */
.slime.curious {
    background: linear-gradient(135deg, #34d399, #10b981, #059669);
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 25px rgba(52, 211, 153, 0.5),
        0 0 50px rgba(52, 211, 153, 0.3),
        0 0 75px rgba(52, 211, 153, 0.2);
}

.slime.happy {
    background: linear-gradient(135deg, #34d399, #10b981, #059669);
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 25px rgba(52, 211, 153, 0.5),
        0 0 50px rgba(52, 211, 153, 0.3),
        0 0 75px rgba(52, 211, 153, 0.2);
}

.slime.excited {
    background: linear-gradient(135deg, #f87171, #ef4444, #dc2626);
    animation: slimeExcited 0.8s ease-in-out infinite;
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 30px rgba(239, 68, 68, 0.7),
        0 0 60px rgba(239, 68, 68, 0.4),
        0 0 90px rgba(239, 68, 68, 0.3);
}

.slime.sleepy {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6, #7c3aed);
    animation: slimeSleep 4s linear infinite;
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(167, 139, 250, 0.4),
        0 0 40px rgba(167, 139, 250, 0.2),
        0 0 60px rgba(167, 139, 250, 0.1);
}

.slime.angry {
    background: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c);
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 25px rgba(239, 68, 68, 0.6),
        0 0 50px rgba(239, 68, 68, 0.3),
        0 0 75px rgba(239, 68, 68, 0.2);
}

.slime.surprised {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    animation: slimeSurprised 0.5s ease-in-out;
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 25px rgba(251, 191, 36, 0.5),
        0 0 50px rgba(251, 191, 36, 0.3),
        0 0 75px rgba(251, 191, 36, 0.2);
}

.slime.confused {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 25px rgba(139, 92, 246, 0.5),
        0 0 50px rgba(139, 92, 246, 0.3),
        0 0 75px rgba(139, 92, 246, 0.2);
}

.slime.love {
    background: linear-gradient(135deg, #ec4899, #db2777, #be185d);
    animation: slimeLove 2s ease-in-out infinite;
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 25px rgba(236, 72, 153, 0.5),
        0 0 50px rgba(236, 72, 153, 0.3),
        0 0 75px rgba(236, 72, 153, 0.2);
}

.slime.shine {
    background: linear-gradient(135deg, #ffd700, #ff8c00, #ff6b35);
    animation: slimeShine 1.5s ease-in-out infinite;
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.4),
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 60px rgba(255, 140, 0, 0.6),
        0 0 90px rgba(255, 107, 53, 0.4);
}

.slime.calm_evening {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6, #7c3aed);
    animation: slimeCalmEvening 4s ease-in-out infinite;
    box-shadow: 
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),
        inset 0 4px 8px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(167, 139, 250, 0.4),
        0 0 40px rgba(139, 92, 246, 0.2),
        0 0 60px rgba(124, 58, 237, 0.1);
}

@keyframes slimeSleep {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-2px) scale(1); /* Disabled scaling - keep original size */
        opacity: 1;
    }
}

@keyframes slimeSurprised {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1); /* Disabled scaling - keep original size */
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slimeLove {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1); /* Disabled scaling - keep original size */
    }
}

@keyframes slimeShine {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            inset 0 -4px 8px rgba(0, 0, 0, 0.1),
            inset 0 4px 8px rgba(255, 255, 255, 0.4),
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 60px rgba(255, 140, 0, 0.6),
            0 0 90px rgba(255, 107, 53, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            inset 0 -4px 8px rgba(0, 0, 0, 0.1),
            inset 0 4px 8px rgba(255, 255, 255, 0.5),
            0 0 40px rgba(255, 215, 0, 1),
            0 0 80px rgba(255, 140, 0, 0.8),
            0 0 120px rgba(255, 107, 53, 0.6);
    }
}

@keyframes slimeCalmEvening {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-3px) scale(1.02);
        opacity: 1;
    }
}

@keyframes slimeExcited {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
    }
    25% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 25px rgba(239, 68, 68, 1);
    }
    75% {
        transform: scale(1.03);
        box-shadow: 0 0 18px rgba(239, 68, 68, 0.7);
    }
}

@keyframes dialogExcited {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    25% {
        transform: translateY(-2px) scale(1.02);
    }
    50% {
        transform: translateY(-1px) scale(1.01);
    }
    75% {
        transform: translateY(-3px) scale(1.03);
    }
}

@keyframes dialogShine {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 
            0 0 0 1px #ffffff,
            0 0 0 3px #ffd700,
            0 3px 12px rgba(255, 215, 0, 0.3);
    }
    50% {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 
            0 0 0 1px #ffffff,
            0 0 0 3px #ffd700,
            0 3px 15px rgba(255, 215, 0, 0.6),
            0 0 20px rgba(255, 215, 0, 0.3);
    }
}

/* Responsive slime */
@media (max-width: 768px) {
    .slime {
        width: 50px;
        height: 50px;
        cursor: grab;
        touch-action: none; /* Prevent default touch behaviors */
    }
    
    .slime .eye-left {
        top: 16px;
        left: 12px;
        width: 10px;
        height: 10px;
        font-size: 12px;
    }
    
    .slime .eye-right {
        top: 16px;
        right: 12px;
        width: 10px;
        height: 10px;
        font-size: 12px;
    }
    
    .slime.dragging {
        cursor: grabbing;
        /* Don't override transform - let the walking animation continue */
    }
}

/* Slime glow effect */
.slime::before,
.slime::after {
    animation: slimeGlow 2s ease-in-out infinite alternate;
}

@keyframes slimeGlow {
    0% {
        box-shadow: 
            inset 0 -4px 8px rgba(0, 0, 0, 0.1),
            inset 0 4px 8px rgba(255, 255, 255, 0.3),
            0 0 20px rgba(74, 222, 128, 0.4),
            0 0 40px rgba(74, 222, 128, 0.2),
            0 0 60px rgba(74, 222, 128, 0.1);
    }
    100% {
        box-shadow: 
            inset 0 -4px 8px rgba(0, 0, 0, 0.1),
            inset 0 4px 8px rgba(255, 255, 255, 0.3),
            0 0 30px rgba(74, 222, 128, 0.6),
            0 0 60px rgba(74, 222, 128, 0.3),
            0 0 90px rgba(74, 222, 128, 0.2);
    }
}

/* Slime bounce effect for interactive elements - DISABLED */
.interactive-element:hover .slime {
    /* Disabled hover bounce effect */
    animation: none;
}

@keyframes slimeBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Slime particle effects */
.slime-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    pointer-events: none;
    animation: slimeParticle 1s linear forwards;
}

@keyframes slimeParticle {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0) translateY(-20px);
    }
}

/* Slime dialog chat - redesigned untuk lebih lucu dan kecil */
.slime-dialog {
    border: none !important;
    position: absolute;
    min-width: 80px;
    word-break: break-word;
    padding: 8px 14px 10px 14px;
    border-radius: 12px 12px 16px 16px/12px 12px 20px 20px;
    font-size: 0.92rem;
    font-family: 'Quicksand', 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    box-shadow: 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08);
    background: linear-gradient(135deg, #fff 80%, #e0ffe7 100%);
    color: #333;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px) scale(0.7) rotate(-2deg);
    transition: opacity 0.22s, transform 0.22s;
    animation: dialogBounce 0.6s cubic-bezier(.68,-0.55,.27,1.55) 1;
    border: 2.5px solid #a7f3d0;
    filter: drop-shadow(0 0 8px #bbf7d0);
    letter-spacing: 0.01em;
    user-select: none;
    overflow: visible;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

#slimeDialog,
#slimeDialog:focus,
#slimeDialog:active,
#slimeDialog:focus-visible,
.slime-dialog,
.slime-dialog:focus,
.slime-dialog:active,
.slime-dialog:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.slime-dialog.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1) rotate(0deg);
}

.slime-dialog.show {
    outline-width: 4px !important;
    outline-style: solid !important;
    outline-offset: 3px !important;
    outline-color: #4ade80 !important; /* default, akan di override oleh mood */
    box-shadow: 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.slime-dialog.show.happy {
    box-shadow: 0 0 0 5px #bbf7d0, 0 0 16px 2px #4ade80, 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}
.slime-dialog.show.angry {
    box-shadow: 0 0 0 5px #fecaca, 0 0 16px 2px #fca5a5, 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}
.slime-dialog.show.confused {
    box-shadow: 0 0 0 5px #ddd6fe, 0 0 16px 2px #c4b5fd, 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}
.slime-dialog.show.love {
    box-shadow: 0 0 0 5px #fbcfe8, 0 0 16px 2px #f9a8d4, 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}
.slime-dialog.show.surprised {
    box-shadow: 0 0 0 5px #fef9c3, 0 0 16px 2px #fde68a, 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}
.slime-dialog.show.sleepy {
    box-shadow: 0 0 0 5px #dbeafe, 0 0 16px 2px #a5b4fc, 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}
.slime-dialog.show.excited {
    box-shadow: 0 0 0 5px #fef3c7, 0 0 16px 2px #fdba74, 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}
.slime-dialog.show.curious {
    box-shadow: 0 0 0 5px #bae6fd, 0 0 16px 2px #93c5fd, 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}
.slime-dialog.show.shine {
    box-shadow: 0 0 0 5px #fef9c3, 0 0 16px 2px #fef08a, 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}
.slime-dialog.show.calm_evening {
    box-shadow: 0 0 0 5px #dbeafe, 0 0 16px 2px #a5b4fc, 0 6px 32px 0 rgba(74,222,128,0.10), 0 2px 8px rgba(0,0,0,0.08) !important;
}

@keyframes dialogBounce {
    0% {
        transform: translateY(18px) scale(0.7) rotate(-2deg);
        opacity: 0;
    }
    60% {
        transform: translateY(-10px) scale(1.12) rotate(2deg);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Bubble effect */
.slime-dialog::after {
    content: '✨';
    position: absolute;
    top: -18px;
    right: -10px;
    font-size: 1.3em;
    opacity: 0.7;
    pointer-events: none;
    animation: dialogBubblePop 2.2s infinite alternate;
}

@keyframes dialogBubblePop {
    0% { transform: scale(1) rotate(-10deg); opacity: 0.7; }
    60% { transform: scale(1.18) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(-10deg); opacity: 0.7; }
}

/* Mood modifiers: warna pastel dan border lucu */
.slime-dialog.happy,
.slime-dialog.angry,
.slime-dialog.confused,
.slime-dialog.love,
.slime-dialog.surprised,
.slime-dialog.sleepy,
.slime-dialog.excited,
.slime-dialog.curious,
.slime-dialog.shine,
.slime-dialog.calm_evening {
    border: none;
}

/* Dialog arrow (tail) lucu */
.slime-dialog::before {
    content: '';
    position: absolute;
    left: 24px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #a7f3d0;
    bottom: -12px;
    filter: drop-shadow(0 2px 2px #bbf7d0);
}
.slime-dialog.happy::before    { border-top-color: #4ade80; }
.slime-dialog.angry::before    { border-top-color: #fca5a5; }
.slime-dialog.confused::before { border-top-color: #c4b5fd; }
.slime-dialog.love::before     { border-top-color: #f9a8d4; }
.slime-dialog.surprised::before{ border-top-color: #fde68a; }
.slime-dialog.sleepy::before   { border-top-color: #a5b4fc; }
.slime-dialog.excited::before  { border-top-color: #fdba74; }
.slime-dialog.curious::before  { border-top-color: #93c5fd; }
.slime-dialog.shine::before    { border-top-color: #fef08a; }
.slime-dialog.calm_evening::before { border-top-color: #a5b4fc; }

/* Tambahan: bubble kecil di sekitar dialog */
.slime-dialog.show::before {
    animation: dialogBubbleWiggle 1.2s infinite alternate;
}
@keyframes dialogBubbleWiggle {
    0% { left: 24px; }
    100% { left: 28px; }
}

/* Grouped personality styles for cleaner code */
.slime-dialog.happy,
.slime-dialog.excited,
.slime-dialog.curious,
.slime-dialog.sleepy,
.slime-dialog.angry,
.slime-dialog.surprised,
.slime-dialog.confused,
.slime-dialog.love,
.slime-dialog.shine,
.slime-dialog.calm_evening {
    background: #ffffff;
    color: #333333;
}


.slime-dialog.excited {
    border: 2px solid #f59e0b; /* Reduced from 3px */
    box-shadow: 
        0 0 0 1px #ffffff,
        0 0 0 3px #f59e0b, /* Reduced from 4px */
        0 3px 12px rgba(245, 158, 11, 0.2); /* Reduced shadow */
    animation: dialogExcited 0.6s ease-in-out infinite;
}

.slime-dialog.curious {
    border: 2px solid #3b82f6; /* Reduced from 3px */
    box-shadow: 
        0 0 0 1px #ffffff,
        0 0 0 3px #3b82f6, /* Reduced from 4px */
        0 3px 12px rgba(59, 130, 246, 0.2); /* Reduced shadow */
}

.slime-dialog.sleepy {
    border: 2px solid #8b5cf6; /* Reduced from 3px */
    box-shadow: 
        0 0 0 1px #ffffff,
        0 0 0 3px #8b5cf6, /* Reduced from 4px */
        0 3px 12px rgba(139, 92, 246, 0.2); /* Reduced shadow */
}

.slime-dialog.angry {
    border: 2px solid #ef4444; /* Reduced from 3px */
    box-shadow: 
        0 0 0 1px #ffffff,
        0 0 0 3px #ef4444, /* Reduced from 4px */
        0 3px 12px rgba(239, 68, 68, 0.2); /* Reduced shadow */
}

.slime-dialog.surprised {
    border: 2px solid #fbbf24; /* Reduced from 3px */
    box-shadow: 
        0 0 0 1px #ffffff,
        0 0 0 3px #fbbf24, /* Reduced from 4px */
        0 3px 12px rgba(251, 191, 36, 0.2); /* Reduced shadow */
}

.slime-dialog.confused {
    border: 2px solid #8b5cf6; /* Reduced from 3px */
    box-shadow: 
        0 0 0 1px #ffffff,
        0 0 0 3px #8b5cf6, /* Reduced from 4px */
        0 3px 12px rgba(139, 92, 246, 0.2); /* Reduced shadow */
}

.slime-dialog.love {
    border: 2px solid #ec4899; /* Reduced from 3px */
    box-shadow: 
        0 0 0 1px #ffffff,
        0 0 0 3px #ec4899, /* Reduced from 4px */
        0 3px 12px rgba(236, 72, 153, 0.2); /* Reduced shadow */
}

.slime-dialog.shine {
    border: 2px solid #ffd700; /* Reduced from 3px */
    box-shadow: 
        0 0 0 1px #ffffff,
        0 0 0 3px #ffd700, /* Reduced from 4px */
        0 3px 12px rgba(255, 215, 0, 0.3); /* Reduced shadow */
    animation: dialogShine 1.5s ease-in-out infinite;
}

.slime-dialog.calm_evening {
    border: 2px solid #8b5cf6; /* Reduced from 3px */
    box-shadow: 
        0 0 0 1px #ffffff,
        0 0 0 3px #8b5cf6, /* Reduced from 4px */
        0 3px 12px rgba(139, 92, 246, 0.2); /* Reduced shadow */
}

/* Dialog arrow personality states - dengan warna sesuai personality */
.slime-dialog.happy::before {
    border-top-color: #22c55e;
    border-left-width: 6px; /* Reduced from 8px */
    border-right-width: 6px; /* Reduced from 8px */
    border-top-width: 6px; /* Reduced from 8px */
    bottom: -6px; /* Reduced from -8px */
    left: 15px; /* Reduced from 20px */
}

.slime-dialog.happy::after {
    border-top-color: #ffffff;
    border-left-width: 4px; /* Reduced from 5px */
    border-right-width: 4px; /* Reduced from 5px */
    border-top-width: 4px; /* Reduced from 5px */
    bottom: -4px; /* Reduced from -5px */
    left: 15px; /* Reduced from 20px */
}

.slime-dialog.excited::before {
    border-top-color: #f59e0b;
    border-left-width: 6px; /* Reduced from 8px */
    border-right-width: 6px; /* Reduced from 8px */
    border-top-width: 6px; /* Reduced from 8px */
    bottom: -6px; /* Reduced from -8px */
    left: 15px; /* Reduced from 20px */
}

.slime-dialog.excited::after {
    border-top-color: #ffffff;
    border-left-width: 4px; /* Reduced from 5px */
    border-right-width: 4px; /* Reduced from 5px */
    border-top-width: 4px; /* Reduced from 5px */
    bottom: -4px; /* Reduced from -5px */
    left: 15px; /* Reduced from 20px */
}

.slime-dialog.curious::before {
    border-top-color: #3b82f6;
    border-left-width: 6px; /* Reduced from 8px */
    border-right-width: 6px; /* Reduced from 8px */
    border-top-width: 6px; /* Reduced from 8px */
    bottom: -6px; /* Reduced from -8px */
    left: 15px; /* Reduced from 20px */
}

.slime-dialog.curious::after {
    border-top-color: #ffffff;
    border-left-width: 4px; /* Reduced from 5px */
    border-right-width: 4px; /* Reduced from 5px */
    border-top-width: 4px; /* Reduced from 5px */
    bottom: -4px; /* Reduced from -5px */
    left: 15px; /* Reduced from 20px */
}

.slime-dialog.sleepy::before {
    border-top-color: #8b5cf6;
}

.slime-dialog.sleepy::after {
    border-top-color: #ffffff;
}

.slime-dialog.angry::before {
    border-top-color: #ef4444;
}

.slime-dialog.angry::after {
    border-top-color: #ffffff;
}

.slime-dialog.surprised::before {
    border-top-color: #fbbf24;
}

.slime-dialog.surprised::after {
    border-top-color: #ffffff;
}

.slime-dialog.confused::before {
    border-top-color: #8b5cf6;
}

.slime-dialog.confused::after {
    border-top-color: #ffffff;
}

.slime-dialog.love::before {
    border-top-color: #ec4899;
}

.slime-dialog.love::after {
    border-top-color: #ffffff;
}

.slime-dialog.shine::before {
    border-top-color: #ffd700;
}

.slime-dialog.shine::after {
    border-top-color: #ffffff;
}

.slime-dialog.calm_evening::before {
    border-top-color: #8b5cf6;
}

.slime-dialog.calm_evening::after {
    border-top-color: #ffffff;
}

/* Time-based dialog styles */
.slime-dialog.morning {
    background: linear-gradient(135deg, #fef3c7, #fde68a, #f59e0b);
    color: #92400e;
    border: 2px solid #f59e0b;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.slime-dialog.morning::before {
    border-bottom-color: #f59e0b;
}
.slime-dialog.morning::after {
    border-top-color: #f59e0b;
}

.slime-dialog.afternoon {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0, #22c55e);
    color: #166534;
    border: 2px solid #22c55e;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}
.slime-dialog.afternoon::before {
    border-bottom-color: #22c55e;
}
.slime-dialog.afternoon::after {
    border-top-color: #22c55e;
}

.slime-dialog.evening {
    background: linear-gradient(135deg, #fef3c7, #fde68a, #f59e0b);
    color: #92400e;
    border: 2px solid #f59e0b;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.slime-dialog.evening::before {
    border-bottom-color: #f59e0b;
}
.slime-dialog.evening::after {
    border-top-color: #f59e0b;
}

/* Particle effects */
.particle {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    height: 4px;
    animation: particleFloat 1s ease-out forwards;
    font-size: 12px;
    font-weight: bold;
}

.particle.heart {
    color: #ec4899;
    content: '♥';
}

.particle.star {
    color: #3b82f6;
    content: '★';
}

.particle.sparkle {
    color: #f6f03b;
    content: '✨';
}

.particle.bubble {
    color: #22c55e;
    content: '○';
}

@keyframes particleFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.5);
    }
}

/* Color absorption particles */
.color-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    animation: colorParticleFloat 2s ease-out forwards;
    box-shadow: 0 0 8px currentColor;
}

@keyframes colorParticleFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-50px) scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-120px) scale(0.3) rotate(360deg);
    }
}

.slime-dialog .color-swatch-suggestion {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    margin-left: 8px;
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.2s;
}

.slime-dialog .color-swatch-suggestion:hover {
    transform: scale(1.2);
} 

.slime-dialog::before,
.slime-dialog.happy::before,
.slime-dialog.angry::before,
.slime-dialog.confused::before,
.slime-dialog.love::before,
.slime-dialog.surprised::before,
.slime-dialog.sleepy::before,
.slime-dialog.excited::before,
.slime-dialog.curious::before,
.slime-dialog.shine::before,
.slime-dialog.calm_evening::before {
    border-top-color: #fff !important;
}