/* EWS Chat — front-end widget styles */
.ewsc-root, .ewsc-root * { box-sizing: border-box; }
.ewsc-root [hidden] { display: none !important; }
.ewsc-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 */
.ewsc-bubble {
	position: relative; width: 58px; height: 58px; border-radius: 50%;
	border: 0; cursor: pointer; color: #fff;
	background: #2856DB; box-shadow: 0 6px 20px rgba(28,46,76,.35);
	display: flex; align-items: center; justify-content: center;
	transition: transform .15s ease, background .2s ease;
}
.ewsc-bubble:hover { transform: translateY(-2px); background: #1D40A8; }
.ewsc-bubble.ewsc-open { background: #1D40A8; }
.ewsc-bubble::after {
	content: ""; position: absolute; inset: -3px; border-radius: 50%;
	border: 2px solid #2856DB; opacity: .0; transition: opacity .2s;
}
.ewsc-bubble:hover::after { opacity: 1; }
.ewsc-dot {
	position: absolute; top: 2px; right: 2px; width: 14px; height: 14px;
	background: #e5484d; border: 2px solid #fff; border-radius: 50%;
}

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

.ewsc-head {
	background: linear-gradient(135deg, #3d6ae8, #2856DB);
	color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
}
.ewsc-head-t strong { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.ewsc-head-t span { display: block; font-size: 12px; opacity: .8; margin-top: 1px; }
.ewsc-head-t span::before {
	content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: #16a34a; margin-right: 5px; vertical-align: middle;
}
.ewsc-x { background: transparent; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: .85; padding: 0 4px; }
.ewsc-x:hover { opacity: 1; }
.ewsc-head-r { display: flex; align-items: center; gap: 8px; }
.ewsc-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; }
.ewsc-end:hover { background: rgba(255,255,255,.26); }

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

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

.ewsc-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ewsc-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;
}
.ewsc-wa:hover { background: #1ebe5b; color: #fff; }
.ewsc-here {
	background: #fff; color: #1C2E4C; border: 1px solid rgba(28,46,76,.2);
	padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.ewsc-here:hover { border-color: #2856DB; background: #eef3fe; }

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

.ewsc-compose { border-top: 1px solid rgba(28,46,76,.1); padding: 10px 12px; background: #fff; }
.ewsc-id { margin-bottom: 2px; }
.ewsc-name, .ewsc-contact {
	width: 100%; border: 1px solid rgba(28,46,76,.18); border-radius: 9px;
	padding: 7px 10px; font-size: 13px; margin-bottom: 8px; outline: none; color: #2d2a26;
}
.ewsc-name:focus, .ewsc-contact:focus { border-color: #2856DB; }
.ewsc-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;
}
.ewsc-row { display: flex; align-items: flex-end; gap: 8px; }
.ewsc-input {
	flex: 1; resize: none; border: 1px solid rgba(28,46,76,.18); border-radius: 10px;
	padding: 9px 11px; font-size: 14px; font-family: inherit; max-height: 96px; outline: none; color: #2d2a26;
}
.ewsc-input:focus { border-color: #2856DB; }
.ewsc-send {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
	background: #2856DB; color: #fff; display: flex; align-items: center; justify-content: center;
	transition: background .15s;
}
.ewsc-send:hover { background: #1D40A8; }

.ewsc-foot { padding: 8px 14px; font-size: 11px; color: #7a828e; text-align: center; background: #f6f8fc; }
.ewsc-foot a { color: #2856DB; }

/* Proactive teaser */
.ewsc-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(28,46,76,.24); border: 1px solid rgba(28,46,76,.08);
	animation: ewsc-pop .18s ease;
}
.ewsc-teaser-x { position: absolute; top: 6px; right: 9px; background: transparent; border: 0; color: #a6adba; font-size: 20px; line-height: 1; cursor: pointer; }
.ewsc-teaser-x:hover { color: #6b7280; }
.ewsc-teaser-msg { color: #2d2a26; font-size: 14.5px; line-height: 1.45; margin: 2px 16px 12px 2px; cursor: pointer; }
.ewsc-teaser-row { display: flex; align-items: center; gap: 8px; }
.ewsc-teaser-input {
	flex: 1; border: 1px solid rgba(28,46,76,.16); border-radius: 20px;
	padding: 9px 14px; font-size: 14px; outline: none; color: #2d2a26; background: #f6f8fc;
}
.ewsc-teaser-input:focus { border-color: #2856DB; background: #fff; }
.ewsc-teaser-send {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
	background: #2856DB; color: #fff; display: flex; align-items: center; justify-content: center;
}
.ewsc-teaser-send:hover { background: #1D40A8; }

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

/* Away state: honest status dot when outside staffed hours */
.ewsc-away .ewsc-head-t span::before { background: #9aa1ab; }

/* Deterministic quick-reply menu */
.ewsc-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 2px; }
.ewsc-quick-b {
	background: #fff; border: 1px solid rgba(28,46,76,.16); color: #1C2E4C;
	border-radius: 12px; padding: 10px 8px; font-size: 13px; font-weight: 600;
	cursor: pointer; text-align: center; line-height: 1.25;
}
.ewsc-quick-b:hover { border-color: #2856DB; background: #eef3fe; color: #2856DB; }
.ewsc-link-btn {
	display: inline-block; margin-top: 8px; background: #2856DB; color: #fff;
	text-decoration: none; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
}
.ewsc-link-btn:hover { background: #1D40A8; color: #fff; }
.ewsc-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ewsc-sub-b {
	background: #eef3fe; border: 1px solid rgba(40,86,219,.25); color: #2856DB;
	border-radius: 16px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ewsc-sub-b:hover { background: #dbe7fe; }

/* Notification sound toggle (v1.8.0) */
.ewsc-snd { background: transparent; border: 0; color: #fff; cursor: pointer; opacity: .85; padding: 2px 3px; display: inline-flex; align-items: center; border-radius: 6px; }
.ewsc-snd:hover { opacity: 1; background: rgba(255,255,255,.14); }
.ewsc-snd.is-muted { opacity: .45; }
.ewsc-snd.is-muted::after { content: ""; position: absolute; width: 18px; height: 1.5px; background: currentColor; transform: rotate(-45deg); }
.ewsc-snd { position: relative; }

/* System notes + end-of-chat notice (v1.9.0) */
.ewsc-msg.ewsc-sys { justify-content: center; }
.ewsc-msg.ewsc-sys .ewsc-b { background: transparent; color: #6b7280; font-size: 12px; text-align: center; box-shadow: none; padding: 4px 8px; max-width: 100%; }
.ewsc-closed { text-align: center; padding: 14px 12px; border-top: 1px solid #e6eaf2; margin-top: 8px; }
.ewsc-closed p { margin: 0 0 10px; font-size: 13px; color: #4b5563; }
.ewsc-restart { background: #2856DB; color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.ewsc-restart:hover { background: #1D40A8; }