/* Variables CSS para una paleta de colores coherente */
:root{--primary-color:#6a5acd;--primary-light:#8b7cdb;--dark-bg:#1a1a1a;--card-bg:#2b2b2b;--chat-bg:#343434;--header-bg:#282828;--border-color:#404040;--text-light:#e0e0e0;--text-medium:#c0c0c0;--text-dark:#888888;--bubble-user:var(--primary-color);--bubble-bot:#4a4a4a;--bubble-text:#ffffff;--shadow-strong:rgba(0,0,0,0.4);--shadow-light:rgba(0,0,0,0.15);}
/* Keyframes para la animación de entrada de las burbujas (slideIn) */
@keyframes slideIn{from{opacity:0;transform:translateY(15px) scale(0.95);}to{opacity:1;transform:translateY(0) scale(1);}}
.animate-slideIn{animation:slideIn 0.3s cubic-bezier(0.25,0.46,0.45,0.94) forwards;}
/* Keyframes para la animación de desvanecimiento y subida de las burbujas antiguas (fadeOutUp) */
@keyframes fadeOutUp{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-20px);height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;}}
.fade-out{animation:fadeOutUp 0.4s ease-out forwards;}
/* Contenedor principal que abarca el ancho y activa el hover */
.main-content-container{font-family:'Inter',sans-serif;background-color:var(--dark-bg);display:flex;justify-content:center;align-items:center;min-height:600px;max-height:60vh;box-sizing:border-box;overflow:hidden;width:100%;max-width:480px;background-color:var(--card-bg);border-radius:1.25rem;box-shadow:0 20px 40px var(--shadow-strong);position:relative;transition:all 0.7s cubic-bezier(0.65,0.05,0.36,1);cursor:pointer;border:1px solid var(--border-color);}
@media (max-width:768px){.main-content-container{padding:30px;margin-left:auto;min-height:300px;max-height:80vh;height:358px;width:100%;max-width:400px;}}
/* Capa inicial del contenido (visible por defecto) */
.initial-content-area{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;box-sizing:border-box;color:var(--text-light);text-align:center;opacity:1;transform:translateY(0);transition:opacity 0.7s cubic-bezier(0.65,0.05,0.36,1),transform 0.7s cubic-bezier(0.65,0.05,0.36,1),z-index 0s 0.7s,pointer-events 0s 0.7s;z-index:2;pointer-events:auto;background:linear-gradient(145deg,var(--card-bg) 0%,#3a3a3a 100%);}
.initial-content-area h2{font-size:2rem;font-weight:700;margin-bottom:0.75rem;color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.2);}
.initial-content-area p{font-size:1rem;font-weight:400;margin-bottom:2rem;line-height:1.5;color:var(--text-medium);}
/* El botón inicial ahora se renderiza aquí directamente */
.initial-content-area .btn-conocermas{background-color:var(--primary-color);color:white;padding:0.85rem 2rem;border-radius:0.75rem;font-weight:600;transition:background-color 0.3s ease,transform 0.2s ease;cursor:pointer;border:none;outline:none;box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.initial-content-area .btn-conocermas:hover{background-color:var(--primary-light);transform:translateY(-2px);}
.initial-content-area .btn-conocermas:active{transform:translateY(0);box-shadow:0 2px 5px rgba(0,0,0,0.2);}
/* Capa para el chat animado, inicialmente oculta */
.animated-chat-display{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;background-color:var(--chat-bg);opacity:0;transform:translateY(100%);transition:opacity 0.7s cubic-bezier(0.65,0.05,0.36,1),transform 0.7s cubic-bezier(0.65,0.05,0.36,1),z-index 0s 0s,pointer-events 0s 0s;z-index:1;pointer-events:none;box-sizing:border-box;}
/* Efecto hover en el contenedor principal: */
.main-content-container:hover .initial-content-area{opacity:0;transform:translateY(-80px);pointer-events:none;z-index:1;}
.main-content-container:hover .animated-chat-display{opacity:1;transform:translateY(0);pointer-events:auto;z-index:2;}
/* Estilos del encabezado del chat */
.chat-header{background-color:var(--header-bg);padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;color:var(--text-light);font-weight:600;flex-shrink:0;box-shadow:0 2px 5px var(--shadow-light);}
.chat-header .flex.items-center{display:flex;align-items:center;}
.chat-header .back-icon{font-size:1.6rem;color:var(--text-dark);margin-right:0.75rem;cursor:pointer;transition:color 0.2s ease;}
.chat-header .back-icon:hover{color:var(--text-medium);}
.chat-header .more-icon{font-size:1.6rem;color:var(--text-dark);cursor:pointer;transition:color 0.2s ease;}
.chat-header .more-icon:hover{color:var(--text-medium);}
/* Estilos para la imagen del icono GoIT en el chat header */
.chat-header img{border-radius:0;margin-right:0.5rem;width:2rem;height:2rem;object-fit:contain;padding:0;box-sizing:border-box;}
/* Estilos generales de las burbujas */
.message-bubble-wrapper{display:flex;align-items:flex-end;gap:0.6rem;margin-bottom:0.75rem;}
.message-bubble{padding:0.8rem 1.1rem;border-radius:1.2rem;box-shadow:0 2px 7px var(--shadow-light);font-size:0.95rem;line-height:1.4;max-width:calc(100% - 50px - 0.6rem);word-wrap:break-word;overflow-wrap:break-word;flex-shrink:1;}
.message-bubble.user{background-color:var(--bubble-user);color:var(--bubble-text);align-self:flex-end;border-bottom-right-radius:0.35rem;}
.message-bubble.bot{background-color:var(--bubble-bot);color:var(--bubble-text);align-self:flex-start;border-bottom-left-radius:0.35rem;}
.message-avatar{width:2.8rem;height:2.8rem;border-radius:70%;object-fit:cover;flex-shrink:0;transition:opacity 0.3s ease-out;border:1px solid rgba(255,255,255,0.1);background-color:#3d3d3d;padding:0;box-sizing:border-box;}
.message-avatar.hidden-avatar{opacity:0;pointer-events:none;}
/* Contenedor de mensajes animados */
.messages{flex-grow:1;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;display:flex;flex-direction:column;justify-content:flex-end;padding:1rem 1.5rem;padding-bottom:95px;}
.messages::-webkit-scrollbar{display:none;}
/* Estilos del indicador de escritura */
.typing-indicator-wrapper{margin-bottom:0.75rem;padding:0 1.5rem;display:flex;align-items:flex-end;gap:0.6rem;}
.typing-indicator-wrapper .message-avatar{opacity:1 !important;pointer-events:auto !important;}
.typing-indicator{display:flex;align-items:center;background-color:var(--bubble-bot);padding:0.6rem 0.9rem;border-radius:1.2rem;box-shadow:0 2px 7px var(--shadow-light);opacity:0;transition:opacity 0.3s ease-in-out;max-width:fit-content;}
.typing-indicator.visible{opacity:1;}
.typing-indicator span{width:0.6rem;height:0.6rem;background-color:var(--text-dark);border-radius:50%;margin:0 0.15rem;animation:bounce 1.4s infinite ease-in-out;}
.typing-indicator span:nth-child(2){animation-delay:0.2s;}
.typing-indicator span:nth-child(3){animation-delay:0.4s;}
/* Estilos para el botón persistente en el chat animado */
.persistent-button-container{position:absolute;bottom:0;left:0;width:100%;padding:1rem 1.5rem;box-sizing:border-box;display:flex;justify-content:center;background-color:var(--chat-bg);border-top:1px solid var(--border-color);z-index:10;box-shadow:0 -5px 15px rgba(0,0,0,0.2);}
.persistent-button-container .btn-conocermas{background-color:var(--primary-color);color:white;padding:0.85rem 1.8rem;border-radius:0.75rem;font-weight:600;transition:background-color 0.3s ease,transform 0.2s ease;cursor:pointer;border:none;outline:none;width:100%;max-width:280px;box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.persistent-button-container .btn-conocermas:hover{background-color:var(--primary-light);transform:translateY(-2px);}
.persistent-button-container .btn-conocermas:active{transform:translateY(0);box-shadow:0 2px 5px rgba(0,0,0,0.2);}
/* --- Cambios de Responsive --- */
@media (max-width:768px){.initial-content-area{padding:1.5rem;}.initial-content-area h2{font-size:1.6rem;line-height:1.3;}.initial-content-area p{font-size:0.9rem;}}
@media (max-width:480px){.initial-content-area{padding:1rem;}.initial-content-area h2{font-size:1.4rem;}}