/* ========================================
   Wrapper
======================================== */

.trm-author-popover {
	position: relative;
	display: inline-block;
	line-height: 0;
	overflow: visible;
}

/* ========================================
   Trigger (avatar image)
======================================== */

.trm-author-popover__trigger {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.trm-author-popover__trigger:hover,
.trm-author-popover__trigger:focus,
.trm-author-popover__trigger:active {
	background: transparent !important;
	box-shadow: none !important;
}

.trm-author-popover__trigger img,
.trm-author-popover__trigger .avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* ========================================
   Panel Base
======================================== */

.trm-author-popover__panel {
	position: fixed;
	z-index: 9999;

	width: auto;
	max-width: min(650px, 90vw);
	min-width: 260px;

	box-sizing: border-box;

	background: #ffffff;
	color: #222;

	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;

	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);

	padding: 16px;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform-origin: top left;

	/* Start slightly smaller */
	transform: scale(0.92);

	transition:
		opacity 120ms ease,
		transform 420ms cubic-bezier(.34,1.56,.64,1), /* BOUNCE */
		visibility 0ms linear 420ms;

	will-change: transform, opacity;
}

/* If flipped to top, animate upward from bottom-left */
.trm-author-popover[data-side="top"] .trm-author-popover__panel {
	transform-origin: bottom left;
}

/* Visible state */
.trm-author-popover__panel[data-open="1"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform: scale(1);

	transition:
		opacity 120ms ease,
		transform 420ms cubic-bezier(.34,1.56,.64,1),
		visibility 0ms;
}

/* ========================================
   Header Layout
======================================== */

.trm-author-popover__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.trm-author-popover__avatar img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.trm-author-popover__name {
	margin: 0;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
}

.trm-author-popover__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.9;
}

/* ========================================
   Arrow
======================================== */

.trm-author-popover__arrow {
	position: absolute;
	width: 10px;
	height: 10px;

	background: #ffffff;

	border-left: 1px solid rgba(0, 0, 0, 0.12);
	border-top: 1px solid rgba(0, 0, 0, 0.12);

	transform: rotate(45deg) scale(0.9);
	transition: transform 240ms cubic-bezier(.16,1,.3,1);
}

.trm-author-popover__panel[data-open="1"] .trm-author-popover__arrow {
	transform: rotate(45deg) scale(1);
}

/* ========================================
   Reduced Motion (Accessibility)
======================================== */

@media (prefers-reduced-motion: reduce) {
	.trm-author-popover__panel {
		transition: none !important;
		transform: none !important;
		filter: none !important;
	}
}