/**
 * xBot · Mobile primitives CSS
 *
 * Sheet, Swipe card, App-bar.
 *
 * The Sheet behaves like a modal (uses the same data-modal-open/close
 * runtime in components.js) but slides in from the bottom on mobile and
 * centers like a modal on ≥720px viewports.
 */

/* ============================================================
 * SHEET
 * ============================================================ */
.x-sheet[hidden] { display: none; }
.x-sheet {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	animation: x-fade-in var(--dur-base) var(--ease-out);
}
.x-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: var(--z-modal-bg);
}
.x-sheet__panel {
	position: relative;
	z-index: var(--z-modal);
	background: var(--bg);
	width: 100%;
	max-height: 90vh;
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-xl);
	padding-bottom: env(safe-area-inset-bottom, 0);
	animation: x-sheet-up var(--dur-slow) var(--ease-out);
}
@keyframes x-sheet-up {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
.x-sheet__handle {
	width: 36px;
	height: 4px;
	border-radius: 999px;
	background: var(--border-strong);
	margin: var(--space-2) auto var(--space-1);
}
.x-sheet__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-3) var(--space-5) var(--space-3);
	border-bottom: 1px solid var(--border);
}
.x-sheet__title { font-weight: 600; font-size: var(--text-md); }
.x-sheet__close {
	background: transparent; border: 0;
	width: 32px; height: 32px;
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.x-sheet__close:hover { color: var(--text); background: var(--surface); }
.x-sheet__body { padding: var(--space-5); overflow: auto; flex: 1; }
.x-sheet__foot {
	padding: var(--space-3) var(--space-5);
	border-top: 1px solid var(--border);
	display: flex; gap: var(--space-2); justify-content: flex-end;
}

@media (min-width: 720px) {
	.x-sheet { align-items: center; padding: var(--space-4); }
	.x-sheet__panel {
		max-width: 480px;
		border-radius: var(--radius-lg);
		animation: x-pop-in var(--dur-base) var(--ease-out);
		padding-bottom: 0;
	}
	.x-sheet__handle { display: none; }
}

/* ============================================================
 * SWIPE CARD
 * ============================================================ */
.x-swipe {
	position: relative;
	overflow: hidden;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: stretch;
}
.x-swipe__row {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--bg);
	transition: transform var(--dur-base) var(--ease-out);
	z-index: 1;
	position: relative;
	cursor: grab;
	touch-action: pan-y;
	min-width: 0;
}
.x-swipe__row:active { cursor: grabbing; }
.x-swipe__leading {
	width: 32px; height: 32px;
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	color: var(--accent);
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.x-swipe__content { flex: 1; min-width: 0; }
.x-swipe__title { font-weight: 500; font-size: var(--text-sm); }
.x-swipe__subtitle { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.x-swipe__meta { color: var(--text-muted); font-size: var(--text-xs); flex-shrink: 0; }

.x-swipe__actions {
	position: absolute;
	top: 0; bottom: 0;
	display: flex;
	z-index: 0;
}
.x-swipe__actions--start { inset-inline-start: 0; }
.x-swipe__actions--end   { inset-inline-end: 0; }
.x-swipe__action {
	display: inline-flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 2px;
	width: 76px;
	border: 0;
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	color: white;
	background: var(--text-secondary);
}
.x-swipe__action--neutral { background: var(--text-secondary); }
.x-swipe__action--success { background: var(--success); }
.x-swipe__action--danger  { background: var(--danger); }
.x-swipe__action--accent  { background: var(--accent); color: var(--accent-fg); }

/* ============================================================
 * APP-BAR (mobile slim topbar)
 * ============================================================ */
.x-appbar {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	height: 48px;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	padding-inline: var(--space-3);
	gap: var(--space-2);
}
.x-appbar__back {
	width: 32px; height: 32px;
	border-radius: var(--radius-sm);
	color: var(--text);
	display: inline-flex; align-items: center; justify-content: center;
	transform: scaleX(var(--rtl-flip, 1));
}
.x-appbar__back:hover { background: var(--surface); text-decoration: none; }
.x-appbar__title {
	flex: 1;
	font-weight: 600;
	font-size: var(--text-md);
	letter-spacing: -0.005em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.x-appbar__action { display: inline-flex; gap: var(--space-1); }