/* Anan phone bar - one bottom edge on phones.
 *
 * Below 768px the bottom of the screen was owned by up to four independent
 * fixed elements: the preferences circle (left), the Ana launcher (right), the
 * back-to-top chevron, and whichever contextual control the page ships - the
 * theme's mobile agent bar on a property, its Listings/Map toggle on a search,
 * the scroll-stack search pill on the homepage. They overlapped.
 *
 * phonebar.js RELOCATES each of those into a slot inside one bar. Nothing is
 * restyled where it stands, so every theme handler (all bound by class, with no
 * ancestor scoping) still fires on the same element it always did.
 *
 * Note on containing blocks: the frosted material lives on .anan-phonebar__plate,
 * a childless sibling of the row. backdrop-filter makes an element a containing
 * block for fixed descendants - putting it on the bar itself would trap any
 * position:fixed child (Ana's chat panel is the obvious casualty) inside 66px.
 */

:root {
	--anan-phonebar-h: 0px;
	--anan-phonebar-safe: 0px;
}

@media (max-width: 767.98px) {

:root {
	--anan-phonebar-h: 66px;
	--anan-phonebar-safe: env(safe-area-inset-bottom, 0px);
}

.anan-phonebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	height: calc(var(--anan-phonebar-h) + var(--anan-phonebar-safe));
	padding-bottom: var(--anan-phonebar-safe);
	font-family: Montserrat, Helvetica, Arial, sans-serif;
}

.anan-phonebar,
.anan-phonebar * {
	box-sizing: border-box;
}

/* While the chat is open the bar's own chrome goes, but the bar element stays:
   Ana's panel is a child of the adopted #ana-dock and lives inside it. The
   launcher is hidden by the plugin's own .ana-dock--expanded rule, which still
   applies because #ana-dock was adopted whole. */
.anan-phonebar.is-ana-open .anan-phonebar__plate,
.anan-phonebar.is-ana-open .anan-phonebar__top,
.anan-phonebar.is-ana-open .anan-phonebar__end--left,
.anan-phonebar.is-ana-open .anan-phonebar__slot {
	display: none;
}

.anan-phonebar__plate {
	position: absolute;
	inset: 0;
	background: rgba(110, 102, 89, 0.62);
	-webkit-backdrop-filter: blur(14px) saturate(1.08);
	backdrop-filter: blur(14px) saturate(1.08);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 -8px 26px rgba(20, 19, 16, 0.2);
}

.anan-phonebar__row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--anan-phonebar-h);
	padding: 0 12px;
}

.anan-phonebar__end {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.anan-phonebar__slot {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- back to top ---------------------------------------------------------
   A tab on the bar's top edge rather than a fifth floating circle. This is our
   own button, not the theme's .backtop: that one is coloured by anan-backtop.js
   reading whatever is painted behind it, and behind this one is always our own
   plate. The theme's is hidden on phones instead - see the rule further down. */
.anan-phonebar__top {
	position: absolute;
	right: 14px;
	bottom: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 13px 13px 0 0;
	background: rgba(110, 102, 89, 0.62);
	-webkit-backdrop-filter: blur(14px) saturate(1.08);
	backdrop-filter: blur(14px) saturate(1.08);
	color: #f4f1ea;
	cursor: pointer;
	opacity: 0;
	transform: translateY(7px);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.anan-phonebar.is-up .anan-phonebar__top {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.anan-phonebar__top svg {
	width: 19px;
	height: 19px;
}

/* The theme's floating chevron is replaced by the tab above. */
body.anan-phonebar-on .backtop {
	display: none !important;
}

/* --- left end: the preferences dock --------------------------------------- */
/* toolbar.css fixes .anan-dock to the viewport and grows its rail upward with
   flex order. In here it is a static chip and the rail is absolute above it. */
.anan-phonebar .anan-dock {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	transform: none;
	display: block;
	gap: 0;
}

.anan-phonebar .anan-dock__list {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 0;
}

.anan-phonebar .anan-dock__mini {
	width: 42px;
	height: 42px;
	background: #f4f1ea;
	color: #5d5648;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 1px 3px rgba(20, 19, 16, 0.22);
}

/* --- right end: Ana ------------------------------------------------------- */
/* #ana-dock is adopted whole (ana-dock.js caches its parts with
   el.root.querySelector, so the launcher cannot be lifted out on its own). Its
   chat panel is position:fixed and stays viewport-sized in here - a fixed
   ancestor is not a containing block. Selectors go through the id so they beat
   both the plugin's own rules and toolbar.css's phone rules on specificity
   instead of on load order. */
.anan-phonebar #ana-dock {
	display: flex;
	align-items: center;
}

.anan-phonebar #ana-dock .ana-dock__bar {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	width: auto;
}

.anan-phonebar #ana-dock .ana-dock__bar-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(160deg, #d3ae5d 0%, #a8853a 100%);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(20, 19, 16, 0.32);
}

.anan-phonebar #ana-dock .ana-dock__bar-avatar {
	font-size: 25px;
	line-height: 1;
	font-weight: 600;
}

/* Clipped, not display:none - the button keeps its accessible name. */
.anan-phonebar #ana-dock .ana-dock__bar-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.anan-phonebar #ana-dock .ana-dock__bar-hide {
	display: none;
}
/* --- centre slot: property agent ------------------------------------------ */
.anan-phonebar .mobile_agent_area_wrapper {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	height: auto;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.anan-phonebar .agent-listing-img-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
}

.anan-phonebar .agentpict {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0 1.5px rgba(246, 243, 236, 0.5);
}

.anan-phonebar .agent-listing-img-wrapper > a {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #f6f3ec;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.anan-phonebar .mobile_agent_area_details_wrapper {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
}

.anan-phonebar .agent_detail {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	width: auto;
	height: auto;
}

.anan-phonebar .agent_detail > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: #f4f1ea;
	color: #5d5648;
	font-size: 15px;
	box-shadow: 0 1px 3px rgba(20, 19, 16, 0.2);
}

/* --- centre slot: Listings / Map View -------------------------------------- */
.anan-phonebar .half_map_controllers_wrapper {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	display: flex;
	width: 100%;
	margin: 0;
	padding: 3px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	box-shadow: none;
}

.anan-phonebar .half_map_controllers_wrapper > div {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	min-width: 0;
	overflow: hidden;
	color: #efeae0;
	font-size: var(--anan-phonebar-seg-font, 12.5px);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.anan-phonebar .half_map_controllers_wrapper > div.half_control_visible {
	background: #f4f1ea;
	color: #5d5648;
	box-shadow: 0 1px 3px rgba(20, 19, 16, 0.2);
}

/* Set by fitToggle() when the labels will not fit at full size in this
   language: the icons are decoration and go first, the words stay. */
.anan-phonebar .half_map_controllers_wrapper.is-tight > div > i {
	display: none;
}

/* --- centre slot: homepage search pill ------------------------------------- */
/* Doubled class so this outranks scroll-stack.css's `body.anan-stack .anan-ss-pill`
   on specificity rather than on load order. `display` is deliberately NOT set:
   the stack hides the pill while its full search bar is open, and restating
   display here would defeat that. */
.anan-phonebar .anan-ss-pill.anan-ss-pill {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	transform: none;
	height: 40px;
	padding: 0 20px;
	background: #f4f1ea;
	color: #5d5648;
	box-shadow: 0 1px 3px rgba(20, 19, 16, 0.2);
}

/* Map view (the Listings/Map toggle) drops the footer and stretches #googleMap to
   100vh from an inline style set by control.js - which put Google's logo and its
   terms link, both anchored to the map's bottom edge, underneath this bar. Those
   have to stay visible, so the map ends where the bar begins. !important is the
   point: it is beating an inline style, not a stylesheet. */
body.anan-phonebar-on #googleMap {
	min-height: calc(100vh - var(--anan-phonebar-h) - var(--anan-phonebar-safe)) !important;
}
/* --- everything else that used to clear the old furniture ------------------ */
body.anan-phonebar-on .anan-whisper {
	right: 14px;
	left: auto;
	bottom: calc(var(--anan-phonebar-h) + var(--anan-phonebar-safe) + 14px);
}

/* The page has to end above the bar. The footer is the last thing on it, so the
   room is added there rather than to body - body padding fights the theme's
   wpestate_adjust_sticky_footer() arithmetic. */
body.anan-phonebar-on #colophon,
body.anan-phonebar-on .anan-footer {
	padding-bottom: calc(var(--anan-phonebar-h) + var(--anan-phonebar-safe) + 10px);
}

}

/* Belt and braces. phonebar.js removes the bar when the viewport grows past the
   phone break, but if that teardown were ever missed, these two - the only
   children that are ours rather than adopted - must still not paint. The row is
   deliberately left out: display:none there would take the relocated dock and
   Ana launcher with it. */
@media (min-width: 768px) {
	.anan-phonebar__plate,
	.anan-phonebar__top {
		display: none;
	}
}
/* --- dark mode ------------------------------------------------------------- */
/* Out of the media query only so the selectors stay readable; every rule is
   gated on .anan-phonebar, which the script only ever builds on phones.
   toolbar.css's html[data-anan-theme="dark"] .anan-dock__mini is (0,2,1), so the
   chip override has to carry the attribute selector too. */
html[data-anan-theme="dark"] .anan-phonebar__plate,
html[data-anan-theme="dark"] .anan-phonebar__top {
	background: rgba(24, 22, 19, 0.72);
	border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-anan-theme="dark"] .anan-phonebar .anan-dock__mini,
html[data-anan-theme="dark"] .anan-phonebar .agent_detail > a,
html[data-anan-theme="dark"] .anan-phonebar .half_map_controllers_wrapper > div.half_control_visible,
html[data-anan-theme="dark"] .anan-phonebar .anan-ss-pill.anan-ss-pill {
	background: #e8e4dc;
	color: #33302a;
}

@media (prefers-reduced-motion: reduce) {
	.anan-phonebar__top {
		transition: none;
	}
}

@media print {
	.anan-phonebar {
		display: none;
	}
}