/* =========================================
   Wifri AI Chatbot — Modern Chat Widget CSS
   ========================================= */

:root {
    --wifri-color: #1a56db;
    --wifri-color-dark: #1648b8;
    --wifri-color-rgb: 26, 86, 219;
    --wifri-radius: 20px;
    --wifri-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 20px rgba(0,0,0,0.1);
}

#wifri-chat-container {
    position: fixed;
    bottom: 28px;
    z-index: 2147483000;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}
#wifri-chat-container.wifri-chat-right { right: 28px; }
#wifri-chat-container.wifri-chat-left  { left: 28px; }

.wifri-notif-badge {
    position: absolute; top: -4px; right: -4px;
    width: 20px; height: 20px;
    background: #ef4444; color: white;
    font-size: 11px; font-weight: 700;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    animation: wifri-pulse-badge 2s infinite;
    box-shadow: 0 0 0 3px white;
}
.wifri-notif-badge.hidden { display: none; }
@keyframes wifri-pulse-badge {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.15); }
}

.wifri-chat-toggle {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--wifri-color);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 24px rgba(var(--wifri-color-rgb), 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden; outline: none;
}
.wifri-chat-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 30px rgba(var(--wifri-color-rgb), 0.6);
}
.wifri-toggle-inner {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    color: white; width: 100%; height: 100%;
}
.wifri-toggle-inner svg { width: 26px; height: 26px; transition: all 0.3s; }

/* Logo image in toggle button */
.wifri-toggle-logo-img {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.5);
    display: block;
}

.wifri-icon-close { display: none; }
.wifri-chat-open .wifri-icon-open  { display: none; }
.wifri-chat-open .wifri-icon-close { display: block; }
.wifri-toggle-ripple {
    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(255,255,255,0.15);
    animation: wifri-toggle-ripple 2.5s infinite;
}
@keyframes wifri-toggle-ripple {
    0%   { transform: scale(1); opacity: 0.5; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { opacity: 0; }
}

.wifri-chat-window {
    position: absolute; bottom: 76px;
    width: 380px; height: 560px;
    background: #f0f2f5;
    border-radius: var(--wifri-radius);
    box-shadow: var(--wifri-shadow);
    display: none; flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    transform-origin: bottom right;
}
.wifri-chat-right .wifri-chat-window { right: 0; }
.wifri-chat-left  .wifri-chat-window { left: 0; }
.wifri-chat-window.wifri-anim-in  { display: flex; animation: wifri-open 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
.wifri-chat-window.wifri-anim-out { animation: wifri-close-anim 0.2s ease forwards; }
@keyframes wifri-open       { from { opacity:0; transform:scale(0.85) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes wifri-close-anim { from { opacity:1; transform:scale(1) translateY(0); } to { opacity:0; transform:scale(0.85) translateY(20px); } }

.wifri-chat-header { position: relative; flex-shrink: 0; overflow: hidden; border-radius: var(--wifri-radius) var(--wifri-radius) 0 0; }
.wifri-header-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--wifri-color) 0%, var(--wifri-color-dark) 100%); }
.wifri-header-bg::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(0,0,0,0.1) 0%, transparent 50%);
}
.wifri-chat-header-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.wifri-chat-header-left { display: flex; align-items: center; gap: 12px; }
.wifri-bot-avatar-wrap  { position: relative; flex-shrink: 0; }
.wifri-bot-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.wifri-bot-avatar svg { width: 40px; height: 40px; }
.wifri-online-dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 11px; height: 11px;
    background: #22c55e; border-radius: 50%; border: 2px solid white;
}
.wifri-bot-info { display: flex; flex-direction: column; }
.wifri-bot-name { color: white; font-weight: 700; font-size: 15px; line-height: 1.2; }
.wifri-bot-status { color: rgba(255,255,255,0.8); font-size: 11px; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.wifri-status-dot { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; animation: wifri-blink 2s infinite; }
@keyframes wifri-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.wifri-chat-header-actions { display: flex; gap: 6px; align-items: center; }
#wifri-chat-container .wifri-header-btn {
    width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important;
    padding: 0 !important; margin: 0 !important;
    background: rgba(255,255,255,0.2) !important; border: none !important; border-radius: 8px !important;
    cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background 0.15s !important; box-shadow: none !important; outline: none !important;
    line-height: 1 !important; font-size: 0 !important;
}
#wifri-chat-container .wifri-header-btn:hover { background: rgba(255,255,255,0.35) !important; }
#wifri-chat-container .wifri-header-btn svg {
    width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important;
    display: block !important; fill: #ffffff !important; color: #ffffff !important; flex-shrink: 0 !important; pointer-events: none;
}

.wifri-tab-bar { display: flex; background: white; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.wifri-tab-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; font-size: 13px; font-weight: 500; color: #6b7280; transition: all 0.15s;
}
.wifri-tab-btn svg { width: 15px; height: 15px; }
.wifri-tab-btn.active, .wifri-tab-btn:hover { color: var(--wifri-color); border-bottom-color: var(--wifri-color); }

.wifri-tab-pane { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.wifri-tab-pane.active { display: flex; }

.wifri-messages {
    flex: 1; overflow-y: auto;
    padding: 16px 14px;
    display: flex; flex-direction: column; gap: 12px;
    scroll-behavior: smooth; background: #f0f2f5;
}
.wifri-messages::-webkit-scrollbar { width: 3px; }
.wifri-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 99px; }

.wifri-message { display: flex; align-items: flex-end; gap: 8px; animation: wifri-msg-in 0.25s ease; }
@keyframes wifri-msg-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.wifri-message-bot  { align-self: flex-start; max-width: 88%; }
.wifri-message-user { align-self: flex-end;   max-width: 88%; flex-direction: row-reverse; }

.wifri-msg-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--wifri-color);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: white; overflow: hidden;
}
.wifri-msg-avatar svg { width: 16px; height: 16px; }
.wifri-bubble-wrap { display: flex; flex-direction: column; gap: 2px; }
.wifri-bubble { padding: 10px 14px; font-size: 13.5px; line-height: 1.55; word-break: break-word; }
.wifri-message-bot  .wifri-bubble { background: white; color: #1f2937; border-radius: 18px 18px 18px 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.wifri-message-user .wifri-bubble { background: var(--wifri-color); color: white; border-radius: 18px 18px 4px 18px; }
.wifri-msg-time { font-size: 10.5px; color: #9ca3af; padding: 0 4px; display: flex; align-items: center; gap: 4px; }
.wifri-message-user .wifri-msg-time { justify-content: flex-end; }
.wifri-tick { color: #60a5fa; font-size: 12px; }

.wifri-typing .wifri-bubble { padding: 12px 16px; }
.wifri-typing-dots { display: flex; gap: 5px; align-items: center; }
.wifri-typing-dots span { width: 8px; height: 8px; background: #9ca3af; border-radius: 50%; animation: wifri-dot 1.3s infinite; }
.wifri-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.wifri-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes wifri-dot { 0%, 80%, 100% { transform:scale(0.7); opacity:0.5; } 40% { transform:scale(1.1); opacity:1; } }

.wifri-lead-form { padding: 20px 16px; background: white; border-top: 1px solid #e5e7eb; }
.wifri-lead-form-inner { display: flex; flex-direction: column; gap: 10px; }
.wifri-lead-title { margin: 0 0 2px; font-weight: 700; font-size: 15px; color: #111827; }
.wifri-lead-sub   { margin: 0 0 8px; font-size: 12px; color: #6b7280; }
.wifri-lead-input {
    border: 1px solid #d1d5db; border-radius: 10px;
    padding: 9px 14px; font-size: 13px; font-family: inherit;
    outline: none; background: #f9fafb; color: #1f2937;
    width: 100%; box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wifri-lead-input:focus { border-color: var(--wifri-color); background: white; box-shadow: 0 0 0 3px rgba(var(--wifri-color-rgb),0.1); }
.wifri-lead-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.wifri-lead-submit-btn {
    flex: 1; background: var(--wifri-color); color: white;
    border: none; border-radius: 10px; padding: 10px;
    font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background 0.15s, transform 0.1s;
}
.wifri-lead-submit-btn:hover { background: var(--wifri-color-dark); transform: translateY(-1px); }
.wifri-lead-skip-btn { color: #6b7280; background: none; border: none; font-size: 12px; cursor: pointer; text-decoration: underline; font-family: inherit; padding: 0; white-space: nowrap; }

/* ---- Quick Questions ---- */
.wifri-quick-qs { padding: 10px 12px; background: white; border-top: 1px solid #e5e7eb; }
.wifri-quick-title { font-size: 11px; color: #9ca3af; margin: 0 0 7px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.wifri-quick-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wifri-chip {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 11.5px;
    cursor: pointer;
    color: #374151;
    font-family: inherit;
    line-height: 1.3;
    white-space: nowrap;
    transition: all 0.15s;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wifri-chip:hover {
    background: var(--wifri-color); color: white; border-color: var(--wifri-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(var(--wifri-color-rgb), 0.3);
}

.wifri-donate-banner {
    background: linear-gradient(135deg,#fff7ed,#fef3c7);
    border: 1px solid #fed7aa; border-radius: 12px;
    padding: 12px 14px; margin: 0 14px 10px;
    display: flex; align-items: center; gap: 10px;
}
.wifri-donate-icon { font-size: 22px; flex-shrink: 0; }
.wifri-donate-text { flex: 1; }
.wifri-donate-text p { margin: 0; font-size: 12px; color: #92400e; line-height: 1.4; }
.wifri-donate-text strong { color: #78350f; font-size: 13px; }
.wifri-donate-btn {
    background: linear-gradient(135deg,#f59e0b,#d97706);
    color: white; border: none; border-radius: 8px;
    padding: 7px 12px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit; flex-shrink: 0; transition: all 0.15s;
}
.wifri-donate-btn:hover { transform: translateY(-1px); }

.wifri-chat-input-area { padding: 10px 12px; background: white; border-top: 1px solid #e5e7eb; flex-shrink: 0; }
.wifri-input-wrap {
    display: flex; align-items: flex-end; gap: 8px;
    background: #f0f2f5; border-radius: 24px;
    padding: 6px 6px 6px 16px;
    border: 1.5px solid transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wifri-input-wrap:focus-within { border-color: var(--wifri-color); background: white; box-shadow: 0 0 0 3px rgba(var(--wifri-color-rgb),0.08); }
#wifri-chat-input {
    flex: 1; border: none; background: transparent;
    font-size: 13.5px; font-family: inherit; color: #1f2937;
    outline: none; resize: none; max-height: 100px; overflow-y: auto; line-height: 1.5; padding: 4px 0;
}
#wifri-chat-input::placeholder { color: #9ca3af; }
.wifri-send-btn {
    width: 36px; height: 36px; min-width: 36px;
    background: var(--wifri-color); border: none; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: white; flex-shrink: 0; transition: all 0.15s; padding: 0;
}
.wifri-send-btn:hover   { background: var(--wifri-color-dark); transform: scale(1.08); }
.wifri-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.wifri-send-btn svg { width: 16px; height: 16px; fill: white; display: block; }
.wifri-input-footer { text-align: center; margin-top: 5px; }
.wifri-powered { font-size: 10.5px; color: #c9ccd0; }

.wifri-visitors-wrap { flex: 1; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; background: #f0f2f5; }
.wifri-visitors-header { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: #111827; }
.wifri-visitors-header svg { width: 20px; height: 20px; color: var(--wifri-color); }
.wifri-visitor-info { display: flex; flex-direction: column; gap: 10px; }
.wifri-visitor-loading { display: flex; align-items: center; gap: 10px; color: #6b7280; font-size: 13px; padding: 16px; background: white; border-radius: 12px; }
.wifri-visitor-card { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
.wifri-visitor-map-placeholder { height: 130px; background: linear-gradient(135deg,#dbeafe,#bfdbfe); display: flex; align-items: center; justify-content: center; font-size: 60px; }
.wifri-visitor-details { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.wifri-visitor-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.wifri-visitor-row-icon { width: 28px; height: 28px; background: #f0f2f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.wifri-visitor-row-block { display: flex; flex-direction: column; gap: 1px; }
.wifri-visitor-row-label { color: #6b7280; font-size: 11px; }
.wifri-visitor-row-val   { color: #111827; font-weight: 600; font-size: 13px; }

.wifri-spinner-sm { width: 18px; height: 18px; border: 2px solid #d1d5db; border-top-color: var(--wifri-color); border-radius: 50%; animation: wifri-spin 0.7s linear infinite; flex-shrink: 0; }
@keyframes wifri-spin { to { transform: rotate(360deg); } }

.wifri-message-error .wifri-bubble { background: #fee2e2 !important; color: #dc2626 !important; }

@media (max-width: 480px) {
    .wifri-chat-window { width: calc(100vw - 24px); height: calc(100svh - 110px); }
    #wifri-chat-container.wifri-chat-right { right: 12px; }
    #wifri-chat-container.wifri-chat-left  { left: 12px; }
}

/* ========================================
   Product Grid — WooCommerce Book Cards
   ======================================== */
.wifri-product-message { align-items: flex-start !important; }
.wifri-product-message .wifri-msg-avatar { margin-top: 2px; }
.wifri-product-bubble-wrap { max-width: 100%; width: 100%; }
.wifri-product-grid-wrap {
    background: white; border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.09);
    overflow: hidden; animation: wifri-msg-in 0.3s ease; width: 100%;
}
.wifri-product-grid-label { padding: 10px 14px 8px; font-size: 13px; font-weight: 700; color: var(--wifri-color); border-bottom: 1px solid #f3f4f6; letter-spacing: 0.01em; }
.wifri-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #f3f4f6; }
.wifri-product-card { display: flex; flex-direction: column; background: white; text-decoration: none !important; color: inherit !important; transition: background 0.15s; cursor: pointer; }
.wifri-product-card:hover { background: #fafafa; }
.wifri-product-card.out-of-stock { opacity: 0.72; }
.wifri-product-img-wrap { position: relative; width: 100%; aspect-ratio: 3/4; background: #f3f4f6; overflow: hidden; }
.wifri-product-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.wifri-product-card:hover .wifri-product-img-wrap img { transform: scale(1.05); }
.wifri-product-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 42px; background: linear-gradient(135deg,#dbeafe,#bfdbfe); }
.wifri-product-badge { position: absolute; top: 7px; left: 7px; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; pointer-events: none; line-height: 1.4; }
.wifri-product-badge.sale { background: #ef4444; color: white; }
.wifri-product-badge.out  { background: #6b7280; color: white; }
.wifri-product-info { padding: 8px 10px 4px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wifri-product-title { font-size: 12px; font-weight: 600; color: #111827; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wifri-product-price { font-size: 12.5px; font-weight: 700; color: var(--wifri-color); line-height: 1.2; }
.wifri-product-price del { color: #9ca3af; font-weight: 400; font-size: 11px; text-decoration: line-through; margin-right: 3px; }
.wifri-product-price ins { text-decoration: none; color: #ef4444; }
.wifri-product-btn { margin: 6px 10px 10px; padding: 7px 10px; background: var(--wifri-color); color: white !important; border-radius: 8px; font-size: 11.5px; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; gap: 3px; transition: background 0.15s, transform 0.1s; text-decoration: none !important; }
.wifri-product-card:hover .wifri-product-btn { background: var(--wifri-color-dark); transform: translateY(-1px); }
.wifri-product-btn svg { width: 13px; height: 13px; fill: white; flex-shrink: 0; }
.wifri-product-grid-wrap .wifri-msg-time { padding: 6px 14px 10px; font-size: 10.5px; color: #9ca3af; }
@media (max-width: 350px) { .wifri-product-grid { grid-template-columns: 1fr; } }