/* Đảm bảo textarea description và ô title cùng chiều ngang, cho phép resize dọc */
.form-group textarea,
.form-group input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}
.form-group textarea {
    min-width: 0;
    max-width: 100%;
    resize: vertical;
}
/* Tiêu đề mục trong Anti-raid Server màu đen */
/* SỬA: Thay thế quy tắc cũ cho h4 trong setting-group */
.settings-card .card-body .setting-group h4 {
    color: #000 !important;
}

/* SỬA: Thay thế quy tắc cũ cho input-half-width */
.input-half-width {
    width: 50% !important;
    min-width: 60px;
    max-width: 120px;
    display: inline-block;
}
body, html {
    font-family: 'Quicksand', 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fcd6ef;
    color: #5b5b5b;
    display: flex;
    height: 100%;
}

/* --- Thanh Menu Dọc (Sidebar) --- */
.sidebar {
    width: 80px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f74882 100%);
    box-shadow: 2px 0 15px rgba(221, 160, 221, 0.3);
    transition: width 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
}

.sidebar:hover {
    width: 250px;
}

/* Header của Sidebar */
.sidebar-header {
    padding: 15px 0;
    text-align: center;
    cursor: pointer;
}

.bot-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s;
}

.bot-icon:hover {
    transform: rotate(360deg) scale(1.1);
}

/* Thông tin người dùng */
.user-profile {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin-top: 10px;
    min-width: 220px;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    border: 3px solid #ffc0cb;
}

.user-details {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    white-space: nowrap;
}

.sidebar:hover .user-details {
    opacity: 1;
}

.user-details .username {
    font-weight: bold;
    font-size: 1.1em;
    color: #d175b6;
}

.user-details .logout-btn {
    background: none;
    border: none;
    color: #f08080;
    text-align: left;
    padding: 5px 0;
    cursor: pointer;
    font-size: 0.9em;
}

.user-details .logout-btn:hover {
    text-decoration: underline;
}

/* Giao diện danh sách server MỚI */
.server-list-container {
    border-top: 1px solid #f7cadc;
    border-bottom: 1px solid #fdeef4;
    padding: 15px 0;
    flex-shrink: 0;
}

.server-list-header {
    padding: 0 15px 10px 25px;
    font-size: 0.8em;
    font-weight: bold;
    color: #b19cd9;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

.sidebar:hover .server-list-header {
    opacity: 1;
}

.server-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px; /* Giới hạn chiều cao và cho phép cuộn */
    overflow-y: auto;
}

.server-item {
    display: flex;
    align-items: center;
    padding: 8px 25px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.server-item:hover {
    background-color: #fdeef4;
}

.server-item.active {
    background-color: #fdeef4;
    border-right: 4px solid #e8609f;
}

.server-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 20px;
    background-color: #e0e0e0;
    flex-shrink: 0; /* Ngăn icon bị co lại */
}

.server-name {
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s;
}

.sidebar:hover .server-name {
    opacity: 1;
}

/* Menu chính */
.main-menu {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    flex-grow: 1;
    width: 100%;
}

.main-menu li a {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    color: #7b6d8d;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    white-space: nowrap;
    cursor: pointer;
}

.main-menu li a .menu-icon {
    font-size: 1.5em;
    margin-right: 20px;
}

.main-menu li a .menu-text {
    opacity: 0;
    transition: opacity 0.2s;
}

.sidebar:hover .main-menu li a .menu-text {
    opacity: 1;
}

.main-menu li a.active, .main-menu li a:hover {
    background-color: #fdeef4;
    color: #e8609f;
}

/* Nội dung chính */
.main-content {
    flex-grow: 1;
    padding: 30px;
    margin-left: 80px;
    transition: margin-left 0.3s ease-in-out;
}

.sidebar:hover ~ .main-content {
    margin-left: 250px;
}

.page-header {
    font-size: 2em;
    font-weight: bold;
    color: #d175b6;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #fdeef4;
}

.settings-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(221, 160, 221, 0.2);
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 25px;
}
.form-group label {
    display: block;
    font-weight: 600;
    color: #7b6d8d;
    margin-bottom: 8px;
}
.form-group input[type="text"], .form-group select {
    width: 100%;
    padding: 12px;
    border: 2px solid #fdeef4;
    border-radius: 8px;
    background-color: #fdf6f7;
    transition: all 0.3s;
    box-sizing: border-box;
}
.form-group input[type="text"]:focus, .form-group select:focus {
    outline: none;
    border-color: #ffc0cb;
    background-color: #fff;
}
.cta-button {
    background: linear-gradient(45deg, #ff85d8, #fface4);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 133, 216, 0.4);
}
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 133, 216, 0.6);
}

#response-message {
    margin-top: 20px;
    font-weight: bold;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}
.mouse-heart-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* RẤT QUAN TRỌNG: Cho phép click chuột đi qua */
    z-index: 9999; /* Đảm bảo nó luôn ở trên cùng */
    overflow: hidden; /* Ngăn trái tim tràn ra ngoài viewport */
}

.mouse-flying-heart {
    position: absolute;
    width: 25px; /* Kích thước trái tim (điều chỉnh nếu muốn to/nhỏ hơn) */
    height: 25px;
    background-image: url('/image/Sakura.png'); /* LINK HÌNH ẢNH TRÁI TIM CỦA BẠN */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0; /* Bắt đầu ẩn */
    animation: mouseFlyHeart 1.5s ease-out forwards; /* Tên animation, thời gian, kiểu, giữ trạng thái cuối */
    transform-origin: center; /* Đảm bảo xoay quanh tâm */
}

@keyframes mouseFlyHeart {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6) rotate(0deg); /* Bắt đầu nhỏ và xoay 0 */
    }
    10% {
        opacity: 1; /* Hiện rõ nhanh */
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--dx, 0px)),
            calc(-50% + var(--dy, 0px))
        )
        scale(1.2) /* To dần khi bay */
        rotate(var(--rotate, 0deg)); /* Xoay ngẫu nhiên */
    }
}
.wl-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: none; /* Mặc định ẩn */
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.wl-modal-content {
    background: #fff0f5; /* Màu nền hồng nhạt cute */
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 5px 25px rgba(221, 160, 221, 0.5);
    width: 90%;
    max-width: 600px;
    position: relative;
    border: 2px solid #ffc0cb;
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.wl-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #fdeef4;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.wl-modal-header h2 {
    margin: 0;
    color: #d175b6;
    font-size: 1.5em;
}

.wl-modal-close {
    font-size: 2em;
    color: #d175b6;
    cursor: pointer;
    transition: transform 0.2s;
}
.wl-modal-close:hover {
    transform: rotate(90deg);
}

.wl-modal-body .form-group {
    margin-bottom: 15px;
}

/* Toggle Switch */
.toggle-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #e8609f;
}
input:checked + .slider:before {
    transform: translateX(26px);
}
.toggle-label {
    margin-left: 10px;
    font-weight: 600;
    color: #7b6d8d;
}

/* Embed Editor */
.embed-editor {
    border: 2px dashed #ffc0cb;
    border-radius: 10px;
    padding: 15px;
}
.embed-editor input, .embed-editor textarea {
    background-color: #fff !important;
    border-color: #fdeef4 !important;
}
.embed-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.grid-full {
    grid-column: 1 / -1;
}
.color-picker-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.color-picker-container input[type="color"] {
    width: 50px;
    height: 40px;
    padding: 0;
    border: none;
    cursor: pointer;
}

.wl-modal-footer {
    margin-top: 25px;
    text-align: right;
}
.settings-grid {
    display: grid;
    /* Tạo một lưới cố định gồm 4 cột bằng nhau */
    grid-template-columns: repeat(4, 1fr);
    gap: 25px; /* Giữ nguyên khoảng cách giữa các thẻ */
}

.settings-card {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(221, 160, 221, 0.2);
    display: flex; /* Dùng flexbox để sắp xếp nội dung trong card */
    flex-direction: column; /* Sắp xếp theo chiều dọc */
    transition: transform 0.2s, box-shadow 0.2s;
}

.settings-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(221, 160, 221, 0.4);
}

/* Cho phép một thẻ chiếm toàn bộ chiều rộng nếu cần */
.settings-card.full-width {
    grid-column: 1 / -1;
    aspect-ratio: auto; /* Tắt chế độ vuông cho thẻ rộng */
}

.card-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #fdeef4;
}

.card-icon {
    font-size: 1.5em;
    color: #e8609f;
    margin-right: 15px;
    width: 30px;
    text-align: center;
}

.card-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #5b5b5b;
}

.card-body {
    padding: 20px;
    flex-grow: 1; /* Giúp phần body chiếm hết không gian còn lại */
    overflow-y: auto; /* Tự động cuộn nếu nội dung quá dài */
}

.card-body p {
    margin-top: 0;
}

.card-footer {
    padding: 20px;
    border-top: 1px solid #fdeef4;
    text-align: right;
}

/* Nút lưu mới trong thẻ */
.save-card-btn {
    background: #d175b6;
    color: white;
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.save-card-btn:hover {
    background: #e8609f;
}
/* CSS MỚI CHO THẺ WELCOME/LEAVE */
.wl-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.wl-controls select {
    flex-grow: 1; /* Cho phép select chiếm không gian thừa */
}

.wl-controls button {
    flex-shrink: 0; /* Ngăn nút bị co lại */
}
@media (max-width: 1200px) {
    .settings-grid {
        /* Hiển thị 2 cột trên màn hình tablet */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .settings-grid {
        /* Hiển thị 1 cột duy nhất trên màn hình điện thoại */
        grid-template-columns: 1fr;
    }
}

.emoji-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.emoji-input-wrapper .form-control {
    padding-right: 40px; /* Tạo không gian cho icon */
}

.emoji-picker-icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.emoji-picker-icon:hover {
    opacity: 1;
}

/* --- Styling cho Thẻ Anti-Raid --- */

/* Lưới cho các ô nhập liệu */
.settings-card .card-header .header-content .card-icon {
    margin-right: 10px;
    color: #fdeef4; /* Màu icon */
    font-size: 1.2em;
}

.setting-group {
    margin-bottom: 20px;
}

/* MỚI: Tiêu đề nhóm cài đặt con với toggle */
.setting-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd; /* Gạch chân */
    padding-bottom: 8px;
    margin-bottom: 15px;
}

/* SỬA: Loại bỏ margin mặc định của h4 và đảm bảo màu đen */
.setting-group-header h4 {
    margin: 0;
    color: #000 !important;
}


/* SỬA: Lưới 2 cột cho các cặp cài đặt, thay thế quy tắc cũ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

/* SỬA: Lưới 1 cột cho các cài đặt đơn, thay thế quy tắc cũ */
.form-grid-single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

/* Стилізація input */
.form-control {
    padding: 8px 12px;
    border: 1px solid #ddd; /* Viền nhẹ nhàng */
    border-radius: 8px; /* Bo tròn nhẹ */
    background-color: #f9f9f9; /* Nền nhạt */
    color: #333;
    font-size: 0.9em;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    border-color: #a8dadc; /* Màu viền khi focus */
    outline: none;
    box-shadow: 0 0 5px rgba(168, 218, 220, 0.5); /* Hiệu ứng bóng nhẹ khi focus */
}

/* Стилізація select */
.form-control select {
    /* Loại bỏ kiểu mặc định của select */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg fill="%23343a40" viewBox="0 0 4 5"><path d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>'); /* Thêm icon mũi tên tùy chỉnh */
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 50%;
    padding-right: 20px; /* Để có khoảng trống cho icon */
}

/* SỬA: Hiệu ứng mở rộng/thu gọn mềm mại, thay thế quy tắc cũ */
.collapsible-content {
    max-height: 0;
    overflow: hidden; /* Giữ hidden khi không expanded */
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 0;
}

.collapsible-content.expanded {
    max-height: 1000px; /* Tăng giá trị này lên một số đủ lớn để chứa tất cả nội dung. */
                         /* Bạn có thể thử 1000px, 1500px, hoặc giá trị lớn hơn tùy theo nội dung thực tế. */
    overflow-y: auto;    /* THÊM: Cho phép cuộn dọc khi nội dung vượt quá max-height */
    opacity: 1;
}

/* MỚI: CSS cho công tắc nhỏ hơn */
.toggle-switch.small-switch {
    width: 44px;
    height: 24px;
}

/* MỚI: CSS cho công tắc nhỏ hơn */
.toggle-switch.small-switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* MỚI: CSS cho công tắc nhỏ hơn */
.toggle-switch.small-switch .slider:before {
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
}

/* SỬA: Điều chỉnh lại margin cho toggle-label */
.toggle-label {
    margin-right: 10px;
    font-weight: 600;
}

/* MỚI: Điều chỉnh lại khoảng cách cho toggle-container trong setting-group-header */
.setting-group-header .toggle-switch {
    margin-left: 10px; /* Tạo khoảng cách giữa tiêu đề và công tắc */
}

/* MỚI: Đảm bảo rằng nhãn của toggle-switch bên trong setting-group-header không bị đẩy ra ngoài */
.setting-group-header .toggle-label {
    margin-right: 0; /* Reset margin mặc định */
    margin-left: auto; /* Đẩy label ra xa nhất có thể để align với toggle */
}

/* Danh sách các AR đã tạo */
#ar-list-container .setting-group {
    border: 1px solid #fdeef4;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
}

#ar-list-container .setting-group h4 {
    color: #5b5b5b !important;
}

/* Modal AR */
#ar-modal .form-control {
    background-color: #fff !important;
    border-color: #fdeef4 !important;
}

/* Vùng nhập từ khóa */
#ar-triggers-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 5px 10px;
}

#ar-trigger-input {
    border: none;
    outline: none;
    flex-grow: 1;
    background: transparent;
    padding: 5px 0;
    font-size: 1em;
    font-family: 'Quicksand', sans-serif;
}

/* Thẻ tag từ khóa */
.trigger-tag {
    background-color: #e8609f;
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: 500;
}

.trigger-tag .remove-tag-btn {
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1;
}

/* Vùng chứa các khối response */
#ar-responses-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
}

/* Một khối response đơn */
.ar-response-block {
    border: 2px dashed #ffc0cb;
    border-radius: 10px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.5);
}

.ar-response-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap; /* Cho phép các item xuống hàng trên màn hình nhỏ */
    gap: 15px;
}

/* Nút thêm response mới hình tròn */
.ar-add-response-btn {
    border-radius: 50% !important;
    width: 45px;
    height: 45px;
    padding: 0 !important;
    font-size: 2em !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* (Phần CSS cũ cho AR bạn đã thêm) */
#ar-list-container .setting-group h4 { color: #5b5b5b !important; }
#ar-modal .form-control { background-color: #fff !important; border-color: #fdeef4 !important; }
#ar-triggers-container { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 5px 10px; }
#ar-trigger-input { border: none; outline: none; flex-grow: 1; background: transparent; padding: 5px 0; font-size: 1em; font-family: 'Quicksand', sans-serif; }
.trigger-tag { background-color: #e8609f; color: white; padding: 4px 10px; border-radius: 15px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9em; font-weight: 500; }
.trigger-tag .remove-tag-btn { cursor: pointer; font-weight: bold; font-size: 1.2em; line-height: 1; }
#ar-responses-wrapper { display: flex; flex-direction: column; gap: 20px; margin-top: 15px; }
.ar-response-block { border: 2px dashed #ffc0cb; border-radius: 10px; padding: 15px; background-color: rgba(255, 255, 255, 0.5); }
.ar-add-response-btn { border-radius: 50% !important; width: 45px; height: 45px; padding: 0 !important; font-size: 2em !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ar-delete-btn { background-color: #f08080 !important; }

/* --- BẮT ĐẦU PHẦN CSS MỚI THEO YÊU CẦU --- */

/* 1. CSS cho Modal chiếm 90% chiều cao và cuộn */
#ar-modal .wl-modal-content {
    height: 90vh; /* Chiếm 90% chiều cao màn hình */
    display: flex;
    flex-direction: column;
}

#ar-modal .wl-modal-body {
    flex-grow: 1; /* Cho phép phần body co giãn */
    overflow-y: auto; /* Chỉ cho phép phần body cuộn */
    padding-right: 15px; /* Thêm khoảng trống cho thanh cuộn */
}

/* Tùy chỉnh thanh cuộn cho đẹp */
#ar-modal .wl-modal-body::-webkit-scrollbar {
    width: 8px;
}
#ar-modal .wl-modal-body::-webkit-scrollbar-track {
    background: #fdeef4;
    border-radius: 10px;
}
#ar-modal .wl-modal-body::-webkit-scrollbar-thumb {
    background-color: #e8609f;
    border-radius: 10px;
}

/* 2. CSS cho danh sách AR trong card có thể cuộn */
#ar-list-container {
    max-height: 220px; /* Giới hạn chiều cao, tương đương khoảng 3-4 mục */
    overflow-y: auto; /* Hiện thanh cuộn khi nội dung vượt quá */
    padding: 5px;
    border: 1px solid #fdeef4;
    border-radius: 8px;
}

/* Tùy chỉnh thanh cuộn */
#ar-list-container::-webkit-scrollbar {
    width: 6px;
}
#ar-list-container::-webkit-scrollbar-track {
    background: transparent;
}
#ar-list-container::-webkit-scrollbar-thumb {
    background-color: #ffc0cb;
    border-radius: 10px;
}

/* 3. CSS cho một mục trong danh sách AR (theo hình ảnh) */
.ar-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.ar-list-item h4 {
    margin: 0;
    font-weight: 600;
}
.ar-list-buttons {
    display: flex;
    gap: 8px;
}

#raidshield-modal .wl-modal-content {
    height: 90vh; /* Chiếm 90% chiều cao màn hình */
    max-width: 750px; /* Có thể điều chỉnh độ rộng nếu muốn */
    display: flex;
    flex-direction: column;
}

#raidshield-modal .wl-modal-body {
    flex-grow: 1; /* Cho phép phần body co giãn */
    overflow-y: auto; /* Chỉ cho phép phần body cuộn */
    padding-right: 15px; /* Thêm khoảng trống cho thanh cuộn */
}

/* Tùy chỉnh thanh cuộn cho đẹp (tùy chọn) */
#raidshield-modal .wl-modal-body::-webkit-scrollbar {
    width: 8px;
}
#raidshield-modal .wl-modal-body::-webkit-scrollbar-track {
    background: #fdeef4;
    border-radius: 10px;
}
#raidshield-modal .wl-modal-body::-webkit-scrollbar-thumb {
    background-color: #e8609f;
    border-radius: 10px;
}

/* Đảm bảo các nhóm setting bên trong modal luôn mở rộng */
#raidshield-modal .collapsible-content {
    max-height: 1000px !important; 
    opacity: 1 !important;
    overflow: visible !important;
}

/* === CSS MỚI CHO TÍNH NĂNG CỦA BẠN === */

/* Container cho lựa chọn Tuần tự/Ngẫu nhiên */
.ar-responses-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.ar-responses-options label {
    margin-bottom: 0; /* Ghi đè margin mặc định của label */
    font-weight: 600;
    color: #7b6d8d;
}

/* Container cho các nút điều khiển trong header của từng response */
.ar-response-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}
.ar-response-controls .toggle-label {
    font-size: 0.9em;
}

/* Container cho ô nhập % */
.ar-random-chance-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ar-random-chance-container input {
    width: 60px;
    padding: 5px 8px;
}
.ar-random-chance-container span {
    font-weight: bold;
    color: #5b5b5b;
}

/* Style cho kéo thả */
.ar-response-block.draggable {
    cursor: grab;
}
.ar-response-block.dragging {
    opacity: 0.5;
    border-style: solid;
}

/* === CSS CHO BỘ LỌC LINK === */
.link-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.link-input-group .form-control {
    flex-grow: 1; /* Cho phép ô nhập tự dãn ra */
}

.remove-btn {
    background: #f08080; /* Màu đỏ nhạt */
    color: white;
    border: none;
    border-radius: 50%; /* Bo tròn */
    width: 25px;
    height: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px; /* Tăng kích thước dấu 'x' */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Ngăn nút bị co lại */
}

.remove-btn:hover {
    background: #e55353; /* Đổi màu khi di chuột vào */
}

/* --- Modal Tạo Server Tự Động --- */
.ai-chat-window {
    flex-grow: 1;
    /* XÓA: Bỏ overflow ở đây */
    /* overflow-y: auto; */
    background-color: #fdf6f7;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #fdeef4;
    scroll-behavior: smooth;
    /* THÊM: Biến thành flex container để con nó co giãn */
    display: flex;
    flex-direction: column;
}

.ai-placeholder {
    color: #aaa;
    text-align: center;
    padding: 20% 10px;
    font-style: italic;
}

.ai-prompt-area {
    display: flex;
    gap: 10px;
}

.ai-prompt-area textarea {
    flex-grow: 1;
    resize: none;
    height: 50px;
    padding: 12px;
    border: 2px solid #fdeef4;
    border-radius: 8px;
    background-color: #fff;
    font-family: 'Quicksand', sans-serif;
}

.ai-prompt-area button {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 12px !important;
    padding: 0 !important;
}

/* --- Giao diện kết quả từ AI --- */
.ai-structure-item {
    margin-bottom: 8px;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    position: relative; /* Thêm position relative để định vị nút xóa */
}
.ai-structure-item i {
    flex-shrink: 0; /* Ngăn icon bị co lại */
}

.ai-category-group {
    margin-bottom: 15px;
}

.ai-editable-name {
    flex-grow: 1; /* Cho phép ô nhập liệu co giãn */
    min-width: 0; /* Ngăn ô nhập liệu tràn ra ngoài */
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 1em;
    font-family: 'Quicksand', sans-serif;
    transition: all 0.2s;
    background-color: transparent; /* Thêm nền trong suốt */
}

.ai-editable-name:hover {
    background-color: #fdeef4;
}

.ai-editable-name:focus {
    outline: none;
    border-color: #e8609f;
    background-color: #fff;
}

.ai-category .ai-editable-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #5b5b5b;
    text-transform: uppercase;
}
.ai-category .fa-folder {
    margin-right: 8px;
    color: #ffc0cb;
}

.ai-channel {
    margin-left: 25px;
}
.ai-channel .ai-editable-name {
    font-weight: 500;
}
.ai-channel .fa-hashtag {
    margin-right: 8px;
    color: #c0c0c0;
}

#server-creator-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --- START: CSS MỚI CHO NÚT XÓA VÀ HOVER --- */
.delete-item-btn {
    background: transparent;
    border: none;
    color: #f08080;
    cursor: pointer;
    font-size: 1.1em;
    padding: 5px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* Đẩy nút sang phải */
    opacity: 0; /* Mặc định ẩn */
    transition: opacity 0.2s ease-in-out, background-color 0.2s;
}

.ai-structure-item:hover .delete-item-btn {
    opacity: 1; /* Hiện khi di chuột vào cả dòng */
}

.delete-item-btn:hover {
    background-color: #fdeef4;
}
/* --- END: CSS MỚI CHO NÚT XÓA VÀ HOVER --- */

/* BẮT ĐẦU CSS CHO BỘ CHỌN KÝ TỰ */
#separator-picker-container {
    position: absolute;
    bottom: 75px; /* Đặt phía trên khu vực nhập prompt */
    right: 20px;
    z-index: 10;
}

#separator-picker-btn {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    border: 1px solid #fdeef4;
    background-color: #fff;
    color: #5b5b5b;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    margin-bottom: 23px;
}
#separator-picker-btn:hover {
    background-color: #fdeef4;
}

#separator-picker-menu {
    position: absolute;
    bottom: calc(100% + 5px); /* Hiện menu ngay trên nút bấm */
    right: 0;
    background-color: #fff;
    border: 1px solid #fdeef4;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 5px;
    display: none; /* Sửa: Mặc định ẩn */
    flex-direction: column;
    gap: 2px;
}

#separator-picker-menu.active {
    display: flex; /* Hiện menu khi có class active */
}

.separator-option {
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.2s;
    text-align: center;
}
.separator-option:hover {
    background-color: #fdeef4;
}

/* === BẮT ĐẦU KHỐI CSS ĐƯỢC SỬA LẠI HOÀN TOÀN === */

/* Giao diện chat */
#ai-chat-history-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

.chat-turn {
    display: none;
    flex-grow: 1;
    /* THÊM: Chính khối này sẽ cuộn */
    overflow-y: auto;
    padding-right: 5px; /* Khoảng trống nhỏ cho thanh cuộn */
}

.chat-turn.active {
    /* Sửa lại: chỉ cần display: block là đủ */
    display: block;
}

/* Tùy chỉnh thanh cuộn cho CHÍNH KHỐI CHAT */
.chat-turn::-webkit-scrollbar {
    width: 8px;
}
.chat-turn::-webkit-scrollbar-track {
    background: transparent;
}
.chat-turn::-webkit-scrollbar-thumb {
    background-color: #e8609f;
    border-radius: 10px;
}

.user-prompt-bubble {
    background-color: #e8609f;
    color: white;
    padding: 10px 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    max-width: 100%;
    font-weight: 500;
    /* THÊM: Các thuộc tính để ghim bubble lên đầu */
    position: sticky;
    top: 0; /* Ghim vào đỉnh của khối .chat-turn */
    z-index: 10; /* Đảm bảo nó nổi lên trên nội dung khác */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.ai-response-container {
    /* XÓA: Bỏ hết các thuộc tính flex và overflow */
    padding-top: 10px;
}

/* === KẾT THÚC KHỐI CSS ĐƯỢC SỬA LẠI HOÀN TOÀN === */

/* Phân trang */
#server-creator-footer {
    display: flex;
    justify-content: space-between; /* Căn đều các phần tử */
    align-items: center;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5b5b5b;
    font-weight: 600;
}

.pagination-btn {
    background: #fdeef4;
    border: none;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}
.pagination-btn:hover:not(:disabled) {
    background: #f7cadc;
}
.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Context Menu */
#context-menu {
    position: absolute;
    z-index: 3000;
    background-color: #ffffff;
    border: 1px solid #fdeef4;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 5px;
    min-width: 180px;
    display: none; /* Mặc định ẩn */
}

.context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.95em;
    color: #5b5b5b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.context-menu-item:hover {
    background-color: #fdeef4;
    color: #e8609f;
}
.context-menu-item i {
    width: 16px;
    text-align: center;
}