/* ============================================================
   Daimond — mobile responsive layer
   ------------------------------------------------------------
   Loaded AFTER app.css. On small screens the four desktop
   panels become one panel at a time, switched with the bottom
   nav (.mnav). The active panel is chosen by body[data-mpanel].
   Everything here is confined to `@media (max-width: 760px)`
   so desktop (>760px) is untouched.
   ============================================================ */

@media (max-width: 760px) {

	/* The page itself never scrolls or drags: it is pinned to the DYNAMIC
	   viewport (dvh — the space actually visible, excluding the browser's
	   address bar, which `100vh` wrongly includes so the app spilled below the
	   fold and you had to drag to reach the bar). Panels scroll internally. */
	html, body {
		height: 100vh;			/* fallback for engines without dvh */
		height: 100dvh;
		overflow: hidden;
		overscroll-behavior: none;
		max-width: 100%;
	}

	#app {
		height: 100vh;
		height: 100dvh;
		/* The foot stays at nought: the bottom bar owns the home indicator's
		   space, in its own padding, and adding it here as well would lift the
		   bar clear of the screen edge by twice the inset. */
		padding: calc(8px + var(--safe-t)) calc(8px + var(--safe-r)) 0 calc(8px + var(--safe-l));
		gap: 6px;
		overflow: hidden;
	}
	/* The top bar must never push the layout wider than the screen. */
	.topbar { overflow: hidden; }
	.top-meter { min-width: 0; overflow: hidden; }
	/* ...and `overflow: hidden` is not a fit, it is a guillotine. Signed in, the
	   row once ran 22-40px past a phone's width, so the appearance-and-layout
	   button -- theme, skin, reading size -- was CLIPPED OFF the screen on every
	   phone tested, and on an iPhone SE the guide "?" went with it. The maker's
	   badge held that slot then, and stood down here because a signature is
	   worth less room than the two controls it would push off.

	   Nothing stands down now: the badge has moved into the About dialog and the
	   slot holds a 32px icon button instead of a ~70px lozenge, so the row is
	   NARROWER than it was even with the badge hidden. The phone therefore keeps
	   About, which is where the badge's two claims now are -- a signature the
	   phone could never show at all is worse than one behind a button. */

	/* The lockup drops to the base logo height for the WHOLE mobile shell, not
	   only for phones. The wordmark was redrawn at 4.44:1 (it was 2.65:1), so at
	   the desktop's 36px it is 160px wide rather than 96, and the row -- burger,
	   lockup, five controls -- ran past its box anywhere below 476px. At 24px the
	   lockup is 106px and the row fits from 422px up, which covers the whole band
	   this shell is drawn on above the phone rule below.

	   Scoped to `.topbar` on purpose. These rules were written unscoped, and
	   `.brand-wordmark` is also worn by the About dialog's lockup (it carries the
	   class for the light/dark swap) -- so an unscoped height here silently beat
	   `.about-word`, and About drew its signature at 20-24px on every phone
	   instead of the 46px its own rule asks for. */
	.topbar .brand-wordmark { height: var(--logo-h); }

	/* Desktop-only machinery disappears. */
	.phandle { display: none !important; }
	.panel-close { display: none !important; }
	/* Except the RAIL's. Every other panel is a destination reached from the
	   bottom bar and has nothing to be closed back to, but the rail here is the
	   DRAWER, and the drawer covers 335 of a 390px screen. Its only dismissals
	   were a tap on the 55px of scrim beside it and the hamburger — which the
	   drawer itself is drawn on top of. A surface that big needs a way out on
	   the surface. The click is caught in mobile.js and closes the drawer, not
	   the panel. */
	.panel.rail .panel-close { display: flex !important; }
	/* The chip row is not in the header here -- it IS the footer (see .mnav in
	   css/mobile.css, and `placeChips` in js/mobile.js, which moves the one row
	   between the two). It used to be hidden on a phone altogether. */

	/* One DESTINATION at a time, full width. The dwellable panels — Chat, Email,
	   Files, Agents — take the whole screen and are chosen from the bottom bar.
	   The desktop zones collapse (`display: contents` lets their panels lay out
	   against .main directly) and the inline widths/heights the desktop resizers
	   set must lose, hence !important. The rail (a drawer) and the stage guests
	   (a sheet) are positioned by mobile.css and are excluded here. */
	.main { position: relative; }
	.pcol, .stage, .dock { display: contents !important; width: auto !important; }
	.main .panel:not(.rail) { height: auto !important; }
	.main .panel:not(.rail) { display: none !important; width: 100% !important; min-width: 0 !important; flex: 1 !important; }
	body[data-mpanel="ai"]     .main .ai     { display: flex !important; }
	body[data-mpanel="agents"] .main .agents { display: flex !important; }
	body[data-mpanel="mail"]   .main .mail   { display: flex !important; }
	body[data-mpanel="work"]   .main .work   { display: flex !important; }

	/* The bottom bar. Its contents are the chip row, and its rules are in
	   css/mobile.css with the rest of the phone shell; what stays here is the
	   band itself, because the layout above depends on its height. */
	.mnav {
		display: flex;
		align-items: stretch;
		flex: none;
		border-top: 1px solid var(--border);
		background: var(--bg-primary);
		margin: 0 -8px;
	}

	/* ── The header's controls SCROLL ─────────────────────────────
	   Reported from a phone: "this header does not scroll so I can't see a lot
	   of buttons." Every other stage panel's head wraps (`.web .chead, .doc
	   .chead, .msg .chead { flex-wrap: wrap }` in app.css) and the AI panel's
	   never did, so its row of chips — mode, Concise, Copy, Steps, Collapse,
	   Fold on a Diamond, and full screen — squeezed the title to an ellipsis and
	   then simply ran off the end of the panel, unreachable.

	   SCROLLED RATHER THAN WRAPPED, deliberately. Wrapping costs a second 36px
	   row of vertical space on every screen for ever, on the axis a phone has
	   least of; scrolling costs nothing and is the gesture the user asked for.
	   The title keeps a floor so it cannot be crushed to nothing in the trade,
	   and the scrollbar is hidden because a phone has no room for one and the
	   content is dragged, not clicked. */
	.panel.ai .chead { gap: 6px; }
	.panel.ai .ctitle { min-width: 4.5em; }
	.panel.ai .chead-right {
		flex: 1 1 auto;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		/* Without this the chips shrink to fit instead of overflowing, which is
		   the state that hid them: a row that fits is a row nothing scrolls. */
		justify-content: flex-start;
	}
	.panel.ai .chead-right::-webkit-scrollbar { display: none; }
	.panel.ai .chead-right > * { flex: none; }

	/* Comfortable chat input row. */
	.chat-output { padding: 12px 14px; }
	.chat-msg-user .chat-msg-content,
	.chat-msg-assistant .chat-msg-content { max-width: 100%; }
	.chat-msg-content pre,
	.chat-msg-content table,
	.tool-args,
	.tool-result { max-width: 100%; overflow-x: auto; }
	.chat-input-bar { gap: 8px; padding: 8px 10px; }
	/* 16px avoids iOS Safari's auto-zoom on focus. */
	#chat-input { font-size: var(--fs-xl); padding: 11px 13px; }
	/* Send and the walk-back sit in one row and are one control on desktop, both
	   32px square. Only Send was grown for touch, so the pair read as a large
	   button beside a small one, bottom-aligned and mismatched. They grow together. */
	#chat-send, #chat-jump, #chat-end { min-width: 46px; width: 46px; height: 46px; font-size: var(--fs-2xl); }

	/* ── The box you type in gets the room ────────────────────────
	   Measured on a 390px phone: the bar is 372 wide and the text box got 170 of
	   it, because Send and the two walk-back chevrons take 46 each plus gaps —
	   three buttons eating more of the row than the thing the row is for.

	   The two CHEVRONS ARE NOT COMPOSITION. They walk the transcript; they have
	   nothing to do with the message being written, and on the one screen where
	   space is scarce they were charging full price for it. So on a phone they
	   leave the bar and float at the foot of the thread, where what they act on
	   actually is. Absolute, so the DOM and every handler are untouched — this is
	   a placement, not a rebuild.

	   The text box then takes the width they gave up: 170px becomes about 280.
	   Nothing is lost and nothing new is drawn, which is what "without eating
	   screen real estate" has to mean. */
	.chat-input-bar { position: relative; }
	.chat-input-bar #chat-jump,
	.chat-input-bar #chat-end {
		position: absolute;
		bottom: calc(100% + 10px);
		width: 40px; min-width: 40px; height: 40px;
		border-radius: 50%;
		/* Reading over the thread rather than sitting in a bar, so it needs its
		   own ground: over a message bubble a transparent button is a floating
		   glyph nobody can tell is pressable. */
		background: var(--bg-secondary);
		border: 1px solid var(--border);
		box-shadow: 0 2px 8px rgb(0 0 0 / 0.28);
		opacity: 0.94;
		z-index: 3;
	}
	.chat-input-bar #chat-jump { right: 62px; }
	.chat-input-bar #chat-end  { right: 12px; }
	/* WHAT THEY FLOAT OVER, which the first attempt got wrong and a screenshot
	   caught: they cleared the composer and landed squarely on the attachments
	   strip, hiding the end of "Mark one in with the paperclip". The strip is not
	   always there — a Diamond with folders marked in draws rows instead — so
	   lifting the buttons by a fixed amount would clear it in one state and float
	   them into the middle of the thread in the other.
	   Keeping the anchor and giving the strip room on its right is the version
	   that is correct in both: nothing moves, and no words go under a button.

	   The room goes on the BODY and not on the strip, which was the second thing
	   a screenshot caught: padding the whole strip dragged the group's own `+`
	   button 104px in from the edge it belongs on. The head row is a title and a
	   button, neither of which the chevrons ever reach; only the body sits under
	   them. */
	.chat-attach-strip .ws-body,
	.chat-attach-strip .attach-body { padding-right: 100px; }

	/* Give lists a little more row height for touch. */
	.session-box { padding: 10px 11px; }
	.files-row { padding: 8px 12px; }

	/* A thumb's floor. The shared touch block below lifts the small controls to
	   ~34px, which suits a dense tablet dock; on a phone, where these are the
	   only controls in the bar, they get the full 40px box. Confined to the
	   phone breakpoint on purpose -- 40px each would burst the Workspace
	   panel's six-button head in a 260px dock column on a tablet. */
	.top-actions .icon-btn,
	.top-actions .update-chip,
	#drawer-btn { min-width: 40px; min-height: 40px; }
	.railhead .addbtn { width: 40px; height: 40px; }
	/* The search box was 29px tall: legible, but nothing like a target. */
	.diamond-search { padding: 9px 10px; }

	/* The rail is the DRAWER here, and every row in it is something a thumb has
	   to land on: the status rows were 23px tall, the account row 26, the drawer's
	   own close 21 square. Dense is right on a desktop, where these are read with
	   a pointer over them; in a drawer they need a finger's worth of height.
	   (The drawer scrolls, so the extra height costs nothing that matters.) */
	/* `.astat-sync` is here because its chip is pressable in the one state the
	   user can lift -- "Sync off" opens Credits, and a safe start turns syncing
	   back on -- so it is a target and needs a finger's worth of height like the
	   rows around it. Without it the sync row sat 12px shorter than its
	   neighbours and read as a caption rather than a row. */
	.astat-row.astat-btn,
	.astat-row.astat-sync { padding-top: 9px; padding-bottom: 9px; }
	.astat-id .user-row { padding: 9px 4px; }
	.astat-id #settings-btn { min-width: 40px; min-height: 40px; }
	.admin-item { padding-top: 10px; padding-bottom: 10px; }
	.tile-label { padding-top: 6px; padding-bottom: 6px; }
	/* Steps / collapse, in the chat header: 26px tall is a pointer's target, not
	   a thumb's. */
	.chead .chip-btn { padding: 8px 10px; }

	/* ── Full screen, on a phone ──────────────────────────────────────
	   The desktop rules (app.css, `[data-cfull]`) take the top bar, the rail and
	   the dock; here the bottom bar goes too, because a phone's app switcher is
	   the last piece of chrome around the page.

	   THE FOOT'S SAFE INSET COMES BACK WITH IT. `#app` above sets its bottom
	   padding to nought and says why: the bar owns the home indicator's space in
	   its own padding, and adding it twice would lift the bar off the screen
	   edge. With the bar gone there is nothing holding that space, so the panel
	   would run under the indicator -- and the crystal page's last row with it. */
	:root[data-cfull] .mnav { display: none !important; }
	:root[data-cfull] #app { padding-bottom: var(--safe-b); }
	/* The way out is the only control left in the header, and on a phone it is
	   the one a thumb has to find. */
	:root[data-cfull] .chead .cfull-btn { min-height: 40px; padding: 8px 12px; }
}

/* Touch tap targets: secondary controls default to ~22px which is under the
   24px WCAG floor; enlarge on small screens, and reveal hover-only close
   buttons (there is no hover on touch). */
@media (max-width: 760px), (pointer: coarse) {
	/* Seven controls the existing lifts in this block missed. The worst was the
	   tag disclosure at 315x16.8 -- the way into the whole filing system, in a
	   drawer whose entire purpose is to be worked with a thumb. 24x24 is the
	   WCAG 2.2 AA floor. */
	.tagf-toggle { padding-top: 5px; padding-bottom: 5px; }
	.tagf-pool .tag-chip,
	.tagf-active .tag-chip,
	.session-box-meta .tag-chip { padding-top: 3px; padding-bottom: 3px; }
	.files-mode-btn,
	.files-mode-chip { min-height: 24px; padding-top: 4px; padding-bottom: 4px; }
	.tile-fold { padding-top: 5px; padding-bottom: 5px; }
	/* The wordmark keeps its 20px ink and gains a 24px target around it. */
	.brand { display: flex; align-items: center; min-height: 24px; }
	/* The chips are 24px here rather than 18, so the same cap would show the
	   same three and a half rows in half again the height -- and the drawer has
	   less to spare than the desktop rail, not more. Two and a half rows on a
	   phone: still cut through a row, so it still says there is more of it,
	   without the filter taking the space the Diamonds came for. */
	.tagf-pool, .tagf-active { max-height: calc(6em + 16px); }
	.addbtn { width: 34px; height: 34px; font-size: var(--fs-xl); }
	.icon-btn { padding: 8px 10px; font-size: var(--fs-2xl); }
	/* ── The closer's thumb floor ─────────────────────────────────────────────
	   Every way out of every dialog, popover, drawer and sheet, at 44x44 — the
	   iOS Human Interface floor, above the 24px WCAG 2.2 AA one, because this is
	   the control a user reaches for when they are stuck and there is no second
	   attempt if they miss it.

	   The BOX grows; the ink does not. `.ic` stays 16px inside it, so a phone
	   gets a bigger target rather than a bigger cross.

	   This is the user's report answered: on a 390px screen the appearance menu
	   is 359px wide, which leaves 19px either side to tap and no closer at all.
	   A margin is not a way out. */
	.ui-close { width: 44px; height: 44px; }
	/* The two closers written in static markup, which predate `.ui-close` and
	   carry it now: the phone sheet's and the admin drawer's. Named as well,
	   because each also carries a size of its own from the block it was tuned
	   in and the last rule would otherwise win. */
	.msheet-close, #admin-close, .admin-back { min-width: 44px; min-height: 44px; }

	/* These named classes that do not exist (`.files-row-del`), so on touch the
	   file buttons stayed hidden and could not be reached at all. The real class
	   is `.files-del`, and the file buttons hide with `visibility`, not
	   `opacity`. The tile's closer cross was removed in phase C -- Delete lives
	   at the foot of the cog dialog now -- so its three rules went with it. */
	.files-row .files-del { visibility: visible; opacity: 1; }

	/* A tablet keeps the desktop bar and its chip row, where the controls were
	   23-36px tall. They grow in HEIGHT only: the chip row already has more
	   chips than it can show, so nothing here may take a pixel of width. */
	.top-actions .icon-btn,
	.top-actions .update-chip { min-height: 40px; }
	.ptag { padding-top: 8px; padding-bottom: 8px; }
}

/* ── The smallest screens ────────────────────────────────────────────────────
   320px (an iPhone SE / iPhone 5) has 304px of usable bar, and the phone layout
   above wants 343. Rather than drop another control -- the appearance menu is
   the one that was being lost, and it is the way to the theme, the skin and the
   reading size -- the bar itself gets smaller: a shorter wordmark, tighter gaps
   and the compact 34px touch box. Everything stays reachable. */
/* A Diamond's labelled rows stack below the phone breakpoint.
   The label holds a fixed 116px so the pulldowns line up their left edges —
   which is right on a desktop and wrong at 380px, where 116 plus the gap leaves
   the select too narrow for its own text and it overflowed the card by 19px.
   `verify_raildialogs` measured it at warm-dark-380. Stacked, each control gets
   the whole width and the column they were lining up for is moot.
   Every name the rows and their labels go by is listed. Miss one and that row
   alone keeps its 116px column and overflows the card exactly as before —
   which is why the colour rows are named here as well as the model rows. */
@media (max-width: 760px) {
	.tile-dlg-field,
	.tile-dlg-model { flex-direction: column; align-items: stretch; gap: 4px; }
	.tile-dlg-label,
	.tile-dlg-model .tile-model-chip { flex: 0 0 auto; width: auto; text-align: left; }
	/* A swatch stretched to the card's width is a colour BAR, not a chip a
	   thumb presses; it keeps its size and sits at the start of its own row. */
	.tile-dlg-swatch { align-self: flex-start; }
}

/* THE WORDMARK STANDS DOWN BEFORE A CONTROL DOES, and on a phone it now stands
   down to the mark alone. The lockup was redrawn at 4.44:1, so even at the base
   24px it is 106px wide, and the row -- burger, lockup, five controls -- needs
   422px to hold that. Every phone but the two Pro Maxes is narrower, and the
   only heights that would have fitted (17px at 390) put the lettering below
   legible. Squashing the artwork is not on the table: the proportions are the
   author's.

   So the WORD goes and the MARK stays. The mark is the brand -- it is what the
   chat header wears at 18px (`#chead-mark`) and what the extension ships alone
   -- and at 24px tall it is 17px wide, which the row can hold down to 320px with
   room to spare. That is why the height rule that used to drop to 20px below 380
   has gone: with the word off the bar there is nothing left to save.

   Swapped with `content`, not by hiding one image and showing another, so the
   two ink variants keep their single light/dark rule and the markup is
   untouched. The identity modal does the same thing two files over. */
@media (max-width: 430px) {
	.topbar .brand-wordmark { content: url("../assets/daimond_mark.svg"); }
}

/* 380, not the 360 this began at. The bar's right-hand row is five controls
   once you are signed in -- update, About, link a device, guide, appearance --
   and at the full 40px touch box those five want 216px, which the layout only
   affords from 380 up. Between 361 and 379 the bar's `overflow: hidden` was
   taking 3-17px off the appearance menu at the end of the row: an iPhone SE
   (2nd/3rd gen) and an iPhone 8 are both 375.

   The policy is the one this block was written for and is unchanged by About
   arriving: the bar gets smaller rather than shedding a control, because every
   one of the five is the only way to the thing it opens. `verify_about.mjs`
   measures the row for a clip at 320, 375 and 390 so the next control added
   here fails loudly rather than quietly amputating the last one. */
@media (max-width: 380px) {
	.topbar { gap: 8px; }
	/* 2px between the buttons rather than 4. The TARGETS keep their 34px, which
	   is what a thumb lands on; it is only the air between them that goes. */
	.top-actions { gap: 2px; }
	.top-actions .icon-btn,
	.top-actions .update-chip,
	#drawer-btn { min-width: 34px; min-height: 34px; }
	/* The unlock lockup, at 54px, is 240px wide -- which is the entire content
	   width of a 90vw card on a 320px phone, so it ran to both padding edges and
	   over them. 40px is 177px, and leaves the card its margins back. */
	#identity-modal .login-logo { height: 40px; }
}