/**
 * Waply Animated Avatars CSS
 */

/* Section Title */
.waply-section-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Avatar Type Selector */
.waply-avatar-type-selector {
    display: flex;
    gap: 20px;
    margin: 20px 0 30px;
    flex-wrap: wrap;
}

.waply-avatar-type-option {
    flex: 1;
    min-width: 300px;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.waply-avatar-type-option:hover {
    border-color: #2271b1;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.waply-avatar-type-option.selected {
    border-color: #2271b1;
    background-color: #f0f7fc;
}

.waply-avatar-type-option label {
    display: block;
    cursor: pointer;
    margin: 0;
}

.waply-avatar-type-option input[type="radio"] {
    display: none;
}

.waply-avatar-type-content {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
    position: relative;
}

.waply-avatar-type-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.waply-avatar-type-info {
    flex: 1;
}

.waply-avatar-type-info h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.waply-avatar-type-info p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Avatar Grid */
.waply-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.waply-avatar-option {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
}

.waply-avatar-option:hover {
    border-color: #2271b1;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.waply-avatar-option.selected {
    border-color: #2271b1;
    background-color: #f0f7fc;
    position: relative;
}

.waply-avatar-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.waply-avatar-label {
    font-weight: 600;
    margin: 10px 0;
    text-align: center;
    color: #333;
    font-size: 14px;
}

/* Avatar Base Styles */
.waply-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--avatar-color, #25d366);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

/* Avatar Sizes */
.waply-avatar-small {
    width: 50px;
    height: 50px;
}

.waply-avatar-medium {
    width: 60px;
    height: 60px;
}

.waply-avatar-large {
    width: 70px;
    height: 70px;
}

/* Avatar Icons */
.waply-avatar::before {
    content: "";
    display: block;
    width: 50%;
    height: 50%;
    background-image: url('../img/whatsapp-icon-white.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Pulse Animation */
.waply-avatar-pulse {
    animation: waply-pulse 2s infinite ease-in-out;
}

@keyframes waply-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Bounce Animation */
.waply-avatar-bounce {
    animation: waply-bounce 2s infinite;
}

@keyframes waply-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Wave Animation */
.waply-avatar-wave::before {
    content: "👋";
    font-size: 30px;
    background-image: none;
    animation: waply-wave 2s infinite;
    transform-origin: 70% 70%;
}

@keyframes waply-wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Typing Animation */
.waply-avatar-typing::before {
    content: "";
    background-image: none;
}

.waply-avatar-typing::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 20%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    bottom: 15%;
    left: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.waply-avatar-typing::after {
    content: "...";
    color: var(--avatar-color, #25d366);
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    animation: waply-typing 1.5s infinite;
}

@keyframes waply-typing {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* Circle Animation */
.waply-avatar-circle {
    position: relative;
    overflow: hidden;
}

.waply-avatar-circle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: waply-circle 2s infinite ease-in-out;
}

@keyframes waply-circle {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Rotate Animation */
.waply-avatar-rotate {
    animation: waply-rotate 3s infinite linear;
}

@keyframes waply-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Shake Animation */
.waply-avatar-shake {
    animation: waply-shake 2s infinite;
}

@keyframes waply-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Slide Animation */
.waply-avatar-slide {
    animation: waply-slide 3s infinite ease-in-out;
}

@keyframes waply-slide {
    0% { transform: translateX(-15px); }
    50% { transform: translateX(15px); }
    100% { transform: translateX(-15px); }
}

/* Glow Animation */
.waply-avatar-glow {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    animation: waply-glow 2s infinite alternate;
}

@keyframes waply-glow {
    0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
    100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.3); }
}

/* Flip Animation */
.waply-avatar-flip {
    animation: waply-flip 2s infinite;
    transform-style: preserve-3d;
}

@keyframes waply-flip {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
}

/* Zoom Animation */
.waply-avatar-zoom {
    animation: waply-zoom 3s infinite ease-in-out;
}

@keyframes waply-zoom {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(0.8); }
    50% { transform: scale(1.2); }
    75% { transform: scale(0.9); }
}

/* Heartbeat Animation */
.waply-avatar-heartbeat {
    animation: waply-heartbeat 1.5s infinite;
}

@keyframes waply-heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

/* Blinking Icon Effect */
.waply-avatar-blink {
    animation: waply-blink 2s infinite;
}

@keyframes waply-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Floating Icon Effect */
.waply-avatar-float {
    animation: waply-float 3s infinite ease-in-out;
}

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

/* Save Button */
.waply-avatar-select-button {
    width: 100%;
    text-align: center;
    padding: 8px 15px !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-radius: 4px !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    background-color: #2271b1 !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.waply-avatar-select-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    background-color: #135e96 !important;
}

/* Avatar Settings */
.waply-avatar-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 20px 0;
}

.waply-avatar-setting {
    flex: 1;
    min-width: 200px;
}

.waply-avatar-setting label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.waply-avatar-setting label span {
    font-weight: 600;
    min-width: 100px;
}

.waply-avatar-setting input[type="color"] {
    width: 50px;
    height: 30px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.waply-avatar-setting select {
    min-width: 150px;
}

/* Selected Tick */
.waply-selected-tick {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-color: #2271b1;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 2px solid white;
}

.waply-selected-tick:before {
    content: "✓";
}

/* Frontend Styles */
.waply-avatar-container {
    position: fixed;
    z-index: 9999;
    cursor: pointer;
}

/* Character Avatars */
.waply-avatar-character {
    position: relative;
    overflow: visible;
}

.waply-avatar-character::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Customer Service Agent */
.waply-avatar-character-agent::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM296 336h-16V248C280 234.8 269.3 224 256 224H224C210.8 224 200 234.8 200 248S210.8 272 224 272h8v64h-16C202.8 336 192 346.8 192 360S202.8 384 216 384h80c13.25 0 24-10.75 24-24S309.3 336 296 336zM256 192c17.67 0 32-14.33 32-32c0-17.67-14.33-32-32-32S224 142.3 224 160C224 177.7 238.3 192 256 192z"/></svg>');
    animation: waply-bounce 2s infinite;
}

/* Friendly Robot */
.waply-avatar-character-robot::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="white" d="M320 0C285.9 0 258.8 27.13 258.8 60.5V144H128C92.65 144 64 172.6 64 208V416C64 451.3 92.65 480 128 480H512C547.3 480 576 451.3 576 416V208C576 172.6 547.3 144 512 144H381.3V60.5C381.3 27.13 354.1 0 320 0zM320 48C328.8 48 336 55.16 336 64V144H304V64C304 55.16 311.2 48 320 48zM192 288C192 270.3 206.3 256 224 256C241.7 256 256 270.3 256 288C256 305.7 241.7 320 224 320C206.3 320 192 305.7 192 288zM416 320C398.3 320 384 305.7 384 288C384 270.3 398.3 256 416 256C433.7 256 448 270.3 448 288C448 305.7 433.7 320 416 320zM160 368C160 359.2 167.2 352 176 352H464C472.8 352 480 359.2 480 368C480 376.8 472.8 384 464 384H176C167.2 384 160 376.8 160 368z"/></svg>');
    animation: waply-shake 2s infinite;
}

/* Cute Cat */
.waply-avatar-character-cat::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="white" d="M322.6 192C302.4 192 215.8 194 160 278V192c0-53-43-96-96-96C46.38 96 32 110.4 32 128s14.38 32 32 32s32 14.38 32 32v256c0 35.25 28.75 64 64 64h176c8.875 0 16-7.125 16-15.1V480c0-17.62-14.38-32-32-32h-32l128-96v144c0 8.875 7.125 16 16 16h32c8.875 0 16-7.125 16-16V289.9c-10.25 2.625-20.88 4.5-32 4.5C386.2 294.4 334.5 250.4 322.6 192zM480 96h-64l-64-64v134.4c0 53 43 95.1 96 95.1s96-42.1 96-95.1V32L480 96zM408 176c-8.875 0-16-7.125-16-16s7.125-16 16-16s16 7.125 16 16S416.9 176 408 176z"/></svg>');
    animation: waply-bounce 2s infinite;
}

/* Friendly Dog */
.waply-avatar-character-dog::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="white" d="M332.7 19.85C334.6 8.395 344.5 0 356.1 0C363.6 0 370.6 3.52 375.1 9.502L392 32H444.1C456.8 32 469.1 37.06 478.1 46.06L496 64H552C565.3 64 576 74.75 576 88V112C576 156.2 540.2 192 496 192H426.7L421.6 222.5L309.6 158.5L332.7 19.85zM448 64C439.2 64 432 71.16 432 80C432 88.84 439.2 96 448 96C456.8 96 464 88.84 464 80C464 71.16 456.8 64 448 64zM416 256.1V480C416 497.7 401.7 512 384 512H352C334.3 512 320 497.7 320 480V364.8C295.1 377.1 268.8 384 240 384C211.2 384 184 377.1 160 364.8V480C160 497.7 145.7 512 128 512H96C78.33 512 64 497.7 64 480V249.8C35.23 238.9 12.64 214.5 4.836 183.3L.9558 167.8C-3.331 150.6 7.094 133.2 24.24 128.1C41.38 124.7 58.76 135.1 63.05 152.2L66.93 167.8C70.49 182 83.29 191.1 97.97 191.1H303.8L416 256.1z"/></svg>');
    animation: waply-shake 2s infinite;
}

/* Wise Owl */
.waply-avatar-character-owl::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM208 160c-17.69 0-32 14.31-32 32s14.31 32 32 32s32-14.31 32-32S225.7 160 208 160zM304 160c-17.69 0-32 14.31-32 32s14.31 32 32 32s32-14.31 32-32S321.7 160 304 160zM256 248C207.4 248 168 287.4 168 336c0 13.25 10.75 24 24 24S216 349.3 216 336c0-22.06 17.94-40 40-40s40 17.94 40 40c0 13.25 10.75 24 24 24s24-10.75 24-24C344 287.4 304.6 248 256 248z"/></svg>');
    animation: waply-rotate 5s infinite linear;
}

/* Cool Penguin */
.waply-avatar-character-penguin::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M368.4 18.34C390.3-3.526 425.7-3.526 447.6 18.34L493.7 64.4C515.5 86.27 515.5 121.7 493.7 143.6L368.4 268.9C346.5 290.7 311.1 290.7 289.3 268.9L243.2 222.8C221.3 200.9 221.3 165.5 243.2 143.6L368.4 18.34zM429.9 35.98C419.4 25.52 402.6 25.52 392.1 35.98L266.9 161.3C256.4 171.7 256.4 188.5 266.9 198.1L313 245.1C323.5 255.5 340.3 255.5 350.7 245.1L475.1 119.8C486.5 109.4 486.5 92.58 475.1 82.12L429.9 35.98zM255.1 245.1L175.1 325.1L111.1 289.1L47.19 254.9C35.3 249.4 21.5 254.9 16 266.8C10.5 278.7 16 292.5 27.88 297.1L95.1 334.5V434.3C95.1 441.6 99.88 448.5 106.4 451.8L213.9 499.9C218.6 501.9 223.8 502.2 228.7 500.8L344.3 461.9C350.5 459.6 354.7 453.8 355.1 447.2L362.8 326.1L423.8 265.1C408.3 285.2 384.1 295.9 359.7 295.9C335.2 295.9 310.1 285.2 295.5 265.1L255.1 245.1zM255.1 378.4V432.9L176.1 392.9V359.7L255.1 378.4z"/></svg>');
    animation: waply-slide 3s infinite ease-in-out;
}

/* Smart Fox */
.waply-avatar-character-fox::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M0 96C0 60.65 28.65 32 64 32H448C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96zM64 416H224V160H64V416zM448 160H288V416H448V160z"/></svg>');
    animation: waply-flip 2s infinite;
}

/* Happy Panda */
.waply-avatar-character-panda::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM208 160c-17.69 0-32 14.31-32 32s14.31 32 32 32s32-14.31 32-32S225.7 160 208 160zM304 160c-17.69 0-32 14.31-32 32s14.31 32 32 32s32-14.31 32-32S321.7 160 304 160zM208 320h96c13.25 0 24-10.75 24-24c0-13.26-10.75-24-24-24h-96c-13.25 0-24 10.74-24 24C184 309.3 194.8 320 208 320z"/></svg>');
    animation: waply-pulse 2s infinite ease-in-out;
}

/* Page Padding */
.waply-animated-avatars-page {
    padding-bottom: 50px;
}

/* Responsive Styles */
@media (max-width: 782px) {
    .waply-avatar-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .waply-avatar-settings {
        flex-direction: column;
    }

    .waply-avatar-type-selector {
        flex-direction: column;
    }
}