/* Availability controls — Voxel ts-form / ts-plan-tabs / ts-term-dropdown tokens. */

.esmira-presence-state__heading {
	margin: 0 0 10px;
	color: var(--ts-shade-2, #64748b);
	font-size: var(--e-global-typography-text-font-size, 14px);
}

.esmira-presence-state__pills {
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 8px;
}

.esmira-presence-state__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 50px;
	text-decoration: none;
	color: var(--ts-shade-1, #1e293b);
	background: var(--ts-shade-6, #f1f5f9);
	border: 1px solid var(--ts-shade-4, #e2e8f0);
	font-size: var(--e-global-typography-text-font-size, 14px);
}

.esmira-presence-state__pill .esmira-presence {
	position: static;
	width: 10px;
	height: 10px;
	border-width: 2px;
}

.esmira-presence-state__pill.ts-tab-active {
	background: var(--ts-shade-6, #f1f5f9);
	border-color: var(--ts-accent-1, #5346e5);
	box-shadow: inset 0 0 0 1px var(--ts-accent-1, #5346e5);
}

.esmira-presence-state__menu .esmira-presence-state__option {
	gap: 10px;
	padding: 10px 14px;
	color: inherit;
	text-decoration: none;
}

.esmira-presence-state__menu .esmira-presence-state__option .esmira-presence-state__status-icon {
	flex-shrink: 0;
}

.esmira-presence-state__menu .esmira-presence-state__option .esmira-presence-state__status-icon .esmira-presence {
	position: static;
	width: 10px;
	height: 10px;
	border-width: 2px;
}

/* Dot popup menu is teleported to body — scope by menu/head class, not .esmira-presence-state-dot-popup. */
.esmira-presence-state__menu--dot-popup .esmira-presence-state__option {
	justify-content: flex-start;
	width: 100%;
	text-align: left;
}

.ts-field-popup .esmira-presence-state__menu--dot-popup .esmira-presence-state__option {
	justify-content: flex-start !important;
}

.esmira-presence-state__menu--dot-popup .esmira-presence-state__status-icon {
	--ts-icon-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	min-width: 16px;
	min-height: 16px;
	border-radius: 0;
	background: transparent;
}

.ts-field-popup .esmira-presence-state__menu--dot-popup .ts-term-icon.esmira-presence-state__status-icon .esmira-presence,
.esmira-presence-state__menu--dot-popup .esmira-presence-state__status-icon .esmira-presence {
	position: static !important;
	right: auto !important;
	bottom: auto !important;
	flex: 0 0 16px;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	border-width: 2px !important;
	box-sizing: border-box !important;
	pointer-events: none;
}

.esmira-presence-state__menu .esmira-presence-state__option--active {
	font-weight: 600;
}

/* Popup title icon sizing (availability sheet only; head uses hide-d like nav menu). */
.ts-field-popup .ts-popup-content-wrapper:has( .esmira-presence-state__menu--dot-popup ) .ts-popup-head .ts-popup-name svg {
	width: var(--ts-icon-size, 22px);
	height: var(--ts-icon-size, 22px);
	flex-shrink: 0;
}

.ts-field-popup .ts-popup-content-wrapper:has( .esmira-presence-state__menu--dot-popup ) .ts-popup-head .ts-popup-name i {
	font-size: var(--ts-icon-size, 22px);
	line-height: 1;
	color: var(--ts-icon-color, var(--ts-shade-3, #64748b));
}

.esmira-presence-state-login {
	color: var(--ts-shade-2, #64748b);
}

/* Own-dot trigger — separate Vue root, not .ts-popup-component (avoids remounting native popups). */
.esmira-presence-state-dot-popup {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 35;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
}

.esmira-presence-target > .esmira-presence-state-dot-popup,
.esmira-presence-host.esmira-presence-target > .esmira-presence-state-dot-popup {
	right: 2px;
	bottom: 2px;
}

.esmira-presence-state-dot-popup > button.esmira-presence {
	position: relative;
	right: auto;
	bottom: auto;
	pointer-events: auto;
	cursor: pointer;
	z-index: 1;
}

.esmira-presence--interactive {
	pointer-events: auto;
	cursor: pointer;
	border: none;
	padding: 0;
	margin: 0;
	background-clip: padding-box;
	-webkit-appearance: none;
	appearance: none;
}

.esmira-presence--interactive::before {
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: 50%;
}

.esmira-presence--interactive:hover {
	transform: scale(1.08);
}

.esmira-presence-wrap--own-state > a.vxf-avatar,
.esmira-presence-host.esmira-presence-wrap--own-state > .ts-comp-icon {
	pointer-events: auto;
}