/*
 * Styles for Stocky Chatbot (Glassmorphism Theme)
 * Author: Stockland
 * Version: 2.8.1
 */

:root {
    --stocky-primary-color: #0073e6;
    --stocky-text-color: #000;
    --stocky-light-text-color: #fff;
    --stocky-bot-message-bg: rgba(255, 255, 255, 0.7);
    --stocky-user-message-bg: var(--stocky-primary-color);
    --stocky-font-family: inherit;
}

#stocky-chat-widget-container {
    position: fixed;
    z-index: 9999;
    direction: rtl;
    font-family: var(--stocky-font-family);
    /* This container is positioned by inline styles from PHP */
    /* It acts as a relative parent for the button and window */
    width: 370px;
    height: calc(70vh + 75px); /* Window height + button height + gap */
    max-width: calc(100vw - 40px);
    max-height: 675px;
    pointer-events: none; /* Allow clicks on elements behind the container */
}

#stocky-chat-widget-container[data-position*="left"] {
    transform-origin: bottom left;
}

#stocky-chat-widget-container[data-position*="right"] {
    transform-origin: bottom right;
}

#stocky-chat-input, #stocky-chat-header h3, #stocky-chat-header p, .chat-message { font-family: inherit; }

#stocky-chat-button { 
    position: absolute;
    bottom: 0;
    width: 60px; 
    height: 60px; 
    background-color: var(--stocky-primary-color); 
    color: var(--stocky-light-text-color); 
    border-radius: 50%; 
    border: none; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); 
    transition: all 0.3s ease;
    pointer-events: auto;
}
#stocky-chat-widget-container[data-position*="left"] #stocky-chat-button {
    left: 0;
}
#stocky-chat-widget-container[data-position*="right"] #stocky-chat-button {
    right: 0;
}


#stocky-chat-button:hover { transform: scale(1.1); }
#stocky-chat-button.hidden { transform: scale(0); opacity: 0; visibility: hidden; }

#stocky-chat-window {
    position: absolute;
    bottom: 75px; /* button height (60) + gap (15) */
    width: 100%; 
    height: calc(100% - 75px); 
    max-width: 370px;
    background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    display: flex; flex-direction: column; overflow: hidden; transition: all 0.3s ease;
    visibility: visible; opacity: 1; transform: scale(1);
    pointer-events: auto;
}
#stocky-chat-widget-container[data-position*="left"] #stocky-chat-window {
    left: 0;
}
#stocky-chat-widget-container[data-position*="right"] #stocky-chat-window {
    right: 0;
}


#stocky-chat-window.hidden { opacity: 0; transform: scale(0.95) translateY(20px); visibility: hidden; }

/* استایل آیکون‌ها */
#stocky-chat-button svg, #stocky-send-button svg { width: 24px; height: 24px; stroke: var(--stocky-light-text-color); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#stocky-close-button { color: var(--stocky-light-text-color); }
.stocky-custom-icon { filter: brightness(0) invert(1); flex-shrink: 0; object-fit: contain; }
#stocky-chat-button .stocky-custom-icon { width: 25px; height: 25px; }
#stocky-send-button .stocky-custom-icon { width: 18px; height: 18px; }
#stocky-close-button .stocky-custom-icon { width: 12px; height: 12px; }

/* هدر */
#stocky-chat-header { background: #ffffff40; color: var(--stocky-light-text-color); padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#stocky-chat-header .header-content h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #222; text-shadow: 0 0 5px rgba(255,255,255,0.5); }
#stocky-chat-header .header-content p { margin: 2px 0 0; font-size: 0.75rem; color: #444; }
#stocky-close-button { background: rgba(0,0,0,0.2); border: none; font-size: 22px; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; line-height: 1; color: #fff; }
#stocky-close-button:hover { background-color: rgba(0,0,0,0.3); }

/* --- استایل‌های جدید برای تغییر حالت --- */
#stocky-mode-switcher {
    display: flex;
    padding: 8px;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
#stocky-mode-switcher.hidden { display: none; }
.mode-tab {
    flex: 1;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: #333;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.mode-tab:hover {
    background: rgba(255, 255, 255, 0.4);
}
.mode-tab.active {
    background: var(--stocky-primary-color);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
}

/* بدنه چت */
#stocky-chat-body { flex-grow: 1; padding: 10px; overflow-y: auto; background: #ffffff40; }
#stocky-messages-container { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.chat-message { padding: 10px 16px; border-radius: 18px; max-width: 85%; line-height: 1.5; font-size: 0.8rem; word-wrap: break-word; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.bot-message { background-color: var(--stocky-bot-message-bg); color: var(--stocky-text-color); border-bottom-left-radius: 4px; align-self: flex-start; }
.user-message { background-color: var(--stocky-user-message-bg); color: var(--stocky-light-text-color); border-bottom-right-radius: 4px; align-self: flex-end; }

/* استایل‌های دکمه‌های انتخاب نقش */
.persona-selector-container { display: flex; flex-direction: column; gap: 12px; }
.persona-selector-container > span { font-weight: 500; color: var(--stocky-text-color); }
.persona-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.persona-button { flex-grow: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; cursor: pointer; font-size: 0.85rem; font-weight: 500; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); color: #111; transition: all 0.2s ease; }
.persona-button:hover { background: rgba(255, 255, 255, 0.7); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.persona-button svg { width: 20px; height: 20px; fill: var(--stocky-primary-color); }

/* استایل‌های کارت‌های محصول */
.product-cards-container { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; align-self: stretch; }
.product-card { display: flex; gap: 12px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 8px rgba(0,0,0,0.07); align-items: center; }
.product-card-image { width: 60px; height: 60px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.product-card-image img { width: 100%; height: 100%; object-fit: cover; }
.product-card-details { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.product-card-title { font-size: 0.85rem; font-weight: 600; color: #111; margin: 0; }
.product-card-price { font-size: 0.8rem; color: #444; margin: 0; }
.product-card-price .amount { font-weight: bold; }
.product-card-button { text-decoration: none; background-color: var(--stocky-primary-color); color: #fff !important; padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; text-align: center; margin-top: 5px; transition: background-color 0.2s; align-self: flex-start; }
.product-card-button:hover { background-color: color-mix(in srgb, var(--stocky-primary-color) 85%, black); }

/* انیمیشن تایپ */
#typing-indicator { padding: 12px 15px; display: flex; align-items: center; background: transparent !important; box-shadow: none; }
#typing-indicator .typing-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #999; display: inline-block; margin: 0 2px; animation: typing-wave 1.3s infinite ease-in-out; }
#typing-indicator .typing-dot:nth-child(2) { animation-delay: -1.1s; }
#typing-indicator .typing-dot:nth-child(3) { animation-delay: -0.9s; }
@keyframes typing-wave { 0%, 60%, 100% { transform: initial; } 30% { transform: translateY(-10px); } }

/* فوتر */
#stocky-chat-footer { padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); background: transparent; flex-shrink: 0; }
#stocky-chat-footer .footer-top { padding: 10px; }
#stocky-chat-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.05); padding: 4px 10px; font-size: 0.7rem; color: #555; }
#stocky-chat-form { display: flex; align-items: center; gap: 10px; }
#stocky-chat-input { flex-grow: 1; border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; padding: 8px 15px; font-size: 0.8rem; transition: all 0.2s; background: rgba(255,255,255,0.5); color: #000; }
#stocky-chat-input::placeholder { color: #555; }
#stocky-chat-input:focus { outline: none; border-color: var(--stocky-primary-color); background: rgba(255,255,255,0.8); }

#stocky-send-button { background-color: var(--stocky-primary-color); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.2s ease; }
#stocky-send-button:hover { background-color: color-mix(in srgb, var(--stocky-primary-color) 85%, black); }

.chat-message a { color: var(--stocky-primary-color); text-decoration: none; font-weight: 600; }
.user-message a { color: #fff; text-decoration: underline; }