/* FRONT END CSS */
#wcq-popup { position: fixed; inset: 0; z-index: 9999; }
.wcq-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); cursor: pointer; }
.wcq-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; z-index: 9999; width: 800px; max-width: 95%; border-radius: 10px; height: 100%; max-height: 80vh; display: flex; flex-direction: column; justify-content: space-between; }
.wcq-header { padding: 20px;}
.wcq-messages { overflow-y: scroll; padding: 20px; height: 100%; background: #54a3ab; }
.bot { background: #eef; padding: 10px; border-radius: 10px; margin-bottom: 10px; width: 65%; float: left; }
.bot ul { margin: 10px 0; padding-left: 15px; }
.user { background: #d1f7d1; padding: 10px; border-radius: 10px; text-align: right; margin-bottom: 10px; width: 65%; float: right; }
.wcq-box label { display: block; margin: 5px 0; }
.wcq-box select, .wcq-box input[type="text"] { width: 100%; padding: 8px; margin-top: 10px; }
#wcq-progress-wrap { width: 100%; height: 8px; background: #e5f3ff; border-radius: 10px; overflow: hidden; }
#wcq-progress-bar { width: 0%; height: 100%; background: #0073aa; transition: width 0.3s ease; }
.wcq-footer { padding: 20px; text-align: center; }
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--multiple { min-height: 40px; border: 1px solid #8c8f94; border-radius: 4px; }
@media (max-width: 767px){
    .bot{ width: 70%;}
    .user{ width: 70%;}
}