import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import test from "node:test";

const css = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");

test("mobile rectification welcome content starts at the scroll origin", () => {
  const centeredGrid = css.indexOf(".conversation.is-empty { display: grid");
  const mobileOverride = css.indexOf(".conversation.is-empty {\n    display: block", centeredGrid);

  assert.ok(centeredGrid >= 0, "desktop empty state should remain centered");
  assert.ok(mobileOverride > centeredGrid, "mobile display:block must be declared after the desktop grid rule");
  assert.match(css, /\.conversation\s*\{[^}]*min-height:\s*0[^}]*overflow-y:\s*auto/);
  assert.match(css.slice(mobileOverride), /\.conversation\.is-empty\s*\{[^}]*-webkit-overflow-scrolling:\s*touch/);
  // BUG-698: this used to assert the duplicate-declaration fallback
  // `height: 100vh; height: 100dvh;`. Lightning CSS collapses duplicate declarations of
  // one property and keeps only the last, so that form never reached the browser - the
  // guard was passing on source text that did not ship. The shipping form is a vh base
  // plus an @supports upgrade, and both halves are asserted here.
  assert.match(css, /\.group\\\/sidebar-provider\[data-viewport\]\s*\{[^}]*height:\s*100vh;/);
  assert.match(css, /@supports \(height: 1dvh\)[\s\S]*?\.group\\\/sidebar-provider\[data-viewport\] \{ height: 100dvh; \}/);
});