/* Toàn bộ trang chiếm toàn bộ chiều cao */
html, body, .wrapper, .main {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Ngăn scroll toàn trang */
    scrollbar-width: none; /* Firefox */
}

/* Ẩn thanh cuộn mặc định trên mọi trình duyệt */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.wrapper::-webkit-scrollbar,
.main::-webkit-scrollbar,
main.content::-webkit-scrollbar,
.scrollable-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Phần content chính */
main.content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* ĐỪNG để overflow: hidden ở đây nữa */
}

/* Khu vực nội dung có thể cuộn */
.scrollable-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    margin-bottom: 100px; /* Dưới để tránh bị che bởi textarea */
    height: calc(100vh - 200px); /* Có thể điều chỉnh phù hợp layout */
}

/* Nội dung chat */
#ShowChatContent {
    padding: 10px;
    /* Không cần max-height hay scroll ở đây */
}

/* Ô textarea cố định ở dưới */
.chat-input-area {
    position: absolute;
    bottom: 20px;
    left: 15%;
    right: 15%;
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #ccc;
    z-index: 1000;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    margin-bottom: 40px;
}

/* Responsive cho mobile */
@media (max-width: 767.98px) {
    .chat-input-area {
        left: 5%;
        right: 5%;
    }
}