/* AHS Chat — front-end widget styles */
.ahsc-root, .ahsc-root * { box-sizing: border-box; }
.ahsc-root [hidden] { display: none !important; }
.ahsc-root {
	position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px; line-height: 1.45;
}

/* Bubble */
.ahsc-bubble {
	position: relative; width: 58px; height: 58px; border-radius: 50%;
	border: 0; cursor: pointer; color: #fff;
	background: #5a3115; box-shadow: 0 6px 20px rgba(67,35,15,.35);
	display: flex; align-items: center; justify-content: center;
	transition: transform .15s ease, background .2s ease;
}
.ahsc-bubble:hover { transform: translateY(-2px); background: #43230f; }
.ahsc-bubble.ahsc-open { background: #43230f; }
.ahsc-bubble::after {
	content: ""; position: absolute; inset: -3px; border-radius: 50%;
	border: 2px solid #f2a900; opacity: .0; transition: opacity .2s;
}
.ahsc-bubble:hover::after { opacity: 1; }
.ahsc-dot {
	position: absolute; top: 2px; right: 2px; width: 14px; height: 14px;
	background: #e5484d; border: 2px solid #fff; border-radius: 50%;
}

/* Panel */
.ahsc-panel {
	position: absolute; right: 0; bottom: 72px; width: 350px; max-width: 92vw;
	height: 480px; max-height: 72vh; background: #faf7f2; border-radius: 16px;
	overflow: hidden; display: flex; flex-direction: column;
	box-shadow: 0 16px 44px rgba(45,42,38,.28); border: 1px solid rgba(67,35,15,.08);
	animation: ahsc-pop .16s ease;
}
@keyframes ahsc-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ahsc-head {
	background: linear-gradient(135deg, #5a3115, #43230f);
	color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
}
.ahsc-head-t strong { display: block; font-size: 15px; font-weight: 700; }
.ahsc-head-t span { display: block; font-size: 12px; opacity: .8; margin-top: 1px; }
.ahsc-head-t span::before {
	content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: #7cbe26; margin-right: 5px; vertical-align: middle;
}
.ahsc-x { background: transparent; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: .85; padding: 0 4px; }
.ahsc-x:hover { opacity: 1; }
.ahsc-head-r { display: flex; align-items: center; gap: 8px; }
.ahsc-end { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.ahsc-end:hover { background: rgba(255,255,255,.26); }

.ahsc-body { flex: 1; overflow-y: auto; padding: 16px; }

.ahsc-msg { display: flex; margin-bottom: 10px; }
.ahsc-msg .ahsc-b {
	max-width: 80%; padding: 9px 12px; border-radius: 14px; font-size: 14px; word-wrap: break-word; white-space: normal;
}
.ahsc-in { justify-content: flex-start; }
.ahsc-in .ahsc-b { background: #fff; color: #2d2a26; border: 1px solid rgba(67,35,15,.1); border-bottom-left-radius: 4px; }
.ahsc-out { justify-content: flex-end; }
.ahsc-out .ahsc-b { background: #5a3115; color: #fff; border-bottom-right-radius: 4px; }

.ahsc-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ahsc-wa {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: #25d366; color: #fff; text-decoration: none; font-weight: 600;
	padding: 11px 14px; border-radius: 12px; font-size: 15px; transition: background .15s;
}
.ahsc-wa:hover { background: #1ebe5b; color: #fff; }
.ahsc-here {
	background: #fff; color: #5a3115; border: 1px solid rgba(67,35,15,.2);
	padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.ahsc-here:hover { border-color: #f2a900; background: #fffaf0; }

.ahsc-thread { margin-top: 6px; }

.ahsc-compose { border-top: 1px solid rgba(67,35,15,.1); padding: 10px 12px; background: #fff; }
.ahsc-id { margin-bottom: 2px; }
.ahsc-name, .ahsc-contact {
	width: 100%; border: 1px solid rgba(67,35,15,.18); border-radius: 9px;
	padding: 7px 10px; font-size: 13px; margin-bottom: 8px; outline: none; color: #2d2a26;
}
.ahsc-name:focus, .ahsc-contact:focus { border-color: #f2a900; }
.ahsc-err {
	background: #fdeaea; color: #b3261e; border: 1px solid #f3c2be;
	border-radius: 8px; padding: 6px 9px; font-size: 12px; margin-bottom: 8px; line-height: 1.35;
}
.ahsc-row { display: flex; align-items: flex-end; gap: 8px; }
.ahsc-input {
	flex: 1; resize: none; border: 1px solid rgba(67,35,15,.18); border-radius: 10px;
	padding: 9px 11px; font-size: 14px; font-family: inherit; max-height: 96px; outline: none; color: #2d2a26;
}
.ahsc-input:focus { border-color: #f2a900; }
.ahsc-send {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
	background: #f2a900; color: #43230f; display: flex; align-items: center; justify-content: center;
	transition: background .15s;
}
.ahsc-send:hover { background: #d99500; }

.ahsc-foot { padding: 8px 14px; font-size: 11px; color: #8a8178; text-align: center; background: #faf7f2; }
.ahsc-foot a { color: #5a3115; }

/* Proactive teaser */
.ahsc-teaser {
	position: absolute; right: 0; bottom: 72px; width: 300px; max-width: 88vw;
	background: #fff; border-radius: 16px; padding: 14px 14px 12px;
	box-shadow: 0 14px 38px rgba(45,42,38,.24); border: 1px solid rgba(67,35,15,.08);
	animation: ahsc-pop .18s ease;
}
.ahsc-teaser-x { position: absolute; top: 6px; right: 9px; background: transparent; border: 0; color: #b9b1a7; font-size: 20px; line-height: 1; cursor: pointer; }
.ahsc-teaser-x:hover { color: #7c7267; }
.ahsc-teaser-msg { color: #2d2a26; font-size: 14.5px; line-height: 1.45; margin: 2px 16px 12px 2px; cursor: pointer; }
.ahsc-teaser-row { display: flex; align-items: center; gap: 8px; }
.ahsc-teaser-input {
	flex: 1; border: 1px solid rgba(67,35,15,.16); border-radius: 20px;
	padding: 9px 14px; font-size: 14px; outline: none; color: #2d2a26; background: #faf7f2;
}
.ahsc-teaser-input:focus { border-color: #f2a900; background: #fff; }
.ahsc-teaser-send {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
	background: #5a3115; color: #fff; display: flex; align-items: center; justify-content: center;
}
.ahsc-teaser-send:hover { background: #43230f; }

@media (max-width: 480px) {
	.ahsc-root { right: 14px; bottom: 14px; }
	.ahsc-panel { width: 94vw; height: 76vh; bottom: 70px; }
	.ahsc-teaser { width: 88vw; bottom: 70px; }
}