/**
 * Hoot & Hue — Hi from Hoot
 * Everything is scoped to #hh-hoot-assistant / .hh-hoot.
 */

#hh-hoot-assistant,
#hh-hoot-assistant *{
	box-sizing:border-box;
}

.hh-hoot{
	--hoot-ink:#2c3137;
	--hoot-text:#59616b;
	--hoot-muted:#87909a;
	--hoot-line:#d9dde2;
	--hoot-soft:#f5f6f7;
	--hoot-soft-2:#eef0f2;
	--hoot-white:#fff;
	position:fixed;
	right:22px;
	bottom:22px;
	z-index:2147483000;
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--hoot-ink);
}

.hh-hoot-launcher{
	position:relative;
	display:flex;
	align-items:center;
	gap:9px;
	height:48px;
	margin:0;
	padding:0 15px 0 8px;
	border:1px solid var(--hoot-ink);
	border-radius:999px;
	background:var(--hoot-ink);
	color:#fff;
	box-shadow:0 12px 34px rgba(35,40,45,.20);
	cursor:pointer;
	transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.hh-hoot-launcher:hover{
	transform:translateY(-2px);
	background:#3c434a;
	box-shadow:0 15px 38px rgba(35,40,45,.24);
}

.hh-hoot-launcher__owl{
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:50%;
	background:#fff;
	font-size:19px;
	line-height:1;
}

.hh-hoot-launcher__label{
	font-family:Georgia,"Times New Roman",serif;
	font-size:14px;
	line-height:1;
	white-space:nowrap;
}

.hh-hoot-launcher__ping{
	position:absolute;
	top:-6px;
	right:-4px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:20px;
	border:2px solid #fff;
	border-radius:50%;
	background:#fff;
	color:var(--hoot-ink);
	font-size:9px;
	font-weight:800;
	box-shadow:0 2px 8px rgba(0,0,0,.12);
	animation:hhHootPing 2.5s ease-in-out 2;
}

@keyframes hhHootPing{
	0%,100%{transform:scale(1)}
	50%{transform:scale(1.12)}
}

.hh-hoot-panel{
	position:absolute;
	right:0;
	bottom:60px;
	display:flex;
	flex-direction:column;
	width:390px;
	height:min(620px,calc(100vh - 100px));
	overflow:hidden;
	border:1px solid var(--hoot-line);
	border-radius:16px;
	background:#fff;
	box-shadow:0 24px 70px rgba(31,36,41,.24);
	opacity:0;
	visibility:hidden;
	transform:translateY(14px) scale(.98);
	transform-origin:bottom right;
	transition:opacity .18s ease,transform .22s ease,visibility .22s;
}

.hh-hoot[data-state="open"] .hh-hoot-panel{
	opacity:1;
	visibility:visible;
	transform:translateY(0) scale(1);
}

.hh-hoot[data-state="open"] .hh-hoot-launcher{
	opacity:0;
	pointer-events:none;
	transform:translateY(8px);
}

.hh-hoot-panel__head{
	display:grid;
	grid-template-columns:42px minmax(0,1fr) 32px;
	align-items:center;
	gap:10px;
	min-height:70px;
	padding:11px 12px;
	border-bottom:1px solid var(--hoot-line);
	background:#fff;
}

.hh-hoot-avatar{
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	border:1px solid var(--hoot-line);
	border-radius:50%;
	background:var(--hoot-soft);
	font-size:22px;
}

.hh-hoot-panel__identity{
	display:flex;
	flex-direction:column;
	gap:4px;
	min-width:0;
}

.hh-hoot-panel__identity strong{
	font-family:Georgia,"Times New Roman",serif;
	font-size:17px;
	font-weight:500;
	line-height:1.15;
	color:var(--hoot-ink);
}

.hh-hoot-panel__identity span{
	display:flex;
	align-items:center;
	gap:5px;
	color:var(--hoot-muted);
	font-size:9.5px;
	line-height:1.2;
}

.hh-hoot-panel__identity i{
	width:6px;
	height:6px;
	border-radius:50%;
	background:#4f8a62;
	box-shadow:0 0 0 3px rgba(79,138,98,.10);
}

.hh-hoot-close{
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	margin:0;
	padding:0;
	border:0;
	border-radius:50%;
	background:transparent;
	color:var(--hoot-text);
	font-size:24px;
	font-weight:300;
	line-height:1;
	cursor:pointer;
}

.hh-hoot-close:hover{
	background:var(--hoot-soft);
	color:var(--hoot-ink);
}

.hh-hoot-messages{
	flex:1 1 auto;
	overflow-y:auto;
	padding:14px 13px 8px;
	scroll-behavior:smooth;
	background:
		linear-gradient(#fff 30%,rgba(255,255,255,0)) top/100% 18px no-repeat,
		linear-gradient(rgba(255,255,255,0),#fff 70%) bottom/100% 18px no-repeat;
}

.hh-hoot-message{
	display:flex;
	gap:7px;
	margin:0 0 10px;
}

.hh-hoot-message--user{
	justify-content:flex-end;
}

.hh-hoot-message__owl{
	display:flex;
	flex:0 0 25px;
	align-items:center;
	justify-content:center;
	width:25px;
	height:25px;
	margin-top:2px;
	border:1px solid var(--hoot-line);
	border-radius:50%;
	background:var(--hoot-soft);
	font-size:13px;
}

.hh-hoot-message__bubble{
	max-width:82%;
	padding:9px 11px;
	border:1px solid var(--hoot-line);
	border-radius:4px 12px 12px 12px;
	background:var(--hoot-soft);
	color:var(--hoot-text);
	font-size:11px;
	line-height:1.5;
	white-space:pre-wrap;
	word-wrap:break-word;
}

.hh-hoot-message__bubble strong{
	color:var(--hoot-ink);
	font-weight:700;
}

.hh-hoot-message--user .hh-hoot-message__bubble{
	border-color:var(--hoot-ink);
	border-radius:12px 4px 12px 12px;
	background:var(--hoot-ink);
	color:#fff;
}

.hh-hoot-typing{
	display:flex;
	align-items:center;
	gap:4px;
	min-height:18px;
}

.hh-hoot-typing span{
	width:5px;
	height:5px;
	border-radius:50%;
	background:#8b939b;
	animation:hhHootTyping 1.1s infinite ease-in-out;
}

.hh-hoot-typing span:nth-child(2){animation-delay:.14s}
.hh-hoot-typing span:nth-child(3){animation-delay:.28s}

@keyframes hhHootTyping{
	0%,70%,100%{transform:translateY(0);opacity:.45}
	35%{transform:translateY(-3px);opacity:1}
}

.hh-hoot-products{
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:150px;
	gap:8px;
	overflow-x:auto;
	margin:2px 0 12px 32px;
	padding:0 0 5px;
	scroll-snap-type:x proximity;
}

.hh-hoot-product{
	display:flex;
	flex-direction:column;
	min-width:0;
	overflow:hidden;
	border:1px solid var(--hoot-line);
	border-radius:10px;
	background:#fff;
	scroll-snap-align:start;
}

.hh-hoot-product__image{
	display:block;
	width:100%;
	aspect-ratio:1/1;
	overflow:hidden;
	background:var(--hoot-soft);
}

.hh-hoot-product__image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.hh-hoot-product__body{
	display:flex;
	flex:1;
	flex-direction:column;
	gap:4px;
	padding:8px;
}

.hh-hoot-product__body strong{
	display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	color:var(--hoot-ink);
	font-family:Georgia,"Times New Roman",serif;
	font-size:11px;
	line-height:1.3;
	font-weight:500;
}

.hh-hoot-product__price{
	color:var(--hoot-ink);
	font-size:10px;
	font-weight:700;
}

.hh-hoot-product__stock{
	color:var(--hoot-muted);
	font-size:8px;
}

.hh-hoot-product__actions{
	display:grid;
	grid-template-columns:1fr auto;
	gap:5px;
	margin-top:auto;
	padding-top:4px;
}

.hh-hoot-product__actions a,
.hh-hoot-product__actions button{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:30px;
	margin:0;
	padding:0 8px;
	border:1px solid var(--hoot-ink);
	border-radius:5px;
	background:var(--hoot-ink);
	color:#fff;
	font-size:8.5px;
	font-weight:700;
	text-decoration:none;
	cursor:pointer;
}

.hh-hoot-product__actions a{
	width:31px;
	padding:0;
	border-color:var(--hoot-line);
	background:#fff;
	color:var(--hoot-ink);
}

.hh-hoot-product__actions button[disabled]{
	opacity:.65;
	cursor:wait;
}

.hh-hoot-order-card,
.hh-hoot-request-card{
	margin:2px 0 12px 32px;
	overflow:hidden;
	border:1px solid var(--hoot-line);
	border-radius:10px;
	background:#fff;
}

.hh-hoot-order-card__head,
.hh-hoot-request-card__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	padding:9px 10px;
	border-bottom:1px solid var(--hoot-line);
	background:var(--hoot-soft);
}

.hh-hoot-order-card__head strong,
.hh-hoot-request-card__head strong{
	color:var(--hoot-ink);
	font-family:Georgia,"Times New Roman",serif;
	font-size:12px;
	font-weight:500;
}

.hh-hoot-status{
	display:inline-flex;
	align-items:center;
	min-height:21px;
	padding:0 7px;
	border-radius:999px;
	background:var(--hoot-soft-2);
	color:var(--hoot-text);
	font-size:8px;
	font-weight:700;
}

.hh-hoot-order-card__body{
	display:grid;
	grid-template-columns:1fr auto;
	gap:7px 10px;
	padding:9px 10px;
	font-size:9px;
	color:var(--hoot-text);
}

.hh-hoot-order-card__items{
	grid-column:1/-1;
	margin:0;
	padding:7px 0 0;
	border-top:1px solid #eceef0;
	color:var(--hoot-muted);
}

.hh-hoot-card-link{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:31px;
	margin:0 9px 9px;
	border:1px solid var(--hoot-ink);
	border-radius:5px;
	background:var(--hoot-ink);
	color:#fff!important;
	font-size:9px;
	font-weight:700;
	text-decoration:none!important;
}

.hh-hoot-request-card__body{
	padding:9px 10px;
	color:var(--hoot-text);
	font-size:9.5px;
	line-height:1.45;
}

.hh-hoot-artists{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:7px;
	margin:2px 0 12px 32px;
}

.hh-hoot-artist{
	display:grid;
	grid-template-columns:38px minmax(0,1fr);
	align-items:center;
	gap:7px;
	min-height:52px;
	padding:6px;
	border:1px solid var(--hoot-line);
	border-radius:9px;
	background:#fff;
	color:var(--hoot-ink)!important;
	text-decoration:none!important;
}

.hh-hoot-artist__image{
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	overflow:hidden;
	border-radius:50%;
	background:var(--hoot-soft);
	font-size:16px;
}

.hh-hoot-artist__image img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.hh-hoot-artist strong{
	display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	font-family:Georgia,"Times New Roman",serif;
	font-size:10px;
	line-height:1.25;
	font-weight:500;
}

.hh-hoot-links{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:0 0 12px 32px;
}

.hh-hoot-links a{
	display:inline-flex;
	align-items:center;
	min-height:29px;
	padding:0 9px;
	border:1px solid var(--hoot-line);
	border-radius:999px;
	background:#fff;
	color:var(--hoot-ink)!important;
	font-size:8.5px;
	font-weight:700;
	text-decoration:none!important;
}

.hh-hoot-links a:hover{
	border-color:#aeb5bc;
	background:var(--hoot-soft);
}

.hh-hoot-quick{
	flex:0 0 auto;
	display:flex;
	gap:6px;
	overflow-x:auto;
	padding:7px 12px 8px;
	border-top:1px solid #eff0f2;
	background:#fff;
}

.hh-hoot-quick button{
	flex:0 0 auto;
	min-height:29px;
	margin:0;
	padding:0 9px;
	border:1px solid var(--hoot-line);
	border-radius:999px;
	background:#fff;
	color:var(--hoot-text);
	font-size:8.5px;
	font-weight:600;
	white-space:nowrap;
	cursor:pointer;
}

.hh-hoot-quick button:hover{
	border-color:#aeb5bc;
	background:var(--hoot-soft);
	color:var(--hoot-ink);
}

.hh-hoot-composer{
	flex:0 0 auto;
	padding:9px 11px 10px;
	border-top:1px solid var(--hoot-line);
	background:#fff;
}

.hh-hoot-composer__box{
	display:grid;
	grid-template-columns:minmax(0,1fr) 36px;
	align-items:end;
	gap:6px;
	padding:5px 5px 5px 9px;
	border:1px solid #cfd4d9;
	border-radius:10px;
	background:#fff;
	transition:border-color .15s ease,box-shadow .15s ease;
}

.hh-hoot-composer__box:focus-within{
	border-color:#8e979f;
	box-shadow:0 0 0 3px rgba(98,108,118,.08);
}

.hh-hoot-composer textarea{
	display:block;
	width:100%;
	max-height:92px;
	min-height:30px;
	margin:0!important;
	padding:6px 0!important;
	border:0!important;
	outline:0!important;
	background:transparent!important;
	color:var(--hoot-ink)!important;
	font:inherit!important;
	font-size:11px!important;
	line-height:1.4!important;
	resize:none!important;
	box-shadow:none!important;
}

.hh-hoot-composer textarea::placeholder{
	color:#9aa1a8;
}

.hh-hoot-composer button{
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	margin:0;
	padding:0;
	border:1px solid var(--hoot-ink);
	border-radius:7px;
	background:var(--hoot-ink);
	color:#fff;
	cursor:pointer;
}

.hh-hoot-composer button svg{
	width:17px;
	height:17px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.7;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.hh-hoot-composer button[disabled]{
	opacity:.55;
	cursor:wait;
}

.hh-hoot-composer>small{
	display:block;
	margin-top:5px;
	color:#9aa1a8;
	font-size:7.5px;
	line-height:1.3;
	text-align:center;
}

@media(max-width:620px){
	.hh-hoot{
		right:12px;
		bottom:12px;
	}

	.hh-hoot-panel{
		position:fixed;
		right:8px;
		bottom:8px;
		width:calc(100vw - 16px);
		height:min(690px,calc(100dvh - 16px));
		max-height:none;
		border-radius:15px;
		transform-origin:bottom center;
	}

	.hh-hoot-launcher{
		height:46px;
		padding-right:13px;
	}

	.hh-hoot-launcher__label{
		font-size:13px;
	}

	.hh-hoot-products{
		grid-auto-columns:145px;
	}

	.hh-hoot-message__bubble{
		max-width:86%;
	}
}

@media(max-width:390px){
	.hh-hoot-launcher__label{
		display:none;
	}

	.hh-hoot-launcher{
		width:48px;
		padding:0;
		justify-content:center;
	}

	.hh-hoot-launcher__owl{
		width:36px;
		height:36px;
	}
}

@media(prefers-reduced-motion:reduce){
	.hh-hoot *,
	.hh-hoot *::before,
	.hh-hoot *::after{
		animation:none!important;
		transition:none!important;
		scroll-behavior:auto!important;
	}
}

.hh-hoot-launcher.is-wiggle{
	animation:hhHootWiggle .75s ease-in-out 1;
}
@keyframes hhHootWiggle{
	0%,100%{transform:rotate(0)}
	20%{transform:rotate(-3deg)}
	40%{transform:rotate(3deg)}
	60%{transform:rotate(-2deg)}
	80%{transform:rotate(2deg)}
}


/* ======================================================================
 * v1.1.0 — conversational account creation
 * ==================================================================== */

.hh-hoot-choice-row{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:0 0 12px 32px;
}

.hh-hoot-choice-row button,
.hh-hoot-choice-row a{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:31px;
	margin:0;
	padding:0 10px;
	border:1px solid var(--hoot-line);
	border-radius:999px;
	background:#fff;
	color:var(--hoot-ink)!important;
	font-family:inherit;
	font-size:8.5px;
	line-height:1;
	font-weight:700;
	text-decoration:none!important;
	cursor:pointer;
	box-shadow:none;
	transition:background .15s ease,border-color .15s ease,transform .15s ease;
}

.hh-hoot-choice-row button:hover,
.hh-hoot-choice-row a:hover{
	border-color:#aeb5bc;
	background:var(--hoot-soft);
	transform:translateY(-1px);
}

.hh-hoot-choice-row .is-primary{
	border-color:var(--hoot-ink);
	background:var(--hoot-ink);
	color:#fff!important;
}

.hh-hoot-choice-row .is-primary:hover{
	border-color:#454d55;
	background:#454d55;
	color:#fff!important;
}

@media(max-width:620px){
	.hh-hoot-choice-row{
		margin-left:32px;
	}
}


/* v1.1.1 — cleaner product-card price line */
.hh-hoot-product__price{
	min-height:14px;
	white-space:normal;
	word-break:normal;
	overflow-wrap:anywhere;
	font-variant-numeric:tabular-nums;
}


/* v1.2.0 — multiple recent orders in chat */
.hh-hoot-order-list{
	display:grid;
	gap:8px;
	margin:2px 0 12px 32px;
}
.hh-hoot-order-list .hh-hoot-order-card{margin:0}
.hh-hoot-order-card--compact .hh-hoot-order-card__body{padding:8px 9px}
.hh-hoot-order-card--compact .hh-hoot-card-link{min-height:29px;margin:0 8px 8px}


/* ======================================================================
 * v1.2.2 — mobile chat sizing + iOS input no-zoom
 * Keep form controls >=16px on phones: iOS Safari otherwise zooms the
 * viewport when the visitor focuses the composer.
 * ==================================================================== */
@media (max-width: 767px) {
	.hh-hoot-panel {
		width: min(94vw, 390px);
		max-width: calc(100vw - 16px);
		height: min(72dvh, 590px);
		max-height: calc(100dvh - 92px);
		right: 8px;
		bottom: 76px;
		border-radius: 14px;
	}

	.hh-hoot-panel__head {
		padding: 10px 12px;
		min-height: 48px;
	}

	.hh-hoot-panel__head strong {
		font-size: 15px;
	}

	.hh-hoot-panel__head small {
		font-size: 11px;
	}

	.hh-hoot-messages {
		padding: 10px;
		gap: 8px;
	}

	.hh-hoot-message {
		font-size: 14px;
		line-height: 1.42;
	}

	.hh-hoot-composer {
		padding: 8px;
		gap: 6px;
	}

	/* 16px is intentional: prevents iPhone Safari focus zoom. */
	.hh-hoot-composer textarea,
	.hh-hoot-composer input,
	.hh-hoot-registration input,
	.hh-hoot-panel input[type="text"],
	.hh-hoot-panel input[type="email"],
	.hh-hoot-panel textarea {
		font-size: 16px !important;
		line-height: 1.35;
	}

	.hh-hoot-composer textarea {
		min-height: 40px;
		max-height: 88px;
		padding: 9px 10px;
		border-radius: 10px;
	}

	.hh-hoot-send {
		min-width: 42px;
		min-height: 40px;
		padding: 8px 10px;
	}

	.hh-hoot-launcher {
		width: 52px;
		height: 52px;
		right: 12px;
		bottom: 14px;
	}

	.hh-hoot-product-grid {
		gap: 7px;
	}

	.hh-hoot-product {
		min-width: 0;
	}

	.hh-hoot-product__body {
		padding: 7px;
	}

	.hh-hoot-product__title,
	.hh-hoot-product__price {
		font-size: 12px;
	}

	.hh-hoot-order-list {
		margin-left: 0;
	}
}

/* Small phones: preserve more of the conversation above the keyboard. */
@media (max-width: 390px) {
	.hh-hoot-panel {
		width: calc(100vw - 12px);
		max-width: calc(100vw - 12px);
		right: 6px;
		bottom: 72px;
		height: min(70dvh, 560px);
	}

	.hh-hoot-messages {
		padding: 8px;
	}

	.hh-hoot-message {
		font-size: 13.5px;
	}
}


/* ======================================================================
 * v1.3.0 — compact mobile modal and refined intent/knowledge routing
 * ==================================================================== */
@media (max-width: 767px) {
	.hh-hoot-launcher {
		position:relative;
		display:flex;
		align-items:center;
		gap:9px;
		width:auto;
		height:48px;
		right:auto;
		bottom:auto;
		margin:0;
		padding:0 15px 0 8px;
		border-radius:999px;
	}

	.hh-hoot-launcher__owl {
		width:34px;
		height:34px;
		font-size:19px;
	}

	.hh-hoot-launcher__label {
		display:inline;
		font-size:14px;
	}

	.hh-hoot-launcher__ping {
		display:flex;
	}
}

@media (max-width: 390px) {
	.hh-hoot-launcher {
		width:auto;
		height:48px;
		padding:0 15px 0 8px;
		justify-content:flex-start;
	}

	.hh-hoot-launcher__label {
		display:inline;
		font-size:13px;
	}

	.hh-hoot-launcher__owl {
		width:34px;
		height:34px;
	}
}