/*
 * Desktop frame of the patient app – CSS only. On a desktop browser (wide viewport + mouse) the page body is drawn as a
 * smartphone that stays fixed in the window; only the inside of the phone scrolls (like a real phone). Phones and
 * tablets ("pointer: coarse") never match the media query, so nothing changes there.
 * Switch: MKT_APP_DESKTOP_FRAME (load.php) decides whether this file is loaded.
 *
 * Notes:
 * - The html element gets overflow:hidden; without it the body's overflow would be propagated to the viewport (CSS
 *   rule) and the whole page would scroll instead of the phone's inside.
 * - The body is NOT transformed, so the app's position:fixed elements (footer bar, recording overlay) keep their
 *   viewport positioning and are placed over the phone's screen area below. They stay in place while the content
 *   scrolls – exactly like the fixed footer on a real phone.
 *
 * Geometry: frame top 30px, frame height H = min(844px, 100vh - 60px) (incl. 14px bezel), width 390px centred.
 * Screen area: left = 50% - 181px, width 362px, top = 44px, bottom = 100vh - H - 16px = max(44px, 100vh - 860px).
 */
@media (min-width: 992px) and (pointer: fine) {
	html {
		height: 100%;
		overflow: hidden; /* the viewport never scrolls; the body (phone screen) does */
		background: #e6e9ef radial-gradient(circle at 50% 15%, #f6f8fb 0%, #dfe3ea 70%) fixed;
	}
	body {
		box-sizing: border-box;
		position: fixed;
		top: 30px;
		left: calc(50% - 195px);
		width: 390px;
		height: min(844px, calc(100vh - 60px));
		margin: 0;
		padding: 0;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		border: 14px solid #141418;
		border-radius: 48px;
		box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 0 0 2px #3a3a40;
		scrollbar-width: thin;
	}
	/* fixed footer bar of the app: pinned to the bottom of the phone screen instead of the browser window */
	body > footer {
		left: calc(50% - 181px);
		right: auto;
		width: 362px;
		bottom: max(44px, calc(100vh - 860px));
		border-radius: 0 0 34px 34px;
	}
	/* full-screen overlay while a recording is processed: limited to the phone screen */
	.audio-recorder-form-loading {
		top: 44px;
		left: calc(50% - 181px);
		right: auto;
		width: 362px;
		bottom: max(44px, calc(100vh - 860px));
		border-radius: 34px;
	}
	/* side buttons of the "device" (drawn on the viewport next to the centred body) */
	html::before, html::after {
		content: "";
		position: fixed;
		top: 50%;
		width: 4px;
		height: 70px;
		background: #2a2a2e;
		border-radius: 3px;
		pointer-events: none;
	}
	html::before { left: calc(50% - 195px - 17px); transform: translateY(-120px); }
	html::after  { left: calc(50% + 195px + 13px); transform: translateY(-40px); }
}

/*
 * Breakpoints inside the frame. CSS media queries see the browser window (wide), not the 362px phone screen, so
 * Bootstrap's grid (col-md-*, col-lg-*) and the app's own "min-width: 768px" rules would lay the page out as on a
 * desktop. These rules force the phone (xs) behaviour for everything the app uses; extend them if new responsive
 * classes are added to the app (grep col-md- / col-lg- / d-md- in the PHP files).
 * Generated by gen-frame-breakpoints.php (scratchpad of the 2026-10-31 session).
 */
@media (min-width: 992px) and (pointer: fine) {
	/* columns with only a md/lg class: full width, as below 768px */
	body .col-md-1:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-2:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-3:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-4:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-5:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-6:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-7:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-8:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-9:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-10:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-11:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-md-12:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-1:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-2:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-3:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-4:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-5:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-6:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-7:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-8:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-9:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-10:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-11:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12),
	body .col-lg-12:not(.col):not(.col-auto):not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12) {
		flex: 0 0 100%;
		max-width: 100%;
	}
	/* columns with an xs class AND a md/lg class: the xs value wins again */
	body .col[class*="col-md-"], body .col[class*="col-lg-"] { flex: 1 0 0%; max-width: 100%; }
	body .col-auto[class*="col-md-"], body .col-auto[class*="col-lg-"] { flex: 0 0 auto; width: auto; max-width: 100%; }
	body .col-1[class*="col-md-"], body .col-1[class*="col-lg-"] { flex: 0 0 8.333333%; max-width: 8.333333%; }
	body .col-2[class*="col-md-"], body .col-2[class*="col-lg-"] { flex: 0 0 16.666667%; max-width: 16.666667%; }
	body .col-3[class*="col-md-"], body .col-3[class*="col-lg-"] { flex: 0 0 25%; max-width: 25%; }
	body .col-4[class*="col-md-"], body .col-4[class*="col-lg-"] { flex: 0 0 33.333333%; max-width: 33.333333%; }
	body .col-5[class*="col-md-"], body .col-5[class*="col-lg-"] { flex: 0 0 41.666667%; max-width: 41.666667%; }
	body .col-6[class*="col-md-"], body .col-6[class*="col-lg-"] { flex: 0 0 50%; max-width: 50%; }
	body .col-7[class*="col-md-"], body .col-7[class*="col-lg-"] { flex: 0 0 58.333333%; max-width: 58.333333%; }
	body .col-8[class*="col-md-"], body .col-8[class*="col-lg-"] { flex: 0 0 66.666667%; max-width: 66.666667%; }
	body .col-9[class*="col-md-"], body .col-9[class*="col-lg-"] { flex: 0 0 75%; max-width: 75%; }
	body .col-10[class*="col-md-"], body .col-10[class*="col-lg-"] { flex: 0 0 83.333333%; max-width: 83.333333%; }
	body .col-11[class*="col-md-"], body .col-11[class*="col-lg-"] { flex: 0 0 91.666667%; max-width: 91.666667%; }
	body .col-12[class*="col-md-"], body .col-12[class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }
	/* app rules of styles.css: undo the ">= 768px" block, apply the "<= 767px" block */
	body .btn.btn-os-app { max-width: none; }
	body .request-form .new-line { display: block; padding-top: 14px; }
	body #appointmentsAccordion { margin-bottom: 0; }
}