/* =========================================
   Chatbot Grimorio Mágico "Mimic" (Lado Derecho - Tamaño Aumentado)
   ========================================= */

.chatbot-container {
    position: fixed;
    bottom: 50px; /* Margen inferior ajustado a 50px a petición */
    right: 40px; /* Margen derecho */
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alineado a la derecha firmemente */
    pointer-events: none; /* El contenedor NO captura clicks */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(30px); /* Para animación inicial de subida */
}

.chatbot-container.visible {
    opacity: 1;
    transform: translateY(0);
    /* Mantenemos pointer-events: none en el contenedor */
}

/* ==================================
   AVATAR OMEGA (EL LIBRO AUMENTADO 20%)
   ================================== */
.chatbot-avatar {
    order: 2; /* Para que quede ABAJO de la ventana de chat */
    width: 90px;
    height: 90px;
    cursor: pointer;
    position: relative;
    perspective: 1000px; /* Profundidad 3D */
    animation: floatingBook 4s ease-in-out infinite;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* El avatar SÍ captura clicks */
}

.chatbot-avatar:hover {
    animation-play-state: paused;
}

/* Wrapper del libro con 3D rotation */
.book-group {
    width: 60px;
    height: 78px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out; /* Para seguir ratón */
}

/* 1. Cuerpo Principal del Libro (Tapa de Cuero) */
.book-cover {
    position: absolute;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #4a148c, #311b92);
    border: 3px solid #ffca28; /* Ribete dorado */
    border-radius: 5px 10px 10px 5px;
    box-shadow: inset -6px 0 12px rgba(0,0,0,0.5), 0 12px 24px rgba(138, 43, 226, 0.4);
    transform: translateZ(6px);
    overflow: hidden;
}

/* Decoraciones místicas en la cubierta */
.book-cover::before {
    content: ''; position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px dashed rgba(255, 202, 40, 0.5);
    border-radius: 3px 6px 6px 3px;
}

/* 2. Lomo del libro (Izquierda) */
.book-spine {
    position: absolute;
    left: -10px; top: -3px;
    width: 12px; height: 110%;
    background: linear-gradient(to right, #2a0b4a, #4a148c);
    border: 3px solid #ffca28;
    border-right: none;
    border-radius: 8px 0 0 8px;
    transform: translateZ(0);
    box-shadow: inset 5px 0 6px rgba(0,0,0,0.6);
}
/* Refuerzos del lomo */
.spine-rib {
    width: 100%; height: 5px;
    background: #ffca28;
    margin-top: 18px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}

/* 3. Páginas (Derecha) */
.book-pages {
    position: absolute;
    right: -6px; top: 4px;
    width: 8px; height: 88%;
    background: repeating-linear-gradient(to bottom, #fdf6e3, #fdf6e3 2px, #e0d4b8 3px);
    border-radius: 0 5px 5px 0;
    transform: translateZ(-2px);
    box-shadow: inset 3px 0 6px rgba(0,0,0,0.2);
}

/* 4. El Ojo (Mimic) */
.book-eye {
    width: 30px; height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 18px; left: 14px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 0 12px #00e5ff;
    overflow: hidden;
    transform: translateZ(12px);
}

/* Parpadeo del ojo (solo si esta online) */
.chatbot-avatar.online .book-eye {
    animation: eyeBlink 5s infinite;
}

@keyframes eyeBlink {
    0%, 94%, 98%, 100% { transform: translateZ(12px) scaleY(1); }
    96% { transform: translateZ(12px) scaleY(0.1); }
}

.book-iris {
    width: 14px; height: 14px;
    background: radial-gradient(circle, #00e5ff, #00838f);
    border-radius: 50%;
    position: absolute;
    top: 2px; left: 8px;
    transition: transform 0.1s ease-out;
}
.book-pupil {
    width: 5px; height: 10px;
    background: #000;
    border-radius: 50%;
    position: absolute; top: 2px; left: 4.5px;
}
.book-highlight {
    width: 3px; height: 3px;
    background: #fff;
    border-radius: 50%;
    position: absolute; top: 2.5px; left: 7px;
}

/* 5. La Boca */
.book-mouth {
    width: 24px; height: 4px;
    background: #1a0033;
    position: absolute;
    top: 48px; left: 18px;
    border-radius: 6px;
    transform: translateZ(12px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* La lengua (Marcapáginas) */
.book-tongue {
    width: 12px; height: 30px;
    background: linear-gradient(to bottom, #ff4081, #c51162);
    position: absolute;
    top: 48px; left: 24px;
    border-radius: 0 0 6px 6px;
    transform-origin: top;
    transform: translateZ(10px) scaleY(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

/* ==================================
   EXPRESIONES E INTERACCIONES
   ================================== */
/* Hover general */
.chatbot-avatar:hover .book-group {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.6);
}

/* Sonrisa */
.chatbot-avatar.smiling .book-mouth {
    width: 28px; height: 10px;
    left: 16px; top: 45px;
    border-radius: 0 0 12px 12px;
    background: #000;
    border-bottom: 2px solid #fff; /* dientes del mimic */
}

/* Sacar Lengua (Marcapáginas) */
.chatbot-avatar.tongue-out .book-tongue {
    transform: translateZ(14px) scaleY(1) rotate(5deg);
    animation: tongueWiggle 1s infinite;
}

@keyframes tongueWiggle { 
    0%, 100% { transform: translateZ(14px) scaleY(1) rotate(5deg); } 
    50% { transform: translateZ(14px) scaleY(1.1) rotate(-5deg); } 
}

/* Modo Dormido (Un libro normal cerrado) */
.chatbot-avatar.sleeping .book-group {
    filter: grayscale(60%) brightness(0.7);
}
.chatbot-avatar.sleeping .book-eye {
    transform: translateZ(12px) scaleY(0); /* Ojo completamente cerrado */
    animation: none;
    box-shadow: none;
}
.chatbot-avatar.sleeping .book-mouth {
    width: 14px; height: 3px; left: 23px; border-radius: 50%;
    animation: none;
    background: rgba(0,0,0,0.2);
}

/* ==================================
   Resto del Widget (Status y Chat)
   ================================== */

.chatbot-status {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 18px; height: 18px;
    background: #00ff88;
    border-radius: 50%;
    border: 3px solid var(--color-bg-dark);
    box-shadow: 0 0 12px #00ff88;
    z-index: 2; transition: background 0.3s;
}

.chatbot-avatar.sleeping .chatbot-status { background: #ff4444; box-shadow: 0 0 12px #ff4444; }

@keyframes floatingBook { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-2deg); } }

/* Ventana de Chat: Ahora despliega hacia arriba desde el Avatar */
.chatbot-window { 
    order: 1; /* Arriba del Avatar */
    width: 350px; 
    height: 450px; 
    background: rgba(15, 15, 20, 0.85); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); 
    border: 1px solid rgba(138, 43, 226, 0.3); 
    border-radius: 20px; 
    margin-bottom: 20px; /* Separación con avatar que esta abajo */
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 30px rgba(138, 43, 226, 0.15); 
    transform-origin: bottom right; /* Crece desde abajo hacia arriba y hacia la izquierda */
    transform: scale(0); 
    opacity: 0; 
    pointer-events: none; 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease; 
}

.chatbot-window.open { 
    transform: scale(1); 
    opacity: 1; 
    pointer-events: auto; /* La ventana abierta SÍ captura clicks */
}

.chatbot-header { background: linear-gradient(90deg, rgba(138, 43, 226, 0.2), rgba(255, 107, 107, 0.1)); padding: 15px 20px; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.chatbot-header-info { flex: 1; }
.chatbot-title { margin: 0; font-size: 1.1rem; color: var(--color-text-light); font-weight: 600; text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }
.chatbot-subtitle { margin: 0; font-size: 0.8rem; color: var(--color-primary); opacity: 0.8; }
.chatbot-close { background: none; border: none; color: var(--color-text-muted); font-size: 1.5rem; cursor: pointer; transition: color 0.3s, transform 0.3s; }
.chatbot-close:hover { color: var(--color-accent); transform: rotate(90deg); }

.chatbot-body { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.chatbot-body::-webkit-scrollbar { width: 6px; }
.chatbot-body::-webkit-scrollbar-thumb { background: rgba(138, 43, 226, 0.3); border-radius: 10px; }

.chat-msg { max-width: 85%; padding: 12px 16px; border-radius: 15px; font-size: 1.1rem; line-height: 1.5; position: relative; animation: msgFadeIn 0.3s ease forwards; opacity: 0; transform: translateY(10px); }
@keyframes msgFadeIn { to { opacity: 1; transform: translateY(0); } }

.chat-msg.bot { align-self: flex-start; background: rgba(138, 43, 226, 0.15); border: 1px solid rgba(138, 43, 226, 0.2); color: var(--color-text-light); border-bottom-left-radius: 2px; white-space: pre-line; }
.chat-msg.bot strong { color: #ffca28; font-weight: 600; }
.chat-msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: white; border-bottom-right-radius: 2px; box-shadow: 0 5px 15px rgba(255, 107, 107, 0.2); }

.typing-indicator { display: flex; gap: 4px; padding: 15px 16px; background: rgba(255, 255, 255, 0.05); border-radius: 15px; border-bottom-left-radius: 2px; align-self: flex-start; align-items: center; }
.typing-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; animation: typingBounce 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }

.chatbot-footer { padding: 15px; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; gap: 10px; background: rgba(0,0,0,0.2); }
.chatbot-input { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-light); border-radius: 20px; padding: 12px 18px; font-size: 1.05rem; outline: none; transition: border-color 0.3s, background 0.3s; }
.chatbot-input:focus { border-color: var(--color-primary); background: rgba(255, 255, 255, 0.08); }
.chatbot-send { background: linear-gradient(45deg, var(--color-primary), var(--color-accent)); border: none; width: 40px; height: 40px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.chatbot-send:hover { transform: scale(1.1) rotate(15deg); box-shadow: 0 0 15px rgba(255, 107, 107, 0.4); }

.chatbot-locked-toast {
    position: absolute;
    bottom: calc(100% + 15px); /* Posicionado arriba del mimic con espacio */
    right: 0;
    background: linear-gradient(135deg, rgba(255, 40, 40, 0.98), rgba(200, 30, 30, 0.98));
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 40, 40, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    z-index: 1000000;
}

/* Flecha del tooltip apuntando hacia abajo */
.chatbot-locked-toast::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 30px;
    border: 10px solid transparent;
    border-top-color: rgba(255, 40, 40, 0.98);
}

.chatbot-locked-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Efecto de pulso en el mimic cuando está dormido y se hace hover */
.chatbot-avatar.sleeping:hover {
    animation: sleepingPulse 1.5s ease-in-out infinite;
}

@keyframes sleepingPulse {
    0%, 100% { transform: scale(1); filter: grayscale(60%) brightness(0.7); }
    50% { transform: scale(1.05); filter: grayscale(50%) brightness(0.8); }
}

/* Indicador visual de que está bloqueado */
.chatbot-avatar.sleeping::before {
    content: '🔒';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ff4444, #cc3333);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 3px 10px rgba(255, 68, 68, 0.5);
    z-index: 10;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* =========================================
   ANIMACIONES EXTRA - MIMIC MÁS VIVO QUE NUNCA
   ========================================= */

/* 1. PARTÍCULAS MÁGICAS FLOTANTES */
.chatbot-avatar.online::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: 
        radial-gradient(circle, #00e5ff 1px, transparent 1px),
        radial-gradient(circle, #ff4081 1px, transparent 1px),
        radial-gradient(circle, #ffca28 1px, transparent 1px);
    background-size: 20px 20px, 30px 30px, 25px 25px;
    background-position: 0 0, 10px 10px, 5px 5px;
    animation: magicParticles 3s linear infinite;
    opacity: 0.6;
    border-radius: 50%;
}

@keyframes magicParticles {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    50% { opacity: 1; }
    100% { transform: translateY(-30px) rotate(360deg); opacity: 0; }
}

/* 2. RESPIRACIÓN DE PÁGINAS */
.chatbot-avatar.online .book-pages {
    animation: pagesBreathing 2s ease-in-out infinite;
}

@keyframes pagesBreathing {
    0%, 100% { transform: translateZ(-2px) scaleX(1); }
    50% { transform: translateZ(-2px) scaleX(1.1); }
}

/* 3. BRILLO PULSANTE DEL OJO */
.chatbot-avatar.online .book-eye {
    animation: eyeBlink 5s infinite, eyeGlow 2s ease-in-out infinite;
}

@keyframes eyeGlow {
    0%, 100% { box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 0 12px #00e5ff; }
    50% { box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 0 25px #00e5ff, 0 0 40px rgba(0, 229, 255, 0.5); }
}

/* 4. RONQUIDOS ANIMADOS (Cuando dormido) */
.chatbot-avatar.sleeping::after {
    content: 'Zzz';
    position: absolute;
    top: -20px;
    right: 10px;
    font-size: 14px;
    color: #888;
    font-weight: bold;
    animation: snoring 2s ease-in-out infinite;
    opacity: 0;
}

@keyframes snoring {
    0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(-30px) translateX(10px) scale(1.2); opacity: 0; }
}

/* 5. ESCANEO CON EL OJO */
.chatbot-avatar.online .book-eye::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -50%;
    width: 200%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00e5ff, transparent);
    opacity: 0;
    animation: eyeScan 4s ease-in-out infinite;
}

@keyframes eyeScan {
    0%, 70%, 100% { opacity: 0; transform: translateY(-50%) rotate(-45deg) scaleX(0); }
    75% { opacity: 0.8; transform: translateY(-50%) rotate(-45deg) scaleX(0.5); }
    85% { opacity: 0; transform: translateY(-50%) rotate(-45deg) scaleX(1); }
}

/* 6. AURA MÁGICA - Eliminada por solicitud del usuario */

/* 7. TEMBLOR EXCITADO (Al hover) */
.chatbot-avatar.online:hover {
    animation: floatingBook 4s ease-in-out infinite, excitedShake 0.5s ease-in-out infinite;
}

@keyframes excitedShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px) rotate(-1deg); }
    75% { transform: translateX(2px) rotate(1deg); }
}

/* Runas parpadeantes eliminadas por solicitud del usuario */

/* Destello de lomo eliminado por solicitud del usuario */

/* Efecto de "vida" en las costillas del lomo */
.chatbot-avatar.online .spine-rib {
    animation: ribPulse 2s ease-in-out infinite;
}

.chatbot-avatar.online .spine-rib:nth-child(2) {
    animation-delay: 0.3s;
}

@keyframes ribPulse {
    0%, 100% { box-shadow: 0 2px 3px rgba(0,0,0,0.5); }
    50% { box-shadow: 0 2px 8px rgba(255, 202, 40, 0.6); }
}

/* =========================================
   BLINDAJE DE ESTADO VISUAL: DESLOGUEADO
   ========================================= */
body.user-logged-out .chatbot-avatar .chatbot-status {
    background: #ff4444 !important;
    box-shadow: 0 0 12px #ff4444 !important;
}
body.user-logged-out .chatbot-avatar .book-group {
    filter: grayscale(60%) brightness(0.7) !important;
}
body.user-logged-out .chatbot-avatar .book-eye {
    transform: translateZ(12px) scaleY(0) !important;
    animation: none !important;
    box-shadow: none !important;
}
body.user-logged-out .chatbot-avatar .book-mouth {
    width: 14px !important;
    height: 3px !important;
    left: 23px !important;
    border-radius: 50% !important;
    animation: none !important;
    background: rgba(0,0,0,0.2) !important;
}
body.user-logged-out .chatbot-avatar::before { display: none !important; }
body.user-logged-out .chatbot-avatar::after {
    content: 'Zzz' !important;
    position: absolute !important;
    top: -20px !important;
    right: 10px !important;
    font-size: 14px !important;
    color: #888 !important;
    font-weight: bold !important;
    animation: snoring 2s ease-in-out infinite !important;
    opacity: 1 !important;
}
body.user-logged-out .chatbot-window {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Cursor pointer para indicar que es clickable incluso dormido */
body.user-logged-out .chatbot-avatar {
    cursor: pointer !important;
}

/* Animación extra cuando se hace hover estando deslogueado */
body.user-logged-out .chatbot-avatar:hover::after {
    animation: snoring 1s ease-in-out infinite !important;
}

/* =========================================
   SECCIÓN DE PREGUNTAS FRECUENTES (FAQ)
   ========================================= */
.mimic-faq-section {
    padding: 0 15px 15px;
    animation: msgFadeIn 0.4s ease forwards;
}

.mimic-faq-title {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: rgba(138, 43, 226, 0.9);
    margin-bottom: 12px;
    padding-left: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.mimic-faq-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mimic-faq-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: left;
    width: 100%;
    font-family: 'Inter', sans-serif;
}

.mimic-faq-item:hover {
    background: rgba(138, 43, 226, 0.2);
    border-color: rgba(138, 43, 226, 0.4);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.2);
}

.mimic-faq-item:active {
    transform: translateX(5px) scale(0.98);
}

.mimic-faq-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(138, 43, 226, 0.5));
}

.mimic-faq-text {
    font-size: 1.05rem;
    color: var(--color-text-light, #f0f4ff);
    font-weight: 500;
}

/* Animación de entrada para los items FAQ */
.mimic-faq-item:nth-child(1) { animation: faqSlideIn 0.3s ease 0.1s both; }
.mimic-faq-item:nth-child(2) { animation: faqSlideIn 0.3s ease 0.2s both; }
.mimic-faq-item:nth-child(3) { animation: faqSlideIn 0.3s ease 0.3s both; }

@keyframes faqSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   SECCIÓN DE MODELOS RECIENTES EN EL MIMIC
   ========================================= */

.mimic-models-section {
    width: 100%;
    padding: 10px 0;
}

.mimic-models-title {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: rgba(138, 43, 226, 0.9);
    margin-bottom: 12px;
    padding-left: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.mimic-models-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mimic-model-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(20, 25, 40, 0.8);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 12px;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.mimic-model-card * {
    pointer-events: none;
}

.mimic-model-card:hover {
    background: rgba(138, 43, 226, 0.15);
    border-color: rgba(138, 43, 226, 0.5);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.2);
}

.mimic-model-card:active {
    transform: translateX(5px) scale(0.98);
}

/* Rank indicator (medal position) */
.mimic-model-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* Special styling for top 3 */
.mimic-model-card.rank-1 .mimic-model-rank {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.mimic-model-card.rank-2 .mimic-model-rank {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    color: #000;
    box-shadow: 0 0 10px rgba(192, 192, 192, 0.4);
}

.mimic-model-card.rank-3 .mimic-model-rank {
    background: linear-gradient(135deg, #cd7f32, #b87333);
    color: #fff;
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.4);
}

.mimic-model-card.rank-other .mimic-model-rank {
    background: rgba(138, 43, 226, 0.3);
    color: #fff;
}

/* Model image thumbnail */
.mimic-model-image {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.mimic-model-card:hover .mimic-model-image {
    transform: scale(1.05);
    border-color: rgba(138, 43, 226, 0.4);
}

/* Model info (name and price) */
.mimic-model-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mimic-model-name {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #f0f4ff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mimic-model-price {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    color: #00e5ff;
    font-weight: 600;
}

/* Arrow indicator */
.mimic-model-arrow {
    font-size: 1.2rem;
    color: rgba(138, 43, 226, 0.6);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-10px);
}

.mimic-model-card:hover .mimic-model-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #00e5ff;
}

/* Footer text */
.mimic-models-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(138, 43, 226, 0.1);
    font-size: 0.8rem;
    color: rgba(240, 244, 255, 0.6);
    text-align: center;
    font-style: italic;
}

/* Animations for model cards */
.mimic-model-card:nth-child(1) { animation: modelCardSlideIn 0.3s ease 0s both; }
.mimic-model-card:nth-child(2) { animation: modelCardSlideIn 0.3s ease 0.05s both; }
.mimic-model-card:nth-child(3) { animation: modelCardSlideIn 0.3s ease 0.1s both; }
.mimic-model-card:nth-child(4) { animation: modelCardSlideIn 0.3s ease 0.15s both; }
.mimic-model-card:nth-child(5) { animation: modelCardSlideIn 0.3s ease 0.2s both; }

@keyframes modelCardSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Glow effect for top 3 on hover */
.mimic-model-card.rank-1:hover {
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.4);
}

.mimic-model-card.rank-2:hover {
    box-shadow: 0 4px 20px rgba(192, 192, 192, 0.3);
    border-color: rgba(192, 192, 192, 0.4);
}

.mimic-model-card.rank-3:hover {
    box-shadow: 0 4px 20px rgba(205, 127, 50, 0.3);
    border-color: rgba(205, 127, 50, 0.4);
}