/* AR4HO Concierge — chat in the DoubleTree Mangroovy design (navy + lime, light / dark) */
.ac-root {
	--ac-navy: var(--dt-navy, var(--tamb-navy, #002f61));
	--ac-deep: #001a38;
	--ac-lime: var(--dt-lime, var(--tamb-lime, #c4d600));
	--ac-serif: "Times New Roman", Times, Georgia, serif;
	--ac-sans: Poppins, "Helvetica Neue", Arial, sans-serif;
	/* light */
	--ac-bg: #ffffff;
	--ac-body: #f3f5f8;
	--ac-bot: #ffffff;
	--ac-bot-ink: #1d2733;
	--ac-line: #e3e8ee;
	--ac-muted: #4a5868;
	--ac-user: var(--ac-navy);
	--ac-user-ink: #ffffff;
	--ac-link: var(--ac-navy);
	--ac-field: #ffffff;
	--ac-shadow: 0 24px 60px rgba(0, 26, 56, .28);
	font-family: var(--ac-sans);
}
html[data-theme="dark"] .ac-root {
	--ac-bg: #04274f;
	--ac-body: #001f42;
	--ac-bot: #0b335f;
	--ac-bot-ink: #e6edf5;
	--ac-line: rgba(255, 255, 255, .14);
	--ac-muted: #b8c6d8;
	--ac-user: var(--ac-lime);
	--ac-user-ink: var(--ac-navy);
	--ac-link: var(--ac-lime);
	--ac-field: rgba(255, 255, 255, .08);
	--ac-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.ac-root *, .ac-root *::before, .ac-root *::after { box-sizing: border-box; }
.ac-root button { font: inherit; }
.ac-ico { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Launcher */
.ac-launch {
	position: fixed; z-index: 99990; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px 0 8px;
	border: 0; border-radius: 999px; background: var(--ac-navy); color: #fff; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 26, 56, .35);
	font: 500 .95rem/1 var(--ac-sans); transition: transform .2s ease, box-shadow .2s ease;
}
.ac-launch:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 26, 56, .42); }
.ac-launch:focus-visible { outline: 3px solid var(--ac-lime); outline-offset: 3px; }
.ac-launch-ic { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ac-lime); color: var(--ac-navy); }
.ac-launch-ic::after { content: ""; position: absolute; right: 1px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 2px var(--ac-navy); }
.ac-root.is-open .ac-launch { opacity: 0; pointer-events: none; transform: scale(.9); }
[dir="rtl"] .ac-launch, .ac-root[dir="rtl"] .ac-launch { right: auto; left: 20px; }

/* Panel */
.ac-panel {
	position: fixed; z-index: 99991; right: 20px; bottom: 20px; width: min(400px, calc(100vw - 40px)); height: min(640px, calc(100vh - 40px));
	display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: var(--ac-bg); color: var(--ac-bot-ink);
	box-shadow: var(--ac-shadow); border: 1px solid var(--ac-line);
	opacity: 0; transform: translateY(16px) scale(.98); transform-origin: bottom right; pointer-events: none; visibility: hidden;
	transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
}
.ac-root[dir="rtl"] .ac-panel { right: auto; left: 20px; transform-origin: bottom left; }
.ac-root.is-open .ac-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .22s ease, transform .22s ease; }

.ac-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; background: var(--ac-navy); color: #fff; border-bottom: 3px solid var(--ac-lime); }
.ac-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--ac-lime); color: var(--ac-navy); }
.ac-title { flex: 1; min-width: 0; }
.ac-name { margin: 0; font: 400 1.25rem/1.15 var(--ac-serif); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-status { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .75rem; color: #b8c6d8; }
.ac-status i { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; }
.ac-hbtn { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .2s, color .2s; }
.ac-hbtn:hover, .ac-hbtn:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.ac-hbtn.ac-wa:hover { background: #25d366; color: #fff; }

.ac-body { flex: 1; overflow-y: auto; padding: 18px 14px 10px; background: var(--ac-body); scroll-behavior: smooth; overscroll-behavior: contain; }
.ac-msg { display: flex; margin: 0 0 12px; animation: ac-in .25s ease; }
@keyframes ac-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ac-msg.is-user { justify-content: flex-end; }
.ac-bubble { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; }
.ac-msg.is-bot .ac-bubble { background: var(--ac-bot); color: var(--ac-bot-ink); border: 1px solid var(--ac-line); border-end-start-radius: 4px; }
.ac-msg.is-user .ac-bubble { background: var(--ac-user); color: var(--ac-user-ink); border-end-end-radius: 4px; white-space: pre-wrap; }
.ac-bubble p { margin: 0 0 .6em; }
.ac-bubble p:last-child, .ac-bubble ul:last-child, .ac-bubble ol:last-child { margin-bottom: 0; }
.ac-bubble ul, .ac-bubble ol { margin: 0 0 .6em; padding-inline-start: 1.2em; }
.ac-bubble li { margin: .2em 0; }
.ac-bubble a { color: var(--ac-link); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ac-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ac-bubble strong { font-weight: 600; }

.ac-wa-card { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: #25d366; color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: .9rem; }
.ac-wa-card:hover { filter: brightness(1.05); }
.ac-wa-card .ac-ico { width: 22px; height: 22px; }

.ac-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.ac-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-muted); opacity: .5; animation: ac-dot 1.2s infinite; }
.ac-typing span:nth-child(2) { animation-delay: .15s; }
.ac-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ac-dot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.ac-sugs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.ac-sug { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--ac-line); background: var(--ac-bot); color: var(--ac-bot-ink); font-size: .82rem; cursor: pointer; transition: border-color .2s, background .2s; }
.ac-sug:hover, .ac-sug:focus-visible { border-color: var(--ac-lime); outline: none; }

.ac-foot { padding: 10px 12px 8px; background: var(--ac-bg); border-top: 1px solid var(--ac-line); }
.ac-form { display: flex; align-items: flex-end; gap: 8px; }
.ac-input {
	flex: 1; min-height: 46px; max-height: 120px; resize: none; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ac-line);
	background: var(--ac-field); color: var(--ac-bot-ink); font: 400 .95rem/1.35 var(--ac-sans);
}
.ac-input:focus { outline: 2px solid var(--ac-lime); outline-offset: 0; border-color: transparent; }
.ac-input::placeholder { color: var(--ac-muted); }
.ac-send { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--ac-lime); color: var(--ac-navy); cursor: pointer; transition: filter .2s, opacity .2s; }
.ac-send:hover { filter: brightness(1.06); }
.ac-send:disabled { opacity: .45; cursor: default; }
.ac-root[dir="rtl"] .ac-send .ac-ico { transform: scaleX(-1); }
.ac-note { display: flex; justify-content: space-between; gap: 10px; margin: 8px 2px 0; font-size: .7rem; line-height: 1.4; color: var(--ac-muted); }
.ac-note { align-items: center; }
.ac-wa-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: #25d366; color: #fff !important; text-decoration: none !important; font-size: .75rem; font-weight: 600; }
.ac-wa-link:hover { filter: brightness(1.05); }
.ac-wa-link .ac-ico { width: 15px; height: 15px; }
.ac-hbtn[hidden] { display: none; }

.ac-route { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ac-line); }
.ac-route-q { margin: 0 0 10px !important; font-weight: 600; }
.ac-route-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow-y: auto; }
.ac-route-opt { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--ac-line); background: var(--ac-body); color: var(--ac-bot-ink); font-size: .8rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.ac-route-opt:hover, .ac-route-opt:focus-visible { border-color: var(--ac-lime); outline: none; }
.ac-route-opt.is-gps { background: var(--ac-navy); border-color: var(--ac-navy); color: #fff; font-weight: 600; }
html[data-theme="dark"] .ac-route-opt.is-gps { background: var(--ac-lime); border-color: var(--ac-lime); color: var(--ac-navy); }

/* Buttons placed in pages ([ar4ho_concierge_button] / Elementor) */
.ac-open-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 2px; background: var(--dt-lime, #c4d600); color: var(--dt-navy, #002f61); font: 600 .95rem/1 Poppins, Arial, sans-serif; cursor: pointer; }
.ac-open-btn:hover { filter: brightness(1.07); }

/* Phones: full screen */
@media (max-width: 560px) {
	.ac-launch { right: 14px; bottom: 14px; height: 56px; padding: 0 8px; }
	.ac-launch-txt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ac-root[dir="rtl"] .ac-launch { left: 14px; }
	.ac-panel, .ac-root[dir="rtl"] .ac-panel { inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; }
	.ac-input { font-size: 16px; } /* no iOS zoom */
}
@media (prefers-reduced-motion: reduce) {
	.ac-root *, .ac-panel, .ac-launch { animation: none !important; transition: none !important; }
}
/* Header with three actions */
.ac-head { gap: 10px; padding-inline-end: 8px; }
.ac-hbtn { width: 36px; height: 36px; }
.ac-hbtn .ac-ico { width: 19px; height: 19px; }
.ac-name { font-size: 1.15rem; }
.ac-status { white-space: nowrap; overflow: hidden; }
.ac-status span { overflow: hidden; text-overflow: ellipsis; }