/**
 * Anak Engage Pro — Chat Widget Styles (v2 redesign + tel prefix)
 *
 * Refined modern SaaS aesthetic — generous whitespace, soft layered shadows,
 * subtle motion, premium typography stack. Strongly scoped to .aep-chat-root
 * so host theme styles cannot leak in and break the layout.
 */

/* ───────────────────────────────────────────────────────────────────────────
   Root + theme tokens
   ─────────────────────────────────────────────────────────────────────────── */
.aep-chat-root {
	/* Brand tokens (overridden by JS from admin settings) */
	--aep-c-primary:        #0066CC;
	--aep-c-primary-2:      #00A8FF;
	--aep-c-primary-dark:   #004C99;

	/* Surface palette */
	--aep-c-bg:             #ffffff;
	--aep-c-surface:        #ffffff;
	--aep-c-surface-soft:   #f8fafc;
	--aep-c-surface-deeper: #f1f5f9;

	/* Text palette */
	--aep-c-text:           #0b1220;
	--aep-c-text-soft:      #334155;
	--aep-c-muted:          #64748b;
	--aep-c-muted-2:        #94a3b8;

	/* Borders + dividers */
	--aep-c-border:         #e2e8f0;
	--aep-c-border-soft:    #eef2f7;

	/* Bubble surfaces */
	--aep-c-bubble-bot:     #f1f5f9;
	--aep-c-bubble-agent:   #e0f2fe;

	/* Shadows (layered for depth without heaviness) */
	--aep-shadow-launch:    0 8px 20px rgba(0, 80, 180, 0.28),
	                        0 2px 6px rgba(0, 0, 0, 0.08);
	--aep-shadow-launch-hi: 0 14px 32px rgba(0, 80, 180, 0.38),
	                        0 4px 10px rgba(0, 0, 0, 0.12);
	--aep-shadow-panel:     0 24px 60px rgba(11, 22, 40, 0.18),
	                        0 8px 24px rgba(11, 22, 40, 0.08);

	/* Motion curves */
	--aep-ease:             cubic-bezier(0.22, 1, 0.36, 1);
	--aep-ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

	position: fixed;
	z-index: 2147483600;
	width: 64px;
	height: 64px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text",
	             "Helvetica Neue", Roboto, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--aep-c-text);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.005em;
}

/* Scoped reset — prevent host theme bleed-through */
.aep-chat-root *,
.aep-chat-root *::before,
.aep-chat-root *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: inherit;
}

/* Host themes sometimes un-hide [hidden] with display:flex/block etc.
   Force the typing indicator and other hidden bits to stay hidden. */
.aep-chat-root [hidden] {
	display: none !important;
}

.aep-chat-root.is-dark {
	--aep-c-bg:             #0b1220;
	--aep-c-surface:        #111a2e;
	--aep-c-surface-soft:   #0f1729;
	--aep-c-surface-deeper: #1a2542;
	--aep-c-text:           #f1f5f9;
	--aep-c-text-soft:      #cbd5e1;
	--aep-c-muted:          #94a3b8;
	--aep-c-muted-2:        #64748b;
	--aep-c-border:         #1f2a44;
	--aep-c-border-soft:    #18223a;
	--aep-c-bubble-bot:     #1a2542;
	--aep-c-bubble-agent:   #0c2740;
}

.aep-chat-root[data-position="bottom-right"] { bottom: 24px; right: 24px; }
.aep-chat-root[data-position="bottom-left"]  { bottom: 24px; left: 24px; }
.aep-chat-root[data-position="top-right"]    { top: 24px; right: 24px; }
.aep-chat-root[data-position="top-left"]     { top: 24px; left: 24px; }

/* ───────────────────────────────────────────────────────────────────────────
   Launcher button
   ─────────────────────────────────────────────────────────────────────────── */
.aep-chat-launcher {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	background:
		radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 55%),
		linear-gradient(135deg, var(--aep-c-primary-2) 0%, var(--aep-c-primary) 55%, var(--aep-c-primary-dark) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--aep-shadow-launch);
	transition:
		transform 0.32s var(--aep-ease-bounce),
		box-shadow 0.32s var(--aep-ease);
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}
.aep-chat-launcher::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.35), transparent 60%);
	pointer-events: none;
}
.aep-chat-launcher:hover {
	transform: translateY(-3px) scale(1.04);
	box-shadow: var(--aep-shadow-launch-hi);
}
.aep-chat-launcher:active {
	transform: translateY(-1px) scale(0.98);
}
.aep-chat-launcher svg {
	width: 28px;
	height: 28px;
	display: block;
	flex-shrink: 0;
	pointer-events: none;
	transition: transform 0.3s var(--aep-ease);
}
.aep-chat-launcher.is-open svg.aep-icon-chat  { display: none; }
.aep-chat-launcher:not(.is-open) svg.aep-icon-close { display: none; }
.aep-chat-launcher.is-open svg.aep-icon-close {
	transform: rotate(90deg);
}

/* Online indicator dot */
.aep-chat-launcher::after {
	content: '';
	position: absolute;
	top: 7px;
	right: 7px;
	width: 12px;
	height: 12px;
	background: #22c55e;
	border: 2.5px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
	animation: aep-pulse 2.4s var(--aep-ease) infinite;
	z-index: 1;
}
.aep-chat-launcher.is-open::after { display: none; }

/* Unread badge */
.aep-chat-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	border-radius: 999px;
	background: linear-gradient(135deg, #f43f5e, #e11d48);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	box-shadow: 0 4px 10px rgba(225, 29, 72, 0.45);
	animation: aep-pop 0.35s var(--aep-ease-bounce);
	border: 2px solid #fff;
	z-index: 2;
}
@keyframes aep-pop {
	0%   { transform: scale(0); }
	60%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}
@keyframes aep-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.55); }
	70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);    }
	100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Panel
   ─────────────────────────────────────────────────────────────────────────── */
.aep-chat-panel {
	position: absolute;
	bottom: 82px;
	right: 0;
	width: 440px;
	max-width: calc(100vw - 32px);
	height: 640px;
	max-height: calc(100vh - 130px);
	background: var(--aep-c-surface);
	border-radius: 20px;
	box-shadow: var(--aep-shadow-panel);
	border: 1px solid var(--aep-c-border-soft);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(16px) scale(0.96);
	transform-origin: bottom right;
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.36s var(--aep-ease),
		opacity 0.24s var(--aep-ease);
}
.aep-chat-root[data-position="bottom-left"] .aep-chat-panel,
.aep-chat-root[data-position="top-left"]    .aep-chat-panel {
	right: auto;
	left: 0;
	transform-origin: bottom left;
}
.aep-chat-root[data-position="top-right"] .aep-chat-panel,
.aep-chat-root[data-position="top-left"]  .aep-chat-panel {
	bottom: auto;
	top: 82px;
	transform-origin: top right;
}
.aep-chat-root[data-position="top-left"] .aep-chat-panel { transform-origin: top left; }

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

/* ───────────────────────────────────────────────────────────────────────────
   Header
   ─────────────────────────────────────────────────────────────────────────── */
.aep-chat-head {
	background:
		radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.18), transparent 50%),
		linear-gradient(135deg, var(--aep-c-primary-2) 0%, var(--aep-c-primary) 55%, var(--aep-c-primary-dark) 100%);
	color: #fff;
	padding: 22px 22px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
}
.aep-chat-head::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="18" cy="22" r="1.5" fill="white" opacity="0.18"/><circle cx="82" cy="38" r="1" fill="white" opacity="0.14"/><circle cx="58" cy="78" r="1.3" fill="white" opacity="0.16"/><circle cx="100" cy="92" r="1" fill="white" opacity="0.12"/><circle cx="34" cy="64" r="0.9" fill="white" opacity="0.10"/></svg>') repeat;
	opacity: 0.45;
	pointer-events: none;
}
.aep-chat-head::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 18px;
	background: linear-gradient(180deg, transparent, rgba(0,0,0,0.06));
	pointer-events: none;
}

.aep-chat-brand {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	flex-shrink: 0;
	box-shadow:
		0 4px 10px rgba(0, 0, 0, 0.18),
		inset 0 0 0 1px rgba(255, 255, 255, 0.6);
	position: relative;
	z-index: 1;
}
.aep-chat-brand img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 8px;
}
.aep-chat-brand-initial {
	color: var(--aep-c-primary);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.02em;
}

.aep-chat-titles {
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 1;
}
.aep-chat-titles strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.01em;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aep-chat-titles span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.88);
	margin-top: 3px;
	font-weight: 400;
}
.aep-chat-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.35);
	animation: aep-pulse 2.4s var(--aep-ease) infinite;
}

.aep-chat-close {
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s var(--aep-ease), transform 0.18s var(--aep-ease);
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}
.aep-chat-close:hover {
	background: rgba(255, 255, 255, 0.28);
	transform: rotate(90deg);
}
.aep-chat-close svg { width: 14px; height: 14px; }

/* ───────────────────────────────────────────────────────────────────────────
   Message list
   ─────────────────────────────────────────────────────────────────────────── */
.aep-chat-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px 18px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background:
		linear-gradient(180deg, var(--aep-c-surface-soft) 0%, var(--aep-c-surface) 80px),
		var(--aep-c-surface);
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}
.aep-chat-body::-webkit-scrollbar { width: 6px; }
.aep-chat-body::-webkit-scrollbar-track { background: transparent; }
.aep-chat-body::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}
.aep-chat-root.is-dark .aep-chat-body::-webkit-scrollbar-thumb { background: #334155; }

.aep-msg {
	display: flex;
	gap: 8px;
	max-width: 88%;
	animation: aep-msg-in 0.32s var(--aep-ease) both;
}
@keyframes aep-msg-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.aep-msg-visitor { align-self: flex-end; flex-direction: row-reverse; }
.aep-msg-bot,
.aep-msg-agent,
.aep-msg-system { align-self: flex-start; }

.aep-msg-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--aep-c-primary-2), var(--aep-c-primary));
	color: #fff;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.01em;
	box-shadow: 0 2px 6px rgba(0, 102, 204, 0.25);
}
.aep-msg-visitor .aep-msg-avatar {
	background: linear-gradient(135deg, #475569, #334155);
	box-shadow: 0 2px 6px rgba(51, 65, 85, 0.25);
}

.aep-msg-bubble {
	padding: 11px 15px;
	border-radius: 18px;
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.aep-msg-visitor .aep-msg-bubble {
	background: linear-gradient(135deg, var(--aep-c-primary-2), var(--aep-c-primary));
	color: #fff;
	border-bottom-right-radius: 5px;
	box-shadow: 0 4px 12px rgba(0, 102, 204, 0.22);
}
.aep-msg-bot .aep-msg-bubble {
	background: var(--aep-c-bubble-bot);
	color: var(--aep-c-text);
	border-bottom-left-radius: 5px;
}
.aep-msg-agent .aep-msg-bubble {
	background: var(--aep-c-bubble-agent);
	border: 1px solid #bae6fd;
	color: var(--aep-c-text);
	border-bottom-left-radius: 5px;
}
.aep-msg-system .aep-msg-bubble {
	background: transparent;
	color: var(--aep-c-muted);
	font-size: 12px;
	font-style: italic;
	text-align: center;
	width: 100%;
	padding: 4px 8px;
}
.aep-msg-system { max-width: 100%; }

/* When the message contains a form bubble, let it take the full row width —
   the form has its own padding so it doesn't need the conversation's 88%
   max-width constraint that's meant for text messages. JS adds this class. */
.aep-chat-root .aep-msg-has-form {
	max-width: 100%;
	width: 100%;
}

/* ───────────────────────────────────────────────────────────────────────────
   Typing indicator — labeled pill so it doesn't look like dead UI noise
   ─────────────────────────────────────────────────────────────────────────── */
.aep-chat-typing {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	margin: 0 18px 6px;
	align-self: flex-start;
	background: var(--aep-c-bubble-bot);
	border-radius: 16px;
	border-bottom-left-radius: 5px;
	max-width: fit-content;
	animation: aep-msg-in 0.3s var(--aep-ease);
}
.aep-chat-typing-label {
	font-size: 12px;
	color: var(--aep-c-muted);
	font-weight: 500;
	letter-spacing: 0.01em;
}
.aep-chat-typing-dots {
	display: inline-flex;
	gap: 3px;
	align-items: center;
}
.aep-chat-typing-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--aep-c-primary);
	opacity: 0.6;
	animation: aep-bounce 1.3s ease-in-out infinite;
}
.aep-chat-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.aep-chat-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes aep-bounce {
	0%, 60%, 100% { transform: translateY(0);    opacity: 0.5; }
	30%           { transform: translateY(-5px); opacity: 1;   }
}

/* ───────────────────────────────────────────────────────────────────────────
   Input bar
   ─────────────────────────────────────────────────────────────────────────── */
.aep-chat-input {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 16px;
	border-top: 1px solid var(--aep-c-border-soft);
	background: var(--aep-c-surface);
	flex-shrink: 0;
}
.aep-chat-input input {
	flex: 1;
	min-width: 0;
	border: 1.5px solid var(--aep-c-border);
	background: var(--aep-c-surface-soft);
	border-radius: 999px;
	padding: 12px 18px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	color: var(--aep-c-text);
	outline: none;
	transition: border-color 0.18s var(--aep-ease), box-shadow 0.18s var(--aep-ease), background 0.18s var(--aep-ease);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.aep-chat-input input::placeholder { color: var(--aep-c-muted-2); opacity: 1; }
.aep-chat-input input:focus {
	border-color: var(--aep-c-primary);
	background: var(--aep-c-surface);
	box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12);
}
.aep-chat-input button {
	background: linear-gradient(135deg, var(--aep-c-primary-2), var(--aep-c-primary));
	border: none;
	padding: 0;
	color: #fff;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.22s var(--aep-ease-bounce), box-shadow 0.22s var(--aep-ease);
	box-shadow: 0 4px 12px rgba(0, 102, 204, 0.28);
	flex-shrink: 0;
	-webkit-appearance: none;
	appearance: none;
}
.aep-chat-input button:hover {
	transform: scale(1.06) rotate(-5deg);
	box-shadow: 0 6px 16px rgba(0, 102, 204, 0.42);
}
.aep-chat-input button:active { transform: scale(0.96); }
.aep-chat-input button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}
.aep-chat-input button svg {
	width: 17px;
	height: 17px;
	display: block;
	pointer-events: none;
	transform: translateX(1px);
}

/* ───────────────────────────────────────────────────────────────────────────
   Footer
   ─────────────────────────────────────────────────────────────────────────── */
.aep-chat-foot {
	background: var(--aep-c-surface);
	border-top: 1px solid var(--aep-c-border-soft);
	padding: 9px 16px 10px;
	text-align: center;
	font-size: 11px;
	color: var(--aep-c-muted-2);
	flex-shrink: 0;
	letter-spacing: 0.01em;
}
.aep-chat-foot a {
	color: var(--aep-c-primary);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s;
}
.aep-chat-foot a:hover { color: var(--aep-c-primary-dark); text-decoration: underline; }

/* ───────────────────────────────────────────────────────────────────────────
   Inline form (chat → form → thankyou flow)
   ─────────────────────────────────────────────────────────────────────────── */
.aep-chat-root .aep-msg-form {
	width: 100%;
	max-width: 360px;
	background: var(--aep-c-surface);
	border: 1px solid var(--aep-c-border);
	border-radius: 16px;
	padding: 20px 20px 18px;
	box-shadow:
		0 4px 14px rgba(11, 22, 40, 0.06),
		0 1px 3px rgba(11, 22, 40, 0.04);
	border-bottom-left-radius: 5px;
}
.aep-chat-root .aep-inline-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.aep-chat-root .aep-inline-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.aep-chat-root .aep-inline-field span {
	color: var(--aep-c-text-soft);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.01em;
	text-transform: none;
}
.aep-chat-root .aep-inline-field input,
.aep-chat-root .aep-inline-field textarea,
.aep-chat-root .aep-inline-field select {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--aep-c-border);
	border-radius: 10px;
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	background: var(--aep-c-surface-soft);
	color: var(--aep-c-text);
	box-sizing: border-box;
	transition: border-color 0.18s var(--aep-ease), box-shadow 0.18s var(--aep-ease), background 0.18s var(--aep-ease);
	-webkit-appearance: none;
	appearance: none;
}
.aep-chat-root .aep-inline-field select {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 36px;
	cursor: pointer;
}
.aep-chat-root .aep-inline-field textarea {
	resize: vertical;
	min-height: 70px;
}
.aep-chat-root .aep-inline-field input::placeholder,
.aep-chat-root .aep-inline-field textarea::placeholder {
	color: var(--aep-c-muted-2);
	opacity: 1;
}
.aep-chat-root .aep-inline-field input:focus,
.aep-chat-root .aep-inline-field textarea:focus,
.aep-chat-root .aep-inline-field select:focus {
	outline: none;
	border-color: var(--aep-c-primary);
	background: var(--aep-c-surface);
	box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12);
}
.aep-chat-root .aep-inline-submit {
	margin-top: 6px;
	padding: 12px 18px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--aep-c-primary-2), var(--aep-c-primary));
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	font-family: inherit;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform 0.18s var(--aep-ease), box-shadow 0.18s var(--aep-ease), opacity 0.18s;
	box-shadow: 0 4px 12px rgba(0, 102, 204, 0.28);
	-webkit-appearance: none;
	appearance: none;
}
.aep-chat-root .aep-inline-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 102, 204, 0.38);
}
.aep-chat-root .aep-inline-submit:active { transform: translateY(0); }
.aep-chat-root .aep-inline-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}
.aep-chat-root .is-submitted .aep-inline-form input,
.aep-chat-root .is-submitted .aep-inline-form textarea,
.aep-chat-root .is-submitted .aep-inline-form select {
	pointer-events: none;
	opacity: 0.6;
}
.aep-chat-root .aep-inline-err {
	color: #dc2626;
	font-size: 11.5px;
	margin-top: 4px;
	display: block;
	font-weight: 500;
}

/* ───────────────────────────────────────────────────────────────────────────
   Phone field with +91 prefix pill
   ─────────────────────────────────────────────────────────────────────────── */
.aep-chat-root .aep-tel-wrap {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	border: 1.5px solid var(--aep-c-border);
	border-radius: 10px;
	background: var(--aep-c-surface-soft);
	overflow: hidden;
	transition: border-color 0.18s var(--aep-ease), box-shadow 0.18s var(--aep-ease), background 0.18s var(--aep-ease);
}
.aep-chat-root .aep-tel-wrap:focus-within {
	border-color: var(--aep-c-primary);
	background: var(--aep-c-surface);
	box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12);
}
.aep-chat-root .aep-tel-prefix {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--aep-c-text-soft);
	background: var(--aep-c-surface-deeper);
	border-right: 1.5px solid var(--aep-c-border);
	user-select: none;
	letter-spacing: 0.01em;
	flex-shrink: 0;
	min-width: 52px;
}
.aep-chat-root .aep-tel-wrap input[type="tel"] {
	flex: 1;
	min-width: 0;
	border: none !important;
	background: transparent !important;
	padding: 11px 13px !important;
	font-size: 14px;
	font-family: inherit;
	color: var(--aep-c-text);
	outline: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	-webkit-appearance: none;
	appearance: none;
}
.aep-chat-root .aep-tel-wrap input[type="tel"]:focus {
	box-shadow: none !important;
	background: transparent !important;
	border: none !important;
}
.aep-chat-root .aep-tel-wrap input[type="tel"]::placeholder {
	color: var(--aep-c-muted-2);
	opacity: 1;
}

/* ───────────────────────────────────────────────────────────────────────────
   Mobile
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.aep-chat-root[data-position] {
		bottom: 16px !important;
		right: 16px !important;
		left: auto !important;
		top: auto !important;
	}
	.aep-chat-panel {
		width: calc(100vw - 24px);
		height: calc(100vh - 110px);
		max-height: 680px;
		bottom: 80px;
		right: 0 !important;
		left: auto !important;
		border-radius: 18px;
	}
	.aep-chat-head { padding: 18px 18px 16px; }
	.aep-chat-body { padding: 16px 14px 10px; }
	.aep-chat-input { padding: 12px 14px 14px; }
	.aep-chat-root .aep-msg-form { max-width: 100%; padding: 16px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   RTL
   ─────────────────────────────────────────────────────────────────────────── */
.rtl .aep-msg-visitor { align-self: flex-start; flex-direction: row; }
.rtl .aep-msg-bot,
.rtl .aep-msg-agent { align-self: flex-end; flex-direction: row-reverse; }
.rtl .aep-msg-visitor .aep-msg-bubble {
	border-bottom-right-radius: 18px;
	border-bottom-left-radius: 5px;
}
.rtl .aep-msg-bot .aep-msg-bubble,
.rtl .aep-msg-agent .aep-msg-bubble {
	border-bottom-left-radius: 18px;
	border-bottom-right-radius: 5px;
}

/* ───────────────────────────────────────────────────────────────────────────
   Reduced motion
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.aep-chat-root *,
	.aep-chat-root *::before,
	.aep-chat-root *::after {
		animation-duration: 0.001s !important;
		transition-duration: 0.001s !important;
	}
}