/* ============================================================
   Lead Qualifier Chat — Widget Styles
   ============================================================ */

:root {
	--lqc-primary:      #2563EB;
	--lqc-primary-dark: #1D4ED8;
	--lqc-radius:       16px;
	--lqc-shadow:       0 8px 32px rgba(37, 99, 235, 0.35);
	--lqc-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--lqc-z:            999999;
}

/* ── Widget wrapper ──────────────────────────────────────── */

#lqc-widget {
	position:    fixed;
	bottom:      24px;
	right:       24px;
	z-index:     var(--lqc-z);
	font-family: var(--lqc-font);
}

/* ── Floating action button ──────────────────────────────── */

#lqc-fab {
	width:           60px;
	height:          60px;
	border-radius:   50%;
	border:          none;
	background:      linear-gradient(135deg, var(--lqc-primary) 0%, var(--lqc-primary-dark) 100%);
	color:           #fff;
	cursor:          pointer;
	box-shadow:      var(--lqc-shadow);
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      transform 0.2s ease, box-shadow 0.2s ease;
	animation:       lqc-pulse 2.8s ease-in-out infinite;
	outline:         none;
	position:        relative;
	z-index:         calc(var(--lqc-z) + 1);
	padding:         0;
}

#lqc-fab:hover {
	transform:  scale(1.08);
	box-shadow: 0 12px 40px rgba(37, 99, 235, 0.45);
	animation:  none;
}

#lqc-fab:focus-visible {
	outline:        3px solid var(--lqc-primary);
	outline-offset: 3px;
}

.lqc-icon-close {
	display: none;
}

@keyframes lqc-pulse {
	0%,  100% { box-shadow: 0 8px 32px rgba(37, 99, 235, 0.35); }
	50%        { box-shadow: 0 8px 32px rgba(37, 99, 235, 0.35),
	                         0 0 0 12px rgba(37, 99, 235, 0.10); }
}

/* ── Chat panel ──────────────────────────────────────────── */

#lqc-panel {
	position:        absolute;
	bottom:          72px;
	right:           0;
	width:           380px;
	height:          520px;
	background:      #fff;
	border-radius:   var(--lqc-radius);
	box-shadow:      0 16px 48px rgba(0, 0, 0, 0.18);
	display:         flex;
	flex-direction:  column;
	overflow:        hidden;
	transform-origin: bottom right;
	animation:       lqc-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#lqc-panel[hidden] {
	display: none;
}

@keyframes lqc-slide-up {
	from {
		opacity:   0;
		transform: scale(0.85) translateY(20px);
	}
	to {
		opacity:   1;
		transform: scale(1) translateY(0);
	}
}

/* ── Header ──────────────────────────────────────────────── */

#lqc-header {
	background:      linear-gradient(135deg, var(--lqc-primary) 0%, var(--lqc-primary-dark) 100%);
	color:           #fff;
	padding:         14px 16px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-shrink:     0;
}

.lqc-header-info {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.lqc-avatar {
	width:           40px;
	height:          40px;
	border-radius:   50%;
	background:      rgba(255, 255, 255, 0.2);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}

#lqc-agent-name {
	font-size:   15px;
	font-weight: 600;
	line-height: 1.2;
}

.lqc-status {
	font-size:  12px;
	opacity:    0.85;
	margin-top: 2px;
}

#lqc-close-btn {
	background:      none;
	border:          none;
	color:           #fff;
	cursor:          pointer;
	padding:         6px;
	border-radius:   6px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         0.8;
	transition:      opacity 0.15s, background 0.15s;
}

#lqc-close-btn:hover {
	opacity:    1;
	background: rgba(255, 255, 255, 0.15);
}

/* ── Messages area ───────────────────────────────────────── */

#lqc-messages {
	flex:            1;
	overflow-y:      auto;
	padding:         16px;
	display:         flex;
	flex-direction:  column;
	gap:             10px;
	background:      #F8FAFC;
	scroll-behavior: smooth;
}

#lqc-messages::-webkit-scrollbar        { width: 4px; }
#lqc-messages::-webkit-scrollbar-track  { background: transparent; }
#lqc-messages::-webkit-scrollbar-thumb  { background: #CBD5E1; border-radius: 4px; }

/* ── Message bubbles ─────────────────────────────────────── */

.lqc-msg {
	max-width:   80%;
	padding:     10px 14px;
	border-radius: 16px;
	font-size:   14px;
	line-height: 1.55;
	animation:   lqc-fade-in 0.25s ease;
	word-break:  break-word;
	white-space: pre-wrap;
}

@keyframes lqc-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0);   }
}

.lqc-msg-bot {
	background:               #fff;
	color:                    #1E293B;
	align-self:               flex-start;
	border-bottom-left-radius: 4px;
	box-shadow:               0 1px 3px rgba(0, 0, 0, 0.08);
}

.lqc-msg-user {
	background:                var(--lqc-primary);
	color:                     #fff;
	align-self:                flex-end;
	border-bottom-right-radius: 4px;
}

.lqc-msg-system {
	background:    #D1FAE5;
	color:         #065F46;
	align-self:    center;
	border-radius: 20px;
	font-size:     13px;
	padding:       6px 14px;
	max-width:     90%;
	text-align:    center;
}

/* ── Typing indicator ────────────────────────────────────── */

.lqc-typing {
	display:                  flex;
	align-items:              center;
	gap:                      5px;
	padding:                  12px 16px;
	background:               #fff;
	border-radius:            16px;
	border-bottom-left-radius: 4px;
	align-self:               flex-start;
	box-shadow:               0 1px 3px rgba(0, 0, 0, 0.08);
	animation:                lqc-fade-in 0.25s ease;
}

.lqc-typing span {
	width:        7px;
	height:       7px;
	border-radius: 50%;
	background:   #94A3B8;
	animation:    lqc-dot-bounce 1.2s ease-in-out infinite;
}

.lqc-typing span:nth-child(2) { animation-delay: 0.15s; }
.lqc-typing span:nth-child(3) { animation-delay: 0.30s; }

@keyframes lqc-dot-bounce {
	0%,  80%, 100% { transform: scale(0.7); opacity: 0.4; }
	40%             { transform: scale(1);   opacity: 1;   }
}

/* ── Footer / input area ─────────────────────────────────── */

#lqc-footer {
	display:      flex;
	align-items:  center;
	gap:          8px;
	padding:      12px 14px;
	background:   #fff;
	border-top:   1px solid #E2E8F0;
	flex-shrink:  0;
}

#lqc-input {
	flex:          1;
	border:        1.5px solid #E2E8F0;
	border-radius: 24px;
	padding:       9px 16px;
	font-size:     14px;
	font-family:   var(--lqc-font);
	color:         #1E293B;
	outline:       none;
	transition:    border-color 0.2s, background 0.2s;
	background:    #F8FAFC;
	min-width:     0;
}

#lqc-input:focus {
	border-color: var(--lqc-primary);
	background:   #fff;
}

#lqc-input::placeholder {
	color: #94A3B8;
}

#lqc-send {
	width:           38px;
	height:          38px;
	border-radius:   50%;
	border:          none;
	background:      var(--lqc-primary);
	color:           #fff;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.2s, transform 0.1s;
	flex-shrink:     0;
	padding:         0;
}

#lqc-send:hover {
	background: var(--lqc-primary-dark);
	transform:  scale(1.06);
}

#lqc-send:disabled {
	background: #CBD5E1;
	cursor:     not-allowed;
	transform:  none;
}

/* ── Mobile — pantalla completa ──────────────────────────── */

@media (max-width: 480px) {
	#lqc-widget {
		bottom: 16px;
		right:  16px;
	}

	#lqc-panel {
		position:       fixed;
		top:            0;
		left:           0;
		right:          0;
		bottom:         0;
		width:          100%;
		height:         100%;
		border-radius:  0;
		transform-origin: bottom center;
	}
}