/*
 * ZixAI Chatbot For WordPress — Frontend Widget Styles
 * v1.0.0
 *
 * CSS custom properties for theming, scoped under #zixai-chatbot-widget
 * and .zixai-chatbot-inline. Colours set at runtime via JS.
 */

/* ── Reset & Variables ─────────────────────────────────────────────────────── */

#zixai-chatbot-widget,
.zixai-chatbot-inline {
	--zixai-primary:      #2563EB;
	--zixai-text:         #ffffff;
	--zixai-bg:           #ffffff;
	--zixai-bg-alt:       #f3f4f6;
	--zixai-border:       #e5e7eb;
	--zixai-bubble-user:  #2563EB;
	--zixai-bubble-bot:   #f3f4f6;
	--zixai-bubble-text-user: #ffffff;
	--zixai-bubble-text-bot:  #1f2937;
	--zixai-shadow:       0 8px 32px rgba(0,0,0,.18);
	--zixai-radius:       16px;
	--zixai-radius-sm:    10px;
	--zixai-font:         system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--zixai-z:            2147483000;

	font-family: var(--zixai-font) !important;
	box-sizing:  border-box;
}

#zixai-chatbot-widget *,
.zixai-chatbot-inline * {
	box-sizing: border-box;
}

/* ── Floating Widget Container ─────────────────────────────────────────────── */

#zixai-chatbot-widget {
	position: fixed;
	bottom:   24px;
	right:    24px;
	z-index:  var(--zixai-z);
}

/* ── Toggle Button ─────────────────────────────────────────────────────────── */

#zixai-chat-toggle {
	position:        relative;
	width:           60px;
	height:          60px;
	border-radius:   50%;
	border:          none;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-shadow:      0 4px 20px rgba(0,0,0,.25);
	transition:      transform .2s ease, box-shadow .2s ease;
	overflow:        hidden;
	padding:         0;
	flex-shrink:     0;
}

#zixai-chat-toggle:hover {
	transform:  scale(1.08);
	box-shadow: 0 6px 28px rgba(0,0,0,.32);
}

#zixai-chat-toggle:focus-visible {
	outline:        3px solid var(--zixai-primary);
	outline-offset: 3px;
}

.zixai-icon-chat,
.zixai-toggle-logo {
	width:      28px;
	height:     28px;
	position:   absolute;
	transition: opacity .2s ease, transform .2s ease;
	object-fit: cover;
	border-radius: 50%;
}

.zixai-icon-close {
	width:      22px;
	height:     22px;
	position:   absolute;
	opacity:    0;
	transform:  rotate(-90deg) scale(.7);
	transition: opacity .2s ease, transform .2s ease;
}

/* Toggle shows close icon when open */
#zixai-chat-toggle[aria-expanded="true"] .zixai-icon-chat,
#zixai-chat-toggle[aria-expanded="true"] .zixai-toggle-logo {
	opacity:   0;
	transform: rotate(90deg) scale(.7);
}

#zixai-chat-toggle[aria-expanded="true"] .zixai-icon-close {
	opacity:   1;
	transform: none;
}

/* ── Chat Panel ────────────────────────────────────────────────────────────── */

.zixai-chat-panel {
	display:        flex;
	flex-direction: column;
	background:     var(--zixai-bg);
	border-radius:  var(--zixai-radius);
	box-shadow:     var(--zixai-shadow);
	overflow:       hidden;
}

/* Floating panel */
.zixai-chat-panel--floating {
	position:      absolute;
	bottom:        76px;
	right:         0;
	width:         380px;
	height:        560px;
	transform-origin: bottom right;
	animation:     zixaiSlideIn .22s ease;
}

/* Inline panel */
.zixai-chat-panel--inline {
	width:  100%;
	height: 100%;
}

@keyframes zixaiSlideIn {
	from { opacity: 0; transform: translateY(12px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* Hidden state */
.zixai-chat-panel[hidden] {
	display: none !important;
}

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

.zixai-chat-header {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     12px 14px;
	flex-shrink: 0;
}

.zixai-bot-avatar {
	width:        40px;
	height:       40px;
	border-radius:50%;
	overflow:     hidden;
	flex-shrink:  0;
	display:      flex;
	align-items:  center;
	justify-content: center;
}

.zixai-bot-avatar svg {
	width:  38px;
	height: 38px;
}

.zixai-bot-logo-img {
	width:      40px;
	height:     40px;
	object-fit: cover;
}

.zixai-header-info {
	flex:           1;
	min-width:      0;
	display:        flex;
	flex-direction: column;
	gap:            1px;
}

.zixai-header-title {
	font-size:   15px;
	font-weight: 700;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.zixai-header-tagline {
	font-size:   11px;
	opacity:     .78;
}

.zixai-header-tagline a {
	color:           inherit;
	text-decoration: none;
	font-weight:     600;
}

.zixai-header-tagline a:hover {
	text-decoration: underline;
}

.zixai-header-status-row {
	display:     flex;
	align-items: center;
	gap:         5px;
	flex-shrink: 0;
}

.zixai-header-dot {
	width:         8px;
	height:        8px;
	background:    #22c55e;
	border-radius: 50%;
	flex-shrink:   0;
	animation:     zixaiPulse 2.4s ease-in-out infinite;
}

@keyframes zixaiPulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .4; }
}

.zixai-header-status {
	font-size: 11px;
	opacity:   .8;
}

.zixai-header-close {
	width:        32px;
	height:       32px;
	background:   rgba(255,255,255,.15);
	border:       none;
	border-radius:50%;
	cursor:       pointer;
	display:      flex;
	align-items:  center;
	justify-content: center;
	color:        inherit;
	transition:   background .15s;
	flex-shrink:  0;
	padding:      0;
}

.zixai-header-close:hover {
	background: rgba(255,255,255,.28);
}

.zixai-header-close svg {
	width:  16px;
	height: 16px;
}

/* ── Messages Area ─────────────────────────────────────────────────────────── */

.zixai-chat-messages {
	flex:         1;
	overflow-y:   auto;
	padding:      16px 14px;
	display:      flex;
	flex-direction: column;
	gap:          10px;
	scroll-behavior: smooth;
}

.zixai-chat-messages::-webkit-scrollbar {
	width: 4px;
}

.zixai-chat-messages::-webkit-scrollbar-thumb {
	background:    #d1d5db;
	border-radius: 4px;
}

/* ── Message Bubbles ───────────────────────────────────────────────────────── */

.zixai-message {
	display:        flex;
	flex-direction: column;
	max-width:      82%;
	animation:      none;
}

.zixai-message--in {
	animation: zixaiMsgIn .2s ease;
}

@keyframes zixaiMsgIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* User messages — right aligned */
.zixai-message--user {
	align-self:  flex-end;
	align-items: flex-end;
}

/* Bot messages — left aligned */
.zixai-message--assistant {
	align-self:  flex-start;
	align-items: flex-start;
}

/* ────────────────────────────────────────────────────────────────────────────
   BUBBLE CONTENT
   Key fix: generous padding (14px 16px) with overflow-wrap + word-break
   ensures long words (like "WEBDEVSUB") never break out of the curved border.
   ─────────────────────────────────────────────────────────────────────────── */

.zixai-message-content {
	padding:       12px 16px;   /* generous horizontal padding */
	border-radius: var(--zixai-radius-sm);
	font-size:     14px;
	line-height:   1.55;
	white-space:   pre-wrap;
	overflow-wrap: break-word;  /* prevent overflow at curved edges */
	word-break:    break-word;
	hyphens:       auto;
}

.zixai-message--user .zixai-message-content {
	background:    var(--zixai-primary);
	color:         var(--zixai-text);
	border-bottom-right-radius: 3px;
}

.zixai-message--assistant .zixai-message-content {
	background:    var(--zixai-bubble-bot);
	color:         var(--zixai-bubble-text-bot);
	border-bottom-left-radius: 3px;
}

.zixai-message-time {
	font-size:   10px;
	opacity:     .5;
	margin-top:  3px;
	padding:     0 4px;
}

/* ── Typing Indicator ──────────────────────────────────────────────────────── */

.zixai-typing-dots {
	display:     flex;
	align-items: center;
	gap:         5px;
	padding:     14px 18px;
}

.zixai-typing-dots span {
	width:         7px;
	height:        7px;
	background:    #9ca3af;
	border-radius: 50%;
	animation:     zixaiDot 1.2s ease-in-out infinite;
}

.zixai-typing-dots span:nth-child(2) { animation-delay: .2s; }
.zixai-typing-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes zixaiDot {
	0%, 80%, 100% { transform: scale(.7); opacity: .5; }
	40%            { transform: scale(1);  opacity: 1;  }
}

/* ── Lead Capture Card ─────────────────────────────────────────────────────── */

.zixai-lead-card {
	background:    #f9fafb;
	border:        1px solid var(--zixai-border);
	border-radius: var(--zixai-radius-sm);
	padding:       16px;
	display:       flex;
	flex-direction:column;
	gap:           10px;
	max-width:     300px;
}

.zixai-lead-card-title {
	font-size:   14px;
	font-weight: 700;
	color:       #111827;
	margin:      0;
}

.zixai-lead-card-body {
	font-size: 12.5px;
	color:     #6b7280;
	margin:    0;
}

.zixai-lead-form {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.zixai-lead-input,
.zixai-lead-textarea {
	width:         100%;
	padding:       9px 12px;
	border:        1px solid #d1d5db;
	border-radius: 8px;
	font-size:     13px;
	font-family:   var(--zixai-font);
	background:    #ffffff;
	color:         #1f2937;
	transition:    border-color .15s, box-shadow .15s;
	resize:        none;
}

.zixai-lead-input:focus,
.zixai-lead-textarea:focus {
	outline:      none;
	border-color: var(--zixai-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, .15);
}

.zixai-lead-textarea {
	line-height: 1.4;
}

.zixai-lead-submit {
	padding:       10px 16px;
	background:    var(--zixai-primary);
	color:         var(--zixai-text);
	border:        none;
	border-radius: 8px;
	font-size:     13px;
	font-weight:   600;
	cursor:        pointer;
	transition:    opacity .15s, transform .1s;
}

.zixai-lead-submit:hover:not(:disabled) {
	opacity: .9;
}

.zixai-lead-submit:disabled {
	opacity: .65;
	cursor:  not-allowed;
}

.zixai-lead-skip {
	background:  transparent;
	border:      none;
	color:       #9ca3af;
	font-size:   12px;
	cursor:      pointer;
	text-align:  center;
	padding:     4px 0;
	transition:  color .15s;
}

.zixai-lead-skip:hover { color: #6b7280; }

.zixai-lead-feedback {
	font-size: 12px;
	margin:    0;
	padding:   0;
	min-height:16px;
}

.zixai-lead-feedback--success { color: #16a34a; }
.zixai-lead-feedback--error   { color: #dc2626; }

.zixai-lead-input--error {
	border-color: #dc2626 !important;
	box-shadow:   0 0 0 3px rgba(220, 38, 38, .12) !important;
}

.zixai-lead-contact-hint {
	font-size:  11px;
	color:      #9ca3af;
	margin:     -2px 0 0;
	line-height: 1.4;
}

/* ── Input Area ────────────────────────────────────────────────────────────── */

.zixai-chat-input-area {
	display:     flex;
	align-items: flex-end;
	gap:         8px;
	padding:     10px 14px;
	border-top:  1px solid var(--zixai-border);
	background:  var(--zixai-bg);
	flex-shrink: 0;
}

.zixai-chat-input {
	flex:        1;
	border:      1px solid var(--zixai-border);
	border-radius: 20px;
	padding:     10px 16px;
	font-size:   14px;
	font-family: var(--zixai-font);
	line-height: 1.4;
	resize:      none;
	background:  var(--zixai-bg-alt);
	color:       #1f2937;
	transition:  border-color .15s, box-shadow .15s;
	max-height:  120px;
	overflow-y:  auto;
}

.zixai-chat-input:focus {
	outline:      none;
	border-color: var(--zixai-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, .12);
	background:   var(--zixai-bg);
}

.zixai-chat-send {
	width:           40px;
	height:          40px;
	border-radius:   50%;
	border:          none;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	transition:      opacity .15s, transform .1s;
	padding:         0;
}

.zixai-chat-send:hover:not(:disabled) {
	transform: scale(1.08);
	opacity:   .9;
}

.zixai-chat-send:disabled {
	opacity: .4;
	cursor:  not-allowed;
}

.zixai-chat-send svg {
	width:  18px;
	height: 18px;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

.zixai-chat-footer {
	flex-shrink:    0;
	border-top:     1px solid var(--zixai-border);
	background:     var(--zixai-bg);
}

.zixai-human-cta {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     8px 14px;
	flex-wrap:   wrap;
}

.zixai-cta-label {
	font-size:   11.5px;
	color:       #6b7280;
	flex-shrink: 0;
}

.zixai-cta-link {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	padding:         4px 10px;
	border-radius:   20px;
	font-size:       11.5px;
	font-weight:     600;
	text-decoration: none;
	transition:      opacity .15s, transform .1s;
}

.zixai-cta-link:hover { opacity: .85; transform: translateY(-1px); }

.zixai-cta-wa    { background: #25d366; color: #fff; }
.zixai-cta-phone { background: #2563EB; color: #fff; }

.zixai-powered-by {
	text-align:  center;
	padding:     5px 14px 8px;
	font-size:   10.5px;
	color:       #9ca3af;
}

.zixai-powered-by a {
	color:           #6b7280;
	text-decoration: none;
	font-weight:     600;
}

.zixai-powered-by a:hover { text-decoration: underline; }

/* ── Responsive ────────────────────────────────────────────────────────────── */

/*
 * Mobile: keep the widget anchored to the bottom-right corner — same as
 * desktop, just scaled down.  Do NOT convert it to a full-width bottom-sheet;
 * that's what was causing the "full-screen" look on tall modern phones.
 *
 * Width:  min(300px, 82vw)  — roughly half the screen on most phones,
 *         never overflows the left edge.
 * Height: min(460px, 68dvh) — leaves ~30% of screen visible above the chat.
 *         dvh shrinks when the on-screen keyboard opens, so the input row
 *         stays visible automatically.
 */

@media (max-width: 520px) {
	#zixai-chatbot-widget {
		bottom: 16px;
		right:  16px;
		left:   auto;   /* never full-width */
	}

	.zixai-chat-panel--floating {
		/* Stay absolutely positioned inside the widget container */
		position:        absolute;
		bottom:          72px;
		right:           0;
		left:            auto;
		width:           min(300px, calc(100vw - 24px));
		height:          min(460px, 68dvh);
		max-height:      min(460px, 68dvh);
		border-radius:   var(--zixai-radius);
		transform-origin: bottom right;
		/* Safe-area padding for iPhones with home bar */
		padding-bottom:  env(safe-area-inset-bottom, 0px);
	}

	/* Toggle stays in normal flow — no fixed override needed */
	#zixai-chat-toggle {
		position: relative;
		bottom:   auto;
		right:    auto;
	}
}

/* ── Inline shortcode wrapper ──────────────────────────────────────────────── */

.zixai-chatbot-inline {
	position: relative;
	width:    100%;
	border-radius: var(--zixai-radius);
	overflow: hidden;
	box-shadow: var(--zixai-shadow);
}