@import './fonts.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
    }
    
    /* Fix iOS viewport height changes when keyboard appears/disappears */
    html, body {
        height: 100%;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for better mobile support */
        overflow: hidden; /* Disable all scrolling on html and body */
        position: fixed; /* Force fixed positioning to prevent viewport changes */
        width: 100%;
        top: 0;
        left: 0;
    }
    
    #app {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }
}

@layer components {
	input:checked ~ .dot {
		transform: translateX(100%);
		background-color: #FFF !important;
	}

	.dialog-overlay {
		@apply z-[100] fixed inset-0 bg-black/50 flex justify-center items-center p-6;
	}

	.dialog {
		@apply bg-white px-4 py-6 rounded-lg w-full max-w-lg max-h-[calc(100vh-3rem)] overflow-y-auto;
	}

	/* Markdown content styling to restore list elements */
	.markdown-content ul {
		@apply list-disc list-inside ml-4;
	}

	.markdown-content ol {
		@apply list-decimal list-inside ml-4;
	}

	.markdown-content li {
		@apply mb-1;
	}

	.markdown-content ul ul,
	.markdown-content ol ol,
	.markdown-content ul ol,
	.markdown-content ol ul {
		@apply ml-4 mt-1;
	}
}