/* ═══════════════════════════════════════════════════════════════════════════
   LIVE CHAT WIDGET
   Fixed bottom-right, always visible. Panel slides up when opened.
   ═══════════════════════════════════════════════════════════════════════════ */

.ci-chat {
	position: fixed;
	bottom: 1.75rem;
	right: 1.75rem;
	z-index: 8000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	/* Container must never intercept touches — children opt back in individually */
	pointer-events: none;
}

/* ── Trigger button ── */
.ci-chat__btn {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background-color: #751a3b;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(117, 26, 59, 0.45);
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	flex-shrink: 0;
	pointer-events: auto;
}

.ci-chat__btn:hover {
	background-color: #5a1430;
	transform: scale(1.06);
	box-shadow: 0 6px 24px rgba(117, 26, 59, 0.55);
}

.ci-chat__icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ci-chat__icon svg {
	width: 22px;
	height: 22px;
}

.ci-chat__icon--close {
	opacity: 0;
	transform: rotate(-90deg) scale(0.7);
}

/* When panel is open, swap icons */
.ci-chat.is-open .ci-chat__icon--open {
	opacity: 0;
	transform: rotate(90deg) scale(0.7);
}

.ci-chat.is-open .ci-chat__icon--close {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/* ── Popup panel ── */
.ci-chat__panel {
	width: 320px;
	background: var(--ci-color-white);
	border-radius: 16px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16);
	overflow: hidden;
	display: flex;
	flex-direction: column;

	/* Hidden state */
	opacity: 0;
	transform: translateY(12px) scale(0.97);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ci-chat.is-open .ci-chat__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* ── Panel header ── */
.ci-chat__panel-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1rem 1rem 1.1rem;
	background: #751a3b;
}

.ci-chat__panel-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;
}

.ci-chat__panel-avatar svg {
	width: 22px;
	height: 22px;
}

.ci-chat__panel-meta {
	flex: 1;
}

.ci-chat__panel-name {
	font-family: var(--ci-font-primary);
	font-size: 0.88rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.15rem;
	line-height: 1.2;
}

.ci-chat__panel-status {
	font-family: var(--ci-font-primary);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.ci-chat__online-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	display: inline-block;
	flex-shrink: 0;
}

.ci-chat__panel-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	padding: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: color 0.15s ease, background-color 0.15s ease;
	flex-shrink: 0;
}

.ci-chat__panel-close:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
}

.ci-chat__panel-close svg {
	width: 16px;
	height: 16px;
}

/* ── Panel body (message area) ── */
.ci-chat__panel-body {
	padding: 1.25rem 1.1rem;
	background: #f7f7fa;
	flex: 1;
}

.ci-chat__bubble {
	background: var(--ci-color-white);
	border-radius: 12px 12px 12px 3px;
	padding: 0.75rem 1rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
	display: inline-block;
	max-width: 100%;
}

.ci-chat__bubble p {
	font-family: var(--ci-font-primary);
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--ci-color-text);
	margin: 0;
}

/* ── Panel footer (input) ── */
.ci-chat__panel-footer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--ci-color-border);
	background: var(--ci-color-white);
}

.ci-chat__input {
	flex: 1;
	border: 1.5px solid #d2d2d7;
	border-radius: 9999px;
	padding: 0.55rem 1rem;
	font-family: var(--ci-font-primary);
	font-size: 1rem; /* 16px min to prevent iOS Safari zoom on focus */
	color: var(--ci-color-text);
	outline: none;
	transition: border-color 0.18s ease;
}

.ci-chat__input::placeholder {
	color: #b0b0b8;
}

.ci-chat__input:focus {
	border-color: var(--ci-color-innovate);
}

.ci-chat__send {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: #751a3b;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 0.18s ease;
}

.ci-chat__send:hover {
	background: #5a1430;
}

.ci-chat__send svg {
	width: 14px;
	height: 14px;
}

/* ── Mobile ── */
@media (max-width: 480px) {
	.ci-chat {
		bottom: 1.25rem;
		right: 1.25rem;
	}

	.ci-chat__panel {
		width: calc(100vw - 2.5rem);
	}
}