/* Hearts of Harris – AI Concierge widget */
.hoh-ai { --acc: var(--hoh-ai-accent, #7a1f1f); position: fixed; right: 22px; bottom: 22px; z-index: 99999; font-family: inherit; }
/* Ensure the hidden attribute always wins over display rules (fixes minimise). */
.hoh-ai [hidden] { display: none !important; }
/* Left-side placement: open the panel from the left. */
.hoh-ai--left .hoh-ai-panel { right: auto; left: 0; }

/* ---------- Launcher ---------- */
.hoh-ai-launcher {
	display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer;
	background: var(--acc); color: #fff; padding: 8px 18px 8px 8px; border-radius: 50px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .28); position: relative;
}
.hoh-ai-launcher:hover { filter: brightness(1.06); }
.hoh-ai-launch-label { font-weight: 700; font-size: 15px; white-space: nowrap; }
.hoh-ai-launcher .hoh-ai-mascot { width: 46px; height: 46px; background: #fff5ec; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.hoh-ai-pulse {
	position: absolute; inset: 0; border-radius: 50px; border: 2px solid var(--acc);
	animation: hoh-ai-pulse 2.4s ease-out infinite; pointer-events: none;
}
@keyframes hoh-ai-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.25); opacity: 0; } }

/* ---------- Avatar ---------- */
.hoh-ai-mascot { display: block; overflow: visible; }
lottie-player.hoh-ai-mascot { width: 48px; height: 52px; }
.hoh-ai-bob   { transform-box: view-box; transform-origin: 60px 118px; animation: hoh-ai-bob 3.6s ease-in-out infinite; }
.hoh-ai-eyes  { transform-box: view-box; transform-origin: 60px 59px; animation: hoh-ai-blink 4.8s infinite; }
.hoh-ai-mouth { transform-box: view-box; transform-origin: 60px 76px; }
.hoh-ai-cheek { animation: hoh-ai-cheek 4.8s ease-in-out infinite; }

@keyframes hoh-ai-bob   { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-1.5deg); } }
@keyframes hoh-ai-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes hoh-ai-cheek { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }

/* Talking state — mouth moves + head gives a subtle nod (works for SVG and Lottie) */
.hoh-ai-speaking .hoh-ai-mouth  { animation: hoh-ai-talk .26s ease-in-out infinite; }
.hoh-ai-speaking .hoh-ai-mascot { animation: hoh-ai-nod .5s ease-in-out infinite; }
@keyframes hoh-ai-talk { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1.5); } }
@keyframes hoh-ai-nod  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) {
	.hoh-ai-bob, .hoh-ai-eyes, .hoh-ai-cheek, .hoh-ai-speaking .hoh-ai-mouth, .hoh-ai-speaking .hoh-ai-mascot { animation: none; }
}

/* ---------- Panel ---------- */
.hoh-ai-panel {
	position: absolute; right: 0; bottom: 74px; width: 372px; max-width: calc(100vw - 32px);
	height: 560px; max-height: calc(100vh - 120px); background: #fff; border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3); display: flex; flex-direction: column; overflow: hidden;
	animation: hoh-ai-in .22s ease;
}
@keyframes hoh-ai-in { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.hoh-ai-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--acc); color: #fff; }
.hoh-ai-head-avatar { width: 48px; height: 48px; background: #fff5ec; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); flex: 0 0 auto; }
.hoh-ai-head-avatar .hoh-ai-mascot { width: 46px; height: 46px; }
.hoh-ai-head-txt { flex: 1; line-height: 1.3; }
.hoh-ai-head-txt strong { font-size: 16px; display: block; }
.hoh-ai-head-txt small { opacity: .85; font-size: 12px; }
.hoh-ai-lang { background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; padding: 4px 6px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.hoh-ai-lang option { color: #333; }
.hoh-ai-close { background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; opacity: .9; }
.hoh-ai-close:hover { opacity: 1; }

.hoh-ai-log { flex: 1; overflow-y: auto; padding: 16px; background: #faf7f4; display: flex; flex-direction: column; gap: 10px; }
.hoh-ai-msg { max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.hoh-ai-msg a { color: var(--acc); font-weight: 600; }
.hoh-ai-bot { background: #fff; border: 1px solid #eee; align-self: flex-start; border-bottom-left-radius: 4px; }
.hoh-ai-user { background: var(--acc); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.hoh-ai-tool-note { align-self: center; font-size: 11.5px; color: #9a8a80; background: #f0e9e3; padding: 3px 10px; border-radius: 10px; }

.hoh-ai-typing { padding: 4px 20px 10px; display: flex; gap: 5px; }
.hoh-ai-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); opacity: .5; animation: hoh-ai-dot 1.2s infinite; }
.hoh-ai-typing span:nth-child(2) { animation-delay: .2s; }
.hoh-ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes hoh-ai-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Listening indicator */
.hoh-ai-listenbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px 10px; font-size: 13px; font-weight: 600; color: var(--acc); background: #fff; }
.hoh-ai-listendot { width: 10px; height: 10px; border-radius: 50%; background: #d33; flex: 0 0 auto; animation: hoh-ai-listenpulse 1s ease-in-out infinite; }
@keyframes hoh-ai-listenpulse { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }

.hoh-ai-input { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid #eee; background: #fff; }
.hoh-ai-input input { flex: 1; border: 1px solid #ddd; border-radius: 22px; padding: 11px 16px; font-size: 14.5px; outline: none; }
.hoh-ai-input input:focus { border-color: var(--acc); }
.hoh-ai-mic, .hoh-ai-send { border: 0; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; font-size: 17px; flex: 0 0 auto; }
.hoh-ai-mic { background: #f0e9e3; }
.hoh-ai-mic.hoh-ai-listening { background: #ffd2d2; animation: hoh-ai-pulse-mic 1s infinite; }
@keyframes hoh-ai-pulse-mic { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 0, 0, .4); } 50% { box-shadow: 0 0 0 8px rgba(200, 0, 0, 0); } }
.hoh-ai-send { background: var(--acc); color: #fff; }
.hoh-ai-voice-toggles { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0 14px 10px; background: #fff; }
.hoh-ai-voice-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #7a6a60; cursor: pointer; }

@media (max-width: 480px) {
	.hoh-ai { right: 12px; bottom: 12px; }
	.hoh-ai-launch-label { display: none; }
	.hoh-ai-launcher { padding: 6px; }
	/* Fill the screen with safe margins so nothing can overflow off-canvas. */
	.hoh-ai-panel {
		position: fixed;
		top: 10px; right: 8px; bottom: 8px; left: 8px;
		width: auto; max-width: none; height: auto; max-height: none;
		border-radius: 14px;
	}
	.hoh-ai-msg { max-width: 88%; }
}