/*
 * The windows a button grows into (js/components/pop.js), the backdrop behind them, and toasts.
 * One look for all four kinds: a raised card at height 3 (a dialog at 4), 18 px corners.
 */

.win {
	--win-radius: var(--radius-card);
	position: fixed;
	z-index: 100;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-radius: var(--win-radius);
	background: var(--surface);
	box-shadow: var(--window-shadow);
	transform-origin: 0 0;
}

.win--dialog {
	box-shadow: var(--edge-light), var(--elev-4);
}

.win-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
}

.win--menu .win-body {
	padding: 6px;
}

.win--dialog .win-body {
	padding: 18px 20px 16px;
}

.win--card .win-body,
.win--wide .win-body {
	padding: 4px 16px 16px;
}

.win-head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 12px 8px 18px;
}

.win-title,
.modal-title {
	font-size: calc(15px * var(--ui-scale));
	font-weight: 600;
	color: var(--text-strong);
}

.win-text,
.modal-body,
.modal-hint {
	margin: 6px 0 0;
	color: var(--muted);
}

.win--dialog .field,
.win--ask .field {
	margin-top: 12px;
}

/* a choice above the field (Eolite's 「代码」: 兼容 R · 兼容 Python · 积木, its components/quicknew.js), spaced as a field */
.win--dialog .seg,
.win--ask .seg {
	margin-top: 12px;
}

/* a name asked for beside the button, in a menu's place (js/components/dialogs.js kind "menu": 文档's 新建, the user
   2026-11-01): a dialog's inside, a little tighter; as wide as a short name wants (a menu is as wide as its rows) */
.win--menu.win--ask {
	--win-max-w: 340px;
}

.win--menu.win--ask .win-body {
	padding: 14px 16px 12px;
}

.win--ask .win-body > form {
	width: 300px;
	max-width: 100%;
}

.win--ask .win-actions {
	margin-top: 14px;
}

.win-actions,
.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}

.btn--danger-solid {
	border-color: var(--danger);
	background: var(--face-solid), var(--danger);
	color: var(--on-fill);
}

.btn--danger-solid:hover {
	background: var(--face-solid), var(--danger);
	filter: brightness(1.08);
}

.win-sep {
	height: 1px;
	margin: 5px 6px;
	background: var(--border);
}

.win-hint {
	padding: 6px 10px 4px;
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

/* the programs' names for a window's parts (.modal-title …, their modal.js): the same look; a solid button among the
   actions is as wide as its words */
.modal-title {
	margin: 0;
}

.modal-hint {
	font-size: calc(12px * var(--ui-scale));
}

:is(.win-actions, .modal-actions) .btn-primary {
	width: auto;
}

.win .form {
	gap: 12px;
}

/* a small card of settings (components/popover.js): wider than a menu, a little smaller words */
.win--pop {
	--win-max-w: 360px;
}

.win--pop .win-body {
	padding: 12px;
	font-size: calc(13px * var(--ui-scale));
}

/* a choice that is the one picked: a tick at the far end */
.flat-check {
	display: inline-flex;
	margin-left: auto;
	color: var(--text-strong);
}

.win-check,
.modal-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	color: var(--text);
	cursor: pointer;
}

/* one of a few choices in a dialog (a radio and its words) */
.modal-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.modal-option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--text);
	cursor: pointer;
}

.modal-option input {
	margin-top: 3px;
}

.win .flat.is-danger,
.win .flat.is-danger svg {
	color: var(--danger);
}

/* how far down the drawer is shown while it settles (components/pop.js drawerGrip): a number that can be animated */
@property --win-drawer-off {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

/* the side card on wide screens is part of the work area (it made room for it): a card like the sidebar's */
.win--card.is-docked,
.win--card.is-bottom {
	background: var(--card-bg);
	box-shadow: var(--card-shadow);
}

/* the drawer at the bottom (frame-card-bottom, js/components/pop.js): a bar across its top to make it taller or lower;
   the side card has the bar too, unseen */
.win-grip {
	display: none;
}

/* the drawer's top: the frame's split bar (controls.css .split-grip), more to catch */
.win--card.is-bottom > .win-grip {
	--split-grip-hit: 19px;
	display: flex;
	width: 100%;
}

.win--card.is-bottom > .win-head {
	padding-top: 2px;
}

/* the button stands in the window while it is open */
.is-away {
	visibility: hidden;
}

/* …and while it shrinks back into it: unseen still, but it may be pressed (opened again at once) */
.is-returning {
	opacity: 0 !important;
	transition: none !important;
}

/* ---- the backdrop (html[data-backdrop]: none, dim (also when unset), blur) ---- */

.veil {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--veil-dim);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease);
}

.veil.is-on {
	opacity: 1;
	pointer-events: auto;
}

:root[data-backdrop="none"] .veil {
	background: transparent;
}

/* blur: a light dim with it, so the window still stands out on a busy page */
:root[data-backdrop="blur"] .veil {
	background: rgb(var(--depth-ink) / 0.08);
	backdrop-filter: blur(var(--veil-blur));
	-webkit-backdrop-filter: blur(var(--veil-blur));
}

/* ---- toasts ---- */

.toasts {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transform: translateX(-50%);
	pointer-events: none;
}

.toast {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: min(440px, calc(100vw - 32px));
	padding: 9px 16px 9px 12px;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-strong);
	box-shadow: var(--window-shadow);
	opacity: 0;
	transform: translateY(16px) scale(0.96);
	pointer-events: auto;
	cursor: pointer;
	transition:
		opacity var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out);
}

.toast.is-on {
	opacity: 1;
	transform: none;
}

.toast svg {
	flex: none;
	color: var(--ok);
}

.toast.is-error svg {
	color: var(--danger);
}

/* one with something to press (撤回): the button after the words, how long is left a line along its bottom */
.toast.has-action {
	position: relative;
	overflow: hidden;
	padding-right: 10px;
}

.toast-action {
	flex: none;
	margin-left: 6px;
	padding: 2px 8px;
	border: 0;
	background: none;
	color: var(--link);
	font: inherit;
	font-weight: 600;
	--text-link-hover: var(--link);
}

.toast-left {
	position: absolute;
	right: 18px;
	bottom: 0;
	left: 18px;
	height: 2px;
	border-radius: 1px;
	background: var(--link);
	opacity: 0.5;
	transform-origin: left;
}

/* a thing with a right-click menu (js/components/contextmenu.js): a finger held on it opens ours, not the phone's own
   callout (a link in it keeps the phone's, unless the thing is the link: .has-ctx-links) */
.has-ctx-menu {
	-webkit-touch-callout: none;
}

.has-ctx-menu:not(.has-ctx-links) a[href] {
	-webkit-touch-callout: default;
}

/* ---- choosing a file in the 网盘 (js/components/drivepick.js) ---- */

.drive-pick-path {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin-bottom: 8px;
	font-size: calc(13px * var(--ui-scale));
}

.drive-pick-crumb {
	color: var(--link);
}

.drive-pick-here {
	color: var(--text-strong);
}

.drive-pick-sep {
	color: var(--muted);
}

.drive-pick-list {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: min(52vh, 420px);
	overflow: auto;
}

.drive-pick-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
}

.drive-pick-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--muted);
}

.drive-pick-thumb {
	width: 32px;
	height: 32px;
	object-fit: contain;
	image-rendering: pixelated;
	border-radius: 4px;
	background: var(--surface-2);
}

.drive-pick-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.drive-pick-note {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: calc(13px * var(--ui-scale));
}

.drive-pick-note:empty {
	display: none;
}

/* ---- a panel taken out of the page (js/components/popout.js) ---- */

/* the line standing in the page for it */
.popout-hold {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 2px;
	color: var(--muted);
	font-size: calc(13px * var(--ui-scale));
}

.popout-btn[hidden] {
	display: none;
}

/* the floating card: over the page, under windows and menus; the browser's own resize handle in its corner */
.popout-float {
	position: fixed;
	z-index: 60;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 240px;
	min-height: 160px;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-radius: var(--radius-card);
	background: var(--card-bg);
	box-shadow: var(--window-shadow);
	transform-origin: 0 0;
	resize: both;
	--win-radius: var(--radius-card);
}

.popout-head {
	display: flex;
	flex: none;
	align-items: center;
	gap: 6px;
	padding: 8px 8px 6px 14px;
	cursor: var(--cursor-drag);
	touch-action: none;
	user-select: none;
}

.popout-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--text-strong);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.popout-float > :not(.popout-head),
.popout-body > :not(.popout-head) {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 0 12px 12px;
}

/* a window of its own: the panel all over it */
.popout-body {
	display: flex;
	flex-direction: column;
	height: 100vh;
	margin: 0;
	background: var(--card-bg);
	color: var(--text);
}

.popout-body .popout-head {
	cursor: default;
}

/* ---- the server about to reboot (js/lib/server-restart.js): above the page, whatever is open ---- */
.restart-banner {
	position: fixed;
	z-index: 90;
	top: calc(env(safe-area-inset-top, 0px) + 8px);
	left: 50%;
	transform: translateX(-50%);
	max-width: min(720px, calc(100vw - 32px));
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--elev-3);
	font-size: 13px;
	line-height: 1.45;
}

/* 挑网盘里的一个文件夹（components/folderpick.js；Pressus 先写的，2026-11-07 搬来） */
.folder-pick {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: min(280px, 80vw);
	padding: 4px;
}

.folder-pick-head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.folder-pick-list {
	display: flex;
	flex-direction: column;
	max-height: 240px;
	overflow-y: auto;
}

.folder-pick-item > span {
	flex: 1;
	text-align: left;
}

.folder-pick-note {
	margin: 4px 0;
	color: var(--muted);
	font-size: calc(13px * var(--ui-scale));
}