/* =============================================================================
   IzeChat — post comments as a full-screen sheet (mobile)
   -----------------------------------------------------------------------------
   Stock behaviour: Wo_ShowComments() toggles `hidden` on #post-comments-<id>,
   so comments expand inline underneath the post and the card grows taller with
   every comment added — the footer never stops sliding down.

   This mirrors what the photo lightbox already does on mobile:
       .wo_imagecombo_lbox .comment-section {
           position: fixed; height: 100%; z-index: 1045;
           transform: translateY(115%);
       }
       .wo_imagecombo_lbox.com_active .comment-section {
           transform: none; transition: transform 300ms cubic-bezier(.4,0,.2,1);
       }
   Same breakpoint (800px), same easing and duration, so the post sheet and the
   photo sheet feel identical.

   The post card is NOT restructured: #post-comments-<id> keeps its markup and
   every JS hook. It is only promoted out of flow into a sheet.

   Scope: `.post .post-comments.ize-sheetable` — the story page renders comments
   as the page body (no .ize-sheetable), so it is never affected.
   ========================================================================== */

.post .post-comments .ize-sheet-head { display: none; }

/* ---------- Sheet (mobile only) ------------------------------------------- */
@media (max-width: 800px) {

	.post .post-comments.ize-sheetable.ize-sheet {
		--ize-surface: #fff;
		--ize-ink:     #1c1e21;
		--ize-ink-2:   #65676b;
		--ize-hair:    rgba(0, 0, 0, .1);

		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* Above .navbar.navbar-default, which is position:fixed at z-index:1045
		   — the same layer the lightbox sheet uses. On a tie the later element
		   in the DOM wins, which happens to be this sheet, but that is luck, not
		   design: it would silently invert if the navbar ever moved or gained a
		   stacking context, and the first thing the navbar would cover is the
		   top of this sheet — i.e. the back button. */
		z-index: 1100;
		margin: 0;
		/* THE root cause of "no back button": the app is edge-to-edge
		   (viewport-fit=cover in container.phtml), so top:0 sits UNDER the system
		   status bar and the header — back button and all — is drawn behind it.
		   Every other fixed top surface in this theme reserves the inset the same
		   way (navbar, body, chat, modals); the sheet has to as well.
		   box-sizing:border-box (global reset) keeps the inline vv height honest. */
		padding: env(safe-area-inset-top, 0px) 0 0;
		border: 0;
		border-radius: 0;
		background: var(--ize-surface);
		box-sizing: border-box;

		display: flex;
		flex-direction: column;

		transform: translateY(115%);
		/* Only the transform animates — no layout/paint work, so it stays on the
		   compositor and doesn't stutter behind the keyboard. */
		will-change: transform;
	}

	.post .post-comments.ize-sheetable.ize-sheet.ize-sheet-open {
		transform: none;
		transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
	}

	/* Closing uses the same curve so it doesn't snap shut. */
	.post .post-comments.ize-sheetable.ize-sheet.ize-sheet-closing {
		transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
	}

	/* --- header --- */
	.post .post-comments.ize-sheet .ize-sheet-head {
		display: flex;
		align-items: center;
		gap: 4px;
		flex: 0 0 auto;
		height: 52px;
		padding: 0 6px;
		border-bottom: 1px solid var(--ize-hair);
		background: var(--ize-surface);
	}

	.post .post-comments.ize-sheet .ize-sheet-back {
		width: 40px;
		height: 40px;
		min-width: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--ize-ink);
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}
	.post .post-comments.ize-sheet .ize-sheet-back:active { background: rgba(0, 0, 0, .06); }
	.post .post-comments.ize-sheet .ize-sheet-back svg { width: 22px; height: 22px; }

	.post .post-comments.ize-sheet .ize-sheet-title {
		font-size: 16px;
		font-weight: 600;
		color: var(--ize-ink);
		letter-spacing: -.2px;
	}
	.post .post-comments.ize-sheet .ize-sheet-count {
		font-size: 13px;
		font-weight: 600;
		color: var(--ize-ink-2);
		font-variant-numeric: tabular-nums;
		margin-left: 2px;
	}
	.post .post-comments.ize-sheet .ize-sheet-count:empty,
	.post .post-comments.ize-sheet .ize-sheet-count[data-empty="1"] { display: none; }

	/* --- scroll region ---
	   The comment list is the only thing that scrolls; the header and composer
	   stay put. min-height:0 is required or a flex child refuses to shrink and
	   the list pushes the composer off-screen instead of scrolling. */
	.post .post-comments.ize-sheet .comments-list {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;   /* don't scroll the feed behind the sheet */
		padding: 12px 14px 4px;
		margin: 0;
	}

	.post .post-comments.ize-sheet .view-more-wrapper,
	.post .post-comments.ize-sheet .tag_post_load_more_comms { flex: 0 0 auto; }
	.post .post-comments.ize-sheet .view-more-wrapper { padding: 8px 14px 0; }

	/* --- composer pinned to the bottom --- */
	.post .post-comments.ize-sheet .ize-sheet-compose {
		flex: 0 0 auto;
		background: var(--ize-surface);
		border-top: 1px solid var(--ize-hair);
		padding: 8px 10px;
		/* Clear of the home indicator / gesture bar on iOS. */
		padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	}

	.post .post-comments.ize-sheet .comments_disabled {
		flex: 0 0 auto;
		padding: 14px;
		text-align: center;
	}

	/* --- empty state ---
	   JS adds this when the list has no comments, matching the lightbox's
	   .lightbox-no-comments treatment. */
	.post .post-comments.ize-sheet .ize-sheet-empty {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		color: var(--ize-ink-2);
		font-size: 15px;
		padding: 24px;
	}
	.post .post-comments.ize-sheet .ize-sheet-empty svg { width: 56px; height: 56px; opacity: .55; }

	/* Scroll lock — same as a modal: just stop the page scrolling, never move it.
	   No position:fixed, no scroll save/restore. The feed keeps its exact offset
	   the whole time the sheet is up, so closing lands you precisely where you
	   were (what the share button does). The sheet covers the screen, so the
	   locked feed behind it is neither visible nor reachable. */
	html.ize-sheet-lock,
	body.ize-sheet-lock { overflow: hidden; }

	/* style.css pins the story composer with position:sticky; inside a fixed
	   flex sheet that fights the layout. */
	.post .post-comments.ize-sheet .tag_sticky_coms {
		position: static;
		margin: 0;
		padding: 0;
		border-radius: 0;
	}
}

/* ---------- Dark ----------------------------------------------------------- */
@media (max-width: 800px) {
	html:has(#night-mode-css) .post .post-comments.ize-sheetable.ize-sheet,
	html.ize-dark .post .post-comments.ize-sheetable.ize-sheet {
		--ize-surface: #212121;
		--ize-ink:     #e4e6eb;
		--ize-ink-2:   #b0b3b8;
		--ize-hair:    rgba(255, 255, 255, .12);
	}
	html:has(#night-mode-css) .post .post-comments.ize-sheet .ize-sheet-back:active,
	html.ize-dark .post .post-comments.ize-sheet .ize-sheet-back:active {
		background: rgba(255, 255, 255, .1);
	}
}

/* ---------- Motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.post .post-comments.ize-sheetable.ize-sheet,
	.post .post-comments.ize-sheetable.ize-sheet.ize-sheet-open,
	.post .post-comments.ize-sheetable.ize-sheet.ize-sheet-closing {
		transition: none;
	}
}