/* ===========================
   Admin Settings Page Styles
   =========================== */

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
.switch input {
    opacity: 0; width: 0; height: 0;
}
.switch .slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: .4s; border-radius: 24px;
}
.switch .slider:before {
    position: absolute; content: "";
    height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: white; transition: .4s; border-radius: 50%;
}
.switch input:checked + .slider {
    background-color: #0073aa;
}
.switch input:checked + .slider:before {
    transform: translateX(26px);
}
.master-switch {
    margin: 0 auto;
}

/* Table Styles */
#wp-chatbot-page-selection table {
    width: 100%; border-collapse: collapse;
}
#wp-chatbot-page-selection table th,
#wp-chatbot-page-selection table td {
    padding: 12px 15px; text-align: left;
}
.toggle-column { text-align: center; }
#wp-chatbot-page-selection table tbody tr:hover {
    background-color: #f9f9f9;
}

/* ===========================
   Chatbot Interface Styles
   =========================== */

/* Chatbot Icon */
#chatbot-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    /* background-color is now set via inline styles from PHP */
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: background-color 0.3s;
}

#chatbot-icon:hover {
    filter: brightness(1.1); /* Slightly brighten the icon color on hover */
}

#chatbot-icon img {
    width: 30px;
    height: 30px;
}

/* Chatbot Container */
#wp-chatbot {
    width: 350px;
    max-width: 90%;
    height: 500px;
    border: 1px solid #ccc;
    position: fixed;
    bottom: 90px;
    right: 20px;
    background-color: var(--window-bg-color, #ffffff);
    color: var(--text-color, #000000);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    border-radius: 12px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    z-index: 9999;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

#wp-chatbot.open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

#wp-chatbot.expanded {
    width: 600px;
    height: 700px; /* Adjust as needed */
}

/* Chatbot Header */
#chatbot-header {
    background-color: var(--header-bg-color, #0073aa);
    color: var(--header-text-color, #ffffff);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Expand Button on the Left */
#chatbot-expand {
    position: absolute;
    left: 10px;
    background: none;
    border: none;
    color: var(--header-text-color, #ffffff);
    font-size: 20px; /* Adjust icon size */
    cursor: pointer;
    transition: color 0.2s;
}

#chatbot-expand:hover {
    color: #ffce00; 
}

/* Centered Header Text */
#chatbot-header h2 {
    margin: 0;
    flex: 1;
    text-align: center;
    font-size: 16px;
}

/* Close Button on the Right */
#chatbot-close {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--header-text-color, #ffffff);
    font-size: 24px;
    cursor: pointer;
    transition: color 0.2s;
}

#chatbot-close:hover {
    color: #ff5c5c;
}

/* Chat Messages */
#chatbot-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: var(--window-bg-color, #ffffff);
}

/* Message Styles */
.chatbot-message {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    transition: background-color 0.3s, transform 0.3s;
}

.chatbot-message.bot {
    flex-direction: row;
}
.chatbot-message.user {
    flex-direction: row-reverse;
}

.chatbot-message:hover {
    transform: translateY(-2px);
}

.message-content {
    background-color: var(--bot-msg-bg-color, #ffffff);
    color: var(--text-color, #000000);
    border-radius: 12px;
    padding: 10px 15px;
    max-width: 80%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chatbot-message.user .message-content {
    background-color: var(--user-msg-bg-color, #dcf8c6);
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 10px;
    background-size: cover;
    background-position: center;
}

.chatbot-message.bot .avatar {
    background-image: url('../images/bot-avatar.png'); /* Replace with your bot avatar path */
}

.chatbot-message.user .avatar {
    background-image: url('../images/user-avatar.png'); /* Replace with your user avatar path */
}

/* Rendered HTML Content in Bot Messages */
.chatbot-message.bot .message-content h1,
.chatbot-message.bot .message-content h2,
.chatbot-message.bot .message-content h3,
.chatbot-message.bot .message-content h4,
.chatbot-message.bot .message-content h5,
.chatbot-message.bot .message-content h6 {
    margin: 0 0 10px 0;
}
.chatbot-message.bot .message-content p {
    margin: 0 0 10px;
}
.chatbot-message.bot .message-content a {
    text-decoration: none;
}
.chatbot-message.bot .message-content a:hover { text-decoration: underline; }
.chatbot-message.bot .message-content ul,
.chatbot-message.bot .message-content ol {
    margin: 0 0 10px 20px;
}
.chatbot-message.bot .message-content strong { font-weight: bold; }
.chatbot-message.bot .message-content em { font-style: italic; }
.chatbot-message.bot .message-content code {
    background-color: #f1f1f1; padding: 2px 4px; border-radius: 4px; font-family: monospace;
}

/* Chat Input Area */
#chatbot-input-area {
    display: flex;
    border-top: 1px solid #ccc;
    padding: 10px;
    background-color: #f1f1f1;
}

#chatbot-input {
    flex: 1;
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
}

/* Send Button with white arrow symbol */
#chatbot-send {
    background-color: var(--send-btn-bg-color, #0073aa);
    border: none;
    color: #ffffff; /* White arrow */
    font-size: 20px; /* Larger arrow symbol */
    width: 50px;
    height: 50px;
    margin-left: 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    padding: 0; /* Remove default padding */
    display: flex;
    align-items: center;
    justify-content: center;
}

#chatbot-send:hover {
    background-color: #005177; /* Slightly darker */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Scrollbar Styling */
#chatbot-messages::-webkit-scrollbar {
    width: 8px;
}
#chatbot-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#chatbot-messages::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

/* Typing Indicator */
.chatbot-message.typing .message-content {
    font-style: italic;
    color: #555;
}
.chatbot-message.typing .message-content::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 5px;
    background-color: #555;
    border-radius: 50%;
    animation: typing 1s infinite alternate;
}

@keyframes typing {
    from { transform: translateY(0); opacity: 0.6; }
    to   { transform: translateY(-5px); opacity: 1; }
}

/* Responsive Design */
@media (max-width: 500px) {
    #wp-chatbot {
        width: 100%;
        right: 0;
        bottom: 90px;
        border-radius: 0;
    }
    #chatbot-header h2 { font-size: 14px; }
    #chatbot-send { width: 40px; height: 40px; font-size: 18px; }
    #chatbot-icon { width: 50px; height: 50px; }
    #chatbot-icon img { width: 25px; height: 25px; }
    .chatbot-message.bot .message-content,
    .chatbot-message.user .message-content {
        max-width: 100%;
    }
}

/* Focus Styles for Accessibility */
#chatbot-icon:focus,
#chatbot-close:focus,
#chatbot-send:focus,
#chatbot-input:focus,
#chatbot-expand:focus {
    outline: 2px solid #fff;
    box-shadow: 0 0 0 2px #005177;
}