#amogh-chat-widget * { box-sizing: border-box; }

/* ============ Floating launcher (label + bubble) ============ */
#amogh-chat-launcher {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 10px;
}

#amogh-chat-label {
	display: flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	color: #3a2323;
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 14px;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.16);
	white-space: nowrap;
	animation: amogh-label-in 0.35s ease-out 0.6s both;
}
@keyframes amogh-label-in {
	from { opacity: 0; transform: translateX(8px); }
	to   { opacity: 1; transform: translateX(0); }
}
#amogh-chat-label.amogh-hidden { display: none; }
#amogh-chat-label-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	color: #999;
	padding: 0 0 0 2px;
	margin-left: 2px;
}
#amogh-chat-label-close:hover { color: #555; }

#amogh-chat-bubble {
	position: relative;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.15s ease;
}
#amogh-chat-bubble:hover { transform: scale(1.07); }

.amogh-bubble-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #4bcd6f;
	border: 2.5px solid #fff;
	z-index: 1;
}

.amogh-bubble-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(122,46,46,0.35) 0%, rgba(122,46,46,0) 70%);
	animation: amogh-pulse 2.4s ease-out infinite;
}
@keyframes amogh-pulse {
	0%   { transform: scale(1);   opacity: 0.9; }
	70%  { transform: scale(1.9); opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

.amogh-bubble-icon {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, #93413f 0%, #6a2323 100%);
	box-shadow: 0 6px 20px rgba(90, 30, 30, 0.45), inset 0 1px 1px rgba(255,255,255,0.25);
	border: 2px solid rgba(255,255,255,0.15);
}
.amogh-bubble-icon svg { width: 30px; height: 30px; color: #f5dba3; }

/* ============ Chat window ============ */
#amogh-chat-window {
	position: fixed;
	bottom: 100px;
	right: 24px;
	width: 370px;
	max-width: calc(100vw - 32px);
	height: 540px;
	max-height: calc(100vh - 140px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 16px 48px rgba(0,0,0,0.22);
	display: none;
	flex-direction: column;
	overflow: hidden;
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
#amogh-chat-window.amogh-open { display: flex; }

#amogh-chat-header {
	background: linear-gradient(135deg, #8a3838 0%, #6a2323 100%);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
#amogh-chat-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid rgba(255,255,255,0.25);
}
#amogh-chat-avatar svg { width: 19px; height: 19px; color: #f5dba3; }
#amogh-chat-header-text { flex: 1; min-width: 0; }
#amogh-chat-header h3 { margin: 0; font-size: 15px; font-weight: 600; }
#amogh-chat-header p { margin: 2px 0 0; font-size: 12px; opacity: 0.88; display: flex; align-items: center; gap: 5px; }
.amogh-online-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #6fe08a;
	box-shadow: 0 0 0 2px rgba(111,224,138,0.25);
	flex-shrink: 0;
}
#amogh-chat-close {
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	opacity: 0.85;
	background: none;
	border: none;
	color: #fff;
	flex-shrink: 0;
	padding: 4px;
}
#amogh-chat-close:hover { opacity: 1; }

/* ============ Gate (name/mobile capture) ============ */
#amogh-chat-gate {
	flex: 1;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow-y: auto;
	background: linear-gradient(180deg, #fdfaf5 0%, #ffffff 55%);
}
#amogh-chat-gate-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(145deg, #93413f, #6a2323);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	box-shadow: 0 6px 18px rgba(106,35,35,0.3);
}
#amogh-chat-gate-icon svg { width: 26px; height: 26px; color: #f5dba3; }
#amogh-chat-gate h4 { margin: 0 0 6px; font-size: 17px; color: #3a2323; font-weight: 700; }
#amogh-chat-gate p { font-size: 13px; color: #6b6b6b; margin: 0 0 20px; line-height: 1.45; max-width: 260px; }

#amogh-chat-gate-form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.amogh-input-group { position: relative; width: 100%; }
.amogh-input-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	opacity: 0.55;
	pointer-events: none;
}
#amogh-chat-gate input {
	width: 100%;
	padding: 12px 14px 12px 38px;
	border: 1.5px solid #e5ddd6;
	border-radius: 10px;
	font-size: 14px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#amogh-chat-gate input:focus {
	outline: none;
	border-color: #8a3838;
	box-shadow: 0 0 0 3px rgba(138,56,56,0.12);
}
#amogh-chat-gate button, #amogh-chat-form button {
	background: linear-gradient(135deg, #8a3838, #6a2323);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: transform 0.1s ease, box-shadow 0.15s ease;
	box-shadow: 0 4px 12px rgba(106,35,35,0.25);
}
#amogh-chat-gate button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(106,35,35,0.32); }
#amogh-chat-gate .amogh-error { color: #b3261e; font-size: 12px; display: none; text-align: left; }
.amogh-gate-privacy { font-size: 11px !important; color: #999 !important; margin: 16px 0 0 !important; max-width: none !important; }

/* ============ Messages ============ */
#amogh-chat-messages {
	/* Hidden until showChat() runs (JS sets display:flex) — otherwise this
	   empty container still claims flex:1 space alongside #amogh-chat-gate
	   while the gate is showing, squeezing the gate into half the window. */
	display: none;
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	flex-direction: column;
	gap: 10px;
	background: #faf7f2;
}

.amogh-msg { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.amogh-msg-user { align-self: flex-end; background: #7a2e2e; color: #fff; border-bottom-right-radius: 3px; }
.amogh-msg-assistant { align-self: flex-start; background: #fff; color: #2b2b2b; border: 1px solid #eee; border-bottom-left-radius: 3px; }
.amogh-msg-system { align-self: center; background: #fff3cd; color: #6b5300; font-size: 12px; border-radius: 8px; }

.amogh-msg-error { border-color: #f3c8c6; }
.amogh-msg-error p { margin: 0 0 8px; }
.amogh-error-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.amogh-retry-btn, .amogh-whatsapp-btn {
	font-size: 12.5px;
	padding: 7px 11px;
	border-radius: 7px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	border: 1px solid transparent;
}
.amogh-retry-btn { background: #f4e9e9; color: #7a2e2e; border-color: #e5cfcf; }
.amogh-retry-btn:hover { background: #eeddDD; }
.amogh-whatsapp-btn { background: #e7f7ec; color: #1f7a3d; border-color: #c9ecd4; }
.amogh-whatsapp-btn:hover { background: #d8f1e0; }
.amogh-typing {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	border-bottom-left-radius: 3px;
	padding: 10px 14px;
}
.amogh-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #b3a6a6;
	animation: amogh-typing-bounce 1.1s infinite ease-in-out;
}
.amogh-typing span:nth-child(2) { animation-delay: 0.15s; }
.amogh-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes amogh-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* ============ Message input ============ */
#amogh-chat-form {
	display: flex;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid #eee;
	background: #fff;
	flex-shrink: 0;
}
#amogh-chat-form button { width: auto; flex-shrink: 0; padding: 9px 16px; }
#amogh-chat-form button[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
#amogh-chat-input:disabled { background: #f5f5f5; }
#amogh-chat-input {
	flex: 1;
	resize: none;
	border: 1.5px solid #e5ddd6;
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 13.5px;
	max-height: 70px;
	transition: border-color 0.15s ease;
}
#amogh-chat-input:focus { outline: none; border-color: #8a3838; }

@media (max-width: 480px) {
	/* Mobile theme has its own bottom nav bar (Home/Shop/Search/Cart/Account) —
	   clear it generously, plus the safe-area inset for notch/home-indicator
	   phones, so the launcher never overlaps site navigation. */
	#amogh-chat-launcher {
		right: 16px;
		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	}
	#amogh-chat-bubble { width: 56px; height: 56px; }
	.amogh-bubble-icon svg { width: 26px; height: 26px; }
	#amogh-chat-label { font-size: 12.5px; padding: 8px 12px; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
	#amogh-chat-window {
		right: 12px;
		bottom: calc(144px + env(safe-area-inset-bottom, 0px));
		width: calc(100vw - 24px);
		max-height: calc(100vh - 220px);
	}
}