/**
 * Miya AI Sales Assistant — Chat Widget Styles
 * @package Miya_AI_Assistant
 */

:root {
	--miya-primary: #8b5cf6;
	--miya-primary-hover: #7649d1;
	--miya-primary-light: #ede9fe;
	--miya-primary-gradient: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
	--miya-bg: #FFFFFF;
	--miya-bg-messages: #F7F5FA;
	--miya-text: #1A1A2E;
	--miya-text-muted: #6B7280;
	--miya-text-light: #FFFFFF;
	--miya-border: #E5E7EB;
	--miya-shadow: 0 10px 40px rgba(139,92,246,0.18), 0 2px 8px rgba(0,0,0,0.08);
	--miya-shadow-fab: 0 6px 24px rgba(139,92,246,0.35);
	--miya-radius: 16px;
	--miya-radius-sm: 12px;
	--miya-radius-msg: 18px;
	--miya-transition: 0.3s cubic-bezier(0.4,0,0.2,1);
	--miya-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--miya-chat-width: 380px;
	--miya-chat-height: 560px;
	--miya-fab-size: 60px;
	--miya-z-index: 999999;
}

#miya-ai-chat-container {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: var(--miya-z-index);
	font-family: var(--miya-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--miya-text);
	-webkit-font-smoothing: antialiased;
}

/* FAB */
#miya-ai-fab {
	width: var(--miya-fab-size);
	height: var(--miya-fab-size);
	border-radius: 50%;
	border: none;
	background: var(--miya-primary-gradient);
	color: var(--miya-text-light);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--miya-shadow-fab);
	transition: transform var(--miya-transition), box-shadow var(--miya-transition);
	position: relative;
	outline: none;
}
#miya-ai-fab:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(139,92,246,0.45); }
#miya-ai-fab:active { transform: scale(0.95); }

#miya-ai-fab-badge {
	position: absolute; top: -4px; right: -4px;
	width: 22px; height: 22px; border-radius: 50%;
	background: #EF4444; color: #fff; font-size: 11px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid #fff;
	animation: miya-badge-pulse 2s infinite;
}
@keyframes miya-badge-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* Chat Window */
#miya-ai-chat-window {
	position: absolute;
	bottom: calc(var(--miya-fab-size) + 16px);
	right: 0;
	width: var(--miya-chat-width);
	height: var(--miya-chat-height);
	max-height: calc(100vh - 120px);
	background: var(--miya-bg);
	border-radius: var(--miya-radius);
	box-shadow: var(--miya-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0; visibility: hidden;
	transform: translateY(20px) scale(0.95);
	transition: opacity var(--miya-transition), transform var(--miya-transition), visibility var(--miya-transition);
}
#miya-ai-chat-window.miya-open {
	opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}

/* Header */
#miya-ai-chat-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px;
	background: var(--miya-primary-gradient);
	color: var(--miya-text-light);
	flex-shrink: 0;
}
#miya-ai-chat-header-info { display: flex; align-items: center; gap: 10px; }
#miya-ai-chat-avatar {
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255,255,255,0.2);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; backdrop-filter: blur(4px);
}
#miya-ai-chat-name { display: block; font-size: 15px; font-weight: 600; }
#miya-ai-chat-status { display: block; font-size: 12px; opacity: 0.85; }
#miya-ai-chat-status::before {
	content: ''; display: inline-block; width: 7px; height: 7px;
	border-radius: 50%; background: #34D399; margin-right: 5px; vertical-align: middle;
	animation: miya-status-blink 3s infinite;
}
@keyframes miya-status-blink { 0%,100%{opacity:1} 50%{opacity:0.5} }

#miya-ai-chat-close {
    background-image: var(--miya-close-icon, none) !important;
    background-color: rgba(255,255,255,0.15) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px 20px !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: background-color var(--miya-transition) !important;
}
#miya-ai-chat-close:hover {
    background-color: rgba(255,255,255,0.3) !important;
}

/* Messages */
#miya-ai-chat-messages {
	flex: 1; overflow-y: auto; padding: 18px 14px;
	background: var(--miya-bg-messages);
	display: flex; flex-direction: column; gap: 10px;
	scroll-behavior: smooth;
}
#miya-ai-chat-messages::-webkit-scrollbar { width: 5px; }
#miya-ai-chat-messages::-webkit-scrollbar-track { background: transparent; }
#miya-ai-chat-messages::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.2); border-radius: 10px; }

/* Bubbles */
.miya-msg {
	max-width: 82%; padding: 10px 16px;
	border-radius: var(--miya-radius-msg);
	font-size: 13.5px; line-height: 1.55;
	word-break: break-word;
	animation: miya-msg-in 0.3s ease-out;
}
@keyframes miya-msg-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.miya-msg-user {
	align-self: flex-end;
	background: var(--miya-primary-gradient);
	color: var(--miya-text-light);
	border-bottom-right-radius: 6px;
}
.miya-msg-bot {
	align-self: flex-start;
	background: var(--miya-bg);
	color: var(--miya-text);
	border: 1px solid var(--miya-border);
	border-bottom-left-radius: 6px;
}
.miya-msg-bot a { color: var(--miya-primary); text-decoration: underline; }
.miya-msg-bot a:hover { color: var(--miya-primary-hover); }
.miya-msg-bot strong { font-weight: 600; }
.miya-msg-bot ul, .miya-msg-bot ol { padding-left: 18px; margin: 6px 0; }
.miya-msg-bot li { margin-bottom: 3px; }

/* Typing */
.miya-typing {
	align-self: flex-start;
	background: var(--miya-bg); border: 1px solid var(--miya-border);
	border-radius: var(--miya-radius-msg); border-bottom-left-radius: 6px;
	padding: 12px 18px; display: flex; align-items: center; gap: 5px;
}
.miya-typing-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--miya-primary); opacity: 0.4;
	animation: miya-dot-bounce 1.4s infinite ease-in-out;
}
.miya-typing-dot:nth-child(1) { animation-delay: 0s; }
.miya-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.miya-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes miya-dot-bounce { 0%,80%,100%{transform:translateY(0);opacity:0.4} 40%{transform:translateY(-6px);opacity:1} }

/* Input Area */
#miya-ai-chat-form {
	flex-shrink: 0; padding: 12px 14px 10px;
	background: var(--miya-bg); border-top: 1px solid var(--miya-border);
}
#miya-ai-chat-input-wrapper {
	display: flex; align-items: center; gap: 8px;
	background: var(--miya-bg-messages); border: 1px solid var(--miya-border);
	border-radius: 28px; padding: 4px 6px 4px 16px;
	transition: border-color var(--miya-transition), box-shadow var(--miya-transition);
}
#miya-ai-chat-input-wrapper:focus-within {
	border-color: var(--miya-primary);
	box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}
#miya-ai-chat-input {
	flex: 1; border: none; background: transparent;
	font-family: var(--miya-font); font-size: 13.5px;
	color: var(--miya-text); outline: none; padding: 8px 0;
}
#miya-ai-chat-input::placeholder { color: var(--miya-text-muted); }

#miya-ai-chat-send {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    /* Ícone SVG sobre o gradiente — duas camadas de background */
    background-image: var(--miya-send-icon, none), var(--miya-primary-gradient) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, center center !important;
    background-size: 20px 20px, cover !important;
    transition: transform var(--miya-transition), opacity var(--miya-transition) !important;
}
#miya-ai-chat-send:hover { transform: scale(1.08) !important; }
#miya-ai-chat-send:active { transform: scale(0.92) !important; }
#miya-ai-chat-send:disabled { 
    opacity: 0.5 !important; 
    cursor: not-allowed !important; 
    transform: none !important; 
}

/* #miya-ai-chat-powered removed — element no longer in DOM */

.miya-msg-time {
	font-size: 10px; color: var(--miya-text-muted); margin-top: 4px; display: block;
}
.miya-msg-user .miya-msg-time { color: rgba(255,255,255,0.7); text-align: right; }

/* Welcome */
.miya-welcome-card {
	align-self: flex-start; background: var(--miya-bg);
	border: 1px solid var(--miya-border); border-radius: var(--miya-radius-sm);
	padding: 14px 16px; animation: miya-msg-in 0.4s ease-out;
}
.miya-welcome-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; }
.miya-quick-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.miya-quick-action {
	background: var(--miya-primary-light); color: var(--miya-primary);
	border: none; border-radius: 20px; padding: 6px 14px;
	font-size: 12px; font-weight: 500; cursor: pointer;
	font-family: var(--miya-font);
	transition: background var(--miya-transition), color var(--miya-transition);
}
.miya-quick-action:hover { background: var(--miya-primary); color: var(--miya-text-light); }

.miya-msg-error {
	align-self: center; background: #FEF2F2; color: #B91C1C;
	border: 1px solid #FECACA; border-radius: var(--miya-radius-sm);
	padding: 8px 14px; font-size: 12.5px; text-align: center;
}

/* ─────────────────────────────────────────────
   Product Autocomplete Dropdown
   ───────────────────────────────────────────── */
#miya-ai-autocomplete-list {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	background: var(--miya-bg, #fff);
	border: 1px solid var(--miya-border, #E5E7EB);
	border-radius: var(--miya-radius-sm, 12px);
	box-shadow: 0 -4px 20px rgba(0,0,0,0.1), 0 -1px 4px rgba(0,0,0,0.05);
	max-height: 240px;
	overflow-y: auto;
	z-index: 10;
	display: none;
	animation: miya-ac-in 0.2s ease-out;
	margin-bottom: 4px;
}
@keyframes miya-ac-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

#miya-ai-autocomplete-list::-webkit-scrollbar { width: 4px; }
#miya-ai-autocomplete-list::-webkit-scrollbar-track { background: transparent; }
#miya-ai-autocomplete-list::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.2); border-radius: 10px; }

.miya-ac-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	transition: background 0.15s ease;
	border-bottom: 1px solid var(--miya-border, #E5E7EB);
	font-family: var(--miya-font);
}
.miya-ac-item:last-child { border-bottom: none; }
.miya-ac-item:first-child { border-radius: var(--miya-radius-sm, 12px) var(--miya-radius-sm, 12px) 0 0; }
.miya-ac-item:last-child  { border-radius: 0 0 var(--miya-radius-sm, 12px) var(--miya-radius-sm, 12px); }
.miya-ac-item:only-child  { border-radius: var(--miya-radius-sm, 12px); }
.miya-ac-item:hover {
	background: var(--miya-primary-light, #ede9fe);
}

.miya-ac-thumb {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--miya-border, #E5E7EB);
}

.miya-ac-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.miya-ac-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--miya-text, #1A1A2E);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.miya-ac-price {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--miya-primary, #8b5cf6);
}

/* Responsive */
@media (max-width: 480px) {
	#miya-ai-chat-container { bottom: 16px; right: 16px; }
	#miya-ai-chat-window {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    #miya-ai-chat-header {
        padding: 12px 14px !important;
        flex-shrink: 0 !important;
        /* Empurra o header para baixo da barra do navegador */
        padding-top: max(12px, env(safe-area-inset-top)) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }
    #miya-ai-chat-messages {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #miya-ai-chat-form {
        flex-shrink: 0 !important;
        padding: 10px 12px !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 2 !important;
        background: var(--miya-bg) !important;
    }
	#miya-ai-fab { width: 54px; height: 54px; }
	#miya-ai-welcome-bubble { max-width: 200px; right: 62px; }
}

/* ─────────────────────────────────────────────
   Welcome Speech Bubble
   ───────────────────────────────────────────── */
#miya-ai-welcome-bubble {
	position: absolute;
	bottom: 12px;
	right: calc(var(--miya-fab-size) + 16px);
	background: var(--miya-bg, #fff);
	color: var(--miya-text, #1A1A2E);
	font-family: var(--miya-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
	font-size: 13.5px;
	line-height: 1.45;
	padding: 12px 16px;
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06);
	max-width: 240px;
	white-space: normal;
	z-index: 1;
	/* Animation */
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

#miya-ai-welcome-bubble.miya-bubble-visible {
	display: block !important;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	animation: miya-bubble-float 3s ease-in-out infinite;
}

/* Arrow pointing right toward the FAB */
.miya-bubble-arrow {
	position: absolute;
	right: -7px;
	bottom: 16px;
	width: 14px;
	height: 14px;
	background: var(--miya-bg, #fff);
	transform: rotate(45deg);
	box-shadow: 2px -2px 4px rgba(0,0,0,0.06);
	border-radius: 2px;
}

/* Float animation */
@keyframes miya-bubble-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}