/* ==========================================

   CSS EXCLUSIVO PARA EL CHATBOT SEBASTIÁN - APPLE STYLE

   ========================================== */



:root {

    --bot-primary: #0052cc; /* Corporate Health Blue */

    --bot-primary-light: #0066ff;

    --bot-white: #ffffff;

    --bot-border: rgba(0,0,0,0.08);

    --bot-bg-msg: #f5f5f7; /* Apple Offwhite */

    --bot-text: #1d1d1f;

    --bot-shadow: 0 10px 40px rgba(0,0,0,0.1);

}



.chatbot-widget {

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 10000;

    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

}



.chatbot-notification {

    position: absolute;

    bottom: 75px;

    right: 0;

    background-color: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    color: var(--bot-text);

    padding: 14px 20px;

    border-radius: 20px 20px 4px 20px;

    box-shadow: var(--bot-shadow);

    border: 1px solid var(--bot-border);

    font-size: 0.95rem;

    width: max-content;

    max-width: 250px;

    opacity: 1;

    transform: translateY(0);

    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    pointer-events: none;

}



.chatbot-notification.hidden {

    opacity: 0;

    transform: translateY(15px);

}



.chatbot-toggle {

    background-color: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    color: var(--bot-primary);

    border: 1px solid var(--bot-border);

    border-radius: 50%;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: var(--bot-shadow);

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;

}



.chatbot-toggle:hover {

    transform: scale(1.05);

    box-shadow: 0 15px 50px rgba(0,0,0,0.15);

}



.chatbot-window {

    position: absolute;

    bottom: 85px;

    right: 0;

    width: 360px;

    background-color: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-radius: 24px;

    box-shadow: var(--bot-shadow);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    border: 1px solid var(--bot-border);

}



.chatbot-window.hidden {

    opacity: 0;

    pointer-events: none;

    transform: translateY(30px) scale(0.95);

    transform-origin: bottom right;

}



.chatbot-header {

    background-color: transparent;

    color: var(--bot-text);

    padding: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid var(--bot-border);

}



.chatbot-header-title {

    display: flex;

    align-items: center;

    gap: 12px;

}



.chatbot-avatar {

    width: 36px;

    height: 36px;

    background: linear-gradient(135deg, #007aff, #34aadc);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: 600;

    font-size: 1.1rem;

    box-shadow: 0 4px 12px rgba(0,122,255,0.3);

}



.chatbot-header h4 {

    margin: 0;

    font-size: 1.1rem;

    font-weight: 600;

    letter-spacing: -0.02em;

}



.chatbot-status {

    font-size: 0.75rem;

    color: #86868b;

    display: block;

}



.chatbot-close {

    background: rgba(0,0,0,0.05);

    border: none;

    border-radius: 50%;

    width: 28px; height: 28px;

    color: var(--bot-text);

    font-size: 1.2rem;

    cursor: pointer;

    display: flex; align-items: center; justify-content: center;

    transition: background 0.2s;

}



.chatbot-close:hover {

    background: rgba(0,0,0,0.1);

}



.chatbot-messages {

    height: 350px;

    overflow-y: auto;

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    background-color: var(--bot-bg-msg);

}



.chat-msg {

    max-width: 80%;

    padding: 12px 16px;

    border-radius: 18px;

    font-size: 0.95rem;

    line-height: 1.4;

    position: relative;

}



.bot-msg {

    background-color: var(--bot-white);

    border: 1px solid var(--bot-border);

    align-self: flex-start;

    border-bottom-left-radius: 4px;

    color: var(--bot-text);

    box-shadow: 0 2px 8px rgba(0,0,0,0.02);

}



.user-msg {

    background-color: var(--bot-primary);

    color: white;

    align-self: flex-end;

    border-bottom-right-radius: 4px;

    box-shadow: 0 4px 12px rgba(0,122,255,0.2);

}



.chatbot-input {

    display: flex;

    padding: 16px;

    background-color: var(--bot-white);

    border-top: 1px solid var(--bot-border);

    align-items: center;

    gap: 12px;

}



#chatbot-input-field {

    flex: 1;

    background: var(--bot-bg-msg);

    border: 1px solid transparent;

    border-radius: 20px;

    padding: 10px 16px;

    outline: none;

    font-size: 0.95rem;

    transition: border-color 0.2s, background 0.2s;

}



#chatbot-input-field:focus {

    background: white;

    border-color: var(--bot-primary);

    box-shadow: 0 0 0 4px rgba(0,122,255,0.1);

}



#chatbot-send {

    background-color: transparent;

    color: var(--bot-primary);

    border: none;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: transform 0.2s;

}



#chatbot-send:hover {

    transform: scale(1.1);

}



#chatbot-send:active {

    transform: scale(0.95);

}



.typing-indicator {

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 6px 4px;

    justify-content: center;

}



.typing-indicator span {

    display: block;

    width: 6px;

    height: 6px;

    background-color: #86868b;

    border-radius: 50%;

    animation: typing 1.4s infinite both;

}



.typing-indicator span:nth-child(1) { animation-delay: 0s; }

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }

.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }



@keyframes typing {

    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }

    40% { transform: translateY(-4px); opacity: 1; }

}



#chatbot-input-field:disabled {

    opacity: 0.6;

    cursor: not-allowed;

}



#chatbot-send:disabled, #chatbot-send.disabled-btn {

    opacity: 0.3 !important;

    cursor: not-allowed !important;

    pointer-events: none !important;

}



@media (max-width: 768px) {

    .chatbot-window {

        position: fixed; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 0; z-index: 10001;

    }

    .chatbot-messages { flex: 1; height: auto; }

    .chatbot-toggle { bottom: 20px; right: 20px; z-index: 10002; }

    .chatbot-notification { bottom: 95px; right: 20px; }

}



/* Estilos Markdown del Bot */

.bot-msg h3 { font-size: 1.15rem; font-weight: 700; margin-top: 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 4px; color: var(--bot-primary); }

.bot-msg h4 { font-size: 1.05rem; font-weight: 600; margin-top: 10px; margin-bottom: 6px; text-decoration: underline; text-decoration-color: rgba(0,82,204,0.3); text-underline-offset: 3px; }

.bot-msg p { margin-bottom: 10px; }

.bot-msg p:last-child { margin-bottom: 0; }

.bot-msg ul { margin-left: 20px; margin-bottom: 10px; }

.bot-msg li { margin-bottom: 4px; }






/* Estilos Markdown del Bot */

.bot-msg h3 { font-size: 1.15rem; font-weight: 700; margin-top: 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 4px; color: var(--bot-primary); }

.bot-msg h4 { font-size: 1.05rem; font-weight: 600; margin-top: 10px; margin-bottom: 6px; text-decoration: underline; text-decoration-color: rgba(0,82,204,0.3); text-underline-offset: 3px; }

.bot-msg p { margin-bottom: 10px; }

.bot-msg p:last-child { margin-bottom: 0; }

.bot-msg ul { margin-left: 20px; margin-bottom: 10px; }

.bot-msg li { margin-bottom: 4px; }

/* Estilos Markdown del Bot */
.bot-msg h3 { font-size: 1.15rem; font-weight: 700; margin-top: 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 4px; color: var(--bot-primary); }
.bot-msg h4 { font-size: 1.05rem; font-weight: 600; margin-top: 10px; margin-bottom: 6px; text-decoration: underline; text-decoration-color: rgba(0,82,204,0.3); text-underline-offset: 3px; }
.bot-msg p { margin-bottom: 10px; }
.bot-msg p:last-child { margin-bottom: 0; }
.bot-msg ul { margin-left: 20px; margin-bottom: 10px; }
.bot-msg li { margin-bottom: 4px; }