/* ==========================================================================
   EP Concierge — public chat widget. Self-contained, scoped under .epc.
   Light, readable panel with an accent header; floating bubble bottom-right.
   The accent follows the brand_color setting, else a calm default.
   ========================================================================== */
.epc {
	--epc-accent: #2f5d4a;
	--epc-ink: #ffffff;
	--epc-text: #21211f;
	--epc-muted: #6b675f;
	--epc-bot-bg: #f1efe9;
	--epc-line: #e6e1d6;
	position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px; line-height: 1.5;
}
.epc *, .epc *::before, .epc *::after { box-sizing: border-box; }

.epc .epc-bubble {
	appearance: none; -webkit-appearance: none; cursor: pointer; border: none;
	width: 58px; height: 58px; border-radius: 50%;
	background: var(--epc-accent); color: var(--epc-ink);
	display: grid; place-items: center; box-shadow: 0 6px 22px rgba(0,0,0,.28);
	transition: transform .15s ease, box-shadow .15s ease;
}
.epc .epc-bubble:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.34); }
.epc .epc-bubble.is-open { transform: scale(.92); }

.epc .epc-panel {
	position: absolute; right: 0; bottom: 72px;
	width: 370px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 120px);
	background: #fff; color: var(--epc-text);
	border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
	box-shadow: 0 18px 50px rgba(0,0,0,.32); border: 1px solid var(--epc-line);
}
.epc .epc-panel[hidden] { display: none; }

.epc .epc-head {
	background: var(--epc-accent); color: var(--epc-ink);
	padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
}
.epc .epc-title { font-weight: 600; font-size: 16px; }
.epc .epc-close { appearance: none; background: none; border: none; color: var(--epc-ink); font-size: 24px; line-height: 1; cursor: pointer; opacity: .85; padding: 0 2px; }
.epc .epc-close:hover { opacity: 1; }

.epc .epc-msgs { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.epc .epc-msg { display: flex; }
.epc .epc-msg.epc-user { justify-content: flex-end; }
.epc .epc-bub { max-width: 84%; padding: 9px 13px; border-radius: 14px; word-wrap: break-word; }
.epc .epc-bot .epc-bub { background: var(--epc-bot-bg); border-bottom-left-radius: 4px; }
.epc .epc-user .epc-bub { background: var(--epc-accent); color: var(--epc-ink); border-bottom-right-radius: 4px; }
.epc .epc-bub a { color: inherit; text-decoration: underline; }
.epc .epc-bot .epc-bub a { color: var(--epc-accent); }

.epc .epc-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.epc .epc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--epc-muted); opacity: .5; animation: epc-blink 1.2s infinite ease-in-out; }
.epc .epc-typing i:nth-child(2) { animation-delay: .2s; }
.epc .epc-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes epc-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }

.epc .epc-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--epc-line); background: #fff; flex: 0 0 auto; }
.epc .epc-text {
	flex: 1 1 auto; min-width: 0; appearance: none; font: inherit; color: var(--epc-text);
	padding: 10px 12px; border: 1px solid var(--epc-line); border-radius: 999px; background: #faf9f6;
}
.epc .epc-text:focus { outline: 2px solid var(--epc-accent); outline-offset: 1px; border-color: var(--epc-accent); }
.epc .epc-send {
	appearance: none; cursor: pointer; border: none; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
	background: var(--epc-accent); color: var(--epc-ink); display: grid; place-items: center;
}
.epc .epc-send:hover { filter: brightness(1.06); }

.epc .epc-privacy { flex: 0 0 auto; font-size: 11px; line-height: 1.4; color: #8a857c; text-align: center; padding: 0 14px 10px; background: #fff; }

@media (max-width: 480px) {
	.epc { right: 12px; bottom: 12px; }
	.epc .epc-panel { width: calc(100vw - 24px); height: calc(100vh - 96px); bottom: 70px; }
}