/* TailwindCSS Primitives - You might want to use a more robust reset */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
.w-80 { width: 20rem; } .h-\[450px\] { height: 450px; } .bg-gray-100 { background-color: #f3f4f6; }
.rounded-xl { border-radius: 0.75rem; } .rounded-t-xl { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); } .flex { display: flex; } .flex-col { flex-direction: column; }
.text-white { color: #fff; } .p-3 { padding: 0.75rem; } .font-semibold { font-weight: 600; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
.flex-1 { flex: 1 1 0%; } .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(0.75rem * calc(1 - 0)); margin-bottom: calc(0.75rem * 0); }
.overflow-y-auto { overflow-y: auto; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .pt-2 { padding-top: 0.5rem; }
.text-xs { font-size: 0.75rem; } .text-gray-500 { color: #6b7280; } .font-medium { font-weight: 500; }
.border-t { border-top-width: 1px; } .border-gray-200 { border-color: #e5e7eb; } .p-2 { padding: 0.5rem; } .pt-1 { padding-top: 0.25rem; }
.flex-wrap { flex-wrap: wrap; } .gap-2 { gap: 0.5rem; } .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.items-center { align-items: center; } .justify-center { justify-content: center; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
.duration-300 { transition-duration: .3s; } .w-full { width: 100%; } .h-full { height: 100%; } .object-cover { object-fit: cover; }
.w-1\/2 { width: 50%; } .h-1\/2 { height: 50%; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; }
.message-bubble { border-radius: 12px; padding: 10px 14px; max-width: 85%; } .bot-message .message-bubble { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.user-message .message-bubble { background-color: #d9fdd3; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .text-sm { font-size: 0.875rem; } .bg-white { background-color: #fff; }
.border { border-width: 1px; } .border-gray-300 { border-color: #d1d5db; } .rounded-full { border-radius: 9999px; } .hover\:bg-gray-50:hover { background-color: #f9fafb; }
.p-1 { padding: 0.25rem; } .max-w-xs { max-width: 20rem; } .rounded-md { border-radius: 0.375rem; } .h-auto { height: auto; }
.aspect-video { aspect-ratio: 16 / 9; }

/* Custom Chat Widget Styles */
#chatbot-container {
    font-family: 'Noto Sans TC', sans-serif;
}
#chat-window {
    transition: all 0.3s ease;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
}
#chat-window.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
#chatbot-icon {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
}
#chatbot-icon.hidden-icon {
    transform: scale(0.8);
    opacity: 0;
    pointer-events: none;
}
/* Typing Indicator */
.typing-indicator { display: flex; align-items: center; }
.typing-indicator span { height: 6px; width: 6px; background-color: #9ca3af; border-radius: 50%; margin: 0 2px; animation: bounce 1.2s infinite ease-in-out both; }
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }

/* Scrollbar styling */
#chat-messages::-webkit-scrollbar { width: 6px; }
#chat-messages::-webkit-scrollbar-track { background: #f1f1f1; }
#chat-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
#chat-messages::-webkit-scrollbar-thumb:hover { background: #aaa; }