/* ==========================================================================
   Windows (desktop) and sheets (phone)
   ========================================================================== */

.win {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	min-width: 300px;
	min-height: 200px;
	border: 2px solid var(--red);
	background: var(--panel);
	box-shadow: var(--glow), 0 30px 80px rgb(0 0 0 / 0.75);
	pointer-events: auto;
	contain: layout;
	will-change: transform;
	animation: win-in 0.32s var(--ease-out) both;
}

.win:focus,
.sheet:focus { outline: none; }

.win.is-inactive {
	border-color: var(--red-deep);
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.65);
}

.win.is-inactive .win__bar { background: #050000; border-bottom-color: var(--red-deep); }
.win.is-inactive .win__title { color: var(--pink); text-shadow: none; }
.win.is-inactive .win__icon { filter: grayscale(0.4) brightness(0.8); }

.win.is-max {
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	transform: none !important;
	border-width: 2px 0 0;
}

.win.is-closing { animation: win-out 0.26s var(--ease-in) forwards; pointer-events: none; }
.win.is-hidden { visibility: hidden; pointer-events: none; }
.win.is-nudged { animation: nudge 0.5s linear; }

@keyframes win-in {
	0% { opacity: 0; scale: 0.9; filter: brightness(2.2) saturate(0.4); }
	55% { opacity: 1; }
	100% { opacity: 1; scale: 1; filter: none; }
}

@keyframes win-out {
	0% { scale: 1 1; filter: none; opacity: 1; }
	60% { scale: 1 0.02; filter: brightness(3); opacity: 1; }
	100% { scale: 0 0.02; filter: brightness(5); opacity: 0; }
}

@keyframes nudge {
	0%, 100% { translate: 0 0; }
	10% { translate: -10px 4px; }
	20% { translate: 9px -5px; }
	30% { translate: -8px -3px; }
	40% { translate: 7px 5px; }
	50% { translate: -6px 2px; }
	60% { translate: 5px -4px; }
	70% { translate: -4px 3px; }
	80% { translate: 3px -2px; }
	90% { translate: -1px 1px; }
}

.win__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	padding: 0 6px 0 10px;
	flex: none;
	border-bottom: 2px solid var(--red);
	background:
		linear-gradient(90deg, rgb(255 69 69 / 0.3), rgb(255 69 69 / 0.06) 55%, transparent),
		#000;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	cursor: var(--cursor);
}

.win.is-dragging .win__bar { cursor: grabbing; }
.win.is-dragging { will-change: transform; transition: none; }

.win__icon { width: 24px; flex: none; }

.win__title {
	flex: 1;
	min-width: 0;
	font-family: var(--f-display);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--white);
	text-shadow: var(--text-glow);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.win__ctrls { display: flex; gap: 6px; flex: none; }

.win__btn {
	display: grid;
	place-items: center;
	width: 30px;
	height: 28px;
	border: 1.5px solid var(--red);
	color: var(--white);
	background: #000;
	transition: background 0.12s, color 0.12s;
}
.win__btn .pd-glyph { width: 14px; height: 14px; }
.win__btn:hover { background: var(--red); color: var(--black); }
.win__btn--close:hover { background: var(--white); border-color: var(--white); }

.win__body {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.win__body > .app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.win__body,
.sheet__body { container-type: inline-size; }

/* Resize handles: 8 invisible edges plus a visible grip. */
.win__rz { position: absolute; z-index: 3; touch-action: none; }
.win__rz--n { top: -5px; left: 10px; right: 10px; height: 10px; cursor: ns-resize; }
.win__rz--s { bottom: -5px; left: 10px; right: 10px; height: 10px; cursor: ns-resize; }
.win__rz--e { right: -5px; top: 10px; bottom: 10px; width: 10px; cursor: ew-resize; }
.win__rz--w { left: -5px; top: 10px; bottom: 10px; width: 10px; cursor: ew-resize; }
.win__rz--ne { top: -6px; right: -6px; width: 16px; height: 16px; cursor: nesw-resize; }
.win__rz--nw { top: -6px; left: -6px; width: 16px; height: 16px; cursor: nwse-resize; }
.win__rz--sw { bottom: -6px; left: -6px; width: 16px; height: 16px; cursor: nesw-resize; }
.win__rz--se {
	bottom: 0;
	right: 0;
	width: 18px;
	height: 18px;
	cursor: nwse-resize;
	background:
		linear-gradient(135deg, transparent 45%, var(--red) 45%, var(--red) 52%, transparent 52%, transparent 66%, var(--red) 66%, var(--red) 73%, transparent 73%);
}
.win.is-max .win__rz,
.win[data-resizable='false'] .win__rz { display: none; }

/* A ghost outline while dragging near a screen edge: drop to snap. */
.snap-ghost {
	position: fixed;
	z-index: 19;
	border: 2px dashed var(--blush);
	background: rgb(255 69 69 / 0.1);
	box-shadow: inset var(--glow);
	pointer-events: none;
	transition: all 0.15s var(--ease-out);
}
.snap-ghost[hidden] { display: none; }

/* Scrollbars inside windows */
.win ::-webkit-scrollbar,
.sheet ::-webkit-scrollbar { width: 14px; height: 14px; }
.win ::-webkit-scrollbar-track,
.sheet ::-webkit-scrollbar-track { background: #070000; border-left: 1.5px solid var(--red-deep); }
.win ::-webkit-scrollbar-thumb,
.sheet ::-webkit-scrollbar-thumb { background: var(--red-deep); border: 3px solid #070000; }
.win ::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* --------------------------------------------------------------------------
   Phone sheets
   -------------------------------------------------------------------------- */

.sheet {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--panel);
	pointer-events: auto;
	transform: translateY(104%);
	transition: transform 0.48s var(--ease-out);
	box-shadow: 0 -10px 40px rgb(255 69 69 / 0.25);
}
.sheet.is-open { transform: none; }
.sheet.is-closing { transform: translateY(104%); transition-timing-function: var(--ease-in); transition-duration: 0.32s; }
.sheet.is-dragging { transition: none; }

.sheet__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: calc(56px + var(--safe-t));
	padding: var(--safe-t) 8px 0;
	flex: none;
	border-top: 2px solid var(--red);
	border-bottom: 2px solid var(--red);
	background: linear-gradient(90deg, rgb(255 69 69 / 0.32), rgb(255 69 69 / 0.04) 60%), #000;
	touch-action: none;
}

.sheet__grab {
	position: absolute;
	top: calc(6px + var(--safe-t));
	left: 50%;
	width: 44px;
	height: 4px;
	transform: translateX(-50%);
	background: var(--red-deep);
}

.sheet__back {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--white);
}
.sheet__back .pd-glyph { width: 24px; height: 24px; }
.sheet__icon { width: 28px; }
.sheet__title {
	flex: 1;
	min-width: 0;
	font-family: var(--f-display);
	font-size: 16px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-shadow: var(--text-glow);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sheet__body {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--safe-b);
}
.sheet__body > .app { flex: 1; display: flex; flex-direction: column; }