/**
 * Responsive patches — cross-cutting fixes for mobile / tablet / iOS.
 *
 * Loaded site-wide via FrontendManager::enqueue_assets at low priority so it
 * overrides per-template inline rules. Keep this file shallow: each rule is
 * a targeted fix with a one-line comment explaining what it solves and on
 * which device. If a rule grows to a whole component re-skin it belongs in
 * components.css instead.
 *
 * Touch-target floor: 44×44 CSS pixels (WCAG 2.5.5 + Apple HIG).
 */

/* ── Touch targets ────────────────────────────────────────────────────── */

/* Compose toolbars: bump tap area on phones without distorting desktop. */
@media (pointer: coarse) {
	.kbn-room__compose__tool,
	.kbn-fmt {
		min-width: 36px;
		min-height: 36px;
	}
	.kbn-room__msg__actions button {
		min-width: 32px;
		min-height: 32px;
	}
	.kbn-id-bar__btn {
		min-height: 44px;
	}
	.kbn-filters__pill {
		min-height: 36px;
	}
}

/* ── Safe-area insets (notched iPhones, iPad home indicator) ─────────── */

/* The PWA standalone bar sits behind the iOS status bar; pad the top. */
@media (display-mode: standalone) {
	.kbn-topbar,
	body > header[role="banner"] {
		padding-top: env(safe-area-inset-top);
	}
	/* In standalone mode bottom nav / footers must also clear the home
	 * indicator. Catches any sticky bottom CTA on the new templates. */
	.kbn-stories__cta,
	.kbn-article-shell,
	.kbn-guides,
	.kbn-settle,
	.kbn-stories,
	.kbn-video,
	.kbn-archive {
		padding-bottom: max(64px, calc(64px + env(safe-area-inset-bottom)));
	}
}

/* Make iframe video embeds responsive on mobile so they don't overflow.
 * YouTube/Vimeo iframes default to fixed dimensions in oEmbed; we cap
 * width to container and preserve 16:9. */
.kbn-video__player iframe,
.kbn-video__fallback iframe,
.kbn-article-body iframe {
	max-width: 100%;
}

/* Long URLs / words shouldn't break layouts on phones — wrap them. */
@media (max-width: 600px) {
	.kbn-article-body,
	.kbn-video__body,
	.kbn-saved-item__body {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

/* Bottom-fixed elements (chat compose, install banner) clear the home indicator. */
.kbn-room__compose,
.kbn-install-banner {
	padding-bottom: max(14px, env(safe-area-inset-bottom));
}

/* ── Compose toolbar overflow on narrow screens ──────────────────────── */

/* Wrap the bottom action row instead of horizontally scrolling on <360px. */
@media (max-width: 380px) {
	.kbn-room__compose__actions__left {
		flex-wrap: wrap;
		gap: 4px;
	}
	.kbn-room__compose__sep {
		display: none;
	}
	.kbn-room__compose__fmtbar {
		flex-wrap: wrap;
	}
}

/* ── /find/ filter sidebar: scrollable instead of unbounded on mobile ─── */

@media (max-width: 1023px) {
	.kbn-filters {
		position: relative !important;
		top: auto !important;
		max-height: 60vh;
		overflow-y: auto;
		padding-bottom: 12px;
	}
	.kbn-filters__list {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.kbn-filters__pill {
		font-size: 13px;
	}
}

/* ── Listing single hero ──────────────────────────────────────────────── */

/* Tall phones: cap hero so the title is above the fold. */
@media (max-width: 600px) {
	.kbn-listing__hero,
	.kbn-listing-hero,
	.kbn-id-bar__hero {
		max-height: 220px;
	}
	.kbn-id-bar__buttons,
	.kbn-id-bar__actions {
		flex-wrap: wrap;
		gap: 8px;
	}
	.kbn-id-bar__btn {
		flex: 1 1 calc(50% - 4px);
		justify-content: center;
	}
}

/* ── Modal panels: full-width sheet on phones ─────────────────────────── */

/* Slide-up sheets on small screens, centered modals on tablet+. */
@media (max-width: 599px) {
	.kbn-modal,
	.kbn-edit-modal {
		align-items: flex-end !important;
	}
	.kbn-modal__panel,
	.kbn-edit-modal__panel {
		border-radius: 12px 12px 0 0 !important;
		max-width: 100% !important;
		width: 100%;
		padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
	}
}

/* ── Topbar mobile drawer: prevent body scroll when open ─────────────── */

body[data-kbn-drawer-open="true"] {
	overflow: hidden;
}

/* ── Honor reduced-motion preferences ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}