<style>
	html{
		scroll-behavior: smooth;
	}
    body {
        font-family: "Segoe UI", Roboto, sans-serif;
        
        margin: 0;
        padding: 40px 0;
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    h1 {
        text-align: center;
        color: #333;
        margin-bottom: 20px;
    }
    .intro {
        font-size: 15px;
        color: #444;
        background-color: #fafafa;
        border-left: 4px solid #bbb;
        padding: 15px 20px;
        border-radius: 6px;
        margin-bottom: 30px;
        line-height: 1.5;
    }
    .message {
        display: flex;
        margin-bottom: 15px;
        background-color:transparent;
    }
    .me {
        justify-content: flex-end;
    }
    .bot {
        justify-content: flex-start;
    }
    .bubble {
        max-width: 70%;
        padding: 12px 16px;
        border-radius: 12px;
        line-height: 1.4;
        font-size: 15px;
    }
    .me .bubble {
        background-color: #e3eeff;
        color: #222;
        border-top-right-radius: 0;
    }
    .bot .bubble {
        background-color: #e6e6e6;
        color: #222;
        border-top-left-radius: 0;
    }
    footer {
        text-align: center;
        font-size: 13px;
        color: #999;
        margin-top: 30px;
    }
</style>
