/**
 * qq-deriv-shell.css — the Deriv chrome. R2. [DERIV]
 *
 * Structure only. Every colour is a token from qq-deriv-palette.css, so this
 * file never needs a house of its own — switch QQ_HOUSE and the chrome follows.
 * If a hex appears in here, that is a bug: tests/qq-contrast.py will find it.
 *
 * Sized from the real app's own chrome, measured off the captures:
 * account bar 60px, tab strip 46px, bottom bar 58px + safe area.
 */

/* Inputs default to content-box, so width:100% plus padding and a border
   overflows its column. R4 found it on the bot parameter fields — 244px inside
   a 226px cell. The theme does not set this globally, so the Deriv scope must. */
.qqd-shell, .qqd-shell *, .qqd-shell *::before, .qqd-shell *::after {
	box-sizing: border-box;
}

.qqd-shell {
	margin: 0;
	background: var(--qqd-paper);
	color: var(--qqd-ink);
	/* the app's own stack; the theme's font loads over it where present */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-text-size-adjust: 100%;
}

.qqd-root {
	display: flex;
	flex-direction: column;
	overflow-x: clip;   /* belt to min-width:0's braces */
	min-height: 100dvh;   /* not 100vh: vh is the address-bar-collapsed height,
	                         so a 100vh shell is taller than the screen and the
	                         bottom bar hides under browser chrome */
}

/* ── account bar ─────────────────────────────────────────────────── */
.qqd-acct {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--qqd-card);
	border-bottom: 1px solid var(--qqd-line);
	flex: none;
}
.qqd-avatar {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 9px;
	background: var(--qqd-down);
	color: var(--qqd-on-down);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .04em;
}
.qqd-acct-pick {
	flex: 1;
	min-width: 0;
	text-align: left;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
	min-height: 40px;
}
.qqd-acct-kind {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 11.5px;
	color: var(--qqd-muted-text);
}
.qqd-caret { width: 13px; height: 13px; flex: none; }
.qqd-acct-bal {
	display: block;
	font: 700 15px/1.3 ui-monospace, Menlo, Consolas, monospace;
	color: var(--qqd-ink);
}
.qqd-acct-bal i { font-style: normal; font-size: 11px; color: var(--qqd-muted-text); }

.qqd-deposit {
	flex: none;
	background: var(--qqd-down);
	color: var(--qqd-on-down);
	text-decoration: none;
	border-radius: 99px;
	padding: 10px 18px;
	font: 700 12.5px/1 inherit;
	min-height: 40px;
	display: flex;
	align-items: center;
}

/* ── platform tabs ───────────────────────────────────────────────── */
.qqd-tabs {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	/* THE FLEXBOX TRAP: a flex item defaults to min-width:auto, so this strip
	   is sized by its content and grows the whole page instead of scrolling.
	   It did not show in R2 because the mounted capture had its own
	   containment; it appeared the moment our own narrower panel went in —
	   69px of horizontal overflow at 480px. min-width:0 is the fix, and it is
	   the reason the overflow check runs on every round rather than once. */
	min-width: 0;
	max-width: 100%;
	scrollbar-width: none;
	background: var(--qqd-cream);
	border-bottom: 1px solid var(--qqd-line);
	padding: 0 4px;
	flex: none;
}
.qqd-tabs::-webkit-scrollbar { display: none; }
.qqd-tab {
	flex: none;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 13px 14px;
	text-decoration: none;
	color: var(--qqd-muted-text);
	font: 600 12.5px/1 inherit;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	min-height: 46px;
}
.qqd-tab .qqd-i { width: 16px; height: 16px; flex: none; }
.qqd-tab.is-on {
	color: var(--qqd-accent-strong);
	background: var(--qqd-card);
	border-bottom-color: var(--qqd-accent-strong);
	border-radius: 9px 9px 0 0;
}

/* ── body ────────────────────────────────────────────────────────── */
.qqd-body {
	flex: 1;
	min-height: 0;
	min-width: 0;
	background: var(--qqd-paper);
}

/* A tab whose panel has not been built yet says so. It must read as UNBUILT,
   never as broken and never as empty-because-something-failed. */
.qqd-pending {
	margin: 14px 12px;
	padding: 18px 14px;
	border: 1px dashed var(--qqd-line);
	border-radius: 12px;
	background: var(--qqd-card);
	text-align: center;
}
.qqd-pending b { display: block; font-size: 14px; margin-bottom: 5px; }
.qqd-pending span {
	display: block;
	color: var(--qqd-muted-text);
	font-size: 12px;
	line-height: 1.55;
	max-width: 34ch;
	margin: 0 auto 9px;
}
.qqd-pending code {
	font: 500 10.5px/1 ui-monospace, Menlo, Consolas, monospace;
	background: var(--qqd-cream);
	border: 1px solid var(--qqd-line);
	border-radius: 6px;
	padding: 5px 8px;
	display: inline-block;
	color: var(--qqd-ink);
}

/* ── bottom navigation ───────────────────────────────────────────── */
.qqd-bn {
	display: flex;
	background: var(--qqd-card);
	border-top: 1px solid var(--qqd-line);
	padding-bottom: env(safe-area-inset-bottom);
	flex: none;
	position: sticky;
	bottom: 0;
	z-index: 10;
}
.qqd-bn-i {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 8px 0 7px;
	text-decoration: none;
	color: var(--qqd-muted-text);
	font: 600 9.5px/1.3 inherit;
	min-height: 52px;
}
.qqd-bn-i .qqd-i { width: 20px; height: 20px; }
.qqd-bn-i.is-on { color: var(--qqd-accent-strong); }

/* Nothing floating may bury the bottom bar. The theme's sweep adds
   qq-fab-present when it finds something parked in that corner. */
body.qq-fab-present .qqd-bn { padding-bottom: calc(env(safe-area-inset-bottom) + 44px); }

@media (min-width: 900px) {
	/* The Deriv surface is the desktop exception, like the terminal. It does
	   not get the phone frame — it gets the room. */
	.qqd-tab { padding: 13px 18px; }
	.qqd-acct { padding: 12px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.qqd-root * { transition: none !important; animation: none !important; }
}

:where(.qqd-root) :focus-visible {
	outline: 2px solid var(--qqd-accent-strong);
	outline-offset: 2px;
}