wordpress-theme-aksrt/assets/creator-studio/src/styles/studio.scss

/**
 * Jio Creator Studio — 沉浸式写作工作台。
 *
 * 视觉方向：纸面写作而不是后台配置。单一深青绿用于“保存/发布”这类推进动作，
 * 其余保持低对比；发布设置全部收进抽屉，正文区域只有标题、摘要与画布。
 */

$ink: #243330;
$ink-soft: #5c6b66;
$paper: #fafbfa;
$line: #e2e9e5;
$accent: #267665;
$accent-strong: #1d5f52;
$warn: #b4573f;

/*
 * 创作页接管整屏：隐藏主题头部/底部与浮动入口，避免与工作台顶栏重复。
 * 只在投稿模板的 body class 下生效，不影响其他页面。
 */
.jio-page-submit {
	background: $paper;
}

/* 主题固定导航会给 body.nav-fixed 预留 88px；工作台隐藏了导航，不应保留空位。 */
body.jio-page-submit.nav-fixed,
body.jio-page-submit.has-static-nav {
	padding-top: 0 !important;
}

.jio-page-submit .header,
.jio-page-submit .footer,
.jio-page-submit .float-btn,
.jio-page-submit .footer-tabbar,
.jio-page-submit .jio-float-buttons {
	display: none !important;
}

.jio-page-submit #main-content.container {
	max-width: none;
	padding: 0;
}

#jio-creator-studio.is-ready {
	display: block;
}

.jio-creator {
	--jc-ink: #{$ink};
	--jc-ink-soft: #{$ink-soft};
	--jc-paper: #{$paper};
	--jc-line: #{$line};
	--jc-accent: #{$accent};
	--jc-accent-strong: #{$accent-strong};
	--jc-warn: #{$warn};
	--jc-bar: 60px;

	min-height: 100vh;
	min-height: 100dvh;
	/* 固定顶栏属于工作台 chrome，不随正文一起滚动。 */
	padding-top: var(--jc-bar);
	background: var(--jc-paper);
	color: var(--jc-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
	-webkit-font-smoothing: antialiased;

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	button {
		font: inherit;
		color: inherit;
	}
}

.jio-creator__bar {
	position: fixed;
	z-index: 300;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	height: var(--jc-bar);
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0 clamp(16px, 3vw, 34px);
	border-bottom: 1px solid var(--jc-line);
	background: rgba(250, 251, 250, 0.97);
	backdrop-filter: blur(14px);
	box-shadow: 0 2px 8px rgba(27, 46, 39, 0.035);
}

.jio-creator__bar-left,
.jio-creator__bar-center,
.jio-creator__bar-actions {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 12px;
}

.jio-creator__bar-left {
	flex: 0 0 auto;
}

.jio-creator__bar-center {
	flex: 1 1 auto;
	justify-content: center;
	gap: 14px;
}

.jio-creator__doc-title {
	max-width: min(32vw, 360px);
	overflow: hidden;
	color: #65736d;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jio-creator__bar-actions {
	flex: 0 0 auto;
	gap: 8px;
}

.jio-creator__back {
	display: inline-flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	color: var(--jc-ink-soft);
	text-decoration: none;

	&:hover,
	&:focus-visible {
		background: #edf3f0;
		color: var(--jc-accent);
		outline: 0;
	}
}

.jio-creator__bar-brand {
	color: var(--jc-accent-strong);
	font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.04em;
}

.jio-creator__bar-divider {
	width: 1px;
	height: 18px;
	background: var(--jc-line);
}

.jio-creator__bar-mode {
	color: var(--jc-ink-soft);
	font-size: 13px;
}

.jio-creator__doc-title {
	max-width: min(32vw, 360px);
	overflow: hidden;
	color: #65736d;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jio-creator__history {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding-right: 8px;
	border-right: 1px solid var(--jc-line);
}

.jio-creator__icon-btn {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--jc-ink-soft);
	cursor: pointer;

	&:hover:not(:disabled),
	&:focus-visible:not(:disabled) {
		background: #edf3f0;
		color: var(--jc-accent-strong);
		outline: 0;
	}

	&:disabled {
		color: #c7d0cc;
		cursor: default;
	}
}

.jio-creator__save-draft {
	border-color: var(--jc-line);
	background: #fff;
	color: var(--jc-ink-soft);
}

.jio-creator__save-draft:hover,
.jio-creator__save-draft:focus-visible {
	border-color: #b7cdc3;
	background: #f7faf8;
	color: var(--jc-accent-strong);
}

.jio-creator__icon-btn {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--jc-ink-soft);
	cursor: pointer;

	&:hover:not(:disabled),
	&:focus-visible:not(:disabled) {
		background: #edf3f0;
		color: var(--jc-accent-strong);
		outline: 0;
	}

	&:disabled {
		color: #c7d0cc;
		cursor: default;
	}
}

.jio-creator__history {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding-right: 8px;
	border-right: 1px solid var(--jc-line);
}

.jio-creator__save-draft {
	border-color: var(--jc-line);
	background: #fff;
	color: var(--jc-ink-soft);
}

.jio-creator__save-draft:hover,
.jio-creator__save-draft:focus-visible {
	border-color: #b7cdc3;
	background: #f7faf8;
	color: var(--jc-accent-strong);
}

.jio-creator__save {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--jc-ink-soft);
	font-size: 13px;

	> i {
		color: var(--jc-line);
		font-size: 7px;
	}

	time {
		opacity: 0.7;
		font-variant-numeric: tabular-nums;
	}

	&.is-saved > i {
		color: var(--jc-accent);
	}

	&.is-error > i,
	&.is-conflict > i {
		color: var(--jc-warn);
	}

	&.is-error,
	&.is-conflict {
		color: var(--jc-warn);
	}
}

.jio-creator__ghost,
.jio-creator__primary,
.jio-creator__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.jio-creator__ghost {
	border-color: var(--jc-line);
	background: transparent;

	&:hover,
	&:focus-visible {
		border-color: var(--jc-accent);
		color: var(--jc-accent);
	}
}

.jio-creator__primary {
	background: var(--jc-accent);
	color: #fff;

	&:hover,
	&:focus-visible {
		background: var(--jc-accent-strong);
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
}

.jio-creator__notice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 auto;
	max-width: 820px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--jc-line);
	background: #f1f5f2;
	color: var(--jc-ink-soft);
	font-size: 13px;

	> span {
		flex: 1;
	}

	button {
		border: 0;
		background: transparent;
		color: var(--jc-accent);
		cursor: pointer;
	}

	&.is-error {
		background: #fdf2ee;
		color: var(--jc-warn);
	}
}

.jio-creator__hint {
	max-width: 820px;
	margin: 18px auto 0;
	padding: 0 clamp(16px, 4vw, 40px);
	color: var(--jc-ink-soft);
	font-size: 13px;
}

.jio-creator__canvas {
	/* 公众号式阅读宽度：正文行宽控制在约 40 个汉字，留白优先。 */
	width: min(720px, 100%);
	margin: 0 auto;
	padding: clamp(20px, 4vw, 44px) clamp(20px, 5vw, 52px) 140px;
}

.jio-creator__title {
	display: block;
	margin-bottom: 6px;

	textarea {
		width: 100%;
		min-height: 50px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--jc-ink);
		font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
		font-size: clamp(23px, 2.6vw, 27px);
		font-weight: 500;
		letter-spacing: 0.01em;
		line-height: 1.4;
		resize: none;

		&:focus {
			outline: 0;
		}

		&::placeholder {
			color: #b7c2bd;
		}
	}
}

.jio-creator__excerpt {
	display: block;
	margin-bottom: 22px;

	> span {
		display: block;
		margin-bottom: 4px;
		color: #9aa8a2;
		font-size: 12px;
		letter-spacing: 0.02em;
	}

	textarea {
		width: 100%;
		padding: 6px 0;
		border: 0;
		background: transparent;
		color: var(--jc-ink-soft);
		font-family: inherit;
		font-size: 14px;
		line-height: 1.7;
		resize: none;

		&:focus {
			outline: 0;
		}
	}
}

.jio-creator__editor {
	position: relative;
	/* 行内浮动工具栏相对书写区定位，而不是相对整个页面。 */
	min-height: 40vh;

	.block-editor-writing-flow {
		font-size: 16px;
		line-height: 1.85;
		letter-spacing: 0.01em;
	}

	.block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
		color: #b7c2bd;
	}

	.block-editor-block-list__layout {
		padding-bottom: 40px;
	}

	.wp-block {
		max-width: none;
	}

	/* 段落之间留出公众号式的呼吸感，标题上方多留一档。 */
	.block-editor-block-list__block {
		margin-top: 0;
		margin-bottom: 1.1em;
	}

	.block-editor-block-list__block[data-type='core/heading'] {
		margin-top: 1.6em;
	}

	/* 选中时的虚线框收敛成低对比描边，贴近公众号的“轻选中”。 */
	.block-editor-block-list__block.is-selected::after,
	.block-editor-block-list__block.is-hovered::after {
		box-shadow: 0 0 0 1.5px rgba(38, 118, 101, 0.35);
		border-radius: 3px;
	}

	/* 行内工具栏：圆角悬浮条，深色底更接近公众号的选中工具条。 */
	.block-editor-block-contextual-toolbar {
		margin-left: 0;
	}

	.block-editor-block-contextual-toolbar .block-editor-block-toolbar {
		border: 0;
		border-radius: 8px;
		background: #2b3733;
		box-shadow: 0 6px 20px rgba(20, 32, 28, 0.22);

		.components-toolbar-group,
		.components-toolbar {
			border: 0;
		}

		.components-button {
			color: rgba(255, 255, 255, 0.86);

			&:hover:not(:disabled),
			&:focus:not(:disabled) {
				background: rgba(255, 255, 255, 0.12);
				color: #fff;
			}

			&.is-pressed,
			&[aria-pressed='true'] {
				background: rgba(255, 255, 255, 0.2);
				color: #fff;
			}
		}
	}
}

.jio-creator__footer {
	display: flex;
	justify-content: space-between;
	padding-top: 20px;
	border-top: 1px solid var(--jc-line);
	color: var(--jc-ink-soft);
	font-size: 12px;
}

/* ---------- 封面预览条 ---------- */

.jio-creator__cover {
	position: relative;
	margin-bottom: 18px;

	&.is-empty {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 32px;
		padding: 0 12px;
		border: 1px dashed #d3ded8;
		border-radius: 8px;
		background: transparent;
		color: #8c9a94;
		font-size: 12px;
		cursor: pointer;
		transition: border-color 0.16s ease, color 0.16s ease;

		&:hover,
		&:focus-visible {
			border-color: var(--jc-accent);
			color: var(--jc-accent-strong);
			outline: 0;
		}
	}
}

.jio-creator__cover-thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 10px;
	background: #eef3f0;
	cursor: pointer;

	img {
		display: block;
		width: 100%;
		aspect-ratio: 2.35 / 1;
		object-fit: cover;
	}

	&:focus-visible {
		outline: 2px solid var(--jc-accent);
		outline-offset: 2px;
	}
}

.jio-creator__cover-edit {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px;
	background: linear-gradient(to top, rgba(15, 25, 22, 0.62), rgba(15, 25, 22, 0));
	color: #fff;
	font-size: 12px;
	opacity: 0;
	transition: opacity 0.16s ease;
}

.jio-creator__cover-thumb:hover .jio-creator__cover-edit,
.jio-creator__cover-thumb:focus-visible .jio-creator__cover-edit {
	opacity: 1;
}

.jio-creator__cover-clear {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 25, 22, 0.55);
	color: #fff;
	cursor: pointer;

	&:hover,
	&:focus-visible {
		background: rgba(15, 25, 22, 0.78);
		outline: 0;
	}
}

/* ---------- 图片宽度四档 ---------- */

.jio-creator__editor,
.jio-page-submit .entry-content {
	.wp-block-image {
		margin-left: auto;
		margin-right: auto;

		img {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 6px;
		}
	}

	/* 半屏：围绕正文左侧，右侧留给说明文字。 */
	.wp-block-image.jio-img-w--half {
		width: 50%;
		margin-left: 0;
		margin-right: auto;

		@media (max-width: 767px) {
			width: 100%;
			margin-left: auto;
		}
	}

	.wp-block-image.jio-img-w--medium {
		width: 72%;
	}

	.wp-block-image.jio-img-w--wide {
		width: 100%;
	}

	/* 全宽：突破正文行宽，但受容器 padding 约束避免横向滚动。 */
	.wp-block-image.jio-img-w--full {
		width: calc(100% + clamp(24px, 6vw, 64px));
		max-width: none;
		margin-left: calc(clamp(24px, 6vw, 64px) / -2);

		@media (max-width: 767px) {
			width: 100%;
			margin-left: 0;
		}
	}
}

/* ---------- 作者行 ---------- */

.jio-creator__author {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 20px;
	color: #8c9a94;
	font-size: 12px;
}

.jio-creator__author-avatar {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

.jio-creator__author-avatar.is-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e3ece7;
	color: #4a5f57;
	font-size: 11px;
	font-weight: 600;
}

.jio-creator__author-name {
	color: #4a5f57;
	font-weight: 500;
}

.jio-creator__author-meta {
	padding: 1px 6px;
	border-radius: 4px;
	background: #eef5f2;
	color: #3c7d6c;
	font-size: 11px;
}

.jio-creator__author-hint {
	margin-left: auto;
	color: #b0bcb7;
}

/* ---------- 常驻插入按钮 ---------- */

.jio-creator__insert {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	margin: 8px 0 26px;
	border: 1px dashed #d3ded8;
	border-radius: 10px;
	background: transparent;
	color: #7c8c86;
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;

	i {
		font-size: 12px;
	}

	&:hover,
	&:focus-visible {
		border-color: var(--jc-accent);
		background: #f1f7f4;
		color: var(--jc-accent-strong);
		outline: 0;
	}
}

/* ---------- 插入面板 ---------- */

.jio-insert {
	position: fixed;
	z-index: 520;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.jio-insert__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(23, 34, 31, 0.34);
	cursor: default;
}

.jio-insert__panel {
	position: relative;
	width: min(560px, 100%);
	max-height: min(78vh, 640px);
	overflow: hidden auto;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 70px rgba(20, 32, 28, 0.22);
}

.jio-insert__head {
	position: sticky;
	z-index: 1;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px 12px;
	border-bottom: 1px solid $line;
	background: #fff;

	h2 {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
	}
}

.jio-insert__close {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: $ink-soft;
	cursor: pointer;

	&:hover,
	&:focus-visible {
		background: #eef3f0;
		outline: 0;
	}
}

.jio-insert__body {
	padding: 16px 22px 24px;
}

.jio-insert__group {
	margin-bottom: 20px;

	h3 {
		margin: 0 0 12px;
		color: #9aa8a2;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.04em;
	}
}

.jio-insert__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
}

.jio-insert-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	padding: 14px 4px 10px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: #f7f9f8;
	color: $ink;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;

	&:hover,
	&:focus-visible {
		border-color: var(--jc-accent);
		background: #eef5f2;
		color: var(--jc-accent-strong);
		outline: 0;
	}
}

.jio-insert-item__icon {
	display: flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
}

.jio-insert-item__label {
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
}

/* ---------- 发布抽屉 ---------- */

.jio-creator-drawer {
	position: fixed;
	z-index: 500;
	inset: 0;
	display: flex;
	justify-content: flex-end;
}

.jio-creator-drawer__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(23, 34, 31, 0.32);
	cursor: default;
}

.jio-creator-drawer__panel {
	position: relative;
	display: flex;
	width: min(460px, 100%);
	height: 100%;
	flex-direction: column;
	background: #fff;
	box-shadow: -20px 0 60px rgba(20, 32, 28, 0.16);
}

.jio-creator-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid $line;

	h2 {
		margin: 0;
		font-size: 17px;
		font-weight: 600;
	}
}

.jio-creator-drawer__close {
	border: 0;
	background: transparent;
	color: $ink-soft;
	cursor: pointer;
}

.jio-creator-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px 32px;
}

.jio-creator-drawer__note {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-left: 3px solid $accent;
	background: #f2f7f4;
	color: $ink-soft;
	font-size: 13px;
	line-height: 1.6;
}

.jio-creator-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid $line;
	background: #fff;

	.jio-creator-primary {
		flex: 1;
	}
}

.jio-creator-drawer__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.jio-creator-drawer__captcha {
	min-height: 40px;
}

.jio-creator-field {
	margin-bottom: 26px;

	> h3 {
		margin: 0 0 10px;
		font-size: 13px;
		font-weight: 600;
		color: $ink;
	}
}

.jio-creator-muted {
	margin: 0;
	color: $ink-soft;
	font-size: 12px;
	line-height: 1.6;
}

.jio-creator-error {
	margin: 8px 0 0;
	color: $warn;
	font-size: 12px;
}

.jio-creator-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.jio-creator-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid $line;
	border-radius: 999px;
	color: $ink-soft;
	font-size: 13px;
	cursor: pointer;

	input {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	&.is-active {
		border-color: $accent;
		background: #eef5f2;
		color: $accent-strong;
	}

	button {
		border: 0;
		background: transparent;
		cursor: pointer;
		color: inherit;
	}
}

.jio-creator-inline {
	display: flex;
	gap: 8px;
	margin-top: 10px;

	input[type="text"],
	input:not([type]) {
		flex: 1;
		min-width: 0;
	}

	input[type="text"],
	input:not([type]) {
		height: 36px;
		padding: 0 12px;
		border: 1px solid $line;
		border-radius: 8px;
	}

	label {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 13px;
	}
}

.jio-creator-switch {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;

	h3 {
		margin: 0 0 4px;
		font-size: 13px;
	}
}

.jio-creator-toggle {
	position: relative;
	flex: 0 0 auto;

	input {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	span {
		display: block;
		width: 42px;
		height: 24px;
		border-radius: 999px;
		background: #d6dfda;
		transition: background 0.18s ease;

		&::after {
			display: block;
			width: 18px;
			height: 18px;
			margin: 3px;
			border-radius: 50%;
			background: #fff;
			content: "";
			transition: transform 0.18s ease;
		}
	}

	input:checked + span {
		background: $accent;
	}

	input:checked + span::after {
		transform: translateX(18px);
	}

	input:focus-visible + span {
		outline: 2px solid $accent;
		outline-offset: 2px;
	}
}

.jio-creator-pay {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid $line;
	border-radius: 10px;
	background: #fcfdfc;
}

.jio-creator-input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	font-size: 13px;

	input {
		width: 140px;
		height: 36px;
		padding: 0 12px;
		border: 1px solid $line;
		border-radius: 8px;
		text-align: right;
	}
}

.jio-creator-cover {
	position: relative;
	overflow: hidden;
	border-radius: 10px;

	img {
		display: block;
		width: 100%;
		aspect-ratio: 2 / 1;
		object-fit: cover;
	}

	button {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 30px;
		height: 30px;
		border: 0;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.55);
		color: #fff;
		cursor: pointer;
	}
}

.jio-creator-cover-empty {
	display: flex;
	min-height: 120px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	border: 1px dashed $line;
	border-radius: 10px;
	background: #fafcfb;
	color: $ink-soft;
	font-size: 13px;
	cursor: pointer;

	input {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
	}
}

.jio-creator-attachments {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid $line;
}

.jio-creator-attachments__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	h4 {
		margin: 0;
		font-size: 13px;
	}
}

.jio-creator-upload {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid $line;
	border-radius: 8px;
	color: $accent-strong;
	font-size: 12px;
	cursor: pointer;

	input {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
	}
}

.jio-creator-files {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;

	li {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 0;
		border-bottom: 1px solid #f0f4f1;
		font-size: 13px;
	}

	button {
		margin-left: auto;
		border: 0;
		background: transparent;
		color: $ink-soft;
		cursor: pointer;
	}
}

.jio-creator-files__name {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	i {
		color: $accent;
	}
}

.jio-creator-reuse {
	margin-top: 14px;
	font-size: 13px;

	summary {
		cursor: pointer;
		color: $ink-soft;
	}

	ul {
		margin: 10px 0 0;
		padding: 0;
		list-style: none;
	}

	li {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 6px 0;
	}

	button {
		margin-left: auto;
		border: 1px solid $line;
		border-radius: 6px;
		background: #fff;
		cursor: pointer;
	}
}

.jio-creator-link {
	border: 0;
	background: transparent;
	color: var(--jc-ink-soft, #{$ink-soft});
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- 手机 / 平板 ---------- */

@media (max-width: 767px) {
	.jio-creator {
		--jc-bar: 56px;
	}

	.jio-creator__bar {
		gap: 8px;
		padding: 0 10px;
	}

	.jio-creator__bar-left,
	.jio-creator__bar-center,
	.jio-creator__bar-actions {
		gap: 6px;
	}

	.jio-creator__bar-brand {
		font-size: 15px;
	}

	.jio-creator__bar-mode,
	.jio-creator__bar-divider,
	.jio-creator__doc-title,
	.jio-creator__save-draft {
		display: none;
	}

	.jio-creator__bar-center {
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	.jio-creator__bar-actions {
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	.jio-creator__icon-btn {
		width: 28px;
		height: 30px;
	}

	.jio-creator__history {
		gap: 0;
		padding-right: 4px;
	}

	.jio-creator__preview {
		min-height: 32px;
		padding: 0 9px;
		font-size: 12px;
	}

	.jio-creator__primary {
		min-height: 32px;
		padding: 0 12px;
		font-size: 13px;
	}

	.jio-creator__save time {
		display: none;
	}

	.jio-creator__ghost {
		padding: 0 10px;
	}

	.jio-creator__primary {
		padding: 0 14px;
	}

	.jio-creator__canvas {
		padding: 20px 16px calc(120px + env(safe-area-inset-bottom));
	}

	.jio-creator__title textarea {
		font-size: 24px;
	}

	.jio-creator__editor .block-editor-writing-flow {
		font-size: 16px;
		line-height: 1.8;
	}

	.jio-creator__inspector {
		margin-top: 16px;
	}

	.jio-creator-drawer {
		display: block;
	}

	.jio-creator-drawer__backdrop {
		display: none;
	}

	.jio-creator-drawer__panel {
		width: 100%;
		height: 100dvh;
		border-radius: 0;
		box-shadow: none;
	}

	.jio-creator-drawer__foot {
		position: sticky;
		bottom: 0;
		background: #fff;
	}

	/* 插入面板改为贴底抽屉，贴合手机拇指操作区。 */
	.jio-insert {
		align-items: flex-end;
		padding: 0;
	}

	.jio-insert__panel {
		width: 100%;
		max-height: 76dvh;
		border-radius: 16px 16px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.jio-insert__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.jio-creator__insert {
		margin-bottom: calc(26px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.jio-creator * {
		transition: none !important;
		animation: none !important;
	}
}