/* =============================================
   WC Gemini Chatbot — Styles v2.1
   Animations handled by GSAP (no competing CSS keyframes)
   ============================================= */

#wcgc-widget {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* ---- Toggle button ---- */
#wcgc-toggle {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: none;
	background: var(--wcgc-color, #ec2d3b);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 4px 20px rgba(236, 45, 59, .45),
		0 2px 8px rgba(0, 0, 0, .15);
	position: relative;
	/* GSAP handles scale/transform */
	will-change: transform;
}

/* Ripple ring around toggle */
#wcgc-toggle::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--wcgc-color, #ec2d3b);
	opacity: 0;
	transform: scale(0.85);
	pointer-events: none;
	/* GSAP can target this via custom property or class */
}

/* Unread badge */
#wcgc-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #fff;
	color: var(--wcgc-color, #ec2d3b);
	font-size: 11px;
	font-weight: 800;
	border-radius: 50%;
	min-width: 20px;
	height: 20px;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	border: 2px solid var(--wcgc-color, #ec2d3b);
	line-height: 1;
	will-change: transform;
}

/* ---- Panel ---- */
#wcgc-panel {
	position: absolute;
	bottom: 76px;
	right: 0;
	width: 370px;
	max-width: calc(100vw - 32px);
	height: 540px;
	max-height: calc(100vh - 120px);
	background: #fff;
	border-radius: 22px;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, .14),
		0 4px 16px rgba(0, 0, 0, .08);
	display: none;           /* GSAP sets to flex on open */
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	will-change: transform, opacity;
}

/* ---- Header ---- */
#wcgc-header {
	background: var(--wcgc-color, #ec2d3b);
	color: #fff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}
/* Subtle shine overlay */
#wcgc-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
	pointer-events: none;
}
#wcgc-header-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
#wcgc-header-info {
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 1;
}
#wcgc-header-title {
	font-weight: 700;
	font-size: 15px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#wcgc-header-status {
	font-size: 12px;
	opacity: .85;
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
}
.wcgc-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	display: inline-block;
	flex-shrink: 0;
}

/* ---- Toast ---- */
#wcgc-toast {
	position: absolute;
	top: 72px;
	left: 12px;
	right: 12px;
	background: #16a34a;
	color: #fff;
	border-radius: 12px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
	will-change: transform, opacity;
}

/* ---- Messages area ---- */
#wcgc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px 14px 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f6f7fb;
}
#wcgc-messages::-webkit-scrollbar { width: 4px; }
#wcgc-messages::-webkit-scrollbar-track { background: transparent; }
#wcgc-messages::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 99px;
}

/* ---- Message wrap (GSAP animates in) ---- */
.wcgc-msg-wrap {
	display: flex;
	flex-direction: column;
	max-width: 86%;
	will-change: transform, opacity;
}
.wcgc-msg-wrap.user { align-self: flex-end; align-items: flex-end; }
.wcgc-msg-wrap.bot  { align-self: flex-start; align-items: flex-start; }

/* ---- Bubbles ---- */
.wcgc-msg {
	padding: 10px 14px;
	border-radius: 20px;
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
	word-break: break-word;
}
.wcgc-msg.user {
	background: var(--wcgc-color, #ec2d3b);
	color: #fff;
	border-bottom-right-radius: 5px;
}
.wcgc-msg.bot {
	background: #fff;
	color: #1a1a2e;
	border: 1px solid #e8eaed;
	border-bottom-left-radius: 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

/* Markdown inside bot bubbles */
.wcgc-msg.bot p { margin: 0 0 7px; }
.wcgc-msg.bot p:last-child { margin-bottom: 0; }
.wcgc-msg.bot strong { font-weight: 700; }
.wcgc-msg.bot em { font-style: italic; }
.wcgc-msg.bot a { color: var(--wcgc-color, #ec2d3b); text-decoration: underline; }
.wcgc-msg.bot ul,
.wcgc-msg.bot ol { padding-left: 20px; margin: 6px 0 4px; }
.wcgc-msg.bot li { margin-bottom: 3px; }
.wcgc-msg.bot code {
	background: #f1f3f5;
	padding: 2px 6px;
	border-radius: 5px;
	font-family: "SFMono-Regular", Consolas, monospace;
	font-size: 12.5px;
}

/* Timestamp */
.wcgc-time {
	font-size: 11px;
	color: #9ca3af;
	margin-top: 4px;
	padding: 0 5px;
}

/* ---- Product cards (GSAP stagger animates in) ---- */
.wcgc-products {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 6px;
	width: 100%;
	max-width: 270px;
}
.wcgc-product-card {
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	padding: 8px 9px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
	display: flex;
	flex-direction: column;
	gap: 6px;
	will-change: transform, opacity;
}

/* Fila superior: imagen + info */
.wcgc-product-top {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wcgc-product-img {
	width: 42px;
	height: 42px;
	object-fit: cover;
	border-radius: 7px;
	flex-shrink: 0;
	background: #f3f4f6;
}
.wcgc-product-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.wcgc-product-name {
	font-weight: 600;
	color: #111827;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wcgc-product-price {
	color: #111827;
	font-weight: 700;
	font-size: 12.5px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.wcgc-product-regular {
	font-size: 10.5px;
	font-weight: 400;
	color: #9ca3af;
	text-decoration: line-through;
}
.wcgc-product-stock {
	font-size: 10.5px;
	display: flex;
	align-items: center;
	gap: 2px;
}
.wcgc-product-stock.in  { color: #16a34a; }
.wcgc-product-stock.out { color: #ef4444; }

/* Fila inferior: botones monocromáticos */
.wcgc-product-actions {
	display: flex;
	gap: 5px;
}
.wcgc-btn-cart {
	flex: 1;
	background: transparent;
	color: #374151;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	will-change: transform;
	white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s;
}
.wcgc-btn-cart:hover:not(:disabled) {
	background: #f3f4f6;
	border-color: #9ca3af;
}
.wcgc-btn-cart:disabled { opacity: .45; cursor: default; }
.wcgc-btn-view {
	background: transparent;
	color: #6b7280;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 11.5px;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: background .15s, border-color .15s, color .15s;
	font-family: inherit;
	white-space: nowrap;
}
.wcgc-btn-view:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
	color: #374151;
}

/* ---- Typing dots (GSAP timeline drives bounce) ---- */
#wcgc-typing {
	display: none;
	padding: 4px 14px 10px;
	flex-shrink: 0;
}
.wcgc-typing-bubble {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 20px;
	border-bottom-left-radius: 5px;
	padding: 10px 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.wcgc-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #9ca3af;
	will-change: transform;
	/* No CSS animation — GSAP drives this */
}

/* ---- Input area ---- */
#wcgc-form {
	display: flex;
	align-items: flex-end;
	border-top: 1px solid #f0f1f3;
	padding: 10px 12px;
	gap: 8px;
	background: #fff;
	flex-shrink: 0;
}
#wcgc-input {
	flex: 1;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 9px 13px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	resize: none;
	min-height: 40px;
	max-height: 120px;
	overflow-y: auto;
	line-height: 1.45;
	transition: border-color .18s, background .18s;
	background: #f8f9fb;
	color: #1a1a2e;
	display: block;
}
#wcgc-input:focus {
	border-color: var(--wcgc-color, #ec2d3b);
	background: #fff;
}
#wcgc-input::placeholder { color: #9ca3af; }

#wcgc-send {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wcgc-color, #ec2d3b);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	will-change: transform;
	box-shadow: 0 2px 10px rgba(236, 45, 59, .35);
}
#wcgc-send:disabled { opacity: .4; cursor: default; }

/* ---- Mobile ---- */
@media (max-width: 480px) {
	#wcgc-widget { bottom: 16px; right: 16px; }
	#wcgc-panel {
		width: calc(100vw - 24px);
		right: -8px;
		height: calc(100vh - 100px);
		max-height: none;
		border-radius: 20px 20px 0 0;
		bottom: 70px;
	}
}