#waas-root,
#waas-root * { box-sizing: border-box; }
#waas-root {
	font-family: system-ui, -apple-system, Segoe UI, sans-serif;
	z-index: 2147483647;
	display: block !important;
	visibility: visible !important;
}

#waas-launcher,
.waas-btn {
	position: fixed !important;
	right: max(14px, env(safe-area-inset-right)) !important;
	bottom: max(14px, env(safe-area-inset-bottom)) !important;
	z-index: 2147483646 !important;
	width: 52px !important;
	height: 52px !important;
	border-radius: 50% !important;
	border: 0 !important;
	background: #0f766e !important;
	color: #fff !important;
	font-size: 22px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	opacity: 1 !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .22) !important;
}

#waas-panel {
	position: fixed !important;
	right: max(14px, env(safe-area-inset-right)) !important;
	bottom: calc(74px + env(safe-area-inset-bottom)) !important;
	z-index: 2147483647 !important;
	width: 320px !important;
	max-width: calc(100vw - 28px) !important;
	height: min(400px, calc(100vh - 92px)) !important;
	max-height: calc(100dvh - 92px) !important;
	background: #fff !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18) !important;
	display: none !important;
	flex-direction: column !important;
	overflow: hidden !important;
	visibility: visible !important;
}
#waas-panel.waas-open { display: flex !important; }

.waas-panel {
	position: fixed !important;
	right: max(14px, env(safe-area-inset-right)) !important;
	bottom: calc(74px + env(safe-area-inset-bottom)) !important;
	z-index: 2147483646 !important;
	width: 320px !important;
	max-width: calc(100vw - 28px) !important;
	height: min(400px, calc(100vh - 92px)) !important;
	max-height: calc(100dvh - 92px) !important;
	background: #fff !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}

.waas-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	background: #0f766e;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	flex-shrink: 0;
}

.waas-close {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
	opacity: .9;
}

.waas-msgs {
	flex: 1;
	overflow: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 0;
}

.waas-msg {
	max-width: 85%;
	padding: 7px 9px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.4;
}

.waas-msg.user { align-self: flex-end; background: #ecfdf5; }
.waas-msg.bot { align-self: flex-start; background: #f3f4f6; }

.waas-card {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 8px;
	font-size: 12px;
	margin-top: 6px;
}

.waas-url {
	word-break: break-all;
	color: #0f766e;
	margin: 4px 0;
}

.waas-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 10px 8px;
	flex-shrink: 0;
}

.waas-quick button {
	border: 1px solid #d1d5db;
	background: #fff;
	border-radius: 999px;
	padding: 4px 10px;
	cursor: pointer;
	font-size: 12px;
}

.waas-form {
	display: flex;
	gap: 6px;
	padding: 8px 10px;
	border-top: 1px solid #eee;
	flex-shrink: 0;
}

.waas-form input {
	flex: 1;
	min-width: 0;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 7px 8px;
	font-size: 13px;
}

.waas-form button {
	background: #0f766e;
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 7px 12px;
	cursor: pointer;
	font-size: 13px;
	white-space: nowrap;
}

.waas-cta {
	display: inline-block;
	margin-top: 6px;
	background: #25d366;
	color: #fff;
	text-decoration: none;
	padding: 5px 9px;
	border-radius: 8px;
	font-size: 12px;
}

.waas-stock { font-size: 12px; color: #4b5563; }
.waas-typing { display: flex; gap: 4px; align-items: center; min-width: 42px; }
.waas-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; animation: waas-blink 1s infinite; }
.waas-typing span:nth-child(2) { animation-delay: .15s; }
.waas-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes waas-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.waas-hidden { display: none !important; }

@media (max-width: 640px) {
	#waas-launcher,
	.waas-btn {
		width: 48px !important;
		height: 48px !important;
		font-size: 20px !important;
		right: max(12px, env(safe-area-inset-right)) !important;
		bottom: max(12px, env(safe-area-inset-bottom)) !important;
	}
	.waas-panel,
	#waas-panel {
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-width: none !important;
		bottom: calc(68px + env(safe-area-inset-bottom)) !important;
		height: min(360px, calc(100dvh - 84px)) !important;
		max-height: calc(100dvh - 84px) !important;
		border-radius: 12px !important;
	}
}

@media (max-height: 700px) {
	.waas-panel,
	#waas-panel {
		height: min(340px, calc(100vh - 88px)) !important;
		max-height: calc(100dvh - 88px) !important;
	}
}
