/* WP Tuti ChatBot Widget Styles */

/* Ensure body allows fixed positioning */
body {
    position: relative;
}

/* Button styles */
#wp-tuti-button {
    outline: none !important;
    border: none !important;
}

#wp-tuti-button:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

#wp-tuti-button:active {
    transform: scale(0.95) !important;
}

/* Chat box styles - Smaller and minimal */
#wp-tuti-chat {
    outline: none !important;
    border: none !important;
}

#wp-tuti-input {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#wp-tuti-input:focus {
    outline: none !important;
    border-color: #0a84ff !important;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1) !important;
}

#wp-tuti-send:hover {
    transform: scale(1.15) !important;
    opacity: 0.8 !important;
}

#wp-tuti-send:active {
    transform: scale(0.95) !important;
}

#wp-tuti-chat-messages {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Scrollbar styling for webkit browsers */
#wp-tuti-chat-messages::-webkit-scrollbar {
    width: 6px !important;
}

#wp-tuti-chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

#wp-tuti-chat-messages::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 10px !important;
}

#wp-tuti-chat-messages::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

/* Bot message formatting */
#wp-tuti-chat-messages p {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
}

#wp-tuti-chat-messages p:last-child {
    margin-bottom: 0 !important;
}

/* List styles - improved */
#wp-tuti-chat-messages ul,
#wp-tuti-chat-messages ol {
    margin: 8px 0 !important;
    padding-left: 20px !important;
    line-height: 1.6 !important;
}

#wp-tuti-chat-messages ul {
    list-style-type: disc !important;
}

#wp-tuti-chat-messages ol {
    list-style-type: decimal !important;
}

#wp-tuti-chat-messages li {
    margin: 3px 0 !important;
    padding: 0 !important;
}

/* Remove extra spacing between adjacent elements */
#wp-tuti-chat-messages p + p {
    margin-top: 8px !important;
}

#wp-tuti-chat-messages p + ul,
#wp-tuti-chat-messages p + ol {
    margin-top: 8px !important;
}

#wp-tuti-chat-messages ul + p,
#wp-tuti-chat-messages ol + p {
    margin-top: 8px !important;
}

/* Link styles */
#wp-tuti-chat-messages a {
    word-break: break-word !important;
    font-weight: 500 !important;
}

/* Strong text */
#wp-tuti-chat-messages strong {
    font-weight: 600 !important;
}
    padding: 0 2px 0 4px !important;
    line-height: 1.5 !important;
    display: list-item !important;
}

#wp-tuti-chat-messages li::marker {
    color: #666 !important;
}

/* Text formatting */
#wp-tuti-chat-messages strong {
    font-weight: 600 !important;
    color: #333 !important;
}

#wp-tuti-chat-messages em {
    font-style: italic !important;
}

/* Link styles */
#wp-tuti-chat-messages a {
    color: inherit !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: opacity 0.2s ease !important;
}

#wp-tuti-chat-messages a:hover {
    opacity: 0.8 !important;
}

/* Typing indicator */
.tuti-typing-indicator {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    margin: 8px 0 !important;
    background: #f0f0f0 !important;
    border-radius: 14px !important;
    max-width: 50px !important;
    animation: fadeIn 0.3s ease !important;
}

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

.tuti-typing-indicator span {
    height: 6px !important;
    width: 6px !important;
    background: #999 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin: 0 1.5px !important;
    animation: typing 1.4s infinite !important;
}

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

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

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

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-7px);
        opacity: 1;
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    #wp-tuti-button {
        width: 50px !important;
        height: 50px !important;
        bottom: var(--tuti-margin-mobile, 16px) !important;
        right: var(--tuti-margin-mobile, 16px) !important;
        left: auto !important;
        transform: none !important;
    }
    
    #wp-tuti-chat {
        width: calc(100% - var(--tuti-margin-mobile, 16px) * 2) !important;
        height: calc(100vh - 120px) !important;
        max-height: 70vh !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}