/* ============================================================
   newsite 移动端适配（手机 / 小平板）
   本文件在 style.css 之后加载，仅在小屏生效，不改动桌面布局。
   断点：980 通用防护 / 640 大手机 / 480 小手机 / 390 超小手机
   ============================================================ */

/* ---------- 通用防护：杜绝横向滚动、媒体自适应 ---------- */
@media (max-width: 980px) {
	html {
		overflow-x: hidden;
	}

	body {
		overflow-x: clip;
	}

	/* clip 不会破坏 sticky 顶栏 */

	/* 关键修复：style.css 末尾"版式加宽"补丁（约 7340 行）无媒体查询包裹，
	   会把 .e-shell 重新写死为 264px 两列、.e-main 左边距 40px，
	   覆盖掉原有的 ≤980 单列规则，导致手机端正文被挤成窄条。此处压回单列。 */
	.e-shell {
		grid-template-columns: 1fr;
		padding: 0;
	}

	.e-main {
		padding: 22px 16px 32px;
	}

	/* 侧栏目录在移动端由抽屉导航取代，隐藏原横向滑动条 */
	.e-side {
		display: none;
	}

	img,
	video,
	canvas,
	iframe,
	embed,
	object {
		max-width: 100%;
		height: auto;
	}

	table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	pre,
	code,
	.code {
		white-space: pre-wrap !important;
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	input,
	textarea,
	select,
	button {
		max-width: 100%;
		font-size: 16px;
	}

	/* 防止 iOS 聚焦缩放 */

	/* 产品详情页：.pc.full / .devres-grid 用 grid-column:1/3，
	   在单列 grid 下会撑出「隐式第二列」（auto 宽）导致右侧溢出窗口 */
	.prod-body {
		grid-template-columns: 1fr;
	}

	.pc.full,
	.devres-grid {
		grid-column: 1 / -1;
	}

	/* grid 子项默认 min-width:auto，宽表格（.spec/.spec-full）会把 .pc 撑破容器 */
	.prod-body>*,
	.pc {
		min-width: 0;
	}

	.pc {
		overflow-x: auto;
	}
}

/* ---------- 大手机 / 竖屏平板（≤640） ---------- */
@media (max-width: 640px) {
	.ns-wrap {
		padding: 0 14px;
	}

	/* 产品 / 版块卡：固定 200px 图列改为整列堆叠，去掉强制最小高度 */
	.e-pcard {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 14px;
	}

	.pc-img {
		min-height: 160px;
	}

	/* 版块卡头：信息在上，进入按钮整行 */
	.fb-head {
		flex-wrap: wrap;
	}

	.fb-head .e-btn.p {
		width: 100%;
		margin-top: 4px;
		justify-content: center;
	}

	/* 列表 / Tab 字号收敛，避免溢出 */
	.fb-topics li {
		font-size: 15px;
		gap: 8px;
		padding: 10px 14px;
	}

	.fb-topics .e-time {
		font-size: 13px;
	}

	.fb-tab {
		font-size: 15px;
		padding: 6px 10px;
	}

	.fb-desc,
	.pc-desc {
		font-size: 15px;
		line-height: 1.7;
	}

	/* 顶部导航字号收敛 */
	.ns-nav a {
		font-size: 15px;
		padding: 7px 10px;
	}

	.e-side a,
	.e-side-tt {
		font-size: 15px;
	}

	/* 产品页头部按钮换行 */
	.pc-head {
		gap: 10px;
	}

	.pc-cta-mini {
		width: 100%;
	}
}

/* ---------- 小手机（≤480） ---------- */
@media (max-width: 480px) {
	.ns-topnav .bar {
		gap: 8px;
	}

	.ns-logo {
		font-size: 16px;
	}

	.ns-nav a {
		font-size: 14px;
		padding: 6px 8px;
	}

	.ns-user a.login {
		font-size: 14px;
	}

	.e-h1 {
		font-size: clamp(22px, 7.5vw, 28px);
	}

	.e-sec-hd .e-h2 {
		font-size: 19px;
	}

	.e-pcard h3 {
		font-size: 20px;
	}

	/* 与 style.css ≤560 断点保持一致 */
	.pc-desc {
		font-size: 14px;
	}

	.fb-topics li {
		font-size: 14px;
	}

	.fb-av {
		width: 38px;
		height: 38px;
		font-size: 19px;
	}

	/* CTA 按钮整行堆叠 */
	.e-cta {
		flex-wrap: wrap;
	}

	.e-cta .e-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- 超小手机（≤390，如 iPhone SE / 12 mini） ---------- */
@media (max-width: 390px) {
	.ns-wrap {
		padding: 0 12px;
	}

	.ns-nav a {
		font-size: 13px;
		padding: 6px 7px;
	}

	.e-pcard {
		padding: 12px;
	}

	.fb-topics li {
		padding: 9px 12px;
	}
}

/* =========================================================
   全站补充：认证页 / 用户中心 / 产品详情 / 列表 / 表单 CTA
   ========================================================= */

/* ---- 登录 / 注册：两栏 → 单列 ---- */
@media (max-width: 640px) {
	.auth-wrap {
		grid-template-columns: 1fr;
		margin: 18px auto 36px;
	}

	.auth-side {
		border-right: 0;
		border-bottom: 1px solid var(--border);
		padding: 28px 22px;
	}

	.auth-main {
		padding: 26px 22px;
	}

	.auth-qr img {
		width: 200px;
		height: 200px;
		max-width: 100%;
	}
}

/* ---- 用户中心：头像行 / 账号卡 堆叠 ---- */
@media (max-width: 640px) {
	.set-facerow {
		flex-direction: column;
		align-items: flex-start;
	}

	.set-me {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* ---- 版块页头部：修复文字列被挤成窄条 ----
   style.css ≤820 时 .board-head 开启 flex-wrap，而 .bh-info 是 flex:1（basis 为 0），
   换行计算下文字列只分到「容器-头像-按钮」的零头宽度，导致每行仅四五个字。 */
@media (max-width: 640px) {
	.bh-info {
		flex: 1 1 0;
		min-width: 0;
	}

	/* basis 0：与头像同行并撑满剩余空间（按钮已整行换行，不再抢宽度） */
	.bh-av {
		align-self: flex-start;
	}

	/* 头像与名称顶部对齐（同一行） */
	.bh-post {
		flex: 1 1 100%;
		/* 发帖按钮整行放底部 */
		justify-content: center;
	}

	.bh-desc {
		/* 简介限 3 行，避免拉出超高卡片 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.bh-desc.open {
		-webkit-line-clamp: unset;
		display: block;
	}

	/* 展开全部 */
	.bh-more {
		display: inline-block;
		margin-top: 6px;
		font-size: 13px;
		font-weight: 700;
		color: var(--e-brand);
		cursor: pointer;
		user-select: none;
	}
}

/* ---- 消息页：会话列表固定 280px 会把聊天区挤没 ----
   手机端：列表铺满全屏，点某个会话打开全屏抽屉（对话 + 输入框） */
.msg-mask,
.msg-drawer {
	display: none;
}

@media (max-width: 640px) {
	.chat-wrap {
		flex-direction: column;
		height: calc(100vh - 150px);
	}

	.chat-side {
		width: 100%;
		flex: 1 1 auto;
		height: auto;
		max-height: none;
		border-right: 0;
	}

	.chat-main {
		display: none;
	}

	/* 聊天区由抽屉取代 */
	.cs-item {
		padding: 12px 14px;
	}

	.msg-mask {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(4, 7, 15, .5);
		opacity: 0;
		visibility: hidden;
		transition: .2s;
		z-index: 998;
	}

	.msg-mask.on {
		opacity: 1;
		visibility: visible;
	}

	.msg-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		z-index: 999;
		background: var(--panel);
		transform: translateX(100%);
		transition: transform .24s ease;
	}

	.msg-drawer.open {
		transform: translateX(0);
	}

	.md-head {
		flex: none;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		border-bottom: 1px solid var(--border);
		background: var(--bg2);
	}

	.md-back {
		border: 0;
		background: transparent;
		color: var(--text);
		font-size: 24px;
		line-height: 1;
		padding: 0 6px 2px 0;
		cursor: pointer;
	}

	.md-head b {
		font-size: 16px;
	}

	.md-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 14px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.md-body .bub {
		max-width: 88%;
	}

	.md-reply {
		flex: none;
		border-top: 1px solid var(--border);
		padding: 10px 12px;
		background: var(--bg2);
	}

	.md-reply .cr-main {
		display: flex;
		gap: 8px;
		align-items: flex-end;
	}

	.md-reply textarea {
		flex: 1;
		width: 100%;
		min-height: 44px;
		max-height: 120px;
		background: var(--panel2);
		border: 1px solid var(--border);
		border-radius: 10px;
		padding: 10px 12px;
		color: var(--text);
		font-size: 16px;
		/* 防止 iOS 聚焦缩放 */
		font-family: inherit;
		resize: none;
	}

	.md-reply .btn {
		flex: none;
	}
}

/* ---- 产品详情页 ---- */
@media (max-width: 640px) {

	/* Hero 标题区：与首页产品卡一致——标题小字号 + 分类胶囊同行右侧 */
	.prod-hero {
		padding: 18px 0 14px;
	}

	.prod-hero .pt {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}

	.prod-hero h2 {
		font-size: 21px;
		/* 与首页产品卡标题一致 */
		margin: 0;
		padding-right: 0;
		line-height: 1.3;
		letter-spacing: -.01em;
	}

	.prod-hero .pt .pc-kind {
		font-size: 18px;
		padding: 3px 10px;
		box-shadow: none;
		flex: none;
	}

	.prod-hero .ps {
		font-size: 15px;
		line-height: 1.75;
	}

	.prod-badges {
		margin: 12px 0;
		gap: 6px;
	}

	.pb {
		font-size: 13px;
		padding: 5px 12px;
	}

	.prod-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.prod-cta .btn {
		width: 100%;
		justify-content: center;
	}

	.tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.tabs .tab {
		white-space: nowrap;
	}

	.entries {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		padding: 24px 0 36px;
	}

	.dl-row {
		gap: 10px;
	}

	.dl-main {
		min-width: 0;
	}
}

/* ---- 通用：表单 CTA / Markdown 工具栏 换行、认证标题收敛 ---- */
@media (max-width: 480px) {
	.cta {
		flex-wrap: wrap;
	}

	.cta .btn {
		width: 100%;
		justify-content: center;
	}

	.mdtool {
		flex-wrap: wrap;
	}

	.atab {
		font-size: 15px;
		padding: 9px 12px;
	}

	.auth-title {
		font-size: 24px;
	}

	.e-lede {
		font-size: 15px;
	}
}

/* =========================================================
   移动端抽屉导航（≤980 显示：汉堡 | 居中 logo | 用户入口）
   ========================================================= */
.ns-burger,
.ns-mask,
.ns-drawer {
	display: none;
}

body.ns-noscroll {
	overflow: hidden;
}

@media (max-width: 980px) {

	/* 顶栏：汉堡在左，logo 绝对居中，用户入口在右 */
	.ns-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 8px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.ns-burger span {
		display: block;
		height: 2px;
		width: 100%;
		background: #e8ecf6;
		border-radius: 2px;
	}

	.ns-topnav .bar {
		position: relative;
	}

	.ns-logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.ns-user {
		margin-left: auto;
	}

	.ns-nav {
		display: none;
	}

	/* 顶部横排导航由抽屉取代 */

	/* 遮罩 */
	.ns-mask {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(4, 7, 15, .55);
		opacity: 0;
		visibility: hidden;
		transition: .2s;
		z-index: 998;
	}

	.ns-mask.on {
		opacity: 1;
		visibility: visible;
	}

	/* 抽屉层 */
	.ns-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(78vw, 320px);
		background: #0b1020;
		color: #e8ecf6;
		z-index: 999;
		transform: translateX(-102%);
		transition: transform .24s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 0 40px rgba(0, 0, 0, .5);
	}

	.ns-drawer.open {
		transform: translateX(0);
	}

	.nd-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		position: sticky;
		top: 0;
		background: #0b1020;
	}

	.nd-logo {
		font-size: 18px;
		font-weight: 850;
	}

	.nd-logo .g {
		background: var(--grad);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.nd-close {
		border: 0;
		background: transparent;
		color: #97a1bb;
		font-size: 20px;
		padding: 6px 10px;
		cursor: pointer;
	}

	.nd-nav {
		padding: 10px 8px 20px;
	}

	.nd-lv1,
	.nd-tt {
		display: block;
		padding: 13px 14px 6px;
		font-size: 17px;
		font-weight: 800;
		color: #e8ecf6;
	}

	.nd-group a {
		display: block;
		padding: 10px 14px 10px 30px;
		font-size: 15px;
		color: #97a1bb;
		border-radius: 8px;
	}

	.nd-group a:hover,
	.nd-group a:active {
		background: rgba(255, 255, 255, .07);
		color: #fff;
	}

	.nd-lv1:hover,
	.nd-lv1:active {
		background: rgba(255, 255, 255, .07);
	}

	/* 与 web 侧栏一致：条目编号 + 当前页高亮（数据源同为 $arrSide） */
	.nd-group a .n {
		margin-right: 8px;
		font-size: 12px;
		font-weight: 800;
		color: #6b7694;
	}

	.nd-group a.on {
		background: rgba(47, 95, 214, .32);
		color: #fff;
	}

	.nd-group a.on .n {
		color: #9db7ff;
	}

	/* 折叠分组：首页 / 论坛 / 资源 */
	.nd-achd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 13px 14px;
		border: 0;
		background: transparent;
		color: #e8ecf6;
		font-size: 17px;
		font-weight: 800;
		text-align: left;
		border-radius: 8px;
		cursor: pointer;
	}

	.nd-achd .ar {
		flex: none;
		width: 8px;
		height: 8px;
		margin-right: 4px;
		border-right: 2px solid #97a1bb;
		border-bottom: 2px solid #97a1bb;
		transform: rotate(45deg);
		transition: transform .2s;
	}

	.nd-accitem.open .nd-achd .ar {
		transform: rotate(225deg);
	}

	.nd-acbd {
		display: none;
		padding: 2px 8px 10px;
	}

	.nd-accitem.open .nd-acbd {
		display: block;
	}

	.nd-foot {
		margin-top: auto;
		padding: 14px 16px 22px;
		border-top: 1px solid rgba(255, 255, 255, .08);
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.nd-btn {
		display: block;
		text-align: center;
		padding: 11px 0;
		border-radius: 10px;
		background: var(--brand);
		color: #fff;
		font-weight: 700;
		font-size: 15px;
	}

	.nd-btn.ghost {
		background: rgba(255, 255, 255, .08);
		color: #e8ecf6;
	}

	/* 移动端：点击头像展开用户下拉菜单（触屏无 :hover，改用 .show 类） */
	.ns-user .me-menu.show {
		display: block;
	}

	.ns-user .me-menu a {
		padding: 12px 14px;
		font-size: 14px;
	}

	/* 加大点击热区 */
}