/**
 * Pulse Chat AI Plugin Styles
 * Styles for the chat interface
 */

/* Global font family for all plugin elements - prevents theme interference */
.pulse-chat-ai-container,
.pulse-chat-ai-container *,
.pulse-chat-ai-floating-modal,
.pulse-chat-ai-floating-modal * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

.pulse-chat-ai-container {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%;
}

.pulse-chat-ai-messages {
    flex: 1;
    padding: 10vh 40px 20px 40px;
    overflow-y: auto;
    background: #fafafa;
    min-height: 200px;
    scroll-behavior: smooth;
}

.pulse-chat-ai-message {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    animation: fadeIn 0.3s ease-in;
}

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

.pulse-chat-ai-message.user {
    justify-content: flex-end;
}

.pulse-chat-ai-message.assistant {
    justify-content: flex-start;
}

.pulse-chat-ai-message-content {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    word-wrap: break-word;
    line-height: 1.4;
    position: relative;
    font-size: 16px !important;
}

.pulse-chat-ai-message.user .pulse-chat-ai-message-content {
    background: #155dfc;
    color: white;
    border-bottom-right-radius: 4px;
}

.pulse-chat-ai-message.assistant .pulse-chat-ai-message-content {
    background: white;
    color: #333;
    border: 1px solid #e1e1e1;
    border-bottom-left-radius: 4px;
}

.pulse-chat-ai-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    font-weight: bold;
    flex-shrink: 0;
}

.pulse-chat-ai-message.user .pulse-chat-ai-message-avatar {
    background: #155dfc;
    color: white;
    order: 2;
}

.pulse-chat-ai-message.assistant .pulse-chat-ai-message-avatar {
    background: #46b450;
    color: white;
}

.pulse-chat-ai-input-container {
    padding: 16px;
    background: white;
    border-top: 1px solid #e1e1e1;
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

#pulse-chat-ai-input {height: 54px!important;}

.pulse-chat-ai-input-container textarea {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 12px 16px;
    resize: none;
    font-size: 16px !important;
    color: white !important;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s ease;
    max-height: 120px;
    min-height: 44px;
}

.pulse-chat-ai-input-container textarea:focus {
    border-color: #155dfc;
}

.pulse-chat-ai-input-container textarea::placeholder {
    color: #999;
}

.pulse-chat-ai-input-container button {
    background: #155dfc;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 24px 32px;
    font-size: 16px !important;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-chat-ai-input-container button:hover:not(:disabled) {
    background: #0040ff;
}

.pulse-chat-ai-input-container button:active {
    transform: translateY(0);
}

.pulse-chat-ai-input-container button:disabled {
    background: #3c3c3c;
    cursor: not-allowed;
    transform: none;
}

.pulse-chat-ai-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-style: italic;
    font-size: 16px !important;
}

.pulse-chat-ai-thinking::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top: 2px solid #155dfc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pulse-chat-ai-error {
    background: #dc3232;
    color: white;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 16px !important;
}

.pulse-chat-ai-welcome {
    text-align: center;
    color: #666;
    padding: 12vh 0 20px 0;
    font-size: 16px !important;
}

.pulse-chat-ai-welcome::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 12px auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='48' height='48' fill='white'%3E%3Cpath d='M12 1.75C14.9929 1.75 17.7745 1.87521 20.0723 2.09082C21.3077 2.2068 22.3055 3.16404 22.4434 4.41113C22.6381 6.17328 22.75 8.26308 22.75 10.5C22.75 12.7369 22.6381 14.8267 22.4434 16.5889C22.3055 17.8359 21.3078 18.7932 20.0723 18.9092C19.0518 19.0049 17.9363 19.0806 16.75 19.1377V20.7705C16.7498 21.5875 16.0875 22.2498 15.2705 22.25C14.9171 22.25 14.5749 22.1236 14.3066 21.8936L11.2197 19.2461C8.52443 19.2263 6.02473 19.106 3.92773 18.9092C2.69204 18.7932 1.69445 17.8358 1.55664 16.5889C1.36191 14.8267 1.25 12.7369 1.25 10.5C1.25 8.26308 1.36191 6.17328 1.55664 4.41113C1.69447 3.16404 2.69226 2.20681 3.92773 2.09082C6.22548 1.87521 9.00709 1.75 12 1.75ZM8.00879 9.5C7.45662 9.50013 7.00879 9.9478 7.00879 10.5C7.00879 11.0522 7.45662 11.4999 8.00879 11.5H8.01758L8.12012 11.4951C8.62432 11.4439 9.01758 11.0177 9.01758 10.5C9.01758 9.98227 8.62432 9.55615 8.12012 9.50488L8.01758 9.5H8.00879ZM12.0039 9.5C11.4519 9.50032 11.0039 9.94791 11.0039 10.5C11.0039 11.0521 11.4519 11.4997 12.0039 11.5H12.0137C12.5658 11.4998 13.0137 11.0521 13.0137 10.5C13.0137 9.94785 12.5658 9.50022 12.0137 9.5H12.0039ZM16 9.5C15.4478 9.50013 15 9.9478 15 10.5C15 11.0522 15.4478 11.4999 16 11.5H16.0088C16.5611 11.5 17.0088 11.0523 17.0088 10.5C17.0088 9.94773 16.5611 9.50002 16.0088 9.5H16Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Quick Questions */
.pulse-chat-ai-quick-questions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    margin-bottom: 20px;
}

.pulse-chat-ai-quick-question {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 12px 16px;
    font-size: 16px !important;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    user-select: none;
}

.pulse-chat-ai-quick-question:hover {
    background: #e8f4fd;
    border-color: #155dfc;
    color: #ffffff;
}

.pulse-chat-ai-quick-question:active {
    transform: scale(0.98);
}

/* Quick questions in floating modal */
.pulse-chat-ai-floating-modal .pulse-chat-ai-quick-questions {
    padding: 0 20px;
}

/* ===========================================
   FLOATING CHAT SPECIFIC STYLES
   =========================================== */

.pulse-chat-ai-messages-floating {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #fafafa;
    min-height: 100px;
    scroll-behavior: smooth;
}

.pulse-chat-ai-message-floating {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    animation: fadeIn 0.3s ease-in;
}

.pulse-chat-ai-message-floating.user {
    justify-content: flex-end;
}

.pulse-chat-ai-message-floating.assistant {
    justify-content: flex-start;
}

.pulse-chat-ai-message-content-floating {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    word-wrap: break-word;
    line-height: 1.4;
    position: relative;
    font-size: 16px !important;
}

.pulse-chat-ai-message-floating.user .pulse-chat-ai-message-content-floating {
    background: #155dfc;
    color: white;
    border-bottom-right-radius: 4px;
}

.pulse-chat-ai-message-floating.assistant .pulse-chat-ai-message-content-floating {
    background: white;
    color: #333;
    border: 1px solid #e1e1e1;
    border-bottom-left-radius: 4px;
}

.pulse-chat-ai-message-avatar-floating {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    font-weight: bold;
    flex-shrink: 0;
}

.pulse-chat-ai-message-floating.user .pulse-chat-ai-message-avatar-floating {
    background: #155dfc;
    color: white;
    order: 2;
}

.pulse-chat-ai-message-floating.assistant .pulse-chat-ai-message-avatar-floating {
    background: #46b450;
    color: white;
}

.pulse-chat-ai-input-container-floating {
    padding: 16px;
    background: white;
    border-top: 1px solid #e1e1e1;
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.pulse-chat-ai-input-container-floating textarea {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    resize: none;
    font-size: 16px !important;
    color: white !important;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s ease;
    max-height: 120px;
    min-height: 44px;
}

.pulse-chat-ai-input-container-floating textarea:focus {
    border-color: #155dfc;
}

.pulse-chat-ai-input-container-floating textarea::placeholder {
    color: #999;
}

.pulse-chat-ai-input-container-floating button {
    background: #155dfc;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 22px 32px;
    font-size: 16px !important;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-chat-ai-input-container-floating button:hover:not(:disabled) {
    background: #0040ff;
}

.pulse-chat-ai-input-container-floating button:active {
    transform: translateY(0);
}

.pulse-chat-ai-input-container-floating button:disabled {
    background: #3c3c3c;
    cursor: not-allowed;
    transform: none;
}

.pulse-chat-ai-thinking-floating {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-style: italic;
    font-size: 16px !important;
}

.pulse-chat-ai-thinking-floating::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top: 2px solid #155dfc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.pulse-chat-ai-error-floating {
    background: #dc3232;
    color: white;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 16px !important;
}

.pulse-chat-ai-welcome-floating {
    text-align: center;
    color: #666;
    padding: 2vh 0 20px 0;
    font-size: 16px !important;
}

.pulse-chat-ai-welcome-floating::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 12px auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='48' height='48' fill='white'%3E%3Cpath d='M12 1.75C14.9929 1.75 17.7745 1.87521 20.0723 2.09082C21.3077 2.2068 22.3055 3.16404 22.4434 4.41113C22.6381 6.17328 22.75 8.26308 22.75 10.5C22.75 12.7369 22.6381 14.8267 22.4434 16.5889C22.3055 17.8359 21.3078 18.7932 20.0723 18.9092C19.0518 19.0049 17.9363 19.0806 16.75 19.1377V20.7705C16.7498 21.5875 16.0875 22.2498 15.2705 22.25C14.9171 22.25 14.5749 22.1236 14.3066 21.8936L11.2197 19.2461C8.52443 19.2263 6.02473 19.106 3.92773 18.9092C2.69204 18.7932 1.69445 17.8358 1.55664 16.5889C1.36191 14.8267 1.25 12.7369 1.25 10.5C1.25 8.26308 1.36191 6.17328 1.55664 4.41113C1.69447 3.16404 2.69226 2.20681 3.92773 2.09082C6.22548 1.87521 9.00709 1.75 12 1.75ZM8.00879 9.5C7.45662 9.50013 7.00879 9.9478 7.00879 10.5C7.00879 11.0522 7.45662 11.4999 8.00879 11.5H8.01758L8.12012 11.4951C8.62432 11.4439 9.01758 11.0177 9.01758 10.5C9.01758 9.98227 8.62432 9.55615 8.12012 9.50488L8.01758 9.5H8.00879ZM12.0039 9.5C11.4519 9.50032 11.0039 9.94791 11.0039 10.5C11.0039 11.0521 11.4519 11.4997 12.0039 11.5H12.0137C12.5658 11.4998 13.0137 11.0521 13.0137 10.5C13.0137 9.94785 12.5658 9.50022 12.0137 9.5H12.0039ZM16 9.5C15.4478 9.50013 15 9.9478 15 10.5C15 11.0522 15.4478 11.4999 16 11.5H16.0088C16.5611 11.5 17.0088 11.0523 17.0088 10.5C17.0088 9.94773 16.5611 9.50002 16.0088 9.5H16Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Quick Questions for Floating Chat */
.pulse-chat-ai-quick-questions-floating {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    margin-bottom: 20px;
}

.pulse-chat-ai-quick-question-floating {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 12px 16px;
    font-size: 16px !important;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    user-select: none;
}

.pulse-chat-ai-quick-question-floating:hover {
    background: #e8f4fd;
    border-color: #155dfc;
    color: #ffffff;
}

.pulse-chat-ai-quick-question-floating:active {
    transform: scale(0.98);
}

/* Responsive */
@media (max-width: 768px) {
    .pulse-chat-ai-container {
        border-radius: 4px;
    }

    .pulse-chat-ai-welcome {
        padding: 2vh 0 20px 0;
    }
    
    .pulse-chat-ai-messages {
        padding: 12vh 10px 20px 10px;
    }
    
    .pulse-chat-ai-message-content {
        max-width: 90%;
        padding: 10px 14px;
        font-size: 16px !important;
    }
    
    .pulse-chat-ai-welcome {
        font-size: 16px !important;
    }
    
    .pulse-chat-ai-input-container {
        padding: 12px;
        gap: 8px;
    }
    
    .pulse-chat-ai-input-container textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        color: white !important;
    }

    .pulse-chat-ai-quick-questions {
        flex-direction: column;
    }
    
    /* Floating chat responsive styles */
    .pulse-chat-ai-welcome-floating {
        padding: 2vh 0 20px 0;
    }
    
    .pulse-chat-ai-message-content-floating {
        font-size: 16px !important;
    }
    
    .pulse-chat-ai-quick-questions-floating {
        flex-direction: column;
    }
     
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .pulse-chat-ai-message,
    .pulse-chat-ai-message-floating,
    .pulse-chat-ai-input-container button,
    .pulse-chat-ai-input-container-floating button,
    .pulse-chat-ai-thinking::after,
    .pulse-chat-ai-thinking-floating::after {
        animation: none;
        transition: none;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .pulse-chat-ai-container {
        background: #000000;
        border-color: #020202;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .pulse-chat-ai-messages {
        background: #000000;
        width: 100%;
    }
    
    .pulse-chat-ai-message.assistant .pulse-chat-ai-message-content {
        background: #1d1d1d;
        color: #ffffff;
        border-color: #323232;
    }
    
    .pulse-chat-ai-input-container {
        background: #000000;
        border-color: #000000;
        display: flex;
        width: 100%;
        max-width: 700px;
        align-items: center;
        justify-content: center;
    }
    
    .pulse-chat-ai-input-container textarea {
        background: #1d1d1d;
        color: white !important;
        border-color: #323232;
    }
    
    .pulse-chat-ai-input-container textarea::placeholder {
        color: #aaa;
    }
    
    .pulse-chat-ai-welcome {
        color: #aaa;
    }
    
    .pulse-chat-ai-quick-question {
        background: #1d1d1d;
        border-color: #323232;
        color: #ffffff;
    }
    
    .pulse-chat-ai-quick-question:hover {
        background: #2a2a2a;
        border-color: #155dfc;
        color: #155dfc;
    }
    
    /* Floating chat dark mode styles */
    .pulse-chat-ai-messages-floating {
        background: #000000;
    }
    
    .pulse-chat-ai-message-floating.assistant .pulse-chat-ai-message-content-floating {
        background: #1d1d1d;
        color: #ffffff;
        border-color: #323232;
    }
    
    .pulse-chat-ai-input-container-floating {
        background: #000000;
        border-color: #000000;
        display: flex;
        max-width: 700px;
        align-items: center;
        justify-content: center;
    }
    
    .pulse-chat-ai-input-container-floating textarea {
        background: #1d1d1d;
        color: white !important;
        border-color: #323232;
    }
    
    .pulse-chat-ai-input-container-floating textarea::placeholder {
        color: #aaa;
    }
    
    .pulse-chat-ai-welcome-floating {
        color: #aaa;
    }
    
    .pulse-chat-ai-quick-question-floating {
        background: #1d1d1d;
        border-color: #323232;
        color: #ffffff;
    }
    
    .pulse-chat-ai-quick-question-floating:hover {
        background: #2a2a2a;
        border-color: #155dfc;
        color: #155dfc;
    }
}

/* Custom scrollbar */
.pulse-chat-ai-messages::-webkit-scrollbar {
    width: 6px;
}

.pulse-chat-ai-messages::-webkit-scrollbar-track {
    background: transparent;
}

.pulse-chat-ai-messages::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.pulse-chat-ai-messages::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Custom scrollbar for floating chat */
.pulse-chat-ai-messages-floating::-webkit-scrollbar {
    width: 6px;
}

.pulse-chat-ai-messages-floating::-webkit-scrollbar-track {
    background: transparent;
}

.pulse-chat-ai-messages-floating::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.pulse-chat-ai-messages-floating::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Floating Chat Styles */
.pulse-chat-ai-floating-bubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #155dfc;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(21, 93, 252, 0.3);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.pulse-chat-ai-floating-bubble:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(21, 93, 252, 0.4);
}

.pulse-chat-ai-floating-bubble.hidden {
    display: none;
}

.pulse-chat-ai-bubble-icon {
    font-size: 24px;
    color: white;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-chat-ai-bubble-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.pulse-chat-ai-floating-modal {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 420px;
    height: 80%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 9998;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.pulse-chat-ai-floating-modal.show {
    display: flex;
    animation: slideInUp 0.3s ease-out;
}

.pulse-chat-ai-floating-modal.hide {
    display: flex;
    animation: slideOutDown 0.3s ease-in;
}

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

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

.pulse-chat-ai-modal-header {
    background: #155dfc;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.pulse-chat-ai-modal-header h4 {
    margin: 0;
    font-size: 16px !important;
    font-weight: 600;
    color: #fff;
}

.pulse-chat-ai-modal-controls {
    display: flex;
    gap: 8px;
}

.pulse-chat-ai-modal-controls button {
    background: transparent;
    border: none;
    color: white;
    width: auto;
    height: auto;
    padding: 0;
    cursor: pointer;
    font-size: 24px !important;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    line-height: 1;
}

.pulse-chat-ai-modal-controls button:hover {
    opacity: 0.7;
}

.pulse-chat-ai-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pulse-chat-ai-floating-modal .pulse-chat-ai-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #fafafa;
    min-height: auto;
}

.pulse-chat-ai-floating-modal .pulse-chat-ai-input-container {
    padding: 16px;
    background: white;
    border-top: 1px solid #e1e1e1;
}

/* Responsive for floating chat */
@media (max-width: 768px) {
    .pulse-chat-ai-floating-modal {
        width: calc(100vw - 40px);
        height: 80vh;
        bottom: 20px;
        right: 20px;
        left: 20px;
    }
    
    .pulse-chat-ai-floating-bubble {
        bottom: 15px;
        right: 15px;
        width: 50px;
        height: 50px;
    }
    
    .pulse-chat-ai-bubble-icon {
        font-size: 20px;
    }
    
    .pulse-chat-ai-bubble-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* Dark mode for floating chat */
@media (prefers-color-scheme: dark) {
    .pulse-chat-ai-floating-modal {
        background: #1e1e1e;
        border: 1px solid #444;
    }
    
    .pulse-chat-ai-floating-modal .pulse-chat-ai-messages {
        background: #111111;
    }
    
    .pulse-chat-ai-floating-modal .pulse-chat-ai-input-container {
        background: #111111;
        border-color: #444;
    }
}