/* assets/css/style.css */



/* Define CSS Variables with default values */

:root {

    --chat-primary-color: #007bff;

    --chat-bubble-bg-color: #007bff;

    --chat-bubble-text-color: #ffffff;

    --chat-header-bg-color: #ffffff;

    --chat-header-text-color: #333333;

    --chat-bot-message-bg-color: #f1f1f1;

    --chat-bot-message-text-color: #333333;

    --chat-user-message-bg-color: #007bff;

    --chat-user-message-text-color: #ffffff;

    --chat-input-bg-color: #f9f9f9;

    --chat-input-text-color: #333333;

    --chat-shadow-color: rgba(0,0,0,0.2);

    --chat-border-color: #eee;

	--chat-bg-color: #ffffff;

}



/* Custom Chat Widget Styles */

#aviya-container {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 9999;

}

#chat-opener {

    width: 60px;

    height: 60px;

    background: var(--chat-bubble-bg-color);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    box-shadow: 0 4px 8px var(--chat-shadow-color);

    transition: transform 0.2s;

}

#chat-opener:hover {

    transform: scale(1.1);

}

#chat-opener svg {

    fill: var(--chat-bubble-text-color);

    width: 32px;

    height: 32px;

}

#chat-window {

    width: 350px;

    max-width: 90vw;

    height: 500px;

    max-height: 70vh;

    background: #fff;

    border-radius: 10px;

    box-shadow: 0 5px 20px var(--chat-shadow-color);

    display: none; /* Controlled by JS .open class */

    flex-direction: column;

    overflow: hidden;

}

#aviya-container.open #chat-window {

    display: flex;

}

#aviya-container.open #chat-opener {

    display: none;

}

#chat-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 15px; /* Adjust padding for avatar */

    border-bottom: 1px solid var(--chat-border-color);

    background-color: var(--chat-header-bg-color);

    color: var(--chat-header-text-color);

}

#chat-header h3 {

    margin: 0;

    font-size: 16px;

    font-family: sans-serif;

}

#chat-header #chat-closer {

    background: none;

    border: none;

    font-size: 24px;

    cursor: pointer;

    color: var(--chat-header-text-color);

    padding: 0 5px;

}

#chat-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-right: 12px;

    object-fit: cover;

}



#chat-header-content {

    display: flex;

    align-items: center;

}

#chat-messages {

    flex-grow: 1;

    padding: 15px;

    overflow-y: auto;

    font-family: sans-serif;

    font-size: 14px;

    background-color: var(--chat-bg-color); /* Message area background */

}

.message {

    max-width: 80%;

    padding: 10px 15px;

    border-radius: 18px;

    margin-bottom: 10px;

    line-height: 1.4;

    word-wrap: break-word;

}

.message.user {

    background: var(--chat-user-message-bg-color);

    color: var(--chat-user-message-text-color);

    margin-left: auto;

    border-bottom-right-radius: 4px;

}

.message.bot {

    background: var(--chat-bot-message-bg-color);

    color: var(--chat-bot-message-text-color);

    margin-right: auto;

    border-bottom-left-radius: 4px;

}

#chat-branding {

    text-align: center;

    padding: 8px 0;

    font-size: 12px;

    color: #aaa;

    font-family: sans-serif;

    background-color: var(--chat-input-bg-color);

    border-top: 1px solid var(--chat-border-color);

}

#chat-branding a {

    color: #888;

    text-decoration: none;

}

#chat-branding a:hover {

    text-decoration: underline;

}

#chat-input-area {

    border-top: 1px solid var(--chat-border-color);

    padding: 10px;

    background-color: var(--chat-input-bg-color);

}

#chat-form {

    display: flex;

}

#chat-input {

    flex-grow: 1;

    border: 1px solid var(--chat-border-color);

    border-radius: 20px;

    padding: 10px 15px;

    font-size: 14px;

    background-color: #fff; /* Ensure input background is white */

    color: var(--chat-input-text-color);

}

#chat-input:focus {

    outline: none;

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

}

#chat-submit {

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

    border: none;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    margin-left: 10px;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

}

#chat-submit svg {

    fill: var(--chat-bubble-text-color); /* Use bubble text color for consistency */

    width: 15px;

    height: 15px;

	flex-shrink: 0;

}



/* Guest Form Specific Styles */

#guest-chat-container {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 9998;

    font-family: sans-serif;

}

#guest-chat-opener {

    width: 60px;

    height: 60px;

    background: var(--chat-bubble-bg-color);

    border-radius: 50%;

    display: none;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    box-shadow: 0 4px 8px var(--chat-shadow-color);

}

#guest-chat-opener svg {

    fill: var(--chat-bubble-text-color);

    width: 32px;

    height: 32px;

}

#guest-chat-window {

    background: white;

    border-radius: 8px;

    box-shadow: 0 5px 20px var(--chat-shadow-color);

    width: 300px;

    overflow: hidden;

}

#guest-chat-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 15px;

    border-bottom: 1px solid var(--chat-border-color);

    background-color: var(--chat-header-bg-color);

    color: var(--chat-header-text-color);

}

#guest-chat-header h3 {

    margin: 0;

    font-size: 16px;

}

#guest-chat-header button {

    background: none;

    border: none;

    font-size: 24px;

    cursor: pointer;

    color: var(--chat-header-text-color);

}

#guest-chat-body {

    padding: 15px;

}

#guest-chat-body p {

    margin-top: 0;

    font-size: 14px;

}

#pre-chat-form input {

    width:100%;

    padding:10px;

    margin-bottom:10px;

    border:1px solid var(--chat-border-color);

    border-radius:4px;

    box-sizing: border-box;

    color: var(--chat-input-text-color);

}

#pre-chat-form button {

    width:100%;

    padding:12px;

    border:none;

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

    color:var(--chat-bubble-text-color);

    font-size:16px;

    border-radius:4px;

    cursor: pointer;

}

#guest-chat-container.minimized #guest-chat-window {

    display: none;

}

#guest-chat-container.minimized #guest-chat-opener {

    display: flex;

}



/* Add these styles for the typing indicator */

.message.bot.typing-indicator {

    background: var(--chat-bot-message-bg-color);

    color: var(--chat-bot-message-text-color);

    padding: 12px 18px; /* Slightly different padding for the dots */

    display: inline-flex; /* Use flex to align dots */

    align-items: center;

}



.typing-indicator .dot {

    width: 8px;

    height: 8px;

    margin: 0 2px;

    background-color: var(--chat-bot-message-text-color);

    border-radius: 50%;

    opacity: 0.4;

    animation: typing-animation 1.4s infinite;

}



.typing-indicator .dot:nth-child(2) {

    animation-delay: 0.2s;

}



.typing-indicator .dot:nth-child(3) {

    animation-delay: 0.4s;

}



@keyframes typing-animation {

    0%, 80%, 100% {

        transform: scale(0.8);

        opacity: 0.4;

    }

    40% {

        transform: scale(1);

        opacity: 1;

    }

}