/* Download.chat — mobile layout & responsive behavior. */

@media (max-width: 900px) {
	.dc-body { max-width: 100%; }

	/* Sidebar becomes an off-canvas drawer. */
	.dc-topnav__toggle { display: block; }

	/* Brand safety net: keep the full "Download.chat" logo visible without
	   clipping or forcing horizontal scroll at narrow widths (320/360px).
	   The toggle keeps its fixed size; the brand may shrink last. */
	.dc-topnav { gap: 10px; padding: 0 14px; }
	.dc-topnav__toggle { flex: 0 0 auto; }
	.dc-topnav__brand { flex: 0 1 auto; min-width: 0; }
	.dc-topnav__logo { max-width: 100%; height: 28px; width: auto; }

	.dc-sidebar {
		position: fixed;
		top: 0; left: 0; bottom: 0;
		width: min(84vw, var(--dc-sidebar-w));
		z-index: 50;
		transform: translateX(-100%);
		transition: transform 0.22s ease;
		background: var(--dc-surface);
		background-image: var(--dc-bg-gradient);
		min-height: 100vh;
		overflow-y: auto;
	}
	.dc-sidebar.is-open { transform: translateX(0); }
	.dc-sidebar__close { display: inline-block; }

	.dc-sidebar__scrim {
		display: block;
		position: fixed; inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 40;
	}
	.dc-sidebar__scrim[hidden] { display: none; }

	.dc-main { padding: 20px 16px; }
	.dc-grid { grid-template-columns: 1fr; }
}

/* Fixed bottom composer: ONLY CSS handles the fixed positioning.
   Bottom space is reserved ONLY on pages that render the composer
   (scoped to .dc-has-composer) so SEO pages get no empty bottom space. */
@media (max-width: 768px) {
	.dc-has-composer {
		padding-bottom: calc(var(--dc-composer-h) + env(safe-area-inset-bottom));
	}

	.dc-has-composer .dc-composer {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		margin: 0;
		max-width: 100%;
		border-radius: var(--dc-radius) var(--dc-radius) 0 0;
		z-index: 35;
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
	}

	.dc-chips { justify-content: flex-start; }
	.dc-chip { flex: 0 0 auto; }
}