/**
 * 2meet LIFF — base CSS.
 *
 * Provides:
 *   - --tmeelic-* CSS variables (safe-area, vh fallback, LINE green)
 *   - body class hooks for LIFF environments (in_client / liff_browser / external)
 *   - admin bar suppression in in_client mode
 *
 * This file is enqueued for ALL pages (not just LIFF environments) so external
 * browsers can also consume the CSS variables in shared components.
 *
 * Naming: --tmeelic-* and tmeelic-* per family convention.
 */

:root {
	/* Viewport: replaced by tmeelic-vh-fix.js with the real value. */
	--tmeelic-vh: 1vh;

	/* Safe-area insets (notched devices in LIFF in_client mode). */
	--tmeelic-safe-area-top: env( safe-area-inset-top, 0px );
	--tmeelic-safe-area-right: env( safe-area-inset-right, 0px );
	--tmeelic-safe-area-bottom: env( safe-area-inset-bottom, 0px );
	--tmeelic-safe-area-left: env( safe-area-inset-left, 0px );

	/* LINE brand tokens (used by share buttons, OA add-friend, etc.). */
	--tmeelic-line-green: #06C755;
	--tmeelic-line-green-dark: #04A148;
	--tmeelic-line-text-on-green: #FFFFFF;
}

/* ─── In-client (LINE App WebView) ───────────────────────────────────────── */
/* Hide the WordPress admin bar — LIFF renders its own header bar. */
body.tmeelic-in-client #wpadminbar {
	display: none !important;
}
body.tmeelic-in-client html {
	margin-top: 0 !important;
}

/* Helper: full-height containers in LIFF can use this class to get the real
   viewport height (100vh is unreliable in LINE WebView). */
body.tmeelic-in-client .tmeelic-full-height,
body.tmeelic-liff-browser .tmeelic-full-height {
	min-height: calc( var( --tmeelic-vh, 1vh ) * 100 );
}

/* Account for safe-area at the top (notched devices in fullscreen LIFF). */
body.tmeelic-in-client .tmeelic-safe-top {
	padding-top: var( --tmeelic-safe-area-top );
}
body.tmeelic-in-client .tmeelic-safe-bottom {
	padding-bottom: var( --tmeelic-safe-area-bottom );
}

/* ─── Loaded state (after liff.init() resolves) ──────────────────────────── */
/* Components can use .tmeelic-loaded to fade in once the SDK is ready. */
body:not( .tmeelic-loaded ) .tmeelic-needs-sdk {
	visibility: hidden;
}
body.tmeelic-loaded .tmeelic-needs-sdk {
	visibility: visible;
}

/* ─── External (no-LIFF fallback) ────────────────────────────────────────── */
/* Components that ONLY make sense inside LIFF can hide themselves in external. */
body.tmeelic-external .tmeelic-liff-only {
	display: none !important;
}