#haspro-chatbot-container,#haspro-chatbot-container :not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(i){font-family:Poppins,sans-serif!important}
#haspro-chatbot-container{position:fixed;bottom:5%;right:20px;z-index:99999}
.haspro-user-form {
    display: none !important;
    visibility: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

.haspro-user-form h3 {
    margin: 0 0 15px;
    font-size: 16px;
    color: #333;
    text-align: center;
}

#haspro-user-info-form input {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

#haspro-user-info-form button {
    width: 100%;
    padding: 10px;
    background: #20a6ab;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

#haspro-user-info-form button:hover {
    background: #178e93;
}

.haspro-launcher{width:60px;height:60px;background-color:#ededed;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);cursor:pointer;border:1px solid #bfbfbf;display:flex;justify-content:center;align-items:center;transition:transform .2s ease-in-out}
.haspro-launcher:hover{transform:scale(1.1)}
.haspro-launcher img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:center}
.haspro-launcher .icon-close{display:none;font-size:28px;color:#0a0a0a;font-weight:700}
.haspro-welcome-box{
    position:absolute;
    bottom:80px;
    right:0;
    width:300px;
    background:#fff;
    border-radius:12px;
    box-shadow: 
        0 8px 30px rgba(14,45,95,0.15),
        0 2px 4px rgba(14,45,95,0.05);
    padding:16px;
    opacity:0;
    transform:translateY(20px);
    transition: all 0.3s cubic-bezier(0.15, 1.15, 0.6, 1);
    visibility:hidden;
    border: 1px solid rgba(17,84,184,0.1);
    background: 
        linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(246,251,255,0.5) 100%);
    backdrop-filter: blur(10px);
}
.haspro-welcome-header{
    display:flex;
    align-items:center;
    margin-bottom:12px;
    position: relative;
}
.haspro-welcome-header::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -16px;
    right: -16px;
    height: 60px;
    background: linear-gradient(135deg, #1154b8 0%, #3ea1ff 100%);
    border-radius: 12px 12px 0 0;
    z-index: 0;
}
.haspro-welcome-header img{
    width:40px;
    height:40px;
    border-radius:50%;
    margin-right:12px;
    position:absolute;
    top:-10px;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 2px 8px rgba(14,45,95,0.2);
    z-index: 1;
}
.haspro-welcome-header .welcome-text{
    margin-left:50px;
    margin-top:-5px;
    position: relative;
    z-index: 1;
}
.haspro-welcome-header .welcome-text h4{
    margin:0;
    font-size:15px;
    font-weight:500;
    color:#fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.haspro-welcome-box p.description{
    font-size:14px;
    color:#4a5568;
    margin-bottom:16px;
    line-height: 1.6;
    padding-top: 15px;
}
.haspro-action-links button,.haspro-extra-links a{
    display:block;
    width:100%;
    font-size:14px;
    font-weight:500;
    padding:10px 12px;
    margin-bottom:8px;
    border:1px solid rgba(17,84,184,0.15);
    color:#1154b8;
    background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(246,251,255,0.9));
    border-radius:6px;
    text-align:left;
    cursor:pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(14,45,95,0.05);
}
.haspro-action-links button:hover,.haspro-extra-links a:hover{
    color:#06306a;
    background: linear-gradient(to bottom, #f6fbff, #ffffff);
    border-color: rgba(17,84,184,0.25);
    box-shadow: 0 2px 6px rgba(14,45,95,0.1);
    transform: translateY(-1px);
}
.haspro-extra-links a{
    width:94%!important;
}
.haspro-contact-links{text-align:center;border:1px solid #d7d7d7;padding:12px;margin-bottom:10px}
.haspro-contact-links a{
    width:33px;height:33px;
    display:inline-block;
    margin:0 4px;
    text-decoration:none;
    background: linear-gradient(135deg, #1154b8 0%, #3ea1ff 100%);
    border-radius:50%;
    padding:5px;
    color:#fff;
    text-align:center;
    line-height:22px;
    transition:.3s;
    box-sizing:border-box;
    box-shadow: 0 2px 8px rgba(14,45,95,0.15);
}
.haspro-contact-links a i{color:#fff;font-size:16px}
.haspro-contact-links a:hover{
    background: linear-gradient(135deg, #06306a 0%, #1154b8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14,45,95,0.25);
}
.haspro-welcome-box.visible{opacity:1;transform:translateY(0);visibility:visible;bottom:30px;z-index:-1}
.haspro-welcome-box.visible .haspro-action-links{display:flex;flex-wrap:wrap;column-gap:10px;row-gap:5px}
.haspro-welcome-box.visible .haspro-action-links button{width:auto;font-size:14px;font-weight:500;padding:0;margin-bottom:3px;border:none}
.haspro-welcome-box.visible .haspro-action-links button:not(:last-child){padding-right:5px;border-right:1px solid #6a5858;border-radius:inherit}
.haspro-welcome-box.visible .haspro-action-links button{color:#30a2d9}
.haspro-chat-window{position:fixed;bottom:90px;right:20px;width:370px;height:70vh;max-height:600px;background:#fff;border-radius:10px;box-shadow:0 12px 50px rgba(8,40,80,.16);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:scale(.95);transition:opacity .3s,transform .3s;visibility:hidden}
.haspro-chat-window.open{opacity:1;transform:scale(1);visibility:visible}
.haspro-chat-header{
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%),
        linear-gradient(135deg, #06306a 0%, #1154b8 50%, #3ea1ff 100%);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    box-shadow: 
        0 4px 18px rgba(14,45,95,0.12),
        inset 0 1px 1px rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}
.haspro-chat-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 80%);
    animation: shine 3s infinite linear;
    pointer-events: none;
}
@keyframes shine {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.haspro-chat-header .chat-box-content{display:flex;justify-content:space-between;align-items:center;color:#fff}
.haspro-chat-header h3{font-size:18px;margin:0}
.haspro-chat-header button{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;padding:5px;transition:.3s}
.haspro-chat-header .back-btn:hover{background-color:transparent}
.haspro-chat-header .close-btn:hover{transform:rotate(90deg)}
.haspro-chat-header .home-main-chat-box.chat-box-content{display:block;padding:15px 20px 10px 20px}
.haspro-chat-header .home-main-chat-box.chat-box-content span{display:inline-block;font-size:22px;font-weight:500}
.haspro-chat-header .home-main-chat-box.chat-box-content span i{color:#fffb3a}
.haspro-chat-header .home-main-chat-box.chat-box-content .close-btn{position:absolute;right:15px;top:7px}
.haspro-chat-header .home-main-chat-box.chat-box-content h3{font-size:15px;font-weight:500;line-height:24px;color:#fff;padding:10px 0}
.haspro-chat-header .specific-chat-box-content.chat-box-content{
    padding:2px 20px;
    background: linear-gradient(135deg, #1154b8 0%, #3ea1ff 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
}
.haspro-chat-header .specific-chat-box-content.chat-box-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
.haspro-chat-header .specific-chat-box-content.chat-box-content h3{
    font-size:15px;
    font-weight:500;
    line-height:24px;
    color:#fff;
    position: relative;
}
.haspro-chat-body{flex-grow:1;padding:20px;overflow-y:auto;background-color:#f6fbff}
.haspro-message{max-width:88%;display:flex;margin-bottom:15px;word-break:break-word}
.haspro-message .avatar{width:35px;height:35px;border-radius:50%;margin-right:10px;object-fit:cover;object-position:center}
.haspro-message .text{padding:12px 15px;border-radius:18px;font-size:15px;line-height:1.4}
.haspro-message.user{margin-left:auto;flex-direction:row-reverse}
.haspro-message.user .avatar{margin-left:10px;margin-right:0;background:#ccc}
.haspro-message.user .text{color:#000;background-color:#def1ed;border-bottom-right-radius:4px}
.haspro-message.bot .text{background:#f0f7f5;color:#121c19;border-bottom-left-radius:4px}
.haspro-message.bot .text li,.haspro-message.bot .text p{margin:7px 0}
.haspro-message.bot .text a{display:block;font-weight:500;color:#1579c1;padding:5px 0}
.haspro-message.bot .text b{color:#000;font-weight:500}
.haspro-message.bot .text ol,.haspro-message.bot .text ul{padding:0 0 0 8px}
.haspro-message.bot .text ul{margin:10px 0}
.haspro-message.bot .text li,.haspro-message.bot .text ol,.haspro-message.bot .text ul{font-size:15px}
.haspro-message.typing-indicator .text{padding:12px 15px}
.typing-dot{height:8px;width:8px;background-color:#aaa;border-radius:50%;display:inline-block;margin:0 2px;animation:typing-bounce 1.3s infinite ease-in-out}
.typing-dot:nth-child(2){animation-delay:-1.1s}
.typing-dot:nth-child(3){animation-delay:-.9s}
@keyframes typing-bounce{
0%,100%,60%{transform:translateY(0)}
30%{transform:translateY(-5px)}}
.haspro-action-links-inline{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-bottom:15px}
.haspro-action-links-inline button{border:none;width:auto!important;background:#eff3f1;border-radius:5px;padding:5px;color:#4e4e4e;font-weight:500;font-size:14px;cursor:pointer}
.haspro-action-links-inline button:hover{color:#000;background:inherit}
.haspro-chat-footer{padding:15px;background:#fff;flex-shrink:0;background-color:#fdffff}
.haspro-chat-footer .input-area{display:flex;align-items:center;border:1px solid #ccc;border-radius:25px;padding:5px 5px 5px 15px}
.haspro-chat-footer input#haspro-user-input{height:32px;font-size:14px;flex-grow:1;border:none;outline:0;background:0 0;box-sizing:border-box}
.haspro-chat-footer .voice-btn{
    height:35px;
    font-size:16px;
    border:none;
    background: linear-gradient(135deg, #1154b8 0%, #3ea1ff 100%);
    color:#fff;
    cursor:pointer;
    margin-right:5px;
    line-height:1;
    box-sizing:border-box;
    transition:all 0.3s ease;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(14,45,95,0.15);
    position: relative;
    overflow: hidden;
}
.haspro-chat-footer .voice-btn:hover{
    background: linear-gradient(135deg, #06306a 0%, #1154b8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14,45,95,0.25);
}
.haspro-chat-footer .voice-btn.recording{
    background: linear-gradient(135deg, #dc3545 0%, #ff4d5d 100%);
    animation: recording-pulse 1s infinite;
    box-shadow: 0 2px 12px rgba(220,53,69,0.3);
}
.haspro-chat-footer .voice-btn.recording:hover{
    background: linear-gradient(135deg, #c82333 0%, #dc3545 100%);
    box-shadow: 0 4px 15px rgba(220,53,69,0.4);
}
.haspro-chat-footer .send-btn{
    width:35px;
    height:35px;
    font-size:20px;
    border-radius:50%;
    border:none;
    background: linear-gradient(135deg, #1154b8 0%, #3ea1ff 100%);
    color:#fff;
    cursor:pointer;
    padding:3px;
    line-height:1;
    box-sizing:border-box;
    transition:all 0.3s ease;
    box-shadow: 0 2px 8px rgba(14,45,95,0.15);
    position: relative;
    overflow: hidden;
}
.haspro-chat-footer .send-btn:hover{
    background: linear-gradient(135deg, #06306a 0%, #1154b8 100%);
    transform: translateY(-1px) rotate(45deg);
    box-shadow: 0 4px 12px rgba(14,45,95,0.25);
}

/* Voice recording states */
.haspro-chat-footer .input-area.recording .send-btn{display:none}
.haspro-chat-footer .input-area.recording input{background-color:#fff5f5;border-color:#dc3545}
.haspro-chat-footer .input-area.recording{border-color:#dc3545;box-shadow:0 0 5px rgba(220, 53, 69, 0.3)}

/* Recording indicator */
.recording-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #dc3545;
    border-radius: 50%;
    margin-right: 8px;
    animation: recording-pulse 1s infinite;
}

@keyframes recording-pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* Play voice button styles */
.play-voice-btn {
    background: none;
    border: none;
    color: #20a6ab;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    border-radius: 0;
    transition: all 0.2s ease;
    opacity: 0.6;
    vertical-align: middle;
    line-height: 1;
}

.play-voice-btn:hover {
    background: none;
    opacity: 1;
    transform: scale(1.05);
}

.play-voice-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.play-voice-btn i {
    pointer-events: none;
    font-size: 10px;
}
.haspro-chat-footer .upload-area{
    text-align:center;
    padding:15px 0;
    border:1px dashed rgba(17,84,184,0.2);
    border-radius: 12px;
    background: linear-gradient(to bottom, rgba(246,251,255,0.5), rgba(255,255,255,0.5));
    box-shadow: inset 0 2px 4px rgba(14,45,95,0.05);
}
.haspro-chat-footer .upload-area input[type=file]{display:none}
.haspro-chat-footer .upload-area label{
    width:95%;
    display:inline-block;
    font-size:14px;
    font-weight:500;
    padding:10px 24px;
    background: linear-gradient(135deg, #1154b8 0%, #3ea1ff 100%);
    color:#fff;
    border-radius:30px;
    cursor:pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(14,45,95,0.15);
    position: relative;
    overflow: hidden;
}
.haspro-chat-footer .upload-area label:hover{
    background: linear-gradient(135deg, #06306a 0%, #1154b8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14,45,95,0.25);
}
.haspro-chat-footer .upload-area label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.haspro-chat-footer .upload-area label:hover::before {
    opacity: 1;
}
.haspro-chat-footer .upload-area #cv-upload-status{
    font-size:14px;
    font-weight:500;
    font-style:italic;
    color:#1154b8;
    margin-top:8px;
    opacity: 0.8;
}

@media (max-width:480px){
.haspro-chat-window{width:100%;height:100%;bottom:0;right:0;border-radius:0;max-height:none}
.haspro-launcher{bottom:10px;right:10px}
#haspro-chatbot-container{bottom:0;right:0}}


/* Chat window main layout fix */
.haspro-chat-window.open {
    display: flex;
    flex-direction: column;   /* Header, body, footer stacked */
    height: 80vh;
    overflow: hidden;
}

/* Header always visible */
.haspro-chat-header {
    flex-shrink: 0;
    z-index: 10;
    position: relative;
}

/* Specific Chat Box Header Alignment */
.haspro-chat-header .specific-chat-box-content.chat-box-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: linear-gradient(135deg, #1154b8 0%, #3ea1ff 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
    min-height: 50px;
}

/* Title centered */
.haspro-chat-header .specific-chat-box-content.chat-box-content h3.spc-header-title {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    flex-grow: 1;
    text-align: center;
}

/* Header buttons */
.haspro-chat-header .specific-chat-box-content.chat-box-content button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
}
.haspro-chat-header .specific-chat-box-content.chat-box-content button:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}

/* Body scrolls only */
.haspro-chat-window.open .haspro-chat-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px 20px;
    background-color: #f6fbff;
}

/* Footer fixed */
.haspro-chat-footer {
    flex-shrink: 0;
    padding: 10px;
    background: #fff;
    border-top: 1px solid #ddd;
}