/* ==========================================================================
   次元小窝 · 私信箱（css/mail.css）
   —— 左「会话列表」右「正文」的双栏信箱，mail.html 专用。

   为什么单独开一个文件：原来 mail.html 跟公告板 notice.html 共用 css/page.css 的
   .plist（两页都是"一条一条往下读"的列表，长得几乎一样，所以能共用）。
   改成双栏之后，两页的骨架已经不是一回事了：公告板还是单列往下读，私信箱变成了
   两栏各自滚动 —— 硬塞进同一个文件只会互相牵制，所以 page.css 留给公告板，
   私信箱单独走这里。
   ⚠️ page.css 里那两页共用的 .plist 一个字没动（notice.html 还在用）；
      只有头部注释更新了一句，另外 §4 那套 .plist--mail / .pitem-avatar 不再被本页引用。

   骨架（设计令牌 / 侧栏 / 顶栏 / 头图卡）仍然全在 index.css 里，这里只管信箱本体。

   目录：
     §1 双栏容器
     §2 左栏 · 会话列表
     §3 右栏 · 正文
     §4 气泡
     §5 回复框
     §6 响应式
   ========================================================================== */


/* ============================ §1 双栏容器 ============================

   ⚠️ 整体定高 + 两栏各自内部滚动，才是信箱该有的样子。
      如果让它跟内容一起长长，右栏正文一长整页就跟着滚，左栏列表会被带出屏幕 ——
      想换个会话还得先滚回上去，这就不像信箱了。
   ⚠️ 高度 = 视口 − 上方所有非信箱高度，刚好铺满一屏、页面本身不用滚。
      桌面量出来的差值是 132px：顶栏 58 + .con 的 gap 30 + .con 的 padding-bottom 40，
      再留 8px 余量。⚠️ 这页**没有头图卡**，所以预留量比别的页小得多；
      哪天又想把 .des 加回来，这里必须一起改，否则信箱底部会被顶出屏幕外。
   ⚠️ clamp 兜住两头：小笔电不至于矮到只剩两行，超长屏也不会拉成一根空柱子。
   ⚠️ overflow:hidden 不能省：圆角是加在这一层上的，子元素（列表、正文）自己会滚，
      不裁的话滚动出来的方块会顶破圆角。
   ⚠️ grid-template-rows 里的 minmax(0,1fr) 也别删 —— 这是踩过的坑：
      只写 height 的话，行高是 auto，会被**内容的最小尺寸**反顶大。
      实测 320×720（最窄档，信箱只剩 550px 高）时右栏 .mb-view 被三段消息顶到 597px，
      比信箱还高 47px → 回复框被推出屏幕外、底部切掉一截。
      写成 minmax(0,1fr) 后行高恒等于容器高，超出的部分交给两栏各自的 overflow 去滚。 */
.mailbox{
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	/* ⚠️ 两栏各自是独立卡片（见下面 .mb-list / .mb-view），所以这一层不再画框：
	   外框 + 内部竖线会把左右"焊"成一整块，看着像一张表而不是两个东西。
	   gap 留给页面底色，两个圆角才看得出来是分开的。 */
	gap: 18px;
	height: clamp(440px, calc(100vh - 136px), 860px);
}


/* ========================= §2 左栏 · 会话列表 ========================= */

.mb-list{
	display: flex;
	flex-direction: column;
	min-width: 0;                                 /* ⚠️ grid 子项默认最小宽度 auto，不写会被长昵称撑破 */
	background-color: var(--blue-50);

	/* 卡片化：四边描边 + 圆角 + 一层薄浮影。
	   ⚠️ overflow:hidden 必须留 —— 列表内部是可以滚到卡片边缘的，
	      不裁的话滚动内容会顶出圆角，四个角露出直角。 */
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	overflow: hidden;
}

/* 列表头：左边「收件箱」右边条数，被 justify-content 顶到两头 */
.mb-list-head{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-4) var(--sp-3);
	border-bottom: 1px solid var(--line-blue);
}

.mb-list-title{
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.14em;      /* 小标题字距拉开，跟全站的 .des-eyebrow 一路 */
	color: var(--ink-500);
}

.mb-list-count{
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	color: var(--ink-400);
}

/* 滚动容器。
   ⚠️ min-height:0 必须有 —— flex 子项的默认最小高度是 auto，
      不加的话它会被内容顶高，内部的 overflow-y 永远不生效（整页跟着滚）。 */
.mb-items{
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: var(--sp-2);
	scrollbar-gutter: stable;    /* 跟侧栏一个道理：预留滚动条宽度，开关时不跳 */
}

/* 滚动条做细，用主色浅档 —— 跟侧栏 index.css §3 是同一套 */
.mb-items::-webkit-scrollbar{ width: 6px; }
.mb-items::-webkit-scrollbar-track{ background: transparent; }
.mb-items::-webkit-scrollbar-thumb{ background: var(--blue-200); border-radius: var(--r-full); }
.mb-items::-webkit-scrollbar-thumb:hover{ background: var(--blue-300); }


/* ---------- 2.1 单条会话 ----------
   ⚠️ 这一条是 <button>，不是 <article>：左栏每一条都能点开，语义上就是个按钮。
      （原来那一版纯展示、点不动，所以用的是 <article>。） */
.mb-item{
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-3);
	border: 1px solid transparent;
	border-radius: var(--r-md);
	background-color: transparent;
	/* ⚠️ 按钮不继承字体，这三行不写会变成系统宋体 + 居中 */
	font-family: inherit;
	font-size: inherit;
	text-align: left;
	cursor: pointer;
	/* 悬停只改底色和描边，绝不让它位移 —— 位移会让底边从鼠标底下溜走、hover 反复开关 */
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
}

/* ⚠️ 用相邻兄弟给间距，不用 gap：.mb-items 里还夹着空状态提示，gap 会连它也一起撑开 */
/* ⚠️ 2px 时一排会话读起来是一条"长条"，分不出哪条是哪条；4px 才有个体感 */
.mb-item + .mb-item{ margin-top: 4px; }

.mb-item:hover{
	background-color: var(--surface);
	border-color: var(--line-blue);
}

/* 当前正在看的那条。主色描边 + 白底，从浅蓝列表里"浮"出来 */
.mb-item.is-active{
	background-color: var(--surface);
	border-color: var(--blue-300);
	box-shadow: var(--sh-1);
}

/* 圆形头像：拿昵称第一个字顶着，省一张图。
   接后端后想换真头像，把这个 <span> 换成 <img> 即可，尺寸类名不用动 */
.mb-avatar{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	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;    /* 双击头像别把那个字选中 */
}

/* 选中的那条头像翻成实心主色：主色只表达"被选中"，跟描边是一件事的两种强度 */
.mb-item.is-active .mb-avatar{
	color: var(--ink-900);
	background-color: var(--blue-400);
	border-color: var(--blue-500);
}

/* ⚠️ min-width:0 —— flex 子项默认最小宽度 auto，长昵称会把右边的时间挤出去 */
.mb-item-body{ flex: 1; min-width: 0; }

.mb-item-head{
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: 2px;
}

.mb-item-name{
	margin: 0;
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--ink-900);
	/* ⚠️ 这三行缺一不可：长昵称不给省略号的话，要么把时间挤出去、要么直接换行撑高整行 */
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

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

/* 最后一条消息的摘要，最多两行。
   ⚠️ line-clamp 必须挂 -webkit-box 上才生效，所以 display 不能是别的。
      本页是第一次用，全站其它地方还是老老实实单行省略。 */
.mb-item-preview{
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.65;
	color: var(--ink-500);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

/* 已读的昵称降一档，让未读那几条自己"站"出来 */
.mb-item:not(.is-unread) .mb-item-name{
	font-weight: 500;
	color: var(--ink-700);
}

/* 一条都没有时的提示。语言跟作品区的 .wf-empty / 列表的 .plist-empty 是一套 */
.mb-empty{
	margin: 0;
	padding: var(--sp-6) var(--sp-4);
	text-align: center;
	font-size: var(--fs-base);
	color: var(--ink-400);
}


/* ========================== §3 右栏 · 正文 ========================== */

.mb-view{
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--surface);

	/* 卡片化：和左边那张同一套描边 / 圆角 / 阴影，两栏才像"一对" */
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	overflow: hidden;                             /* 同上：裁掉滚到边缘的气泡 */
}

/* 正文头：头像 + 昵称/副信息 + 时间。左栏已经有一条发丝线分界了，这里不重复画 */
.mb-view-head{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4);
	border-bottom: 1px solid var(--line);
}

/* ⚠️ min-width:0，理由同 .mb-item-body */
.mb-view-info{ flex: 1; min-width: 0; }

.mb-view-name{
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--ink-900);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mb-view-meta{
	margin: 2px 0 0;
	font-size: var(--fs-sm);
	color: var(--ink-500);
}

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

/* 「返回列表」：只有窄屏才需要（宽屏两栏并排，不用返回）。
   默认藏起来，到 §6 的 760px 断点才放出来 */
.mb-back{
	display: none;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	height: 30px;
	padding: 0 10px 0 6px;
	border: 1px solid var(--line-blue);
	border-radius: var(--r-full);
	background-color: transparent;
	font-family: inherit;
	font-size: var(--fs-sm);
	color: var(--blue-700);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease);
}
.mb-back:hover{ background-color: var(--blue-100); }
.mb-back svg{ width: 14px; height: 14px; }

/* 消息流。
   ⚠️ 跟左栏一个道理：min-height:0 + overflow-y:auto 才能自己滚。
      底色用 --paper 而不是纯白 —— 白气泡压在纸上才看得出边界。 */
.mb-view-body{
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5) var(--sp-4);
	background-color: var(--paper);
	scrollbar-gutter: stable;
}
.mb-view-body::-webkit-scrollbar{ width: 6px; }
.mb-view-body::-webkit-scrollbar-track{ background: transparent; }
.mb-view-body::-webkit-scrollbar-thumb{ background: var(--blue-200); border-radius: var(--r-full); }


/* ============================= §4 气泡 ============================= */

/* 日期分隔条：一段对话中间跳了好几天时，塞一条在气泡之间 */
.mb-day{
	align-self: center;
	padding: 3px 12px;
	border-radius: var(--r-full);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	color: var(--ink-400);
	background-color: var(--blue-100);
}

.mb-bubble{
	max-width: 76%;
	padding: 10px 14px;
	border-radius: var(--r-md);
	font-size: var(--fs-base);
	line-height: 1.8;
	word-break: break-word;    /* 长链接/长英文强制换行，不然气泡会被撑出屏幕 */
}

/* 对方发来的：靠左、白底描边，左上角收一个直角，像有个小尖角指向头像 */
.mb-bubble--in{
	align-self: flex-start;
	color: var(--ink-700);
	background-color: var(--surface);
	border: 1px solid var(--line);
	border-top-left-radius: var(--r-xs);
}

/* 我发出去的：靠右、浅蓝底。
   ⚠️ 用 --blue-100 而不是 --blue-400 —— 全站唯一的"实心主色块"留给侧栏「上传作品」
      （见 index.css §3.2），这里只是"我说的话"，不是主按钮 */
.mb-bubble--out{
	align-self: flex-end;
	color: var(--ink-900);
	background-color: var(--blue-100);
	border: 1px solid var(--blue-200);
	border-top-right-radius: var(--r-xs);
}

.mb-bubble-time{
	display: block;
	margin-top: 6px;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	color: var(--ink-400);
}
.mb-bubble--out .mb-bubble-time{ text-align: right; }

/* 选中一条会话前的空状态（正常情况下轮不到它，首屏会自动选中第一条） */
.mb-view-empty{
	margin: auto;               /* 在 flex 列里居中 */
	padding: var(--sp-6);
	text-align: center;
	font-size: var(--fs-base);
	color: var(--ink-400);
}


/* ============================ §5 回复框 ============================ */

.mb-reply{
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4) var(--sp-4);
	border-top: 1px solid var(--line);
	background-color: var(--surface);
}

.mb-reply-input{
	flex: 1;
	min-width: 0;
	/* ⚠️ 这里**不写 height、也不写 max-height**，高度完全交给 js/mail.js 的 growReply()。
	   踩过的坑：原来写了 height:38px + max-height:110px，JS 里再 style.height = 内容高 ——
	   max-height 会把 JS 设的值当场截回 110px，于是"一边撑高一边被截断"，
	   内容一多就冒出一根滚动条（用户截图里那根就是它），看着像自动撑高没生效。
	   高度这类要随内容变的值，只能有一个地方说了算，别 CSS 和 JS 各管一半。
	   下面这个 38px 只是没 JS 时的兜底（一行高）。 */
	min-height: 38px;
	/* ⚠️ 输入框里那根原生滚动条**不画**。
	   理由：一边"能自动撑高"一边还留一根又宽又丑的系统滚动条，本身就像功能坏了 ——
	   用户看到的就是"输入框被锁在某个高度、内容溢出了"。
	   ⚠️ 这是"不显示"而不是"禁止滚动"：撑到可用空间上限时 overflow 仍是 auto，
	     滚轮 / 方向键照样能滚，只是没有任何一条东西横在那儿。
	   （要是哪天想要一根弱提示，别用系统默认样式，照 index.css §3 侧栏那套
	     6px 主色浅档改写 ::-webkit-scrollbar 就行。） */
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* 老 Edge / IE */
	overflow-y: hidden;
	padding: 8px 12px;
	border: 1px solid var(--line-blue);
	border-radius: var(--r-sm);
	background-color: var(--blue-50);
	font-family: inherit;     /* 输入框同样不继承字体 */
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--ink-900);
	/* 右下角那个原生拖拽手柄跟页面风格不搭，而且现在有专门的展开按钮，关掉 */
	resize: none;
	transition: border-color var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease);
}
.mb-reply-input::-webkit-scrollbar{ display: none; }   /* Chrome / Safari / 新 Edge */
.mb-reply-input::placeholder{ color: var(--ink-400); }
.mb-reply-input:focus{
	/* ⚠️ 这里必须 outline:none：输入框自己有描边变化表达聚焦，
	   再叠一个全站焦点环会变成双层框，很难看。键盘可达性由 :focus-visible 兜底 */
	outline: none;
	border-color: var(--blue-600);
	background-color: var(--surface);
}

/* 发送按钮：描边样式，不做实心主色块（理由见 §4 .mb-bubble--out 那条注释） */
.mb-reply-send{
	flex-shrink: 0;
	height: 38px;
	padding: 0 18px;
	border: 1px solid var(--blue-300);
	border-radius: var(--r-sm);
	background-color: transparent;
	font-family: inherit;
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--blue-700);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);   /* ⚠️ 不写这句，下面 :active 的缩放会瞬变、没有按下去的感觉 */
}
.mb-reply-send:hover{
	background-color: var(--blue-100);
	border-color: var(--blue-500);
}
.mb-reply-send:active{
	/* ⚠️ 按压缩放用 --ease-q（果冻），--ease 是纯减速、不会过冲，压在按钮上像卡顿 */
	transform: scale(0.97);
	transition-duration: var(--dur-press);
}

/* 清空 / 展开：发送按钮左边那两个方形图标按钮，共用一副骨架。
   ⚠️ 展开/收起只做一个按钮来回切，不摆两个 —— 两个按钮里总有一个是"当前不可用"的，
      既占地方又要额外解释；一个按钮靠箭头翻转表达状态最省事
      （收起态箭头朝上＝"可以往上撑大"，展开态翻过来朝下＝"收回去"）。 */
.mb-reply-expand,
.mb-reply-clear{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line-blue);
	border-radius: var(--r-sm);
	background-color: transparent;
	color: var(--blue-700);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}
.mb-reply-expand:hover{
	background-color: var(--blue-100);
	border-color: var(--blue-500);
}

/* 清空是删除性质：悬停给一点"危险"提示色（全站唯一的第二个色相 --alert，
   用来干这个正合适）。平时仍是蓝系，不抢戏。 */
.mb-reply-clear:hover{
	background-color: var(--alert-soft);
	border-color: var(--alert-line);
	color: var(--alert);
}

/* 空的时候按钮置灰。⚠️ :disabled 的悬停规则也要一起改回来，
   否则灰着的按钮鼠标一移上去又变红了，看着像还能点 */
.mb-reply-clear:disabled{
	opacity: 0.45;
	cursor: not-allowed;
}
.mb-reply-clear:disabled:hover{
	background-color: transparent;
	border-color: var(--line-blue);
	color: var(--blue-700);
}

.mb-reply-expand svg,
.mb-reply-clear svg{
	width: 16px;
	height: 16px;
	/* 箭头翻转用 --ease（纯减速）。⚠️ 别用 --ease-q：那是对勾会冲过 180° 再弹回来，
	   看着像箭头"抖了一下" */
	transition: transform var(--dur) var(--ease);
}
/* 展开态：箭头翻过来朝下 = 点它收回 */
.mb-reply.is-expanded .mb-reply-expand svg{ transform: rotate(180deg); }

/* 展开态的输入框加一圈更明显的描边，让"我现在在写一大段"这件事看得出来。
   ⚠️ 高度（min-height / 上限）不在这里定，全在 js/mail.js 的 growReply() 里 ——
      理由见上面 .mb-reply-input 那段注释，高度只能有一个地方说了算。 */
.mb-reply.is-expanded .mb-reply-input{
	border-color: var(--blue-300);
}


/* ============================ §6 响应式 ============================

   ⚠️ 断点沿用 index.css §9 的老三档：1280 / 1024 / 760，别自己发明新数值 */

@media (max-width: 1024px){
	/* 中屏把左栏收窄，把宽度让给正文。⚠️ 用 minmax(0,1fr) 而不是 1fr：
	   1fr 的最小值也是 auto，长内容照样能顶破 */
	.mailbox{ grid-template-columns: 258px minmax(0, 1fr); }
}

@media (max-width: 760px){
	/* 窄屏塞不下并排，退回"一次只看一栏"：
	   默认进列表；点某条 → .mailbox 加上 is-detail，列表让位给正文；
	   正文头部的「返回」按钮去掉这个类就回到列表。
	   ⚠️ 只是 display 切换，没有重排/重绘成本，比搞两个页面简单得多。 */
	.mailbox{
		grid-template-columns: minmax(0, 1fr);
		/* 窄屏上方只有顶栏，预留量跟桌面一样 */
		height: clamp(420px, calc(100vh - 136px), 760px);
	}
	/* ⚠️ 原来这里写的是 `.mb-list{ border-right: 0 }` —— 那是"两栏拼成一整块"时的补丁。
	   现在两栏各自是完整卡片（四条边都要），这条必须删掉，否则左卡在窄屏会缺一条右边框。 */

	.mailbox.is-detail .mb-list{ display: none; }
	.mailbox:not(.is-detail) .mb-view{ display: none; }

	.mb-back{ display: inline-flex; }

	.mb-view-body{ padding: var(--sp-4) var(--sp-3); }
	.mb-bubble{ max-width: 88%; }    /* 窄屏气泡放宽容度，不然两三个字就换行 */
	.mb-reply{ padding: var(--sp-3); }
	.mb-reply-send{ padding: 0 14px; }
}

/* ⚠️ ≤560 顶栏会折成两行（菜单+操作一行、搜索独占一行，见 index.css §10.5 的 .topbar），
   高度从 58px 涨到 109px —— 上面那个"视口 −132"就不够了，实测信箱底部会被顶出屏幕 35px、
   页面凭空多一条纵向滚动条。所以这一档单独把预留量提到 170px（132 + 多出来的 51，再留点余量）。
   ⚠️ 这是实测值：哪天动了顶栏的行数/高度，这里要重新量，别照抄。 */
@media (max-width: 560px){
	.mailbox{ height: clamp(400px, calc(100vh - 174px), 700px); }
}

@media (max-width: 420px){
	.mb-item{ padding: var(--sp-2) var(--sp-3); }
	.mb-avatar{ width: 32px; height: 32px; font-size: var(--fs-base); }
	.mb-view-head{ padding: var(--sp-3); gap: var(--sp-2); }
	.mb-view-name{ font-size: var(--fs-md); }
	/* 320px 下这一行挤了四个控件（输入框 + 清空 + 展开 + 发送），把后两个图标收窄腾地方 */
	.mb-reply-send{ padding: 0 12px; }
	.mb-reply-expand,
	.mb-reply-clear{ width: 34px; height: 34px; }
}