#pmFab{
	position:fixed;
	right:18px;
	bottom:18px;
	width:52px;
	height:52px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--glass);
	border:1px solid var(--border);
	box-shadow:var(--shadow);
	cursor:pointer;
	z-index:10001;
	transform:translateZ(0);
	transition:transform .14s ease, filter .14s ease;
}
#pmFab:hover{transform:translateY(-1px)}
#pmFab:active{transform:translateY(0) scale(.96)}
#pmFab.is-open{filter:brightness(1.06)}
#pmFab i{
	font-size:20px;
	color:var(--accent);
	transition:transform .18s ease;
}
#pmFab.is-open i{transform:rotate(12deg) scale(1.02)}

.pm-dot{
	width:10px;height:10px;border-radius:999px;
	background:#ef4444;
	box-shadow:0 0 0 3px rgba(239,68,68,.18);
}
.pm-dot-fab{position:absolute;top:10px;right:10px}

.pm-overlay{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.35);
	backdrop-filter:blur(6px);
	opacity:0;
	pointer-events:none;
	transition:opacity .18s ease;
	z-index:10000;
}
.pm-overlay.is-open{
	opacity:1;
	pointer-events:auto;
}

.pm-panel{
	position:fixed;
	right:18px;
	bottom:18px;
	width:360px;
	height:520px;
	display:flex;
	flex-direction:column;
	border-radius:16px;
	border:1px solid var(--border);
	background:var(--glass);
	box-shadow:var(--shadow);
	overflow:hidden;
	z-index:10002;
	transform:translateY(14px) scale(.98);
	opacity:0;
	pointer-events:none;
	transition:transform .18s ease, opacity .18s ease, width .18s ease, height .18s ease;
	will-change:transform, opacity;
}

.pm-panel.is-open{
	opacity:1;
	transform:translateY(0) scale(1);
	pointer-events:auto;
}

.pm-panel.is-closing{
	opacity:0;
	transform:translateY(14px) scale(.985);
	pointer-events:none;
}

.pm-panel.is-wide{
	width:min(980px, calc(100vw - 36px));
	height:min(640px, calc(100vh - 140px));
}

.pm-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
}



.pm-x{
	border:0;
	background:transparent;
	color:rgba(255,255,255,.75);
	width:36px;height:36px;
	border-radius:10px;
	display:flex;align-items:center;justify-content:center;
	transition:background .14s ease, color .14s ease, transform .14s ease;
}
.pm-x:hover{background:rgba(255,255,255,.06);color:#fff}
.pm-x:active{transform:scale(.96)}

.pm-body{
	flex:1;
	display:grid;
	grid-template-columns: 1fr;
	min-height:0;
}

.pm-left{display:flex;flex-direction:column;min-height:0}
.pm-right{display:none;flex-direction:column;min-height:0}
.pm-panel.has-chat .pm-body{grid-template-columns: 320px 1fr}
.pm-panel.has-chat .pm-left{border-right:1px solid rgba(255,255,255,.10)}
.pm-panel.has-chat .pm-right{display:flex}

.pm-search{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}

.pm-hits{
	display:none;
	position:absolute;
	left:10px;right:10px;top:44px;
	border-radius:14px;
	border:1px solid var(--dropdown-border);
	background:var(--dropdown-bg);
	box-shadow:var(--shadow);
	overflow:hidden;
	z-index:50;
}

.pm-hits.is-open{display:block}

.pm-hits:empty{display:none}

.pm-hits{
	max-height:280px;
	overflow:auto;
	scrollbar-width:thin;
}

.pm-hits::-webkit-scrollbar{width:10px}
.pm-hits::-webkit-scrollbar-thumb{
	background:var(--shimmer-strong);
	border-radius:999px;
	border:3px solid transparent;
	background-clip:padding-box;
}

.pm-hit{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 10px;
	cursor:pointer;
	user-select:none;
	border-bottom:1px solid var(--border);
	transition:background .12s ease, transform .12s ease;
}

.pm-hit:last-child{border-bottom:0}

.pm-hit:hover{
	background:var(--dropdown-hover-bg);
}

.pm-hit:active{
	transform:scale(.99);
}

.pm-hit b{
	font-size:.92rem;
	font-weight:800;
	line-height:1.1;
	color:var(--dropdown-hover-text);
	text-shadow:var(--text-shadow-accent);
}

.pm-hit .pm-ava{
	width:30px;height:30px;
	border-radius:10px;
	border:1px solid var(--user-border);
	background:var(--shimmer-light);
}

.pm-hits .opacity-75{
	padding:10px 10px;
	display:block;
	color:var(--text);
	opacity:var(--opacity-mid);
}


.pm-convs{flex:1;overflow:auto}
.pm-conv{
	display:flex;
	gap:10px;
	padding:10px 10px;
	border:1px solid var(--border);
	cursor:pointer;
}
.pm-conv:hover{background:rgba(255,255,255,.05)}
.pm-conv-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.pm-conv-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.pm-name{font-weight:600;font-size:.92rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-time{font-size:.75rem;opacity:.75;white-space:nowrap}
.pm-prev{font-size:.82rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-conv-side{display:flex;align-items:center;justify-content:center;width:18px}

.pm-chat-top{
	padding:10px 12px;
	border-bottom:1px solid rgba(255,255,255,.08);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}
.pm-peer{font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-last{font-size:.78rem;opacity:.75;white-space:nowrap}

.pm-msgs{
	flex:1;
	overflow:auto;
	padding:12px;
	display:flex;
	flex-direction:column;
	gap:10px;
	min-height:0;
	background:
		radial-gradient(circle at 30% 0%, rgba(255,141,58,.06), transparent 45%),
		var(--glass);
}

.pm-send{
	display:flex;
	gap:10px;
	padding:10px;
	border-top:1px solid rgba(255,255,255,.08);
	background:rgba(0,0,0,.18);
	flex:0 0 auto;
}
.pm-send .form-control{background:rgba(255,255,255,.06);border:1px solid var(--border);color:#fff}
.pm-send .form-control:focus{box-shadow:none;border:1px solid var(--border);}

.pm-ava{
	width:32px;height:32px;border-radius:10px;object-fit:cover;
	border:1px solid var(--border);
	background:rgba(255,255,255,.06);
	flex:0 0 auto;
}
.pm-ava-msg{
	width:26px;height:26px;border-radius:8px;object-fit:cover;
	border:1px solid var(--border);
	background:rgba(255,255,255,.06);
	flex:0 0 auto;
}

.pm-row{display:flex;align-items:flex-end;gap:8px}
.pm-row.me{justify-content:flex-end}
.pm-row.other{justify-content:flex-start}

.pm-bubble{
	max-width:min(78%, 520px);
	padding:10px 12px;
	border-radius:14px;
	border:1px solid var(--border);
	background:var(--bg);
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
.pm-row.me .pm-bubble{border-bottom-right-radius:6px}
.pm-row.other .pm-bubble{border-bottom-left-radius:6px}

.pm-bmeta{
	margin-top:4px;
	font-size:.72rem;
	opacity:.75;
	white-space:nowrap;
	text-align:right;
}
.pm-row.other .pm-bmeta{text-align:left}

@media (max-width: 992px), (max-height: 700px){
	.pm-panel{
		top:0;
		right:0;
		bottom:0;
		left:auto;
		width:min(420px, 100vw);
		height:100dvh;
		max-height:100dvh;
		border-radius:0;
		padding-bottom:env(safe-area-inset-bottom);
		transform:translateY(10px) scale(.99);
	}
	.pm-panel.is-wide{
		width:min(420px, 100vw);
		height:100dvh;
		max-height:100dvh;
	}
	.pm-panel.has-chat .pm-body{grid-template-columns:1fr}
	.pm-panel.has-chat .pm-left{display:none}
	.pm-panel.has-chat .pm-right{display:flex}
}
@media (prefers-reduced-motion: reduce){
	.pm-panel,.pm-overlay,#pmFab,#pmFab i{transition:none}
}

/* fx */
.pm-row {
    animation: slideUp .3s ease forwards;
    opacity: 0;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pm-row:nth-child(1) { animation-delay: 0.05s; }
.pm-row:nth-child(2) { animation-delay: 0.1s; }
.pm-row:nth-child(3) { animation-delay: 0.15s; }


.pm-msgs::-webkit-scrollbar {
    width: 4px;
}

.pm-msgs::-webkit-scrollbar-track {
    background: transparent;
}

.pm-msgs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: background 0.3s;
}

.pm-msgs:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}


.pm-tip{
	position:sticky;
	top:0;
	z-index:5;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:8px 10px;
	background:rgba(255,255,255,.06);
	border-bottom:1px solid rgba(255,255,255,.08);
	color:var(--text);
	font-size:.78rem;
	line-height:1.2;
}

.pm-tip-x{
	border:0;
	background:transparent;
	color:rgba(255,255,255,.65);
	width:28px;
	height:28px;
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background .12s ease,color .12s ease,transform .12s ease;
}
.pm-tip-x:hover{background:rgba(255,255,255,.06);color:#fff}
.pm-tip-x:active{transform:scale(.96)}

.pm-tip.is-hidden{display:none}