/* ===== Tanolope Custom Styles ===== */
/* Tailwind is loaded via CDN in head.blade.php */

:root {
    --brand-green: #43a047;
    --brand-green-dark: #388e3c;
    --brand-green-light: #8bc34a;
    --brand-blue: #0056b3;
    --brand-blue-dark: #003d80;
    --brand-teal: #006d5b;
    --brand-teal-dark: #004d40;
    --brand-orange: #f7941d;
    --brand-light: #f0faf3;
    --brand-cream: #fefdf8;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Notification animation */
@keyframes slideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
.animate-slide-in { animation: slideIn 0.3s ease forwards; }

/* Scroll animations */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.animate-in { opacity: 1; transform: translateY(0); }

/* Hero slider */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.hero-slide.active {
    opacity: 1;
}
.hero-content {
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}
.hero-content.active {
    pointer-events: auto;
}

/* Scrollbar hide */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Footer mobile accordion */
.footer-section-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.footer-section-content.open { max-height: 500px; }

/* Community post styles */
.community-post:hover { background-color: #f9fafb; }

/* ===== ModuLink AI Chat Widget Custom Styling ===== */
/* Override the floating chat button with Tanolope brand colors */
#mlk-chat-btn {
    background: linear-gradient(135deg, #8bc34a, #43a047) !important;
    width: 60px !important;
    height: 60px !important;
    box-shadow: 0 4px 12px rgba(67, 160, 71, 0.4) !important;
    border: 2px solid #fff !important;
}

#mlk-chat-btn:hover {
    background: linear-gradient(135deg, #43a047, #388e3c) !important;
    transform: scale(1.05) !important;
}

/* Override the chat window */
#mlk-chat-window {
    width: 380px !important;
    height: 520px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid #e5e7eb !important;
}

/* Chat window header */
#mlk-chat-header {
    background: linear-gradient(135deg, #006d5b, #004d40) !important;
    color: #fff !important;
}

/* Send button with brand color */
#mlk-send {
    background: linear-gradient(135deg, #8bc34a, #43a047) !important;
    color: #fff !important;
}

#mlk-send:hover {
    background: linear-gradient(135deg, #43a047, #388e3c) !important;
}

/* Chat message bubbles - user messages */
.mlk-message-user {
    background: linear-gradient(135deg, #006d5b, #004d40) !important;
    color: #fff !important;
}

/* Chat message bubbles - AI messages */
.mlk-message-ai {
    background: #f0faf3 !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
}

/* Input field styling */
#mlk-input {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
}

#mlk-input:focus {
    border-color: #8bc34a !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.2) !important;
}