/* ==========================================================================
   次元小窝 · 条目列表页（css/page.css）
   —— 公告板 notice.html **专用**。

   ⚠️ 原来这个文件是 notice.html 和 mail.html 共用的：两页都是"一条一条往下读"的
      列表，条目长得几乎一样，只有左边那个圆形头像和"未读"小红点是私信箱独有的
      （靠 .plist--mail 这个修饰类区分）。
      2026-10-15 私信箱改成了「左会话列表 + 右正文」的双栏（见 css/mail.css），
      已经不是同一个骨架了，所以本文件从这一刻起只服务公告板。
      §4 那套 .plist--mail / .pitem-avatar 目前**没有任何页面在引用**，
      留着是想着以后哪页又需要"带圆形头像的列表"能直接捡回来；
      真要清理的话删掉 §4 即可，notice.html 一个类都没用到。

   骨架（设计令牌 / 侧栏 / 顶栏 / 头图卡）全在 index.css 里，这里只管列表本身。

   目录：
     §1 列表容器
     §2 条目本体
     §3 置顶 / 未读
     §4 私信箱的圆形头像
     §5 响应式
   ========================================================================== */


/* ============================ §1 列表容器 ============================ */

.plist{
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

/* 一条都没有时显示的提示。样式跟作品区的 .wf-empty 是一套语言：
   虚线圈 + 浅底 + 居中灰字 */
.plist-empty{
	margin: 0;
	padding: var(--sp-6) var(--sp-4);
	text-align: center;
	font-size: var(--fs-md);
	color: var(--ink-400);
	border: 1px dashed var(--line-blue);
	border-radius: var(--r-lg);
	background-color: rgba(255, 255, 255, 0.55);
}


/* ============================= §2 条目本体 =============================

   ⚠️ 悬停只改**描边颜色 + 阴影**，绝不能让条目自身位移 ——
      位移会让底边从鼠标底下溜走，hover 反复开关，列表抖成筛子。
      （首页瀑布流就踩过这个坑：实测 1.5 秒内状态翻转 473 次） */
.pitem{
	position: relative;
	/* 左边留宽一点，给下面那道竖线让位 */
	padding: var(--sp-4) var(--sp-4) var(--sp-4) 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background-color: var(--surface);
	box-shadow: var(--sh-1);
	transition: border-color var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease);
}

.pitem:hover{
	border-color: var(--blue-300);
	box-shadow: var(--sh-2);
}

/* 左侧那道小竖线。用伪元素画，省得再多套一层 <span> */
.pitem::before{
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 4px;
	border-radius: 0 var(--r-xs) var(--r-xs) 0;
	background-color: var(--blue-200);
}

/* 头部行：标题 + 时间（时间被 margin-left:auto 推到最右） */
.pitem-head{
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: 6px;
}

.pitem-title{
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--ink-900);
	/* ⚠️ 这三行缺一不可：不加的话长标题会把右边的时间挤出去、
	      或者干脆换行把整行撑高。min-width:0 是 flex 里出省略号的前提 */
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pitem-time{
	flex-shrink: 0;
	margin-left: auto;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	color: var(--ink-400);
}

.pitem-text{
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.75;
	color: var(--ink-700);
}


/* ========================= §3 置顶 / 未读 ========================= */

/* 置顶：竖线换成主色（全站只有主按钮和它用实心主色，所以很显眼） */
.pitem--pin::before{
	background-color: var(--blue-600);
}

.pitem-badge{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding: 0 9px;
	/* ⚠️ 「置顶」是贴在标题前的一枚标签，跟图片角标 / 筛选胶囊属于同一类"贴片"，
	   所以统一全胶囊。原来 --r-xs(6px) 落在 18px 高的块上，四角还留着直角感。 */
	border-radius: var(--r-full);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background-color: var(--blue-600);
}

/* 未读：标题前面点一个小红点。
   ⚠️ 颜色用 --dot，和侧栏「私信箱」那个红点是同一个，别再造一个红 */
.pitem.is-unread .pitem-title::before{
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	border-radius: 50%;
	background-color: var(--dot);
	vertical-align: middle;
}


/* ======================= §4 私信箱的圆形头像 ======================= */

.plist--mail .pitem{
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
}

/* 拿昵称第一个字当头像，省掉一张图。接后端后想换真头像，
   把这个 <span> 换成 <img> 就行，尺寸类名不用动 */
.pitem-avatar{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1;
	color: var(--blue-700);
	background-color: var(--blue-100);
	border: 1px solid var(--blue-200);
	user-select: none;   /* 双击头像别把字选中（跟作品图那个坑是一回事） */
}

/* ⚠️ min-width:0 必须有 —— flex 子项默认最小宽度是 auto，
   长英文/长链接会把整行撑破 */
.pitem-body{
	flex: 1;
	min-width: 0;
}


/* ============================= §5 响应式 =============================
   ⚠️ 断点沿用 index.css §9 的老三档：1280 / 1024 / 760，别自己发明新数值 */
@media (max-width: 760px){
	.pitem{
		padding: var(--sp-3) var(--sp-3) var(--sp-3) 18px;
	}
	.pitem-title{
		font-size: var(--fs-md);
	}
	.pitem-text{
		font-size: var(--fs-base);
		line-height: 1.7;
	}
	.pitem-avatar{
		width: 28px;
		height: 28px;
		font-size: var(--fs-sm);
	}
	.pitem-time{
		font-size: var(--fs-xs);
	}
}