/**
 * File: /wp-content/plugins/hakichat/public/assets/css/hakichat-public.css
 * (FINAL JAVASCRIPT-CONTROLLED VERSION)
 * - Simplified to remove visibility/opacity rules, which are now controlled by main.js.
 * - This prevents CSS conflicts with the host environment.
 * @package HakiChat
 */

/* --- CSS Variables for Easy Theming --- */
:root {
	--hakichat-primary-color: #4f46e5;
	--hakichat-background-color: #ffffff;
	--hakichat-messages-background: #f9fafb;
	--hakichat-header-text-color: #ffffff;
	--hakichat-bot-message-bg: #f3f4f6;
	--hakichat-user-message-bg: var(--hakichat-primary-color);
	--hakichat-bot-message-text: #1f2937;
	--hakichat-user-message-text: #ffffff;
	--hakichat-border-radius: 12px;
	--hakichat-widget-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--hakichat-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Container Logic --- */
.hakichat-widget-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 2147483647;
}

.hakichat-inline-container {
	position: relative;
	width: 100%;
	max-width: 450px;
	height: 650px;
	margin: 20px auto;
}

/* --- Chat Window (Base styles) --- */
.hakichat-widget {
	display: flex; /* Kept for flexbox layout */
	flex-direction: column;
	background-color: var(--hakichat-background-color);
	border: 1px solid #e5e7eb;
	border-radius: var(--hakichat-border-radius);
	box-shadow: var(--hakichat-widget-shadow);
	overflow: hidden;
}

/* ==========================================================================
   SIMPLIFIED DISPLAY RULES
   ========================================================================== */

/* --- 1. Styles for WIDGET mode (Bubble & Embed) --- */

/* 
 * CHIẾN THUẬT MỚI: Luôn hiển thị widget, nhưng giấu nó ở bên ngoài màn hình.
 * Chúng ta sẽ dùng "transform" thay vì "display".
*/
.hakichat-widget-container .hakichat-widget {
	width: 370px;
	height: clamp(400px, 70vh, 700px);
	position: absolute;
	bottom: calc(100% + 10px);
	right: 0;
    
    /* Luôn hiển thị, không dùng display: none nữa */
    display: flex !important;
    visibility: visible !important;
    
    /* Dùng transform để giấu nó đi */
    opacity: 0;
    transform: translateX(120%); /* Đẩy nó sang phải, ra khỏi màn hình */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none;
}

/* KHI NHẤN VÀO BONG BÓNG: Di chuyển widget vào trong màn hình */
.hakichat-widget-container.hakichat-is-active .hakichat-widget {
	opacity: 1;
    transform: translateX(0); /* Kéo nó về vị trí ban đầu */
    pointer-events: auto;
}

/* --- 2. Styles for INLINE mode (Shortcode) --- */
/* Overrides widget styles to be always visible */
.hakichat-inline-container .hakichat-widget {
	display: flex; /* Always visible for inline mode */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
    transition: none;
}

/* --- Toggle Button (Bubble) --- */
#hakichat-bubble {
	width: 60px;
	height: 60px;
	background-color: var(--hakichat-primary-color);
	color: white;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	box-shadow: var(--hakichat-widget-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease-in-out;
}
#hakichat-bubble:hover { transform: scale(1.1); }

.hakichat-inline-container #hakichat-bubble { display: none; }

#hakichat-bubble .hakichat-icon-close { display: none; }
.hakichat-widget-container.active #hakichat-bubble .hakichat-icon-close { display: block; }
.hakichat-widget-container.active #hakichat-bubble .hakichat-icon-chat { display: none; }

/* --- Header --- */
.hakichat-header { background-color: var(--hakichat-primary-color); padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.hakichat-header-info { display: flex; align-items: center; }
.hakichat-header-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 12px; object-fit: cover; border: 2px solid rgba(255,255,255,0.3); }
.hakichat-header-text { display: flex; flex-direction: column; }
.hakichat-header-name { font-weight: 600; font-size: 16px; color: var(--hakichat-header-text-color); }
.hakichat-header-status { font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.hakichat-close-btn { background: none; border: none; color: var(--hakichat-header-text-color); font-size: 24px; cursor: pointer; opacity: 0.8; }
.hakichat-close-btn:hover { opacity: 1; }
.hakichat-inline-container .hakichat-close-btn { display: none; }

/* --- Messages Area --- */
#hakichat-messages { flex: 1 1 auto; padding: 16px; overflow-y: auto; font-family: var(--hakichat-font-family); background-color: var(--hakichat-messages-background); }
.hakichat-message { display: flex; margin-bottom: 12px; max-width: 85%; line-height: 1.5; }
.hakichat-message p { padding: 10px 14px; border-radius: 18px; margin: 0; word-wrap: break-word; }
.bot-message { justify-content: flex-start; }
.bot-message p { background-color: var(--hakichat-bot-message-bg); color: var(--hakichat-bot-message-text); border-bottom-left-radius: 4px; }
.user-message { justify-content: flex-end; margin-left: auto; }
.user-message p { background-color: var(--hakichat-user-message-bg); color: var(--hakichat-user-message-text); border-bottom-right-radius: 4px; }

/* --- Options / Buttons for Survey --- */
.options-container { background: transparent !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.hakichat-option-button { background-color: var(--hakichat-background-color); border: 1px solid var(--hakichat-primary-color); color: var(--hakichat-primary-color); padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: background-color 0.2s, color 0.2s; }
.hakichat-option-button:hover { background-color: var(--hakichat-primary-color); color: #fff; }
.hakichat-option-button:disabled { background-color: #e9e9eb; border-color: #e9e9eb; color: #8d8d8d; cursor: not-allowed; }

/* --- Typing Indicator --- */
.typing-indicator { align-items: center; padding: 10px 14px; }
.typing-indicator span { width: 8px; height: 8px; margin: 0 2px; background-color: #a1a1aa; border-radius: 50%; display: inline-block; animation: wave 1.3s linear infinite; }
.typing-indicator span:nth-child(2) { animation-delay: -1.1s; }
.typing-indicator span:nth-child(3) { animation-delay: -0.9s; }
@keyframes wave { 0%, 60%, 100% { transform: initial; } 30% { transform: translateY(-8px); } }

/* --- Input Area --- */
.hakichat-input-area { padding: 10px 15px; border-top: 1px solid #e5e7eb; flex-shrink: 0; background-color: var(--hakichat-background-color); }
#hakichat-input-form { display: flex; align-items: center; }
#hakichat-user-input { flex: 1; border: 1px solid #ccc; border-radius: 20px; padding: 10px 15px; font-size: 14px; font-family: var(--hakichat-font-family); resize: none; margin-right: 10px; }
#hakichat-user-input:focus { outline: none; border-color: var(--hakichat-primary-color); }
#hakichat-send-btn { background: none; border: none; cursor: pointer; color: var(--hakichat-primary-color); padding: 5px; }
#hakichat-send-btn:disabled { color: #9ca3af; cursor: not-allowed; }

/* --- Footer --- */
.hakichat-footer { padding: 8px; text-align: center; font-size: 12px; color: #9ca3af; background-color: #f9fafb; flex-shrink: 0; }
.hakichat-footer a { color: #6b7280; text-decoration: none; }

/* --- Responsive Design for Widget Mode --- */
@media (max-width: 480px) {
	.hakichat-widget-container { width: auto; height: auto; bottom: 15px; right: 15px; }
    .hakichat-widget-container.active { width: 100%; height: 100%; bottom: 0; right: 0; border-radius: 0; }
	.hakichat-widget-container.active .hakichat-widget { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; box-shadow: none; }
    #hakichat-bubble { position: fixed; bottom: 15px; right: 15px; }
}

/* --- Warning/Notice Message Style --- */
.hakichat-message.warning-message p { background-color: #fffbe6; border-left: 4px solid #ffc107; color: #664d03; padding: 12px 15px; border-radius: 4px; margin: 0; line-height: 1.6; }
.hakichat-message.warning-message p strong { color: #d63638; font-weight: 600; }

/* ==========================================================================
   Pulsing Halo Effect for Bubble
   ========================================================================== */

#hakichat-bubble::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--hakichat-primary-color);
    animation: pulse 2s infinite;
    z-index: -1; /* Đặt hào quang phía sau bong bóng */
}

/* Animation definition */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }

    70% {
        transform: scale(1.4);
        opacity: 0;
    }

    100% {
        transform: scale(0.95);
        opacity: 0;
    }
}

/* Tắt hiệu ứng khi cửa sổ chat đang mở */
.hakichat-widget-container.hakichat-is-active #hakichat-bubble::before {
    animation: none;
    display: none;
}