/* ============================================================================
   mobile.css — phone shell for peerforce (≤640px)
   Loaded LAST so it wins cascade ties without !important (except where inline
   styles force it). Uses only theme tokens so all 10 palettes work.
   KEEP IN SYNC: the 640px literal here mirrors MOBILE_MQ in chat.js and the
   legacy @media blocks in chat.css.
   ========================================================================== */

/* Desktop: every mobile-only surface stays dead. */
.console-strip,
.pf-fab,
.pf-sheet,
.pf-sheet-backdrop { display: none; }

@media (max-width: 640px) {

	/* ------------------------------------------------------------------ */
	/* 1. Foundation                                                       */
	/* ------------------------------------------------------------------ */

	html, body {
		height: 100vh;
		height: 100dvh; /* keyboard/URL-bar aware; older browsers keep 100vh */
	}
	header {
		padding-top: calc(10px + env(safe-area-inset-top, 0px));
	}
	form#composer {
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}
	/* ≥16px or iOS zooms the page on focus (chat.css sets 14px at ≤640) */
	input#input { font-size: 16px; }

	/* Header simplification: these all live in the FAB sheet on phones.
	   display:none only — the DOM stays for desktop + JS ids + coach. */
	.palette-dropdown,
	.settings-dropdown,
	#logout-btn,
	#user-name { display: none; }

	/* ------------------------------------------------------------------ */
	/* 2. Console strip (in-flow, top, two lines)                          */
	/* ------------------------------------------------------------------ */

	.console-strip:not([hidden]) {
		display: block;
		flex: 0 0 auto;
		padding: 3px 10px;
		background: var(--bg-deep);
		border-bottom: 1px solid var(--border);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.console-strip-lines {
		height: calc(2 * 1.5 * 10px); /* two lines of 10px mono at lh 1.5 */
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.console-strip-lines .c-line {
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
		font-size: 10px;
		line-height: 1.5;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--text-dim, var(--text));
	}
	/* Reuse chat.css semantic line colors; only size/clipping is restated. */

	/* The floating desktop console can never appear on phones. `display` is
	   the one property its drag code never writes inline, so no !important
	   race with dragged left/top values (those get cleared by mobile.js on
	   breakpoint entry anyway). */
	.console-panel { display: none !important; }

	/* The strip expands into the console modal — make it full-screen. */
	.console-modal-card {
		width: 100vw;
		height: 100dvh;
		max-width: 100vw;
		max-height: 100dvh;
		border-radius: 0;
	}

	/* ------------------------------------------------------------------ */
	/* 3. FAB + radial menu                                                */
	/* ------------------------------------------------------------------ */

	.pf-fab:not([hidden]) {
		display: flex;
		position: fixed;
		right: 16px;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
		width: 64px;
		height: 64px;
		border-radius: 50%;
		background: var(--bg-raised);
		border: 1px solid var(--border-strong);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
		align-items: center;
		justify-content: center;
		z-index: 92; /* above drawer (90), below every modal */
		touch-action: none;
		-webkit-tap-highlight-color: transparent;
	}
	.pf-fab::before {
		/* soft accent halo */
		content: "";
		position: absolute;
		inset: -4px;
		border-radius: 50%;
		border: 2px solid rgba(var(--accent-rgb), 0.35);
		pointer-events: none;
	}
	.pf-fab.dragging { transform: scale(1.06); }
	.pf-fab-img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		pointer-events: none;
	}

	/* Radial options: absolutely centered on the FAB, fanned by quadrant
	   via --dir-x / --dir-y (set by mobile.js's dir-* classes). */
	.pf-fab-menu { position: absolute; inset: 0; pointer-events: none; }
	.pf-fab.menu-open .pf-fab-menu { pointer-events: auto; }
	.pf-fab-opt {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 60px;
		height: 60px;
		margin: -30px 0 0 -30px;
		border-radius: 50%;
		border: 1px solid var(--border-strong);
		background: var(--bg-elev);
		color: var(--text);
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.03em;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 4px;
		opacity: 0;
		transform: translate(0, 0) scale(0.4);
		transition: transform 0.18s ease, opacity 0.15s ease;
		pointer-events: none;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
	}
	.pf-fab-opt-1 { background: var(--primary); color: var(--primary-contrast, #fff); }
	.pf-fab-opt-2 { background: var(--accent); color: var(--bg-deep); }
	.pf-fab.dir-up-left    { --dir-x: -1; --dir-y: -1; }
	.pf-fab.dir-up-right   { --dir-x:  1; --dir-y: -1; }
	.pf-fab.dir-down-left  { --dir-x: -1; --dir-y:  1; }
	.pf-fab.dir-down-right { --dir-x:  1; --dir-y:  1; }
	/* slot 1 vertical, slot 2 diagonal, slot 3 horizontal — mirrored per
	   quadrant so the fan always opens into free space */
	.pf-fab.menu-open .pf-fab-opt { opacity: 1; pointer-events: auto; }
	.pf-fab.menu-open .pf-fab-opt-1 {
		transform: translate(0, calc(var(--dir-y, -1) * 96px)) scale(1);
	}
	.pf-fab.menu-open .pf-fab-opt-2 {
		transform: translate(calc(var(--dir-x, -1) * 72px), calc(var(--dir-y, -1) * 72px)) scale(1);
		transition-delay: 0.04s;
	}
	.pf-fab.menu-open .pf-fab-opt-3 {
		transform: translate(calc(var(--dir-x, -1) * 96px), 0) scale(1);
		transition-delay: 0.08s;
	}

	/* ------------------------------------------------------------------ */
	/* 4. Menu sheet (BIG rows)                                            */
	/* ------------------------------------------------------------------ */

	.pf-sheet-backdrop:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 129;
	}
	.pf-sheet:not([hidden]) {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 130;
		max-height: 80dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: var(--bg-raised);
		border-top: 1px solid var(--border-strong);
		border-radius: 16px 16px 0 0;
		padding: 6px 12px calc(12px + env(safe-area-inset-bottom, 0px));
		animation: pf-sheet-up 0.22s ease;
	}
	@keyframes pf-sheet-up {
		from { transform: translateY(24px); opacity: 0.6; }
		to   { transform: translateY(0);    opacity: 1; }
	}
	.pf-sheet-grip {
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: var(--border-strong);
		margin: 4px auto 10px;
	}
	.pf-sheet-section { margin-bottom: 12px; }
	.pf-sheet-title {
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--text-dim, var(--text));
		opacity: 0.8;
		margin: 8px 4px 6px;
	}
	.pf-row {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 48px;
		padding: 10px 14px;
		border: 1px solid var(--border);
		border-radius: 10px;
		background: var(--bg-elev);
		color: var(--text);
		font-size: 15px;
		text-align: left;
		margin-bottom: 6px;
		-webkit-tap-highlight-color: transparent;
	}
	.pf-row:active { background: var(--card); }
	.pf-row-icon { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
	.pf-row-state {
		margin-left: auto;
		font-size: 11px;
		font-weight: 700;
		padding: 3px 10px;
		border-radius: 10px;
		border: 1px solid var(--border-strong);
		color: var(--text-dim, var(--text));
	}
	.pf-row-state.on {
		background: var(--accent);
		color: var(--bg-deep);
		border-color: var(--accent);
	}
	.pf-row-danger {
		border-color: var(--err, #c0392b);
		color: var(--err, #c0392b);
		margin-top: 4px;
	}
	.pf-panel-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
	.pf-panel-grid .pf-row { margin-bottom: 0; }
	/* Company + theme rows are injected by mobile.js */
	.pf-company-row.active,
	.pf-theme-row.active { border-color: var(--accent); }
	.pf-company-row.active::after,
	.pf-theme-row.active::after {
		content: "✓";
		margin-left: auto;
		color: var(--accent);
		font-weight: 800;
	}
	.pf-theme-swatch {
		width: 22px;
		height: 14px;
		border-radius: 4px;
		border: 1px solid var(--border-strong);
		flex: 0 0 auto;
	}

	/* ------------------------------------------------------------------ */
	/* 5. Drawer full-width + big labeled tabs                             */
	/* ------------------------------------------------------------------ */

	.buffer-panel {
		width: 100vw;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.panel-tab {
		min-height: 56px;
		padding: 8px 2px;
	}
	.panel-tab::after {
		visibility: visible; /* labels exist as data-label ::after in chat.css */
		font-size: 11px;
	}
	.panel-tab img, .panel-tab .tab-icon { width: 24px; height: 24px; }
	.buffer-close { font-size: 26px; padding: 10px 14px; }
	.staff-tab-item, .org-dropdown-item, .palette-item { min-height: 44px; }

	/* ------------------------------------------------------------------ */
	/* 6. Z-ladder repair (mobile-scoped)                                  */
	/* ------------------------------------------------------------------ */

	/* Drawer (90) used to stack ABOVE ingest wizards (50) — wizards win now,
	   still below .modal/menus (100) so desktop relations are preserved. */
	.ingest-modal { z-index: 95; }
}

/* ============================================================================
   Phase 2 — modal sweep (≤640px): every wizard readable on a phone.
   !important is required to beat the inline width="NNNpx" styles several
   modal cards carry; scoped to the breakpoint it is categorically correct.
   ========================================================================== */
@media (max-width: 640px) {

	.ds-modal-card,
	.ingest-modal-card,
	.modal-card {
		width: auto !important;
		max-width: calc(100vw - 24px) !important;
		max-height: calc(100dvh - 24px) !important;
		overflow-y: auto;
	}
	.ds-modal, .ingest-modal, .modal { padding: 12px; }
	.ds-btn, .ingest-btn { min-height: 44px; }

	/* SPI wizard also carries an inline height:80vh */
	#spi-wizard .ds-modal-card,
	#spi-wizard > div { height: auto !important; }

	/* RAG-admin: inline 58%/42% side-by-side panes → stacked columns */
	.rag-admin-split { flex-direction: column; }
	.rag-admin-pane { width: 100% !important; }
	.rag-admin-pane-list { max-height: 40dvh; }

	/* Chart zoom modal → full-screen (canvas is created 50ms after display,
	   so it measures the laid-out full-screen container correctly) */
	.chart-modal-content {
		width: 100vw !important;
		height: 100dvh !important;
		max-width: 100vw;
		max-height: 100dvh;
		border-radius: 0;
		padding: 12px;
	}

	/* Roles-wizard skill matrix: horizontal scroll instead of overflow */
	.rw-matrix-role {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Wide tables inside ingest/review bodies scroll instead of clipping */
	.ingest-body { overflow-x: auto; }

	/* MCP connector wizard: type cards stack, testbar wraps instead of clipping */
	.mw-cards { grid-template-columns: 1fr; }
	.mw-testbar { flex-wrap: wrap; }

	/* Desktop-only vs mobile-only copy (modifier-key hints etc.) */
	.pf-desktop-only { display: none; }
}
@media (min-width: 641px) {
	.pf-mobile-only { display: none; }
}